: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;
    }
    *,*::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:900;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}
    }