/* ============================================================
   01 · Base — global typography, scrollbar, ambient layers
   ============================================================ */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--slate-300);
  background: var(--ink-950);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(139, 92, 246, .4); color: #fff; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink-950); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--blue-400), var(--violet-500));
  border-radius: 8px;
  border: 2px solid var(--ink-950);
}
::-webkit-scrollbar-thumb:hover { background: var(--blue-500); }

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); line-height: 1.15; letter-spacing: -.02em; color: var(--white); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }

.ico { width: 18px; height: 18px; }

/* ambient film grain */
.noise {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ambient page glow */
.page-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(600px 400px at 12% -5%, rgba(59, 130, 246, .12), transparent 60%),
    radial-gradient(700px 500px at 90% 30%, rgba(124, 58, 237, .10), transparent 60%),
    radial-gradient(500px 400px at 50% 110%, rgba(59, 130, 246, .08), transparent 60%);
}