/* ===========================================================
   MyPokemonCollection — graded Pokémon comp tracker
   Palette
     --ink     #0B0E14  near-black case interior
     --panel   #121620  raised surface
     --line    #232A38  hairline
     --fog     #8A93A6  muted label text
     --paper   #EDEFF4  primary text
     --slab    #38E0B0  graded-mint accent (the one bold note)
     --gold    #E7B34A  PSA-gold secondary accent
   Type: Space Grotesk (display), JetBrains Mono (data), system body
   =========================================================== */

:root{
  --ink:#0B0E14; --panel:#121620; --panel-2:#171C28;
  --line:#232A38; --fog:#8A93A6; --paper:#EDEFF4;
  --slab:#38E0B0; --gold:#E7B34A; --red:#FF6B6B;
  --wrap:1160px;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --disp:"Space Grotesk",system-ui,sans-serif;
}

*{box-sizing:border-box}
/* Keep the page root dark so navigating between pages never shows a light or
   image frame between loads (fixes the flash that "rises from the bottom"). */
html{scroll-behavior:smooth;background:#0B0E14;min-height:100%}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--disp); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.05;letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--slab);
}
.mono{font-family:var(--mono)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,14,20,.78);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  width:18px;height:24px;border-radius:3px;
  background:linear-gradient(160deg,var(--slab),#1f8f72);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.18), 0 0 12px rgba(56,224,176,.4);
}
.brand-logo{height:36px;width:auto;display:block;border-radius:6px}
.footer-logo{height:32px;margin-bottom:14px}
.brand-name{font-weight:700;font-size:18px;letter-spacing:-.02em}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:14px;color:var(--fog);transition:color .15s}
.nav a:hover,.nav a.is-active{color:var(--paper)}
.nav-cta{
  font-family:var(--mono);font-size:13px;color:var(--ink)!important;
  background:var(--slab);padding:9px 16px;border-radius:8px;font-weight:600;
}
.nav-cta:hover{background:#4cebbd}

/* ---------- hero ---------- */
.hero{position:relative;padding:88px 0 72px;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 78% 18%,rgba(56,224,176,.10),transparent 70%),
    radial-gradient(50% 50% at 12% 90%,rgba(231,179,74,.06),transparent 70%);
  pointer-events:none;
}
.hero-grid{
  position:relative;display:grid;grid-template-columns:1.05fr .95fr;
  gap:56px;align-items:center;
}
.hero h1{font-size:clamp(40px,6vw,68px);margin:18px 0}
.hero h1 .hl{color:var(--slab)}
.hero-sub{font-size:18px;color:var(--fog);max-width:36ch;margin-bottom:28px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{
  font-family:var(--mono);font-weight:600;font-size:14px;
  padding:13px 22px;border-radius:9px;cursor:pointer;border:1px solid var(--line);
  background:var(--panel-2);color:var(--paper);
  transition:transform .12s,background .15s,border-color .15s;display:inline-block;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--slab);color:var(--ink);border-color:transparent}
.btn-primary:hover{background:#4cebbd}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--paper)}
.btn-ghost:hover{border-color:var(--slab)}
.hero-meta{
  font-family:var(--mono);font-size:12.5px;color:var(--fog);
  margin-top:22px;display:flex;gap:18px;flex-wrap:wrap;
}
.hero-meta b{color:var(--paper);font-weight:500}

/* ---------- slab mock (signature) ---------- */
.slab{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:14px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.8);
}
.slab-label{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--fog);padding:4px 6px 12px;
}
.grade-chip{
  font-family:var(--mono);font-weight:700;color:var(--ink);
  background:var(--gold);padding:3px 9px;border-radius:5px;font-size:12px;
}
.grade-chip.tag{background:var(--slab)}
.slab-card{
  border-radius:10px;height:300px;
  background:
    radial-gradient(120% 90% at 50% 0%,#2a3550,#141a28 70%),
    var(--panel-2);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;text-align:center;
  position:relative;overflow:hidden;
}
.slab-card .sil{font-size:13px;color:var(--fog);font-family:var(--mono);padding:0 24px}
.slab-card::after{
  content:"";position:absolute;top:-40%;left:-30%;width:60%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  transform:rotate(18deg);animation:sheen 5.5s ease-in-out infinite;
}
@keyframes sheen{0%,60%{left:-40%}100%{left:130%}}
.slab-foot{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:14px 6px 4px;
}
.slab-price .lbl{font-family:var(--mono);font-size:10.5px;color:var(--fog);letter-spacing:.1em;text-transform:uppercase}
.slab-price .val{font-family:var(--mono);font-size:30px;font-weight:700;color:var(--slab)}
.slab-trend{font-family:var(--mono);font-size:12px;color:var(--slab)}
.slab-trend.down{color:var(--red)}

/* ---------- ticker ---------- */
.ticker{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--panel);overflow:hidden;white-space:nowrap;
}
.ticker-track{display:inline-flex;gap:42px;padding:12px 0;animation:scroll 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.tick{font-family:var(--mono);font-size:13px;color:var(--fog)}
.tick b{color:var(--paper);font-weight:500}
.tick .up{color:var(--slab)} .tick .dn{color:var(--red)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:84px 0}
.sec-head{max-width:60ch;margin-bottom:48px}
.sec-head h2{font-size:clamp(28px,4vw,42px);margin:14px 0}
.sec-head p{color:var(--fog);font-size:17px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;
  position:relative;
}
.step-no{font-family:var(--mono);font-size:13px;color:var(--slab);font-weight:700}
.step h3{font-size:20px;margin:14px 0 10px}
.step p{color:var(--fog);font-size:15px}

/* sources */
.source-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.source{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;
  display:flex;gap:18px;align-items:flex-start;
}
.source .badge{
  font-family:var(--mono);font-weight:700;font-size:13px;color:var(--ink);
  padding:6px 10px;border-radius:7px;white-space:nowrap;flex-shrink:0;
}
.badge.psa{background:var(--gold)} .badge.tag{background:var(--slab)}
.badge.ebay{background:#5a6b8c;color:var(--paper)} .badge.raw{background:#3a4459;color:var(--paper)}
.source h3{font-size:18px;margin-bottom:8px}
.source p{color:var(--fog);font-size:15px}

/* collection table */
.coll{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.coll-top{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.coll-top .total{font-family:var(--mono)}
.coll-top .total b{color:var(--slab);font-size:20px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fog);text-align:left;padding:14px 22px;border-bottom:1px solid var(--line);font-weight:500;
}
td{padding:16px 22px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
.c-name{font-weight:500}
.c-set{font-size:12px;color:var(--fog)}
.pill{font-family:var(--mono);font-size:11px;font-weight:700;padding:3px 8px;border-radius:5px;color:var(--ink)}
.pill.psa{background:var(--gold)} .pill.tag{background:var(--slab)} .pill.raw{background:#3a4459;color:var(--paper)}
.c-comp{font-family:var(--mono);font-weight:600}
.c-delta{font-family:var(--mono);font-size:13px}
.c-delta.up{color:var(--slab)} .c-delta.down{color:var(--red)}

/* CTA */
.cta-band{
  background:linear-gradient(120deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:18px;padding:54px;text-align:center;
}
.cta-band h2{font-size:clamp(28px,4vw,40px);margin-bottom:14px}
.cta-band p{color:var(--fog);max-width:46ch;margin:0 auto 28px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--panel);margin-top:40px}
.footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding:54px 24px 36px}
.footer-brand .brand-mark{display:inline-block;vertical-align:middle;margin-right:8px}
.footer-brand .brand-name{font-size:17px}
.footer-note{color:var(--fog);font-size:14px;margin-top:14px;max-width:34ch}
.footer-col h4{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fog);margin-bottom:14px;font-weight:500}
.footer-col a{display:block;color:var(--paper);font-size:14px;padding:5px 0;opacity:.82}
.footer-col a:hover{opacity:1;color:var(--slab)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding:20px 24px;
  font-family:var(--mono);font-size:12px;color:var(--fog);
}
.footer-status .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--slab);margin-right:6px;box-shadow:0 0 8px var(--slab)}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .steps,.source-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
  /* mobile nav via header panel */
  .coll{overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto}
}