:root{
  /* — HERO WARM GRADIENT (clay/sienna/gold sunset) — */
  --navy:        #3A2517;       /* warm brown (lightened from near-black) */
  --navy-2:      #4A3324;       /* lighter brown */
  --cobalt:      #B95B36;       /* clay primary (token name kept) */
  --cobalt-soft: #D27A52;       /* clay light */
  --cyan:        #D7B470;       /* gold light (token name kept) */
  --teal-glow:   #C49849;       /* gold */

  /* — WARM AURORA PALETTE (cream paper, clay/gold accents) — */
  --paper:       #F2E9D8;       /* warm cream body bg */
  --paper-2:     #EADFC8;       /* deeper cream tint, header/pill bg */
  --paper-3:     #FAF4E6;       /* warm white card bg */
  --ink:         #191512;       /* deep warm ink */
  --ink-2:       #3C342D;       /* mid warm ink */
  --ink-3:       #6E6155;       /* warm gray */
  --ink-4:       #968779;       /* light warm gray */
  --line:        rgba(25,21,18,.10);
  --line-2:      rgba(25,21,18,.05);
  --aurora-glow: rgba(196,152,73,.18);   /* gold aurora hint */
  --aurora-cobalt: rgba(185,91,54,.12);  /* clay aurora hint */

  --trading:     #C44D3D;       /* trading red/coral */
  --trading-bg:  #F4D9D2;
  --hobby:       #8B5FBF;       /* muted purple */
  --hobby-bg:    #E2D5EE;
  --general:     #A87C5A;       /* warm tan */
  --general-bg:  #ECDFCD;
  --sage:        #5DA362;       /* live/in-progress green */
  --sage-bg:     #DCE3CC;
  --amber:       #D88A3C;       /* awaiting orange */
  --amber-bg:    #F2DCC0;
  --gold:        #E0A33A;       /* token amber */
  --idle:        #7A7367;

  --blue:        #B95B36;       /* primary CTA = clay (token name kept) */
  --blue-soft:   #D27A52;       /* clay light hover */

  /* — DARK PRODUCT PALETTE (warm tobacco/umber to match cream paper) — */
  --dk-bg:       #3D2D1F;
  --dk-bg-2:     #4A3724;
  --dk-surface:  #5A452F;
  --dk-border:   #6E5440;
  --dk-fg:       #E8DCC4;
  --dk-fg-2:     #A89A82;
  --dk-fg-3:     #6E6155;

  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --serif: 'Fraunces', Georgia, serif;
  --serif-it: 'Instrument Serif', Georgia, serif;
  --sans:  'Inter Tight', system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0; overflow-x:hidden}
html{scroll-behavior:smooth; background:var(--paper)}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"calt","ss02","cv02";
}
a{color:inherit; text-decoration:none}
::selection{background:var(--blue); color:#fff}

.wrap{max-width:1280px; margin:0 auto; padding:0 28px; position:relative; z-index:1}
.it{font-family:var(--serif-it); font-style:italic; font-weight:400; letter-spacing:-.005em}

@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes blink{50%{opacity:0}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ================================================================
   HERO — CLAY/SIENNA/GOLD SUNSET GRADIENT
   ================================================================ */
.hero-shell{
  position:relative;
  min-height:100vh;
  background:
    radial-gradient(900px 700px at 100% 70%, rgba(196,152,73,.55), transparent 55%),
    radial-gradient(1100px 800px at 90% 100%, rgba(185,91,54,.7), transparent 55%),
    radial-gradient(800px 600px at 0% 30%, rgba(215,180,112,.18), transparent 60%),
    linear-gradient(135deg, #3A2517 0%, #4A3322 35%, #5A4030 75%, #6E5040 100%);
  overflow:hidden;
  isolation:isolate;
  color:#fff;
}
.hero-shell::before{
  /* very subtle grid */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
}
.hero-shell::after{
  /* grain */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.4;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
}

/* status ticker */
.statusbar{
  background:rgba(0,0,0,.3);
  border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--mono); font-size:11px;
  color:rgba(255,255,255,.4); letter-spacing:.05em;
  overflow:hidden; height:30px;
  display:flex; align-items:center;
  position:relative; z-index:5;
  backdrop-filter:blur(10px);
}
.statusbar .scroll{
  display:flex; gap:48px; white-space:nowrap;
  animation: ticker 60s linear infinite;
  padding-left:100%;
}
.statusbar .scroll span b{color:#5DA362; font-weight:500}
.statusbar .scroll span em{color:#D7B470; font-style:normal}
.statusbar .scroll span i{color:#E0A33A; font-style:normal}

/* nav */
nav.top{position:relative; z-index:10; padding:18px 0}
nav.top .row{display:flex; align-items:center; gap:32px}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-weight:500;
  font-size:15px; letter-spacing:.04em;
  color:#fff;
}
.brand .sigil{
  width:34px; height:34px;
  filter:drop-shadow(0 0 14px rgba(196,152,73,.6));
}
.brand b{font-weight:600}
.brand .ver{
  color:rgba(255,255,255,.55); font-size:11px;
  padding:2px 7px; border:1px solid rgba(255,255,255,.2);
  border-radius:2px; margin-left:4px;
}
.navlinks{display:flex; gap:6px; margin-left:auto}
.navlinks a{
  padding:8px 14px;
  font-family:var(--sans); font-size:14px;
  color:rgba(255,255,255,.75);
  border-radius:999px;
  transition:color .15s, background .15s;
}
.navlinks a:hover{color:#fff; background:rgba(255,255,255,.08)}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px;
  font-family:var(--sans); font-size:14.5px; font-weight:600;
  letter-spacing:0;
  border-radius:999px;
  cursor:pointer;
  transition:transform .18s, box-shadow .25s, background .25s, border-color .25s, color .2s;
  white-space:nowrap;
  border:1px solid transparent;
}
.btn-white{
  background:#fff; color:var(--navy);
  box-shadow: 0 12px 36px -10px rgba(255,255,255,.4);
}
.btn-white:hover{transform:translateY(-1px); box-shadow: 0 16px 44px -10px rgba(255,255,255,.6); background:#EADFC8}
.btn-outline-w{
  background:transparent; color:#fff;
  border-color:rgba(255,255,255,.4);
}
.btn-outline-w:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7)}
.btn-blue{background:var(--blue); color:#fff; box-shadow:0 12px 36px -10px rgba(185,91,54,.5)}
.btn-blue:hover{transform:translateY(-1px); background:#8B3D1F; box-shadow:0 16px 44px -10px rgba(185,91,54,.7)}
.btn-ink{background:var(--ink); color:#fff; box-shadow:0 12px 36px -10px rgba(25,21,18,.4)}
.btn-ink:hover{transform:translateY(-1px); background:#2A1F18}
.btn-ghost{
  background:transparent; color:var(--ink);
  border-color:rgba(25,21,18,.18);
}
.btn-ghost:hover{background:rgba(25,21,18,.04); border-color:rgba(25,21,18,.4)}

/* HERO BODY */
.hero-body{
  position:relative; z-index:6;
  padding:40px 0 70px;
}
.hero-grid{
  display:grid; grid-template-columns: minmax(320px, 0.62fr) 1.55fr; gap:36px;
  align-items:center;
  min-height:calc(100vh - 200px);
}

.hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
  padding:7px 14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
  border-radius:999px;
  backdrop-filter:blur(8px);
  margin-bottom:32px;
}
.hero-tag .dot{width:7px;height:7px;border-radius:50%;background:#5DA362;
  box-shadow:0 0 10px rgba(93,163,98,1);
  animation:pulse 2s ease-in-out infinite;
}
.hero-tag b{color:#5DA362; font-weight:500}

.hero h1{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 30, "wght" 400;
  font-weight:400;
  font-size:clamp(48px, 6.4vw, 96px);
  line-height:0.97;
  letter-spacing:-0.038em;
  margin:0 0 30px;
  color:#fff;
}
.hero h1 .it{
  font-family:var(--serif-it); font-style:italic; font-weight:400;
  background:linear-gradient(135deg, #D7B470 0%, #C49849 60%, #fff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.005em;
}

.hero p.lede{
  font-family:var(--sans); font-weight:400;
  font-size:18px; line-height:1.55;
  color:rgba(255,255,255,.78);
  max-width:530px;
  margin:0 0 38px;
}
.hero p.lede b{color:#fff; font-weight:600}

.hero .ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px}

.hero-meta{
  display:flex; gap:24px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px;
  color:rgba(255,255,255,.5);
  letter-spacing:.04em;
}
.hero-meta span{display:flex; align-items:center; gap:8px}
.hero-meta .pip{width:6px;height:6px;border-radius:50%;background:#5DA362; flex-shrink:0; box-shadow:0 0 6px rgba(93,163,98,.7)}

/* ================================================================
   DASHBOARD VISUAL — TILTED SCREENSHOT IN ROUNDED CARD
   ================================================================ */
.dash-stage{
  position:relative;
  perspective: 2400px;
  perspective-origin: 50% 50%;
  padding:30px 10px;
  margin-right:-32px;
}
.dash-stage::before{
  content:""; position:absolute; inset:-50px;
  background:
    radial-gradient(closest-side, rgba(196,152,73,.35), transparent 70%);
  filter:blur(50px);
  z-index:0;
  opacity:.9;
  pointer-events:none;
}
.dash-tilt{
  position:relative; z-index:1;
  transform-style:preserve-3d;
  cursor:pointer;
}

/* the rounded screenshot card — Upcloud-style */
.shot-card{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:#F2E9D8;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1) inset,
    0 70px 140px -50px rgba(0,0,0,.7),
    0 30px 60px -20px rgba(185,91,54,.3);
  transform-style:preserve-3d;
}
.shot-card img{
  display:block;
  width:100%; height:auto;
  /* a hair of saturation boost for vibrancy */
  filter: saturate(1.08) contrast(1.02);
}

/* Floating stat card (like Upcloud's "ARR $458,000") */
.stat-card{
  position:absolute;
  bottom:-30px; left:-40px;
  background:#fff;
  border-radius:18px;
  padding:18px 22px;
  width:240px;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.5),
    0 12px 24px -10px rgba(185,91,54,.3);
  z-index:3;
  transform: translateZ(60px);
  font-family:var(--sans);
  animation: float 5s ease-in-out infinite;
}
.stat-card .lbl{
  font-family:var(--mono); font-size:10px;
  color:var(--blue); letter-spacing:.16em; text-transform:uppercase;
  font-weight:600;
  margin-bottom:4px;
}
.stat-card .big{
  font-family:var(--serif); font-weight:600;
  font-size:32px; letter-spacing:-.02em; line-height:1;
  color:var(--ink);
}
.stat-card .big sup{font-size:18px; color:var(--blue); top:-.6em; margin-right:1px}
.stat-card .delta{
  font-family:var(--mono); font-size:11px;
  color:var(--sage); margin-top:4px;
  display:flex; align-items:center; gap:5px;
}
.stat-card .chart{
  position:relative;
  margin-top:10px; height:30px;
}
.stat-card .chart svg{display:block; width:100%; height:100%}
.stat-card .chart svg path.line{stroke:var(--blue); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.stat-card .chart svg path.area{fill:url(#statgrad); opacity:.4}
.stat-card .cursor-arrow{
  position:absolute; right:-20px; top:8px;
  width:28px; height:28px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
}

/* Floating circular icon badges */
.float-badge{
  position:absolute;
  width:64px; height:64px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:
    0 20px 40px -15px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.08);
  z-index:4;
  transform: translateZ(80px);
  animation: float 6s ease-in-out infinite;
}
.float-badge svg{width:28px; height:28px; color:#fff}
.fb-1{background:#191512; right:-30px; top:25%;}
.fb-2{background:#B95B36; right:-50px; top:48%; animation-delay:-2s; width:62px; height:62px}
.fb-3{background:#D7B470; right:-25px; top:70%; animation-delay:-4s; width:58px; height:58px}

/* hover hint */
.hover-hint{
  position:absolute; bottom:-46px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
  display:flex; align-items:center; gap:8px;
  pointer-events:none;
  transition:opacity .3s;
  z-index:1;
}
.hover-hint::before, .hover-hint::after{
  content:""; width:24px; height:1px; background:rgba(255,255,255,.3);
}
.dash-stage:hover .hover-hint{opacity:0}

/* scroll cue */
.scroll-cue{
  position:absolute; bottom:200px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
  z-index:8;
}
.scroll-cue .bar{
  width:1px; height:36px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.4));
  position:relative; overflow:hidden;
}
.scroll-cue .bar::after{
  content:""; position:absolute; left:0; right:0; top:0;
  height:14px; background:#fff;
  animation: cueDrop 2.3s ease-in-out infinite;
}
@keyframes cueDrop{
  0%{transform:translateY(-14px); opacity:0}
  30%{opacity:1}
  100%{transform:translateY(36px); opacity:0}
}

/* ================================================================
   SECTION-BRIDGE — two-stage transitions through a pale near-white blue.
   Each transition uses a BOTTOM bridge on the outgoing section
   (transparent → pale blue) and a TOP bridge on the incoming section
   (pale blue → next section's color). The two bridges meet at the
   shared pale-blue intermediate, hiding the boundary entirely.
   ================================================================ */
.section-bridge{
  position:absolute;
  left:0; right:0;
  height:220px;
  pointer-events:none;
  z-index:3;
}
.section-bridge.btm{bottom:0}
.section-bridge.top{top:0}

/* ---- OUTGOING (BOTTOM) BRIDGES — always end at pale blue ---- */
/* Bottom of a navy/dark section, fading down to pale blue */
.section-bridge.btm.from-dark{
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(229,219,194,.12) 22%,
    rgba(229,219,194,.42) 48%,
    rgba(229,219,194,.82) 72%,
    #E5DBC2 100%);
}
/* Bottom of a cream/paper section, fading down to pale blue */
.section-bridge.btm.from-paper{
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(229,219,194,.30) 30%,
    rgba(229,219,194,.65) 55%,
    rgba(229,219,194,.92) 82%,
    #E5DBC2 100%);
}

/* ---- INCOMING (TOP) BRIDGES — always start at pale blue ---- */
/* Top of a cream section: pale blue at top fading into cream */
.section-bridge.top.into-paper{
  background: linear-gradient(to bottom,
    #E5DBC2 0%,
    rgba(229,219,194,.85) 18%,
    rgba(234,223,200,.55) 42%,
    rgba(242,233,216,.20) 65%,
    transparent 85%);
}
/* Top of a dark navy section: pale blue at top → mid blues → dark navy */
.section-bridge.top.into-dark{
  background: linear-gradient(to bottom,
    #E5DBC2 0%,
    rgba(220,200,170,.92) 15%,
    rgba(150,135,115,.85) 30%,
    rgba(80,65,50,.7) 48%,
    rgba(40,30,20,.45) 68%,
    transparent 90%);
}
/* Top of a deep blue section: pale blue at top → mid blues → deep blue */
.section-bridge.top.into-blue{
  background: linear-gradient(to bottom,
    #E5DBC2 0%,
    rgba(225,205,170,.92) 15%,
    rgba(150,90,60,.85) 30%,
    rgba(170,80,40,.65) 48%,
    rgba(50,30,15,.4) 68%,
    transparent 90%);
}

/* ================================================================
   LIGHT — WHAT IT DOES + FEATURES (Minuttia-style scatter)
   ================================================================ */
.light{
  background:
    radial-gradient(900px 600px at 100% 0%, var(--aurora-glow), transparent 60%),
    radial-gradient(800px 500px at 0% 100%, var(--aurora-cobalt), transparent 55%),
    var(--paper);
  color:var(--ink);
  position:relative;
  overflow:hidden;
}
.light::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(25,21,18,.05) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity:.6;
}

/* "what it does" strip */
.what-pad{padding:90px 0 50px; position:relative; z-index:1}
.what-head{
  text-align:center;
  position:relative; z-index:5;
  margin-bottom:60px;
}
.what-head .badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
  padding:6px 14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  margin-bottom:24px;
}
.what-head .badge::before{
  content:""; width:7px;height:7px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 8px rgba(185,91,54,.5);
}
.what-head h2{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 30, "wght" 600;
  font-weight:600;
  font-size:clamp(40px, 6vw, 84px);
  line-height:0.98;
  letter-spacing:-0.035em;
  margin:0 0 22px;
  color:var(--ink);
}
.what-head h2 .it{
  font-family:var(--serif-it); font-style:italic; font-weight:400;
  color:var(--cobalt);
  letter-spacing:-.01em;
}
.what-head p{
  font-family:var(--sans); font-size:18px; line-height:1.5;
  color:var(--ink-2);
  max-width:600px; margin:0 auto 32px;
}
.what-head .ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* Two-column problem/answer */
.what-pa{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin-top:40px;
}
.pa-card{
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:16px;
  padding:36px 32px;
  position:relative;
}
.pa-card.b{
  background:linear-gradient(160deg, #fff 0%, var(--paper-2) 100%);
  border-color:rgba(185,91,54,.22);
}
.pa-card .lbl{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
  padding:5px 12px; background:var(--paper); border:1px solid var(--line); border-radius:999px;
  margin-bottom:20px;
}
.pa-card.b .lbl{color:var(--cobalt); border-color:rgba(185,91,54,.28); background:#fff}
.pa-card h3{
  font-family:var(--serif); font-weight:600;
  font-size:26px; line-height:1.18; letter-spacing:-.022em;
  margin:0 0 14px;
}
.pa-card h3 .it{font-family:var(--serif-it); font-style:italic; font-weight:400; color:var(--cobalt)}
.pa-card p{
  font-family:var(--sans); font-size:15.5px; line-height:1.6;
  color:var(--ink-2); margin:0 0 12px;
}
.pa-card p code{
  font-family:var(--mono); font-size:13px; color:var(--cobalt);
  background:rgba(185,91,54,.08); padding:1px 6px; border-radius:3px;
}

/* === SCATTER (FEATURES, Minuttia-style) === */
.scatter-pad{padding:40px 0 80px}
.scatter-head{margin-bottom:50px}
.scatter-head .badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
  padding:6px 14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  margin-bottom:18px;
}
.scatter-head .badge::before{
  content:""; width:7px;height:7px;border-radius:50%;background:var(--hobby);
}
.scatter-head h2{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 30, "wght" 600;
  font-weight:600;
  font-size:clamp(36px, 5vw, 64px);
  line-height:1.02;
  letter-spacing:-0.03em;
  margin:0;
  color:var(--ink);
  max-width:780px;
}
.scatter-head h2 .it{
  font-family:var(--serif-it); font-style:italic; font-weight:400;
  color:var(--hobby);
}

.scatter{
  position:relative;
  margin-top:40px;
  height:1100px;
  z-index:5;
}
@media (max-width:1100px){
  .scatter{height:auto; display:flex; flex-direction:column; gap:30px; align-items:center}
}

.scatter-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}
.scatter-svg path{
  stroke:rgba(25,21,18,.18);
  stroke-width:1.4;
  stroke-dasharray:5 7;
  fill:none;
  stroke-linecap:round;
  stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.4s ease-out;
}
.scatter.in .scatter-svg path{stroke-dashoffset:0}

.sc{
  position:absolute;
  z-index:3;
  transition:
    transform 1.2s cubic-bezier(.2,.8,.2,1),
    opacity .8s ease;
  opacity:0;
}
@media (max-width:1100px){
  .sc{position:relative; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important}
}

.scatter:not(.in) .sc{
  opacity:0;
  transform: translate(var(--sx, 0), var(--sy, 40px)) rotate(var(--sr, 0deg));
}
.scatter.in .sc{
  opacity:1;
  transform: rotate(var(--fr, 0deg));
}

.sc-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:
    0 30px 60px -30px rgba(20,20,30,.18),
    0 12px 24px -10px rgba(20,20,30,.08);
  padding:18px;
  width:280px;
}

/* tile board mock — uses ACTUAL CR palette */
.mock-tiles h5{
  margin:0 0 12px; font-family:var(--mono); font-weight:600;
  font-size:10px; color:var(--ink-3); letter-spacing:.18em; text-transform:uppercase;
}
.mock-tiles .row{display:flex; gap:8px; margin-bottom:8px}
.mock-tiles .mt{
  flex:1; padding:9px 11px;
  border-radius:6px; font-family:var(--sans); font-size:11px;
  font-weight:500;
  background:var(--paper);
  border:1px solid var(--line);
  border-left:3px solid var(--general);
  display:flex; flex-direction:column; gap:4px;
  min-height:40px;
}
.mock-tiles .mt .dom{font-family:var(--mono); font-size:8.5px; color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase}
.mock-tiles .mt .nm{color:var(--ink); font-size:11px; line-height:1.2}
.mock-tiles .mt.trading{border-left-color:var(--trading)}
.mock-tiles .mt.hobby{border-left-color:var(--hobby)}
.mock-tiles .mt.general{border-left-color:var(--general)}
.mock-tiles .mt.dashed{background:#fff; border-style:dashed; opacity:.5}

/* terminal mock */
.mock-term{
  background:var(--dk-bg);
  border:1px solid var(--dk-border);
  border-radius:14px; padding:0; overflow:hidden;
  width:340px;
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,.4),
    0 12px 24px -10px rgba(0,0,0,.2);
}
.mock-term .h{
  display:flex; align-items:center; gap:6px; padding:10px 14px;
  background:rgba(0,0,0,.3);
  border-bottom:1px solid var(--dk-border);
  font-family:var(--mono); font-size:10px; color:var(--dk-fg-3);
  letter-spacing:.1em;
}
.mock-term .h i{display:block; width:8px; height:8px; border-radius:50%}
.mock-term .h i:nth-child(1){background:#E07A5F}
.mock-term .h i:nth-child(2){background:#F2CC8F}
.mock-term .h i:nth-child(3){background:#7FB069}
.mock-term .h span{margin-left:8px}
.mock-term .body{padding:14px 16px; font-family:var(--mono); font-size:11px; line-height:1.7; color:var(--dk-fg)}
.mock-term .body .a{color:var(--gold)}
.mock-term .body .g{color:var(--sage)}
.mock-term .body .d{color:var(--dk-fg-3)}
.mock-term .body .r{color:var(--amber)}
.cursor{display:inline-block;width:6px;height:13px;background:var(--gold);vertical-align:-2px;animation:blink 1s step-end infinite;margin-left:2px}

/* schedule card */
.mock-sched{width:240px}
.mock-sched h5{
  margin:0 0 14px; font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:8px;
}
.mock-sched h5 svg{width:14px; height:14px; color:var(--amber)}
.mock-sched .row{
  display:flex; align-items:center; gap:10px;
  padding:9px 0;
  border-top:1px dashed var(--line);
  font-family:var(--mono); font-size:11px;
}
.mock-sched .row:first-of-type{border-top:none}
.mock-sched .row .t{color:var(--amber); font-weight:600; flex-shrink:0; min-width:54px}
.mock-sched .row .l{color:var(--ink-2); font-size:11px; font-family:var(--sans); font-weight:500}
.mock-sched .row .when{
  margin-left:auto; font-size:9.5px; color:var(--ink-3);
  letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; background:var(--paper-2); border-radius:3px;
  font-weight:500;
}

/* metric / cost card */
.mock-cost{width:200px}
.mock-cost .lbl{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:10px;
}
.mock-cost .big{
  font-family:var(--serif); font-weight:600;
  font-size:34px; line-height:1; letter-spacing:-.02em;
  color:var(--ink); margin-bottom:2px;
}
.mock-cost .big sup{font-size:18px; color:var(--blue); top:-0.6em}
.mock-cost .delta{
  font-family:var(--mono); font-size:11px; color:var(--sage);
  display:flex; align-items:center; gap:4px; font-weight:500;
}
.mock-cost .bars{
  display:flex; gap:3px; align-items:flex-end;
  margin-top:14px; height:34px;
}
.mock-cost .bars i{
  display:block; flex:1;
  background:linear-gradient(180deg, var(--blue), var(--cobalt-soft));
  border-radius:1px;
  opacity:.85;
}

/* phone mock */
.mock-phone{
  width:170px;
  background:var(--dk-bg);
  border-radius:24px;
  padding:9px;
  border:1px solid var(--dk-border);
  box-shadow:
    0 40px 70px -30px rgba(0,0,0,.4),
    0 14px 30px -10px rgba(0,0,0,.2);
}
.mock-phone .screen{
  background:var(--dk-bg-2);
  border-radius:16px;
  padding:14px 12px;
  font-family:var(--mono);
  position:relative;
  height:300px;
  overflow:hidden;
}
.mock-phone .screen::before{
  content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:42px; height:5px; background:#000; border-radius:3px;
}
.mock-phone .top{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; margin-bottom:14px;
  font-size:8.5px; color:var(--dk-fg-3); letter-spacing:.1em;
}
.mock-phone .top em{color:var(--sage); font-style:normal; display:flex; align-items:center; gap:4px; font-weight:500}
.mock-phone .top em::before{content:""; width:5px;height:5px;border-radius:50%; background:var(--sage); box-shadow:0 0 4px rgba(93,163,98,.7)}
.mock-phone .ptile{
  background:rgba(255,255,255,.04);
  border-left:2px solid var(--trading);
  border-radius:3px;
  padding:7px 9px;
  font-size:9.5px;
  margin-bottom:5px;
  color:var(--dk-fg);
  font-family:var(--sans);
  font-weight:500;
}
.mock-phone .ptile.s{border-left-color:var(--sage)}
.mock-phone .ptile.a{border-left-color:var(--amber)}
.mock-phone .ptile.h{border-left-color:var(--hobby)}
.mock-phone .ptile small{display:block; font-size:7.5px; color:var(--dk-fg-3); margin-top:2px; letter-spacing:.06em; font-family:var(--mono); font-weight:400}

/* memory doc */
.mock-doc{width:240px}
.mock-doc h5{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 12px;
  display:flex; align-items:center; gap:8px;
}
.mock-doc h5 svg{width:14px; height:14px; color:var(--general)}
.mock-doc .ln{
  display:flex; gap:8px; padding:5px 0;
  font-family:var(--mono); font-size:11px;
  color:var(--ink-2); line-height:1.5;
}
.mock-doc .ln .h{color:var(--trading); font-weight:600}
.mock-doc .ln .b{color:var(--ink); font-weight:500}

/* git branch */
.mock-git{width:240px; font-family:var(--mono)}
.mock-git .ttl{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.mock-git .ttl svg{color:var(--hobby); width:14px; height:14px}
.mock-git .ln{
  display:flex; align-items:center; gap:10px;
  padding:6px 0;
  font-size:11px;
}
.mock-git .ln .gr{
  flex-shrink:0; width:14px; height:14px; position:relative;
}
.mock-git .ln .gr::before{
  content:""; position:absolute; left:6px; top:-12px; bottom:-12px; width:2px;
  background:rgba(25,21,18,.15);
}
.mock-git .ln:first-child .gr::before{top:6px}
.mock-git .ln:last-child .gr::before{bottom:auto; height:8px}
.mock-git .ln .gr i{
  position:absolute; left:2px; top:2px;
  width:10px; height:10px; border-radius:50%;
  background:#fff; border:2px solid var(--ink);
}
.mock-git .ln.t .gr i{background:var(--trading); border-color:#9D3E32}
.mock-git .ln.a .gr i{background:var(--amber); border-color:#B26F2D}
.mock-git .ln.s .gr i{background:var(--sage); border-color:#4A8350}
.mock-git .ln span{color:var(--ink-2); font-family:var(--sans); font-weight:500}
.mock-git .ln em{margin-left:auto; font-style:normal; font-size:9px; padding:2px 6px; border-radius:3px; letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.mock-git .ln.t em{background:var(--trading-bg); color:var(--trading)}
.mock-git .ln.a em{background:var(--amber-bg); color:var(--amber)}
.mock-git .ln.s em{background:var(--sage-bg); color:var(--sage)}
.mock-git .ln em.done{background:var(--paper); color:var(--ink-3)}

/* multi-window */
.mock-stack{width:300px; height:200px; position:relative}
.mock-stack .w{
  position:absolute;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow: 0 14px 28px -10px rgba(20,20,30,.15);
  padding:0;
  overflow:hidden;
}
.mock-stack .w .h{
  display:flex; gap:4px; padding:6px 10px;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.mock-stack .w .h i{display:block; width:6px;height:6px;border-radius:50%; background:var(--ink-3)}
.mock-stack .w .h i:first-child{background:var(--trading)}
.mock-stack .w .h i:nth-child(2){background:var(--amber)}
.mock-stack .w .h i:nth-child(3){background:var(--sage)}
.mock-stack .w .b{padding:10px 12px; font-family:var(--mono); font-size:9px; color:var(--ink-3); line-height:1.7}
.mock-stack .w.w1{left:0; top:30px; width:170px; height:130px; transform:rotate(-3deg)}
.mock-stack .w.w2{left:90px; top:0; width:200px; height:160px; transform:rotate(2deg)}
.mock-stack .w.w3{left:60px; top:60px; width:230px; height:140px; transform:rotate(-1.5deg); z-index:2}

/* feature label tags — using actual CR palette */
.sc-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px;
  border-radius:999px;
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:0;
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink-2);
  box-shadow: 0 4px 10px -4px rgba(20,20,30,.1);
}
.sc-tag.live{background:var(--sage-bg); border-color:transparent; color:var(--sage)}
.sc-tag.live::before{content:""; width:8px;height:8px;border-radius:50%; background:var(--sage); box-shadow:0 0 8px rgba(93,163,98,.6)}
.sc-tag.amber{background:var(--amber-bg); border-color:transparent; color:#A05E1F}
.sc-tag.trading{background:var(--trading-bg); border-color:transparent; color:var(--trading)}
.sc-tag.hobby{background:var(--hobby-bg); border-color:transparent; color:#5E3D8C}
.sc-tag.general{background:var(--general-bg); border-color:transparent; color:#7A5638}
.sc-tag.blue{background:var(--blue); border-color:transparent; color:#fff}
.sc-tag.blue::before{content:""; width:8px;height:8px;border-radius:50%; background:#fff}
.sc-tag svg{width:14px;height:14px}

/* numbered chips */
.chip{
  width:38px; height:38px; border-radius:50%;
  background:var(--ink); color:#fff;
  font-family:var(--mono); font-weight:600; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px -4px rgba(20,20,30,.3);
}
.chip.amber{background:var(--amber); color:#fff}
.chip.trading{background:var(--trading); color:#fff}
.chip.sage{background:var(--sage); color:#fff}
.chip.hobby{background:var(--hobby); color:#fff}
.chip.blue{background:var(--blue); color:#fff}

/* ================================================================
   DARK SECTION — vs the field (DIFF MATRIX)
   ================================================================ */
.dark-band{
  background:var(--dk-bg);
  color:var(--dk-fg);
  position:relative;
  overflow:hidden;
}
.dark-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(110,97,85,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,97,85,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
}
.dark-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 500px at 90% 10%, rgba(185,91,54,.18), transparent 60%),
    radial-gradient(700px 400px at 10% 100%, rgba(196,152,73,.10), transparent 60%);
}

.section-pad{padding:90px 0 80px; position:relative; z-index:1}
.s-head{
  margin-bottom:60px;
  display:grid; grid-template-columns: 80px 1fr auto; gap:32px; align-items:end;
  border-bottom:1px solid var(--dk-border); padding-bottom:24px;
}
.s-head .ref{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; color:var(--cyan);
  border:1px solid rgba(196,152,73,.3); border-radius:2px;
  padding:8px 0; text-align:center;
  background:rgba(196,152,73,.05);
}
.s-head h2{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 30, "wght" 500;
  font-weight:500;
  font-size:clamp(36px, 5vw, 64px); line-height:1.02;
  letter-spacing:-.03em; margin:0; color:var(--dk-fg);
}
.s-head h2 .it{font-family:var(--serif-it); font-style:italic; font-weight:400; color:var(--cyan)}
.s-head .meta{
  font-family:var(--mono); font-size:11px; color:var(--dk-fg-3);
  letter-spacing:.04em; text-align:right; white-space:nowrap;
}
.s-head .meta b{color:var(--dk-fg-2); display:block}

.cmp{
  background:var(--dk-surface);
  border:1px solid var(--dk-border);
  border-radius:8px;
  overflow:hidden;
  position:relative;
}
.cmp::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(800px 400px at 90% 10%, rgba(185,91,54,.12), transparent 60%);
}
.cmp-h{
  padding:28px 32px;
  border-bottom:1px solid var(--dk-border);
  background:rgba(0,0,0,.2);
}
.cmp-h .ref{font-family:var(--mono); font-size:10px; color:var(--cyan); letter-spacing:.18em}
.cmp-h h3{
  font-family:var(--serif); font-weight:500;
  font-size:26px; line-height:1.15; letter-spacing:-.02em;
  margin:8px 0 0; color:var(--dk-fg);
}
.cmp-h h3 .it{font-family:var(--serif-it); font-style:italic; font-weight:400; color:var(--cyan)}
.cmp-table{padding:0 32px 24px; position:relative}
.cmp-row{
  display:grid; grid-template-columns: 200px 1fr 1fr 1fr 90px;
  padding:18px 0;
  border-top:1px solid var(--dk-border);
  align-items:center;
  font-size:13px;
}
.cmp-row.head{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dk-fg-3);
  border-top:none; padding:18px 0 12px;
}
.cmp-row .name{
  font-family:var(--mono); font-size:14px;
  color:var(--dk-fg); font-weight:500;
  display:flex; align-items:center; gap:10px;
}
.cmp-row .name .glyph{width:18px;height:18px; opacity:.6}
.cmp-cell{padding-right:14px; color:var(--dk-fg-2); font-size:13px; font-family:var(--sans)}
.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-family:var(--mono);
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.pill-warn{background:rgba(196,77,61,.15); color:#E08070; border:1px solid rgba(196,77,61,.3)}
.pill-good{background:rgba(93,163,98,.18); color:#8DC992; border:1px solid rgba(93,163,98,.3)}
.pill-mute{background:rgba(255,255,255,.06); color:var(--dk-fg-2); border:1px solid var(--dk-border)}
.cmp-row.us{
  background:linear-gradient(90deg, rgba(185,91,54,.12), transparent);
  border-top:1px solid rgba(185,91,54,.4);
}
.cmp-row.us .name{color:var(--cyan); font-weight:600}
.cmp-row.us .name .glyph{opacity:1; color:var(--cyan)}
.cmp-row.us .cmp-cell{color:var(--dk-fg)}

/* ================================================================
   LIGHT — ARCHITECTURE + INSTALL
   ================================================================ */
.light-pad{
  padding:200px 0 120px;
  background:
    radial-gradient(900px 500px at 0% 0%, var(--aurora-glow), transparent 55%),
    radial-gradient(800px 600px at 100% 100%, var(--aurora-cobalt), transparent 55%),
    var(--paper);
  position:relative; z-index:1; overflow:hidden;
}
.light-pad::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(25,21,18,.05) 1px, transparent 1px);
  background-size: 4px 4px; opacity:.5;
}
.l-head{
  margin-bottom:50px;
  display:grid; grid-template-columns: 80px 1fr auto; gap:32px; align-items:end;
  border-bottom:1px solid var(--line); padding-bottom:24px;
  position:relative;
}
.l-head .ref{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; color:var(--blue);
  border:1px solid rgba(185,91,54,.25); border-radius:2px;
  padding:8px 0; text-align:center;
  background:rgba(185,91,54,.04);
}
.l-head h2{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 30, "wght" 600;
  font-weight:600;
  font-size:clamp(34px, 4.6vw, 56px); line-height:1.02;
  letter-spacing:-.03em; margin:0; color:var(--ink);
}
.l-head h2 .it{font-family:var(--serif-it); font-style:italic; font-weight:400; color:var(--blue)}
.l-head .meta{
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  letter-spacing:.04em; text-align:right; white-space:nowrap;
}
.l-head .meta b{color:var(--ink-2); display:block}

.arch{
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:12px;
  padding:42px 38px;
  position:relative;
}
.arch .ttl{
  font-family:var(--mono); font-size:10px; color:var(--blue);
  letter-spacing:.18em; margin-bottom:6px;
}
.arch h3{
  font-family:var(--serif); font-weight:500;
  font-size:24px; letter-spacing:-.02em; line-height:1.2;
  margin:0 0 28px; color:var(--ink);
}
.arch h3 .it{font-family:var(--serif-it); font-style:italic; font-weight:400; color:var(--cobalt)}
.arch .ascii{
  font-family:var(--mono); font-size:12px;
  line-height:1.4;
  color:var(--ink-2);
  white-space:pre; overflow-x:auto;
  padding:18px 22px; background:var(--ink); border-radius:6px;
  border:1px solid var(--ink);
}
.arch .ascii{color:#9BA8C2}
.arch .ascii .c{color:#D7B470}
.arch .ascii .a{color:#E0A33A}
.arch .ascii .g{color:#7FB069}
.arch .ascii .r{color:#D27A52}
.arch .ascii .d{color:#6E6155}

.qs-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:60px}
.qs{
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.qs .h{
  padding:18px 24px;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
}
.qs .h .who{
  font-family:var(--mono); font-size:10px; color:var(--blue);
  letter-spacing:.18em; text-transform:uppercase; font-weight:600;
}
.qs .h .platform{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.qs .body{padding:24px; flex:1; display:flex; flex-direction:column}
.qs h3{
  font-family:var(--serif); font-weight:600;
  font-size:18px; margin:0 0 14px; color:var(--ink);
  letter-spacing:-.01em;
}
.qs pre{
  background:var(--ink);
  border-radius:6px;
  padding:18px;
  font-family:var(--mono); font-size:12.5px; line-height:1.7;
  color:#C4B49C;
  overflow-x:auto;
  margin:0 0 18px;
}
.qs pre .cm{color:#6E6155}
.qs pre .pr{color:#D7B470}
.qs pre .kw{color:#E0A33A}
.qs pre .st{color:#7FB069}
.qs pre .nm{color:#D27A52}
.qs .foot{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap}

/* ================================================================
   CTA — BIG BLUE ECHO
   ================================================================ */
.cta-band{
  background:
    radial-gradient(900px 700px at 100% 70%, rgba(196,152,73,.55), transparent 55%),
    radial-gradient(1100px 800px at 90% 100%, rgba(185,91,54,.7), transparent 55%),
    linear-gradient(135deg, #3A2517 0%, #4A3322 50%, #6E5040 100%);
  position:relative;
  overflow:hidden;
  color:#fff;
}
.cta-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
}
.cta-pad{padding:90px 0 80px; position:relative; z-index:1}
.cta{
  display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center;
}
.cta .lhs h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(38px, 5vw, 64px); line-height:1.02; letter-spacing:-.03em;
  margin:0 0 22px; color:#fff;
}
.cta .lhs h2 .it{
  font-family:var(--serif-it); font-style:italic; font-weight:400;
  background:linear-gradient(135deg, #D7B470 0%, #fff 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.cta .lhs h2 .clay{color:#E07A5F}
.cta .lhs p{font-size:16.5px; color:rgba(255,255,255,.78); margin:0 0 16px; max-width:540px}
.cta .lhs .ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}

.cta-stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border:1px solid rgba(255,255,255,.15); border-radius:12px;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(10px);
  overflow:hidden;
}
.cta-stat{
  padding:28px;
  border-right:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.cta-stat:nth-child(2n){border-right:none}
.cta-stat:nth-last-child(-n+2){border-bottom:none}
.cta-stat b{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:38px; letter-spacing:-.025em; color:#fff; line-height:1;
}
.cta-stat span{
  display:block; margin-top:10px;
  font-family:var(--mono); font-size:10.5px; color:rgba(255,255,255,.55);
  letter-spacing:.18em; text-transform:uppercase;
}
.cta-stat.cyan b{color:var(--cyan)}
.cta-stat.warm b{color:#E0A33A}
.cta-stat.sage b{color:#9DD58A}

/* footer */
footer{
  background:var(--dk-bg);
  color:var(--dk-fg);
  border-top:1px solid var(--dk-border);
  padding:60px 0 32px;
  position:relative;
}
footer .fbrand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-weight:500;
  font-size:15px; color:var(--dk-fg);
}
footer .fbrand .sigil{width:34px;height:34px}
footer .fbrand .ver{
  color:var(--dk-fg-3); font-size:11px;
  padding:2px 7px; border:1px solid var(--dk-border); border-radius:2px;
}
footer .grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px;
  margin-bottom:40px;
}
footer h5{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dk-fg-3);
  margin:0 0 16px;
}
footer ul{list-style:none;padding:0;margin:0}
footer ul li{margin-bottom:10px; font-size:13px; font-family:var(--mono)}
footer ul li a{color:var(--dk-fg-2); transition:color .15s}
footer ul li a:hover{color:var(--cyan)}
footer .legal{
  border-top:1px dashed var(--dk-border);
  padding-top:20px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px;
  color:var(--dk-fg-3); letter-spacing:.06em;
}

/* responsive */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr; gap:40px; min-height:auto}
  .dash-stage{transform:scale(.92); transform-origin:center top}
  .stat-card{left:-10px}
  .float-badge{display:none}
  .what-pa{grid-template-columns:1fr; gap:18px}
  .qs-grid{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr; padding:36px 30px}
  footer .grid{grid-template-columns:1fr 1fr; gap:28px}
  .navlinks{display:none}
  .s-head, .l-head{grid-template-columns: 60px 1fr; gap:18px}
  .s-head .meta, .l-head .meta{display:none}
  .scroll-cue{display:none}
}
@media (max-width:680px){
  .wrap{padding:0 20px}
  .dash-stage{transform:scale(.78)}
  .stat-card{left:50%; transform:translateX(-50%) translateZ(60px); width:90%; max-width:280px}
  .cmp-row{grid-template-columns:1fr; gap:6px; padding:16px 0}
  .cmp-row.head{display:none}
  .cmp-cell{padding:0}
  .cmp-cell::before{
    content:attr(data-l) "  ";
    font-size:9.5px; color:var(--dk-fg-3); letter-spacing:.16em; text-transform:uppercase;
  }
  .cmp-table{padding:0 20px 20px}
  .section-pad, .light-pad, .cta-pad{padding:64px 0}
  .arch{padding:28px 22px}
  .arch .ascii{font-size:10px}
  .what-pad{padding:80px 0 30px}
  .scatter-pad{padding:30px 0 80px}
  .scatter{margin-top:30px}
  .what-head h2{font-size:42px}
  .scatter-head h2{font-size:32px}
  .hero h1{font-size:48px}
  .cta .lhs h2{font-size:36px}
  .pa-card{padding:28px 24px}
  .pa-card h3{font-size:21px}
  .hero .ctas{flex-direction:column; align-items:stretch}
  .hero .ctas .btn{justify-content:center}
}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}


/* ================================================================
   HERO DASHBOARD CHOREOGRAPHY — cursor browses → clicks → modal opens
   one 7s loop, synced with the phone (.ph-row.fresh slides in)
   ================================================================ */
.dash-fx{
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:24px;
  overflow:hidden;
  z-index:3;
}

/* highlight ring around the targeted dashboard tile */
.tile-glow{
  position:absolute;
  left:6.8%; top:13.6%;
  width:10.4%; height:9.2%;
  border-radius:6px;
  border:2px solid #B95B36;
  box-shadow:0 0 24px rgba(185,91,54,.55), inset 0 0 18px rgba(185,91,54,.18);
  opacity:0;
  animation: cr-tile-glow 7s ease-in-out infinite;
}

/* click pulse (concentric ring at click point) */
.click-ring{
  position:absolute;
  left:12%; top:18.2%;
  width:32px; height:32px;
  margin-left:-16px; margin-top:-16px;
  border-radius:50%;
  border:2px solid #B95B36;
  background:radial-gradient(circle at center, rgba(185,91,54,.25), transparent 70%);
  opacity:0;
  animation: cr-click-ring 7s ease-in-out infinite;
}

/* the animated cursor */
.cursor-anim{
  position:absolute;
  width:26px; height:26px;
  left:68%; top:72%;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));
  opacity:0;
  z-index:4;
  overflow:visible;
  animation: cr-cursor 7s ease-in-out infinite;
}
.cursor-anim svg{
  display:block;
  width:26px !important;
  height:26px !important;
}

/* opened project modal that fades in over the dashboard */
.opened-modal{
  position:absolute;
  left:24%; top:30%;
  width:54%; min-height:36%;
  background:rgba(250,244,230,.96);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(185,91,54,.25);
  border-radius:10px;
  padding:12px 16px 16px;
  box-shadow:0 30px 60px rgba(25,21,18,.32), 0 0 0 1px rgba(255,255,255,.4) inset;
  opacity:0;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--ink);
  z-index:3;
  animation: cr-modal 7s ease-in-out infinite;
}
.opened-modal .om-h{
  display:flex; align-items:center; gap:8px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
  font-size:10.5px;
}
.opened-modal .om-dom{
  font-family:var(--mono); font-size:8.5px;
  letter-spacing:.18em; text-transform:uppercase;
  padding:2px 6px; border-radius:3px;
  background:var(--general-bg); color:var(--general);
}
.opened-modal .om-nm{font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink)}
.opened-modal .om-st{
  margin-left:auto;
  font-style:normal;
  font-size:9.5px; letter-spacing:.04em;
  color:var(--sage);
  display:flex; align-items:center; gap:4px;
}
.opened-modal .om-st i{
  width:5px; height:5px; border-radius:50%;
  background:var(--sage); box-shadow:0 0 4px rgba(93,163,98,.7);
  animation:pulse 1.4s ease-in-out infinite;
}
.opened-modal .om-x{
  color:var(--ink-3); font-size:14px;
  cursor:default; padding:0 4px;
}
.opened-modal .om-body{display:flex; flex-direction:column; gap:4px}
.opened-modal .om-ln{
  display:flex; align-items:baseline; gap:8px;
  font-size:10.5px; line-height:1.5;
}
.opened-modal .om-ln .d{color:var(--ink-4); font-size:9.5px; min-width:54px}
.opened-modal .om-ln .a{color:var(--cobalt)}
.opened-modal .om-ln .g{color:var(--sage)}
.opened-modal .om-ln .r{color:var(--trading)}
.opened-modal .om-ln .caret{
  display:inline-block; width:6px; height:11px;
  background:var(--cobalt);
  vertical-align:-1px;
  animation: blink 1s steps(1) infinite;
}

/* fresh row that slides in on the phone when the cursor opens the project */
.ph-row.fresh{
  background:rgba(185,91,54,.10);
  overflow:hidden;
  opacity:0;
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  border-bottom:1px solid rgba(255,255,255,.04);
  animation: cr-fresh 7s ease-in-out infinite;
}

/* ── single coordinated 7s timeline ── */
@keyframes cr-cursor{
  0%   { opacity:0; left:68%; top:72%; transform:scale(1) }
  6%   { opacity:1; left:68%; top:72%; transform:scale(1) }
  /* travel diagonally to the Mission Control tile */
  28%  { opacity:1; left:12%; top:18.2%; transform:scale(1) }
  /* click squish */
  31%  { opacity:1; left:12%; top:18.2%; transform:scale(.82) }
  34%  { opacity:1; left:12%; top:18.2%; transform:scale(1) }
  /* hold while modal is visible */
  82%  { opacity:1; left:12%; top:18.2%; transform:scale(1) }
  /* drift off */
  92%  { opacity:0; left:12%; top:18.2%; transform:scale(1) }
  100% { opacity:0; left:12%; top:18.2%; transform:scale(1) }
}
@keyframes cr-tile-glow{
  0%, 26%  { opacity:0 }
  30%      { opacity:1 }
  80%      { opacity:1 }
  88%      { opacity:0 }
  100%     { opacity:0 }
}
@keyframes cr-click-ring{
  0%, 28%  { opacity:0; transform:scale(.5) }
  30%      { opacity:.9; transform:scale(1) }
  38%      { opacity:0; transform:scale(2.6) }
  100%     { opacity:0; transform:scale(2.6) }
}
@keyframes cr-modal{
  0%, 34%  { opacity:0; transform:translateY(10px) scale(.97) }
  42%      { opacity:1; transform:translateY(0) scale(1) }
  82%      { opacity:1; transform:translateY(0) scale(1) }
  90%      { opacity:0; transform:translateY(-4px) scale(.98) }
  100%     { opacity:0; transform:translateY(-4px) scale(.98) }
}
@keyframes cr-fresh{
  0%, 34%  { opacity:0; max-height:0; padding-top:0; padding-bottom:0 }
  42%      { opacity:1; max-height:54px; padding-top:8px; padding-bottom:8px }
  82%      { opacity:1; max-height:54px; padding-top:8px; padding-bottom:8px }
  90%      { opacity:0; max-height:0; padding-top:0; padding-bottom:0 }
  100%     { opacity:0; max-height:0; padding-top:0; padding-bottom:0 }
}

/* accessibility: kill the loop for visitors who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .cursor-anim, .click-ring, .tile-glow, .opened-modal, .ph-row.fresh{
    animation:none !important;
  }
  .opened-modal{opacity:1}
  .tile-glow{opacity:.7}
  .cursor-anim{opacity:1}
  .ph-row.fresh{opacity:1; max-height:none; padding-top:8px; padding-bottom:8px}
}


/* ================================================================
   HERO — sigil watermark + inline cli + tag separators
   ================================================================ */
.hero-sigil-bg{
  position:absolute;
  right:-120px; top:50%;
  transform:translateY(-50%) rotate(-8deg);
  width:780px; height:780px;
  pointer-events:none;
  opacity:.045;
  z-index:2;
  color:#F2E9D8;
  mix-blend-mode:screen;
}

/* Claydo mascot — static smile, sitting next to the brand mark */
.brand-claydo{
  width:38px; height:auto;
  display:block;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
  margin-right:4px;
}
@media (max-width: 900px){
  .brand-claydo{ width:32px; }
}
.hero-sigil-bg use{ fill:currentColor; stroke:currentColor; }
.hero-tag .sep{opacity:.4; margin:0 2px}
.hero-cli{
  font-family:var(--mono);
  font-style:normal;
  font-weight:500;
  font-size:.78em;
  letter-spacing:.01em;
  padding:.06em .35em .12em;
  border:1px solid rgba(255,255,255,.22);
  border-radius:6px;
  background:rgba(255,255,255,.06);
  color:#F2E9D8;
  vertical-align:.06em;
}

/* ================================================================
   DUAL-SURFACE HERO — phone + tunnel-arc layered over dashboard
   ================================================================ */
.tunnel-arc{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:3;
  overflow:visible;
}
.tunnel-arc .arc-lbl{
  font-family:var(--mono); font-size:9.5px;
  fill:#F2E9D8; opacity:.7;
  letter-spacing:.14em;
}

.hero-phone{
  position:absolute;
  right:-26px; top:-44px;
  z-index:4;
  transform:rotate(5deg);
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.45));
  animation:float 7s ease-in-out infinite;
}
.hero-phone .phone-frame{ width:220px }
.hero-phone .phone-screen{ min-height:340px }

/* shared phone styling */
.phone-frame{
  background:#0e0a07;
  border-radius:32px;
  padding:8px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 30px 60px rgba(0,0,0,.4);
  position:relative;
  width:200px;
}
.phone-frame.lg{ width:260px }
.phone-frame.lg .phone-screen{ min-height:420px; border-radius:24px }
.phone-notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:52px; height:6px; border-radius:4px;
  background:#000;
  z-index:2;
}
.phone-screen{
  background:linear-gradient(180deg, #1A1410 0%, #221A14 100%);
  border-radius:24px;
  padding:24px 10px 12px;
  min-height:360px;
  color:var(--dk-fg);
  font-family:var(--sans);
  font-size:10.5px;
  position:relative;
  overflow:hidden;
}
.ph-top{
  display:flex; align-items:center; gap:6px;
  padding:0 6px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:8px;
  font-family:var(--mono); font-size:10px;
  color:var(--dk-fg-2);
}
.ph-sigil{width:14px; height:14px; flex-shrink:0}
.ph-brand{font-family:var(--sans); font-size:11px; color:var(--dk-fg)}
.ph-brand b{font-weight:600}
.ph-tunnel{
  margin-left:auto;
  font-style:normal;
  display:flex; align-items:center; gap:4px;
  color:var(--sage); font-weight:500;
}
.ph-tunnel i{
  width:5px; height:5px; border-radius:50%;
  background:var(--sage);
  box-shadow:0 0 4px rgba(93,163,98,.7);
  animation:pulse 1.6s ease-in-out infinite;
}
.ph-top .back{
  font-size:14px; color:var(--dk-fg-2);
  margin-right:4px; cursor:default;
}

.ph-row{
  display:flex; align-items:center; gap:8px;
  padding:8px 6px;
  border-bottom:1px solid rgba(255,255,255,.04);
  position:relative;
}
.ph-row:last-child{border-bottom:0}
.ph-row.live{ background:rgba(93,163,98,.06) }
.ph-row.unread{ background:rgba(216,138,60,.07) }
.ph-row.scheduled{ background:rgba(255,255,255,.02) }
.av{
  width:30px; height:30px; flex-shrink:0;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:9px; font-weight:600;
  color:#fff;
  letter-spacing:.02em;
}
.av-trading{background:linear-gradient(135deg, #C44D3D, #8E2E1F)}
.av-general{background:linear-gradient(135deg, #A87C5A, #6A4A2E)}
.av-amber{background:linear-gradient(135deg, #D88A3C, #9D5A1B)}
.av-hobby{background:linear-gradient(135deg, #8B5FBF, #5C3C8E)}
.rc{flex:1; min-width:0}
.nm{
  display:flex; justify-content:space-between; align-items:baseline;
  font-weight:500;
  color:var(--dk-fg);
  font-size:11px;
}
.nm .t{font-family:var(--mono); font-size:9px; color:var(--dk-fg-3); font-weight:400}
.ms{
  display:flex; align-items:center; gap:4px;
  margin-top:2px;
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--dk-fg-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ms-dot{
  width:5px; height:5px; border-radius:50%;
  flex-shrink:0;
}
.ms-dot.live{background:var(--sage); box-shadow:0 0 4px rgba(93,163,98,.7); animation:pulse 1.6s ease-in-out infinite}
.ms-dot.sch{background:var(--amber); box-shadow:0 0 4px rgba(216,138,60,.7)}
.unread-dot{
  margin-left:auto;
  background:var(--trading);
  color:#fff;
  font-style:normal;
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:600;
  padding:2px 6px;
  border-radius:9px;
  line-height:1;
}

/* conversation drill-down (Phone B in pocket) */
.phone-screen.chat{
  padding-top:24px;
}
.bub{
  max-width:78%;
  padding:7px 10px;
  margin:5px 4px;
  border-radius:12px;
  font-size:10.5px;
  line-height:1.4;
  font-family:var(--mono);
}
.bub.them{
  background:rgba(255,255,255,.06);
  color:var(--dk-fg);
  border-bottom-left-radius:3px;
  margin-right:auto;
}
.bub.me{
  background:linear-gradient(135deg, var(--cobalt), var(--cobalt-soft));
  color:#fff;
  border-bottom-right-radius:3px;
  margin-left:auto;
  font-family:var(--sans);
  font-size:11px;
}
.ph-compose{
  position:absolute;
  bottom:8px; left:8px; right:8px;
  display:flex; align-items:center; gap:6px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.3);
  border-radius:14px;
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--dk-fg-3);
}
.compose-bar{flex:1}
.compose-img{
  padding:2px 6px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:5px;
  color:var(--dk-fg-2);
  letter-spacing:.04em;
}


/* ================================================================
   POCKET — mobile + tunnel section
   ================================================================ */
.pocket{
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(196,152,73,.18), transparent 55%),
    radial-gradient(800px 500px at 90% 90%, rgba(185,91,54,.14), transparent 55%),
    var(--paper);
  color:var(--ink);
  position:relative;
}
.pocket-pad{padding:80px 0 70px}
.pocket-head{
  display:grid;
  grid-template-columns: 60px 1fr;
  gap:24px 32px;
  margin-bottom:64px;
}
.pocket-head .ref{
  font-family:var(--mono); font-size:11px;
  color:var(--cobalt); letter-spacing:.2em;
  padding-top:18px;
}
.pocket-head .badge{
  grid-column:2;
  display:inline-block; width:max-content;
  font-family:var(--mono); font-size:11px;
  color:var(--cobalt); letter-spacing:.18em;
  padding:6px 12px;
  border:1px solid rgba(185,91,54,.3);
  background:rgba(185,91,54,.06);
  border-radius:99px;
  margin-bottom:14px;
}
.pocket-head h2{
  grid-column:2;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(38px, 5vw, 64px);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0 0 18px;
}
.pocket-head p{
  grid-column:2;
  max-width:680px;
  font-size:17px; line-height:1.55;
  color:var(--ink-2);
  margin:0 0 18px;
}
.pocket-head .meta{
  grid-column:2;
  font-family:var(--mono); font-size:10.5px;
  color:var(--ink-3); letter-spacing:.18em;
  display:flex; gap:14px;
}
.pocket-head .meta b{color:var(--cobalt); font-weight:500}

.pocket-stage{
  display:grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items:center;
  gap:30px;
  margin-bottom:90px;
}
.phone-card{
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.phone-card.pca{transform:rotate(-3deg)}
.phone-card.pcb{transform:rotate(4deg)}
.phone-label{
  font-family:var(--mono); font-size:10.5px;
  color:var(--cobalt); letter-spacing:.18em;
  padding:5px 12px;
  border:1px solid rgba(185,91,54,.25);
  border-radius:99px;
  background:#FAF4E6;
}
.phone-card .phone-frame{
  filter:drop-shadow(0 20px 40px rgba(25,21,18,.18));
}

.pocket-tunnel{
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  gap:14px;
  padding:0 12px;
}
.pocket-tunnel .pt-end{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--ink-2);
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.16em;
}
.pocket-tunnel .pt-end svg{width:36px; height:26px}
.pocket-tunnel .pt-wire{
  width:100%; height:60px;
  overflow:visible;
}
.pocket-tunnel .pt-lbl{
  font-family:var(--mono); font-size:9.5px;
  fill:var(--ink-2);
  letter-spacing:.18em;
}
.pocket-tunnel .pt-lbl.small{
  fill:var(--ink-3); font-size:8.5px; letter-spacing:.14em;
}

.pocket-strip{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:32px 0;
}
.ps-cell{
  padding:6px 24px;
  border-right:1px solid var(--line-2);
}
.ps-cell:last-child{border-right:0}
.ps-glyph{
  font-family:var(--mono); font-size:24px;
  color:var(--cobalt);
  margin-bottom:14px;
  line-height:1;
}
.ps-ttl{
  font-family:var(--serif); font-weight:500;
  font-size:19px; line-height:1.15;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.ps-sub{
  font-family:var(--mono); font-size:11.5px;
  line-height:1.6; color:var(--ink-3);
}


/* ================================================================
   HIVEMIND mock card (in feature scatter)
   ================================================================ */
.mock-hive{
  width:300px;
  background:linear-gradient(180deg, #FAF4E6 0%, #F2E9D8 100%);
  padding:14px 14px 16px;
}
.mock-hive h5{
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px;
  color:var(--ink-3); letter-spacing:.14em; text-transform:lowercase;
  margin:0 0 12px;
  font-weight:500;
}
.mock-hive h5 svg{width:14px; height:14px; color:var(--cobalt)}
.hv-root{margin-bottom:8px; display:flex; justify-content:center}
.hv-node{
  font-family:var(--mono); font-size:10.5px;
  padding:6px 10px;
  border:1px solid var(--line);
  background:#FAF4E6;
  border-radius:6px;
  color:var(--ink-2);
}
.hv-node.orch{
  background:linear-gradient(135deg, var(--cobalt), var(--cobalt-soft));
  color:#fff; border-color:transparent;
  font-weight:500;
  letter-spacing:.01em;
}
.hv-branch{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
  position:relative;
  padding-top:14px;
}
.hv-branch::before{
  content:""; position:absolute;
  top:0; left:50%; width:1px; height:14px;
  background:var(--ink-4);
}
.hv-branch::after{
  content:""; position:absolute;
  top:7px; left:16%; right:16%; height:1px;
  background:var(--ink-4);
}
.hv-node.w{
  display:flex; align-items:center; gap:5px;
  font-size:9.5px;
  padding:5px 7px;
  position:relative;
  z-index:1;
}
.hv-node.w em{color:var(--ink-3); font-style:normal; font-size:8.5px; margin-left:auto; letter-spacing:.06em}
.hv-dot{width:5px; height:5px; border-radius:50%; flex-shrink:0}
.hv-dot.live{background:var(--sage); box-shadow:0 0 4px rgba(93,163,98,.7); animation:pulse 1.4s ease-in-out infinite}
.hv-dot.wait{background:var(--amber)}


/* ================================================================
   ISOLATION ↔ COLLABORATION section
   ================================================================ */
.iso{
  background:
    radial-gradient(800px 500px at 50% 0%, rgba(196,152,73,.16), transparent 55%),
    var(--paper);
  color:var(--ink);
  position:relative;
}
.iso-pad{padding:90px 0 80px}
.iso-head{
  display:grid;
  grid-template-columns: 60px 1fr;
  gap:24px 32px;
  margin-bottom:80px;
}
.iso-head .ref{
  font-family:var(--mono); font-size:11px;
  color:var(--cobalt); letter-spacing:.2em;
  padding-top:18px;
}
.iso-head .badge{
  grid-column:2;
  display:inline-block; width:max-content;
  font-family:var(--mono); font-size:11px;
  color:var(--cobalt); letter-spacing:.18em;
  padding:6px 12px;
  border:1px solid rgba(185,91,54,.3);
  background:rgba(185,91,54,.06);
  border-radius:99px;
  margin-bottom:14px;
}
.iso-head h2{
  grid-column:2;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(38px, 5vw, 60px);
  line-height:1.04;
  letter-spacing:-.025em;
  margin:0 0 18px;
}
.iso-head p{
  grid-column:2;
  max-width:720px;
  font-size:16.5px; line-height:1.6;
  color:var(--ink-2);
  margin:0 0 18px;
}
.iso-head .meta{
  grid-column:2;
  font-family:var(--mono); font-size:10.5px;
  color:var(--ink-3); letter-spacing:.18em;
  display:flex; gap:14px;
}
.iso-head .meta b{color:var(--cobalt); font-weight:500}

.iso-stage{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:80px;
  align-items:start;
  padding:80px 0 100px;
  margin-bottom:60px;
}
.iso-proj{
  background:#FAF4E6;
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  position:relative; z-index:2;
  box-shadow:0 8px 24px rgba(25,21,18,.06);
}
.iso-proj.p1{transform:rotate(-2deg)}
.iso-proj.p3{transform:rotate(2deg)}
.iso-hd{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.iso-hd .dom{
  font-family:var(--mono); font-size:9px;
  letter-spacing:.18em; padding:3px 7px;
  border-radius:4px;
  text-transform:uppercase;
}
.dom-trading{background:var(--trading-bg); color:var(--trading)}
.dom-general{background:var(--general-bg); color:var(--general)}
.dom-hobby{background:var(--hobby-bg); color:var(--hobby)}
.iso-hd .nm{
  font-family:var(--mono); font-size:13px;
  color:var(--ink); font-weight:500;
  display:block;
}
.iso-ls{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
.iso-ls li{
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px;
  color:var(--ink-2);
}
.iso-ls .g{color:var(--cobalt); font-size:10px}
.iso-ls em{font-style:normal; color:var(--ink-3); margin-left:auto; font-size:10px; letter-spacing:.04em}

.iso-wires{
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  pointer-events:none;
  z-index:1;
  overflow:visible;
}
.iso-lbl{
  font-family:var(--mono); font-size:10px;
  fill:var(--cobalt); letter-spacing:.16em;
}

.iso-goal{
  position:absolute;
  top:48%; left:50%;
  transform:translate(-50%, -50%);
  background:linear-gradient(135deg, var(--cobalt), var(--cobalt-soft));
  color:#fff;
  border-radius:14px;
  padding:18px 22px 16px;
  max-width:480px; width:80%;
  z-index:3;
  box-shadow:0 20px 50px rgba(185,91,54,.35), 0 0 0 1px rgba(255,255,255,.1) inset;
}
.iso-goal .lbl{
  font-family:var(--mono); font-size:10px;
  color:rgba(255,255,255,.7); letter-spacing:.18em;
  margin-bottom:6px;
}
.iso-goal h4{
  font-family:var(--serif); font-weight:400;
  font-size:18px; line-height:1.3;
  margin:0 0 12px;
  font-style:italic;
}
.goal-row{
  display:flex; flex-wrap:wrap; gap:6px;
}
.g-pill{
  font-family:var(--mono); font-size:9.5px;
  padding:4px 8px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.1);
  border-radius:5px;
  color:#fff;
  letter-spacing:.02em;
}
.g-pill em{font-style:normal; color:rgba(255,255,255,.65); margin-left:4px}

.iso-rules{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  border-top:1px solid var(--line);
  padding-top:36px;
}
.ir{
  padding:0 22px 0 0;
  border-right:1px solid var(--line-2);
}
.ir:last-child{border-right:0; padding-right:0}
.ir-ttl{
  font-family:var(--mono); font-size:11.5px;
  color:var(--cobalt); letter-spacing:.04em;
  margin-bottom:10px;
  font-weight:500;
}
.ir p{
  margin:0;
  font-size:13px; line-height:1.55;
  color:var(--ink-2);
}
.ir p code{
  font-family:var(--mono); font-size:11px;
  padding:1px 4px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:3px;
}

/* ================================================================
   MOBILE — collapse new sections
   ================================================================ */
@media (max-width: 900px){
  .hero-phone{display:none}
  .tunnel-arc{display:none}
  .hero-sigil-bg{opacity:.025; width:520px; height:520px; right:-180px}

  .pocket-pad{padding:80px 0 70px}
  .pocket-head{grid-template-columns:1fr; gap:8px}
  .pocket-head .ref, .pocket-head .badge, .pocket-head h2, .pocket-head p, .pocket-head .meta{grid-column:1}
  .pocket-stage{grid-template-columns:1fr; gap:36px}
  .pocket-tunnel{order:-1; padding:8px 0}
  .pocket-tunnel .pt-wire{height:50px}
  .phone-card.pca, .phone-card.pcb{transform:none}
  .pocket-strip{grid-template-columns:1fr 1fr; gap:0}
  .ps-cell{border-bottom:1px solid var(--line-2)}
  .ps-cell:nth-child(2){border-right:0}
  .ps-cell:nth-child(3), .ps-cell:nth-child(4){border-bottom:0}

  .iso-pad{padding:80px 0 80px}
  .iso-head{grid-template-columns:1fr; gap:8px}
  .iso-head .ref, .iso-head .badge, .iso-head h2, .iso-head p, .iso-head .meta{grid-column:1}
  .iso-stage{grid-template-columns:1fr; gap:24px; padding:24px 0 80px}
  .iso-goal{position:relative; transform:none; top:auto; left:auto; width:100%; max-width:none; margin:24px 0}
  .iso-wires{display:none}
  .iso-rules{grid-template-columns:1fr 1fr; gap:24px 0; padding-top:24px}
  .ir{padding:0 14px 14px 0; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
  .ir:nth-child(2n){border-right:0; padding-right:0}
  .ir:nth-last-child(-n+2){border-bottom:0; padding-bottom:0}
}