/* PALETTE PROVENANCE - every hex sampled from brand/LOGO VOLYPAD PNG...png (RGBA, colour type 6)
   --bg   #02150f  most frequent pixel of the logo canvas (3,545,567 px)
   --deep #024928  10th percentile of ring greens (shadow band of the ring)
   --ring #15945f  median ring green
   --glow #82fac5  90th percentile ring green (rim light)
   --hot  #cdfde3  sampled at the ring crossing, centre (1000,1000)
   All other tones are color-mix() blends of these five. No hex invented. */
:root{
  --bg:#02150f; --deep:#024928; --ring:#15945f; --glow:#82fac5; --hot:#cdfde3;
  --color-accent:var(--glow);
  --muted:color-mix(in oklab,var(--hot) 62%,var(--bg));
  --dim:color-mix(in oklab,var(--hot) 40%,var(--bg));
  --plate:color-mix(in oklab,var(--deep) 38%,var(--bg));
  --border:color-mix(in oklab,var(--ring) 55%,var(--bg));
  --down:color-mix(in oklab,var(--hot) 55%,var(--bg));
  --ease:cubic-bezier(.16,1,.3,1);
  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,monospace;
  --top-h:64px;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:150px}
body{background:var(--bg);color:var(--hot);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.wrap{max-width:1320px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.wrap{padding:0 24px}}
@media(min-width:1024px){.wrap{padding:0 32px}}

.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;background:linear-gradient(90deg,var(--ring),var(--glow));transform:scaleX(0);transform-origin:0 50%}

/* header */
.top{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in oklab,var(--border) 60%,transparent)}
.top-row{height:var(--top-h);display:flex;align-items:center;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.brand img{width:36px;height:36px}
.brand-word{font:600 22px/1 var(--display);letter-spacing:.14em}
.nav{display:none;margin-left:auto;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--glow)}
.social{display:flex;gap:4px;margin-left:auto}
@media(min-width:760px){.nav{display:flex}.social{margin-left:8px}}
.ico{width:44px;height:44px;display:inline-grid;place-items:center;color:var(--hot);transition:color .2s,transform .2s}
.ico svg{width:20px;height:20px;fill:currentColor}
a.ico:hover{color:var(--glow);transform:translateY(-1px)}
.ico.inert{color:var(--dim);cursor:not-allowed;opacity:.55}

/* CA slot */
.ca-band{border-top:1px solid color-mix(in oklab,var(--border) 40%,transparent);background:color-mix(in oklab,var(--deep) 30%,var(--bg))}
.ca-band .wrap{padding-top:8px;padding-bottom:10px}
.ca-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}
.ca{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;text-align:left;font-family:var(--mono);font-weight:500;font-size:clamp(12px,3.1vw,28px);letter-spacing:-.01em;color:var(--hot);word-break:break-all;line-height:1.25;transition:color .2s}
.ca-text{flex:1}
.ca-act{flex:none;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--glow);border:1px solid var(--border);padding:10px 12px;min-width:44px;min-height:44px;display:inline-grid;place-items:center}
.ca[data-state=ready]:hover .ca-text{color:var(--glow)}
.ca[data-state=ready]:hover .ca-act{background:color-mix(in oklab,var(--glow) 14%,transparent)}
.ca[data-state=inert]{cursor:default;color:var(--dim);letter-spacing:.12em}
.ca[data-state=inert] .ca-act{color:var(--dim);border-style:dashed}
.ca.copied .ca-act{background:var(--glow);color:var(--bg);border-color:var(--glow)}
@media(min-width:1100px){.ca{font-size:28px}}

/* ticker: 37px strip */
.strip{height:37px;border-bottom:1px solid color-mix(in oklab,var(--border) 60%,transparent);background:color-mix(in oklab,var(--plate) 70%,transparent);overflow:hidden}
.marquee{height:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;width:max-content;height:100%;animation:marquee 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.tk{display:inline-flex;align-items:center;gap:8px;height:100%;padding:0 22px;font-size:12px;letter-spacing:.06em;white-space:nowrap;border-right:1px solid color-mix(in oklab,var(--border) 35%,transparent)}
.tk b{font-weight:600;color:var(--hot)}
.tk .px{color:var(--muted);font-variant-numeric:tabular-nums}
.tk.sk{width:150px;padding:0}
.tk.sk i{display:block;width:100px;height:8px;margin:auto}
@keyframes marquee{to{transform:translateX(-50%)}}

/* hero */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:56px 0 24px}
.layer{position:absolute;inset:-6% -4%;pointer-events:none;will-change:transform;z-index:-1}
.mesh{background:
  radial-gradient(40% 50% at 78% 38%,color-mix(in oklab,var(--ring) 45%,transparent),transparent 70%),
  radial-gradient(35% 45% at 12% 80%,color-mix(in oklab,var(--deep) 80%,transparent),transparent 70%),
  radial-gradient(30% 40% at 55% 0%,color-mix(in oklab,var(--glow) 14%,transparent),transparent 70%);
  animation:mesh 18s ease-in-out infinite alternate}
@keyframes mesh{to{filter:hue-rotate(-12deg) saturate(1.2);background-position:6% 4%,-4% -3%,3% 6%}}
.dots{background-image:radial-gradient(color-mix(in oklab,var(--glow) 38%,transparent) 1px,transparent 1.4px);background-size:26px 26px;mask-image:linear-gradient(180deg,#000,transparent 70%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);opacity:.55}
.arcs svg{width:100%;height:100%}
.arcs path{fill:none;stroke:color-mix(in oklab,var(--glow) 55%,transparent);stroke-width:1.2;vector-effect:non-scaling-stroke}
.emblem{inset:auto -8% -10% auto;width:min(86vw,560px);height:auto;aspect-ratio:1;opacity:.28;animation:float 9s ease-in-out infinite alternate}
@keyframes float{to{translate:0 -14px}}
@media(min-width:900px){.emblem{inset:2% 2% auto auto;width:min(44vw,560px);opacity:.9}}
.hero-grid{position:relative}
.hero-copy{max-width:640px;padding:24px 0 40px}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border:1px solid var(--border);background:color-mix(in oklab,var(--plate) 80%,transparent);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 0 color-mix(in oklab,var(--glow) 60%,transparent);animation:ping 1.8s ease-out infinite}
.pill[data-s=error] .dot{background:var(--down);animation:none}
.pill[data-s=wait] .dot{background:var(--dim)}
@keyframes ping{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.eyebrow{margin-top:24px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--glow)}
h1{margin-top:10px;font:500 min(11.2vw,5rem)/1.03 var(--display);letter-spacing:-.015em}
h1 em{font-style:normal;font-weight:600;color:var(--glow)}
h1 b{color:var(--glow)}
.sub{margin-top:20px;max-width:30rem;font-size:17px;line-height:1.6;color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.seal{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:44px;height:2.75rem;padding:0 22px;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--hot);background:linear-gradient(color-mix(in oklab,var(--deep) 90%,var(--bg)),var(--bg));border:1px solid color-mix(in oklab,var(--glow) 50%,transparent);box-shadow:inset 0 0 0 2px var(--bg),inset 0 0 0 3px color-mix(in oklab,var(--glow) 20%,transparent),0 8px 28px -14px color-mix(in oklab,var(--glow) 55%,transparent);transition:border-color .2s,box-shadow .2s,transform .1s}
.seal:hover{border-color:var(--glow)}
.seal:active{transform:translateY(1px)}
.seal.ghost{background:transparent}
.sheen::before{content:"";position:absolute;inset:0 auto 0 0;width:40%;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--hot) 18%,transparent),transparent);transform:translate(-120%) skew(-18deg)}
.sheen:hover::before{animation:sheen .9s ease-out}
@keyframes sheen{to{transform:translate(340%) skew(-18deg)}}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
@media(min-width:900px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative;isolation:isolate;overflow:hidden;min-height:92px;padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--border);background:linear-gradient(180deg,color-mix(in oklab,var(--plate) 70%,transparent),color-mix(in oklab,var(--bg) 85%,transparent));transition:border-color .2s,box-shadow .2s,transform .2s}
.tile:hover{border-color:var(--glow);transform:translateY(-2px)}
.tile .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.tile .v{font:500 30px/1.1 var(--display);font-variant-numeric:tabular-nums;margin-top:10px}

/* spotlight */
.spot{--mx:50%;--my:0%}
.spot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(280px circle at var(--mx) var(--my),color-mix(in oklab,var(--glow) 16%,transparent),transparent 65%)}
.spot:hover::after{opacity:1}

/* sections */
.section{padding-top:64px}
@media(min-width:768px){.section{padding-top:88px}}
.sec-head{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:20px}
.rule-after{flex:1;min-width:160px;display:flex;align-items:baseline;gap:16px;font:500 clamp(28px,5vw,40px)/1.1 var(--display)}
.rule-after::after{content:"";flex:1;align-self:center;height:1px;background:linear-gradient(90deg,color-mix(in oklab,var(--glow) 45%,transparent),transparent)}
.tabs{display:flex;gap:2px;border:1px solid var(--border);padding:2px;background:var(--plate)}
.tabs button{min-height:44px;padding:0 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:background .25s var(--ease),color .2s}
.tabs button[aria-selected=true]{background:color-mix(in oklab,var(--glow) 16%,transparent);color:var(--glow)}
.tabs button:hover{color:var(--hot)}

.panel{--m:color-mix(in oklab,var(--glow) 55%,transparent);position:relative;isolation:isolate;border:1px solid var(--border);background:
  linear-gradient(var(--m),var(--m)) top left/12px 1px no-repeat,linear-gradient(var(--m),var(--m)) top left/1px 12px no-repeat,
  linear-gradient(var(--m),var(--m)) top right/12px 1px no-repeat,linear-gradient(var(--m),var(--m)) top right/1px 12px no-repeat,
  linear-gradient(var(--m),var(--m)) bottom left/12px 1px no-repeat,linear-gradient(var(--m),var(--m)) bottom left/1px 12px no-repeat,
  linear-gradient(var(--m),var(--m)) bottom right/12px 1px no-repeat,linear-gradient(var(--m),var(--m)) bottom right/1px 12px no-repeat,
  linear-gradient(180deg,color-mix(in oklab,var(--glow) 10%,transparent),color-mix(in oklab,var(--glow) 3%,transparent));
  box-shadow:0 22px 50px -34px #000}

/* board */
.board{padding:0;overflow:hidden}
.b-head,.row{display:grid;align-items:center;column-gap:12px;grid-template-columns:36px minmax(170px,1.7fr) 1fr .7fr 1fr 1fr 44px;padding:0 16px}
.b-head{height:40px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid color-mix(in oklab,var(--border) 60%,transparent)}
.r{text-align:right}
.row{position:relative;isolation:isolate;min-height:64px;border-bottom:1px solid color-mix(in oklab,var(--border) 35%,transparent);font-variant-numeric:tabular-nums;font-size:14px;animation:slip .7s var(--ease) both;animation-delay:calc(var(--i,0)*60ms)}
.row:last-child{border-bottom:0}
.row::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),color-mix(in oklab,var(--glow) 16%,transparent),transparent 65%)}
.row:hover::after{opacity:1}
@keyframes slip{0%{opacity:0;transform:translateY(14px)}}
.rk{color:var(--dim);font-size:12px}
.asset{display:flex;align-items:center;gap:12px;min-width:0}
.asset .nm{min-width:0;display:flex;flex-direction:column}
.asset b{font-weight:600;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asset small{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo{flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--deep);border:1px solid var(--border);font:600 15px/1 var(--display);color:var(--glow)}
.logo img{width:100%;height:100%;object-fit:cover}
.c{text-align:right}
.c::before{content:attr(data-l);display:none}
.up{color:var(--glow)}.dn{color:var(--down)}
.cp{width:44px;height:44px;display:grid;place-items:center;color:var(--muted);border:1px solid transparent;transition:color .2s,border-color .2s,background .2s}
.cp:hover{color:var(--glow);border-color:var(--border)}
.cp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.cp.done{color:var(--bg);background:var(--glow)}
.row[data-flash=up]{animation:slip .7s var(--ease) both,flash-up 1.4s ease-out}
.row[data-flash=down]{animation:slip .7s var(--ease) both,flash-down 1.4s ease-out}
@keyframes flash-up{0%{background-color:color-mix(in oklab,var(--glow) 22%,transparent)}}
@keyframes flash-down{0%{background-color:color-mix(in oklab,var(--down) 22%,transparent)}}
.skel .logo,.skel i,.sk i{background:linear-gradient(90deg,var(--plate),color-mix(in oklab,var(--ring) 40%,var(--plate)),var(--plate));background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.skel i{display:block;height:12px;width:70%;margin-left:auto}
.skel .asset i{width:90px;margin:0}
@keyframes shimmer{to{background-position:-200% 0}}
.row.own{border-left:2px solid var(--color-accent);animation:slip .7s var(--ease) both,ownPulse 2.6s ease-in-out infinite;background-color:color-mix(in oklab,var(--glow) 6%,transparent)}
@keyframes ownPulse{0%,100%{box-shadow:inset 0 0 0 0 transparent}50%{box-shadow:inset 0 0 34px -6px color-mix(in oklab,var(--glow) 28%,transparent)}}
.row.own.ph{cursor:default}
.ph-dots{letter-spacing:.35em;color:var(--dim)}
.b-err{padding:12px 16px;font-size:13px;color:var(--down);border-top:1px solid var(--border)}

@media(max-width:759px){
  .b-head{display:none}
  .row{grid-template-columns:1fr 1fr auto 44px;grid-template-areas:"a a p x" "v l g x";row-gap:6px;padding:12px 8px 12px 14px;font-size:13px}
  .rk{display:none}
  .asset{grid-area:a}.c-p{grid-area:p}.c-g{grid-area:g}.c-v{grid-area:v;text-align:left}.c-l{grid-area:l;text-align:left}.cp{grid-area:x;align-self:center}
  .c-v::before,.c-l::before{display:inline;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-right:6px}
}

/* cards */
.cards{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:800px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;isolation:isolate;overflow:hidden;padding:28px 24px 32px;border:1px solid var(--border);background:linear-gradient(180deg,color-mix(in oklab,var(--plate) 70%,transparent),color-mix(in oklab,var(--bg) 85%,transparent));transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--glow);transform:translateY(-3px)}
.card .num{font:500 14px/1 var(--mono);color:var(--glow);letter-spacing:.12em}
.card h3{margin-top:28px;font:500 30px/1.1 var(--display)}
.card p{margin-top:10px;color:var(--muted);max-width:26rem}

.two{display:grid;gap:12px}
@media(min-width:900px){.two{grid-template-columns:1.2fr 1fr}}
.two .panel{padding:24px}
.mini{font:500 28px/1.15 var(--display)}
.kv{margin-top:16px;display:grid}
.kv div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;border-top:1px solid color-mix(in oklab,var(--border) 40%,transparent);font-size:14px}
.kv dt{color:var(--dim);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.kv dd{display:flex;align-items:center;gap:6px;text-align:right;word-break:break-all;font-family:var(--mono);font-size:13px}
.kv a:hover{color:var(--glow)}
.closer{display:flex;flex-direction:column;align-items:flex-start;gap:14px;overflow:hidden}
.closer img{width:96px;height:96px}
.closer p{color:var(--muted)}

/* footer */
.foot{position:relative;margin-top:96px;border-top:1px solid color-mix(in oklab,var(--border) 60%,transparent);padding:48px 0 32px}
.foot::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--glow) 50%,transparent),transparent)}
.foot-grid{display:grid;gap:32px;grid-template-columns:1fr 1fr}
@media(min-width:900px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-grid>div:first-child{grid-column:1/-1}
@media(min-width:900px){.foot-grid>div:first-child{grid-column:auto}}
.foot-note{margin-top:12px;color:var(--muted);max-width:22rem}.dim{color:var(--dim)}
.fcol{display:flex;flex-direction:column}
.fcol h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;font-weight:500}
.fcol a,.fcol span{display:flex;align-items:center;min-height:44px;color:var(--muted);font-size:14px;transition:color .2s}
.fcol a:hover{color:var(--glow)}
.fcol span{color:var(--dim)}
.disclaimer{margin-top:40px;padding-top:20px;border-top:1px solid color-mix(in oklab,var(--border) 40%,transparent);font-size:13px;color:var(--dim)}

.toast{position:fixed;left:50%;bottom:24px;z-index:70;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:12px 18px;background:var(--glow);color:var(--bg);font-size:13px;font-weight:600;letter-spacing:.08em;transition:opacity .25s,transform .35s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* scroll reveal + hero rise */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0)*70ms)}
.reveal.in{opacity:1;transform:none}
.rise{animation:rise .7s var(--ease) both;animation-delay:calc(var(--rise,0)*70ms)}
@keyframes rise{0%{opacity:0;transform:translateY(10px)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .layer{transform:none!important}
}
@media (prefers-reduced-motion: reduce){ .row.own{animation:none} }
.kv dd a{display:inline-flex;align-items:center;min-height:44px}