/* Gaze product page (/products/gaze). Self-contained: it does not load /assets/styles.css.
   The motif is the app icon, the bracket eye <•>: two angle brackets are the corners of an eye
   around an indigo pupil. The pupil follows the pointer, screenshots open like an eyelid, and a soft
   halo behind the eye breathes. */

/* Fonts are served from this site (/assets/fonts): latin and latin-ext subsets, variable weights. */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url('/assets/fonts/instrument-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url('/assets/fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    /* Icon palette (app/crates/shell/icons/source.svg in the app repo). */
    --tile: #15151D;
    --bracket: #F4F4F6;
    --pupil: #818CF8;
    --indigo: #4F46E5;
    --indigo-2: #6366F1;

    --ink: #101017;
    --ink-2: #1A1A24;
    --ink-3: #23232F;
    --paper: #F6F6FA;
    --paper-2: #EEEEF5;
    --line: #E4E4EE;

    --text: #15151D;
    --text-2: #4D4D5C;
    --text-3: #868696;
    --on-dark: #FFFFFF;
    --on-dark-2: rgba(244, 244, 246, 0.74);
    --on-dark-3: rgba(244, 244, 246, 0.5);

    /* The app's status colours, for the pause bar and code. */
    --warn: #F2B544;
    --warn-wash: #3A2F17;
    --err: #F87171;
    --ok: #4ADE80;
    --str: #A7E3B9;
    --comment: #6E6E80;

    --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

    --page: 1180px;
    --gutter: 24px;
    --radius: 22px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --reveal: 1100ms;
    --tab-cycle: 5600ms;
    --say-hold: 4200ms; /* how long each headline stays before the eye blinks to the other */
    --send-loop: 9s;

    --shot-shadow: 0 40px 80px -30px rgba(16, 16, 23, 0.5), 0 12px 24px -12px rgba(16, 16, 23, 0.25);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--text);
    background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; }
h1, h2 { font-stretch: 88%; }
h2 { font-size: clamp(2.3rem, 5.2vw, 4rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.25; }

.wrap { width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; }

:focus-visible { outline: 2px solid var(--pupil); outline-offset: 3px; border-radius: 6px; }

kbd {
    display: inline-flex; align-items: center; justify-content: center; min-width: 26px;
    padding: 1px 7px; white-space: nowrap; font-family: var(--font-body); font-size: 0.82em; font-weight: 600;
    color: var(--text); background: #fff; border: 1px solid #D6D6E2; border-bottom-width: 2px; border-radius: 7px;
}

/* No ligatures: PHP's -> must read as typed, not as an arrow. */
code, pre { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
code {
    font-family: var(--font-mono); font-size: 0.84em;
    background: var(--paper-2); padding: 1px 6px; border-radius: 6px;
}
.hero code, .dark code, .final code, .stacks code { background: rgba(255, 255, 255, 0.1); color: var(--on-dark); }
h2 code { background: none; padding: 0; font-size: 0.82em; font-weight: 600; letter-spacing: -0.04em; color: inherit; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; border: 0;
    font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
    transition: transform 300ms var(--ease), background 300ms var(--ease), color 300ms var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--ink); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45); }
.btn-ghost { color: var(--on-dark); border: 1px solid rgba(255, 255, 255, 0.28); background: none; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pupil); box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.28); }

/* Download: shown, not live yet. */
.btn-download {
    background: #fff; color: var(--ink); padding: 8px 8px 8px 22px; cursor: not-allowed;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
}
.btn-download:hover { transform: none; }
.btn-download svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-download .soon {
    padding: 6px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
    background: var(--paper-2); color: var(--indigo);
}

/* ---------- Eye mark: the icon, small, used as a bullet ---------- */
.eye-mark { width: 22px; height: 14px; flex-shrink: 0; color: var(--text); --mark-pupil: var(--indigo); }
.dark .eye-mark, .proof .eye-mark, .hero .eye-mark { color: var(--bracket); --mark-pupil: var(--pupil); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--indigo);
}
.dark .eyebrow { color: var(--pupil); }

.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-2); max-width: 640px; }
.dark .lede, .final .lede { color: var(--on-dark-2); }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background 400ms var(--ease), box-shadow 400ms var(--ease); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav.scrolled {
    background: rgba(16, 16, 23, 0.74); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-dark); }
.brand img { width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.brand b { font-size: 1.15rem; letter-spacing: -0.02em; }
.brand a { color: inherit; text-decoration: none; }
.brand-app { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* "by thewonderjoy" is its own link, to the home page. */
.brand-by { font-size: 0.78rem; opacity: 0.6; white-space: nowrap; transition: opacity 300ms; }
.brand-by:hover, .brand-by:focus-visible { opacity: 1; text-decoration: underline; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { text-decoration: none; font-size: 0.93rem; font-weight: 500; color: var(--on-dark-2); transition: color 300ms; }
.nav-links a:hover { color: var(--on-dark); }
.nav .btn { padding: 9px 18px; font-size: 0.9rem; }
.nav-links a.btn-light { color: var(--ink); }

/* ---------- The eye: brackets and a pupil that follows the pointer ----------
   Layers, outside in: .lid blinks (squeezes flat), .trk-* follow the pointer, the shapes play the intro. */
.eye { overflow: visible; }
.eye .lid { transform-box: view-box; transform-origin: 512px 512px; transition: transform 140ms ease-in; }
.eye.blink .lid { transform: scaleY(0.1); }
.eye .trk-l, .eye .trk-r { transform: translate(calc(var(--bx, 0) * 1px), calc(var(--by, 0) * 1px)); }
.eye .trk-p { transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px)); }
.eye .br { fill: none; stroke: var(--bracket); stroke-width: 80; stroke-linecap: round; stroke-linejoin: round; }
.eye .pupil { fill: var(--pupil); transform-box: fill-box; transform-origin: center; }
.eye .glow { fill: var(--pupil); opacity: 0.45; filter: blur(40px); transform-box: fill-box; transform-origin: center; }

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden; color: var(--on-dark); padding-top: 128px;
    background:
        radial-gradient(48% 38% at 50% 20%, rgba(99, 102, 241, 0.34) 0%, rgba(99, 102, 241, 0) 100%),
        radial-gradient(90% 70% at 50% 110%, rgba(79, 70, 229, 0.28) 0%, rgba(79, 70, 229, 0) 70%),
        linear-gradient(180deg, #0C0C12 0%, var(--tile) 60%, #0C0C12 100%);
}
.hero-copy { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; text-align: center; }

/* The icon, and a soft halo behind it: no lines, just light that breathes slowly, leans a little
   toward where the pupil looks (--hx, --hy, set by the script) and dims when the eye blinks. */
.hero-mark { position: relative; width: 124px; height: 124px; margin: 0 auto 30px; }
.halo {
    --halo: 460px;
    position: absolute; left: 50%; top: 50%; z-index: -1; width: var(--halo); height: var(--halo);
    margin: calc(var(--halo) / -2) 0 0 calc(var(--halo) / -2); border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle closest-side, rgba(129, 140, 248, 0.22) 0%, rgba(99, 102, 241, 0.09) 50%, rgba(99, 102, 241, 0) 100%);
    translate: calc(var(--hx, 0) * 1px) calc(var(--hy, 0) * 1px);
    animation: halo-in 1600ms var(--ease) 300ms both, halo-breathe 8s ease-in-out 1900ms infinite;
    transition: opacity 500ms var(--ease);
}
.halo.dim { opacity: 0.6; transition-duration: 160ms; }
@keyframes halo-in { from { opacity: 0; transform: scale(0.6); } }
@keyframes halo-breathe { 50% { transform: scale(1.1); } }

.hero-eye {
    position: relative; display: block; width: 124px; height: 124px;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 60px rgba(129, 140, 248, 0.25));
}
.hero-eye .tile { fill: var(--tile); stroke: rgba(255, 255, 255, 0.14); stroke-width: 6; }
.hero-eye .br-l { animation: bracket-l 1100ms var(--ease) 150ms both; }
.hero-eye .br-r { animation: bracket-r 1100ms var(--ease) 150ms both; }
.hero-eye .pupil { animation: pupil-in 900ms cubic-bezier(0.34, 1.56, 0.64, 1) 650ms both; }
@keyframes bracket-l { from { transform: translateX(-150px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bracket-r { from { transform: translateX(150px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pupil-in { from { transform: scale(0); } to { transform: scale(1); } }

.status-pill {
    display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 7px 16px 7px 12px;
    border-radius: 999px; font-size: 0.88rem; font-weight: 600; color: var(--on-dark);
    background: rgba(129, 140, 248, 0.14); box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.35);
}
.status-pill .live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--pupil); }
.status-pill .live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--pupil); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.6); opacity: 0; } }

.hero h1 { font-size: clamp(2.8rem, 7.4vw, 6.2rem); font-weight: 700; letter-spacing: -0.04em; margin-bottom: 24px; }
.hero h1 em { font-style: normal; color: var(--pupil); }
/* The headline says two things in turn. Both lines share one grid cell, so the box keeps the taller
   line's height and nothing below moves. A line shuts like an eyelid, top and bottom meeting in the
   middle, and the next opens the same way once it has shut. Readers and search get both lines from
   the hidden text in the h1; without the script only the first line shows. */
.say { display: grid; }
.say-line {
    grid-area: 1 / 1; align-self: center; padding: 0.08em 0.04em; margin: -0.08em -0.04em;
    clip-path: inset(50% 0 50% 0); transition: clip-path 220ms cubic-bezier(0.5, 0, 0.75, 0);
}
.say-line.on { clip-path: inset(0 0 0 0); transition: clip-path 420ms var(--ease) 230ms; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hero .hero-kicker { font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--on-dark); margin-bottom: 36px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.hero-note { margin-top: 18px; font-size: 0.9rem; color: var(--on-dark-3); }
.hero-copy > * { animation: copy-in 1100ms var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 80ms; }
.hero-copy > :nth-child(3) { animation-delay: 160ms; }
.hero-copy > :nth-child(4) { animation-delay: 240ms; }
.hero-copy > :nth-child(5) { animation-delay: 320ms; }
.hero-copy > :nth-child(6) { animation-delay: 400ms; }
.hero-copy > .hero-mark { animation: none; }
@keyframes copy-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* The window rises out of the section's bottom edge. Beside it, the call that sends the selected row
   types itself, and a pulse flies from the code into the window, where the row lights up. */
.hero-stage { position: relative; z-index: 2; margin-top: 64px; aspect-ratio: 1600 / 720; overflow: hidden; perspective: 1800px; }
.hero-window {
    position: relative; width: min(1060px, 100%); margin-left: auto; border-radius: 14px 14px 0 0; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 60px 120px -30px rgba(0, 0, 0, 0.7);
    transform-origin: 50% 100%; animation: rise 1600ms var(--ease) 300ms both;
}
.hero-row {
    position: absolute; left: 18.5%; top: 37.1%; width: 51.4%; height: 3.3%; border-radius: 4px; opacity: 0;
    background: rgba(129, 140, 248, 0.32); box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.9), 0 0 30px rgba(129, 140, 248, 0.6);
}
.hero-stage.sent .hero-row { animation: row-flash 1800ms var(--ease) both; }
@keyframes row-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.hero-packet {
    position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; z-index: 4;
    background: var(--pupil); box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.3), 0 0 22px 6px rgba(129, 140, 248, 0.7); opacity: 0;
}
.hero-float { position: absolute; left: 0; top: 22%; width: min(440px, 42%); z-index: 3; animation: float-in 1400ms var(--ease) 1100ms both; }
@keyframes rise { from { opacity: 0; transform: translateY(140px) rotateX(16deg); } to { opacity: 1; transform: none; } }
@keyframes float-in { from { opacity: 0; transform: translateY(40px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ---------- Light and dark, side by side (the tags sit in the window's empty title bar) ----------
   The same window state in both themes, the light one clipped along a diagonal seam. --split is where the
   seam crosses the middle of the image (0 = left edge, 1 = right edge); it sweeps in once, like a theme
   switch, after the window has risen. */
@property --split { syntax: '<number>'; inherits: true; initial-value: 0.5; }
.split { --split: 0.5; --lean: 0.08; }
.split > img { display: block; width: 100%; }
.split .split-light {
    position: absolute; inset: 0; width: 100%; height: 100%;
    clip-path: polygon(0 0, calc((var(--split) + var(--lean)) * 100%) 0, calc((var(--split) - var(--lean)) * 100%) 100%, 0 100%);
}
.split .split-seam {
    position: absolute; top: -2%; height: 104%; width: 2px; left: calc(var(--split) * 100% - 1px);
    background: linear-gradient(transparent, var(--pupil) 12%, var(--pupil) 88%, transparent);
    box-shadow: 0 0 18px 2px rgba(129, 140, 248, 0.7); transform: rotate(14.4deg); pointer-events: none;
}
.split-tag {
    position: absolute; top: 0.45%; padding: 3px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; line-height: 1.4;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none;
}
.split-tag-light { left: calc((var(--split) + var(--lean) * 0.98) * 100% - 72px); color: var(--ink); background: rgba(255, 255, 255, 0.86); box-shadow: 0 0 0 1px rgba(16, 16, 23, 0.1); }
.split-tag-dark { left: calc((var(--split) + var(--lean) * 0.98) * 100% + 12px); color: #fff; background: rgba(16, 16, 23, 0.8); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.hero .split { animation: rise 1600ms var(--ease) 300ms both, split-sweep 1500ms var(--ease) 1700ms both; }
.split .split-tag { animation: copy-in 700ms var(--ease) 2900ms both; }
@keyframes split-sweep { from { --split: -0.1; } to { --split: 0.5; } }

/* ---------- Code card (an editor tab) ----------
   Lines wrap with a hanging indent instead of scrolling sideways, so a card never shows a scrollbar. */
.code-card {
    border-radius: 14px; overflow: hidden; text-align: left; color: var(--bracket);
    background: #17171F; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.code-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #1E1E28; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.code-head .file { font-family: var(--font-mono); font-size: 0.78rem; color: var(--on-dark-2); }
.code-head .file::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--pupil); vertical-align: 1px; }
.code-card pre { margin: 0; padding: 14px 0; font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.75; white-space: normal; }
.code-card code { background: none; padding: 0; font-size: inherit; color: inherit; border-radius: 0; }
.code-card .line {
    display: block; padding: 0 16px 0 4.3em; text-indent: -4.3em; white-space: pre-wrap; overflow-wrap: anywhere;
    transition: background 400ms var(--ease);
}
/* Line numbers live in CSS, so copied code and the Markdown version carry only the code. */
.code-card .line::before { content: attr(data-ln); display: inline-block; width: 4.3em; padding-right: 1.1em; text-indent: 0; text-align: right; color: var(--comment); }
.code-card .line.on { background: rgba(129, 140, 248, 0.16); box-shadow: inset 3px 0 0 var(--pupil); }
.code-card .line.wait { background: rgba(242, 181, 68, 0.14); box-shadow: inset 3px 0 0 var(--warn); }
.t-fn { color: var(--pupil); font-weight: 600; }
.t-var { color: #F0ABFC; }
.t-str { color: var(--str); }
.t-cm { color: var(--comment); font-style: italic; }
.t-kw { color: #93C5FD; }
.t-sh { color: var(--on-dark-3); }

/* A line that types itself: .type grows a character at a time, with a caret at its end. */
.type { display: inline-block; vertical-align: top; overflow: hidden; white-space: pre; text-indent: 0; max-width: var(--chars); }
.typing .type { max-width: 0; border-right: 2px solid var(--pupil); animation: type 1100ms steps(var(--steps)) 200ms forwards, caret 700ms steps(1) infinite; }
@keyframes type { to { max-width: var(--chars); } }
@keyframes caret { 50% { border-color: transparent; } }

/* ---------- Proof strip: each eye blinks in turn ---------- */
.proof { background: var(--ink); color: var(--on-dark-2); }
.proof ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 28px 0; }
.proof li { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; line-height: 1.4; }
.proof li b { color: var(--on-dark); font-weight: 600; }
.proof .eye-mark { animation: mark-blink 8s ease-in-out infinite; }
.proof li:nth-child(2) .eye-mark { animation-delay: 0.25s; }
.proof li:nth-child(3) .eye-mark { animation-delay: 0.5s; }
.proof li:nth-child(4) .eye-mark { animation-delay: 0.75s; }

/* ---------- Stacks: what the clients cover, as marks in one colour (Simple Icons, CC0) ---------- */
.stacks {
    position: relative; overflow: hidden; color: var(--on-dark); text-align: center; padding: clamp(64px, 8vw, 104px) 0;
    background:
        radial-gradient(70% 120% at 50% 0%, rgba(99, 102, 241, 0.4) 0%, rgba(79, 70, 229, 0) 70%),
        linear-gradient(180deg, #1C1846 0%, #221C5A 100%);
}
.stacks h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 14px; }
.stacks h2 span { display: inline-block; color: var(--on-dark-3); }
.stacks .wrap > p:first-of-type { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--on-dark-2); }
.stack-logos {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
    gap: 30px clamp(26px, 4.4vw, 58px); max-width: 980px; margin: 46px auto 0;
}
.stack-logos li {
    display: grid; justify-items: center; gap: 12px; min-width: 64px;
    font-size: 0.84rem; font-weight: 500; color: var(--on-dark-2); transition: color 300ms;
}
.stack-logos svg { width: 44px; height: 44px; fill: currentColor; color: var(--on-dark); opacity: 0.9; transition: transform 400ms var(--ease), opacity 300ms; }
.stack-logos li:hover { color: var(--on-dark); }
.stack-logos li:hover svg { transform: translateY(-4px); opacity: 1; }
.stack-more { max-width: 660px; margin: 40px auto 0; font-size: 0.92rem; color: var(--on-dark-3); }
@keyframes mark-blink { 0%, 90%, 96%, 100% { transform: none; } 93% { transform: scaleY(0.1); } }

/* ---------- Sections ---------- */
.section { padding: clamp(90px, 12vw, 160px) 0; position: relative; }
.section.paper { background: var(--paper); }
.section.dark { background: var(--ink); color: var(--on-dark); overflow: hidden; }
.section-head { margin-bottom: clamp(44px, 6vw, 72px); }
.section-head.center { text-align: center; }
.section-head.center .lede { margin-inline: auto; }
.section-head h2 { margin-bottom: 20px; }
.section-head h2 span, .row-text h2 span { color: var(--text-3); }
.dark .section-head h2 span, .dark .row-text h2 span { color: var(--on-dark-3); }

/* Screenshots open like an eye as they scroll in: an almond slit widening from the middle. */
.shot { border-radius: 12px; box-shadow: var(--shot-shadow); }
.dark .shot { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -30px rgba(0, 0, 0, 0.7); }
/* The MCP settings, close up: a crop of the Settings drawer shown larger than in the app, so it reads. */
.agent-shot { justify-self: center; width: 100%; max-width: 620px; border-radius: 14px; }
.reveal-eye { clip-path: ellipse(75% 0% at 50% 50%); transition: clip-path var(--reveal) var(--ease); }
.reveal-eye.in, .in .reveal-eye { clip-path: ellipse(130% 150% at 50% 50%); }
.reveal-up { opacity: 0; transform: translateY(36px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.reveal-up.in { opacity: 1; transform: none; }
.reveal-up.d1 { transition-delay: 120ms; }
.reveal-up.d2 { transition-delay: 240ms; }
.reveal-up.d3 { transition-delay: 360ms; }

/* ---------- Tour: the annotated window ---------- */
.anatomy { position: relative; max-width: 1080px; margin: 0 auto; }
.pin {
    position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
    display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--indigo);
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.35); transform: scale(0); transition: transform 600ms var(--ease);
}
.pin::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--pupil); opacity: 0; }
.anatomy.in .pin { transform: scale(1); }
.anatomy.in .pin::after { animation: ping 2.4s var(--ease) 1.4s infinite; }
.legend { list-style: none; counter-reset: pin; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 28px; margin-top: 56px; }
.legend li { counter-increment: pin; font-size: 0.95rem; color: var(--text-2); padding-top: 14px; border-top: 1px solid var(--line); }
.legend li::before { content: counter(pin, decimal-leading-zero); display: block; font-weight: 700; color: var(--indigo); margin-bottom: 4px; }
.legend b { color: var(--text); font-weight: 600; }

/* ---------- Tabs: the clients and the List / Timeline switch ---------- */
.tabs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0 auto 40px; padding: 6px;
    width: fit-content; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 999px;
    box-shadow: 0 10px 30px -18px rgba(16, 16, 23, 0.3);
}
.tabs button {
    position: relative; overflow: hidden; border: 0; background: none; cursor: pointer; padding: 9px 20px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 500; font-size: 0.95rem; color: var(--text-2); transition: color 300ms, background 300ms;
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.tabs button svg { width: 16px; height: 16px; }
.tabs button .bar { position: absolute; left: 18px; right: 18px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--pupil); transform: scaleX(0); transform-origin: left; }
.tabs.autoplay button[aria-selected="true"] .bar { animation: fill var(--tab-cycle) linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }

/* The next screenshot opens over the last one as an iris widening from the middle, the way Origin's
   views open from the folder's corner. The images load before the stage scrolls in (see the tab script),
   so a switch never waits on one. */
.stage { position: relative; aspect-ratio: 1600 / 1000; max-width: 1080px; margin: 0 auto; }
.stage figure {
    position: absolute; inset: 0; clip-path: circle(0% at 50% 50%);
    transition: clip-path 1000ms var(--ease); z-index: 0;
}
.stage figure.active { clip-path: circle(110% at 50% 50%); z-index: 2; }
.stage figure.leaving { clip-path: circle(110% at 50% 50%); z-index: 1; transition: none; }
.stage figure > img { width: 100%; }
.stage .code-card { position: absolute; left: -4%; bottom: -6%; width: min(440px, 46%); }
.stage figure.active .code-card { animation: card-in 800ms var(--ease) 350ms both; }
@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }
.stage-caption { max-width: 660px; margin: 64px auto 0; text-align: center; min-height: 6.5em; }
.stage-caption h3 { font-size: 1.5rem; margin-bottom: 8px; }
.stage-caption p { color: var(--text-2); }

/* ---------- Text + screenshot rows ---------- */
.row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(36px, 6vw, 84px); align-items: center; }
.row.flip { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr); }
.row.flip .row-text { order: 2; }
.row-text h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); margin-bottom: 20px; }
.row-text h2 span { display: inline-block; }
.row-text p { color: var(--text-2); margin-bottom: 16px; }
.dark .row-text p { color: var(--on-dark-2); }
.ticks { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: center; font-weight: 500; }

/* ---------- Front end to back end: a browser fetch and the Laravel request it started ----------
   While the section is on screen (.playing) the fetch row lights, a pulse runs down the wire, the
   server card's "from browser" link lights and its rows arrive one by one. At rest everything shows. */
.link-demo { --ld-loop: 6s; display: grid; font-family: var(--font-mono); font-size: 0.8rem; }
.ld-card {
    border-radius: 14px; overflow: hidden; background: var(--ink-2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.ld-browser { width: 84%; justify-self: start; }
.ld-server { width: 92%; justify-self: end; }
.ld-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; color: var(--on-dark);
}
.ld-src { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500; color: var(--on-dark-3); }
.ld-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pupil); }
.ld-browser .ld-dot { background: #38BDF8; }
.ld-row {
    display: grid; grid-template-columns: 50px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
    padding: 9px 16px; color: var(--on-dark-2);
}
.ld-row + .ld-row { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.ld-kind { color: var(--on-dark-3); }
.ld-kind.ld-log { color: var(--warn); }
.ld-main { color: var(--on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-main i { font-style: normal; color: var(--str); }
.ld-ok { color: var(--ok); }
.ld-ms { grid-column: -2; color: var(--on-dark-3); text-align: right; white-space: nowrap; }
.ld-fetch { background: rgba(129, 140, 248, 0.12); box-shadow: inset 2px 0 0 var(--pupil); }
.ld-wire { position: relative; height: 68px; margin-left: 30%; border-left: 2px dashed rgba(129, 140, 248, 0.45); }
.ld-wire code { position: absolute; left: 14px; top: 50%; translate: 0 -50%; padding: 3px 8px; border-radius: 6px; font-size: 0.74rem; color: var(--pupil); background: rgba(129, 140, 248, 0.12); }
.ld-pulse { position: absolute; left: -5px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--pupil); box-shadow: 0 0 12px 3px rgba(129, 140, 248, 0.8); opacity: 0; }
.ld-from {
    display: inline-flex; align-items: center; gap: 8px; margin: 12px 16px 6px; padding: 5px 10px; border-radius: 8px;
    font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: var(--pupil);
    background: rgba(129, 140, 248, 0.14); box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.35);
}
.ld-from svg { width: 18px; height: 12px; }
.link-demo.playing .ld-fetch { animation: ld-flash var(--ld-loop) ease-in-out infinite; }
.link-demo.playing .ld-pulse { animation: ld-pulse var(--ld-loop) cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.link-demo.playing .ld-from { animation: ld-from var(--ld-loop) ease-out infinite; }
.link-demo.playing .ld-step { animation: ld-step var(--ld-loop) ease-out infinite; }
.link-demo.playing .ld-step:nth-child(4) { animation-delay: 0.18s; }
.link-demo.playing .ld-step:nth-child(5) { animation-delay: 0.36s; }
.link-demo.playing .ld-step:nth-child(6) { animation-delay: 0.54s; }
@keyframes ld-flash { 0%, 16%, 100% { background: rgba(129, 140, 248, 0.12); } 6% { background: rgba(129, 140, 248, 0.34); } }
@keyframes ld-pulse { 0%, 8% { transform: none; opacity: 0; } 11% { opacity: 1; } 30% { transform: translateY(60px); opacity: 1; } 34%, 100% { transform: translateY(60px); opacity: 0; } }
@keyframes ld-from {
    0%, 29%, 60%, 100% { box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.35); }
    34% { box-shadow: inset 0 0 0 1px var(--pupil), 0 0 26px rgba(129, 140, 248, 0.55); }
}
@keyframes ld-step { 0%, 33% { opacity: 0.2; } 42%, 92% { opacity: 1; } 100% { opacity: 0.2; } }

/* ---------- Traces: three facts under the switch ---------- */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; max-width: 1080px; margin: 72px auto 0; }
.fact h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fact p { color: var(--text-2); font-size: 0.97rem; }

/* ---------- Pause: a working pause bar ---------- */
.pause-demo { display: grid; gap: 16px; }
.pausebar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px;
    background: var(--warn-wash); color: var(--bracket); box-shadow: 0 0 0 1px rgba(242, 181, 68, 0.25), 0 30px 60px -24px rgba(16, 16, 23, 0.5);
    transition: background 400ms var(--ease), box-shadow 400ms var(--ease);
}
.pausebar .badge {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; color: var(--ink);
    background: repeating-linear-gradient(-45deg, var(--warn) 0 5px, #D99A2B 5px 10px); background-size: 14px 14px;
}
.pause-demo.waiting .badge { animation: hatch 1.2s linear infinite; }
@keyframes hatch { to { background-position: 14px 0; } }
.pausebar .badge svg { width: 14px; height: 14px; }
.pb-text { flex: 1 1 260px; font-size: 0.92rem; line-height: 1.45; }
.pb-text b { font-weight: 600; }
.pb-text code { background: none; padding: 0; color: var(--on-dark-2); }
.pb-time { font-variant-numeric: tabular-nums; color: var(--warn); font-weight: 600; }
.pb-actions { display: flex; gap: 8px; }
.pb-actions button {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; cursor: pointer;
    font-size: 0.9rem; font-weight: 600; transition: transform 200ms var(--ease), background 200ms;
}
.pb-actions button svg { width: 12px; height: 12px; }
.pb-actions button:active { transform: scale(0.97); }
.pb-continue { background: var(--indigo-2); color: #fff; border: 0; }
.pb-continue:hover { background: var(--indigo); }
.pb-stop { background: none; color: var(--err); border: 1px solid rgba(248, 113, 113, 0.6); }
.pb-stop:hover { background: rgba(248, 113, 113, 0.1); }
.pause-demo.ran .pausebar { background: #16271D; box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.3), 0 30px 60px -24px rgba(16, 16, 23, 0.5); }
.pause-demo.stopped .pausebar { background: #2C1719; box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.3), 0 30px 60px -24px rgba(16, 16, 23, 0.5); }
.pause-demo.ran .badge { background: var(--ok); }
.pause-demo.stopped .badge { background: var(--err); }
.pause-demo:not(.waiting) .pb-actions button { opacity: 0.4; pointer-events: none; }
.pause-hint { font-size: 0.88rem; color: var(--text-3); text-align: center; }

/* ---------- Safe to leave in (dark) ---------- */
.promises { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius); overflow: hidden; }
.promise { background: var(--ink-2); padding: clamp(28px, 4vw, 48px); transition: background 400ms var(--ease); }
.promise:hover { background: var(--ink-3); }
.promise .eye-mark { width: 30px; height: 19px; margin-bottom: 20px; }
.promise h3 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); margin-bottom: 12px; }
.promise p { color: var(--on-dark-2); }
/* A huge, faint eye watching from the corner of the chapter; its pupil wanders. */
.watcher { position: absolute; right: -8%; top: -14%; width: clamp(360px, 46vw, 680px); opacity: 0.07; pointer-events: none; }
.watcher .br { stroke: #fff; }
.watcher .w-pupil { transform-box: fill-box; transform-origin: center; animation: wander 14s ease-in-out infinite; }
@keyframes wander {
    0%, 100% { transform: none; }
    20% { transform: translate(-48px, 14px); }
    45% { transform: translate(30px, -22px); }
    70% { transform: translate(52px, 18px); }
}

/* ---------- Your ray() calls: one small card ---------- */
.section.compact { padding: clamp(64px, 8vw, 110px) 0; }
.ray-card {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: center;
    padding: clamp(28px, 4.5vw, 56px); border-radius: var(--radius); border: 1px solid var(--line);
    background: radial-gradient(90% 120% at 100% 0%, rgba(129, 140, 248, 0.14), transparent 60%), var(--paper);
}
.ray-card h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 16px; }
.ray-card h2 span { color: var(--text-3); display: inline-block; }
.ray-card p { color: var(--text-2); }
.ray-card .fine { margin-top: 14px; font-size: 0.82rem; color: var(--text-3); }
.morph-card { font-size: 1.02rem; }
.morph-card pre { padding: 22px 0; }
/* ray( turns into gaze( and back: the old name deletes, the new one types, both with the caret. */
.morph-old, .morph-new { display: inline-block; vertical-align: top; overflow: hidden; white-space: pre; text-indent: 0; }
.morph-old { max-width: 3ch; animation: morph-old 6s steps(3) infinite; }
.morph-new { max-width: 0; animation: morph-new 6s steps(4) infinite; }
.morph-new::before { content: attr(data-word); color: var(--pupil); font-weight: 600; }
.morph-caret { display: inline-block; width: 2px; height: 1.2em; margin: 0 1px; vertical-align: -0.2em; background: var(--pupil); animation: caret 700ms steps(1) infinite; }
@keyframes morph-old { 0%, 22% { max-width: 3ch; } 32%, 88% { max-width: 0; } 96%, 100% { max-width: 3ch; } }
@keyframes morph-new { 0%, 34% { max-width: 0; } 46%, 84% { max-width: 4ch; } 88%, 100% { max-width: 0; } }
.morph-note { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.85rem; color: var(--on-dark-2); }
.morph-note .ok { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2); }

/* ---------- Copy line (MCP command): wraps instead of scrolling; types itself once ---------- */
.copy-line {
    display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 12px 12px 12px 18px; border-radius: 12px;
    background: var(--ink); color: var(--bracket); box-shadow: 0 20px 40px -24px rgba(16, 16, 23, 0.6);
}
.dark .copy-line { background: var(--ink-3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.copy-line code { flex: 1; min-width: 0; padding: 6px 0; white-space: normal; overflow-wrap: anywhere; background: none; color: inherit; font-size: 0.84rem; line-height: 1.6; min-height: 3.2em; }
.copy-line code::before { content: '$ '; color: var(--on-dark-3); }
.copy-line code.typing::after { content: ''; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--pupil); animation: caret 700ms steps(1) infinite; }
.copy-line button {
    flex-shrink: 0; padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: none;
    color: var(--on-dark); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 200ms;
}
.copy-line button:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------- Bento of everyday details ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; overflow: hidden; position: relative; transition: transform 400ms var(--ease), box-shadow 400ms var(--ease); }
.tile:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(16, 16, 23, 0.35); }
.tile h3 { margin-bottom: 8px; }
.tile p { color: var(--text-2); font-size: 0.97rem; }
.tile.big { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; }
.tile.big img { margin-top: auto; padding-top: 24px; }
.tile.big img.shot { border-radius: 10px; }
.tile.third { grid-column: span 2; }
.tile .glyph { font-family: var(--font-mono); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--indigo); margin-bottom: 14px; line-height: 1.2; }

/* Keys: each key presses in turn and says what it does. */
.keys-demo { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.keycap {
    min-width: 50px; height: 50px; padding: 0 12px; border-radius: 12px; display: grid; place-items: center;
    font-weight: 600; font-size: 1.05rem; color: var(--text); white-space: nowrap;
    background: linear-gradient(#fff, #F3F3F8); border: 1px solid #D6D6E2; box-shadow: 0 4px 0 #D6D6E2, 0 10px 18px -10px rgba(16, 16, 23, 0.25);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}
.keycap.down { transform: translateY(4px); box-shadow: 0 0 0 #D6D6E2, 0 4px 10px -8px rgba(16, 16, 23, 0.25); background: linear-gradient(#EEF0FF, #DDE1FF); color: var(--indigo); }
.keys-say { min-height: 1.6em; margin-top: 14px; font-weight: 500; color: var(--text-2); }

/* Themes: the swatches light up one after another. */
.swatches { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 9px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(16, 16, 23, 0.12); animation: swatch 7s var(--ease) infinite; animation-delay: calc(var(--i) * 1s); }
.swatch::before { content: ''; position: absolute; inset: 0 50% 0 0; background: var(--l); }
.swatch::after { content: ''; position: absolute; inset: 0 0 0 50%; background: var(--d); }
.swatch i { position: absolute; z-index: 1; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--a); box-shadow: 0 0 0 2px #fff; }
@keyframes swatch {
    0% { transform: none; }
    4%, 12% { transform: translateY(-5px) scale(1.14); box-shadow: inset 0 0 0 1px rgba(16, 16, 23, 0.12), 0 8px 16px -6px rgba(16, 16, 23, 0.35); }
    18%, 100% { transform: none; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
    list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative;
    font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
    border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform 300ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { color: var(--text-2); padding: 0 0 26px; max-width: 700px; }

/* ---------- Final call: a big eye rises behind the footer and keeps watching ---------- */
.final {
    position: relative; overflow: hidden; color: var(--on-dark); text-align: center;
    background: radial-gradient(70% 60% at 50% 100%, rgba(79, 70, 229, 0.4), rgba(79, 70, 229, 0) 70%), linear-gradient(180deg, var(--ink), #0B0B10);
    padding-top: clamp(120px, 16vw, 200px);
}
.final-copy { position: relative; z-index: 2; }
.final .app-icon { width: 112px; height: 112px; margin: 0 auto 28px; border-radius: 25px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 20px 40px -10px rgba(0, 0, 0, 0.6); }
.final h2 { font-size: clamp(2.8rem, 7vw, 5.4rem); margin-bottom: 18px; }
.final .lede { margin: 0 auto 36px; }
.final .hero-cta { justify-content: center; }
.horizon { position: relative; height: clamp(180px, 24vw, 340px); margin-top: clamp(70px, 9vw, 120px); }
.horizon .eye { position: absolute; left: 50%; bottom: -40%; width: clamp(320px, 46vw, 660px); transform: translateX(-50%); }
.horizon .br { stroke: rgba(244, 244, 246, 0.16); }
.horizon .glow { opacity: 0.55; animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.8; transform: scale(1.18); } }
.footer { position: relative; z-index: 2; padding: 40px 0 36px; color: var(--ink); text-align: left; background: #fff; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid rgba(16, 16, 23, 0.16); }
.footer-top img { width: 150px; }
.footer-top p { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; margin-bottom: 10px; }
.guides { font-size: 0.9rem; max-width: 640px; line-height: 1.9; }
.guides a { text-decoration: none; border-bottom: 1px solid rgba(16, 16, 23, 0.3); font-weight: 500; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 22px; font-size: 0.82rem; }
.footer-bottom > * { min-width: 0; max-width: 100%; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-bottom a { text-decoration: none; font-weight: 600; }

/* ---------- Small screens ---------- */
@media (max-width: 960px) {
    .nav-links a:not(.btn) { display: none; }
    .proof ul { grid-template-columns: repeat(2, 1fr); }
    .legend { grid-template-columns: repeat(2, 1fr); }
    .row, .row.flip, .ray-card { grid-template-columns: minmax(0, 1fr); }
    .row.flip .row-text { order: 0; }
    .facts { grid-template-columns: 1fr; gap: 28px; }
    .promises { grid-template-columns: 1fr; }
    .bento { grid-template-columns: repeat(2, 1fr); }
    .tile.big, .tile.third { grid-column: span 2; grid-row: auto; }
    .stage { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr); }
    .stage figure { position: relative; grid-area: 1 / 1; }
    .stage .code-card { position: relative; left: auto; bottom: auto; width: 100%; margin-top: 18px; }
    .stage-caption { margin-top: 40px; }
}

@media (max-width: 600px) {
    body { font-size: 16px; }
    .hero { padding-top: 108px; }
    .hero-mark, .hero-eye { width: 92px; height: 92px; }
    .hero-mark { margin-bottom: 22px; }
    .halo { --halo: 340px; }
    .brand-by { display: none; }
    .nav .btn { white-space: nowrap; }
    .hero-stage { aspect-ratio: 1600 / 1000; }
    .hero-float, .hero-packet { display: none; }
    .btn-download { padding-left: 18px; }
    .proof ul { grid-template-columns: 1fr; gap: 14px; }
    .stack-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 8px; }
    .stack-logos svg { width: 36px; height: 36px; }
    .ld-browser, .ld-server { width: 100%; }
    .link-demo { font-size: 0.72rem; }
    .ld-row { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 8px 12px; }
    .ld-row .ld-ok { display: none; }
    .ld-head { padding: 10px 12px; }
    .ld-from { margin-inline: 12px; }
    .legend { grid-template-columns: 1fr; }
    .pin { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 0.65rem; }
    .tabs { border-radius: 18px; }
    .tabs button { padding: 8px 14px; font-size: 0.88rem; }
    .code-card pre { font-size: 0.76rem; }
    .keycap { min-width: 44px; height: 44px; font-size: 0.95rem; }
    .pb-actions { width: 100%; }
    .pb-actions button { flex: 1; justify-content: center; }
    .footer-top, .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Reduce Motion: everything is shown at rest ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal-eye, .stage figure.active { clip-path: none; }
    .reveal-up { opacity: 1; transform: none; }
    .pin { transform: scale(1); }
    .hero-packet, .hero-row { display: none; }
    .split { --split: 0.5; }
    .typing .type { max-width: var(--chars); border-right: 0; }
    .morph-old { max-width: 0; }
    .morph-new { max-width: 4ch; }
    .morph-caret { display: none; }
}