/* ===== BASE STYLES ===== */
    /* Body font, line height, and focus ring for keyboard users */
    body { font-family: 'Inter', sans-serif; line-height: 1.7; }
    h1, h2, h3, h4 { font-family: 'Sora', sans-serif; line-height: 1.2; }
    :focus-visible { outline: 3px solid #2DD4BF; outline-offset: 3px; border-radius: 6px; }

    /* ===== SCROLL REVEAL ===== */
    /* Hidden state only applies when JS adds .js-reveal to <html> — content stays visible without JS */
    .js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
    .js-reveal .reveal.is-visible { opacity: 1; transform: none; }

    /* ===== CARD HOVER LIFT ===== */
    .lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
    .lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -16px rgba(45, 212, 191, .25); border-color: rgba(45, 212, 191, .5); }

    /* ===== HERO GLOW BACKDROP ===== */
    .hero-glow {
      background:
        radial-gradient(600px circle at 15% 20%, rgba(45, 212, 191, .16), transparent 60%),
        radial-gradient(500px circle at 85% 70%, rgba(251, 191, 36, .10), transparent 60%);
    }
    .grid-lines {
      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 48px 48px;
    }

    /* ===== FAQ ACCORDION ===== */
    .faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
    .faq-panel.open { grid-template-rows: 1fr; }
    .faq-panel > div { overflow: hidden; }
    .faq-icon { transition: transform .3s ease; }
    [aria-expanded="true"] .faq-icon { transform: rotate(45deg); }

    /* ===== REDUCED MOTION ===== */
    /* Respects the visitor's OS setting: disables reveal, lift, and smooth scroll */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition: none !important; animation: none !important; }
      .js-reveal .reveal { opacity: 1; transform: none; }
      .lift:hover { transform: none; }
    }