:root{
  --canvas:#07090f;
  --panel:#0d111b;
  --panel-2:#121828;
  --line:#1d2536;
  --line-strong:#56627c;
  --text:#eef1f7;
  --text-2:#a3acbf;
  --red:#e11d38;
  --red-hover:#f23a53;
  --red-soft:rgba(225,29,56,.55);
  --blue:#2f6bff;
  --blue-text:#7aa2ff;
  --blue-soft:rgba(47,107,255,.5);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --display:"Chakra Petch","Arial Narrow",system-ui,sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(18px,5vw,72px);
}
*{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;background:var(--canvas)}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.01em;margin:0}
p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main,footer{position:relative;z-index:1}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--text);color:var(--canvas);padding:10px 16px;border-radius:8px;font-weight:700;transition:top .3s var(--ease)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--blue-text);outline-offset:3px;border-radius:6px}
.kicker{font:500 12px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)}
.kicker b{color:var(--red-hover);font-weight:500}

/* ambiente fixo: duas luzes que derivam devagar, e grão */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(60px);opacity:.16;animation:drift 70s var(--ease-in-out) infinite alternate}
.ambient i:nth-child(1){background:radial-gradient(circle,var(--blue) 0,transparent 62%);left:-25vmax;top:-20vmax;animation-delay:-20s}
.ambient i:nth-child(2){background:radial-gradient(circle,var(--red) 0,transparent 62%);right:-30vmax;bottom:-30vmax;opacity:.11;animation-delay:-45s}
.ambient::after{content:"";position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(12vmax,8vmax,0) scale(1.15)}}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:12px;font:700 15px/1 var(--body);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease),color .35s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn-wa{background:var(--red);color:#fff;position:relative;isolation:isolate}
.btn-wa::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 10px 36px -6px var(--red-soft);opacity:.7;z-index:-1;transition:opacity .35s var(--ease)}
.btn-wa:hover{background:var(--red-hover);transform:translateY(-2px)}
.btn-wa:hover::after{opacity:1}
.btn-ghost{border-color:var(--line-strong);color:var(--text);background:rgba(13,17,27,.5)}
.btn-ghost:hover{border-color:var(--blue-text);transform:translateY(-2px)}
@media (pointer:coarse){.btn{min-height:48px}}
/* alvos de toque: links de texto ganham área tocável sem mudar o desenho */
@media (pointer:coarse){
  .nav ul a,footer a,.plink{display:inline-flex;align-items:center;min-height:40px}
  .qa summary{padding:26px 0}
  .chips li{min-height:34px;display:inline-flex;align-items:center}
}

/* navegação */
.nav{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gutter);transition:background-color .5s var(--ease),border-color .5s var(--ease);border-bottom:1px solid transparent}
.nav.solid{background:rgba(7,9,15,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:34px;width:auto}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-size:14px;font-weight:500;color:var(--text-2);transition:color .3s var(--ease)}
.nav ul a:hover{color:var(--text)}
.nav .btn{min-height:42px;padding:0 16px;font-size:14px}
@media (max-width:860px){.nav ul{display:none}}

/* ===== HERO ===== */
.hero{position:relative}
.stage{position:relative;padding:112px var(--gutter) 64px;display:grid;gap:48px}
.bands{position:relative}
.band{max-width:560px}
.band h1,.band h2{font-size:clamp(38px,5.4vw,72px)}
.band h1 em,.band h2 em{font-style:normal;color:var(--red-hover)}
.band .sub{margin-top:20px;font-size:clamp(16px,1.35vw,19px);color:var(--text-2);max-width:44ch}
.band .kicker{margin-bottom:18px;display:block}
.band-1 .kicker{font-size:clamp(13px,1vw,15px);letter-spacing:.1em;color:var(--text)}
.band-1 .kicker b{white-space:nowrap}
.band .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.band-2,.band-3,.band-4{display:none}
.w{display:inline-block;white-space:pre}

.devices{position:relative;width:100%;max-width:880px;margin-inline:auto;padding:0 0 9% 7%}
.glow{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;pointer-events:none;filter:blur(40px)}
.glow-b{left:-6%;top:-10%;background:radial-gradient(circle,var(--blue-soft) 0,transparent 65%);opacity:.5}
.glow-r{right:-10%;bottom:-14%;background:radial-gradient(circle,var(--red-soft) 0,transparent 65%);opacity:.8}
.laptop{position:relative}
.lid{position:relative;background:linear-gradient(160deg,#161b27,#0a0d14);border:1px solid #2a3244;border-radius:14px 14px 6px 6px;padding:1% 1% 1.7%;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}
.screen,.pscreen{position:relative;overflow:hidden;background:#05070b;container-type:inline-size}
.screen{aspect-ratio:1440/900;border-radius:4px}
.base{position:relative;margin:0 -7.5%;height:clamp(10px,1.5vw,20px);background:linear-gradient(#323a4d,#141821 60%,#0b0e14);border-radius:2px 2px 22px 22px;box-shadow:0 26px 40px -18px rgba(0,0,0,.9)}
.base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:40%;transform:translateX(-50%);background:#0b0e14;border-radius:0 0 10px 10px}
.phone{position:absolute;left:0;bottom:0;width:23%;background:linear-gradient(160deg,#1a2030,#0a0d14);border:1px solid #333c52;border-radius:clamp(12px,2.1cqw,28px);padding:.9%;box-shadow:0 30px 60px -20px rgba(0,0,0,.95),-10px 0 50px -20px var(--blue-soft)}
.devices{container-type:inline-size}
.phone{border-radius:3.1cqw}
.pscreen{aspect-ratio:390/844;border-radius:2.7cqw}
.pscreen::after{content:"";position:absolute;top:2.2%;left:50%;width:30%;height:2.6%;transform:translateX(-50%);background:#05070b;border-radius:99px;z-index:5}
.layer{position:absolute;inset:0;opacity:0;will-change:transform}
.layer + .layer{box-shadow:0 -18px 36px -6px rgba(0,0,0,.75)}
.layer:first-child{opacity:1}
.layer img{width:100%;height:auto}
.tag{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:10px;font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.tag span{position:absolute;right:0;bottom:0;white-space:nowrap;opacity:0;background:rgba(8,10,16,.72);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:8px 12px;border-radius:99px}
.tag span:first-child{opacity:1}
.tag span b{color:var(--text);font-weight:500}

/* a tela "seu site" desenhada dentro dos aparelhos */
.mock{position:absolute;inset:0;display:flex;flex-direction:column;background:radial-gradient(120% 90% at 85% 10%,rgba(225,29,56,.28),transparent 55%),radial-gradient(90% 80% at 0% 100%,rgba(47,107,255,.3),transparent 60%),#0a0d15;font-family:var(--body)}
.mock .mbar{display:flex;align-items:center;justify-content:space-between;padding:2.6cqw 4cqw;border-bottom:1px solid rgba(255,255,255,.07)}
.mock .murl{font:500 1.5cqw/1 var(--mono);color:var(--text-2);letter-spacing:.06em}
.mock .mdots{display:flex;gap:1cqw}.mock .mdots i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#2a3244}
.mock .mbody{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 7cqw}
.mock .mk{font:500 1.6cqw/1 var(--mono);letter-spacing:.2em;color:var(--red-hover);text-transform:uppercase}
.mock .mt{font:700 7cqw/1 var(--display);margin-top:2cqw;max-width:14ch}
.mock .mp{font-size:2.2cqw;color:var(--text-2);margin-top:2.2cqw;max-width:40ch;line-height:1.5}
.mock .mb{align-self:flex-start;margin-top:3.6cqw;background:var(--red);color:#fff;font-weight:700;font-size:2cqw;padding:1.8cqw 3cqw;border-radius:1.2cqw}
.pscreen .mock .mbar{padding:12cqw 6cqw 5cqw}
.pscreen .mock .murl{font-size:5cqw}
.pscreen .mock .mdots{display:none}
.pscreen .mock .mbody{padding:0 8cqw}
.pscreen .mock .mk{font-size:5cqw}
.pscreen .mock .mt{font-size:13cqw;margin-top:5cqw}
.pscreen .mock .mp{font-size:6.4cqw;margin-top:5cqw}
.pscreen .mock .mb{font-size:6.4cqw;padding:5cqw 7cqw;border-radius:4cqw;margin-top:9cqw}

.cue{display:none}

/* estado com scroll (ligado por JS só quando os cinco portões passam) */
html.scrub .hero{height:600vh}
html.scrub .stage{position:sticky;top:0;height:100vh;height:100svh;padding:0;display:block;overflow:hidden}
html.scrub .stage::before{content:"";position:absolute;inset:0 52% 0 0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(7,9,15,.9) 0,rgba(7,9,15,.6) 55%,transparent)}
html.scrub .bands{position:absolute;inset:0;z-index:3;pointer-events:none}
html.scrub .band{position:absolute;left:var(--gutter);top:52%;transform:translateY(-50%);width:min(520px,35vw);opacity:0}
html.scrub .band h1,html.scrub .band h2{font-size:clamp(34px,4.3vw,64px)}
html.scrub .band-1{opacity:1}
html.scrub .band-2,html.scrub .band-3,html.scrub .band-4{display:block}
html.scrub .band .row{pointer-events:auto}
html.scrub .band{text-shadow:0 1px 2px rgba(5,5,10,.9),0 4px 24px rgba(5,5,10,.8)}
html.scrub .band .btn{text-shadow:none}
html.scrub .devices{position:absolute;right:var(--gutter);top:52%;transform:translateY(-48%);width:min(54vw,920px,calc((100vh - 170px)*1.62));max-width:none;margin:0;z-index:1}
html.scrub .cue{display:flex;position:absolute;left:var(--gutter);bottom:28px;z-index:3;align-items:center;gap:12px;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.cue i{position:relative;width:1px;height:38px;background:var(--line);overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--red-hover);animation:cue 2.4s var(--ease-in-out) infinite}
@keyframes cue{to{top:100%}}
@media (max-height:460px){html.scrub .cue{display:none}}

/* entradas das faixas, só transform e opacity, comandadas por --k */
html.scrub .band .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc)}
html.scrub .band[data-fx="rise"] .w{transform:translateY(calc((1 - var(--kc))*.55em))}
html.scrub .band[data-fx="drift"] .w{transform:translateY(calc((1 - var(--kc))*-26px))}
html.scrub .band[data-fx="depth"] .w{transform:scale(calc(.8 + .2*var(--kc)))}
html.scrub .band[data-fx="split"] .w{transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
html.scrub .band .kicker,html.scrub .band .sub,html.scrub .band .row{--ks:clamp(0,(var(--k,0) - .45)*2.6,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
html.scrub .band .row{--ks:clamp(0,(var(--k,0) - .62)*3,1)}

/* ===== SEÇÕES ===== */
main section{position:relative;padding:clamp(80px,11vw,150px) var(--gutter)}
.wrap{max-width:1200px;margin:0 auto}
.sec-head{display:grid;gap:18px;max-width:760px}
.sec-head h2{font-size:clamp(34px,4.4vw,58px)}
.sec-head p{color:var(--text-2);font-size:18px;max-width:52ch}

/* projetos: linhas alternadas com moldura de navegador */
.projects{display:grid;gap:clamp(56px,8vw,110px);margin-top:clamp(48px,6vw,80px)}
.proj{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.proj:nth-child(even) .pframe{order:2}
.pframe{position:relative;border-radius:14px;background:var(--panel);border:1px solid var(--line);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.pframe::before{content:"";display:block;height:34px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 18px 17px,#2e3648 4px,transparent 5px),radial-gradient(circle at 34px 17px,#2e3648 4px,transparent 5px),radial-gradient(circle at 50px 17px,#2e3648 4px,transparent 5px),var(--panel-2)}
.pframe .url{position:absolute;top:9px;left:50%;transform:translateX(-50%);font:500 11px/16px var(--mono);color:var(--text-2);background:var(--canvas);border:1px solid var(--line);padding:0 12px;border-radius:99px;white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis}
.pframe img{aspect-ratio:1440/900;width:100%;height:auto;object-fit:cover;transition:transform 1.2s var(--ease)}
.proj:hover .pframe img{transform:scale(1.03)}
.pnum{font:700 clamp(56px,7vw,96px)/.9 var(--display);color:transparent;-webkit-text-stroke:1px var(--line-strong)}
.pinfo h3{font-size:clamp(28px,3vw,40px);margin-top:14px}
.pinfo .kicker{margin-top:14px;display:block}
.pinfo p{color:var(--text-2);margin-top:16px;max-width:42ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding:0;list-style:none}
.chips li{font:500 12px/1 var(--mono);padding:8px 12px;border:1px solid var(--line);border-radius:99px;color:var(--text-2)}
.plink{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-weight:700;text-decoration:none;padding-bottom:4px;border-bottom:1px solid var(--line-strong);transition:border-color .35s var(--ease),gap .35s var(--ease)}
.plink:hover{border-color:var(--red-hover);gap:14px}
.plink svg{width:16px;height:16px}

/* o que vem no site: grade com linhas de medida */
.feat{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.feat li{list-style:none;padding:34px 30px 38px 0;border-bottom:1px solid var(--line);position:relative}
.feat li:not(:nth-child(3n)){border-right:1px solid var(--line);margin-right:0}
.feat li:not(:nth-child(3n+1)){padding-left:30px}
.feat .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel);position:relative}
.feat .ic svg{width:22px;height:22px;stroke:var(--blue-text)}
.feat li:nth-child(2) .ic svg,.feat li:nth-child(5) .ic svg{stroke:var(--red-hover)}
.feat h3{font-size:22px;margin-top:22px}
.feat p{color:var(--text-2);margin-top:10px;font-size:16px;max-width:34ch}
@media (max-width:900px){.feat{grid-template-columns:1fr 1fr}.feat li,.feat li:not(:nth-child(3n+1)){padding:28px 20px 30px 0;border-right:0}.feat li:nth-child(odd){border-right:1px solid var(--line)}.feat li:nth-child(even){padding-left:20px}}
@media (max-width:560px){.feat{grid-template-columns:1fr}.feat li:nth-child(n){border-right:0;padding:26px 0}}

/* monte o seu: o momento interativo */
.build{display:grid;grid-template-columns:1fr minmax(260px,360px);gap:clamp(40px,7vw,110px);align-items:center}
.build .sec-head h2{font-size:clamp(34px,4vw,52px)}
.niches{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.niche{font:500 15px/1 var(--body);color:var(--text-2);background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:0 18px;min-height:44px;cursor:pointer;transition:border-color .3s var(--ease),color .3s var(--ease),background-color .3s var(--ease)}
.niche:hover{color:var(--text);border-color:var(--line-strong)}
.niche[aria-pressed="true"]{color:#fff;border-color:var(--red);background:rgba(225,29,56,.16)}
.other{margin-top:16px;display:grid;gap:8px;max-width:420px}
.other[hidden]{display:none}
.other label{font-size:14px;color:var(--text-2)}
.other input{font:500 16px var(--body);color:var(--text);background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;min-height:48px;padding:0 16px}
.other input:focus{outline:2px solid var(--blue-text);outline-offset:2px}
.build .row{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.build .hint{font-size:14px;color:var(--text-2)}
.demo-phone{position:relative;width:100%;max-width:340px;margin-inline:auto;background:linear-gradient(160deg,#1a2030,#0a0d14);border:1px solid #333c52;border-radius:38px;padding:4px;box-shadow:0 50px 90px -30px rgba(0,0,0,.95),0 0 90px -30px var(--red-soft)}
.demo-phone .pscreen{border-radius:34px}
.demo-phone .mock .mk,.demo-phone .mock .mt,.demo-phone .mock .mp{transition:opacity .35s var(--ease),transform .5s var(--ease)}
.demo-phone.swap .mock .mk,.demo-phone.swap .mock .mt,.demo-phone.swap .mock .mp{opacity:0;transform:translateY(8px)}
@media (max-width:820px){.build{grid-template-columns:1fr}.demo-phone{max-width:280px}}

/* como funciona: trilho com linha que se desenha */
.steps-wrap{margin-top:clamp(48px,6vw,80px)}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);list-style:none;padding:0}
.rail::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--line-strong),var(--red-hover));transform:scaleX(0);transform-origin:left center;transition:transform 1.6s var(--ease-in-out) .2s}
.steps-wrap{position:relative}
.steps-wrap.in .rail::after{transform:scaleX(1)}
.step .n{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--canvas);border:1px solid var(--line-strong);font:700 20px var(--display);z-index:1}
.step:last-child .n{border-color:var(--red);color:#fff;background:var(--red)}
.step h3{font-size:24px;margin-top:26px}
.step p{color:var(--text-2);margin-top:12px;max-width:34ch}
.rail{position:absolute;left:28px;right:28px;top:27px;height:2px;background:var(--line)}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:36px}.rail{display:none}}

/* combinado: faixa de compromissos */
.deal{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:clamp(40px,5vw,64px)}
.deal div{background:var(--panel);padding:30px 26px 34px;position:relative}
.deal strong{display:block;font:700 clamp(26px,2.6vw,34px)/1.05 var(--display)}
.deal strong em{font-style:normal;color:var(--red-hover)}
.deal span{display:block;margin-top:12px;color:var(--text-2);font-size:15px}
@media (max-width:980px){.deal{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.deal{grid-template-columns:1fr}}

/* dúvidas */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,96px);align-items:start}
.faq .sec-head{position:sticky;top:110px}
.qa details{border-bottom:1px solid var(--line)}
.qa details:first-child{border-top:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font:700 clamp(18px,1.6vw,21px)/1.3 var(--body)}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;flex:none;width:22px;height:22px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:3px;right:3px;top:10px;height:2px;background:var(--text-2);transition:transform .4s var(--ease),background-color .4s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa details[open] summary i::after{transform:rotate(0)}
.qa details[open] summary i::before{background:var(--red-hover)}
.qa .ans{padding:0 0 26px;color:var(--text-2);max-width:60ch}
@media (max-width:860px){.faq{grid-template-columns:1fr}.faq .sec-head{position:static}}

/* fechamento */
.final{text-align:center;overflow:hidden}
.final .wrap{position:relative;max-width:900px;isolation:isolate}
.final h2{font-size:clamp(42px,7vw,96px)}
.final p{color:var(--text-2);font-size:19px;margin:24px auto 0;max-width:46ch}
.final .btn{margin-top:40px;min-height:58px;padding:0 30px;font-size:17px}
.final .beam{position:absolute;left:50%;top:50%;width:min(900px,120vw);aspect-ratio:2/1;transform:translate(-50%,-50%);pointer-events:none;z-index:-1}
.final .beam::before,.final .beam::after{content:"";position:absolute;inset:0;border-radius:50%;filter:blur(50px)}
.final .beam::before{background:radial-gradient(closest-side,rgba(47,107,255,.35),transparent);transform:translateX(-22%)}
.final .beam::after{background:radial-gradient(closest-side,rgba(225,29,56,.32),transparent);transform:translateX(22%);animation:pulse 7s var(--ease-in-out) infinite alternate;animation-delay:-3s}
@keyframes pulse{from{opacity:.55}to{opacity:1}}

footer{border-top:1px solid var(--line);padding:40px var(--gutter) 48px}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;align-items:center}
footer img{height:30px;width:auto}
footer p,footer a{font-size:14px;color:var(--text-2)}
footer a{text-decoration:none}
footer a:hover{color:var(--text)}

/* WhatsApp flutuante */
.fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:45;width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 14px 40px -8px var(--red-soft);opacity:0;transform:translateY(20px) scale(.9);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease),background-color .3s var(--ease)}
.fab svg{width:28px;height:28px}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.fab:hover{background:var(--red-hover)}

/* calculadora do dinheiro perdido */
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,96px);align-items:center}
.calc .sec-head h2{font-size:clamp(32px,3.8vw,50px)}
.field{margin-top:32px}
.field label{display:block;font-weight:700;font-size:16px;max-width:46ch}
.field-hint{margin-top:8px;font-size:14px;color:var(--text-2)}
.range{display:flex;align-items:center;gap:18px;margin-top:14px}
.range input{flex:1;accent-color:var(--red);height:44px;cursor:pointer;min-width:0}
.range output{flex:none;min-width:64px;text-align:center;font:700 22px/1 var(--display);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.money{display:flex;align-items:center;gap:10px;margin-top:14px;max-width:260px;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;padding:0 16px;transition:border-color .3s var(--ease)}
.money:focus-within{border-color:var(--blue-text)}
.money span{font:700 18px var(--display);color:var(--text-2)}
.money input{flex:1;min-width:0;min-height:52px;background:none;border:0;color:var(--text);font:700 22px var(--display);outline:none}
.money input::-webkit-inner-spin-button{opacity:.4}
.calc-result{position:relative;isolation:isolate;padding:clamp(28px,4vw,48px);border-radius:22px;background:linear-gradient(160deg,#170c13,#0d111b 60%);border:1px solid rgba(225,29,56,.35)}
.calc-result::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;box-shadow:0 30px 90px -30px var(--red-soft);opacity:.8;animation:pulse 6s var(--ease-in-out) infinite alternate;animation-delay:-2s}
.calc-result .kicker{color:var(--red-hover)}
.lost{margin-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.lost strong{font:700 clamp(44px,5.4vw,76px)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lost span{font-size:18px;color:var(--text-2)}
.lost-year{margin-top:14px;font-size:18px;color:var(--text-2)}
.lost-year strong{color:var(--text);font:700 24px var(--display)}
.lost-people{margin-top:6px;font-size:16px;color:var(--text-2)}
.lost-people span{color:var(--text);font-weight:700}
.calc-result .btn{margin-top:30px;width:100%}
.calc-note{margin-top:14px;font-size:13px;color:var(--text-2);text-align:center}
@media (max-width:860px){.calc{grid-template-columns:1fr}}

/* exclusividade: um por ramo, por cidade */
.excl{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:center}
.excl-num{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:420px;width:100%;margin-inline:auto}
.excl-num::before{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(225,29,56,.35),transparent);filter:blur(30px);animation:pulse 5s var(--ease-in-out) infinite alternate;animation-delay:-1s}
.excl-num::after{content:"";position:absolute;inset:6%;border-radius:50%;border:1px dashed var(--line-strong)}
.excl-num span{position:relative;font:700 clamp(180px,24vw,340px)/.8 var(--display);color:transparent;-webkit-text-stroke:2px var(--red-hover)}
.excl h2{font-size:clamp(34px,4.4vw,60px)}
.excl h2 em{font-style:normal;color:var(--red-hover)}
.excl-text p{color:var(--text-2);font-size:18px;margin-top:20px;max-width:48ch}
.excl-text .excl-warn{color:var(--text);font-weight:700;padding-left:16px;border-left:2px solid var(--red)}
.excl-text .kicker{display:block;margin-bottom:16px}
.excl-text .btn{margin-top:32px}
@media (max-width:760px){.excl{grid-template-columns:1fr}.excl-num{max-width:240px}}

/* contador de visitantes (real) */
.visits{font-size:12px;position:fixed;left:max(var(--gutter),env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));z-index:44;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:rgba(8,10,16,.78);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:500 12px/1.2 var(--mono);color:var(--text-2);opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.visits.show{opacity:1;transform:none}
/* brilho vermelho que liga e desliga para puxar o olho; só a opacidade do pseudo-elemento anima */
.visits{isolation:isolate}
.visits::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;pointer-events:none;border:1px solid rgba(242,58,83,.75);box-shadow:0 0 12px 1px rgba(225,29,56,.45),0 0 30px 4px rgba(225,29,56,.22);opacity:0;animation:blink 2.6s var(--ease-in-out) infinite;animation-delay:-.4s}
@keyframes blink{0%,100%{opacity:0}12%,48%{opacity:1}62%{opacity:0}}
.visits svg{width:15px;height:15px;flex:none;color:var(--blue-text)}
.visits b{color:var(--text);font-weight:500}
html.scrub .cue{bottom:78px}
.visits .v-short{display:none}
@media (max-width:560px){.visits{font-size:11.5px;padding:7px 12px}.visits .v-long{display:none}.visits .v-short{display:inline}}

/* revelações de seção */
html.js [data-reveal] .r{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*110ms)}
html.js [data-reveal].in .r{opacity:1;transform:none}
html.js [data-reveal].done .r{transition-delay:0s}
html.js .proj[data-reveal] .pframe.r{transform:translateY(40px) scale(.97)}
html.js .proj[data-reveal].in .pframe.r{transform:none}

/* hero estático em telas pequenas */
@media (max-width:720px){
  .stage{padding-top:96px;gap:40px}
  .band h1{font-size:clamp(34px,10vw,48px)}
  .devices{padding:0 0 12% 9%}
  .phone{width:30%}
  .devices{margin-bottom:64px}
  .tag{position:absolute;top:100%;left:0;right:0;bottom:auto;margin-top:18px;justify-content:center}
  .tag span{white-space:normal;text-align:center;right:auto;left:50%;transform:translateX(-50%);width:max-content;max-width:100%}
  .tag span:first-child{position:relative;left:auto;transform:none}
  .proj,.proj:nth-child(even){grid-template-columns:1fr}
  .proj:nth-child(even) .pframe{order:0}
  body{padding-bottom:0}
}

/* hero com a esteira no celular e no tablet em pé: texto em cima, aparelhos embaixo.
   Os aparelhos ganham a largura inteira da tela (sangram nas laterais) e a etiqueta do
   projeto passa a flutuar sobre a base do notebook, em vez de ocupar espaço abaixo dele.
   Numa tela pequena isso é a diferença entre um notebook de 150px e um de 330px. */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px){
  html.scrub .stage{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;padding:calc(66px + env(safe-area-inset-top)) var(--gutter) calc(56px + env(safe-area-inset-bottom))}
  html.scrub .stage::before{display:none}
  html.scrub .bands{position:relative;inset:auto;display:grid}
  html.scrub .band{position:relative;grid-area:1/1;left:auto;top:auto;transform:none;width:auto;max-width:600px}
  html.scrub .band h1,html.scrub .band h2{font-size:clamp(23px,6.4vw,40px)}
  html.scrub .band .kicker{margin-bottom:8px}
  html.scrub .band-1 .kicker{font-size:clamp(11px,3.1vw,14px)}
  html.scrub .band .sub{margin-top:8px;font-size:clamp(13px,3.5vw,16px);line-height:1.45}
  html.scrub .band .row{margin-top:14px;gap:8px}
  html.scrub .band .btn{min-height:44px;padding:0 14px;font-size:13.5px}
  html.scrub .devwrap{container-type:size;min-height:0;display:grid;place-items:start center;width:100vw;margin-inline:calc(-1 * var(--gutter))}
  html.scrub .devices{position:relative;right:auto;top:auto;transform:none;margin:0;padding-bottom:7%;width:min(100cqw,calc((100cqh - 46px) / .76))}
  html.scrub .cue{display:none}
  html.scrub .phone{left:4%}
  html.scrub .tag{top:100%;bottom:auto;left:0;right:0;margin-top:12px;justify-content:center}
  html.scrub .tag span{position:absolute;left:50%;right:auto;transform:translateX(-50%);width:max-content;text-align:center}
  html.scrub .tag span:first-child{position:relative;left:auto;transform:none}
  html.scrub .tag span{white-space:nowrap;font-size:11px;letter-spacing:.04em;padding:6px 10px;max-width:calc(100vw - 24px)}
  html.scrub .tag span:first-child{flex:none}
}
/* telas muito curtas (iPhone SE antigo e afins): o texto encolhe mais para o notebook crescer */
@media (max-width:360px){
  html.scrub .tag span{font-size:9px;letter-spacing:0;padding:5px 8px;max-width:calc(100vw - 16px)}
}
@media (max-width:720px) and (max-height:620px){
  html.scrub .stage{padding:calc(58px + env(safe-area-inset-top)) var(--gutter) calc(48px + env(safe-area-inset-bottom));gap:8px}
  html.scrub .band h1,html.scrub .band h2{font-size:clamp(20px,5.6vw,24px)}
  html.scrub .band .sub{font-size:12.5px;margin-top:6px}
  html.scrub .band .row{margin-top:10px}
  html.scrub .band .btn{min-height:40px;font-size:13px}
  html.scrub .band-1 .kicker{font-size:11px}
}
@media (max-width:720px) and (max-height:700px){
  html.scrub .band h1,html.scrub .band h2{font-size:clamp(24px,6.6vw,30px)}
  html.scrub .band .sub{font-size:13.5px}
}

/* celular deitado: o layout do computador, compacto */
@media (orientation:landscape) and (max-height:560px){
  html.scrub .band{top:57%;width:min(460px,42vw)}
  html.scrub .band h1,html.scrub .band h2{font-size:clamp(20px,3.3vw,30px)}
  html.scrub .band .kicker{margin-bottom:8px;font-size:10px}
  html.scrub .band .sub{margin-top:8px;font-size:13px;line-height:1.45}
  html.scrub .band .row{margin-top:12px;gap:8px}
  html.scrub .band .btn{min-height:40px;padding:0 14px;font-size:13px}
  html.scrub .devices{top:57%;width:min(48vw,calc((100vh - 120px) * 1.3))}
}

/* movimento reduzido (e economia de bateria que remove animações): as mesmas features,
   sem deslocar nada na tela. O que subia, deslizava ou crescia agora só esmaece. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.scrub .band .w,html.scrub .band .kicker,html.scrub .band .sub,html.scrub .band .row{transform:none!important}
  html.js [data-reveal] .r,html.js .proj[data-reveal] .pframe.r,html.js .proj[data-reveal].in .pframe.r{transform:none!important;transition:opacity .7s var(--ease)}
  .btn:hover,.btn-wa:hover,.btn-ghost:hover{transform:none}
  .proj:hover .pframe img{transform:none}
  .plink:hover{gap:10px}
  .fab,.visits{transform:none!important}
  .demo-phone.swap .mock .mk,.demo-phone.swap .mock .mt,.demo-phone.swap .mock .mp{transform:none}
  .ambient i{animation-name:breathe;animation-duration:9s}
}
@keyframes breathe{from{opacity:.08}to{opacity:.2}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}