/* No colour literals here (standing rule 4) — every colour comes from tokens.css. */
:root{
  --font-display:"Krona One","Arial Black",Impact,sans-serif;
  --font-sans:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --tap:48px;--gut:16px;
}
@media(min-width:768px){:root{--gut:40px}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{background:var(--bg);color:var(--fg);font-family:var(--font-sans);font-feature-settings:"ss01","ss02","cv11";line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}
::selection{color:var(--sel-fg);background:var(--sel-bg)}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
/* 48px tap targets on everything interactive */
a,button{min-height:var(--tap);min-width:var(--tap);display:inline-flex;align-items:center;-webkit-tap-highlight-color:transparent}
.dim{color:var(--fg-50)}
.mono{font-family:var(--font-mono)}
.display{font-family:var(--font-display);letter-spacing:-.02em;font-weight:700}
.label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.22em;font-size:.7rem;font-weight:600}
.body{font-size:.875rem;line-height:1.625;color:var(--muted)}

.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:80;background:var(--fg);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.dots{position:fixed;inset:0;z-index:0;opacity:.5;pointer-events:none;background-image:radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 0);background-size:4px 4px}
.page{position:relative;z-index:1;max-width:1400px;margin:0 auto}
main,.top,.ticker,.menu,.foot{margin-left:var(--gut);margin-right:var(--gut)}

/* CA slot — sticky, always visible, full address */
.ca-wrap{position:sticky;top:0;z-index:70;display:flex;justify-content:center;padding:12px var(--gut) 0}
.ca{display:flex;align-items:center;gap:12px;max-width:100%;border:1px solid var(--fg-15);background:var(--bg-80);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:28px;padding:4px 4px 4px 16px;transition:border-color .2s}
.ca[data-live="true"]:hover{border-color:var(--fg-40)}
.ca-text{min-width:0;font-size:11px;word-break:break-all;line-height:1.35;color:var(--fg-80)}
@media(min-width:768px){.ca-text{font-size:12px}}
.ca[data-live="false"] .ca-text{color:var(--fg-50);font-style:italic}
.ca[data-live="true"] .ca-text{cursor:pointer}
.ca-date{font-size:10px;color:var(--fg-50);flex:none}
.pill-btn{flex:none;justify-content:center;min-width:var(--tap);border:1px solid var(--fg-20);color:var(--fg-70);border-radius:999px;padding:0 16px;font:500 12px var(--font-sans);transition:background .2s var(--ease),color .2s var(--ease),border-color .2s}
.pill-btn:hover:not(:disabled){background:var(--fg);color:var(--bg)}
.pill-btn:active:not(:disabled){transform:scale(.96)}
.pill-btn:disabled{opacity:.35;cursor:default}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px}
.brand{gap:10px;padding-right:8px}
.brand-name{font-size:1.25rem;font-weight:700;letter-spacing:-.025em}
.nav{display:none;align-items:center;gap:2px;border:1px solid var(--fg-15);background:var(--fg-04);backdrop-filter:blur(12px);border-radius:999px;padding:3px}
@media(min-width:768px){.nav{display:flex}}
.nav a{padding:0 16px;font-size:13px;font-weight:500;border-radius:999px;color:var(--fg-70);transition:color .2s,background .2s}
.nav a:hover{color:var(--fg);background:var(--fg-05)}
.nav a.on{color:var(--fg);background:var(--fg-10)}
.right{display:flex;align-items:center;gap:6px}
.social,.menu-btn{width:var(--tap);height:var(--tap);min-height:var(--tap);justify-content:center;border:1px solid var(--fg-15);border-radius:999px;color:var(--fg);transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease),border-color .2s}
span.social{display:inline-flex;align-items:center;opacity:.4;cursor:default}
a.social:hover,.menu-btn:hover{background:var(--fg);color:var(--bg);transform:translateY(-1px)}
.menu-btn{background:var(--bg)}
@media(min-width:768px){.menu-btn{display:none}}
.cta,.btn{gap:8px;justify-content:center;border-radius:999px;font:600 13px var(--font-sans);padding:0 24px;border:1px solid var(--fg-20);transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease),border-color .2s}
.cta,.btn.solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.cta{display:none}
@media(min-width:768px){.cta{display:inline-flex;margin-left:6px}}
.btn{background:var(--fg-04)}
.btn:hover{background:var(--fg-10)}
.cta:hover,.btn.solid:hover{background:var(--fg-80);border-color:var(--fg-80)}
.cta:active,.btn:active{transform:scale(.97)}
.menu{margin-top:12px;border:1px solid var(--fg-15);background:var(--bg);border-radius:20px;padding:8px;flex-direction:column}
.menu:not([hidden]){display:flex}
.menu a,.menu button{padding:0 16px;border-radius:12px;font-size:14px;font-weight:500;color:var(--fg-80);transition:background .2s,color .2s;text-align:left;width:100%}
.menu a:hover,.menu button:hover{background:var(--fg-05);color:var(--fg)}
@media(min-width:768px){.menu{display:none!important}}

/* status pill with pulsing dot */
.status{display:none;align-items:center;gap:8px;min-height:32px;padding:0 12px;border:1px solid var(--fg-15);border-radius:999px;font:500 11px var(--font-mono);color:var(--fg-70);text-transform:lowercase;white-space:nowrap}
.status b{font-weight:500}
.dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--fg-40);flex:none}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--fg);opacity:0}
.status[data-status="online"] .dot{background:var(--fg)}
.status[data-status="online"] .dot::after{animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite}
.status[data-status="linking"] .dot,.status[data-status="retrying"] .dot{animation:pulse 1.2s cubic-bezier(.4,0,.6,1) infinite}
.status[data-status="offline"] .dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--fg-60)}
@media(min-width:1024px){.top .status{display:inline-flex}}
.hero .status{display:inline-flex;min-height:auto;padding:0;border:0;font:500 10px var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:inherit}
@keyframes ping{0%{transform:scale(1);opacity:.6}75%,100%{transform:scale(2.6);opacity:0}}
@keyframes pulse{50%{opacity:.4}}

/* ticker — inverted, mono 12px, .2em, 40s linear (matches reference) */
.ticker{margin-top:16px;border-block:1px solid var(--fg-15);overflow:hidden;background:var(--fg);color:var(--bg)}
.ticker-track{display:flex;white-space:nowrap;padding:8px 0;font:400 12px var(--font-mono);text-transform:uppercase;letter-spacing:.2em;animation:marquee 40s linear infinite;width:max-content}
.ticker-half{display:flex;flex-shrink:0}
.ticker-half span{display:flex;align-items:center;gap:12px;padding:0 24px}
.ticker-half span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--bg-70)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* hero card */
.hero-wrap{margin-top:24px}
.hero{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--fg-15);background:var(--card)}
.hero-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,var(--hero-a),var(--hero-b) 70%)}
.hero-body{position:relative;padding:80px 24px;text-align:center}
@media(min-width:768px){.hero-body{padding:112px 40px}}
@media(min-width:1024px){.hero-body{padding:144px 40px}}
.badge{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;border-radius:999px;background:var(--fg-10);backdrop-filter:blur(8px);border:1px solid var(--fg-15);padding:6px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--fg-80)}
.badge-v{border-radius:999px;background:var(--fg);color:var(--bg);padding:2px 10px;font-size:10px;font-weight:600;letter-spacing:.18em}
.hero h1{margin-top:40px;font-size:3rem;line-height:1.02;letter-spacing:-.02em;font-weight:500}
@media(min-width:768px){.hero h1{font-size:4.5rem}}
@media(min-width:1024px){.hero h1{font-size:88px}}
.lead{margin:28px auto 0;max-width:42rem;color:var(--fg-75);font-size:1rem;line-height:1.625}
@media(min-width:768px){.lead{font-size:1.125rem}}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px;max-width:48rem;margin:64px auto 0}
@media(min-width:768px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats>div{display:flex;flex-direction:column-reverse;align-items:center;gap:4px}
.stats dd{font-size:1.875rem;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums}
@media(min-width:768px){.stats dd{font-size:2.25rem}}
.stats dt{color:var(--fg-55)}

/* sections */
.sec{margin-top:64px}
@media(min-width:768px){.sec{margin-top:80px}}
.sec h2,.panel h2{font-size:2.25rem;font-weight:700;line-height:.95;letter-spacing:-.025em;margin-top:14px}
@media(min-width:768px){.sec h2,.panel h2{font-size:3rem}}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
@media(min-width:768px){#chain h2{font-size:3.75rem}}
.textlink{display:none;color:var(--fg-60);transition:color .2s;padding-bottom:0}
.textlink:hover{color:var(--fg)}
@media(min-width:768px){.textlink{display:inline-flex}}
.sub{margin-top:16px;color:var(--muted);max-width:28rem;font-size:.95rem}
.grid12{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.grid12{grid-template-columns:repeat(12,minmax(0,1fr))}.l5{grid-column:span 5}.l7{grid-column:span 7}.l8{grid-column:span 8}.l4{grid-column:span 4}}
.cell{min-width:0}
.panel{border:1px solid var(--fg-15);background:var(--card);padding:24px}
@media(min-width:768px){.panel{padding:40px}}
.copies{margin-top:24px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}.copybox{min-width:0}
.copybox{border:1px solid var(--fg-20);background:var(--bg)}
.copybox-h{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--fg-15);padding:0 0 0 12px}
.copy{color:var(--fg-60);padding:0 16px;justify-content:center;min-width:88px;transition:color .2s,background .2s}
.copy:hover{color:var(--bg);background:var(--fg)}
.copybox-b{padding:14px 12px;font-size:13px;overflow-x:auto;white-space:nowrap}
.term-frame{border:1px solid var(--fg-15);background:var(--fg);padding:4px}
.term-inner{border:1px solid var(--bg-10);height:100%}
.term{background:var(--term);color:var(--term-fg);font-size:13px;height:100%}
.term-bar{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--fg-15);padding:10px 12px}
.term-bar i{width:8px;height:8px;border-radius:50%;background:var(--fg-30)}
.term-bar .label{margin-left:12px;color:var(--fg-50)}
.term-body{min-height:320px;padding:16px;line-height:1.7;overflow-wrap:anywhere}
.term-body div{color:var(--fg-75)}
.term-body .pr{color:var(--term-fg)}
.term-body .pr::before{content:"❯ ";color:var(--fg)}
.cursor{color:var(--fg)}

/* bordered cells (reference channels grid) */
.box{border:1px solid var(--fg-15)}
.box-h{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--fg-15)}
.box-count{font-size:12px;display:none}
@media(min-width:768px){.box-count{display:block}}
.cells{display:grid;grid-template-columns:repeat(2,1fr);border-top:0;border-left:0;overflow:hidden}
@media(min-width:768px){.cells{grid-template-columns:repeat(3,1fr)}}
.pcell{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;padding:20px;min-height:132px;background:var(--bg);box-shadow:1px 0 0 0 var(--fg-10),0 1px 0 0 var(--fg-10);transition:background .3s var(--ease),color .3s var(--ease)}
@media(min-width:768px){.pcell{padding:28px 32px;min-height:156px}}
a.pcell:hover{background:var(--fg);color:var(--bg)}
a.pcell:hover .dim,a.pcell:hover .label,a.pcell:hover .prow{color:var(--bg-60)}
.pname{font-family:var(--font-display);font-weight:600;font-size:1.5rem;line-height:1.1;letter-spacing:-.02em;overflow-wrap:anywhere}
@media(min-width:768px){.pname{font-size:1.875rem}}
.prow{display:flex;gap:12px;font:400 12px var(--font-mono);color:var(--muted);transition:color .3s}
.pcell .label{color:var(--fg-40);transition:color .3s}
.fine{margin-top:16px;font-size:11px}

/* capabilities grid — hover inverts (reference) */
.cards{display:grid;grid-template-columns:1fr;border:1px solid var(--fg-15);border-right:0;border-bottom:0;overflow:hidden}
@media(min-width:768px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(3,1fr)}}
.ccard{padding:24px;background:var(--bg);box-shadow:1px 0 0 0 var(--fg-15),0 1px 0 0 var(--fg-15);transition:background .3s var(--ease),color .3s var(--ease)}
@media(min-width:768px){.ccard{padding:32px}}
.ccard:hover{background:var(--fg);color:var(--bg)}
.ccard .label{color:var(--fg-50);margin-bottom:24px;transition:color .3s}
.ccard h3{font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:12px;font-variant-numeric:tabular-nums}
.ccard .body{transition:color .3s}
.ccard:hover .label{color:var(--bg-60)}
.ccard:hover .body{color:var(--bg-80)}
.spark{display:block;width:100%;height:72px;margin:8px 0 12px}
.spark .line{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke}
.spark .area{fill:currentColor;opacity:.1}

/* philosophy (inverted) */
.phil{position:relative;overflow:hidden;border:1px solid var(--fg-15);background:var(--fg);color:var(--bg);padding:32px}
@media(min-width:768px){.phil{padding:64px}}
.phil-dots{position:absolute;inset:0;opacity:.2;pointer-events:none;background-image:radial-gradient(circle at 1px 1px,var(--dot-inv) 1px,transparent 0);background-size:5px 5px}
.phil-in{position:relative;display:grid;gap:32px;align-items:end}
@media(min-width:1024px){.phil-in{grid-template-columns:repeat(12,minmax(0,1fr))}}
.phil .label{color:var(--bg-60);margin-bottom:24px;display:block}
.phil h2{font-size:2.25rem;font-weight:700;line-height:.95;letter-spacing:-.025em;margin:0}
@media(min-width:768px){.phil h2{font-size:3.75rem}}
@media(min-width:1024px){.phil h2{font-size:4.5rem}}
.phil-cta{display:flex;flex-direction:column;gap:16px}
.pbtn{justify-content:center;border-radius:999px;padding:0 28px;font:600 14px var(--font-sans);min-height:56px;text-align:center;transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.pbtn.solid{background:var(--bg);color:var(--fg)}
.pbtn.solid:hover{background:var(--bg-85)}
.pbtn:not(.solid){border:1px solid var(--bg-30);color:var(--bg)}
.pbtn:not(.solid):hover{background:var(--bg);color:var(--fg)}
.pbtn:active{transform:scale(.98)}

/* footer */
.foot{margin-top:96px;border-top:1px solid var(--fg-15);padding:40px 0 32px}
.foot-grid{display:grid;gap:32px}
@media(min-width:768px){.foot-grid{grid-template-columns:2fr 1fr 1fr}}
.foot-logo{display:flex;align-items:center;gap:10px}
.foot-logo .display{font-size:1.5rem;font-weight:700}
.foot .body{margin-top:12px;max-width:28rem}
.foot ul{margin-top:8px}
.foot a,.flink{font-size:.875rem;color:var(--fg-80);transition:color .2s;min-height:var(--tap);display:inline-flex;align-items:center}
.foot a:hover,a.flink:hover{color:var(--fg)}
.flink.off{color:var(--fg-50);cursor:default}
.foot-base{margin-top:32px;padding-top:24px;border-top:1px solid var(--fg-10);color:var(--muted)}

/* skeletons */
.skel{position:relative;color:transparent!important;border-radius:6px;background:linear-gradient(90deg,var(--fg-05) 0%,var(--fg-15) 50%,var(--fg-05) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;user-select:none}
.stats dd.skel{min-width:5.5ch;width:fit-content;min-height:1.2em}
.ccard h3.skel{width:9ch;min-height:1.2em}
.sk-t{display:block;width:60%;height:24px}.sk-l{display:block;width:80%;height:12px}.sk-l.s{width:50%}
@keyframes shimmer{to{background-position:-200% 0}}

/* count-up flash */
.flash{animation:flash .7s var(--ease)}
@keyframes flash{0%{opacity:.25}100%{opacity:1}}
.blink{animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.fade-up{animation:fadeUp .8s ease-out both}
@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.page-enter{animation:pageEnter .5s var(--ease) both}
@keyframes pageEnter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);opacity:0;background:var(--fg);color:var(--bg);padding:12px 20px;border-radius:999px;font-size:12px;transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:99;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* scroll reveal (class + observer match the reference: opacity/translateY 16px, .7s) */
.js .reveal{opacity:0;will-change:opacity,transform;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}

/* reduced motion — instant fallback for everything */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .ticker-track{animation:none;transform:none}
  .skel{animation:none;background:var(--fg-10)}
  .status .dot::after{animation:none}
  .status[data-status="linking"] .dot,.status[data-status="retrying"] .dot{animation:none}
  .blink{animation:none}
  .js .reveal{opacity:1;transform:none}
  .page-enter,.fade-up,.flash{animation:none}
}