/* ========== FONTS (self-hosted, no third-party requests) ========== */
@font-face{font-family:'Anton';src:url('../fonts/anton-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo Black';src:url('../fonts/archivoblack-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* ========== TOKENS ========== */
:root{
  --bg:#080808; --surface:#121212; --surface-2:#181818;
  --white:#E8E6E1; --gold:#E8B54A; --gold-dim:#8f6f2c;
  --steel:#8A929B; --line:#22252A;
  --display:'Anton','Arial Narrow',sans-serif;
  --heavy:'Archivo Black','Arial Black',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --pad:20px; --maxw:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--white);
  font-family:var(--body); font-size:16px; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; display:block}
a{color:inherit}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}

/* subtle steel texture so it never reads as flat glossy black */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(138,146,155,.07), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(232,181,74,.045), transparent 60%);
}
main,header,footer{position:relative; z-index:1}

/* ========== TYPE ========== */
h1,h2,h3{font-family:var(--display); font-weight:400; text-transform:uppercase;
  letter-spacing:.005em; line-height:.94; margin:0; overflow-wrap:break-word}
h1{font-size:clamp(48px,13.5vw,120px)}
h2{font-size:clamp(34px,8.6vw,66px)}
h3{font-size:clamp(22px,5.2vw,30px)}
p{margin:0 0 1em}
.lede{font-size:clamp(17px,4.3vw,21px); color:#CFCCC5; max-width:62ch}
.small{font-size:14px; line-height:1.55}
.kicker{font-family:var(--heavy); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel); margin:0 0 18px}

section{padding-block:clamp(64px,13vw,120px)}

/* ========== BUTTONS ========== */
.btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:16px 26px; border-radius:2px; cursor:pointer;
  font-family:var(--heavy); font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; border:1px solid transparent;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn-gold{background:var(--gold); color:#0A0A0A}
.btn-gold:hover{transform:translateY(-2px); background:#F0C25E}
.btn-ghost{background:transparent; color:var(--white); border-color:#3A3E44}
.btn-ghost:hover{transform:translateY(-2px); border-color:var(--gold); color:var(--gold)}
.btn:active{transform:translateY(0)}

/* ========== HERO ========== */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-block:0 clamp(44px,9vw,84px); overflow:hidden}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media video,.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(8,8,8,.72) 0%, rgba(8,8,8,.42) 34%, rgba(8,8,8,.88) 76%, var(--bg) 100%);
}
.hero-inner{position:relative; z-index:2; width:100%}
.hero h1{margin-bottom:18px}
.hero h1 .l3{color:var(--gold)}
.hero .sub{font-size:clamp(16px,4.1vw,20px); color:#D6D3CC; max-width:36ch; margin-bottom:14px}
.hero .say{font-family:var(--heavy); font-size:clamp(13px,3.3vw,15px);
  letter-spacing:.05em; text-transform:uppercase; color:var(--steel); line-height:1.7}
.brandbar{position:absolute; top:0; left:0; right:0; z-index:3; padding:18px 0}
.brandbar .wrap{display:flex; align-items:center; gap:10px}
.brandbar img{width:30px; height:30px; border-radius:2px}
.brandbar span{font-family:var(--heavy); font-size:13px; letter-spacing:.1em}

/* ========== ALERT (anti-scam) ========== */
.alert{border:1px solid var(--gold-dim); background:rgba(232,181,74,.05);
  border-radius:2px; padding:20px 22px}
.alert h3{font-family:var(--heavy); font-size:15px; letter-spacing:.05em;
  color:var(--gold); margin-bottom:10px; line-height:1.4; text-transform:uppercase}
.alert p{color:#C9C6BF; margin:0; font-size:14.5px; line-height:1.62}
.alert p + p{margin-top:9px}

/* ========== ORIGIN ========== */
.two{display:grid; gap:clamp(28px,6vw,56px); grid-template-columns:1fr; align-items:center}
.two figure{margin:0}
.two img{width:100%; border-radius:2px; border:1px solid var(--line)}
.stamp{font-family:var(--heavy); text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(13px,3.4vw,15px); line-height:1.9; color:var(--steel); margin-top:26px}
.stamp b{color:var(--white); font-weight:400}

/* ========== PROCESS ========== */
.steps{display:grid; gap:18px; grid-template-columns:1fr; margin-top:40px}
.step{background:var(--surface); border:1px solid var(--line); border-radius:2px; overflow:hidden}
.step .ph{aspect-ratio:4/5; overflow:hidden; background:var(--surface-2)}
.step .ph img{width:100%; height:100%; object-fit:cover}
.step .bd{padding:22px 22px 26px}
.step .n{font-family:var(--heavy); font-size:13px; letter-spacing:.16em; color:var(--gold); display:block; margin-bottom:10px}
.step h3{font-size:clamp(21px,5.1vw,27px)}
.step.is-gold{border-color:#3a3020}
.sep{margin-top:18px; font-size:13px; color:var(--steel)}

/* ========== PROOF ========== */
.proof-video{position:relative; border:1px solid var(--line); border-radius:2px;
  overflow:hidden; background:#000; max-width:420px; margin-top:34px}
.proof-video video{width:100%; aspect-ratio:9/16; object-fit:cover; display:block}
.playbtn{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(8,8,8,.34); border:0; cursor:pointer; width:100%; padding:0}
.playbtn span{width:70px; height:70px; border-radius:50%; background:rgba(232,181,74,.94);
  display:flex; align-items:center; justify-content:center}
.playbtn svg{margin-left:4px}

/* ========== TOKEN ========== */
.token{background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:clamp(24px,5.5vw,40px)}
.tk-row{display:flex; flex-wrap:wrap; gap:10px 44px; padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--line)}
.tk-row div{min-width:120px}
.tk-lbl{font-family:var(--heavy); font-size:11px; letter-spacing:.15em; color:var(--steel); text-transform:uppercase}
.tk-val{font-family:var(--display); font-size:clamp(24px,6vw,32px); text-transform:uppercase; line-height:1.1; margin-top:6px}
.ca-lbl{font-family:var(--heavy); font-size:11px; letter-spacing:.15em; color:var(--steel); text-transform:uppercase; margin-bottom:12px}
.ca-pending{font-family:var(--display); font-size:clamp(30px,8.4vw,52px); color:var(--gold); text-transform:uppercase; line-height:1}
.ca-live{display:block; width:100%; background:#0B0B0B; border:1px solid var(--gold-dim);
  border-radius:2px; padding:18px 16px; color:var(--gold); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(13px,3.5vw,17px); line-height:1.5; word-break:break-all; user-select:all; text-align:left}
.copied{color:var(--gold); font-size:13px; margin-top:10px; min-height:18px; font-family:var(--heavy); letter-spacing:.06em}

/* ========== MEMES ========== */
.memes{display:grid; gap:16px; grid-template-columns:1fr; margin-top:36px}
.meme{position:relative; border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--surface); margin:0}
.meme img{width:100%; aspect-ratio:4/5; object-fit:cover}
.meme figcaption{position:absolute; left:0; right:0; bottom:0; padding:52px 18px 18px;
  background:linear-gradient(to top, rgba(8,8,8,.94), transparent);
  font-family:var(--display); text-transform:uppercase; font-size:clamp(19px,4.6vw,24px); line-height:1}

/* ========== LEGAL ========== */
.legal{background:var(--surface); border:1px solid var(--line); border-radius:2px;
  padding:clamp(22px,5vw,34px); color:#A9A69F}
.legal p{font-size:14.5px; line-height:1.68}
.legal p:last-child{margin-bottom:0}
.legal strong{color:var(--white); font-weight:600}

/* ========== SOCIALS ========== */
.socials{display:grid; gap:12px; grid-template-columns:1fr; margin-top:34px}
.soc{display:flex; align-items:center; justify-content:space-between; gap:14px;
  min-height:72px; padding:18px 22px; background:var(--surface); border:1px solid var(--line);
  border-radius:2px; text-decoration:none; transition:border-color .16s ease, transform .16s ease}
a.soc:hover{border-color:var(--gold); transform:translateY(-2px)}
.soc-n{font-family:var(--heavy); font-size:15px; letter-spacing:.06em; text-transform:uppercase}
.soc-h{color:var(--steel); font-size:14px}
.soc.off{opacity:.62}
.soc.off .soc-h{color:var(--gold)}

/* ========== FOOTER ========== */
footer{border-top:1px solid var(--line); padding-block:clamp(52px,10vw,80px) 40px; text-align:center}
.f-say{font-family:var(--display); text-transform:uppercase; font-size:clamp(22px,5.6vw,34px); line-height:1.12}
.f-tsg{font-family:var(--heavy); font-size:clamp(34px,9vw,50px); color:var(--gold); margin:22px 0 6px}
.f-dom{color:var(--steel); font-size:14px; letter-spacing:.08em}
.f-links{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px; margin:30px 0 26px}
.f-links a,.f-links span{font-family:var(--heavy); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none}
.f-links a:hover{color:var(--gold)}
.f-links span{color:#5C6066}
.f-fine{color:#6E7278; font-size:12.5px; max-width:56ch; margin:0 auto; line-height:1.6}

/* ========== MOTION ========== */
.rv{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  .btn:hover,a.soc:hover{transform:none}
}

/* ========== BREAKPOINTS ========== */
@media (min-width:640px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .memes{grid-template-columns:repeat(3,1fr)}
  .socials{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  :root{--pad:32px}
  .two{grid-template-columns:1fr 1fr; gap:64px}
  .two.flip figure{order:2}
  .socials{grid-template-columns:repeat(4,1fr)}
  .soc{flex-direction:column; align-items:flex-start; justify-content:center; gap:6px}
}