/* ── Base ── */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { margin: 0; }

  /* ── Hero Blobs ── */
  .hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
  }
  .blob-1 { width: 400px; height: 400px; background: rgba(255,217,208,0.4); top: -100px; right: -80px; }
  .blob-2 { width: 300px; height: 300px; background: rgba(255,143,112,0.3); bottom: 10%; left: -60px; }
  .blob-3 { width: 200px; height: 200px; background: rgba(255,255,255,0.15); top: 40%; right: 15%; }
  .blob-4 { width: 150px; height: 150px; background: rgba(255,217,208,0.3); bottom: 20%; left: 20%; }

  /* ── Floating Donuts ── */
  .hero-float {
    position: absolute;
    opacity: 0.6;
  }
  .float-1 { top: 15%; left: 8%; animation: float 6s ease-in-out infinite; }
  .float-2 { top: 60%; right: 10%; animation: float 8s ease-in-out infinite 1s; }
  .float-3 { bottom: 20%; left: 15%; animation: float 7s ease-in-out infinite 2s; }

  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
  }

  /* ── CTA Blobs ── */
  .cta-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
  }
  .cta-blob.blob-1 { width: 500px; height: 500px; top: -200px; left: -100px; }
  .cta-blob.blob-2 { width: 400px; height: 400px; bottom: -150px; right: -100px; }

  /* ── Scroll Reveal ── */
  .reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(30px);
    }
    .reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ── Navbar ── */
  #navbar {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
  }
  #navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  }

  /* ── Mobile Menu ── */
  #mobileMenu {
    animation: slideDown 0.25s ease;
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── Success Message ── */
  #successMsg {
    animation: fadeIn 0.3s ease;
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }