/* 0800 DON — Presale */
:root{
  --ink:#0A0908;
  --ink-2:#141211;
  --ink-3:#1C1917;
  --ivory:#F5F0E6;
  --ivory-2:#EDE6D6;
  --ivory-dim:#C9C1B0;
  --line:rgba(245,240,230,0.14);
  --line-strong:rgba(245,240,230,0.28);
  --gold: oklch(0.78 0.13 82);
  --gold-2: oklch(0.86 0.11 85);
  --gold-dim: oklch(0.58 0.10 80);
  --cyan: oklch(0.82 0.12 200);
  --rose: oklch(0.72 0.14 25);
  --ok: oklch(0.78 0.15 150);

  --f-serif: "Fraunces", "Times New Roman", serif;
  --f-sans: "Inter Tight", "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-sans);
  background:var(--ink);
  color:var(--ivory);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Background texture: warm grain + vignette */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(212,167,94,0.12), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(110,150,160,0.08), transparent 55%),
    radial-gradient(600px 500px at 50% 50%, rgba(0,0,0,0.0), rgba(0,0,0,0.35));
}
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:1; mix-blend-mode:overlay; opacity:.08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

main{position:relative; z-index:2}

/* Typographic primitives */
.serif{font-family:var(--f-serif); font-optical-sizing:auto; font-variation-settings:"SOFT" 30, "WONK" 0}
.mono{font-family:var(--f-mono); font-feature-settings:"tnum" 1}
.eyebrow{
  font-family:var(--f-mono); text-transform:uppercase;
  letter-spacing:.22em; font-size:11px; color:var(--ivory-dim);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow .dot{width:5px;height:5px;background:var(--gold);border-radius:50%}
.rule{height:1px; background:var(--line); width:100%}
.rule-gold{height:1px; background:linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent); opacity:.6}

/* Layout container */
.shell{max-width:1320px; margin:0 auto; padding:0 40px}
@media (max-width:720px){ .shell{padding:0 22px} }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border-radius:2px; border:1px solid var(--line-strong);
  font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.18em;
  font-size:11px; background:transparent; color:var(--ivory);
  cursor:pointer; transition:all .25s ease; text-decoration:none;
  position:relative; overflow:hidden;
}
.btn:hover{border-color:var(--gold); color:var(--gold)}
.btn-gold{
  background:var(--gold); color:#111; border-color:var(--gold);
  box-shadow: 0 0 0 1px rgba(212,167,94,.35), 0 10px 40px -10px rgba(212,167,94,.45);
}
.btn-gold:hover{ background:var(--gold-2); color:#111; border-color:var(--gold-2);
  box-shadow: 0 0 0 1px rgba(212,167,94,.5), 0 14px 50px -8px rgba(212,167,94,.6); }
.btn-ghost{ background:rgba(245,240,230,0.03) }

/* Tabular numbers everywhere they matter */
.tnum{font-variant-numeric:tabular-nums}

/* Section spacing */
section{padding:120px 0; position:relative}
@media (max-width:720px){ section{padding:80px 0} }

/* Divider composed */
.div-labeled{
  display:grid; grid-template-columns: 1fr auto 1fr; gap:24px; align-items:center;
  color:var(--ivory-dim);
}
.div-labeled::before,.div-labeled::after{content:""; height:1px; background:var(--line)}

/* Scroll reveal baseline — use with IntersectionObserver in JS */
[data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .9s ease, transform .9s ease}
[data-reveal].in{opacity:1; transform:none}

/* Utility */
.gold{color:var(--gold)}
.dim{color:var(--ivory-dim)}
.hair{border:none; border-top:1px solid var(--line)}

/* Cards */
.card{
  background:linear-gradient(180deg, rgba(245,240,230,0.03), rgba(245,240,230,0.01));
  border:1px solid var(--line);
  border-radius:2px;
  padding:28px;
  position:relative;
}
.card-gold-top{
  position:relative;
}
.card-gold-top::before{
  content:""; position:absolute; top:-1px; left:0; height:1px; width:40%;
  background:linear-gradient(90deg, var(--gold), transparent);
}

/* Ticker / marquee */
.marquee{
  display:flex; gap:48px; white-space:nowrap; animation: scrollx 60s linear infinite;
}
@keyframes scrollx{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Gold shimmer text */
.shimmer{
  background: linear-gradient(90deg, var(--gold-dim) 0%, var(--gold-2) 45%, #fff6d8 50%, var(--gold-2) 55%, var(--gold-dim) 100%);
  background-size: 200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer{
  0%,100%{background-position: 0% 50%}
  50%{background-position: 100% 50%}
}

/* Focus */
:focus-visible{ outline:1px solid var(--gold); outline-offset:3px }

/* Inputs */
input, select{
  background:transparent; border:none; color:var(--ivory);
  font-family:var(--f-mono); font-size:13px;
}
input:focus, select:focus{outline:none}

/* Hide scrollbar in some places */
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{scrollbar-width:none}