*, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    /* ===== CSS VARIABLES ===== */
    :root {
      --bg: #f8fafc;
      --primary: #4f46e5;
      --primary-hover: #4338ca;
      --text: #1e293b;
      --text-light: #64748b;
      --card: #ffffff;
      --nav-bg: rgba(255,255,255,0.8);
      --border: rgba(0,0,0,0.07);
      --accent: #d97706;
      --accent-soft: rgba(217,119,6,0.08);
      --accent-border: rgba(217,119,6,0.2);
      --surface: rgba(0,0,0,0.03);
      --surface2: rgba(0,0,0,0.05);
      --muted: rgba(30,41,59,0.5);
      --muted2: rgba(30,41,59,0.35);
      --orb1: rgba(79,70,229,0.08);
      --orb2: rgba(79,70,229,0.05);
      --marquee-bg: rgba(79,70,229,0.04);
      --marquee-border: rgba(79,70,229,0.1);
      --marquee-text: rgba(79,70,229,0.55);
      --grad-from: #f8fafc;
      --grad-to: #eef2ff;
      --progress-a: #4f46e5;
      --progress-b: #818cf8;
      --check-bg: linear-gradient(135deg,#10b981,#059669);
      --card-hover-shadow: 0 0 0 1px rgba(79,70,229,0.2),0 20px 60px rgba(79,70,229,0.08);
      --card-hover-border: rgba(79,70,229,0.2);
    }

    body.dark {
      --bg: #0f172a;
      --text: #f1f5f9;
      --text-light: #94a3b8;
      --card: #1e293b;
      --primary: #818cf8;
      --primary-hover: #6366f1;
      --nav-bg: rgba(15,23,42,0.8);
      --border: rgba(255,255,255,0.07);
      --accent: #fbbf24;
      --accent-soft: rgba(251,191,36,0.08);
      --accent-border: rgba(251,191,36,0.2);
      --surface: rgba(255,255,255,0.04);
      --surface2: rgba(255,255,255,0.06);
      --muted: rgba(241,245,249,0.5);
      --muted2: rgba(241,245,249,0.35);
      --orb1: rgba(251,191,36,0.08);
      --orb2: rgba(251,191,36,0.04);
      --marquee-bg: rgba(251,191,36,0.05);
      --marquee-border: rgba(251,191,36,0.15);
      --marquee-text: rgba(251,191,36,0.65);
      --grad-from: #0f172a;
      --grad-to: #1e1b4b;
      --progress-a: #fbbf24;
      --progress-b: #f59e0b;
      --check-bg: linear-gradient(135deg,#10b981,#059669);
      --card-hover-shadow: 0 0 0 1px rgba(251,191,36,0.25),0 20px 60px rgba(251,191,36,0.07);
      --card-hover-border: rgba(251,191,36,0.25);
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
      transition: background 0.3s, color 0.3s;
    }

    .font-display { font-family: 'Syne', sans-serif; }

    /* Grain overlay */
    body::after {
      content: '';
      position: fixed; inset: 0;
      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)' opacity='0.015'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 9999; opacity: 0.5;
    }

    /* Glow orbs */
    .orb {
      position: absolute; border-radius: 50%;
      filter: blur(80px); pointer-events: none;
    }

    /* ===== MARQUEE — pure CSS, no Tailwind animation ===== */
    .marquee-wrap { overflow: hidden; background: var(--marquee-bg); border-top: 1px solid var(--marquee-border); border-bottom: 1px solid var(--marquee-border); padding: 10px 0; }
    .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-scroll 30s linear infinite;
      gap: 0;
    }
    .marquee-track:hover { animation-play-state: paused; }
    @keyframes marquee-scroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    .marquee-item { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; }
    .marquee-item span { color: var(--marquee-text); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 1rem; }
    .marquee-dot { color: var(--marquee-text); opacity: 0.3; padding: 0 0.25rem; }

    /* Reveal animation */
    .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* Card hover glow */
    .card-glow { transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s; }
    .card-glow:hover {
      box-shadow: var(--card-hover-shadow);
      transform: translateY(-4px);
      border-color: var(--card-hover-border) !important;
    }

    /* Gradient text */
    .text-gradient-gold {
      background: linear-gradient(135deg, var(--accent), #f59e0b, #fde68a);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .text-gradient-hero {
      background: linear-gradient(180deg, var(--text) 0%, var(--text-light) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Divider line */
    .line-gold { background: linear-gradient(90deg, transparent, var(--accent), transparent); height: 1px; }

    /* Pricing featured ring */
    .ring-gold { box-shadow: 0 0 0 1px var(--accent-border), 0 0 40px var(--accent-soft); }

    /* WA float button */
    .wa-float {
      position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1000;
      background: #25D366;
      box-shadow: 0 8px 32px rgba(37,211,102,0.4);
      animation: float 4s ease-in-out infinite;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .wa-float:hover {
      transform: scale(1.1) translateY(-4px);
      box-shadow: 0 16px 48px rgba(37,211,102,0.5);
    }

    /* Dark mode toggle button */
    .theme-toggle {
      position: fixed; top: 3.59rem; right: 1.6rem; z-index: 1000;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 0.45rem 1rem;
      display: flex; align-items: center; gap: 0.5rem;
      cursor: pointer;
      font-size: 0.78rem; font-weight: 600;
      color: var(--text-light);
      transition: all 0.2s;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
      font-family: "DM Sans", sans-serif;
      backdrop-filter: blur(12px);
    }
    .theme-toggle:hover { border-color: var(--primary); color: var(--primary); }
    .theme-toggle .toggle-track {
      width: 30px; height: 17px;
      background: var(--border);
      border-radius: 999px;
      position: relative;
      transition: background 0.3s;
      flex-shrink: 0;
    }
    .theme-toggle .toggle-track::after {
      content: "";
      position: absolute; top: 3px; left: 3px;
      width: 11px; height: 11px;
      border-radius: 50%;
      background: var(--primary);
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    body.dark .theme-toggle .toggle-track { background: rgba(129,140,248,0.3); }
    body.dark .theme-toggle .toggle-track::after { transform: translateX(13px); }

    /* Scroll progress bar */
    #progress-bar {
      position: fixed; top: 0; left: 0; height: 2px;
      background: linear-gradient(90deg, var(--progress-a), var(--progress-b));
      z-index: 9998; width: 0%; transition: width 0.1s linear;
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

    /* Check icon */
    .check-icon {
      width: 20px; height: 20px; border-radius: 50%;
      background: var(--check-bg);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .check-icon::after {
      content: '';
      width: 5px; height: 9px;
      border-right: 2px solid white; border-bottom: 2px solid white;
      transform: rotate(45deg) translate(-1px, -1px);
    }

    /* Blink dot */
    .blink { animation: blink 1.6s ease-in-out infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }

    /* Stagger delays */
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
    .delay-400 { animation-delay: 0.4s; }
    .delay-500 { animation-delay: 0.5s; }

    @media (max-width: 640px) {
      .hero-number { font-size: clamp(4rem, 22vw, 8rem); }
    }