/* ═══════════════════════════════════════════════════════════════
   TEMPLUXO — BASE & RESET
   Reset, body, typography, utility classes
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ── Utility ── */
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.muted      { color: var(--muted); }
.tiny       { font-size: 12px; line-height: 1.4; }
strong      { font-weight: 700; color: var(--neon); }
code {
  font-family: ui-monospace, 'Fira Code', Consolas, monospace;
  font-size: 12px; background: rgba(0, 240, 255, .06);
  padding: 3px 8px; border-radius: 6px;
  border: 1px solid rgba(0, 240, 255, .12); color: var(--neon);
}

/* ── Animated Background ── */
.bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.bg-orbs::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0, 240, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, .04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 20%, transparent 70%);
  animation: grid-drift 25s linear infinite;
}
.bg-orbs::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.05) 2px, rgba(0,0,0,.05) 4px);
  pointer-events: none; z-index: 1;
}
.orb { position: absolute; filter: blur(80px); border-radius: 50%; will-change: transform; }
.orb--a { width: 500px; height: 500px; left: -120px; top: 60px; background: radial-gradient(circle, rgba(0,240,255,.25), transparent 65%); animation: orb-drift-a 20s ease-in-out infinite; }
.orb--b { width: 600px; height: 600px; right: -200px; top: 100px; background: radial-gradient(circle, rgba(255,45,123,.2), transparent 65%); animation: orb-drift-b 24s ease-in-out infinite; }
.orb--c { width: 450px; height: 450px; left: 35%; bottom: -200px; background: radial-gradient(circle, rgba(139,92,246,.2), transparent 65%); animation: orb-drift-c 18s ease-in-out infinite; }

/* Custom cursor glow */
.cursor-glow {
  position: fixed; width: 300px; height: 300px; border-radius: 50%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(0,240,255,.04), transparent 65%);
  transform: translate(-50%, -50%);
  transition: left .15s ease, top .15s ease;
  will-change: left, top;
}