/* LogicAI — альтернативный лендинг (dark, a11y-first) — решymbен в палитру
   основного лендинга: near-black поверхности, индиго-акцент, светлый текст.
   Контраст на WCAG AA:
     ink (#fafafa) on canvas (#0a0a0a)      ≈ 19.6:1
     muted (#a1a1aa) on canvas (#0a0a0a)    ≈  9.2:1
     faint (#71717a) on canvas              ≈  5.6:1
     ink (#0a0a0a) on white button (#fafafa)≈ 19.6:1
     brand (#5E6AD2) on canvas              ≈  5.4:1  (link/icon)
   Не полагаемся на цвет: у статусных элементов есть текст/иконка. */

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-var.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Main-landing palette */
    --canvas: #0a0a0a;
    --paper: #111111;
    --soft: #161616;
    --ink: #fafafa;
    --muted: #a1a1aa;
    --faint: #71717a;
    --brand: #5E6AD2;
    --brand-dark: #6B77DF;
    --brand-soft: rgba(94, 106, 210, 0.12);
    --amber: #f59e0b;
    --amber-soft: rgba(245, 158, 11, 0.12);
    --success: #4ade80;
    --line: rgba(255, 255, 255, 0.06);
    --danger: #ef4444;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --ease-out: cubic-bezier(0.2, 0, 0, 1);
    /* Apple's sheet curve: quick lift, long settle (used where a real spring
       can't be expressed — springs themselves are generated into linear()
       easings in script.js). */
    --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-magnet: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 180ms;
    --dur-med: 320ms;
    --dur-slow: 700ms;
    /* Keep in sync with the cornerOut keyframe animation below; script.js
       reads this value instead of a duplicated 260ms literal. */
    --corner-out-dur: 260ms;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 96px;

    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 40px -20px rgba(0, 0, 0, 0.65);
    --shadow-float: 0 8px 28px -12px rgba(0, 0, 0, 0.6);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-behavior:smooth is intentionally NOT set — the desktop pager
   triggers its own native smooth scroll per section, and CSS smooth
   would fight headless/rAF tests. Proximity snap stays on ≤900px only. */
html { scroll-padding-top: 6rem; overflow-x: hidden; }
html, body { overflow-x: hidden; }
body {
    font-family: var(--font-sans);
    background: var(--canvas);
    color: var(--ink);
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-dark); }
ul, ol { list-style: none; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.6vw, 2.9rem); font-weight: 800; line-height: 1.12; }
.h1-accent { color: #A9AFF2; letter-spacing: 0.03em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { text-wrap: pretty; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-3); }
.narrow { max-width: 760px; }
.center, .center p { text-align: center; }

/* ── Focus: visible 3px ring, never outline:none ── */
:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Skip link ── */
.skip-link {
    position: absolute;
    top: 8px; left: 8px;
    padding: 12px 16px;
    background: var(--brand);
    color: #fff;
    border-radius: var(--radius-sm);
    z-index: 120;
    transform: translateY(-160%);
    transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ── Header ── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 10, 10, 0.86);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 70px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-mark {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 800; font-size: 19px;
}
.site-nav { display: flex; align-items: center; gap: var(--space-3); }
.site-nav a:not(.btn) { color: var(--muted); text-decoration: none; padding: 10px 2px; }
.site-nav a:not(.btn):hover { color: var(--ink); }
.menu-toggle { display: none; }

/* Buttons (hit area ≥ 44px) */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.28s var(--ease-ios), box-shadow 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--ink); color: var(--canvas); border: 1px solid var(--ink); }
.btn-primary:hover { opacity: 0.88; box-shadow: var(--shadow-float); }
.btn-ghost { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn-lg { min-height: 54px; padding: 0 28px; }

/* Mobile menu */
.mobile-menu { padding: 0 var(--space-3) var(--space-3); }
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.mobile-menu a { padding: 14px 6px; color: var(--muted); text-decoration: none; font-weight: 500; }
.mobile-menu a:hover, .mobile-menu a:focus-visible { color: var(--ink); }

/* Menu toggle (hamburger) — min 44px target */
.menu-toggle {
    display: none;
    width: 48px; height: 48px;
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: var(--radius-sm);
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 5px;
    cursor: pointer;
}
.menu-toggle .menu-line { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s var(--ease-out), opacity 0.2s; }

/* ── Hero ── */
.hero { padding: var(--space-7) 0; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); align-items: center; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 15px; color: var(--brand-dark);
    margin-bottom: var(--space-3);
}
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.hero-sub { font-size: 20px; color: var(--muted); max-width: 34rem; margin: var(--space-3) 0 var(--space-3); }
.hero-sub .brand-name { color: var(--ink); font-weight: 700; }
.hero-points { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 8px; }
.hero-points li { position: relative; padding-left: 22px; color: var(--muted); font-size: 15.5px; }
.hero-points li::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); opacity: 0.9; }
/* Две мини-карточки аудиторий: боли, которые закрывает сервис.
   У каждой — свой акцентный цвет (свечение слева, иконка, маркеры). */
.hero-forwho {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 var(--space-4);
    max-width: 34rem;
}
.forwho {
    --aw: #A9AFF2;
    position: relative;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    padding: 12px 14px;
    overflow: hidden;
}
.forwho::before {
    content: '';
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--aw);
}
.forwho.manager { --aw: #7CF0E2; }
.fw-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; color: var(--aw); }
.fw-head svg { width: 16px; height: 16px; flex-shrink: 0; }
.fw-head b { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; }
.forwho ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.forwho li { position: relative; padding-left: 14px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.forwho li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--aw); opacity: 0.85; }
@media (max-width: 720px) { .hero-forwho { grid-template-columns: 1fr; } }
.steps-note { margin: var(--space-3) 0 0; text-align: center; color: var(--muted); font-size: 14px; }
.steps-note a { color: #A9AFF2; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero-hints { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.hero-hints li { position: relative; padding-left: 22px; color: var(--muted); font-size: 15px; }
.hero-hints li::before { content: ''; position: absolute; left: 0; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--success); opacity: 0.9; }
.hero-hints li::after { content: ''; position: absolute; left: 4px; top: 12px; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }

/* Hero visual: the live demo chat fills the right column (no mockup markup
   remains — the interactive chat lives here now). */
.hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

/* ── Sections ── */
.section { padding: var(--space-7) 0; }
/* Секции НЕ красят фон: цвет даёт body, а прозрачность позволяет слою звёзд
   (canvas z-index 0) просвечивать в пустоте — но не через карточки, шапку и чат. */
.section-soft { background: transparent; }
/* Content sits above the space layer; the cards/header/chat paint their own
   backgrounds, so the stars never show through them. */
main { position: relative; z-index: 1; }
/* Заголовки секций — посередине; hero (h1) остаётся слева в своих двух колонках */
.section-title { margin-bottom: var(--space-2); text-align: center; }
.section-sub { color: var(--muted); font-size: 19px; max-width: 40rem; margin: 0 auto var(--space-5); text-align: center; }

/* Trust */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-5); }
.trust-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.trust-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.trust-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand); margin-bottom: var(--space-2); }
.trust-icon svg { width: 22px; height: 22px; }
.trust-title { font-size: 1.05rem; margin-bottom: 6px; }
.trust-text { color: var(--muted); font-size: 15px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-5); counter-reset: step; }
.step { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); }
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.step-num {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--brand); color: #fff;
    display: grid; place-items: center; font-weight: 800; font-size: 17px;
    flex-shrink: 0;
}
.step-title { margin-bottom: 0; }
.step-text { color: var(--muted); font-size: 15px; }

/* Features */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-5); }
.feature { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3); }
.feature-title { font-size: 1.05rem; margin-bottom: 6px; position: relative; padding-left: 14px; }
.feature-title::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.feature-text { color: var(--muted); font-size: 15px; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); max-width: 860px; margin: var(--space-5) auto 0; }
.plan { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; }
.plan-hot { border: 2px solid var(--brand); position: relative; box-shadow: var(--shadow-card); }
.plan-badge {
    position: absolute; top: -13px; left: var(--space-3);
    background: var(--amber-soft); color: var(--amber);
    font-size: 13px; font-weight: 700;
    padding: 4px 12px; border-radius: 999px;
}
.plan-name { font-size: 1.3rem; }
.plan-desc { color: var(--muted); font-size: 15px; margin-bottom: var(--space-3); }
.plan-price { margin-bottom: var(--space-3); }
.plan-amount { font-size: 2.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.plan-unit { color: var(--muted); }
.plan-features { flex: 1; display: flex; flex-direction: column; gap: 9px; margin-bottom: var(--space-4); }
.plan-features li { position: relative; padding-left: 22px; color: var(--muted); font-size: 15px; }
.plan-features li::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--success); }
.plan-features li::after { content: ''; position: absolute; left: 3px; top: 11px; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.plan .btn { margin-top: auto; width: 100%; }
.guarantee { text-align: center; color: var(--muted); margin-top: var(--space-4); }

/* FAQ */
.faq { margin-top: var(--space-4); }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 12px; overflow: hidden; }
.faq summary {
    padding: 18px 20px;
    font-weight: 600; font-size: 1.02rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--brand); transition: transform 0.25s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 20px 18px; color: var(--muted); font-size: 16px; }

/* CTA (фон — body, как и у остальных секций: см. .section-soft) */
.cta { background: transparent; }
.cta .section-title, .cta .section-sub { color: var(--ink); }
.cta .section-sub { color: var(--muted); }
.cta .btn-primary { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.cta .btn-primary:hover { opacity: 0.88; background: var(--ink); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: var(--space-4) 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; color: var(--muted); font-size: 15px; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.footer-mark { width: 26px; height: 26px; font-size: 13px; border-radius: 7px; }
.footer-nav { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.footer-nav a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-nav a:hover { color: var(--ink); }

/* ── Magnet reveal (opt-in): элементы секции примагничиваются к местам
       с лёгким перелётом, когда секция входит во viewport (.is-inview) ── */
@media (prefers-reduced-motion: no-preference) {
    .stack-section .reveal {
        opacity: 0;
        transform: translateY(42px);
        transition: opacity 0.6s ease-out,
                    transform 1.05s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .stack-section.is-inview .reveal {
        opacity: 1;
        transform: translateY(0);
    }
    /* stagger-очередь примагничивания по порядку элементов секции */
    .stack-section.is-inview .reveal:nth-child(2) { transition-delay: 0.08s; }
    .stack-section.is-inview .reveal:nth-child(3) { transition-delay: 0.16s; }
    .stack-section.is-inview .reveal:nth-child(4) { transition-delay: 0.24s; }
    .stack-section.is-inview .reveal:nth-child(5) { transition-delay: 0.32s; }
    .stack-section.is-inview .reveal:nth-child(6) { transition-delay: 0.4s; }
}

/* ── Responsive ── */
/* 2026-10-15: every responsive track is `minmax(0, 1fr)`, never a bare `1fr`.
   A bare 1fr track keeps its MIN-CONTENT width, and the hero's demo card asked
   for ~341px — which pushed the whole page ~20px wider than a 360px phone
   screen (the owner's "cut off on the right" report, reproduced and measured
   in a real browser). The min-width: 0 on the two hero children is the same
   guard one level down. */
@media (max-width: 960px) {
    .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .hero-copy, .hero-visual { min-width: 0; }
}
@media (max-width: 720px) {
    .site-nav { display: none; }
    .menu-toggle { display: flex; }
    .steps { grid-template-columns: minmax(0, 1fr); }
    .trust-grid { grid-template-columns: minmax(0, 1fr); }
    .features-grid { grid-template-columns: minmax(0, 1fr); }
    .pricing-grid { grid-template-columns: minmax(0, 1fr); }
    .hero { padding-top: var(--space-5); }
    .float-chip { display: none; }
    .section { padding: var(--space-6) 0; }
}
/* 16px input font on mobile (iOS zoom) */
@media (max-width: 480px) {
    body { font-size: 16px; }
    .btn { font-size: 16px; }
    .hero-cta .btn { width: 100%; }
}

/* ── Reduced motion: kill all animation ── */
@media (prefers-reduced-motion: reduce) {
    * , *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Cards animation — mirror of the main landing pattern:
   staggered reveal (80ms steps) + hover lift with border highlight.
   ── DOES NOT touch layout, only adds motion. Reduced-motion disables all. ═══
   ═════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
    /* Hover lift on every card type, with a teal border highlight */
    .trust-item,
    .feature,
    .step,
    .plan {
        transition: transform 0.3s var(--ease-out),
                    box-shadow 0.3s var(--ease-out),
                    border-color 0.3s var(--ease-out);
        will-change: transform;
    }
    .trust-item:hover,
    .feature:hover,
    .step:hover,
    .plan:hover {
        transform: translateY(-3px);
        border-color: rgba(94, 106, 210, 0.5);
        box-shadow: var(--shadow-card);
    }

    /* Staggered reveal (like the main landing .reveal-N chain) */
    /* Trust: 4 cards, 80ms steps */
    .trust-grid > .reveal:nth-child(2) { transition-delay: 0.08s; }
    .trust-grid > .reveal:nth-child(3) { transition-delay: 0.16s; }
    .trust-grid > .reveal:nth-child(4) { transition-delay: 0.24s; }
    /* Features: 6 cards, 60ms steps */
    .features-grid > .reveal:nth-child(2) { transition-delay: 0.06s; }
    .features-grid > .reveal:nth-child(3) { transition-delay: 0.12s; }
    .features-grid > .reveal:nth-child(4) { transition-delay: 0.18s; }
    .features-grid > .reveal:nth-child(5) { transition-delay: 0.24s; }
    .features-grid > .reveal:nth-child(6) { transition-delay: 0.30s; }
    /* Steps: 3 cards, 80ms steps */
    .steps > .reveal:nth-child(2) { transition-delay: 0.08s; }
    .steps > .reveal:nth-child(3) { transition-delay: 0.16s; }
    /* Pricing: 2 plans, 80ms steps */
    .pricing-grid > .reveal:nth-child(2) { transition-delay: 0.08s; }

    /* Press feedback on interactive scenario chips */
    .scenario {
        transition: transform 0.15s var(--ease-out),
                    border-color 0.2s var(--ease-out),
                    background-color 0.2s var(--ease-out);
    }
    .scenario:active { transform: scale(0.985); }
}

/* ═════════════════════════════════════════════════════════════════════════
   Live demo chat — mirrors the main landing's demo (dark card, animated
   conic border, bubbles, chips, typing). Light page, dark chat = accent.
   Same backend flow: POST /api/v1/demo/message {text, session_id} → {reply}.
   ═════════════════════════════════════════════════════════════════════════ */

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.demo-wrap {
    position: relative;
    width: min(100%, 460px);
    padding: 3px;
    border-radius: 24px;
    background: conic-gradient(from var(--angle), #7CF0E2, #06B6D4, #7CF0E2);
    animation: demoSpin 4s linear infinite;
    box-shadow: var(--shadow-card);
}
@keyframes demoSpin { to { --angle: 360deg; } }

.demo-chat {
    background: #0E1111;
    border-radius: 21px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Tall enough to read a long bot reply without scrolling line by line */
    height: 560px;
    color: #ECECEC;
    font-size: 14.5px;
}
.demo-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.demo-avatar {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, #5E6AD2, #06B6D4);
    color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px;
}
.demo-name { font-weight: 600; }
.demo-status { font-size: 13px; color: #9CA3AF; display: flex; align-items: center; gap: 5px; }
.demo-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }

.demo-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex; flex-direction: column; gap: 9px;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}
.demo-msg { display: flex; gap: 8px; align-items: flex-start; }
.demo-msg.user { flex-direction: row-reverse; }
.demo-avatar-mini {
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
    background: rgba(94,106,210,0.28); color: #A9AFF2;
    display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.demo-msg.user .demo-avatar-mini { background: #5E6AD2; color: #fff; }
.demo-bubble {
    max-width: 78%;
    padding: 9px 13px;
    border-radius: 14px;
    line-height: 1.55;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    background: rgba(255,255,255,0.06);
    color: #D7D7DB;
}
.demo-msg.user .demo-bubble { background: #5E6AD2; color: #fff; }

.demo-suggestions {
    padding: 8px 12px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex; gap: 8px; overflow-x: auto;
    scrollbar-width: thin;
}
.demo-chip {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    color: #C9C9CE;
    font: inherit; font-size: 13px; font-weight: 500;
    white-space: nowrap; flex-shrink: 0; cursor: pointer;
    transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.28s var(--ease-ios);
}
.demo-chip:hover { border-color: #8B8DF8; color: #fff; }
.demo-chip:active { transform: scale(0.95); }
.demo-msg.system-msg .demo-bubble {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f2b8b8;
    font-size: 13.5px;
}

.demo-input-row {
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex; gap: 8px;
}
.demo-input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px;
    font-size: 16px; color: #ECECEC;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    font-family: inherit;
}
.demo-input::placeholder { color: #7B8290; }
.demo-input:focus { border-color: #8B8DF8; box-shadow: 0 0 0 3px rgba(20,184,166,0.25); }
.demo-send {
    width: 48px; height: 48px; flex-shrink: 0;
    border: none; border-radius: 12px;
    background: #5E6AD2; color: #fff; cursor: pointer;
    display: grid; place-items: center;
    transition: background-color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
.demo-send:hover { background: #6B77DF; }
.demo-send:active { transform: scale(0.95); }
.demo-send svg { width: 18px; height: 18px; }

/* Typing indicator */
.typing-dots { display: flex; gap: 4px; padding: 6px 0; }
.typing-dot { width: 7px; height: 7px; border-radius: 50%; background: #7B8290; animation: demoBounce 1s infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes demoBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.demo-note { margin-top: var(--space-3); color: var(--muted); font-size: 14px; }

/* Desktop: the demo card is exactly as tall as the copy column, so both
   columns start and end on the same lines. The height must be DEFINITE — a
   px value synced into --demo-card-h by script.js (560px fallback): if the
   card were content-sized instead (e.g. flex: 1 1 auto), a long transcript
   would stretch the whole hero down over several screens. The transcript
   scrolls inside the card. */
@media (min-width: 961px) {
    .demo-wrap { height: var(--demo-card-h, 560px); }
    .demo-chat { height: 100%; }
    .demo-note {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        margin: 0;
        text-align: center;
    }
}

/* Phones: same taller reading height, but bounded by the screen (this must
   come AFTER the .demo-chat rule above — equal specificity, later wins). */
@media (max-width: 720px) {
    .demo-chat { height: min(560px, 62vh); }
}

/* Reduced motion: stop conic border + typing */
@media (prefers-reduced-motion: reduce) {
    .demo-wrap { animation: none; }
    .typing-dot { animation: none; }
}


/* ═════════════════════════════════════════════════════════════════════════
   SNAP-TO-CENTER: continuous informational landing. Sections flow normally;
   on desktop the window snaps to each section's CENTER (mandatory), on
   touch/small screens the snap is soft (proximity). Native inertia + native
   snap easing — no JS scroll hijacking.
   ═════════════════════════════════════════════════════════════════════════ */

/* Native scroll-snap is used softly on touch/small screens (proximity).
   On desktop the smooth centering is driven by JS (visible inertia). */
/* Each section fills the viewport and its content is centered vertically
   (flex, not fixed height: taller-than-viewport sections just grow, so
   nothing ever clips). */
.stack-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.stack-section > .container { width: 100%; }

@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
    html { scroll-snap-type: y proximity; }
    .stack-section { scroll-snap-align: center; scroll-margin-top: 64px; }
}

/* ── Widget swap: the hero demo card morphs into the corner-chat launcher
       (bottom-right). Gradient + landing pulse sell the handoff. ── */
.widget-launcher {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), #06B6D4);
    color: #fff;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 9998;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    /* iOS-style: springs and a tactile press, not linear fades */
    transition: opacity 0.22s var(--ease-ios), transform 0.3s var(--ease-ios);
}
.widget-launcher.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.widget-launcher:active { transform: scale(0.92); }
.widget-launcher-icon { line-height: 1; font-size: 22px; }

/* Landing pulse: a soft material glow the moment the card lands as the
   launcher (and when the launcher fades in on mobile). No hard ring — iOS
   settles with a spring, not with a ripple. */
.widget-launcher::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, rgba(94, 106, 210, 0.5) 0%, rgba(6, 182, 212, 0.22) 55%, transparent 72%);
    filter: blur(7px);
}
.widget-launcher.pulse::before { animation: launcherGlow 0.9s var(--ease-ios) both; }
@keyframes launcherGlow {
    0%   { opacity: 0; transform: scale(0.92); }
    30%  { opacity: 0.9; }
    100% { opacity: 0; transform: scale(1.55); }
}

/* Screen-reader-only helper (visually hidden, stays for AT) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Corner chat: the hero demo conversation in a widget-style window ── */
.corner-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: min(380px, calc(100vw - 32px));
    /* 2026-10-15 (the owner's "half the chat" on a phone): a vh-sized window is
       measured against the viewport with the URL bar HIDDEN, so on a real phone
       the lower half — including the input row — hangs below the visible area.
       dvh tracks the real visible height; the vh line stays as the fallback for
       browsers without dvh, and max-height is a hard cap for short screens. */
    height: min(520px, 72vh);
    height: min(520px, 72dvh);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    background: #0E1111;
    color: #ECECEC;
    font-size: 14.5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    overscroll-behavior: contain;
    z-index: 9999;
}
.corner-chat[hidden] { display: none; }
.corner-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--brand);
    color: #fff;
    flex-shrink: 0;
}
.corner-head .demo-status { color: rgba(255, 255, 255, 0.85); }
.corner-head .demo-avatar { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.18); }
.corner-close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color 0.2s var(--ease-out);
}
.corner-close:hover { background: rgba(255, 255, 255, 0.3); }
.corner-close:active { transform: scale(0.95); }
.corner-close svg { width: 14px; height: 14px; }
/* .demo-messages / .demo-chip / .demo-input-row reuse the hero demo styles */

/* iOS sheet presentation: the window rises out of its corner with a spring,
   and folds back into it on close. */
@media (prefers-reduced-motion: no-preference) {
    .corner-chat { transform-origin: bottom right; }
    .corner-chat:not([hidden]) { animation: cornerIn 0.44s var(--ease-ios); }
    .corner-chat.is-closing { animation: cornerOut var(--corner-out-dur) cubic-bezier(0.4, 0, 1, 1) forwards; }
    @keyframes cornerIn {
        from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.94); }
        to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }
    @keyframes cornerOut {
        from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
        to   { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.95); }
    }
}
@media (max-width: 720px) {
    .corner-chat {
        /* Same dvh rule as the base block; the env() line keeps the window off
           the iOS home-indicator strip (an unsupported max() drops the line and
           the earlier bottom: 16px stays). */
        bottom: 16px;
        bottom: max(16px, env(safe-area-inset-bottom, 0px));
        right: 16px;
        height: min(520px, 66vh);
        height: min(520px, 66dvh);
        max-height: calc(100dvh - 32px);
    }
    .widget-launcher {
        bottom: 20px;
        bottom: max(20px, env(safe-area-inset-bottom, 0px));
    }
    /* 2026-10-15 (the owner's "half the chat", THIS is the card he meant): the
       hero demo card was a fixed 560px — taller than a phone's VISIBLE height —
       so its lower half (the chips and the input row) could never be on screen
       at once, and scrolling far enough to reach them collapsed the card into
       the launcher. On mobile the card now fits the visible height (dvh) and
       the transcript scrolls inside it (it already does). */
    .demo-chat { height: auto; max-height: calc(100dvh - 132px); min-height: min(430px, calc(100dvh - 132px)); }
    .demo-messages { min-height: 110px; }
    /* A thin scrollbar drawn inside the chips row reads as a glitch on touch
       screens; the row still scrolls, it just stops advertising itself. */
    .demo-suggestions { scrollbar-width: none; }
    .demo-suggestions::-webkit-scrollbar { display: none; }
}

/* ── Morph ghost: a fixed-position clone of the real demo card flying
       between the hero slot and the launcher circle (transform-origin top
       left; inner ids stripped; brand veil crossfades the two looks) ── */
.swap-ghost {
    position: fixed;
    z-index: 10001;
    transform-origin: top left;
    /* NOTE: no `transform: none !important` here — an !important transform
       declaration beats WAAPI keyframes, which silently froze the flight. */
    margin: 0;
    pointer-events: none;
    overflow: hidden;
    will-change: transform;
}
.swap-ghost .demo-chat { height: 100%; }
.swap-veil {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--brand), #06B6D4);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
}
.swap-veil-icon {
    color: #fff;
    font-size: 24px;
    line-height: 1;
    opacity: 0;
}
/* Empty hero slot while the conversation lives in the corner icon */
.swap-slot { visibility: hidden; }

/* Reduced motion: no ghost morphs, launcher just fades in/out */
@media (prefers-reduced-motion: reduce) {
    .widget-launcher { transition: opacity 0.2s ease-out; transform: none; }
    .swap-ghost { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   MOTION SYSTEM — ambient effects, magnetic elements, soft cursor glow.
   All gated behind prefers-reduced-motion: no-preference and hover-capable
   desktop; flat content is always readable otherwise.
   ═════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

    /* Ambient blobs drifting behind the whole page (parallax feel) */
    .stack-container::before,
    .stack-container::after {
        content: '';
        position: fixed;
        z-index: 0;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        filter: blur(90px);
        opacity: 0.14;
        pointer-events: none;
        will-change: transform;
    }
    .stack-container::before {
        background: radial-gradient(circle at 32% 32%, var(--brand) 0%, transparent 68%);
        left: -140px;
        top: 8%;
        animation: blobDrift 26s ease-in-out infinite alternate;
    }
    .stack-container::after {
        background: radial-gradient(circle at 68% 68%, #06B6D4 0%, transparent 70%);
        right: -140px;
        bottom: 4%;
        animation: blobDrift 34s ease-in-out infinite alternate-reverse;
    }
    @keyframes blobDrift {
        from { transform: translate3d(0, 0, 0) scale(1); }
        to   { transform: translate3d(70px, -50px, 0) scale(1.16); }
    }
    .stack-section { position: relative; }
    .stack-section > .container { position: relative; z-index: 1; }

    /* Light impulse when a section snaps into view */
    .stack-section.is-inview::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background: radial-gradient(120% 100% at 50% 0%, rgba(94, 106, 210, 0.16) 0%, transparent 55%);
        opacity: 0;
        pointer-events: none;
        animation: sectionImpulse 1s ease-out forwards;
    }
    @keyframes sectionImpulse {
        0%   { opacity: 0; }
        22%  { opacity: 1; }
        100% { opacity: 0; }
    }

    /* Magnetic CTA lift (JS adds the pull) */
    .btn { will-change: transform; }

    /* Soft cursor glow (page-wide) */
    .cursor-glow {
        position: fixed;
        left: 0; top: 0;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(94, 106, 210, 0.08) 0%, rgba(6, 182, 212, 0.04) 40%, transparent 70%);
        filter: blur(40px);
        pointer-events: none;
        z-index: 60;
        transform: translate3d(-50%, -50%, 0);
        opacity: 0;
        transition: opacity 0.5s var(--ease-out);
        will-change: transform, opacity;
    }
}