/* ============================================================
   OGR / $RICE — shared styles
   ============================================================ */
:root{
  --ink:        #0E2017;
  --terrace:    #1A3526;
  --terrace-2:  #234231;
  --husk:       #EDE7D5;
  --husk-dim:   #C9C2AC;
  --gold:       #D9A441;
  --gold-soft:  #E9C77E;
  --sage:       #7FA886;
  --stem:       #5E8367;
  --day-bg:     #F2EDDE;
  --day-ink:    #14271C;
  --maxw: 1120px;
  --radius: 14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  background:var(--ink);
  color:var(--husk);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--ink)}
h1,h2,h3,.display{font-family:'Young Serif',serif;font-weight:400;line-height:1.12}
.mono{font-family:'Spline Sans Mono',monospace}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* grain noise */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ---------- labels ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);font-weight:600;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)}

/* ---------- nav ---------- */
nav.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(237,231,213,.08);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:'Young Serif',serif;font-size:19px}
.brand .grain-dot{width:11px;height:16px;background:var(--gold);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;transform:rotate(18deg);box-shadow:0 0 14px rgba(217,164,65,.55)}
.brand small{color:var(--husk-dim);font-family:'Hanken Grotesk';font-size:13px;font-weight:500}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:500}
.nav-links a{text-decoration:none;color:var(--husk-dim);transition:color .2s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--husk)}
.nav-links a.active{color:var(--gold)}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold);color:var(--ink);text-decoration:none;
  font-weight:700;font-size:14.5px;padding:10px 20px;border-radius:999px;
  border:1px solid var(--gold);cursor:pointer;
  font-family:'Hanken Grotesk',sans-serif;
  transition:transform .15s ease, background .2s;
}
.btn:hover{background:var(--gold-soft);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--husk);border-color:rgba(237,231,213,.3)}
.btn.ghost:hover{border-color:var(--husk);background:rgba(237,231,213,.06)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tg-mobile{display:none}
@media(max-width:760px){
  .nav-inner{padding:12px 16px;gap:10px}
  .nav-links{gap:14px;font-size:13px}
  .brand small{display:none}
  .btn{padding:9px 14px;font-size:13px}
  .nav-links .nav-cta{display:none}
  .tg-mobile{display:inline-flex;align-items:center;justify-content:center;color:var(--husk);width:34px;height:34px;border-radius:999px;border:1px solid rgba(237,231,213,.22);transition:color .15s,border-color .15s,background .15s}
  .tg-mobile:hover{color:var(--gold);border-color:var(--gold);background:rgba(217,164,65,.08)}
}
@media(max-width:420px){
  .nav-links{gap:10px;font-size:12px}
  .nav-links .hide-m.secondary{display:none}
}

/* ---------- sections ---------- */
section{position:relative;padding:110px 0}
.sect-head{max-width:680px;margin-bottom:56px}
.sect-head h2{font-size:clamp(30px,4.4vw,50px);margin-top:18px}
.sect-head p{margin-top:16px;color:var(--husk-dim)}

/* ---------- hero ---------- */
header.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  position:relative;padding:120px 0 140px;overflow:hidden;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(217,164,65,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(127,168,134,.10), transparent 60%),
    var(--ink);
}
header.hero.compact{min-height:52svh;padding:150px 0 90px}
.contours{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none}
.hero-inner{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
.hero h1{font-size:clamp(44px,8.2vw,104px);letter-spacing:-.01em;max-width:13ch;margin:22px 0 0}
.hero.compact h1{font-size:clamp(38px,6vw,76px)}
.hero h1 em{font-style:normal;color:var(--gold);white-space:nowrap}
.hero h1 em.it{font-style:italic}
.hero-sub{margin-top:26px;max-width:54ch;font-size:clamp(17px,2vw,20px);color:var(--husk-dim);font-weight:300}
.hero-sub strong{color:var(--husk);font-weight:600}
.hero-cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.single-grain{position:absolute;right:8vw;top:46%;transform:translateY(-50%);width:min(30vw,300px);aspect-ratio:1;z-index:1;pointer-events:none}
@media(max-width:900px){.single-grain{opacity:.35;right:-40px}}
.grain-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle, rgba(217,164,65,.22) 0%, transparent 65%);animation:pulse 5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:.55}}
.grain-shape{
  position:absolute;left:50%;top:50%;width:13%;height:22%;
  transform:translate(-50%,-50%) rotate(20deg);
  background:linear-gradient(160deg, var(--gold-soft), var(--gold) 60%, #A87A2B);
  border-radius:50%/58% 58% 44% 44%;
  box-shadow:0 0 40px rgba(217,164,65,.45), inset -4px -6px 10px rgba(0,0,0,.25), inset 4px 6px 10px rgba(255,255,255,.3);
}
.grain-shape::after{content:"";position:absolute;left:46%;top:8%;width:10%;height:84%;background:rgba(120,84,20,.35);border-radius:999px}
.scroll-hint{
  position:absolute;bottom:118px;left:50%;transform:translateX(-50%);
  z-index:4;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--husk-dim);
  display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;
}
.scroll-hint::after{content:"";width:1px;height:30px;background:linear-gradient(var(--gold),transparent)}

/* ============================================================
   FARM LIFE — swaying rice stalks + drifting grains
   ============================================================ */
.paddy-field{
  position:absolute;left:0;right:0;bottom:-4px;height:170px;
  z-index:2;pointer-events:none;display:flex;align-items:flex-end;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.paddy-field.short{height:120px}
.stalk{
  position:absolute;bottom:0;
  transform-origin:50% 100%;
  animation:sway var(--dur,5s) ease-in-out var(--delay,0s) infinite;
  will-change:transform;
}
@keyframes sway{
  0%,100%{transform:rotate(var(--amp-neg,-2.6deg))}
  50%{transform:rotate(var(--amp,2.6deg))}
}
.grain-particle{
  position:absolute;z-index:2;pointer-events:none;
  width:7px;height:12px;border-radius:50%/58% 58% 44% 44%;
  background:linear-gradient(160deg, var(--gold-soft), var(--gold));
  opacity:0;
  animation:drift var(--ddur,14s) linear var(--ddelay,0s) infinite;
  filter:drop-shadow(0 0 6px rgba(217,164,65,.5));
}
@keyframes drift{
  0%   {transform:translate(0,0) rotate(0deg);opacity:0}
  8%   {opacity:var(--dop,.7)}
  85%  {opacity:var(--dop,.7)}
  100% {transform:translate(var(--dx,40px), -78vh) rotate(300deg);opacity:0}
}

/* ---------- lore ---------- */
#lore{background:linear-gradient(180deg, var(--ink), var(--terrace) 140%)}
.chapters{display:grid;gap:0}
.chapter{display:grid;grid-template-columns:120px 1fr;gap:28px;padding:44px 0;border-top:1px solid rgba(237,231,213,.10)}
.chapter:last-child{border-bottom:1px solid rgba(237,231,213,.10)}
.chapter .day{font-family:'Spline Sans Mono',monospace;color:var(--gold);font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding-top:6px}
.chapter .day b{display:block;font-size:30px;color:var(--husk);font-weight:500;letter-spacing:0;margin-top:4px}
.chapter h3{font-size:clamp(22px,2.6vw,30px);margin-bottom:12px}
.chapter p{color:var(--husk-dim);max-width:62ch}
.chapter p strong{color:var(--gold-soft);font-weight:600}
@media(max-width:640px){.chapter{grid-template-columns:1fr;gap:10px}}

/* ---------- doubling ---------- */
#doubling{background:var(--terrace)}
.doubling-card{
  background:linear-gradient(170deg, var(--terrace-2), var(--ink) 130%);
  border:1px solid rgba(237,231,213,.12);
  border-radius:calc(var(--radius) + 8px);
  padding:clamp(24px,4vw,48px);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.doubling-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:880px){.doubling-grid{grid-template-columns:1fr}}
#grainCanvas{width:100%;height:auto;display:block;border-radius:var(--radius);background:rgba(14,32,23,.55);border:1px solid rgba(237,231,213,.08)}
.stats{display:grid;gap:22px}
.stat label{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--husk-dim)}
.stat .val{font-family:'Spline Sans Mono',monospace;font-size:clamp(26px,3.4vw,40px);color:var(--gold-soft);margin-top:2px;font-weight:500;font-variant-numeric:tabular-nums}
.stat .val.small{font-size:clamp(18px,2.2vw,24px);color:var(--husk)}
.slider-row{margin-top:8px}
.slider-row .between{display:flex;justify-content:space-between;font-size:12px;color:var(--husk-dim);margin-top:8px;font-family:'Spline Sans Mono',monospace}
input[type=range]{
  width:100%;appearance:none;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--gold) var(--fill,0%), rgba(237,231,213,.15) var(--fill,0%));
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--gold);border:3px solid var(--ink);
  box-shadow:0 0 0 2px var(--gold), 0 4px 14px rgba(0,0,0,.4);
}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold);border:3px solid var(--ink);box-shadow:0 0 0 2px var(--gold)}
.doubling-note{margin-top:18px;font-size:14px;color:var(--husk-dim)}
.doubling-note .mono{color:var(--sage)}

/* ---------- mission (daylight) ---------- */
#mission{background:var(--day-bg);color:var(--day-ink)}
#mission .eyebrow{color:#8A6A1F}
#mission .eyebrow::before{background:#8A6A1F}
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:880px){.mission-grid{grid-template-columns:1fr}}
.mission-lead{font-family:'Young Serif',serif;font-size:clamp(24px,3.2vw,36px);line-height:1.3}
.mission-lead em{font-style:normal;color:#B07F1F}
.mission-body p{margin-bottom:18px;color:#3C4A40;font-size:17.5px}
.mission-body p strong{color:var(--day-ink)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:64px}
@media(max-width:760px){.pillars{grid-template-columns:1fr}}
.pillar{background:#FBF8EF;border:1px solid #E0D8C2;border-radius:var(--radius);padding:26px 24px}
.pillar .ico{font-size:24px;line-height:1}
.pillar h3{font-size:19px;margin:14px 0 8px;color:var(--day-ink)}
.pillar p{font-size:15px;color:#5A675E}
.mission-credo{margin-top:64px;border-top:2px solid var(--day-ink);padding-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.mission-credo{grid-template-columns:1fr}}
.credo{font-family:'Young Serif',serif;font-size:clamp(19px,2vw,23px);line-height:1.35}
.credo span{color:#B07F1F}

/* ---------- PFP page ---------- */
.pfp-grid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:880px){.pfp-grid{grid-template-columns:1fr}}
.pfp-stage{
  position:relative;border-radius:calc(var(--radius) + 6px);overflow:hidden;
  border:1px solid rgba(237,231,213,.14);background:rgba(14,32,23,.6);
  aspect-ratio:1;max-width:560px;
}
#pfpCanvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#pfpCanvas.dragging{cursor:grabbing}
.dropzone{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:30px;cursor:pointer;transition:background .2s;
}
.dropzone:hover,.dropzone.over{background:rgba(217,164,65,.06)}
.dropzone .dz-ico{width:64px;height:64px;border:1.5px dashed rgba(237,231,213,.35);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--gold)}
.dropzone .dz-label{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--husk);font-weight:600}
.dropzone .dz-sub{font-size:13.5px;color:var(--husk-dim)}
.dropzone.hidden{display:none}
.pfp-controls{display:grid;gap:24px}
.pfp-controls .hint{font-size:14px;color:var(--husk-dim)}
.pfp-controls .hint strong{color:var(--gold-soft);font-weight:600}
.ctrl label{display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--husk-dim);margin-bottom:10px}
.ctrl label span{color:var(--gold-soft);font-family:'Spline Sans Mono',monospace;letter-spacing:0;text-transform:none}
.pfp-actions{display:flex;gap:12px;flex-wrap:wrap}
.toggle-row{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--husk)}
.toggle-row input{accent-color:var(--gold);width:18px;height:18px;cursor:pointer}
.privacy-note{font-size:12.5px;color:rgba(201,194,172,.65)}

/* ---------- join / CTA ---------- */
#join{
  background:radial-gradient(900px 480px at 50% 0%, rgba(217,164,65,.12), transparent 60%), var(--ink);
  text-align:center;overflow:hidden;
}
#join h2{font-size:clamp(34px,5.6vw,64px);max-width:18ch;margin:18px auto 0}
#join .q{color:var(--gold)}
#join .hero-cta{justify-content:center}
.contract{
  margin:54px auto 0;max-width:680px;
  background:rgba(237,231,213,.05);border:1px solid rgba(237,231,213,.14);
  border-radius:var(--radius);padding:18px 20px;
  display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;
  position:relative;z-index:3;
}
.contract .addr{font-family:'Spline Sans Mono',monospace;font-size:13.5px;color:var(--husk-dim);word-break:break-all;text-align:left}
.contract .addr small{display:block;letter-spacing:.2em;text-transform:uppercase;font-size:10.5px;color:var(--gold);margin-bottom:4px}
.copy-btn{
  background:transparent;border:1px solid rgba(237,231,213,.3);color:var(--husk);
  font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:13.5px;
  padding:9px 16px;border-radius:999px;cursor:pointer;transition:all .2s;white-space:nowrap;
}
.copy-btn:hover{border-color:var(--gold);color:var(--gold)}
.copy-btn.copied{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.socials{display:flex;gap:14px;justify-content:center;margin-top:40px;flex-wrap:wrap;position:relative;z-index:3}
.socials a{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:14px;font-weight:600;color:var(--husk-dim);
  border:1px solid rgba(237,231,213,.16);border-radius:999px;padding:10px 18px;transition:all .2s;
}
.socials a:hover{color:var(--husk);border-color:var(--gold)}
.socials svg{width:16px;height:16px;fill:currentColor}

footer{border-top:1px solid rgba(237,231,213,.08);padding:34px 0;font-size:13.5px;color:var(--husk-dim)}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.disclaimer{font-size:12px;max-width:560px;color:rgba(201,194,172,.6)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}

/* ============================================================
   UNDER-DEVELOPMENT ACCESS GATE
   ============================================================ */
#rice-gate{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center; padding:24px;
  background:radial-gradient(120% 80% at 50% 0%, #1A3526 0%, #0E2017 55%, #050C09 100%);
  color:var(--husk);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  animation:gateIn .6s ease-out both;
  overflow:hidden;
}
@keyframes gateIn{from{opacity:0}to{opacity:1}}
#rice-gate.gate-out{animation:gateOut .55s ease-in forwards}
@keyframes gateOut{to{opacity:0; transform:scale(1.02); filter:blur(6px)}}

.gate-bg{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.gate-orb{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.55;
  mix-blend-mode:screen; animation:gateFloat 14s ease-in-out infinite;
}
.gate-orb-a{width:520px;height:520px; background:#D9A441; top:-120px; left:-120px}
.gate-orb-b{width:460px;height:460px; background:#5E8367; bottom:-140px; right:-100px; animation-delay:-5s}
.gate-orb-c{width:340px;height:340px; background:#E9C77E; top:40%; left:60%; opacity:.35; animation-delay:-9s}
@keyframes gateFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-30px) scale(1.08)}
}

.gate-grain-layer{position:absolute; inset:0}
.gate-grain{
  position:absolute; bottom:-20px;
  width:6px; height:10px; border-radius:50%;
  background:linear-gradient(180deg,#F2D98A,#B7831F);
  box-shadow:0 0 8px rgba(233,199,126,.55);
  opacity:0;
  animation:gateGrainRise var(--gd) linear infinite;
  animation-delay:var(--gdl);
}
@keyframes gateGrainRise{
  0%{transform:translate(0,0) rotate(0); opacity:0}
  10%{opacity:.85}
  90%{opacity:.6}
  100%{transform:translate(var(--gx), -110vh) rotate(360deg); opacity:0}
}

.gate-card{
  position:relative; z-index:2;
  width:min(440px, 100%);
  padding:34px 30px 28px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(35,66,49,.78), rgba(14,32,23,.86));
  border:1px solid rgba(237,231,213,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
  text-align:center;
  animation:gateCardIn .9s cubic-bezier(.2,.8,.2,1) .15s both;
}
@keyframes gateCardIn{from{opacity:0; transform:translateY(18px) scale(.96)}to{opacity:1; transform:none}}

#rice-gate.gate-shake .gate-card{animation:gateShake .45s ease}
@keyframes gateShake{
  10%,90%{transform:translateX(-3px)}
  20%,80%{transform:translateX(5px)}
  30%,50%,70%{transform:translateX(-8px)}
  40%,60%{transform:translateX(8px)}
}

#rice-gate.gate-success .gate-card{
  border-color:rgba(217,164,65,.55);
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(217,164,65,.4), 0 0 60px rgba(217,164,65,.35);
}

.gate-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  background:rgba(217,164,65,.12);
  border:1px solid rgba(217,164,65,.32);
  color:var(--gold-soft);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
.gate-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 0 rgba(217,164,65,.6);
  animation:gatePulse 1.8s ease-out infinite;
}
@keyframes gatePulse{
  0%{box-shadow:0 0 0 0 rgba(217,164,65,.6)}
  100%{box-shadow:0 0 0 12px rgba(217,164,65,0)}
}

.gate-title{
  font-family:'Fraunces','Cormorant Garamond',serif;
  font-weight:500;
  font-size:28px; line-height:1.15;
  margin:18px 0 10px;
  color:var(--husk);
}
.gate-sub{
  color:var(--husk-dim);
  font-size:14.5px; line-height:1.55;
  margin-bottom:22px;
}

.gate-pins{display:flex; gap:10px; justify-content:center; margin-bottom:18px}
.gate-pin{
  width:54px; height:62px;
  text-align:center;
  font-family:'Fraunces',serif;
  font-size:26px; font-weight:600;
  color:var(--husk);
  background:rgba(14,32,23,.6);
  border:1px solid rgba(237,231,213,.18);
  border-radius:12px;
  outline:none;
  transition:border-color .2s, box-shadow .2s, transform .15s;
  caret-color:var(--gold);
}
.gate-pin:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(217,164,65,.18);
  transform:translateY(-1px);
}

.gate-btn{
  width:100%;
  padding:13px 18px;
  border:none; border-radius:12px;
  background:linear-gradient(180deg, #E9C77E, #C8932F);
  color:#1A1108;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-weight:700; font-size:15px; letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(217,164,65,.25), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .15s, box-shadow .2s, filter .2s;
}
.gate-btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
.gate-btn:active{transform:translateY(0)}

.gate-msg{
  min-height:18px; margin-top:12px;
  font-size:13px; color:#E89A8A;
}

.gate-foot{
  margin-top:18px;
  font-size:12px; color:var(--husk-dim); opacity:.75;
}

@media (max-width:480px){
  .gate-title{font-size:23px}
  .gate-pin{width:46px; height:56px; font-size:22px}
  .gate-card{padding:28px 22px 24px}
}

/* ============================================================
   PROGRESSIVE REVEAL
   Sections start hidden; .revealed fades them in.
   Sticky progress bar at bottom shows build status.
   ============================================================ */
.reveal-section{
  display:none;
}
.reveal-section.revealed{
  display:block;
  animation: revealIn .8s ease-out both;
}
@keyframes revealIn{
  0%   { opacity:0; transform: translateY(24px); filter: blur(6px); }
  100% { opacity:1; transform: translateY(0);    filter: blur(0); }
}

.reveal-bar{
  position:fixed; left:0; right:0; bottom:0;
  z-index: 9000;
  background: linear-gradient(180deg, rgba(14,32,23,.0), rgba(14,32,23,.92) 35%, rgba(14,32,23,.98));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(217,164,65,.22);
  padding: 14px 18px 16px;
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-bar-done{ opacity:0; transform: translateY(100%); pointer-events:none; }
.reveal-bar-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  display:flex; flex-direction:column; gap:8px;
}
.reveal-bar-label{
  display:flex; align-items:center; gap:10px;
  font-size: 13px; color: var(--husk-dim);
  flex-wrap: wrap;
}
.reveal-bar-label .reveal-text strong{ color: var(--gold-soft); }
.reveal-bar-label .reveal-next{ margin-left:auto; font-variant-numeric: tabular-nums; }
.reveal-bar-label .reveal-countdown{ color: var(--husk); font-weight:600; }
.reveal-dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(217,164,65,.55);
  animation: revealPulse 1.8s ease-out infinite;
}
@keyframes revealPulse{
  0%   { box-shadow: 0 0 0 0 rgba(217,164,65,.55); }
  100% { box-shadow: 0 0 0 12px rgba(217,164,65,0); }
}
.reveal-bar-track{
  width:100%; height:6px; border-radius:999px;
  background: rgba(237,231,213,.10);
  overflow:hidden;
}
.reveal-bar-fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft), var(--sage));
  background-size: 200% 100%;
  animation: revealShimmer 3.5s linear infinite;
  border-radius:999px;
  transition: width .8s ease;
}
@keyframes revealShimmer{
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
/* keep page content above the bar */
body{ padding-bottom: 68px; }
@media (max-width:560px){
  .reveal-bar-label{ font-size:12px; gap:8px; }
  .reveal-bar-label .reveal-next{ width:100%; margin-left:0; }
}