*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #0a0a0f;
  --surface: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.08);
  --text: #f0f0f5;
  --text-secondary: rgba(255,255,255,0.5);
  --accent: #c084fc;
  --accent-glow: rgba(192,132,252,0.3);
  --radius: 12px;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  overflow-y: auto;
}
.bg-grid {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='%23c084fc' stroke-width='0.5' fill='none' opacity='0.1'%3E%3Cline x1='60' y1='12' x2='60' y2='108'/%3E%3Cline x1='19' y1='36' x2='101' y2='84'/%3E%3Cline x1='19' y1='84' x2='101' y2='36'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='%23c084fc' stroke-width='0.5' fill='none' opacity='0.07'%3E%3Cline x1='60' y1='12' x2='60' y2='108'/%3E%3Cline x1='19' y1='36' x2='101' y2='84'/%3E%3Cline x1='19' y1='84' x2='101' y2='36'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px, 120px 120px;
  background-position: 0 0, 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px,4vw,48px); position: relative; z-index: 1; }