/* ============================================================
   GeodeMCP design system — ported from the v1 platform repo
   (docs/design/geodemcp-visual-style.md). Dark-first.
   ============================================================ */
:root{
  --blue-100:oklch(93.2% .032 255.585); --blue-500:oklch(62.3% .214 259.815);
  --blue-600:oklch(54.6% .245 262.881); --blue-700:oklch(48.8% .243 264.376);
  --blue:var(--blue-600);
  --emerald-300:oklch(84.5% .143 164.978); --emerald-400:oklch(76.5% .177 163.223);
  --emerald-500:oklch(69.6% .17 162.48); --neutral-200:oklch(92.2% 0 0);
  --bg:oklch(15% .006 165); --surface:oklch(18.5% .006 165); --surface-2:oklch(21% .006 165);
  --input:oklch(12% .006 165); --footer:oklch(13% .006 165);
  --border:oklch(100% 0 0 / .07); --border-strong:oklch(100% 0 0 / .12);
  --text:oklch(96% 0 0); --muted:oklch(70.8% 0 0); --faint:oklch(55.6% 0 0);
  --green:var(--emerald-400); --ease:cubic-bezier(.4,0,.2,1);
  --grn-hex:#34d399; --blue-hex:#3b82f6;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0}
body{background:var(--bg); color:var(--text); font-family:"Geist",ui-sans-serif,system-ui,sans-serif;
  font-feature-settings:"cv01" 1; -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden}
a{color:inherit; text-decoration:none}
.is{font-family:"Instrument Sans",sans-serif; font-feature-settings:"cv01" 1}
.display{font-family:"Instrument Sans",sans-serif; font-weight:600; letter-spacing:-.025em}
.mono{font-family:"Geist Mono",monospace}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px}
.gem{display:block}
.accent{color:var(--green)}

/* ── Buttons ─────────────────────────────────────────────── */
.btn,.ghost{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:2.75rem; padding-inline:1.1rem;
  border-radius:.375rem; white-space:nowrap; cursor:pointer; font-family:"Instrument Sans",sans-serif; font-weight:500; font-size:.9rem;
  transition:.15s var(--ease)}
.btn{border:1px solid var(--blue-500); background:var(--blue-600); color:var(--blue-100)}
.btn:hover{background:var(--blue-700); border-color:var(--blue-600)}
.ghost{border:1px solid var(--border-strong); background:transparent; color:var(--neutral-200)}
.ghost:hover{background:oklch(100% 0 0 / .045); border-color:oklch(100% 0 0 / .2)}
.btn.sm,.ghost.sm{height:2.25rem; font-size:.83rem; padding-inline:.85rem}
.btn svg,.ghost svg{flex:none}

/* ── Header ──────────────────────────────────────────────── */
header{position:sticky; top:0; z-index:40; background:oklch(15% .006 165 / .72);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .2s var(--ease)}
header.scrolled{border-bottom-color:var(--border)}
header .wrap{display:flex; align-items:center; gap:18px; height:64px}
.brand{display:flex; align-items:center; gap:9px}
.brand .gem{width:23px; height:23px}
.brand .name{font-family:"Onest",sans-serif; font-weight:500; font-size:19px; letter-spacing:-.02em}
.navlinks{display:flex; gap:26px; margin-left:22px; color:var(--muted); font-size:14px; font-weight:500}
.navlinks a{transition:color .15s var(--ease)} .navlinks a:hover{color:var(--text)}
.nav-cta{margin-left:auto; display:flex; gap:10px; align-items:center}
.burger{display:none; background:transparent; border:1px solid var(--border-strong); border-radius:8px; width:36px; height:36px;
  align-items:center; justify-content:center; cursor:pointer; color:var(--text); flex:none; margin-left:auto}
.ghlink{display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:13.5px; font-weight:500; font-family:"Instrument Sans",sans-serif; transition:color .15s var(--ease)}
.ghlink:hover{color:var(--text)}
.mobile-menu{display:none; border-top:1px solid var(--border); padding:14px 28px 18px; flex-direction:column; gap:4px; background:oklch(15% .006 165 / .97)}
.mobile-menu.open{display:flex}
.mobile-menu a{color:var(--muted); font-family:"Instrument Sans",sans-serif; font-weight:500; font-size:15px; padding:8px 0}
@media (max-width:820px){.navlinks{display:none} .nav-cta{display:none} .burger{display:inline-flex}}

/* ── Section helpers ─────────────────────────────────────── */
.label{font-family:"Instrument Sans",sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.17em; color:var(--green); font-weight:600}
.sec{padding:84px 0}
.sec h2{font-size:34px; line-height:1.12; margin:14px 0 0; max-width:18em; letter-spacing:-.025em; font-family:"Instrument Sans",sans-serif; font-weight:600}
.sec .lead{color:var(--muted); font-size:16.5px; margin:16px 0 0; max-width:38em; line-height:1.62}
.sec .lead em{font-style:normal; color:var(--text)}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:500; font-family:"Instrument Sans",sans-serif;
  color:var(--emerald-300); border:1px solid oklch(76.5% .177 163.223 / .16); padding:5px 11px; border-radius:999px}
.dot{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 7px var(--green)}
.link{color:var(--green); font-size:14px; font-weight:500; font-family:"Instrument Sans",sans-serif; display:inline-flex; align-items:center; gap:6px}
.link svg{transition:transform .15s var(--ease)} .link:hover svg{transform:translateX(3px)}

/* ── Panel / terminal ────────────────────────────────────── */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; position:relative}
.panel-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--border)}
.tl{width:9px; height:9px; border-radius:50%; background:oklch(100% 0 0 / .1)}
.panel-bar .file{margin-left:8px; color:var(--faint); font-size:12px; font-family:"Geist Mono",monospace}
pre{margin:0; padding:18px; font-family:"Geist Mono",monospace; font-size:12px; line-height:1.78; color:oklch(82% 0 0); overflow-x:auto}
.c-com{color:var(--faint)} .c-key{color:var(--emerald-500)} .c-str{color:oklch(70% .04 255)} .c-blue{color:oklch(70.7% .165 254.624)}
.c-grn{color:var(--green)} .c-mut{color:var(--muted)}

/* ── HERO ────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border)}
.hero .grad{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.8;
  background:radial-gradient(58% 52% at 50% 32%, #264d4c 0%, rgba(25,48,47,0) 100%)}
.hero canvas{position:absolute; inset:0; z-index:1;
  -webkit-mask-image:radial-gradient(135% 100% at 50% 30%, #000 50%, transparent 100%);
  mask-image:radial-gradient(135% 100% at 50% 30%, #000 50%, transparent 100%)}
.hero .grain{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.42; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .wrap{position:relative; z-index:3; padding-top:74px; padding-bottom:64px; text-align:center}
.hhead{max-width:820px; margin:0 auto}
.hhead .eyebrow{margin:0 auto}
.hero h1{font-size:70px; line-height:1.04; margin:22px 0 0; color:var(--text); font-family:"Instrument Sans",sans-serif; font-weight:600; letter-spacing:-.03em}
.hero h1 em{font-style:normal; color:var(--green)}
.hero .sub{color:var(--muted); font-size:17px; line-height:1.6; margin:20px auto 0; max-width:38em}
.cta-row{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
.hhead .cta-row{justify-content:center}
.trust{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; color:var(--faint); font-size:13px; font-weight:500; align-items:center; justify-content:center}
.trust b{color:var(--muted); font-weight:600} .trust .sep{color:oklch(100% 0 0 / .14)}
@media (max-width:880px){.hero h1{font-size:36px} .hero .wrap{padding-top:52px}}

/* ── HERO SCENE (the vault diagram) ──────────────────────── */
.heroscene{max-width:1064px; margin:0 auto 4px; position:relative}
.heroscene svg.scene{width:100%; height:auto; display:block; overflow:visible}
.sv-card{fill:var(--surface); stroke:var(--border-strong); stroke-width:1}
.sv-card-active{fill:oklch(76.5% .177 163.223 / .06); stroke:oklch(76.5% .177 163.223 / .5); stroke-width:1.3}
.sv-name{font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:14px; fill:var(--text)}
.sv-sub{font-family:"Geist Mono",monospace; font-size:10.5px; fill:var(--faint)}
.sv-sub.on{fill:var(--green)}
.sv-mlabel{font-family:"Geist Mono",monospace; font-size:11px; fill:var(--faint); letter-spacing:.12em}
.sv-vname{font-family:"Instrument Sans",sans-serif; font-weight:700; font-size:14px; fill:var(--text); letter-spacing:.18em}
.sv-path{font-family:"Geist Mono",monospace; font-size:12px; fill:var(--faint)}
.sv-tree{font-family:"Geist Mono",monospace; font-size:14px; fill:var(--muted)}
.sv-tree.folder{fill:var(--emerald-300)}
.sv-tree.hl{fill:var(--emerald-300)}
.sv-chev{font-family:"Geist Mono",monospace; font-size:11px; fill:var(--faint)}
.sv-cap{font-family:"Geist Mono",monospace; font-size:11px; fill:var(--faint)}
.ivtag{font-family:"Geist Mono",monospace; font-size:9.5px; fill:var(--faint)}
.ivtag.conn{fill:var(--emerald-300)}
.sv-alabel{font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:14px; fill:var(--text)}
.g-folder{stroke:var(--emerald-300); stroke-width:1.3; fill:none}
.g-file{stroke:var(--faint); stroke-width:1.3; fill:none}
.g-file.hl{stroke:var(--emerald-300)}
.vault-wall-outer{fill:oklch(17% .006 165 / .55); stroke:var(--border-strong); stroke-width:1.4}
.vault-wall-inner{fill:none; stroke:var(--border); stroke-width:1}
.cable{fill:none; stroke:oklch(76.5% .177 163.223 / .5); stroke-width:2; stroke-dasharray:7 9; animation:dashflow 1.1s linear infinite}
.cable-base{fill:none; stroke:oklch(76.5% .177 163.223 / .14); stroke-width:2}
.reason{fill:none; stroke:oklch(76.5% .177 163.223 / .45); stroke-width:1.4; stroke-dasharray:3 5; animation:dashflow 1.3s linear infinite}
.ring{fill:none; stroke:var(--grn-hex); transform-box:fill-box; transform-origin:center; animation:pulsering 3.4s ease-out infinite}
.hlpill{fill:oklch(76.5% .177 163.223 / .1); stroke:oklch(76.5% .177 163.223 / .35); stroke-width:1; animation:breathe 3s ease-in-out infinite}
.port{fill:var(--bg); stroke:var(--grn-hex); stroke-width:1.6}
.portdot{fill:var(--grn-hex)}
.gnode{fill:oklch(76.5% .177 163.223 / .55)}
.glink{stroke:oklch(76.5% .177 163.223 / .3); stroke-width:1; fill:none}
.pkt-q text{font-family:"Geist Mono",monospace; font-size:11px; font-weight:500; fill:#0b0f0e}
.pkt-a text{font-family:"Geist Mono",monospace; font-size:11px; font-weight:500; fill:#dbeafe}
.pkt-q{offset-path:path("M242 125 C320 125 400 212 470 212"); offset-rotate:0deg; animation:flyq 3.6s var(--ease) infinite}
.pkt-a{offset-path:path("M242 125 C320 125 400 212 470 212"); offset-rotate:0deg; animation:flya 3.6s var(--ease) infinite; opacity:0}
@keyframes dashflow{to{stroke-dashoffset:-16}}
@keyframes pulsering{0%{transform:scale(.55);opacity:.6} 70%{opacity:0} 100%{transform:scale(1.5);opacity:0}}
@keyframes breathe{0%,100%{opacity:.7} 50%{opacity:1}}
@keyframes flyq{0%{offset-distance:0%;opacity:0} 6%{opacity:1} 38%{offset-distance:100%;opacity:1} 46%{offset-distance:100%;opacity:0} 100%{offset-distance:100%;opacity:0}}
@keyframes flya{0%,52%{offset-distance:100%;opacity:0} 58%{opacity:1} 92%{offset-distance:0%;opacity:1} 100%{offset-distance:0%;opacity:0}}
/* other clients: faint dashed links + occasional staggered pulse */
.fcable{fill:none; stroke:oklch(100% 0 0 / .17); stroke-width:1; stroke-dasharray:5 6}
.qdot{fill:#9fe3c8}
.qd-oc{offset-path:path("M242 192 C330 192 405 212 470 212"); offset-rotate:0deg; animation:flydot 6.5s linear 0s infinite}
.qd-hm{offset-path:path("M242 259 C340 259 408 216 470 214"); offset-rotate:0deg; animation:flydot 8.1s linear 2.2s infinite}
.qd-cu{offset-path:path("M242 326 C350 326 415 235 470 218"); offset-rotate:0deg; animation:flydot 7.3s linear 4.1s infinite}
.qd-nx{offset-path:path("M242 393 C360 393 435 270 470 224"); offset-rotate:0deg; animation:flydot 9.4s linear 1.3s infinite}
@keyframes flydot{0%{offset-distance:0%;opacity:0} 3%{opacity:1} 20%{offset-distance:100%;opacity:1} 26%{offset-distance:100%;opacity:0} 100%{offset-distance:100%;opacity:0}}
/* agent read-head walking the file rows + content streaming in */
.scanbar{fill:oklch(76.5% .177 163.223 / .1); stroke:oklch(76.5% .177 163.223 / .35); stroke-width:1; animation:breathe 2.4s ease-in-out infinite}
.scanread{font-family:"Geist Mono",monospace; font-size:10px; fill:#6ee7b7}
.scantip{fill:#34d399; animation:tippulse 1.1s ease-in-out infinite}
.scan{animation:walk 12s var(--ease) infinite}
@keyframes tippulse{0%,100%{opacity:.35} 50%{opacity:1}}
@keyframes walk{0%,13%{transform:translateY(0)} 17%,32%{transform:translateY(56px)} 36%,51%{transform:translateY(112px)} 55%,70%{transform:translateY(168px)} 74%,89%{transform:translateY(196px)} 93%,100%{transform:translateY(0)}}
.feed{fill:#6ee7b7}
.fd1{offset-path:path("M752 188 C838 200 884 246 928 260"); offset-rotate:0deg; animation:feed 2.6s linear 0s infinite}
.fd2{offset-path:path("M752 300 C840 296 888 274 928 264"); offset-rotate:0deg; animation:feed 2.9s linear .9s infinite}
.fd3{offset-path:path("M752 410 C842 372 892 300 928 266"); offset-rotate:0deg; animation:feed 3.2s linear 1.7s infinite}
@keyframes feed{0%{offset-distance:0%;opacity:0} 12%{opacity:1} 82%{offset-distance:100%;opacity:.9} 100%{offset-distance:100%;opacity:0}}
/* agent live status — cycles through what it's doing */
.astatus{font-family:"Geist Mono",monospace; font-size:11px; fill:var(--emerald-300); opacity:0; animation:statuscyc 8s linear infinite}
.as2{animation-delay:2s} .as3{animation-delay:4s} .as4{animation-delay:6s}
@keyframes statuscyc{0%{opacity:0} 2%{opacity:1} 22%{opacity:1} 25%{opacity:0} 100%{opacity:0}}
.scene-shadow{filter:drop-shadow(0 40px 60px rgba(0,0,0,.55))}
@media (prefers-reduced-motion:reduce){
  .cable,.ring,.hlpill,.pkt-q,.pkt-a,.scanbar,.scantip,.scan,.qdot,.feed,.astatus{animation:none}
  .pkt-q,.pkt-a,.qdot,.feed{display:none}
  .as1{opacity:1}
}

/* ── Clients strip ───────────────────────────────────────── */
.clients{border-bottom:1px solid var(--border); background:oklch(16% .006 165)}
.clients .wrap{display:flex; align-items:center; gap:14px 26px; padding:18px 28px; flex-wrap:wrap}
.clients .cap{font-size:12px; color:var(--faint); font-weight:600; text-transform:uppercase; letter-spacing:.14em; white-space:nowrap}
.client{display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:600; font-size:14px; font-family:"Instrument Sans",sans-serif; white-space:nowrap}
.client img{width:17px; height:17px; border-radius:4px}
.client svg.cl{width:17px; height:17px; border-radius:4px; display:inline-block; flex:none}
.more{color:var(--faint); font-weight:500; font-size:13.5px; font-family:"Instrument Sans",sans-serif; margin-left:auto}
@media (max-width:880px){.more{margin-left:0}}

/* ── Problem ─────────────────────────────────────────────── */
.splitviz{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:34px}
@media (max-width:760px){.splitviz{grid-template-columns:1fr}}
.vizcard{border:1px solid var(--border); border-radius:16px; background:var(--surface); overflow:hidden}
.vizcard.bad{border-color:oklch(60% .13 25 / .2)}
.vizcard.good{border-color:oklch(76.5% .177 163.223 / .28); background:oklch(76.5% .177 163.223 / .035)}
.vizcard .vhead{display:flex; align-items:center; gap:9px; padding:15px 18px; border-bottom:1px solid var(--border); font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:14px}
.vizcard .vhead .tg{margin-left:auto; font-family:"Geist Mono",monospace; font-size:11px; padding:3px 9px; border-radius:999px}
.vizcard.bad .tg{color:oklch(74% .14 25); background:oklch(60% .13 25 / .12); border:1px solid oklch(60% .13 25 / .25)}
.vizcard.good .tg{color:var(--green); background:oklch(76.5% .177 163.223 / .1); border:1px solid oklch(76.5% .177 163.223 / .25)}
.vizcard>svg{width:100%; height:auto; display:block; padding:8px 8px 12px}
.vizcard .vhead svg{flex:none}
.compare{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
@media (max-width:760px){.compare{grid-template-columns:1fr}}
.col{border:1px solid var(--border); border-radius:14px; padding:24px; background:var(--surface)}
.col.geode{border-color:oklch(76.5% .177 163.223 / .25); background:oklch(76.5% .177 163.223 / .04)}
.col h3{margin:0 0 14px; font-size:14px; font-family:"Instrument Sans",sans-serif; font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px}
.col ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px}
.col li{font-size:14px; color:var(--muted); display:flex; gap:11px; align-items:flex-start; line-height:1.45}
.col li em{font-style:italic; color:var(--text)}
.col li .mk{flex:none; width:18px; height:18px; border-radius:5px; display:grid; place-items:center; font-size:12px; font-weight:700; line-height:1; margin-top:1px}
.mk.x{background:oklch(60% .13 25 / .15); color:oklch(74% .14 25)}
.mk.c{background:oklch(76.5% .177 163.223 / .15); color:var(--green)}

/* ── Solution — wide feature ─────────────────────────────── */
.feature-wide{display:grid; grid-template-columns:1fr 1.02fr; gap:34px; align-items:center; margin-top:34px;
  border:1px solid var(--border-strong); border-radius:18px; background:linear-gradient(180deg,var(--surface),var(--surface-2)); padding:34px; overflow:hidden}
@media (max-width:880px){.feature-wide{grid-template-columns:1fr; gap:26px; padding:26px}}
.feature-wide .ftag{display:inline-flex; align-items:center; gap:7px; font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.15em; color:var(--green)}
.feature-wide h3{font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:23px; letter-spacing:-.02em; margin:14px 0 0; line-height:1.2}
.feature-wide p{color:var(--muted); font-size:15px; line-height:1.6; margin:12px 0 0; max-width:34em}
.feature-wide p em{font-style:normal; color:var(--text)}

/* ── Feature bento (illustration-led) ────────────────────── */
.pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:16px}
@media (max-width:760px){.pillars{grid-template-columns:1fr}}
.pillar{border:1px solid var(--border); border-radius:16px; background:var(--surface); overflow:hidden; transition:.15s var(--ease)}
.pillar:hover{border-color:var(--border-strong)}
.pillar .fviz{height:148px; border-bottom:1px solid var(--border); background:radial-gradient(120% 120% at 50% 0%, oklch(21% .006 165), oklch(16.5% .006 165)); display:block; position:relative; overflow:hidden}
.pillar .fviz svg{width:100%; height:100%; display:block}
.pillar .pbody{padding:22px 24px 24px}
.pillar h3{margin:0 0 6px; font-size:16.5px; font-family:"Instrument Sans",sans-serif; font-weight:600; display:flex; align-items:center; gap:8px}
.pillar h3 .num{font-family:"Geist Mono",monospace; font-size:11px; color:var(--green); border:1px solid oklch(76.5% .177 163.223 / .3); background:oklch(76.5% .177 163.223 / .1); border-radius:6px; padding:2px 6px}
.pillar p{margin:0; font-size:14px; color:var(--muted); line-height:1.55}
.fz-stroke{stroke:var(--grn-hex); fill:none} .fz-blue{stroke:var(--blue-hex); fill:none}
.fz-faint{stroke:var(--faint); fill:none}
.fz-node{fill:var(--surface); stroke:var(--grn-hex)}
.fz-fillg{fill:oklch(76.5% .177 163.223 / .14)}
.fz-flow{stroke:var(--grn-hex); fill:none; stroke-dasharray:4 6; animation:dashflow 1.2s linear infinite}
.fz-t{font-family:"Geist Mono",monospace; font-size:9px; fill:var(--faint)}
.fz-pulse{transform-box:fill-box; transform-origin:center; animation:breathe 2.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.fz-flow,.fz-pulse{animation:none}}

/* ── Inside your vault — graph band ──────────────────────── */
.graphband{display:grid; grid-template-columns:.92fr 1.08fr; gap:38px; align-items:center; margin-top:34px;
  border:1px solid var(--border); border-radius:18px; background:var(--surface); padding:14px 14px 14px 36px; overflow:hidden}
@media (max-width:880px){.graphband{grid-template-columns:1fr; padding:30px}}
.graphband .gtxt h3{font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:22px; letter-spacing:-.02em; margin:12px 0 0}
.graphband .gtxt p{color:var(--muted); font-size:14.5px; line-height:1.6; margin:12px 0 0; max-width:32em}
.gfacts{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.gfacts li{display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--muted)}
.gfacts li svg{flex:none; margin-top:1px; color:var(--green)}
.gfacts li b{color:var(--text); font-family:"Instrument Sans",sans-serif; font-weight:600}
.graphwrap{border:1px solid var(--border); border-radius:14px; background:radial-gradient(120% 120% at 70% 20%, oklch(20% .006 165), oklch(15% .006 165)); padding:8px}
.graphwrap svg{width:100%; height:auto; display:block}
.gphnode circle{fill:var(--surface); stroke:oklch(76.5% .177 163.223 / .5); stroke-width:1.3}
.gphnode.file circle{stroke:var(--border-strong)}
.gphnode text{font-family:"Geist Mono",monospace; font-size:10px; fill:var(--muted)}
.gphlink{stroke:oklch(76.5% .177 163.223 / .28); stroke-width:1.2; fill:none}
.gphlink.flow{stroke-dasharray:3 5; animation:dashflow 1.4s linear infinite}
.gphpulse{transform-box:fill-box; transform-origin:center; animation:pulsering 3.6s ease-out infinite; fill:none; stroke:var(--grn-hex)}
@media (prefers-reduced-motion:reduce){.gphlink.flow,.gphpulse{animation:none}}

/* ── How it works — 3D flow ──────────────────────────────── */
.flow{perspective:1500px; margin-top:48px}
.flow-row{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; transform:rotateX(13deg); transform-style:preserve-3d}
@media (max-width:820px){.flow-row{transform:none; grid-template-columns:1fr; gap:16px}}
.p3{position:relative; display:flex; flex-direction:column; background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--border-strong); border-radius:16px; padding:24px; box-shadow:0 36px 60px -34px rgba(0,0,0,.85); transition:transform .35s var(--ease)}
.p3:hover{transform:translateZ(40px)}
.p3 .n{width:30px; height:30px; border-radius:999px; display:grid; place-items:center; font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:13px;
  color:var(--green); background:oklch(76.5% .177 163.223 / .12); border:1px solid oklch(76.5% .177 163.223 / .3)}
.p3 h3{margin:16px 0 6px; font-size:16.5px; font-family:"Instrument Sans",sans-serif; font-weight:600}
.p3 p{margin:0 0 18px; font-size:13.5px; color:var(--muted); line-height:1.55}
.mini{border:1px solid var(--border); border-radius:11px; background:var(--input); padding:13px 14px; font-family:"Geist Mono",monospace; font-size:11.5px; color:var(--muted); margin-top:auto; line-height:1.7}
.mini .row{display:flex; align-items:center; gap:8px; padding:4px 0}
.mini .row .gd{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); flex:none}
.mini .st{margin-left:auto; color:var(--faint)} .mini .add{color:var(--green)}
.mini .k{color:var(--emerald-500)} .mini .b{color:oklch(70.7% .165 254.624)} .mini .pr{color:var(--faint)}

/* ── Mid-page atmosphere band (the hero effect, reprised) ── */
.atmos{position:relative; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.atmos>.grad{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.72;
  background:radial-gradient(58% 72% at 50% 36%, #264d4c 0%, rgba(25,48,47,0) 100%)}
.atmos>canvas{position:absolute; inset:0; z-index:1;
  -webkit-mask-image:radial-gradient(132% 108% at 50% 44%, #000 42%, transparent 100%);
  mask-image:radial-gradient(132% 108% at 50% 44%, #000 42%, transparent 100%)}
.atmos>.grain{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.4; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.atmos>.wrap{position:relative; z-index:3}

/* ── Trust / built in the open ───────────────────────────── */
.manifesto{position:relative; border:1px solid var(--border); border-radius:18px; background:var(--surface); padding:44px 40px; overflow:hidden}
.manifesto .qm{font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:26px; line-height:1.32; letter-spacing:-.02em; max-width:20em; position:relative; z-index:1}
.manifesto .qm em{font-style:normal; color:var(--green)}
.manifesto .by{margin-top:18px; color:var(--faint); font-size:13px; font-family:"Geist Mono",monospace}
.manifesto .ggem{position:absolute; right:-30px; bottom:-30px; width:200px; height:200px; opacity:.09; z-index:0}
.badges{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:16px}
@media (max-width:880px){.badges{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.badges{grid-template-columns:1fr}}
.badge{border:1px solid var(--border); border-radius:12px; padding:18px; background:var(--surface); transition:.15s var(--ease)}
.badge:hover{border-color:var(--border-strong); background:var(--surface-2)}
.badge .ic{color:var(--green); margin-bottom:11px}
.badge b{display:block; font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:13.5px; color:var(--text)}
.badge span{display:block; font-size:12px; color:var(--faint); margin-top:3px; line-height:1.4}

/* ── Pricing ─────────────────────────────────────────────── */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px}
@media (max-width:760px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--border); border-radius:16px; padding:28px; background:var(--surface); display:flex; flex-direction:column; position:relative}
.plan.feat{border-color:oklch(62.3% .214 259.815 / .5); background:oklch(54.6% .245 262.881 / .05)}
.plan .tagm{position:absolute; top:-1px; right:18px; transform:translateY(-50%); font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.12em; color:var(--blue-100); background:var(--blue-600); border:1px solid var(--blue-500); padding:4px 10px; border-radius:999px}
.plan .pn{font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:15px}
.plan .pnsub{color:var(--faint); font-size:12.5px; margin-top:4px; min-height:34px; line-height:1.4}
.plan .pr{font-family:"Instrument Sans",sans-serif; font-weight:700; font-size:34px; margin:8px 0 2px; letter-spacing:-.02em}
.plan .pr span{font-size:14px; color:var(--faint); font-weight:500}
.plan ul{list-style:none; margin:18px 0 24px; padding:0; display:flex; flex-direction:column; gap:10px}
.plan li{font-size:13.5px; color:var(--muted); display:flex; gap:9px; line-height:1.4} .plan li .m{color:var(--green); flex:none}
.plan .btn,.plan .ghost{width:100%; margin-top:auto}
.ann{text-align:center; color:var(--faint); font-size:13px; margin-top:18px}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq{margin-top:30px; border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none; cursor:pointer; padding:20px 2px; display:flex; align-items:center; gap:16px;
  font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:16px; color:var(--text); transition:color .15s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--green)}
.faq summary .pm{margin-left:auto; flex:none; color:var(--faint); transition:transform .2s var(--ease)}
.faq details[open] summary .pm{transform:rotate(45deg); color:var(--green)}
.faq .ans{padding:0 2px 22px; color:var(--muted); font-size:14.5px; line-height:1.65; max-width:54em}
.faq .ans em{font-style:italic; color:var(--text)}
.faq .ans code{font-family:"Geist Mono",monospace; font-size:.86em; color:var(--emerald-300); background:oklch(76.5% .177 163.223 / .08); border:1px solid oklch(76.5% .177 163.223 / .16); padding:1px 5px; border-radius:5px}

/* ── Blog / field notes ──────────────────────────────────── */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px}
@media (max-width:880px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.posts{grid-template-columns:1fr}}
.post{border:1px solid var(--border); border-radius:14px; background:var(--surface); overflow:hidden; display:flex; flex-direction:column; transition:.15s var(--ease)}
.post:hover{border-color:var(--border-strong); background:var(--surface-2); transform:translateY(-3px)}
.post .cover{height:128px; position:relative; overflow:hidden; border-bottom:1px solid var(--border); display:grid; place-items:center}
.post .cover.g1{background:radial-gradient(120% 120% at 20% 10%, oklch(76.5% .177 163.223 / .22), transparent 60%), linear-gradient(140deg,#10231f,#0c1413)}
.post .cover.g2{background:radial-gradient(120% 120% at 80% 10%, oklch(62.3% .214 259.815 / .22), transparent 60%), linear-gradient(140deg,#0e1722,#0c1413)}
.post .cover.g3{background:radial-gradient(120% 120% at 50% 0%, oklch(84.5% .143 164.978 / .2), transparent 60%), linear-gradient(140deg,#13201c,#0c1413)}
.post .cover .gem{width:42px; height:42px; opacity:.5}
.post .cover .ct{position:absolute; top:12px; left:12px; font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--emerald-300); background:oklch(15% .006 165 / .6); border:1px solid oklch(76.5% .177 163.223 / .22); padding:4px 9px; border-radius:999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.post .body{padding:18px; display:flex; flex-direction:column; flex:1}
.post h3{margin:0; font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:16.5px; line-height:1.3; letter-spacing:-.01em}
.post .ex{margin:9px 0 0; font-size:13.5px; color:var(--muted); line-height:1.55}
.post .meta{margin-top:16px; padding-top:14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px;
  font-family:"Geist Mono",monospace; font-size:11.5px; color:var(--faint)}
.post .meta .dotm{width:3px; height:3px; border-radius:50%; background:var(--faint)}

/* ── Closing CTA ─────────────────────────────────────────── */
.closing{position:relative; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); text-align:center; padding:96px 0}
.closing .grad{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
  background:radial-gradient(50% 120% at 50% 120%, #264d4c 0%, rgba(25,48,47,0) 100%)}
.closing .wrap{position:relative; z-index:1}
.closing h2{margin:14px auto 0; max-width:15em; font-size:40px; font-family:"Instrument Sans",sans-serif; font-weight:600; letter-spacing:-.025em; line-height:1.1}
.closing .lead{margin:18px auto 0; color:var(--muted); font-size:16.5px; max-width:34em; line-height:1.6}
.closing .cta-row{justify-content:center; margin-top:30px}
.closing .rr{margin-top:18px; color:var(--faint); font-size:13px; display:inline-flex; align-items:center; gap:8px}

/* ── Footer ──────────────────────────────────────────────── */
footer{background:var(--footer); border-top:1px solid var(--border)}
footer .wrap{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; padding:56px 28px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr 1fr}}
.ft-tag{color:var(--muted); font-size:13.5px; margin-top:14px; max-width:25em; line-height:1.55}
.col-t{font-size:13px; font-weight:600; font-family:"Instrument Sans",sans-serif; margin-bottom:13px}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
footer li a{color:var(--muted); font-size:13.5px; transition:color .15s var(--ease)} footer li a:hover{color:var(--text)}
.ft-bottom{border-top:1px solid var(--border)}
.ft-bottom .wrap{display:flex; justify-content:space-between; padding:18px 28px; color:var(--faint); font-size:12.5px; gap:12px; flex-wrap:wrap}

/* ── Scroll reveal (restrained) ──────────────────────────── */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ── Hero load stagger ───────────────────────────────────── */
@keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.stagger>*{opacity:0; animation:rise .7s var(--ease) forwards}
.stagger>*:nth-child(1){animation-delay:.04s}
.stagger>*:nth-child(2){animation-delay:.12s}
.stagger>*:nth-child(3){animation-delay:.20s}
.stagger>*:nth-child(4){animation-delay:.28s}
.heroscene{opacity:0; animation:rise .9s var(--ease) .34s forwards}
@media (prefers-reduced-motion:reduce){.stagger>*,.heroscene{opacity:1; animation:none}}

/* ── Blog: header/footer chrome + article prose ── */
.site-header{position:sticky;top:0;z-index:40;background:oklch(15% .006 165 / .72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.site-header .wrap{display:flex;align-items:center;gap:18px;height:64px}
.site-header .brand .name{font-family:"Onest",sans-serif;font-weight:500;font-size:19px;letter-spacing:-.02em}
.site-footer{background:var(--footer);border-top:1px solid var(--border);margin-top:60px}
.site-footer .wrap{display:flex;justify-content:space-between;padding:24px 28px;color:var(--faint);font-size:12.5px;gap:12px;flex-wrap:wrap}
.empty{color:var(--muted);font-size:16px;margin-top:30px}
.post .cover[style]{background-size:cover;background-position:center}
.cover-tag{position:relative;height:0}
.article{max-width:760px;margin:0 auto;padding:0 28px}
.article .back{color:var(--green);font-size:13.5px;font-family:"Instrument Sans",sans-serif;font-weight:500}
.article-meta{margin-top:18px;color:var(--faint);font-family:"Geist Mono",monospace;font-size:12.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.article h1.display{font-size:40px;line-height:1.1;margin:14px 0 0;letter-spacing:-.025em}
.article-cover{width:100%;border-radius:14px;border:1px solid var(--border);margin-top:24px;display:block}
.prose{margin-top:28px;color:var(--muted);font-size:16.5px;line-height:1.75}
.prose h2{font-family:"Instrument Sans",sans-serif;font-weight:600;font-size:24px;color:var(--text);letter-spacing:-.02em;margin:38px 0 0}
.prose h3{font-family:"Instrument Sans",sans-serif;font-weight:600;font-size:19px;color:var(--text);margin:30px 0 0}
.prose p{margin:16px 0 0}
.prose a{color:var(--emerald-300);text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{margin:16px 0 0;padding-left:22px}
.prose li{margin:6px 0}
.prose code{font-family:"Geist Mono",monospace;font-size:.88em;color:var(--emerald-300);background:oklch(76.5% .177 163.223 / .08);border:1px solid oklch(76.5% .177 163.223 / .16);padding:1px 5px;border-radius:5px}
.prose pre{margin:20px 0 0;padding:16px 18px;background:var(--input);border:1px solid var(--border);border-radius:12px;overflow-x:auto}
.prose pre code{background:none;border:none;padding:0;color:oklch(82% 0 0)}
.prose img{max-width:100%;border-radius:12px;border:1px solid var(--border);margin-top:20px}
.prose blockquote{margin:20px 0 0;padding-left:18px;border-left:2px solid oklch(76.5% .177 163.223 / .4);color:var(--text)}