/* ====== FONTS (self-hosted · latin + latin-ext) ====== */
/* latin-ext */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-black-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-black-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono — variable file covers weights 400/500/700 */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space Grotesk — variable file covers weights 400/500/700 */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ====== TOKENS ====== */
:root{
  --bg:#ffffff;
  --ink:#0a0a0a;
  --ink-2:#1a1a1a;
  --rule:#0a0a0a;
  --mute:#7a7a7a;
  --grey:#ececec;
  --grey-2:#d6d6d6;
  --grey-deep:#1f1f22;
  --mag:#1e3dff;
  --acid:#ccff00;
  --hot:#ff2d00;
  --pad:clamp(16px, 2.5vw, 28px);
}

/* ====== RESET & BASE ====== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);}
body{
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size:17px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:default;
  overflow-x:hidden;
}
::selection{background:var(--mag);color:var(--bg);}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

/* ====== TYPE UTILITIES ====== */
.mono{font-family:"JetBrains Mono", ui-monospace, monospace; font-size:11px; letter-spacing:0.04em; text-transform:uppercase;}
.display{font-family:"Archivo Black", "Space Grotesk", sans-serif; font-weight:900; letter-spacing:-0.02em; line-height:0.86;}

/* ====== GLOBAL KEYFRAMES ====== */
@keyframes blink{50%{background:transparent}}
@keyframes ticker{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes spinrev{
  from{ transform:rotate(8deg);} to{ transform:rotate(368deg);}
}

/* ====== CURSOR (custom) ====== */
.cursor{
  position:fixed; left:0; top:0; width:18px; height:18px;
  border:1.5px solid var(--ink); pointer-events:none; z-index:60;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  transition: width .2s ease, height .2s ease, background .2s ease;
}
.cursor.hot{ background:var(--acid); width:32px; height:32px;}
@media (hover:none){ .cursor{ display:none;} }

/* ====== REVEAL ANIMATION ====== */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease;}
.reveal.in{ opacity:1; transform: none;}

@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none;}
  .reveal{ opacity:1; transform:none; transition:none;}
  .led{ animation:none;}
}