body { font-family: 'Inter', sans-serif; }

    .gradient-text {
      background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ─── Header helpers ─── */
    .nav-icon { width: 1rem; height: 1rem; flex-shrink: 0; }

    .nav-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      border-radius: 0.375rem;
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: #6b7280;
      transition: background-color 0.15s, color 0.15s;
      text-decoration: none;
    }
    .nav-link:hover { background-color: #f3f4f6; color: #111827; }
    .nav-link.active-link { color: #111827; }
    .nav-link.active-link::after {
      content: '';
      position: absolute;
      left: 0.25rem; right: 0.25rem;
      bottom: -9px;
      height: 2px;
      border-radius: 9999px;
      background-color: #111827;
    }

    .mobile-nav-link {
      display: flex; align-items: center; gap: 0.75rem;
      border-radius: 0.5rem; padding: 0.625rem 0.75rem;
      font-size: 0.875rem; font-weight: 500;
      color: #6b7280; text-decoration: none;
      transition: background-color 0.15s, color 0.15s;
    }
    .mobile-nav-link:hover { background-color: #f3f4f6; color: #111827; }
    .mobile-nav-link.active-mobile { background-color: #f3f4f6; color: #111827; }

    /* Mobile drawer animation */
    .mobile-menu-hidden {
      max-height: 0;
      transition: max-height 0.3s ease;
    }
    .mobile-menu-open {
      max-height: 500px;
      transition: max-height 0.35s ease;
    }

    /* ─── Footer helpers ─── */
    .footer-link {
      font-size: 0.875rem; color: #6b7280; text-decoration: none;
      transition: color 0.15s;
    }
    .footer-link:hover { color: #111827; }

    .social-icon {
      display: flex; align-items: center; justify-content: center;
      height: 2rem; width: 2rem; border-radius: 9999px;
      color: #9ca3af; text-decoration: none;
      transition: background-color 0.15s, color 0.15s;
    }
    .social-icon:hover { background-color: #f3f4f6; color: #111827; }

    /* ─── Scroll-reveal ─── */
    .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ─── Floating badges ─── */
    @keyframes floatA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
    @keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
    .float-a { animation: floatA 4s ease-in-out infinite; }
    .float-b { animation: floatB 5s ease-in-out infinite; }

    /* ─── Accordion ─── */
    .accordion-body {
      max-height: 0; overflow: hidden;
      transition: max-height 0.35s ease, padding 0.25s ease;
    }
    .accordion-body.open { max-height: 500px; }

    /* ─── Stat counter ─── */
    @keyframes countUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
    .stat-item { animation: countUp 0.5s ease forwards; opacity: 0; }

    /* ─── Feature card hover ─── */
    .feature-card { transition: box-shadow 0.25s, border-color 0.25s; }
    .feature-card:hover { box-shadow: 0 10px 30px -5px rgba(0,0,0,.1); border-color: rgba(0,0,0,.2); }
    .feature-card:hover .feature-icon { background-color: #111827; color: white; }
    .feature-icon { transition: background-color 0.25s, color 0.25s; }

    /* ─── Glow blob ─── */
    @keyframes blobPulse { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.06)} }
    .blob { animation: blobPulse 6s ease-in-out infinite; }