/* ============================================================
   HYPER8 · LANDING (home v1)
   Look tokens inherited from the stub (dark · blue · Golos);
   layout patterns: Orca-style full-width demo window + card grids.
   NB: hyper8.app ships CSP style-src 'self' — all styles live here.
   ============================================================ */
:root{
  --font-display:'Golos Text', system-ui, sans-serif;
  --font-sans:'Golos Text', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --bg:#000000;
  --bg-1:#090b12;
  --panel:#0d1019;
  --panel-2:#12162080;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --fg:#eef1f8;
  --fg-dim:#a4adc2;
  --fg-mute:#7d86a0; /* ≥4.5:1 on #000 for small text (a11y contrast) */

  --accent:#5b8cff;
  --accent-2:#8fb6ff;
  --accent-fg:#ffffff;
  --accent-btn:#3d6be0; /* ≥4.5:1 with white label (a11y) — glow stays --accent */

  --radius:14px;
  --radius-sm:10px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}
img{max-width:100%;display:block;}
/* classes below set display:flex etc. — keep the hidden attribute winning */
[hidden]{display:none !important;}
::selection{background:var(--accent);color:var(--accent-fg);}

/* ---------- fixed background scene (halo under canvas, vignette above) ---------- */
#halo{position:fixed;inset:0;z-index:0;pointer-events:none;}
#bg{position:fixed;inset:0;z-index:1;display:block;opacity:0;transition:opacity 1.4s var(--ease);}
#bg.on{opacity:1;}
#vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 58%, transparent 52%, var(--bg) 96%);
}
#grain{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- shared ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-weight:600;font-size:14.5px;border-radius:999px;
  padding:11px 20px;transition:transform .15s var(--ease), box-shadow .25s, border-color .2s;
  border:1px solid transparent;white-space:nowrap;
}
.btn--primary{background:var(--accent-btn);color:var(--accent-fg);box-shadow:0 6px 24px -6px color-mix(in srgb,var(--accent) 70%,transparent);}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 12px 34px -8px color-mix(in srgb,var(--accent) 80%,transparent);}
.btn--ghost{border-color:var(--line-2);color:var(--fg-dim);}
.btn--ghost:hover{border-color:var(--fg-dim);color:var(--fg);}

.eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-2);margin:0 0 18px;
}
.h2{
  margin:0 0 14px;font-weight:400;letter-spacing:-.015em;
  font-size:clamp(1.7rem, 3.2vw, 2.6rem);line-height:1.15;color:#f4f6ff;
}
.sect-sub{margin:0 0 44px;max-width:64ch;font-size:15.5px;line-height:1.7;color:var(--fg-dim);text-wrap:pretty;}
.hl{color:var(--accent-2);}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:40;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.site-header.is-scrolled{border-bottom-color:var(--line);}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:14px;padding-bottom:14px;
}
.brand{display:inline-flex;align-items:center;gap:12px;}
.brand__mark{width:26px;height:31px;display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.45));}
.brand__name{font-family:-apple-system,"SF Pro Display","SF Pro Text",BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-weight:800;font-size:20px;letter-spacing:.006em;text-transform:uppercase;}
.site-nav{display:flex;align-items:center;gap:26px;margin-left:auto;margin-right:6px;}
.site-nav a{font-size:14px;color:var(--fg-dim);transition:color .2s;}
.site-nav a:hover{color:var(--fg);}
@media(max-width:860px){.site-nav{display:none;}}

/* ---------- hero ---------- */
.hero{position:relative;z-index:4;padding:112px 0 40px;}
.hero h1{
  margin:0;font-family:var(--font-display);font-weight:300;color:#f4f6ff;
  font-size:clamp(2.4rem, 5.6vw, 4.1rem);line-height:1.08;letter-spacing:-.015em;
  text-shadow:0 4px 60px rgba(0,0,0,.55);max-width:20ch;
}
.hero .sub{
  margin:18px 0 0;max-width:78ch;font-size:15px;line-height:1.7;color:var(--fg-dim);
  text-shadow:0 2px 40px rgba(0,0,0,.6);text-wrap:pretty;
}

/* use-case tabs (above the demo stand) */
.uc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 0;}
.uc-tab{
  font-size:13.5px;font-weight:500;color:var(--fg-dim);
  border:1px solid var(--line-2);border-radius:999px;padding:9px 16px;
  background:color-mix(in srgb, var(--panel) 55%, transparent);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  transition:color .2s,border-color .2s,background .2s;
}
.uc-tab:hover{color:var(--fg);border-color:var(--fg-mute);}
.uc-tab.is-active{
  color:#fff;border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 22%, transparent);
}
.uc-caption{
  margin:14px 0 0;font-size:13.5px;color:var(--fg-mute);font-family:var(--font-mono);
  letter-spacing:.01em;min-height:1.4em;
}

/* ---------- demo window (Orca-style browser chrome + live iframe) ---------- */
.demo{position:relative;z-index:4;margin:30px 0 0;}
.demo-frame{
  border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);
  overflow:hidden;background:#0b0e16;
  box-shadow:0 30px 90px -20px rgba(0,0,0,.7);
  display:flex;flex-direction:column;
}
/* slim control bar above the frame — no background, small type, hugs the frame */
.demo-bar{
  position:relative; /* anchors the theme popup */
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 2px 5px;
}
.demo-bar-label{
  font-size:12px;color:#d1dfff9e;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
/* scene arrows: hidden in the inline bar, shown in fullscreen where the
   uc-tabs themselves are out of reach */
.demo-bar-label .demo-nav{display:none;border:0;padding:2px 8px;border-radius:999px;
  color:#d1dfff9e;background:rgba(0,0,0,.3);font-size:12px;line-height:18px;
  transition:color .2s,background .2s;}
.demo.is-fs .demo-bar-label .demo-nav{display:inline-flex;}
/* inline: only the static label; fullscreen: only the ‹ title › trio */
.demo-bar-title{display:none;}
.demo.is-fs .demo-bar-text{display:none;}
.demo.is-fs .demo-bar-title{display:inline-block;color:var(--fg);font-size:12px;text-align:center;}
/* fullscreen: the switcher sits dead centre of the bar; the action buttons keep
   the right edge. The title box is pre-sized by embed.js to the LONGEST scene
   label, so the arrows do not shuffle when the name changes. */
.demo.is-fs .demo-bar-label{
  position:absolute;left:50%;transform:translateX(-50%);
  overflow:visible;
}
.demo-bar-label .demo-nav:hover{color:var(--fg);background:color-mix(in srgb, var(--accent) 30%, rgba(0,0,0,.3));}
.demo-actions{margin-left:auto;display:inline-flex;gap:6px;}
.demo-actions button{
  font-size:12px;color:#d1dfff9e;
  border:0;border-radius:999px;padding:4px 12px;
  background:rgba(0,0,0,.3);
  transition:color .2s,background .2s;
}
.demo-actions button:hover{color:var(--fg);background:color-mix(in srgb, var(--accent) 30%, rgba(0,0,0,.3));}
.demo-body{position:relative;aspect-ratio:16/10;background:#0b0e16;}
/* stacking: iframe below, poster above it until the space is live, then a crossfade */
/* The frame is laid out at a LOGICAL size and scaled into the box by embed.js
   (see layoutFrame): the demo shrinks like an image instead of reflowing into
   a cramped layout. width/height/transform are set inline; these are the
   pre-script defaults. */
.demo-iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;border:0;background:#0b0e16;z-index:1;
  transform-origin:top left;
}
.demo-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;
  transition:opacity .55s var(--ease);
}
.demo-poster.is-gone{opacity:0;pointer-events:none;}
/* quiet corner pill — the poster IS the preview, the pill just says "warming up" */
.demo-loader{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(13,16,26,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 14px;
  color:var(--fg-mute);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.demo-loader .spin{
  width:14px;height:14px;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--accent);
  animation:demoSpin .8s linear infinite;
}
@keyframes demoSpin{to{transform:rotate(360deg);}}
.demo-error{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:5;margin:0;
  display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-size:13px;color:var(--fg-dim);
  background:rgba(13,16,26,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:8px 12px;
}
.demo-error button{
  color:#fff;background:var(--accent-btn);border:0;border-radius:7px;padding:4px 12px;font-size:12.5px;
}

/* ---------- theme picker popup (real in-app themes, hover = live preview) ---------- */
.theme-pop{
  position:absolute;top:calc(100% + 4px);right:0;z-index:60;
  display:flex;gap:16px;padding:14px 16px;
  background:rgba(13,16,26,.74);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;
  box-shadow:0 24px 70px -18px rgba(0,0,0,.85);
}
.theme-col{min-width:158px;}
.theme-col-h{
  margin:0 0 6px;padding:0 8px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);
}
.theme-item{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  font-size:13px;color:var(--fg-dim);border:0;border-radius:8px;padding:6px 8px;
  transition:background .15s,color .15s;
}
.theme-item:hover{background:rgba(255,255,255,.08);color:#fff;}
.theme-item.is-current{color:#fff;}
.theme-item.is-current::after{content:'✓';margin-left:auto;font-size:11px;color:var(--accent);}
.theme-sw{
  position:relative;flex:none;width:18px;height:18px;border-radius:6px;
  border:1px solid rgba(255,255,255,.28);
}
.theme-sw-dot{position:absolute;right:2.5px;bottom:2.5px;width:7px;height:7px;border-radius:50%;}
/* fullscreen mode — the control bar stays on top, the frame fills the rest */
.demo.is-fs{position:fixed;inset:0;z-index:100;margin:0;padding:14px 18px 18px;background:rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;}
/* the fixed fullscreen block lives inside a section stacking context (.hero /
   .sections carry z-index:4) — lift THAT ancestor above everything while a
   demo is expanded, or later sections paint over the fullscreen frame */
.hero:has(.demo.is-fs){z-index:210;}
.sections:has(.demo.is-fs){z-index:210;}
.demo.is-fs .demo-bar{flex:none;}
.demo.is-fs .demo-frame{flex:1;min-height:0;}
.demo.is-fs .demo-body{aspect-ratio:auto;height:100%;}

/* ---------- page sections over the scene ---------- */
.sections{position:relative;z-index:4;background:linear-gradient(180deg, transparent 0, var(--bg) 260px);}
.section{padding:110px 0 0;scroll-margin-top:64px;}
.hero{scroll-margin-top:64px;}
.section .wrap{position:relative;}
.section-foot{margin-top:64px;}

/* ---------- organize: tabs row, info left (top-aligned), example right ---------- */
.nest-chain{
  font-family:var(--font-mono);font-size:12.5px;color:var(--fg-mute);letter-spacing:.02em;
  margin:0 0 40px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.nest-chain b{color:var(--accent-2);font-weight:500;}
.nest-chain .sep{color:var(--fg-mute);opacity:.6;}
.blk-tabs{display:flex;justify-content:flex-start;gap:6px;flex-wrap:wrap;margin:0 0 34px;}
.blk-tab{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:500;color:var(--fg-dim);
  border:1px solid transparent;border-radius:999px;padding:9px 17px;
  transition:color .2s,border-color .2s,background .2s;
}
.blk-tab .bico{color:var(--fg-mute);font-family:var(--font-mono);font-size:12px;transition:color .2s;}
.blk-tab:hover{color:var(--fg);}
.blk-tab.is-active{
  color:#fff;border-color:var(--line-2);
  background:color-mix(in srgb, var(--panel) 90%, transparent);
}
.blk-tab.is-active .bico{color:var(--accent-2);}
/* organize: schematic chat ghosts — agent chat → content → agent chat.
   Wireframe outlines only (deliberately NOT the product style: the focus stays
   on the real content shot between them); blue dashed arrows carry the flow.
   The shot is CENTERED in the stage, so both ghosts hang off its edges by the
   same offset — perfectly symmetric at any width, bleeding off-screen equally
   on narrow viewports (body has overflow-x:hidden). Geometry: the shot spans
   17%…83% of the stage, an arrow sits 14px out from each edge, the ghost 8px
   past the arrow (14 + 96 + 8 = 118px). */
/* clip at the section box (= viewport width): the ghosts bleed off screen
   without ever widening the document */
#organize{overflow-x:clip;}
/* the section is a symmetric composition (ghost chats left AND right of a
   centred shot) — so its head reads centred too */
#organize .h2,#organize .sect-sub{text-align:center;}
#organize .sect-sub{margin-left:auto;margin-right:auto;}
#organize .blk-tabs{justify-content:center;}
#organize .blk-sub{text-align:center;}
.blk-stage{position:relative;}
/* 53% — a fifth narrower than the 66% it was, with the HEIGHT unchanged: the
   block keeps the same vertical presence while the two ghost chats get the room
   they need to read as chats. `.blk-shot`'s aspect-ratio is what holds the
   height (see below), and the posters are shot at that aspect so nothing is
   cropped. Content edges therefore sit at 23.5% / 76.5% of the stage. */
.blk-stage .blk-shot{width:53%;margin-inline:auto;}
.chat-ghost{
  position:absolute;top:50%;transform:translateY(-50%);
  width:270px;height:366px;pointer-events:none;display:none;
}
.chat-ghost--left{right:calc(76.5% + 118px);}
.chat-ghost--right{left:calc(76.5% + 118px);}
.ghost-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:96px;height:24px;pointer-events:none;display:none;
}
.ghost-arrow--in{right:calc(76.5% + 14px);}
.ghost-arrow--out{left:calc(76.5% + 14px);}
.ghost-lines rect,.ghost-lines line,.ghost-lines circle{
  fill:none;stroke:rgba(160,180,230,.30);stroke-width:1.5;
}
.ghost-lines rect:first-child{fill:rgba(11,14,22,.55);}
.ghost-arrow path{
  fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-dasharray:6 5;stroke-linecap:round;opacity:.75;
}
.ghost-arrow .ghost-arrow-head{stroke-dasharray:none;stroke-linejoin:round;}
/* both sides appear together — the illustration only reads as a flow when it
   is symmetric; below that the shot goes full width and the ghosts step out */
@media(min-width:1100px){.chat-ghost,.ghost-arrow{display:block;}}
@media(max-width:1099px){.blk-stage .blk-shot{width:100%;}}
.blk-sub{
  margin:18px auto 0;max-width:53%;
  font-size:15px;line-height:1.75;color:var(--fg-dim);text-wrap:pretty;
}
@media(max-width:1099px){.blk-sub{max-width:none;}}

/* organize screenshot (static, like feature shots but full-width of its column) */
.blk-shot{
  margin:0;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);
  /* the shot's own aspect (1240 × 966, ORG_VIEWPORT in scripts/site-posters.mjs
     minus the app header) — matching it exactly means `cover` crops nothing */
  overflow:hidden;background:#0b0e16;aspect-ratio:1240/966;
  box-shadow:0 24px 70px -22px rgba(0,0,0,.65);
}
.blk-shot img{width:100%;height:100%;object-fit:cover;object-position:top left;}
.blocks-more{
  margin:36px 0 0;
  font-family:var(--font-mono);font-size:12.5px;color:var(--fg-mute);letter-spacing:.02em;
}
.blocks-more b{color:var(--fg-dim);font-weight:500;}

/* ---------- agents row (BYOA) ---------- */
.agents-row{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 0;}
.agent-chip{
  font-size:14px;font-weight:500;color:var(--fg-mute);
  border:1px solid var(--line);border-radius:999px;padding:10px 18px;
  background:color-mix(in srgb, var(--panel) 45%, transparent);
}
.agent-chip--active{
  color:#fff;border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow:0 0 34px -14px var(--accent);
}

/* ---------- byoa / subscription ---------- */
.byoa-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:860px){.byoa-grid{grid-template-columns:1fr;}}
.byoa-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;
  background:color-mix(in srgb, var(--panel) 72%, transparent);
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.byoa-card--accent{border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:0 0 60px -30px var(--accent);}
.byoa-card .tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);}
.byoa-card h3{margin:0;font-size:21px;font-weight:600;letter-spacing:-.01em;}
.byoa-card p{margin:0;font-size:14.5px;line-height:1.7;color:var(--fg-dim);}
.byoa-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.byoa-card li{font-size:13.5px;color:var(--fg-dim);display:flex;gap:9px;align-items:baseline;}
.byoa-card li::before{content:"·";color:var(--accent-2);font-weight:700;}
.byoa-card .btn{margin-top:8px;}
.byoa-note{margin:18px 2px 0;font-size:12.5px;font-family:var(--font-mono);color:var(--fg-mute);}

/* ---------- features ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.feat-card{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:color-mix(in srgb, var(--panel) 72%, transparent);
  transition:border-color .25s, transform .25s var(--ease);
  display:flex;flex-direction:column;
}
.feat-card:hover{border-color:var(--line-2);transform:translateY(-2px);}
.feat-card--big{grid-column:span 3;}
.feat-card--small{grid-column:span 2;}
@media(max-width:960px){
  .feat-card--big{grid-column:span 6;}
  .feat-card--small{grid-column:span 3;}
}
@media(max-width:600px){.feat-card--small{grid-column:span 6;}}
.feat-shot{border-bottom:1px solid var(--line);aspect-ratio:16/10;overflow:hidden;background:#0b0e16;}
.feat-shot img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .4s var(--ease);}
.feat-card:hover .feat-shot img{transform:scale(1.025);}
.feat-body{padding:18px 20px 20px;}
.feat-body h3{margin:0 0 7px;font-size:16px;font-weight:600;}
.feat-body p{margin:0;font-size:13.5px;line-height:1.65;color:var(--fg-dim);}

/* ---------- features · the two schematics (BLUEPRINT) ----------
   The two lead features are SCHEMATICS, not screenshots (owner, 30.09.2026) —
   same register as the chat ghosts flanking the Organize stage. Three paint jobs
   (wireframe / blueprint / solid) shipped behind a switcher so the look could be
   picked from the live page; blueprint won and is now the ONLY one (owner,
   30.09.2026). The losing palettes, the switcher and its JS are deleted rather
   than left behind a flag: a dead variant in a stylesheet is a promise the page
   no longer keeps, and the `[data-ill=…]` scope existed only to tell them apart.

   Drafting paper: a 28px grid, everything drawn in accent ink, the SUBJECT of
   each diagram (the open sideview, the agent's chat) filled rather than outlined
   so the eye lands on it before it reads the rest. */
.feat-shot--ill{
  display:block;
  background:
    linear-gradient(rgba(91,140,255,.07) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, rgba(91,140,255,.07) 1px, transparent 1px) 0 0/28px 28px,
    #070a12;
}
.sk{width:100%;height:100%;display:block;}
.sk-edge{fill:none;stroke-dasharray:7 6;stroke-linecap:round;}
.sk-head{fill:none;stroke-linecap:round;stroke-linejoin:round;}

.sk-frame{fill:none;stroke:rgba(91,140,255,.34);stroke-width:1.5;}
.sk-fill,
.sk-tab,
.sk-bubble{fill:rgba(91,140,255,.09);stroke:rgba(91,140,255,.42);stroke-width:1.3;}
/* the agent's reply — the one bubble the diagram is about */
.sk-bubble--in{fill:rgba(91,140,255,.2);stroke:rgba(143,182,255,.55);}
.sk-accent,
.sk-accent-panel{fill:rgba(91,140,255,.22);stroke:var(--accent-2);stroke-width:1.6;}
.sk-line{fill:rgba(143,182,255,.5);}
.sk-dot{fill:rgba(143,182,255,.35);stroke:rgba(143,182,255,.6);stroke-width:1.2;}
.sk-split{stroke:rgba(143,182,255,.45);stroke-width:1.3;stroke-dasharray:3 4;}
.sk-edge{stroke:var(--accent-2);stroke-width:1.8;}
.sk-head{stroke:var(--accent-2);stroke-width:1.8;}

/* ---------- features · the three claims that have no screenshot ----------
   Nothing about speed, locality or hackability photographs well, so they get a
   huge monochrome mark instead of a shot — one colour each, so the row reads as
   three different statements rather than one gradient. */
.feat-shot--icon{
  display:grid;place-items:center;
  background:radial-gradient(90% 90% at 50% 45%, color-mix(in srgb, var(--ico) 13%, transparent) 0%, transparent 70%), #0a0d15;
  color:var(--ico);
}
.feat-shot--icon svg{
  width:44%;height:auto;aspect-ratio:1;
  opacity:.9;filter:drop-shadow(0 8px 34px color-mix(in srgb, var(--ico) 45%, transparent));
  transition:transform .4s var(--ease);
}
.feat-card:hover .feat-shot--icon svg{transform:scale(1.05);}

/* ---------- faq ---------- */
.faq-list{max-width:780px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);}
.faq-list details{border-bottom:1px solid var(--line);}
.faq-list summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 2px;font-size:15.5px;font-weight:500;color:var(--fg);transition:color .2s;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary:hover{color:var(--accent-2);}
.faq-list summary .plus{
  flex:none;font-family:var(--font-mono);font-size:16px;color:var(--fg-mute);
  transition:transform .25s var(--ease), color .2s;
}
.faq-list details[open] summary .plus{transform:rotate(45deg);color:var(--accent-2);}
.faq-list .faq-a{padding:0 40px 22px 2px;font-size:14.5px;line-height:1.75;color:var(--fg-dim);max-width:68ch;}
.faq-list .faq-a p{margin:0;}

/* ---------- get hyper8 (download, platform-specific) ---------- */
.get{padding:130px 0 90px;text-align:left;scroll-margin-top:64px;}
.get .h2{font-size:clamp(2rem, 4.4vw, 3.4rem);}
.get .sect-sub{margin-bottom:0;}
.dl{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px;}
.dl-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent-btn);color:var(--accent-fg);
  border-radius:999px;padding:13px 24px;font-weight:600;font-size:15px;
  box-shadow:0 6px 24px -6px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:transform .15s var(--ease), box-shadow .25s;
}
.dl-btn:hover{transform:translateY(-1px);box-shadow:0 12px 34px -8px color-mix(in srgb,var(--accent) 80%,transparent);}
.dl-ico{width:19px;height:19px;flex:none;display:block;}
.dl-other{font-size:14px;color:var(--fg-dim);border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:color .2s,border-color .2s;}
.dl-other:hover{color:var(--fg);border-color:var(--fg-dim);}
.dl-note{margin:20px 0 0;font-family:var(--font-mono);font-size:12px;color:var(--fg-mute);letter-spacing:.02em;}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:64px 0 44px;position:relative;z-index:5;background:var(--bg-1);}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:56px 44px;}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr;gap:40px;}}
.foot-brand{max-width:340px;}
.foot-brand .brand{margin-bottom:20px;}
.foot-brand p{color:var(--fg-dim);font-size:14.5px;line-height:1.75;max-width:34ch;margin:0;}
.foot-brand .soul{margin-top:18px;font-family:var(--font-mono);font-size:12px;color:var(--fg-mute);letter-spacing:.03em;}
.foot-col .foot-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute);margin:0 0 22px;}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.foot-col a{font-size:14px;color:var(--fg-dim);transition:color .2s;}
.foot-col a:hover{color:var(--accent);}
.foot-bottom{max-width:var(--maxw);margin:56px auto 0;padding:28px 28px 0;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--fg-mute);font-size:12.5px;font-family:var(--font-mono);}

/* ---------- responsive ---------- */
@media(max-width:640px){
  .brand__name{font-size:18px;}
  .hero{padding-top:64px;}
  .section{padding-top:84px;}
  .uc-caption{display:none;}
}

/* ---------- hint dots (scene-tied, injected by embed.js over the live frame) ----------
   An 11.5px golden dot anchored to an element INSIDE the same-origin iframe, sitting
   just off the content's edge. It rests, then BREATHES once — ±15% over ~1.6s —
   and the swell releases one ring. One breath per 4.76s cycle: the owner asked the
   pulse itself to run twice as slow and the gaps between pulses three times as
   long; then the dots still read as unnoticeable, so the dot grew 15% (10 → 11.5px)
   and the REST between breaths shrank 25% (3.36s → 2.52s) while the breath itself
   keeps its 2.24s shape. Appear by dissolve, leave instantly.

   The dots do NOT take pointer events (a click lands on the content underneath);
   hover is detected by embed.js from the iframe's own mousemove and mirrored
   here as `.is-hover`. */
.demo-hints{position:absolute;inset:0;z-index:4;pointer-events:none;}
.hint-dot{
  position:absolute;width:11.5px;height:11.5px;margin:-5.75px 0 0 -5.75px;border-radius:50%;
  background:#fbd34d;box-shadow:0 0 0 1px rgba(0,0,0,.3), 0 0 14px rgba(251,211,77,.45);
  pointer-events:none;
  animation:hint-breathe 4.76s ease-in-out infinite, hint-dissolve .6s ease-out;
}
.hint-dot::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(251,211,77,.55);opacity:0;
  animation:hint-wave 4.76s cubic-bezier(.25,.6,.35,1) infinite;
}
.hint-dot.is-hover{animation-play-state:paused, running;}
/* the wave VANISHES on hover (owner: a frozen ring under the tooltip read as dirt) */
.hint-dot.is-hover::before{animation:none;opacity:0;}
@keyframes hint-dissolve{0%{opacity:0;}100%{opacity:1;}}
/* one breath per 4.76s cycle: 2.52s rest (25% shorter than the 3.36s that still read
   as dead), then the same 2.24s breath — rest, dip, swell, settle */
@keyframes hint-breathe{
  0%,52.94%{transform:scale(1);}
  60%{transform:scale(.9);}
  70.59%{transform:scale(1.15);}
  81.18%,100%{transform:scale(1);}
}
/* the ring the swell releases — 1.5× smaller reach than before (scale 8 → 5.3);
   it is inset:0 on the dot, so the 15% bigger dot carries the ring up with it */
@keyframes hint-wave{
  0%,68.24%{transform:scale(1);opacity:0;}
  72.94%{opacity:.45;}
  100%{transform:scale(5.3);opacity:0;}
}
.hint-tip{
  position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,4px);
  width:max-content;max-width:250px;padding:8px 11px;border-radius:9px;
  background:rgba(26,20,5,.94);border:1px solid rgba(251,211,77,.35);
  color:#f4e3ae;font-size:12px;line-height:1.5;letter-spacing:.01em;text-wrap:pretty;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  pointer-events:none;
  margin-left:var(--tip-shift, 0px);
}
.hint-dot.is-hover .hint-tip{opacity:1;visibility:visible;transform:translate(-50%,0);}
.hint-dot.tip-below .hint-tip{bottom:auto;top:calc(100% + 12px);transform:translate(-50%,-4px);}
.hint-dot.tip-below.is-hover .hint-tip{transform:translate(-50%,0);}

/* ---------- globe toggle (header): pauses the three.js background ---------- */
.scene-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;border:1px solid var(--line-2);
  color:var(--fg-mute);background:transparent;margin-right:12px;
  transition:color .2s,border-color .2s,background .2s;
}
.scene-toggle svg{width:18px;height:18px;}
.scene-toggle:hover{color:var(--fg);border-color:var(--fg-mute);}
.scene-toggle .scene-toggle__slash{opacity:0;transition:opacity .2s;}
.scene-toggle.is-off{color:var(--fg-mute);}
.scene-toggle.is-off .scene-toggle__slash{opacity:1;}
/* the background itself dissolves rather than popping */
#bg,#halo{transition:opacity .4s var(--ease);}
body.scene-off #bg,body.scene-off #halo{opacity:0 !important;}
/* Scene off is the DEFAULT (owner, 30.09.2026), so this is the page most visitors
   see: a flat neutral field rather than the void black the planet needs to glow
   against. The grey is LINEAR's, read off linear.app rather than eyeballed
   (owner, 30.09.2026 — was a #161616 mid-grey, the zcode.z.ai register):

     --color-bg-primary   #08090a   the page field
     --color-bg-secondary #1c1c1f   cards and panels
     --color-border-primary #23252a every hairline

   What makes it read as Linear is that the greys are NEUTRAL-to-slightly-cool
   and the steps between them are small — so the blue-tinted panel/line tokens of
   the planet skin are replaced here, not just the background. Accent and type
   stay ours: this is a repaint of the field, not of the brand.

   Overriding the tokens on <body> carries them through everything that mixes
   with them: the sticky header (72% of --bg), the .sections fade, the vignette,
   every `color-mix(--panel …)` card. Solid hairlines, not the white-alpha ones —
   at this lightness an 8%-white line over the field IS #23252a, and stating it
   keeps the cards' borders identical to the page's.

   The grain stays: at .05 soft-light it keeps the flat field from banding on
   wide gamuts. */
body.scene-off{
  --bg:#08090a;
  --bg-1:#0b0b0c;      /* footer band — Linear's own header tint, a hair off the field */
  --panel:#1c1c1f;
  --panel-2:#232326b3; /* --color-bg-tertiary, translucent */
  --line:#23252a;
  --line-2:#33353b;    /* the hover/emphasis step above the hairline */
  background:var(--bg);
}