/* Video2Blog design foundation — "Signal".
   Shared by the marketing site (scripts/build-site.mjs inlines it into site.css)
   and the app (imported by src/web/styles.css). One identity, two surfaces.

   Direction: a dark, cinematic canvas where the product's own signature carries
   the colour — amber for evidence (timestamps, sources), a cool "signal" blue for
   machine work (processing, AI). Editorial serif for voice, Geist for interface,
   Geist Mono for anything measured (time, ids, counts).
   Breakpoints (used in media queries): 480 · 760 · 1024 · 1280 · 1600 · 2200. */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/geist-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: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/geist-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/geist-mono-latin.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-latin.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-latin-italic.woff2) format("woff2"); }

:root {
  color-scheme: dark;
  /* ---- surfaces (low → high elevation) */
  --bg: #07080a;
  --bg-1: #0c0d10;
  --bg-2: #111216;
  --bg-3: #17181d;
  --bg-4: #1e1f25;
  --glass: rgba(18, 19, 24, .72);
  /* ---- lines */
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .13);
  --line-3: rgba(255, 255, 255, .22);
  /* ---- text */
  --fg: #ededef;
  --fg-2: #b4b5bc;
  --fg-3: #8b8c94;      /* ≥ 4.8:1 on --bg-2 */
  --fg-inv: #0a0a0b;
  /* ---- identity */
  --amber: #f5b454;     /* evidence: timestamps, sources, the "proof" colour */
  --amber-2: #ffcf87;
  --amber-bg: rgba(245, 180, 84, .1);
  --amber-line: rgba(245, 180, 84, .32);
  --signal: #8cc8ff;    /* machine work: processing, AI, live states */
  --signal-bg: rgba(140, 200, 255, .1);
  --signal-line: rgba(140, 200, 255, .3);
  --cta: #f3f0e8;       /* primary action: warm paper on black */
  --cta-fg: #0a0a0b;
  /* ---- status (always paired with an icon or word) */
  --ok: #6ee7a8; --ok-bg: rgba(110, 231, 168, .1);
  --warn: #f5c76a; --warn-bg: rgba(245, 199, 106, .1);
  --err: #ff8a7a; --err-bg: rgba(255, 138, 122, .1);
  --info: #8cc8ff; --info-bg: rgba(140, 200, 255, .1);
  --focus: #9fd0ff;
  /* ---- type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 12px; --text-sm: 13.5px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px;
  --display-1: clamp(44px, 7.2vw, 104px);
  --display-2: clamp(34px, 4.6vw, 64px);
  --display-3: clamp(26px, 3vw, 40px);
  --lh-tight: 1.02; --lh-snug: 1.18; --lh-body: 1.6;
  --track-display: -0.035em; --track-tight: -0.015em; --track-label: 0.12em;
  /* ---- space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px; --max-wide: 1440px; --max-text: 720px;
  /* ---- radius */
  --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  /* ---- elevation */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 8px 24px -8px rgba(0, 0, 0, .6);
  --shadow-3: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 80px -24px rgba(0, 0, 0, .8), 0 0 0 1px var(--line);
  --glow-amber: 0 0 0 1px var(--amber-line), 0 0 32px -6px rgba(245, 180, 84, .45);
  --glow-signal: 0 0 0 1px var(--signal-line), 0 0 32px -6px rgba(140, 200, 255, .4);
  /* ---- motion */
  --t-1: 120ms; --t-2: 200ms; --t-3: 320ms; --t-4: 520ms; --t-5: 900ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  /* ---- interaction tints & chrome */
  --hover: rgba(255, 255, 255, .03); --hover-2: rgba(255, 255, 255, .055);
  --chrome: rgba(7, 8, 10, .88); --chrome-solid: rgba(12, 13, 16, .96); --fg-article: #e6e3dc;
  /* ---- layers */
  --z-bg: -1; --z-base: 1; --z-sticky: 20; --z-nav: 40; --z-drawer: 60; --z-modal: 70; --z-toast: 90; --z-top: 100;
}

/* Light theme (opt-in from Settings): same identity, paper instead of night.
   Accents are darkened to keep ≥ 4.5:1 text contrast on light surfaces. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f5f1; --bg-1: #ffffff; --bg-2: #f8f7f4; --bg-3: #eeece6; --bg-4: #e3e0d8; --glass: rgba(255, 255, 255, .8);
  --line: rgba(20, 18, 14, .1); --line-2: rgba(20, 18, 14, .16); --line-3: rgba(20, 18, 14, .26);
  --fg: #17161a; --fg-2: #45434a; --fg-3: #67646c; --fg-inv: #fff; --fg-article: #23211f;
  --amber: #9a5a0c; --amber-2: #8a4b08; --amber-bg: rgba(154, 90, 12, .09); --amber-line: rgba(154, 90, 12, .3);
  --signal: #1d5fa6; --signal-bg: rgba(29, 95, 166, .08); --signal-line: rgba(29, 95, 166, .28);
  --cta: #17161a; --cta-fg: #ffffff;
  --ok: #1f6f5c; --ok-bg: rgba(31, 111, 92, .1); --warn: #8a5a00; --warn-bg: rgba(138, 90, 0, .1); --err: #b42318; --err-bg: rgba(180, 35, 24, .08); --info: #1d5fa6; --info-bg: rgba(29, 95, 166, .08); --focus: #1d4ed8;
  --hover: rgba(20, 18, 14, .03); --hover-2: rgba(20, 18, 14, .055); --chrome: rgba(246, 245, 241, .9); --chrome-solid: rgba(255, 255, 255, .97);
  --shadow-1: 0 1px 2px rgba(20, 18, 14, .06); --shadow-2: 0 8px 24px -10px rgba(20, 18, 14, .2); --shadow-3: 0 30px 80px -30px rgba(20, 18, 14, .35), 0 0 0 1px var(--line);
}
:root[data-theme="light"] .btn.primary { box-shadow: 0 8px 24px -12px rgba(20, 18, 14, .5); }
:root[data-theme="light"] .btn.primary:hover { background: #000; }
:root[data-theme="light"] .new-btn .kbd { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.75); }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: var(--text-md)/var(--lh-body) var(--font-sans); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
a { color: inherit; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(245, 180, 84, .32); color: #fff; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 10px; background: var(--cta); color: var(--cta-fg); padding: 10px 14px; border-radius: var(--r-sm); z-index: var(--z-top); font-weight: 600; text-decoration: none; }
.skip:focus { left: 10px; }

/* ---------------------------------------------------------------- type helpers */
.display { font-family: var(--font-serif); font-weight: 400; letter-spacing: var(--track-display); line-height: var(--lh-tight); }
.display em, .serif-em { font-style: italic; color: var(--amber-2); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.eyebrow.signal::before { background: var(--signal); box-shadow: 0 0 12px var(--signal); }
.mono { font-family: var(--font-mono); }
.muted { color: var(--fg-3); }
.dim { color: var(--fg-2); }
.small { font-size: var(--text-sm); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- buttons */
.btn { --h: 40px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--bg-2); color: var(--fg); font-weight: 550; font-size: 14px; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; isolation: isolate; transition: background var(--t-2) var(--ease), border-color var(--t-2) var(--ease), box-shadow var(--t-3) var(--ease), transform var(--t-2) var(--ease), color var(--t-2); -webkit-tap-highlight-color: transparent; user-select: none; }
.btn:hover { background: var(--bg-3); border-color: var(--line-3); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--cta); color: var(--cta-fg); border-color: transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 8px 30px -10px rgba(245, 180, 84, .5); }
.btn.primary:hover { background: #fff; box-shadow: 0 0 0 1px #fff inset, 0 10px 40px -8px rgba(245, 180, 84, .7); }
.btn.amber { background: var(--amber); color: #1a1205; border-color: transparent; }
.btn.amber:hover { background: var(--amber-2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.btn.ghost:hover { background: rgba(255, 255, 255, .05); color: var(--fg); }
.btn.outline { background: transparent; }
.btn.danger { color: var(--err); }
.btn.lg { --h: 52px; padding: 0 26px; font-size: 15.5px; }
.btn.sm { --h: 32px; padding: 0 12px; font-size: 13px; }
.btn.xs { --h: 26px; padding: 0 9px; font-size: 12px; }
.btn.icon { padding: 0; width: var(--h); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn .arrow { transition: transform var(--t-3) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.btn.loading { color: transparent !important; pointer-events: none; }
.btn.loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--fg) transparent var(--fg) transparent; animation: spin .8s linear infinite; }
.btn.primary.loading::after { border-color: var(--cta-fg) transparent var(--cta-fg) transparent; }
@media (pointer: coarse) { .btn { --h: 44px; } .btn.sm { --h: 40px; } .btn.xs { --h: 36px; } }

/* ---------------------------------------------------------------- chips & badges */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font: 500 11.5px/1 var(--font-sans); background: rgba(255, 255, 255, .06); color: var(--fg-2); border: 1px solid var(--line); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge.plain::before { display: none; }
.badge.ok { color: var(--ok); background: var(--ok-bg); border-color: rgba(110, 231, 168, .25); }
.badge.warn { color: var(--warn); background: var(--warn-bg); border-color: rgba(245, 199, 106, .25); }
.badge.err { color: var(--err); background: var(--err-bg); border-color: rgba(255, 138, 122, .25); }
.badge.info { color: var(--info); background: var(--info-bg); border-color: var(--signal-line); }
.badge.live::before { animation: pulse 1.6s var(--ease-in-out) infinite; }
.kbd { font: 500 11px/1 var(--font-mono); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--fg-2); }

/* the signature: timestamp chips */
.ts { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 7px; border-radius: 6px; font: 500 11.5px/1 var(--font-mono); color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-line); text-decoration: none; white-space: nowrap; vertical-align: 1px; cursor: pointer; transition: background var(--t-1), transform var(--t-2) var(--ease), box-shadow var(--t-2); }
.ts:not(.static):hover { background: rgba(245, 180, 84, .18); transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(245, 180, 84, .6); }
.ts.static { cursor: default; }

/* ---------------------------------------------------------------- surfaces */
.surface { background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)), var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.glass { background: var(--glass); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid var(--line); }

/* Spotlight surface (pattern adapted from 21st.dev "Spotlight" / "Cursor Spotlight"):
   a radial light that follows the pointer — set --mx/--my from JS (motion runtime). */
.spot { position: relative; isolation: isolate; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity var(--t-3) var(--ease); background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 180, 84, .1), transparent 60%); }
.spot:hover::before, .spot.lit::before { opacity: 1; }
/* Border spotlight: the border itself catches the light */
.spot-border { position: relative; }
.spot-border::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity var(--t-3); background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 180, 84, .7), rgba(140, 200, 255, .25) 40%, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.spot-border:hover::after, .spot-border.lit::after { opacity: 1; }

/* Border beam (pattern adapted from 21st.dev "Border Beam"): a light that travels along the border. */
.beam { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px solid transparent; -webkit-mask: linear-gradient(transparent, transparent) padding-box, linear-gradient(#000, #000) border-box; mask: linear-gradient(transparent, transparent) padding-box, linear-gradient(#000, #000) border-box; -webkit-mask-composite: source-in; mask-composite: intersect; }
.beam::after { content: ""; position: absolute; width: var(--beam-size, 160px); aspect-ratio: 1; background: linear-gradient(to left, var(--beam-from, var(--amber)), var(--beam-to, var(--signal)), transparent); offset-path: rect(0 auto auto 0 round var(--beam-size, 160px)); offset-anchor: 90% 50%; animation: beam var(--beam-dur, 9s) linear infinite; animation-delay: var(--beam-delay, 0s); }
@keyframes beam { to { offset-distance: 100%; } }
@supports not (offset-path: rect(0 auto auto 0)) { .beam { display: none; } }

/* ---------------------------------------------------------------- backgrounds (reusable, layered) */
.bg-layer { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-bg); overflow: hidden; }
/* engineering grid that fades out at the edges */
.bg-grid { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; background-position: center top; -webkit-mask: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); mask: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); opacity: .55; }
.bg-dots { background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask: radial-gradient(ellipse 60% 70% at 50% 40%, #000, transparent 80%); mask: radial-gradient(ellipse 60% 70% at 50% 40%, #000, transparent 80%); }
/* slow light field: two blurred lights drifting (amber = evidence, blue = machine) */
.bg-aurora::before, .bg-aurora::after { content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .22; will-change: transform; }
.bg-aurora::before { background: radial-gradient(circle, rgba(245, 180, 84, .9), transparent 60%); top: -30vmax; left: -10vmax; animation: drift-a 26s var(--ease-in-out) infinite alternate; }
.bg-aurora::after { background: radial-gradient(circle, rgba(110, 160, 255, .8), transparent 60%); top: -20vmax; right: -20vmax; animation: drift-b 32s var(--ease-in-out) infinite alternate; opacity: .16; }
@keyframes drift-a { to { transform: translate3d(14vmax, 8vmax, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-12vmax, 12vmax, 0) scale(.9); } }
/* film grain — breaks gradient banding, adds material */
.bg-noise { opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* pointer light: follows --px/--py on the layer's parent */
.bg-pointer { background: radial-gradient(600px circle at var(--px, 50%) var(--py, -20%), rgba(245, 180, 84, .08), transparent 60%); transition: opacity var(--t-4); }

/* ---------------------------------------------------------------- shared keyframes */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1); } }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes blur-in { from { opacity: 0; filter: blur(10px); transform: translate3d(0, 8px, 0); } to { opacity: 1; filter: none; transform: none; } }
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton { background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 40%, var(--bg-2) 80%) 0 0 / 200% 100%; animation: shimmer 1.6s linear infinite; border-radius: var(--r-sm); }

/* ---------------------------------------------------------------- reduced motion: keep layout, drop movement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .bg-aurora::before, .bg-aurora::after, .beam { animation: none !important; }
  .beam { display: none; }
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .32s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

body { font-size: var(--text-lg); overflow-x: clip; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.wide { max-width: var(--max-wide); }
.wrap.text { max-width: var(--max-text); }
section.block { position: relative; padding: clamp(80px, 12vw, 160px) 0; }
section.block + section.block { border-top: 1px solid var(--line); }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--display-2); margin: 18px 0 18px; }
.section-head p { color: var(--fg-2); font-size: clamp(17px, 1.5vw, 19px); margin: 0; max-width: 620px; }
.section-head.center p { margin-inline: auto; }
.lede { color: var(--fg-2); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.note { font: 500 12.5px/1.4 var(--font-mono); color: var(--fg-3); letter-spacing: .02em; }
.note b { color: var(--fg-2); font-weight: 500; }

/* ---------------- progress + header */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--z-top); background: linear-gradient(90deg, var(--amber), var(--signal)); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) { .progress { animation: grow linear both; animation-timeline: scroll(root); } }
@keyframes grow { to { transform: scaleX(1); } }
.site-header { position: sticky; top: 0; z-index: var(--z-nav); transition: background var(--t-3), border-color var(--t-3), backdrop-filter var(--t-3); border-bottom: 1px solid transparent; }
.site-header.scrolled { background: rgba(7, 8, 10, .72); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom-color: var(--line); }
.site-header .bar { height: 68px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 620; letter-spacing: -.02em; font-size: 16px; }
.mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(140deg, #1d1e24, #0d0e11); border: 1px solid var(--line-2); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 6px 18px -6px rgba(245,180,84,.45); }
.mark svg { width: 14px; height: 14px; }
.site-nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.site-nav a { text-decoration: none; color: var(--fg-2); font-size: 14.5px; padding: 8px 12px; border-radius: var(--r-pill); transition: color var(--t-2), background var(--t-2); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--fg); background: rgba(255,255,255,.05); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; }
.drawer { display: none; }
@media (max-width: 900px) {
  .site-nav, .header-actions .signin { display: none; }
  .menu-btn { display: inline-flex; }
  .drawer { position: fixed; inset: 68px 0 0 0; z-index: var(--z-drawer); background: rgba(7,8,10,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 24px var(--gutter) 40px; display: flex; flex-direction: column; gap: 4px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease-out), visibility 0s linear var(--t-3); overflow-y: auto; }
  .drawer.open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .drawer a:not(.btn) { font: 400 34px/1.15 var(--font-serif); letter-spacing: -.02em; text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .drawer .btn { margin-top: 20px; }
  body.menu-open { overflow: hidden; }
}

/* ---------------- hero */
.hero { position: relative; isolation: isolate; padding: clamp(56px, 9vw, 120px) 0 clamp(64px, 8vw, 110px); overflow: clip; }
.hero-field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .9; }
.hero .bg-layer { z-index: -2; }
.hero-copy { text-align: center; max-width: 1020px; margin: 0 auto; }
.hero h1 { font-size: var(--display-1); margin: 22px 0 0; text-wrap: balance; }
.hero h1 .w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .w > span { display: inline-block; }
.js .hero h1 .w > span { transform: translate3d(0, 105%, 0); animation: word-up var(--t-5) var(--ease-out) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes word-up { to { transform: none; } }
.hero .lede { max-width: 640px; margin: 28px auto 36px; }
.hero .cta-row { justify-content: center; }
.hero .note { margin-top: 18px; }
.announce { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(255,255,255,.03); text-decoration: none; font-size: 13.5px; color: var(--fg-2); transition: border-color var(--t-2), background var(--t-2); }
.announce:hover { border-color: var(--amber-line); background: var(--amber-bg); color: var(--fg); }
.announce span { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--r-pill); background: var(--amber); color: #1a1205; }

/* product window with depth */
.stage { position: relative; margin: clamp(48px, 7vw, 88px) auto 0; max-width: 1180px; perspective: 1600px; }
.window { position: relative; z-index: 1; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--bg-1); box-shadow: var(--shadow-3), 0 60px 160px -40px rgba(245,180,84,.18); transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out); overflow: hidden; }
.js .window { animation: window-in 1.2s var(--ease-out) .35s both; }
@keyframes window-in { from { opacity: 0; transform: translate3d(0, 40px, 0) rotateX(12deg); } }
.window-bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); font: 500 12px/1 var(--font-mono); color: var(--fg-3); }
.dots { display: flex; gap: 6px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-4); }
.window-bar .file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-bar .stage-name { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--signal); white-space: nowrap; }
.window-bar .stage-name::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: pulse 1.4s var(--ease-in-out) infinite; }
.win-grid { display: grid; grid-template-columns: 1.05fr .95fr 1.25fr; min-height: 430px; }
.win-col { padding: 18px; border-right: 1px solid var(--line); min-width: 0; }
.win-col:last-child { border-right: 0; }
.win-col h3 { margin: 0 0 14px; font: 500 11px/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); display: flex; align-items: center; justify-content: space-between; }
.player { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.slide { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 14px; color: #fff; font: 600 clamp(12px, 1.25vw, 17px)/1.25 var(--font-sans); opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease), transform 1.4s var(--ease-out); }
.slide b { display: block; font: 400 2.4em/1 var(--font-serif); letter-spacing: -.03em; margin-top: 6px; }
.slide.s1 { background: radial-gradient(120% 120% at 20% 0%, #23324f, #0e1422); }
.slide.s2 { background: radial-gradient(120% 120% at 80% 0%, #3a2a12, #140e06); }
.slide.s3 { background: radial-gradient(120% 120% at 50% 100%, #10362a, #06120e); }
[data-slide="1"] .s1, [data-slide="2"] .s2, [data-slide="3"] .s3 { opacity: 1; transform: none; }
.scanline { position: absolute; inset: 0 auto 0 -40%; width: 40%; background: linear-gradient(90deg, transparent, rgba(140,200,255,.35), transparent); mix-blend-mode: screen; pointer-events: none; }
.scanning .scanline { animation: scan 1.2s var(--ease-in-out) 1; }
@keyframes scan { to { left: 100%; } }
.track { position: relative; margin-top: 14px; height: 46px; }
.wave { display: flex; align-items: center; gap: 2px; height: 30px; }
.wave i { flex: 1; height: calc(var(--h) * 1%); border-radius: 2px; background: var(--bg-4); transition: background .3s; }
.wave i.on { background: linear-gradient(var(--signal), rgba(140,200,255,.4)); }
.playhead { position: absolute; top: 0; bottom: 14px; width: 2px; left: calc(var(--p, 0) * 1%); background: var(--amber); box-shadow: 0 0 12px var(--amber); transition: left 1.4s linear; }
.marks { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; }
.marks b { position: absolute; bottom: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); transform: scale(0); transition: transform .45s var(--spring); }
.marks b.on { transform: scale(1); }
.ticks { display: flex; justify-content: space-between; margin-top: 8px; font: 11px var(--font-mono); color: var(--fg-3); }
.moments { display: flex; flex-direction: column; gap: 10px; }
.moment { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--bg-2); font-size: 12.5px; opacity: 0; transform: translate3d(-14px, 0, 0); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), border-color .4s, box-shadow .4s; }
.moment.on { opacity: 1; transform: none; }
.moment.hl { border-color: var(--amber-line); box-shadow: var(--glow-amber); }
.moment .thumb { height: 34px; border-radius: 6px; margin: 8px 0; display: grid; place-items: center; font: 600 10px var(--font-sans); color: #fff; }
.moment .ocr { font: 11px/1.45 var(--font-mono); color: var(--fg-2); }
.moment .ocr small { color: var(--signal); }
.article-col { font: 16px/1.62 var(--font-serif); }
.article-col h4 { font: 400 26px/1.1 var(--font-serif); letter-spacing: -.02em; margin: 0 0 12px; }
.article-col p { margin: 0 0 12px; color: var(--fg-2); clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease-out); font-size: 16.5px; }
.article-col p.on { clip-path: inset(0 0 0 0); }
.article-col .ts { opacity: 0; transform: scale(.6); transition: opacity .3s .9s, transform .4s var(--spring) .9s; }
.article-col p.on .ts { opacity: 1; transform: none; }
.flag { font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); background: var(--signal-bg); border: 1px solid var(--signal-line); border-radius: 4px; padding: 3px 5px; margin-right: 6px; vertical-align: 2px; }
.quality { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; font: 13px var(--font-sans); color: var(--fg-3); opacity: 0; transition: opacity .5s; }
.quality.on { opacity: 1; }
.ring { --v: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--font-mono); color: var(--ok); background: conic-gradient(var(--ok) calc(var(--v) * 1%), var(--bg-4) 0); -webkit-mask: radial-gradient(circle, transparent 13px, #000 14px); mask: radial-gradient(circle, transparent 13px, #000 14px); }
.ring-wrap { position: relative; width: 38px; height: 38px; }
.ring-wrap span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 11px var(--font-mono); color: var(--ok); }
/* floating chips at different depths */
.float { position: absolute; z-index: 5; pointer-events: none; transform: translate3d(var(--fx, 0), var(--fy, 0), 0); transition: transform .9s var(--ease-out); }
.float .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; font: 500 12.5px/1.2 var(--font-mono); white-space: nowrap; box-shadow: var(--shadow-2); }
.f1 { left: -3%; top: 26%; } .f2 { right: -2%; top: -18px; } .f3 { right: 4%; bottom: -4%; }
.js .float { animation: float-in 1s var(--ease-out) both; animation-delay: var(--fd, 1.2s); }
@keyframes float-in { from { opacity: 0; translate: 0 16px; } }
.stage-glow { position: absolute; inset: 20% 10% -10%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(245,180,84,.22), transparent 70%); filter: blur(40px); }
@media (max-width: 1024px) { .win-grid { grid-template-columns: 1fr 1fr; } .win-col.ev { display: none; } .f1 { left: 0; } }
@media (max-width: 680px) { .win-grid { grid-template-columns: 1fr; min-height: 0; } .win-col { border-right: 0; border-bottom: 1px solid var(--line); } .float { display: none; } .window-bar .file { display: none; } }

/* ---------------- facts strip */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.facts > div { padding: 22px var(--gutter); display: flex; gap: 12px; align-items: center; color: var(--fg-2); font-size: 14.5px; border-left: 1px solid var(--line); }
.facts > div:first-child { border-left: 0; }
.facts svg { flex: none; width: 18px; height: 18px; color: var(--amber); }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr 1fr; } .facts > div:nth-child(3) { border-left: 0; } .facts > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } .facts > div { border-left: 0; } .facts > div + div { border-top: 1px solid var(--line); } }

/* ---------------- pipeline (pinned on desktop) */
.pipe { position: relative; }
.pipe-sticky { position: sticky; top: 90px; }
.pipe-scroll { height: 360vh; position: relative; }
.pipe-board { position: relative; border-radius: var(--r-xl); padding: clamp(20px, 3vw, 36px); overflow: hidden; }
.pipe-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pipe-svg .base { stroke: var(--line-2); stroke-width: 1.5; fill: none; }
.pipe-svg .lit { stroke: url(#beamGrad); stroke-width: 2; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(245,180,84,.6)); }
.nodes { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
.node { position: relative; text-align: center; padding: 18px 8px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-1); transition: border-color .5s, background .5s, box-shadow .5s, transform .5s var(--ease-out); }
.node .ic { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-3); transition: inherit; }
.node .ic svg { width: 20px; height: 20px; }
.node b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.node small { display: block; font: 11px/1.35 var(--font-mono); color: var(--fg-3); margin-top: 6px; }
.node.done { border-color: var(--line-2); }
.node.done .ic { color: var(--amber); border-color: var(--amber-line); background: var(--amber-bg); }
.node.active { border-color: var(--amber-line); box-shadow: var(--glow-amber); transform: translateY(-4px); background: var(--bg-2); }
.node.active .ic { color: #1a1205; background: var(--amber); border-color: transparent; }
.node.machine.active { border-color: var(--signal-line); box-shadow: var(--glow-signal); }
.node.machine.active .ic { background: var(--signal); }
.pipe-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); margin-top: clamp(24px, 4vw, 40px); align-items: center; min-height: 230px; }
.pipe-detail .copy { position: relative; min-height: 190px; }
.pipe-detail .copy article { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .6s var(--ease-out); }
.pipe-detail .copy article.on { opacity: 1; transform: none; }
.pipe-detail h3 { font: 400 var(--display-3)/1.1 var(--font-serif); letter-spacing: -.02em; margin: 10px 0 12px; }
.pipe-detail p { color: var(--fg-2); margin: 0; }
.pipe-viz { height: 190px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-1); position: relative; overflow: hidden; }
.pipe-viz .v { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .45s; }
.pipe-viz .v.on { opacity: 1; }
.pipe-meter { height: 2px; background: var(--line); border-radius: 2px; margin-top: 28px; overflow: hidden; }
.pipe-meter i { display: block; height: 100%; width: calc(var(--pp, 0) * 100%); background: linear-gradient(90deg, var(--amber), var(--signal)); }
/* static / mobile fallback: vertical timeline, every stage readable */
@media (max-width: 1024px) {
  .pipe-scroll { height: auto; }
  .pipe-sticky { position: static; }
  .nodes { grid-template-columns: 1fr; gap: 0; }
  .node { display: grid; grid-template-columns: 44px 1fr; gap: 14px; text-align: left; align-items: start; border: 0; border-left: 1px solid var(--line-2); border-radius: 0; background: transparent; padding: 0 0 26px 18px; margin-left: 22px; box-shadow: none !important; transform: none !important; }
  .node .ic { margin: 0 0 0 -41px; background: var(--bg-2); }
  .node .txt p { margin: 8px 0 0; color: var(--fg-2); font-size: 15px; }
  .pipe-svg, .pipe-detail { display: none; }
}
@media (min-width: 1025px) { .node .txt p { display: none; } }
.no-js .pipe-scroll, .reduced .pipe-scroll { height: auto; }

/* ---------------- product demo */
.demo { border-radius: var(--r-xl); overflow: hidden; }
.demo-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.demo-tabs::-webkit-scrollbar { display: none; }
.demo-tabs button { flex: none; border: 0; background: transparent; color: var(--fg-3); padding: 9px 14px; border-radius: var(--r-pill); font: 550 13.5px var(--font-sans); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; transition: color var(--t-2), background var(--t-2); min-height: 40px; }
.demo-tabs button:hover { color: var(--fg); }
.demo-tabs button[aria-selected="true"] { background: var(--bg-3); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }
.demo-tabs .n { font: 500 11px var(--font-mono); color: var(--amber); }
.demo-label { margin-left: auto; align-self: center; padding: 0 8px; flex: none; }
.demo-body { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 470px; }
.demo-side { padding: 22px; border-right: 1px solid var(--line); }
.demo-main { padding: 22px; min-width: 0; }
.demo-panel[hidden] { display: none; }
.demo-panel { animation: blur-in .45s var(--ease-out) both; }
.seg-list { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow: auto; }
.seg { display: grid; grid-template-columns: 58px 1fr; gap: 12px; padding: 9px 10px; border-radius: 10px; font-size: 14.5px; color: var(--fg-2); cursor: pointer; border: 1px solid transparent; background: none; text-align: left; }
.seg:hover { background: rgba(255,255,255,.03); }
.seg.on { background: var(--amber-bg); border-color: var(--amber-line); color: var(--fg); }
.seg .t { font: 500 12px/1.6 var(--font-mono); color: var(--amber); }
.seg .lc { color: var(--warn); font: 500 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; margin-left: 6px; }
.demo-player { aspect-ratio: 16/9; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; position: relative; }
.demo-player .slide { opacity: 1; transform: none; transition: background .5s; }
.demo-timeline { position: relative; height: 34px; margin-top: 14px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); }
.demo-timeline button { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--bg); background: var(--amber); cursor: pointer; padding: 0; transition: transform var(--t-2) var(--spring); }
.demo-timeline button:hover, .demo-timeline button.on { transform: scale(1.35); box-shadow: 0 0 0 4px var(--amber-bg); }
.demo-timeline .head { position: absolute; top: 4px; bottom: 4px; width: 2px; background: var(--fg); left: calc(var(--t, 0) * 1%); transition: left .5s var(--ease-out); }
.demo-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font: 12px var(--font-mono); color: var(--fg-3); flex-wrap: wrap; }
.demo-article { font: 17px/1.7 var(--font-serif); color: var(--fg-2); }
.demo-article h3 { font: 400 32px/1.08 var(--font-serif); letter-spacing: -.02em; color: var(--fg); margin: 0 0 6px; }
.demo-article .sub { font-style: italic; color: var(--fg-3); margin: 0 0 18px; }
.demo-article h4 { font: 600 16px var(--font-sans); color: var(--fg); margin: 22px 0 6px; letter-spacing: -.01em; }
.demo-article p { margin: 0 0 12px; }
.demo-article figure { margin: 14px 0; }
.demo-article figcaption { font: 12.5px var(--font-sans); color: var(--fg-3); margin-top: 6px; }
.shot { aspect-ratio: 16/7; border-radius: 10px; display: grid; place-content: center; text-align: center; color: #fff; font: 600 14px var(--font-sans); border: 1px solid var(--line); }
.shot b { font: 400 34px/1 var(--font-serif); }
.formats { display: grid; gap: 12px; }
.fmt { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--bg-2); font-size: 14.5px; color: var(--fg-2); }
.fmt header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font: 500 12px var(--font-mono); color: var(--fg-3); text-transform: uppercase; letter-spacing: .08em; }
.copy-btn[data-done] { color: var(--ok); }
@media (max-width: 900px) { .demo-body { grid-template-columns: 1fr; } .demo-side { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---------------- feature bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.tile { position: relative; border-radius: var(--r-xl); padding: 26px; min-height: 280px; display: flex; flex-direction: column; overflow: hidden; }
.tile h3 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; margin: auto 0 6px; }
.tile p { color: var(--fg-2); font-size: 15px; margin: 0; max-width: 420px; }
.tile .viz { position: relative; flex: 1; min-height: 140px; margin: -6px -6px 18px; }
.t-a { grid-column: span 4; } .t-b { grid-column: span 2; } .t-c { grid-column: span 2; } .t-d { grid-column: span 2; } .t-e { grid-column: span 2; } .t-f { grid-column: span 3; } .t-g { grid-column: span 3; }
@media (max-width: 1024px) { .bento { grid-template-columns: repeat(2, 1fr); } .tile { grid-column: span 1 !important; } .t-a { grid-column: span 2 !important; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .tile, .t-a { grid-column: span 1 !important; min-height: 240px; } }
/* tile visuals */
.v-timeline { display: grid; gap: 10px; padding: 8px 6px; }
.v-row { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; font: 11px var(--font-mono); color: var(--fg-3); }
.v-lane { position: relative; height: 26px; border-radius: 7px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.v-lane i { position: absolute; top: 5px; bottom: 5px; border-radius: 4px; background: var(--c, var(--bg-4)); left: calc(var(--l) * 1%); width: calc(var(--w) * 1%); }
.v-lane .cursor { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--amber); box-shadow: 0 0 10px var(--amber); animation: sweep 7s linear infinite; }
@keyframes sweep { from { left: 0; } to { left: 100%; } }
.v-frames { position: relative; height: 150px; }
.v-frames div { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 16/10; border-radius: 10px; border: 1px solid var(--line-2); box-shadow: var(--shadow-2); display: grid; place-content: center; color: #fff; font: 600 12px var(--font-sans); transform: translate(-50%, -50%) rotate(var(--r)) translate(var(--x), var(--y)); transition: transform .6s var(--ease-out); }
.tile:hover .v-frames div { transform: translate(-50%, -50%) rotate(calc(var(--r) * 1.8)) translate(calc(var(--x) * 2.2), var(--y)); }
.v-ocr { position: relative; height: 150px; border-radius: 12px; background: radial-gradient(120% 120% at 20% 0%, #23324f, #0e1422); border: 1px solid var(--line); padding: 18px; font: 600 15px/1.4 var(--font-sans); color: #dfe8ff; overflow: hidden; }
.v-ocr .bar { position: absolute; left: 0; right: 0; height: 30px; background: linear-gradient(transparent, rgba(140,200,255,.35), transparent); animation: ocr-scan 3.2s var(--ease-in-out) infinite; }
@keyframes ocr-scan { 0% { top: -30px; } 100% { top: 100%; } }
.v-ocr .box { display: inline-block; outline: 1px dashed rgba(140,200,255,.7); outline-offset: 3px; border-radius: 2px; }
.v-ocr .conf { position: absolute; right: 12px; bottom: 10px; font: 500 11px var(--font-mono); color: var(--signal); }
.v-quality { display: grid; place-items: center; height: 150px; }
.v-quality .big { --v: 0; width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(var(--ok) calc(var(--v) * 1%), var(--bg-3) 0); -webkit-mask: radial-gradient(circle, transparent 50px, #000 51px); mask: radial-gradient(circle, transparent 50px, #000 51px); transition: --v 1.4s var(--ease-out); }
.v-quality .num { position: absolute; font: 400 44px/1 var(--font-serif); }
.v-checks { display: grid; gap: 8px; font-size: 13.5px; color: var(--fg-2); }
.v-checks div { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.v-checks .s { margin-left: auto; font: 500 11px var(--font-mono); }
.v-search { display: grid; gap: 10px; }
.v-search .q { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); font-size: 14px; }
.v-search .q svg { width: 16px; height: 16px; color: var(--fg-3); flex: none; }
.v-search .q .caret { width: 1px; height: 16px; background: var(--amber); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.v-search .r { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 13.5px; color: var(--fg-2); }
.v-search mark { background: var(--amber-bg); color: var(--amber-2); border-radius: 3px; padding: 0 2px; }
.v-formats { display: flex; flex-wrap: wrap; gap: 8px; align-content: center; height: 150px; }
.v-formats span { padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: 13px; color: var(--fg-2); background: var(--bg-2); transition: transform .4s var(--spring), border-color .3s, color .3s; }
.tile:hover .v-formats span { transform: translateY(calc(var(--k) * -3px)); border-color: var(--amber-line); color: var(--fg); }

/* ---------------- compare */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cmp { border-radius: var(--r-xl); padding: 26px; }
.cmp h3 { font: 500 12px var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.cmp p { font: 17px/1.65 var(--font-serif); color: var(--fg-2); margin: 0 0 12px; }
.cmp.bad p .x { background: var(--err-bg); color: var(--err); border-radius: 3px; padding: 0 3px; text-decoration: line-through; text-decoration-color: rgba(255,138,122,.6); }
.cmp ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--fg-2); }
.cmp li { display: flex; gap: 10px; }
.cmp li::before { content: "—"; color: var(--fg-3); }
.cmp.good { border-color: var(--amber-line); }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }

/* ---------------- architecture / trust */
.arch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: var(--r-xl); overflow: hidden; }
.arch > div { padding: 28px; border-right: 1px solid var(--line); position: relative; }
.arch > div:last-child { border-right: 0; }
.arch .where { font: 500 11px var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); }
.arch h3 { font: 400 30px/1.1 var(--font-serif); letter-spacing: -.02em; margin: 12px 0 14px; }
.arch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; color: var(--fg-2); }
.arch li { display: flex; gap: 10px; align-items: baseline; }
.arch li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); transform: translateY(-2px); }
.arch .machine li::before { background: var(--signal); }
.arch .arrow { position: absolute; right: -14px; top: 50%; z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--fg-2); transform: translateY(-50%); }
@media (max-width: 900px) { .arch { grid-template-columns: 1fr; } .arch > div { border-right: 0; border-bottom: 1px solid var(--line); } .arch .arrow { right: 50%; top: auto; bottom: -14px; transform: translateX(50%) rotate(90deg); } }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.stat { border-radius: var(--r-lg); padding: 22px; }
.stat b { display: block; font: 400 clamp(40px, 5vw, 58px)/1 var(--font-serif); letter-spacing: -.03em; color: var(--fg); }
.stat span { display: block; margin-top: 10px; color: var(--fg-3); font-size: 14px; }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } }

/* ---------------- pricing */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.plan { position: relative; border-radius: var(--r-xl); padding: 26px; display: flex; flex-direction: column; }
.plan h3 { font-size: 15px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.plan .price { font: 400 54px/1 var(--font-serif); letter-spacing: -.03em; margin: 18px 0 4px; }
.plan .price small { font: 400 14px var(--font-sans); color: var(--fg-3); letter-spacing: 0; }
.plan .for { color: var(--fg-3); font-size: 14px; margin: 0 0 18px; min-height: 42px; }
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; font-size: 14.5px; color: var(--fg-2); }
.plan li { display: flex; gap: 10px; }
.plan li svg { flex: none; width: 16px; height: 16px; color: var(--ok); margin-top: 3px; }
.plan .btn { margin-top: auto; width: 100%; }
.plan.featured { border-color: var(--amber-line); background: linear-gradient(180deg, rgba(245,180,84,.08), rgba(245,180,84,0) 40%), var(--bg-1); }
.plan .pop { font: 500 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #1a1205; background: var(--amber); padding: 4px 8px; border-radius: var(--r-pill); }
@media (max-width: 1100px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .plans { grid-template-columns: 1fr; } }

/* ---------------- faq */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-1); transition: border-color var(--t-3), background var(--t-3); }
.faq details[open] { border-color: var(--line-2); background: var(--bg-2); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 22px; display: flex; align-items: center; gap: 16px; font-size: 16.5px; font-weight: 550; letter-spacing: -.01em; min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; margin-left: auto; flex: none; width: 12px; height: 12px; border-right: 1.5px solid var(--fg-3); border-bottom: 1.5px solid var(--fg-3); transform: translateY(-3px) rotate(45deg); transition: transform var(--t-3) var(--ease-out); }
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq details > div { padding: 0 22px 22px; color: var(--fg-2); font-size: 15.5px; max-width: 760px; }
.faq details > div p { margin: 0; }
.faq a.anchor { opacity: 0; font: 500 12px var(--font-mono); color: var(--fg-3); text-decoration: none; transition: opacity var(--t-2); }
.faq summary:hover a.anchor, .faq summary:focus-visible a.anchor { opacity: 1; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height var(--t-4) var(--ease-out), content-visibility var(--t-4) allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* ---------------- final cta */
.final { position: relative; isolation: isolate; text-align: center; border-radius: 32px; padding: clamp(64px, 10vw, 140px) var(--gutter); overflow: hidden; }
.final h2 { font-size: var(--display-1); margin: 22px auto 22px; max-width: 900px; }
.final p { color: var(--fg-2); max-width: 560px; margin: 0 auto 36px; font-size: 18px; }
.final .cta-row { justify-content: center; }
.final .bg-layer.rays { background: conic-gradient(from 180deg at 50% 120%, transparent 0deg, rgba(245,180,84,.18) 30deg, transparent 60deg, rgba(140,200,255,.12) 100deg, transparent 140deg, rgba(245,180,84,.14) 200deg, transparent 240deg); animation: rays 30s linear infinite; inset: -50%; }
@keyframes rays { to { transform: rotate(360deg); } }

/* ---------------- footer */
.site-footer { border-top: 1px solid var(--line); padding: 72px 0 40px; margin-top: clamp(60px, 8vw, 120px); position: relative; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.foot-grid p { color: var(--fg-3); font-size: 14.5px; max-width: 300px; }
.foot-grid h2 { font: 500 11.5px var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); margin: 6px 0 16px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid a { color: var(--fg-2); text-decoration: none; font-size: 14.5px; transition: color var(--t-2); }
.foot-grid a:hover { color: var(--fg); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--fg-3); font-size: 13px; }
.wordmark { font: 400 clamp(64px, 17vw, 260px)/.8 var(--font-serif); letter-spacing: -.05em; text-align: center; margin-top: 56px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }

/* ---------------- inner pages */
.page-hero { position: relative; isolation: isolate; padding: clamp(72px, 10vw, 140px) 0 clamp(40px, 6vw, 72px); overflow: clip; }
.page-hero h1 { font-size: var(--display-2); margin: 18px 0 18px; max-width: 900px; text-wrap: balance; }
.page-hero .lede { max-width: 680px; margin: 0 0 30px; }
.prose { font-size: 17px; color: var(--fg-2); }
.prose h2 { font: 400 var(--display-3)/1.12 var(--font-serif); letter-spacing: -.02em; color: var(--fg); margin: 56px 0 14px; }
.prose h3 { font-size: 19px; font-weight: 600; color: var(--fg); margin: 32px 0 8px; letter-spacing: -.01em; }
.prose p, .prose ul { margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--amber-2); text-underline-offset: 3px; }
.prose .callout { border: 1px solid var(--amber-line); background: var(--amber-bg); border-radius: var(--r-lg); padding: 16px 18px; color: var(--fg); font-size: 15.5px; }
.steps-list { counter-reset: s; display: grid; gap: 0; }
.steps-list .st { counter-increment: s; display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); }
.steps-list .st::before { content: counter(s, decimal-leading-zero); font: 500 13px var(--font-mono); color: var(--amber); padding-top: 8px; }
.steps-list h2 { margin-top: 0; }
.feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-list .surface { padding: 24px; border-radius: var(--r-lg); }
.feature-list h3 { font-size: 17px; margin: 14px 0 6px; letter-spacing: -.01em; }
.feature-list p { color: var(--fg-2); font-size: 15px; margin: 0; }
.feature-list .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-line); }
.feature-list .ic svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .feature-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .feature-list { grid-template-columns: 1fr; } }
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 10px; width: max-content; animation: marquee 50s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.src-chip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg-1); font-size: 14px; color: var(--fg-2); white-space: nowrap; }
.src-chip small { font: 500 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; }
.src-chip .a { color: var(--ok); background: var(--ok-bg); } .src-chip .u { color: var(--fg-2); background: rgba(255,255,255,.06); }

/* ---------------- reveal system */
.js [data-reveal] { opacity: 0; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out), clip-path 1.1s var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal="up"], .js [data-reveal=""] { transform: translate3d(0, 24px, 0); }
.js [data-reveal="blur"] { filter: blur(12px); transform: translate3d(0, 12px, 0); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal="clip"] { clip-path: inset(0 0 100% 0); }
.js [data-reveal].in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }
.reduced [data-reveal] { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .hero h1 .w > span, .js .window, .js .float { animation: none !important; transform: none !important; }
  .marquee-track, .final .bg-layer.rays, .v-lane .cursor, .v-ocr .bar { animation: none !important; }
  .article-col p, .moment { clip-path: none !important; opacity: 1 !important; transform: none !important; }
}