/* ═══ Shared Design Tokens & Base ═══ */

:root {
  --color-primary: #00e676;
  --color-primary-dark: #00c763;
  --color-primary-glow: rgba(0, 230, 118, 0.45);
  --color-cta: #ff6a00;
  --color-cta-dark: #e65f00;
  --color-accent: #ff6a00;
  --color-accent-dark: #e65f00;
  --color-bg: #0f172a;
  --color-surface: #131f36;
  --color-surface-light: #1a2742;
  --color-text: #ffffff;
  --color-text-muted: #94a3b8;
  --color-border: #334155;
  --color-border-light: #475569;
  --color-success: #00e676;
  --color-error: #ff6a00;
}

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

body {
  font-family: "Inter", "Segoe UI", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ─── Grain Texture ─── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.5;
}

/* ─── Floating Orbs ─── */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

/* ─── Shared Animations ─── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, 40px) scale(1.1); }
  66% { transform: translate(-30px, 80px) scale(0.95); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-50px, -30px) scale(1.05); }
  66% { transform: translate(40px, -60px) scale(0.9); }
}

/* ─── Footer ─── */
footer {
  text-align: center;
  padding: 32px 24px;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

footer a {
  color: var(--color-primary);
  text-decoration: none;
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .orb, .confetti-piece { display: none; }
}