/* StoriesMenu · landing de vendas — fonte do sistema Apple (SF Pro) com Inter como alternativa, cores vivas */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  --black:#000; --night:#0b0b10; --night2:#15151d; --night3:#1f1f29;
  --white:#fff; --gray:#f5f5f7; --gray2:#e8e8ed;
  --ink:#1d1d1f; --ink2:#6e6e73; --ink3:#86868b;
  --snow:#f5f5f7; --snow2:rgba(245,245,247,.74); --snow3:rgba(245,245,247,.52);
  --line-d:rgba(255,255,255,.12); --line-l:rgba(0,0,0,.09);
  --violet:#6d4aff; --purple:#b23cff; --pink:#ff2e7e; --orange:#ff8a1f; --yellow:#ffd23f; --mint:#18d6a3; --sky:#2fa8ff;
  --grad:linear-gradient(100deg,#7c5cff 0%,#c04dff 30%,#ff3d8b 62%,#ff9a2e 100%);
  --grad-deep:linear-gradient(100deg,#5531ff 0%,#a226f2 34%,#e81d6c 66%,#f06400 100%);
  --grad-btn:linear-gradient(100deg,#5b3df5 0%,#9f2ff0 50%,#d62c79 100%);
  --ring:conic-gradient(from -84deg,#6d4aff 0 30%,transparent 0 33.33%,#ff2e7e 0 63.33%,transparent 0 66.66%,#ff8a1f 0 96.66%,transparent 0);
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--black)}
body{font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.011em;color:var(--snow);background:var(--black);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility}
main{overflow-x:hidden;overflow-x:clip} /* celulares inclinados e a faixa não alargam a página */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;cursor:pointer}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:10px}
section[id],main[id]{scroll-margin-top:60px}
.wrap{width:min(var(--wrap),calc(100% - 44px));margin:0 auto}
.skip{position:absolute;left:-9999px;top:10px;z-index:100;padding:10px 14px;border-radius:10px;background:#fff;color:#000;font-weight:700}
.skip:focus{left:10px}

/* fundos */
.dark{background:var(--black);color:var(--snow)}
.gray{background:var(--gray);color:var(--ink);color-scheme:light}
.light{background:var(--white);color:var(--ink);color-scheme:light}

/* ---------- tipografia ---------- */
h1,h2{font-weight:700;text-wrap:balance}
h1{font-size:clamp(50px,8.6vw,118px);line-height:1.02;letter-spacing:-.045em}
h2{font-size:clamp(40px,5.6vw,78px);line-height:1.04;letter-spacing:-.042em}
h3{font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-.022em}
.grad{background-image:linear-gradient(100deg,#7c5cff 0%,#c04dff 16%,#ff3d8b 33%,#ff9a2e 50%,#ff3d8b 67%,#c04dff 84%,#7c5cff 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:shine 9s linear infinite}
.gray .grad,.light .grad{background-image:linear-gradient(100deg,#5531ff 0%,#a226f2 16%,#e81d6c 33%,#f06400 50%,#e81d6c 67%,#a226f2 84%,#5531ff 100%)}
@keyframes shine{to{background-position:200% 0}}
.eyebrow{display:inline-block;font-size:19px;font-weight:600;letter-spacing:-.015em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gray .eyebrow,.light .eyebrow{background-image:var(--grad-deep)}
.lead{margin:24px auto 0;max-width:680px;font-size:clamp(18px,1.6vw,22px);line-height:1.42;letter-spacing:-.018em;color:var(--snow2)}
.body{margin-top:22px;max-width:540px;font-size:19px;line-height:1.47;letter-spacing:-.016em;color:var(--snow2)}
.sub{margin-top:20px;max-width:700px;font-size:21px;line-height:1.4;letter-spacing:-.018em;color:var(--snow2)}
.gray .body,.gray .sub,.light .body,.light .sub{color:var(--ink2)}
.small{margin-top:18px;font-size:13px;color:var(--ink3)}
.center{text-align:center}

/* ---------- monograma SM: anel de stories em três partes ---------- */
.sm{--d:32px;--t:3px;position:relative;display:inline-grid;place-items:center;width:var(--d);height:var(--d);flex:none;font-style:normal}
.sm::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ring);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--t) - .6px),#000 calc(100% - var(--t)));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--t) - .6px),#000 calc(100% - var(--t)))}
.sm b{font-size:calc(var(--d) * .33);font-weight:800;letter-spacing:-.04em;line-height:1}
.sm-xs{--d:22px;--t:2.2px}
.sm-lg{--d:76px;--t:5px}

/* ---------- botões ---------- */
.btn{height:52px;padding:0 26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;transition:transform .2s var(--ease),filter .2s,background .2s,box-shadow .25s,color .2s,border-color .2s}
.btn svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:scale(.97)}
.btn-sm{height:36px;padding:0 16px;font-size:14px}
.btn.wide{width:100%}
.btn-grad{background:var(--grad-btn);color:#fff;box-shadow:0 12px 32px -12px rgba(214,44,121,.75)}
.btn-grad:hover{filter:brightness(1.1) saturate(1.05);box-shadow:0 16px 40px -12px rgba(214,44,121,.9)}
.btn-glass{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn-glass:hover{background:rgba(255,255,255,.16)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:#f0f0f3}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-line{border:1px solid rgba(0,0,0,.18);color:var(--ink)}
.btn-line:hover{background:rgba(0,0,0,.04)}
.btn:disabled{opacity:.7;cursor:progress}
.link{display:inline-flex;align-items:center;gap:4px;margin-top:28px;font-size:18px;font-weight:600;letter-spacing:-.015em;color:#ff6fa5;transition:gap .25s var(--ease)}
.gray .link,.light .link{color:#d61a63}
.link svg{width:17px;height:17px;stroke-width:2.2}
.link:hover{gap:8px;text-decoration:underline;text-underline-offset:4px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* ---------- navegação ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(0,0,0,.62);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);transition:box-shadow .3s}
.nav.solid{box-shadow:0 1px 0 var(--line-d)}
.nav-in{height:56px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.brand .word em{font-style:normal;font-weight:500;opacity:.78}
.nav .sm{--d:30px;--t:2.8px}
.nav-links{display:flex;gap:4px}
.nav-links a{padding:8px 13px;border-radius:999px;font-size:14px;font-weight:500;color:var(--snow2);transition:color .2s,background .2s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)}

/* ---------- capa ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:132px 0 60px;text-align:center}
.aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;opacity:.5;will-change:transform}
.aurora .b1{left:-22%;top:-30%;background:radial-gradient(closest-side,rgba(109,74,255,.9),transparent 72%);animation:drift1 24s ease-in-out infinite alternate}
.aurora .b2{right:-24%;top:-18%;background:radial-gradient(closest-side,rgba(255,46,126,.8),transparent 72%);animation:drift2 28s ease-in-out infinite alternate}
.aurora .b3{left:18%;bottom:-48%;background:radial-gradient(closest-side,rgba(255,138,31,.65),transparent 72%);animation:drift3 32s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(14%,12%) scale(1.12)}}
@keyframes drift2{to{transform:translate(-12%,16%) scale(.92)}}
@keyframes drift3{to{transform:translate(-10%,-14%) scale(1.08)}}
.hero-in,.stage,.proof,.sec>.wrap,.case-in{position:relative;z-index:1}
.pill{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px 0 9px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--snow2)}
.hero h1{margin-top:26px}
.hero .ctas{justify-content:center}
.ticks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin-top:28px;list-style:none;font-size:15px;font-weight:500;color:var(--snow2)}
.ticks li{display:flex;align-items:center;gap:7px}
.ticks svg{width:17px;height:17px;color:var(--mint);stroke-width:2.4}

/* palco com os celulares */
.stage{height:760px;margin:70px auto 0;max-width:1100px}
.halo{position:absolute;left:50%;top:44%;width:980px;height:980px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,46,126,.34),rgba(109,74,255,.22) 48%,rgba(255,138,31,.08) 64%,transparent 74%)}
.ring{position:absolute;left:50%;top:44%;width:720px;height:720px;margin:-360px 0 0 -360px;border-radius:50%;background:var(--ring);opacity:.95;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 22px),#000 calc(100% - 21px));mask:radial-gradient(farthest-side,transparent calc(100% - 22px),#000 calc(100% - 21px));
  animation:spin 70s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.stage{perspective:1800px}
.stage .phone{position:absolute;left:50%;top:0;will-change:transform}
.ph-c{--w:332px;z-index:3;transform:translateX(-50%) translateY(calc(var(--sp,0) * -36px)) rotateY(calc(var(--mx,0) * -7deg)) rotateX(calc(var(--my,0) * 5deg))}
.ph-l{--w:272px;z-index:2;transform:translate(calc(-146% - var(--sp,0) * 70px - var(--mx,0) * 16px),calc(92px + var(--sp,0) * 26px - var(--my,0) * 8px)) rotate(calc(-8deg - var(--sp,0) * 5deg))}
.ph-r{--w:272px;z-index:2;transform:translate(calc(46% + var(--sp,0) * 70px - var(--mx,0) * 16px),calc(92px + var(--sp,0) * 26px - var(--my,0) * 8px)) rotate(calc(8deg + var(--sp,0) * 5deg))}
.ph-l .scr,.ph-r .scr{filter:brightness(.82)}
.proof{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin-top:64px;font-size:15px;color:var(--snow3)}
.proof-logo img{height:20px;width:auto}
.proof .sep{opacity:.5}
.proof-link{display:inline-flex;align-items:center;gap:2px;margin-left:6px;font-weight:600;color:#ff6fa5}
.proof-link svg{width:16px;height:16px;stroke-width:2.2}

/* fichas flutuantes */
.chip{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:20px;background:rgba(30,30,38,.72);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 50px -18px rgba(0,0,0,.7);text-align:left;line-height:1.3}
.chip b{display:block;font-size:14px;font-weight:600}
.chip small{display:block;font-size:12.5px;color:var(--snow2)}
.chip code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;color:var(--yellow)}
.chip-ticket{left:4%;top:120px}
.chip-live{right:3%;top:300px;padding-left:16px}
.chip-fav{left:9%;bottom:120px}
.ck{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(24,214,163,.18);color:var(--mint)}
.ck svg{width:18px;height:18px;stroke-width:2.6}
.hz{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,46,126,.2);color:var(--pink)}
.hz svg{width:17px;height:17px;fill:currentColor;stroke:none}
.pulse{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(24,214,163,.55);animation:pulse 2s infinite;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(24,214,163,0)}100%{box-shadow:0 0 0 0 rgba(24,214,163,0)}}
.float{animation:float 7s ease-in-out infinite}
.float.f2{animation-delay:-2.4s}
.float.f3{animation-delay:-4.8s}
@keyframes float{50%{translate:0 -10px}}

/* ---------- moldura de celular ---------- */
.phone{position:relative;width:var(--w,300px);padding:9px;border-radius:calc(var(--w,300px) * .16);
  background:linear-gradient(150deg,#64646f 0%,#1d1d23 22%,#0c0c0f 70%,#3a3a44 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 1px rgba(0,0,0,.55),0 50px 90px -30px rgba(0,0,0,.75)}
.gray .phone,.light .phone{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 1px rgba(0,0,0,.18),0 50px 90px -36px rgba(30,20,60,.5)}
.phone .scr{position:relative;aspect-ratio:390/844;border-radius:calc(var(--w,300px) * .125);overflow:hidden;background:#000;isolation:isolate}
.phone .scr>img{width:100%;height:100%;object-fit:cover}
.phone iframe{position:absolute;z-index:2;top:0;left:0;width:390px;height:844px;border:0;background:#000;transform-origin:0 0;transform:scale(var(--s,.78));opacity:0;transition:opacity .6s}
.scr.live iframe{opacity:1}
.live-btn{position:absolute;z-index:3;left:50%;bottom:8%;transform:translateX(-50%);height:40px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.95);color:#111;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 12px 30px rgba(0,0,0,.45);transition:transform .2s var(--ease)}
.live-btn:hover{transform:translateX(-50%) scale(1.04)}
.scr.live .live-btn{display:none}

/* ---------- seções ---------- */
.sec{position:relative;overflow:hidden;overflow:clip;padding:140px 0}
.sec-head{max-width:860px;margin-bottom:64px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .sub{margin-left:auto;margin-right:auto}
.sec-head h2{margin-top:10px}

/* antes e depois */
.versus{display:grid;gap:12px;max-width:1040px;margin:0 auto}
.vs-labels{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 8px;font-size:15px;font-weight:600;color:var(--ink3)}
.vs-labels span:last-child{display:flex;align-items:center;gap:8px;color:var(--ink)}
.vs-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vs-row p{display:flex;align-items:center;gap:16px;padding:22px 26px;border-radius:22px;font-size:17px;line-height:1.38}
.vs-no{color:var(--ink3);border:1.5px dashed rgba(0,0,0,.13)}
.vs-no svg{color:rgba(0,0,0,.28)}
.vs-yes{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.04),0 20px 40px -28px rgba(40,20,90,.35)}
.vs-yes svg{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--grad-btn);color:#fff;stroke-width:2.8}

/* texto + imagens */
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}
.split-rev{grid-template-columns:1.08fr .92fr}
.split-rev .split-txt{order:2}
.split-txt h2{margin-top:10px;font-size:clamp(40px,4.9vw,70px)}
.feats{list-style:none;margin-top:30px;display:grid;gap:16px;max-width:520px}
.feats li{position:relative;padding-left:24px;font-size:17px;color:var(--snow2)}
.feats li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--grad-btn)}
.feats li:nth-child(2)::before{background:linear-gradient(135deg,var(--pink),var(--orange))}
.feats li:nth-child(3)::before{background:linear-gradient(135deg,var(--mint),var(--sky))}
.feats b{color:#fff;font-weight:600}
.fan{position:relative;height:690px}
.fan .phone{position:absolute;top:50%;left:50%;--w:262px}
.fan .p1{transform:translate(-122%,-47%) rotate(-9deg)}
.fan .p2{z-index:2;--w:298px;transform:translate(-50%,-50%)}
.fan .p3{transform:translate(22%,-44%) rotate(8deg)}
.fan .p1 .scr,.fan .p3 .scr{filter:brightness(.8)}

/* faixa */
.marquee{position:relative;z-index:3;overflow:hidden;padding:22px 0;margin:-26px 0;background:var(--grad);background-size:200% 100%;color:#fff;transform:rotate(-1.3deg) scale(1.03);box-shadow:0 20px 50px -20px rgba(160,40,200,.55);animation:mqbg 14s ease-in-out infinite alternate}
@keyframes mqbg{to{background-position:100% 0}}
.mq-track{display:flex;align-items:center;gap:30px;width:max-content;animation:mq 44s linear infinite;font-size:clamp(30px,3.6vw,50px);font-weight:700;letter-spacing:-.035em;line-height:1.1;white-space:nowrap}
.mq-track i{width:22px;height:22px;border-radius:50%;border:4px solid rgba(255,255,255,.85);flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* recursos */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(232px,auto);gap:18px}
.bx{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.bx:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(0,0,0,.03),0 34px 60px -34px rgba(60,30,140,.45)}
.bx{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:30px;border-radius:28px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03),0 24px 50px -36px rgba(40,20,90,.35)}
.bx h3{font-size:22px}
.bx p{font-size:15.5px;line-height:1.47;color:var(--ink2)}
.bx-k{font-size:15px;font-weight:600;letter-spacing:-.01em;background:var(--grad-deep);-webkit-background-clip:text;background-clip:text;color:transparent}
.k-mint{background:linear-gradient(100deg,#0aa57b,#0a83c9);-webkit-background-clip:text;background-clip:text}
.bx-tall{grid-column:span 2;grid-row:span 2;display:grid;grid-template-columns:1fr .92fr;align-items:end;gap:20px;padding:0 0 0 34px;background:var(--black);color:#fff}
.bx-tall .bx-txt{align-self:start;padding:40px 0 30px}
.bx-tall .bx-k{background:var(--grad);-webkit-background-clip:text;background-clip:text}
.bx-tall h3{margin-top:8px;font-size:clamp(28px,2.6vw,38px);line-height:1.08;letter-spacing:-.035em}
.bx-live h3{margin-top:6px;font-size:clamp(24px,2.1vw,30px);line-height:1.1;letter-spacing:-.03em}
.bx-tall p{margin-top:14px;font-size:17px;color:var(--snow2)}
.bx-shot{align-self:end;padding-top:28px}
.bx-shot img{width:100%;height:450px;object-fit:cover;object-position:top;border-radius:26px 0 0 0;box-shadow:-10px 0 50px rgba(124,92,255,.35)}
.bx-live{grid-column:span 2;background:linear-gradient(135deg,#fff 35%,#e9fbf5)}
.bx-live p{max-width:470px}
.live-ui{align-self:flex-end;margin-bottom:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:14px 18px;border-radius:18px;background:var(--black);color:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
.live-ui span{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mint)}
.live-ui b{font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.2}
.live-ui small{font-size:12px;color:var(--snow3)}
.search-ui{display:flex;gap:8px;margin-bottom:auto}
.search-ui span{flex:1;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:14px;background:var(--gray);font-size:15px;font-weight:500;color:var(--ink2)}
.search-ui span svg{width:17px;height:17px}
.search-ui i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),var(--orange));color:#fff}
.search-ui i svg{fill:currentColor;stroke:none}
.tags-ui{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:auto}
.tags-ui span{font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px}
.tags-ui .t1{background:rgba(24,214,163,.15);color:#078a66}
.tags-ui .t2{background:rgba(47,168,255,.15);color:#0767b3}
.tags-ui .t3{background:var(--grad-btn);color:#fff}
.tags-ui .t4{background:rgba(109,74,255,.13);color:#4f2df0}
.tags-ui .t5{background:var(--gray);color:var(--ink3);text-decoration:line-through}
.ico{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;margin-bottom:auto;color:#fff;box-shadow:0 10px 24px -10px rgba(60,30,120,.5)}
.ico svg{width:24px;height:24px;stroke-width:2}
.i1{background:linear-gradient(135deg,#7c5cff,#ff3d8b)}
.i2{background:linear-gradient(135deg,#ff9a2e,#ffcf3a)}
.i3{background:linear-gradient(135deg,#2fa8ff,#7c5cff)}
.i4{background:linear-gradient(135deg,#18d6a3,#2fa8ff)}

/* reservas */
.grid-feats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin-top:30px;max-width:560px}
.grid-feats li{position:relative;padding-left:30px;font-size:16.5px;color:var(--ink)}
.grid-feats li::before{content:"";position:absolute;left:0;top:.12em;width:20px;height:20px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/12px no-repeat,var(--grad-btn)}
.duo{position:relative;height:650px}
.duo .phone{position:absolute;--w:284px}
.duo .d1{left:4%;top:0;transform:rotate(-4deg)}
.duo .d2{right:2%;bottom:0;z-index:2;transform:rotate(5deg)}

/* painel */
.aurora.a2 i{opacity:.32}
.aurora.a2 .b1{left:-30%;top:10%}
.aurora.a2 .b2{right:-30%;top:30%}
.browser{max-width:1120px;margin:0 auto;border-radius:18px;overflow:hidden;background:#1d1915;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 140px -30px rgba(124,92,255,.5)}
.browser .bar{height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#2a2a30}
.browser .bar i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.browser .bar i:nth-child(2){background:#febc2e}
.browser .bar i:nth-child(3){background:#28c840}
.browser .url{margin:0 auto;transform:translateX(-30px);width:min(360px,50%);height:24px;display:grid;place-items:center;border-radius:7px;background:#1c1c21;font-size:12px;color:rgba(255,255,255,.5)}
.browser img{width:100%}
.panel-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1120px;margin:50px auto 46px}
.pf b{display:block;font-size:18px;font-weight:600;letter-spacing:-.02em}
.pf span{display:block;margin-top:6px;font-size:15px;line-height:1.47;color:var(--snow2)}

/* sua marca */
.presets{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.preset{height:48px;padding:0 18px 0 8px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-l);font-size:15px;font-weight:600;color:var(--ink);box-shadow:0 6px 18px -12px rgba(0,0,0,.3);transition:background .2s,color .2s,transform .15s}
.preset:hover{transform:translateY(-1px)}
.preset:active{transform:scale(.96)}
.preset i{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.preset.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.solo{display:grid;place-items:center;padding:20px 0}
.phone-play{--w:320px}

/* case */
.case{position:relative;isolation:isolate;overflow:hidden;padding:160px 0 130px}
.case-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.case-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.84) 46%,rgba(0,0,0,.3) 100%),linear-gradient(0deg,rgba(0,0,0,.7),transparent 45%)}
.case-in>*{max-width:640px}
.case-logo{height:46px;width:auto;margin-top:24px}
.case-in>h2{margin-top:26px;max-width:940px;font-size:clamp(40px,5vw,68px)}
.facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:16px 40px;margin-top:42px}
.facts dt{font-size:54px;font-weight:700;letter-spacing:-.045em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.facts dd{margin-top:8px;font-size:14px;color:var(--snow2)}

/* como funciona */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps li{padding:36px 32px;border-radius:28px;background:var(--gray)}
.steps .n{display:block;margin-bottom:24px;font-size:80px;font-weight:700;letter-spacing:-.06em;line-height:.85;background:var(--grad-deep);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps h3{font-size:22px}
.steps p{margin-top:10px;font-size:16px;line-height:1.47;color:var(--ink2)}
.note{margin:32px auto 0;max-width:660px;text-align:center;font-size:17px;color:var(--ink2)}

/* planos */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;max-width:1120px;margin:0 auto}
.plan{position:relative;display:flex;flex-direction:column;padding:38px 32px 32px;border-radius:30px;background:#fff;border:2px solid transparent;box-shadow:0 1px 2px rgba(0,0,0,.03),0 24px 50px -36px rgba(40,20,90,.35)}
.plan h3{display:flex;align-items:center;gap:10px;font-size:28px;letter-spacing:-.03em}
.plan h3 .sm{--d:30px;--t:2.8px}
.plan-for{margin-top:10px;font-size:16px;color:var(--ink2)}
.price{display:flex;align-items:baseline;gap:4px;margin-top:26px;font-size:68px;font-weight:700;letter-spacing:-.05em;line-height:1}
.price small{align-self:flex-start;margin-top:8px;font-size:24px;font-weight:600;letter-spacing:-.02em}
.price span{font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--ink2)}
.price-talk{min-height:68px;align-items:center}
.price .pv{font-weight:700;display:inline-block}
.price .pv.pop{animation:pop .4s var(--ease)}
@keyframes pop{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}
.price-note{margin-top:10px;min-height:2.9em;font-size:14px;line-height:1.45;color:var(--ink2)}
.price-note b{font-weight:600;color:#078a66}
.billing-wrap{margin:-30px 0 44px;text-align:center}
.billing{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:#fff;border:1px solid var(--line-l);box-shadow:0 8px 24px -16px rgba(40,20,90,.35)}
.billing button{height:44px;padding:0 20px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink2);transition:background .25s,color .25s}
.billing button:hover{color:var(--ink)}
.billing button.on{background:var(--ink);color:#fff}
.billing .save{padding:3px 9px;border-radius:999px;background:var(--grad-btn);color:#fff;font-size:12px;font-weight:700;letter-spacing:0}
.price.price-talk span.grad{font-size:32px;font-weight:700;letter-spacing:-.035em;line-height:1.05;color:transparent}
.plan ul{list-style:none;flex:1;display:grid;align-content:start;gap:13px;margin:28px 0 32px;padding-top:26px;border-top:1px solid var(--line-l)}
.plan li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.42}
.plan li::before{content:"";position:absolute;left:0;top:.1em;width:19px;height:19px;border-radius:50%;background:rgba(109,74,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b3df5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/12px no-repeat}
.plan .btn{width:100%}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.plan-hl{background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--ang),#6d4aff,#c04dff,#ff2e7e,#ff8a1f,#ffd23f,#ff2e7e,#6d4aff) border-box;box-shadow:0 40px 90px -40px rgba(214,44,121,.6);animation:ang 6s linear infinite}
@keyframes ang{to{--ang:360deg}}
.plan-hl li::before{background-color:rgba(214,44,121,.12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d62c79' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E")}
.badge{position:absolute;top:-15px;left:32px;height:30px;padding:0 14px;display:grid;place-items:center;border-radius:999px;background:var(--grad-btn);color:#fff;font-size:13px;font-weight:600;letter-spacing:-.01em;box-shadow:0 8px 20px -8px rgba(214,44,121,.8)}

/* dúvidas */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.faq-wrap .sec-head{position:sticky;top:110px}
.faq-wrap h2{font-size:clamp(36px,4.2vw,56px)}
.faq details{border-bottom:1px solid var(--line-l)}
.faq details:first-child{border-top:1px solid var(--line-l)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--gray) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .3s var(--ease),background-color .2s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--gray2)}
.faq p{max-width:640px;padding:0 2px 24px;font-size:17px;color:var(--ink2)}

/* contato */
.contact{isolation:isolate}
.aurora.a3 i{opacity:.4}
.aurora.a3 .b1{left:-35%;top:auto;bottom:-40%}
.aurora.a3 .b2{right:-30%;top:-40%}
.aurora.a3 .b3{display:none}
.contact-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.contact-txt h2{margin-top:10px}
#contato-diretos:empty{display:none}
.lead-form{display:grid;gap:16px;padding:32px;border-radius:30px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);box-shadow:0 40px 100px -40px rgba(0,0,0,.8)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0;border:0}
.field>span,.field legend{font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--snow2)}
.field legend{margin-bottom:8px}
.field small{margin-left:4px;font-weight:500;color:var(--snow3)}
.field input:not([type=radio]),.field textarea{width:100%;height:50px;padding:0 15px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:17px;outline:0;transition:border-color .2s,box-shadow .2s}
.field textarea{height:auto;min-height:94px;padding:13px 15px;resize:vertical;line-height:1.45}
.field input::placeholder,.field textarea::placeholder{color:var(--snow3)}
.field input:focus,.field textarea:focus{border-color:#ff5c9a;box-shadow:0 0 0 4px rgba(255,46,126,.2)}
.field input[aria-invalid="true"]{border-color:#ff6b6b;box-shadow:0 0 0 4px rgba(255,107,107,.16)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{position:relative;cursor:pointer}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{display:inline-flex;align-items:center;height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);font-size:14.5px;font-weight:600;color:var(--snow2);transition:all .2s}
.opts input:checked+span{background:#fff;border-color:#fff;color:var(--ink)}
.opts input:focus-visible+span{outline:2px solid var(--pink);outline-offset:2px}
.form-msg{padding:12px 15px;border-radius:14px;background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.38);color:#ffc9c9;font-size:15px}
.form-msg a{color:#fff;font-weight:700;text-decoration:underline}
.privacy{font-size:12.5px;text-align:center;color:var(--snow3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:52px 32px;border-radius:30px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.sent h3{margin-top:10px;font-size:44px;letter-spacing:-.04em}
.sent p{color:var(--snow2)}
.sent .sm b{font-size:24px}
.sent .sm::before{animation:spin 6s linear infinite}

/* rodapé */
.foot{padding:40px 0 48px;background:var(--gray);color:var(--ink2);border-top:1px solid var(--line-l);color-scheme:light}
.foot-in{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:30px}
.foot .brand{color:var(--ink);font-size:19px}
.foot p{margin-top:10px;font-size:13px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px}
.foot nav a:hover{color:var(--ink);text-decoration:underline}
.foot .copy{margin:0;font-size:12.5px;color:var(--ink3)}


/* ================= movimento e elementos gráficos ================= */

/* barra de progresso em forma de stories (um segmento por seção) */
.story-bar{position:absolute;left:0;right:0;bottom:-1px;height:3px;display:flex;gap:4px;padding:0 max(22px,calc((100% - var(--wrap)) / 2));pointer-events:none}
.story-bar i{flex:1;height:100%;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.story-bar b{display:block;width:100%;height:100%;border-radius:3px;transform-origin:0 50%;transform:scaleX(0)}

/* fila de stories da capa */
.stories-row{display:flex;justify-content:center;gap:22px;margin:44px auto 0;padding:6px 4px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.stories-row::-webkit-scrollbar{display:none}
.sto{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none;font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--snow2);transition:color .3s}
.sto .av{position:relative;display:block;width:74px;height:74px;padding:5px;border-radius:50%;transition:transform .45s var(--ease)}
.sto .av::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ring);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
.sto .av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.sto i{font-style:normal}
.sto.on{color:#fff}
.sto.on .av{transform:scale(1.1)}
.sto.on .av::before{animation:spin 2.2s linear infinite}
.sto:hover .av{transform:scale(1.08)}

/* parede de fotos */
.wall{position:relative;overflow:hidden;overflow:clip;padding:40px 0 130px}
.wall .sec-head{margin-bottom:52px}
.rows{display:grid;gap:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.rows .track{display:flex;gap:18px;width:max-content;animation:mq 90s linear infinite}
.row-b .track{animation-direction:reverse;animation-duration:100s}
.rows:hover .track{animation-play-state:paused}
.ph{position:relative;flex:none;width:214px;aspect-ratio:3/4;border-radius:24px;overflow:hidden;background:#111;transition:transform .4s var(--ease)}
.ph:hover{transform:translateY(-6px) rotate(-1deg)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:46px 14px 13px;background:linear-gradient(transparent,rgba(0,0,0,.86));font-size:13.5px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:#fff}
.ph figcaption b{padding:3px 9px;border-radius:999px;background:var(--grad-btn);font-size:12px;font-weight:700}

/* SM Stories: celular fixo que troca de tela na rolagem */
.scrolly{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.scrolly-steps{display:flex;flex-direction:column}
.sstep{min-height:76vh;display:flex;flex-direction:column;justify-content:center;max-width:480px;padding:30px 0;opacity:.26;transition:opacity .6s var(--ease)}
.sstep.on{opacity:1}
.sstep .sn{font-size:15px;font-weight:700;letter-spacing:.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sstep h3{margin-top:10px;font-size:clamp(32px,3.4vw,50px);line-height:1.05;letter-spacing:-.042em}
.sstep p{margin-top:16px;font-size:19px;line-height:1.47;letter-spacing:-.016em;color:var(--snow2)}
.scrolly-stage{position:sticky;top:max(84px,calc(50vh - 350px));display:flex;flex-direction:column;align-items:center;gap:18px}
.sbar{display:flex;gap:6px;width:min(300px,80%)}
.sbar i{position:relative;flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden}
.sbar i::after{content:"";position:absolute;inset:0;border-radius:4px;background:var(--grad-btn);transform-origin:0 50%;transform:scaleX(var(--f,0));transition:transform .6s var(--ease)}
.sticky-phone{--w:min(318px,calc((100vh - 190px) * .46))}
.sticky-phone .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.sticky-phone .scr img.on{opacity:1;transform:none}
/* capa: o celular passa as telas como stories */
.player>img{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .7s var(--ease),transform 3.2s ease-out}
.player>img.on{opacity:1;transform:none}
.scr-bar{position:absolute;z-index:3;top:1.4%;left:7%;right:7%;display:flex;gap:4px;pointer-events:none}
.scr-bar i{position:relative;flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.32);overflow:hidden}
.scr-bar i::after{content:"";position:absolute;inset:0;border-radius:3px;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.scr-bar i.done::after{transform:none}
.scr-bar i.now::after{animation:barra var(--dur,2800ms) linear forwards}
@keyframes barra{to{transform:none}}
.scr.live .scr-bar{display:none}
@keyframes bob{50%{translate:0 -8px}}
.scrolly-stage::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:620px;height:620px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,46,126,.28),rgba(109,74,255,.16) 55%,transparent 75%)}

/* reservas: copos enchendo */
.pax{display:flex;align-items:center;gap:22px;max-width:560px;margin-top:28px;padding:16px 22px;border-radius:22px;background:var(--gray)}
.pax-n{display:flex;flex-direction:column;align-items:center;min-width:64px}
.pax-n b{font-size:46px;font-weight:700;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.pax-n span{margin-top:2px;font-size:12px;font-weight:600;color:var(--ink2)}
.pax-g{flex:1;display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.pax-g svg{width:100%;max-width:24px;height:auto;margin:0 auto;overflow:visible}
.pax-g .g-body{fill:none;stroke:rgba(0,0,0,.24);stroke-width:1.4;transition:stroke .3s}
.pax-g .g-beer,.pax-g .g-foam{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .4s var(--ease)}
.pax-g .g-beer{fill:#f4a62a;stroke:none}
.pax-g .g-foam{fill:#fff8ea;stroke:rgba(0,0,0,.14);stroke-width:.6}
.pax-g .on .g-beer,.pax-g .on .g-foam{transform:none}
.pax-g .on .g-body{stroke:#d38912}

/* ao vivo: nomes passando */
.ticker{position:relative;display:block;height:1.25em;overflow:hidden}
.ticker em{display:block;font-style:normal;white-space:nowrap;transition:transform .45s var(--ease),opacity .45s}
.ticker em.sai{transform:translateY(-100%);opacity:0}
.ticker em.entra{transform:translateY(100%);opacity:0;transition:none}

/* contato: anel grande ao fundo */
.ring.ring-deco{left:-300px;top:auto;bottom:-360px;margin:0;width:720px;height:720px;opacity:.38;z-index:0;animation-duration:90s}

@media (max-width:1060px){
  /* celular fixo no topo e os textos passando por cima, em cartões de vidro */
  .scrolly{display:flex;flex-direction:column;position:relative}
  .scrolly-stage{order:-1;position:sticky;top:0;height:100vh;height:100svh;justify-content:flex-start;padding-top:78px;z-index:0}
  .scrolly-stage::before{width:460px;height:460px;top:42%}
  .sticky-phone{--w:min(290px,calc((100svh - 300px) * .46))}
  .scrolly-steps{position:relative;z-index:1;margin-top:-100vh;margin-top:-100svh}
  .sstep{min-height:100vh;min-height:100svh;max-width:none;opacity:1;justify-content:flex-end;align-items:center;padding:0 0 6vh}
  .sstep-card{width:min(100%,560px);padding:20px 22px;border-radius:24px;background:rgba(20,20,28,.74);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px -24px rgba(0,0,0,.7);opacity:0;transform:translateY(26px) scale(.98);transition:opacity .55s var(--ease),transform .55s var(--ease)}
  .sstep.on .sstep-card{opacity:1;transform:none}
  .sstep h3{font-size:clamp(24px,5.4vw,34px)}
  .sstep p{margin-top:10px;font-size:16px}
  .ring.ring-deco{width:520px;height:520px;left:-260px;bottom:-300px}
}
@media (max-width:680px){
  .story-bar{padding:0 16px;gap:3px}
  .stories-row{justify-content:flex-start;gap:16px;margin-top:34px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .sto .av{width:64px;height:64px;padding:4px}
  .sto{font-size:12px}
  .wall{padding:20px 0 90px}
  .ph{width:156px;border-radius:18px}
  .ph figcaption{font-size:12px;padding:36px 11px 10px}
  .sstep-card{padding:18px}
  /* capa: celulares respirando, sem o terceiro selo para não poluir */
  .chip-fav{display:none}
  .ph-c{animation:bob 7s ease-in-out -1.5s infinite}
  .ph-l{animation:bob 6s ease-in-out infinite}
  .ph-r{animation:bob 6s ease-in-out -3s infinite}
  /* recursos e passos: cartões que se empilham na rolagem */
  .bento{display:flex;flex-direction:column}
  .bento .bx{position:sticky;top:calc(66px + var(--k,0) * 10px);min-height:220px}
  .steps{display:flex;flex-direction:column}
  .steps li{position:sticky;top:calc(66px + var(--k,0) * 10px);box-shadow:0 -10px 30px -18px rgba(0,0,0,.25)}
  .pax{gap:14px;padding:14px 16px}
  .pax-n b{font-size:38px}
  .ring.ring-deco{opacity:.3}
}

/* ---------- entrada ao rolar ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .stage.reveal{transform:translateY(40px) scale(.98)}
.js .reveal>h2,.js h2.reveal,.js .reveal>h1,.js h1.reveal{filter:blur(14px);transition:filter 1.2s var(--ease),opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in>h2,.js h2.reveal.in,.js .reveal.in>h1,.js h1.reveal.in{filter:none}
.js .stage.reveal.in{transform:none}

/* ---------- telas menores ---------- */
@media (max-width:1060px){
  .nav-links{display:none}
  .stage{height:640px;max-width:860px}
  .ring{width:600px;height:600px;margin:-300px 0 0 -300px}
  .halo{width:800px;height:800px}
  .ph-c{--w:290px}
  .ph-l,.ph-r{--w:236px}
  .chip-ticket{left:0;top:96px}
  .chip-live{right:0;top:260px}
  .chip-fav{left:2%;bottom:96px}
  .split,.split-rev{grid-template-columns:1fr;gap:40px}
  .split-rev .split-txt{order:0}
  .bento{grid-template-columns:1fr 1fr}
  .panel-feats{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr;max-width:540px}
  .faq-wrap{grid-template-columns:1fr;gap:10px}
  .faq-wrap .sec-head{position:static;margin-bottom:26px}
  .contact-in{grid-template-columns:1fr;gap:40px}
  .steps{grid-template-columns:1fr;max-width:620px;margin:0 auto}
}
@media (max-width:680px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .nav-in{height:52px}
  .brand{font-size:18px;gap:8px}
  .nav .sm{--d:27px;--t:2.6px}
  .sec{padding:92px 0}
  .sec-head{margin-bottom:42px}
  .eyebrow{font-size:17px}
  .body{font-size:17px}
  .sub{font-size:18px}
  .hero{padding:96px 0 40px}
  .pill{height:36px;font-size:12.5px;padding:0 14px 0 7px}
  .pill .sm{--d:20px}
  .hero h1{margin-top:20px}
  .ctas .btn{width:100%}
  .ticks{gap:8px 18px;font-size:14px}
  .stage{height:520px;margin-top:44px}
  .ring{width:380px;height:380px;margin:-190px 0 0 -190px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px));mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px))}
  .halo{width:520px;height:520px}
  .ph-c{--w:226px}
  .ph-l,.ph-r{--w:172px}
  .ph-l{transform:translate(calc(-128% - var(--sp,0) * 30px),calc(62px + var(--sp,0) * 16px)) rotate(calc(-8deg - var(--sp,0) * 4deg))}
  .ph-r{transform:translate(calc(28% + var(--sp,0) * 30px),calc(62px + var(--sp,0) * 16px)) rotate(calc(8deg + var(--sp,0) * 4deg))}
  .chip{padding:9px 13px 9px 9px;border-radius:16px;gap:9px}
  .chip b{font-size:12.5px}
  .chip small{font-size:11px}
  .ck,.hz{width:28px;height:28px}
  .chip-ticket{left:-2%;top:30px}
  .chip-live{right:-2%;top:auto;bottom:150px}
  .chip-fav{left:-2%;bottom:20px}
  .proof{margin-top:36px;font-size:14px}
  .vs-labels{display:none}
  .vs-row{grid-template-columns:1fr;gap:6px}
  .vs-row p{padding:16px 18px;font-size:15.5px}
  .vs-row+.vs-row{margin-top:10px}
  .fan{height:450px}
  .fan .phone{--w:164px}
  .fan .p2{--w:198px}
  .bento{grid-template-columns:1fr}
  .bx-tall,.bx-live{grid-column:auto;grid-row:auto}
  .bx-tall{grid-template-columns:1fr;padding:0 0 0 26px}
  .bx-tall .bx-txt{padding:30px 26px 0 0}
  .bx-shot img{height:360px}
  .grid-feats{grid-template-columns:1fr}
  .duo{height:500px}
  .duo .phone{--w:206px}
  .panel-feats{grid-template-columns:1fr;gap:18px}
  .browser .bar{height:30px}
  .browser .bar i{width:9px;height:9px}
  .browser .url{display:none}
  .phone-play{--w:262px}
  .case{padding:110px 0 92px}
  .case-shade{background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.92) 45%,rgba(0,0,0,.96) 100%)}
  .facts{grid-template-columns:1fr 1fr}
  .facts dt{font-size:44px}
  .steps .n{font-size:64px}
  .price{font-size:60px}
  .billing-wrap{margin:-14px 0 34px}
  .billing button{height:42px;padding:0 14px;font-size:14px}
  .billing .save{font-size:11px;padding:3px 7px}
  .lead-form{padding:22px}
  .f2{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr;gap:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}
@media (forced-colors:active){
  .grad,.eyebrow,.bx-k,.facts dt,.steps .n{background:none;color:CanvasText}
}