:root {
  --bg: #080705;
  --bg2: #110d07;
  --ink: #f4e6c6;
  --muted: #b5a481;
  --gold: #d7a94f;
  --gold2: #f2cf7a;
  --line: rgba(242, 207, 122, .2);
  --panel: rgba(20, 15, 9, .78);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(circle at 50% -10%, #2b1a08 0, var(--bg) 38%, #050403 100%);
  color: var(--ink);
  font-family: Inter, sans-serif;
  line-height: 1.5;
}
body:before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; opacity: .06;
  background-image: url('assets/hero.png'); background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.2); mix-blend-mode: soft-light;
}
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .08; z-index: 10; }
.grain:after { content: ""; position: absolute; inset: -50%; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); transform: rotate(.5deg); }
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; display:flex; justify-content:space-between; align-items:center;
  padding: 20px 5vw; border-bottom: 1px solid rgba(242,207,122,.12); background: rgba(7,5,3,.72); backdrop-filter: blur(12px);
}
.brand, .footer-brand { color: var(--gold2); text-decoration: none; font-family: 'DM Mono', monospace; font-weight: 700; letter-spacing: .06em; }
.brand span, .footer-brand span { color: var(--ink); }
.nav nav { display:flex; gap: 24px; align-items:center; }
.nav nav a { color: var(--muted); text-decoration:none; font-size: 12px; letter-spacing:.14em; font-weight:700; }
.nav nav a:hover { color: var(--gold2); }
.x-btn { border:1px solid var(--line); padding:8px 10px; border-radius: 999px; }
.hero { min-height: 100vh; position: relative; overflow: hidden; display:flex; align-items:flex-end; padding: 140px 7vw 90px; }
.hero-image-wrap { position:absolute; inset: 0; }
.hero-image { width:100%; height:100%; object-fit:cover; object-position:center; filter: saturate(.9) contrast(1.05) brightness(.72); }
.hero-vignette { position:absolute; inset:0; background: linear-gradient(90deg, rgba(5,3,1,.96) 0%, rgba(5,3,1,.42) 42%, rgba(5,3,1,.12) 68%, rgba(5,3,1,.52) 100%), linear-gradient(0deg, rgba(5,3,1,.9) 0%, transparent 50%, rgba(5,3,1,.45) 100%); }
.hero-copy { position:relative; z-index:2; max-width: 690px; }
.eyebrow, .section-kicker { font-family:'DM Mono', monospace; font-size: 11px; letter-spacing:.16em; color:var(--gold2); }
.eyebrow span { display:inline-block; width:25px; height:1px; background:var(--gold2); margin-right:9px; vertical-align:middle; }
.hero h1 { margin: 18px 0 18px; font-family:'Playfair Display', serif; font-size: clamp(72px, 12vw, 170px); line-height:.77; letter-spacing:-.06em; text-transform:uppercase; text-shadow: 0 10px 40px rgba(0,0,0,.5); }
.hero h1 em { color:transparent; -webkit-text-stroke: 2px var(--gold2); font-style:normal; }
.hero-sub { max-width: 570px; font-size: clamp(16px, 2vw, 20px); color: #e1d3b5; }
.hero-actions { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.btn { text-decoration:none; padding: 14px 22px; font-size:12px; font-weight:800; letter-spacing:.12em; border-radius: 3px; }
.btn-gold { background:var(--gold2); color:#150f07; }
.btn-dark { border:1px solid rgba(242,207,122,.4); color:var(--ink); background:rgba(0,0,0,.3); }
.ca-chip { display:inline-flex; gap:12px; align-items:center; margin-top:20px; padding:9px 12px; border:1px solid rgba(242,207,122,.22); background:rgba(0,0,0,.27); font-family:'DM Mono', monospace; font-size:10px; letter-spacing:.1em; }
.ca-chip span { color:var(--muted); } .ca-chip b { color:var(--gold2); }
.scroll-note { position:absolute; right: 6vw; bottom: 36px; z-index:2; font: 10px 'DM Mono', monospace; color: #c4b593; letter-spacing:.15em; writing-mode: vertical-rl; }
.section { padding: 120px 7vw; position:relative; }
.split { display:grid; grid-template-columns: 1fr 1.2fr; gap: 7vw; border-top:1px solid var(--line); }
.section h2 { font-family:'Playfair Display',serif; font-size:clamp(50px,7vw,95px); line-height:.9; letter-spacing:-.05em; margin:24px 0 0; }
h2 span { color:var(--gold2); }
.section-copy { max-width: 740px; }
.section-copy > p { color:#d4c6a9; font-size:18px; }
.fact-card { padding:24px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:100px 1fr; gap:20px; }
.fact-year { color:var(--gold2); font: 11px 'DM Mono',monospace; letter-spacing:.1em; padding-top:5px; }
.fact-card p { margin:0; color:#d4c6a9; }
.source-note { font-size:12px !important; color:#8f836e !important; margin-top:22px; }
.token-section { background:linear-gradient(180deg, transparent, rgba(73,46,14,.17), transparent); border-top:1px solid var(--line); }
.token-grid { margin-top:55px; display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:stretch; }
.coin-mark { width:84px; height:84px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--gold2); color:var(--gold2); font: 50px 'Playfair Display',serif; box-shadow: 0 0 30px rgba(215,169,79,.12), inset 0 0 22px rgba(215,169,79,.08); }
.token-title h2 { margin-top:26px; }
.token-title p { color:var(--muted); max-width:420px; }
.token-panel { background:var(--panel); border:1px solid var(--line); padding:28px; align-self:center; box-shadow: 0 25px 60px rgba(0,0,0,.22); }
.data-row { display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid rgba(242,207,122,.1); }
.data-row span { color:#857a68; font:10px 'DM Mono',monospace; letter-spacing:.12em; } .data-row strong { font:500 12px 'DM Mono',monospace; color:#ead9b5; text-align:right; }
.copy-btn { width:100%; margin-top:18px; padding:13px; border:1px solid var(--line); background:rgba(255,255,255,.02); color:#766c5d; font:700 11px 'DM Mono',monospace; letter-spacing:.1em; cursor:not-allowed; }
.panel-note { font-size:11px; color:#756c5e; margin:11px 0 0; }
.join-section { border-top:1px solid var(--line); }
.join-section > h2 { max-width:760px; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:60px; }
.step { border:1px solid rgba(242,207,122,.12); padding:24px; min-height:220px; background:rgba(255,255,255,.015); }
.step b { font: 12px 'DM Mono',monospace; color:var(--gold2); }
.step h3 { font-size:13px; letter-spacing:.12em; margin-top:36px; }
.step p { color:#8f836e; font-size:13px; }
.notice { margin-top:28px; border:1px dashed rgba(242,207,122,.22); padding:16px; color:#8f836e; font-size:11px; }
.notice strong { color:#d8ba7b; }
.footer { border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; padding:30px 7vw 44px; }
.footer-center { text-align:center; color:#6f6658; font:10px 'DM Mono',monospace; letter-spacing:.08em; }
.footer-x { justify-self:end; text-decoration:none; color:var(--gold2); font-size:20px; }
@media (max-width: 900px) {
  .nav nav a:not(.x-btn) { display:none; }
  .hero { padding: 130px 6vw 85px; align-items:flex-end; }
  .hero-image { object-position:58% center; }
  .hero-vignette { background: linear-gradient(90deg, rgba(5,3,1,.88), rgba(5,3,1,.35)), linear-gradient(0deg, rgba(5,3,1,.96), transparent 65%); }
  .split, .token-grid { grid-template-columns:1fr; gap:50px; }
  .steps { grid-template-columns:1fr 1fr; }
  .scroll-note { display:none; }
}
@media (max-width: 560px) {
  .nav { padding:17px 5vw; }
  .brand { font-size:13px; }
  .hero { padding-top:110px; min-height: 92vh; }
  .hero h1 { font-size: 76px; }
  .hero-sub { font-size:15px; }
  .section { padding:82px 6vw; }
  .section h2 { font-size:55px; }
  .fact-card { grid-template-columns:1fr; gap:7px; }
  .steps { grid-template-columns:1fr; }
  .footer { grid-template-columns:1fr; gap:16px; }
  .footer-center { text-align:left; }
  .footer-x { justify-self:start; }
}