/* ─── Kill any horizontal overflow at the root ─── */
      html, body { overflow-x: hidden; max-width: 100vw; }
      body.landing {
        background:
          radial-gradient(80% 60% at 15% 10%, rgba(124,58,237,.12), transparent 60%),
          radial-gradient(60% 50% at 90% 25%, rgba(8,145,178,.10), transparent 60%),
          radial-gradient(70% 60% at 50% 100%, rgba(236,72,153,.10), transparent 60%),
          var(--bg-page);
        background-attachment: fixed;
      }
      html.dark body.landing {
        background:
          radial-gradient(70% 55% at 15% 8%, rgba(139,92,246,.32), transparent 60%),
          radial-gradient(55% 45% at 90% 22%, rgba(34,211,238,.22), transparent 60%),
          radial-gradient(65% 55% at 50% 100%, rgba(244,114,182,.22), transparent 60%),
          #020617;
        background-attachment: fixed;
      }
      /* All sections clip overflow so the decorative orbs never trigger scrollbar */
      .landing section, .landing header, .landing footer { overflow-x: clip; }
      /* Orbs are decorative — never push layout */
      .orb { position: absolute; border-radius: 9999px; pointer-events: none; filter: blur(80px); opacity: .35; z-index: 0; max-width: 100%; }
      html.dark .orb { opacity: .5; }

      /* ─── Typography fine-tuning ─── */
      .h-display { font-family: "Space Grotesk", "Inter", sans-serif; letter-spacing: -0.035em; line-height: 1; font-weight: 700; font-feature-settings: "ss01" on, "cv11" on; }
      .h-eyebrow { font-family: "JetBrains Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.7rem; font-weight: 500; }
      .lead     { line-height: 1.55; font-size: 1.125rem; }
      @media (min-width: 768px) { .lead { font-size: 1.25rem; line-height: 1.5; } }

      /* Shimmer headline accent */
      .shimmer {
        background: linear-gradient(110deg, #7c3aed 0%, #ec4899 25%, #06b6d4 50%, #ec4899 75%, #7c3aed 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text; background-clip: text; color: transparent;
        animation: shimmer 6s linear infinite;
      }
      html.dark .shimmer {
        background: linear-gradient(110deg, #c4b5fd 0%, #f9a8d4 25%, #67e8f9 50%, #f9a8d4 75%, #c4b5fd 100%);
        background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
      }

      /* Subtle hairline separator */
      .hairline { height: 1px; max-width: 24rem; margin: 0 auto; background: linear-gradient(90deg, transparent, rgba(124,58,237,.4), transparent); }
      html.dark .hairline { background: linear-gradient(90deg, transparent, rgba(167,139,250,.5), transparent); }

      /* Glassy spec card with subtle hover */
      .card-glow { position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
      .card-glow:hover { transform: translateY(-4px); box-shadow: 0 28px 60px -20px rgba(124,58,237,.35); }

      /* Big stats with halo */
      .stat-num { position: relative; display: inline-block; }
      .stat-num::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(124,58,237,.18), transparent 70%); z-index: -1; filter: blur(8px); }
      html.dark .stat-num::after { background: radial-gradient(circle, rgba(167,139,250,.30), transparent 70%); }

      /* Before/After comparison cards */
      .ba-card { backdrop-filter: blur(14px); border: 1px solid; border-radius: 1.25rem; padding: 1.5rem; }
      .ba-before { border-color: rgba(244,63,94,.25); background: linear-gradient(135deg, rgba(244,63,94,.06), transparent 60%); }
      .ba-after  { border-color: rgba(16,185,129,.25); background: linear-gradient(135deg, rgba(16,185,129,.08), transparent 60%); }

      /* Pulse dot for "live" pills */
      .pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
      .pulse-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: #10b981; opacity: 0.4; animation: pulse-ring 1.8s ease-out infinite; }
      @keyframes pulse-ring { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }

      /* ─── Step numbers · animated gradient text · 3 distinct speeds ─── */
      .step-num {
        font-family: "Space Grotesk", "Inter", sans-serif;
        font-weight: 700; line-height: 1; letter-spacing: -0.04em;
        background-size: 220% 100%;
        -webkit-background-clip: text; background-clip: text; color: transparent;
        animation-name: shimmer; animation-timing-function: linear; animation-iteration-count: infinite;
        text-shadow: 0 0 60px rgba(124,58,237,.15);  /* subtle halo */
      }
      /* 1 — slow & warm (violet → fuchsia → violet) */
      .step-num.n1 {
        background-image: linear-gradient(110deg, #7c3aed 0%, #ec4899 30%, #f472b6 50%, #ec4899 70%, #7c3aed 100%);
        animation-duration: 7s;
      }
      /* 2 — medium & mixed (fuchsia → cyan → fuchsia) */
      .step-num.n2 {
        background-image: linear-gradient(110deg, #ec4899 0%, #a78bfa 30%, #06b6d4 50%, #a78bfa 70%, #ec4899 100%);
        animation-duration: 4s;
      }
      /* 3 — fast & cool (cyan → violet → cyan) */
      .step-num.n3 {
        background-image: linear-gradient(110deg, #06b6d4 0%, #22d3ee 25%, #7c3aed 50%, #22d3ee 75%, #06b6d4 100%);
        animation-duration: 2.2s;
      }
      /* Dark mode tweaks — brighter stops for visibility on slate-950 */
      html.dark .step-num.n1 { background-image: linear-gradient(110deg, #c4b5fd 0%, #f9a8d4 30%, #fda4af 50%, #f9a8d4 70%, #c4b5fd 100%); }
      html.dark .step-num.n2 { background-image: linear-gradient(110deg, #f9a8d4 0%, #c4b5fd 30%, #67e8f9 50%, #c4b5fd 70%, #f9a8d4 100%); }
      html.dark .step-num.n3 { background-image: linear-gradient(110deg, #67e8f9 0%, #a5f3fc 25%, #c4b5fd 50%, #a5f3fc 75%, #67e8f9 100%); }

      /* ─── Live feed: smooth row entrance ─── */
      @keyframes feedIn {
        0%   { opacity: 0; transform: translateY(-10px) scale(.98); }
        60%  { opacity: 1; }
        100% { opacity: 1; transform: translateY(0) scale(1); }
      }
      .feed-row { animation: feedIn .55s cubic-bezier(.22,1,.36,1) both; }
      /* confidence chips inside the feed */
      .cf { font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 600; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
      .cf-vh { background: rgba(16,185,129,.16); color: #059669; border: 1px solid rgba(16,185,129,.4); }
      .cf-h  { background: rgba(34,211,238,.16); color: #0891b2; border: 1px solid rgba(34,211,238,.4); }
      .cf-m  { background: rgba(245,158,11,.16); color: #d97706; border: 1px solid rgba(245,158,11,.4); }
      html.dark .cf-vh { color: #6ee7b7; } html.dark .cf-h { color: #67e8f9; } html.dark .cf-m { color: #fcd34d; }

      /* ─── Trust bar: make the proof chips stand out (no saturation) ─── */
      .trustbar > div {
        position: relative;
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
      }
      .trustbar > div::before {
        content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; border-radius: 999px;
        background: linear-gradient(90deg, #8b5cf6, #22d3ee);
        opacity: .55; transition: opacity .22s ease;
      }
      .trustbar > div:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(124,58,237,.55); border-color: rgba(139,92,246,.45); }
      .trustbar > div:hover::before { opacity: 1; }

      /* ─── Scroll reveal (progressive enhancement; visible by default if JS off) ─── */
      .anim .reveal { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
      .anim .reveal.in { opacity: 1; transform: none; }
      .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
      @media (prefers-reduced-motion: reduce) {
        .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
        .feed-row { animation: none !important; }
      }

      /* ════════════════════════════════════════════════════════════
         BRILLO & PERSONALIDAD — living background, glow, sheen
         ════════════════════════════════════════════════════════════ */

      /* Aurora: a slow, living gradient field behind everything */
      body.landing::before {
        content: ""; position: fixed; inset: -25% -15% 35% -15%; z-index: -1; pointer-events: none;
        background:
          radial-gradient(38% 48% at 18% 28%, rgba(139,92,246,.20), transparent 70%),
          radial-gradient(34% 44% at 82% 18%, rgba(34,211,238,.18), transparent 70%),
          radial-gradient(44% 50% at 62% 72%, rgba(236,72,153,.16), transparent 70%);
        filter: blur(28px);
        animation: auroraDrift 20s ease-in-out infinite alternate;
      }
      html.dark body.landing::before {
        background:
          radial-gradient(40% 50% at 18% 26%, rgba(139,92,246,.40), transparent 68%),
          radial-gradient(36% 46% at 82% 16%, rgba(34,211,238,.30), transparent 68%),
          radial-gradient(46% 52% at 62% 74%, rgba(236,72,153,.30), transparent 68%);
      }
      @keyframes auroraDrift {
        0%   { transform: translate3d(0,0,0) scale(1); }
        50%  { transform: translate3d(3%,-2.5%,0) scale(1.08); }
        100% { transform: translate3d(-3%,2.5%,0) scale(1.05); }
      }

      /* Decorative orbs now drift slowly + breathe */
      .orb { animation: orbDrift 17s ease-in-out infinite alternate; }
      .orb:nth-of-type(2) { animation-duration: 22s; animation-direction: alternate-reverse; }
      @keyframes orbDrift {
        0%   { transform: translate(0,0) scale(1); }
        100% { transform: translate(22px,-26px) scale(1.12); }
      }

      /* Animated gradient border (mask trick) — premium framing for key cards */
      .glow-border { position: relative; }
      .glow-border::before {
        content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
        background: linear-gradient(130deg, rgba(139,92,246,.85), rgba(34,211,238,.6) 40%, rgba(236,72,153,.75) 75%, rgba(139,92,246,.85));
        background-size: 220% 220%;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
        animation: gradient-x 7s ease infinite; pointer-events: none; z-index: 1;
      }

      /* Primary CTA: light sheen sweep on hover + richer glow */
      .landing a.animate-gradient-x, .landing button.animate-gradient-x { position: relative; overflow: hidden; }
      .landing a.animate-gradient-x::after, .landing button.animate-gradient-x::after {
        content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
        background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
        transform: skewX(-18deg); transition: left .65s cubic-bezier(.22,1,.36,1); pointer-events: none;
      }
      .landing a.animate-gradient-x:hover::after, .landing button.animate-gradient-x:hover::after { left: 130%; }
      .landing a.animate-gradient-x:hover, .landing button.animate-gradient-x:hover { box-shadow: 0 18px 50px -12px rgba(139,92,246,.6); }

      /* Glass cards: gentle lift + colored glow on hover (applies site-wide) */
      .landing .glass { transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease; }
      .landing .card-glow:hover, .landing .glass.hoverable:hover { transform: translateY(-5px); box-shadow: 0 30px 64px -24px rgba(124,58,237,.45); }

      /* Animated gradient eyebrow accent */
      .h-eyebrow.grad {
        background: linear-gradient(100deg,#7c3aed,#06b6d4,#ec4899,#7c3aed);
        background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
        animation: shimmer 6s linear infinite;
      }

      @media (prefers-reduced-motion: reduce) {
        body.landing::before, .orb, .glow-border::before { animation: none !important; }
      }