/* ============================================================
   Ponsi — stylesheet

   Dark cinematic treatment over the rain film. Light type on graded
   footage reads crisply at any frame, which is why there are no text
   halos or scrims anywhere in here: contrast comes from grading the
   video down, not from washing boxes over it.

   Boxes are transparent (a faint light fill + hairline border) and
   deliberately NOT blurred — the film stays legible through them.
   ============================================================ */
:root{
  --ink:#eef4f0;            /* primary type */
  --ink-hi:#ffffff;
  --muted:rgba(238,244,240,.60);
  --dark:#0a120e;           /* for type on light fills */
  --line:rgba(255,255,255,.16);
  --line-hi:rgba(255,255,255,.34);
  --card:rgba(255,255,255,.055);
  --glass:rgba(255,255,255,.10);
  --accent:#4ade8a;
  --radius:18px; --pill:99px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0a120e;color:var(--ink);
  font-family:"Geist","Geist Fallback",system-ui,Arial,sans-serif;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.mono{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;letter-spacing:.09em;font-size:11px}
.muted{color:var(--muted)}
.small{font-size:11px}
a{color:inherit}
img,video{display:block;max-width:100%}
h1,h2,h3{margin:0;letter-spacing:-.035em;line-height:.94;font-weight:600;color:var(--ink-hi)}
[hidden]{display:none!important}
::selection{background:var(--accent);color:var(--dark)}

/* ── the film ─────────────────────────────────────────────
   Fixed under the whole document. Graded down hard so light type
   sits on it cleanly and 1080p reads as cinematic, not washed. */
.film{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#0a120e}
.film__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.46) contrast(1.14) saturate(.82);
  opacity:0;animation:filmIn 2s ease .1s forwards}
@keyframes filmIn{to{opacity:1}}
/* depth: a soft vignette plus a touch more floor at top and bottom */
.film__veil{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 38%,rgba(10,18,14,0) 0%,rgba(10,18,14,.42) 68%,rgba(10,18,14,.72) 100%),
  linear-gradient(180deg,rgba(10,18,14,.62),rgba(10,18,14,.18) 34%,rgba(10,18,14,.66))}
.film.no-video{background:
  radial-gradient(120% 120% at 70% 15%,rgba(74,222,138,.10),transparent 62%),#0a120e}
.film.no-video .film__video{display:none}
/* every real layer sits above the film */
.nav,main,.foot{position:relative;z-index:1}

/* ── buttons ─────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  border-radius:var(--pill);border:1px solid var(--line);background:var(--glass);
  color:var(--ink);padding:.62em 1.25em;font:inherit;font-weight:500;font-size:13px;
  cursor:pointer;text-decoration:none;transition:.18s ease;white-space:nowrap}
.pill:hover{border-color:var(--line-hi);background:rgba(255,255,255,.16)}
.pill--solid{background:var(--ink);color:var(--dark);border-color:transparent;font-weight:600}
.pill--solid:hover{background:#fff;border-color:transparent}
.pill--lg{padding:.92em 1.7em;font-size:15px}
.pill--full{width:100%;margin-top:12px}
.pill--icon{width:36px;height:36px;padding:0;border-radius:50%}
.iconbtn{border:1px solid var(--line);background:var(--glass);border-radius:8px;
  cursor:pointer;padding:5px 9px;color:var(--ink);font-size:14px;transition:.18s}
.iconbtn:hover{border-color:var(--line-hi)}
.link{color:var(--accent);text-decoration:none}
.link:hover{text-decoration:underline}
.awaiting{opacity:.5}

/* ── nav ─────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;
  padding:15px 28px;background:rgba(10,18,14,.55);border-bottom:1px solid var(--line)}
.nav__brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:20px;
  text-decoration:none;letter-spacing:-.02em;color:var(--ink-hi)}
.dot{color:var(--accent)}
/* the mark is now a real svg file — no clip-path, or it would cut the image */
/* the supplied logo is a black plate on a white canvas — crop straight to
   the plate with background-position so no white shows on the dark nav */
.mark{width:30px;height:30px;display:block;flex:none;border-radius:8px;
  background-image:url(media/logo.png);
  background-size:58.60px 58.60px;background-position:-14.30px -13.08px;
  background-repeat:no-repeat}
.nav__links{display:flex;gap:22px;margin-left:10px;font-size:12px;
  text-transform:uppercase;letter-spacing:.09em}
.nav__links a{text-decoration:none;color:var(--muted);transition:.18s}
.nav__links a:hover{color:var(--ink-hi)}
.nav__actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.is-on{background:var(--accent)!important;color:var(--dark)!important;border-color:transparent!important}

/* ── hero ────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden}
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;
  gap:48px;align-items:center;max-width:1200px;margin:0 auto;padding:84px 28px 104px}
.rail{font-size:11px;color:var(--muted);letter-spacing:.12em;margin-bottom:22px;
  font-family:"Geist Mono",monospace}
.rail span{margin-left:12px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;text-transform:uppercase;
  letter-spacing:.15em;font-size:11.5px;color:var(--muted);margin:0 0 20px;
  font-family:"Geist Mono",monospace}
.eyebrow--dark{color:var(--accent)}
.dotpulse{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(74,222,138,.55);animation:pulse 2s infinite}
.dotpulse--sm{width:6px;height:6px}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(74,222,138,0)}100%{box-shadow:0 0 0 0 rgba(74,222,138,0)}}
h1{font-size:clamp(50px,8.2vw,112px);letter-spacing:-.055em;line-height:.88;font-weight:600}
.lede{max-width:42ch;font-size:17px;color:rgba(238,244,240,.82);margin:26px 0 30px;line-height:1.6}
.lede b{color:var(--ink-hi);font-weight:600}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.hero__cta--center{justify-content:center}
.ticks{display:flex;gap:24px;list-style:none;padding:0;margin:32px 0 0;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  font-family:"Geist Mono",monospace}
.ticks li::before{content:"✓ ";color:var(--accent)}

/* ── reward terminal ─────────────────────────────────────── */
.terminal{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.terminal__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.tag{border:1px solid var(--line);border-radius:99px;padding:4px 11px;color:var(--muted)}
.pyramid{position:relative;margin:4px 0 18px;display:flex;justify-content:center}
.pyramid svg{width:100%;max-width:270px;height:auto;display:block;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.pyramid__badge{position:absolute;right:2px;top:50%;transform:translateY(-50%);
  background:rgba(10,18,14,.82);border:1px solid var(--line);border-radius:14px;
  padding:10px 14px;text-align:center;line-height:1}
.pyramid__badge small{display:block;font-size:9px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);font-family:"Geist Mono",monospace}
.pyramid__badge b{font-size:28px;color:var(--ink-hi);display:block;margin:4px 0;letter-spacing:-.03em}
.terminal__panel{border-top:1px solid var(--line);padding-top:16px}
.terminal__panelhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.terminal__panelhead .mono{display:inline-flex;align-items:center;gap:7px}
.terminal__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.terminal__stats>div{min-width:0}
.terminal__stats .mono{font-size:10px;line-height:1.35}
.terminal__stats b{display:block;font-size:14px;margin-top:5px;font-weight:600;color:var(--ink-hi)}
.terminal__stats span{display:block}
.terminal__flow{display:flex;align-items:center;gap:11px;margin-top:20px;
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  font-family:"Geist Mono",monospace}
.terminal__flow i{flex:1;height:1px;background:var(--line)}

/* ── bands ───────────────────────────────────────────────── */
.band{max-width:1200px;margin:0 auto;padding:92px 28px}
.band__head{max-width:780px;margin-bottom:40px}
.band h2{font-size:clamp(36px,5.2vw,66px);margin-top:8px}
.band__sub{color:rgba(238,244,240,.72);margin-top:18px;font-size:15.5px;max-width:62ch;line-height:1.65}
.band__sub.wide{max-width:54ch;font-size:17px}
.fineprint{color:var(--muted);font-size:12.5px;margin-top:20px;max-width:54ch;line-height:1.6}

.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--card)}
.stat b{display:block;font-size:27px;margin:10px 0 7px;font-weight:600;color:var(--ink-hi)}
.stat small{color:var(--muted);font-size:11.5px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.cadencecard{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:24px}
.cadencecard__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rows .row{display:flex;justify-content:space-between;align-items:center;
  padding:15px 0;border-bottom:1px solid var(--line)}
.rows .row:last-child{border-bottom:0}
.rows .row b{color:var(--ink-hi);font-weight:600}

.loop{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.loopcard{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:var(--card)}
.loopcard__n{font-family:"Geist Mono",monospace;color:var(--accent);font-size:13px}
.loopcard h3{font-size:27px;margin:14px 0 11px;text-transform:lowercase;letter-spacing:-.03em}
.loopcard p{color:var(--muted);margin:0;font-size:14px;line-height:1.6}
.callout{margin-top:24px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);padding:24px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.callout p{margin:0;flex:1;min-width:270px;color:rgba(238,244,240,.78);line-height:1.6}

/* ── checker + leaderboard ───────────────────────────────── */
.checker{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.checker__form,.checker__board{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);padding:24px}
.checker__row{display:flex;gap:10px;margin:12px 0}
.checker__row input{flex:1;border:1px solid var(--line);border-radius:11px;padding:13px 15px;
  font:inherit;font-family:"Geist Mono",monospace;font-size:13px;
  background:rgba(0,0,0,.28);color:var(--ink-hi)}
.checker__row input::placeholder{color:rgba(238,244,240,.38)}
.checker__row input:focus{outline:none;border-color:var(--accent)}
.checker__result{margin-top:18px;display:grid;gap:13px;border-top:1px solid var(--line);padding-top:18px}
.checker__result>div{display:flex;justify-content:space-between;align-items:center}
.checker__result b{font-weight:600;color:var(--ink-hi);font-size:15px}
.checker__err{color:#ff8a73;margin-top:12px}
.checker__boardhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.lb__empty{margin:0;line-height:1.7}
.lbrow{display:grid;grid-template-columns:34px 1fr auto 62px;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line);align-items:center}
.lbrow:last-child{border-bottom:0}
.lbrow--head{padding-top:0;border-bottom-color:var(--line-hi)}
.lbrow b{color:var(--ink-hi);text-align:right}
.lbrow>span:nth-child(3){color:rgba(238,244,240,.78)}
.lbrank{color:var(--accent)}
/* market */
.statgrid--market .stat b{font-size:24px;word-break:break-all}
.chg{font-size:11.5px;font-family:"Geist Mono",monospace;letter-spacing:.06em}
.chg--up{color:var(--accent)}
.chg--down{color:#ff8a73}
.callout--slim{padding:18px 22px}
.tokencard__meta--top{margin-top:-18px;border-top:0}

/* excluded rows */
.lbex{margin-top:16px;border-top:1px dashed var(--line-hi);padding-top:14px}
.lbex p{margin:0 0 8px}
.lbrow--ex{grid-template-columns:34px 1fr auto 62px auto;opacity:.72}
.extag{border:1px solid var(--line);border-radius:99px;padding:3px 9px;color:var(--muted);white-space:nowrap}

.lb{max-height:420px;overflow-y:auto;padding-right:6px}
.lb::-webkit-scrollbar{width:6px}
.lb::-webkit-scrollbar-thumb{background:var(--line-hi);border-radius:6px}

/* ── proof ───────────────────────────────────────────────── */
.tokencards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
.tokencard{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:24px}
.tokencard__tag{color:var(--accent);margin-bottom:10px}
.tokencard h3{font-size:36px;letter-spacing:-.04em}
.tokencard__meta{display:flex;justify-content:space-between;align-items:center;margin:18px 0;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tokencard__meta b{color:var(--ink-hi);font-weight:600}
.tokencard__addr{display:flex;gap:9px;align-items:center;margin-bottom:14px}
.tokencard__addr code{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:rgba(0,0,0,.28);padding:9px 11px;border-radius:9px;border:1px solid var(--line);
  font-family:"Geist Mono",monospace;color:rgba(238,244,240,.8)}
.registry{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:24px}
.registry__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.registry__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.regrow{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line)}

/* ── history ─────────────────────────────────────────────── */
.history__empty,.histrow{display:flex;gap:18px;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:22px}
.histrow{display:grid;grid-template-columns:auto 1fr auto;margin-bottom:12px}
.history__empty b,.histrow b{color:var(--ink-hi)}
.history__empty p,.histrow p{margin:5px 0 0}

/* ── closer ──────────────────────────────────────────────── */
.closer{text-align:center;max-width:920px;margin:0 auto;padding:110px 28px}
.closer__title{font-size:clamp(46px,8vw,98px);margin:12px 0 32px;letter-spacing:-.05em}

/* ── footer ──────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:44px 28px;max-width:1200px;margin:0 auto;display:grid;gap:18px}
.foot__brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:20px;color:var(--ink-hi)}
.foot__disc{color:var(--muted);font-size:12.5px;max-width:72ch;line-height:1.65;margin:0}
.foot__links{display:flex;gap:22px;font-size:12px;text-transform:uppercase;letter-spacing:.09em}
.foot__links a{color:var(--muted);text-decoration:none;transition:.18s}
.foot__links a:hover{color:var(--ink-hi)}
.foot__copy{color:var(--muted);margin:0}

/* ── toast ───────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--dark);padding:13px 20px;border-radius:12px;font-size:13px;
  font-weight:600;opacity:0;pointer-events:none;transition:.22s ease;z-index:100;
  font-family:"Geist Mono",monospace}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── reveal ──────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .film__video{animation:none;opacity:1}
}

/* ── responsive ──────────────────────────────────────────── */
@media(max-width:900px){
  .hero__inner,.split,.checker,.tokencards{grid-template-columns:1fr}
  .statgrid,.loop{grid-template-columns:1fr}
  .registry__grid{grid-template-columns:1fr}
  .nav__links{display:none}
  .hero__inner{padding:56px 22px 72px}
  .band{padding:64px 22px}
  .terminal__stats{grid-template-columns:repeat(3,1fr);gap:10px}
}