/* =====================================================================
   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; }
.faqbot-toggle { bottom: 16px; }

/* 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 and footer at every
   breakpoint: same max-widths and 12px gutter. The footer slab shares these widths. */
.home-wrap,
.home-footer__wrap {
    width: 100%;
    margin-inline: auto;
    padding-inline: 0.75rem;
}
@media (min-width: 576px)  { .home-wrap, .home-footer__wrap { max-width: 540px; } }
@media (min-width: 768px)  { .home-wrap, .home-footer__wrap { max-width: 720px; } }
@media (min-width: 992px)  { .home-wrap, .home-footer__wrap { max-width: 960px; } }
@media (min-width: 1200px) { .home-wrap, .home-footer__wrap { max-width: 1140px; } }
@media (min-width: 1400px) { .home-wrap, .home-footer__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;
}
.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;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}
/* clean icon-left cards (replaces the old hairline "spreadsheet" grid) */
.home-adv li {
    display: flex;
    align-items: center;
    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;
}

/* ============================ 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);
}

/* ========================= 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 =========================== */
@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-adv { grid-template-columns: repeat(2, 1fr); }
}
@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: 480px) {
    .home-adv { grid-template-columns: 1fr; }
    .home-hero__cta .home-btn { width: 100%; justify-content: center; }
}

/* ============================ footer ==============================
   Lives in base.html's base_footer block, OUTSIDE the .home wrapper
   and OUTSIDE the centered .container — so it is full-bleed by default
   (no 100vw breakout needed). home.css only loads on /home, so these
   top-level .home-footer rules never reach other pages' base footer.
   A deep ink slab anchors the otherwise-light page.                  */
.home-footer {
    --fg: #c2cad6;          /* body text on dark */
    --fg-dim: #8d97a8;      /* muted */
    --fg-strong: #eef1f6;   /* headings / hover */
    background:
        radial-gradient(120% 140% at 0% 0%, #1b2330, #11151c 60%);
    color: var(--fg);
    font-size: 0.95rem;
}

.home-footer__wrap {
    /* width / max-width / centering shared with .home-wrap (Bootstrap container mirror) */
    padding: clamp(44px, 6vh, 64px) 0.75rem clamp(20px, 2.5vh, 28px);
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: clamp(36px, 6vw, 88px);
}

/* ---- brand block ---- */
.home-footer__logo {
    display: inline-block;
    font-weight: 800;
    font-size: 1.55rem;
    line-height: 1;        /* tighten leading so the wordmark sits up level with the column heads */
    letter-spacing: -0.02em;
    color: var(--fg-strong);
    text-decoration: none;
}
.home-footer__logo-accent { color: var(--my-red, #bf4342); }

.home-footer__tagline {
    margin: 0.8rem 0 1.2rem;
    max-width: 30ch;
    color: var(--fg-strong);
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.6;
}

.home-footer__contact {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.home-footer__line {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: var(--fg);
    text-decoration: none;
    line-height: 1.5;
}
.home-footer__line i {
    color: var(--my-red, #bf4342);
    font-size: 1rem;
    line-height: 1.5;
    flex: none;
}
a.home-footer__line:hover { color: var(--fg-strong); }
a.home-footer__line:hover i { filter: brightness(1.25); }
/* small muted qualifier, e.g. the "DE / EN" call-centre language note */
.home-footer__hint {
    color: var(--fg-dim);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    margin-left: 0.35rem;
}

/* ---- social icons (bare glyphs, no button chrome) ---- */
.home-footer__social {
    display: flex;
    gap: 1rem;
    margin-top: 1.1rem;
}
.home-footer__social-btn {
    display: inline-flex;
    color: var(--fg-dim);
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    transition: color 0.15s ease;
}
.home-footer__social-btn--yt:hover { color: #ff0033; }
.home-footer__social-btn--li:hover { color: #0a66c2; }

/* ---- link columns ---- */
.home-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 48px);
}
.home-footer__head {
    font-family: var(--mono);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--my-red, #bf4342);
    margin: 0 0 1.1rem;
}
.home-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.home-footer__col a {
    display: inline-flex;
    align-items: flex-start;     /* keep the icon on the first line when a long label wraps */
    gap: 0.55rem;
    line-height: 1.4;
    color: var(--fg);
    text-decoration: none;
    transition: color 0.15s ease;
    overflow-wrap: break-word;   /* long localized labels wrap instead of overflowing the column */
}
.home-footer__col a i {
    flex: none;
    font-size: 1.05rem;
    color: var(--fg-dim);
    transition: color 0.15s ease;
}
.home-footer__col a:hover { color: var(--fg-strong); text-decoration: underline; }
.home-footer__col a:hover i { color: var(--fg-strong); }

/* ---- bottom bar ---- */
.home-footer__bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.home-footer__bar-inner {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: clamp(13px, 2vh, 18px);
    padding-bottom: clamp(13px, 2vh, 18px);
}
.home-footer__copy {
    color: var(--fg-dim);
    font-size: 0.85rem;
}
.home-footer__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--fg-dim);
    font-size: 0.85rem;
}
.home-footer__lang select {
    background: rgba(255, 255, 255, 0.06);
    color: var(--fg);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px;
    padding: 0.3rem 0.6rem;
    font: inherit;
    cursor: pointer;
}
.home-footer__lang select:hover { border-color: rgba(255, 255, 255, 0.3); }
/* the open dropdown list is native-themed (white popup), so force a
   readable dark-on-white for the options instead of the light --fg */
.home-footer__lang option { color: #161b24; background: #fff; }

@media (max-width: 860px) {
    /* stack the brand block above the link columns; the columns stay a
       single 3-up row (≥561px) so there are no half-empty grid cells.
       :not(__bar-inner) — the bottom bar reuses .home-footer__wrap only for
       width/centering and must keep its own (small) vertical padding + gap. */
    .home-footer__wrap:not(.home-footer__bar-inner) {
        grid-template-columns: 1fr;
        gap: clamp(28px, 6vw, 40px);
        padding-top: clamp(40px, 7vh, 64px);
    }
}
@media (max-width: 560px) {
    /* phones: one clean vertical stack — 3-up would leave a tall hole under
       the single-item Solutions column, which read as "strange + big gaps" */
    .home-footer__cols { grid-template-columns: 1fr; gap: 28px; }
    .home-footer__bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
}