:root {
  --p1:#2d1293;--p2:#581c95;--p4:#9c24b4;--p5:#c124c5;
  --o1:#f18831;--o2:#f39d2b;--o3:#f6b127;
  --bg:#07070f;--bg2:#0d0d1a;--card:#0f0f1e;--card2:#141428;
  --txt:#fff;--txt2:#9090b8;--txt3:#4a4a6a;
  --bdr:rgba(255,255,255,.06);--bdrp:rgba(156,36,180,.3);
  --grad:linear-gradient(135deg,#2d1293,#9c24b4,#c124c5);
  --grado:linear-gradient(135deg,#f18831,#f6b127);
  --gradm:linear-gradient(135deg,#2d1293,#c124c5,#f18831);
  --r:13px;
  --white:#fff;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--txt);overflow-x:hidden;line-height:1.6;font-size:15px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:100px 0}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;line-height:1.15}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.gt{background:var(--gradm);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gto{background:var(--grado);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.label{display:inline-flex;align-items:center;gap:8px;background:rgba(156,36,180,.1);border:1px solid var(--bdrp);border-radius:100px;padding:6px 18px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#c124c5;margin-bottom:20px}
.sh{text-align:center;max-width:800px;margin:0 auto}
.sh h2{font-size:clamp(28px,4vw,46px);font-weight:800;margin-bottom:16px;letter-spacing:-.5px}
.sh p{font-size:17px;color:var(--txt2);line-height:1.75}
.fade{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.fade.on{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ================================================================
BOTÃO PRIMÁRIO — farol + gradiente sólido de base
Hover: sweep de luz da esquerda para a direita
================================================================ */
.btn-p{
position:relative;display:inline-flex;padding:2px;
border-radius:calc(var(--r)+2px);cursor:pointer;
background:transparent;
overflow:hidden;   /* ← overflow:hidden aqui, não no .bi */
text-decoration:none;
clip-path:inset(0 round calc(var(--r) + 2px)); /* ← adicione esta linha */
}
/* A luz girante fica no ::before — o botão em si nunca roda */
.btn-p::before{
content:'';position:absolute;width:180%;height:180%;
top:-40%;left:-40%;
background:conic-gradient(transparent 0deg,transparent 210deg,rgba(255,255,255,.9) 245deg,var(--o3) 275deg,transparent 305deg);
animation:bspin 2.4s linear infinite;
}
.bi{
display:flex;align-items:center;gap:10px;
padding:14px 28px;border-radius:var(--r);
background:var(--gradm);
color:var(--white);font-family:'Inter',sans-serif;font-size:15px;font-weight:700;
white-space:nowrap;position:relative;z-index:1;overflow:hidden;
transition:background .35s;
}
/* Sweep de luz esquerda → direita no hover */
.bi::after{
content:'';position:absolute;inset:0;
background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.22) 50%,transparent 100%);
transform:translateX(-120%);transition:transform .5s ease;
}
.btn-p:hover .bi::after{transform:translateX(120%)}
.btn-p:hover .bi{background:linear-gradient(90deg,var(--p4),var(--p5),var(--o1),var(--o3))}
.arr{display:inline-block;transition:transform .3s}
.btn-p:hover .arr{transform:translateX(5px)}
@keyframes bspin{to{transform:rotate(360deg)}}

/* Botão discreto — header e formulário */
.btn-s{
display:inline-flex;align-items:center;gap:8px;
background:transparent;border:1px solid var(--bdrp);color:var(--white);
padding:11px 24px;border-radius:var(--r);font-size:14px;font-weight:600;
cursor:pointer;transition:all .3s;text-decoration:none;font-family:'Inter',sans-serif;
}
.btn-s:hover{background:rgba(156,36,180,.15);border-color:var(--p4);transform:translateY(-1px)}

/* Botão de formulário — gradiente sólido sem farol */
.btn-form{
display:flex;align-items:center;justify-content:center;gap:10px;
background:var(--gradm);color:var(--white);border:none;
padding:16px 32px;border-radius:var(--r);font-family:'Inter',sans-serif;
font-size:16px;font-weight:700;cursor:pointer;width:100%;
transition:opacity .3s,transform .3s,box-shadow .3s;
box-shadow:0 4px 20px rgba(156,36,180,.3);
}
.btn-form:hover{opacity:.88;transform:translateY(-2px);box-shadow:0 8px 32px rgba(156,36,180,.45)}
.btn-form .arr{display:inline-block;transition:transform .3s}
.btn-form:hover .arr{transform:translateX(4px)}

/* Botão laranja */
.btn-o{
display:inline-flex;align-items:center;gap:10px;
background:var(--grado);color:#111;border:none;
padding:15px 30px;border-radius:var(--r);font-family:'Inter',sans-serif;
font-size:15px;font-weight:700;cursor:pointer;
box-shadow:0 0 24px rgba(246,177,39,.25);
transition:transform .3s,box-shadow .3s;text-decoration:none;
}
.btn-o:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(246,177,39,.4)}

/* ================================================================
HEADER
================================================================ */
#hdr{position:fixed;top:0;left:0;right:0;z-index:1000;padding:20px 0;transition:all .4s}
#hdr.sc{background:rgba(7,7,15,.92);backdrop-filter:blur(22px);border-bottom:1px solid var(--bdr);padding:13px 0}
#hdr.hd{transform:translateY(-100%)}
.hi{display:flex;align-items:center;justify-content:space-between;gap:20px}
nav ul{display:flex;list-style:none;gap:26px}
nav a{color:var(--txt2);font-size:14px;font-weight:500;transition:color .3s}
nav a:hover{color:var(--white)}
.hbg{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.hbg span{display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:all .3s}
.mnav{display:none;position:fixed;inset:0;background:rgba(7,7,15,.98);backdrop-filter:blur(20px);z-index:1001;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.mnav.op{display:flex}
.mnav a{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700}
.mnc{position:absolute;top:24px;right:24px;font-size:28px;cursor:pointer}

/* ================================================================
WHATSAPP — aparece após 5s
EDITE: número e mensagem no href do #wabtn
================================================================ */
#wabtn{position:fixed;bottom:28px;right:28px;z-index:990;width:60px;height:60px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.4);opacity:0;transform:scale(0) rotate(-180deg);transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s;text-decoration:none;cursor:pointer;border:none}
#wabtn.vis{opacity:1;transform:scale(1) rotate(0deg)}
#wabtn svg{width:30px;height:30px;fill:var(--white)}
#wabtn::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid #25d366;animation:wap 2s ease-out infinite}
#wabtn::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(37,211,102,.2);animation:wap 2s ease-out .5s infinite}
@keyframes wap{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.5);opacity:0}}
.watip{position:absolute;right:72px;background:var(--white);color:#111;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.2);opacity:0;transform:translateX(8px);transition:all .3s;pointer-events:none}
.watip::after{content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right:none;border-left-color:var(--white)}
#wabtn:hover .watip{opacity:1;transform:translateX(0)}

/* ================================================================
MODAL WHATSAPP
================================================================ */
#wa-modal{
  position:fixed;bottom:100px;right:28px;z-index:991;
  width:320px;border-radius:16px;overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,.55);
  opacity:0;transform:translateY(16px) scale(.97);
  transition:opacity .3s ease,transform .3s ease;
  pointer-events:none;
}
#wa-modal.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
/* Topo — barra verde estilo WhatsApp */
.wa-header{
  background:#075e54;padding:12px 14px;
  display:flex;align-items:center;gap:10px;
}
.wa-avatar{
  width:38px;height:38px;border-radius:50%;background:#25d366;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:18px;
}
.wa-hinfo{flex:1}
.wa-hname{font-size:14px;font-weight:700;color:#fff;font-family:'Inter',sans-serif}
.wa-hstatus{font-size:12px;color:rgba(255,255,255,.7);font-family:'Inter',sans-serif}
.wa-hclose{
  background:none;border:none;color:rgba(255,255,255,.8);
  font-size:20px;cursor:pointer;padding:2px 6px;line-height:1;
  transition:color .2s;font-family:'Inter',sans-serif;
}
.wa-hclose:hover{color:#fff}
/* Área de chat */
.wa-body{
  background:#e5ddd5;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8bdb5' fill-opacity='0.18'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  min-height:220px;max-height:260px;overflow-y:auto;
  padding:14px 10px;display:flex;flex-direction:column;gap:8px;
}
/* Bolha recebida (empresa) */
.wa-bubble{
  background:#fff;border-radius:8px 8px 8px 2px;
  padding:8px 12px 6px;max-width:82%;align-self:flex-start;
  box-shadow:0 1px 2px rgba(0,0,0,.13);
  font-size:14px;color:#111;font-family:'Inter',sans-serif;line-height:1.45;
  opacity:0;transform:translateY(6px);
  transition:opacity .25s ease,transform .25s ease;
}
.wa-bubble.show{opacity:1;transform:translateY(0)}
.wa-bubble-time{font-size:11px;color:#999;text-align:right;margin-top:3px}
/* Digitando... */
.wa-typing{
  background:#fff;border-radius:8px 8px 8px 2px;
  padding:10px 14px;align-self:flex-start;
  box-shadow:0 1px 2px rgba(0,0,0,.13);
  display:none;align-items:center;gap:4px;
}
.wa-typing.show{display:flex}
.wa-typing span{
  width:7px;height:7px;border-radius:50%;background:#999;
  animation:wt-dot 1.2s ease-in-out infinite;
}
.wa-typing span:nth-child(2){animation-delay:.2s}
.wa-typing span:nth-child(3){animation-delay:.4s}
@keyframes wt-dot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
/* Rodapé — input */
.wa-footer{
  background:#f0f0f0;padding:8px 10px;
  display:flex;align-items:center;gap:8px;border-top:1px solid #ddd;
}
.wa-input{
  flex:1;background:#fff;border:none;border-radius:22px;
  padding:9px 14px;font-size:14px;font-family:'Inter',sans-serif;
  color:#111;outline:none;resize:none;line-height:1.4;
}
.wa-input::placeholder{color:#aaa}
.wa-send{
  width:38px;height:38px;border-radius:50%;background:#25d366;
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .2s;
}
.wa-send:hover{background:#1ebe5d}
.wa-send svg{width:18px;height:18px;fill:#fff}

/* ================================================================
HERO — split: esquerda texto | direita orb + imagem + floaters
================================================================ */
#hero{min-height:520px;display:flex;align-items:center;position:relative;overflow:hidden;padding:100px 0 20px}
.hgrid-bg{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.hero-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative;z-index:2;width:100%}
/* Esquerda */
.hcnt{max-width:580px;margin-top:-40px;}
.hbadge{display:inline-flex;align-items:center;gap:9px;background:rgba(241,136,49,.1);border:1px solid rgba(241,136,49,.28);border-radius:100px;padding:7px 18px;font-size:14px;font-weight:600;color:var(--o2);margin-bottom:28px}
.hdot{width:7px;height:7px;background:var(--o2);border-radius:50%;animation:blink 1.5s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
#hero h1{font-size:clamp(34px,4.8vw,58px);font-weight:700;letter-spacing:-1.5px;margin-bottom:10px}
#hero p{font-size:18px;color:var(--txt2);max-width:490px;margin-bottom:32px;line-height:1.6}
.hctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* Direita */
.hero-right{position:relative;height:540px;display:flex;align-items:center;justify-content:center}
/* Orb plasma — posicionado em relação ao #hero, alinhado à direita no desktop */
.orb-wrap{position:absolute;top:50%;left:75%;transform:translate(-50%,-50%);width:680px;height:680px;z-index:1;pointer-events:none;display:flex;align-items:center;justify-content:center}
.orb{
width:55%;height:55%;filter:blur(72px);opacity:.45;
background:conic-gradient(var(--p1) 0deg,var(--p2) 60deg,var(--p4) 120deg,var(--p5) 180deg,var(--o1) 240deg,var(--o3) 300deg,var(--p1) 360deg);
animation:plasmaShape 9s ease-in-out infinite,plasmaColor 8s linear infinite;
}
@keyframes plasmaShape{
0%  {border-radius:60% 40% 30% 70%/60% 30% 70% 40%;transform:scale(1)}
16% {border-radius:30% 70% 70% 30%/30% 30% 70% 70%;transform:scale(1.1)}
33% {border-radius:70% 30% 30% 70%/70% 70% 30% 30%;transform:scale(.94)}
50% {border-radius:50% 60% 40% 70%/40% 50% 50% 60%;transform:scale(1.06)}
66% {border-radius:40% 60% 70% 30%/50% 70% 30% 60%;transform:scale(.97)}
83% {border-radius:70% 30% 40% 60%/30% 60% 40% 70%;transform:scale(1.05)}
100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;transform:scale(1)}
}
@keyframes plasmaColor{
0%  {filter:blur(52px) hue-rotate(0deg)}
100%{filter:blur(52px) hue-rotate(360deg)}
}
/* Imagem central (frente do orb, atrás dos floaters)
EDITE: substitua .hci-ph por <img src="URL" alt=""> */
.hci{
position:absolute;z-index:2;
width:auto;height:580px;border-radius:22px;
object-fit: contain;
}

/* Floaters (z-index 3 — na frente da imagem) */
.hfloat{position:absolute;inset:0;z-index:3;pointer-events:none}
.fl{position:absolute;background:rgba(12,12,28,.88);border:1px solid var(--bdr);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--txt2);backdrop-filter:blur(16px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.fli{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.fl1{top:10%;left:-4%;animation:flt 4s ease-in-out infinite}
.fl2{top:-2%;right:-10%;animation:flt 5s ease-in-out infinite 1s}
.fl3{top:60%;left:0%;animation:flt 6s ease-in-out infinite .5s}
.fl4{top:52%;right:2%;animation:flt 4.5s ease-in-out infinite 1.5s}
.fl5{top:82%;right:28%;animation:flt 3s ease-in-out infinite .8s}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.scrollhint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--txt3);font-size:11px;letter-spacing:1px;animation:flt 2.5s ease-in-out infinite}
.shl{width:1px;height:36px;background:linear-gradient(to bottom,var(--txt3),transparent)}

/* ================================================================
CTA STRIPS
================================================================ */
.ctastrip{padding:44px 0;border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr)}
.ctabox{background:linear-gradient(135deg,rgba(45,18,147,.28),rgba(193,36,197,.16));border:1px solid var(--bdrp);border-radius:22px;padding:60px 48px;text-align:center;position:relative;overflow:hidden}
.ctabox::before{content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:340px;height:340px;background:radial-gradient(circle,rgba(193,36,197,.2),transparent 70%);pointer-events:none}
.ctabox>*{position:relative;z-index:1}
.ctabox h2{font-size:clamp(22px,3vw,38px);font-weight:800;margin-bottom:12px}
.ctabox p{font-size:17px;color:var(--txt2);margin-bottom:30px}

/* ================================================================
ISCA — FLIP CARDS 3D
Frente: problema | Verso: solução
EDITE: para imagem real, adicione background-image ao .flip-f
Ex: style="background-image:url('dor-1.jpg')"
================================================================ */
#isca{background:var(--bg2)}
.flip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.flip-c{height:300px;perspective:1000px;cursor:pointer}
.flip-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.4,0,.2,1)}
.flip-c:hover .flip-inner,.flip-c.flipped .flip-inner{transform:rotateY(180deg)}
.flip-f,.flip-b{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r);overflow:hidden;padding:28px}
/* Frente */
.flip-f{
background:var(--card);border:1px solid var(--bdr);
display:flex;flex-direction:column;justify-content:flex-end;
background-size:cover;background-position:center;
}
/* Overlay escurece a imagem de fundo */
.flip-f::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,15,.95) 40%,rgba(7,7,15,.6));z-index:0}
.flip-f-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:110px;opacity:0.40;filter:blur(0.5px);transform:scale(1.05);pointer-events:none;z-index:0}
.flip-f-ico{position:relative;z-index:1;width:42px;height:42px;background:rgba(241,136,49,.15);border:1px solid rgba(241,136,49,.25);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:11px}
.flip-f h3{position:relative;z-index:1;font-size:19px;font-weight:700;margin-bottom:8px}
.flip-f p{position:relative;z-index:1;font-size:14px;color:var(--txt);line-height:1.55}
.flip-hint{position:relative;z-index:1;font-size:12px;color:var(--txt3);margin-top:10px;display:flex;align-items:center;gap:5px}
/* Verso */
.flip-b{background:linear-gradient(145deg,rgba(45,18,147,.9),rgba(156,36,180,.85));border:1px solid var(--bdrp);transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;box-shadow:inset 0 0 60px rgba(193,36,197,.15)}
.flip-b::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:rgba(241,136,49,.2);filter:blur(30px)}
.flip-b .sol-tag{position:relative;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--o3);margin-bottom:10px}
.flip-b h3{position:relative;font-size:18px;font-weight:800;margin-bottom:10px}
.flip-b p{position:relative;font-size:14px;color:rgba(255,255,255,.75);line-height:1.6;margin-bottom:14px}
.flip-b ul{position:relative;list-style:none;display:flex;flex-direction:column;gap:7px}
.flip-b li{font-size:13px;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:8px;}
.flip-b li::before{content:'✓';color:var(--o3);font-weight:700}

/* ================================================================
BENEFÍCIOS
================================================================ */
#ben{position:relative}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px}
.mcard{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:30px 22px;text-align:center;transition:all .3s;position:relative;overflow:hidden}
.mcard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradm);opacity:0;transition:opacity .3s}
.mcard:hover{transform:translateY(-5px);border-color:var(--bdrp)}
.mcard:hover::before{opacity:1}
.mnum{font-family:'Space Grotesk',sans-serif;font-size:50px;font-weight:800;line-height:1;margin-bottom:8px;margin-top:8px;}
.mlbl{font-size:14px;color:var(--txt2);line-height:1.4}
.bcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.bcard{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:30px;transition:all .3s}
.bcard:hover{transform:translateY(-4px);border-color:var(--bdrp)}
.bico{width:50px;height:50px;background:var(--grad);border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:17px}
.bcard h3{font-size:17px;font-weight:700;margin-bottom:10px}
.bcard p{font-size:14px;color:var(--txt2);line-height:1.7}

/* ================================================================
COMO FUNCIONA — STICKY STACK
Imagem direita: opacity dinâmica via scroll
EDITE: .cf-illus-wrap → adicione <img src="..."> para imagem real
================================================================ */
#cf{background:var(--bg2)}
.cf-body{margin-top:52px}
.cf-card{
background:var(--card);border:1px solid var(--bdr);border-radius:20px;
padding:42px 44px;margin-bottom:16px;
display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:center;
position:sticky;top:88px;
}
/* Cores alternadas para distinção visual ao empilhar */
.cf-card:nth-child(odd){background:var(--card);border-color:rgba(255,255,255,.07)}
.cf-card:nth-child(even){background:#13132a;border-color:rgba(156,36,180,.22)}
/* Top escalonado: cada card deixa 18px do anterior visível */
.cf-card:nth-child(1){z-index:1;top:88px}
.cf-card:nth-child(2){z-index:2;top:106px}
.cf-card:nth-child(3){z-index:3;top:124px}
.cf-card:nth-child(4){z-index:4;top:142px}
.cf-card:hover{border-color:var(--bdrp)}
.cf-step{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--p5);margin-bottom:10px}
.cf-left h3{font-size:24px;font-weight:800;margin-bottom:13px;letter-spacing:-.3px}
.cf-left p{font-size:15px;color:var(--txt2);line-height:1.8}
.cf-right{
background:var(--bg);border:1px solid var(--bdr);border-radius:14px;
min-height:160px;position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;
opacity:1;
}
.cf-illus-wrap{
display:flex;align-items:center;justify-content:center;
width:100%;height:100%;min-height:160px;
/* EDITE: substitua o emoji por:
    <img src="imagem-passo-X.jpg" alt="" style="width:100%;height:100%;object-fit:cover"> */
}
.cf-num-bg{position:absolute;right:14px;top:8px;font-family:'Space Grotesk',sans-serif;font-size:90px;font-weight:900;opacity:0.2;color:var(--txt);line-height:1;pointer-events:none}

/* ================================================================
SERVIÇOS — CARDS EXPANSIVOS COM PREVIEW E IMAGEM DE FUNDO
CSS hover para desktop | JS click para mobile/touch
EDITE: --sv-bg:'url(imagem.jpg)' em cada .svc para imagem de fundo
================================================================ */
#sv{position:relative}
.svgrid{display:flex;gap:10px;margin-top:52px;min-height:400px}
.svc{
flex:1;min-width:70px;border:1px solid var(--bdr);border-radius:var(--r);
padding:22px 18px;cursor:pointer;position:relative;overflow:hidden;
display:flex;flex-direction:column;
transition:flex .5s cubic-bezier(.4,0,.2,1),border-color .3s;
/* EDITE: para imagem real: background-image:url('sua-imagem.jpg');background-size:cover;background-position:center */
background:var(--card);
}
/* Overlay de escurecimento sobre imagem */
.svc::before{content:'';position:absolute;inset:0;background:rgba(7,7,15,.82);transition:background .45s;z-index:0;border-radius:var(--r)}
/* Gradiente decorativo ativo */
.svc::after{content:'';position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .4s;z-index:0}
.svc>*{position:relative;z-index:1}
/* Preview (recolhido) */
.sv-prev{display:flex;flex-direction:column;gap:8px;height:100%}
.sv-ico{font-size:26px;margin-bottom:4px}
.sv-prev h4{font-size:14px;font-weight:700;line-height:1.35}
.sv-prev p{font-size:13px;color:var(--txt3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sv-expand-hint{margin-top:auto;font-size:11px;color:var(--txt3);display:flex;align-items:center;gap:4px}
/* Estado expandido — controlado 100% pelo JS via classe .ac.
Sem regra CSS de :hover para evitar conflito. */
.svcnt{display:none;flex-direction:column;height:100%}
.svc.ac{flex:5;border-color:var(--bdrp)}
.svc.ac::before{background:rgba(7,7,15,.55)}
.svc.ac::after{opacity:.06}
.svc.ac .sv-prev{display:none}
.svc.ac .svcnt{display:flex}
.sv-img{background:rgba(255,255,255,.04);border:1px solid var(--bdr);border-radius:10px;padding:0;display:flex;align-items:center;justify-content:center;height:130px;margin-bottom:14px;font-size:44px;opacity:.65;position:relative;overflow:hidden}
.sv-img-lbl{position:absolute;bottom:6px;left:10px;font-size:10px;color:var(--txt3)}
.svcnt h3{font-size:17px;font-weight:700;margin-bottom:9px}
.svcnt p{font-size:13px;color:var(--txt2);line-height:1.65;margin-bottom:12px}
.svfl{list-style:none;display:flex;flex-direction:column;gap:7px}
.svfl li{font-size:13px;color:var(--txt2);display:flex;align-items:center;gap:7px}
.svfl li::before{content:'→';color:var(--p5)}
.svadd{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.svadd .bcard{padding:22px}
.svadd .bico{width:40px;height:40px;font-size:18px;margin-bottom:13px}
.svadd h3{font-size:14px;margin-bottom:6px}
.svadd p{font-size:13px}

/* ================================================================
GARANTIA
================================================================ */
#garantia{background:var(--bg);padding:100px 0}
.garantia-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.garantia-img-side{display:flex;align-items:center;justify-content:center;position:relative}
.garantia-img-side img{width:100%;height:100%;max-width:420px;max-height:480px;filter:drop-shadow(0 20px 60px rgba(156,36,180,.25))}
.garantia-content .label{margin-bottom:20px}
.garantia-content h2{font-size:clamp(28px,3.8vw,48px);font-weight:900;letter-spacing:-.5px;line-height:1.1;margin-bottom:22px}
.garantia-content .sub{font-size:16px;color:var(--txt2);line-height:1.75;margin-bottom:18px}
.garantia-content .detail{font-size:15px;color:var(--txt2);line-height:1.8;border-left:3px solid var(--p4);padding-left:18px;text-align:justify}
.garantia-content .detail strong{color:var(--white)}

/* ================================================================
MARQUEE DE TECNOLOGIAS
Logos monocromáticos deslizando para esquerda
Pausa e coloriza no hover
================================================================ */
#techs{padding:60px 0;background:var(--bg2);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr)}
#techs .sh-lbl{font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--txt3);text-align:center;margin-bottom:32px}
.mq-wrap{overflow:hidden;position:relative}
.mq-wrap::before,.mq-wrap::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none}
.mq-wrap::before{left:0;background:linear-gradient(to right,var(--bg2),transparent)}
.mq-wrap::after{right:0;background:linear-gradient(to left,var(--bg2),transparent)}
.mq-track{display:flex;gap:20px;animation:mq 30s linear infinite;width:max-content}
.mq-wrap:hover .mq-track{animation-play-state:paused}
@keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ti{
display:flex;flex-direction:column;align-items:center;gap:9px;
min-width: 160px;
padding:18px 18px;border-radius:14px;border:1px solid var(--bdr);
background:var(--card);cursor:default;transition:border-color .35s;
filter:grayscale(1) brightness(.55)
}
.ti:hover{filter:none;border-color:rgba(255,255,255,.15)}
.ti svg{width:48px;height:32px}
.ti span{font-size:12px;font-weight:700;color:var(--txt3);transition:color .3s;white-space:nowrap}
.ti:hover span{color:rgba(255,255,255,.85)}

/* ================================================================
FAQ
================================================================ */
#faq{}
.flist{margin:52px auto 0;display:flex;flex-direction:column;gap:9px;max-width:780px}
.fi{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;transition:border-color .3s}
.fi.op{border-color:var(--bdrp)}
.fq{width:100%;background:none;border:none;color:var(--white);font-family:'Inter',sans-serif;font-size:15px;font-weight:600;text-align:left;padding:22px 24px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px}
.farw{width:27px;height:27px;background:rgba(156,36,180,.1);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .35s,background .3s;font-size:12px}
.fi.op .farw{transform:rotate(180deg);background:rgba(156,36,180,.3)}
.fans{max-height:0;overflow:hidden;transition:max-height .4s ease}
.fani{padding:0 24px 22px;font-size:15px;color:var(--txt2);line-height:1.8;text-align:justify}

/* ================================================================
FORMULÁRIO — layout dividido
EDITE: endpoint n8n em FM_ENDPOINT no script
EDITE: dados de contato abaixo
================================================================ */
#ct{background:var(--bg2)}
.ct-wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:36px;margin-top:52px;align-items:start}
.ct-left{background:linear-gradient(145deg,rgba(45,18,147,.5),rgba(193,36,197,.2));border:1px solid var(--bdrp);border-radius:20px;overflow:hidden;position:relative;display:flex;flex-direction:column}
.ct-left::before{content:'';position:absolute;top:-50px;right:-50px;width:220px;height:220px;background:radial-gradient(circle,rgba(193,36,197,.25),transparent 70%);pointer-events:none}
.ct-left::after{content:'';position:absolute;bottom:-30px;left:-30px;width:160px;height:160px;background:radial-gradient(circle,rgba(241,136,49,.15),transparent 70%);pointer-events:none}
/* Área da imagem no topo do lado esquerdo
EDITE: substitua .ct-img-ph por <img src="URL" alt="" style="width:100%;height:100%;object-fit:cover"> */
.ct-img-area{height:220px;background:rgba(0,0,0,.2);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(255,255,255,.06)}
/* Conteúdo abaixo da imagem */
.ct-info{padding:32px;position:relative;z-index:1}
.ct-info h3{font-size:22px;font-weight:800;margin-bottom:8px;letter-spacing:-.2px}
.ct-info .sub{font-size:15px;color:rgba(255,255,255,.6);margin-bottom:24px;line-height:1.65}
.ct-contacts{display:flex;flex-direction:column;gap:15px}
.ct-item{display:flex;align-items:center;gap:12px}
.ct-ico{width:38px;height:38px;background:rgba(255,255,255,.08);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.ct-item div{display:flex;flex-direction:column}
.ct-item span:first-child{font-size:11px;color:rgba(255,255,255,.5);font-weight:600;letter-spacing:.4px;text-transform:uppercase}
.ct-item span:last-child{font-size:15px;font-weight:600}
/* Formulário lado direito */
.ct-right{background:var(--card);border:1px solid var(--bdr);border-radius:20px;padding:38px}
.fmgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fg{display:flex;flex-direction:column;gap:6px}
.fg.full{grid-column:1/-1}
.fg label{font-size:12px;font-weight:700;color:var(--txt2);letter-spacing:.4px;text-transform:uppercase}
.fg input,.fg textarea,.fg select{background:var(--bg);border:1px solid var(--bdr);border-radius:10px;padding:14px 16px;color:var(--white);font-family:'Inter',sans-serif;font-size:15px;transition:border-color .3s,box-shadow .3s;outline:none;width:100%}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--p4);box-shadow:0 0 0 3px rgba(156,36,180,.13)}
.fg input.err,.fg textarea.err{border-color:#e53e3e}
.err-msg{font-size:12px;color:#e53e3e;margin-top:3px;display:none}
.fg input.err~.err-msg,.fg textarea.err~.err-msg{display:block}
.fg textarea{resize:none;height:120px}
.fg select option{background:var(--card)}
.fmok{display:none;text-align:center;padding:48px 20px}
.fmok .ok-ico{font-size:52px;margin-bottom:14px}
.fmok h3{font-size:22px;margin-bottom:8px}
.fmok p{color:var(--txt2);font-size:15px}

/* ================================================================
MULTISELECT CUSTOMIZADO
================================================================ */
.ms-wrap{position:relative;width:100%}
.ms-trigger{
  background:var(--bg);border:1px solid var(--bdr);border-radius:10px;
  padding:12px 16px;color:var(--white);font-family:'Inter',sans-serif;font-size:15px;
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:border-color .3s,box-shadow .3s;min-height:52px;flex-wrap:wrap;
}
.ms-trigger:focus{outline:none}
.ms-wrap.open .ms-trigger,.ms-trigger:focus{border-color:var(--p4);box-shadow:0 0 0 3px rgba(156,36,180,.13)}
.ms-wrap.err .ms-trigger{border-color:#e53e3e}
.ms-placeholder{color:var(--txt3);font-size:15px;pointer-events:none}
.ms-tags{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.ms-tag{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(156,36,180,.18);border:1px solid var(--bdrp);
  color:var(--white);font-size:12px;font-weight:600;
  padding:3px 10px;border-radius:100px;white-space:nowrap;
}
.ms-tag-x{cursor:pointer;opacity:.7;font-size:14px;line-height:1;transition:opacity .2s}
.ms-tag-x:hover{opacity:1}
.ms-arrow{font-size:11px;color:var(--txt3);transition:transform .3s;flex-shrink:0;margin-left:4px}
.ms-wrap.open .ms-arrow{transform:rotate(180deg)}
.ms-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:200;
  background:var(--card2);border:1px solid var(--bdrp);border-radius:10px;
  padding:6px 0;box-shadow:0 8px 32px rgba(0,0,0,.5);
  display:none;max-height:260px;overflow-y:auto;
}
.ms-wrap.open .ms-dropdown{display:block}
.ms-opt{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;cursor:pointer;font-size:14px;color:var(--txt2);
  transition:background .15s;user-select:none;
}
.ms-opt:hover{background:rgba(156,36,180,.1);color:var(--white)}
.ms-opt.sel{color:var(--white)}
.ms-cb{
  width:17px;height:17px;border:2px solid var(--txt3);border-radius:4px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.ms-opt.sel .ms-cb{background:var(--p4);border-color:var(--p4)}
.ms-opt.sel .ms-cb::after{content:'✓';font-size:10px;color:#fff;font-weight:700}
.ms-wrap.err~.err-msg{display:block}

/* ================================================================
FOOTER — luz no rodapé
EDITE: dados de contato, links redes sociais, páginas legais
================================================================ */
footer{background:var(--bg);border-top:1px solid var(--bdr);padding:64px 0 28px;position:relative;overflow:hidden}
footer::before{content:'';position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);width:80%;height:280px;background:radial-gradient(ellipse at bottom,rgba(156,36,180,.12),transparent 70%);pointer-events:none}
.ftgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;padding-bottom:44px;border-bottom:1px solid var(--bdr);margin-bottom:26px;position:relative;z-index:1}
.ftbrand{display:flex;flex-direction:column;align-items:flex-start}
.ftbrand img{display:block}
.ftbrand p{font-size:14px;color:var(--txt3);margin-top:12px;line-height:1.7;max-width:260px}
.ft-contact{display:flex;flex-direction:column;gap:11px;margin-top:18px}
.ft-ci{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--txt2)}
.ft-ci span:first-child{font-size:16px}
.ftcol h4{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt2);margin-bottom:16px}
.ftcol ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.ftcol a{color:var(--txt3);font-size:14px;transition:color .3s}
.ftcol a:hover{color:var(--white)}
.ftbot{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--txt3);position:relative;z-index:1}
.socials{display:flex;gap:9px}
.socl{width:34px;height:34px;background:var(--card);border:1px solid var(--bdr);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--txt3);transition:all .3s}
.socl:hover{background:rgba(156,36,180,.15);border-color:var(--bdrp);color:var(--white)}
.socl svg{width:15px;height:15px;fill:currentColor}
/* Botão voltar ao topo */
#back-top{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid var(--bdr);border-radius:100px;padding:8px 18px;font-size:13px;font-weight:600;color:var(--txt2);cursor:pointer;transition:all .3s;text-decoration:none}
#back-top:hover{background:rgba(156,36,180,.15);border-color:var(--bdrp);color:var(--white);transform:translateY(-2px)}

/* ================================================================
RESPONSIVO
================================================================ */

/* 1100px — floaters começam a apertar */
@media(max-width:1100px){
.fl{font-size:12px;padding:9px 13px}
.fl2{right:-2%}
}

/* 1000px — footer e garantia */
@media(max-width:1000px){
.ftgrid{grid-template-columns:1fr 1fr;gap:28px}
.garantia-wrap{gap:36px}
}

/* 860px — hero empilha, soluções em coluna, garantia empilha */
@media(max-width:860px){
.hero-layout{grid-template-columns:1fr}
.hero-right{height:240px;margin-top:0}
.hci{display:none}
.hfloat{display:none}
.hcnt{max-width:100%;margin-top:0}
/* Orb centralizado como fundo em tablet */
.orb-wrap{left:50%;width:500px;height:500px}
.svgrid{flex-direction:column;min-height:auto}
.svc{min-width:auto;min-height:64px}
.svc.ac{flex:none}
.ct-wrap{grid-template-columns:1fr}
.garantia-wrap{grid-template-columns:1fr;gap:28px}
.garantia-img-side img{max-width:300px}
.cf-card:nth-child(1){top:70px}
.cf-card:nth-child(2){top:84px}
.cf-card:nth-child(3){top:98px}
.cf-card:nth-child(4){top:112px}
}

/* 768px — mobile */
@media(max-width:768px){
section{padding:64px 0}
/* Header */
nav ul,.nav-cta{display:none}
.hbg{display:flex}
/* Hero — ajustes apenas mobile */
#hero{min-height:auto;padding:88px 0 48px}
.hero-right{display:none}
.scrollhint{display:none}
.hcnt{margin-top:0;text-align:center}
.hbadge{font-size:12px;padding:6px 14px;margin-left:auto;margin-right:auto}
#hero h1{font-size:clamp(30px,8vw,42px);letter-spacing:-1px}
#hero p{font-size:16px;max-width:100%}
/* Orb centralizado como fundo em mobile */
.orb-wrap{left:50%;width:380px;height:380px}
.hctas{flex-direction:column;align-items:center;gap:12px}
/* Botão primário: largura controlada, farol contido */
.btn-p{width:100%;max-width:320px}
.btn-p .bi{width:100%;justify-content:center}
.btn-s{justify-content:center;width:100%;max-width:320px}
/* Flip cards */
.flip-grid{grid-template-columns:1fr 1fr}
.flip-c{height:270px}
/* Benefícios */
.mgrid{grid-template-columns:repeat(2,1fr)}
.bcards{grid-template-columns:1fr}
/* Como funciona */
.cf-card{grid-template-columns:1fr;padding:28px 22px;gap:20px}
.cf-right{display:none}
.cf-card:nth-child(1){top:60px}
.cf-card:nth-child(2){top:72px}
.cf-card:nth-child(3){top:84px}
.cf-card:nth-child(4){top:96px}
/* CTA strips */
.ctastrip .wrap{flex-direction:column;text-align:center;gap:14px}
.ctabox{padding:36px 20px}
.ctabox h2{font-size:clamp(20px,5vw,32px)}
/* Soluções */
.sv-img{height:90px}
.svadd{grid-template-columns:1fr 1fr}
/* Tecnologias */
.ti{min-width:110px;padding:12px 10px;gap:7px}
.ti span{white-space:normal;text-align:center;font-size:11px}
#techs .sh-lbl{padding:0 16px}
/* Garantia */
.garantia-wrap{gap:20px}
.garantia-content h2{font-size:clamp(24px,6vw,36px)}
.garantia-img-side img{max-width:240px}
/* Contato: oculta lado esquerdo, form ocupa largura toda */
.ct-left{display:none}
.ct-wrap{grid-template-columns:1fr;margin-top:32px}
.ct-right{padding:28px 20px}
/* Formulário */
.fmgrid{grid-template-columns:1fr}
.fg.full{grid-column:1}
/* Footer */
.ftgrid{grid-template-columns:1fr;text-align:center}
.ftbrand{align-items:center}
.ftbrand img{margin:0 auto}
.ftbrand p{max-width:100%}
.ft-contact{align-items:center}
.ftcol ul{align-items:center}
.socials{justify-content:center}
.ftbot{flex-direction:column;gap:12px;text-align:center}
/* Modal WhatsApp */
#wa-modal{width:calc(100vw - 32px);right:16px;bottom:90px}
}

/* 480px — mobile portrait */
@media(max-width:480px){
.flip-grid{grid-template-columns:1fr}
.flip-c{height:290px}
.mgrid{grid-template-columns:1fr 1fr}
.svadd{grid-template-columns:1fr}
.garantia-img-side img{max-width:200px}
#wabtn{width:52px;height:52px;bottom:20px;right:20px}
#wa-modal{bottom:82px}
.mnum{font-size:42px}
}

/* 360px — Android compacto */
@media(max-width:360px){
.wrap{padding:0 16px}
.hbadge{font-size:11px;padding:5px 12px}
.mgrid{grid-template-columns:1fr}
}