@font-face{font-family:'Manrope';src:url('/qiu/fonts/manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}@font-face{font-family:'Orbitron';src:url('/qiu/fonts/orbitron.woff2') format('woff2');font-weight:400 900;font-display:swap}

/* ============================================================
   QIU · Direction 1 - "SIGNAL"
   discipline, dialled modern. Night canvas, one blue
   accent, Orbitron only as a label voice, engineered grid.
   ============================================================ */
:root{
  --blue:#2F82FF; --blue-h:#1A6CEB; --blue-soft:#8FBBFF; --halo:#2F82FF;
  --blue-brand:#1F63E0;     /* the brand blue, for light surfaces */
  --on-blue:#06101F;        /* text that sits ON the blue: dark on the bright one */
  --night:#060B14; --night-2:#111E33; --night-3:#1B2C49;
  --ink:#0B1220; --paper:#ffffff; --grey:#EDEFF2;
  --line-n:rgba(255,255,255,.18); --line:#E2E6EC;
  --dim:#93A2BC; --soft:#5E6673;
  --acc:#5BFFA8;            /* the accent: whatever costs YOU time, and the highlights */
  --alert:#FF4D5E;          /* only for something genuinely late or wrong */
  --mint:#8BE8C4;
  --w:1180px; --pad:clamp(20px,4vw,52px);
  --r:18px; --r-lg:26px;
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --label:'Orbitron',var(--font);
}
*{box-sizing:border-box}
html.smooth{scroll-behavior:smooth}html{scroll-padding-top:64px}
body{margin:0;font-family:var(--font);background:var(--night);color:#fff;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.06;font-weight:600}
p{margin:0;line-height:1.55}
.wrap{width:min(100% - var(--pad)*2,var(--w));margin-inline:auto}
.lbl{font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--halo)}   

/* ---------- the light that follows the pointer, as on the old site ---------- */
@media (hover:hover) and (pointer:fine){
  .lit{position:relative}
  .lit::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    opacity:0;transition:opacity .3s;z-index:0;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
      color-mix(in srgb,var(--halo) 17%,transparent),transparent 62%)}
  .lit:hover::after{opacity:1}
  .lit>*{position:relative;z-index:1}
  .tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .25s ease-out,border-color .25s}
}
@media(prefers-reduced-motion:reduce){.lit::after{display:none}.tilt{transform:none}}

/* ---------- scroll reveal (degrades to visible with no JS) ---------- */
.rev{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.rev.on{opacity:1;transform:none}
html.nojs .rev{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto;z-index:60;backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--night) 94%,transparent);border-bottom:1px solid var(--line-n)}
header .wrap{display:flex;align-items:center;gap:28px;height:62px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.02em}
.logo .qi{width:26px;height:26px;display:block;flex:none}
.logo .qw{height:15px;width:56px;display:block;flex:none;color:#FCFCFC}
.logo i{width:19px;height:19px;border-radius:50% 50% 50% 4px;
  background:radial-gradient(circle at 32% 30%,#fff,#cdd6ef 60%,#8ea4e8);display:block}
nav.main{display:flex;gap:26px;margin-left:auto;font-size:14.5px;color:#CACCD0;font-weight:500}
nav.main a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 20px;border-radius:999px;font-weight:700;font-size:14.5px;
  border:0;cursor:pointer;font-family:inherit;transition:background .18s,transform .18s,border-color .18s}
.btn-p{background:var(--blue);color:#fff}   
.btn .ico{width:20px;height:20px;flex:none;display:block}
.btn-p .ico{transition:transform .18s}
.btn-p:hover .ico{transform:translateX(3px)}
.btn-xl .ico{width:22px;height:22px}
.btn-p:hover{background:var(--blue-h)}
.btn-g{background:transparent;color:#fff;border:1px solid var(--line-n)}
.btn-g:hover{border-color:#fff6}
.btn:active{transform:translateY(1px)}
.btn-xl{min-height:58px;padding:0 30px;font-size:17px;letter-spacing:-.01em}
.btn-p.glow{box-shadow:0 10px 30px rgba(47,130,255,.42);animation:halo 3.4s ease-in-out infinite}
@keyframes halo{
  0%,100%{box-shadow:0 10px 30px rgba(47,130,255,.42),0 0 0 0 rgba(47,130,255,.45)}
  55%{box-shadow:0 14px 40px rgba(47,130,255,.62),0 0 0 14px rgba(47,130,255,0)}}
.btn-g.glow{animation:halo-g 3.4s ease-in-out infinite}
@keyframes halo-g{0%,100%{box-shadow:0 0 0 0 rgba(47,130,255,.38)}55%{box-shadow:0 0 22px 2px rgba(47,130,255,.30),0 0 0 12px rgba(47,130,255,0)}}
.btn-g .ico{transition:transform .18s}.btn-g:hover .ico{transform:translateX(2px) rotate(-8deg)}
@media(prefers-reduced-motion:reduce){.btn-p.glow,.btn-g.glow{animation:none}}
.pale .btn-g{color:var(--ink);border-color:var(--line)}

.btn-w{background:#fff;color:var(--night);border:1px solid var(--line);box-shadow:0 1px 2px rgba(6,11,20,.06),0 6px 18px rgba(6,11,20,.06)}
.btn-w:hover{border-color:#9AA3B2}
.btn-w .ico{transition:transform .18s}.btn-w:hover .ico{transform:translateX(3px)}
.pale .btn-g:hover{border-color:#9AA3B2}
@media(max-width:860px){nav.main{display:none}header .wrap>.btn{margin-left:auto}}

/* ---------- hero ---------- */
.hero{position:relative;padding:86px 0 44px;overflow:visible}
.hero::before{content:"";position:absolute;inset:0 0 -260px;pointer-events:none;z-index:-1;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
  background:radial-gradient(640px circle at 86% 74%,rgba(47,130,255,.13),transparent 70%)}

.hlite{position:absolute;inset:0 0 -260px;pointer-events:none;z-index:-1;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 240px,#000 70%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 240px,#000 70%,transparent 100%)}
.hlite i{position:absolute;left:0;top:0;display:block;border-radius:50%;will-change:transform}
.hlite .l1{width:820px;height:820px;margin:-410px 0 0 -410px;
  background:radial-gradient(closest-side,rgba(0,65,245,.50),rgba(0,65,245,.24) 42%,rgba(0,52,200,.08) 72%,transparent)}
.hlite .l2{width:380px;height:380px;margin:-190px 0 0 -190px;
  background:radial-gradient(closest-side,rgba(20,96,255,.48),rgba(8,78,253,.16) 58%,transparent)}
@media(max-width:820px){.hlite .l1{width:560px;height:560px;margin:-280px 0 0 -280px}
  .hlite .l2{width:280px;height:280px;margin:-140px 0 0 -140px}}
html.nojs .hlite{display:none}
.grid-bg{position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:linear-gradient(var(--line-n) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-n) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(760px 520px at 50% 34%,#000 10%,transparent 76%)}
/* squares that light up near the pointer, pulses along the lines on phones */
/* JS sizes it to the hero (phones: only the top, where the pulses run) and keeps the mask centre in px */
.grid-fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:block;
  -webkit-mask-image:radial-gradient(820px 560px at 50% 34%,#000 12%,transparent 78%);
  mask-image:radial-gradient(820px 560px at 50% 34%,#000 12%,transparent 78%)}
@media(prefers-reduced-motion:reduce){.grid-fx{display:none}}
.hero .wrap{position:relative}
.hero h1{font-size:clamp(36px,6.6vw,76px);text-align:center;max-width:24ch;margin-inline:auto}
.hero h1 .dim{color:#9FB0C9}
.m-br{display:none}

.hl{background:linear-gradient(90deg,var(--acc),#5CC8FF);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.08em}
.pale:not(.on-night) .hl{background-image:linear-gradient(90deg,#0047FF,#0096D6)}
@media(max-width:600px){.m-br{display:inline}}
.hero h1 .rot>span{color:var(--acc)}
.hero .sub{text-align:center;max-width:62ch;margin:14px auto 0;color:#D6DEEC;font-size:clamp(15px,1.5vw,17px)}
@media(min-width:601px){.hero h1,.hero .sub{position:relative;top:max(-24px,min(0px,calc((786px - 100vh) / 2)))}.hero .sub{font-size:clamp(17px,1.45vw,21px);margin-top:18px}}

/* the stage: character in the middle, prompts around it */
.stage{position:relative;margin:18px auto 0;max-width:900px;
  min-height:clamp(296px,30vw,344px);display:grid;place-items:center}
.stage .mascot-slot{width:clamp(214px,26vw,296px);position:relative;z-index:3}
.ring{position:absolute;inset:0;pointer-events:none}
.ring circle{fill:none;stroke:rgba(255,255,255,.085);stroke-width:.18;vector-effect:non-scaling-stroke}
.ring .spin circle{stroke:rgba(30,123,255,.30);stroke-width:.4;stroke-dasharray:1.2 5.5;stroke-linecap:round}
.ring .spin{transform-origin:50% 50%;animation:spin 70s linear infinite}
.hero .ring circle{transition:stroke .4s}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ring .spin{animation:none}}

.chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:11px 17px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;color:#E3E4E6;
  background:color-mix(in srgb,var(--night-3) 86%,transparent);
  border:1px solid var(--line-n);backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:border-color .2s,color .2s,transform .2s,background .2s;
  animation:bob var(--bt,7s) ease-in-out var(--bd,0s) infinite}
.chip:hover,.chip:focus-visible{color:#fff;border-color:color-mix(in srgb,var(--halo) 60%,transparent);
  background:color-mix(in srgb,var(--blue) 16%,var(--night-3));transform:translateY(-2px)}
.chip:focus-visible{outline:2px solid var(--halo);outline-offset:3px}
.chip[aria-pressed=true]{color:#fff;border-color:var(--blue);background:color-mix(in srgb,var(--blue) 26%,var(--night-3))}
.chip{overflow:hidden}

.chip i{order:2;width:15px;height:15px;margin-left:auto;flex:none;background:var(--blue-soft);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s,background .2s}
.chip:hover i,.chip:focus-visible i,.chip[aria-pressed=true] i{background:#fff;transform:translate(2px,-2px)}
.chip::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--halo) 34%,transparent) 50%,transparent 70%);
  transform:translateX(-110%)}
.chip.shine::before{animation:chipShine 1.1s ease-in-out}
.chip.shine{border-color:color-mix(in srgb,var(--halo) 45%,transparent)}
@keyframes chipShine{to{transform:translateX(110%)}}
@media(prefers-reduced-motion:reduce){.chip.shine::before{animation:none}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(prefers-reduced-motion:reduce){.chip{animation:none}}

/* chip placement: a real ring on desktop, a tidy stack on phones */
.c1{left:9%;top:4%}    .c2{right:6%;top:1%}
.c3{left:1%;top:44%}   .c4{right:-1%;top:40%}
.c5{left:13%;bottom:4%} .c6{right:11%;bottom:1%}
.c1{--bd:.0s} .c2{--bd:.9s;--bt:8s} .c3{--bd:1.7s;--bt:6.4s}
.c4{--bd:.5s;--bt:7.6s} .c5{--bd:2.3s} .c6{--bd:1.2s;--bt:8.4s}

/* answer bubble */
.say{width:min(100%,620px);margin:18px auto 0;padding:15px 18px;border-radius:var(--r);
  background:color-mix(in srgb,var(--night-3) 94%,transparent);
  border:1px solid var(--line-n);backdrop-filter:blur(12px);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  font-size:15px;line-height:1.5;color:#EAEBEC;
  opacity:0;transform:translateY(10px) scale(.98);pointer-events:none;
  transition:opacity .3s,transform .3s}
.say.on{opacity:1;transform:none}
.say-wrap{min-height:92px;display:grid;align-items:start}
@media(max-width:820px){.say-wrap{min-height:0}}
.say b{color:var(--blue-soft);font-weight:700}
.say .who{font-family:var(--label);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);display:block;margin-bottom:5px}

.say{display:flex;align-items:flex-end;gap:12px;padding:0;background:none;border:0;
  backdrop-filter:none;box-shadow:none;width:min(100%,560px)}
.say .av{flex:none;width:38px;height:38px;border-radius:50%;
  box-shadow:0 0 0 2px #0B0C13,0 0 0 3.5px #2E6BFF,0 0 18px rgba(46,107,255,.45)}
.say .av{overflow:hidden;background:#050F35}
.say .av{display:grid;place-items:center}
.say .av .qa{width:66%;height:66%;display:block}

.say .av .qm{width:100%;height:100%;display:block;overflow:visible;transform:translateY(2%) scale(1.25)}
.say .msg{flex:1;min-width:0;background:#161C2A;border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:9px 14px 9px;box-shadow:0 16px 40px rgba(0,0,0,.45);
  font-size:15.5px;line-height:1.45;color:#F0F3F8;text-align:left;position:relative}
/* the time sits on the last line, like a real messenger: a spacer keeps room for it */
.say-tx>span::after{content:"\00a0";display:inline;padding-right:38px}
.say .msg b{color:#fff;font-weight:700}
.say .who{display:none}
.say .time{position:absolute;right:13px;bottom:8px;font-size:11.5px;line-height:1;color:#7D879A;
  font-variant-numeric:tabular-nums}
.cursor{display:inline-block;width:7px;height:1.05em;vertical-align:-2px;margin-left:2px;
  background:var(--blue-soft);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.say{transform:none;transition:opacity .3s}
.say.on{transform:none}
.say .msg{transform:scale(.97);transform-origin:0 100%;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.say.on .msg{transform:none}
.say-tx{display:grid}
.say-tx>span{grid-area:1/1;min-width:0}
.say-ghost{visibility:hidden}
.say .cursor{margin-right:-9px}   /* takes no room, so the typed lines break like the full text */
/* the avatar is alive: the eye breathes when idle, reads and the mark nods gently while typing */
.say .qa{overflow:visible}
.say .qa-b,.say .qa-eye{transform-box:fill-box;transform-origin:50% 50%}
@media(prefers-reduced-motion:no-preference){
  .say .qa-eye{animation:qaIdle 4.2s cubic-bezier(.45,0,.55,1) infinite}
  .say.typing .qa-eye{animation:qaRead 1.2s cubic-bezier(.45,0,.55,1) infinite}
  .say.typing .qa-b{animation:qaNod 1.2s cubic-bezier(.45,0,.55,1) infinite}
  .say.typing .av{animation:qaGlow 1.2s cubic-bezier(.45,0,.55,1) infinite}
}
@keyframes qaIdle{0%,100%{transform:none}50%{transform:scale(1.05,1.12)}}
@keyframes qaRead{0%,100%{transform:translate(-4%,1%)}50%{transform:translate(5%,-3%) scale(1.03,.9)}}
@keyframes qaNod{0%,100%{transform:none}50%{transform:translateY(-5%)}}
@keyframes qaGlow{0%,100%{box-shadow:0 0 0 2px #0B0C13,0 0 0 3.5px #2E6BFF,0 0 18px rgba(46,107,255,.45)}
  50%{box-shadow:0 0 0 2px #0B0C13,0 0 0 3.5px #4F86FF,0 0 24px rgba(46,107,255,.7)}}

.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.hero .hero-cta{margin-top:30px}   

@media (hover:hover) and (pointer:fine){.hero .hero-cta{margin-top:14px}.hero .hero-note{margin-top:34px}}
.hero-note{text-align:center;color:var(--dim);font-size:13.5px;margin-top:14px}

@media(max-width:820px){
  .stage{min-height:0;display:block;max-width:460px}
  .stage .mascot-slot{width:min(68vw,252px);margin:0 auto}
  .ring{display:none}
  .chip{position:relative;inset:auto;width:100%;justify-content:flex-start;text-align:left;margin-bottom:9px;animation:none}
  .chips-m{margin-top:22px}
  .say{width:100%;margin-top:14px;display:none}
  .say.on{display:flex}
  .hero .hero-cta{margin-top:34px}
  .grid-bg{background-size:40px 40px}   
  .hero-note{display:none}
}
@media(min-width:821px){.chips-m{display:contents}}

/* ---------- section frame ---------- */
section{position:relative;padding:clamp(66px,9vw,112px) 0}
.sec-head{max-width:62ch}
.sec-head h2{font-size:clamp(26px,3.8vw,42px);margin-top:12px}
.sec-head p{margin-top:14px;color:#CBD6E6;font-size:clamp(15.5px,1.5vw,17.5px)}
.pale{background:var(--paper);color:var(--ink);--blue:var(--blue-brand);--blue-soft:#1A4FD0;
  --blue-h:#1A4FD0;--on-blue:#fff}
.pale .sec-head p{color:var(--soft)}
.pale .lbl{color:var(--blue)}

/* ---------- conversation rows ---------- */
.split{display:grid;gap:40px;align-items:start}
@media(min-width:900px){
  .split{grid-template-columns:minmax(0,34fr) minmax(0,66fr);gap:56px}
  .split .sec-head{position:sticky;top:96px}
}
.talk{display:grid;gap:14px}
.talk>*{min-width:0}   /* the chat shrinks with the column on the narrowest phones */
@media(max-width:899px){.talk{margin-top:4px}}

.ac{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,248,255,.94));border:1px solid rgba(20,50,110,.09);border-radius:28px;overflow:hidden;
  box-shadow:0 30px 70px rgba(30,70,160,.13),0 2px 8px rgba(20,40,90,.05),inset 0 1px 0 #fff;color:var(--ink);max-width:520px;width:100%;margin-inline:auto}
.ac-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(11,18,32,.07)}
.ac-head b{display:block;font-size:16px}
.ac-head .ac-qw{display:block;height:12.5px;width:47px;color:var(--ink);margin:2px 0 5px}   
.ac-head small{display:flex;align-items:center;gap:5px;font-size:12.5px;color:#1FA463}
.ac-head small::before{content:"";width:7px;height:7px;border-radius:50%;background:#28C46F;box-shadow:0 0 0 2px rgba(40,196,111,.18)}
.ac-dots{margin-left:auto;display:flex;gap:5px}
.ac-dots i{width:7px;height:7px;border-radius:50%;background:#D5DCE8}
.ac-av{flex:none;width:34px;height:34px;border-radius:50%;background:#050F35;display:grid;place-items:center;
  box-shadow:0 0 0 2px #0B0C13,0 0 0 3.5px #2A5BD7}
.ac .ac-av{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #2A5BD7,0 6px 14px rgba(42,91,215,.28)}
.ac-av svg{width:66%;height:66%;display:block}
.ac-head .ac-av{width:38px;height:38px}
.ac-body{display:flex;flex-direction:column;gap:10px;padding:18px 14px 16px;
  max-height:560px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#CBD4E3 transparent}

.ac .m{display:flex;align-items:flex-end;gap:8px;max-width:88%;flex:none;min-width:0}
.ac .m p{position:relative;margin:0;padding:7px 12px 7px 13px;border-radius:18px;font-size:16px;line-height:1.38;min-width:0;overflow-wrap:anywhere;text-wrap:pretty}
/* the room for the time is glued to the last word with a no-break space, so when it does not fit
   the last word moves down with it and the time never sits alone on an empty row */
.ac .m p::after{content:"\00a0";display:inline;padding-right:34px}
.ac .m time{position:absolute;right:11px;bottom:7px;font-size:11px;line-height:1;font-variant-numeric:tabular-nums}
.ac .m .ac-av{width:30px;height:30px}
.ac .me{align-self:flex-end}
.ac .me p{background:linear-gradient(180deg,#3468E3,#2A5BD7);color:#fff;border-bottom-right-radius:6px;
  box-shadow:0 8px 22px rgba(42,91,215,.32),inset 0 1px 0 rgba(255,255,255,.18)}
.ac .me time{color:rgba(255,255,255,.72)}
.ac .q{align-self:flex-start}
.ac .q p{background:#E6ECF5;color:#1A2333;border:1px solid rgba(42,91,215,.07);border-bottom-left-radius:6px;
  box-shadow:0 4px 14px rgba(30,60,120,.06)}
.ac .q p b{color:var(--ink)}
.ac .q p a{color:#1A4FD0;text-decoration:underline;text-underline-offset:2px}
.ac .q time{color:#7D879A}
.ac .typing p{display:flex;gap:4px;align-items:center;padding:13px 14px}
.ac .typing p::after{display:none}
.ac .typing i{width:7px;height:7px;border-radius:50%;background:#8E99AD;animation:tdot 1s ease-in-out infinite}
.ac .typing i:nth-child(2){animation-delay:.15s}.ac .typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,80%,100%{opacity:.35;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.ac .m.new{animation:mIn .28s ease-out}
@keyframes mIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ac .typing i,.ac .m.new{animation:none}}
/* a real input: visitors can ask their own question */
.ac-foot{display:flex;align-items:center;gap:8px;margin:0 14px 12px;padding:0 3px;min-height:50px;
  border-radius:999px;background:#fff;border:1px solid rgba(11,18,32,.09);box-shadow:0 6px 18px rgba(30,60,120,.07);transition:border-color .2s}
.ac-foot:focus-within{border-color:rgba(42,91,215,.55)}
.ac-plus{flex:none;width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:#EDF2FA;color:#2A5BD7;transition:background .2s}
.ac-plus:hover{background:#E1E9F7}
.ac-plus svg{width:18px;height:18px}
.ac-foot input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:inherit;font-size:16px;height:46px;padding-left:4px}
.ac-foot input::placeholder{color:#8A93A6}
.ac-foot button[type=submit]{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;
  background:#2A5BD7;color:#fff;cursor:pointer;box-shadow:0 6px 16px rgba(42,91,215,.35);transition:opacity .2s,transform .15s}
.ac-foot button[type=submit]:disabled{opacity:.78;cursor:default;box-shadow:0 4px 12px rgba(42,91,215,.22)}
.ac-foot button[type=submit]:not(:disabled):active{transform:scale(.94)}
.ac-foot button[type=submit] svg{width:19px;height:19px}
/* the suggestions are buttons now: a tap asks the question */
.ac-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 14px 16px}
.ac-chips button{border:1px solid rgba(11,18,32,.08);background:rgba(255,255,255,.8);color:#4A5468;font:inherit;font-size:12.5px;
  padding:6px 12px;border-radius:999px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.ac-chips button:hover{border-color:rgba(42,91,215,.4);color:#1A4FD0;background:#fff}
.ac-chips button:disabled{opacity:.5;cursor:default}
@media(pointer:coarse){.ac-chips button{min-height:38px;padding:8px 14px}}
.work-col{display:grid;gap:22px;min-width:0}
.work-cta{display:flex;justify-content:center}

.work-cta-d{display:none;margin-top:28px}
@media(min-width:900px){.work-cta-d{display:flex}.work-col .work-cta{display:none}
  
  #work .split{align-items:stretch}
  #work .split>.sec-head{position:static;display:flex;flex-direction:column;align-items:flex-start}
  #work .work-cta-d{margin-top:auto;padding-top:28px}
  #work .work-col{align-self:start}}
@media(max-width:600px){.ac .m{max-width:92%}.ac .m p{font-size:17px}.ac-body{max-height:520px}}
.row{display:grid;gap:10px;padding:20px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--grey)}
.ask,.ans{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5}
.ask{font-weight:700}
.ans{color:var(--soft)}
.ask em,.ans em{font-style:normal;font-family:var(--label);font-size:10.5px;letter-spacing:.12em;
  font-weight:700;text-transform:uppercase;padding-top:4px;flex:none;width:38px;color:var(--soft)}
.ask em{color:var(--blue)}

/* ---------- numbered essentials ---------- */
.four{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  margin-top:44px;background:var(--line-n);border:1px solid var(--line-n);border-radius:var(--r-lg);overflow:hidden}
.four div{background:var(--night);padding:26px 24px 30px}
.four b{font-family:var(--label);font-size:30px;font-weight:700;color:var(--blue-soft);
  display:block;margin-bottom:12px;line-height:1}
.four p{color:#CBD6E6;font-size:15.5px}

/* ---------- showcases ---------- */
.shows{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:40px}
@media(min-width:720px){.shows{grid-template-columns:1fr 1fr}}
.card{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;padding:24px;overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s}
.card:hover{border-color:#CFD1D5;transform:translateY(-3px);box-shadow:0 20px 44px rgba(10,10,12,.09)}
.card h3{font-size:19px;margin-bottom:8px}
.card>p{color:var(--soft);font-size:15px}
.card .tag{font-family:var(--label);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--blue);display:block;margin-bottom:14px}
.viz{margin-top:18px;height:148px;border-radius:14px;background:var(--grey);
  border:1px solid var(--line);position:relative;overflow:hidden}

/* viz A: email turning into a quote */
.pap{position:absolute;left:16px;top:18px;width:86px;height:112px;background:#fff;
  border:1px solid var(--line);border-radius:7px;padding:9px}
.pap span{display:block;height:4px;border-radius:2px;background:#E2E3E5;margin-bottom:6px}
.pap span:nth-child(2){width:72%} .pap span:nth-child(4){width:54%}
.pap.two{left:auto;right:16px;border-color:var(--blue-soft);box-shadow:0 10px 26px rgba(46,107,230,.16)}
.pap.two span{background:#cddaff}
.pap.two span:first-child{background:var(--blue);width:44%}
.arrw{position:absolute;left:50%;top:50%;translate:-50% -50%;color:var(--blue-h);font-size:20px;font-weight:700}
.card:hover .pap.two{animation:pop .5s cubic-bezier(.22,1,.36,1)}
@keyframes pop{0%{transform:scale(.9) rotate(-3deg)}100%{transform:none}}

/* viz B: a quiet follow-up queue */
.que{position:absolute;inset:14px;display:grid;gap:7px;align-content:start}
.que i{height:22px;border-radius:6px;background:#EBECED;display:block;
  position:relative;overflow:hidden}
.que i::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--blue),var(--blue-soft));transform:scaleX(0);transform-origin:left center;
  transition:transform .6s ease var(--qd,0s)}
.card:hover .que i::after{transform:scaleX(var(--qw,.4))}
.que i:nth-child(1){--qw:.92;--qd:0s} .que i:nth-child(2){--qw:.64;--qd:.1s}
.que i:nth-child(3){--qw:.78;--qd:.2s} .que i:nth-child(4){--qw:.33;--qd:.3s}
.que b{position:absolute;right:12px;bottom:10px;font-size:12px;font-weight:700;color:var(--blue)}

/* viz C: monday digest */
.dig{position:absolute;inset:14px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.dig div{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--soft)}
.dig s{width:16px;height:16px;border-radius:5px;background:var(--blue);flex:none;
  display:grid;place-items:center;color:#fff;font-size:9px;text-decoration:none;font-weight:800}
.dig div:nth-child(2) s{background:#111} .dig div:nth-child(3) s{background:var(--blue-soft)}

/* viz D: a landing page that goes live */
.site{position:absolute;inset:14px;border-radius:10px;background:#fff;
  border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.site-bar{height:23px;display:flex;align-items:center;gap:4px;padding:0 9px;
  background:#F3F4F6;border-bottom:1px solid var(--line);flex:none}
.site-bar i{width:6px;height:6px;border-radius:50%;background:#D5D7DC;display:block}
.site-bar u{margin-left:7px;text-decoration:none;font-family:var(--label);
  font-size:8.5px;letter-spacing:.07em;color:var(--soft)}
.site-b{flex:1;padding:11px 12px 13px;display:flex;flex-direction:column;gap:6px}
.site-b span{display:block;border-radius:3px;background:#E3E4E6}
.site-b .t{height:9px;width:74%;border-radius:4px;background:var(--blue);
  transform:scaleX(.8108);transform-origin:left center;   /* 60% of the line, grows to 74% */
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.site-b .s{height:5px;width:88%}
.site-b .s.two{width:56%}
.site-b .cta{margin-top:auto;height:15px;width:74px;border-radius:8px;background:var(--blue-soft)}
.card:hover .site-b .t{transform:scaleX(1)}
.live{position:absolute;right:11px;bottom:10px;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;color:var(--blue)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#12A06F;
  box-shadow:0 0 0 0 rgba(18,160,111,.5);animation:ping 2.4s ease-out infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(18,160,111,0)}100%{box-shadow:0 0 0 0 rgba(18,160,111,0)}}
@media(prefers-reduced-motion:reduce){.live::before{animation:none}}


.more-wrap{margin-top:34px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
@media(max-width:600px){.more-wrap .btn{width:100%;justify-content:center}}


#uses .sec-head p{margin-top:10px}
#uses .shows{margin-top:28px;gap:14px}
@media(min-width:1040px){#uses .shows{grid-template-columns:repeat(4,minmax(0,1fr))}}
#uses .card{padding:18px;display:flex;flex-direction:column;min-width:0}
#uses .card .tag{margin-bottom:9px}
#uses .card h3{font-size:17px;line-height:1.2;margin-bottom:6px}
#uses .card>p{font-size:14px;line-height:1.5;margin-bottom:14px}
#uses .viz{margin-top:auto;height:104px}
#uses .pap{left:14px;top:11px;width:64px;height:80px;padding:9px 8px}
#uses .pap.two{left:auto;right:14px}
#uses .que{inset:11px;gap:6px}
#uses .que i{height:14px}
#uses .que b{bottom:8px}
#uses .dig{inset:10px;gap:6px}
#uses .dig div{font-size:12px}
#uses .site{inset:10px}
#uses .site-bar{height:20px}
#uses .site-b{padding:8px 10px 10px;gap:5px}
#uses .more-wrap{margin-top:26px}
@media(max-width:719px){
  #uses .shows{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 8px;scroll-padding-inline:var(--pad);
    scrollbar-width:none}
  #uses .shows::-webkit-scrollbar{display:none}
  #uses .card{flex:0 0 82%;scroll-snap-align:start}
  #uses .shows .rev{opacity:1;transform:none}
  #uses .card:hover{transform:none}
  #uses .card h3{font-size:20px}
  #uses .card>p{font-size:16px}
}


.gs{background:var(--night-2);border-top:1px solid var(--line-n)}

#get-started{background:linear-gradient(180deg,var(--night-2) 0,var(--night-2) calc(100% - 200px),var(--night) 100%)}
.steps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px;counter-reset:none}
@media(min-width:620px){.steps{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{background:var(--night-3);border:1px solid var(--line-n);border-radius:var(--r);
  padding:18px 18px 20px;min-width:0}
.step .n{font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.2em;
  color:var(--acc);display:block;margin-bottom:10px}
.step h3{font-size:18px;line-height:1.22}
.step p{margin-top:6px;color:#CBD6E6;font-size:14.5px;line-height:1.5}

.step{position:relative;isolation:isolate;overflow:hidden}
.step>*{position:relative;z-index:1}
.step>.step-px{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;display:block}
.step.rev{transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),
  translate .45s cubic-bezier(.2,.8,.2,1),border-color .45s,box-shadow .45s}
.step.is-on{translate:0 -8px;border-color:color-mix(in srgb,var(--halo) 55%,transparent);
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 34px color-mix(in srgb,var(--halo) 28%,transparent)}
.step.is-on p{color:#F2F6FF}
.step.is-on .n,.step.is-on h3,.step.is-on p{text-shadow:0 1px 10px rgba(6,11,20,.55)}
.step p{transition:color .45s}
@media(prefers-reduced-motion:reduce){.step.rev{translate:none!important}}
.gs-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
@media(max-width:619px){
  .step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;padding:15px 16px}
  .step .n{grid-row:span 2;margin:3px 0 0;font-size:12px;width:26px}
  .step h3{font-size:19px}
  .step p{font-size:16px}
}
@media(max-width:600px){
  .gs-cta{flex-wrap:nowrap;gap:10px}
  .gs-cta .btn-xl{flex:1 1 0;min-width:0;padding:0 12px;font-size:15.5px;min-height:54px;gap:7px}
  .gs-cta .btn-xl .ico{width:19px;height:19px}
}
@media(max-width:379px){
  .gs-cta{flex-wrap:wrap}
  .gs-cta .btn-xl{flex:1 1 100%}
}

/* ---------- connectors ---------- */
.conn{position:relative;margin-top:46px;border:1px solid var(--line-n);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--night-2),var(--night));padding:clamp(24px,4vw,44px);overflow:hidden}
.conn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px}
.app{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px;
  border-radius:16px;border:1px solid var(--line-n);background:rgba(255,255,255,.025);
  cursor:pointer;transition:border-color .22s,background .22s,transform .22s}
.app:hover{border-color:color-mix(in srgb,var(--halo) 55%,transparent);
  background:rgba(30,123,255,.09);transform:translateY(-3px)}
.app svg{width:26px;height:26px;display:block}
.app span{font-size:13px;font-weight:600;color:#DCE4F0}
.app .dot{width:7px;height:7px;border-radius:50%;background:#223552;transition:background .22s,box-shadow .22s}
.app.on .dot{background:#35d07f;box-shadow:0 0 0 4px rgba(53,208,127,.16)}
.app.on{border-color:rgba(53,208,127,.4);background:rgba(53,208,127,.07)}
.conn-status{margin-top:16px;display:flex;align-items:center;gap:10px;font-size:14.5px;color:#CBD6E6}
.conn-status b{color:#fff}

.conn-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px;margin-top:12px;align-items:stretch}
@media(max-width:700px){.conn-row{grid-template-columns:minmax(0,1fr)}}
.app-more{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 16px;cursor:default;
  border:1px solid var(--line-n);border-radius:var(--r);background:rgba(255,255,255,.025);
  transition:border-color .25s,box-shadow .25s,background .25s}
.app-more:hover{border-color:color-mix(in srgb,var(--acc) 40%,transparent);background:rgba(91,255,168,.035);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 10%,transparent),0 0 32px rgba(91,255,168,.12)}
.app-more b{font-size:26px;line-height:1.1;font-weight:700;color:var(--acc);padding-bottom:.04em;
  background:linear-gradient(90deg,var(--acc),#5CC8FF);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}   
.app-more span{font-size:14px;font-weight:600;color:#DCE4F0}
.conn-find{border:1px solid var(--line-n);border-radius:var(--r);background:rgba(255,255,255,.025);padding:14px 16px}
.conn-find label{display:block;font-size:14px;font-weight:600;color:#DCE4F0;margin-bottom:9px}
.find-box{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;
  border:1px solid var(--line-n);border-radius:999px;background:rgba(6,11,20,.55);color:#9FB0C9;transition:border-color .2s}
.find-box:focus-within{border-color:color-mix(in srgb,var(--halo) 70%,transparent)}
.find-box svg{width:18px;height:18px;flex:none}
.find-box input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:inherit;font-size:16px;height:46px}
.find-box input::placeholder{color:#7D879A}
.find-box input::-webkit-search-cancel-button{filter:invert(.6)}
.find-out{font-size:14.5px;color:#CBD6E6}
.find-out:empty{display:none}
.find-out:not(:empty){margin-top:10px}
.find-out b{color:#fff}
.find-wait{display:flex;align-items:center;gap:10px;color:#9FB0C9;min-height:44px}
.find-wait i{width:6px;height:6px;border-radius:50%;background:var(--halo);animation:tdot 1s ease-in-out infinite}
.find-wait i:nth-child(2){animation-delay:.15s}.find-wait i:nth-child(3){animation-delay:.3s}
.find-wait span{margin-left:4px}
.find-hit{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);background:color-mix(in srgb,var(--acc) 8%,transparent);
  animation:mIn .28s ease-out}
.find-hit .fi{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;font-weight:700;font-size:15px}
.find-hit .fn{flex:1;min-width:0;overflow-wrap:anywhere}
.find-hit .fn b{display:block;font-size:15px;line-height:1.25}
.find-hit .fn span{display:block;font-size:13.5px;color:#CBD6E6}
.find-none{min-height:44px;display:flex;align-items:center;padding:8px 12px;border-radius:14px;
  border:1px solid var(--line-n);background:rgba(255,255,255,.02);animation:mIn .28s ease-out}
.find-none span{min-width:0;overflow-wrap:anywhere}
.find-out .tick{width:22px;height:22px;flex:none}
.find-out .tick circle{fill:var(--acc)}
.find-out .tick path{fill:none;stroke:#05210F;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.find-wait i,.find-hit,.find-none{animation:none}}
.app.dim{opacity:.28}
.app.hit{border-color:color-mix(in srgb,var(--acc) 70%,transparent);background:color-mix(in srgb,var(--acc) 9%,transparent)}
.conn-more{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.conn-more[hidden]{display:none}
.conn-more li{padding:8px 13px;border-radius:999px;border:1px solid var(--line-n);font-size:13.5px;color:#DCE4F0;background:rgba(255,255,255,.025)}
.conn-more li em{font-style:normal;color:#7D879A;font-size:12px}
.conn-more li.hit{border-color:color-mix(in srgb,var(--acc) 70%,transparent);color:#fff}

/* ---------- trust ---------- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:44px}
.tcard{border:1px solid var(--line-n);border-radius:var(--r-lg);padding:24px;background:rgba(255,255,255,.022)}
.tcard h3{font-size:17.5px;margin-bottom:9px}
.tcard p{color:#C3CEDE;font-size:15px}

.qmsg{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:9px;margin-top:20px}
.qmsg .ac-av{width:30px;height:30px;align-self:end;box-shadow:0 0 0 2px #0B0C13,0 0 0 3.5px #2A5BD7}
.qmsg p{position:relative;margin:0;padding:7px 12px 7px 13px;border-radius:18px;border-bottom-left-radius:6px;
  background:#161C2A;border:1px solid rgba(255,255,255,.08);color:#F0F3F8;font-size:15px;line-height:1.4}
.qmsg p b{color:#fff;font-weight:700}
.qmsg p::after{content:"\00a0";display:inline;padding-right:34px}
.qmsg time{position:absolute;right:11px;bottom:7px;font-size:11px;line-height:1;color:#7D879A;font-variant-numeric:tabular-nums}
.qmsg-k{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:5px}
.qmsg-k button{min-height:44px;border-radius:12px;border:0;background:rgba(42,91,215,.22);color:#DCE6FF;
  font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;transition:background .2s}
.qmsg-k button:hover{background:rgba(42,91,215,.34)}
.qmsg-k .go{background:#2A5BD7;color:#fff}
.qmsg-k .go:hover{background:#3466E0}
.qmsg-k button:disabled{cursor:default;opacity:.55}
.qmsg-k button.done{opacity:1;background:color-mix(in srgb,var(--acc) 16%,transparent);color:#fff}
.qmsg-k button svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
#trust{padding-top:0}   

/* ---------- faq ---------- */
.faq{margin-top:40px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-weight:700;font-size:17px;min-height:44px;display:flex;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  translate:0 -60%;rotate:45deg;transition:rotate .22s}
details[open] summary::after{rotate:-135deg;translate:0 -30%}
details p{padding:0 0 22px;color:var(--soft);font-size:16px;max-width:72ch}
/* FAQ in two columns: the heading on the left, the questions on the right as cards */
.faq-sec .faq{margin-top:28px;border-top:0;display:grid;gap:10px}
.faq-sec details{border:1px solid rgba(11,18,32,.08);border-radius:16px;background:#fff;padding:0 20px;
  box-shadow:0 6px 18px rgba(30,60,120,.06);transition:border-color .2s,box-shadow .2s}
.faq-sec details:hover,.faq-sec details[open]{border-color:rgba(42,91,215,.28);box-shadow:0 10px 26px rgba(30,70,160,.1)}
.faq-sec summary{font-weight:600;padding:16px 34px 16px 0}
.faq-sec summary::after{right:4px}
.faq-sec details p{padding:0 0 18px}
@media(min-width:900px){
  .faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
  .faq-grid .sec-head{position:static}   
  .faq-sec .faq{margin-top:0}
}

/* ---------- final ---------- */

.end-grid{display:grid;grid-template-columns:minmax(0,max-content) auto;justify-content:start;
  grid-template-areas:"h q" "p q" "c q";column-gap:clamp(20px,4vw,64px);align-items:center}
.end h2{grid-area:h;align-self:end;font-size:clamp(44px,7.2vw,92px);line-height:1.02;letter-spacing:0}   
.end-q{grid-area:q;width:clamp(170px,22vw,290px);position:relative}

@media(min-width:601px){
  .end-grid{grid-template-columns:minmax(0,max-content) 1fr}
  .end-q{justify-self:end;margin-right:clamp(24px,9vw,150px)}
}
.end-q .qiuj-mascot{--qiuj-glow:rgba(91,255,168,.16)}

.end h2 .hl{display:inline-block;padding:0 .02em .14em;margin-bottom:-.14em;line-height:1.06;
  background-size:100% 100%;background-repeat:no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.end{isolation:isolate;overflow:hidden}
.end>.wrap{position:relative}
.end .hlite{inset:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 140px,#000 calc(100% - 140px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 140px,#000 calc(100% - 140px),transparent 100%)}
@media(max-width:820px){.end .hlite{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%)}}
/* the squares fade out before the white section above and the footer below, like the light */
.end .grid-bg,.end .grid-fx{-webkit-mask-composite:source-in;mask-composite:intersect}
.end p{grid-area:p;margin:18px 0 0;max-width:48ch;color:#CBD6E6;font-size:clamp(16px,1.5vw,18px)}
.end .hero-cta{grid-area:c;align-self:start;justify-content:flex-start;margin-top:28px}
@media(max-width:600px){
  .end-grid{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h q" "p p" "c c";column-gap:12px}
  .end h2{font-size:clamp(44px,13vw,54px);align-self:center}
  .end-q{width:clamp(120px,36vw,150px)}
}
footer{border-top:1px solid var(--line-n);padding:34px 0;color:var(--dim);font-size:14px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
footer a:hover{color:#fff}
.flag{position:fixed;inset:auto 0 0 0;z-index:70;background:#ffd84d;color:#0B1220;
  font-size:12.5px;font-weight:700;text-align:center;padding:7px 12px;
  display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.flag .pick{display:inline-flex;gap:6px;align-items:center}
.flag button{font:inherit;font-size:11.5px;cursor:pointer;border:1.5px solid rgba(0,0,0,.35);
  background:transparent;color:#0B1220;border-radius:999px;padding:3px 10px;min-height:28px;
  display:inline-flex;align-items:center;gap:6px}
.flag button i{width:11px;height:11px;border-radius:50%;display:block}
.flag button[aria-pressed=true]{background:#0B1220;color:#ffd84d;border-color:#0B1220}

/* ---------- the word that changes in the headline ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rot{display:inline-grid;vertical-align:top;text-align:left;overflow:hidden;
  transition:width .52s cubic-bezier(.22,.9,.24,1)}
.rot>span{grid-area:1/1;justify-self:start;white-space:nowrap;color:var(--acc);
  opacity:0;transform:translateY(.62em) scale(.94);filter:blur(7px);
  transition:opacity .34s ease,transform .52s cubic-bezier(.22,.9,.24,1),filter .34s ease}
.rot>span.on{opacity:1;transform:none;filter:blur(0)}
.rot>span.out{opacity:0;transform:translateY(-.62em) scale(.94);filter:blur(7px)}

.hero h1 .rot>span{background:linear-gradient(90deg,var(--acc) 0%,#5CC8FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding-bottom:.14em;margin-bottom:-.14em}
.rot .meas{position:absolute;visibility:hidden;white-space:nowrap;left:-9999px;top:0;
  transition:none;opacity:1;filter:none;transform:none}
@media(prefers-reduced-motion:reduce){.rot,.rot>span{transition:none}}


.vs-card{margin:0;border:1px solid color-mix(in srgb,var(--halo) 22%,var(--line-n));border-radius:var(--r-lg);
  background:radial-gradient(120% 90% at 85% 0%,rgba(47,130,255,.07),transparent 60%),linear-gradient(180deg,var(--night-2),#0B1424);
  padding:30px 30px 26px;position:relative}
/* the heading lives inside the panel, as in the mockup: label and title on the first row,
   the subtitle on the column-header row, the panes rise beside it. --ro shifts the table rows */
.vs{--ro:1;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,1fr);column-gap:10px;row-gap:4px;position:relative}
.vs-t{display:contents}
.vs-top{grid-row:1;grid-column:1 / -1;padding:0 0 18px;max-width:none}
.vs-top h2{margin-top:12px}
.vs-sub{grid-row:2;grid-column:1;align-self:center;padding:0 12px 0 0;max-width:none;position:relative;z-index:2}
.vs-sub p{margin-top:0}
.vs-r{display:contents}
.vs-r>*{grid-row:calc(var(--r) + var(--ro));min-width:0;position:relative;z-index:2}
.vs-r>.vs-task,.vs-r>:first-child{grid-column:1}

.vs-r>.vs-band{grid-column:1 / -1;z-index:0;border-radius:16px;
  background:linear-gradient(90deg,rgba(27,44,73,.9),rgba(27,44,73,.4) 62%,rgba(27,44,73,.3));border:1px solid var(--line-n)}
.vs-r>.vs-c:nth-last-child(2),.vs-r>.vs-h.chat{grid-column:2}
.vs-r>.vs-c:last-child,.vs-r>.vs-h.q{grid-column:3}
.vs-pane{grid-row:calc(1 + var(--ro)) / span 6;z-index:1;border-radius:20px;pointer-events:none}
.vs-pane.chat{grid-column:2;background:rgba(17,30,51,.62);border:1px solid var(--line-n)}
.vs-pane.q{grid-column:3;background:color-mix(in srgb,var(--acc) 7%,rgba(11,20,36,.6));
  border:1px solid color-mix(in srgb,var(--acc) 62%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 10%,transparent),0 0 32px rgba(91,255,168,.20),inset 0 0 36px rgba(91,255,168,.07)}
.vs-h{display:flex;align-items:center;justify-content:center;gap:9px;padding:18px 8px 14px;text-align:center}
.vs-h.chat{font-size:14.5px;font-weight:600;color:#DCE4F0}
.vs-h.chat svg{width:22px;height:22px;flex:none}
.vs-h.q{font-size:20px;font-weight:600;color:#fff;letter-spacing:-.02em}
.vs-h.q .ac-av{width:32px;height:32px;box-shadow:0 0 0 2px rgba(220,230,255,.9),0 0 16px rgba(169,200,255,.45)}
.vs-task{display:flex;align-items:center;gap:16px;padding:12px 12px 12px 16px;font-weight:500;color:#DCE4F0;font-size:16px;line-height:1.25}
.vs-ic{flex:none;width:32px;height:32px;display:block;filter:drop-shadow(0 0 7px rgba(140,160,255,.55)) drop-shadow(0 0 16px rgba(110,140,255,.25))}
.vs-ic svg{width:100%;height:100%;display:block;overflow:visible}
.vs-c{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px}
.pill{display:inline-flex;align-items:center;gap:7px;border-radius:99px;padding:7px 15px 7px 10px;
  font-size:14.5px;font-weight:600;white-space:nowrap;line-height:1.2}
.pill svg{width:16px;height:16px;flex:none}
.pill.you{background:rgba(255,255,255,.07);color:#DCE4F0;border:1px solid var(--line-n)}
.pill.none{background:rgba(255,255,255,.03);color:#93A2BC;border:1px dashed rgba(195,205,220,.4)}
.pill.q{background:color-mix(in srgb,var(--acc) 13%,transparent);color:var(--acc);font-weight:700;
  border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);padding:5px 16px 5px 5px;gap:9px}
.pill.q svg{width:24px;height:24px}
.vs-sum .vs-task{color:#CBD6E6}
.vs-sum .vs-c{padding:14px 4px 18px}
.vs-n{display:block;font-size:40px;font-weight:700;line-height:1;margin-bottom:10px;color:#A9C8FF;letter-spacing:-.02em}
.vs-n.q{color:var(--acc)}
.dots{display:flex;gap:7px}
.dots i{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(195,205,220,.45)}
.dots i.on{background:#A9C8FF;border-color:#A9C8FF}
.dots.q i.on{background:var(--acc);border-color:var(--acc);box-shadow:0 0 10px rgba(91,255,168,.5)}
@media(min-width:821px){
  .vs-top{grid-column:1;padding:0 12px 20px 0}
  .vs-sub p{font-size:15px;line-height:1.45}
}
@media(max-width:820px){
  .vs{--ro:2}
  .vs-sub{grid-column:1 / -1;padding:0 0 18px}
}
@media(max-width:600px){
  .vs-card{padding:20px 8px 8px}
  .vs-top,.vs-sub{padding-inline:8px}
  .vs-top{padding-bottom:0}
  .vs-top h2{margin-top:10px}
  .vs-sub p{margin-top:12px}
  .vs{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);column-gap:5px;row-gap:3px}
  .vs-h{flex-direction:column;gap:5px;padding:12px 2px 8px}
  .vs-h.chat{font-size:12px;line-height:1.15}
  .vs-h.chat svg{width:20px;height:20px}
  .vs-h.q{font-size:15px}
  .vs-h.q .ac-av{width:26px;height:26px}
  .vs-task{gap:8px;padding:11px 4px 11px 9px;font-size:14px;line-height:1.2}
  .vs-ic{width:22px;height:22px}
  .vs-r>.vs-band{border-radius:12px}
  .vs-pane{border-radius:14px}
  .pill{font-size:12.5px;padding:5px 9px 5px 7px;gap:4px}
  .pill svg{width:13px;height:13px}
  .pill.q{padding:3px 9px 3px 3px;gap:5px}
  .pill.q svg{width:19px;height:19px}
  .vs-n{font-size:30px;margin-bottom:8px}
  .dots{gap:4px}
  .dots i{width:9px;height:9px}
}
@media(max-width:370px){
  .vs{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr) minmax(0,1fr)}
  .vs-task{font-size:13.5px;gap:7px}
  .pill{font-size:12px;padding:4px 7px 4px 6px;gap:3px}
  .pill svg{width:12px;height:12px}
}
@media(max-width:340px){
  .vs-card{padding-inline:6px}
  .vs-top h2{font-size:29px}
  .vs{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);column-gap:4px}
  .vs-task{font-size:13px;gap:6px;padding-left:7px}
  .vs-ic{width:19px;height:19px}
  .vs-h.chat{font-size:11.5px}
  .vs-h.chat>span{max-width:54px}   /* "Chat / window" on two lines, clear of the pane edge */
  .pill{font-size:11.5px;padding:4px 6px 4px 5px;gap:2px}
  .pill.none svg{display:none}
  .pill.none{padding-inline:8px}
}

/* ---------- the four, each with its own drawing ---------- */
.keys{display:grid;gap:14px;margin-top:34px}
@media(min-width:620px){.keys{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.keys{grid-template-columns:repeat(4,1fr)}}
.key{border:1px solid var(--line-n);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,#0C1830,#111E33);min-width:0;display:flex;flex-direction:column}
.key .artw{display:flex;align-items:center;justify-content:center;min-width:0;aspect-ratio:6/5;
  overflow:hidden;background:radial-gradient(70% 60% at 50% 50%,rgba(47,130,255,.10),transparent 70%)}
.key .art{display:block;width:100%;height:auto}
.key .art-img{width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 6%,#000 74%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 6%,#000 74%,transparent);
  mask-composite:intersect}
.key .kb{padding:4px 22px 22px;min-width:0;display:flex;flex-direction:column;flex:1}
.key .n{font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.2em;
  color:var(--halo);display:block;margin-bottom:12px}
.key h3{font-size:clamp(22px,1.9vw,26px);line-height:1.14;letter-spacing:-.02em}
.key p{margin:12px 0 20px;color:#A9B6CC;font-size:15px;line-height:1.55}
.key .pin{display:block;margin-top:auto;padding-top:14px;border-top:1px solid var(--line-n);
  font-family:var(--label);font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--acc)}
.art .pane{fill:var(--night-2)}
.art .edge{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.5}
.art .mu{fill:#3D5278}
.art .bl{fill:var(--blue)}
.art .blx{fill:none;stroke:var(--halo);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.art .co{fill:var(--acc)}
.art .al{fill:var(--alert)}
.art .mi{fill:var(--mint)}
.art .tx{font-family:var(--label);font-size:10px;font-weight:700;letter-spacing:.18em;fill:#9FB0C9}
.art .txc{font-family:var(--label);font-size:10px;font-weight:700;letter-spacing:.18em;fill:var(--alert)}
.art .txb{font-family:var(--label);font-size:10px;font-weight:700;letter-spacing:.18em;fill:var(--halo)}


@media(max-width:600px){
  .hero h1{font-size:40px;line-height:1.08}
  .hero .sub{font-size:18px;line-height:1.5}
  .sec-head h2{font-size:32px}
  .sec-head p{font-size:17.5px}
  body .chip{font-size:16px}
  .hero-note{font-size:15px}
  body .card h3{font-size:21px}
  body .card p{font-size:16.5px}
  body .tcard h3{font-size:19.5px}
  body .tcard p{font-size:16.5px}
  .ask,.ans{font-size:17px}
  details p{font-size:17px}
  summary{font-size:18px}
  .app span{font-size:14.5px}
  .conn-status,.find-out{font-size:16px}
  .conn-more li{font-size:14.5px}
  .say .msg{font-size:16.5px}
  .sec-head .lbl,.lbl{font-size:12px}
}


@media(max-width:600px){
  .hero{padding-top:80px}
  .hero h1{font-size:36px}
  .hero .sub{display:none}
  .stage{margin-top:4px}
  .stage .mascot-slot{--qs:min(54vw,212px);width:var(--qs);
    margin:calc(var(--qs) * -.12) auto calc(var(--qs) * -.07)}
  .chips-m{margin-top:calc(10px + var(--g2,0px))}
  .chip{margin-bottom:7px}
  .hero .stage{margin-top:calc(4px + var(--g1,0px))}   
  .chip.c4,.chip.c5,.chip.c6{display:none}
  .hero .hero-cta{margin-top:14px;flex-wrap:nowrap;gap:10px}
  .hero .hero-cta .btn-xl{flex:1 1 0;min-width:0;padding:0 12px;font-size:15.5px;min-height:54px;gap:7px}
  .hero .hero-cta .btn-xl .ico{width:19px;height:19px}
}
@media(max-width:379px){.hero .hero-cta .btn-xl{padding:0 10px;font-size:14.5px;gap:6px}}   /* "Open Telegram" on one line at 360 */
@media(max-width:339px){.hero .hero-cta{gap:8px}.hero .hero-cta .btn-xl{padding:0 6px;font-size:13.5px;gap:5px}.hero .hero-cta .btn-xl .ico{width:17px;height:17px}}   /* and at 320 */

.cohort-pill{display:inline-flex;gap:10px;align-items:center;margin:0 auto 18px;padding:7px 14px;border-radius:999px;border:1px solid var(--line-n);font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);background:rgba(91,255,168,.07)}
.hero .wrap{text-align:center}
.langsw{font-weight:700;font-size:13px;color:var(--dim);padding:6px 10px;border:1px solid var(--line-n);border-radius:999px}
.langsw:hover{color:#fff}
#casos .roles{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
#casos .role{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:10px 16px;font:700 14px var(--font);cursor:pointer}
#casos .role[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
#casos .say-q{margin-top:18px;color:var(--soft);min-height:1.5em}
#casos .cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:26px}
#casos .card{transition:opacity .3s,border-color .25s,transform .25s}
#casos .card.off{opacity:.38}
#casos .card.on{border-color:var(--blue)}
#casos .vph{margin-top:16px;aspect-ratio:16/9;border-radius:14px;background:var(--grey);border:1px dashed #C7CCD6;display:grid;place-items:center;font:600 10px var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
#casos .say-i{margin-top:12px;background:var(--grey);border-radius:12px;padding:10px 12px;font-size:14px;font-style:italic;color:var(--ink)}
#plaza{padding-block:clamp(56px,8vw,96px);background:var(--night-2)}
#plaza .box{max-width:560px;margin-top:26px;border:1px solid var(--line-n);border-radius:var(--r-lg);padding:26px;background:rgba(255,255,255,.03)}
#plaza .prog{display:flex;gap:6px;margin-bottom:18px}
#plaza .prog i{flex:1;height:5px;border-radius:9px;background:var(--line-n)}
#plaza .prog i.on{background:var(--acc)}
#plaza .f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
#plaza label{font-weight:700;font-size:14px}
#plaza input,#plaza select,#plaza textarea{width:100%;border:1px solid var(--line-n);background:var(--night);color:#fff;border-radius:12px;padding:12px 14px;font:500 16px var(--font)}
#plaza input:focus-visible,#plaza select:focus-visible,#plaza textarea:focus-visible{outline:2px solid var(--halo);outline-offset:2px}
#plaza .chk{display:flex;gap:10px;align-items:flex-start;color:var(--dim);font-size:14px;margin-bottom:16px}
#plaza .chk input{width:auto;margin-top:3px}
#plaza .err{color:var(--alert);font-weight:700;margin:0 0 12px}
#plaza .ref{border:1px dashed var(--halo);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
#plaza .ref code{font:600 14px var(--font);background:var(--night);padding:8px 12px;border-radius:10px;overflow-wrap:anywhere}
#plaza .bar{height:10px;border-radius:99px;background:var(--line-n);margin-top:10px;overflow:hidden}
#plaza .bar i{display:block;height:100%;width:0;background:var(--acc)}
#plaza ul{color:var(--dim);padding-left:20px;margin:12px 0 0}
#plaza .nota{margin-top:16px;font-size:13px;color:var(--dim);border-left:3px solid var(--acc);padding-left:12px;max-width:560px}

/* === casos de uso como historias (referencia: dots de OpenAI, a la manera de Qiu) === */
#hist .stage2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(24px,5vw,72px);margin-top:clamp(36px,6vw,72px);align-items:start}
@media(max-width:860px){#hist .stage2{grid-template-columns:1fr}}
#hist .tabs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
@media(max-width:860px){#hist .tabs{flex-direction:row;overflow-x:auto;border-top:0;gap:8px;padding-bottom:6px}}
#hist .tab{all:unset;cursor:pointer;display:block;padding:18px 4px;border-bottom:1px solid var(--line);font-weight:600;font-size:clamp(17px,1.6vw,20px);letter-spacing:-.02em;color:#8B93A3;transition:color .2s}
@media(max-width:860px){#hist .tab{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:15px}}
#hist .tab[aria-selected=true]{color:var(--ink)}
@media(max-width:860px){#hist .tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}}
#hist .tab:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
#hist .beats{margin-top:clamp(20px,3vw,34px);display:grid;gap:0;border-top:1px solid var(--line)}
#hist .beat{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
@media(max-width:560px){#hist .beat{grid-template-columns:1fr;gap:4px}}
#hist .beat i{font:600 11px var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-brand);font-style:normal;padding-top:4px}
#hist .say2 small{display:block;font:600 11px var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
#hist .vid2{display:block;width:100%;margin-top:16px;aspect-ratio:16/9;border-radius:18px;background:#0A1020;object-fit:cover}
#hist .vph2{margin-top:16px;aspect-ratio:16/9;border-radius:18px;background:var(--grey);border:1px dashed #C7CCD6;display:grid;place-items:center;font:600 11px var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}

/* el degradado recortaba el rabo de la y/p/g */
.hero h1 .hl{display:inline-block;padding-bottom:.18em;margin-bottom:-.18em;line-height:1.12}
/* palabra cambiante ahora en el subtítulo */
.hero .sub .rot>span{background:linear-gradient(90deg,var(--acc) 0%,#5CC8FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:700}
.hero .sub .rot{vertical-align:baseline}
/* === Por qué Qiu, al estilo Apple: una idea por línea, tipografía grande, aire === */
#diff.apple{padding-block:clamp(80px,12vw,150px);text-align:left}
#diff.apple .kick{font:600 clamp(18px,2vw,22px) var(--font);color:var(--dim);letter-spacing:-.01em}
#diff.apple h2{font-size:clamp(40px,7.4vw,92px);line-height:1.02;letter-spacing:-.035em;font-weight:700;margin-top:14px;max-width:14ch}
#diff.apple .lead{margin-top:clamp(18px,2.4vw,28px);font-size:clamp(20px,2.6vw,30px);color:#CBD6E6;max-width:26ch;line-height:1.25;letter-spacing:-.015em}
#diff.apple .ch{margin-top:clamp(56px,8vw,110px);border-top:1px solid var(--line-n)}
#diff.apple .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(16px,4vw,64px);align-items:baseline;padding-block:clamp(26px,4vw,48px);border-bottom:1px solid var(--line-n)}
#diff.apple .row b{font-size:clamp(34px,5.4vw,68px);line-height:1.04;font-weight:700;letter-spacing:-.03em}
#diff.apple .row p{font-size:clamp(17px,1.9vw,22px);color:var(--dim);line-height:1.4;max-width:30ch}
@media(max-width:700px){#diff.apple .row{grid-template-columns:1fr;gap:8px}}
#diff.apple .fin{margin-top:clamp(48px,7vw,90px);font-size:clamp(26px,4.2vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1.1;max-width:20ch}


/* la g de «segura» se cortaba por el overflow de la palabra rotatoria */
.hero h1 .rot{padding-bottom:.3em;margin-bottom:-.3em}
.hero h1 .rot>span{padding-bottom:.3em;margin-bottom:0}
/* casos en oscuro, coherente con el resto */
#hist .say2 small,#hist .vph2{color:#9AA6BD}
#hist .tabs,#hist .tab,#hist .beats,#hist .beat{border-color:rgba(255,255,255,.14)}
#hist .tab{color:#7C879E}
#hist .tab[aria-selected=true]{color:#fff}
#hist .beat i{color:var(--acc)}
#hist .vph2{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.2)}
@media(max-width:860px){#hist .tab{border-color:rgba(255,255,255,.2)}#hist .tab[aria-selected=true]{background:#fff;border-color:#fff;color:var(--night)}}
/* pilares */
/* red de personas */
#team .net{position:relative;margin-top:22px;aspect-ratio:16/10;max-width:520px}
#team .net svg.ln{position:absolute;inset:0;width:100%;height:100%}
#team .net svg.ln line{stroke:rgba(91,255,168,.45);stroke-width:1.2;vector-effect:non-scaling-stroke}
#team .p{position:absolute;transform:translate(-50%,-50%);width:clamp(46px,7vw,64px);text-align:center}
#team .p svg.av{width:100%;height:auto;display:block;border-radius:50%;border:2px solid rgba(255,255,255,.2)}
#team .p .qb{position:absolute;right:-6px;bottom:14px;width:22px;height:22px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px var(--night)}
#team .p .qb svg{width:16px;height:16px}
#team .p small{display:block;margin-top:4px;font:600 10px var(--label);letter-spacing:.08em;text-transform:uppercase;color:#9AA6BD}
#team .p.c svg.av{border-color:var(--acc);box-shadow:0 0 0 6px rgba(91,255,168,.12)}
/* confianza: mini visuales */
.tcard .mini{margin-top:16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:12px 14px;font-size:14px;color:#E6EBF5}
.tcard .mini .row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tcard .mini .ok{display:inline-flex;align-items:center;gap:8px}
.tcard .mini .ok::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc)}
.tcard .mini .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tcard .mini .chips span,.tcard .mini .row button{padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;font:600 13px var(--font)}
.tcard .mini .row+.row{margin-top:10px}

.tcard .mini .row{background:none;border:0;padding:0;border-radius:0}
/* cta final */
.end h2 .hl{white-space:nowrap}
.tcard .mini button{background:transparent!important;color:#fff!important;box-shadow:none!important}
.end .end-grid .hero-cta{margin-top:18px}
/* equipos y networking */
#team .nodes{display:flex;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}
#team .nodes i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(91,255,168,.1);border:1px solid rgba(91,255,168,.5);font:600 12px var(--label);color:var(--acc);font-style:normal}
#team .nodes u{display:block;width:26px;height:2px;background:linear-gradient(90deg,var(--acc),#5CC8FF);opacity:.7;text-decoration:none}
/* flujo */
#flow .step:nth-child(even) .tx{order:2}
@media(max-width:820px){#flow .step{grid-template-columns:1fr}#flow .step:nth-child(even) .tx{order:0}}
#flow .fv{display:block;width:100%;aspect-ratio:16/9;border-radius:18px;background:#0A1020;object-fit:cover;border:1px solid rgba(255,255,255,.1)}
#flow .fsolo .fph{display:grid;place-items:center;aspect-ratio:16/9;border-radius:18px;background:#0A1020;border:1px dashed rgba(255,255,255,.2);color:#9AA6BD;font:600 14px var(--label);letter-spacing:.08em}
/* new sections in the common style: .sec-head, .lbl, h2 with .hl, step and tcard cards */
#hist,#pilares,#team{background:var(--night);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
#hist .stage2{margin-top:44px}
#hist .panel h3{font-size:clamp(22px,2.6vw,30px);line-height:1.15;letter-spacing:-.02em;font-weight:600;max-width:24ch;color:#fff}
#hist .beat p{font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.5;color:#CBD6E6}
#hist .say2{margin-top:22px;border-radius:var(--r);background:rgba(255,255,255,.06);color:#fff;padding:16px 18px;font-size:clamp(15.5px,1.5vw,17.5px);font-weight:600}
#hist .beat i,#hist .say2 small{letter-spacing:.2em}
#pilares .tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:44px}
@media(max-width:860px){#pilares .tres{grid-template-columns:1fr}}
#pilares .step{padding:24px 24px 28px;border-radius:var(--r-lg);
  background:radial-gradient(120% 70% at 50% 125%,rgba(47,130,255,.40),transparent 70%),linear-gradient(180deg,var(--night-3),var(--night-2));
  border-color:color-mix(in srgb,var(--halo) 38%,transparent);
  box-shadow:0 14px 36px rgba(0,0,0,.35),0 0 26px color-mix(in srgb,var(--halo) 18%,transparent)}
#pilares .step .n{font-size:12px;margin-bottom:12px}
#pilares .step h3{font-size:clamp(19px,1.8vw,22px);line-height:1.2}
#pilares .step p{margin-top:9px;font-size:15.5px;line-height:1.55}
#pilares .step.is-on{border-color:color-mix(in srgb,var(--halo) 60%,transparent);
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 34px color-mix(in srgb,var(--halo) 28%,transparent)}
#pilares .mas{margin-top:40px}
#pilares .mas div{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
#pilares .mas div span{padding:9px 15px;border:1px solid var(--line-n);border-radius:999px;background:rgba(255,255,255,.025);
  font:600 14px var(--font);color:#DCE4F0;transition:border-color .22s,background .22s}
#pilares .mas:not(.fxp-mas) div span:hover{border-color:color-mix(in srgb,var(--halo) 55%,transparent);background:rgba(30,123,255,.09)}
#team .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:44px}
@media(max-width:760px){#team .duo{grid-template-columns:1fr}}
#team .pane{border:1px solid var(--line-n);border-radius:var(--r-lg);padding:24px;background:rgba(255,255,255,.022);min-width:0}
#team .pane h3{font-size:clamp(19px,1.8vw,22px);line-height:1.2}
#team .pane p{margin-top:9px;font-size:15.5px;line-height:1.55;color:#C3CEDE;max-width:40ch}
#flow{background:var(--night);color:#fff}
#flow .step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);align-items:center;
  padding:clamp(18px,3vw,36px);margin-top:16px;border-radius:var(--r-lg)}
@media(max-width:820px){#flow .step{grid-template-columns:1fr}#flow .step:nth-child(even) .tx{order:0}}
#flow .tx .lbl{display:block}
#flow .tx .lbl .num{color:var(--acc)}
#flow .step h3{margin-top:12px;font-size:clamp(24px,2.6vw,32px);line-height:1.08;letter-spacing:-.02em;font-weight:600}
#flow .step p{margin-top:14px;font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.55;color:#CBD6E6;max-width:40ch}
#flow .rest{margin-top:clamp(56px,8vw,96px)}
#flow .rest{text-align:center;margin-inline:auto}
#flow .rest .rest-k{margin:0 0 12px}
#flow .rest h2{margin-top:0}
@media(max-width:600px){
  #pilares .step{padding:18px 18px 20px}
  #pilares .step h3,#team .pane h3{font-size:19.5px}
  #pilares .step p,#team .pane p{font-size:16.5px}
  #hist .beat p,#hist .say2,#flow .step p{font-size:17px}
  #flow .step h3{font-size:26px}
}
/* final section: second button under the first on phones */
@media(max-width:600px){
  .end .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  .end .hero-cta .btn{width:100%}
}



html body #flow .flow-fx .hlite{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 220px,#000 calc(100% - 240px),rgba(0,0,0,.35) calc(100% - 80px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 220px,#000 calc(100% - 240px),rgba(0,0,0,.35) calc(100% - 80px),transparent 100%)}
/* and no 1px border either: #flow and #hist share the same night background */
html body #flow + #hist{border-top:0}
@media(max-width:820px){html body #flow .flow-fx .hlite{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 150px),rgba(0,0,0,.35) calc(100% - 50px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 150px),rgba(0,0,0,.35) calc(100% - 50px),transparent 100%)}}

@media(max-width:600px){
  html body .end-q{width:clamp(76px,21vw,90px);justify-self:end;align-self:start;margin-right:-6px;margin-top:2px}
}

@media(max-width:600px){
  html body .hero h1{font-size:min(40px,calc((100vw - 28px) / 11.35));max-width:none;margin-inline:-6px}
  html body .hero h1>[aria-hidden]{white-space:nowrap}
}

@media(max-width:600px){
  html body .hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding-bottom:22px;box-sizing:border-box}
  /* the glow under the bottom button was cut by the next block: only the buttons go above it */
  html body .hero .hero-cta{position:relative;z-index:3}
  /* what looked like a cut glow under the bottom button was the hero's blue light (centred at the
     very bottom of the hero) ending in a hard line where the next block starts: it fades out over
     the last 120px of the hero instead (its box runs 260px past the hero) */
  html body .hero.qbg::before{-webkit-mask-image:linear-gradient(#000 calc(100% - 380px),transparent calc(100% - 260px));mask-image:linear-gradient(#000 calc(100% - 380px),transparent calc(100% - 260px))}
  /* 09:44: less room on top, title and Q higher, a 4th question. The spare height goes one third
     above the title (at most 48px) and two thirds between QIU and the questions, so the questions
     and the button stay at the bottom of the screen */
  html body .hero>.wrap{flex:1 0 auto;display:flex;flex-direction:column}
  html body .hero>.wrap::before{content:"";flex:1 1 0;max-height:48px}
  html body .hero .stage{flex:2 1 auto;display:flex;flex-direction:column;width:100%}
  html body .hero .chips-m{margin-top:0;padding-top:14px;order:2}
  
  html body .hero .stage::before{content:"";flex:1 1 0;order:0}
  html body .hero .stage::after{content:"";flex:2 1 0;order:1}
  html body .hero .stage>.mascot-slot{order:0}
  html body .hero .chip.c4{display:inline-flex}
  /* the glow of the header button: the header box now reaches 48px lower (see-through, no taps),
     so nothing can cut the glow at the header line; its tone and line are drawn by ::before */
  html body header{background:none;border-bottom:0;padding-bottom:48px;pointer-events:none}
  html body header::before{content:"";position:absolute;inset:0 0 auto;height:62px;z-index:-1;pointer-events:none;
    background:color-mix(in srgb,var(--night) 97%,transparent);border-bottom:1px solid var(--line-n)}
  html body header .wrap{pointer-events:auto}
}
/* 12-oct 09:21: Q answers with its plain icon, no animation (it used to mirror the live mascot) */
html body .say .av .qmk{width:66%;height:66%;display:block}
html body .say .av,html body .say .av *{animation:none!important}
/* 12-oct 09:21: the glow of "Try QIU" was cut on phones: Safari clips children of an element
   with backdrop-filter. The header is 94% opaque anyway, so phones get no blur and a solid tone */
@media(max-width:600px){
  html body header{-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* 12-oct 08:41: no grey box flashing around the questions (or anything else) when tapped */
html{-webkit-tap-highlight-color:transparent}
#faq summary:focus:not(:focus-visible){outline:none}

@media(max-width:600px){
  html body header .wrap>.btn-p .ico{display:none}
  html body header .wrap>.btn-p{white-space:nowrap}
}
@media(max-width:400px){
  html body header .wrap{gap:12px}
  html body header .wrap>.btn-p{padding-left:14px;padding-right:14px}
}
@media(max-width:350px){
  html body header .wrap{gap:10px}
  html body header .wrap>.btn-p{padding-left:10px;padding-right:10px;font-size:13px}
}


/* 12-oct (ES): "Prueba QIU" is longer than "Try QIU": a little less room between
   the header items on the smallest phones, so the button stays on one line inside the 20px margin */
@media(max-width:350px){
  html body header .wrap{gap:8px}
  html body header .wrap>.btn-p{padding-left:9px;padding-right:9px}
}
/* the client card tabs: the current one ("Por hacer") stays fully visible on small phones */
@media(max-width:400px){
  html body #pilares .fxp-tabs{gap:6px;font-size:10px}
}
/* "Also works with" chips: the Spanish names are longer than the 8-column grid, so on
   tablet and desktop they size to their text, on one line, and wrap centred */
@media(min-width:821px){
  html body #pilares .gp-chips{display:flex;flex-wrap:wrap;justify-content:center}
  html body #pilares a.gp-chip{flex:0 0 auto;white-space:nowrap;padding:12px 16px}
}


html body header .wrap>.htg{flex:none;gap:8px;padding-left:14px;padding-right:16px}
html body header .wrap>.htg .ico{width:17px;height:17px}
@media(max-width:860px){html body header .wrap>.langsw{margin-left:auto}html body header .wrap>.btn{margin-left:0}}
@media(max-width:600px){html body header .wrap>.htg{width:38px;height:38px;min-height:0;padding:0;justify-content:center;border-radius:999px}
  html body header .wrap>.htg .htg-t{display:none}}
@media(max-width:400px){html body header .wrap>.htg{width:36px;height:36px}html body header .wrap>.htg .ico{width:16px;height:16px}}

#demo .madewith{display:flex;align-items:center;justify-content:center;gap:8px;margin:calc(16px - clamp(28px,4vw,48px)) auto 0;font:500 14px/1 Manrope,system-ui,sans-serif;color:#9FB0C9;letter-spacing:.01em}#demo .madewith b{color:#fff;font-weight:600}#demo .madewith img{display:block;width:18px;height:18px}
.baja span{padding-left:.32em}#demo .madewith{transform:translateX(-1.3px)}


@media(prefers-reduced-motion:no-preference){
html:not(.nojs) :is(.hero .sub,.hero .hero-cta,.hero .hero-note,#flow .fcard .lbl,#flow .fcard p,#flow .rest .rest-k,#hist .stage2,.end p,.end .hero-cta,footer .wrap):not(.qdone){
  transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--qd,0ms),translate .9s cubic-bezier(.16,1,.3,1) var(--qd,0ms),filter .9s cubic-bezier(.16,1,.3,1) var(--qd,0ms)}
html:not(.nojs) :is(.hero .sub,.hero .hero-cta,.hero .hero-note,#flow .fcard .lbl,#flow .fcard p,#flow .rest .rest-k,#hist .stage2,.end p,.end .hero-cta,footer .wrap):not(.qv){
  opacity:0;translate:0 26px;filter:blur(6px)}
/* 13:28: headings come in word by word, like the titles in Use cases (rise out of a blur, one after another).
   The script wraps each word in .qw; a gradient word (.hl) or the rotating word stays whole inside its own .qw,
   with the punctuation that follows it, so the gradient is never broken and nothing wraps alone. */
html:not(.nojs) :is(.hero h1,#flow .fcard h3,#flow .rest h2,.sec-head h2,.end h2) .qw{display:inline-block;transform-origin:50% 100%}
html:not(.nojs) :is(.hero h1,#flow .fcard h3,#flow .rest h2,.sec-head h2,.end h2):not(.qv) .qw{opacity:0}
html:not(.nojs) :is(.hero h1,#flow .fcard h3,#flow .rest h2,.sec-head h2,.end h2).qv .qw{
  animation:wordIn .6s cubic-bezier(.2,.75,.25,1) backwards;animation-delay:calc(var(--qd,0ms) + var(--i,0) * 55ms)}
html:not(.nojs) :is(.hero .stage,#flow .fcard .fvis,.end .end-q,#apps .app):not(.qdone){
  transition:opacity 1s cubic-bezier(.16,1,.3,1) var(--qd,0ms),scale 1.1s cubic-bezier(.16,1,.3,1) var(--qd,0ms),translate 1.1s cubic-bezier(.16,1,.3,1) var(--qd,0ms)}
html:not(.nojs) :is(.hero .stage,#flow .fcard .fvis,.end .end-q,#apps .app):not(.qv){
  opacity:0;scale:.94;translate:0 18px}
/* the reveals that were already there get the same softer curve */
.rev{transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--d,0ms),transform .9s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
@media(hover:hover) and (pointer:fine){.tilt.rev.on{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,border-color .25s}}

.hero .chip.c1{--ci:0}.hero .chip.c3{--ci:1}.hero .chip.c5{--ci:2}.hero .chip.c6{--ci:3}.hero .chip.c4{--ci:4}.hero .chip.c2{--ci:5}
@keyframes chipIn{from{opacity:0;scale:.82;filter:blur(6px)}to{opacity:1;scale:1;filter:none}}
html:not(.nojs) .hero .stage:not(.qv) .chip{opacity:0}
html:not(.nojs) .hero .stage.qv .chip{
  animation:chipIn .55s cubic-bezier(.2,.75,.25,1) backwards,bob var(--bt,7s) ease-in-out var(--bd,0s) infinite;
  animation-delay:calc(var(--qd,0ms) + 450ms + var(--ci,0) * 230ms),var(--bd,0s)}
@media(max-width:820px){
  .hero .chip.c1{--ci:0}.hero .chip.c2{--ci:1}.hero .chip.c3{--ci:2}.hero .chip.c4{--ci:3}.hero .chip.c5{--ci:4}.hero .chip.c6{--ci:5}
  html:not(.nojs) .hero .stage.qv .chip{animation:chipIn .5s cubic-bezier(.2,.75,.25,1) backwards;
    animation-delay:calc(var(--qd,0ms) + 350ms + var(--ci,0) * 180ms)}
}
}



@media(prefers-reduced-motion:no-preference){
html:not(.nojs) :is(.hero,.end):not(.qbg)>:is(.hlite,.grid-bg,.grid-fx),html:not(.nojs) .hero:not(.qbg)::before{opacity:0}
}


.qiu-mascot{position:relative;width:100%;max-width:420px;aspect-ratio:300/305;margin-inline:auto;
  --qiu-glow:rgba(30,90,255,.22);--shadow-ink:rgba(0,8,40,.45);
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.qiu-mascot::before{content:"";position:absolute;inset:-10%;background:radial-gradient(ellipse 45% 45% at 50% 48%,var(--qiu-glow),transparent 70%);opacity:var(--amb,1);pointer-events:none}
.qiu-mascot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.qiu-mascot #qiu-body{cursor:pointer}

#flow .fcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(28px,4vw,48px)}
#flow .fcard{display:flex;flex-direction:column;gap:22px;padding:clamp(22px,2.6vw,32px);border-radius:24px;
  border:1px solid rgba(47,130,255,.26);background:linear-gradient(180deg,rgba(17,30,51,.72),rgba(6,11,20,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 60px rgba(47,130,255,.08)}
#flow .fcard .tx .lbl{display:block}
#flow .fcard h3{margin-top:12px;font-size:clamp(26px,2.6vw,34px);line-height:1.12;letter-spacing:-.02em;font-weight:600}
#flow .fcard p{margin-top:10px;color:#AEBBD0;font-size:clamp(15.5px,1.4vw,17px);line-height:1.55;max-width:44ch}
#flow .fvis{margin-top:auto}
#flow .fvid{flex:1;display:grid;place-items:center;padding:clamp(14px,2vw,26px);border-radius:18px;border:1px solid rgba(255,255,255,.1);
  background:radial-gradient(70% 55% at 8% 92%,rgba(31,99,224,.45),transparent 70%),radial-gradient(55% 45% at 96% 4%,rgba(47,130,255,.3),transparent 70%),linear-gradient(180deg,#081232,#0A1840)}
#flow .fvid .fv{border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
@media(min-width:821px){#flow .fcard .fvis{aspect-ratio:1/1}#flow .fvid{aspect-ratio:auto}}
@media(max-width:820px){#flow .fcards{grid-template-columns:1fr}}
/* 10:18: the blue background covers the whole card, not just the picture */
#flow .fcard{border-color:rgba(255,255,255,.1);
  background:radial-gradient(70% 45% at 8% 96%,rgba(31,99,224,.55),transparent 70%),
             radial-gradient(55% 40% at 96% 4%,rgba(47,130,255,.35),transparent 70%),
             linear-gradient(180deg,#081232,#0A1840)}
#flow .fcard .qca,#flow .fvid{background:transparent;border:0;border-radius:0}
#flow .fcard .qca{overflow:visible}
#flow .fcard .qca .qa-blob{display:none}

#flow .fcard .qb{background:transparent;border:0;border-radius:0;overflow:visible}
#flow .fcard .qb .qb-blob{display:none}
/* 11-oct 12:35: the gradient on the last letter was cut (glyph overhang outside the clip box) */
#flow .fcard h3 .hl{display:inline-block;padding:0 .08em .12em 0;margin:0 -.08em -.12em 0}
/* 11-oct 12:36: caption closer to the cards so "It takes care of the rest." fits on screen with them; kicker in Orbitron */
#flow .rest{margin-top:clamp(18px,2vw,26px)}
#flow .rest .rest-k{font-family:var(--label)}
/* 11-oct 13:02: side by side felt overloaded; the two cards go one above the other, text left and the 1:1 piece right */
@media(min-width:821px){
  #flow .fcards{grid-template-columns:minmax(0,1fr);gap:20px}
  #flow .fcard .fvis{margin-top:0;width:100%;max-width:500px;margin-inline:auto;aspect-ratio:1/1}
}
@media(min-width:1000px){
  #flow .fcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);align-items:center;gap:clamp(28px,5vw,72px);padding:clamp(28px,3.4vw,48px)}
  #flow .fcard .fvis{margin:0}
  #flow .fcard h3{font-size:clamp(30px,3.2vw,42px)}
}
/* 11-oct 13:05: no card shapes at all, the pieces sit on the open section; first one is scheme left, text right */
#flow .fcard{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
#flow .fcards{gap:clamp(48px,7vw,104px)}
@media(min-width:1000px){
  #flow .fcard:first-child{grid-template-columns:minmax(0,500px) minmax(0,1fr)}
  #flow .fcard:first-child .fvis{order:-1}
}
/* 11-oct 13:06: text further from the scheme */
@media(min-width:1000px){#flow .fcard{column-gap:clamp(56px,9vw,150px)}}
/* 11-oct 13:09: kicker blue like the labels; and the header's squares rise from the line at the bottom of the section */
#flow .rest .rest-k{color:var(--halo)}
#flow{isolation:isolate;overflow:hidden}
#flow>.wrap{position:relative;z-index:1}
.flow-fx{position:absolute;left:0;right:0;bottom:0;height:576px;pointer-events:none;z-index:0}
.flow-fx .flow-src{position:absolute;left:50%;bottom:0;width:0;height:0}
.flow-fx .grid-bg,.flow-fx .grid-fx{-webkit-mask-composite:source-in;mask-composite:intersect}
@media(max-width:820px){.flow-fx{height:400px}}
/* 11-oct 13:13: the two blocks closer together, and "Focus on what matters" as the accent of the close */
#flow .fcards{gap:clamp(8px,1.4vw,20px)}
/* 13:14: the whole close is the accent, with room around it */
#flow .rest{margin-top:clamp(140px,17vw,280px);margin-bottom:0}
/* 13:16: the close sits low, right in the squares */
#flow{padding-bottom:clamp(36px,4.4vw,64px)}
@media(max-width:820px){#flow{padding-bottom:56px}}
#flow .fcard p .n2k{color:#fff;font-weight:600}
/* 13:19: closer to the hero: the same deep blue light behind the close, and the wave leaves from it */
.flow-fx .hlite{inset:0;z-index:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 220px);mask-image:linear-gradient(180deg,transparent 0,#000 220px)}
.flow-fx .grid-bg,.flow-fx .grid-fx{z-index:1}
.flow-fx{height:720px}
@media(max-width:820px){.flow-fx{height:480px}}
#flow .rest .rest-k{font-size:clamp(17px,1.7vw,24px);letter-spacing:.04em;line-height:1.2;margin:0 0 clamp(12px,1.4vw,20px);
  text-shadow:0 0 24px rgba(47,130,255,.55),0 0 2px rgba(47,130,255,.4)}
#flow .rest h2{font-size:clamp(40px,5.6vw,80px);line-height:1.05;letter-spacing:-.025em}
#flow .rest h2 .hl{display:inline-block;padding:0 .08em .12em 0;margin:0 -.08em -.12em 0}
#flow .fvid{padding:0}

#hist .stage2{display:block;margin-top:clamp(28px,4vw,44px)}
#hist .tabs{display:flex;flex-direction:row;gap:10px;border-top:0;overflow-x:auto;scrollbar-width:none;padding:2px 2px 10px}
#hist .tabs::-webkit-scrollbar{display:none}
#hist .tab{flex:1 0 auto;text-align:center;white-space:nowrap;padding:15px 18px;border-radius:14px;font-size:15px;
  border:1px solid rgba(143,187,255,.16);background:rgba(17,30,51,.55);color:#B8C4D9;transition:background .2s,color .2s,box-shadow .2s,border-color .2s}
#hist .tab:hover{border-color:rgba(143,187,255,.34);color:#fff}
#hist .tab[aria-selected=true]{background:linear-gradient(180deg,#3B8BFF,#1F63E0);border-color:rgba(143,187,255,.55);color:#fff;
  box-shadow:0 0 0 1px rgba(47,130,255,.35),0 10px 30px rgba(47,130,255,.42)}
#hist .panels{margin-top:12px}
#hist .panel{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.3fr);grid-template-areas:"h v" "b v" "s v";
  grid-template-rows:auto auto 1fr;column-gap:clamp(28px,4vw,56px);padding:clamp(22px,3vw,36px);border-radius:24px;
  border:1px solid rgba(47,130,255,.26);background:linear-gradient(180deg,rgba(17,30,51,.72),rgba(6,11,20,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 60px rgba(47,130,255,.08)}
#hist .panel[hidden]{display:none}
#hist .panel h3{grid-area:h;font-size:clamp(21px,2.2vw,26px);max-width:22ch}
#hist .beats{grid-area:b;margin-top:22px;border-top:0;gap:0;counter-reset:paso}
#hist .beat{position:relative;grid-template-columns:32px minmax(0,1fr);column-gap:16px;row-gap:4px;padding:0 0 22px;border:0;counter-increment:paso}
#hist .beat::before{content:counter(paso);grid-row:1/span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font:600 13px var(--font);color:#fff;background:rgba(47,130,255,.16);border:1px solid rgba(143,187,255,.45);box-shadow:0 0 14px rgba(47,130,255,.35)}
#hist .beat:not(:last-child)::after{content:"";position:absolute;left:15px;top:36px;bottom:4px;border-left:1px dashed rgba(143,187,255,.32)}
#hist .beat i{grid-column:2;font:600 17px var(--font);letter-spacing:-.01em;text-transform:none;color:#fff;padding-top:4px}
#hist .beat p{grid-column:2;color:#AEBBD0}
#hist .say2{grid-area:s;align-self:start;margin-top:0}
#hist .vid2{grid-area:v;align-self:center;margin-top:0;border-radius:18px;border:1px solid rgba(143,187,255,.28);
  box-shadow:0 0 0 6px rgba(47,130,255,.06),0 18px 60px rgba(47,130,255,.22)}
@media(max-width:860px){
  #hist .tab{flex:0 0 auto;padding:11px 16px}
  #hist .tab[aria-selected=true]{background:linear-gradient(180deg,#3B8BFF,#1F63E0);color:#fff}
  #hist .panel{grid-template-columns:1fr;grid-template-areas:"h" "b" "s" "v";grid-template-rows:auto;padding:20px;border-radius:20px}
  #hist .vid2{margin-top:18px}
}
@media(min-width:861px){
  #hist .sec-head{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:48px;align-items:end}
  #hist .sec-head h2{max-width:20ch}
  #hist .sec-head .lbl{grid-column:1/-1}
  #hist .sec-head p{margin:0 0 .45em;justify-self:end;max-width:52ch}
}
/* 11-oct 09:50: tabs as the site buttons with icons, one fixed height, You say as a quote in step 1, label font on the steps, video centred on step 2 */
#hist .tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;
  font-weight:700;font-size:14.5px;letter-spacing:0;background:transparent;border:1px solid var(--line-n);color:#fff;box-shadow:none}
#hist .tab .ico{width:18px;height:18px;flex:none;display:block;opacity:.85}
#hist .tab:hover{border-color:#fff6;color:#fff}
#hist .tab[aria-selected=true]{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 10px 30px rgba(47,130,255,.42)}
#hist .tab[aria-selected=true] .ico{opacity:1}
#hist .panels{display:grid}
#hist .panel{grid-area:1/1;position:relative;grid-template-areas:"h v" "b v";grid-template-rows:auto 1fr}
#hist .panel[hidden]{display:grid;visibility:hidden;pointer-events:none}
#hist .beat i{font:600 11px var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--halo);padding-top:9px}
#hist .beat .say2{grid-column:2;margin:12px 0 2px;padding:10px 14px;border-radius:0 12px 12px 0;border-left:2px solid var(--blue);
  background:rgba(47,130,255,.08);font-size:clamp(15px,1.4vw,16.5px);font-weight:600;color:#fff}
#hist .beat .say2 small{margin-bottom:4px;font-size:10px}
#hist .vid2{align-self:start}
#hist .beat i{grid-row:1}
#hist .beat p{grid-row:2}
#hist .beat .say2{grid-row:3}
#hist .tabs{padding:8px 8px 30px;margin:-8px -8px -20px}
@media(min-width:861px){
  #hist .tabs{overflow:visible;flex-wrap:wrap}
  #hist .sec-head{align-items:last baseline}
  #hist .sec-head p{margin:0}
}
@media(min-width:861px){
  #hist .panel{grid-template-areas:"h h" "b v"}
  #hist .panel h3{max-width:none;white-space:nowrap}
}
@media(max-width:860px){
  #hist .tab{min-height:42px;padding:0 16px}
  #hist .tab[aria-selected=true]{background:var(--blue);border-color:var(--blue)}
  #hist .panel{grid-template-areas:"h" "b" "v";grid-template-rows:auto}
  #hist .vid2{margin-top:6px!important}
}

#hist .vid2{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
#hist .beat .say2{font-style:normal}
#hist .tw{display:grid}
#hist .tw>span{grid-area:1/1;min-width:0}
#hist .tw-g{visibility:hidden}
#hist .tw-c{display:inline-block;width:2px;height:1.05em;margin:0 -4px 0 2px;vertical-align:-3px;border-radius:1px;
  background:var(--halo);animation:blink 1s steps(2) infinite}
#hist .beat:not(:last-child)::after{border-left:0;width:1px;left:15px;
  background:repeating-linear-gradient(180deg,rgba(143,187,255,.5) 0 4px,transparent 4px 8px);background-size:1px 8px;
  animation:dashflow .9s linear infinite}
@keyframes dashflow{to{background-position:0 8px}}
#hist .tab{transition:background .2s,color .2s,box-shadow .2s,border-color .2s,transform .2s}
#hist .tab .ico{transition:transform .2s,opacity .2s}
#hist .tab:hover,#hist .tab:focus-visible{color:#fff;border-color:color-mix(in srgb,var(--halo) 60%,transparent);
  background:color-mix(in srgb,var(--blue) 16%,var(--night-3));transform:translateY(-2px)}
#hist .tab[aria-selected=true]:hover,#hist .tab[aria-selected=true]:focus-visible{background:var(--blue);border-color:var(--blue)}
#hist .tab:hover .ico,#hist .tab:focus-visible .ico{opacity:1;transform:translate(1px,-1px) scale(1.12)}
#hist .tab .ico *{transform-box:fill-box;transform-origin:50% 50%}
#tab0.pop .ico path:last-child{animation:icPlus .7s cubic-bezier(.3,1.4,.5,1)}
#tab1.pop .ico{animation:icStar .8s cubic-bezier(.3,1.2,.5,1)}
#tab2.pop .ico{animation:icRocket .8s cubic-bezier(.4,0,.3,1)}
#tab3.pop .ico g path:last-child{stroke-dasharray:22;animation:icDraw .8s ease-out}
#tab4.pop .ico g path:last-child{stroke-dasharray:30;animation:icDraw .9s ease-out}
#tab5.pop .ico{animation:icShout .7s ease-in-out}
#tab6.pop .ico{animation:icBubble .7s cubic-bezier(.3,1.3,.5,1)}
@keyframes icPlus{40%{transform:rotate(90deg) scale(1.35)}100%{transform:rotate(180deg)}}
@keyframes icStar{45%{transform:rotate(144deg) scale(1.3)}100%{transform:rotate(360deg)}}
@keyframes icRocket{35%{transform:translate(4px,-4px) scale(.9)}36%{transform:translate(-4px,4px) scale(.9);opacity:0}60%{opacity:1}100%{transform:none}}
@keyframes icDraw{from{stroke-dashoffset:22}to{stroke-dashoffset:0}}
@keyframes icShout{20%{transform:rotate(-14deg) scale(1.12)}40%{transform:rotate(10deg) scale(1.12)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}
@keyframes icBubble{30%{transform:translateY(-4px) scale(1.08,.94)}55%{transform:translateY(0) scale(.94,1.06)}75%{transform:translateY(-1px)}}

#hist .panel h3 .w{display:inline-block;transform-origin:50% 100%}
#hist .panel.swap h3 .w{animation:wordIn .6s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--i) * 55ms)}
@keyframes wordIn{0%{opacity:0;transform:translateY(.55em) rotateX(-70deg) scale(.96);filter:blur(8px);color:var(--halo)}
  60%{opacity:1;filter:blur(0);color:#BFD8FF}100%{opacity:1;transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){#hist .panel h3 .w,#hist .beat::after,#hist .tw-c,#hist .tab .ico,#hist .tab .ico *{animation:none!important}}

@media(max-width:860px){
  #hist .panel{grid-template-areas:"h" "v" "b";padding:16px 16px 6px}
  #hist .vid2{margin-top:12px!important;border-radius:14px}
  #hist .beats{margin-top:14px}
  #hist .beat{padding:0 0 12px;column-gap:12px;row-gap:2px;grid-template-columns:28px minmax(0,1fr)}
  #hist .beat::before{width:26px;height:26px;font-size:13px}
  #hist .beat:not(:last-child)::after{left:13px;top:30px}
  #hist .beat i{padding-top:7px;font-size:10px}
  #hist .beat p{font-size:14.5px!important;line-height:1.42}
  #hist .beat .say2{margin:8px 0 2px;padding:8px 12px;font-size:14px!important;line-height:1.38}
}

#hist,#pilares,#team,#apps,#trust{isolation:isolate}
.side-fx{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;pointer-events:none;z-index:-1}
.side-fx i{position:absolute;top:18%;width:min(560px,46vw);height:min(640px,80%);display:block;
  background:radial-gradient(closest-side,rgba(47,130,255,.30),rgba(60,203,255,.12) 55%,transparent)}
.side-fx i::before{content:"";position:absolute;inset:0;opacity:.7;
  background-image:linear-gradient(rgba(143,187,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(143,187,255,.16) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 100%);mask-image:radial-gradient(closest-side,#000 20%,transparent 100%)}
.side-fx.l i{left:0;translate:-52% 0}
.side-fx.r i{right:0;translate:52% 0}
@media(max-width:820px){.side-fx i{width:340px;height:420px;opacity:.75}.side-fx i::before{background-size:36px 36px}}

#flow .fcard .fvis{aspect-ratio:auto!important;max-width:none;width:100%}
@media(min-width:821px) and (max-width:999px){#flow .fcard .fvis{max-width:760px}}
@media(min-width:1000px){
  #flow .fcard{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)!important;column-gap:clamp(36px,4.5vw,80px)!important}
  #flow .fcard:first-child{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)!important}
  #flow .fcard h3{font-size:clamp(28px,2.7vw,40px)}
}

.tcard h3,#pilares .step h3,#team .pane h3,#flow .fcard h3{color:#fff;font-weight:600}
.tcard>p,#pilares .step p,#team .pane p,.sec-head:not(.rest) p:not(.rest-k),#flow .fcard p,#flow .step p{color:#8F9BB1}
#flow .fcard p .n2k{color:#fff}
/* every small button inside the blocks is live */
#pilares .mas div a{padding:9px 15px;border:1px solid var(--line-n);border-radius:999px;background:rgba(255,255,255,.025);font:600 14px var(--font);color:#DCE4F0;
  text-decoration:none;transition:border-color .2s,background .2s,color .2s,transform .2s}
#pilares .mas:not(.fxp-mas) div a:hover,#pilares .mas:not(.fxp-mas) div a:focus-visible{color:#fff;border-color:color-mix(in srgb,var(--halo) 60%,transparent);background:rgba(30,123,255,.14);transform:translateY(-2px)}
#pilares .mas div a:focus-visible{outline:2px solid var(--halo);outline-offset:3px}
.tcard .mini .chips button{padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;font:600 13px var(--font);cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s}
.tcard .mini button{cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.tcard .mini button:hover,.tcard .mini .chips button:hover{border-color:color-mix(in srgb,var(--halo) 65%,transparent);background:rgba(47,130,255,.14)!important;transform:translateY(-1px)}
.tcard .mini button:active{transform:scale(.97)}
.tcard .mini .chips button[aria-pressed=true]{background:var(--blue)!important;border-color:var(--blue)}
.tcard .mini .off{color:#8F9BB1}
.tcard .mini .ok.off::before{background:#5B6476}
.tcard .mini .row.warn button{border-color:rgba(255,120,120,.6);color:#FFB4B4!important}
.tcard .mini .row.warn span{color:#FFD0D0}


html body .sec-head h2{font-size:clamp(29px,4.2vw,46px)}
html body #flow .fcard h3{font-size:clamp(29px,2.9vw,37px)}
html body #hist .panel h3{font-size:clamp(23px,2.4vw,29px)}
html body #pilares .step h3,html body #team .pane h3{font-size:clamp(21px,2vw,24px)}
html body .tcard h3{font-size:19.5px}
@media(min-width:1000px){html body #flow .fcard h3{font-size:clamp(31px,3vw,44px)}}
@media(max-width:600px){
  html body .sec-head h2{font-size:35px}
  html body #pilares .step h3,html body #team .pane h3{font-size:21.5px}
  html body .tcard h3{font-size:21.5px}
}



@keyframes fxtChipIn{from{opacity:0;scale:.88;filter:blur(4px)}to{opacity:1;scale:1;filter:none}}
@media(prefers-reduced-motion:no-preference){
html:not(.nojs) .hero .stage.qv .chip{
  animation:fxtChipIn .34s cubic-bezier(.2,.75,.25,1) backwards,bob var(--bt,7s) ease-in-out var(--bd,0s) infinite;
  animation-delay:calc(var(--qd,0ms) + 180ms + var(--ci,0) * 100ms),var(--bd,0s)}
@media(max-width:820px){
  html:not(.nojs) .hero .stage.qv .chip{animation:fxtChipIn .3s cubic-bezier(.2,.75,.25,1) backwards;
    animation-delay:calc(var(--qd,0ms) + 120ms + var(--ci,0) * 80ms)}
}
}

@media(max-width:820px){
  html body #flow .fcard .fvis{width:calc(100% + var(--pad) * 2);max-width:none;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
}
@media(min-width:821px) and (max-width:999px){html body #flow .fcard .fvis{max-width:none}}
@media(min-width:1000px){
  html body #flow .fcard{--fxt-b:clamp(0px,calc((100vw - min(100vw - var(--pad) * 2,var(--w))) / 2 - 32px),40px);
    grid-template-columns:minmax(0,1fr) minmax(0,2.25fr)!important;column-gap:clamp(32px,3.4vw,56px)!important}
  html body #flow .fcard:first-child{grid-template-columns:minmax(0,2.25fr) minmax(0,1fr)!important}
  html body #flow .fcard .fvis{width:calc(100% + var(--fxt-b))}
  html body #flow .fcard:first-child .fvis{margin-left:calc(var(--fxt-b) * -1)}
}



@media(prefers-reduced-motion:no-preference){
html:not(.nojs) :is(.hero,.end)>:is(.hlite,.grid-bg,.grid-fx),html:not(.nojs) .hero::before{
  transition:opacity .7s cubic-bezier(.4,0,.2,1)}
}



.hlq{background:linear-gradient(90deg,var(--acc) 0%,#5CC8FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:700;padding-bottom:.12em}
.chip .mic{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);margin-right:8px;box-shadow:0 0 0 4px rgba(91,255,168,.15);vertical-align:middle}
.nq{padding-block:clamp(72px,10vw,128px);position:relative}
.nq .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,48px)}
.nq .wrap>*{min-width:0}
.nq h2{text-wrap:balance}
.nq .lead{color:var(--dim);font-size:clamp(17px,1.6vw,20px);max-width:60ch;line-height:1.55;margin:0}
.dolor-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.dolor-g.cuatro{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.dolor-g.dos{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.dolor-g .caja{padding:28px 26px;border:1px solid var(--line-n);border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));display:grid;gap:10px;align-content:start;min-width:0}
.dolor-g .caja h3{margin:0;font-size:clamp(20px,2vw,24px);line-height:1.2;color:#fff;font-weight:600}
.dolor-g .caja p{margin:0;color:var(--dim);line-height:1.55}
.ico-c{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#7FB2FF;background:rgba(47,130,255,.14);border:1px solid rgba(47,130,255,.35)}
.ico-c svg{width:22px;height:22px}
.desliza{justify-self:center;display:inline-flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px;color:var(--dim);text-decoration:none;font-size:15px;letter-spacing:.02em}
.desliza svg{width:22px;height:22px;animation:baja 1.8s ease-in-out infinite}
.desliza:hover{color:#fff}
@keyframes baja{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.desliza svg{animation:none}}
.dolor-g blockquote{margin:0;padding:26px 24px;border:1px solid var(--line-n);border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));font-size:19px;line-height:1.45;color:#fff}
.dolor-g blockquote span{display:block;margin-top:12px;font-size:13px;color:var(--dim);letter-spacing:.04em}
.pasos-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;counter-reset:p}
.paso{padding:28px 24px;border-radius:var(--r-lg);background:var(--night-2);border:1px solid var(--line-n);display:grid;gap:10px;align-content:start}
.paso::before{counter-increment:p;content:"0" counter(p);font-family:var(--label);color:var(--blue-soft);font-size:14px;letter-spacing:.12em}
.paso h3{margin:0;font-size:22px}
.paso p{margin:0;color:var(--dim);line-height:1.5}
.audio-demo{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;background:rgba(47,130,255,.12);border:1px solid rgba(47,130,255,.35);justify-self:start;max-width:100%;flex-wrap:wrap;border-radius:22px}
.audio-demo span{min-width:0}
.audio-demo .bars{display:flex;gap:3px;align-items:center;height:22px}
.audio-demo .bars i{width:3px;border-radius:2px;background:var(--blue-soft);animation:nqbar 1.1s ease-in-out infinite}
.audio-demo .bars i:nth-child(odd){animation-delay:.2s}.audio-demo .bars i:nth-child(3n){animation-delay:.45s}
@keyframes nqbar{0%,100%{height:5px}50%{height:20px}}
@media (prefers-reduced-motion:reduce){.audio-demo .bars i{animation:none;height:12px}}
.audio-demo small{color:var(--dim);font-variant-numeric:tabular-nums}
.aldia{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:820px){.aldia{grid-template-columns:1fr}}
.sabias{display:grid;gap:12px}
.sabias div{padding:16px 18px;border-radius:16px;background:var(--night-2);border:1px solid var(--line-n);line-height:1.45}
.sabias b{color:var(--acc);font-weight:600}
.vid-g.seis{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:900px){.vid-g.seis{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.vid-g.seis{grid-template-columns:minmax(0,1fr)}}
.vid-g.seis .vslot{aspect-ratio:4/3}
.dolor-g .caja.con{border-color:rgba(47,130,255,.5);background:radial-gradient(120% 80% at 50% 0%,rgba(47,130,255,.2),transparent 65%),var(--night-2)}
.vid-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.vslot{aspect-ratio:4/5;max-width:100%;border-radius:var(--r-lg);border:1px dashed var(--line-n);background:radial-gradient(120% 80% at 50% 0%,rgba(47,130,255,.18),transparent 60%),var(--night-2);display:grid;align-content:end;padding:20px;gap:6px}
.vslot b{font-size:18px}.vslot span{color:var(--dim);font-size:14px;line-height:1.4}
.vslot em{font-style:normal;font-family:var(--label);font-size:11px;letter-spacing:.14em;color:var(--blue-soft)}
.nota-p{font-size:13px;color:var(--dim)}
.borrador{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;font:600 12px/1 var(--font);padding:9px 12px;border-radius:999px;background:rgba(6,11,20,.85);border:1px solid var(--line-n);color:var(--dim);backdrop-filter:blur(8px)}

@media (hover:hover) and (pointer:fine){
  .lit{position:relative}
  .lit::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    opacity:0;transition:opacity .3s;z-index:0;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
      color-mix(in srgb,var(--halo) 17%,transparent),transparent 62%)}
  .lit:hover::after{opacity:1}
  .lit>*{position:relative;z-index:1}
}
@media(prefers-reduced-motion:reduce){.lit::after{display:none}}
.both{background:var(--night);border-top:1px solid rgba(255,255,255,.08);isolation:isolate}
.plans{display:grid;gap:14px;margin-top:44px;align-items:stretch}
@media(min-width:900px){.plans{grid-template-columns:.84fr 1fr 1fr}}
.plan,.both-grid div{border:1px solid color-mix(in srgb,var(--halo) 38%,transparent);
  background:linear-gradient(180deg,#050d19 0%,#050d19 30%,#050f35 100%);
  box-shadow:0 14px 36px rgba(0,0,0,.35),0 0 26px color-mix(in srgb,var(--halo) 18%,transparent);
  transition:border-color .25s,box-shadow .25s}
.plan{border-radius:var(--r-lg);padding:24px 24px 26px;min-width:0;display:flex;flex-direction:column}
.plan.pick{border-color:color-mix(in srgb,var(--halo) 60%,transparent);
  background:radial-gradient(120% 60% at 50% 125%,rgba(47,130,255,.32),transparent 70%),
             linear-gradient(180deg,#050d19 0%,#050d19 30%,#050f35 100%);
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 34px color-mix(in srgb,var(--halo) 28%,transparent)}
@media(hover:hover) and (pointer:fine){
  .plan:hover,.both-grid div:hover{border-color:color-mix(in srgb,var(--halo) 60%,transparent);
    box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 34px color-mix(in srgb,var(--halo) 28%,transparent)}
}
.plan .tag{font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--halo)}
.plan h2{margin-top:12px;font-size:clamp(21px,2vw,24px);line-height:1.2;color:#fff;font-weight:600}
.plan .price{margin-top:14px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.plan .price b{font-size:clamp(30px,3.4vw,38px);font-weight:600;letter-spacing:-.02em}
.plan .price i{font-style:normal;color:var(--dim);font-size:14px}
.plan .who{margin-top:9px;color:#8F9BB1;font-size:15.5px;line-height:1.55}
.feats{margin:20px 0 24px;padding:0;display:grid;gap:10px}
.feats li{list-style:none;display:flex;gap:10px;color:#C3CEDE;font-size:15px;line-height:1.5}
.feats li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:5px;
  background:color-mix(in srgb,var(--acc) 22%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5' fill='none' stroke='%235BFFA8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  border:1px solid color-mix(in srgb,var(--acc) 55%,transparent)}
.plan .btn{margin-top:auto;align-self:flex-start}
.both-head{display:flex;align-items:center;justify-content:space-between;gap:24px}
.both-grid{display:grid;gap:14px;margin-top:44px}
@media(min-width:720px){.both-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.both-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.both-grid div{border-radius:var(--r-lg);padding:24px 22px 26px;min-width:0}
.both-grid b{display:block;font-size:19.5px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:#fff}
.both-grid p{margin-top:9px;color:#8F9BB1;font-size:15.5px;line-height:1.55}
@media(max-width:600px){.lbl,.plan .tag{font-size:12px}.plan{padding:20px 18px 22px}.plan h2{font-size:21.5px}.plan .who,.feats li{font-size:16.5px}.both-grid div{padding:18px 18px 20px}.both-grid b{font-size:21.5px}.both-grid p{font-size:16.5px}.plan .btn{align-self:stretch}.both-head{flex-direction:column-reverse;align-items:flex-start;gap:14px}}
.plan .ideal{margin:-6px 0 22px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--halo) 22%,transparent);color:#A9B6CA;font-size:14.5px;line-height:1.5}
.plan.trial .who{margin-bottom:22px}
.plan.trial h2 .hl{display:inline-block;padding:0 .08em .12em 0;margin:0 -.08em -.12em 0}
@media(min-width:900px){.plans{grid-template-columns:1fr 1fr}
  .plan.trial{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:center}
  .plan.trial .tag,.plan.trial h2,.plan.trial .who{grid-column:1}
  .plan.trial .who{margin-bottom:0;max-width:62ch}
  .plan.trial .btn{grid-column:2;grid-row:1/4;margin-top:0;align-self:center}
  
  .plan:not(.trial){display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .plan:not(.trial) .ideal{align-self:start}
  .plan:not(.trial) .feats{align-content:start}   }
#planes .note{display:flex;gap:18px;flex-wrap:wrap;color:var(--dim);margin-top:14px}


@media(prefers-reduced-motion:no-preference){
  html:not(.nojs) .sec-head.rev:not(.rest){opacity:1;transform:none}
  html:not(.nojs) .sec-head:not(.rest)>.lbl{display:inline-block}
  html:not(.nojs) .sec-head:not(.rest)>:is(.lbl,p){transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--fxa-d,0ms),
    translate .9s cubic-bezier(.16,1,.3,1) var(--fxa-d,0ms),filter .9s cubic-bezier(.16,1,.3,1) var(--fxa-d,0ms)}
  html:not(.nojs) .sec-head:not(.rest)>:is(.lbl,p):not(.fxa-on){opacity:0;translate:0 26px;filter:blur(6px)}
  /* the light section (FAQ): the words came in blue, went almost white (#BFD8FF) on the white background and
     only then turned dark, so the title blinked. Here they settle from the brand blue straight into the ink. */
  html:not(.nojs) .pale .sec-head h2.qv .qw:not(#fxa){animation-name:wordInPale}
  /* FAQ questions come in one after another, right after the title */
  html:not(.nojs) .faq-sec .faq.rev{opacity:1;transform:none}
  html:not(.nojs) .faq-sec details{transition:border-color .2s,box-shadow .2s,
    opacity .8s cubic-bezier(.16,1,.3,1) var(--fxa-d,0ms),translate .8s cubic-bezier(.16,1,.3,1) var(--fxa-d,0ms)}
  html:not(.nojs) .faq-sec details:not(.fxa-on){opacity:0;translate:0 18px}
  html:not(.nojs) .fxa-now{transition:none!important}
}
@keyframes wordInPale{0%{opacity:0;transform:translateY(.55em) rotateX(-70deg) scale(.96);filter:blur(8px);color:var(--blue)}
  60%{opacity:1;filter:blur(0);color:#24324D}100%{opacity:1;transform:none;filter:none}}
/* while a question is closing, its arrow already turns back */
.faq-sec details.fxa-shut summary::after{rotate:45deg;translate:0 -60%}



html body :is(.btn,.langsw,#hist .tab,.chip,.app,#pilares a.fxp-pill,#pilares a.fxp-plus,#pilares .fxp-c,
  #trust .qmsg-k button,#trust .tcard .mini .row button,#trust .tcard .mini .chips button){
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,
    transform .2s ease,translate .2s ease,scale .12s ease}
/* the site buttons */
html body :is(.btn.btn-g,.langsw,#hist .tab){background:transparent;border:1px solid var(--line-n);color:#fff}
html body .pale .btn.btn-g{color:var(--ink);border-color:var(--line)}
html body :is(.btn.btn-p,#hist .tab[aria-selected=true]){background:var(--blue);border-color:var(--blue);color:#fff}
html body :is(.btn.btn-p:not(.glow),#hist .tab[aria-selected=true]){box-shadow:0 10px 30px rgba(47,130,255,.42)}
@media(hover:hover){
  html body :is(.btn.btn-g,.langsw,#hist .tab):hover{color:#fff;transform:none;translate:0 -2px;
    border-color:color-mix(in srgb,var(--halo) 60%,transparent);background:color-mix(in srgb,var(--blue) 16%,var(--night-3))}
  html body .pale .btn.btn-g:hover{color:var(--ink);background:rgba(47,130,255,.08)}
  html body :is(.btn.btn-p,#hist .tab[aria-selected=true]):hover{background:var(--blue-h);border-color:var(--blue-h);transform:none;translate:0 -2px}
  html body :is(.btn.btn-p:not(.glow),#hist .tab[aria-selected=true]):hover{box-shadow:0 14px 36px rgba(47,130,255,.55)}
}
html body :is(.btn,.langsw,#hist .tab,#hist .tab[aria-selected=true]):active{transform:none;translate:0 0;scale:.97}
html body :is(.btn,.langsw,#hist .tab):focus-visible{transform:none;outline:2px solid var(--halo);outline-offset:3px}
/* Trust: the mock buttons join the same system (the old rules here use !important, so these do too) */
html body #trust :is(.qmsg-k button,.tcard .mini .row button,.tcard .mini .chips button){
  display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  border-radius:999px!important;border:1px solid var(--line-n)!important;background:transparent!important;
  color:#fff!important;box-shadow:none!important;transform:none;font:700 13.5px/1.1 var(--font);letter-spacing:0}
html body #trust .qmsg-k button{min-height:40px;padding:0 16px;font-size:14px}
html body #trust :is(.tcard .mini .row button,.tcard .mini .chips button){min-height:34px;padding:0 14px}

html body #trust :is(.qmsg-k button.go,.tcard .mini .row:has(.off) button,.tcard .mini .chips button[aria-pressed=true]){
  background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important;
  box-shadow:0 6px 18px rgba(47,130,255,.38)!important}
/* "Yes, delete": still a secondary, with the soft red it already had, so the one step that cannot be
   undone never looks like the blue yes you tap by reflex */
html body #trust .tcard .mini .row.warn button{border-color:rgba(255,120,120,.6)!important;color:#FFB4B4!important}
html body #trust .tcard .qmsg .qmsg-k button.done{opacity:1;background:color-mix(in srgb,var(--acc) 16%,transparent)!important;
  border-color:color-mix(in srgb,var(--acc) 45%,transparent)!important;color:#fff!important;box-shadow:none!important}
html body #trust .qmsg-k button:disabled{cursor:default}
@media(hover:hover){
  html body #trust :is(.qmsg-k button,.tcard .mini .row button,.tcard .mini .chips button):not(:disabled):hover{transform:none;translate:0 -2px;
    border-color:color-mix(in srgb,var(--halo) 60%,transparent)!important;background:color-mix(in srgb,var(--blue) 16%,var(--night-3))!important}
  html body #trust :is(.qmsg-k button.go,.tcard .mini .row:has(.off) button,.tcard .mini .chips button[aria-pressed=true]):not(:disabled):hover{
    background:var(--blue-h)!important;border-color:var(--blue-h)!important;box-shadow:0 10px 26px rgba(47,130,255,.5)!important}
  html body #trust .tcard .mini .row.warn button:hover{border-color:rgba(255,120,120,.85)!important;background:rgba(255,77,94,.14)!important}
}
html body #trust :is(.qmsg-k button,.tcard .mini .row button,.tcard .mini .chips button):not(:disabled):active{transform:none;translate:0 0;scale:.97}
html body #trust :is(.qmsg-k button,.tcard .mini .row button,.tcard .mini .chips button):focus-visible{outline:2px solid var(--halo);outline-offset:3px}
/* the other things you can tap (hero prompts, use-case pills, the +, the app tiles, the client list)
   keep their own look but move the same: 2px lift, .97 press, the same blue focus ring */
@media(hover:hover){
  html body .app:hover{transform:translateY(-2px)}
  html body #pilares .mas .fxp-pills a.fxp-plus:hover{translate:0 -2px}
}
html body :is(.chip,.app,#pilares .mas .fxp-pills a.fxp-pill,#pilares .mas .fxp-pills a.fxp-plus,#pilares .fxp-c):active{transform:none;translate:0 0;scale:.97}
html body :is(.app,#pilares a.fxp-plus):focus-visible{outline:2px solid var(--halo);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  html body :is(.btn,.langsw,#hist .tab,#pilares a.fxp-plus,#trust .qmsg-k button,#trust .tcard .mini button):hover{translate:none!important}
}


.qiuj-mascot{position:relative;width:100%;max-width:420px;aspect-ratio:300/305;margin-inline:auto;
  --qiuj-glow:rgba(30,90,255,.22);--shadow-ink:rgba(0,8,40,.45);
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.qiuj-mascot::before{content:"";position:absolute;inset:-10%;background:radial-gradient(ellipse 45% 45% at 50% 48%,var(--qiuj-glow),transparent 70%);opacity:var(--amb,1);pointer-events:none}
.qiuj-mascot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.qiuj-mascot #qiuj-body{cursor:pointer}



@media(min-width:821px){ html body #flow .fcards{margin-top:clamp(64px,7vw,112px)} }
@media(prefers-reduced-motion:no-preference){
  /* the light and squares behind "Focus on what matters" come in with that text, not before it */
  html:not(.nojs) body #flow .flow-fx{opacity:0;transition:opacity 1s cubic-bezier(.4,0,.2,1)}
  html:not(.nojs) body #flow .flow-fx.fxon{opacity:1}
  /* "Built to be trusted": the cards come in after their title */
  html:not(.nojs) body #trust:not(.tgo) .tcard.rev.on{opacity:0;transform:translateY(30px)}
  html:not(.nojs) body #trust:not(.tdone) .tcard.rev.on{transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--d,0ms),transform .9s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
}



html body #hist{border-top:0}

html body #hist{background:transparent}
html body #flow .fcards{margin-top:0}



html body #team .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:44px}
@media(max-width:760px){html body #team .duo{grid-template-columns:1fr;margin-top:28px}}
html body #team .pane{display:flex;flex-direction:column;align-items:flex-start;padding:28px 28px 26px;border-radius:22px;
  background:linear-gradient(180deg,rgba(18,30,56,.72),rgba(9,15,28,.82));border:1px solid rgba(143,187,255,.16);box-shadow:0 14px 34px rgba(0,0,0,.3)}
html body #team .pane p{margin-bottom:24px}
html body #team .tm-ok{margin-top:auto;display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:999px;
  font:600 14px/1.3 var(--font);color:#DCE6F5;background:rgba(6,11,20,.6);border:1px solid rgba(255,255,255,.08)}
html body #team .tm-ok i{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 22%,transparent)}
html body #team .tm-ok svg{width:12px;height:12px;fill:none;stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){html body #team .pane{padding:22px 20px}html body #team .tm-ok{font-size:13.5px}}



html body section#hist{color:var(--ink);border-top:0;
  background:
    radial-gradient(60% 55% at 8% 30%,rgba(47,130,255,.10),transparent 70%),
    radial-gradient(50% 50% at 92% 18%,rgba(140,120,255,.08),transparent 70%),
    radial-gradient(55% 60% at 80% 95%,rgba(60,203,255,.08),transparent 70%),
    linear-gradient(180deg,#F3F6FC,#EEF2FA)}
html body section#hist::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(31,99,224,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(31,99,224,.07) 1px,transparent 1px);
  background-size:32px 32px;background-position:center top;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 45%,#000 10%,transparent 85%);mask-image:radial-gradient(75% 70% at 50% 45%,#000 10%,transparent 85%)}
html body section#hist{position:relative;z-index:1}
html body section#hist .vid2{background:#EEF2FA}
html body section#hist .side-fx i{background:radial-gradient(closest-side,rgba(47,130,255,.16),rgba(60,203,255,.06) 55%,transparent)}
html body section#hist .side-fx i::before{background-image:linear-gradient(rgba(31,99,224,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(31,99,224,.13) 1px,transparent 1px)}
html body section#hist .sec-head .lbl{color:var(--blue-brand)}
html body section#hist h2{color:var(--ink)}
html body section#hist h2 .hl{background-image:linear-gradient(90deg,#1F63E0,#2F82FF)}
html body section#hist .sec-head p{color:#4A5466}
/* tabs */
html body section#hist .tab{background:#fff;border-color:#DCE3EE;color:var(--ink);box-shadow:0 2px 10px rgba(11,18,32,.04)}
html body section#hist .tab:hover,html body section#hist .tab:focus-visible{color:var(--ink);background:#fff;border-color:rgba(47,130,255,.45);box-shadow:0 6px 18px rgba(47,130,255,.14)}
html body section#hist .tab[aria-selected=true],html body section#hist .tab[aria-selected=true]:hover{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(47,130,255,.32)}
/* card */
html body section#hist .panel{border:1px solid #DFE6F1;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,250,255,.88));
  box-shadow:0 1px 0 #fff inset,0 24px 60px rgba(31,60,120,.08)}
html body section#hist .panel h3{color:var(--ink)}
html body section#hist .beat::before{color:var(--blue-brand);background:#EEF4FF;border-color:#C9DAF8;box-shadow:none}
html body section#hist .beat:not(:last-child)::after{background:repeating-linear-gradient(180deg,rgba(31,99,224,.35) 0 4px,transparent 4px 8px);background-size:1px 8px}
html body section#hist .beat i{color:var(--blue-brand)}
html body section#hist .beat p{color:#4A5466}
html body section#hist .beat .say2{background:#EEF3FB;color:var(--ink);border-left-color:var(--blue)}
html body section#hist .say2 small{color:#6B7486}
html body section#hist .vid2{border-color:rgba(47,130,255,.35);box-shadow:0 18px 50px rgba(31,60,120,.18)}
html body section#hist .tw-c{background:var(--blue)}



@media(prefers-reduced-motion:no-preference){
  html:not(.nojs) section#hist .sec-head h2.qv .qw:not(#fxa){animation-name:wordInPale}
  html body section#hist .panel.swap h3 .w{animation-name:wordInPale}
}
@media(max-width:860px){
  html body section#hist .tabs{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));
    padding-left:var(--pad);padding-right:var(--pad);scroll-padding-inline:var(--pad);--fl:0px;--fr:0px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
  html body section#hist .tabs.fx-l{--fl:44px}
  html body section#hist .tabs.fx-r{--fr:44px}
}
html body section#faq{position:relative;z-index:1;isolation:isolate;color:var(--ink);
  background:
    radial-gradient(60% 55% at 8% 30%,rgba(47,130,255,.10),transparent 70%),
    radial-gradient(50% 50% at 92% 18%,rgba(140,120,255,.08),transparent 70%),
    radial-gradient(55% 60% at 80% 95%,rgba(60,203,255,.08),transparent 70%),
    linear-gradient(180deg,#F3F6FC,#EEF2FA)}
html body section#faq::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(31,99,224,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(31,99,224,.07) 1px,transparent 1px);
  background-size:32px 32px;background-position:center top;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 45%,#000 10%,transparent 85%);mask-image:radial-gradient(75% 70% at 50% 45%,#000 10%,transparent 85%)}
html body section#faq details{border-color:#DFE6F1;box-shadow:0 1px 0 #fff inset,0 10px 30px rgba(31,60,120,.06)}


/* fx-perf-1510 (12-oct, phones stuttered on scroll): same look, cheaper to draw.
   1) The halo of the glow buttons animated box-shadow, which repainted the whole page 60 times a
      second (the header button is always on screen). The same halo is now drawn by layers that only
      change opacity and transform, which the compositor animates on its own. Blue button: ::before is
      the resting shadow, ::after the peak shadow, .qhr the ring that grows 14px and fades. Ghost button
      ("Open Telegram"): three shadows, tight, middle and wide, so the glow still grows out of the edge.
      The opacity steps below follow the old ease-in-out timing (sampled, then linear in between), and
      are fitted so the sum of the layers matches the old interpolated shadow.
      Only on phones and tablets, once the script below has added .qhr (html.qhalo); elsewhere the old animation stays. */
html.qhalo body .btn.glow{animation:none;box-shadow:none;position:relative;isolation:isolate}
html.qhalo body .btn.glow::before,html.qhalo body .btn.glow::after,html.qhalo body .btn.glow>.qhr{
  content:"";display:block;position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0}
html.qhalo body .btn-p.glow::before{box-shadow:0 10px 30px rgba(47,130,255,.42);opacity:1;animation:qhA 3.4s linear infinite}
html.qhalo body .btn-p.glow::after{box-shadow:0 14px 40px rgba(47,130,255,.62);animation:qhB 3.4s linear infinite}
html.qhalo body .btn-p.glow>.qhr{background:inherit;animation:qhR 3.4s ease-in-out infinite}
html.qhalo body .btn-g.glow::before,html.qhalo body .btn-g.glow::after,html.qhalo body .btn-g.glow>.qhr{inset:-1px}
html.qhalo body .btn-g.glow::before{box-shadow:0 0 4px .5px rgba(47,130,255,.38);animation:qhG1 3.4s linear infinite}
html.qhalo body .btn-g.glow>.qhr{box-shadow:0 0 11px 1px rgba(47,130,255,.34);animation:qhG2 3.4s linear infinite}
html.qhalo body .btn-g.glow::after{box-shadow:0 0 22px 2px rgba(47,130,255,.30);animation:qhG3 3.4s linear infinite}
@keyframes qhA{0%{opacity:1}2.5%{opacity:.997}5%{opacity:.989}7.5%{opacity:.974}10%{opacity:.953}12.5%{opacity:.924}15%{opacity:.889}17.5%{opacity:.847}20%{opacity:.798}22.5%{opacity:.742}25%{opacity:.681}27.5%{opacity:.616}30%{opacity:.547}32.5%{opacity:.476}35%{opacity:.406}37.5%{opacity:.337}40%{opacity:.27}42.5%{opacity:.208}45%{opacity:.151}47.5%{opacity:.1}50%{opacity:.056}52.5%{opacity:.021}55%{opacity:0}57.5%{opacity:.028}60%{opacity:.074}62.5%{opacity:.133}65%{opacity:.201}67.5%{opacity:.278}70%{opacity:.359}72.5%{opacity:.445}75%{opacity:.531}77.5%{opacity:.616}80%{opacity:.695}82.5%{opacity:.768}85%{opacity:.831}87.5%{opacity:.885}90%{opacity:.928}92.5%{opacity:.96}95%{opacity:.983}97.5%{opacity:.996}100%{opacity:1}}
@keyframes qhB{0%{opacity:0}2.5%{opacity:.004}5%{opacity:.016}7.5%{opacity:.037}10%{opacity:.067}12.5%{opacity:.106}15%{opacity:.154}17.5%{opacity:.211}20%{opacity:.276}22.5%{opacity:.347}25%{opacity:.422}27.5%{opacity:.5}30%{opacity:.578}32.5%{opacity:.653}35%{opacity:.724}37.5%{opacity:.789}40%{opacity:.846}42.5%{opacity:.894}45%{opacity:.933}47.5%{opacity:.963}50%{opacity:.984}52.5%{opacity:.996}55%{opacity:1}57.5%{opacity:.994}60%{opacity:.976}62.5%{opacity:.944}65%{opacity:.899}67.5%{opacity:.84}70%{opacity:.768}72.5%{opacity:.686}75%{opacity:.595}77.5%{opacity:.5}80%{opacity:.405}82.5%{opacity:.314}85%{opacity:.232}87.5%{opacity:.16}90%{opacity:.101}92.5%{opacity:.056}95%{opacity:.024}97.5%{opacity:.006}100%{opacity:0}}
@keyframes qhG1{0%{opacity:0}2.5%{opacity:.024}5%{opacity:.097}7.5%{opacity:.223}10%{opacity:.403}12.5%{opacity:.637}15%{opacity:.884}17.5%{opacity:.68}20%{opacity:.448}22.5%{opacity:.193}25%{opacity:0}27.5%{opacity:0}30%{opacity:0}32.5%{opacity:0}35%{opacity:0}37.5%{opacity:0}40%{opacity:0}42.5%{opacity:0}45%{opacity:0}47.5%{opacity:0}50%{opacity:0}52.5%{opacity:0}55%{opacity:0}57.5%{opacity:0}60%{opacity:0}62.5%{opacity:0}65%{opacity:0}67.5%{opacity:0}70%{opacity:0}72.5%{opacity:0}75%{opacity:0}77.5%{opacity:0}80%{opacity:0}82.5%{opacity:.309}85%{opacity:.606}87.5%{opacity:.863}90%{opacity:.608}92.5%{opacity:.337}95%{opacity:.147}97.5%{opacity:.036}100%{opacity:0}}
@keyframes qhG2{0%{opacity:0}2.5%{opacity:0}5%{opacity:0}7.5%{opacity:0}10%{opacity:0}12.5%{opacity:0}15%{opacity:.017}17.5%{opacity:.244}20%{opacity:.502}22.5%{opacity:.786}25%{opacity:.963}27.5%{opacity:.833}30%{opacity:.703}32.5%{opacity:.578}35%{opacity:.459}37.5%{opacity:.352}40%{opacity:.257}42.5%{opacity:.177}45%{opacity:.112}47.5%{opacity:.062}50%{opacity:.027}52.5%{opacity:.007}55%{opacity:0}57.5%{opacity:.01}60%{opacity:.041}62.5%{opacity:.094}65%{opacity:.169}67.5%{opacity:.267}70%{opacity:.386}72.5%{opacity:.524}75%{opacity:.675}77.5%{opacity:.833}80%{opacity:.992}82.5%{opacity:.657}85%{opacity:.327}87.5%{opacity:.041}90%{opacity:0}92.5%{opacity:0}95%{opacity:0}97.5%{opacity:0}100%{opacity:0}}
@keyframes qhG3{0%{opacity:0}2.5%{opacity:0}5%{opacity:0}7.5%{opacity:0}10%{opacity:0}12.5%{opacity:0}15%{opacity:0}17.5%{opacity:0}20%{opacity:0}22.5%{opacity:0}25%{opacity:.037}27.5%{opacity:.167}30%{opacity:.297}32.5%{opacity:.422}35%{opacity:.541}37.5%{opacity:.648}40%{opacity:.743}42.5%{opacity:.823}45%{opacity:.888}47.5%{opacity:.938}50%{opacity:.973}52.5%{opacity:.993}55%{opacity:1}57.5%{opacity:.99}60%{opacity:.959}62.5%{opacity:.906}65%{opacity:.831}67.5%{opacity:.733}70%{opacity:.614}72.5%{opacity:.476}75%{opacity:.325}77.5%{opacity:.167}80%{opacity:.008}82.5%{opacity:0}85%{opacity:0}87.5%{opacity:0}90%{opacity:0}92.5%{opacity:0}95%{opacity:0}97.5%{opacity:0}100%{opacity:0}}
@keyframes qhR{0%,100%{opacity:.45;transform:none}55%{opacity:0;transform:scale(var(--qhx,1.2),var(--qhy,1.6))}}
html.qhalo body .btn.glow.qh-off::before,html.qhalo body .btn.glow.qh-off::after,html.qhalo body .btn.glow.qh-off>.qhr{animation:none}
@media(prefers-reduced-motion:reduce){
  html.qhalo body .btn.glow::before,html.qhalo body .btn.glow::after,html.qhalo body .btn.glow>.qhr{animation:none}}
/* 2) The moving dashes of Use cases and the flowing lines of "For your business" repaint every frame:
      they hold still while their block is off screen (the class comes from the script below), and
      the dashes in the hidden use-case cards do not run at all. */
html body section#hist:not(.qpf-in) .beat:not(:last-child)::after{animation-play-state:paused}
html body section#hist .panel[hidden] .beat:not(:last-child)::after{animation:none}
html:not(.nojs) body section#pilares:not(.qpf-in) .fxp-card.on .fxp-links path{animation-play-state:paused}
/* 4) The light and the side glows: their layers stay their own size (both already clip what overflows),
      and on phones the light circles are not kept as permanent layers (they only move under a mouse). */
html body .hlite,html body .side-fx{contain:paint}
@media not all and (hover:hover) and (pointer:fine){html body .hlite i{will-change:auto}}
/* 6) Use cases: the quote types itself one letter at a time; each letter now only lays out the quote box */
html body section#hist .say2{contain:layout paint}


/* sin ventanas de escribir en la pantalla inicial; palabra rotando; Conócelo con BAJA */
.hero .chips-m,.hero .say-wrap,.hero .ring,.hero .hero-cta,.hero .hero-note{display:none!important}
.hero .stage{min-height:0}
.hero h1 .rot{display:inline-block;transition:opacity .28s ease}
.baja{display:flex;flex-direction:column;align-items:center;gap:10px;margin:26px auto 0;width:max-content;
  font-family:var(--label);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--dim);transition:color .2s}
.baja:hover{color:#fff}
.baja i{display:block;width:1px;height:38px;background:linear-gradient(180deg,var(--blue-soft),transparent);
  transform-origin:top;animation:bajaLinea 1.9s ease-in-out infinite}
@keyframes bajaLinea{0%{transform:scaleY(.2);opacity:.4}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:.2}}
@media(prefers-reduced-motion:reduce){.baja i{animation:none}}
/* beneficio al pie de cada tarjeta */
.dolor-g .caja .gana{margin-top:6px;padding-top:12px;border-top:1px solid var(--line-n);font-weight:700;color:var(--acc);font-size:15px}
/* hueco del vídeo de demostración */
#demo .vslot{aspect-ratio:16/9;max-width:980px;width:100%;margin-inline:auto;align-content:center;justify-items:center;text-align:center}
/* roadmap */
.road{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative;counter-reset:r}
.road li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px;padding-bottom:30px}
.road li:last-child{padding-bottom:0}
.road li::before{content:"";position:absolute;left:23px;top:48px;bottom:0;width:2px;background:var(--line-n)}
.road li:last-child::before{display:none}
.road li::after{content:"";position:absolute;left:23px;top:48px;bottom:0;width:2px;background:linear-gradient(180deg,var(--acc),var(--blue));
  transform:scaleY(0);transform-origin:top;transition:transform .7s ease .25s}
.road li.on::after{transform:scaleY(1)}
.road li:last-child::after{display:none}
.road .n{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-family:var(--label);font-weight:700;font-size:16px;
  color:var(--on-blue);background:var(--acc);box-shadow:0 0 0 6px rgba(91,255,168,.12),0 0 28px rgba(91,255,168,.25)}
.road h3{margin:2px 0 0;font-size:clamp(19px,2vw,24px)}
.road p{margin:6px 0 0;color:var(--dim);line-height:1.5;max-width:56ch}
@media(min-width:900px){
  .road{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:20px}
  .road li{grid-template-columns:minmax(0,1fr);row-gap:16px;padding:0;align-content:start}
  .road li::before,.road li::after{left:48px;right:-20px;top:23px;bottom:auto;width:auto;height:2px}
  .road li::after{transform:scaleX(0);transform-origin:left}
  .road li.on::after{transform:scaleX(1)}
}
@media(prefers-reduced-motion:reduce){.road li::after{transition:none;transform:none}}


/* tarjetas: el pie siempre a la misma altura */
.dolor-g.cuatro .caja{display:flex;flex-direction:column;align-content:normal}
.dolor-g.cuatro .caja p{margin-bottom:14px}
.dolor-g.cuatro .caja .gana{margin-top:auto}
.vslot-blanco{aspect-ratio:16/9;max-width:980px;width:100%;margin-inline:auto;border-style:dashed}
/* play del roadmap */
.audio-demo .play{flex:none;width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(47,130,255,.45);transition:transform .15s,background .2s}
.audio-demo .play:hover{background:var(--blue-h)}.audio-demo .play:active{transform:scale(.94)}
.audio-demo .play svg{width:20px;height:20px;margin-left:2px}
.audio-demo .play[disabled]{opacity:.6;cursor:default}
.road li{opacity:1}
.road.run li:not(.on):not(.now) h3,.road.run li:not(.on):not(.now) p{opacity:.35}
.road li h3,.road li p{transition:opacity .4s}
.road li.now .n{animation:roadPulse 1s ease-in-out infinite}
@keyframes roadPulse{0%,100%{box-shadow:0 0 0 6px rgba(91,255,168,.12),0 0 28px rgba(91,255,168,.25)}50%{box-shadow:0 0 0 12px rgba(91,255,168,.2),0 0 40px rgba(91,255,168,.5)}}
.road li .work{display:none;gap:4px;margin-top:8px}
.road li.now .work{display:flex}
.road li .work i{width:7px;height:7px;border-radius:50%;background:var(--acc);animation:tdot 1s ease-in-out infinite}
.road li .work i:nth-child(2){animation-delay:.15s}.road li .work i:nth-child(3){animation-delay:.3s}
@media(prefers-reduced-motion:reduce){.road li.now .n,.road li .work i{animation:none}}


/* pantalla completa por apartado */
:is(#dolor,#demo,#pasos,#hist,#confianza,#planes,#faq,#start){
  min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:96px}
/* la rejilla se funde hacia abajo en vez de cortarse en seco */
.hero .grid-bg,.hero .grid-fx{
  -webkit-mask-image:radial-gradient(820px 560px at 50% 34%,#000 12%,transparent 78%),linear-gradient(180deg,#000 0,#000 45%,transparent 88%);
  mask-image:radial-gradient(820px 560px at 50% 34%,#000 12%,transparent 78%),linear-gradient(180deg,#000 0,#000 45%,transparent 88%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hero .hlite{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 240px,#000 55%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 240px,#000 55%,transparent 100%)}
/* tarjetas: 4 en fila, 2x2 o 1 columna, nunca 3+1 */
.dolor-g.cuatro{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.dolor-g.cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.dolor-g.cuatro{grid-template-columns:minmax(0,1fr)}}
.dolor-g .caja .ej{list-style:none;margin:2px 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.dolor-g .caja .ej li{padding:5px 10px;border-radius:999px;font-size:13px;color:#DCE4F0;border:1px solid var(--line-n);background:rgba(47,130,255,.1)}


#pasos .wrap{position:relative}
.road-pop{position:absolute;z-index:6;left:50%;top:0;width:min(440px,calc(100% - 24px));
  transform:translate(-50%,-30px);opacity:0;pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .35s;
  border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(244,248,255,.95));color:var(--ink);
  border:1px solid rgba(20,50,110,.1);box-shadow:0 30px 70px rgba(0,10,40,.55),0 0 0 1px rgba(47,130,255,.25);padding:14px 14px 14px}
.road-pop.open{transform:translate(-50%,64px);opacity:1}
.rp-head{display:flex;align-items:center;gap:9px;padding:0 4px 10px;border-bottom:1px solid rgba(11,18,32,.07);margin-bottom:12px}
.rp-av{width:30px;height:30px;border-radius:50%;background:#050F35;display:grid;place-items:center;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #2A5BD7}
.rp-av svg{width:66%;height:66%}
.rp-head b{font-size:15px}.rp-head small{margin-left:auto;font-size:12px;color:#1FA463}
.road-pop p{margin:0;padding:8px 13px;border-radius:18px;font-size:15px;line-height:1.4}
.rp-me{display:flex;justify-content:flex-end}
.rp-me p{background:linear-gradient(180deg,#3468E3,#2A5BD7);color:#fff;border-bottom-right-radius:6px;max-width:88%}
.rp-typing,.rp-q{margin-top:8px;display:none}
.road-pop.typing .rp-typing{display:flex;gap:4px;padding:12px 14px;background:#E6ECF5;border-radius:18px;border-bottom-left-radius:6px;width:max-content}
.rp-typing i{width:7px;height:7px;border-radius:50%;background:#8E99AD;animation:tdot 1s ease-in-out infinite}
.rp-typing i:nth-child(2){animation-delay:.15s}.rp-typing i:nth-child(3){animation-delay:.3s}
.road-pop.asked .rp-q{display:block;animation:mIn .3s ease-out}
.rp-q p{background:#E6ECF5;color:#1A2333;border-bottom-left-radius:6px;max-width:92%}
.rp-ok{display:none;width:100%;margin-top:10px;min-height:46px;border:0;border-radius:14px;background:#2A5BD7;color:#fff;font:700 15px var(--font);
  cursor:default;transition:transform .15s,background .25s}
.road-pop.ask-ok .rp-ok{display:block;animation:mIn .3s ease-out}
.rp-ok .t2{display:none}
.rp-ok.press{transform:scale(.96);background:#1A4FD0}
.rp-ok.sent{background:#12A06F;transform:none}.rp-ok.sent .t1{display:none}.rp-ok.sent .t2{display:inline}
@media(prefers-reduced-motion:reduce){.road-pop{transition:none}}

#dolor .sec-head{max-width:none}#dolor .sec-head h2{max-width:none;text-wrap:balance}@media(min-width:760px){#dolor .sec-head h2{font-size:clamp(28px,3.6vw,46px)}}

/* reproductor: corto y con llamada a pulsar; el texto aparece al enviar; se encoge en el paso 2 */
#roadDemo{transition:transform .5s cubic-bezier(.2,.8,.2,1),padding .4s,font-size .4s;transform-origin:left center}
#roadDemo .cta{color:#DCE6FF;font-weight:600}
#roadDemo .txt{display:none}
#roadDemo.sent .cta,#roadDemo.mini .cta{display:none}
#roadDemo.sent .txt{display:inline;animation:mIn .4s ease-out}
#roadDemo.idle .bars,#roadDemo.idle small{display:none}
#roadDemo.idle .play{animation:rdPulse 1.8s ease-in-out infinite}
@keyframes rdPulse{0%,100%{box-shadow:0 6px 18px rgba(47,130,255,.45),0 0 0 0 rgba(47,130,255,.5)}60%{box-shadow:0 6px 18px rgba(47,130,255,.45),0 0 0 12px rgba(47,130,255,0)}}
#roadDemo.mini{transform:scale(.82);opacity:.85}
/* el audio entra en la conversacion del pop-up */
.rp-me{flex-direction:column;align-items:flex-end;gap:6px}
.rp-aud{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:18px;border-bottom-right-radius:6px;
  background:linear-gradient(180deg,#3468E3,#2A5BD7);color:#fff;transform:translateY(-34px);opacity:0}
.rp-pl{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center}
.rp-pl svg{width:14px;height:14px;margin-left:1px}
.rp-bars{display:flex;gap:3px;align-items:center;height:20px}
.rp-bars i{width:3px;border-radius:2px;background:#fff;height:8px;animation:nqbar 1.1s ease-in-out infinite}
.rp-bars i:nth-child(odd){animation-delay:.2s}.rp-bars i:nth-child(3n){animation-delay:.45s}
.rp-aud small{font-size:11.5px;opacity:.8}
.road-pop.voice .rp-aud{transform:none;opacity:1;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s}
.rp-me p{display:none}
.road-pop.asked .rp-me p{display:block;background:#EAF0FB;color:#1A2333;font-size:13px;opacity:.85}
@media(prefers-reduced-motion:reduce){.rp-bars i,#roadDemo.idle .play{animation:none}}


/* paso suave del hero (cuadrados) al bloque 2: el fondo se funde con el color de la página */
.hero{position:relative}
.hero .wrap{z-index:2}
.hero::before,.hero .hlite{bottom:0!important}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,11,20,0) 0,rgba(6,11,20,.55) 45%,rgba(6,11,20,.88) 75%,var(--night) 100%)}

#confianza .lead{max-width:62ch;font-size:16px}#confianza .wrap{gap:20px}#confianza .sec-head h2{font-size:clamp(26px,3vw,38px)}#confianza .caja{padding:20px 20px}#confianza .caja p{font-size:15px}#tiempo[hidden],#trust[hidden],#aldia[hidden]{display:none!important}

/* precios: que quepan en una pantalla */
#planes{padding-top:78px;padding-bottom:20px}
#planes .sec-head h2{font-size:clamp(24px,2.6vw,32px)}
#planes .sec-head p{font-size:14.5px;margin-top:8px}
#planes .sec-head .note{margin-top:6px}
#planes .plans{gap:12px}
#planes .plan{padding:16px 22px 18px}
#planes .plan h2{font-size:clamp(20px,2vw,24px)}
#planes .plan .price b{font-size:34px}
#planes .plan .who{font-size:14px;line-height:1.4;margin-top:6px}
#planes .plan .feats{margin:10px 0 8px;gap:5px}
#planes .plan .feats li{font-size:14px;line-height:1.35}
#planes .plan .ideal{font-size:13.5px;margin:8px 0 10px;padding-top:8px}
#planes .btn-xl{min-height:46px;font-size:15.5px}
#planes .plan.trial{padding:12px 22px}


#planes{padding-top:72px;padding-bottom:14px;min-height:0}
#planes .sec-head{max-width:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px}
#planes .sec-head .lbl{flex:0 0 100%}
#planes .sec-head h2{margin:0}
#planes .sec-head>p:not(.note){display:none}
#planes .sec-head .note{margin:0;display:flex;gap:14px;font-size:13.5px}
#planes .plans{margin-top:14px;gap:10px}
#planes .plan{padding:12px 20px 14px}
#planes .plan.trial{padding:10px 20px}
#planes .plan .tag{margin-bottom:6px}
#planes .plan .price b{font-size:30px}
#planes .plan .who{font-size:13.5px;margin-top:4px}
#planes .plan .feats{margin:8px 0 6px;gap:3px}
#planes .plan .feats li{font-size:13.5px;line-height:1.3}
#planes .plan .ideal{font-size:13px;margin:6px 0 8px;padding-top:6px}
#planes .btn-xl{min-height:42px;font-size:15px}

.nq .baja{justify-self:center}.nq .baja span{text-transform:uppercase}

/* Cómo funciona: pasos a la izquierda y un espacio fijo de conversación a la derecha */
#pasos .how-grid{display:grid;gap:28px;align-items:center}
@media(min-width:940px){#pasos .how-grid{grid-template-columns:minmax(0,1fr) minmax(340px,440px);gap:clamp(32px,5vw,72px)}}
.hw-steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.hw-steps li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding-bottom:22px}
.hw-steps li:last-child{padding-bottom:0}
.hw-steps li::before{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--line-n)}
.hw-steps li:last-child::before{display:none}
.hw-steps .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--label);font-weight:700;font-size:15px;
  color:var(--on-blue);background:var(--acc);box-shadow:0 0 0 6px rgba(91,255,168,.12);transition:opacity .4s,box-shadow .4s}
.hw-steps h3{margin:2px 0 0;font-size:clamp(18px,1.8vw,22px);transition:opacity .4s}
.hw-steps p{margin:4px 0 0;color:var(--dim);line-height:1.45;font-size:15px;max-width:52ch;transition:opacity .4s}
.hw-steps.run li:not(.on):not(.now) :is(h3,p,.n){opacity:.32}
.hw-steps li.now .n{animation:roadPulse 1s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.hw-steps li.now .n{animation:none}}
.hw-chat{width:100%;max-width:440px;height:480px;justify-self:center;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(244,248,255,.95));color:var(--ink);
  border:1px solid rgba(20,50,110,.1);box-shadow:0 30px 70px rgba(0,10,40,.5),0 0 0 1px rgba(47,130,255,.2)}
.hw-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(11,18,32,.07)}
.hw-av{width:34px;height:34px;border-radius:50%;background:#050F35;display:grid;place-items:center;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #2A5BD7}
.hw-av svg{width:66%;height:66%}
.hw-head b{font-size:15px}.hw-head small{margin-left:auto;font-size:12px;color:#1FA463}
.hw-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;padding:14px;overflow:hidden}
.hw-empty{margin:auto;text-align:center;display:grid;gap:12px;justify-items:center;padding:10px 6px}
.hw-empty h4{margin:0;font-size:20px}
.hw-empty p{margin:0;color:#4A5468;font-size:15px;line-height:1.45;max-width:30ch}
.hw-msg{max-width:88%;animation:mIn .3s ease-out}
.hw-msg.me{align-self:flex-end}.hw-msg.q{align-self:flex-start}
.hw-msg .b{padding:8px 13px;border-radius:18px;font-size:15px;line-height:1.4}
.hw-msg.me .b{background:linear-gradient(180deg,#3468E3,#2A5BD7);color:#fff;border-bottom-right-radius:6px}
.hw-msg.q .b{background:#E6ECF5;color:#1A2333;border-bottom-left-radius:6px}
.hw-voice{display:flex;align-items:center;gap:9px}
.hw-voice .pl{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center}
.hw-voice .pl svg{width:14px;height:14px;margin-left:1px}
.hw-voice .bars{display:flex;gap:3px;align-items:center;height:20px}
.hw-voice .bars i{width:3px;border-radius:2px;background:#fff;height:8px;animation:nqbar 1.1s ease-in-out infinite}
.hw-voice .bars i:nth-child(odd){animation-delay:.2s}.hw-voice .bars i:nth-child(3n){animation-delay:.45s}
.hw-voice small{font-size:12px;opacity:.85;font-variant-numeric:tabular-nums}
.hw-tr{margin-top:6px;font-size:13.5px;opacity:.92}
.hw-typing{display:flex;gap:4px;padding:12px 14px!important;width:max-content}
.hw-typing i{width:7px;height:7px;border-radius:50%;background:#8E99AD;animation:tdot 1s ease-in-out infinite}
.hw-typing i:nth-child(2){animation-delay:.15s}.hw-typing i:nth-child(3){animation-delay:.3s}
.hw-ok{align-self:stretch;min-height:44px;border:0;border-radius:14px;background:#2A5BD7;color:#fff;font:700 15px var(--font);cursor:default;
  transition:transform .15s,background .25s;animation:mIn .3s ease-out}
.hw-ok.press{transform:scale(.97);background:#1A4FD0}
.hw-ok.sent{background:#12A06F;transform:none}
.hw-foot{display:flex;align-items:center;gap:8px;margin:0 12px 12px;min-height:46px;padding:0 6px 0 16px;border-radius:999px;background:#fff;
  border:1px solid rgba(11,18,32,.09);color:#8A93A6;font-size:15px}
.hw-foot span{flex:1}
.hw-foot i{width:34px;height:34px;border-radius:50%;background:#2A5BD7;display:grid;place-items:center;color:#fff}
.hw-foot i svg{width:17px;height:17px}
.hw-again{align-self:center;border:1px solid rgba(42,91,215,.35);background:#fff;color:#1A4FD0;border-radius:999px;padding:8px 16px;font:600 14px var(--font);cursor:pointer;animation:mIn .3s ease-out}


#pasos{padding-top:78px;padding-bottom:18px;min-height:0}
#pasos .wrap{gap:16px}
#pasos .sec-head h2{font-size:clamp(26px,3vw,38px)}
#pasos .hw-steps li{padding-bottom:14px}
#pasos .hw-steps p{font-size:14px}
#pasos .hw-chat{height:450px}
#pasos .baja{margin-top:0}
#pasos .baja i{height:26px}


header .lang{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line-n);border-radius:999px;font-family:var(--label);font-size:11px;letter-spacing:.12em}
header .lang a{padding:6px 10px;border-radius:999px;color:#CACCD0;min-height:0;transition:background .2s,color .2s}
header .lang a:hover{color:#fff}
header .lang a.on{background:rgba(47,130,255,.28);color:#fff}
@media(max-width:860px){header .lang{margin-left:auto}header .wrap>.btn{margin-left:0}}


/* palabra que cambia del titulo: mismo efecto que la web de referencia (aparece desde abajo con desenfoque y la anterior sube y se funde) */
.hero h1 .rot{display:inline-grid;vertical-align:top;text-align:left;overflow:hidden;
  transition:width .52s cubic-bezier(.22,.9,.24,1);padding-bottom:.3em;margin-bottom:-.3em;margin-right:-3px}
.hero h1 .rot>span{grid-area:1/1;justify-self:start;white-space:nowrap;
  opacity:0;transform:translateY(.62em) scale(.94);filter:blur(7px);
  transition:opacity .34s ease,transform .52s cubic-bezier(.22,.9,.24,1),filter .34s ease;
  background:linear-gradient(90deg,var(--acc) 0%,#5CC8FF 100%);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;font-weight:700;padding-bottom:.3em;margin-bottom:0}
.hero h1 .rot>span.on{opacity:1;transform:none;filter:blur(0)}
.hero h1 .rot>span.out{opacity:0;transform:translateY(-.62em) scale(.94);filter:blur(7px)}
.hero h1 .rot .meas{position:absolute;visibility:hidden;white-space:nowrap;left:-9999px;top:0;transition:none;opacity:1;filter:none;transform:none}
@media(prefers-reduced-motion:reduce){.hero h1 .rot,.hero h1 .rot>span{transition:none}}


.hw-att{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hw-att span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:10px;background:rgba(255,255,255,.2);font-size:12.5px;animation:mIn .3s ease-out}
.hw-att svg{width:14px;height:14px;flex:none}


@media(min-width:940px){#pasos .how-grid{align-items:stretch}
#pasos .hw-steps{align-content:space-between;height:100%}
#pasos .hw-steps li{padding-bottom:0}
#pasos .hw-steps li::before{bottom:-14px}
#pasos .hw-steps li:last-child::before{display:none}
#pasos .hw-chat{height:470px}}


@media(min-width:940px){#pasos .hw-steps{grid-template-rows:repeat(5,1fr)}
#pasos .hw-steps li{padding-bottom:0}#pasos .hw-steps li::before{bottom:0}}


@media(min-width:861px){
#hist{min-height:0;justify-content:flex-start;padding-top:76px!important;padding-bottom:20px!important}
#hist .sec-head{margin-bottom:10px}
#hist .sec-head .eyebrow,#hist .sec-head .kicker{display:none}
#hist .sec-head h2{font-size:clamp(26px,2.8vw,36px)}
#hist .sec-head p{font-size:15px}
#hist .stage2,#hist .qv{gap:12px}
#hist .panel{padding:18px 26px!important}
#hist .panel h3{font-size:clamp(20px,2vw,26px);margin-bottom:10px}
#hist .beat p,#hist .beat{font-size:15px;line-height:1.4}
#hist .beat{margin-bottom:8px}
#hist .vid2{max-height:380px}
#hist .vid2 video{max-height:380px;object-fit:cover}
}


@media(min-width:861px){
#hist .sec-head .lbl{display:none}
#hist .sec-head h2{margin-top:0}
#hist .stage2{margin-top:26px!important}
#hist .panels{margin-top:4px!important}
#hist .panel .beats{margin-top:6px!important}
#hist .panel .vid2{margin-top:0!important;max-height:330px}
#hist .panel .beat+.beat{margin-top:0}
#hist{padding-top:72px!important;padding-bottom:8px!important}
}


.beta-band{display:flex;align-items:center;gap:14px;max-width:880px;margin:0 auto 20px;padding:12px 18px;border-radius:16px;
  border:1px solid rgba(255,190,70,.4);background:linear-gradient(90deg,rgba(255,170,40,.14),rgba(255,170,40,.04))}
.beta-band b{font-family:var(--label);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#FFC24D;white-space:nowrap}
.beta-band p{margin:0;font-size:15px;line-height:1.4;color:var(--dim)}
.beta-band .dot{width:10px;height:10px;border-radius:50%;background:#FFC24D;box-shadow:0 0 0 0 rgba(255,194,77,.6);animation:betaPulse 1.6s infinite;flex:none}
@keyframes betaPulse{70%{box-shadow:0 0 0 10px rgba(255,194,77,0)}100%{box-shadow:0 0 0 0 rgba(255,194,77,0)}}
@media(max-width:700px){.beta-band{flex-wrap:wrap}}
@media(min-width:1000px){#planes .plans{grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch}}
.plan.trial .feats{margin:14px 0 18px}
.faq-phone{width:100%;max-width:340px;justify-self:center;display:flex;flex-direction:column;border-radius:34px;padding:10px;background:#0B1220;
  box-shadow:0 24px 60px rgba(10,20,50,.28),0 0 0 1px rgba(255,255,255,.08) inset}
.faq-phone .scr{display:flex;flex-direction:column;height:430px;border-radius:26px;overflow:hidden;background:#fff;color:#0B1220}
.faq-phone .hd{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(11,18,32,.08)}
.faq-phone .av{width:32px;height:32px;border-radius:50%;background:#050F35;display:grid;place-items:center}
.faq-phone .av svg{width:66%;height:66%}
.faq-phone .hd b{font-size:15px}.faq-phone .hd small{margin-left:auto;font-size:12px;color:#1FA463}
.faq-phone .ms{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:12px;overflow:auto;background:#F4F7FC}
.faq-phone .m{max-width:86%;padding:8px 12px;border-radius:16px;font-size:14.5px;line-height:1.4;animation:mIn .3s ease-out}
.faq-phone .m.q{align-self:flex-start;background:#E6ECF5;border-bottom-left-radius:5px}
.faq-phone .m.me{align-self:flex-end;background:#2A5BD7;color:#fff;border-bottom-right-radius:5px}
.faq-phone .go{align-self:flex-start;display:inline-block;margin-top:2px;padding:9px 16px;border-radius:999px;background:#2A5BD7;color:#fff;font-weight:700;font-size:14px;text-decoration:none}
.faq-phone form{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(11,18,32,.08);background:#fff}
.faq-phone input{flex:1;min-width:0;border:1px solid rgba(11,18,32,.14);border-radius:999px;padding:10px 14px;font:inherit;font-size:15px;color:#0B1220;background:#fff}
.faq-phone button{width:42px;height:42px;border:0;border-radius:50%;background:#2A5BD7;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.faq-phone button svg{width:18px;height:18px}
@media(min-width:1080px){#faq .faq-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.1fr) 340px;gap:clamp(24px,3vw,48px);align-items:start}}
@media(max-width:1079px){#faq .faq-phone{margin-top:24px}}


@media(min-width:900px){
#planes .plans{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px;margin-top:10px}
#planes .plan.trial{grid-column:auto;display:flex;flex-direction:column;padding:inherit;align-items:stretch}
#planes .plan.trial .tag,#planes .plan.trial h2,#planes .plan.trial .who{grid-column:auto}
#planes .plan.trial .who{margin-bottom:10px;max-width:none}
#planes .plan.trial .btn{grid-column:auto;grid-row:auto;margin-top:auto;align-self:stretch}
#planes .plan .feats{gap:6px}
#planes .plan .feats li{font-size:14px;line-height:1.35}
#planes .sec-head{margin-bottom:8px}
#planes .sec-head p:not(.note){display:none}
#planes .beta-band{margin-bottom:10px;padding:9px 16px}
#planes .beta-band p{font-size:14px}
}


@media(min-width:900px){#planes .plan{display:flex!important;flex-direction:column}
#planes .plan .tag{height:auto!important;margin-bottom:6px}}


@media(min-width:900px){#planes .plan.trial{padding:12px 20px 14px!important;align-self:stretch}
#planes .plan.trial .tag{margin-bottom:6px}}


@media(min-width:900px){#planes .plans{align-items:stretch!important}#planes .plan.trial{align-self:stretch!important;height:auto!important;max-height:none!important;justify-content:space-between}
#planes .plan.trial .feats{margin:14px 0 auto}#planes .plan.trial .feats li{font-size:15px}}


@media(min-width:900px){#planes .plans{grid-template-rows:auto!important;grid-auto-rows:auto!important}#planes .plan{grid-row:auto!important}}


#pasos .wrap{position:relative}
#pasos .casos-link{position:absolute;right:0;top:-6px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  border:1px solid rgba(91,200,255,.45);background:rgba(47,130,255,.14);color:#fff;font-weight:600;font-size:15px;text-decoration:none;transition:background .2s,transform .2s}
#pasos .casos-link:hover{background:rgba(47,130,255,.3);transform:translateY(-1px)}
#pasos .casos-link svg{width:16px;height:16px}
@media(max-width:700px){#pasos .casos-link{position:static;margin-top:12px}}
@media(min-width:1080px){
#faq .faq-grid{grid-template-columns:minmax(0,1fr) 340px!important;grid-template-rows:auto 1fr;column-gap:clamp(32px,5vw,72px);row-gap:18px;align-items:start}
#faq .faq-grid>.sec-head{grid-column:1;grid-row:1}
#faq .faq-grid>.faq{grid-column:1;grid-row:2}
#faq .faq-grid>.faq-phone{grid-column:2;grid-row:1/3;align-self:center}
#faq .sec-head h2 br{display:none}
#faq .sec-head h2{white-space:nowrap}
}
.casos-cta{padding:28px 0 44px;text-align:center}
.casos-cta .wrap{display:grid;gap:12px;justify-items:center}
.casos-cta h2{margin:0;font-size:clamp(22px,2.6vw,32px)}.casos-cta p{margin:0;color:var(--dim)}
.casos-cta .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}

#hist[hidden]{display:none!important}

@media(min-width:900px){
#planes .plans{grid-template-columns:1fr 1fr!important;gap:10px;margin-top:8px}
#planes .plan.trial{order:-1;grid-column:1/-1!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center;padding:12px 24px!important;flex-direction:row}
#planes .plan.trial .tag,#planes .plan.trial h2,#planes .plan.trial .who,#planes .plan.trial .feats{grid-column:1;margin-top:0}
#planes .plan.trial h2{margin:4px 0 2px}
#planes .plan.trial .who{margin:0 0 6px}
#planes .plan.trial .feats{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0}
#planes .plan.trial .feats li{font-size:13.5px}
#planes .plan.trial .btn{grid-column:2;grid-row:1/5;align-self:center;margin:0;width:auto}
}


@media(min-width:900px){
#planes{padding-top:70px!important}
#planes .beta-band p{font-size:13.5px;line-height:1.3}
#planes .beta-band{padding:7px 16px;margin-bottom:8px}
#planes .plan.trial .who{display:none}
#planes .plan.trial .feats{gap:2px 14px}
#planes .plan.trial .feats li{font-size:13px;white-space:nowrap}
#planes .plan.trial{padding:10px 24px!important}
#planes .plan.trial h2{margin:2px 0 6px}
#planes .plan:not(.trial){padding:10px 22px 12px!important}
#planes .plan:not(.trial) h2{margin-top:4px}
#planes .plan:not(.trial) .price{margin-top:6px}
#planes .plan:not(.trial) .price b{font-size:28px}
#planes .plan:not(.trial) .who{font-size:13px;line-height:1.35;margin-top:2px}
#planes .plan:not(.trial) .feats{margin:6px 0 4px;gap:2px}
#planes .plan:not(.trial) .feats li{font-size:13px;line-height:1.3}
#planes .plan .ideal{margin:2px 0 6px;padding-top:6px;font-size:12.5px}
#planes .plan:not(.trial) .btn{min-height:42px}
}


.inc-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:10px;padding:9px 18px;border-radius:14px;border:1px solid color-mix(in srgb,var(--halo) 30%,transparent);background:rgba(47,130,255,.07)}
.inc-strip b{font-family:var(--label);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--halo)}
.inc-strip span{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#C3CEDE}
.inc-strip span::before{content:"";width:14px;height:14px;border-radius:4px;background:color-mix(in srgb,var(--acc) 22%,transparent);border:1px solid color-mix(in srgb,var(--acc) 55%,transparent)}
@media(min-width:900px){#planes .beta-band p{white-space:nowrap}#planes .plans{margin-top:6px}}


@media(min-width:900px){#planes .beta-band p{white-space:normal}#planes .plan.trial .feats li{white-space:normal}
#planes .plan:not(.trial) .btn{margin-top:6px}#planes .inc-strip{margin-top:8px;padding:6px 16px}}


@media(min-width:900px){#planes .plan .ideal{display:none}#planes .plan:not(.trial) .btn{margin-top:auto}}
@media(min-width:1080px){
#faq .faq-grid>.faq-phone{grid-row:2!important;align-self:stretch!important;max-width:340px}
#faq .faq-phone .scr{height:100%;min-height:0}#faq .faq-phone{height:auto}
}


#confianza{background:linear-gradient(180deg,#F7FAFF 0%,#EEF4FF 100%);color:#0B1220;position:relative}
#confianza .lbl{color:#2A5BD7}
#confianza h2,#confianza h3{color:#0B1220}
#confianza .hl{background:linear-gradient(90deg,#1F6BFF,#12A6D9);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
#confianza .lead,#confianza p{color:#4A5468}
#confianza .caja{background:#fff;border:1px solid rgba(20,50,110,.12);box-shadow:0 10px 30px rgba(20,50,110,.08)}
#confianza .caja h3{color:#0B1220}
#confianza .caja p{color:#4A5468}
#confianza .caja .gana{color:#0F7A55;background:rgba(18,160,111,.1);border-color:rgba(18,160,111,.3)}
#confianza .ico-c{color:#2A5BD7;background:rgba(42,91,215,.1);border-color:rgba(42,91,215,.25)}
#confianza .baja span{color:#2A5BD7}
#confianza .baja i{background:linear-gradient(180deg,#2A5BD7,transparent)}


#confianza{padding-top:80px!important;padding-bottom:12px!important;min-height:0!important;justify-content:flex-start}
#confianza .wrap{gap:14px}
#confianza .caja{padding:16px 18px!important}
#confianza .caja .gana{display:inline-block;align-self:flex-start;border:0;padding:5px 12px;border-radius:999px;margin-top:auto}
#confianza .lead{margin:0}
#confianza .baja{margin-top:0}


.hw-steps:not(.run) li:not(.on) :is(h3,p){opacity:.38}
.hw-steps:not(.run) li:not(.on) .n{opacity:.4;box-shadow:none;background:#3a4a63;color:#cfd8e6}
.hw-steps .n{transition:opacity .4s,box-shadow .4s,background .4s,color .4s}
#hwStart{animation:hwGlow 2.2s ease-in-out infinite;transform-origin:center}
@keyframes hwGlow{0%,100%{box-shadow:0 0 0 0 rgba(47,130,255,.55),0 10px 30px rgba(47,130,255,.35)}50%{box-shadow:0 0 0 12px rgba(47,130,255,0),0 14px 44px rgba(47,130,255,.6)}}
@media(prefers-reduced-motion:reduce){#hwStart{animation:none}}


@media(min-width:900px){
#planes .plan.trial .who{display:block!important;margin:2px 0 0;font-size:14px;max-width:62ch}
#planes .plan.trial .feats{display:none}
#planes .plan .ideal{display:block!important}
#planes .plan.trial{padding:12px 24px!important}
}

@media(min-width:900px){#planes .beta-band{max-width:none}#planes .plan:not(.trial) .btn{margin-top:auto}#planes .plan .ideal{margin:2px 0 8px}}
@media(min-width:900px){#planes{padding-top:52px!important}}
@media(min-width:900px){#planes{padding-top:72px!important}}

#planes{padding-top:76px!important;padding-bottom:14px!important;min-height:0!important;justify-content:flex-start}
#planes .pr-head{text-align:center;max-width:760px;margin:0 auto 18px}
#planes .pr-head .lbl{display:block}
#planes .pr-head h2{margin:6px 0 6px;font-size:clamp(26px,3vw,38px)}
#planes .pr-head p{margin:0 auto;color:var(--dim);font-size:15.5px}
.pr-grid{display:grid;gap:16px;align-items:stretch;max-width:1060px;margin:0 auto}
@media(min-width:900px){.pr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pr-card{display:flex;flex-direction:column;padding:22px 22px 20px;border-radius:28px;border:1px solid rgba(160,190,255,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));backdrop-filter:blur(6px)}
.pr-card.hi{background:linear-gradient(180deg,#2F6BFF 0%,#1B3FA6 55%,#0F2466 100%);border-color:rgba(130,180,255,.6);
  box-shadow:0 24px 60px rgba(30,90,255,.35)}
.pr-tag{font-family:var(--label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8EC5FF}
.pr-card.hi .pr-tag{color:#D6E8FF}
.pr-name{margin:6px 0 0;font-size:18px;font-weight:600;color:#fff}
.pr-price{display:flex;align-items:baseline;gap:8px;margin:8px 0 6px;color:#fff}
.pr-price b{font-size:clamp(34px,3.6vw,46px);font-weight:600;letter-spacing:-.02em;line-height:1}
.pr-price i{font-style:normal;font-size:15px;color:#B7C6E0}
.pr-sub{margin:0 0 14px;font-size:13.5px;line-height:1.45;color:#9FB0CC;min-height:58px}
.pr-card.hi .pr-sub{color:#DDE9FF}
.pr-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:999px;background:#fff;color:#0B1B44;font-weight:700;font-size:15px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.pr-btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(255,255,255,.22)}
.pr-btn svg{width:16px;height:16px}
.pr-line{height:1px;background:rgba(255,255,255,.16);margin:16px 0 14px}
.pr-feats{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.pr-feats li{display:flex;gap:10px;font-size:14px;line-height:1.35;color:#D3DDF0}
.pr-feats li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;margin-top:1px;background:#3D8BFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.pr-card.hi .pr-feats li::before{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5' fill='none' stroke='%231B3FA6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#planes .inc-strip{max-width:1060px;margin:14px auto 0}


@media(min-width:900px){#planes{padding-top:68px!important}
#planes .pr-head{margin-bottom:12px}
.pr-card{padding:18px 22px 16px}
.pr-sub{min-height:40px;margin-bottom:10px}
.pr-line{margin:12px 0 10px}
.pr-feats{gap:6px}
#planes .inc-strip{margin-top:10px;padding:6px 16px}}


@media(min-width:900px){
#planes{min-height:100svh!important;justify-content:center!important;padding-top:84px!important;padding-bottom:36px!important}
#planes .pr-head{margin-bottom:26px}
#planes .pr-head h2{font-size:clamp(30px,3.4vw,46px)}
#planes .pr-head p{font-size:17px}
.pr-grid{max-width:1180px;gap:20px}
.pr-card{padding:30px 28px 28px;border-radius:32px}
.pr-name{font-size:20px}
.pr-price{margin:12px 0 10px}
.pr-price b{font-size:clamp(40px,4.2vw,56px)}
.pr-sub{font-size:15px;min-height:66px;margin-bottom:18px}
.pr-btn{min-height:52px;font-size:16px}
.pr-line{margin:22px 0 18px}
.pr-feats{gap:12px}
.pr-feats li{font-size:15.5px;line-height:1.4}
#planes .inc-strip{max-width:1180px;margin-top:22px;padding:12px 22px}
#planes .inc-strip span{font-size:15px}
}
@media(min-width:900px) and (max-height:760px){
.pr-card{padding:20px 24px 18px}.pr-sub{min-height:48px}.pr-feats{gap:8px}.pr-line{margin:14px 0 12px}#planes .pr-head{margin-bottom:14px}#planes{padding-top:74px!important}}


@media(min-width:900px){
#planes{padding-top:78px!important;padding-bottom:22px!important}
#planes .pr-head{margin-bottom:16px}
#planes .pr-head h2{font-size:clamp(28px,3vw,40px);margin:4px 0}
#planes .pr-head p{font-size:16px}
.pr-grid{gap:18px}
.pr-card{padding:22px 26px 20px}
.pr-price{margin:8px 0 6px}
.pr-price b{font-size:clamp(38px,3.8vw,50px)}
.pr-sub{font-size:14.5px;min-height:50px;margin-bottom:12px}
.pr-btn{min-height:48px}
.pr-line{margin:16px 0 14px}
.pr-feats{gap:9px}
.pr-feats li{font-size:15px;line-height:1.35}
#planes .inc-strip{margin-top:14px;padding:9px 20px}
}
@media(min-width:900px) and (min-height:860px){
#planes{padding-top:90px!important}.pr-card{padding:30px 28px 26px}.pr-feats{gap:12px}.pr-feats li{font-size:16px}.pr-sub{min-height:62px}}


@media(min-width:900px){#planes{min-height:calc(100svh - 64px)!important;padding-top:34px!important;padding-bottom:24px!important}}
@media(min-width:900px) and (min-height:860px){#planes{padding-top:44px!important}}

.pr-tag+.pr-price{margin-top:14px}

.hw-col{display:flex;flex-direction:column;gap:12px;width:100%;max-width:440px;justify-self:center}
.hw-col .hw-chat{height:440px}
#pasos .hw-col .hw-chat{height:440px!important}
.hw-cases{width:100%;justify-content:center;min-height:56px;font-size:17px}

.hw-cases{min-height:52px}#pasos{padding-top:70px!important}
#demo .vdemo{max-width:980px;width:100%;margin-inline:auto;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 70px rgba(0,10,40,.55),0 0 0 1px rgba(47,130,255,.25);background:#000}#demo .vdemo video{display:block;width:100%;height:auto;max-height:calc(100svh - 190px);background:#000;margin-inline:auto}

@media(min-width:900px){
.pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:880px!important;gap:28px!important}
.pr-card{padding:34px 34px 32px!important}
.pr-sub{min-height:0!important;margin-bottom:20px!important;font-size:15.5px!important}
.pr-line{margin:24px 0 20px!important}
.pr-feats{gap:12px!important}
.pr-feats li{font-size:15.5px!important}
#planes{padding-top:56px!important;padding-bottom:40px!important}
#planes .pr-head{margin-bottom:34px!important}
#planes .inc-strip{display:none}
}
#pasos .hw-col{display:block}
#pasos .hw-col .hw-chat{height:100%!important;min-height:420px}
#pasos .hw-cases{display:none}
.tr-card{max-width:760px;margin:0 auto;display:grid;gap:14px}
.tr-item{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding:16px 20px;border-radius:20px;border:1px solid rgba(160,190,255,.22);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.tr-item .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--label);font-weight:700;background:var(--acc);color:var(--on-blue)}
.tr-item h3{margin:0;font-size:19px;color:#fff}.tr-item p{margin:3px 0 0;color:var(--dim);font-size:15.5px;line-height:1.45}
.tr-head{text-align:center;max-width:720px;margin:0 auto 26px}
.tr-head h1{margin:6px 0 8px;font-size:clamp(30px,3.6vw,46px)}
.tr-head p{margin:0;color:var(--dim);font-size:17px}
.tr-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}


@media(min-width:900px){
#planes{padding-top:36px!important;padding-bottom:20px!important;justify-content:center}
#planes .pr-head{margin-bottom:20px!important}
#planes .pr-head h2{font-size:clamp(26px,2.8vw,36px)!important}
.pr-grid{gap:24px!important}
.pr-card{padding:24px 30px 22px!important}
.pr-price{margin:6px 0 4px!important}
.pr-price b{font-size:44px!important}
.pr-sub{margin-bottom:14px!important;font-size:14.5px!important}
.pr-btn{min-height:46px!important}
.pr-line{margin:16px 0 14px!important}
.pr-feats{gap:8px!important}
.pr-feats li{font-size:14.5px!important;line-height:1.35!important}
}
#prueba{padding-top:70px!important;padding-bottom:20px}
.tr-head{margin-bottom:18px!important}
.tr-head h1{font-size:clamp(28px,3.2vw,40px)!important}
.tr-card{gap:10px!important}
.tr-item{padding:11px 18px!important}
.tr-item h3{font-size:17.5px!important}.tr-item p{font-size:14.5px!important}
.tr-actions{margin-top:18px!important}


.qp{position:relative;isolation:isolate}
.qp video{cursor:pointer}
.qp .qp-big{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border:0;border-radius:50%;cursor:pointer;z-index:3;
  display:grid;place-items:center;color:#fff;background:var(--blue);
  box-shadow:0 10px 30px rgba(47,130,255,.42);animation:halo 3.4s ease-in-out infinite;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s ease,box-shadow .35s ease}
.qp .qp-big svg{width:34px;height:34px;margin-left:0}
.qp .qp-big:hover{transform:scale(1.06)}
.qp.playing .qp-big{opacity:0;transform:scale(.8);pointer-events:none}
.qp .qp-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:12px;padding:28px 18px 14px;
  background:linear-gradient(to top,rgba(4,8,18,.78),rgba(4,8,18,0));transition:opacity .3s ease}
.qp.playing.idle .qp-bar{opacity:0}
.qp:not(.started) .qp-bar{opacity:0;pointer-events:none}
.qp .qp-btn{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.qp .qp-btn:hover{background:rgba(47,130,255,.35)}
.qp .qp-btn svg{width:18px;height:18px}
.qp .qp-track{position:relative;flex:1;height:22px;cursor:pointer;display:flex;align-items:center;touch-action:none}
.qp .qp-track::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:4px;background:rgba(255,255,255,.18)}
.qp .qp-fill{position:absolute;left:0;height:4px;border-radius:4px;width:0;background:linear-gradient(90deg,#1A4FCC,#2F82FF,#45B4FF);box-shadow:0 0 12px rgba(69,180,255,.6)}
.qp .qp-knob{position:absolute;left:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(47,130,255,.35);transform:scale(0);transition:transform .2s}
.qp .qp-track:hover .qp-knob,.qp .qp-track.drag .qp-knob{transform:scale(1)}
.qp .qp-time{flex:none;font:500 13px/1 Manrope,system-ui,sans-serif;color:#D6DEEC;font-variant-numeric:tabular-nums;min-width:84px;text-align:center}
@media(max-width:600px){.qp .qp-big{width:72px;height:72px;margin:-36px 0 0 -36px}.qp .qp-big svg{width:28px;height:28px}.qp .qp-time{display:none}.qp .qp-bar{gap:8px;padding:22px 10px 10px}}


#pasos .hw-col .hw-chat{height:490px!important;min-height:0}
@media(max-width:939px){#pasos .hw-col .hw-chat{height:545px!important}}
@media(min-width:940px){#pasos .hw-steps{grid-template-rows:repeat(4,minmax(0,1fr)) auto;align-content:stretch}}
.hw-steps li::after{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:linear-gradient(180deg,var(--acc),rgba(91,255,168,.35));
  transform:scaleY(0);transform-origin:50% 0;transition:transform .35s ease-in}
.hw-steps li:last-child::after{display:none}
.hw-steps li.on::after{transform:scaleY(1);transition:transform 1.1s cubic-bezier(.45,0,.2,1)}
.hw-steps h3,.hw-steps p{transition:opacity .7s ease}
.hw-steps .n{transition:opacity .7s ease,box-shadow .7s ease,background .7s ease,color .7s ease}
#pasos .pasos-pin{display:grid;gap:16px}#pasos .pasos-pin .how-grid{margin-top:20px}@media(min-width:940px){#pasos .pasos-pin .how-grid{margin-top:36px}}#pasos.pin-on .pasos-pin{position:sticky;z-index:1}#pasos .pasos-brake{display:none}#pasos.pin-on .pasos-brake{display:block;height:40vh}


section:not(.end) :is(.sec-head,.pr-head)>h2,#planes .pr-head>h2,#planes .pr-head h2{font-size:clamp(26px,3vw,38px)!important;line-height:1.06!important;letter-spacing:-.02em!important;font-weight:600!important}
html{scroll-padding-top:60px}
@media(min-width:601px){.hero .mascot-slot{top:-10px}#demo .vdemo{max-width:min(980px,calc((100svh - 270px) * 16 / 9))!important;margin-inline:auto}}
#pasos{padding-top:110px!important}
@media(max-width:600px){#pasos{padding-top:86px!important}}


section#planes.pb{position:relative;z-index:2;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(64px + clamp(56px,8vh,104px)) 0 clamp(72px,10vh,128px)!important;scroll-margin-top:-64px;
  background:radial-gradient(900px 520px at 50% 14%,rgba(47,130,255,.13),transparent 70%),var(--night);
  box-shadow:0 -8px 0 0 var(--night)}
#planes.pb .pb-hero{text-align:center;display:flex;flex-direction:column;align-items:center}
#planes.pb .pb-hero .lbl{display:block}
#planes.pb .pb-try{margin:20px 0 0;font-size:clamp(42px,6.2vw,84px);line-height:1.04;font-weight:500;letter-spacing:-.035em;color:#fff;text-wrap:balance}
#planes.pb .pb-try .hl{display:inline-block;padding:0 .04em .14em;margin:0 -.04em -.14em;
  background-image:linear-gradient(90deg,var(--acc) 0%,#5CC8FF 55%,#45B4FF 100%)}
#planes.pb .pb-cta{margin-top:36px;min-height:60px!important;padding:0 40px!important;font-size:17.5px!important;gap:10px}
#planes.pb .pb-head{text-align:center;max-width:640px;margin:clamp(80px,11vh,120px) auto 0}
#planes.pb .pb-head h3{margin:0;text-wrap:balance;font-size:clamp(22px,2.2vw,28px);line-height:1.25;font-weight:500;letter-spacing:-.015em;color:#fff}
#planes.pb .pb-head p{margin:14px auto 0;max-width:52ch;font-size:16px;line-height:1.6;color:var(--dim)}
#planes.pb .pb-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;max-width:1000px;margin:48px auto 0;align-items:stretch}
@media(min-width:860px){#planes.pb .pb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}}
#planes.pb .pb-grid>*{min-width:0}
#planes.pb .pb-card{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:clamp(30px,3.6vw,48px);border-radius:32px;
  border:1px solid rgba(160,190,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#planes.pb .pb-card.hi{border-color:rgba(120,175,255,.42);background:#050c1d;
  box-shadow:0 30px 80px rgba(0,8,30,.6),0 0 60px rgba(47,130,255,.22)}
#planes.pb .pb-space{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1;
  background:radial-gradient(120% 70% at 50% 120%,rgba(26,79,204,.42),transparent 62%),radial-gradient(90% 60% at 20% 0%,rgba(47,130,255,.12),transparent 60%),linear-gradient(180deg,#040a18,#071431)}
#planes.pb .pb-space canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#planes.pb .pb-ring{position:absolute;left:var(--rx,30%);top:var(--ry,130px);width:var(--rs,260px);height:var(--rs,260px);transform-origin:50% 50%;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(47,130,255,.10) 0%,transparent 30%,rgba(69,180,255,.30) 47%,rgba(47,130,255,.14) 57%,transparent 70%);
  filter:blur(6px);animation:pbBloom 7s ease-in-out infinite}
@keyframes pbBloom{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.06);opacity:1}}
#planes.pb .pb-tag{font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8EC5FF}
#planes.pb .hi .pb-tag{color:#BFE0FF}
#planes.pb .pb-price{display:flex;align-items:baseline;gap:10px;margin-top:26px;color:#fff}
#planes.pb .pb-price b{font-size:clamp(46px,4.6vw,60px);font-weight:500;letter-spacing:-.03em;line-height:1}
#planes.pb .pb-price i{font-style:normal;font-size:16px;color:#A9B8D2}
#planes.pb .pb-sub{margin:20px 0 0;font-size:16px;line-height:1.6;color:#A3B2CB}
#planes.pb .hi .pb-sub{color:#DCE8FA}
#planes.pb .pb-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;margin-top:32px;padding:0 22px;border-radius:999px;
  font-weight:700;font-size:16.5px;letter-spacing:-.005em;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.04);
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
#planes.pb .pb-btn svg{width:18px;height:18px;flex:none;transition:transform .2s}
#planes.pb .pb-btn:hover{border-color:#fff;background:rgba(255,255,255,.1)}
#planes.pb .pb-btn:hover svg{transform:translateX(3px)}
#planes.pb .hi .pb-btn{background:#fff;color:#06101F;border-color:#fff;box-shadow:0 12px 34px rgba(255,255,255,.16),0 0 0 6px rgba(255,255,255,.06)}
#planes.pb .hi .pb-btn:hover{transform:translateY(-1px);box-shadow:0 16px 40px rgba(255,255,255,.24),0 0 0 6px rgba(255,255,255,.08)}
#planes.pb .pb-feats{list-style:none;margin:36px 0 0;padding:32px 0 0;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:16px}
#planes.pb .pb-feats li{display:flex;gap:14px;font-size:16px;line-height:1.5;color:#C9D4E6}
#planes.pb .hi .pb-feats li{color:#EAF1FC}
#planes.pb .pb-feats li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:6px;
  background:color-mix(in srgb,var(--acc) 16%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5' fill='none' stroke='%235BFFA8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  border:1px solid color-mix(in srgb,var(--acc) 45%,transparent)}
@media(max-width:600px){
  section#planes.pb{padding:calc(64px + 60px) 0 72px!important}
  #planes.pb .pb-try{font-size:clamp(40px,11vw,52px)}
  #planes.pb .pb-cta{width:100%;max-width:340px}
  #planes.pb .pb-head{margin-top:72px}
  #planes.pb .pb-grid{margin-top:40px;gap:24px}
  #planes.pb .pb-card{padding:30px 24px 32px;border-radius:28px}
}
html:not(.nojs) #planes.pb .pb-in{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--d,0ms),transform .9s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
html:not(.nojs) #planes.pb .pb-in.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html:not(.nojs) #planes.pb .pb-in{opacity:1;transform:none;transition:none}
  #planes.pb .pb-ring{animation:none}
  #planes.pb .pb-btn,#planes.pb .pb-btn svg{transition:none}
}


section#planes.pb{padding:calc(64px + clamp(18px,3vh,40px)) 0 clamp(18px,3vh,40px)!important}
#planes.pb .pr-head{text-align:center;margin:0 auto;max-width:760px}
#planes.pb .pr-head p{margin:12px auto 0;max-width:60ch}
#planes.pb .pb-grid{max-width:1060px;margin:clamp(22px,3.4vh,40px) auto 0;gap:32px}
#planes.pb .pb-card{padding:clamp(22px,3.2vh,36px) clamp(26px,3vw,40px)}
#planes.pb .pb-price{margin-top:clamp(10px,1.7vh,20px)}
#planes.pb .pb-price b{font-size:clamp(40px,5.2vh,54px)}
#planes.pb .pb-sub{margin-top:clamp(8px,1.3vh,14px);font-size:15px;line-height:1.5;min-height:3em}
#planes.pb .pb-btn,#planes.pb .hi .pb-btn{margin-top:clamp(12px,2vh,24px);min-height:52px;color:#fff;font-weight:500;border:0;background:var(--blue);
  box-shadow:0 0 0 6px rgba(47,130,255,.14),0 0 34px rgba(47,130,255,.5),inset 0 1px 0 rgba(255,255,255,.3)}
#planes.pb .pb-btn:hover,#planes.pb .hi .pb-btn:hover{transform:translateY(-1px);background:var(--blue);box-shadow:0 0 0 9px rgba(47,130,255,.2),0 0 50px rgba(47,130,255,.65),inset 0 1px 0 rgba(255,255,255,.35)}
#planes.pb .pb-btn b{font-weight:800;font-size:1.1em;letter-spacing:-.01em}
#planes.pb .pb-feats{margin-top:clamp(14px,2.3vh,26px);padding-top:clamp(12px,2.1vh,24px);gap:clamp(6px,1.05vh,12px)}
#planes.pb .pb-feats li{font-size:15px;line-height:1.42}
@media(min-width:601px) and (max-height:800px){#planes.pb .pb-feats li{font-size:14.5px;line-height:1.38}#planes.pb .pb-feats{gap:5px}#planes.pb .pr-head p{margin-top:8px}#planes.pb .pb-btn{min-height:48px}}
@media(max-width:600px){section#planes.pb{padding:calc(64px + 44px) 0 56px!important}#planes.pb .pb-grid{margin-top:32px}}


.hw-steps li:not(.on):not(.now) .n{opacity:.4;box-shadow:none;background:#3a4a63;color:#cfd8e6}
.hw-steps li:not(.on):not(.now) :is(h3,p){opacity:.38}
.hw-msg,.hw-ok,.hw-again{animation:mIn .6s cubic-bezier(.22,.8,.24,1)}
.hw-tr,.hw-att{animation:mIn .6s cubic-bezier(.22,.8,.24,1)}


/* all section titles one size; the hero h1 stays the big one */
html body section:not(.end) h2,html body section:not(.end) :is(.sec-head,.pr-head)>h2,html body #planes .pr-head h2{font-size:clamp(28px,3.1vw,44px)!important;line-height:1.12}
/* pricing subtitle on one line */
@media(min-width:760px){#planes.pb .pr-head{max-width:none}#planes.pb .pr-head p{max-width:none;white-space:nowrap}}
/* Trust and innovation: more air above the cards and at the bottom */
#confianza .dolor-g{margin-top:26px}
#confianza{padding-bottom:64px!important}
#confianza .baja{margin-top:22px}
@media(prefers-reduced-motion:no-preference){
  /* light section: words settle from blue into ink, never through near white */
  html:not(.nojs) #confianza .sec-head h2.qv .qw:not(#fxa){animation-name:wordInPale}
  /* texts come in as you scroll: rise out of a light blur, one after another */
  html:not(.nojs) .tx{transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--txd,0ms),translate .8s cubic-bezier(.16,1,.3,1) var(--txd,0ms),filter .8s cubic-bezier(.16,1,.3,1) var(--txd,0ms)}
  html:not(.nojs) .tx:not(.tx-on){opacity:0;translate:0 16px;filter:blur(6px)}
  html:not(.nojs) .tx.gana:not(.tx-on){translate:0 10px;scale:.96}
  html:not(.nojs) .tx.gana{transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--txd,0ms),translate .7s cubic-bezier(.16,1,.3,1) var(--txd,0ms),filter .7s cubic-bezier(.16,1,.3,1) var(--txd,0ms),scale .7s cubic-bezier(.2,1.4,.4,1) var(--txd,0ms)}
}
/* card 300: the sky of the film's first scene (navy, brand grid, lit squares, rare stars, glow at the bottom) */
#planes.pb .pb-ring{display:none}
#planes.pb .pb-space{background:radial-gradient(95% 52% at 50% 112%,rgba(63,201,224,.30),rgba(47,130,255,.24) 40%,rgba(26,79,204,.10) 64%,transparent 80%),linear-gradient(180deg,#030917,#050d22 70%,#071431)}
#planes.pb .pb-lines{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(120% 95% at 50% 45%,#000 30%,rgba(0,0,0,.5) 65%,transparent 100%);mask-image:radial-gradient(120% 95% at 50% 45%,#000 30%,rgba(0,0,0,.5) 65%,transparent 100%)}



#planes.pb .pb-btn{transition:background-color .2s,box-shadow .25s,translate .2s,transform .2s}
@media(hover:hover){
  html body #planes.pb .pb-btn:hover,html body #planes.pb .hi .pb-btn:hover{background:var(--blue-h);translate:0 -2px;
    box-shadow:0 14px 40px rgba(47,130,255,.62),inset 0 1px 0 rgba(255,255,255,.3)}
}
@media(prefers-reduced-motion:reduce){html body #planes.pb .pb-btn:hover{translate:none}}
/* 15-oct tg:3057: CTA final grande como meetqiu.com; en movil se limita para que "first voice note." no pise al Q */
@media(max-width:600px){
  /* 15-oct tg:3064: en movil el Q va ENCIMA del titulo, centrado (tg:3070) */
  html body #start .end-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"q" "h" "p" "c";column-gap:0}
  html body #start .end-q{width:clamp(96px,28vw,120px);justify-self:center;align-self:start;margin:0 0 14px}
  html body #start h2{font-size:clamp(30px,11.5vw,46px)!important;align-self:start}
}



html:not(.nojs) body #confianza .dolor-g .caja.rev{opacity:0;transform:translateY(40px) scale(.97);
  transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--cd,0ms),transform .9s cubic-bezier(.16,1,.3,1) var(--cd,0ms)}
html:not(.nojs) body #confianza .dolor-g .caja.rev.on{opacity:1;transform:none}
#confianza .dolor-g .caja:nth-child(1){--cd:0ms}
#confianza .dolor-g .caja:nth-child(2){--cd:220ms}
#confianza .dolor-g .caja:nth-child(3){--cd:440ms}
#confianza .dolor-g .caja:nth-child(4){--cd:660ms}
#confianza .dolor-g .caja{position:relative;isolation:isolate}
#confianza .dolor-g .caja>*{position:relative;z-index:1}
#confianza .dolor-g .caja::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(47,130,255,.13),rgba(91,255,168,.08) 45%,transparent 75%);
  transition:opacity .35s ease}
@media(hover:hover) and (pointer:fine){
  html:not(.nojs) body #confianza .dolor-g .caja.rev.on.ok{
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
    transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
  html body #confianza .dolor-g .caja.ok:hover{--ty:-4px;border-color:rgba(47,130,255,.28);
    box-shadow:0 18px 44px rgba(20,50,110,.14),0 0 0 1px rgba(47,130,255,.06)}
  #confianza .dolor-g .caja.ok:hover::before{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  html:not(.nojs) body #confianza .dolor-g .caja.rev{opacity:1;transform:none;transition:none}
  html:not(.nojs) body #confianza .dolor-g .caja.rev.on.ok{transform:none}
}


/* 15-oct tg:3071: al ir a Pricing la pantalla entera es oscura (la seccion mide 100svh: el header va encima, antes medía 100svh-64 y asomaban 64 px del bloque blanco) */
@media(min-width:900px){html body section#planes.pb{min-height:100svh!important;padding-top:calc(64px + 24px)!important;padding-bottom:28px!important}}
/* tg:3073: botones de pricing con el mismo aspecto y la misma animacion que Try it, a todo el ancho */
html body #planes.pb .pb-go{display:flex;width:100%;justify-content:center;min-height:58px;font-size:17px;margin-top:clamp(12px,2vh,24px)}
html body #planes.pb .pb-go b{font-weight:800}
@media(min-width:601px) and (max-height:800px){html body #planes.pb .pb-go{min-height:52px}}
/* tg:3074: el bloque final y el footer caben justos en una pantalla */
html body section#start.end{min-height:calc(100svh - var(--fh,88px))!important;padding-top:calc(64px + 20px)!important;padding-bottom:20px!important}



.hb3{display:none}
@media(max-width:600px){
  /* tg:3080 hero: titulo en 3 lineas, mas grande y mas arriba; debajo el subtitulo */
  .hb3{display:inline}
  html[lang=en] body .hero h1{font-size:min(44px,calc((100vw - 28px) / 8.6))!important;line-height:1.08}
  html[lang=es] body .hero h1{font-size:min(50px,calc((100vw - 28px) / 7.4))!important;line-height:1.08}
  html body .hero .sub{display:block!important;text-align:center;max-width:30ch;margin:14px auto 0;font-size:17px;line-height:1.45;color:#C9D4E6}
  /* tg:3084/3085 Watch demo: Made with Qiu arriba, video, How it works abajo, a la misma distancia */
  html body #demo .wrap{display:flex;flex-direction:column;align-items:center}
  html body #demo .madewith{order:0;margin:-16px 0 0!important} /* 12 px bajo el vídeo: el wrap pone 28 px de hueco */
  /* Dani 16-oct: sin franjas negras. La caja toma la forma del vídeo vertical (ancho automático y alto tope), no el 100 % del ancho. */
  html body #demo .vdemo{margin:0!important;width:fit-content;max-width:100%!important;background:transparent}
  html body #demo .vdemo video{width:auto;max-width:100%;height:auto;max-height:calc(100svh - 190px);background:transparent}
  html body #demo .baja{margin-top:26px!important}
  /* tg:3088 Keep going (y su linea) un poco mas abajo */
  html body #pasos>.wrap>.baja{margin-top:44px!important}
  /* tg:3091 bloque final: contenido mas abajo, Q mas grande, todo con el footer en una pantalla */
  html body section#start.end{justify-content:flex-end!important;padding-top:84px!important;padding-bottom:40px!important}
  html body #start .end-q{width:clamp(130px,40vw,170px)!important;margin:0 0 18px!important}
  /* tg:3080 el titulo del hero sube: fuera el hueco de 48 px de .wrap::before */
  html body .hero .wrap::before{height:0!important;display:none!important}
  html body div.hero{padding-top:84px!important}
}
/* tg:3083 titulo de 'What you can do': sin azul al entrar, palabra a palabra (tambien la segunda linea) */
@keyframes wordInW{0%{opacity:0;transform:translateY(.55em) rotateX(-70deg) scale(.96);filter:blur(8px)}
  60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
html:not(.nojs) body #dolor .sec-head h2.qv .qw{animation-name:wordInW!important;animation-delay:calc(var(--qd,0ms) + var(--i,0) * 95ms)!important}
#dolor .sec-head h2 .hlbox{display:inline-block;position:relative}
#dolor .sec-head h2 .hlw{background-image:var(--hlg);background-size:var(--hw,100%) 100%;background-position:var(--hx,0) 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.14em;margin-bottom:-.14em}
@media(prefers-reduced-motion:reduce){html:not(.nojs) body #dolor .sec-head h2.qv .qw{animation:none!important}}
/* tg:3091 el Q del final aparece el primero */
html:not(.nojs) body #start .end-q{transition-delay:0ms!important}
/* tg:3089 etiquetas de pricing del mismo color, azul claro del brandbook (#7A9BFF) */
html body #planes.pb .pb-tag,html body #planes.pb .hi .pb-tag{color:#7A9BFF}


/* 15-oct tg:3100: el Q saltaba al abrir. Lo del hero movil va aqui, en el head, para que el primer pintado ya sea el final */
.hb3{display:none}
@media(max-width:600px){
  .hb3{display:inline}
  html[lang=en] body .hero h1{font-size:min(44px,calc((100vw - 28px) / 8.6))!important;line-height:1.08}
  html[lang=es] body .hero h1{font-size:min(50px,calc((100vw - 28px) / 7.4))!important;line-height:1.08}
  html body .hero .sub{display:block!important;text-align:center;max-width:30ch;margin:14px auto 0;font-size:17px;line-height:1.45;color:#C9D4E6}
  html body .hero .wrap::before{height:0!important;display:none!important}
  html body div.hero{padding-top:84px!important}
  /* spread() siempre daba 90 px en movil (el CTA del hero esta oculto): fijo desde el principio */
  html body .hero .stage{margin-top:94px!important}
}


/* tg:3102 Made with Qiu aparece con opacity, sin moverse */
html:not(.nojs) #demo .madewith.rev{transform:translateX(-1.3px)!important;transition:opacity .9s cubic-bezier(.16,1,.3,1)}


/* tg:3112 h1 opcion 1 solo en movil: "way possible." / "posible." */
.hpos{display:none}
@media(max-width:600px){html[lang=en] body .hero h1 .hpos{display:inline}
  /* la palabra que gira ya no va sola en su linea: que no empuje la de abajo */
  html[lang=en] body .hero h1 .rot{margin-bottom:-.6em!important}}
/* ES: "inteligente posible." no cabe en un movil; en ES la linea 3 es solo la palabra */
/* tg:3128 la palabra que gira se cortaba por la derecha mientras el hueco crecia: solo se recorta arriba y abajo */
html body .hero h1 .rot{overflow:visible!important;clip-path:inset(0 -4em 0 -.3em)}
/* tg:3106/3107 REGLA: todos los botones de un solo color, sin degradado, azul del brandbook */
:root{--btn:#2F82FF;--btn-h:#1A6CEB}
html body :is(.btn.btn-p,#hist .tab[aria-selected=true],button.qp-big,button.go,#faq form button[type=submit]){background:var(--btn)!important;background-image:none!important;border-color:var(--btn)!important;color:#fff!important}
@media(hover:hover){html body :is(.btn.btn-p,#hist .tab[aria-selected=true],button.qp-big,button.go,#faq form button[type=submit]):hover{background:var(--btn-h)!important;border-color:var(--btn-h)!important}}
html body .btn-p.glow,html body :is(.btn.btn-p:not(.glow),#hist .tab[aria-selected=true]){box-shadow:0 10px 30px rgba(47,130,255,.45)}
html.qhalo body .btn-p.glow::before{box-shadow:0 10px 30px rgba(47,130,255,.45)!important}
html.qhalo body .btn-p.glow::after{box-shadow:0 14px 40px rgba(47,130,255,.62)!important}
html body #trust :is(.qmsg-k button.go,.tcard .mini .row:has(.off) button,.tcard .mini .chips button[aria-pressed=true]){background:var(--btn)!important;border-color:var(--btn)!important;box-shadow:0 6px 18px rgba(47,130,255,.38)!important}
@media(hover:hover){html body #trust :is(.qmsg-k button.go,.tcard .mini .row:has(.off) button,.tcard .mini .chips button[aria-pressed=true]):not(:disabled):hover{background:var(--btn-h)!important;border-color:var(--btn-h)!important;box-shadow:0 10px 26px rgba(47,130,255,.5)!important}}
/* tg:3111 movil, What you can do: aire entre la parte blanca y la de color; tarjetas mas suaves y algo mas tarde */
@media(max-width:600px){
  html body #dolor .sec-head h2 .hlbox,html body #dolor .sec-head h2>.hl{display:block;margin-top:14px}
  html:not(.nojs) body #dolor .dolor-g .caja.rev{transform:translateY(16px);transition:opacity 1.4s cubic-bezier(.22,.8,.24,1) calc(var(--d,0ms) + 260ms),transform 1.4s cubic-bezier(.22,.8,.24,1) calc(var(--d,0ms) + 260ms)!important}
  html:not(.nojs) body #dolor .dolor-g .caja.rev.on{transform:none}
}


/* How it works, phone only: steps become a carousel that follows the chat, and the chat gets shorter */
.hwm-dots{display:none}
@media(max-width:600px){
  #pasos .pasos-pin{gap:14px}
  #pasos .pasos-pin .how-grid{margin-top:0}
  #pasos .how-grid{gap:12px}
  #pasos .sec-head h2{margin-top:8px}

  /* the carousel */
  #pasos .hw-steps{display:flex;grid-template-rows:none;align-content:normal;height:auto;gap:10px;position:relative;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);overscroll-behavior-x:contain;
    margin:-6px calc(var(--pad) * -1) 0;padding:6px var(--pad) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #pasos .hw-steps::-webkit-scrollbar{display:none}
  /* room after the last card so it stops in the same place as the others */
  #pasos .hw-steps::after{content:"";flex:0 0 26px}
  #pasos .hw-steps li{flex:0 0 calc(100% - 36px);scroll-snap-align:start;
    display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;align-items:start;align-content:start;
    padding:14px 16px 15px;border-radius:20px;border:1px solid rgba(160,190,255,.16);
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
    transition:border-color .6s ease,background .6s ease,box-shadow .6s ease}
  #pasos .hw-steps li::before,#pasos .hw-steps li::after{display:none}
  #pasos .hw-steps li.now{border-color:rgba(47,130,255,.55);
    background:linear-gradient(180deg,rgba(47,130,255,.13),rgba(47,130,255,.035));
    box-shadow:inset 0 0 0 1px rgba(47,130,255,.12),inset 0 0 28px rgba(47,130,255,.08)}
  #pasos .hw-steps .n{width:32px;height:32px;font-size:12.5px;box-shadow:0 0 0 4px rgba(91,255,168,.1)}
  #pasos .hw-steps li.now .n{animation:hwmPulse 1.2s ease-in-out infinite}
  #pasos .hw-steps h3{margin:5px 0 0;font-size:16.5px;line-height:1.25;font-weight:500;letter-spacing:-.01em}
  #pasos .hw-steps p{margin:5px 0 0;font-size:14px;line-height:1.45;font-weight:400}
  /* before the chat starts, the cards are fully readable */
  #pasos .hw-steps.hwm-idle li :is(h3,p){opacity:1}
  #pasos .hw-steps.hwm-idle li .n{opacity:1;background:var(--acc);color:var(--on-blue);box-shadow:0 0 0 4px rgba(91,255,168,.1)}

  /* which card you are on */
  #pasos .hwm-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:-4px;height:10px}
  #pasos .hwm-dots i{display:block;width:6px;height:6px;border-radius:999px;background:rgba(160,190,255,.28);cursor:pointer;
    transition:width .45s cubic-bezier(.22,.8,.24,1),background .45s ease}
  #pasos .hwm-dots i{position:relative}
  #pasos .hwm-dots i::after{content:"";position:absolute;inset:-6px -3px -12px}
  #pasos .hwm-dots i.on{width:22px;background:#2F82FF}

  /* a shorter chat */
  #pasos .hw-col .hw-chat{height:clamp(372px,48svh,412px)!important;min-height:0!important;border-radius:22px}
  #pasos .hw-head{padding:8px 14px}
  #pasos .hw-av{width:30px;height:30px}
  #pasos .hw-body{padding:12px;gap:7px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16px);mask-image:linear-gradient(180deg,transparent 0,#000 16px)}
  #pasos .hw-foot{margin:0 10px 10px;min-height:42px}
  #pasos .hw-foot i{width:32px;height:32px}
  #pasos .hw-empty{gap:10px}
  #pasos .hw-msg .b{padding:7px 12px;font-size:14.5px;line-height:1.36}
  #pasos .hw-tr{margin-top:5px;font-size:13px}
  #pasos .hw-voice .pl{width:26px;height:26px}
  #pasos .hw-typing{padding:11px 13px!important}
  #pasos .hw-ok{min-height:40px;font-size:14.5px}
  #pasos .hw-again{padding:6px 14px;font-size:13.5px}
}
@keyframes hwmPulse{0%,100%{box-shadow:0 0 0 4px rgba(91,255,168,.12)}50%{box-shadow:0 0 0 7px rgba(91,255,168,.2),0 0 14px rgba(91,255,168,.4)}}
@media(max-width:600px) and (prefers-reduced-motion:reduce){
  #pasos .hw-steps li.now .n{animation:none}
  #pasos .hw-steps li,#pasos .hwm-dots i{transition:none}
}


/* 15-oct tg:3139: en movil las tarjetas de Trust van en columna; cada una entra al llegar, sin esperar a las de arriba */
@media(max-width:600px){html:not(.nojs) body #confianza .dolor-g .caja{--cd:0ms!important}
  html:not(.nojs) body #confianza .dolor-g .caja.rev{transform:translateY(24px) scale(.98);transition-duration:.55s,.6s}}
@media(min-width:601px) and (max-width:1023px){#confianza .dolor-g .caja:nth-child(3){--cd:0ms!important}#confianza .dolor-g .caja:nth-child(4){--cd:160ms!important}}

/* 15-oct tg:3145: en smartest la t pisaba la r; la palabra que rota va con el tracking casi neutro */
.hero h1 .rot,.hero h1 .rot>span{letter-spacing:-.004em!important}

/* How it works: the demo chat looks like the real Qiu app chat (invite video) */
#pasos #hwChat{position:relative;isolation:isolate;color:#E8EEFA;
  background:radial-gradient(60% 30% at 28% 104%,rgba(40,190,190,.26),transparent 70%),radial-gradient(85% 38% at 72% 106%,rgba(47,130,255,.42),transparent 72%),linear-gradient(180deg,#02061A 0%,#040B2B 48%,#08195A 100%)!important;
  border:1px solid rgba(140,175,255,.24)!important;
  box-shadow:0 30px 70px rgba(0,4,20,.65),0 0 0 1px rgba(47,130,255,.14),inset 0 1px 0 rgba(255,255,255,.06)!important}
#pasos #hwChat::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(150,180,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(150,180,255,.07) 1px,transparent 1px);background-size:34px 34px;background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.2),#000 90%);mask-image:linear-gradient(180deg,rgba(0,0,0,.2),#000 90%)}
#pasos #hwChat .hw-head{border-bottom:1px solid rgba(160,190,255,.12);background:rgba(255,255,255,.025)}
#pasos #hwChat .hw-head b{color:#fff;font-weight:600}
#pasos #hwChat .hw-head small{color:#5BE3A0}
#pasos #hwChat .hw-av,#pasos #hwChat .hw-qa{background:#050F35;box-shadow:0 0 0 1.5px #2F82FF,0 0 12px rgba(47,130,255,.3)}
#pasos #hwChat .hw-empty h4{color:#fff}
#pasos #hwChat .hw-empty p{color:rgba(214,224,245,.78)}
/* Qiu messages: label, avatar at the bottom, white bubble */
#pasos #hwChat .hw-msg.q{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:8px;align-items:end;max-width:94%}
#pasos #hwChat .hw-who{grid-column:2;grid-row:1;margin:0 0 5px 4px;font-size:12px;line-height:1.2;color:rgba(214,224,245,.62)}
#pasos #hwChat .hw-msg.q+.hw-msg.q .hw-who{display:none}
#pasos #hwChat .hw-qa{grid-column:1;grid-row:2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
#pasos #hwChat .hw-qa svg{width:64%;height:64%}
#pasos #hwChat .hw-msg .b{border-radius:20px;padding:10px 14px 9px;font-size:15px;line-height:1.4}
#pasos #hwChat .hw-msg.q .b{position:relative;grid-column:2;grid-row:2;justify-self:start;min-width:0;background:#fff;color:#0B1220;box-shadow:0 10px 26px rgba(0,6,30,.35)}
#pasos #hwChat .hw-msg.q .b:not(.hw-typing){display:flow-root}
#pasos #hwChat .hw-msg.q .b b{background:linear-gradient(90deg,#1A4FCC 0%,#2F82FF 55%,#45B4FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:600}
#pasos #hwChat .hw-typing{padding:13px 15px!important}
#pasos #hwChat .hw-typing i{background:#98A2B3}
/* your messages: blue bubble, time at the bottom right */
#pasos #hwChat .hw-msg.me .b{display:flex;flex-direction:column;background:linear-gradient(135deg,#3A86FF 0%,#2F6FEA 50%,#2A57D2 100%);color:#fff;border-bottom-right-radius:6px;box-shadow:0 10px 26px rgba(20,60,200,.35)}
#pasos #hwChat .hw-t{float:right;margin:8px -2px -3px 12px;font-size:11px;line-height:1;color:#7F899B;font-variant-numeric:tabular-nums;white-space:nowrap}
#pasos #hwChat .hw-msg.me .hw-t{order:9;align-self:flex-end;float:none;margin:5px -2px -1px 12px;color:rgba(255,255,255,.82)}
/* the result pill inside the Qiu bubble, one flat color */
#pasos #hwChat .hw-ok{display:flex;width:fit-content;align-items:center;justify-content:center;min-height:38px;margin:10px 46px 1px 0;padding:0 26px;border:0;border-radius:999px;
  background:#2F82FF;color:#fff;font:600 15px var(--font);box-shadow:0 6px 18px rgba(47,130,255,.45);-webkit-text-fill-color:#fff}
#pasos #hwChat .hw-ok.press{background:#1A6CEB;transform:scale(.96)}
#pasos #hwChat .hw-ok.sent{background:#2F82FF;transform:none}
#pasos #hwChat .hw-ok~.hw-t{position:absolute;right:14px;bottom:11px;margin:0;float:none}
#pasos #hwChat .hw-again{border:0;background:#2F82FF;color:#fff;border-radius:999px;padding:9px 20px;font:600 14px var(--font);box-shadow:0 6px 18px rgba(47,130,255,.4);transition:background .2s}
#pasos #hwChat .hw-again:hover{background:#1A6CEB}
/* the input bar */
#pasos #hwChat .hw-foot{gap:10px;padding:0 5px 0 14px;background:rgba(12,22,58,.6);border:1px solid rgba(160,190,255,.24);color:rgba(214,224,245,.56);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
#pasos #hwChat .hw-foot span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#pasos #hwChat .hw-foot .hw-plus,#pasos #hwChat .hw-foot .hw-mic{flex:none;display:grid;place-items:center;width:20px;height:20px}
#pasos #hwChat .hw-foot .hw-plus{color:rgba(214,224,245,.72)}
#pasos #hwChat .hw-foot .hw-mic{color:rgba(232,238,250,.88)}
#pasos #hwChat .hw-foot .hw-plus svg{width:18px;height:18px}
#pasos #hwChat .hw-foot .hw-mic svg{width:19px;height:19px}
#pasos #hwChat .hw-foot i{flex:none;background:#2F82FF;box-shadow:0 4px 14px rgba(47,130,255,.45)}
@media(max-width:600px){
  #pasos #hwChat .hw-msg.q{grid-template-columns:26px minmax(0,1fr);column-gap:7px}
  #pasos #hwChat .hw-qa{width:26px;height:26px}
  #pasos #hwChat .hw-who{margin-bottom:4px;font-size:11.5px}
  #pasos #hwChat .hw-msg .b{padding:8px 12px 8px;font-size:14.5px;line-height:1.36}
  #pasos #hwChat .hw-typing{padding:11px 13px!important}
  #pasos #hwChat .hw-ok{min-height:34px;padding:0 22px;font-size:14.5px;margin-top:8px}
  #pasos #hwChat .hw-ok~.hw-t{right:12px;bottom:9px}
  #pasos #hwChat .hw-again{padding:7px 16px;font-size:13.5px}
  #pasos #hwChat .hw-foot{padding:0 5px 0 12px;gap:8px}
}


#dolor .appstrip{margin:34px 0 8px;text-align:center}
#dolor .as-k{margin:0 0 4px;font-size:clamp(20px,2.4vw,28px);font-weight:600;letter-spacing:-.02em;color:#F2F6FF}
#dolor .as-k b{background:linear-gradient(90deg,#2F82FF,#45B4FF);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
#dolor .as-s{margin:0 0 22px;font-size:15px;color:#9DB0CC}
#dolor .as-vp{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);padding:10px 0}
#dolor .as-tr{display:flex;gap:18px;width:max-content;animation:asmove 140s linear infinite}
#dolor .as-g{display:flex;gap:18px}
#dolor .as-i{display:grid;place-items:center;width:72px;height:72px;flex:none;border-radius:20px;background:rgba(47,130,255,.08);border:1px solid rgba(120,160,255,.22);color:#2F82FF}
#dolor .as-i svg{width:34px;height:34px;fill:currentColor}
#dolor .as-i:hover{color:#45B4FF;background:rgba(47,130,255,.16)}
@keyframes asmove{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){#dolor .as-tr{animation:none;flex-wrap:wrap;width:auto;justify-content:center}#dolor .as-g[aria-hidden]{display:none}}
@media(max-width:640px){#dolor .as-i{width:60px;height:60px;border-radius:16px}#dolor .as-i svg{width:28px;height:28px}}
#planes .pb-vals{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;padding:0}
#planes .pb-vals li{font-size:13px;font-weight:600;padding:6px 12px;border-radius:99px;background:rgba(91,255,168,.12);color:#5BFFA8;border:1px solid rgba(91,255,168,.3)}
#planes .pb-best{display:inline-block;margin-left:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:linear-gradient(90deg,#2F82FF,#45B4FF);color:#fff}
.tr-actions .btn{flex:0 0 auto!important;white-space:nowrap}