:root{
  --bg:#070707; --surface:#0D0D0D; --surface-2:#161616; --border:#222222;
  --border-soft:rgba(255,255,255,.05);
  --text:#F8FAFC; --muted:#A1A9B8; --disabled:#667085;
  --blue:#2F81F7; --red:#FF4D4F;
  --glow-blue:0 0 40px rgba(47,129,247,.12); --glow-red:0 0 40px rgba(255,77,79,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--muted);font-family:Manrope,'Segoe UI',system-ui,-apple-system,sans-serif;font-size:18px;line-height:32px;font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2{color:#FFFFFF;font-family:Manrope,'Segoe UI',system-ui,-apple-system,sans-serif;font-weight:700;letter-spacing:-.04em}
h3,h4{color:var(--text);font-family:Manrope,'Segoe UI',system-ui,-apple-system,sans-serif;letter-spacing:-.02em}
h3{font-weight:700}h4{font-weight:600}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .4s ease-out,transform .4s ease-out}
.rv.on{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* header */
header{position:fixed;inset:0 0 auto;z-index:100;transition:background .25s ease-out,border-color .25s ease-out}
header.scrolled{background:rgba(7,7,7,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo{display:flex;flex-direction:column;line-height:1}
.logo b{font-weight:800;font-size:22px;letter-spacing:.14em;color:#fff}
.logo span{font-weight:600;font-size:8.5px;letter-spacing:.56em;color:var(--muted);margin-top:3px}
.nav ul{display:flex;gap:36px;list-style:none}
.nav ul a{font-weight:500;font-size:15px;letter-spacing:.02em;color:var(--muted);transition:color .25s ease-out}
.nav ul a:hover{color:var(--blue)}

/* buttons — assinatura da marca */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:Manrope,'Segoe UI',system-ui,-apple-system,sans-serif;font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;height:52px;padding:0 30px;border-radius:14px;transition:all .25s ease-out;cursor:pointer;color:var(--text)}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
.btn-p,.btn-r{border:1px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,conic-gradient(from var(--a),var(--red),var(--blue) 50%,var(--red)) border-box;animation:ledspin 4s linear infinite}
.btn-p:hover{box-shadow:0 0 28px rgba(47,129,247,.32),0 0 60px rgba(47,129,247,.12);transform:translateY(-2px);color:#fff}
.btn-r:hover{box-shadow:0 0 28px rgba(255,77,79,.30),0 0 60px rgba(255,77,79,.10);transform:translateY(-2px);color:#fff}
@keyframes ledspin{to{--a:360deg}}
@media (prefers-reduced-motion:reduce){.btn-p,.btn-r{animation:none}}
.btn-s{border:1px solid rgba(255,255,255,.28)}
.btn-s:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55)}
.btn .ar{transition:transform .25s ease-out}
.btn:hover .ar{transform:translateX(4px)}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:220px 0 100px}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-bg::before{content:"";position:absolute;width:800px;height:800px;right:-220px;top:-320px;background:radial-gradient(circle,rgba(47,129,247,.10),transparent 65%)}
.hero-bg::after{content:"";position:absolute;width:640px;height:640px;left:-320px;bottom:-380px;background:radial-gradient(circle,rgba(255,77,79,.07),transparent 65%)}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 20%,transparent 70%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--blue);border-radius:2px}
.hero h1{font-size:clamp(40px,5vw,72px);line-height:1.1;margin:32px 0 32px}
.hero h1 .g{background:linear-gradient(100deg,#6BA5F9,var(--blue) 55%,#8FBBFA);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:19px;color:var(--muted);max-width:540px;margin-bottom:40px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-meta{display:flex;gap:44px;margin-top:72px}
.hm b{font-weight:700;font-size:30px;letter-spacing:-.02em;color:#fff}
.hm b i{color:var(--red);font-style:normal}
.hm span{display:block;font-size:13.5px;letter-spacing:.02em;color:var(--muted);margin-top:4px}

/* mockups */
.stage{position:relative;perspective:1400px}
.laptop{position:relative;border-radius:18px;background:var(--surface);border:1px solid var(--border-soft);box-shadow:0 40px 90px rgba(0,0,0,.55),var(--glow-blue);overflow:hidden;transform:rotateY(-8deg) rotateX(4deg);transition:transform .4s ease-out}
.stage:hover .laptop{transform:rotateY(-3deg) rotateX(2deg)}
.laptop .bar{display:flex;gap:7px;padding:12px 16px;background:#0A0A0A;border-bottom:1px solid var(--border-soft)}
.laptop .bar i{width:10px;height:10px;border-radius:50%;background:#262626}
.laptop .bar i:first-child{background:#FF5F57}.laptop .bar i:nth-child(2){background:#FEBC2E}.laptop .bar i:nth-child(3){background:#28C840}
.laptop img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top}
.phone{position:absolute;right:-28px;bottom:-44px;width:158px;border-radius:26px;background:var(--surface);border:1px solid var(--border-soft);padding:8px;box-shadow:0 30px 70px rgba(0,0,0,.65);animation:float 7s ease-in-out infinite alternate}
.phone img{border-radius:19px;aspect-ratio:9/19;object-fit:cover;object-position:top}
.chip{position:absolute;left:-40px;top:38px;display:flex;align-items:center;gap:10px;background:rgba(13,13,13,.85);backdrop-filter:blur(10px);border:1px solid var(--border-soft);border-radius:14px;padding:12px 18px;font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--text);animation:float 8s ease-in-out infinite alternate-reverse}
.chip i{width:8px;height:8px;border-radius:50%;background:#28C840;box-shadow:0 0 12px #28C840}
.chip2{left:auto;right:-16px;top:-24px;animation-duration:9s}
.chip2 i{background:var(--blue);box-shadow:0 0 12px var(--blue)}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-10px)}}

/* strip */
.strip{padding:20px 0 110px;text-align:center}
.sig{width:260px;height:2px;margin:0 auto 24px;background:linear-gradient(90deg,transparent,var(--blue) 18%,transparent 42%,transparent 58%,var(--red) 82%,transparent)}
.strip p{font-weight:600;font-size:14px;letter-spacing:.4em;color:var(--muted)}
.strip p i{font-style:normal;margin:0 10px}
.strip p .c1{color:var(--blue)}.strip p .c3{color:var(--red)}

/* sections */
section{position:relative;padding:160px 0}
.sec-head{max-width:760px;margin-bottom:80px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head h2{font-size:clamp(32px,3.8vw,52px);line-height:1.15;margin:32px 0 32px}
.sec-head p{font-size:18px;color:var(--muted)}

/* problema */
.problem{background:linear-gradient(180deg,transparent,rgba(13,13,13,.6) 20%,rgba(13,13,13,.6) 80%,transparent)}
.problem .eyebrow::before{background:var(--red)}
.plist{max-width:800px;margin:0 auto;display:flex;flex-direction:column}
.pitem{display:flex;align-items:center;gap:28px;padding:32px 8px;border-bottom:1px solid var(--border);color:var(--text);font-weight:600;font-size:clamp(18px,2vw,23px);letter-spacing:-.02em;transition:padding .25s ease-out,border-color .25s ease-out}
.pitem:hover{padding-left:20px;border-color:rgba(255,77,79,.4)}
.pitem em{font-style:normal;font-weight:700;font-size:15px;color:var(--red);opacity:.85;min-width:34px}
.psolve{text-align:center;margin-top:64px;font-size:20px;color:var(--muted)}
.psolve b{color:var(--text)}.psolve i{font-style:normal;color:var(--blue);font-weight:600}

/* método — cards com feixe diagonal do branding */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{position:relative;overflow:hidden;text-align:left;background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;padding:40px 32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.045);transition:transform .25s ease-out,border-color .25s ease-out}
.step:hover{transform:translateY(-3px)}
.step.s1:hover{border-color:var(--blue)}.step.s2:hover{border-color:rgba(255,255,255,.4)}.step.s3:hover{border-color:var(--red)}
.step::before{content:"";position:absolute;top:-45%;left:-6%;width:30%;height:190%;transform:rotate(20deg);filter:blur(24px);opacity:.5;pointer-events:none}
.step::after{content:"";position:absolute;top:-45%;left:5%;width:2px;height:190%;transform:rotate(20deg);opacity:.8;pointer-events:none}
.step.s1::before{background:linear-gradient(90deg,transparent,rgba(47,129,247,.45),transparent)}
.step.s1::after{background:linear-gradient(180deg,transparent,#6BA5F9,transparent)}
.step.s2::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.step.s2::after{background:linear-gradient(180deg,transparent,rgba(255,255,255,.8),transparent)}
.step.s3::before{background:linear-gradient(90deg,transparent,rgba(255,77,79,.4),transparent)}
.step.s3::after{background:linear-gradient(180deg,transparent,#FF7A7C,transparent)}
.step .n{position:relative;z-index:1;font-weight:700;font-size:13px;letter-spacing:.24em;margin-bottom:20px}
.step.s1 .n{color:var(--blue)}.step.s2 .n{color:#fff}.step.s3 .n{color:var(--red)}
.step h3{position:relative;z-index:1;font-size:21px;letter-spacing:.14em;margin-bottom:16px}
.step.s1 h3{color:var(--blue)}.step.s2 h3{color:#fff}.step.s3 h3{color:var(--red)}
.step p{position:relative;z-index:1;font-size:15.5px;line-height:1.7;color:var(--muted)}

/* soluções */
.sols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sol{position:relative;background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;padding:32px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.045);transition:transform .25s ease-out,border-color .25s ease-out,background .25s ease-out}
.sol:hover{transform:translateY(-3px);border-color:var(--blue);background:var(--surface-2)}
.sol .ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(47,129,247,.1);margin-bottom:24px}
.sol .ic svg{width:22px;height:22px;stroke:var(--blue);stroke-width:1.5}
.sol h3{font-size:19px;margin-bottom:12px}
.sol p{font-size:15px;color:var(--muted);line-height:1.7}

/* cases */
.case-hero{display:grid;grid-template-columns:1.25fr .75fr;background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;overflow:hidden;margin-bottom:26px;transition:border-color .25s ease-out,transform .25s ease-out}
.case-hero:hover{border-color:var(--blue);transform:translateY(-3px)}
.case-hero .shot{position:relative;overflow:hidden;min-height:420px}
.case-hero .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s ease-out}
.case-hero:hover .shot img{transform:scale(1.04)}
.case-hero .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,rgba(13,13,13,.9))}
.case-hero .info{padding:56px 48px;display:flex;flex-direction:column;justify-content:center}
.tag{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px rgba(47,129,247,.6)}
.tag.own::before{background:var(--red);box-shadow:0 0 8px rgba(255,77,79,.55)}
.case-hero h3{font-size:32px;margin-bottom:16px}
.case-hero .info p{color:var(--muted);font-size:16px;line-height:1.7;margin-bottom:28px}
.lnk{font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--blue);display:inline-flex;align-items:center;gap:8px}
.lnk .ar{transition:transform .25s ease-out}.lnk:hover .ar{transform:translateX(5px)}
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.case{background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.045);transition:transform .25s ease-out,border-color .25s ease-out}
.case:hover{transform:translateY(-3px);border-color:var(--blue)}
.case .shot{overflow:hidden;aspect-ratio:16/9;position:relative}
.case .shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s ease-out}
.case:hover .shot img{transform:scale(1.04)}
.case .body{padding:28px 32px 32px}
.case h3{font-size:21px;margin:14px 0 10px}
.case .body p{font-size:15px;color:var(--muted);line-height:1.7;margin-bottom:18px}
.cases-cta{text-align:center;margin-top:64px}

/* porquê */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.why div h4{font-size:17px;margin:18px 0 10px}
.why div p{font-size:14.5px;line-height:1.7;color:var(--muted)}
.why .ln{width:34px;height:2px;background:var(--blue);border-radius:2px}

/* CTA — resultados = vermelho */
.cta-card{position:relative;background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.045);padding:100px 60px;text-align:center;overflow:hidden}
.cta-card::before{content:"";position:absolute;width:600px;height:600px;left:50%;top:-420px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,77,79,.10),transparent 65%)}
.cta-card .sig{margin-bottom:36px}
.cta-card h2{font-size:clamp(32px,3.8vw,52px);line-height:1.15;max-width:800px;margin:0 auto 32px}
.cta-card p{color:var(--muted);max-width:660px;margin:0 auto 40px;font-size:18px}

/* footer — horizontal */
footer{border-top:1px solid var(--border-soft);padding:64px 0 28px}
.ftop{display:flex;justify-content:space-between;align-items:center;gap:48px;margin-bottom:44px}
.fbrand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.fnav{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.fright{display:flex;flex-direction:column;align-items:flex-end;gap:20px}
.fnav a{font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--muted);transition:color .25s ease-out;line-height:1}
.fnav a:hover{color:var(--blue)}
.fslogan{font-weight:600;font-size:8.5px;letter-spacing:.18em;color:var(--muted);opacity:.8;margin-top:6px}
.fslogan i{font-style:normal}.fslogan .c1{color:var(--blue)}.fslogan .c3{color:var(--red)}
.fproj{display:flex;gap:26px;align-items:center;flex-wrap:wrap;padding:18px 0;border-top:1px solid var(--border-soft)}
.fproj b{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--disabled)}
.fproj a{font-size:13.5px;font-weight:500;letter-spacing:.02em;color:var(--muted);transition:color .25s ease-out;line-height:1}
.fproj a:hover{color:var(--blue)}
.fbase{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--border-soft);color:var(--disabled);font-size:12.5px;letter-spacing:.02em}
@media(max-width:760px){.ftop{flex-direction:column;align-items:center;gap:28px}.fright{align-items:center}.fbase{justify-content:center}}

/* responsive */
@media(max-width:1024px){
  .hero .wrap{grid-template-columns:1fr;gap:72px}
  .sols{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
  .case-hero{grid-template-columns:1fr}
  .case-hero .shot{min-height:300px}
  .case-hero .shot::after{background:linear-gradient(180deg,transparent 55%,rgba(13,13,13,.95))}
  .steps{grid-template-columns:1fr;gap:56px}.steps::before{display:none}
  .fgrid{grid-template-columns:1fr 1fr}
  section{padding:120px 0}
  .hero{padding:180px 0 80px}
}
@media(max-width:640px){
  .nav ul{display:none}
  section{padding:96px 0}
  .sols,.case-grid,.why,.fgrid{grid-template-columns:1fr}
  .hero-meta{gap:24px;flex-wrap:wrap}
  .phone{right:0}
  .chip{left:-8px}
  .cta-card{padding:64px 28px}
}

/* logo neon */
.logo-neon{position:relative;display:inline-block}
.logo-neon::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#2F81F7 14%,#8057F5 50%,#FF4D4F 86%,transparent);
  box-shadow:0 0 10px rgba(47,129,247,.7),0 0 22px rgba(128,87,245,.35),0 0 10px rgba(255,77,79,.6);
  animation:neonpulse 4s ease-in-out infinite alternate}
@keyframes neonpulse{from{opacity:.85;filter:saturate(1)}to{opacity:1;filter:saturate(1.35)}}
@media (prefers-reduced-motion:reduce){.logo-neon::after{animation:none}}

/* form de contato (CTA) */
.ctaform{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;max-width:600px;margin:0 auto}
.ctaform input{flex:1;min-width:250px;height:52px;padding:0 20px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--border-soft);color:var(--text);font:500 15px/1 Manrope,'Segoe UI',system-ui,sans-serif;letter-spacing:.02em;outline:none;transition:all .25s ease-out}
.ctaform input::placeholder{color:var(--disabled)}
.ctaform input:focus{border-color:var(--blue);box-shadow:var(--glow-blue);background:rgba(255,255,255,.06)}
.ctahint{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:20px;font-size:13px;letter-spacing:.02em;color:var(--disabled)}
.ctahint span{display:inline-flex;align-items:center;gap:7px}
.ctahint span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--red);opacity:.8}
.ctaok{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 28px;border-radius:14px;border:1px solid rgba(47,129,247,.4);color:var(--text);font-weight:600;font-size:15px;box-shadow:var(--glow-blue)}
.ctaok b{color:var(--blue)}
/* social icons */
.fsoc{display:flex;gap:12px;align-items:center}
.icobtn{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-soft);color:var(--muted);transition:all .25s ease-out}
.icobtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icobtn:hover{border-color:var(--blue);color:#fff;box-shadow:var(--glow-blue);transform:translateY(-2px)}
.mailchip{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px;border-radius:12px;border:1px solid var(--border-soft);color:var(--muted);font-size:13.5px;font-weight:500;letter-spacing:.02em;transition:all .25s ease-out}
.mailchip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mailchip:hover{border-color:var(--blue);color:#fff;box-shadow:var(--glow-blue);transform:translateY(-2px)}

/* ---------- páginas internas ---------- */
.narrow{max-width:760px}
.lead{font-size:18px;line-height:1.8;color:var(--muted);margin-bottom:20px}
.bmj-pill{display:inline-block;padding:6px 16px;border:1px solid var(--border);border-radius:999px;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--muted);margin:6px 8px 0 0}
.eyebrow--red::before{background:var(--red)}

/* ficha técnica */
.ficha{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:28px 0;margin-top:64px}
.ficha div{padding:0 28px;border-left:1px solid var(--border-soft)}
.ficha div:first-child{border-left:none;padding-left:0}
.ficha small{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--disabled);margin-bottom:8px}
.ficha b{font-size:14.5px;font-weight:600;color:var(--text);line-height:1.5}
@media(max-width:860px){.ficha{grid-template-columns:1fr 1fr;gap:24px 0}.ficha div:nth-child(3){border-left:none;padding-left:0}}
@media(max-width:520px){.ficha{grid-template-columns:1fr}.ficha div{border-left:none;padding:0}}

/* quote / descoberta */
.quote{font-size:clamp(24px,3vw,38px);font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.3;margin:28px 0 20px;border:none}
.quote::selection{background:rgba(47,129,247,.3)}

/* blocos "o que construímos" */
.blocos{display:flex;flex-direction:column}
.bloco{display:flex;gap:36px;align-items:flex-start;padding:36px 0;border-bottom:1px solid var(--border-soft)}
.bloco:last-child{border-bottom:none}
.bnum{font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--blue);min-width:44px;padding-top:6px}
.bloco h3{font-size:21px;margin-bottom:10px}
.bloco p{font-size:16px;line-height:1.75;color:var(--muted);max-width:720px}

/* próximo case */
.nextcase{display:flex;justify-content:space-between;align-items:center;gap:24px;border:1px solid var(--border-soft);border-radius:18px;padding:28px 36px;background:var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.nextcase small{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--disabled)}
.nextcase a{font-weight:700;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;color:#fff;display:inline-flex;align-items:center;gap:12px;transition:color .25s ease-out}
.nextcase a:hover{color:var(--blue)}
.nextcase .ar{transition:transform .25s ease-out}
.nextcase a:hover .ar{transform:translateX(6px)}

/* soluções (lista) */
.solucoes-lista{display:flex;flex-direction:column}
.solitem{display:flex;gap:44px;align-items:flex-start;padding:56px 0;border-bottom:1px solid var(--border-soft)}
.solitem:last-child{border-bottom:none}
.snum{font-weight:800;font-size:15px;letter-spacing:.2em;color:var(--blue);min-width:52px;padding-top:10px}
@media(max-width:640px){.solitem{flex-direction:column;gap:16px}}

/* contato */
.contato-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
@media(max-width:920px){.contato-grid{grid-template-columns:1fr}}
.formcard{background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;padding:44px;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
@media(max-width:640px){.formcard{padding:28px 20px}}
.formcard form{display:flex;flex-direction:column;gap:20px}
.formcard label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--text)}
.formcard label span{color:var(--disabled);font-weight:400}
.formcard input,.formcard select,.formcard textarea{width:100%;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--border-soft);color:var(--text);font:500 15px/1.5 Manrope,'Segoe UI',system-ui,sans-serif;outline:none;transition:all .25s ease-out}
.formcard input::placeholder,.formcard textarea::placeholder{color:var(--disabled)}
.formcard input:focus,.formcard select:focus,.formcard textarea:focus{border-color:var(--blue);box-shadow:var(--glow-blue);background:rgba(255,255,255,.06)}
.formcard select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A1A9B8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.formcard textarea{resize:vertical;min-height:110px}

/* conteúdo genérico */
.generic-content p{margin-bottom:20px;color:var(--muted)}
.generic-content h2,.generic-content h3{margin:36px 0 16px}
.generic-content a{color:var(--blue)}

/* ===================== V3 — personalidade & glass ===================== */
/* nav pílula flutuante */
header{padding-top:14px}
header .nav{background:rgba(13,13,13,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.08);border-radius:999px;height:64px;padding:0 12px 0 26px;box-shadow:0 12px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
header.scrolled{background:transparent;border-bottom:none;backdrop-filter:none;-webkit-backdrop-filter:none}
header.scrolled .nav{background:rgba(9,9,9,.8)}
header .nav .btn{height:44px;padding:0 22px;font-size:12.5px}
header .logo-neon::after{bottom:-7px;height:1.5px}
header .logo-neon img{height:30px!important}

/* céu estrelado no lugar da grade */
.grid-lines{display:none}
.stars,.stars2{position:absolute;inset:0;background-repeat:repeat;pointer-events:none}
.stars{background-image:radial-gradient(1px 1px at 20px 30px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 90px 140px,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 200px 60px,rgba(255,255,255,.65),transparent),radial-gradient(1px 1px at 300px 200px,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 150px 260px,rgba(255,255,255,.55),transparent),radial-gradient(1.5px 1.5px at 350px 320px,rgba(255,255,255,.5),transparent);background-size:400px 400px;animation:twinkle 6s ease-in-out infinite alternate}
.stars2{background-image:radial-gradient(1px 1px at 60px 80px,rgba(160,200,255,.5),transparent),radial-gradient(1px 1px at 250px 150px,rgba(255,180,180,.45),transparent),radial-gradient(1px 1px at 120px 320px,rgba(255,255,255,.35),transparent),radial-gradient(1px 1px at 420px 240px,rgba(255,255,255,.3),transparent);background-size:520px 520px;animation:twinkle 8s ease-in-out infinite alternate-reverse}
@keyframes twinkle{from{opacity:.45}to{opacity:1}}
/* grão de filme global */
body::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}

/* glassmorphism nos cards */
.sol,.case,.case-hero,.step,.cta-card,.formcard,.nextcase{background:rgba(255,255,255,.035);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:rgba(255,255,255,.09)}
.sol:hover,.case:hover{background:rgba(255,255,255,.055)}
/* auroras para o vidro refratar */
.problem::before{content:"";position:absolute;width:720px;height:720px;left:-280px;top:8%;background:radial-gradient(circle,rgba(47,129,247,.08),transparent 65%);pointer-events:none}
.problem::after{content:"";position:absolute;width:620px;height:620px;right:-260px;bottom:4%;background:radial-gradient(circle,rgba(255,77,79,.07),transparent 65%);pointer-events:none}
#cases{overflow:hidden}
#cases::before{content:"";position:absolute;width:700px;height:700px;right:-300px;top:0;background:radial-gradient(circle,rgba(47,129,247,.06),transparent 65%);pointer-events:none}

/* tags glass — sem bolinha */
.tag{gap:0;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--muted);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tag::before{display:none}
.tag.own{border-color:rgba(255,77,79,.35);color:#FFB4B0;background:rgba(255,77,79,.06)}

/* chips do hero glass — sem bolinha */
.chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.11)}
.chip i{display:none}

/* selo rotativo */
.selo{position:absolute;z-index:5;left:-48px;top:-48px;width:124px;height:124px;filter:drop-shadow(0 10px 32px rgba(0,0,0,.55))}
.selo svg{animation:spin 20s linear infinite;width:100%;height:100%}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1024px){.selo{display:none}}
@media (prefers-reduced-motion:reduce){.stars,.stars2,.selo svg{animation:none}}

/* ===================== V4 — animações ===================== */
/* reveal com blur */
.rv{filter:blur(7px)}
.rv.on{filter:blur(0)}
/* barra de progresso de scroll */
.progressbar{position:fixed;top:0;left:0;height:2.5px;width:100%;z-index:2147483002;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--red),#8057F5,var(--blue));box-shadow:0 0 12px rgba(128,87,245,.5)}
/* marquee */
.marquee{overflow:hidden;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:26px 0;position:relative;background:rgba(255,255,255,.015)}
.mtrack{display:flex;gap:56px;width:max-content;animation:mq 30s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
.mtrack span{font-weight:800;font-size:20px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.22);white-space:nowrap;transition:color .25s ease-out;cursor:default}
.mtrack span:hover{color:#fff}
.mtrack i{font-style:normal}
.mtrack i.r{color:var(--red)}.mtrack i.b{color:var(--blue)}
@keyframes mq{to{transform:translateX(-50%)}}
/* tela do laptop "navegando" sozinha */
.laptop img{animation:screenpan 16s ease-in-out infinite alternate}
@keyframes screenpan{0%,12%{object-position:center top}88%,100%{object-position:center bottom}}
/* headline palavra a palavra */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .w>span{display:inline-block;transform:translateY(115%);animation:wordup .75s cubic-bezier(.2,.65,.2,1) forwards}
@keyframes wordup{to{transform:translateY(0)}}
/* shimmer no destaque */
.hero h1 .g{background-size:220% 100%;animation:shimmer 5s ease-in-out infinite alternate}
@keyframes shimmer{from{background-position:0% 0}to{background-position:100% 0}}
/* transições de transform p/ tilt/magnetic */
.case,.sol,.step{will-change:transform}
.btn{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .rv{filter:none}
  .mtrack,.laptop img,.hero h1 .g,.hero h1 .w>span{animation:none!important}
  .hero h1 .w>span{transform:none}
}

/* ===================== V5 — mobile polish ===================== */
html,body{overflow-x:hidden;max-width:100vw}
@media(max-width:640px){
  .wrap{padding:0 20px}
  header{padding:10px 10px 0}
  header .nav{height:56px;padding:0 8px 0 18px;border-radius:999px}
  header .logo-neon img{height:26px!important}
  header .logo-neon::after{bottom:-5px}
  header .nav .btn{height:40px;padding:0 16px;font-size:11px;letter-spacing:.06em}
  .hero{padding:140px 0 64px;min-height:auto}
  .hero .wrap{gap:48px}
  .hero h1{font-size:34px}
  .hero p{font-size:16.5px;line-height:1.65}
  .hero-ctas .btn{flex:1 1 100%;max-width:100%}
  .hero-meta{margin-top:48px;gap:20px 28px}
  .hm b{font-size:24px}
  .hm span{font-size:12px}
  .stage{display:flex;flex-direction:column;align-items:stretch}
  .laptop{transform:none!important}
  .phone{display:none}
  .chip,.chip2{position:static;display:inline-flex;width:max-content;margin:12px 10px 0 0;animation:none;box-shadow:none}
  .stage:hover .laptop{transform:none}
  .strip{padding:8px 0 72px}
  .strip p{font-size:11px;letter-spacing:.28em}
  .sec-head{margin-bottom:52px}
  .sec-head h2{font-size:28px}
  .marquee{padding:18px 0}
  .mtrack{gap:36px}
  .mtrack span{font-size:14px}
  .case-hero .info{padding:32px 24px}
  .case .body{padding:22px 22px 26px}
  .cta-card{padding:56px 22px}
  .ctahint{gap:10px 16px;font-size:12px}
  .ficha div{padding:0}
  .nextcase{flex-direction:column;align-items:flex-start;padding:24px}
  .formcard{padding:26px 18px}
  footer{padding:56px 0 24px}
  .fproj{gap:14px 20px}
}

/* ===================== V6 — overflow fix ===================== */
section{overflow:clip}
.problem{overflow:clip}
.hero{overflow:clip}
footer{overflow:clip}
header{max-width:100vw}

/* ===================== V7 — performance ===================== */
.laptop{overflow:hidden}
.laptop img{animation:screenpan2 16s ease-in-out infinite alternate;will-change:transform}
@keyframes screenpan{0%,100%{object-position:center top}}
@keyframes screenpan2{0%,12%{transform:scale(1.08) translateY(3.5%)}88%,100%{transform:scale(1.08) translateY(-3.5%)}}
@media(max-width:768px){
  body::after{display:none}
  .stars2{display:none}
  .stars{animation:none}
  .rv{filter:none}
  .sol,.case,.case-hero,.step,.cta-card,.formcard,.nextcase,header .nav,.tag,.chip,.mailchip,.icobtn{backdrop-filter:none;-webkit-backdrop-filter:none}
  .sol,.case,.case-hero,.step,.cta-card,.formcard,.nextcase{background:#0E0E0E}
  header .nav{background:rgba(10,10,10,.92)}
  .laptop img{animation:none;transform:none}
  .btn-p,.btn-r{animation-duration:8s}
}
@media (prefers-reduced-motion:reduce){.laptop img{animation:none;transform:none}}

/* ===================== V8 — header mobile ===================== */
html,body{overflow-x:clip}
@media(max-width:640px){
  header{padding:10px 12px 0}
  header .nav{height:52px;padding:0 6px 0 16px;background:rgba(10,10,10,.9)}
  header .logo-neon img{height:22px!important;filter:none!important}
  header .logo-neon::after{display:none}
  header .nav .btn{height:38px;padding:0 14px;font-size:10.5px;letter-spacing:.05em;animation:none}
  .hero,.problem,section,footer,.marquee{max-width:100vw}
  .hero{padding-top:120px}
}

/* ===================== V9 — hero video + fix select ===================== */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease-out;pointer-events:none;z-index:0}
.hero-video.on{opacity:.62}
.hero-video-mask{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 30% 50%,rgba(7,7,7,.92),rgba(7,7,7,.55) 55%,rgba(7,7,7,.8)),linear-gradient(180deg,rgba(7,7,7,.7),transparent 25%,transparent 65%,var(--bg))}
.hero .wrap{position:relative;z-index:2}
@media(max-width:768px){.hero-video,.hero-video-mask{display:none}}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
.formcard select{color:var(--text);background-color:#0D0D0D}
.formcard select option{background:#0D0D0D;color:#F8FAFC;padding:10px}
.formcard select option:checked,.formcard select option:hover{background:#2F81F7;color:#fff}
.formcard select:focus option{background:#0D0D0D}

/* ===================== V10 — clean glass (sem poeira) ===================== */
.stars,.stars2{display:none!important}
body::after{display:none!important}
.hero-bg{background:
  radial-gradient(ellipse 55% 45% at 78% 18%, rgba(47,129,247,.16), transparent 62%),
  radial-gradient(ellipse 45% 40% at 15% 88%, rgba(255,77,79,.11), transparent 62%),
  radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255,255,255,.022), transparent 70%)}
.hero-bg::before{content:"";position:absolute;inset:-10%;background:radial-gradient(ellipse 40% 35% at 60% 40%,rgba(120,150,255,.07),transparent 65%);filter:blur(60px);animation:auroraDrift 18s ease-in-out infinite alternate}
@keyframes auroraDrift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.08)}}
.sol,.case,.case-hero,.step,.cta-card,.formcard,.nextcase{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02) 45%,rgba(255,255,255,.012));backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 18px 50px rgba(0,0,0,.45)}
.sol::before,.case::before,.step::before,.cta-card::before,.formcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.07) 48%,transparent 62%);opacity:0;transition:opacity .5s ease-out}
.sol:hover::before,.case:hover::before,.step:hover::before{opacity:1}
.sol:hover,.case:hover,.step:hover{border-color:rgba(47,129,247,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 22px 60px rgba(0,0,0,.5),0 0 40px rgba(47,129,247,.12)}
header .nav{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border:1px solid rgba(255,255,255,.1)}
.chip,.tag,.mailchip,.bmj-pill{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border-color:rgba(255,255,255,.11)}
@media(max-width:768px){
  .sol,.case,.case-hero,.step,.cta-card,.formcard,.nextcase{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
  header .nav{background:rgba(12,12,12,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .hero-bg::before{animation:none}
}
@media (prefers-reduced-motion:reduce){.hero-bg::before{animation:none}}