/* AfterHours ($HOURS) — style.css */

@font-face{
  font-family:'Luckiest Guy';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/luckiest-guy-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/space-mono-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/space-mono-latin-700-normal.woff2') format('woff2');
}

:root{
  --ink:#191227;
  --bg:#0F0C1B;
  --bg-stripe:#161126;
  --panel:#2E2745;
  --panel-2:#3A3153;
  --yellow:#FFE81A;
  --yellow-deep:#FFD400;
  --red:#FF4B33;
  --red-deep:#D93A25;
  --green:#3BF573;
  --cream:#FFF7C8;
  --muted:#B8AFD6;
  --display:'Luckiest Guy','Arial Black',Impact,sans-serif;
  --mono:'Space Mono','Courier New',monospace;
  --radius:18px;
  --maxw:1120px;
  --nav-h:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    repeating-linear-gradient(-55deg, var(--bg) 0 42px, var(--bg-stripe) 42px 84px);
  color:var(--cream);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}

/* anchor targets clear the sticky nav */
[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}

/* ---------- display type ---------- */
.disp{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:.02em;
  line-height:.95;
  text-transform:uppercase;
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(15,12,27,.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:3px solid var(--ink);
}
.nav-in{
  display:flex;align-items:center;gap:16px;
  height:var(--nav-h);
}
.brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;
  font-family:var(--display);
  font-size:1.35rem;
  color:var(--yellow);
  letter-spacing:.04em;
}
.brand img{width:36px;height:36px}
.nav-links{
  display:flex;align-items:center;gap:26px;
  margin-left:auto;
  list-style:none;
}
.nav-links a{
  text-decoration:none;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--yellow);
  transition:color .15s;
}
.nav-links a:hover{color:#fff}
.btn{
  display:inline-block;
  font-family:var(--mono);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-decoration:none;
  text-align:center;
  border:3px solid var(--ink);
  border-radius:999px;
  cursor:pointer;
  transition:transform .12s, box-shadow .12s, background .15s;
}
.btn:active{transform:translateY(3px)}
.btn-buy{
  background:var(--green);
  color:var(--ink);
  font-size:.72rem;
  padding:9px 18px;
  box-shadow:0 4px 0 var(--ink);
}
.btn-buy:hover{background:#5cff8d}
.btn-buy:active{box-shadow:0 1px 0 var(--ink)}
.nav-toggle{
  display:none;
  margin-left:auto;
  background:none;border:0;cursor:pointer;
  width:44px;height:44px;
  position:relative;
}
.nav-toggle span{
  position:absolute;left:10px;right:10px;height:3px;
  background:var(--yellow);border-radius:2px;
  transition:transform .2s, opacity .2s, top .2s;
}
.nav-toggle span:nth-child(1){top:14px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:28px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding:72px 0 84px}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:48px;
  align-items:center;
}
.badge{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.22em;
  padding:6px 14px;
  border-radius:999px;
  border:2px solid var(--ink);
  box-shadow:0 3px 0 var(--ink);
  margin-bottom:22px;
}
.hero h1{
  font-size:clamp(2.7rem, 7vw, 4.6rem);
  color:var(--yellow);
  text-shadow:
    0 4px 0 var(--ink),
    0 0 34px rgba(255,232,26,.35);
  margin-bottom:22px;
}
.hero p.lead{
  max-width:46ch;
  color:var(--muted);
  margin-bottom:30px;
}
.hero p.lead strong{color:var(--cream)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn-primary{
  background:var(--red);
  color:#fff;
  font-family:var(--display);
  font-size:1.15rem;
  letter-spacing:.06em;
  padding:13px 30px 10px;
  border-radius:14px;
  box-shadow:0 6px 0 var(--red-deep), 0 10px 0 var(--ink);
}
.btn-primary:hover{background:#ff6350}
.btn-primary:active{box-shadow:0 2px 0 var(--red-deep), 0 5px 0 var(--ink)}
.btn-ghost{
  background:var(--panel);
  color:var(--cream);
  font-size:.72rem;
  padding:14px 22px;
  border-radius:12px;
  box-shadow:0 4px 0 var(--ink);
}
.btn-ghost:hover{background:var(--panel-2)}
.hero-stats{
  display:flex;flex-wrap:wrap;gap:26px;
  margin-top:30px;
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  list-style:none;
}
.hero-stats li{display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot-g{background:var(--green);box-shadow:0 0 10px var(--green)}
.dot-y{background:var(--yellow);box-shadow:0 0 10px var(--yellow)}
.hero-art{position:relative;display:flex;justify-content:center}
.hero-art img{
  width:min(440px, 88%);
  filter:drop-shadow(0 18px 0 rgba(0,0,0,.35));
  animation:ring 3.2s ease-in-out infinite;
  transform-origin:50% 88%;
}
@keyframes ring{
  0%,86%,100%{transform:rotate(0)}
  88%{transform:rotate(-3deg)}
  90%{transform:rotate(3deg)}
  92%{transform:rotate(-2.4deg)}
  94%{transform:rotate(2.4deg)}
  96%{transform:rotate(-1.2deg)}
  98%{transform:rotate(1.2deg)}
}

/* ---------- vault status bar ---------- */
.vault-bar{
  margin-top:56px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  background:var(--panel);
  border:3px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:0 8px 0 var(--ink);
  overflow:hidden;
}
.vault-stat{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:24px 16px;
  text-align:center;
}
.vault-stat + .vault-stat{border-left:3px solid var(--ink)}
.vault-label{
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.vault-value{
  font-family:var(--display);
  font-size:clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing:.04em;
  color:var(--cream);
  text-shadow:0 3px 0 var(--ink);
  font-variant-numeric:tabular-nums;
}
.vault-count{color:var(--yellow);text-shadow:0 3px 0 var(--ink), 0 0 22px rgba(255,232,26,.35)}
.vault-pot{color:var(--green);text-shadow:0 3px 0 var(--ink), 0 0 22px rgba(59,245,115,.4)}

/* ---------- ticker ---------- */
.ticker{
  background:var(--yellow);
  border-top:4px solid var(--ink);
  border-bottom:4px solid var(--ink);
  overflow:hidden;
  padding:11px 0;
}
.ticker-track{
  display:flex;
  width:max-content;
  animation:scroll 44s linear infinite;
}
.ticker span{
  flex:none;
  font-family:var(--display);
  font-size:1rem;
  letter-spacing:.08em;
  color:var(--ink);
  padding-right:2.2em;
  white-space:nowrap;
}
@keyframes scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- sections ---------- */
.section{padding:88px 0}
.section-head{text-align:center;margin-bottom:52px}
.section-head h2{
  font-size:clamp(1.9rem, 4.6vw, 3rem);
  color:var(--yellow);
  text-shadow:0 3px 0 var(--ink), 0 0 26px rgba(255,232,26,.3);
}
.kicker{
  display:inline-block;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}
.kicker b{
  background:var(--green);
  color:var(--ink);
  padding:4px 12px;
  border-radius:999px;
  margin-right:10px;
  border:2px solid var(--ink);
}

/* how it works */
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.card{
  background:var(--panel);
  border:3px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:0 8px 0 var(--ink);
  padding:30px 26px;
  transition:transform .15s, box-shadow .15s;
}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 0 var(--ink)}
.card .art{
  height:120px;
  display:flex;align-items:center;justify-content:flex-start;
  margin-bottom:20px;
}
.card h3{
  font-family:var(--display);
  font-size:1.3rem;
  letter-spacing:.04em;
  color:var(--cream);
  margin-bottom:10px;
  text-shadow:0 2px 0 var(--ink);
}
.card:nth-child(3) h3{color:var(--green);text-shadow:0 2px 0 var(--ink),0 0 18px rgba(59,245,115,.4)}
.card p{color:var(--muted);font-size:.86rem}

/* chad */
.chad{background:rgba(46,39,69,.55);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.chad-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:52px;
  align-items:center;
}
.chad-art img{
  width:min(460px,100%);
  margin:0 auto;
  filter:drop-shadow(0 14px 0 rgba(0,0,0,.3));
}
.tag{
  display:inline-block;
  background:var(--yellow);
  color:var(--ink);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.22em;
  padding:5px 14px;
  border-radius:999px;
  border:2px solid var(--ink);
  box-shadow:0 3px 0 var(--ink);
  margin-bottom:18px;
}
.chad h2{
  font-size:clamp(1.9rem,4.4vw,2.8rem);
  color:var(--yellow);
  text-shadow:0 3px 0 var(--ink);
  margin-bottom:18px;
}
.chad p{color:var(--muted);max-width:52ch;margin-bottom:26px}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.chips li{
  background:var(--ink);
  border:2px solid #2A2140;
  border-radius:8px;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:8px 14px;
  color:var(--red);
  font-weight:700;
}
.chips li b{color:var(--green);margin-right:6px}

/* resignations */
.resign .section-head h2{
  color:var(--green);
  text-shadow:0 3px 0 var(--ink), 0 0 30px rgba(59,245,115,.45);
}
.feed{max-width:720px;margin:0 auto;display:grid;gap:14px}
.row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  background:var(--panel);
  border:3px solid var(--ink);
  border-radius:14px;
  box-shadow:0 5px 0 var(--ink);
  padding:16px 20px;
  transition:transform .15s;
}
.row:hover{transform:translateX(6px)}
.row .who{
  font-family:var(--display);
  font-size:.95rem;
  letter-spacing:.06em;
  color:var(--yellow);
  min-width:110px;
}
.row .note{font-size:.8rem;color:var(--muted)}
.row .amt{
  font-weight:700;
  font-size:.8rem;
  color:var(--green);
  text-shadow:0 0 12px rgba(59,245,115,.5);
  white-space:nowrap;
}
.feed-cap{
  text-align:center;
  font-size:.62rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:#6E6590;
  margin-top:30px;
}

/* final cta */
.final{
  background:var(--yellow);
  border-top:4px solid var(--ink);
  text-align:center;
  color:var(--ink);
  padding:92px 0 64px;
}
.final h2{
  font-size:clamp(2.2rem,5.6vw,3.6rem);
  color:var(--ink);
  margin-bottom:14px;
}
.final .sub{font-size:.85rem;font-weight:700;margin-bottom:34px}
.btn-final{
  background:var(--red);
  color:#fff;
  font-family:var(--display);
  font-size:1.25rem;
  letter-spacing:.05em;
  padding:16px 36px 12px;
  border-radius:14px;
  box-shadow:0 6px 0 var(--red-deep), 0 10px 0 var(--ink);
}
.btn-final:hover{background:#ff6350}
.btn-final:active{box-shadow:0 2px 0 var(--red-deep), 0 4px 0 var(--ink)}
.final-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:28px;
  margin-top:40px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.final-links a{color:var(--ink)}
.final small{
  display:block;
  margin-top:26px;
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.65;
}

/* ---------- 404 page ---------- */
.err{
  min-height:calc(100vh - var(--nav-h));
  display:flex;align-items:center;
  text-align:center;
  padding:64px 0;
}
.err-in{max-width:560px;margin:0 auto}
.err img{width:min(360px,80%);margin:0 auto 30px;filter:drop-shadow(0 14px 0 rgba(0,0,0,.3))}
.err h1{
  font-size:clamp(2.4rem,7vw,3.6rem);
  color:var(--yellow);
  text-shadow:0 4px 0 var(--ink);
  margin-bottom:14px;
}
.err p{color:var(--muted);margin-bottom:30px}

/* reveal on scroll (only hidden when JS is running) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-art{order:-1}
  .hero-art img{width:min(320px,70%)}
  .hero{padding:48px 0 64px;text-align:center}
  .hero p.lead{margin-inline:auto}
  .cta-row,.hero-stats{justify-content:center}
  .cards{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .chad-grid{grid-template-columns:1fr;gap:36px;text-align:center}
  .chad p{margin-inline:auto}
  .chips{justify-content:center}
}
@media (max-width: 760px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--bg);
    border-bottom:3px solid var(--ink);
    display:none;
    padding:10px 0 20px;
  }
  .nav-links.open{display:flex}
  .nav-links li{width:100%;text-align:center}
  .nav-links a{display:block;padding:14px 0}
  .nav-links .btn-buy{margin:10px auto 0;display:inline-block;padding:12px 28px}
  .section{padding:64px 0}
  .row{grid-template-columns:1fr auto;row-gap:6px}
  .row .note{grid-column:1 / -1}
  .vault-bar{grid-template-columns:1fr;margin-top:44px}
  .vault-stat{padding:18px 16px}
  .vault-stat + .vault-stat{border-left:0;border-top:3px solid var(--ink)}
}
@media (max-width: 420px){
  .btn-primary{width:100%}
  .btn-ghost{width:100%}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .reveal{opacity:1;transform:none}
}