:root{
  --bg:#08090A;
  --bg-2:#0D0F10;
  --bg-3:#131517;
  --y:#FFD208;                      /* Zama yellow — accent only */
  --y-dim:rgba(255,210,8,.55);
  --y-line:rgba(255,210,8,.22);
  --y-faint:rgba(255,210,8,.06);
  --line:rgba(255,255,255,.08);
  --text:#E8E5DA;
  --dim:#8C897F;
  --dimmer:#5C5A54;
  --up:#4ADE80; --down:#FF5A4E;
  --max:1200px;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,video{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
b{font-weight:700;color:var(--y);}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px;}
.mono{font-family:var(--mono);}
[hidden]{display:none!important;}
::selection{background:var(--y);color:#000;}

/* global scanlines + vignette */
.scan{position:fixed;inset:0;z-index:100;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),
             radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45) 100%);}

.label{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--y);text-transform:uppercase;}
.blink{animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:700;font-size:.86rem;letter-spacing:.12em;
  text-transform:uppercase;padding:15px 24px;border:1px solid var(--y);cursor:pointer;position:relative;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:background .15s,color .15s,box-shadow .15s;}
.btn span{transition:transform .15s;}
.btn:hover span{transform:translateX(4px);}
.btn-y{background:var(--y);color:#000;}
.btn-y:hover{background:#FFE052;box-shadow:0 0 28px rgba(255,210,8,.35);}
.btn-o{background:transparent;color:var(--y);}
.btn-o:hover{background:var(--y-faint);}
.btn.sm{padding:10px 16px;font-size:.74rem;}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(8,9,10,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;gap:24px;height:62px;}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;}
.brand img{width:32px;height:32px;object-fit:cover;border:1px solid var(--y-line);}
.brand span{font-family:var(--sans);font-weight:700;font-size:1.08rem;letter-spacing:-.01em;}
.live{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--dim);display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);padding:3px 8px;}
.live b{width:6px;height:6px;border-radius:50%;background:var(--y);box-shadow:0 0 8px var(--y);animation:blink 1.6s steps(1) infinite;}
nav{display:flex;gap:26px;}
nav a{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);transition:color .15s;}
nav a em{font-style:normal;color:var(--y);margin-right:7px;font-size:.66rem;}
nav a:hover{color:var(--text);}
@media(max-width:820px){nav{display:none;}.live{display:none;}}

/* ---------- HUD frame ---------- */
.hud{position:relative;border:1px solid var(--y-line);background:#000;}
.hud .c{position:absolute;width:18px;height:18px;border:2px solid var(--y);z-index:4;pointer-events:none;}
.hud .tl{top:-6px;left:-6px;border-right:0;border-bottom:0;}
.hud .tr{top:-6px;right:-6px;border-left:0;border-bottom:0;}
.hud .bl{bottom:-6px;left:-6px;border-right:0;border-top:0;}
.hud .br{bottom:-6px;right:-6px;border-left:0;border-top:0;}
.sweep{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent,rgba(255,210,8,.07) 70%,rgba(255,210,8,.22) 99%,transparent) no-repeat;
  background-size:100% 22%;animation:sweep 5.5s linear infinite;}
@keyframes sweep{from{background-position:0 -30%}to{background-position:0 130%}}
.rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--down);margin-right:7px;vertical-align:1px;animation:blink 1.2s steps(1) infinite;}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:72px 0 80px;border-bottom:1px solid var(--line);}
#rain{position:absolute;inset:0;width:100%;height:100%;opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.25),#000 60%);mask-image:linear-gradient(90deg,rgba(0,0,0,.25),#000 60%);}
.grid-bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--y-faint) 1px,transparent 1px),linear-gradient(90deg,var(--y-faint) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 30% 50%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse at 30% 50%,#000 10%,transparent 75%);}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.hero-grid>*{min-width:0;}
h1.title{font-family:var(--sans);font-weight:700;font-size:clamp(5rem,15vw,11.5rem);line-height:.82;letter-spacing:-.055em;color:var(--y);
  margin:22px 0 28px -.04em;text-shadow:0 0 60px rgba(255,210,8,.18);position:relative;}
h1.title.glitch{animation:glitch .38s steps(2) 1;}
@keyframes glitch{
  0%{text-shadow:3px 0 rgba(255,90,78,.7),-3px 0 rgba(0,220,255,.5);transform:translateX(2px)}
  50%{text-shadow:-4px 0 rgba(255,90,78,.7),4px 0 rgba(0,220,255,.5);transform:translateX(-3px) skewX(-4deg)}
  100%{text-shadow:0 0 60px rgba(255,210,8,.18);transform:none}}
.sub{font-size:clamp(1.12rem,2vw,1.4rem);line-height:1.4;max-width:30ch;font-weight:500;color:var(--text);}
.sub-2{font-size:1rem;line-height:1.55;color:var(--dim);max-width:44ch;margin-top:14px;}
.ca{display:flex;align-items:center;gap:12px;margin-top:32px;max-width:560px;border:1px solid var(--y-line);background:rgba(13,15,16,.85);padding:6px 6px 6px 14px;}
.ca .prompt{font-family:var(--mono);font-size:.72rem;color:var(--y);letter-spacing:.1em;white-space:nowrap;}
.ca .val{font-family:var(--mono);font-size:.8rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.ca .val.scrambling{color:var(--y);}
.ca button{font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.14em;background:transparent;color:var(--y);
  border:1px solid var(--y);padding:9px 14px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;}
.ca button:hover,.ca button.ok{background:var(--y);color:#000;}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px;}
.cta.center{justify-content:center;margin-top:48px;}

.hero-art .hud{aspect-ratio:1;}
.hero-art video{width:100%;height:100%;object-fit:cover;}
.hud-top,.hud-bot{position:absolute;left:0;right:0;z-index:4;display:flex;justify-content:space-between;padding:10px 14px;
  font-size:.64rem;letter-spacing:.16em;color:var(--y);}
.hud-top{top:0;background:linear-gradient(rgba(0,0,0,.7),transparent);}
.hud-bot{bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.75));}
@media(max-width:900px){
  .hero{padding:36px 0 56px;}
  .hero-grid{grid-template-columns:1fr;gap:36px;}
  .hero-art{order:-1;width:min(100%,440px);margin:0 auto;}
  h1.title{margin-top:14px;margin-bottom:22px;font-size:clamp(5rem,27vw,9rem);}
}

/* ---------- ticker + tape ---------- */
.ticker{border-bottom:1px solid var(--line);background:var(--bg-2);}
.ticker .row{display:flex;flex-wrap:wrap;gap:8px 34px;justify-content:space-between;padding-top:14px;padding-bottom:14px;font-size:.76rem;letter-spacing:.06em;color:var(--dim);}
.ticker b{font-weight:500;color:var(--text);margin-left:6px;}
.ticker b.up{color:var(--up);} .ticker b.down{color:var(--down);}
@media(max-width:700px){.ticker .row{justify-content:center;gap:8px 20px;}.hide-s{display:none;}}
.tape{border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg);}
.tape div{display:flex;width:max-content;animation:slide 42s linear infinite;}
.tape span{font-size:.72rem;letter-spacing:.24em;color:var(--dimmer);padding:12px 0;white-space:nowrap;}
.tape span::after{content:"/";color:var(--y);margin:0 22px;}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:110px 0;position:relative;}
.head{margin-bottom:56px;max-width:760px;}
.head h2{font-family:var(--sans);font-weight:700;font-size:clamp(2.1rem,5.2vw,3.9rem);line-height:1;letter-spacing:-.035em;margin-top:14px;color:var(--text);}
.row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;max-width:none;flex-wrap:wrap;}
.status{font-size:.72rem;letter-spacing:.1em;color:var(--dim);}
blockquote{margin-top:28px;border-left:2px solid var(--y);padding:4px 0 4px 20px;font-size:1.12rem;line-height:1.5;color:var(--text);max-width:58ch;}
blockquote cite{display:block;font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--dim);margin-top:10px;}

/* film */
.film{padding:90px 0 0;}
.film-frame{aspect-ratio:16/9;overflow:hidden;}
.film-frame video{width:100%;height:100%;object-fit:cover;}
.film-cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:80px 28px 26px;background:linear-gradient(transparent,rgba(0,0,0,.88));}
.film-cap .mono{font-size:.68rem;letter-spacing:.18em;color:var(--y);}
.film-cap h2{font-family:var(--sans);font-weight:700;font-size:clamp(1.4rem,3.6vw,2.8rem);letter-spacing:-.03em;line-height:1.02;margin-top:10px;max-width:20ch;}
@media(max-width:640px){
  .film-frame{aspect-ratio:auto;overflow:visible;}
  .film-frame video{aspect-ratio:16/9;height:auto;}
  .film-cap{position:static;padding:16px 16px 18px;background:#000;border-top:1px solid var(--y-line);}
}

/* lore log: hairline table of entries */
.log{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.entry{background:var(--bg);padding:26px 24px 28px;position:relative;transition:background .2s;min-height:210px;}
.entry::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--y);transform:scaleY(0);transform-origin:top;transition:transform .25s;}
.entry:hover{background:var(--bg-3);}
.entry:hover::before{transform:scaleY(1);}
.entry .idx{position:absolute;top:22px;right:22px;font-size:.66rem;color:var(--dimmer);letter-spacing:.1em;}
.entry .yr{display:block;font-size:.74rem;letter-spacing:.16em;color:var(--y);margin-bottom:18px;}
.entry h3{font-family:var(--sans);font-weight:700;font-size:1.45rem;letter-spacing:-.02em;line-height:1.08;margin-bottom:10px;}
.entry p{font-size:.95rem;line-height:1.55;color:var(--dim);}
.entry p b{font-weight:500;}
.entry.now{grid-column:1/-1;min-height:0;background:linear-gradient(135deg,rgba(255,210,8,.12),rgba(255,210,8,.02));}
.entry.now::before{transform:scaleY(1);}
.entry.now h3{color:var(--y);}
.entry .here{position:absolute;bottom:18px;right:22px;font-size:.64rem;letter-spacing:.16em;color:var(--y);animation:blink 1.4s steps(1) infinite;}

@media(max-width:900px){.log{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.log{grid-template-columns:1fr;}.entry{min-height:0;}}

/* protocol band with vault video */
.band{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.vault-bg{position:absolute;inset:0;z-index:0;}
.vault-bg video,.vault-bg img{width:100%;height:100%;object-fit:cover;opacity:.2;filter:saturate(.85);}
.vault-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,rgba(8,9,10,.55) 30%,rgba(8,9,10,.55) 70%,var(--bg) 100%);}
.band .wrap{position:relative;z-index:1;}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.rule{border:1px solid var(--y-line);background:rgba(8,9,10,.72);backdrop-filter:blur(6px);padding:30px 26px 30px;position:relative;
  transition:border-color .2s,transform .2s;}
.rule:hover{border-color:var(--y);transform:translateY(-3px);}
.rule .n{display:block;font-family:var(--sans);font-weight:700;font-size:4.2rem;line-height:.9;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1px var(--y);margin-bottom:22px;}
.rule h3{font-family:var(--sans);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;margin-bottom:10px;color:var(--y);}
.rule p{font-size:.96rem;line-height:1.55;color:var(--dim);}
@media(max-width:860px){.rules{grid-template-columns:1fr;}}

/* access steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);}
.steps li{padding:26px 22px 8px 0;position:relative;}
.steps li::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--y);transition:width .8s ease;}
.steps.on li::before{width:calc(100% - 22px);}
.steps.on li:nth-child(2)::before{transition-delay:.2s}.steps.on li:nth-child(3)::before{transition-delay:.4s}.steps.on li:nth-child(4)::before{transition-delay:.6s}
.steps .mono{font-size:.68rem;letter-spacing:.16em;color:var(--y);}
.steps h3{font-family:var(--sans);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;margin:14px 0 8px;}
.steps p{font-size:.94rem;line-height:1.55;color:var(--dim);}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr;row-gap:10px;}}
@media(max-width:520px){.steps{grid-template-columns:1fr;}}

/* chart */
#chart{border-top:1px solid var(--line);}
.chart{height:min(620px,76vh);}
.chart iframe{width:100%;height:100%;border:0;display:block;}

/* footer */
footer{border-top:1px solid var(--line);padding:48px 0 56px;background:var(--bg-2);}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.foot-top .mono{font-size:.7rem;letter-spacing:.2em;color:var(--y);}
.legal{font-size:.8rem;line-height:1.65;color:var(--dimmer);max-width:92ch;}

@media(prefers-reduced-motion:reduce){
  .tape div,.sweep,.blink,.live b,.rec,.entry .here{animation:none;}
  #rain{display:none;}
}

/* buy chooser: popover on desktop, bottom sheet on phones */
button.btn{border-radius:0;}
.buyer{position:fixed;z-index:90;width:290px;padding:10px;background:rgba(8,9,10,.97);border:1px solid var(--y-line);backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -12px rgba(0,0,0,.9),0 0 40px -14px rgba(255,210,8,.35);opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .18s;}
.buyer.on{opacity:1;transform:none;}
.buyer-h{margin:4px 8px 10px;font:500 .64rem/1 var(--mono);letter-spacing:.2em;color:var(--y);}
.buyer-o{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;padding:14px 12px;border:1px solid transparent;transition:background .15s,border-color .15s;}
.buyer-o+.buyer-o{margin-top:4px;}
.buyer-o b{font:700 1.2rem/1 var(--sans);color:var(--text);}
.buyer-o span{font:400 .68rem/1 var(--mono);letter-spacing:.08em;color:var(--dim);}
.buyer-o i{font-style:normal;color:var(--y);}
.buyer-o:hover,.buyer-o:focus-visible{background:var(--y-faint);border-color:var(--y);outline:0;}
.buyer.sheet{left:12px!important;right:12px;bottom:max(12px,env(safe-area-inset-bottom));top:auto!important;width:auto;transform:translateY(16px);}
.buyer.sheet.on{transform:none;}

/* ---------- payouts ---------- */
.lede{margin-top:16px;font-size:1.08rem;line-height:1.55;color:var(--dim);max-width:56ch;}
.pay{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;}
.pay>*{min-width:0;}
.pay .hud{background:var(--bg-2);padding:30px 28px;}
.pay .k{font-size:.68rem;letter-spacing:.2em;color:var(--y);margin-bottom:18px;}
.big{font-family:var(--sans);font-weight:700;font-size:clamp(3rem,7vw,5.6rem);line-height:.9;letter-spacing:-.05em;color:var(--y);
  text-shadow:0 0 40px rgba(255,210,8,.2);display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;}
.big small{font-family:var(--mono);font-size:.95rem;letter-spacing:.12em;color:var(--dim);font-weight:500;}
.usd{margin-top:14px;font-size:.8rem;letter-spacing:.06em;color:var(--dim);}
.usd b{color:var(--text);font-weight:500;}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:28px;}
.pay-grid span{background:var(--bg-2);padding:14px 14px;font-size:.64rem;letter-spacing:.16em;color:var(--dim);display:flex;flex-direction:column;gap:8px;}
.pay-grid b{font-size:1.05rem;letter-spacing:.02em;color:var(--text);font-weight:500;}
#walletForm{display:flex;align-items:stretch;gap:0;border:1px solid var(--y-line);background:#000;}
#walletForm .prompt{display:flex;align-items:center;padding:0 4px 0 14px;color:var(--y);font-size:.8rem;}
#walletForm input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font:500 .86rem var(--mono);padding:15px 10px;}
#walletForm input::placeholder{color:var(--dimmer);}
#walletForm:focus-within{border-color:var(--y);box-shadow:0 0 24px -6px rgba(255,210,8,.4);}
#walletForm .btn{clip-path:none;border-width:0 0 0 1px;}
.note{margin-top:12px;font-size:.66rem;line-height:1.6;letter-spacing:.04em;color:var(--dimmer);}
.wmsg{margin-top:14px;font-size:.76rem;letter-spacing:.06em;color:var(--y);min-height:1.2em;}
.wmsg.err{color:var(--down);}
.card-out{margin-top:18px;}
.card-out canvas{width:100%;height:auto;display:block;border:1px solid var(--y-line);}
.card-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;}
@media(max-width:900px){.pay{grid-template-columns:1fr;}}
@media(max-width:460px){#walletForm{flex-wrap:wrap;}#walletForm input{flex-basis:70%;}#walletForm .btn{flex-basis:100%;justify-content:center;border-width:1px 0 0;}}