/* ── Base ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html { font-family: 'DM Sans', sans-serif; }

    /* Dark theme tokens */
    :root {
      --bg:       #0a0f0d;
      --bg-card:  #111a14;
      --bg-glass: rgba(17,26,20,0.7);
      --border:   rgba(34,197,94,0.15);
      --accent:   #22c55e;
      --accent-2: #86efac;
      --text:     #e2f5e8;
      --muted:    #7d9c84;
    }
    .light {
      --bg:       #f5faf6;
      --bg-card:  #ffffff;
      --bg-glass: rgba(255,255,255,0.75);
      --border:   rgba(22,163,74,0.18);
      --accent:   #16a34a;
      --accent-2: #15803d;
      --text:     #0a1a0e;
      --muted:    #4b7a57;
    }

    body {
      background-color: var(--bg);
      color: var(--text);
      transition: background-color .35s, color .35s;
    }

    /* ── Noise grain overlay ──────────────────────────────── */
    body::before {
      content: '';
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      opacity: .6;
    }

    /* ── Glass card ───────────────────────────────────────── */
    .glass {
      background: var(--bg-glass);
      border: 1px solid var(--border);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    /* ── Gradient text ────────────────────────────────────── */
    .grad-text {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, #fff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ── Glow blobs ───────────────────────────────────────── */
    .blob {
      border-radius: 9999px;
      filter: blur(120px);
      position: absolute;
      pointer-events: none;
    }

    /* ── Nav link underline ───────────────────────────────── */
    .nav-link {
      position: relative;
      color: var(--muted);
      font-size: .875rem;
      font-weight: 500;
      transition: color .2s;
    }
    .nav-link::after {
      content: '';
      position: absolute; left: 0; bottom: -2px;
      width: 0; height: 1.5px;
      background: var(--accent);
      transition: width .25s ease;
    }
    .nav-link:hover { color: var(--text); }
    .nav-link:hover::after { width: 100%; }

    /* ── Buttons ──────────────────────────────────────────── */
    .btn-primary {
      display: inline-flex; align-items: center; gap: .5rem;
      background: var(--accent);
      color: #fff;
      font-family: 'Syne', sans-serif;
      font-weight: 600;
      padding: .75rem 1.75rem;
      border-radius: 9999px;
      transition: transform .2s, box-shadow .2s, background .2s;
      box-shadow: 0 0 0 0 rgba(34,197,94,0);
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(34,197,94,.4);
    }
    .btn-outline {
      display: inline-flex; align-items: center; gap: .5rem;
      border: 1.5px solid var(--border);
      color: var(--text);
      font-family: 'Syne', sans-serif;
      font-weight: 600;
      padding: .75rem 1.75rem;
      border-radius: 9999px;
      transition: border-color .2s, background .2s, transform .2s;
    }
    .btn-outline:hover {
      border-color: var(--accent);
      background: rgba(34,197,94,.07);
      transform: translateY(-2px);
    }

    /* ── Feature card hover ───────────────────────────────── */
    .feat-card {
      transition: transform .3s ease, box-shadow .3s ease;
      cursor: default;
    }
    .feat-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 60px rgba(34,197,94,.12);
    }

    /* ── Pricing card ─────────────────────────────────────── */
    .price-card {
      transition: transform .3s ease, box-shadow .3s ease;
    }
    .price-card:hover { transform: translateY(-8px); }
    .price-card.featured { border-color: var(--accent) !important; }

    /* ── FAQ accordion ────────────────────────────────────── */
    .faq-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
    .faq-body.open { max-height: 400px; }

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

    /* ── Stats number counter ─────────────────────────────── */
    @keyframes countUp {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .stat-num { animation: countUp .6s ease forwards; }

    /* ── Sticky nav on scroll ─────────────────────────────── */
    #navbar { transition: background .35s, border-color .35s, box-shadow .35s; }
    #navbar.scrolled {
      background: var(--bg-glass) !important;
      border-bottom: 1px solid var(--border);
      box-shadow: 0 4px 32px rgba(0,0,0,.18);
      backdrop-filter: blur(20px);
    }

    /* ── Marquee logos ────────────────────────────────────── */
    .marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
    .marquee-track:hover { animation-play-state: paused; }

    /* ── Mobile menu ──────────────────────────────────────── */
    #mobile-menu { transform: translateY(-100%); transition: transform .35s ease; }
    #mobile-menu.open { transform: translateY(0); }

    /* ── Tooltip badge ────────────────────────────────────── */
    .badge {
      display: inline-block;
      padding: .2rem .7rem;
      border-radius: 9999px;
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .05em;
      text-transform: uppercase;
      border: 1px solid var(--border);
      color: var(--accent);
      background: rgba(34,197,94,.08);
    }

    /* ── Divider line ─────────────────────────────────────── */
    .h-px-grad {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border) 40%, var(--border) 60%, transparent);
    }

    /* ── Toggle knob ──────────────────────────────────────── */
    #toggle-knob { transition: transform .3s ease; }
    #toggle-knob.active { transform: translateX(22px); }

    /* ── Custom cursor ────────────────────────────────────── */
    @media (pointer: fine) { * { cursor: none !important; } }

    #cursor-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--accent);
      position: fixed; top: 0; left: 0;
      pointer-events: none; z-index: 9999;
      transform: translate(-50%, -50%);
      transition: width .15s, height .15s, background .15s;
    }
    #cursor-ring {
      width: 38px; height: 38px; border-radius: 50%;
      border: 1.5px solid rgba(34,197,94,.45);
      position: fixed; top: 0; left: 0;
      pointer-events: none; z-index: 9998;
      transform: translate(-50%, -50%);
      transition: width .22s ease, height .22s ease, border-color .22s, left .09s linear, top .09s linear;
    }
    #cursor-dot.clicking  { width: 13px; height: 13px; background: #86efac; }
    #cursor-ring.clicking { width: 22px; height: 22px; border-color: rgba(134,239,172,.8); }
    #cursor-dot.on-link   { width: 12px; height: 12px; background: #4ade80; }
    #cursor-ring.on-link  { width: 56px; height: 56px; border-color: rgba(34,197,94,.3); }

    /* ── Cursor trail ─────────────────────────────────────── */
    .cursor-trail {
      position: fixed; border-radius: 50%;
      background: var(--accent); pointer-events: none;
      z-index: 9995; transform: translate(-50%,-50%);
      animation: trailFade .55s ease forwards;
    }
    @keyframes trailFade {
      0%   { opacity: .45; }
      100% { opacity: 0; transform: translate(-50%,-50%) scale(0); }
    }

    /* ── Scroll emoji burst ───────────────────────────────── */
    .scroll-emoji {
      position: fixed; pointer-events: none; z-index: 9997;
      font-size: 1.4rem; user-select: none; line-height: 1;
      animation: emojiBurst 1.05s cubic-bezier(.22,.61,.36,1) forwards;
    }
    @keyframes emojiBurst {
      0%   { opacity: 1; transform: translate(0,0) scale(1); }
      25%  { opacity: 1; transform: translate(var(--ex), calc(var(--ey)*.35)) scale(1.25); }
      100% { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(.65); }
    }

    /* ── Scroll indicator pill (bottom-right) ─────────────── */
    #scroll-pill {
      position: fixed; right: 28px; bottom: 36px; z-index: 9990;
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      opacity: 1; transition: opacity .6s ease;
    }
    #scroll-pill.hide { opacity: 0; pointer-events: none; }
    #scroll-pill-inner {
      background: var(--bg-glass);
      border: 1px solid var(--border);
      backdrop-filter: blur(16px);
      border-radius: 9999px;
      padding: 10px 16px;
      display: flex; flex-direction: column; align-items: center; gap: 2px;
    }
    #scroll-label {
      font-family: 'Syne', sans-serif; font-weight: 600;
      font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
      color: var(--muted);
    }
    #scroll-emojis {
      display: flex; flex-direction: column; align-items: center;
      animation: pillBounce 1.7s ease-in-out infinite;
    }
    #scroll-emojis span { font-size: .95rem; line-height: 1.35; }
    @keyframes pillBounce {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(7px); }
    }

    /* ── Wheel flash ring (appears at cursor on scroll) ───── */
    .wheel-ring {
      position: fixed; border-radius: 50%; pointer-events: none;
      z-index: 9994; transform: translate(-50%,-50%);
      border: 2px solid rgba(34,197,94,.6);
      animation: wheelPop .55s ease forwards;
    }
    @keyframes wheelPop {
      0%   { width: 0px;  height: 0px;  opacity: .8; }
      60%  { opacity: .5; }
      100% { width: 80px; height: 80px; opacity: 0; }
    }

    /* ══════════════════════════════════════════════════════
       SCROLL-DRIFT TEXT ANIMATION SYSTEM
    ══════════════════════════════════════════════════════ */

    /*
      Each [data-drift] element owns a transform timeline that maps
      scroll progress (0 → 1) inside its viewport window to a
      translateX + opacity + skewX interpolation.
      JS drives the values; CSS only declares will-change & transition.
    */
    [data-drift] {
      will-change: transform, opacity;
      /* Silky fallback for reduced-motion */
    }
    @media (prefers-reduced-motion: reduce) {
      [data-drift] { transform: none !important; opacity: 1 !important; }
    }

    /* ── Section heading word-split spans ─────────────────── */
    .drift-word {
      display: inline-block;
      will-change: transform, opacity;
    }

    /* ── Scroll-progress bar (top of page) ────────────────── */
    #scroll-progress-bar {
      position: fixed; top: 0; left: 0; z-index: 10000;
      height: 2.5px; width: 0%;
      background: linear-gradient(90deg, var(--accent), #86efac, var(--accent));
      background-size: 200% 100%;
      animation: progressShimmer 2s linear infinite;
      pointer-events: none;
      transition: width .05s linear;
    }
    @keyframes progressShimmer {
      0%   { background-position: 0% 0%; }
      100% { background-position: 200% 0%; }
    }

    /* ── "Magnetic" section label that slides in from side ── */
    .section-ribbon {
      display: inline-block;
      overflow: hidden;
    }
    .section-ribbon-inner {
      display: inline-block;
      /* driven by JS transform */
      will-change: transform;
    }

    /* ── Paragraph line reveal ────────────────────────────── */
    .line-mask {
      overflow: hidden;
      display: block;
    }
    .line-inner {
      display: block;
      will-change: transform, opacity;
    }