@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

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

:root {
  --bg: #0f0f1a;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  --text: #e8e8ef;
  --text-dim: #8b8b9e;
  --accent: #10b981;
  --accent-glow: rgba(16, 185, 129, 0.25);
  --green: #34d399;
  --green-glow: rgba(52, 211, 153, 0.2);
  --red: #f87171;
  --red-glow: rgba(248, 113, 113, 0.2);
  --amber: #fbbf24;
  --radius: 16px;
}

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}

body::before {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #10b981 0%, transparent 70%);
  top: -100px;
  left: -100px;
}

body::after {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #34d399 0%, transparent 70%);
  bottom: -50px;
  right: -50px;
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}