/* ──────────────────────────────────────────────────────────────────────
   base.css — reset, typography, body, container, global effects
   ──────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: #050505;
  color: #d4d4d8;
  font-family: 'Inter', -apple-system, sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Ambient red radial glow tinting the whole page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(220, 38, 38, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(220, 38, 38, 0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Subtle film-grain noise overlay (matches the grunge in the logo) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 2;
}