:root {
  /* Brand */
  --cyan: #00fbff;
  --purple: #c800ff;
  --hot-pink: #e040fb;

  /* Warm foundation */
  --white: #ffffff;
  --cream: #fdf7f0;
  --lavender-mist: #f5eff8;
  --peach-glow: #fef4ee;

  /* Text (warm, not cold) */
  --plum: #2d1b3d;
  --plum-soft: #4a3560;
  --plum-muted: #7b6b8a;

  /* Purple accents (warmed) */
  --purple-warm: #a855f7;
  --purple-deep: #7c3aed;
  --purple-soft: rgba(200, 0, 255, 0.08);
  --purple-tint: rgba(168, 85, 247, 0.12);

  /* Cyan accents (softened for light theme) */
  --cyan-deep: #06b6d4;
  --cyan-soft: rgba(0, 251, 255, 0.1);
  --cyan-tint: rgba(6, 182, 212, 0.15);

  /* Dark sections (testimonials, footer) */
  --plum-dark: #2d1040;
  --plum-darker: #1a0a2e;
  --lavender-light: #e9d5ff;

  /* Gradients */
  --gradient-cta: linear-gradient(135deg, var(--purple-warm), var(--purple), var(--hot-pink));
  --gradient-warm: linear-gradient(135deg, var(--purple), #e879f9, #f0abfc);
  --gradient-energy: linear-gradient(135deg, var(--cyan-deep), var(--purple-warm));

  /* Shadows (warm, plum-based — never cold black) */
  --shadow-soft: 0 4px 24px rgba(45, 27, 61, 0.06);
  --shadow-medium: 0 12px 48px rgba(45, 27, 61, 0.1);
  --shadow-lifted: 0 24px 64px rgba(45, 27, 61, 0.12);
  --shadow-purple: 0 8px 32px rgba(168, 85, 247, 0.25);
}

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

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--plum);
  overflow-x: hidden;
  line-height: 1.7;
}

/* ===== GRAIN TEXTURE ===== */
.grain {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== WARM FLOATING SHAPES ===== */
.warmth-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.warmth-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  animation: warmDrift 30s ease-in-out infinite;
}

.warmth-shape.w1 {
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(252,228,236,0.5), transparent 70%);
  top: -300px; right: -200px;
}

.warmth-shape.w2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(200,0,255,0.06), transparent 70%);
  bottom: 10%; left: -200px;
  animation-delay: -10s;
}

.warmth-shape.w3 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(254,243,199,0.4), transparent 70%);
  top: 40%; right: -150px;
  animation-delay: -18s;
}

@keyframes warmDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -25px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.96); }
}

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