@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #07060b;
  --fg: #f2eefe;
  --muted: #9a93b5;
  --faint: #5f587a;
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --magenta: #ec4899;
  --green: #34d399;
  --amber: #fbbf24;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-hover: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.1);
  --radius: 20px;
  --maxw: 1120px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --mx: 50vw;
  --my: 50vh;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01";
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(139, 92, 246, 0.45); }

/* ---------- layout ---------- */
main {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}