/* =====================================================================
   home.css — landing page ("survey-instrument readout" aesthetic, light)
   Loaded only on /home via the home.html head_additional block.
   Everything is scoped under .home so the shared navbar/footer that
   live in base.html are never affected.
   Theme: light paper surfaces, a faint blueprint grid + point-cloud-dot
   texture, a monospace technical voice, per-feature accent gradients
   (brand red --my-red is the default accent), viewport-framed demos.
   Accent gradients carry the punch; small accent text uses --accent-ink
   (the same hue darkened) so every feature colour reads on white.
   ===================================================================== */

.home {
    /* ---- light palette ---- */
    --paper: #ffffff;
    --paper-2: #f4f6f9;     /* subtle cool off-white band */
    --paper-3: #eceff4;     /* deeper tint for hovers / demo floor */
    --panel: #ffffff;       /* card / demo surface */
    --panel-2: #f1f4f8;
    --line: rgba(22, 27, 36, 0.10);
    --line-2: rgba(22, 27, 36, 0.15);
    --txt: #161b24;         /* near-black slate */
    --txt-dim: #515b6b;
    --txt-faint: #6e7686;
    --brand: var(--my-red, #bf4342);

    /* single light brand-red accent shared by every card (was per-feature) */
    --accent: #cf5246;
    --accent-2: #e8836b;
    /* darkened, on-hue accent that stays legible as text on white;
       auto-derives from whatever --accent a feature sets inline, because
       the nested var(--accent) is resolved at the point of use. */
    --accent-ink: color-mix(in srgb, var(--accent) 70%, #15181f);

    --mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono",
        Menlo, Consolas, "Liberation Mono", monospace;

    position: relative;
    background: var(--paper);
    color: var(--txt);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
}

/* home.css is only loaded on /home, so this global guard is page-scoped:
   clip the tiny horizontal overflow created by the 100vw full-bleed bands
   (100vw includes the scrollbar width). Must live on body, not .home,
   because the bands are intentionally wider than the .home wrapper. */
body {
    overflow-x: clip;
    padding-bottom: 0 !important;
}

#base-main { margin-top: 0 !important; }

/* Full-bleed band: breaks out of base.html's centered .container.
   Canonical "100vw escape" — works because the container is centered. */
.home-band {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Mirror Bootstrap 5.3's responsive .container (base.html wraps every other page
   in one) so the /home content column lines up with the navbar at every breakpoint:
   same max-widths and 12px gutter. (The footer slab uses the same mirror, declared
   on .home-footer__wrap in the shared footer-big.css.) */
.home-wrap {
    width: 100%;
    margin-inline: auto;
    padding-inline: 0.75rem;
}
@media (min-width: 576px)  { .home-wrap { max-width: 540px; } }
@media (min-width: 768px)  { .home-wrap { max-width: 720px; } }
@media (min-width: 992px)  { .home-wrap { max-width: 960px; } }
@media (min-width: 1200px) { .home-wrap { max-width: 1140px; } }
@media (min-width: 1400px) { .home-wrap { max-width: 1320px; } }

.home a {
    color: var(--accent-ink);
    text-decoration: none;
}
.home a:hover { text-decoration: underline; }

/* small monospace technical label, e.g.  // 02 — POINT CLOUDS  */
.home-kicker {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--txt-faint);
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
}
.home-kicker::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ======================= shared textures ============================ */
/* faint coordinate grid + point-cloud dot scatter (dark on light)     */
.home-grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at center, rgba(22, 27, 36, 0.55) 0.6px, transparent 0.7px),
        linear-gradient(rgba(22, 27, 36, 1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 27, 36, 1) 1px, transparent 1px);
    background-size: 26px 26px, 78px 78px, 78px 78px;
    background-position: 0 0, 0 0, 0 0;
    opacity: 0.05;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 80%);
}

/* ============================ buttons =============================== */
.home-btn {
    --b-bg: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.85em 1.6em;
    border-radius: 11px;
    font-family: inherit;   /* native <button> otherwise falls back to a system font */
    font-weight: 650;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.2s ease, border-color 0.2s ease;
    text-decoration: none !important;
    white-space: nowrap;
    max-width: 100%;        /* never let a long localized label push the button past its container */
    text-align: center;
}
.home-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.home-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 10px 26px -12px var(--accent),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
a.home-btn--primary {
    color: #fff;
}
.home-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px -14px var(--accent),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    color: #fff;
}
.home-btn--ghost {
    color: var(--txt);
    background: var(--paper);
    border-color: var(--line-2);
    box-shadow: 0 1px 2px rgba(22, 27, 36, 0.05);
}
.home-btn--ghost:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    color: var(--accent-ink);
    background: color-mix(in srgb, var(--accent) 8%, var(--paper));
}

/* ============================== HERO =============================== */
.home-hero {
    --accent: #cf5246;
    --accent-2: #e8836b;
    background:
        radial-gradient(120% 90% at 82% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
        radial-gradient(90% 80% at 8% 110%, rgba(58, 159, 208, 0.12), transparent 60%),
        linear-gradient(180deg, var(--paper-2), var(--paper));
    overflow: hidden;
    padding: clamp(56px, 11vh, 132px) 0 clamp(48px, 8vh, 92px);
    border-bottom: 1px solid var(--line);
}
/* oversized faint registration target, bottom-right of hero */
.home-hero::after {
    content: "";
    position: absolute;
    width: min(46vw, 560px);
    height: min(46vw, 560px);
    right: -8%;
    bottom: -34%;
    border-radius: 50%;
    border: 1px solid rgba(22, 27, 36, 0.07);
    background:
        linear-gradient(rgba(22, 27, 36, 0.06) 1px, transparent 1px) center / 100% 50%,
        linear-gradient(90deg, rgba(22, 27, 36, 0.06) 1px, transparent 1px) center / 50% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}
.home-hero .home-wrap { position: relative; z-index: 1; }

.home-hero__eyebrow { margin-bottom: 1.4rem; }

.home-hero__title {
    font-size: clamp(2.5rem, 6.6vw, 5.1rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 800;
    margin: 0 0 1.4rem;
    color: var(--txt);
}
.home-hl {
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* background-clip:text clips to the glyph advance; the title's negative
       letter-spacing trims the right edge, cutting overshooting glyphs like
       "?". A hair of right padding widens the paint box (compensated by an
       equal negative margin so layout/centring is unchanged). */
    padding-right: 0.12em;
    margin-right: -0.12em;
}
.home-hero__lead {
    font-size: clamp(1.06rem, 1.9vw, 1.34rem);
    color: var(--txt-dim);
    max-width: 62ch;
    margin: 0 0 2.2rem;
}
.home-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
}
/* reassurance microcopy under the hero CTA (anon only) */
.home-hero__note {
    margin: 1.15rem 0 0;
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--txt-faint);
}

/* ======================= format ticker strip ====================== */
.home-ticker {
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.9rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    /* hand-scrollable: mouse drag (JS) + native touch swipe with momentum */
    cursor: grab;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    user-select: none;
    -webkit-user-select: none;
    scrollbar-width: none;            /* Firefox: hide the scrollbar */
}
.home-ticker::-webkit-scrollbar { display: none; }   /* WebKit/Blink: hide the scrollbar */
.home-ticker.is-grabbing { cursor: grabbing; }
.home-ticker__track {
    display: flex;
    width: max-content;
}
.home-ticker__group {
    display: flex;
    align-items: center;
    flex: none;
}
.home-ticker__item {
    font-family: var(--mono);
    font-size: 0.92rem;
    letter-spacing: 0.12em;
    color: var(--txt-faint);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
/* featured formats — bold brand red so the eye catches them in the stream */
.home-ticker__item--hot {
    color: var(--brand);
    font-weight: 700;
}
.home-ticker__item::after {
    content: "+";
    margin: 0 1.3rem;
    color: var(--brand);
    opacity: 0.5;
}

/* ==================== feature section heading ===================== */
.home-section {
    background: var(--paper);
    padding: clamp(54px, 9vh, 104px) 0 clamp(40px, 6vh, 72px);
    position: relative;
}
.home-section__head {
    max-width: 720px;
    margin-bottom: clamp(8px, 3vh, 26px);
}
.home-section__title {
    font-size: clamp(1.8rem, 3.6vw, 2.9rem);
    font-weight: 780;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--txt);
    margin: 1rem 0 0.7rem;
}
.home-section__sub {
    color: var(--txt-dim);
    font-size: 1.1rem;
    max-width: 60ch;
}

/* ====================== alternating features ====================== */
.home-features {
    background: var(--paper);
    padding-bottom: clamp(40px, 7vh, 84px);
}
.home-feature {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;   /* demo is the left column — give it more room so the viewer reads larger */
    gap: clamp(28px, 5vw, 76px);
    align-items: center;
    padding: clamp(40px, 6.5vh, 86px) 0;
    border-top: 1px solid var(--line);
}
.home-feature:first-child { border-top: none; }
/* Fixed layout (no zig-zag): the demo is first in the DOM, so it sits on the
   left with the text on the right on every row. Mobile flips the order so the
   text comes first, then the demo below it (see the responsive block). */
.home-feature__body { min-width: 0; }
.home-feature__title {
    font-size: clamp(1.65rem, 3.2vw, 2.5rem);
    font-weight: 760;
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: var(--txt);
    margin: 0.9rem 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.home-feature__emoji {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    color: var(--accent-ink);            /* monochrome bi-icon takes the feature accent */
    font-size: 1.4rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 15%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    box-shadow: 0 8px 22px -10px var(--accent);
}
.home-feature__hook {
    font-family: var(--mono);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--accent-ink);
    margin: 0 0 1rem;
}
.home-feature__text {
    color: var(--txt-dim);
    font-size: 1.08rem;
    margin: 0 0 1.4rem;
    max-width: 52ch;
}

/* format / capability chips */
.home-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.home-chip {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--txt-dim);
    padding: 0.36em 0.72em;
    border-radius: 7px;
    border: 1px solid var(--line-2);
    background: var(--paper-2);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.home-feature:hover .home-chip {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2));
    color: var(--txt);
}

/* ===================== demo facade (viewport) ===================== */
.home-demo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    border: 1px solid var(--line-2);
    background:
        radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
        linear-gradient(160deg, #ffffff, var(--paper-3));
    overflow: hidden;
    padding: 0;
    text-align: left;
    color: inherit;
    font: inherit;
    box-shadow: 0 30px 60px -34px rgba(22, 27, 36, 0.45),
        0 2px 6px rgba(22, 27, 36, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.home-demo[data-demo-src] { cursor: pointer; }
.home-demo[data-demo-src]:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line-2));
    box-shadow: 0 42px 80px -38px color-mix(in srgb, var(--accent) 45%, rgba(22, 27, 36, 0.5)),
        0 2px 6px rgba(22, 27, 36, 0.06);
}
.home-demo:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
/* instrument title bar */
.home-demo__bar {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 4;            /* above the poster + darkening so the route/LIVE stay readable */
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.85rem;
    background: linear-gradient(180deg, rgba(8, 12, 18, 0.66), rgba(8, 12, 18, 0.12) 72%, transparent);
}
.home-demo__route {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* real-screenshot poster (shown until the iframe loads) */
.home-demo__stage { position: absolute; inset: 0; }
.home-demo__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}
/* slight darkening so the play button reads on any screenshot */
.home-demo__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 48%,
        rgba(10, 14, 20, 0.30), rgba(10, 14, 20, 0.16) 62%, rgba(10, 14, 20, 0.22));
    transition: background 0.3s ease;
}
.home-demo[data-demo-src]:hover .home-demo__stage::after {
    background: radial-gradient(circle at 50% 48%,
        color-mix(in srgb, var(--accent) 22%, rgba(10, 14, 20, 0.30)),
        rgba(10, 14, 20, 0.16) 62%, rgba(10, 14, 20, 0.24));
}
/* centred circular play button */
.home-demo__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: grid;
    place-items: center;
    width: clamp(54px, 8.5vw, 72px);
    height: clamp(54px, 8.5vw, 72px);
    padding-left: 0.12em;            /* optically centre the play glyph in the circle */
    border-radius: 50%;
    font-size: clamp(1.15rem, 2.4vw, 1.55rem);
    color: #fff;
    background: var(--accent);            /* the uniform light brand red */
    border: 2px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.2s ease;
}
.home-demo[data-demo-src]:hover .home-demo__play {
    transform: translate(-50%, -50%) scale(1.09);
    background: color-mix(in srgb, var(--accent) 88%, #000);   /* deepen slightly on hover */
    box-shadow: 0 18px 42px -12px color-mix(in srgb, var(--accent) 60%, #000);
}
/* animated scan-line that sweeps the poster on hover */
.home-demo__scan {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 38%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg,
        transparent,
        color-mix(in srgb, var(--accent) 18%, transparent) 70%,
        color-mix(in srgb, var(--accent) 42%, transparent));
    border-bottom: 1px solid var(--accent);
    transform: translateY(-110%);
}
.home-demo[data-demo-src]:hover .home-demo__scan {
    opacity: 1;
    animation: home-scan 2.4s ease-in-out infinite;
}
@keyframes home-scan {
    0% { transform: translateY(-110%); }
    100% { transform: translateY(360%); }
}
/* the hover scan-sweep is decorative motion — silence it for reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .home-demo[data-demo-src]:hover .home-demo__scan { animation: none; }
}
/* the loaded iframe fills the stage */
.home-demo__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 6;            /* above poster, darkening, brackets, bar and play button */
    background: var(--paper-2);
}
.home-demo[data-loaded] .home-demo__poster,
.home-demo[data-loaded] .home-demo__play,
.home-demo[data-loaded] .home-demo__scan,
.home-demo[data-loaded] .home-demo__stage::after { display: none; }
.home-demo[data-loaded] .home-demo__bar { opacity: 0; pointer-events: none; }

/* ========================= advantages ============================= */
.home-adv-band {
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: clamp(50px, 8vh, 96px) 0;
}
.home-adv {
    list-style: none;
    margin: clamp(20px, 3vh, 40px) 0 0;
    padding: 0;
    display: grid;
    /* minmax(0, 1fr) — not bare 1fr — so tracks can shrink below their content's
       longest word; long localized labels (RU/DE) otherwise force the 4-up grid
       wider than the container and the last column clips off-screen. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}
/* clean icon-left cards (replaces the old hairline "spreadsheet" grid) */
.home-adv li {
    display: flex;
    align-items: center;
    min-width: 0;            /* let the card (and its label) shrink inside the track */
    gap: 0.9rem;
    padding: 1.05rem 1.15rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 15px;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.home-adv li:hover {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(22, 27, 36, 0.07);
}
.home-adv__icon {
    flex: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--brand);
    width: 2.7rem; height: 2.7rem;
    display: grid; place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand) 11%, #fff);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
    transition: background 0.2s ease;
}
.home-adv li:hover .home-adv__icon { background: color-mix(in srgb, var(--brand) 18%, #fff); }
.home-adv__icon svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}
.home-adv__label {
    font-weight: 600;
    color: var(--txt);
    font-size: 0.98rem;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;   /* a single very long word breaks instead of overflowing the card */
}

/* ====================== hosting / deployment ======================
   Three deployment models (SaaS / Dedicated / Self-Hosted) lifted from
   the brand deck. Slide-5 "comparison" layout rebuilt in the page's own
   card + mono-kicker vocabulary; the per-card hexagon glyphs are the
   deck's own icons, recoloured to the accent (static/images/home-host-*). */
.home-host-band {
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: clamp(54px, 9vh, 104px) 0 clamp(48px, 8vh, 96px);
}
.home-host {
    display: grid;
    /* minmax(0, 1fr) keeps all three cards exactly equal regardless of text
       length; bare 1fr lets the card with the longest word (e.g. a long
       localized model name) grab extra width, which also scaled its icon up. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
    margin-top: clamp(26px, 4vh, 48px);
    align-items: stretch;
}
.home-host__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;                /* allow the equal track to govern width, not the content */
    overflow-wrap: anywhere;     /* long localized names/labels wrap instead of overflowing */
    padding: clamp(26px, 3.2vw, 40px) clamp(20px, 2.4vw, 32px);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 18px 44px -30px rgba(22, 27, 36, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.3s ease;
}
.home-host__card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--accent) 40%, rgba(22, 27, 36, 0.5));
}
/* the brand hexagon glyph (extracted + recoloured from the deck) — sized to
   span the full card width; the hexagons share a ~473:528 ratio so a fixed
   aspect box keeps all three the same footprint and the names aligned */
.home-host__icon {
    width: 66.67%;             /* a third smaller than full card width; centred by the card's align-items */
    aspect-ratio: 480 / 540;   /* shared canvas: all three glyphs normalised to one size */
    margin: 0 0 0.4rem;
}
.home-host__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.home-host__name {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 760;
    letter-spacing: -0.02em;
    color: var(--txt);
    margin: 0.2rem 0 0.35rem;
}
.home-host__tagline {
    font-family: var(--mono);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    color: var(--accent-ink);
    margin: 0 0 0.2rem;
}
.home-host__full {
    font-size: 0.86rem;
    color: var(--txt-faint);
    margin: 0 0 1.2rem;
}
.home-host__specs {
    width: 100%;
    margin: 0;
    text-align: left;
}
/* each spec gets a hairline divider above it (the first one doubles as the
   rule under the card header, echoing the deck's comparison table) */
.home-host__spec {
    padding: 0.7rem 0;
    border-top: 1px solid var(--line);
}
.home-host__spec dt {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--txt-faint);
    margin-bottom: 0.2rem;
}
.home-host__spec dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 560;
    color: var(--txt);
}
/* the deck's per-model detail (slides 2–4) crammed in as a compact small-text
   list, with a CSS-drawn accent check before each point */
.home-host__features {
    list-style: none;
    width: 100%;
    text-align: left;
    margin: 0 0 1.25rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0.7rem;
}
.home-host__features li {
    position: relative;
    padding-left: 1.45rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--txt-faint);
}
.home-host__features li::before {
    content: "";
    position: absolute;
    left: 0.3rem;
    top: 0.18em;
    width: 0.34em;
    height: 0.62em;
    border: solid var(--accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.home-host__features strong {
    display: block;        /* label on its own line; the pale description drops below */
    color: var(--txt);
    font-weight: 650;
    margin-bottom: 0.1rem;
}
/* the "hook" — the one-line pitch per model, in accent red so it stands out.
   margin-top:auto pins it to the card foot so all three line up even when the
   cards above it run to different heights */
.home-host__summary {
    margin: auto 0 0;
    padding-top: 1rem;
    border-top: 2px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    font-size: 0.95rem;
    font-style: italic;
    color: var(--accent-ink);
}
@media (max-width: 991px) {
    /* Below the 960px content column three host cards get too narrow for their
       spec table + feature list — drop straight to a single readable column. */
    .home-host {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        max-width: 460px;
        margin-inline: auto;
    }
}

/* ===================== standout capabilities ===================== */
/* Data-driven card grid (templates/home.html `highlights` list). Built to
   grow: the flagship card spans two columns, the rest flow in a 3-up grid. */
.home-hl-band {
    background: var(--paper);
    padding: clamp(54px, 9vh, 104px) 0;
    border-top: 1px solid var(--line);
}
.home-hl-grid {
    margin-top: clamp(24px, 4vh, 46px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}
.home-hl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
    overflow-wrap: anywhere;   /* titles/body wrap in any language instead of overflowing */
    padding: clamp(1.2rem, 2vw, 1.7rem);
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.home-hl-card:hover {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(22, 27, 36, 0.08);
}
/* flagship card: wider, accented */
.home-hl-card--featured {
    grid-column: span 2;
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 60%),
        var(--paper-2);
    border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
}
.home-hl-card__icon {
    flex: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--brand);
    width: 2.9rem; height: 2.9rem;
    display: grid; place-items: center;
    border-radius: 13px;
    background: color-mix(in srgb, var(--brand) 11%, #fff);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}
.home-hl-card--featured .home-hl-card__icon { font-size: 1.7rem; width: 3.2rem; height: 3.2rem; }
.home-hl-card__badge {
    position: absolute;
    top: clamp(1.2rem, 2vw, 1.7rem);
    right: clamp(1.2rem, 2vw, 1.7rem);
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand);
    padding: 0.32em 0.72em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}
.home-hl-card__title {
    font-size: 1.18rem;
    font-weight: 720;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--txt);
    margin: 0;
}
.home-hl-card--featured .home-hl-card__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.home-hl-card__text {
    color: var(--txt-dim);
    font-size: 0.98rem;
    margin: 0;
}
.home-hl-card--featured .home-hl-card__text { font-size: 1.05rem; max-width: 62ch; }
/* inline <code> inside a card's body text (e.g. the white-label subdomain) */
.home-hl-card__text code {
    font-family: var(--mono);
    font-size: 0.86em;
    padding: 0.1em 0.4em;
    border-radius: 6px;
    background: color-mix(in srgb, var(--brand) 8%, var(--paper-3));
    border: 1px solid var(--line);
    white-space: nowrap;
}
/* pin tags to the bottom so cards in a row align */
.home-hl-card__tags { margin-top: auto; padding-top: 0.35rem; }
/* "Read the API guide"-style call-to-action link under a card */
.home-hl-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;   /* pin to bottom when the card has no tags */
    font-size: 0.92rem;
    font-weight: 640;
    color: var(--brand);
    text-decoration: none;
}
.home-hl-card__tags + .home-hl-card__link { margin-top: 0.7rem; }
.home-hl-card__link i { transition: transform 0.2s ease; }
.home-hl-card__link:hover { text-decoration: underline; }
.home-hl-card__link:hover i { transform: translateX(3px); }

/* ===================== platforms (runs everywhere) ================ */
.home-platforms-band {
    background: var(--paper-2);   /* grey band; cards inside go white for contrast */
    padding: clamp(50px, 8vh, 96px) 0;
    border-top: 1px solid var(--line);
}
.home-platforms {
    list-style: none;
    margin: clamp(22px, 4vh, 44px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.85rem;
}
/* centred icon-over-label cards, same hover language as the advantages grid */
.home-platforms li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.4rem 0.9rem;
    text-align: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 15px;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.home-platforms li:hover {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(22, 27, 36, 0.07);
}
.home-platform__icon {
    flex: none;
    font-size: 1.85rem;
    line-height: 1;
    color: var(--brand);
    width: 3.2rem; height: 3.2rem;
    display: grid; place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--brand) 11%, #fff);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
    transition: background 0.2s ease;
}
.home-platforms li:hover .home-platform__icon { background: color-mix(in srgb, var(--brand) 18%, #fff); }
.home-platform__label {
    font-weight: 600;
    color: var(--txt);
    font-size: 0.95rem;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* dense SEO paragraph: real, readable copy (not hidden text) naming the
   format × platform combinations people actually search for. */
.home-platforms__seo {
    margin: clamp(22px, 4vh, 40px) auto 0;
    max-width: 80ch;
    text-align: center;
    color: var(--txt-faint);
    font-size: 0.98rem;
}

/* ============================ stats =============================== */
.home-stats-band {
    background:
        radial-gradient(80% 140% at 50% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%),
        var(--paper);
    padding: clamp(54px, 9vh, 104px) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--line);
}
.home-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 4vw, 56px);
    margin-top: clamp(22px, 4vh, 44px);
}
.home-stat { position: relative; }
.home-stat + .home-stat::before {
    content: "";
    position: absolute;
    left: calc(-1 * clamp(10px, 2vw, 28px));
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: var(--line);
}
.home-stat__num {
    font-family: var(--mono);
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.home-stat__label {
    margin-top: 0.7rem;
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--txt-faint);
}
/* small maturity/trust line under the three counters */
.home-stats__note {
    margin: clamp(20px, 3.5vh, 36px) auto 0;
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--txt-faint);
}

/* ========================= final CTA ============================== */
.home-cta-band {
    --accent: #cf5246;
    --accent-2: #e8836b;
    background:
        radial-gradient(90% 130% at 50% 120%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
        linear-gradient(180deg, var(--paper), var(--paper-2));
    padding: clamp(64px, 11vh, 128px) 0;
    text-align: center;
    border-top: 1px solid var(--line);
}
.home-cta__title {
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.02;
    color: var(--txt);
    margin: 1rem auto 1rem;
    max-width: 18ch;
}
.home-cta__sub {
    color: var(--txt-dim);
    font-size: 1.15rem;
    max-width: 48ch;
    margin: 0 auto 2.2rem;
}
.home-cta__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
}

/* ========================== contact =============================== */
.home-contact {
    background: var(--paper);
    padding: clamp(34px, 6vh, 64px) 0 clamp(48px, 8vh, 80px);
    text-align: center;
    color: var(--txt-dim);
    border-top: 1px solid var(--line);
}
/* primary action — the AI assistant carries the visual weight */
.home-contact__cta { margin-top: clamp(16px, 3.2vh, 26px); }
.home-contact__bot { font-size: 1.06rem; }
/* secondary, muted row — FAQ + email read as quieter fallbacks */
.home-contact__alt {
    margin-top: 1.3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.85rem;
    font-size: 0.98rem;
}
.home-contact__alt a { color: var(--txt-dim); }
.home-contact__alt a:hover { color: var(--accent-ink); }
.home-contact__sep { color: var(--line-2); }

/* ===================== reveal / load motion ======================= */
@media (prefers-reduced-motion: no-preference) {
    /* .home-js is set by an early inline script; without JS nothing is
       hidden, so the page degrades gracefully (no blank reveal blocks). */
    .home-js .home-reveal {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .home-js .home-reveal.in-view {
        opacity: 1;
        transform: none;
    }
    /* hero staggered load — transform-only (no opacity fade). The hero <h1> is
       the LCP element; fading it in from opacity:0 delayed Largest Contentful
       Paint by a few hundred ms in Lighthouse. Sliding-only keeps the staggered
       entrance but lets every line paint at full opacity on the first frame.
       'both' fill holds the start offset during each line's delay (no jump). */
    .home-js .home-rise {
        animation: home-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .home-js .home-rise:nth-child(1) { animation-delay: 0.05s; }
    .home-js .home-rise:nth-child(2) { animation-delay: 0.16s; }
    .home-js .home-rise:nth-child(3) { animation-delay: 0.27s; }
    .home-js .home-rise:nth-child(4) { animation-delay: 0.38s; }
    .home-js .home-rise:nth-child(5) { animation-delay: 0.49s; }
    @keyframes home-rise {
        from { transform: translateY(22px); }
        to { transform: none; }
    }
}

/* =========================== responsive =========================== */
/* Card-grid column counts step down on .home-wrap's own max-widths (540 / 720 /
   960px) so cards never get squeezed below a readable width. The dense
   capability cards are the strictest: 2-up needs the 720px column (>=768px) and
   3-up needs the 960px column (>=992px) — anything narrower crams the
   title + paragraph + chips, which is why they drop to one-per-row early. */
@media (max-width: 991px) {
    /* Below 992px the content column drops from 960px to 720px, so the widest
       grids must shed columns here or they get crammed (and, with long localized
       labels, overflow the container). Capabilities go 2-up (flagship full-row)
       and the advantages drop from 4-up to 2-up. */
    .home-hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-adv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .home-feature {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
    /* stacked: text first, then the demo below it */
    .home-feature__media { order: 1; }
    .home-platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    /* phones & narrow tablets (content column <= 540px): one capability card per
       row. 2-up here shrinks each card to ~260px and the copy becomes unreadable. */
    .home-hl-grid { grid-template-columns: 1fr; }
    .home-hl-card--featured { grid-column: auto; }
}
@media (max-width: 640px) {
    /* phones: stack the three stats vertically, drop the vertical dividers */
    .home-stats { grid-template-columns: 1fr; gap: 2rem; }
    .home-stat + .home-stat::before { display: none; }
}
@media (max-width: 600px) {
    /* On phones buttons are width-constrained (and the CTAs go full width), so a
       long localized label must wrap rather than overflow its one nowrap line. */
    .home-btn { white-space: normal; }
}
@media (max-width: 480px) {
    .home-adv { grid-template-columns: 1fr; }
    .home-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* drop the badge out of the corner so it can't collide with the title */
    .home-hl-card__badge { position: static; align-self: flex-start; }
    .home-hero__cta .home-btn { width: 100%; justify-content: center; }
    .home-cta__btns .home-btn { width: 100%; justify-content: center; }
}