@font-face{
  font-family:"Bebas Neue 3DARG";
  src:url("fonts/BebasNeue-Regular.woff2") format("woff2"),
      url("fonts/BebasNeue-Regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root{
  --ink-900:#0b0b0c;--ink-800:#17171a;--ink-700:#26262b;--ink-600:#3a3a41;--ink-500:#55555c;--ink-400:#8a8a93;--ink-300:#b9b9c0;--ink-200:#e2e2e6;--ink-100:#f2f2f4;--ink-000:#ffffff;
  --bone-050:#faf8f5;--bone-100:#f6f3ee;--bone-200:#efeae2;--bone-300:#e3dbcf;--bone-400:#cfc3b2;
  --ember-100:#f3ede4;--ember-200:#dccdb7;--ember-500:#a98c6a;--ember-600:#8e7452;--ember-700:#6f5a3f;

  --surface-page:var(--bone-100);
  --surface-card:var(--ink-000);
  --text-body:var(--ink-800);
  --text-strong:var(--ink-900);
  --text-muted:var(--ink-500);
  --text-on-ink:var(--bone-050);
  --border-hairline:var(--bone-300);

  --font-display:"Bebas Neue 3DARG","Oswald",Impact,sans-serif;
  --font-sans:"Urbanist","Helvetica Neue",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --radius-lg:0.625rem;--radius-xl:0.875rem;--radius-pill:999px;

  --texture-layers:repeating-linear-gradient(180deg,rgba(11,11,12,.05) 0 1px,transparent 1px 7px);

  /* accent: overridden per mockup variant */
  --accent:var(--ember-500);
  --accent-hover:var(--ember-600);
  --accent-text:#ffffff;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--surface-page);color:var(--text-body);
  font-family:var(--font-sans);line-height:1.55;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);text-transform:uppercase;letter-spacing:-0.01em;line-height:1.05;color:var(--text-strong)}
p{margin:0}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--font-mono)}
.label{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:14px 28px;border-radius:var(--radius-pill);font-weight:600;font-size:15px;
  font-family:var(--font-sans);cursor:pointer;border:1px solid transparent;transition:transform .15s ease, background .2s ease;
}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--text-strong);color:var(--bone-050)}
.btn-primary:hover{background:var(--accent);color:var(--accent-text)}
.btn-accent{background:var(--accent);color:var(--accent-text)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-outline{background:transparent;color:var(--text-strong);border-color:var(--ink-900)}
.btn-outline:hover{background:var(--ink-900);color:var(--bone-050)}
.card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-xl)}
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
}
nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px)}
.countdown-box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:76px;padding:10px 6px;border-radius:12px;
}
.countdown-num{font-family:var(--font-mono);font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1;letter-spacing:0}
.countdown-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
@media (max-width:720px){.section{padding:56px 0}}