/* ============================================
   AXION — Design System (shared)
   ============================================ */
:root{
  --bg:#07080B;
  --bg-2:#0C0E13;
  --surface:#11141A;
  --surface-2:#171B22;
  --line:#1F242D;
  --line-strong:#2A313D;
  --text:#E8E9EE;
  --muted:#8089A0;
  --dim:#5A6275;
  --accent:#5EE6FF;
  --accent-soft:rgba(94,230,255,.12);
  --warm:#FFB454;
  --warm-soft:rgba(255,180,84,.12);
  --good:#4ADE80;
  --bad:#FF6B6B;
  --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --container:1240px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:var(--container);margin:0 auto;padding:0 32px}

/* ─────────── Background grid + grain ─────────── */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(94,230,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,230,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 100%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .55 0 0 0 0 .65 0 0 0 .04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.5;mix-blend-mode:overlay;
}
main,nav,footer{position:relative;z-index:1}

/* ─────────── Typography ─────────── */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{
  content:"";width:6px;height:6px;
  background:var(--accent);border-radius:50%;
  box-shadow:0 0 12px var(--accent);
}
.eyebrow.warm{color:var(--warm)}
.eyebrow.warm::before{background:var(--warm);box-shadow:0 0 12px var(--warm)}

.h-display{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.02}
.h-display.xl{font-size:clamp(48px,7vw,104px)}
.h-display.l{font-size:clamp(36px,5vw,64px)}
.h-display.m{font-size:clamp(28px,3.5vw,44px)}
.h-display.s{font-size:clamp(20px,2.4vw,28px);font-weight:500}
.accent{color:var(--accent)}
.warm{color:var(--warm)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.lead{font-size:18px;line-height:1.65;color:var(--muted);max-width:60ch}

/* ─────────── Nav ─────────── */
.nav{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(7,8,11,.72);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{
  font-family:var(--display);font-weight:600;font-size:20px;
  letter-spacing:.04em;display:flex;align-items:center;gap:2px;
}
.brand .dot{color:var(--accent)}
.nav-links{
  display:flex;gap:36px;align-items:center;
  font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);list-style:none;
}
.nav-links a{transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a.active{color:var(--accent)}
.nav-cta{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;
  padding:10px 16px;border:1px solid var(--line-strong);border-radius:6px;
  color:var(--text);transition:all .2s;
}
.nav-cta:hover{border-color:var(--accent);color:var(--accent)}

/* ─────────── Buttons ─────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  border-radius:6px;border:1px solid transparent;
  cursor:pointer;transition:all .2s ease;
}
.btn-primary{background:var(--accent);color:#06121A}
.btn-primary:hover{background:#79EDFF;transform:translateY(-1px);box-shadow:0 8px 30px rgba(94,230,255,.18)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--text)}
.btn-warm{background:var(--warm);color:#1A0F00}
.btn-warm:hover{background:#FFC174}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}

/* ─────────── Page-level layout ─────────── */
.section{padding:120px 0;position:relative}
.section.tight{padding:80px 0}
.section-head{margin-bottom:64px;max-width:760px}
.section-head .eyebrow{margin-bottom:16px}
.section-head h2{margin-bottom:20px}

.page-hero{
  padding:80px 0 56px;position:relative;
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 50% at 80% 20%,rgba(94,230,255,.08),transparent 60%);
  pointer-events:none;
}
.page-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end}
.page-hero h1{margin:18px 0 16px;max-width:18ch}
.page-hero .lead{font-size:18px}
.page-hero .breadcrumb{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);
  display:flex;gap:12px;align-items:center;
}
.page-hero .breadcrumb a{color:var(--muted)}
.page-hero .breadcrumb .sep{color:var(--line-strong)}
.page-hero-side{
  border:1px solid var(--line);
  border-radius:12px;
  padding:24px;
  background:var(--bg-2);
  font-family:var(--mono);font-size:12px;color:var(--muted);
}
.page-hero-side .k{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.page-hero-side .v{font-family:var(--display);font-size:18px;color:var(--text);font-weight:500;margin-bottom:14px}
.page-hero-side .v small{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:400;margin-left:6px}

/* ─────────── Hero (home) ─────────── */
.hero{padding:88px 0 96px;position:relative}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%,rgba(94,230,255,.10),transparent 60%),
    radial-gradient(ellipse 40% 30% at 10% 80%,rgba(255,180,84,.06),transparent 60%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:1}
.hero-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);
  margin-bottom:48px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 0;
}
.hero-meta .right{display:flex;gap:24px}
.hero-meta b{color:var(--text);font-weight:500}
.hero h1{margin:24px 0 28px;max-width:18ch}
.hero-sub{font-size:20px;line-height:1.55;color:var(--muted);max-width:56ch;margin-bottom:40px}
.hero-sub b{color:var(--text);font-weight:500}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-bottom{margin-top:72px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end}

/* Countdown */
.countdown{
  padding:24px;border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(255,180,84,.04),transparent 60%);
  border-radius:12px;position:relative;
}
.countdown::before{
  content:"";position:absolute;left:0;top:24px;bottom:24px;width:2px;background:var(--warm);
}
.countdown .label{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--warm);margin-bottom:6px;
}
.countdown .what{font-family:var(--display);font-size:20px;font-weight:500;margin-bottom:4px}
.countdown .when{font-family:var(--mono);font-size:13px;color:var(--muted);margin-bottom:20px}
.timer{display:flex;gap:8px;align-items:flex-end;font-family:var(--mono)}
.timer .unit{display:flex;flex-direction:column;align-items:center;min-width:64px}
.timer .num{font-size:36px;font-weight:500;line-height:1;color:var(--text)}
.timer .txt{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.timer .sep{font-size:24px;color:var(--warm);opacity:.5;padding-bottom:18px}

/* ─────────── Hero intro (animated AXION wordmark) ─────────── */
.hero-intro{
  height:clamp(180px,26vw,300px);
  margin:0 0 48px;
  position:relative;
  overflow:visible;
}
.hero-intro canvas{
  position:absolute;
  top:-160px;left:-160px;
  width:calc(100% + 320px);
  height:calc(100% + 320px);
  display:block;
  pointer-events:none;
}

/* OS strip — countdown supplement */
.os-strip{
  margin-top:18px;padding-top:14px;
  border-top:1px dashed var(--line);
  display:flex;gap:8px;flex-wrap:wrap;
}
.os-strip .os{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  padding:5px 10px;border:1px solid var(--line);border-radius:4px;
  background:var(--bg-2);
}
.os-strip .os svg{width:12px;height:12px;flex-shrink:0;color:var(--text);opacity:.85}

/* Stats */
.hero-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.stat{padding:24px;background:var(--bg-2)}
.stat .v{font-family:var(--display);font-size:32px;font-weight:600;color:var(--accent);line-height:1}
.stat .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.stat .n{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.4}

/* ─────────── 4 steps ─────────── */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.step{
  background:var(--bg-2);padding:36px 28px 32px;
  display:flex;flex-direction:column;gap:16px;min-height:300px;
}
.step .step-n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--dim)}
.step .step-icon{
  width:48px;height:48px;border:1px solid var(--line-strong);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);background:var(--accent-soft);
}
.step h3{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.01em}
.step p{font-size:14px;color:var(--muted);line-height:1.55}
.step .meta{
  margin-top:auto;display:flex;gap:6px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
}
.step .meta span{padding:3px 8px;border:1px solid var(--line);border-radius:4px}
.step .meta .ok{color:var(--good);border-color:rgba(74,222,128,.3)}
.step .meta .warm{color:var(--warm);border-color:rgba(255,180,84,.3)}

/* ─────────── App showcase ─────────── */
.showcase{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
.showcase-text h2{margin-bottom:20px}
.showcase-text p{color:var(--muted);font-size:16px;margin-bottom:16px}
.showcase-list{margin-top:32px;display:flex;flex-direction:column;gap:14px}
.showcase-list .row{
  display:flex;gap:14px;align-items:flex-start;
  padding:12px 0;border-top:1px solid var(--line);
}
.showcase-list .row:last-child{border-bottom:1px solid var(--line)}
.showcase-list .row .k{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  color:var(--accent);text-transform:uppercase;min-width:80px;padding-top:3px;
}
.showcase-list .row .v{font-size:14px;color:var(--text)}
.showcase-list .row .v small{display:block;color:var(--muted);font-size:13px;margin-top:2px}

.app-mock{
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:12px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(94,230,255,.04);
}
.app-bar{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;background:var(--bg-2);
  border-bottom:1px solid var(--line);
}
.app-bar .dots{display:flex;gap:6px}
.app-bar .dots > div{width:10px;height:10px;border-radius:50%}
.app-bar .dot.r{background:#FF6B5C}
.app-bar .dot.y{background:#FFBD2E}
.app-bar .dot.g{background:#27C93F}
.app-bar .title{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  margin-left:14px;letter-spacing:.06em;
}
.app-bar .badge{
  margin-left:auto;font-family:var(--mono);font-size:10px;
  padding:2px 8px;border:1px solid var(--line);border-radius:4px;
  color:var(--accent);background:var(--accent-soft);
}
.app-mock.wide{margin-top:0}
.app-mock.wide .app-body{min-height:620px;grid-template-columns:200px 1fr}
.app-body{display:grid;grid-template-columns:160px 1fr;min-height:520px}
.app-side{
  background:var(--bg-2);border-right:1px solid var(--line);
  padding:18px 0;font-family:var(--mono);font-size:12px;
}
.app-side .group{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);padding:14px 18px 6px}
.app-side .item{
  padding:8px 18px;display:flex;align-items:center;gap:10px;
  color:var(--muted);cursor:pointer;
}
.app-side .item.active{
  color:var(--text);background:var(--surface-2);
  border-left:2px solid var(--accent);padding-left:16px;
}
.app-side .item:hover{color:var(--text)}
.app-side .item svg{width:14px;height:14px;flex-shrink:0}
.app-main{padding:24px;display:flex;flex-direction:column;gap:18px}
.app-h{display:flex;align-items:center;justify-content:space-between}
.app-h .t{font-family:var(--display);font-size:20px;font-weight:600}
.app-h .actions{display:flex;gap:8px}
.app-pill{font-family:var(--mono);font-size:11px;color:var(--muted);padding:5px 10px;border:1px solid var(--line);border-radius:4px}
.app-pill.live{color:var(--good);border-color:rgba(74,222,128,.3)}
.app-pill.live::before{content:"●";color:var(--good);margin-right:5px;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.4}}
.cam-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cam{
  aspect-ratio:16/10;border-radius:6px;
  background:linear-gradient(135deg,#0A0D13,#171C25);
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.cam::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 8px,rgba(255,255,255,.015) 8px,rgba(255,255,255,.015) 9px);
}
.cam .tag{
  position:absolute;top:8px;left:8px;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
  background:rgba(7,8,11,.7);padding:3px 6px;border-radius:3px;
}
.cam .reticle{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border:1px solid var(--accent);border-radius:50%;opacity:.4;
}
.cam .reticle::before,.cam .reticle::after{content:"";position:absolute;background:var(--accent)}
.cam .reticle::before{top:50%;left:-10px;right:-10px;height:1px}
.cam .reticle::after{left:50%;top:-10px;bottom:-10px;width:1px}
.app-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.app-card{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:14px}
.app-card .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.app-card .v{font-family:var(--display);font-size:18px;font-weight:600}
.app-card .v small{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:6px;font-weight:400}
.bar{height:4px;background:var(--surface-2);border-radius:2px;margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--warm));border-radius:2px}
.app-foot{
  display:flex;gap:8px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:var(--muted);
  border-top:1px dashed var(--line);padding-top:14px;
}
.app-foot span{padding:3px 8px;border-radius:3px;background:var(--bg-2);border:1px solid var(--line)}

/* ─────────── App panels (multi-view) ─────────── */
.app-panel{display:none;flex-direction:column;gap:18px;flex:1}
.app-panel.active{display:flex}
.app-side .item{position:relative}
.app-side .item.clickable{cursor:pointer}

/* Tile grid (overview / train / fork) */
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tile{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px;padding:14px;
}
.tile .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.tile .v{font-family:var(--display);font-size:22px;font-weight:600;line-height:1}
.tile .v small{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:4px;font-weight:400}
.tile .v.accent{color:var(--accent)}
.tile .v.warm{color:var(--warm)}
.tile .v.good{color:var(--good)}
.tile .sub{font-size:11px;color:var(--muted);margin-top:6px;font-family:var(--mono);letter-spacing:.04em}

/* Activity list (overview / collect) */
.activity{
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;
}
.activity h6{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:500;
}
.activity .row{
  display:grid;grid-template-columns:60px 1fr auto;gap:14px;align-items:center;
  padding:9px 0;border-top:1px dashed var(--line);
  font-size:13px;
}
.activity .row:first-of-type{border-top:none}
.activity .row .t{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.04em}
.activity .row .what{color:var(--text)}
.activity .row .what small{color:var(--muted);font-size:12px;margin-left:6px}
.activity .row .tag{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 7px;border-radius:3px;
  background:var(--surface-2);color:var(--muted);
}
.activity .row .tag.good{color:var(--good);background:rgba(74,222,128,.1)}
.activity .row .tag.warm{color:var(--warm);background:rgba(255,180,84,.1)}
.activity .row .tag.acc{color:var(--accent);background:var(--accent-soft)}

/* Chart sparkline placeholder */
.chart{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:10px;
}
.chart .head{display:flex;justify-content:space-between;align-items:baseline}
.chart .head .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.chart .head .v{font-family:var(--display);font-size:18px;font-weight:600}
.chart .head .v small{font-family:var(--mono);font-size:10px;color:var(--good);margin-left:6px;font-weight:400}
.chart svg{width:100%;height:60px;display:block}
.chart .axis{font-family:var(--mono);font-size:9px;color:var(--dim);display:flex;justify-content:space-between}

/* Prompt input mock */
.prompt-box{
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;
}
.prompt-box .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.prompt-box .txt{
  font-family:var(--mono);font-size:13px;color:var(--text);
  padding:6px 0;
}
.prompt-box .txt .cursor{
  display:inline-block;width:7px;height:13px;
  background:var(--accent);vertical-align:-2px;margin-left:1px;
  animation:blink 1s infinite;
}
@keyframes blink{50%{opacity:0}}

/* Fork tree (text) */
.tree-mock{
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:18px 20px;font-family:var(--mono);font-size:13px;
  line-height:1.9;color:var(--muted);
  overflow-x:auto;
}
.tree-mock .b{color:var(--accent)}
.tree-mock .me{color:var(--text)}
.tree-mock .me::before{content:"▸ ";color:var(--warm)}
.tree-mock .v{color:var(--good)}
.tree-mock .new{color:var(--muted)}
.tree-mock .badge{
  display:inline-block;font-size:10px;padding:1px 6px;
  border-radius:3px;margin-left:6px;letter-spacing:.05em;
}
.tree-mock .badge.v{background:rgba(74,222,128,.12);color:var(--good)}
.tree-mock .badge.b{background:var(--accent-soft);color:var(--accent)}
.tree-mock .badge.n{background:var(--surface-2);color:var(--muted)}

/* ─────────── Fork graph (git-inspired) ─────────── */
.fork-graph{
  background:
    radial-gradient(ellipse 50% 80% at 10% 50%,rgba(94,230,255,.04),transparent 60%),
    var(--bg-2);
  border:1px solid var(--line);border-radius:10px;
  padding:18px;
  overflow-x:auto;
  position:relative;
}
.fork-canvas{
  position:relative;
  width:820px;height:360px;
  min-width:820px;
}
.fork-canvas svg.edges{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  overflow:visible;
}
.fork-canvas svg.edges path{
  fill:none;stroke-width:1.5;
}
.fork-canvas svg.edges path.trunk{stroke:var(--line-strong)}
.fork-canvas svg.edges path.lane-a{stroke:#5EE6FF;opacity:.7}
.fork-canvas svg.edges path.lane-b{stroke:#FFB454;opacity:.7}
.fork-canvas svg.edges path.lane-c{stroke:#4ADE80;opacity:.55}

.fnode{
  position:absolute;
  width:188px;
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:8px;
  padding:10px 12px 10px 16px;
  display:flex;flex-direction:column;gap:4px;
  cursor:pointer;
  transition:transform .15s,border-color .15s,box-shadow .15s;
  z-index:1;
}
.fnode:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.fnode .dot{
  position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%;
  background:var(--bg);border:2px solid var(--line-strong);
}
.fnode .top{display:flex;align-items:center;gap:8px}
.fnode .name{
  font-family:var(--mono);font-size:12px;color:var(--text);
  letter-spacing:.02em;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;
}
.fnode .name b{color:var(--accent);font-weight:500}
.fnode .hash{
  font-family:var(--mono);font-size:10px;color:var(--dim);
  letter-spacing:.04em;flex-shrink:0;
}
.fnode .meta{
  display:flex;gap:8px;align-items:center;
  font-family:var(--mono);font-size:10px;color:var(--muted);
  letter-spacing:.04em;
}
.fnode .meta .badge{
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;border-radius:3px;
  background:var(--surface-2);color:var(--muted);
}
.fnode .meta .badge.up{background:rgba(255,255,255,.06);color:var(--muted)}
.fnode .meta .badge.b{background:var(--accent-soft);color:var(--accent)}
.fnode .meta .badge.v{background:rgba(74,222,128,.12);color:var(--good)}
.fnode .meta .badge.new{background:var(--surface-2);color:var(--muted)}
.fnode .meta .badge.you{background:var(--warm-soft);color:var(--warm)}
.fnode .meta .stat{display:inline-flex;align-items:center;gap:3px}
.fnode .meta .stat b{color:var(--text);font-weight:500}

/* Lane colours on the dot */
.fnode.upstream .dot{background:var(--text);border-color:var(--text)}
.fnode.base .dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(94,230,255,.5)}
.fnode.lane-a .dot{background:#5EE6FF;border-color:#5EE6FF}
.fnode.lane-b .dot{background:#FFB454;border-color:#FFB454}
.fnode.lane-c .dot{background:#4ADE80;border-color:#4ADE80}
.fnode.leaf-a .dot{background:var(--bg);border-color:#5EE6FF}
.fnode.leaf-b .dot{background:var(--bg);border-color:#5EE6FF}
.fnode.you .dot{
  background:var(--warm);border-color:var(--warm);
  box-shadow:0 0 14px rgba(255,180,84,.7);
}
.fnode.you{
  border-color:rgba(255,180,84,.5);
  background:linear-gradient(135deg,rgba(255,180,84,.06),var(--bg));
  box-shadow:0 0 0 1px rgba(255,180,84,.2);
}
.fnode.you::after{
  content:"HEAD";
  position:absolute;top:-9px;right:10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  background:var(--warm);color:#1A0F00;
  padding:2px 6px;border-radius:3px;font-weight:600;
}

/* Generation labels along the top */
.fork-gen{
  position:absolute;top:-4px;
  font-family:var(--mono);font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim);
  padding-bottom:8px;
}
.fork-gen::after{
  content:"";display:block;
  margin-top:6px;width:30px;height:1px;background:var(--line);
}

/* Market grid */
.market-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.mkt-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:14px;display:flex;flex-direction:column;gap:8px;
  transition:border-color .15s;cursor:pointer;
}
.mkt-card:hover{border-color:var(--line-strong)}
.mkt-card .top{display:flex;justify-content:space-between;align-items:start;gap:8px}
.mkt-card .name{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.mkt-card .gr{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 6px;border-radius:3px;flex-shrink:0;
}
.mkt-card .gr.v{background:rgba(74,222,128,.12);color:var(--good)}
.mkt-card .gr.b{background:var(--accent-soft);color:var(--accent)}
.mkt-card .gr.n{background:var(--surface-2);color:var(--muted)}
.mkt-card .by{font-family:var(--mono);font-size:11px;color:var(--muted)}
.mkt-card .stats{
  display:flex;gap:14px;font-family:var(--mono);font-size:10px;
  color:var(--dim);letter-spacing:.04em;
  border-top:1px dashed var(--line);padding-top:8px;margin-top:auto;
}
.mkt-card .stats b{color:var(--text);font-weight:500;margin-right:3px}

.search-bar{
  display:flex;gap:8px;align-items:center;
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;
}
.search-bar input{
  flex:1;background:none;border:none;color:var(--text);
  font-family:var(--body);font-size:13px;outline:none;
}
.search-bar input::placeholder{color:var(--dim)}
.search-bar .chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;background:var(--surface-2);color:var(--muted);
  border-radius:3px;cursor:pointer;
}
.search-bar .chip.active{background:var(--accent-soft);color:var(--accent)}

/* Backbone row picker (train) */
.picker-row{
  display:grid;grid-template-columns:90px 1fr auto;gap:12px;align-items:center;
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:11px 14px;
}
.picker-row .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.picker-row .v{font-family:var(--display);font-size:14px;font-weight:500;color:var(--text)}
.picker-row .v small{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;font-weight:400}
.picker-row .caret{font-family:var(--mono);font-size:12px;color:var(--dim)}

/* Backbone selectable list (train panel) */
.bb-pick{
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:8px;display:flex;flex-direction:column;gap:6px;
}
.bb-pick .head{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 8px 6px;
}
.bb-pick .head .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bb-pick .head .hint{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.04em}
.bb-opt{
  display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:center;
  padding:11px 12px;border:1px solid transparent;border-radius:6px;
  cursor:pointer;transition:all .15s;
}
.bb-opt:hover{background:var(--surface)}
.bb-opt.sel{background:var(--accent-soft);border-color:rgba(94,230,255,.3)}
.bb-opt .radio{
  width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
}
.bb-opt.sel .radio{border-color:var(--accent)}
.bb-opt.sel .radio::after{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}
.bb-opt .name{font-family:var(--display);font-size:14px;font-weight:500;letter-spacing:-.01em}
.bb-opt .name small{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;font-weight:400;letter-spacing:.03em}
.bb-opt .desc{font-size:12px;color:var(--muted);margin-top:3px}
.bb-opt .tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bb-opt .pill{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:3px;
  background:var(--surface-2);color:var(--muted);
}
.bb-opt .pill.rec{background:var(--warm-soft);color:var(--warm);border:1px solid rgba(255,180,84,.3)}
.bb-opt .pill.queued{background:var(--surface-2);color:var(--dim)}
.bb-opt .pill.live{background:rgba(74,222,128,.12);color:var(--good)}

/* Episode strip (collect) */
.ep-strip{
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;display:flex;flex-direction:column;gap:8px;
}
.ep-strip .head{display:flex;justify-content:space-between;align-items:center}
.ep-strip .head .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ep-strip .head .v{font-family:var(--mono);font-size:11px;color:var(--accent)}
.ep-strip .bars{display:flex;gap:4px;align-items:flex-end;height:32px}
.ep-strip .bars i{
  flex:1;background:var(--surface-2);border-radius:2px;
}
.ep-strip .bars i.done{background:var(--accent);opacity:.7}
.ep-strip .bars i.cur{background:var(--warm);box-shadow:0 0 8px rgba(255,180,84,.4)}

.app-foot span{padding:3px 8px;border-radius:3px;background:var(--bg-2);border:1px solid var(--line)}

/* ─────────── Backbones ─────────── */
.bb-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.bb-list{display:flex;flex-direction:column;gap:0}
.bb-row{
  display:flex;align-items:center;gap:20px;
  padding:24px 4px;border-top:1px solid var(--line);
  cursor:pointer;transition:padding .2s;
}
.bb-row:last-child{border-bottom:1px solid var(--line)}
.bb-row:hover{padding-left:14px}
.bb-row .num{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.1em;min-width:30px}
.bb-row .meta{flex:1}
.bb-row .name{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.01em}
.bb-row .name small{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--muted);margin-left:10px;letter-spacing:.05em}
.bb-row .desc{font-size:13px;color:var(--muted);margin-top:6px}
.bb-row .status{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:4px}
.bb-row .status.live{background:rgba(74,222,128,.12);color:var(--good)}
.bb-row .status.soon{background:rgba(255,180,84,.12);color:var(--warm)}
.bb-row .status.later{background:var(--surface-2);color:var(--dim)}
.bb-row .status.yours{background:var(--accent-soft);color:var(--accent)}
.bb-row .status.rec{background:var(--warm-soft);color:var(--warm);border:1px solid rgba(255,180,84,.3)}
.bb-row .status-stack{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.bb-card{
  border:1px solid var(--line-strong);border-radius:12px;padding:32px;
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
}
.bb-card .e{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.bb-card h3{font-family:var(--display);font-size:28px;font-weight:600;margin-bottom:16px;line-height:1.2}
.bb-card p{font-size:15px;color:var(--muted);margin-bottom:24px}
.bb-card .yaml{
  font-family:var(--mono);font-size:12px;line-height:1.7;
  background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:18px;color:var(--muted);
  overflow:auto;
}
.bb-card .yaml .key{color:var(--accent)}
.bb-card .yaml .str{color:var(--warm)}
.bb-card .yaml .com{color:var(--dim)}

/* ─────────── Cloud/local flow ─────────── */
.flow{border:1px solid var(--line);border-radius:14px;padding:48px;background:linear-gradient(180deg,rgba(94,230,255,.02),transparent 50%)}
.flow-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:24px;align-items:center}
.flow-node{background:var(--bg-2);border:1px solid var(--line-strong);border-radius:10px;padding:24px;text-align:center;position:relative}
.flow-node.cloud{border-color:rgba(94,230,255,.3);background:linear-gradient(180deg,rgba(94,230,255,.04),var(--bg-2))}
.flow-node.local{border-color:rgba(255,180,84,.3);background:linear-gradient(180deg,rgba(255,180,84,.04),var(--bg-2))}
.flow-node .tag{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.flow-node.cloud .tag{color:var(--accent)}
.flow-node.local .tag{color:var(--warm)}
.flow-node h4{font-family:var(--display);font-size:18px;font-weight:600;margin-bottom:8px}
.flow-node p{font-size:13px;color:var(--muted);margin-bottom:12px}
.flow-node .specs{
  display:flex;flex-direction:column;gap:4px;
  font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  color:var(--dim);text-transform:uppercase;
  border-top:1px dashed var(--line);padding-top:10px;
}
.flow-arr{font-family:var(--mono);font-size:11px;color:var(--accent);display:flex;flex-direction:column;align-items:center;gap:4px}
.flow-arr svg{width:32px;height:12px}
.flow-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.flow-foot .item .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.flow-foot .item .v{font-family:var(--display);font-size:22px;font-weight:600}
.flow-foot .item .v small{font-family:var(--body);font-size:13px;color:var(--muted);font-weight:400;margin-left:8px}

/* ─────────── Hardware ─────────── */
.hw{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.hw-text h2{margin-bottom:20px}
.hw-text p{color:var(--muted);font-size:16px}
.hw-table{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hw-row{
  display:grid;grid-template-columns:48px 1fr 100px;gap:20px;align-items:center;
  padding:20px 24px;border-top:1px solid var(--line);background:var(--bg-2);
}
.hw-row:first-child{border-top:none;background:var(--surface)}
.hw-row .idx{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim)}
.hw-row .name{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em}
.hw-row .name small{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;font-weight:400;letter-spacing:.04em}
.hw-row .desc{font-size:13px;color:var(--muted);margin-top:4px}
.hw-row .stat{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:4px;text-align:center;
}
.hw-row .stat.now{background:rgba(74,222,128,.12);color:var(--good)}
.hw-row .stat.next{background:rgba(255,180,84,.12);color:var(--warm)}
.hw-row .stat.q{background:var(--surface-2);color:var(--dim)}
.hw-row.add{background:linear-gradient(90deg,rgba(94,230,255,.05),transparent);border-top:1px dashed var(--line-strong)}
.hw-row.add .name{color:var(--accent)}

/* ─────────── Flywheel ─────────── */
.flywheel{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.fw{
  border:1px solid var(--line);border-radius:12px;
  padding:24px;background:var(--bg-2);
  display:flex;flex-direction:column;gap:14px;
}
.fw .n{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--accent)}
.fw h3{font-family:var(--display);font-size:18px;font-weight:600;line-height:1.3}
.fw p{font-size:13px;color:var(--muted);line-height:1.55}

/* ─────────── Roadmap ─────────── */
.roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.phase{
  padding:32px 28px;background:var(--bg-2);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px;
}
.phase:last-child{border-right:none}
.phase.now{background:linear-gradient(180deg,rgba(74,222,128,.06),var(--bg-2))}
.phase .ph{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--muted)}
.phase.now .ph{color:var(--good)}
.phase h3{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.01em}
.phase .when{font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:4px}
.phase ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:8px}
.phase ul li{font-size:13px;color:var(--muted);padding-left:16px;position:relative}
.phase ul li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:1px;background:var(--dim)}
.phase .trig{
  margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
}
.phase .trig b{color:var(--text);font-weight:500}

/* Detailed roadmap (roadmap page) */
.rm-detail{display:flex;flex-direction:column;gap:24px}
.rm-block{
  border:1px solid var(--line);border-radius:14px;
  background:var(--bg-2);overflow:hidden;
  display:grid;grid-template-columns:280px 1fr;
}
.rm-block.now{border-color:rgba(74,222,128,.3)}
.rm-side{
  padding:32px;border-right:1px solid var(--line);
  background:linear-gradient(135deg,rgba(94,230,255,.03),transparent);
  display:flex;flex-direction:column;gap:12px;
}
.rm-block.now .rm-side{background:linear-gradient(135deg,rgba(74,222,128,.08),transparent)}
.rm-side .ph{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--accent)}
.rm-block.now .rm-side .ph{color:var(--good)}
.rm-side h3{font-family:var(--display);font-size:32px;font-weight:600;letter-spacing:-.01em}
.rm-side .when{font-family:var(--mono);font-size:12px;color:var(--muted)}
.rm-side .trig{
  margin-top:auto;padding-top:16px;border-top:1px dashed var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted);
}
.rm-side .trig b{display:block;color:var(--text);font-size:13px;margin-top:4px}
.rm-body{padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:32px}
.rm-col h5{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px;
}
.rm-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.rm-col li{font-size:14px;color:var(--text);padding-left:20px;position:relative}
.rm-col li::before{
  content:"→";position:absolute;left:0;color:var(--accent);font-family:var(--mono);font-size:14px;
}
.rm-col li small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* ─────────── CTA ─────────── */
.cta{
  border:1px solid var(--line);border-radius:16px;padding:64px 48px;
  background:
    radial-gradient(ellipse 60% 60% at 100% 0%,rgba(94,230,255,.08),transparent 60%),
    radial-gradient(ellipse 40% 40% at 0% 100%,rgba(255,180,84,.06),transparent 60%),
    var(--bg-2);
  display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;
}
.cta h2{margin-bottom:16px}
.cta p{color:var(--muted);font-size:16px;margin-bottom:0}
.cta-form{display:flex;flex-direction:column;gap:12px}
.cta-form .row{display:flex;gap:8px}
.cta-form input{
  flex:1;padding:14px 16px;
  background:var(--bg);border:1px solid var(--line-strong);
  border-radius:6px;color:var(--text);
  font-family:var(--body);font-size:14px;outline:none;
}
.cta-form input:focus{border-color:var(--accent)}
.cta-form .hint{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.05em}

/* ─────────── Footer ─────────── */
.footer{border-top:1px solid var(--line);padding:48px 0 32px;margin-top:120px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:48px}
.foot-brand .b{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.04em}
.foot-brand .b .dot{color:var(--accent)}
.foot-brand p{margin-top:14px;color:var(--muted);font-size:13px;max-width:30ch;line-height:1.6}
.foot-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot-col a{display:block;font-size:14px;color:var(--text);padding:6px 0;transition:color .2s}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--dim);
}

/* ─────────── Responsive ─────────── */
@media (max-width:1024px){
  .hero-bottom,.page-hero-inner{grid-template-columns:1fr;gap:32px}
  .showcase,.bb-wrap,.hw,.cta,.rm-block{grid-template-columns:1fr;gap:32px}
  .rm-side{border-right:none;border-bottom:1px solid var(--line)}
  .steps,.flywheel,.roadmap{grid-template-columns:repeat(2,1fr)}
  .phase{border-right:none;border-bottom:1px solid var(--line)}
  .phase:nth-child(odd){border-right:1px solid var(--line)}
  .flow-grid{grid-template-columns:1fr;text-align:center}
  .flow-arr{transform:rotate(90deg);justify-self:center}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .tile-grid{grid-template-columns:repeat(2,1fr)}
  .market-grid{grid-template-columns:repeat(2,1fr)}
  .app-mock.wide .app-body{grid-template-columns:170px 1fr}
}
@media (max-width:640px){
  .container{padding:0 20px}
  .nav-links{display:none}
  .steps,.flywheel,.roadmap{grid-template-columns:1fr}
  .phase{border-right:none}
  .rm-body{grid-template-columns:1fr;gap:20px}
  .hero{padding:48px 0 64px}
  .section{padding:80px 0}
  .timer .unit{min-width:48px}
  .timer .num{font-size:28px}
  .cta{padding:40px 24px}
  .foot-grid{grid-template-columns:1fr}
  .tile-grid,.market-grid{grid-template-columns:1fr}
  .app-body,.app-mock.wide .app-body{grid-template-columns:1fr;min-height:auto}
  .app-side{display:flex;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--line);padding:8px}
  .app-side .group{width:100%;padding:6px 10px 4px}
  .app-side .item{padding:6px 10px;font-size:11px}
  .app-side .item.active{border-left:none;border-bottom:2px solid var(--accent);padding-left:10px}
  .cam-grid,.app-row{grid-template-columns:1fr}
}