@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('assets/fonts/montserrat-latin.woff2') format('woff2')}

:root{
  --bg:#05080f;--fg:#f2f6fa;--soft:#9aa7b8;--dim:#6b7a8d;
  --cyan:#4cc3f0;--ice:#b9e4fb;
  --glass:rgba(255,255,255,.045);--edge:rgba(255,255,255,.09);
  --spring:cubic-bezier(.16,1,.3,1);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--bg);color:var(--fg);
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  line-height:1.6;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
code{font-family:var(--mono);font-size:.88em;padding:2px 6px;border-radius:5px;
  background:rgba(255,255,255,.07);color:var(--ice)}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.wrap.narrow{max-width:800px}

/* ---------- ambient light ---------- */
body>nav:not(.sidex),main,footer{position:relative;z-index:2}

/* ---------- nav ---------- */
body>nav:not(.sidex){position:sticky;top:0;z-index:30;background:rgba(5,8,15,.62);
  
  border-bottom:1px solid rgba(255,255,255,.055)}
/* padding shorthand here was wiping .wrap's horizontal padding, so on a phone
   the logo sat flush on the left edge and the burger flush on the right */
.nv{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);
  padding-top:14px;padding-bottom:14px}
.lg{display:flex;align-items:center;gap:12px;margin-right:auto;font-size:19px;font-weight:700;
  letter-spacing:-.016em;text-decoration:none;white-space:nowrap}
.lg img{width:42px;height:42px;filter:drop-shadow(0 2px 12px rgba(76,195,240,.55))}
/* The nav mark is inlined so the glyph can be reached. Only the inner i/o
   breathes — the ring and the face stay fixed, so the logo never looks
   like it is blinking at you. */
.lgmark{width:42px;height:42px;flex:none;display:block;
  filter:drop-shadow(0 2px 12px rgba(76,195,240,.42))}
.lgmk{animation:mkPulse 1.45s ease-in-out infinite}
@keyframes mkPulse{
  0%,100%{opacity:.6}
  50%{opacity:1;filter:drop-shadow(0 0 9px rgba(123,220,255,1))}
}
@media(prefers-reduced-motion:reduce){.lgmk{animation:none;opacity:1}}
@media(max-width:760px){.lg{font-size:17px;gap:10px}
  .lg img,.lgmark{width:36px;height:36px}}
.nv > a:not(.lg):not(.pill){color:var(--soft);text-decoration:none;font-size:13px;font-weight:500;
  letter-spacing:-.006em;transition:color .4s var(--spring)}
.nv > a:not(.lg):not(.pill):hover{color:var(--fg)}
/* The bright blue pill was built for a Foundation CTA. With a GitHub mark on
   it, a black silhouette stamped on saturated blue read as a sticker next to
   the restrained Explorer chip. Same family as that chip now, one step
   stronger, with the mark in the text colour so it belongs to the button. */
.pill{display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:var(--fg);text-decoration:none;white-space:nowrap;
  border:1px solid rgba(255,255,255,.17);
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.045));
  transition:transform .5s var(--spring),border-color .4s ease,background .4s ease,color .35s ease}
.pill:hover{transform:translateY(-1.5px);color:#fff;
  border-color:rgba(76,176,226,.52);
  background:linear-gradient(180deg,rgba(76,176,226,.2),rgba(76,176,226,.09))}
.pill-gh{width:14px;height:14px;fill:currentColor;flex:none;opacity:.92;
  transition:opacity .35s ease}
.pill:hover .pill-gh{opacity:1}
.burger{display:none;flex-direction:column;gap:5px;padding:6px}
.burger span{width:19px;height:1.5px;background:var(--fg);border-radius:2px;transition:.4s var(--spring)}
.mobnav{display:none;flex-direction:column;gap:2px;padding:6px 0 16px}
.mobnav a{padding:11px clamp(20px,5vw,40px);color:var(--soft);text-decoration:none;font-size:14.5px}
@media(max-width:900px){
  .nv > a:not(.lg):not(.pill){display:none}
  .burger{display:flex}
  .mobnav:not([hidden]){display:flex}
}

/* ---------- hero ---------- */

.kick{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 9px;border-radius:999px;
  border:1px solid var(--edge);background:var(--glass);
  
  font-size:12px;font-weight:500;color:var(--ice);letter-spacing:-.005em}
.kick i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px 2px rgba(76,195,240,.8)}
h1{margin:26px auto 0;max-width:15ch;font-size:clamp(2.5rem,6.2vw,4.8rem);font-weight:600;
  line-height:1.03;letter-spacing:-.042em;
  background:linear-gradient(180deg,#fff 30%,#a9c6dc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin:22px auto 0;max-width:54ch;color:var(--soft);font-size:clamp(15px,1.3vw,17px);
  letter-spacing:-.008em;line-height:1.66}
.cta{display:flex;gap:11px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 25px;border-radius:999px;
  font-size:13.5px;font-weight:600;letter-spacing:-.008em;text-decoration:none;
  transition:transform .55s var(--spring),box-shadow .55s var(--spring),background .4s ease}
.b1{color:#061018;background:linear-gradient(180deg,#fff,#cfe9f7);
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 10px 30px rgba(0,0,0,.45)}
.b1:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 16px 40px rgba(0,0,0,.55)}
.b2{color:var(--fg);border:1px solid var(--edge);background:var(--glass);
  }
.b2:hover{transform:translateY(-2px);background:rgba(255,255,255,.085)}

/* ---------- glass primitives ---------- */
.card,.glass{position:relative;border-radius:17px;border:1px solid var(--edge);background:var(--glass);
  }
.card::before,.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.085),transparent 42%)}
.card{transition:transform .6s var(--spring),border-color .5s ease,background .5s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(76,176,226,.38);
  background:rgba(76,176,226,.055);box-shadow:0 14px 40px -18px rgba(18,120,180,.55)}
.feat{overflow:hidden}
.feat::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(110,205,245,.85),transparent);
  opacity:0;transition:opacity .5s ease;pointer-events:none}
.feat:hover::after{opacity:1}
.card:hover .fi{color:#fff;border-color:rgba(76,176,226,.5);
  box-shadow:0 0 0 1px rgba(76,176,226,.18),0 0 22px -4px rgba(76,176,226,.6)}
.fi{transition:color .45s ease,border-color .45s ease,box-shadow .5s ease}

@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- sections ---------- */
.sec{padding:clamp(58px,11vh,118px) 0;position:relative;overflow:clip}
/* ambient accent: a soft field of light that lifts as each section arrives, so
   scrolling moves through a lit space instead of a flat sheet. No blend modes,
   no backdrop-filter — those cost a frame on first paint. */
.sec::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(66vw,820px);height:min(66vw,820px);top:0;left:0;border-radius:50%;
  background:radial-gradient(circle,rgba(44,150,214,.13) 0%,rgba(32,112,172,.05) 38%,transparent 62%);
  opacity:0;transform:translateY(34px) scale(.92);
  transition:opacity 1.5s ease,transform 1.7s var(--spring)}
.sec:nth-of-type(even)::before{left:auto;right:0;top:auto;bottom:0;
  background:radial-gradient(circle,rgba(76,176,226,.115) 0%,rgba(40,120,180,.045) 40%,transparent 64%)}
.sec.lit::before{opacity:1;transform:none}
/* the record section holds a sticky spine: never clip it, and keep its glow
   inset so nothing needs clipping in the first place */
#engineering{overflow:visible}
#engineering::before{top:6%;left:0;width:min(52vw,620px);height:min(52vw,620px)}
.sec > .wrap{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.sec::before{transition:none}}

/* scroll progress — the only full-width rule on the page, and it is a readout */
.prog{position:fixed;top:0;left:0;height:2px;z-index:40;width:0;
  background:linear-gradient(90deg,#1f8fd0,#5fc8f5 60%,#9fe0ff);
  box-shadow:0 0 12px 0 rgba(76,176,226,.75);pointer-events:none}
.head{max-width:52ch}
.eye{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--cyan)}
.eye::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px 2px rgba(76,195,240,.75);animation:beat 2.6s ease-in-out infinite}
@keyframes beat{0%,62%,100%{opacity:1;box-shadow:0 0 10px 2px rgba(76,195,240,.75)}
  78%{opacity:.22;box-shadow:0 0 4px 0 rgba(76,195,240,.2)}}
@media(prefers-reduced-motion:reduce){.eye::before{animation:none}}
.head.wide{max-width:64ch}
.head h2{margin-top:12px;font-size:clamp(1.75rem,3.3vw,2.6rem);font-weight:600;letter-spacing:-.036em;
  line-height:1.11;background:linear-gradient(180deg,#fff 42%,#9fbed6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.head p{margin-top:14px;color:var(--soft);font-size:15.5px;letter-spacing:-.008em}
.note{margin-top:18px;color:var(--dim);font-size:13px;letter-spacing:-.005em}
.note b{color:var(--soft);font-weight:600}

.trio,.quad{display:grid;gap:13px;margin-top:clamp(32px,5.5vh,56px)}
.trio{grid-template-columns:repeat(3,1fr)}
.quad{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.quad{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.trio{grid-template-columns:1fr}}
@media(max-width:620px){.quad{grid-template-columns:1fr}}
.feat{padding:25px 23px 27px}
.fi{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--ice);
  border:1px solid var(--edge);background:rgba(255,255,255,.05);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset}
.fi svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.feat h3{margin-top:17px;font-size:17px;font-weight:600;letter-spacing:-.024em}
.feat p{margin-top:9px;color:var(--soft);font-size:14px;letter-spacing:-.006em;line-height:1.62}

/* ---------- segmented control + panel ---------- */
.seg{display:flex;gap:6px;margin-top:clamp(28px,4.5vh,44px);padding:5px;border-radius:999px;
  border:1px solid var(--edge);background:var(--glass);
  
  overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:none;padding:9px 17px;border-radius:999px;font-size:13px;font-weight:500;
  color:var(--soft);letter-spacing:-.008em;white-space:nowrap;
  transition:color .4s var(--spring),background .45s var(--spring),box-shadow .45s var(--spring)}
.seg button:hover{color:var(--fg)}
.seg button[aria-selected=true]{color:#061018;font-weight:600;
  background:linear-gradient(180deg,#fff,#cfe9f7);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 4px 14px rgba(0,0,0,.35)}

.pan{margin-top:13px;border-radius:20px;overflow:hidden}
.pan-in{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,3vw,40px);padding:clamp(22px,3.2vw,36px)}
@media(max-width:860px){.pan-in{grid-template-columns:1fr}}
.pan-in h3{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:600;letter-spacing:-.028em;line-height:1.18}
.pan-in .pl{margin-top:11px;color:var(--soft);font-size:14.5px;letter-spacing:-.007em;line-height:1.66}
.drops{margin-top:16px;border-top:1px solid var(--edge)}
.drops details{border-bottom:1px solid var(--edge)}
.drops summary{display:flex;align-items:center;gap:10px;padding:12px 0;font-size:13.5px;font-weight:500;
  cursor:pointer;list-style:none;transition:color .35s var(--spring)}
.drops summary::-webkit-details-marker{display:none}
.drops summary::before{content:"";width:16px;height:16px;flex:none;border-radius:5px;
  border:1px solid var(--edge);background:
    linear-gradient(currentColor,currentColor) center/8px 1.2px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.2px 8px no-repeat;
  color:var(--cyan);transition:transform .45s var(--spring),background-size .45s var(--spring)}
.drops details[open] summary::before{transform:rotate(90deg);
  background:linear-gradient(currentColor,currentColor) center/8px 1.2px no-repeat,
             linear-gradient(currentColor,currentColor) center/1.2px 0 no-repeat}
.drops summary:hover{color:#fff}
.drops p{padding:0 0 13px 26px;color:var(--soft);font-size:13.5px;line-height:1.64}
.side{display:flex;flex-direction:column;gap:9px}
.srow{padding:13px 15px;border-radius:12px;border:1px solid var(--edge);background:rgba(255,255,255,.028)}
.srow dt{font-size:10.5px;font-weight:500;color:var(--dim)}
.srow dd{margin-top:4px;font-size:15px;font-weight:600;letter-spacing:-.022em}
.tag{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;
  font-size:10px;font-weight:600;letter-spacing:.02em}
.t-code{background:rgba(74,222,128,.14);color:#86efac}
.t-test{background:rgba(76,195,240,.15);color:var(--ice)}
.t-no{background:rgba(255,255,255,.07);color:var(--dim)}

/* ---------- wallets ---------- */
.wrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(26px,4vh,38px)}
.tagv{padding:6px 13px;border-radius:999px;border:1px solid var(--edge);background:var(--glass);
  font-size:11.5px;font-weight:500;color:var(--ice);letter-spacing:-.004em}
.verify{color:var(--cyan);text-decoration:none;font-size:13px;font-weight:500}
.verify:hover{text-decoration:underline}
.dls{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:16px}
@media(max-width:860px){.dls{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dls{grid-template-columns:1fr}}
.dl{display:flex;align-items:center;gap:13px;padding:16px 17px;border-radius:15px;text-decoration:none;
  border:1px solid var(--edge);background:var(--glass);
  
  transition:transform .6s var(--spring),border-color .45s,background .45s}
.dl:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.075)}
.dl .os{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;color:var(--ice);
  border:1px solid var(--edge);background:rgba(255,255,255,.05)}
.dl .os svg{width:17px;height:17px;fill:currentColor}
.dl b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.018em}
.dl span{display:block;margin-top:2px;font-size:11.5px;color:var(--dim)}
.dl.rec{border-color:rgba(76,195,240,.42);background:rgba(76,195,240,.08)}
.dl.rec b::after{content:"Detected";margin-left:7px;padding:2px 7px;border-radius:999px;
  font-size:9.5px;font-weight:600;background:rgba(76,195,240,.2);color:var(--ice);vertical-align:1px}

.aurora{margin-top:13px;border-radius:17px;overflow:hidden}
.aurora summary{display:flex;align-items:center;gap:10px;padding:16px 20px;cursor:pointer;
  font-size:14px;font-weight:500;list-style:none}
.aurora summary::-webkit-details-marker{display:none}
.aurora summary::after{content:"";margin-left:auto;width:8px;height:8px;
  border-right:1.4px solid var(--dim);border-bottom:1.4px solid var(--dim);
  transform:rotate(45deg);transition:transform .45s var(--spring)}
.aurora[open] summary::after{transform:rotate(225deg)}
.aur-in{padding:0 20px 20px}
.aur-in p{color:var(--soft);font-size:14px;max-width:62ch}
.aur-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.aur-links a{padding:8px 15px;border-radius:999px;border:1px solid var(--edge);
  background:rgba(255,255,255,.04);font-size:12.5px;font-weight:500;text-decoration:none;
  transition:background .4s,border-color .4s}
.aur-links a:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}

/* ---------- faq ---------- */
.faq{margin-top:clamp(26px,4vh,40px);border-top:1px solid var(--edge)}
.faq details{border-bottom:1px solid var(--edge)}
.faq summary{display:flex;align-items:flex-start;gap:14px;padding:17px 0;cursor:pointer;
  font-size:15.5px;font-weight:500;letter-spacing:-.014em;list-style:none;transition:color .35s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;margin-top:7px;width:8px;height:8px;flex:none;
  border-right:1.4px solid var(--dim);border-bottom:1.4px solid var(--dim);
  transform:rotate(45deg);transition:transform .45s var(--spring)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq summary:hover{color:var(--ice)}
.faq .a{padding:0 30px 20px 0;color:var(--soft);font-size:14.5px;line-height:1.7;max-width:76ch}

/* ---------- footer ---------- */
footer{border-top:1px solid rgba(255,255,255,.06);padding:clamp(44px,7vh,72px) 0 34px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(24px,4vw,48px)}
@media(max-width:860px){.fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:560px){.fgrid{grid-template-columns:minmax(0,1fr);gap:30px}}
.fbrand p{margin-top:14px;max-width:34ch;color:var(--dim);font-size:13px;line-height:1.62}
.social{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;list-style:none}
.social a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--edge);background:rgba(255,255,255,.04);color:var(--soft);
  transition:transform .5s var(--spring),color .4s,border-color .4s,background .4s}
.social a:hover{transform:translateY(-2px);color:#fff;border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.1)}
.social svg{width:15px;height:15px;fill:currentColor}
.fnav h4{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.fnav a{display:block;margin-top:11px;color:var(--soft);text-decoration:none;font-size:13.5px;
  transition:color .35s}
.fnav a:hover{color:#fff}
.fcopy{margin-top:clamp(32px,5vh,52px);padding-top:22px;border-top:1px solid rgba(255,255,255,.055);
  color:var(--dim);font-size:12.5px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);will-change:opacity,transform;
  transition:opacity .9s var(--spring),transform .9s var(--spring)}
.rv.in{opacity:1;transform:none;will-change:auto}
/* direction per element type, so a section assembles instead of fading as a block */
.head .eye.rv:not(.in){transform:translateX(-16px)}
.head h2.rv:not(.in){transform:translateY(30px)}
.card.rv:not(.in),.glass.rv:not(.in){transform:translateY(32px) scale(.982)}
.lineage.rv:not(.in){transform:translateY(22px) scale(.99)}
.recx.rv:not(.in){transform:translateY(24px)}
.specs > .rv:not(.in){transform:translateY(18px) scale(.96)}
.dl.rv:not(.in),.arow.rv:not(.in){transform:translateX(-18px)}
.fade{animation:fin .4s var(--spring)}
@keyframes fin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .coin img{animation:none}
  .fade{animation:none}
  .btn,.card,.pill,.dl,.social a,.seg button,.yr .dot{transition:none}
}

/* ---------- evidence ---------- */
.ev{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:13px}
@media(max-width:860px){.ev{grid-template-columns:1fr}}
.evc{margin:0;border-radius:17px;overflow:hidden}
.evc img{display:block;width:100%;height:auto;border-bottom:1px solid var(--edge)}
.evc figcaption{padding:15px 18px 17px;color:var(--soft);font-size:13px;line-height:1.6}
.evc figcaption b{display:block;margin-bottom:5px;color:var(--fg);font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase}
.evc figcaption em{font-style:normal;font-family:var(--mono);color:var(--ice)}

/* ---------- foundation ---------- */
/* compact proof list: two columns of rows, not nine cards */
.proofs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(22px,3.4vw,52px);margin-top:clamp(26px,4vh,40px);
  border-top:1px solid var(--edge)}
.proofs li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:baseline;
  gap:0 14px;padding:14px 2px;border-bottom:1px solid var(--edge);
  transition:background .35s ease,padding-left .45s var(--spring)}
.proofs li:hover{background:rgba(255,255,255,.028);padding-left:8px}
.pn{font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:.03em}
.proofs h3{font-size:14.5px;font-weight:500;letter-spacing:-.016em;line-height:1.3;
  transition:color .35s ease}
.proofs li:hover h3{color:#fff}
.proofs p{grid-column:2;margin-top:5px;color:var(--soft);font-size:13px;line-height:1.55}
.proofs .done{margin-top:0;align-self:center;white-space:nowrap;font-size:10px;padding:3px 9px}
.proofs code{font-size:.92em}
@media(max-width:900px){.proofs{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){
  .proofs li{grid-template-columns:30px minmax(0,1fr);row-gap:7px}
  .proofs .done{grid-column:2;justify-self:start}
}

.goals{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:13px;
  margin-top:14px}
/* group label: ties the two halves of the section together without a rule line */
.gcap{display:flex;align-items:center;gap:10px;margin-top:clamp(30px,5vh,52px);
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim)}
.gcap span{flex:none;width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px 2px rgba(76,195,240,.7);animation:beat 2.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.gcap span{animation:none}}
@media(max-width:860px){.goals{grid-template-columns:1fr}}
.goals li{padding:24px 23px 26px}
.gn{font-family:var(--mono);font-size:12px;color:var(--cyan);letter-spacing:.04em}
.goals h3{margin-top:12px;font-size:17px;font-weight:600;letter-spacing:-.024em}
.goals p{margin-top:9px;color:var(--soft);font-size:14px;line-height:1.62}
.done{display:inline-block;margin-top:14px;padding:4px 11px;border-radius:999px;
  font-size:10.5px;font-weight:600;background:rgba(76,195,240,.13);
  border:1px solid rgba(76,195,240,.28);color:var(--ice)}
/* honest about what is not finished: same shape, no claim of delivery */
.done.part{background:rgba(255,255,255,.055);border-color:var(--edge);color:var(--soft)}
.goals li{display:flex;flex-direction:column}
.goals li .done{align-self:flex-start;margin-top:auto;margin-top:14px}
.goals code{font-size:.9em}

.fsplit{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:13px}
@media(max-width:860px){.fsplit{grid-template-columns:1fr}}
.fcard{padding:25px 24px 27px}
.fcard h3{font-size:17px;font-weight:600;letter-spacing:-.024em}
.fcard p{margin-top:10px;color:var(--soft);font-size:14px;line-height:1.64}
.fcard p b{color:var(--ice);font-weight:600}
.flink{display:inline-block;margin-top:14px;color:var(--cyan);text-decoration:none;
  font-size:13px;font-weight:500}
.flink:hover{text-decoration:underline}

/* ---------- archive ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:clamp(32px,5.5vh,56px)}
@media(max-width:980px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}
.post{display:flex;flex-direction:column;padding:22px 22px 24px;text-decoration:none}
.pmeta{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:500;color:var(--dim)}
.pmeta i{width:3px;height:3px;border-radius:50%;background:var(--dim)}
.post h3{margin-top:12px;font-size:16px;font-weight:600;letter-spacing:-.022em;line-height:1.28}
.post p{margin-top:9px;color:var(--soft);font-size:13.5px;line-height:1.6;flex:1}
.pgo{margin-top:16px;font-size:12.5px;font-weight:500;color:var(--cyan);
  transition:transform .5s var(--spring)}
.post:hover .pgo{transform:translateX(3px)}
.allposts{display:inline-flex;align-items:center;margin-top:20px;padding:12px 22px;border-radius:999px;
  border:1px solid var(--edge);background:var(--glass);text-decoration:none;
  font-size:13px;font-weight:500;
  transition:background .4s,border-color .4s,transform .5s var(--spring)}
.allposts:hover{transform:translateY(-2px);background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.2)}

/* ---------- evidence (one chart, one figure) ---------- */
.ev{display:grid;grid-template-columns:1.25fr .75fr;gap:13px;margin-top:clamp(30px,5vh,52px);align-items:stretch}
@media(max-width:880px){.ev{grid-template-columns:1fr}}
.evfig{margin:0;border-radius:17px;overflow:hidden;display:flex;flex-direction:column}
.evfig img{display:block;width:100%;height:auto;border-bottom:1px solid var(--edge);
  filter:saturate(.72) contrast(1.04) brightness(.92)}
.evfig figcaption{padding:15px 19px 18px;color:var(--soft);font-size:13px;line-height:1.62}
.evfig figcaption em{font-style:normal;font-family:var(--mono);color:var(--ice)}
.evc{display:flex;flex-direction:column;justify-content:center;padding:26px 24px;border-radius:17px}
.evk{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.evn{margin-top:12px;font-size:clamp(26px,3.4vw,40px);font-weight:600;letter-spacing:-.04em;
  line-height:1;background:linear-gradient(180deg,#fff,#9fc6e0);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.evn b{font-size:.44em;font-weight:600;letter-spacing:-.01em;-webkit-text-fill-color:var(--ice)}
.evd{margin-top:7px;font-size:12.5px;color:var(--dim)}
.evc p{margin-top:15px;color:var(--soft);font-size:13.5px;line-height:1.62}

/* ---------- engineering record: year spine + slim accordion ---------- */
.recx{display:grid;grid-template-columns:106px minmax(0,1fr);gap:clamp(16px,3.2vw,44px);
  margin-top:clamp(30px,5vh,52px);align-items:start}
.spine{position:sticky;top:94px;display:flex;flex-direction:column;padding-left:4px}
.spine::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,transparent,var(--edge) 12%,var(--edge) 88%,transparent)}
.sp{position:relative;display:flex;align-items:center;gap:13px;padding:9px 0;width:100%;
  text-align:left;transition:transform .5s var(--spring)}
.sp:hover{transform:translateX(2px)}
.sp .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--bg);
  border:1px solid rgba(255,255,255,.24);position:relative;z-index:2;
  transition:transform .55s var(--spring),border-color .4s,box-shadow .5s,background .4s}
.sp:hover .dot{border-color:var(--cyan);transform:scale(1.3)}
.sp .y{font-family:var(--mono);font-size:11.5px;color:var(--dim);transition:color .35s}
.sp:hover .y{color:var(--ice)}
.sp[aria-current=true] .dot{background:var(--cyan);border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(76,195,240,.13),0 0 15px 2px rgba(76,195,240,.5)}
.sp[aria-current=true] .y{color:#fff}
.eng{border-top:1px solid var(--edge)}
.er{border-bottom:1px solid var(--edge);scroll-margin-top:108px}
.erq{display:grid;grid-template-columns:108px 1fr 22px;align-items:center;gap:clamp(12px,2vw,24px);
  width:100%;padding:19px 4px;text-align:left;
  transition:padding-left .5s var(--spring),background .35s ease}
.er:hover .erq{background:rgba(255,255,255,.03);padding-left:12px}
.ery{font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.015em;
  transition:color .35s ease}
.ert{font-size:15.5px;font-weight:500;letter-spacing:-.018em;line-height:1.35;
  transition:color .35s ease}
.er:hover .ert,.er.is-open .ert{color:#fff}
.er.is-open .ery{color:var(--cyan)}
.erc{position:relative;width:11px;height:11px;justify-self:end}
.erc::before,.erc::after{content:"";position:absolute;left:0;top:5px;width:11px;height:1.4px;
  background:var(--dim);border-radius:2px;transition:transform .5s var(--spring),background .35s}
.erc::after{transform:rotate(90deg)}
.er.is-open .erc::before,.er.is-open .erc::after{background:var(--cyan)}
.er.is-open .erc::after{transform:rotate(0)}

/* grid-rows trick animates to auto height without measuring */
.era{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--spring),opacity .4s ease;opacity:0}
.er.is-open .era{grid-template-rows:1fr;opacity:1}
.erin{overflow:hidden}
.er.is-open .erin{padding:0 4px 22px}
.erin p{max-width:74ch;color:var(--soft);font-size:14.5px;line-height:1.72;
  padding-left:clamp(0px,calc(108px + 2vw),132px)}
.erin p b{color:var(--ice);font-weight:600}
.ero{display:inline-block;margin-top:14px;margin-left:clamp(0px,calc(108px + 2vw),132px);
  padding:5px 13px;border-radius:999px;font-size:11.5px;font-weight:500;
  background:rgba(76,195,240,.1);border:1px solid rgba(76,195,240,.26);color:var(--ice)}
@media(max-width:860px){
  .recx{grid-template-columns:1fr;gap:0}
  .spine{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;
    padding:0 0 4px;margin-bottom:14px}
  .spine::-webkit-scrollbar{display:none}
  .spine::before{left:0;right:0;top:9px;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,var(--edge) 10%,var(--edge) 90%,transparent)}
  .sp{flex-direction:column;align-items:center;gap:10px;min-width:60px;flex:1}
  .sp:hover{transform:none}
}
@media(max-width:700px){
  .erq{grid-template-columns:1fr 22px;gap:8px}
  .ery{grid-column:1/-1;font-size:11px}
  .erin p,.ero{padding-left:0;margin-left:0}
}

/* ---------- Layer-1 statement ---------- */
.l1bar{display:flex;align-items:flex-start;gap:clamp(14px,2.4vw,26px);
  margin-top:clamp(26px,4vh,40px);padding:18px clamp(17px,2.4vw,24px);
  border:1px solid rgba(76,176,226,.3);border-radius:15px;
  background:linear-gradient(100deg,rgba(76,176,226,.12),rgba(76,176,226,.03) 62%)}
.l1k{display:flex;align-items:center;gap:8px;flex:none;padding:6px 13px;border-radius:999px;
  background:linear-gradient(180deg,#5fbce9,#3a9fd6);color:#041019;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.l1k span{width:6px;height:6px;border-radius:50%;background:#041019;opacity:.8;
  animation:beat 2.6s ease-in-out infinite}
.l1bar p{color:var(--soft);font-size:14.5px;line-height:1.68;max-width:78ch}
.l1bar p b{color:#fff;font-weight:600}
@media(prefers-reduced-motion:reduce){.l1k span{animation:none}}
@media(max-width:700px){.l1bar{flex-direction:column;gap:12px}}

/* ---------- enterprise ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;
  margin-top:clamp(28px,4.5vh,48px)}
@media(max-width:980px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid3{grid-template-columns:1fr}}
#enterprise .note a{color:var(--cyan);text-decoration:none}
#enterprise .note a:hover{text-decoration:underline}

/* ---------- DIONS lineage strip ---------- */
.lineage{display:flex;align-items:stretch;flex-wrap:wrap;gap:0;
  margin-top:clamp(24px,3.6vh,36px);border:1px solid var(--edge);border-radius:15px;
  background:var(--glass);overflow:hidden}
.lineage > span{flex:1 1 170px;min-width:0;padding:15px 18px 16px;display:flex;flex-direction:column;
  gap:5px;font-size:13.5px;color:var(--soft);letter-spacing:-.008em}
.lineage em{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.04em;
  color:var(--dim)}
.lineage > i{flex:none;width:1px;align-self:stretch;
  background:linear-gradient(180deg,transparent,var(--edge) 22%,var(--edge) 78%,transparent)}
.lineage .lv{color:var(--fg)}
.lineage .lv em{color:var(--cyan)}
.lineage .lv::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 11px 2px rgba(76,195,240,.75);animation:beat 2.6s ease-in-out infinite;margin-top:2px}
.lineage .lnx{background:linear-gradient(180deg,rgba(76,176,226,.12),rgba(76,176,226,.03));
  color:var(--ice)}
.lineage .lnx em{color:var(--ice)}
@media(prefers-reduced-motion:reduce){.lineage .lv::after{animation:none}}
@media(max-width:780px){
  .lineage{flex-direction:column}
  .lineage > i{width:auto;height:1px;
    background:linear-gradient(90deg,transparent,var(--edge) 10%,var(--edge) 90%,transparent)}
}

/* ---------- wallet comparison ---------- */
.wcmp{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:clamp(30px,5vh,52px)}
@media(max-width:860px){.wcmp{grid-template-columns:1fr}}
.wc{padding:26px 25px 28px;display:flex;flex-direction:column}
.wtag{align-self:flex-start;padding:4px 11px;border-radius:999px;font-size:10.5px;font-weight:600;
  letter-spacing:.03em;background:linear-gradient(180deg,#fff,#cfe9f7);color:#061018}
.wtag-alt{background:rgba(255,255,255,.08);color:var(--soft);border:1px solid var(--edge)}
.wc h3{margin-top:14px;font-size:20px;font-weight:600;letter-spacing:-.03em}
.wsub{margin-top:4px;font-size:12px;color:var(--dim)}
.wc > p:not(.wsub){margin-top:12px;color:var(--soft);font-size:14px;line-height:1.64}
.wlist{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.wlist li{position:relative;padding-left:21px;color:var(--soft);font-size:13.5px;line-height:1.5}
.wlist li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:6px;
  border-left:1.6px solid var(--cyan);border-bottom:1.6px solid var(--cyan);transform:rotate(-45deg)}
.wc-pick{border-color:rgba(76,195,240,.34);background:rgba(76,195,240,.055)}
.wc{position:relative;overflow:hidden}
.wtag-ioc{background:linear-gradient(180deg,#5fbce9,#3a9fd6);color:#041019;border:0;
  box-shadow:0 2px 12px -2px rgba(76,176,226,.7)}
.wc-aurora{border-color:rgba(76,176,226,.46);
  background:linear-gradient(180deg,rgba(76,176,226,.125),rgba(76,176,226,.035))}
.wc-aurora::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#4cb0e2 20%,#7fd4f5 50%,#4cb0e2 80%,transparent)}
.wc-aurora h3{color:#7fd0f3}
.wc-aurora .wlist li::before{border-color:#7fd0f3}
.wc-aurora:hover{border-color:rgba(76,176,226,.7);
  background:linear-gradient(180deg,rgba(76,176,226,.17),rgba(76,176,226,.05))}

/* ---------- archive: compact rows, not big boxes ---------- */
.posts{display:flex;flex-direction:column;gap:0;margin-top:clamp(28px,4.5vh,46px);
  border-top:1px solid var(--edge)}
.post{display:grid;grid-template-columns:118px 1fr auto;align-items:baseline;gap:clamp(12px,2vw,26px);
  padding:15px 4px;border-bottom:1px solid var(--edge);text-decoration:none;border-radius:0;
  background:none;transform:none;
  transition:background .35s ease,padding-left .45s var(--spring)}
.post::before{display:none}
.post:hover{transform:none;background:rgba(255,255,255,.035);padding-left:12px;border-color:var(--edge)}
.pmeta{font-size:11.5px;color:var(--dim);white-space:nowrap}
.pmeta i{display:none}
.post h3{margin:0;font-size:14.5px;font-weight:500;letter-spacing:-.016em;line-height:1.4}
.post p{display:none}
.pgo{font-size:11.5px;color:var(--dim);white-space:nowrap}
.post:hover .pgo{color:var(--cyan);transform:none}
.post:hover h3{color:#fff}
@media(max-width:700px){
  .post{grid-template-columns:1fr;gap:4px;padding:13px 4px}
  .pgo{display:none}
}

/* ---------- archive: thumbnail rows ---------- */
.posts{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(18px,3vw,40px);
  margin-top:clamp(28px,4.5vh,46px);border-top:1px solid var(--edge)}
@media(max-width:820px){.posts{grid-template-columns:1fr}}
.post{display:grid;grid-template-columns:44px 1fr 14px;align-items:center;gap:15px;
  padding:14px 6px;border-bottom:1px solid var(--edge);text-decoration:none;
  border-radius:0;background:none;transform:none;
  transition:background .35s ease,padding-left .5s var(--spring)}
.post::before{display:none}
.post:hover{transform:none;background:rgba(255,255,255,.035);padding-left:13px;border-color:var(--edge)}
.pth{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;
  border:1px solid var(--edge);filter:saturate(.8);
  transition:filter .4s ease,border-color .4s ease}
.post:hover .pth{filter:saturate(1);border-color:rgba(255,255,255,.2)}
.pth-x{display:block;background:rgba(255,255,255,.05)}
.pbody{min-width:0}
.ptitle{display:block;font-size:14px;font-weight:500;letter-spacing:-.016em;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  transition:color .35s ease}
.post:hover .ptitle{color:#fff}
.pmeta{display:block;margin-top:3px;font-size:11px;color:var(--dim);white-space:nowrap}
.pgo{position:relative;width:14px;height:14px;justify-self:end;opacity:.42;
  transition:opacity .4s ease,transform .5s var(--spring)}
.pgo::before{content:"";position:absolute;left:3px;top:4px;width:6px;height:6px;
  border-top:1.4px solid var(--soft);border-right:1.4px solid var(--soft);transform:rotate(45deg)}
.post:hover .pgo{opacity:1;transform:translateX(3px)}
.post:hover .pgo::before{border-color:var(--cyan)}

/* ---------- chain specs strip ---------- */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:clamp(28px,4.5vh,46px)}
@media(max-width:720px){.specs{grid-template-columns:repeat(2,1fr)}}
.specs > div{padding:15px 17px;border-radius:13px;border:1px solid var(--edge);
  background:rgba(255,255,255,.028)}
.specs dt{font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.specs dd{margin:6px 0 0;font-size:16px;font-weight:600;letter-spacing:-.022em}

/* ---------- foundation logo ---------- */
.flogo{display:block;width:46px;height:46px;margin-bottom:14px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid var(--edge);padding:7px}
/* the icon is a link to the source now, so it gets a hover state */
.flogo-gh{display:grid;place-items:center;color:var(--ice);
  transition:color .4s ease,border-color .4s ease,background .4s ease,transform .5s var(--spring)}
.flogo-gh svg{width:24px;height:24px;fill:currentColor}
.flogo-gh:hover{color:#fff;transform:translateY(-2px);border-color:rgba(76,176,226,.5);
  background:rgba(76,176,226,.12)}
.flinks{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
.flinks .flink{margin-top:0}

/* ---------- hero field: starfield + ledger river ---------- */

/* the coin sits above the field */

/* ===== hero, replicated from the live site ===== */
/* ===================== HERO v3 — "It never stopped." =====================
   Full-bleed dark stage. The ledger river along the bottom is the proof made
   visual: every bar a block, three parallax lanes so older blocks sit further
   back, and the stream never breaks. */
.heroX{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;isolation:isolate;
  padding-top:var(--nav-h);
  background:#01060f;
}
.hx-sky{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 78% at 50% 112%, rgba(32,184,236,.30) 0%, rgba(18,123,216,.13) 34%, transparent 66%),
    radial-gradient(90% 60% at 76% 6%, rgba(90,160,255,.11), transparent 60%),
    linear-gradient(180deg,#01060f 0%,#03101f 44%,#04142c 74%,#061f3f 100%);}
.hx-stars{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
.hx-river{position:absolute;left:0;right:0;bottom:0;z-index:1;width:100%;height:46vh;display:block}
/* The horizon was pinned to a fixed 46vh, so on any viewport where the hero
   copy reached that band the line ran straight through the text (and through
   the CTA buttons on a phone). The river's own top edge and the rail border
   already read as the horizon, so the separate line is gone. */

.hx-stage{position:relative;z-index:3;flex:1;display:grid;align-content:center;justify-items:center;
  text-align:center;gap:clamp(14px,2vh,24px);
  padding:clamp(10px,2vh,30px) clamp(20px,5vw,66px) 0;
  max-width:1180px;margin:0 auto;width:100%}

.hx-kicker{display:inline-flex;align-items:center;gap:12px;margin:0;
  font-size:10.5px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(159,224,255,.82)}
.hx-kicker i{width:5px;height:5px;border-radius:50%;background:#20b8ec;
  box-shadow:0 0 12px 3px rgba(32,184,236,.7);animation:hxBeat 2.6s ease-in-out infinite}
@keyframes hxBeat{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}

.heroX h1{margin:0;
  font-size:clamp(2.9rem,min(11vw,14.5vh),9.5rem);
  font-weight:880;line-height:.87;letter-spacing:-.044em;
  background:linear-gradient(177deg,#fff 14%,#dff0ff 46%,#9fe0ff 74%,#20b8ec 104%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 46px rgba(32,184,236,.26))}

.hx-sub{max-width:54ch;margin:0;color:rgba(246,248,248,.70);
  font-size:clamp(14px,1.4vw,17px);font-weight:450;line-height:1.7}
.hx-sub b{color:#fff;font-weight:750}

.hx-since{display:inline-flex;align-items:center;gap:14px;margin:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(159,224,255,.72)}
.hx-since span{height:1px;width:clamp(24px,5vw,60px);
  background:linear-gradient(90deg,transparent,rgba(159,224,255,.55),transparent)}

.hx-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(2px,1vh,8px)}

/* proof rail — all six facts preserved from the original hero */
.hx-rail{position:relative;z-index:3;border-top:1px solid rgba(159,224,255,.12);
  background:linear-gradient(180deg,rgba(1,6,15,0),rgba(1,6,15,.72));
  }
.hx-rail-in{display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,66px)}
.hx-rail-in > div{position:relative;padding:clamp(12px,1.8vh,20px) 0 clamp(14px,2vh,22px);text-align:left}
.hx-rail-in > div + div{padding-left:clamp(10px,1.6vw,24px)}
.hx-rail-in > div + div::before{content:"";position:absolute;left:0;top:16px;bottom:18px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(159,224,255,.18),transparent)}
.hx-rail-in dt{font-size:8.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(159,224,255,.5);margin:0 0 7px}
.hx-rail-in dd{margin:0;font-size:clamp(13px,1.25vw,17px);font-weight:800;color:#fff;line-height:1.15}
.hx-rail-in dd em{font-style:normal;font-family:var(--mono);font-size:.85em;color:#9fe0ff}
.hx-rail-in span{display:block;margin-top:4px;font-size:10px;font-weight:600;color:rgba(246,248,248,.38)}

@media(max-width:1080px){
  .hx-rail-in{grid-template-columns:repeat(3,1fr)}
  /* the + div rule skips only the FIRST item, so once the grid wraps the
     left-hand column no longer lines up. Zero it for every row start. */
  .hx-rail-in > div:nth-child(3n+1){padding-left:0}
  .hx-rail-in > div:nth-child(3n+1)+div::before,
  .hx-rail-in > div:nth-child(4)::before{display:block}
  .hx-rail-in > div:nth-child(4)::before{display:none}
}
@media(max-width:700px){
  .hx-rail-in{grid-template-columns:repeat(2,1fr)}
  .hx-rail-in > div:nth-child(3n+1){padding-left:10px}
  .hx-rail-in > div:nth-child(odd){padding-left:0}
  .hx-rail-in > div:nth-child(odd)::before{display:none}
  .hx-river{height:30vh}
  .hx-rail{border-top-color:rgba(159,224,255,.2);
    box-shadow:0 -16px 34px -20px rgba(32,184,236,.55)}
  /* .3em tracking is handsome on a wide screen and sprawling on a narrow one */
  .hx-kicker{font-size:10px;letter-spacing:.14em;gap:9px}
  .hx-since{font-size:10px;letter-spacing:.12em;gap:10px}
  .hx-sub{font-size:13.8px;line-height:1.58}
  .hx-stage{gap:18px;padding-bottom:8px}
  .hx-cta{gap:10px}
  .heroX .btn{padding:13px 24px}
}
@media(prefers-reduced-motion:reduce){.hx-kicker i{animation:none}}

/* the hero owns the field; keep the page's own type rules off it */
.heroX h1{font-size:clamp(2.5rem,min(6.6vw,9.5vh),4.5rem);line-height:.94;letter-spacing:-.035em;
  background:linear-gradient(177deg,#fff 14%,#dff0ff 46%,#9fe0ff 74%,#20b8ec 104%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 46px rgba(32,184,236,.26));margin:0;max-width:none}
.heroX .hx-sub{font-size:clamp(14px,1.05vw,16.5px);line-height:1.75;max-width:56ch}
.heroX .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;
  font-size:13.5px;font-weight:600;letter-spacing:-.008em;text-decoration:none;
  transition:transform .55s var(--spring),box-shadow .55s var(--spring),background .4s ease}
.heroX .btn-primary{color:#061018;background:linear-gradient(180deg,#fff,#cfe9f7);
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 10px 30px rgba(0,0,0,.45)}
.heroX .btn-primary:hover{transform:translateY(-2px)}
.heroX .btn-ghost{color:var(--fg);border:1px solid var(--edge);background:rgba(255,255,255,.05);
  }
.heroX .btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.1)}

/* ======================= community assistant ======================= */
.iocbot {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.iocbot-launch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #20b8ec 0%, #127bd8 55%, #0c72c2 100%);
  box-shadow: 0 10px 28px rgba(6, 27, 58, 0.34);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.iocbot-launch:hover,
.iocbot-launch:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(6, 27, 58, 0.42);
}
.iocbot-launch svg { width: 20px; height: 20px; display: block; }
.iocbot.is-open .iocbot-ic-chat { display: none; }

.iocbot-panel {
  display: flex;
  flex-direction: column;
  width: min(384px, calc(100vw - 28px));
  height: min(548px, calc(100vh - 128px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: #061b3a;
  box-shadow: 0 26px 70px rgba(4, 16, 36, 0.52);
}
.iocbot-panel[hidden] { display: none; }

.iocbot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, #0c72c2 0%, #09264d 100%);
}
.iocbot-title { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.iocbot-title strong { color: #fff; font-size: 14.5px; font-weight: 800; }
.iocbot-title span { color: rgba(255, 255, 255, 0.62); font-size: 11.5px; font-weight: 600; }
.iocbot-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 160ms ease;
}
.iocbot-x:hover, .iocbot-x:focus-visible { background: rgba(255, 255, 255, 0.26); }
.iocbot-x svg { width: 15px; height: 15px; }

.iocbot-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  background:
    radial-gradient(circle at 12% 0%, rgba(32, 184, 236, 0.13), transparent 20rem),
    #061b3a;
}

.iocbot-row { display: flex; }
.iocbot-row.iocbot-user { justify-content: flex-end; }

.iocbot-bubble {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.58;
  word-wrap: break-word;
}
.iocbot-bot .iocbot-bubble {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-bottom-left-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.90);
}
.iocbot-user .iocbot-bubble {
  border-bottom-right-radius: 5px;
  background: linear-gradient(135deg, #20b8ec, #127bd8);
  color: #fff;
  font-weight: 620;
}
.iocbot-bubble a { color: #6fd4ff; font-weight: 700; text-decoration: underline; }
.iocbot-bubble a:hover { color: #a5e6ff; }
.iocbot-bubble code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.32);
  font-family: var(--mono);
  font-size: 12px;
}
.iocbot-bubble strong { color: #fff; font-weight: 750; }

.iocbot-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.iocbot-chip {
  padding: 7px 12px;
  border: 1px solid rgba(111, 212, 255, 0.42);
  border-radius: 999px;
  background: rgba(32, 184, 236, 0.10);
  color: #9fe0ff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 680;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.iocbot-chip:hover, .iocbot-chip:focus-visible {
  border-color: #6fd4ff;
  background: rgba(32, 184, 236, 0.24);
  color: #fff;
}

.iocbot-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.iocbot-typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  animation: iocbot-blink 1.25s infinite ease-in-out;
}
.iocbot-typing i:nth-child(2) { animation-delay: 0.18s; }
.iocbot-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes iocbot-blink {
  0%, 80%, 100% { opacity: 0.28; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.iocbot-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
}
.iocbot-input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 560;
}
.iocbot-input::placeholder { color: rgba(255, 255, 255, 0.44); }
.iocbot-input:focus {
  outline: none;
  border-color: #20b8ec;
  background: rgba(255, 255, 255, 0.11);
}
.iocbot-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #20b8ec, #127bd8);
  color: #fff;
  cursor: pointer;
  transition: transform 160ms ease;
}
.iocbot-send:hover, .iocbot-send:focus-visible { transform: scale(1.07); }
.iocbot-send svg { width: 18px; height: 18px; }

@media (max-width: 480px) {
  .iocbot { right: 10px; bottom: 10px; left: 10px; align-items: stretch; }
  .iocbot-panel { width: 100%; height: min(70vh, 520px); }
  .iocbot-launch { align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .iocbot-launch, .iocbot-send, .iocbot-chip, .iocbot-x { transition: none; }
  .iocbot-launch:hover, .iocbot-launch:focus-visible { transform: none; }
  .iocbot-send:hover, .iocbot-send:focus-visible { transform: none; }
  .iocbot-typing i { animation: none; opacity: 0.6; }
}

/* ---- widget wallet lead block ---- */
.wallet-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  margin: 10px 0 34px;
}

.wallet-shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 44px rgba(6, 27, 58, 0.14);
}
.wallet-shot img { display: block; width: 100%; height: auto; }

.wallet-tag {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.wallet-lead-copy h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 800;
  line-height: 1.18;
}
.wallet-lead-copy p {
  margin: 0 0 12px;
  color: var(--soft);
  font-size: 15px;
  line-height: 1.62;
}
.wallet-lead-copy code {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(18, 123, 216, 0.09);
  color: #0d5fa8;
  font-family: var(--mono);
  font-size: 13px;
}
.wallet-verify {
  padding-left: 13px;
  border-left: 3px solid var(--cyan);
  font-weight: 620;
}
.wallet-verify a { color: var(--blue); font-weight: 750; text-decoration: underline; }

.wallet-arm-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}
.wallet-arm-note a { color: var(--blue); font-weight: 700; text-decoration: underline; }

.wallet-sub {
  margin: 46px 0 -6px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

@media (max-width: 860px) {
  .wallet-lead { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- chat launcher: chat icon, I/O Coin blue, right side ---------- */
.iocbot{right:clamp(16px,2.4vw,30px) !important;bottom:clamp(16px,2.4vw,30px) !important;
  left:auto !important;align-items:flex-end !important}
.iocbot-launch{
  gap:9px;padding:12px 21px;
  background:linear-gradient(135deg,#2ab3ea 0%,#127bd8 60%,#0b4f97 100%);
  box-shadow:0 10px 30px rgba(11,79,151,.45),0 1px 0 rgba(255,255,255,.18) inset;
}
.iocbot-launch:hover,.iocbot-launch:focus-visible{
  box-shadow:0 16px 40px rgba(11,79,151,.58),0 1px 0 rgba(255,255,255,.25) inset}
.iocbot-launch svg{width:19px;height:19px;display:block;color:#fff}
.iocbot-launch-label{font-size:13.5px;font-weight:600;letter-spacing:-.008em}
@media(max-width:480px){.iocbot{left:auto !important;right:14px !important}}

/* =======================================================================
   HERO COLOUR RESTORE
   The page-level aura plus a stack of backdrop-filters was washing the hero
   out. The hero now paints its own opaque field above them, exactly as the
   original did, and the rail uses a solid tint instead of another blur.
   ======================================================================= */
.heroX{
  position:relative;z-index:5;isolation:isolate;
  background:
    radial-gradient(120% 78% at 50% 112%, rgba(32,184,236,.30) 0%, rgba(18,123,216,.13) 34%, transparent 66%),
    radial-gradient(90% 60% at 76% 6%, rgba(90,160,255,.11), transparent 60%),
    linear-gradient(180deg,#01060f 0%,#03101f 44%,#04142c 74%,#061f3f 100%);
}
.heroX .hx-sky{background:none}          /* the section owns the gradient now */

.hx-rail{
  
  background:linear-gradient(180deg, rgba(1,6,15,.55), rgba(1,6,15,.88));
}

/* keep the ambient light off the hero so its navy stays true */
.heroX ~ * .aura{opacity:1}

/* ===== hero: "It never stopped." ===== */
/* ===================== HERO v3 — "It never stopped." =====================
   Full-bleed dark stage. The ledger river along the bottom is the proof made
   visual: every bar a block, three parallax lanes so older blocks sit further
   back, and the stream never breaks. */
.heroX{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;isolation:isolate;
  padding-top:var(--nav-h);
  background:#01060f;
}
.hx-sky{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 78% at 50% 112%, rgba(32,184,236,.30) 0%, rgba(18,123,216,.13) 34%, transparent 66%),
    radial-gradient(90% 60% at 76% 6%, rgba(90,160,255,.11), transparent 60%),
    linear-gradient(180deg,#01060f 0%,#03101f 44%,#04142c 74%,#061f3f 100%);}
.hx-stars{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
.hx-river{position:absolute;left:0;right:0;bottom:0;z-index:1;width:100%;height:46vh;display:block}

.hx-stage{position:relative;z-index:3;flex:1;display:grid;align-content:center;justify-items:center;
  text-align:center;gap:clamp(14px,2vh,24px);
  padding:clamp(10px,2vh,30px) clamp(20px,5vw,66px) 0;
  max-width:1180px;margin:0 auto;width:100%}

.hx-kicker{display:inline-flex;align-items:center;gap:12px;margin:0;
  font-size:10.5px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(159,224,255,.82)}
.hx-kicker i{width:5px;height:5px;border-radius:50%;background:#20b8ec;
  box-shadow:0 0 12px 3px rgba(32,184,236,.7);animation:hxBeat 2.6s ease-in-out infinite}
@keyframes hxBeat{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}

.heroX h1{margin:0;
  font-size:clamp(2.9rem,min(11vw,14.5vh),9.5rem);
  font-weight:880;line-height:.87;letter-spacing:-.044em;
  background:linear-gradient(177deg,#fff 14%,#dff0ff 46%,#9fe0ff 74%,#20b8ec 104%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 46px rgba(32,184,236,.26))}

.hx-sub{max-width:54ch;margin:0;color:rgba(246,248,248,.70);
  font-size:clamp(14px,1.4vw,17px);font-weight:450;line-height:1.7}
.hx-sub b{color:#fff;font-weight:750}

.hx-since{display:inline-flex;align-items:center;gap:14px;margin:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(159,224,255,.72)}
.hx-since span{height:1px;width:clamp(24px,5vw,60px);
  background:linear-gradient(90deg,transparent,rgba(159,224,255,.55),transparent)}

.hx-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(2px,1vh,8px)}

/* proof rail — all six facts preserved from the original hero */
.hx-rail{position:relative;z-index:3;border-top:1px solid rgba(159,224,255,.12);
  background:linear-gradient(180deg,rgba(1,6,15,0),rgba(1,6,15,.72));
  }
.hx-rail-in{display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,66px)}
.hx-rail-in > div{position:relative;padding:clamp(12px,1.8vh,20px) 0 clamp(14px,2vh,22px);text-align:left}
.hx-rail-in > div + div{padding-left:clamp(10px,1.6vw,24px)}
.hx-rail-in > div + div::before{content:"";position:absolute;left:0;top:16px;bottom:18px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(159,224,255,.18),transparent)}
.hx-rail-in dt{font-size:8.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(159,224,255,.5);margin:0 0 7px}
.hx-rail-in dd{margin:0;font-size:clamp(13px,1.25vw,17px);font-weight:800;color:#fff;line-height:1.15}
.hx-rail-in dd em{font-style:normal;font-family:var(--mono);font-size:.85em;color:#9fe0ff}
.hx-rail-in span{display:block;margin-top:4px;font-size:10px;font-weight:600;color:rgba(246,248,248,.38)}

@media(max-width:1080px){
  .hx-rail-in{grid-template-columns:repeat(3,1fr)}
  .hx-rail-in > div:nth-child(3n+1)+div::before,
  .hx-rail-in > div:nth-child(4)::before{display:block}
  .hx-rail-in > div:nth-child(4)::before{display:none}
}
@media(max-width:700px){
  .hx-rail-in{grid-template-columns:repeat(2,1fr)}
  .hx-rail-in > div:nth-child(odd)::before{display:none}
  .hx-river{height:38vh}
}
@media(prefers-reduced-motion:reduce){.hx-kicker i{animation:none}}

/* ===== single coherent fix block =====
   No blur, no backdrop-filter, no blend modes: those flattened the page into
   a grey wash. Sections are opaque so scrolling never shows a white tile. */
html,body{background:#05080f;color:#f2f6fa}
section,footer{background-color:#05080f}
section:nth-of-type(even){background-color:#05080f}
body>nav:not(.sidex){background:rgba(5,8,15,.94)}
.card,.glass{background:rgba(255,255,255,.05)}
.kick,.btn.b2,.b2,.seg,.tagv,.allposts,.srclinks a,.aur-links a{background:rgba(255,255,255,.06)}
.iocbot-panel{background:#061b3a}
.iocbot-form{background:rgba(0,0,0,.3)}

/* chat launcher: chat icon, I/O Coin blue, right side */
.iocbot{right:clamp(16px,2.4vw,30px) !important;bottom:clamp(16px,2.4vw,30px) !important;
  left:auto !important;align-items:flex-end !important}
.iocbot-launch{gap:9px;padding:12px 21px;
  background:linear-gradient(135deg,#2ab3ea 0%,#127bd8 60%,#0b4f97 100%);
  box-shadow:0 10px 30px rgba(11,79,151,.45),0 1px 0 rgba(255,255,255,.18) inset}
.iocbot-launch svg{width:19px;height:19px;display:block;color:#fff}
.iocbot-launch-label{font-size:13.5px;font-weight:600}


/* ===== one continuous dark, no alternating bands ===== */
html,body{background:#05080f}
section,footer,.sec{background-color:#05080f;background-image:none}
section:nth-of-type(even),section:nth-of-type(odd),
.sec:nth-of-type(even),.sec:nth-of-type(odd),
.white-section.story,#records,#stack,#faq,#pressure,.mesh-section,#access{
  background-color:#05080f;background-image:none;
}
.heroX{background-color:#05080f}

/* ===== Safari fixes ===== */
/* svh is unreliable in older Safari; give it a vh fallback first */
.heroX{min-height:100vh;min-height:100svh}
/* gradient text needs the webkit pair or Safari renders it solid/invisible */
h1,h2,.head h2,.heroX h1{-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
/* Safari <16 cannot animate grid-template-rows; fall back to max-height */
@supports not (grid-template-rows: 1fr) {
  .era,.laya{display:block;max-height:0;overflow:hidden;
    transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .4s ease}
  .er.is-open .era,.lay.is-open .laya{max-height:620px}
}
/* canvases: let Safari promote them cleanly instead of repainting each frame */
.hx-stars,.hx-river{transform:translateZ(0);-webkit-transform:translateZ(0)}
/* flex gap fallback for older Safari */
@supports not (gap: 1px) {
  .cta > * + *,.hx-cta > * + *{margin-left:11px}
}

/* The trailing period in "stopped." was being sliced: letter-spacing is -.044em
   and applies after the LAST glyph too, so the element's box ends ~5px inside
   the dot's ink — and background-clip:text paints nothing outside that box.
   Widen the paint box to the right and pull the margin box back by the same
   amount, so the glyph is painted whole and the centring does not move. */
.heroX h1{padding-right:.07em;margin-right:-.07em}

/* ---------- mobile: tap targets and a launcher that does not eat the screen ---------- */
@media(max-width:760px){
  .mobnav a{padding-top:14px;padding-bottom:14px}          /* ~44px rows */
  .burger{padding:12px 4px}
  .fnav a{margin-top:0;padding:11px 0}
  .flink,.verify,.allposts{padding:9px 0}
  .social a{width:42px;height:42px}
  .lg{padding:7px 0}
  /* icon-only launcher: the "Ask" label costs a third of a 375px row */
  .iocbot-launch{padding:0;width:52px;height:52px;border-radius:50%;justify-content:center}
  .iocbot-launch-label{display:none}
  /* nothing important should sit under the fixed launcher */
  footer{padding-bottom:84px}
}
/* label sizes: 10px is fine for a mono key, not for anything read as a sentence */
@media(max-width:560px){
  .hx-kicker{font-size:11px;letter-spacing:.16em}
  .lineage em,.gcap{font-size:10.5px}
}

/* ================= scroll instrumentation ================= */
/* A section readout under the nav and a vertical index on the right margin.
   Both are pure CSS/JS — no scroll library, nothing loaded from a third party. */

.metabar{position:sticky;top:var(--navh,56px);z-index:28;
  background:#05080f;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);opacity:0;transform:translateY(-6px);
  transition:opacity .5s ease,transform .5s var(--spring);pointer-events:none}
.mb-in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1160px;margin:0 auto;padding:8px clamp(20px,5vw,40px)}
.metabar.on{opacity:1;transform:none}
.mb-l{display:flex;align-items:center;gap:8px;min-width:0}
.mb-l i{flex:none;width:5px;height:5px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 9px 1px rgba(76,195,240,.75);animation:beat 2.6s ease-in-out infinite}
.mb-l em{font-style:normal;color:var(--cyan)}
.mb-l b{font-weight:600;color:var(--ice);letter-spacing:.11em}
.mb-r{color:var(--dim);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(prefers-reduced-motion:reduce){.mb-l i{animation:none}}
@media(max-width:760px){.metabar{font-size:9.5px;letter-spacing:.08em}.mb-r{display:none}}

.sidex{position:fixed;right:clamp(12px,1.6vw,22px);top:50%;transform:translateY(-50%);z-index:26;
  display:flex;flex-direction:column;align-items:flex-end;gap:9px;pointer-events:none}
.sidex b{display:flex;align-items:center;gap:9px;font-weight:600;font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(154,167,184,.34);white-space:nowrap;
  transition:color .55s ease,font-size .55s var(--spring),letter-spacing .55s var(--spring)}
.sidex b::after{content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background:rgba(154,167,184,.3);
  transition:background .5s ease,box-shadow .5s ease,transform .55s var(--spring)}
.sidex b.on{color:#fff;font-size:15px;letter-spacing:.07em}
.sidex b.on::after{background:var(--cyan);transform:scale(1.25);
  box-shadow:0 0 0 4px rgba(76,195,240,.13),0 0 15px 2px rgba(76,195,240,.6)}
.sidex b.past{color:rgba(185,228,251,.5)}
.sidex b.past::after{background:rgba(76,195,240,.45)}
@media(max-width:1240px){.sidex{display:none}}

/* ---------- side rail: a measuring edge down the whole page ---------- */
.railx{position:fixed;top:0;right:0;bottom:0;width:62px;z-index:24;pointer-events:none;
  font-family:var(--mono);opacity:0;transition:opacity .9s ease}
.railx.on{opacity:1}
.rx-line{position:absolute;top:0;bottom:0;right:17px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.1) 9%,
    rgba(255,255,255,.1) 91%,transparent)}
.rx-ticks{position:absolute;inset:0}
.rx-t{position:absolute;right:17px;height:1px;background:rgba(255,255,255,.14)}
.rx-t.min{width:5px}
.rx-t.maj{width:11px;background:rgba(185,228,251,.3)}
.rx-n{position:absolute;right:34px;transform:translateY(-50%);
  font-size:8.5px;letter-spacing:.08em;color:rgba(154,167,184,.42);white-space:nowrap}
/* the live head: where you are, reading against the ticks */
.rx-head{position:absolute;right:11px;width:13px;height:13px;margin-top:-6.5px;
  display:flex;align-items:center;justify-content:flex-end;
  transition:top .12s linear}
.rx-head::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 4px rgba(76,195,240,.13),0 0 16px 3px rgba(76,195,240,.6)}
.rx-head span{position:absolute;right:20px;font-size:9px;letter-spacing:.06em;
  color:var(--ice);background:#05080f;padding:2px 5px;border-radius:4px}
@media(max-width:1240px){.railx{display:none}}

/* the section index rides just inboard of the rail */
.sidex{right:76px;background:none;border:0}

/* ================= mobile optimisation pass ================= */
@media(max-width:760px){
  /* Sections were leaving up to 236px of dead space at every boundary on a
     phone — 11vh top and bottom reads as generous on a desktop and as a hole
     on a 812px screen. */
  .sec{padding:clamp(40px,6vh,58px) 0}
  .head h2{font-size:clamp(1.6rem,7vw,2rem);line-height:1.12}
  .head p{font-size:14.5px;line-height:1.62}
  .head{max-width:none}

  /* the subject strip scrolls, but nothing said so — fade the right edge */
  .seg{position:relative;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}

  /* the launcher sat on top of body copy; smaller, tighter to the corner,
     and ringed so it reads as a control floating over the page */
  .iocbot-launch{width:46px;height:46px;
    box-shadow:0 0 0 5px rgba(5,8,15,.72),0 10px 26px -8px rgba(0,0,0,.8)}
  .iocbot{right:12px !important;bottom:12px !important}

  /* 8.5px is below the floor for anything anyone has to read */
  .hx-rail-in dt{font-size:9.5px;letter-spacing:.16em}
  .hx-rail-in span{font-size:10.5px}

  /* cards and rows: a little less chrome, a little more text */
  .feat{padding:20px 18px 22px}
  .wc{padding:22px 19px 24px}
  .fcard{padding:21px 19px 23px}
  .trio,.quad,.grid3,.fsplit{gap:11px}
}

/* ---------- mobile: card groups become swipe rows ---------- */
/* Stacked full-width cards turned the phone into an endless scroll. Laying
   each group out horizontally with snap points trades a very long vertical
   scroll for a short swipe, and the peeking next card is the affordance. */
@media(max-width:700px){
  .trio,.quad,.grid3,.wcmp,.fsplit{
    display:grid;grid-template-columns:none;
    grid-auto-flow:column;grid-auto-columns:81%;
    gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-left:-20px;margin-right:-20px;
    padding:2px 20px 12px;
  }
  .trio::-webkit-scrollbar,.quad::-webkit-scrollbar,
  .grid3::-webkit-scrollbar,.fsplit::-webkit-scrollbar{display:none}
  .trio > *,.quad > *,.grid3 > *,.fsplit > *{scroll-snap-align:start}
  /* the cards sit side by side now, so they need a common height */
  .trio > *,.quad > *,.grid3 > *{display:flex;flex-direction:column}
  .feat p{flex:1}

  /* the evidence pair and the specs strip stack tighter too */
  .ev{gap:11px}
  .specs{grid-template-columns:repeat(2,1fr);gap:9px}

  /* downloads: two per row instead of one tall column */
  .dls{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .dl{padding:13px 12px}
  .dl span b{font-size:12.5px}
  .dl span span{font-size:10.5px}
}

/* ---------- mobile: tighten the long lists and the footer ---------- */
@media(max-width:700px){
  /* 16 engineering rows at 19px padding each was the single tallest block
     on the page; the date line stays on its own row but costs far less */
  .erq{padding:13px 2px}
  .ery{font-size:10px;letter-spacing:.06em;opacity:.85}
  .ert{font-size:14.5px;line-height:1.3}
  .er.is-open .erin{padding-bottom:16px}
  .erin p{font-size:13.5px;line-height:1.62}

  /* nine proof rows */
  .proofs li{padding:11px 2px;row-gap:5px}
  .proofs h3{font-size:13.8px}
  .proofs p{font-size:12.5px;line-height:1.5;margin-top:3px}
  .proofs .done{font-size:9.5px;padding:2px 8px}

  /* the archive: ten full cards became ten compact rows */
  .posts{grid-template-columns:1fr;gap:0;border-top:1px solid var(--edge)}
  .post{flex-direction:row;align-items:center;gap:13px;padding:11px 2px;
    border-bottom:1px solid var(--edge);border-radius:0;background:none;border-left:0;border-right:0}
  .post:hover{transform:none;background:rgba(255,255,255,.028)}
  .post .pth{width:44px;height:44px;flex:none;border-radius:9px;object-fit:cover;margin:0}
  .post .pbody{flex:1;min-width:0}
  .post .ptitle{font-size:13.5px;line-height:1.3;display:block}
  .post .pmeta{font-size:10.5px;margin-top:3px;display:block}

  /* four stacked footer columns is a screen of its own */
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
  .fbrand{grid-column:1/-1}
  .fnav a{padding:8px 0;font-size:13px}
  footer{padding-top:clamp(32px,5vh,52px)}
}

/* ---------- mobile: the last two tall blocks ---------- */
@media(max-width:700px){
  /* four stacked stages ran to 685px for what is a summary strip */
  .lineage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex-direction:unset}
  .lineage > i{display:none}
  .lineage > span{padding:12px 13px 13px;font-size:12.5px;line-height:1.35}
  .lineage > span + span{border-left:1px solid var(--edge)}
  .lineage > span:nth-child(n+3){border-top:1px solid var(--edge)}
  .lineage em{font-size:9.5px}
  .lineage .lv::after{width:6px;height:6px}

  /* the status chip was taking a row of its own under every proof */
  .proofs li{grid-template-columns:26px minmax(0,1fr) auto;align-items:start;
    column-gap:9px;row-gap:3px}
  .proofs .done{grid-column:3;grid-row:1;justify-self:end;align-self:start;margin-top:1px}
  .proofs p{grid-column:2;grid-row:2}
}

/* the bootstrap tile sits in the download grid; it is optional, so it reads
   quieter than a wallet build rather than competing with them */
.dl-boot{border-style:dashed;border-color:rgba(159,224,255,.22)}
.dl-boot .os{color:var(--cyan)}
.dl-boot:hover{border-style:solid}

/* ---------- downloads open inside the wallet card ---------- */
.wcmp{align-items:start}
.wtoggle{display:flex;align-items:center;gap:10px;width:100%;margin-top:18px;padding:11px 14px;
  border-radius:11px;border:1px solid var(--edge);background:rgba(255,255,255,.04);
  font-size:13px;font-weight:600;color:var(--ice);text-align:left;
  transition:background .35s ease,border-color .35s ease,color .35s ease}
.wtoggle:hover{background:rgba(76,176,226,.1);border-color:rgba(76,176,226,.34);color:#fff}
.wtoggle-t{flex:1}
.wtoggle-n{font-family:var(--mono);font-size:11px;color:var(--dim);
  padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.06)}
.wtoggle i{position:relative;width:11px;height:11px;flex:none}
.wtoggle i::before,.wtoggle i::after{content:"";position:absolute;left:0;top:5px;width:11px;height:1.5px;
  background:currentColor;border-radius:2px;transition:transform .5s var(--spring),opacity .35s}
.wtoggle i::after{transform:rotate(90deg)}
.wc.is-open .wtoggle{background:rgba(76,176,226,.12);border-color:rgba(76,176,226,.4);color:#fff}
.wc.is-open .wtoggle i::after{transform:rotate(0);opacity:0}

/* the panel animates its own height, so the card grows rather than jumping */
.wdl{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .55s var(--spring),opacity .4s ease}
.wc.is-open .wdl{grid-template-rows:1fr;opacity:1}
.wdl-in{overflow:hidden;min-height:0}
/* two compact columns: one column of full tiles made a 1,075px card beside an
   empty one, and the growth threw the reader's scroll position */
.wdl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding-top:13px}
.wdl .dl{padding:10px 11px;gap:9px;border-radius:10px}
.wdl .dl .os{width:28px;height:28px;border-radius:8px}
.wdl .dl .os svg{width:14px;height:14px}
.wdl .dl b{font-size:12.5px}
.wdl .dl span span{font-size:10.5px}
.wdl .dl-boot{grid-column:1/-1}
@media(max-width:860px){.wdl-grid{grid-template-columns:1fr}}
/* each tile rises in behind the one before it */
.wdl .dl{opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .5s var(--spring),border-color .4s,background .4s}
.wc.is-open .wdl .dl{opacity:1;transform:none;
  transition-delay:calc(90ms + var(--i) * 45ms)}
.wdl-verify{display:inline-block;margin-top:13px;color:var(--cyan);text-decoration:none;
  font-size:12.5px;font-weight:500;opacity:0;transition:opacity .4s ease .34s,transform .45s var(--spring) .34s;
  transform:translateY(6px)}
.wc.is-open .wdl-verify{opacity:1;transform:none}
.wdl-verify:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){
  .wdl,.wdl .dl,.wdl-verify{transition:none}
}
.wdl-note{margin-top:12px;padding:11px 13px;border-radius:10px;
  border:1px solid var(--edge);background:rgba(255,255,255,.035);
  color:var(--soft);font-size:12.5px;line-height:1.55}
.wdl-note b{color:var(--ice);font-weight:600}

/* explorer link in the nav: an action, so it carries its glyph */
.navx{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--edge);background:var(--glass);
  color:var(--soft);text-decoration:none;font-size:12.5px;font-weight:500;white-space:nowrap;
  transition:color .35s ease,border-color .35s ease,background .35s ease,transform .45s var(--spring)}
.navx svg{width:14px;height:14px;flex:none;color:var(--cyan);transition:color .35s ease}
.navx:hover{color:#fff;border-color:rgba(76,176,226,.42);background:rgba(76,176,226,.1);
  transform:translateY(-1.5px)}
.navx:hover svg{color:#7bdcff}
/* the nav links were shrinking and wrapping inside themselves once the
   Explorer was added; nothing in a nav bar should ever break mid-label */
.nv > a{white-space:nowrap;flex:none}
@media(max-width:1260px){.nv{gap:clamp(10px,1.5vw,18px)}}
@media(max-width:1180px){.navx{display:none}}

/* ================= instrument finish ================= */
/* Corner ticks, a light that sweeps the edge on hover, and a faint technical
   grid behind the page. All additive — no layout changes, no new colours. */

/* a blueprint grid, barely there, so the dark is a surface rather than a void */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(118,190,235,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(118,190,235,.028) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%,#000 25%,transparent 78%);
  mask-image:radial-gradient(130% 100% at 50% 0%,#000 25%,transparent 78%)}

/* a light that runs the top edge when a card is hovered */
.feat::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(123,220,255,.9),transparent);
  background-size:52% 100%;background-repeat:no-repeat;background-position:-60% 0;
  opacity:0;transition:opacity .35s ease;pointer-events:none}
.feat:hover::after{opacity:1;animation:edgeRun 1.15s cubic-bezier(.3,0,.2,1) forwards}
@keyframes edgeRun{from{background-position:-60% 0}to{background-position:160% 0}}

/* figures read as readouts */
.specs dd,.hx-rail-in dd em,.evn{text-shadow:0 0 18px rgba(76,195,240,.38)}
.mb-l em,.rx-head span,.pn,.gno,.ery{text-shadow:0 0 12px rgba(76,195,240,.3)}

@media(prefers-reduced-motion:reduce){
  .feat:hover::after{animation:none}
}

/* ---------- nav pair: one segmented control, not two loose chips ---------- */
.navpair{display:inline-flex;align-items:stretch;flex:none;
  border:1px solid rgba(255,255,255,.14);border-radius:999px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  transition:border-color .4s ease}
.navpair:hover{border-color:rgba(76,176,226,.4)}
/* the two links give up their own chrome to the container */
.navpair > a{display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border:0;border-radius:0;background:none;box-shadow:none;transform:none;
  color:var(--soft);font-size:12.5px;font-weight:600;white-space:nowrap;text-decoration:none;
  transition:color .35s ease,background .35s ease}
.navpair > a + a{box-shadow:inset 1px 0 0 rgba(255,255,255,.12)}
.navpair > a:hover{transform:none;color:#fff;background:rgba(76,176,226,.16)}
.navpair svg{width:14px;height:14px;flex:none;transition:color .35s ease,opacity .35s ease}
.navpair .navx svg{color:var(--cyan)}
.navpair .pill-gh{fill:currentColor;opacity:.9}
.navpair > a:hover svg{color:#7bdcff;opacity:1}
/* when the Explorer drops out below 1180 the divider must go with it */
@media(max-width:1180px){.navpair > a + a{box-shadow:none}}