/* ── Fonts ─────────────────────────────────────────────── */
@font-face{font-family:'Ronzino';src:url('fonts/Ronzino-Regular.woff2') format('woff2');font-weight:400}
@font-face{font-family:'Ronzino';src:url('fonts/Ronzino-Medium.woff2') format('woff2');font-weight:500}
@font-face{font-family:'Ronzino';src:url('fonts/Ronzino-Bold.woff2') format('woff2');font-weight:700}
@font-face{font-family:'ApfelGrotezk';src:url('fonts/ApfelGrotezk-Regular.woff2') format('woff2');font-weight:400}
@font-face{font-family:'ApfelGrotezk';src:url('fonts/ApfelGrotezk-Mittel.woff2') format('woff2');font-weight:500}
@font-face{font-family:'ApfelGrotezk';src:url('fonts/ApfelGrotezk-Satt.woff2') format('woff2');font-weight:600}
@font-face{font-family:'ApfelGrotezk';src:url('fonts/ApfelGrotezk-Fett.woff2') format('woff2');font-weight:700}
@font-face{font-family:'ApfelGrotezk';src:url('fonts/ApfelGrotezk-Brukt.woff2') format('woff2');font-weight:800}

/* ── Tokens (superset across all pages) ────────────────── */
:root{
  /* surfaces */
  --void:#0E060C; --dark:#190B12; --surface:#2D1020; --surface2:#3D1830;
  /* accents */
  --electric:#00C3FF; --fire:#FF6B1A; --amber:#FFAA00; --green:#22D46A;
  /* text — all white per new DS */
  --fg1:#FFFFFF; --fg2:#FFFFFF; --fg3:#FFFFFF;
  --fg-dim:rgba(255,255,255,0.72);    /* secondary body */
  --fg-subtle:rgba(255,255,255,0.45); /* captions/labels */
  /* glass */
  --glass:rgba(0,0,0,0.45); --glass2:rgba(0,0,0,0.28);
  --border:rgba(255,255,255,0.10); --border-h:rgba(255,255,255,0.22);
  /* motion */
  --ease:cubic-bezier(0.22,1,0.36,1);
  /* typefaces */
  --fd:'Ronzino',system-ui,sans-serif;
  --fb:'ApfelGrotezk',system-ui,sans-serif;
}

/* ── Resets ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--fg1);font-family:var(--fb);overflow-x:hidden}
a{color:inherit}
button{cursor:pointer;font-family:var(--fb)}

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:#2D1020;border-radius:2px}

/* ── Form defaults ─────────────────────────────────────── */
input::placeholder{color:rgba(255,255,255,0.6)}
input:focus{border-color:rgba(255,255,255,0.4)!important}

/* ── Shared keyframes ──────────────────────────────────── */
@keyframes pls{0%,100%{opacity:1}50%{opacity:0.2}}
@keyframes heroFadeIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}

/* ── Layout utilities ──────────────────────────────────── */
/* Canonical: section = 72px 80px, hero inner = 52px 80px 48px,
   max content width = 1400px. Background utilities are decoupled
   from padding so a section can mix-and-match (e.g. a sticky filter
   bar uses .section-tight + .section-dark). */
.section{padding:72px 80px}
.section-tight{padding:24px 80px}
.section-dark{background:var(--dark)}
.section-void{background:var(--void)}
.container{max-width:1400px;margin:0 auto}