/* ==========================================================
   NOTFUNIE — base: tokens, reset, typography, utilities
   Style: midnight blue, electric blue, glass, glow
   ========================================================== */
:root {
  --bg: #040810;
  --bg-2: #070d1a;
  --fg: #f8fafc;
  --muted: #9cb0c9;
  --faint: #6b819e;
  --border: rgba(255, 255, 255, .1);
  --border-2: rgba(255, 255, 255, .17);
  --glass: rgba(255, 255, 255, .04);
  --glass-2: rgba(255, 255, 255, .07);
  --primary: #2896ff;
  --primary-2: #1b6fd6;
  --ice: #5cd9ff;
  --deep: #0c3c8c;
  --ok: #3ddc97;
  --warn: #ffc24b;
  --danger: #ff6b7a;
  --f-head: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
  --f-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --radius: 16px;
  --gutter: clamp(16px, 4vw, 32px);
  --max: 1200px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); background: var(--bg); }
html.lock { overflow: hidden; }
body {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  font: 400 1rem/1.6 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
main { flex: 1; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { list-style: none; padding: 0; }
::selection { background: rgba(40, 150, 255, .45); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 6px; }

.skip-link { position: fixed; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 600; transition: top .2s var(--ease); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
p { text-wrap: pretty; }
.container { width: min(var(--max), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: clamp(56px, 8vw, 104px); }
.center { text-align: center; }
.muted { color: var(--muted); }
.grad { background: linear-gradient(180deg, #b9ecff 0%, var(--primary) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mono { font-variant-numeric: tabular-nums; }

/* Background: soft glow at the top of the page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 45% at 50% -8%, rgba(40, 150, 255, .22), transparent 70%),
    radial-gradient(40% 30% at 100% 40%, rgba(12, 60, 140, .22), transparent 70%),
    radial-gradient(40% 30% at 0% 75%, rgba(12, 60, 140, .18), transparent 70%);
}

/* Reveal on scroll (when JS is active) */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
}