/* ==========================================================================
   Online Ranking AI — V2 dark system
   Palette pulled from the brand assets:
     #3194E7  logo "ai" blue
     #D8262B  logo map-pin red
     #00D3E6  Orion's glow cyan
   ========================================================================== */

:root{
  --bg:#070E1B;
  --bg-2:#0A1424;
  --panel:#0E1A2C;
  --panel-2:#132339;
  --panel-3:#192E49;

  --line:rgba(140,190,240,.16);
  --line-2:rgba(140,190,240,.30);

  /* Ambient light for the whole page, viewport-fixed so the very same
     gradient can be repainted inside the carved corners and line up pixel
     for pixel. Its opacities and positions live in registered custom
     properties animated on :root — because they inherit, the page and
     every notch move together without any extra syncing. */
  --amb:radial-gradient(1250px 850px at var(--pA) 4%,rgba(0,178,222,var(--aA)),transparent 58%),
        radial-gradient(1150px 800px at var(--pB) 18%,rgba(49,148,231,var(--aB)),transparent 60%),
        radial-gradient(1000px 820px at var(--pR) 76%,rgba(216,38,43,var(--aR)),transparent 58%),
        radial-gradient(950px 700px at 46% 56%,rgba(0,150,200,var(--aC)),transparent 62%);

  --ink:#EAF1FA;
  --muted:#94A7BF;
  --faint:#67798F;

  --cyan:#00D3E6;
  --cyan-2:#6EEDF8;
  --blue:#3194E7;
  --red:#D8262B;

  --grad:linear-gradient(95deg,#00D3E6 0%,#3194E7 100%);
  --grad-soft:linear-gradient(140deg,rgba(0,211,230,.14),rgba(49,148,231,.05));

  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px;
  --wrap:1180px;
  --glow:0 0 0 1px rgba(0,211,230,.18), 0 22px 60px -26px rgba(0,211,230,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);
  background-color:var(--bg);background-image:var(--amb);
  background-attachment:fixed;background-repeat:no-repeat;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.6;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}

.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.center{text-align:center}

h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.06;color:#fff}
h1{font-size:clamp(38px,5.6vw,66px)}
h2{font-size:clamp(29px,3.9vw,46px)}
h3{font-size:19px;letter-spacing:-.02em;line-height:1.3}
p{margin:0}

.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-red{color:var(--red)}
.lead{color:var(--muted);font-size:16.5px;line-height:1.72}

/* ---------- glow field ---------------------------------------------- */
.glowfield{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.glowfield span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.72}
.gb1{width:620px;height:620px;background:radial-gradient(circle,rgba(0,211,230,.50),transparent 68%);top:-260px;left:-160px}
.gb2{width:560px;height:560px;background:radial-gradient(circle,rgba(49,148,231,.42),transparent 68%);top:60px;right:-220px}
.gb3{width:420px;height:420px;background:radial-gradient(circle,rgba(216,38,43,.26),transparent 68%);bottom:-200px;left:34%}
.grid-ov{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(150,200,245,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(150,200,245,.07) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 78%);
}

/* ---------- nav ------------------------------------------------------ */
.nav{position:sticky;top:0;z-index:60;background:rgba(7,14,27,.78);backdrop-filter:blur(16px);
     border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
.nav.stuck{border-bottom-color:var(--line);background:rgba(5,7,12,.92)}
.nav-inner{display:flex;align-items:center;gap:22px;height:96px;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.nav-logo{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;flex:0 0 auto;min-width:0}
.nav-logo img{height:52px;width:auto;max-width:100%;display:block}
.nav-slogan{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;line-height:1;
            background:linear-gradient(90deg,var(--cyan) 0%,var(--blue) 55%,#9CC4EC 100%);
            -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--cyan)}
/* Entre 1101 y 1290px los links del nav siguen en linea y el slogan ya no cabe:
   se oculta en esa franja y vuelve cuando el menu pasa a hamburguesa. */
@media (min-width:1101px) and (max-width:1290px){.nav-slogan{display:none}}
.nav-links{display:flex;align-items:center;gap:6px;margin-left:12px}
.nav-links a{padding:9px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--muted);transition:color .2s,background .2s}
.nav-links a:hover{color:#fff;background:rgba(120,170,230,.08)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.lang{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px;background:rgba(255,255,255,.02)}
.lang a{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--faint)}
.lang a.active{background:rgba(0,211,230,.13);color:var(--cyan)}
.lang .flag{width:15px;height:15px;border-radius:50%}
.nav-toggle{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;padding:0 10px}
.nav-toggle span{display:block;height:1.8px;background:var(--ink);border-radius:2px;margin:4px 0}

/* ---------- buttons -------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;border-radius:999px;
     font-size:14.5px;font-weight:700;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;
     transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s,border-color .25s}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--grad);color:#02222a;box-shadow:0 16px 38px -16px rgba(0,211,230,.75)}
.btn-primary:hover{box-shadow:0 22px 48px -16px rgba(0,211,230,.95)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 16px 38px -16px rgba(216,38,43,.8)}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-lg{padding:16px 30px;font-size:15.5px}

/* ---------- shared bits ---------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.11em;
         text-transform:uppercase;color:var(--cyan);border:1px solid rgba(0,211,230,.26);
         background:rgba(0,211,230,.07);padding:7px 15px;border-radius:999px;margin-bottom:18px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px rgba(0,211,230,.2)}

section{position:relative;padding:74px 0}
.sec-head{max-width:760px;margin-bottom:40px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin-bottom:14px}

.card{position:relative;background:linear-gradient(160deg,var(--panel-2),var(--panel));
      border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
      background:linear-gradient(140deg,rgba(0,211,230,.42),transparent 42%);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
.card h3{margin-bottom:9px}
.card p{color:var(--muted);font-size:14.5px;line-height:1.7}
.ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    background:var(--grad-soft);border:1px solid rgba(0,211,230,.22);color:var(--cyan);margin-bottom:16px}
.ic svg{width:20px;height:20px}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* ---------- 1. HERO --------------------------------------------------- */
.hero{padding:44px 0 34px;overflow:hidden}
.hero .container{position:relative;z-index:1}
.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.hero-stat .n{font-size:30px;font-weight:800;color:var(--cyan);letter-spacing:-.04em;line-height:1}
.hero-stat .l{font-size:12.5px;color:var(--faint);margin-top:4px;max-width:150px;line-height:1.4}
.hero-tags{display:flex;gap:10px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);
     border:1px solid var(--line);background:rgba(255,255,255,.02);padding:8px 14px;border-radius:999px}
.tag b{color:var(--cyan);font-weight:800;font-size:11px;letter-spacing:.06em}

.hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:30px;align-items:center}
.hero-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:400px}
.hero-art .ring{position:absolute;width:390px;height:390px;border-radius:50%;
      background:radial-gradient(circle,rgba(0,211,230,.34),rgba(49,148,231,.10) 52%,transparent 70%);filter:blur(4px)}
.hero-art .ring::after{content:"";position:absolute;inset:34px;border-radius:50%;border:1px solid rgba(0,211,230,.22)}
.hero-art img{position:relative;width:min(100%,460px);filter:drop-shadow(0 34px 50px rgba(0,0,0,.66)) drop-shadow(0 0 40px rgba(0,211,230,.3));
      animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

.hero h1{margin-bottom:18px}
.hero .lead{max-width:560px;margin-bottom:24px;font-size:17px}

.audit-bar{position:relative;isolation:isolate;overflow:hidden;display:flex;gap:10px;
           border:0;border-radius:999px;padding:9px;max-width:560px;background:transparent;
           box-shadow:0 0 34px -12px rgba(0,211,230,.55),0 0 46px -14px rgba(216,38,43,.4),
                      0 22px 56px -28px rgba(0,0,0,.9)}
.audit-bar input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--ink);padding:0 18px;font-size:14.5px}
.audit-bar input::placeholder{color:var(--faint)}
.audit-note{font-size:12.5px;color:var(--faint);margin-top:12px}
.hero-alt{margin-top:14px;font-size:14px}
.hero-alt a{color:var(--cyan);font-weight:600;border-bottom:1px solid rgba(0,211,230,.35)}

/* AI chips marquee — real platform marks */
.ai-marquee{position:relative;display:flex;gap:12px;overflow:hidden;margin:30px 0 0;
            mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
            -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ai-track{display:flex;gap:12px;flex:0 0 auto;animation:slide 34s linear infinite;will-change:transform}
.ai-marquee:hover .ai-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-100%)}}
.ai-chip{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;font-size:15px;font-weight:600;
         color:var(--ink);border:1px solid var(--line);background:linear-gradient(140deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
         padding:11px 20px;border-radius:999px;transition:border-color .25s,transform .25s}
.ai-chip:hover{border-color:rgba(0,211,230,.45);transform:translateY(-2px)}
.ai-chip img{width:22px;height:22px;flex:0 0 auto;object-fit:contain}

/* --- hero connector arrow (animated) --------------------------------- */
.hero-arrow{position:absolute;left:2px;top:56px;width:200px;height:200px;overflow:visible;pointer-events:none;z-index:2}
.hero-arrow .ha-glow{stroke:var(--cyan);stroke-width:5;stroke-linecap:round;opacity:.16;filter:blur(4px)}
.hero-arrow .ha-line{stroke:var(--cyan);stroke-width:1.7;stroke-linecap:round;
                     stroke-dasharray:7 9;animation:dashflow 1.4s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-32}}
.hero-arrow .ha-head{stroke:var(--cyan);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
                     animation:headpulse 2.2s ease-in-out infinite;transform-origin:18px 34px}
@keyframes headpulse{0%,100%{opacity:.55;transform:translateY(2px)}50%{opacity:1;transform:translateY(-2px)}}
.hero-arrow .ha-dot{fill:var(--cyan);filter:drop-shadow(0 0 6px rgba(0,211,230,.9))}
.hero-arrow .ha-anchor{fill:none;stroke:var(--cyan);stroke-width:1.7;opacity:.85;
                       animation:anchorpulse 2.2s ease-in-out infinite;transform-origin:168px 158px}
@keyframes anchorpulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.5);opacity:.35}}
@media (max-width:1100px){.hero-arrow{display:none}}

/* ---------- 2. split (text + media) ----------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split.rev .split-media{order:-1}
.split-media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2)}
.split-media img,.split-media video{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block}
.split-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
                    background:linear-gradient(180deg,transparent 42%,rgba(7,14,27,.58))}

/* --- image with a carved-out corner holding its own CTA ---------------
   The notch is painted in the page background and two radial-gradient
   squares create the concave fillets where it meets the image edges.
   --nr is the fillet radius, --ng the gap between photo edge and button. */
.cut{position:relative;overflow:hidden;isolation:isolate;--nr:28px;--ng:16px;
      -webkit-mask-image:-webkit-radial-gradient(#000,#000);  /* fuerza el recorte en iOS */
      border:1px solid rgba(216,38,43,.52);border-radius:var(--r-lg);
      box-shadow:0 0 22px -6px rgba(216,38,43,.30),0 26px 60px -34px rgba(216,38,43,.65);
      transition:transform .3s}
.split-media.cut::after{background:linear-gradient(180deg,transparent 48%,rgba(7,14,27,.66))}
.media-notch{position:absolute;right:0;bottom:0;z-index:3;display:flex;
             padding:var(--ng) 0 0 var(--ng);border-top-left-radius:22px;
             background-color:var(--bg);background-image:var(--amb);
             background-attachment:fixed;background-repeat:no-repeat}
.media-notch::before,.media-notch::after{content:"";position:absolute;width:var(--nr);height:var(--nr);
             background-color:var(--bg);background-image:var(--amb);
             background-attachment:fixed;background-repeat:no-repeat;
             -webkit-mask:radial-gradient(circle at top left,transparent var(--nr),#000 calc(var(--nr) + .5px));
             mask:radial-gradient(circle at top left,transparent var(--nr),#000 calc(var(--nr) + .5px))}
.media-notch::before{right:0;bottom:100%}            /* fillet against the right edge  */
.media-notch::after{right:100%;bottom:0}             /* fillet against the bottom edge */
.media-cta{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
           padding:13px 24px;border-radius:999px;font-size:14px;font-weight:700;
           color:#fff;border:1px solid rgba(216,38,43,.62);
           background:linear-gradient(140deg,rgba(216,38,43,.14),rgba(216,38,43,.04));
           transition:border-color .25s,color .25s,transform .25s,box-shadow .25s,background .25s}
.media-cta svg{color:var(--red);transition:color .25s,transform .25s}
.media-cta:hover{border-color:var(--red);transform:translateY(-2px);
                 background:linear-gradient(140deg,rgba(216,38,43,.26),rgba(216,38,43,.10));
                 box-shadow:0 14px 34px -16px rgba(216,38,43,.95)}
.media-cta:hover svg{color:#fff;transform:translateX(3px)}
.media-cta svg{width:16px;height:16px}
.media-cta.sm{padding:9px 16px;font-size:12.5px;gap:7px}
.media-cta.sm svg{width:14px;height:14px}
.bpost:hover .media-cta{border-color:var(--red);
                        background:linear-gradient(140deg,rgba(216,38,43,.26),rgba(216,38,43,.10))}
.bpost:hover .media-cta svg{color:#fff;transform:translateX(3px)}
@media (max-width:520px){
  .split-media.cut{--nr:18px;--ng:10px}
  .media-cta{padding:11px 16px;font-size:13px}
}
.split h2{margin-bottom:16px}
.split .lead{margin-bottom:24px}
.mini-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* badge */
.badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--red);
       border:1px solid rgba(216,38,43,.36);background:rgba(216,38,43,.09);padding:6px 14px;border-radius:999px;margin-bottom:16px}

/* ---------- 3. quad features ------------------------------------------ */
.quad{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px}
.quad .qi h3{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.quad .qi h3 .n{font-size:11px;font-weight:800;color:var(--cyan);letter-spacing:.1em}
.quad .qi p{color:var(--muted);font-size:14px;line-height:1.7}


/* ---------- glass panel overlapping an image -------------------------
   The panel floats over the photo's edge with a real backdrop blur, so
   the image reads through it. Stacks on narrow screens, keeping a small
   negative pull so the overlap survives on mobile. */
.ov{position:relative;display:flex;align-items:center;min-height:430px}
.ov-media{position:relative;width:63%;margin-left:auto}
.ov-media img,.ov-media video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ov-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
                 background:linear-gradient(90deg,rgba(7,14,27,.78),transparent 58%)}
.ov.rev .ov-media{margin-left:0;margin-right:auto}
.ov.rev .ov-media::after{background:linear-gradient(270deg,rgba(7,14,27,.78),transparent 58%)}

.ov-media.orion{display:flex;align-items:center;justify-content:flex-end;padding-right:5%;
  background:radial-gradient(circle at 58% 46%,rgba(0,211,230,.30),transparent 62%),
             linear-gradient(150deg,#16294A,#0A1424 72%)}
.ov-media.orion img{width:64%;aspect-ratio:auto;object-fit:contain;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.6)) drop-shadow(0 0 34px rgba(0,211,230,.3));
  animation:float 8s ease-in-out infinite}

.ov-panel{position:absolute;left:0;top:50%;transform:translateY(-50%);width:57%;z-index:4;
  padding:30px 28px;border-radius:var(--r-xl);
  background:linear-gradient(150deg,rgba(15,24,39,.80),rgba(7,11,19,.66));
  -webkit-backdrop-filter:blur(22px) saturate(155%);backdrop-filter:blur(22px) saturate(155%);
  border:1px solid rgba(216,38,43,.40);
  box-shadow:0 44px 92px -46px rgba(0,0,0,.96),0 0 26px -10px rgba(216,38,43,.35),
             inset 0 1px 0 rgba(255,255,255,.07)}
.ov.rev .ov-panel{left:auto;right:0}
.ov-panel .cell{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09)}
.ov-panel .quad{gap:22px 26px}
.ov-cta{margin-top:24px}

@media (max-width:980px){
  .ov{display:block;min-height:0}
  .ov-media{width:100%}
  .ov-media::after{background:linear-gradient(180deg,transparent 45%,rgba(7,14,27,.72))}
  .ov.rev .ov-media::after{background:linear-gradient(180deg,transparent 45%,rgba(7,14,27,.72))}
  .ov-panel{position:static;transform:none;width:auto;margin:-46px 14px 0;padding:24px 20px}
  .ov-media.orion{justify-content:center;padding-right:0}
  .ov-media.orion img{width:62%}
}
@media (max-width:520px){.ov-panel{margin:-30px 0 0;padding:20px 16px}}

/* ---------- 4. panel with cells --------------------------------------- */
.panel{position:relative;background:linear-gradient(150deg,var(--panel-2),var(--panel) 60%);
       border:1px solid var(--line);border-radius:var(--r-xl);padding:38px;overflow:hidden}
.panel::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(90px);
       background:radial-gradient(circle,rgba(0,211,230,.22),transparent 70%);top:-220px;right:-120px;pointer-events:none}
.panel-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:30px}
.panel-head h2{max-width:420px}
.panel-metrics{display:flex;gap:30px;flex-wrap:wrap}
.pm .v{font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1}
.pm .l{font-size:12.5px;color:var(--faint);margin-top:5px;max-width:160px;line-height:1.45}
.cells{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cell{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;background:rgba(255,255,255,.017)}
.cell h4{font-size:14.5px;margin-bottom:7px;color:#fff}
.cell p{font-size:13.5px;color:var(--muted);line-height:1.65}

/* ---------- 5. steps --------------------------------------------------- */
.steps{display:grid;gap:14px}
.stepr{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);
       padding:22px 24px;background:linear-gradient(120deg,var(--panel-2),transparent);transition:border-color .25s,transform .25s}
.stepr:hover{border-color:rgba(0,211,230,.4);transform:translateX(4px)}
.stepr .sn{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
           font-size:14px;font-weight:800;color:var(--cyan);border:1px solid rgba(0,211,230,.3);background:rgba(0,211,230,.08)}
.stepr h3{margin-bottom:6px}
.stepr p{color:var(--muted);font-size:14px;line-height:1.65}

/* ---------- 6. why grid ------------------------------------------------ */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* ---------- 7. pricing -------------------------------------------------- */
.bill-toggle{display:inline-flex;gap:4px;border:1px solid var(--line);background:rgba(255,255,255,.02);
             border-radius:999px;padding:4px;margin-top:20px}
.bill-toggle button{padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--muted);
             display:inline-flex;align-items:center;gap:7px;transition:.2s}
.bill-toggle button.active{background:var(--grad);color:#02222a;font-weight:800}
.bill-toggle .save{font-size:11px;font-weight:800;color:var(--red)}
.bill-toggle button.active .save{color:#03313a}

.plans{display:grid;gap:16px}
.plan{position:relative;display:grid;grid-template-columns:1.15fr 1.55fr auto;gap:30px;align-items:center;
      border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:linear-gradient(130deg,var(--panel-2),var(--panel));
      transition:border-color .3s,transform .3s}
.plan:hover{border-color:rgba(0,211,230,.36);transform:translateY(-3px)}
.plan.feat{border-color:rgba(0,211,230,.42);box-shadow:var(--glow)}
.plan-badge{position:absolute;top:-11px;left:28px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
      background:var(--grad);color:#02222a;padding:4px 13px;border-radius:999px}
/* La etiqueta sobresale 11px por encima de la tarjeta. Al hacer scroll eso la
   mete debajo del nav sticky y desaparece justo en el plan que queremos
   destacar. En una sola columna la metemos dentro de la tarjeta, que ahi
   sobra sitio y ya no depende de donde se pare el scroll. */
.plan{scroll-margin-top:120px}
@media (max-width:1000px){
  .plan.feat{padding-top:54px}
  .plan-badge{top:16px;left:20px}
}
.plan h3{font-size:22px;margin-bottom:8px}
.plan .who{font-size:13px;color:var(--faint);line-height:1.6}
.plan .amt{font-size:34px;font-weight:800;letter-spacing:-.045em;color:#fff}
.plan .per{font-size:14px;color:var(--faint);font-weight:600}
.plan .billnote{font-size:12.5px;color:var(--cyan);margin-top:5px}
.plan-right{text-align:right;min-width:190px}
.plist{display:grid;gap:9px}
.plist li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.55}
.plist svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;color:var(--cyan)}
.plan-label{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.plan-cta{display:inline-flex;align-items:center;justify-content:center;width:100%;margin-top:14px;padding:13px 22px;
      border-radius:999px;font-size:14px;font-weight:700;border:1px solid var(--line-2);color:var(--ink);transition:.25s}
.plan-cta:hover{border-color:var(--cyan);color:var(--cyan)}
.plan.feat .plan-cta{background:var(--grad);color:#02222a;border-color:transparent;box-shadow:0 16px 38px -16px rgba(0,211,230,.75)}
.plan-note{font-size:11.5px;color:var(--faint);margin-top:9px}

/* comparison table */
.cmp-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;background:var(--panel)}
table.cmp{width:100%;border-collapse:collapse;min-width:760px;font-size:13.5px}
table.cmp th,table.cmp td{padding:13px 16px;text-align:center;border-bottom:1px solid var(--line);color:var(--muted)}
table.cmp thead th{position:sticky;top:0;background:var(--panel-3);color:#fff;font-size:13.5px;font-weight:800;z-index:1}
table.cmp thead th span{display:block;font-size:12px;font-weight:600;color:var(--cyan);margin-top:3px}
table.cmp tbody th{text-align:left;color:var(--ink);font-weight:600}
table.cmp tr.grp td{background:rgba(120,170,230,.05);color:var(--cyan);font-weight:800;text-align:left;
      font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
table.cmp td.feat{background:rgba(0,211,230,.045)}
.yes{color:var(--cyan)}.no{color:#3B4A5E}
.ci{width:17px;height:17px;display:inline-block}
.cmp-note{font-size:12.5px;color:var(--faint);margin-top:16px;line-height:1.7;max-width:900px}

/* ---------- 8. testimonials ---------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tcard{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:linear-gradient(150deg,var(--panel-2),var(--panel))}
.stars{display:flex;gap:3px;margin-bottom:12px}
.stars svg{width:14px;height:14px;color:var(--cyan)}
.tcard p{font-size:14px;color:var(--ink);line-height:1.7;margin-bottom:16px}
.twho{display:flex;align-items:center;gap:11px}
.tav{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
     font-size:12px;font-weight:800;color:#02222a;background:var(--grad);flex:0 0 auto}
.twho .n{font-size:13.5px;font-weight:700;color:#fff;line-height:1.3}
.twho .r{font-size:12px;color:var(--faint)}

/* ---------- 9. blog -------------------------------------------------------- */
.bposts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
.bpost{display:block}
.bimg{--nr:20px;--ng:11px;border-radius:var(--r);margin-bottom:16px;border-color:rgba(216,38,43,.62)}
.bimg img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.bimg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
             background:linear-gradient(180deg,transparent 52%,rgba(7,14,27,.54))}
.bpost:hover .bimg{border-color:var(--red);transform:translateY(-4px);
                   box-shadow:0 0 26px -6px rgba(216,38,43,.5),0 30px 60px -32px rgba(216,38,43,.85)}
.btag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan);margin-bottom:9px}
.bpost h3{font-size:16.5px;line-height:1.42;transition:color .25s}
.bpost:hover h3{color:var(--cyan)}

/* ---------- 10. CTA -------------------------------------------------------- */
.cta{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:56px 44px;text-align:center;
     background:linear-gradient(140deg,var(--panel-3),var(--panel) 65%);border:1px solid var(--line-2)}
.cta::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(100px);
     background:radial-gradient(circle,rgba(0,211,230,.3),transparent 70%);top:-280px;left:50%;transform:translateX(-50%)}
.cta>*{position:relative}
.cta h2{margin-bottom:14px}
.cta .lead{max-width:540px;margin:0 auto 26px}
.cta .audit-bar{margin:0 auto}

/* ---------- footer --------------------------------------------------------- */
.footer{border-top:1px solid var(--line);background:var(--bg-2);padding:64px 0 34px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.fbrand img{height:66px;margin-bottom:18px}
.fbrand p{font-size:13.5px;color:var(--muted);line-height:1.7;max-width:330px}
.fsocial{display:flex;gap:9px;margin-top:18px}
.fsocial a{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
           color:#fff;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,filter .22s}
.fsocial a:hover{transform:translateY(-3px)}
.fsocial svg{width:19px;height:19px}

/* real brand colours */
.fsocial a.fb{background:#1877F2;box-shadow:0 10px 24px -12px rgba(24,119,242,.95)}
.fsocial a.fb:hover{box-shadow:0 16px 30px -12px rgba(24,119,242,1)}
.fsocial a.ig{background:radial-gradient(circle at 28% 108%,#FDF497 0%,#FDF497 6%,#FD5949 42%,#D6249F 62%,#285AEB 92%);
              box-shadow:0 10px 24px -12px rgba(214,36,159,.95)}
.fsocial a.ig:hover{box-shadow:0 16px 30px -12px rgba(214,36,159,1)}
.fsocial a.tt{background:#0A0A0A;border:1px solid rgba(255,255,255,.14);
              box-shadow:0 10px 24px -12px rgba(37,244,238,.7)}
.fsocial a.tt:hover{box-shadow:0 16px 30px -12px rgba(254,44,85,.9)}
/* TikTok is three stacked copies of the glyph, offset — that is the logo */
.tt-glyph .c{fill:#25F4EE;transform:translate(-1.1px,-1px)}
.tt-glyph .r{fill:#FE2C55;transform:translate(1.1px,1px)}
.tt-glyph .w{fill:#fff}
.fcol h4{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-bottom:15px}
.fcol a{display:block;font-size:13.5px;color:var(--muted);padding:5px 0;transition:color .2s}
.fcol a:hover{color:var(--cyan)}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:22px;
      border-top:1px solid var(--line);font-size:12.5px;color:var(--faint)}
.fbot a{color:var(--cyan);font-weight:600}

.stat-note{font-size:12px;color:var(--faint);margin-top:16px}

/* ---------- responsive ------------------------------------------------------ */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:10px}
  .hero-art{order:-1;min-height:300px}
  .hero-art img{width:min(78%,340px)}
  .split,.quad,.cells{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .grid4{grid-template-columns:1fr 1fr}
  .grid3,.tgrid,.bposts{grid-template-columns:1fr}
  .plan{grid-template-columns:1fr;gap:22px}
  .plan-right{text-align:left;min-width:0}
  .fgrid{grid-template-columns:1fr 1fr}
}
/* El menu pasa a hamburguesa a 1100px: con el CTA del analyzer (texto largo,
   y mas largo aun en espanol) los links en linea dejan de caber antes. */
@media (max-width:1100px){
  .nav-links{display:none;position:absolute;top:96px;left:0;right:0;flex-direction:column;align-items:stretch;
             background:var(--bg-2);border-bottom:1px solid var(--line);padding:12px 16px;gap:2px}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
}
@media (max-width:760px){
  section{padding:58px 0}
  .panel{padding:26px 20px}
  .cta{padding:40px 22px}
  .audit-bar{flex-direction:column;border-radius:var(--r);padding:12px}
  .audit-bar input{padding:10px 8px}
  .audit-bar .btn{width:100%}
  .grid4,.fgrid{grid-template-columns:1fr}
  .hero-top{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}





/* ======================================================================
   AI ANALYZER — continuous cyan↔red specular treatment
   A conic gradient the size of the bar spins behind it; an inner plate
   covers everything but a 1.6px ring, so the edge reads as a light
   travelling around the input. The button runs its own gradient sweep
   plus a periodic sheen. All GPU transforms, no layout work per frame.
   ====================================================================== */
.audit-bar::before{content:"";position:absolute;left:50%;top:50%;width:210%;aspect-ratio:1;z-index:-2;
  transform:translate(-50%,-50%);
  background:conic-gradient(from 0turn,
    #00D3E6 0turn,#3194E7 .16turn,#D8262B .34turn,#FF5A5F .42turn,
    #3194E7 .62turn,#00D3E6 .80turn,#6EEDF8 .90turn,#00D3E6 1turn);
  animation:ringspin 6s linear infinite;filter:saturate(135%)}
@keyframes ringspin{to{transform:translate(-50%,-50%) rotate(1turn)}}
.audit-bar::after{content:"";position:absolute;inset:1.6px;border-radius:999px;z-index:-1;
  background:linear-gradient(150deg,#12203A,#0A1424)}
.audit-bar input{position:relative;z-index:1}

.btn-analyzer{position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:999px;font-size:14.5px;font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;cursor:pointer;color:#06202A;border:0;text-shadow:0 1px 0 rgba(255,255,255,.35);
  background:linear-gradient(100deg,#00D3E6 0%,#12C2E9 30%,#2B9BE8 52%,#1FB6DE 74%,#00D3E6 100%);
  background-size:260% 100%;animation:hueflow 7s ease-in-out infinite;
  box-shadow:0 14px 34px -14px rgba(0,211,230,.8),0 14px 34px -18px rgba(216,38,43,.7);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.btn-analyzer svg{width:17px;height:17px;flex:0 0 auto}
.btn-analyzer:hover{transform:translateY(-2px);
  box-shadow:0 20px 44px -14px rgba(0,211,230,1),0 20px 44px -16px rgba(216,38,43,.9)}
@keyframes hueflow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.btn-analyzer::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
  transform:translateX(-130%);animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%{transform:translateX(-130%)}58%,100%{transform:translateX(130%)}}
.btn-analyzer>*{position:relative;z-index:2}

/* the analyzer block itself: drifting starfield + two counter-moving auroras */
.cta{isolation:isolate}
.cta .stars-layer,.cta .aurora{position:absolute;pointer-events:none}
.cta .stars-layer{inset:-40%;z-index:0;opacity:.75;
  background-image:radial-gradient(1.4px 1.4px at 20% 30%,rgba(255,255,255,.85),transparent 60%),
                   radial-gradient(1.2px 1.2px at 72% 18%,rgba(0,211,230,.9),transparent 60%),
                   radial-gradient(1.6px 1.6px at 46% 72%,rgba(255,255,255,.7),transparent 60%),
                   radial-gradient(1.2px 1.2px at 86% 64%,rgba(216,38,43,.9),transparent 60%),
                   radial-gradient(1.1px 1.1px at 12% 82%,rgba(255,255,255,.6),transparent 60%),
                   radial-gradient(1.3px 1.3px at 62% 44%,rgba(110,237,248,.8),transparent 60%);
  background-size:260px 260px,320px 320px,290px 290px,350px 350px,240px 240px,300px 300px;
  animation:drift 46s linear infinite}
@keyframes drift{to{transform:translate3d(-260px,-160px,0)}}
.cta .aurora{width:560px;height:560px;border-radius:50%;filter:blur(90px);z-index:0}
.cta .a-cyan{background:radial-gradient(circle,rgba(0,211,230,.55),transparent 68%);
             top:-230px;left:6%;animation:auroraA 13s ease-in-out infinite}
.cta .a-red{background:radial-gradient(circle,rgba(216,38,43,.52),transparent 68%);
            bottom:-250px;right:4%;animation:auroraB 16s ease-in-out infinite}
@keyframes auroraA{0%,100%{transform:translate(0,0) scale(1);opacity:.75}
                   50%{transform:translate(90px,40px) scale(1.15);opacity:1}}
@keyframes auroraB{0%,100%{transform:translate(0,0) scale(1.1);opacity:.6}
                   50%{transform:translate(-80px,-50px) scale(1);opacity:.95}}
.cta::before{display:none}

@media (prefers-reduced-motion:reduce){
  .audit-bar::before,.btn-analyzer,.btn-analyzer::after,
  .cta .stars-layer,.cta .aurora{animation:none}
  .btn-analyzer::after{opacity:0}
}


/* ======================================================================
   LIVE MEDIA — constant slow drift + glass sweep + cursor-driven 3D tilt
   The drift and the sweep run on their own so the image is never static;
   the tilt is added by script.js from pointer position. Everything is a
   transform or an opacity, so the browser keeps it on the compositor.
   ====================================================================== */
.live{--rx:0deg;--ry:0deg;
      transform:perspective(1250px) rotateX(var(--rx)) rotateY(var(--ry));
      transform-style:preserve-3d;will-change:transform;
      transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.live.tilting{transition:transform .1s linear}

/* slow pan and breathe, so there is always something moving */
.live img,.live video{transform-origin:52% 48%;animation:drifty 26s ease-in-out infinite}
@keyframes drifty{
  0%  {transform:scale(1.07) translate3d(0,0,0)}
  30% {transform:scale(1.13) translate3d(-1.8%,-1.3%,0)}
  62% {transform:scale(1.10) translate3d(1.5%,1.1%,0)}
  100%{transform:scale(1.07) translate3d(0,0,0)}
}

/* the reflection travelling over the glass */
.live::before{content:"";position:absolute;inset:-35%;z-index:2;pointer-events:none;
  background:linear-gradient(104deg,
    transparent 41%,rgba(255,255,255,.10) 46%,rgba(255,255,255,.30) 49%,
    rgba(110,237,248,.42) 50.5%,rgba(255,255,255,.28) 52%,rgba(255,255,255,.09) 55%,transparent 60%);
  mix-blend-mode:screen;
  animation:glasssweep 7.5s ease-in-out infinite}
@keyframes glasssweep{0%{transform:translateX(-72%)}60%,100%{transform:translateX(72%)}}

/* a second, slower edge light in brand red, out of phase with the first */
.live::after{background:linear-gradient(180deg,transparent 42%,rgba(7,14,27,.58)),
                        radial-gradient(120% 80% at 110% 0%,rgba(216,38,43,.18),transparent 55%)}
.ov-media.live::after{background:linear-gradient(270deg,rgba(7,14,27,.78),transparent 58%),
                        radial-gradient(120% 80% at -10% 0%,rgba(216,38,43,.20),transparent 55%)}

@media (prefers-reduced-motion:reduce){
  .live img,.live video,.live::before{animation:none}
  .live{transform:none}
}


/* ======================================================================
   LIVE METRICS — the three headline numbers never sit still
   1. the digits carry a gradient that sweeps cyan → blue → red forever
   2. a halo behind each one breathes on its own cycle
   3. a hairline under each metric has a light travelling along it
   Each metric is offset in phase so the row never pulses in unison.
   ====================================================================== */
.panel-metrics{gap:34px}
.pm{position:relative;padding:2px 0 16px}

.pm .v{position:relative;z-index:1;display:inline-block;
  background:linear-gradient(100deg,#00D3E6 0%,#6EEDF8 16%,#3194E7 34%,
             #D8262B 52%,#FF6B62 60%,#3194E7 76%,#00D3E6 100%);
  background-size:320% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:metricflow 7s linear infinite}
@keyframes metricflow{from{background-position:0% 50%}to{background-position:-320% 50%}}

/* breathing halo */
.pm::before{content:"";position:absolute;left:-14px;top:-12px;width:86px;height:56px;z-index:0;
  border-radius:50%;filter:blur(18px);pointer-events:none;
  background:radial-gradient(circle,rgba(0,211,230,.42),transparent 70%);
  animation:metricglow 4.6s ease-in-out infinite}
@keyframes metricglow{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.85;transform:scale(1.12)}}

/* hairline under each metric, with a light running along it.
   Track and light live in the same pseudo-element so nothing can ever
   land on top of the label underneath. */
.pm::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:76px;border-radius:2px;
  background-image:linear-gradient(90deg,rgba(120,170,230,.16),rgba(120,170,230,.16)),
                   linear-gradient(90deg,transparent 0%,var(--cyan) 38%,var(--red) 62%,transparent 100%);
  background-size:100% 100%,46% 100%;background-repeat:no-repeat;
  animation:metricrun 3.4s cubic-bezier(.55,0,.45,1) infinite}
@keyframes metricrun{from{background-position:0 0,-50% 0}to{background-position:0 0,150% 0}}

/* stagger so the three read as a sequence, not a flash */
.pm:nth-child(2) .v{animation-delay:-2.3s}
.pm:nth-child(3) .v{animation-delay:-4.6s}
.pm:nth-child(2)::after{animation-delay:-1.1s}
.pm:nth-child(3)::after{animation-delay:-2.2s}
.pm:nth-child(2)::before{animation-delay:-1.5s}
.pm:nth-child(3)::before{animation-delay:-3s}
.pm:nth-child(3)::before{background:radial-gradient(circle,rgba(216,38,43,.42),transparent 70%)}

@media (prefers-reduced-motion:reduce){
  .pm .v,.pm::before,.pm .v::after{animation:none}
  .pm .v{background-position:0 50%}
}


/* ======================================================================
   BREATHING AURA — the halo behind every framed image drifts between the
   brand red and the brand blue instead of sitting still. script.js adds
   .glowing only while the frame is on screen, so nothing repaints for
   images the visitor cannot see.
   ====================================================================== */
.cut.glowing{animation:auraPulse 9s ease-in-out infinite}
@keyframes auraPulse{
  0%{border-color:rgba(216,38,43,.50);
     box-shadow:0 0 20px -8px rgba(216,38,43,.26),0 26px 58px -34px rgba(216,38,43,.58)}
  22%{border-color:rgba(216,38,43,.78);
     box-shadow:0 0 36px -4px rgba(216,38,43,.52),0 30px 74px -28px rgba(216,38,43,.98)}
  44%{border-color:rgba(137,96,150,.70);
     box-shadow:0 0 30px -6px rgba(150,80,150,.42),0 28px 68px -30px rgba(120,90,190,.80)}
  62%{border-color:rgba(49,148,231,.80);
     box-shadow:0 0 38px -4px rgba(49,148,231,.50),0 30px 76px -28px rgba(49,148,231,.95)}
  80%{border-color:rgba(0,211,230,.62);
     box-shadow:0 0 32px -6px rgba(0,211,230,.44),0 28px 70px -30px rgba(0,150,200,.80)}
  100%{border-color:rgba(216,38,43,.50);
     box-shadow:0 0 20px -8px rgba(216,38,43,.26),0 26px 58px -34px rgba(216,38,43,.58)}
}

/* out of phase, so two frames on screen never breathe together */
.ov-media.cut{animation-delay:-3.2s}
.bposts .bpost:nth-child(2) .bimg{animation-delay:-1.5s}
.bposts .bpost:nth-child(3) .bimg{animation-delay:-3s}
.bposts .bpost:nth-child(4) .bimg{animation-delay:-4.5s}
.bposts .bpost:nth-child(5) .bimg{animation-delay:-6s}
.bposts .bpost:nth-child(6) .bimg{animation-delay:-7.5s}

/* hover still wins: it pins the frame to full red */
.bpost:hover .bimg,.cut:hover{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){.cut.glowing{animation:none}}


/* ======================================================================
   MOBILE FIXES
   ====================================================================== */

/* 1. The billing toggle was 356px wide and forced the whole page to
      scroll sideways on 360-375px screens. It now wraps and shrinks. */
@media (max-width:560px){
  .bill-toggle{flex-wrap:wrap;justify-content:center;max-width:100%;gap:3px}
  .bill-toggle button{padding:9px 14px;font-size:12.5px;gap:5px}
  .bill-toggle .save{font-size:10.5px}
}

/* 2. The header logo at 68px was being squeezed to a sliver on phones.
      Smaller mark, tighter bar, and the language switch drops its
      EN / ES labels so the flags alone carry it. */
@media (max-width:860px){
  .nav-inner{height:74px;gap:10px;padding:0 16px}
  .nav-logo{gap:4px}
  .nav-logo img{height:44px}
  .nav-slogan{font-size:9px;letter-spacing:.10em}
  .nav-right{gap:8px}
  .nav-right .btn{padding:10px 16px;font-size:13px}
  .nav-links{top:74px}
}
@media (max-width:620px){
  .lang{padding:2px}
  .lang a{font-size:0;padding:6px 8px;gap:0}
  .lang .flag{width:18px;height:18px}
  .nav-logo img{height:40px}
  .nav-slogan{font-size:8.5px;letter-spacing:.07em}
  .nav-right .btn{padding:9px 13px;font-size:12.5px}
}
@media (max-width:520px){
  .nav-right .btn{display:none}   /* el CTA vive igual en el menú y en la página */
  .nav-logo img{height:36px}
  .nav-slogan{font-size:8px;letter-spacing:.03em}
}
@media (max-width:339px){
  .nav-slogan{display:none}   /* por debajo de 340px el slogan ya no cabe sin romper la barra */
}

/* 3. The comparison table scrolls sideways on phones, but nothing said
      so. A hint above it and a fade on the right edge now do. */
.cmp-hint{display:none}
.cmp-outer{position:relative}
@media (max-width:860px){
  .cmp-hint{display:block;font-size:13px;color:var(--cyan);margin:0 0 12px;font-weight:600}
  .cmp-outer::after{content:"";position:absolute;top:0;right:0;bottom:0;width:46px;
    pointer-events:none;border-radius:0 var(--r-lg) var(--r-lg) 0;
    background:linear-gradient(90deg,transparent,rgba(7,14,27,.94))}
  table.cmp{min-width:680px}
  .cmp-wrap{-webkit-overflow-scrolling:touch}
}

/* 4. micro-labels were at 11px; on phones that is below comfortable */
@media (max-width:620px){
  .plan-label,.cmp-note,.plan-note{font-size:12px}
  table.cmp tr.grp td{font-size:12px}
}

/* the header CTA is hidden on the narrowest phones, so the mobile menu
   carries it instead — it must never disappear from the page */
.nav-cta-m{display:none}
@media (max-width:1100px){
  .nav-cta-m{display:block!important;margin-top:8px;text-align:center;
    background:var(--grad);color:#02222a!important;font-weight:800;border-radius:999px;padding:12px 18px!important}
  .nav-cta-m:hover{background:var(--grad)}
}

/* On a phone the ambient gradients cover the whole viewport at once, so the
   same alphas that read as soft lighting on desktop wash the screen out.
   Same colours, roughly 60% of the strength. */
@media (max-width:900px){
  :root{
    --amb:radial-gradient(880px 700px at var(--pA) 2%,rgba(0,178,222,calc(var(--aA) * .62)),transparent 60%),
          radial-gradient(840px 680px at var(--pB) 14%,rgba(49,148,231,calc(var(--aB) * .62)),transparent 62%),
          radial-gradient(820px 700px at var(--pR) 80%,rgba(216,38,43,calc(var(--aR) * .70)),transparent 60%),
          radial-gradient(800px 700px at 50% 62%,rgba(0,150,200,calc(var(--aC) * .62)),transparent 64%);
  }
  .glowfield span{opacity:.48}
}


/* ======================================================================
   BREATHING AMBIENCE
   Four registered properties drive the page lighting. They are animated
   once, on :root, and inherit everywhere — so the background and the ten
   carved corners that repaint the same gradient stay in lockstep with no
   extra code. Red is absent most of the cycle and swells once near the
   middle, so it reads as an accent rather than a second base colour.
   ====================================================================== */
@property --aA{syntax:'<number>';inherits:true;initial-value:0.26}
@property --aB{syntax:'<number>';inherits:true;initial-value:0.22}
@property --aR{syntax:'<number>';inherits:true;initial-value:0}
@property --aC{syntax:'<number>';inherits:true;initial-value:0.13}
@property --pA{syntax:'<percentage>';inherits:true;initial-value:10%}
@property --pB{syntax:'<percentage>';inherits:true;initial-value:92%}
@property --pR{syntax:'<percentage>';inherits:true;initial-value:22%}

:root{--aA:.26;--aB:.22;--aR:0;--aC:.13;--pA:10%;--pB:92%;--pR:22%;
      animation:ambience 15s ease-in-out infinite}

@keyframes ambience{
  0%  {--aA:.38;--aB:.12;--aR:.00;--aC:.10;--pA:2%; --pB:98%;--pR:6%}
  16% {--aA:.46;--aB:.09;--aR:.04;--aC:.19;--pA:22%;--pB:84%;--pR:26%}
  34% {--aA:.22;--aB:.34;--aR:.12;--aC:.08;--pA:40%;--pB:66%;--pR:50%}
  50% {--aA:.10;--aB:.26;--aR:.24;--aC:.06;--pA:54%;--pB:52%;--pR:70%}
  66% {--aA:.18;--aB:.42;--aR:.10;--aC:.12;--pA:36%;--pB:70%;--pR:86%}
  84% {--aA:.34;--aB:.18;--aR:.02;--aC:.18;--pA:14%;--pB:92%;--pR:96%}
  100%{--aA:.38;--aB:.12;--aR:.00;--aC:.10;--pA:2%; --pB:98%;--pR:6%}
}

/* the hero blobs breathe against the same clock, half a beat behind */
.glowfield .gb1{animation:blobA 11s ease-in-out infinite}
.glowfield .gb2{animation:blobB 13s ease-in-out infinite}
.glowfield .gb3{animation:blobR 15s ease-in-out infinite}
@keyframes blobA{0%,100%{transform:translate(0,0) scale(1);opacity:.62}
                 50%{transform:translate(70px,40px) scale(1.18);opacity:.9}}
@keyframes blobB{0%,100%{transform:translate(0,0) scale(1.12);opacity:.5}
                 50%{transform:translate(-60px,50px) scale(1);opacity:.85}}
@keyframes blobR{0%,100%{opacity:.18;transform:scale(.9)}
                 45%{opacity:.6;transform:scale(1.2)}
                 60%{opacity:.35;transform:scale(1.05)}}

@media (prefers-reduced-motion:reduce){
  :root{animation:none}
  .glowfield span{animation:none}
}


/* ======================================================================
   TERM RAIN — SEO / AI vocabulary falling behind the page, Matrix style.
   A single fixed canvas under the content and over the ambient light.
   Drawn at ~22fps rather than 60, which is both cheaper and easier to
   read; it stops entirely when the tab is hidden.
   ====================================================================== */
.term-rain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.34;
  /* soft fade toward the middle so the columns dissolve before they
     reach the content column instead of stopping on a hard edge */
  --gut:max(74px,calc((100vw - 1180px) / 2 + 24px));
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--gut) - 34px),transparent var(--gut),
                     transparent calc(100% - var(--gut)),#000 calc(100% - var(--gut) + 34px),#000 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--gut) - 34px),transparent var(--gut),
                     transparent calc(100% - var(--gut)),#000 calc(100% - var(--gut) + 34px),#000 100%)}
main,.footer{position:relative;z-index:1}
.nav{z-index:60}   /* NO tocar position: .nav es sticky */
@media (max-width:900px){.term-rain{opacity:.26;--gut:34px}}
@media (prefers-reduced-motion:reduce){.term-rain{display:none}}


/* ======================================================================
   MOBILE · segunda ronda de ajustes
   ====================================================================== */
@media (max-width:760px){

  /* 2 · Orion ocupaba casi una pantalla entera antes del titular.
        Se encoge y el h1 sube a encontrarlo. */
  .hero{padding:26px 0 28px}
  .hero-top{margin-bottom:14px}
  .hero-stat .n{font-size:26px}
  /* Orion sale del hero en movil: el titular es lo que tiene que
     recibir al visitante. Sigue apareciendo grande mas abajo, en
     "Built for every stage". */
  .hero-art{display:none}
  .hero h1{font-size:clamp(31px,8.6vw,42px)}
  .hero .lead{font-size:15.5px;margin-bottom:20px}
  .ai-marquee{margin-top:20px}

  /* 4 · sin tilt 3D en táctil, el transform sobra y encima rompe el
        recorte de las esquinas en iOS Safari */
  .live{transform:none}
  .live img,.live video{animation-duration:34s}
}
@media (hover:none){.live{transform:none!important}}

/* 3 · el boton del analyzer en vertical */
@media (max-width:560px){
  .btn-analyzer{width:100%;padding:15px 20px;font-size:15px}
  .audit-bar{padding:10px;gap:8px}
  .audit-bar input{padding:10px 12px;font-size:15px}
  .audit-bar::after{inset:1.4px;border-radius:var(--r)}
}

.tdots{display:none}

/* 5 · testimonios como carrusel deslizable en movil */
@media (max-width:900px){
  .tgrid{display:flex;grid-template-columns:none;gap:12px;
         overflow-x:auto;scroll-snap-type:x mandatory;
         -webkit-overflow-scrolling:touch;scrollbar-width:none;
         margin:0 -24px;padding:2px 24px 4px}
  .tgrid::-webkit-scrollbar{display:none}
  .tcard{flex:0 0 82%;scroll-snap-align:center;margin:0}
  .tdots{display:flex;justify-content:center;gap:7px;margin-top:18px}
  .tdots b{width:7px;height:7px;border-radius:50%;background:rgba(140,190,240,.3);
           transition:background .25s,width .25s}
  .tdots b.on{width:20px;border-radius:999px;background:var(--grad)}
}

/* ==== BEGIN legacy-dark ==== */
/* ============================================================================
   CAPA DE COMPATIBILIDAD V2
   El CSS anterior era tema claro y nombraba --blue al ROJO de marca. Aqui se
   reasignan sus tokens a la paleta oscura del V2 para que las 33 paginas
   heredadas se relean en el lenguaje nuevo sin tocar su HTML.
   ========================================================================= */
:root{--text:#C4D3E6;--bg-soft:var(--bg-2);--bg-soft-2:var(--panel-2);--accent:var(--blue);--accent-2:#3194E7;--accent-3:var(--cyan-2);--pink:var(--cyan-2);/* el viejo --blue era el rojo de marca;se conserva su intencion con otro nombre */
  --brand-red:var(--red);--blue-soft:rgba(216,38,43,.14);--grad-blue:linear-gradient(120deg,#A81E22 0%,#D8262B 50%,#B81C21 100%);--grad-soft:linear-gradient(120deg,rgba(0,211,230,.10) 0%,rgba(49,148,231,.08) 100%);--radius:var(--r);--radius-sm:14px;--radius-lg:var(--r-lg);--radius-xl:40px;--shadow-xs:0 2px 10px rgba(0,0,0,.35);--shadow:0 18px 50px -28px rgba(0,0,0,.65);--shadow-lg:0 40px 90px -40px rgba(0,0,0,.75);--maxw:var(--wrap)}

/* ---- reglas heredadas, releidas en la paleta V2 ---- */
.eyebrow .spark{width:15px;height:15px;color:var(--accent)}
.eyebrow .num{color:var(--faint);font-weight:700}
.gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gradient-text-blue{background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-head{max-width:680px;margin:0 auto 60px}
.section-head .eyebrow{margin-bottom:20px}
.section-head h2{margin-bottom:16px}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 12px 30px -14px rgba(0,0,0,.55)}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 20px 44px -16px rgba(0,0,0,.55)}
/* nav dropdown (Service) */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd-trigger{display:inline-flex;align-items:center;gap:5px}
.nav-dd-trigger .ddchev{width:13px;height:13px;transition:transform .28s ease}
.nav-dd:hover .nav-dd-trigger .ddchev{transform:rotate(180deg)}
.nav-dd-pop{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:14px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease}
.nav-dd:hover .nav-dd-pop{opacity:1;visibility:visible;pointer-events:auto}
.nav-dd-menu{background:rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.7);border-radius:18px;box-shadow:0 22px 50px -22px rgba(20,16,60,.4),inset 0 1px 0 rgba(255,255,255,.8);padding:8px;min-width:300px;transform:translateY(-8px) scale(.97);transform-origin:top center;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.nav-dd:hover .nav-dd-menu{transform:translateY(0) scale(1)}
.nav-dd-menu a{display:flex !important;gap:12px;align-items:center;padding:12px 14px !important;border-radius:13px !important;color:var(--text) !important;background:transparent;transition:background .2s ease,transform .2s ease}
.nav-dd-menu a::after{display:none !important}
.nav-dd-menu a:hover{background:var(--panel-2);transform:none !important}
.ddi-ic{width:40px;height:40px;border-radius:11px;background:var(--grad-soft);border:1px solid #cfe3f9;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.ddi-t{display:block;font-weight:700;font-size:14px;color:var(--ink);letter-spacing:-.01em}
.ddi-d{display:block;font-size:12px;color:var(--muted);margin-top:1px}
/* shine button */
.btn-shine{position:relative;overflow:hidden;animation:shineGlow 2.2s ease-in-out infinite}
.btn-shine::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:shineSweep 2.2s ease-in-out infinite;z-index:1}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:blob 18s ease-in-out infinite}
.blob.b1{width:560px;height:560px;background:radial-gradient(circle,#bcd9f7,transparent 70%);top:-180px;left:-120px}
.blob.b2{width:520px;height:520px;background:radial-gradient(circle,#ffc2c7,transparent 70%);top:-140px;right:-120px;animation-delay:-6s}
.blob.b3{width:420px;height:420px;background:radial-gradient(circle,#c2dcf8,transparent 70%);top:120px;left:42%;animation-delay:-11s;opacity:.35}
.hero-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(10,12,18,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(10,12,18,.025) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 80%)}
.hero-inner{position:relative;z-index:1;text-align:center;max-width:880px;margin:0 auto}
.hero-ai-list{display:inline-flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px auto 34px}
.ai-chip.is-chatgpt i{background-image:url(/img/logos/ai/chatgpt.svg)}
.ai-chip.is-gemini i{width:17px;height:17px;background-image:url(/img/logos/ai/gemini.svg)}
.ai-chip.is-grok i{background-image:url(/img/logos/ai/grok.svg)}
.ai-chip.is-perplexity i{background-image:url(/img/logos/ai/perplexity.svg)}
.ai-chip.is-maps i{width:12px;background-image:url(/img/logos/ai/google-maps.svg)}
/* hero video */
.hero-media{position:relative;z-index:1;max-width:980px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line-2);background:#0a0c12;aspect-ratio:16/9}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);pointer-events:none}
.hero-media video{cursor:pointer}
.hero-media.is-playing .hero-play{opacity:0}
.hero-media.is-playing:hover .hero-play,.hero-media.is-playing .hero-play:focus-visible{opacity:1}
/* ---------- marquee (partners / testimonials) ---------- */
.marquee{display:flex;overflow:hidden;gap:0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee:hover .marquee-track{animation-play-state:paused}
/* ---------- services / feature bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.bento .feature{grid-column:span 6;padding:34px}
.bento .feature.wide{grid-column:span 12}
.bento .feature.third{grid-column:span 4;padding:28px}
.feature .ic{width:50px;height:50px;border-radius:14px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center;margin-bottom:20px;border:1px solid #cfe3f9}
.feature .ic svg{width:25px;height:25px;color:var(--accent)}
.feature h3{margin-bottom:9px}
.feature p{font-size:14.5px;color:var(--muted)}
/* service highlight (single big) */
.service-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:44px;box-shadow:var(--shadow-xs);overflow:hidden;position:relative}
.service-hero .badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--accent);background:var(--grad-soft);border:1px solid #cfe3f9;padding:6px 13px;border-radius:999px;margin-bottom:18px}
.service-hero h3{font-size:28px;margin-bottom:14px}
.service-hero p{color:var(--muted);font-size:15.5px;margin-bottom:24px}
.service-hero-media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.service-hero-media img{width:100%;display:block}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;position:relative;transition:transform .3s,box-shadow .3s}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.step .snum{width:44px;height:44px;border-radius:12px;background:var(--panel-3);color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.step:nth-child(2) .snum{background:var(--grad-blue)}
.step h3{margin-bottom:8px}
.step p{font-size:14.5px;color:var(--muted);margin-bottom:16px}
.step p:last-child{margin-bottom:0}
.step a{font-size:13.5px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:6px}
.step a:hover{gap:10px}
.step-line{position:absolute;top:54px;right:-10px;width:20px;height:2px;background:var(--line-2)}
/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px;text-align:center}
.stat .v{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1}
.stat .l{font-size:13.5px;color:var(--muted);margin-top:8px;font-weight:500}
/* ---------- testimonials ---------- */
.tcol{display:flex;flex-direction:column;gap:18px;padding-right:18px;flex-shrink:0;animation:scrolly 34s linear infinite}
.tmarquee{display:flex;gap:18px;max-height:620px;overflow:hidden;mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent)}
.tmarquee .tcol:nth-child(2){animation-duration:42s;animation-direction:reverse}
.tmarquee .tcol:nth-child(3){animation-duration:38s}
.tmarquee:hover .tcol{animation-play-state:paused}
.tcard .av{width:38px;height:38px;border-radius:999px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.tcard .nm{font-weight:700;font-size:13.5px;color:var(--ink)}
.tcard .rl{font-size:12px;color:var(--faint)}
.pcard.featured{border-color:transparent;box-shadow:0 30px 70px -34px rgba(0,0,0,.55);background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box;border:1.5px solid transparent}
/* ---- plan grid + comparison table ---- */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;margin-top:18px}
.plan-grid .plan,.plan-grid .svc-card{display:flex;flex-direction:column;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);padding:0;gap:0;grid-template-columns:none;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.plan-grid .plan:hover,.plan-grid .svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.plan-grid>:nth-child(2){border-color:var(--accent-3);box-shadow:0 18px 44px -22px rgba(0,0,0,.55)}
.plan-head{padding:28px 24px 24px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0}
.plan-grid>:nth-child(2) .plan-head{background:var(--grad);color:#fff;border-bottom:0}
.plan-grid>:nth-child(2) .plan-head::after{content:"";position:absolute;top:-70px;right:-50px;width:220px;height:220px;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);pointer-events:none}
.plan-head>*{position:relative}
.plan-head h3{font-size:22px;margin:0 0 8px}
.plan-grid>:nth-child(2) .plan-head h3{color:#fff}
.plan-head .svc-sub{font-size:13px;line-height:1.55;color:var(--muted);margin:0;min-height:84px}
.plan-grid>:nth-child(2) .plan-head .svc-sub{color:rgba(255,255,255,.9)}
.plan-price{display:flex;align-items:baseline;gap:6px;margin:18px 0 0}
.plan-price .amt{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.plan-grid>:nth-child(2) .plan-price .amt{color:#fff}
.plan-per{font-size:14px;font-weight:600;color:var(--muted)}
.plan-grid>:nth-child(2) .plan-per{color:rgba(255,255,255,.85)}
.bill-toggle.bill-global{display:inline-flex;justify-content:center;background:var(--panel-3);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:5px;gap:2px;margin:30px auto 0;box-shadow:0 12px 30px -16px rgba(0,0,0,.55)}
.bill-toggle.bill-global button{flex:0 0 auto;border:0;background:transparent;cursor:pointer;font:inherit;font-weight:600;font-size:14px;color:rgba(255,255,255,.7);padding:9px 20px;border-radius:999px;white-space:nowrap;transition:.25s}
.bill-toggle.bill-global button:hover{color:#fff}
.bill-toggle.bill-global button.active{background:var(--panel);color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.55)}
.bill-toggle.bill-global .save{background:#ffe11a;color:var(--ink);font-size:9px;font-weight:800;line-height:1;padding:3px 5px;border-radius:5px;margin-left:4px;vertical-align:middle}
.plan-billnote{margin:6px 0 18px;font-size:12.5px;font-weight:600;color:var(--muted);min-height:18px}
.plan-grid>:nth-child(2) .plan-billnote{color:rgba(255,255,255,.85)}
.plan-grid .plan-cta,.plan-grid .svc-buy{display:block;text-align:center;background:var(--grad);color:#fff;font-weight:700;font-size:14.5px;padding:14px;border-radius:12px;margin:0;transition:transform .2s,box-shadow .2s}
.plan-grid .plan-cta:hover,.plan-grid .svc-buy:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(0,0,0,.55)}
.plan-grid>:nth-child(2) .plan-cta,.plan-grid>:nth-child(2) .svc-buy{background:var(--panel);color:var(--accent)}
.plan-grid>:nth-child(2) .plan-cta:hover,.plan-grid>:nth-child(2) .svc-buy:hover{box-shadow:0 14px 28px -14px rgba(0,0,0,.55)}
.plan-grid>:nth-child(2) .plan-note{color:rgba(255,255,255,.8)}
.plan-body{padding:22px 24px 26px;flex:1;border-radius:0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px)}
.plan-body .plist li{font-size:13.5px}
/* ---------- blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bpost .more{font-size:13.5px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:6px;margin-top:auto}
.bpost .more:hover{gap:10px}
/* ---------- CTA band ---------- */
.cta-wrap{position:relative;border-radius:var(--radius-xl);overflow:hidden;padding:72px 40px;text-align:center;background:#0a0c12;color:#fff;box-shadow:var(--shadow-lg)}
.cta-wrap .cta-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
.cta-wrap .cb1{width:420px;height:420px;background:radial-gradient(circle,#3194e7,transparent 70%);top:-160px;left:-80px}
.cta-wrap .cb2{width:420px;height:420px;background:radial-gradient(circle,#5fb2f2,transparent 70%);bottom:-180px;right:-60px}
.cta-wrap>*{position:relative;z-index:1}
.cta-wrap .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.cta-wrap h2{color:#fff;margin:18px auto 14px;max-width:680px}
.cta-wrap p{color:rgba(255,255,255,.72);max-width:520px;margin:0 auto 30px;font-size:17px}
.cta-wrap .audit-bar{margin-bottom:0}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.footer-brand .nav-logo{margin-bottom:16px}
.footer-brand p{font-size:13.5px;color:var(--muted);line-height:1.7;max-width:280px;margin-bottom:18px}
.footer-social{display:flex;gap:9px}
.footer-social a{width:38px;height:38px;border-radius:10px;border:0;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .2s,box-shadow .2s}
.footer-social a:hover{transform:translateY(-3px);box-shadow:0 10px 22px -8px rgba(0,0,0,.55)}
.footer-social svg{width:17px;height:17px}
.footer-social .fb{background:#1877f2}
.footer-social .ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.footer-social .tt{background:#010101}
/* audit modal */
.audit-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px}
.audit-modal.open{display:flex}
.audit-modal-bd{position:absolute;inset:0;background:rgba(8,10,14,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.audit-modal-box{position:relative;z-index:1;width:100%;max-width:460px;background:var(--panel);border-radius:22px;padding:36px 32px 32px;box-shadow:var(--shadow-lg);text-align:center;animation:ppin .3s ease}
.audit-modal-box h3{font-size:23px;margin-bottom:8px}
.audit-modal-box p{color:var(--muted);font-size:14.5px;margin-bottom:22px}
.audit-modal-x{position:absolute;top:14px;right:16px;width:34px;height:34px;border:0;background:var(--panel-2);border-radius:999px;cursor:pointer;font-size:20px;color:var(--ink);line-height:1;display:flex;align-items:center;justify-content:center}
.audit-modal-x:hover{background:var(--line-2)}
.audit-form{display:flex;gap:8px;flex-wrap:wrap}
.audit-form input{flex:1;min-width:200px;background:var(--panel);color:var(--ink);border:1px solid #B0B0B0;border-radius:10px;padding:14px;font:inherit;font-size:15px;outline:0}
.audit-form input:focus{border-color:var(--accent)}
.audit-form button{padding:14px 22px;background:var(--accent);color:#fff;border-radius:10px;cursor:pointer;border:none;font:inherit;font-weight:700;white-space:nowrap;transition:background .2s,transform .2s}
.audit-form button:hover{background:#185fa8;transform:translateY(-1px)}
.footer-col h4{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.footer-col a{display:block;font-size:13.5px;color:var(--muted);margin-bottom:11px;transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--faint)}
/* ---------- responsive ---------- */



/* ============================================================
   Interactive effects: scroll bar, nav hover, modal, blog, mascot
   ============================================================ */
/* scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;background:transparent;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 12px rgba(0,0,0,.55)}
/* dark audit modal */
.audit-modal-box.dark{background:linear-gradient(150deg,#0c1322,#0a0f1c 60%,#101a2e);color:#fff;border:1px solid rgba(255,255,255,.08);overflow:hidden;max-width:540px;padding:42px 36px 36px}
.audit-modal-box.dark::before,.audit-modal-box.dark::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.audit-modal-box.dark::before{width:280px;height:280px;background:radial-gradient(circle,rgba(49,148,231,.5),transparent 70%);top:-120px;left:-80px}
.audit-modal-box.dark::after{width:240px;height:240px;background:radial-gradient(circle,rgba(173,20,24,.4),transparent 70%);bottom:-120px;right:-70px}
.audit-modal-box.dark>*{position:relative;z-index:1}
.audit-modal-box.dark .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff;margin-bottom:18px}
.audit-modal-box.dark h3{color:#fff;font-size:27px;margin-bottom:10px;line-height:1.15}
.audit-modal-box.dark p{color:rgba(255,255,255,.72);margin-bottom:24px}
.audit-modal-box.dark .audit-modal-x{background:rgba(255,255,255,.1);color:#fff}
.audit-modal-box.dark .audit-modal-x:hover{background:rgba(255,255,255,.22)}
.bmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bmeta time{font-size:12px;font-weight:600;color:var(--faint)}
.bpost-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
/* flying mascot */
.mascot{position:fixed;right:3%;top:36%;width:130px;z-index:50;pointer-events:none;will-change:transform;transition:transform .16s linear}
.mascot img{width:100%;display:block;filter:drop-shadow(0 0 24px rgba(49,148,231,.55))}
.mascot::after{content:"";position:absolute;left:50%;bottom:-26px;width:56px;height:90px;transform:translateX(-50%);background:radial-gradient(circle,rgba(49,148,231,.55),transparent 70%);filter:blur(10px);animation:jet 1.3s ease-in-out infinite;z-index:-1}
/* ============================================================
   Service page (AI Search Dominator)
   ============================================================ */
.svc-hero{padding:140px 0 20px;position:relative;overflow:hidden;text-align:center}
.svc-hero .container{position:relative;z-index:1}
.svc-hero h1{margin-bottom:18px}
.svc-hero .lead{max-width:660px;margin:0 auto 30px}
.svc-hero-bg{position:absolute;inset:0;z-index:0;opacity:.45;-webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 0,#000,transparent 78%);mask-image:radial-gradient(ellipse 70% 65% at 50% 0,#000,transparent 78%)}
.svc-hero-bg img{width:100%;height:100%;object-fit:cover}
.svc-card{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:start;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-xs)}
.svc-card .ptier{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.svc-card h3{font-size:24px;margin:4px 0 4px}
.svc-card .svc-sub{font-size:14px;color:var(--muted);margin-bottom:22px}
.svc-buy{display:block;text-align:center;background:var(--grad);color:#fff;font-weight:700;padding:14px;border-radius:12px;margin-bottom:16px;transition:transform .2s,box-shadow .2s}
.svc-buy:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(0,0,0,.55)}
/* FAQ accordion */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;transition:box-shadow .2s,border-color .2s}
.faq-item.open{box-shadow:var(--shadow-xs);border-color:#cfe3f9}
.faq-q{width:100%;text-align:left;background:transparent;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:16px;color:var(--ink);padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-q .chev{flex:0 0 auto;width:20px;height:20px;transition:transform .25s;color:var(--accent)}
.faq-item.open .chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a-inner{padding:0 22px 20px;font-size:14.5px;color:var(--muted);line-height:1.65}
.faq-a-inner ul{margin:10px 0 0 18px}
.faq-a-inner li{margin-bottom:6px}
/* ============================================================
   Blog (index + article)
   ============================================================ */
.container.narrow{max-width:760px}
.blog-hero{padding:148px 0 26px;text-align:center;position:relative;overflow:hidden}
.blog-hero h1{margin:16px 0 14px}
.blog-hero .lead{max-width:560px;margin:0 auto}
.bpost-body p.bx{font-size:14px;color:var(--muted);line-height:1.6;margin:0}
/* article page */
.article{padding:118px 0 0}
.article-head{text-align:center;margin-bottom:30px}
.article-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--accent);margin-bottom:18px}
.article-back:hover{gap:9px}
.article-head .btag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--grad-soft);border:1px solid #cfe3f9;padding:5px 12px;border-radius:999px}
.article-head h1{font-size:clamp(30px,5vw,46px);line-height:1.1;margin:16px 0 14px}
.article-meta{font-size:13.5px;color:var(--faint);font-weight:600}
.article-cover{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);margin:6px auto 36px;aspect-ratio:16/8;background:var(--grad)}
.article-cover img{width:100%;height:100%;object-fit:cover;display:block}
.article-body{font-size:16.5px;line-height:1.8;color:var(--text)}
.article-body h2{font-size:25px;margin:36px 0 12px;color:var(--ink);letter-spacing:-.01em}
.article-body h3{font-size:19px;margin:26px 0 8px;color:var(--ink)}
.article-body p{margin-bottom:18px}
.article-body ul,.article-body ol{margin:0 0 18px 22px;display:flex;flex-direction:column;gap:9px}
.article-body li{line-height:1.7}
.article-body strong{color:var(--ink);font-weight:700}
.article-body a{color:var(--accent);font-weight:600}
.article-body blockquote{border-left:3px solid var(--accent);background:var(--bg-2);padding:16px 20px;border-radius:0 12px 12px 0;margin:0 0 22px;color:var(--ink);font-weight:500}
.article-cta{margin:46px 0 0;background:#0a0c12;color:#fff;border-radius:var(--radius-lg);padding:40px 32px;text-align:center;position:relative;overflow:hidden}
.article-cta .cta-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.article-cta h3{color:#fff;font-size:23px;margin-bottom:10px;position:relative}
.article-cta p{color:rgba(255,255,255,.72);margin-bottom:22px;position:relative}
.article-cta .btn{position:relative}
/* ============================================================
   Referral program page
   ============================================================ */
.ref-hl{display:inline-block;font-size:15px;font-weight:700;color:var(--accent);background:var(--grad-soft);border:1px solid #cfe3f9;padding:9px 18px;border-radius:999px;margin-bottom:30px}
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tier-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:32px 26px;text-align:center;box-shadow:var(--shadow-xs);transition:transform .3s,box-shadow .3s;position:relative}
.tier-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tier-card.featured{border-color:transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:0 26px 60px -30px rgba(0,0,0,.55)}
.tier-emoji{font-size:36px;line-height:1}
.tier-name{font-size:18px;font-weight:800;color:var(--ink);margin:10px 0 2px;text-transform:uppercase;letter-spacing:.03em}
.tier-pct{font-size:44px;font-weight:900;letter-spacing:-.03em;line-height:1;margin:8px 0 4px}
.tier-sub{font-size:13px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.tier-range{font-size:14px;color:var(--muted);line-height:1.5}
.earn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.earn-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center}
.earn-num{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.earn-lbl{font-size:13px;color:var(--muted);margin-top:2px}
.earn-arrow{color:var(--accent);font-size:22px;margin:8px 0}
.earn-pct{font-size:26px;font-weight:900}
.who-box{max-width:760px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px;text-align:center;box-shadow:var(--shadow-xs)}
.who-box p{font-size:17px;color:var(--text);line-height:1.7}
/* ============================================================
   build:depth — bandas oscuras + capa de movimiento (2026-09)
   Sin librerías. Solo transform/opacity. Respeta reduced-motion.
   ============================================================ */

/* ---------- 1. banda oscura ---------- */
.band-dark{--ink:#ffffff;--text:#c3cee0;--muted:#95a3b9;--faint:#7a8799;--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.16);--shadow-xs:0 2px 12px rgba(0,0,0,.35);--shadow:0 30px 70px -35px rgba(0,0,0,.9);background:#070b16;color:var(--text);isolation:isolate;overflow:hidden;box-shadow:inset 0 1px 0 rgba(150,200,255,.30), inset 0 -1px 0 rgba(150,200,255,.16)}
.band-dark::before{content:"";position:absolute;inset:-25% -12%;z-index:-2;pointer-events:none;background:radial-gradient(38% 44% at 16% 20%, rgba(31,116,201,.60), transparent 70%),
    radial-gradient(34% 40% at 84% 16%, rgba(224,32,46,.28), transparent 72%),
    radial-gradient(48% 52% at 64% 92%, rgba(95,178,242,.34), transparent 72%);filter:blur(30px);opacity:.95;animation:bandDrift 26s ease-in-out infinite alternate;will-change:transform}
.band-dark::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:58px 58px;-webkit-mask-image:radial-gradient(ellipse 92% 72% at 50% 40%,#000 28%,transparent 78%);mask-image:radial-gradient(ellipse 92% 72% at 50% 40%,#000 28%,transparent 78%)}
/* superficies dentro de la banda */
.band-dark .card,.band-dark .step,.band-dark .stat,.band-dark .tcard{background:linear-gradient(180deg,rgba(255,255,255,.078),rgba(255,255,255,.028));border-color:rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 22px 44px -32px rgba(0,0,0,.95)}
.band-dark .card:hover,.band-dark .step:hover{border-color:rgba(126,184,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 34px 64px -30px rgba(0,0,0,1), 0 0 0 1px rgba(126,184,255,.16)}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4{color:#fff}
.band-dark .lead,.band-dark p{color:var(--muted)}
.band-dark .eyebrow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);color:#9ecbff;box-shadow:none}
.band-dark .eyebrow .num{color:rgba(255,255,255,.42)}
.band-dark .eyebrow .spark{color:#9ecbff}
.band-dark .card .ic{background:rgba(126,184,255,.14);border:1px solid rgba(126,184,255,.24);color:#9ecbff;box-shadow:0 0 26px -8px rgba(0,0,0,.55)}
.band-dark .card:hover .ic{box-shadow:0 0 34px -6px rgba(0,0,0,.55)}
.band-dark .tcard .nm{color:#fff}
.band-dark .tcard .rl{color:#8593a8}
.band-dark .stat .v{filter:brightness(1.3) saturate(1.1)}
.band-dark .btn-ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.22)}
.band-dark .btn-ghost:hover{background:rgba(255,255,255,.13);border-color:#8ec5ff;color:#fff}
.band-dark .step .snum{background:linear-gradient(140deg,#2f8ae4,#0e4a8e);box-shadow:0 0 28px -8px rgba(0,0,0,.55)}
.band-dark .step:nth-child(2) .snum{background:linear-gradient(140deg,#e0202e,#8d0f16);box-shadow:0 0 28px -8px rgba(0,0,0,.55)}
.band-dark .step-line{background:linear-gradient(90deg,rgba(150,196,255,.85),rgba(150,196,255,0))}
/* ---------- 3. foco que sigue al cursor ---------- */


/* ---------- 4. la línea entre los 3 pasos se dibuja ---------- */
.step-line{transform:scaleX(0);transform-origin:left center;transition:transform .85s cubic-bezier(.22,1,.36,1) .4s}
.step.in .step-line{transform:scaleX(1)}
/* ---------- 5. hero con más profundidad ---------- */
.hero-bg::after{content:"";position:absolute;left:50%;top:-45%;width:90vmax;height:90vmax;transform:translateX(-50%);transform-origin:50% 50%;background:conic-gradient(from 0deg at 50% 50%,rgba(31,116,201,.13),rgba(224,32,46,.07),rgba(95,178,242,.13),rgba(31,116,201,.13));filter:blur(56px);opacity:.6;animation:heroSpin 52s linear infinite;will-change:transform}
.hero-grid-overlay{transform:translate3d(0,calc(var(--sy,0) * .10px),0)}
.hero .blob{will-change:transform}
.stat{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.stat:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-2)}
.hero-media{will-change:transform;transition:box-shadow .6s ease}
/* ---------- 2. ken burns lento en la imagen de servicio ---------- */
.service-hero-media{overflow:hidden}
.service-hero-media img{transform-origin:58% 42%;will-change:transform}
.marquee:hover .partner-logo{opacity:.75}
.crs.dark{border-color:rgba(160,205,255,.75);background:rgba(160,205,255,.10)}
.crs.dark.lg{background:rgba(160,205,255,.18);border-color:rgba(190,222,255,.95)}
/* ---------- 7. los chips de IA giran como marquee ---------- */
.hero-ai-list.ai-marquee{display:flex;flex-wrap:nowrap;overflow:hidden;max-width:720px;margin:6px auto 34px;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}

@media (prefers-reduced-motion:reduce){
  .btn-shine,.btn-shine::before{animation:none}
}

@media (max-width:620px){
  .hero-media.is-playing .hero-play{opacity:.6}
}

@media (max-width:980px){
  .tmarquee .tcol:nth-child(3){display:none}
}

@media (max-width:620px){
  .tmarquee .tcol:nth-child(2){display:none}
}

@media (max-width:980px){
  .plan-grid{grid-template-columns:1fr;gap:26px;max-width:520px;margin-inline:auto}
  .plan-head .svc-sub{min-height:0}
}

@media (max-width:560px){
  .plan-head,.plan-body{padding-left:20px;padding-right:20px}
  .bill-toggle.bill-global{display:flex;width:100%;max-width:100%;margin-top:24px}
  .bill-toggle.bill-global button{flex:1 1 0;padding:10px 4px;font-size:12.5px}
  .bill-toggle.bill-global .save{display:block;margin:3px auto 0;width:fit-content}
}

@media (prefers-reduced-motion:reduce){
  .blob,.marquee-track,.tcol,.cta-blob{animation:none}
}

@media (max-width:980px){
  .bento .feature{grid-column:span 6}
  .bento .feature.third{grid-column:span 6}
  .service-hero{grid-template-columns:1fr;gap:28px}
  .step-line{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
}

@media (max-width:720px){
  .nav-right .btn-grad{font-size:12px;padding:8px 12px}
  .bento .feature,.bento .feature.wide,.bento .feature.third{grid-column:span 12}
  .blog-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-dd{width:100%}
  .nav-dd-trigger{justify-content:center;width:100%}
  .nav-dd-pop{display:none}
  .nav-dd-trigger .ddchev{display:none}
}

@media (max-width:1100px){
  .mascot{width:104px}
}

@media (max-width:900px){
  .mascot{display:none}
}

@media (prefers-reduced-motion:reduce){
  .mascot{display:none}
}

@media(max-width:860px){
  .svc-card{grid-template-columns:1fr;gap:26px;padding:26px}
}

@media(max-width:760px){
  .tier-grid,.earn-grid{grid-template-columns:1fr}
}

@media (hover:hover) and (pointer:fine){
  .spot::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s ease;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(31,116,201,.13), transparent 62%)}
  .spot:hover::before{opacity:1}
  .band-dark .spot::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(150,200,255,.20), transparent 60%)}
  .spot > *{position:relative;z-index:1}
}

@media (max-width:899px){
  .hero-bg::after{display:none}
}

@media (hover:hover) and (pointer:fine){
  .magnetic{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
  .magnetic:hover{transform:translate3d(var(--tx,0),calc(var(--ty,0) - 2px),0)}
}

@media (prefers-reduced-motion:reduce){
  .band-dark::before,.hero-bg::after{animation:none}
  .step-line{transform:none;transition:none}
  .hero-grid-overlay{transform:none}
  .spot::before{display:none}
  .magnetic:hover{transform:none}
}

@media (prefers-reduced-motion:no-preference){
  .hero-media.in{animation:mediaFloat 7.5s ease-in-out infinite alternate}
}

@media (prefers-reduced-motion:no-preference){
  .service-hero-media img{animation:kenburns 26s ease-in-out infinite alternate}
}

@media (prefers-reduced-motion:reduce){
  .hero-media.in{animation:none}
  .service-hero-media img{animation:none;transform:none}
}

@media (max-width:600px){
  .hero-ai-list.ai-marquee{max-width:100%;margin-bottom:28px}
}

@media (prefers-reduced-motion:reduce){
  .hero-ai-list.ai-marquee{justify-content:center}
}
/* ==== END legacy-dark ==== */