/* ============================================================
   HEARTH — marketing site
   Palette matched to the REAL product (CLI ANSI + GUI accent):
   violet #8b5cf6 → lavender #a78bfa → soft-rose, gold tool lines,
   green success, lavender assistant text. No cyan.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg-0:#08080b;   /* @kind color */
  --bg-1:#0e0d13;   /* @kind color */
  --bg-2:#15141c;   /* @kind color */
  --bg-3:#1f1d28;   /* @kind color */
  --border:#211f2b;   /* @kind color */
  --border-2:#2f2c3c; /* @kind color */
  --fg:#eeecf4;     /* @kind color */
  --fg-dim:#9b98a8; /* @kind color */
  --fg-faint:#656170; /* @kind color */
  /* violet — primary (GUI --accent) */
  --vi:#8b5cf6;     /* @kind color */
  --vi-2:#a78bfa;   /* @kind color */
  --vi-3:#c4b5fd;   /* @kind color */
  --vi-deep:#7c3aed; /* @kind color */
  --vi-bg:rgba(139,92,246,.12);   /* @kind color */
  --vi-line:rgba(139,92,246,.32); /* @kind color */
  --vi-glow:rgba(139,92,246,.5);  /* @kind color */
  /* lavender — secondary chrome (CLI C_BOT #d7afff) */
  --lav:#cdb8ff;    /* @kind color */
  --lav-2:#e3d6ff;  /* @kind color */
  --lav-bg:rgba(205,184,255,.10);   /* @kind color */
  --lav-line:rgba(205,184,255,.28); /* @kind color */
  /* functional accents from the real ANSI palette */
  --gold:#ffd54a;   /* @kind color */  /* C_TOOL 220 */
  --gold-bg:rgba(255,213,74,.10); /* @kind color */
  --gold-line:rgba(255,213,74,.30); /* @kind color */
  --ok:#7be08f;     /* @kind color */  /* C_OK 120 */
  --rose:#ffb3e6;   /* @kind color */  /* gradient tail 219 */
  --warn:#ffaf5f;   /* @kind color */  /* C_WARN 215 */
  --maxw:1200px;    /* @kind spacing */
  --r-sm:7px;  /* @kind radius */
  --r:10px;    /* @kind radius */
  --r-md:14px; /* @kind radius */
  --r-lg:22px; /* @kind radius */
  --ff:'Space Grotesk',system-ui,sans-serif; /* @kind font */
  --mono:'JetBrains Mono','SF Mono',ui-monospace,monospace; /* @kind font */
  --ease:cubic-bezier(.22,.61,.36,1); /* @kind other */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg-0);color:var(--fg);font-family:var(--ff);line-height:1.55;font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;letter-spacing:-.005em}
::selection{background:rgba(139,92,246,.34);color:#fff}

body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(54vw 42vh at 86% -8%,rgba(139,92,246,.14),transparent 60%),
    radial-gradient(46vw 38vh at 4% 104%,rgba(167,139,250,.07),transparent 62%),
    radial-gradient(40vw 30vh at 100% 60%,rgba(255,179,230,.03),transparent 60%)}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 220px 70px rgba(0,0,0,.6)}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.035;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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;position:relative;z-index:2}
section{position:relative;z-index:2}
.section{padding:122px 0}
.section-sm{padding:84px 0}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--vi-2);
  display:inline-flex;align-items:center;gap:11px;margin-bottom:22px;font-weight:500}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--vi-line)}
.eyebrow.g{color:var(--gold)}.eyebrow.g::before{background:var(--gold-line)}
h1,h2,h3{letter-spacing:-.035em;line-height:1.02;font-weight:600;text-wrap:balance}
.grad{background:linear-gradient(96deg,var(--vi-2),var(--vi-3) 42%,var(--rose));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.h-sec{font-size:clamp(32px,4.6vw,56px);margin-bottom:20px;font-weight:600}
.lede{font-size:clamp(16px,1.45vw,19px);color:var(--fg-dim);max-width:58ch;text-wrap:pretty;line-height:1.62}
.center{text-align:center}.center .lede{margin-inline:auto}.center .eyebrow{justify-content:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:var(--r);font-weight:500;
  font-size:15px;border:1px solid transparent;transition:.2s var(--ease);white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-primary{background:linear-gradient(180deg,var(--vi-2),var(--vi));color:#0c0916;font-weight:600;
  box-shadow:0 10px 34px -10px var(--vi-glow),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 46px -12px var(--vi-glow),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-ghost{background:rgba(255,255,255,.025);border-color:var(--border-2);color:var(--fg)}
.btn-ghost:hover{border-color:var(--vi-line);color:var(--vi-2);background:var(--vi-bg)}
.btn-lg{padding:16px 28px;font-size:16px}.btn-sm{padding:9px 16px;font-size:13.5px}
.star-count{font-family:var(--mono);font-size:13px;color:var(--fg-dim);padding-left:10px;margin-left:4px;border-left:1px solid var(--border-2)}

/* ---------- announce + nav ---------- */
.announce{position:relative;z-index:30;background:linear-gradient(90deg,var(--vi-bg),transparent 72%);
  border-bottom:1px solid var(--border);font-size:13.5px;color:var(--fg-dim)}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:11px;padding:9px 32px;text-align:center}
.announce b{color:var(--fg);font-weight:600}
.announce .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--vi-2);background:var(--vi-bg);
  border:1px solid var(--vi-line);padding:2px 9px;border-radius:999px}
.announce .arrow{color:var(--vi-2);transition:transform .2s}
.announce a:hover .arrow{transform:translateX(4px)}
.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(16px) saturate(1.2);background:rgba(8,8,11,.64);
  border-bottom:1px solid transparent;transition:.3s}
.nav.scrolled{background:rgba(8,8,11,.88);border-bottom-color:var(--border)}
.nav .wrap{display:flex;align-items:center;gap:16px;height:66px}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;font-size:19px;letter-spacing:-.03em}
.logo-tile{width:35px;height:35px;border-radius:9px;background:radial-gradient(circle at 50% 130%,var(--vi-bg),var(--bg-2));
  border:1px solid var(--border-2);display:grid;place-items:center;box-shadow:0 0 0 1px rgba(139,92,246,.18),0 8px 22px -10px var(--vi-glow)}
.logo-tile img{width:22px;height:22px}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:20px}
.nav-links a{font-size:14px;color:var(--fg-dim);padding:8px 13px;border-radius:8px;transition:.15s;font-weight:500}
.nav-links a:hover{color:var(--fg);background:rgba(255,255,255,.04)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:11px}
.nav-gh{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--fg-dim);padding:8px 13px;border-radius:8px;transition:.15s;font-weight:500}
.nav-gh:hover{color:var(--fg)}.nav-gh svg{width:18px;height:18px}
.menu-btn{display:none}.nav-mobile{display:none}

/* ---------- HERO ---------- */
.hero{position:relative;padding:74px 0 92px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.02fr 1.05fr;gap:52px;align-items:center;min-height:560px}
.hero-copy{position:relative;z-index:3}
.hero-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--fg-dim);background:rgba(255,255,255,.02);border:1px solid var(--border-2);padding:6px 13px;border-radius:999px;margin-bottom:26px}
.hero-badge .pill{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.hero h1{font-size:clamp(40px,5.6vw,74px);line-height:.98;margin-bottom:24px;font-weight:600;letter-spacing:-.045em}
.hero .lede{font-size:clamp(17px,1.55vw,21px);max-width:46ch}.hero .lede b{color:var(--fg);font-weight:600}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin:32px 0 24px}
.hero-meta{display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px;color:var(--fg-faint);font-family:var(--mono);letter-spacing:.02em}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.hero-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 7px var(--ok)}

/* ---------- surface deck (breadth-led, auto-cycling, CLEAN) ---------- */
.deck{position:relative;z-index:3}
.deck-stage{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:430px;
  background:
    radial-gradient(120% 90% at 80% 0%,rgba(139,92,246,.10),transparent 60%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
  border:1px solid var(--border-2);
  box-shadow:0 44px 110px -40px rgba(0,0,0,.85),0 0 0 1px rgba(139,92,246,.05),0 0 90px -36px var(--vi-glow)}
.deck-watermark{position:absolute;top:18px;left:22px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-faint);z-index:6;display:flex;align-items:center;gap:9px}
.deck-watermark b{color:var(--vi-2);font-weight:500}
.deck-layers{position:relative;padding:58px 30px 30px;min-height:430px;display:grid;place-items:center}
.surface{position:absolute;inset:58px 30px 30px;display:none;align-items:center;justify-content:center}
.surface.on{display:flex;animation:surfin .55s var(--ease)}
@keyframes surfin{from{opacity:0;transform:scale(.985) translateY(10px)}to{opacity:1;transform:none}}
.deck-rail{display:flex;gap:8px;margin-top:16px}
.deck-tab{flex:1;text-align:left;padding:12px 14px;border-radius:var(--r);border:1px solid var(--border);
  background:rgba(255,255,255,.015);transition:.2s var(--ease);position:relative;overflow:hidden}
.deck-tab:hover{border-color:var(--border-2)}
.deck-tab.on{border-color:var(--vi-line);background:var(--vi-bg)}
.deck-tab .dt{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px}
.deck-tab .dt svg{width:15px;height:15px;color:var(--vi-2)}
.deck-tab .dd{font-size:11.5px;color:var(--fg-faint);margin-top:3px}
.deck-tab .prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--vi);box-shadow:0 0 8px var(--vi-glow)}
.deck-tab.on .prog{animation:fill var(--dwell,4200ms) linear forwards}
@keyframes fill{to{width:100%}}
@media (prefers-reduced-motion:reduce){.deck-tab.on .prog{width:100%;animation:none}}

/* window chrome for desktop screenshots */
.win{width:100%;border:1px solid var(--border-2);border-radius:var(--r-md);overflow:hidden;background:var(--bg-1);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.win .bar{height:34px;background:var(--bg-2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;padding:0 13px}
.win .bar i{width:11px;height:11px;border-radius:50%;background:var(--bg-3);border:1px solid var(--border-2)}
.win .bar i:first-child{background:#3a2f50;border-color:#4a3d63}
.win .bar .t{font-family:var(--mono);font-size:11px;color:var(--fg-faint);margin-left:8px}
.win img{width:100%;display:block}

/* phone frame */
.phone{width:218px;background:#000;border:2px solid #2a2735;border-radius:30px;padding:10px 9px;
  box-shadow:0 40px 80px -26px rgba(0,0,0,.9)}
.phone .screen{background:var(--bg-0);border-radius:22px;padding:16px 12px;min-height:330px;display:flex;flex-direction:column;gap:9px}
.phone .app{font-size:10.5px;color:var(--fg-faint);font-family:var(--mono);text-align:center;margin-bottom:5px}
.pb{font-size:12px;padding:8px 12px;border-radius:13px;max-width:92%;line-height:1.42}
.pb.me{align-self:flex-end;background:linear-gradient(180deg,var(--vi-2),var(--vi));color:#0c0916;border-bottom-right-radius:4px;font-weight:500}
.pb.bot{align-self:flex-start;background:var(--bg-2);border:1px solid var(--border);border-bottom-left-radius:4px;color:var(--lav)}
.pb.tool{align-self:flex-start;font-family:var(--mono);font-size:10.5px;color:var(--gold);background:var(--gold-bg);
  border:1px solid var(--border);border-left:2px solid var(--gold);border-radius:7px;padding:6px 9px}

/* MCP / interop node card */
.mcp-card{width:100%;max-width:380px;text-align:center}
.mcp-hub{width:74px;height:74px;border-radius:18px;margin:0 auto 4px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,var(--vi-bg),var(--bg-2));border:1px solid var(--vi-line);
  color:var(--vi-2);box-shadow:0 0 40px -10px var(--vi-glow)}
.mcp-hub svg{width:34px;height:34px}
.mcp-nodes{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:18px}
.mcp-nodes span{font-family:var(--mono);font-size:11.5px;color:var(--fg-dim);background:var(--bg-1);
  border:1px solid var(--border);padding:7px 12px;border-radius:999px}
.mcp-cap{font-family:var(--mono);font-size:11px;color:var(--fg-faint);margin-top:16px}

/* ---------- TERMINAL (contained, exact ANSI colors) ---------- */
.term{width:100%;background:linear-gradient(180deg,#0b0a10,#080709);border:1px solid var(--border-2);
  border-radius:var(--r-md);overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.term .bar{height:34px;background:var(--bg-2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;padding:0 13px}
.term .bar i{width:11px;height:11px;border-radius:50%;background:var(--bg-3);border:1px solid var(--border-2)}
.term .bar i:first-child{background:#3a2f50;border-color:#4a3d63}
.term .bar .t{font-family:var(--mono);font-size:11px;color:var(--fg-faint);margin-left:8px}
.term .bar .badge{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ok);display:flex;align-items:center;gap:6px}
.term .bar .badge .d{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 7px var(--ok)}
.term-body{padding:16px 16px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.62;height:330px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:3px;white-space:pre-wrap;word-break:break-word;-webkit-mask-image:linear-gradient(180deg,transparent,#000 11%);mask-image:linear-gradient(180deg,transparent,#000 11%)}
.term-body .ln{flex:none}
.term-body .ln{opacity:0;transform:translateY(5px);transition:.32s var(--ease)}
.term-body .ln.show{opacity:1;transform:none}
/* exact mapped ANSI colours */
.tg{font-weight:700;letter-spacing:.5px;line-height:1.2;
  background:linear-gradient(96deg,#875fff,#af87ff 30%,#d787ff 55%,#d7afff 72%,#ffafff 88%,#ffd7ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(175,135,255,.4))}
.c-brand{color:#af87ff;font-weight:600}
.c-user{color:#fff;font-weight:700}
.c-bot{color:#d7afff}
.c-tool{color:#ffd54a}
.c-ok{color:#87ff87}
/* headless surface — static (not JS-animated like the CLI), so force lines visible */
.term.headless .term-body{justify-content:flex-start;gap:2px;-webkit-mask-image:none;mask-image:none}
.term.headless .ln.pad{padding-left:18px}
.term.headless .ln.out{color:var(--fg-faint)}
.term.headless .ln.cmt{color:#6a6480;margin-top:12px;font-style:italic}
.term.headless .pr{color:#af87ff;font-weight:700;margin-right:7px}
.term.headless .str{color:#87ff87}
.term.headless .key{color:#d7afff}
.term.headless .bool{color:#ffd54a}
.c-dim{color:#585866}
.c-frame{color:#8f8fb8}
.c-warn{color:#ffaf5f}
.c-err{color:#ff6b6b;font-weight:600}
.cursor{display:inline-block;width:7px;height:13px;background:#af87ff;vertical-align:-2px;margin-left:1px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- trust ---------- */
.trust{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(21,20,28,.5),transparent)}
.trust .wrap{padding:24px 32px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.trust-badges{display:flex;gap:22px;flex-wrap:wrap}
.tbadge{font-family:var(--mono);font-size:12.5px;color:var(--fg-dim);display:inline-flex;align-items:center;gap:8px}
.tbadge .ck{color:var(--vi-2)}
.trust-models{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.trust-models .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin-right:6px}
.mchip{font-size:13px;color:var(--fg-dim);background:rgba(255,255,255,.02);border:1px solid var(--border);padding:6px 13px;border-radius:999px;transition:.18s}
/* ---------- image / video generation showcase ---------- */
/* A violet "cooking" canvas churns (pure CSS, nothing to load) then the real
   Hearth-generated image develops in place — blur->crisp — exactly like the
   reveal in the desktop app. */
.gen-wrap{max-width:620px;margin:32px auto 0;display:flex;flex-direction:column;align-items:center;gap:16px}
.gen-prompt{font-family:var(--mono);font-size:13px;color:var(--fg-dim);background:rgba(255,255,255,.02);
  border:1px solid var(--border);border-radius:10px;padding:11px 16px;text-align:center;line-height:1.55;max-width:560px}
.gen-prompt b{color:#a78bfa;font-weight:600;font-style:normal}
.gen-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0c0a14;
  border:1px solid var(--border-2);box-shadow:0 0 30px rgba(139,92,246,.22),inset 0 0 36px rgba(139,92,246,.16)}
.gen-noise{position:absolute;inset:-25%;filter:blur(8px);transition:opacity .6s ease;
  background:
    radial-gradient(circle at 25% 30%, rgba(167,139,250,.55) 0%, transparent 28%),
    radial-gradient(circle at 75% 60%, rgba(139,92,246,.50) 0%, transparent 32%),
    radial-gradient(circle at 50% 80%, rgba(196,181,253,.40) 0%, transparent 26%),
    radial-gradient(circle at 80% 20%, rgba(124,58,237,.45) 0%, transparent 30%),
    radial-gradient(circle at 15% 75%, rgba(167,139,250,.35) 0%, transparent 24%),
    linear-gradient(135deg,#1a1530 0%,#0c0a14 50%,#1f1838 100%);
  animation:gen-drift 9s ease-in-out infinite alternate}
.gen-tip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#e9e0ff;
  font-size:14px;font-weight:500;font-style:italic;padding:0 20px;text-align:center;z-index:1;transition:opacity .4s;
  text-shadow:0 0 8px rgba(0,0,0,.8),0 0 12px rgba(139,92,246,.5)}
.gen-real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(16px);
  transform:scale(1.04);transition:opacity .7s ease,filter 1s ease,transform 1s ease}
.gen-stage.done .gen-noise{opacity:0}
.gen-stage.done .gen-tip{opacity:0}
.gen-stage.done .gen-real{opacity:1;filter:blur(0);transform:none}
.gen-badges{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
@keyframes gen-drift{
  0%{transform:translate(0,0) rotate(0deg) scale(1.05)}
  33%{transform:translate(8%,-6%) rotate(8deg) scale(1.12)}
  66%{transform:translate(-6%,8%) rotate(-6deg) scale(1.08)}
  100%{transform:translate(4%,4%) rotate(4deg) scale(1.10)}}
.mchip:hover{border-color:var(--vi-line);color:var(--fg)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:.8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.09s}.reveal.d2{transition-delay:.18s}.reveal.d3{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- statement ---------- */
.statement .wrap{max-width:960px}
.statement h2{font-size:clamp(28px,4vw,48px);line-height:1.14;letter-spacing:-.03em;font-weight:500;text-wrap:balance}
.statement .dim{color:var(--fg-faint)}
.statement b{color:var(--vi-2);font-weight:600}

/* ---------- big feature rows (standout caps) ---------- */
.spot{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.spot + .spot{margin-top:104px}
.spot.flip .spot-media{order:-1}
.spot h2{font-size:clamp(26px,3.3vw,40px);font-weight:600;letter-spacing:-.03em}
.spot .tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--vi-2);
  display:inline-flex;align-items:center;gap:9px;margin-bottom:18px}
.spot .tag::before{content:"";width:22px;height:1px;background:var(--vi-line)}
.spot .tag.gold{color:var(--gold)}.spot .tag.gold::before{background:var(--gold-line)}
.spot p{font-size:16px;color:var(--fg-dim);line-height:1.62;margin-top:14px;max-width:48ch}
.spot p code,.pts code{font-family:var(--mono);font-size:.86em;color:var(--vi-2)}
.spot .pts{display:flex;flex-direction:column;gap:13px;margin-top:22px}
.spot .pt{display:flex;gap:12px;align-items:flex-start;color:var(--fg-dim);font-size:14.5px}
.spot .pt .a{color:var(--vi-2);flex:none;margin-top:1px}
.spot .pt b{color:var(--fg);font-weight:600}
.appshot{border:1px solid var(--border-2);border-radius:var(--r-md);overflow:hidden;background:var(--bg-1);
  box-shadow:0 44px 100px -38px rgba(0,0,0,.85),0 0 0 1px rgba(139,92,246,.05)}
.appshot img{width:100%;display:block}
.appshot.glow{box-shadow:0 44px 100px -34px rgba(0,0,0,.85),0 0 80px -28px var(--vi-glow)}

/* desktop-control mock */
.dc-mock{border:1px solid var(--border-2);border-radius:var(--r-md);background:linear-gradient(180deg,var(--bg-1),var(--bg-0));overflow:hidden;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.85),0 0 70px -30px var(--vi-glow)}
.dc-mock .bar{height:32px;background:var(--bg-2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;padding:0 13px}
.dc-mock .bar i{width:10px;height:10px;border-radius:50%;background:var(--bg-3)}
.dc-mock .bar .t{font-family:var(--mono);font-size:11px;color:var(--fg-faint);margin-left:8px}
.dc-snap{padding:18px;font-family:var(--mono);font-size:12.5px;display:flex;flex-direction:column;gap:9px}
.dc-snap .row{display:flex;align-items:center;gap:11px;color:var(--fg-dim)}
.dc-snap .row .k{color:var(--vi-2)}
.dc-snap .el{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:9px;background:var(--bg-1);color:var(--fg-dim)}
.dc-snap .el.hit{border-color:var(--vi-line);background:var(--vi-bg);color:var(--fg);position:relative}
.dc-snap .el .badge{margin-left:auto;font-size:10.5px;color:var(--fg-faint)}
.dc-snap .el.hit .badge{color:var(--vi-2)}
.dc-cursor{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--vi-2)}
.dc-perm{font-family:var(--mono);font-size:11.5px;color:var(--warn);background:rgba(255,175,95,.06);
  border:1px solid rgba(255,175,95,.25);border-radius:8px;padding:9px 12px}
.dc-perm .y{color:var(--ok)}

/* team-build panes */
.panes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;border:1px solid var(--border-2);border-radius:var(--r-md);
  background:var(--bg-2);padding:10px;box-shadow:0 40px 90px -34px rgba(0,0,0,.85),0 0 70px -30px var(--vi-glow)}
.pane{background:#0a0910;border:1px solid var(--border);border-radius:9px;overflow:hidden;min-height:230px}
.pane .ph{font-family:var(--mono);font-size:10.5px;padding:8px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;color:var(--lav)}
.pane .ph .d{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok)}
.pane .pl{padding:10px;font-family:var(--mono);font-size:10px;line-height:1.7;display:flex;flex-direction:column;gap:5px;color:var(--fg-faint)}
.pane .pl .tool{color:var(--gold)}.pane .pl .ok{color:var(--ok)}.pane .pl .vi{color:var(--vi-2)}
@media(max-width:520px){.panes{grid-template-columns:1fr}.pane{min-height:120px}}

/* tools-on-demand viz */
.tod{border:1px solid var(--border-2);border-radius:var(--r-md);background:linear-gradient(180deg,var(--bg-1),var(--bg-0));padding:26px;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.85)}
.tod .core{font-family:var(--mono);font-size:12px;color:var(--vi-2);background:var(--vi-bg);border:1px solid var(--vi-line);
  border-radius:9px;padding:10px 13px;text-align:center;margin-bottom:16px}
.tod-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.tod-grid span{aspect-ratio:1;border-radius:7px;border:1px solid var(--border);background:var(--bg-1);transition:.3s}
.tod-grid span.lit{border-color:var(--vi-line);background:var(--vi-bg);box-shadow:0 0 12px -2px var(--vi-glow)}
.tod-note{font-family:var(--mono);font-size:11.5px;color:var(--fg-faint);margin-top:16px;text-align:center}

/* ---------- toolbelt / interfaces grid ---------- */
.belt{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:50px}
.belt-card{background:linear-gradient(165deg,var(--bg-1),var(--bg-0));border:1px solid var(--border);border-radius:var(--r-md);
  padding:24px;transition:.22s var(--ease)}
.belt-card:hover{border-color:var(--vi-line);transform:translateY(-3px)}
.belt-card .bi{width:36px;height:36px;border-radius:9px;background:var(--vi-bg);border:1px solid var(--vi-line);
  display:grid;place-items:center;color:var(--vi-2);margin-bottom:15px}
.belt-card .bi svg{width:18px;height:18px}
.belt-card h3{font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:11px}
.belt-card ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.belt-card li{font-size:13px;color:var(--fg-dim);display:flex;gap:8px;line-height:1.42}
.belt-card li::before{content:"›";color:var(--vi-2);flex:none}
.belt-card code{font-family:var(--mono);font-size:11.5px;color:var(--vi-2)}
.belt-card .run{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--vi-2);background:var(--bg-0);
  border:1px solid var(--border);border-radius:8px;padding:8px 11px;overflow-x:auto}

/* ---------- mini trio (memory/voice/skills) ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.tcard{background:linear-gradient(165deg,var(--bg-1),var(--bg-0));border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;overflow:hidden}
.tcard h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:9px}
.tcard p{font-size:13.5px;color:var(--fg-dim);line-height:1.55;margin-bottom:18px}
.tcard p code{font-family:var(--mono);font-size:.85em;color:var(--vi-2)}
.mem-facts{display:flex;flex-direction:column;gap:7px;font-family:var(--mono);font-size:11.5px}
.mem-facts .mf{display:flex;align-items:center;gap:10px;padding:8px 11px;background:var(--bg-1);border:1px solid var(--border);border-radius:8px;color:var(--fg-dim)}
.mem-facts .mf .d{width:6px;height:6px;border-radius:50%;background:var(--vi);flex:none;box-shadow:0 0 6px var(--vi-glow)}
.mem-facts .mf .r{margin-left:auto;color:var(--fg-faint);font-size:10.5px}
.voicebars{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:74px}
.voicebars i{width:6px;border-radius:4px;background:linear-gradient(180deg,var(--vi-2),var(--vi-deep));animation:vb 1.1s ease-in-out infinite;opacity:.9}
@keyframes vb{0%,100%{height:10px}50%{height:54px}}
.skill-list{display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:12px}
.skill-list .s{display:flex;align-items:center;gap:9px;padding:8px 11px;background:var(--bg-1);border:1px solid var(--border);border-radius:8px;color:var(--fg-dim)}
.skill-list .s .i{color:var(--vi-2)}
.skill-list .s .one{margin-left:auto;color:var(--ok);font-size:10.5px}

/* ---------- privacy ---------- */
.privacy{background:linear-gradient(180deg,rgba(21,20,28,.45),transparent);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.privacy .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.priv-list{list-style:none;display:flex;flex-direction:column;gap:18px}
.priv-list li{display:flex;gap:14px;font-size:15px;color:var(--fg-dim);line-height:1.5}
.priv-list .pi{flex:none;color:var(--vi-2);margin-top:2px}
.priv-list b{color:var(--fg);font-weight:600}
.priv-list code{font-family:var(--mono);font-size:.84em;color:var(--vi-2)}
.priv-diagram{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-0);padding:30px}
.priv-machine{border:1px solid var(--vi-line);border-radius:var(--r-md);padding:24px 22px;background:var(--vi-bg);position:relative;overflow:hidden}
.priv-machine::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 50% 120%,rgba(139,92,246,.14),transparent 70%);pointer-events:none}
.priv-machine .mh{font-family:var(--mono);font-size:10.5px;color:var(--vi-2);letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:8px;position:relative;z-index:2}
.priv-row{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:2}
.priv-node{flex:1;min-width:78px;text-align:center;font-size:11.5px;color:var(--fg-dim);background:rgba(8,8,11,.5);border:1px solid var(--border-2);border-radius:9px;padding:13px 8px;font-family:var(--mono)}
.priv-node b{display:block;color:var(--fg);font-size:13px;margin-bottom:2px;font-family:var(--ff)}
.priv-out{display:flex;align-items:center;gap:14px;margin-top:20px;font-size:12.5px;color:var(--fg-faint);font-family:var(--mono)}
.priv-out .barrier{flex:none;width:3px;height:40px;background:var(--vi);border-radius:3px;box-shadow:0 0 12px var(--vi-line)}

/* ---------- install ---------- */
.os-tabs{display:flex;gap:8px;margin-top:42px;margin-bottom:18px;flex-wrap:wrap}
.os-tab{display:flex;align-items:center;gap:9px;padding:11px 18px;border-radius:var(--r);border:1px solid var(--border);
  background:var(--bg-1);color:var(--fg-dim);font-size:14px;font-weight:500;transition:.18s}
.os-tab svg{width:17px;height:17px}
.os-tab.active{border-color:var(--vi-line);color:var(--fg);background:var(--vi-bg)}
.os-tab .exp{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--lav);border:1px solid var(--lav-line);background:var(--lav-bg);padding:1px 7px;border-radius:999px;text-transform:uppercase}
.os-panel{display:none}.os-panel.active{display:block;animation:fade .4s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.codeblock{background:rgba(6,6,9,.72);border:1px solid var(--border-2);border-radius:var(--r-md);overflow:hidden}
.codeblock .cb-head{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:12px;color:var(--fg-faint);background:rgba(21,20,28,.5)}
.codeblock .cb-head .ck{margin-left:auto;font-size:11px;color:var(--fg-faint);transition:.15s;letter-spacing:.04em}
.codeblock .cb-head .ck:hover{color:var(--vi-2)}
.codeblock pre{padding:20px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.9;color:var(--fg)}
.codeblock .cm{color:var(--fg-faint)}.codeblock .pr{color:var(--vi-2)}.codeblock .fl{color:var(--lav)}
.install-note{font-size:13.5px;color:var(--fg-dim);margin-top:18px;display:flex;gap:10px;align-items:flex-start;line-height:1.55}
.install-note .ni{color:var(--vi-2);flex:none;margin-top:1px;font-family:var(--mono)}
.install-note code{font-family:var(--mono);font-size:.86em;color:var(--vi-2)}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin:46px auto 0}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:23px 4px;text-align:left;font-size:18px;font-weight:500;transition:.15s;letter-spacing:-.02em}
.faq-q:hover{color:var(--vi-2)}
.faq-q .pm{flex:none;width:22px;height:22px;position:relative;transition:.25s}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--vi-2);border-radius:2px}
.faq-q .pm::before{top:10px;left:3px;right:3px;height:2px}
.faq-q .pm::after{left:10px;top:3px;bottom:3px;width:2px;transition:.25s}
.faq-item.open .pm::after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-a p{padding:0 4px 23px;color:var(--fg-dim);font-size:15px;max-width:72ch;line-height:1.6}
.faq-a code{font-family:var(--mono);font-size:13px;color:var(--vi-2);background:var(--vi-bg);padding:1px 6px;border-radius:5px}

/* ---------- final CTA ---------- */
.finalcta{position:relative;overflow:hidden;text-align:center;padding:140px 0}
.finalcta canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%}
.finalcta::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(50vw 60vh at 50% 118%,rgba(139,92,246,.2),transparent 62%),radial-gradient(40vw 30vh at 50% -10%,rgba(255,179,230,.05),transparent 60%)}
.finalcta .wrap{position:relative;z-index:2}
.finalcta .logo-tile{width:66px;height:66px;border-radius:17px;margin:0 auto 28px}
.finalcta .logo-tile img{width:40px;height:40px}
.finalcta h2{font-size:clamp(38px,5.6vw,68px);margin-bottom:20px;font-weight:600;letter-spacing:-.04em;line-height:1}
.finalcta .lede{font-size:19px;margin:0 auto 34px}.finalcta .hero-cta{justify-content:center}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--border);background:linear-gradient(180deg,transparent,rgba(21,20,28,.4));padding:60px 0 40px}
.footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.footer .brand{margin-bottom:16px}
.footer .fblurb{font-size:13.5px;color:var(--fg-faint);max-width:34ch;line-height:1.55}
.footer h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:18px;font-weight:600;font-family:var(--mono)}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer a{font-size:14px;color:var(--fg-dim);transition:.15s}.footer a:hover{color:var(--vi-2)}
.footer-bottom{border-top:1px solid var(--border);margin-top:44px;padding-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--fg-faint)}
.footer-bottom .mono{font-family:var(--mono);letter-spacing:.02em}.footer-bottom a{color:var(--vi-2)}

/* ============================================================
   LIVING BACKGROUND CANVAS
   ============================================================ */
#bg-field{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9}

/* deck needs a touch more room for the recreated UIs */
.deck-stage,.deck-layers{min-height:500px}
.dots{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}
.dots i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5;animation:bd 1.1s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.18s}.dots i:nth-child(3){animation-delay:.36s}
@keyframes bd{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* ============================================================
   GUI MOCK (recreated desktop app — no screenshot)
   ============================================================ */
/* bulletproof: no inline SVG inside a deck mock may balloon to its
   300x150 intrinsic default */
.deck-stage svg{width:13px;height:13px;flex:none}
.gui{width:100%;max-width:520px;border:1px solid var(--border-2);border-radius:13px;overflow:hidden;
  background:var(--bg-0);display:flex;flex-direction:column;font-size:11px;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.9),0 0 70px -32px var(--vi-glow)}
.gui-title{height:25px;background:#0b0a10;display:flex;align-items:center;gap:7px;padding:0 11px;border-bottom:1px solid var(--border)}
.gui-title .h{width:13px;height:13px;border-radius:3px;background:linear-gradient(160deg,var(--vi-2),var(--vi-deep));display:grid;place-items:center;font-size:8px;color:#fff;font-weight:700}
.gui-title .nm{font-size:10px;color:var(--fg-dim);font-weight:600}
.gui-title .wc{margin-left:auto;display:flex;gap:7px}
.gui-title .wc i{width:8px;height:8px;border-radius:50%;background:var(--bg-3)}
.gui-top{height:36px;display:flex;align-items:center;gap:8px;padding:0 11px;border-bottom:1px solid var(--border);background:var(--bg-1);flex-wrap:nowrap;overflow:hidden}
.gui-pill{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--fg-dim);white-space:nowrap;
  background:var(--bg-2);border:1px solid var(--border);border-radius:7px;padding:4px 10px;max-width:170px;overflow:hidden}
.gui-pill .led{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok);flex:none}
.gui-pill .nmtxt{overflow:hidden;text-overflow:ellipsis}
.gui-pill .chev{width:10px;height:10px;color:var(--fg-faint);margin-left:2px;flex:none}
.gui-eject{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;color:var(--fg-faint);white-space:nowrap;flex:none;
  background:var(--bg-2);border:1px solid var(--border);border-radius:7px;padding:4px 9px}
.gui-eject svg{width:11px;height:11px;flex:none}
.gui-stats{margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--fg-faint);display:flex;gap:9px}
.gui-stats b{color:var(--vi-2);font-weight:500}
.gui-body{display:grid;grid-template-columns:108px 1fr;min-height:286px}
.gui-side{border-right:1px solid var(--border);background:#0a090e;padding:9px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.gui-new{background:linear-gradient(180deg,var(--vi-2),var(--vi));color:#0c0916;font-weight:600;font-size:10px;border-radius:7px;padding:7px;text-align:center}
.gui-search{font-size:9px;color:var(--fg-faint);background:var(--bg-1);border:1px solid var(--border);border-radius:6px;padding:5px 8px;display:flex;align-items:center;gap:6px}
.gui-search svg{width:11px;height:11px;flex:none}
.gui-sec{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);font-family:var(--mono);margin:3px 0 1px}
.gui-chat{font-size:9.5px;color:var(--fg-dim);padding:5px 7px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.gui-chat svg{width:11px;height:11px;flex:none;opacity:.55}
.gui-chat.on{background:var(--vi-bg);color:var(--fg)}
.gui-chat.on svg{opacity:1;color:var(--vi-2)}
.gui-nav{margin-top:auto;display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--border);padding-top:6px}
.gui-nav .n{font-size:9.5px;color:var(--fg-dim);padding:4px 6px;border-radius:6px;display:flex;align-items:center;gap:7px}
.gui-nav .n .cnt{margin-left:auto;font-size:8px;color:var(--fg-faint);font-family:var(--mono)}
.gui-nav .n .badge{background:var(--vi);color:#0c0916;font-weight:700;border-radius:999px;padding:0 5px;min-width:14px;text-align:center;line-height:14px}
.gui-nav .n.on{color:var(--vi-2);background:var(--vi-bg)}
.gui-nav .n .ic{width:13px;height:13px;flex:none;opacity:.7}
.gui-nav .n.on .ic{opacity:1}
.gui-main{display:flex;flex-direction:column;background:var(--bg-0);min-width:0}
.gui-msgs{flex:1;padding:13px;display:flex;flex-direction:column;gap:7px;overflow:hidden;min-height:0;position:relative}
.gui-empty{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px}
.gui-empty .lg{width:38px;height:38px;border-radius:11px;background:linear-gradient(160deg,var(--vi-2),var(--vi-deep));display:grid;place-items:center;color:#fff;font-weight:700;font-size:18px;box-shadow:0 0 30px -8px var(--vi-glow)}
.gui-empty .t1{font-size:13px;font-weight:600;color:var(--fg)}
.gui-empty .t2{font-size:10px;color:var(--fg-faint);max-width:30ch}
.gui-status .sp b{transition:color .25s}
/* GUI mock messages — mirror the REAL app transcript: avatar + lowercase
   header + plain text (you), then thinking + real tool cards (friday). No
   right-aligned bubbles, no ⚡/↳ — exactly what the desktop app shows. */
.gmm{display:flex;gap:9px;opacity:0;transform:translateY(5px);transition:.3s var(--ease)}
.gmm.show{opacity:1;transform:none}
.gmm-av{width:17px;height:17px;border-radius:5px;display:grid;place-items:center;font-size:8px;font-weight:700;flex:none}
.gmm.user .gmm-av{background:rgba(56,189,248,.12);color:#38bdf8;border:1px solid rgba(56,189,248,.28)}
.gmm.bot .gmm-av{background:var(--vi-bg);color:var(--vi-2);border:1px solid var(--vi-line)}
.gmm-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.gmm-who{font-size:8px;font-weight:600;text-transform:lowercase;letter-spacing:.04em}
.gmm.user .gmm-who{color:#38bdf8}
.gmm.bot .gmm-who{color:var(--vi-2)}
.gmm-text{font-size:10px;color:var(--fg);line-height:1.5}.gmm-text b{color:#fff;font-weight:600}
.gmm-think,.gmm-tool{opacity:0;transform:translateY(5px);transition:.28s var(--ease)}
.gmm-think.show,.gmm-tool.show{opacity:1;transform:none}
.gmm-think{display:flex;align-items:center;gap:5px;font-size:8.5px;color:var(--vi-2);
  background:rgba(192,132,252,.05);border-left:2px solid var(--vi-2);border-radius:0 5px 5px 0;padding:4px 7px}
.gmm-tool{display:flex;align-items:center;gap:6px;background:var(--bg-2);border:1px solid var(--border);border-radius:7px;padding:5px 8px;font-family:var(--mono)}
.gmm-think .chev,.gmm-tool .chev{width:8px;height:8px;color:var(--fg-faint);flex:none}
.gmm-tool .ic{width:10px;height:10px;color:var(--vi-3);flex:none}
.gmm-tool .tnm{font-size:9px;color:var(--fg);font-weight:500;flex:none}
.gmm-tool .targ{font-size:8.5px;color:var(--fg-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.gmm-tool .tms{font-size:8.5px;color:var(--fg-faint);flex:none}
.gui-composer{border-top:1px solid var(--border);padding:8px 10px;display:flex;align-items:center;gap:7px}
.gui-composer .think{font-family:var(--mono);font-size:9px;color:var(--vi-2);border:1px solid var(--vi-line);border-radius:6px;padding:4px 8px;display:flex;align-items:center;gap:4px}
.gui-composer .mi{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--fg-faint)}
.gui-composer .inp{flex:1;font-size:10px;color:var(--fg-faint);background:var(--bg-1);border:1px solid var(--border);border-radius:7px;padding:7px 10px}
.gui-composer .send{width:26px;height:26px;border-radius:7px;background:linear-gradient(180deg,var(--vi-2),var(--vi));color:#0c0916;display:grid;place-items:center;flex:none;font-size:12px}
.gui-status{height:21px;border-top:1px solid var(--border);background:var(--bg-1);display:flex;align-items:center;gap:11px;padding:0 11px;font-family:var(--mono);font-size:8.5px;color:var(--fg-faint)}
.gui-status b{color:var(--vi-2);font-weight:500}.gui-status .sp{margin-left:auto}

/* ============================================================
   PHONE — messengers (WhatsApp / Telegram / Discord)
   ============================================================ */
.phone{width:236px;background:#050507;border:2px solid #26232f;border-radius:32px;padding:8px;position:relative;
  box-shadow:0 44px 80px -28px rgba(0,0,0,.92),0 0 0 1px rgba(255,255,255,.02)}
.phone::before{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);width:54px;height:5px;border-radius:3px;background:#1a1820;z-index:4}
.pm-screen{border-radius:25px;overflow:hidden;display:flex;flex-direction:column;height:404px;background:var(--bg-0)}
.pm-head{height:50px;display:flex;align-items:center;gap:9px;padding:14px 12px 0;color:#fff;flex:none;transition:background .4s}
.pm-ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.pm-ic svg{width:17px;height:17px}
.pm-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pm-meta b{font-size:12.5px;font-weight:600}
.pm-meta span{font-size:9px;opacity:.85}
.pm-call{margin-left:auto;opacity:.85;font-size:13px}
.pm-body{flex:1;padding:13px 11px;display:flex;flex-direction:column;gap:7px;overflow:hidden;transition:background .4s}
.pm-b{font-size:11px;padding:7px 11px;border-radius:13px;max-width:86%;line-height:1.4;word-break:break-word}
.pm-b.pop{opacity:0;transform:translateY(7px) scale(.96);transition:.3s var(--ease)}
.pm-b.pop.show{opacity:1;transform:none}
.pm-b.me{align-self:flex-end;color:#fff;border-bottom-right-radius:4px;font-weight:500}
.pm-b.bot{align-self:flex-start;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);color:#edecf2;border-bottom-left-radius:4px}
.pm-b.tool{align-self:flex-start;font-family:var(--mono);font-size:9.5px;color:var(--gold);background:rgba(255,213,74,.1);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:5px 9px}
.pm-b.file{align-self:flex-start;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#fff;display:flex;gap:7px;align-items:center;font-weight:500}
.pm-b.typing{align-self:flex-start;background:rgba(255,255,255,.08);color:#cfcde0;padding:9px 12px}
.pm-dock{height:50px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;gap:16px;background:#08080b;flex:none}
.pm-dock i{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--c,#fff);opacity:.38;transition:.28s var(--ease)}
.pm-dock i svg{width:19px;height:19px}
.pm-dock i.on{opacity:1;background:rgba(255,255,255,.07);transform:translateY(-2px)}

/* ============================================================
   MCP — hub pulsing to many hosts
   ============================================================ */
.mcp-mock{position:relative;width:340px;height:340px;max-width:100%;margin:auto}
.mcp-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:19px;
  display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,var(--vi-bg),var(--bg-2));
  border:1px solid var(--vi-line);color:var(--vi-2);box-shadow:0 0 44px -8px var(--vi-glow);z-index:4}
.mcp-core svg{width:32px;height:32px}
.mcp-core .lbl{position:absolute;bottom:-19px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:8.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);white-space:nowrap}
.mcp-ring{position:absolute;left:50%;top:50%;width:74px;height:74px;border-radius:50%;transform:translate(-50%,-50%);
  border:1px solid var(--vi-line);opacity:0;animation:mcpring 3.4s ease-out infinite;z-index:1}
.mcp-ring.b{animation-delay:1.7s}
@keyframes mcpring{0%{opacity:.6;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.6)}}
.mcp-spoke{position:absolute;left:50%;top:50%;height:2px;width:118px;transform-origin:0 50%;border-radius:2px;z-index:1;
  background:linear-gradient(90deg,var(--vi-line),transparent);opacity:.22;transition:opacity .3s}
.mcp-spoke.fire{opacity:.85;background:linear-gradient(90deg,var(--vi-2),var(--vi-line) 60%,transparent)}
.mcp-node{position:absolute;left:50%;top:50%;font-family:var(--mono);font-size:10px;color:var(--fg-dim);
  background:var(--bg-1);border:1px solid var(--border);border-radius:999px;padding:5px 11px;white-space:nowrap;
  transition:.3s var(--ease);z-index:3}
.mcp-node.fire{border-color:var(--vi-line);background:var(--vi-bg);color:var(--fg);box-shadow:0 0 20px -4px var(--vi-glow);transform:translate(-50%,-50%) scale(1.06)}
.mcp-foot{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font-family:var(--mono);font-size:10px;color:var(--fg-faint);white-space:nowrap}
.mcp-foot b{color:var(--vi-2);font-weight:500}

/* ============================================================
   DESKTOP CONTROL — animated cursor + toggle
   ============================================================ */
.dc-mock{position:relative}
.dc-snap .el.target{justify-content:space-between}
.dc-toggle{width:36px;height:19px;border-radius:999px;background:var(--bg-3);border:1px solid var(--border-2);
  position:relative;transition:.3s var(--ease);flex:none}
.dc-toggle::after{content:"";position:absolute;left:2px;top:1px;width:15px;height:15px;border-radius:50%;background:var(--fg-faint);transition:.3s var(--ease)}
.dc-toggle.on{background:var(--vi);border-color:var(--vi)}
.dc-toggle.on::after{left:18px;background:#fff}
.dc-cursor{position:absolute;left:0;top:0;width:19px;height:19px;color:#fff;z-index:6;opacity:0;
  transition:transform 1s var(--ease),opacity .35s;filter:drop-shadow(0 2px 5px rgba(0,0,0,.7));pointer-events:none}
.dc-cursor svg{width:19px;height:19px}
.dc-cursor::after{content:"";position:absolute;left:-3px;top:-3px;width:24px;height:24px;border-radius:50%;border:2px solid var(--vi-2);opacity:0;transform:scale(.3)}
.dc-cursor.press::after{animation:dcripple .45s ease-out}
@keyframes dcripple{0%{opacity:.7;transform:scale(.3)}100%{opacity:0;transform:scale(1.7)}}
.dc-perm{opacity:0;transform:translateY(4px);max-height:0;overflow:hidden;padding:0 12px;border-width:0;margin-top:0;
  transition:.35s var(--ease);font-family:var(--mono);font-size:11.5px;color:var(--warn);
  background:rgba(255,175,95,.06);border:1px solid rgba(255,175,95,.25);border-radius:8px}
.dc-perm.show{opacity:1;transform:none;max-height:60px;padding:9px 12px;border-width:1px;margin-top:2px}
.dc-perm .y{color:var(--ok)}

/* ============================================================
   VOICE — center-out dot grid + wake word
   ============================================================ */
.voice-stage{position:relative;border-radius:var(--r);overflow:hidden;background:#060509;border:1px solid var(--border);margin-bottom:16px}
#voice-grid{width:100%;height:152px;display:block}
.voice-stage .vstate{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-family:var(--mono);font-size:10px;color:var(--fg-dim);letter-spacing:.16em}
.wake{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--vi-2);
  background:var(--vi-bg);border:1px solid var(--vi-line);border-radius:999px;padding:5px 12px;margin-bottom:4px}
.wake .rec{width:7px;height:7px;border-radius:50%;background:var(--vi-2);box-shadow:0 0 8px var(--vi-glow);animation:bd 1.4s infinite}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:38px}
  .deck{order:2}
  .spot,.spot.flip{grid-template-columns:1fr;gap:34px}
  .spot.flip .spot-media{order:0}
  .privacy .wrap{grid-template-columns:1fr;gap:38px}
  .belt{grid-template-columns:1fr 1fr}
  .trio{grid-template-columns:1fr}
  .footer .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .section{padding:84px 0}
  .nav-links,.nav-gh .lbl{display:none}
  .menu-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;border:1px solid var(--border)}
  .nav-mobile{flex-direction:column;gap:4px;padding:12px 32px 18px;border-bottom:1px solid var(--border);background:rgba(8,8,11,.97)}
  .nav-mobile.open{display:flex}
  .nav-mobile a{padding:11px 12px;border-radius:8px;color:var(--fg-dim)}
  .deck-rail{flex-wrap:wrap}.deck-tab{flex:1 1 44%}
  .mcp-mock{transform:scale(.82)}
  .belt,.footer .wrap{grid-template-columns:1fr}
  .trust .wrap{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-cta .btn{flex:1;justify-content:center}
  .wrap{padding:0 22px}
}