/* ==========================================================================
   CINEMA HERO — "Business chaos becomes elegant software"
   A four-act opening scene. Static CSS describes the FINAL frame (Act 4);
   hero.js rewinds everything to Act 1 and plays the film.
   Inner-UI sizing uses container-query units (stage designed at 1000×700).
   ========================================================================== */

.cinema-hero {
    --ch-ink: #0A0F1E;
    --ch-slate: #5A6478;
    --ch-faint: #98A1B3;
    --ch-line: rgba(10, 15, 30, 0.08);
    --ch-cyan: #0BB7FE;
    --ch-blue: #415AFF;
    --ch-purple: #9600FF;
    --ch-magenta: #DF12FF;
    --ch-grad: linear-gradient(120deg, #0BB7FE 0%, #415AFF 42%, #9600FF 74%, #DF12FF 100%);
    --ch-card: rgba(255, 255, 255, 0.82);
    --ch-card-border: 1px solid rgba(10, 15, 30, 0.07);
    --ch-shadow-lg: 0 42px 84px -34px rgba(15, 23, 42, 0.30), 0 10px 28px -14px rgba(15, 23, 42, 0.14);
    --ch-shadow-sm: 0 18px 40px -18px rgba(15, 23, 42, 0.22), 0 4px 12px -6px rgba(15, 23, 42, 0.10);

    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 120px 0 56px;
    background: #ffffff;
    color: var(--ch-ink);
    overflow: hidden;
}

/* --- Atmosphere: white stage, gradient used only as light ------------------ */
.ch-atmosphere { position: absolute; inset: 0; pointer-events: none; }
.ch-glow { position: absolute; border-radius: 50%; filter: blur(70px); }
.ch-glow-a {
    width: 56vw; height: 56vw;
    top: -24vw; right: -16vw;
    background: radial-gradient(circle, rgba(11, 183, 254, 0.14) 0%, rgba(65, 90, 255, 0.07) 45%, transparent 70%);
    animation: chDriftA 22s ease-in-out infinite alternate;
}
.ch-glow-b {
    width: 46vw; height: 46vw;
    bottom: -26vw; left: -14vw;
    background: radial-gradient(circle, rgba(150, 0, 255, 0.11) 0%, transparent 68%);
    animation: chDriftB 26s ease-in-out infinite alternate;
}
.ch-dotgrid {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(10, 15, 30, 0.055) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 70% 65% at 62% 45%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 65% at 62% 45%, black 30%, transparent 75%);
}
@keyframes chDriftA { from { transform: translate(0, 0); } to { transform: translate(-5vw, 4vw); } }
@keyframes chDriftB { from { transform: translate(0, 0); } to { transform: translate(4vw, -3vw); } }

/* --- Layout: editorial split, huge type ----------------------------------- */
.ch-layout {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 3.5rem;
    align-items: center;
    position: relative;
    width: 100%;
}

.ch-eyebrow {
    display: flex; align-items: center; gap: 0.65rem;
    font-family: var(--font-heading);
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--ch-slate);
    margin-bottom: 2.2rem;
}
.ch-eyebrow-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--ch-grad);
    box-shadow: 0 0 0 4px rgba(65, 90, 255, 0.12);
}

.ch-headline {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 4.9vw, 5.4rem);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -0.045em;
    color: var(--ch-ink);
    margin-bottom: 2.8rem;
}
.ch-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.ch-word { display: inline-block; will-change: transform; }
.ch-grad {
    font-style: normal;
    background: var(--ch-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ch-actions { margin-bottom: 1.8rem; }
.ch-cta {
    display: inline-flex; align-items: center; gap: 0.8rem;
    padding: 1.15rem 2.7rem;
    border-radius: 999px;
    background: var(--ch-grad);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 18px 42px -16px rgba(65, 90, 255, 0.55), 0 6px 16px -8px rgba(150, 0, 255, 0.45);
    transition: box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
}
.ch-cta:hover {
    filter: brightness(1.06);
    box-shadow: 0 26px 56px -18px rgba(65, 90, 255, 0.65), 0 10px 24px -10px rgba(150, 0, 255, 0.55);
}
.ch-cta .arrow { transition: transform 0.3s ease; }
.ch-cta:hover .arrow { transform: translateX(4px); }

.ch-caption {
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    color: var(--ch-faint);
}

/* --- The stage ------------------------------------------------------------- */
.ch-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 10 / 7;
    container-type: inline-size;
    will-change: transform;
}

/* Connector web (under devices & chips) */
.ch-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.85; }
.ch-links path { opacity: 0.55; }

/* --- Chaos props (Act 1) — hidden in the final frame ----------------------- */
.ch-prop {
    position: absolute;
    z-index: 6;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.ch-sticky {
    width: 14.5cqw; padding: 1.2cqw 1.3cqw 1.6cqw;
    font-size: 1.28cqw; line-height: 1.45; font-weight: 500; font-style: italic;
    color: #6b5d1f;
    background: linear-gradient(180deg, #FFF6C9 0%, #FDEEA8 100%);
    border-radius: 0.3cqw;
    box-shadow: 0 10px 22px -10px rgba(120, 100, 20, 0.35);
}
.ch-sticky b { font-size: 1.4cqw; }
.ch-sticky::before {
    content: ''; position: absolute; top: -0.7cqw; left: 50%; transform: translateX(-50%) rotate(-2deg);
    width: 5cqw; height: 1.5cqw;
    background: rgba(190, 200, 220, 0.55);
}
.ch-sticky-1 { top: 3%; left: 11%; }
.ch-sticky-2 { top: 58%; left: 5%; }

.ch-toast {
    display: flex; align-items: center; gap: 1cqw;
    width: 25cqw; padding: 1.1cqw 1.3cqw;
    background: var(--ch-card);
    backdrop-filter: blur(14px);
    border: var(--ch-card-border);
    border-radius: 1.2cqw;
    box-shadow: var(--ch-shadow-sm);
}
.ch-toast-body { display: flex; flex-direction: column; gap: 0.25cqw; min-width: 0; }
.ch-toast-body b { font-size: 1.2cqw; color: var(--ch-ink); }
.ch-toast-body em { font-size: 1.05cqw; font-style: normal; color: var(--ch-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-wa-dot {
    flex: none; width: 2.8cqw; height: 2.8cqw; border-radius: 50%;
    display: grid; place-items: center;
    background: #25D366; color: #fff;
    font-size: 1.1cqw; font-weight: 700;
}
.ch-mail-ic {
    flex: none; width: 2.8cqw; height: 2.8cqw; border-radius: 0.8cqw;
    display: grid; place-items: center;
    background: #EEF2F8; color: var(--ch-slate);
    font-size: 1.5cqw;
}
.ch-toast-wa { top: 6%; right: 5%; }
.ch-toast-mail { bottom: 9%; left: 16%; }

.ch-paper {
    width: 19cqw; padding: 1.5cqw 1.6cqw;
    background: #FDFDFB;
    border: 1px solid rgba(10, 15, 30, 0.09);
    border-radius: 0.3cqw;
    box-shadow: 0 12px 26px -12px rgba(15, 23, 42, 0.28);
}
.ch-paper b { display: block; font-size: 1.1cqw; letter-spacing: 0.06em; color: var(--ch-ink); margin-bottom: 1cqw; }
.ch-paper i { display: block; height: 0.5cqw; background: rgba(10, 15, 30, 0.10); border-radius: 1cqw; margin-bottom: 0.7cqw; }
.ch-paper i.short { width: 60%; }
.ch-paper em { display: block; font-size: 0.95cqw; font-style: normal; color: var(--ch-faint); margin-top: 1cqw; }
.ch-paper { bottom: 5%; right: 12%; }

/* --- The artifact window (spreadsheet → dashboard → laptop screen) --------- */
.ch-device { position: absolute; inset: 0; z-index: 2; }
.ch-window {
    position: absolute;
    left: 25%; top: 10%;
    width: 50%; height: 53%;
    display: flex; flex-direction: column;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(10, 15, 30, 0.09);
    border-radius: 1.6cqw;
    box-shadow: var(--ch-shadow-lg);
    overflow: hidden;
    transition: border-radius 0.6s ease;
}
.ch-window.is-screen { border-radius: 1.6cqw 1.6cqw 0.4cqw 0.4cqw; border-color: rgba(10, 15, 30, 0.14); }

.ch-winbar {
    flex: none;
    display: flex; align-items: center; gap: 1.2cqw;
    height: 3.6cqw; padding: 0 1.4cqw;
    background: rgba(246, 248, 252, 0.9);
    border-bottom: 1px solid var(--ch-line);
}
.ch-windots { display: flex; gap: 0.55cqw; }
.ch-windots i { width: 0.95cqw; height: 0.95cqw; border-radius: 50%; background: #E1E5EE; }
.ch-windots i:nth-child(1) { background: #FF5F57; }
.ch-windots i:nth-child(2) { background: #FEBC2E; }
.ch-windots i:nth-child(3) { background: #28C840; }
.ch-wintitle { font-size: 1.12cqw; font-weight: 600; color: var(--ch-slate); letter-spacing: 0.02em; }

/* Spreadsheet (Act 1) — hidden in final frame */
.ch-sheet {
    position: absolute; inset: 3.6cqw 0 0 0;
    display: flex; flex-direction: column;
    background: #fff;
    opacity: 0; visibility: hidden;
}
.ch-fxbar {
    flex: none; display: flex; align-items: center; gap: 0.9cqw;
    height: 2.7cqw; padding: 0 1.2cqw;
    border-bottom: 1px solid var(--ch-line);
    background: #FBFCFE;
}
.ch-fxbar b { font-size: 1cqw; font-style: italic; color: var(--ch-faint); font-family: Georgia, serif; }
.ch-fxbar span { font-size: 0.98cqw; color: #B0483E; font-family: 'SF Mono', Menlo, monospace; white-space: nowrap; overflow: hidden; }
.ch-r {
    flex: 1 1 0; min-height: 0;
    display: grid; grid-template-columns: 3.4cqw repeat(4, 1fr);
    align-items: stretch;
    overflow: hidden;
}
.ch-r > span {
    display: flex; align-items: center;
    padding: 0 1cqw;
    font-size: 1.12cqw; color: #3A4256;
    border-right: 1px solid rgba(10, 15, 30, 0.055);
    border-bottom: 1px solid rgba(10, 15, 30, 0.055);
    white-space: nowrap; overflow: hidden;
    transition: background-color 0.55s ease, color 0.55s ease;
}
.ch-r > span:first-child {
    justify-content: center;
    background: #F6F8FC; color: var(--ch-faint);
    font-size: 0.95cqw;
}
.ch-r-cols { flex: 0 0 2.2cqw; }
.ch-r-cols > span { justify-content: center; background: #F6F8FC !important; color: var(--ch-faint); font-size: 0.95cqw; padding: 0; }
.ch-r .hcell { font-weight: 700; color: var(--ch-ink); background: #FBFCFE; }
.ch-r .err { background: rgba(229, 72, 77, 0.10); color: #C0353B; font-weight: 600; font-family: 'SF Mono', Menlo, monospace; font-size: 1cqw; animation: chErrFlicker 1.6s ease-in-out infinite; }
.ch-r .warn { background: rgba(254, 188, 46, 0.14); color: #8A6A12; }
.ch-r .dup { background: rgba(254, 188, 46, 0.10); color: #8A6A12; }
.ch-r .fixed { background: rgba(11, 183, 254, 0.08); color: #1743CF; font-weight: 600; animation: none; }
@keyframes chErrFlicker { 0%, 100% { background-color: rgba(229, 72, 77, 0.10); } 50% { background-color: rgba(229, 72, 77, 0.22); } }

/* Scanline (Act 2) */
.ch-scan {
    position: absolute; left: 1%; width: 98%; height: 16%;
    top: -20%;
    opacity: 0; visibility: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(11, 183, 254, 0.10) 35%, rgba(65, 90, 255, 0.16) 70%, transparent 100%);
}
.ch-scan::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 18%;
    height: 2px;
    background: var(--ch-grad);
    box-shadow: 0 0 14px rgba(65, 90, 255, 0.65);
}

/* Dashboard (Act 2 → final) */
.ch-dash {
    position: absolute; inset: 3.6cqw 0 0 0;
    display: flex;
    background: #FDFEFF;
}
.ch-side {
    flex: 0 0 11.5cqw;
    display: flex; flex-direction: column; gap: 0.9cqw;
    padding: 1.3cqw 1cqw;
    background: #F7F9FD;
    border-right: 1px solid var(--ch-line);
}
.ch-side-logo {
    width: 2.2cqw; height: 2.2cqw; border-radius: 0.7cqw;
    background: var(--ch-grad);
    margin-bottom: 0.7cqw;
}
.ch-side-item {
    font-size: 1.02cqw; font-weight: 600; color: var(--ch-slate);
    padding: 0.55cqw 0.8cqw; border-radius: 0.6cqw;
}
.ch-side-item.active {
    color: #1743CF;
    background: rgba(11, 183, 254, 0.13);
}
.ch-main { flex: 1; display: flex; flex-direction: column; padding: 1.3cqw 1.5cqw; min-width: 0; }
.ch-dashhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1cqw; }
.ch-dashhead b { font-family: var(--font-heading); font-size: 1.45cqw; letter-spacing: -0.01em; color: var(--ch-ink); }
.ch-sync { display: flex; align-items: center; gap: 0.5cqw; font-size: 0.98cqw; font-weight: 600; color: #189A64; }
.ch-sync i { width: 0.8cqw; height: 0.8cqw; border-radius: 50%; background: #22C55E; animation: chPulseDot 2.4s ease-in-out infinite; }
@keyframes chPulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); } 50% { box-shadow: 0 0 0 0.6cqw rgba(34, 197, 94, 0); } }

.ch-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; margin-bottom: 1.2cqw; }
.ch-kpi {
    display: flex; flex-direction: column; gap: 0.25cqw;
    padding: 0.95cqw 1.1cqw;
    background: #fff;
    border: 1px solid var(--ch-line);
    border-radius: 0.9cqw;
    box-shadow: 0 6px 16px -10px rgba(15, 23, 42, 0.12);
}
.ch-kpi em { font-size: 0.92cqw; font-style: normal; font-weight: 600; color: var(--ch-faint); }
.ch-kpi b { font-family: var(--font-heading); font-size: 1.9cqw; letter-spacing: -0.02em; color: var(--ch-ink); }
.ch-kpi .up { font-size: 0.92cqw; font-weight: 700; color: #189A64; }
.ch-kpi .up.calm { color: #1743CF; }

.ch-chart { flex: 1; min-height: 0; margin-bottom: 1.1cqw; }
.ch-chart svg { width: 100%; height: 100%; display: block; }

.ch-feed { display: flex; flex-direction: column; gap: 0.6cqw; }
.ch-feed-row { display: flex; align-items: center; gap: 0.7cqw; font-size: 1.02cqw; color: var(--ch-slate); }
.ch-feed-row i { flex: none; width: 1.15cqw; height: 1.15cqw; border-radius: 50%; }
.ch-feed-row i.ok { background: radial-gradient(circle at 35% 35%, #4ADE80, #16A34A); }
.ch-feed-row i.ai { background: var(--ch-grad); }

/* Laptop base (Act 3) */
.ch-base {
    position: absolute;
    left: 21%; top: 63%;
    width: 58%; height: 3.6%;
    background: linear-gradient(180deg, #F0F3F9 0%, #D8DEEA 78%, #C3CBDA 100%);
    border-radius: 0 0 2.4cqw 2.4cqw;
    box-shadow: 0 24px 44px -20px rgba(15, 23, 42, 0.35);
}
.ch-base::before {
    content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: 9cqw; height: 38%;
    background: #C6CEDD;
    border-radius: 0 0 1.2cqw 1.2cqw;
}

/* Sync pulse ring (Act 3 accent) */
.ch-pulse {
    position: absolute;
    left: 50%; top: 36.5%;
    width: 24cqw; height: 24cqw;
    margin: -12cqw 0 0 -12cqw;
    border: 2px solid rgba(65, 90, 255, 0.35);
    border-radius: 50%;
    opacity: 0; visibility: hidden;
    pointer-events: none;
}

/* --- Phone ------------------------------------------------------------------ */
.ch-phone {
    position: absolute;
    left: 71.5%; top: 44%;
    width: 17%; height: 48.5%;
    z-index: 3;
    background: linear-gradient(160deg, #101527, #232B44);
    border-radius: 3cqw;
    padding: 0.8cqw;
    box-shadow: var(--ch-shadow-lg);
}
.ch-phone-notch {
    position: absolute; top: 1.6cqw; left: 50%; transform: translateX(-50%);
    width: 5cqw; height: 1.1cqw;
    background: #101527;
    border-radius: 1cqw;
    z-index: 2;
}
.ch-phone-screen {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    background: #FBFCFF;
    border-radius: 2.3cqw;
    padding: 3cqw 1.3cqw 1.3cqw;
    overflow: hidden;
}
.ch-phone-head { font-family: var(--font-heading); font-size: 1.25cqw; color: var(--ch-ink); margin-bottom: 0.6cqw; }
.ch-phone-kpi {
    font-family: var(--font-heading); font-weight: 700;
    font-size: 2cqw; letter-spacing: -0.02em; color: var(--ch-ink);
    display: flex; flex-direction: column; margin-bottom: 1cqw;
}
.ch-phone-kpi em { font-size: 0.95cqw; font-style: normal; font-weight: 600; color: var(--ch-faint); letter-spacing: 0; }
.ch-phone-bars {
    flex: 1; min-height: 0;
    display: flex; align-items: flex-end; gap: 0.7cqw;
    margin-bottom: 1.1cqw;
}
.ch-phone-bars i {
    flex: 1;
    height: calc(var(--h) * 100%);
    background: var(--ch-grad);
    opacity: calc(0.45 + var(--h) * 0.55);
    border-radius: 0.5cqw 0.5cqw 0.15cqw 0.15cqw;
    transform-origin: bottom;
}
.ch-phone-note {
    font-size: 0.95cqw; font-weight: 600; color: #189A64;
    background: rgba(34, 197, 94, 0.10);
    border-radius: 0.7cqw;
    padding: 0.6cqw 0.8cqw;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Ecosystem chips ---------------------------------------------------------- */
.ch-chip { position: absolute; z-index: 4; transform: translate(-50%, -50%); }
.ch-chip-ai     { left: 84.5%; top: 12.5%; }
.ch-chip-cloud  { left: 15%;   top: 18.5%; }
.ch-chip-report { left: 12%;   top: 71.5%; }
.ch-chip-auto   { left: 45%;   top: 90%; }

.ch-bob {
    display: flex; align-items: center; gap: 1cqw;
    padding: 1cqw 1.5cqw 1cqw 1cqw;
    background: var(--ch-card);
    backdrop-filter: blur(16px) saturate(1.3);
    border: var(--ch-card-border);
    border-radius: 1.4cqw;
    box-shadow: var(--ch-shadow-sm);
    animation: chBob 5s ease-in-out infinite;
}
.ch-chip-cloud .ch-bob { animation-delay: -1.4s; }
.ch-chip-report .ch-bob { animation-delay: -2.6s; }
.ch-chip-auto .ch-bob { animation-delay: -3.8s; }
@keyframes chBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.9cqw); } }

.ch-chip-ic {
    flex: none;
    width: 3.1cqw; height: 3.1cqw;
    display: grid; place-items: center;
    border-radius: 1cqw;
    background: var(--ch-grad);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(65, 90, 255, 0.6);
}
.ch-chip-ic svg { width: 1.9cqw; height: 1.9cqw; }
.ch-chip-tx { display: flex; flex-direction: column; gap: 0.1cqw; }
.ch-chip-tx b { font-family: var(--font-heading); font-size: 1.3cqw; letter-spacing: -0.01em; color: var(--ch-ink); }
.ch-chip-tx em { font-size: 1.02cqw; font-style: normal; color: var(--ch-slate); white-space: nowrap; }
.ch-chip-ai .ch-chip-ic { animation: chSparkle 3s ease-in-out infinite; }
@keyframes chSparkle { 0%, 100% { box-shadow: 0 6px 14px -6px rgba(65, 90, 255, 0.6); } 50% { box-shadow: 0 6px 22px -4px rgba(150, 0, 255, 0.85); } }

/* --- Scroll hint --------------------------------------------------------------- */
.ch-hint {
    position: absolute;
    left: 50%; bottom: 1.6rem; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--ch-faint);
}
.ch-hint span {
    width: 1px; height: 34px;
    background: linear-gradient(180deg, transparent, var(--ch-blue));
    animation: chHint 2.2s ease-in-out infinite;
}
@keyframes chHint { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* --- Navbar over the white scene ------------------------------------------------ */
.navbar.on-light .brand-name { color: #003FC3; }
.navbar.on-light .brand-tag { color: #003FC3; }
.navbar.on-light .logo-mark svg path:first-child { fill: #0BB7FE; }
.navbar.on-light .logo-mark svg path:last-child { fill: #9600FF; }
.navbar.on-light .nav-links a { color: #5A6478; }
.navbar.on-light .nav-links a:hover,
.navbar.on-light .nav-links a.active { color: #0A0F1E; }
.navbar.on-light .btn-outline { border-color: rgba(10, 15, 30, 0.18); color: #0A0F1E; }
.navbar.on-light .btn-outline:hover { background: #0A0F1E; color: #fff; border-color: #0A0F1E; }
.navbar.on-light.scrolled {
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(10, 15, 30, 0.06);
}
.navbar .brand-name, .navbar .brand-tag, .navbar .nav-links a, .navbar .logo-mark svg path { transition: color 0.4s ease, fill 0.4s ease; }

/* --- Responsive ------------------------------------------------------------------ */
@media (max-width: 960px) {
    .cinema-hero { padding: 110px 0 72px; }
    .ch-layout { grid-template-columns: 1fr; gap: 2.6rem; }
    .ch-headline { font-size: clamp(2.6rem, 9.5vw, 4rem); margin-bottom: 2.2rem; }
    .ch-eyebrow { margin-bottom: 1.6rem; }
    .ch-stage { max-width: 640px; margin: 0 auto; }
    .ch-hint { display: none; }
}
@media (max-width: 640px) {
    .ch-sticky-2, .ch-toast-mail { display: none; }
    .ch-chip-tx em { display: none; }
}

/* --- Reduced motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ch-glow-a, .ch-glow-b, .ch-bob, .ch-chip-ai .ch-chip-ic,
    .ch-sync i, .ch-hint span, .ch-r .err { animation: none; }
    .ch-dots { display: none; }
}