/* ===================================================================
   BemConvert v3 — preto, cromo, símbolo 3D
   Pendências de conteúdo em PENDENCIAS.md.
   =================================================================== */
:root{
  --ink:#000000;
  --graphite:#0C0C0F;
  --slate:#15161A;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.18);
  --text:#F2F3F5;
  --dim:rgba(255,255,255,.58);
  --faint:rgba(255,255,255,.34);
  --plate:#E7E9ED;          /* placa de metal escovado (seção clara) */
  --plate-ink:#111214;
  --plate-dim:#5E626B;
  --signal:#25D366;
  --paper:#FFFFFF;          /* fundo branco da seção de serviços */
  --ic-red:#E63056;         /* marca InsectControl — só no bloco de prova */
  --ic-navy:#082E44;
  --violet:#6E6E85;         /* o leve roxo da logo — só no material da estrela e no brilho */

  --font:'Inter','Inter Variable',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1280px;
  --gutter:clamp(20px,4vw,56px);
  --gap:clamp(80px,10vw,160px);
  --nav-h:56px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.45;letter-spacing:-.009em;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:400}
a{color:inherit}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
::selection{background:#fff;color:#000}
:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* escala */
.t-giant{font-size:clamp(40px,6.3vw,96px);line-height:.94;letter-spacing:-.045em;font-weight:500}
.t-display{font-size:clamp(44px,7vw,110px);line-height:.95;letter-spacing:-.04em;font-weight:500}
.t-h1{font-size:clamp(38px,5.4vw,84px);line-height:.98;letter-spacing:-.035em;font-weight:500}
.t-h2{font-size:clamp(32px,4.2vw,64px);line-height:1.02;letter-spacing:-.03em;font-weight:500}
.t-h3{font-size:clamp(24px,2.8vw,38px);line-height:1.1;letter-spacing:-.022em;font-weight:500}
.t-sub{font-size:clamp(17px,1.35vw,20px);line-height:1.45;letter-spacing:-.009em;color:var(--dim)}
.t-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500}
.t-cap{font-size:13px;line-height:1.5;color:var(--dim)}

/* ---------- material ---------- */
.chrome{
  background:linear-gradient(100deg,#FFFFFF 0%,#DCE1E8 14%,#9AA1AB 28%,#6E757F 40%,#FFFFFF 52%,#C3C9D2 66%,#7F8690 78%,#EEF1F5 90%,#FFFFFF 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.chrome-ink{
  background:linear-gradient(100deg,#14141C 0%,#4E4E63 14%,#101018 28%,#6E6E85 40%,#0E0E14 52%,#5C5C73 66%,#1A1A24 78%,#45455A 90%,#14141C 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.chrome-live{animation:chrome-shift 9s ease-in-out infinite alternate}
@keyframes chrome-shift{to{background-position:100% 0}}

.pill{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:9999px;font-size:15px;font-weight:600;letter-spacing:-.009em;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .2s}
.pill svg{width:14px;height:14px;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.pill:hover svg{transform:translateX(3px)}
.pill-chrome{color:#08090B;background:linear-gradient(180deg,#FFFFFF 0%,#E3E7ED 40%,#B3B9C4 62%,#F3F6FA 100%);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 -1px 0 rgba(0,0,0,.35) inset,0 18px 40px -16px rgba(210,220,235,.45)}
.pill-chrome:hover{transform:translateY(-2px);filter:brightness(1.04)}
.pill-ink{color:#fff;background:linear-gradient(180deg,#26262F 0%,#111118 55%,#08080C 100%);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 18px 40px -18px rgba(20,20,30,.6)}
.pill-ink:hover{transform:translateY(-2px);filter:brightness(1.12)}
.pill-signal{color:#04140A;background:var(--signal);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 14px 30px -14px rgba(37,211,102,.6)}
.pill-signal:hover{transform:translateY(-2px);filter:brightness(1.06)}
.pill-line{color:#fff;border:1px solid var(--line-strong);background:rgba(255,255,255,.02);backdrop-filter:blur(8px)}
.pill-line:hover{border-color:#fff}

.trust{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--faint)}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:13px;height:13px;color:#fff}

/* borda cromada (1px gradiente) */
.edge{position:relative}
.edge::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.06) 30%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* placa de metal escovado — hero claro, funil e CTA usam o mesmo material */
.plate-face{position:relative;background:var(--plate);color:var(--plate-ink)}
.plate-face::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 3px),linear-gradient(180deg,#F1F2F5,#DADDE3);opacity:.9;pointer-events:none}
.plate-face::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 30% 20%,rgba(255,255,255,.7),transparent 70%);pointer-events:none}

/* ---------- nav ---------- */
.nav{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:0;right:0;z-index:100;display:flex;justify-content:center;padding-inline:14px;pointer-events:none}
.nav-in{pointer-events:auto;width:100%;max-width:1080px;height:var(--nav-h);background:rgba(10,10,12,.84);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:15px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 8px 0 18px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:16px;letter-spacing:-.02em;color:#fff}
.brand-mark{width:34px;height:34px;margin:-8px -2px -8px -6px;flex:0 0 auto}   /* o elemento é fino: abaixo de ~30px ele some */
.nav-links{display:flex;gap:26px;justify-self:center}
.nav-links a{color:var(--dim);text-decoration:none;font-size:14px;transition:color .2s}
.nav-links a:hover{color:#fff}
.nav-cta{justify-self:end}
.nav-cta .pill{padding:10px 16px;font-size:14px}

/* ===================================================================
   SÍMBOLO 3D — camada fixa acima da folha (hero → problema)
   =================================================================== */
.orb{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;will-change:opacity}
.orb canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-star-fallback,.final-star-fallback{display:none}
html.no-webgl .orb,html.no-webgl .orb-final{display:none}
html.no-webgl .hero-star-fallback{display:block;position:absolute;left:50%;top:76%;width:clamp(240px,32vw,440px);transform:translate(-50%,-50%);z-index:2}
html.no-webgl .orb-final{opacity:1!important}
html.no-webgl .orb-final canvas{display:none}
html.no-webgl .final-star-fallback{display:block;position:absolute;inset:6%}

/* a notificação mora na camada do símbolo, ao lado dele */
.ping{position:absolute;z-index:4;display:flex;align-items:flex-start;gap:10px;padding:12px 16px 12px 13px;border-radius:15px;max-width:236px;background:rgba(14,14,17,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);font-size:14px;line-height:1.4;color:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.9);will-change:transform}
.ping::before{content:"";flex:0 0 7px;width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px rgba(37,211,102,.16),0 0 14px rgba(37,211,102,.8)}
.ping b{display:block;font-weight:600;font-size:12px;color:rgba(255,255,255,.5);margin-bottom:2px}
.ping-1{left:calc(50% + 15vh);top:66%}

/* ===================================================================
   HERO — pilha centralizada, símbolo embaixo vazando a borda
   =================================================================== */
.hero{position:sticky;top:0;z-index:0;height:100svh;min-height:680px;background:#000;overflow:hidden}
/* hero claro: placa, texto em tinta, estrela cromada por cima */
.hero-light{background:var(--plate);color:var(--plate-ink)}
.hero-light::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 3px),linear-gradient(180deg,#F4F5F8,#D9DCE3);opacity:.9;pointer-events:none}
.hero-light .hero-glow{background:radial-gradient(closest-side,rgba(110,110,133,.20),transparent 62%);filter:blur(40px);z-index:1}
.hero-light .grain{display:none}                 /* o grão é feito para fundo preto */
.hero.hero-light h1{color:var(--plate-ink)}
.hero-light .t-sub{color:var(--plate-dim)}
.hero-glow{position:absolute;left:50%;top:70%;width:130vmax;height:130vmax;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(205,212,224,.18),transparent 60%);filter:blur(30px);pointer-events:none}
.grain{position:absolute;inset:0;opacity:.32;mix-blend-mode:overlay;pointer-events:none}
.hero-in{position:relative;z-index:3;padding-top:calc(var(--nav-h) + 14px + clamp(40px,8vh,88px));display:grid;justify-items:center;text-align:center;gap:22px}
.hero-eyebrow{display:block}
.hero h1{color:#fff;max-width:none}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .line>span{display:block;will-change:transform}
.hero .t-sub{max-width:52ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ===================================================================
   MARQUEE cromado
   =================================================================== */
.marquee{position:relative;z-index:2;background:#000;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:26px 0}
.marquee-track{display:flex;gap:64px;white-space:nowrap;will-change:transform;width:max-content}
.marquee-track span{font-size:clamp(40px,6.4vw,96px);line-height:1;letter-spacing:-.04em;font-weight:500;display:inline-flex;align-items:center;gap:64px}
.mq-mark{width:.72em;height:.72em;flex:0 0 auto}

/* ===================================================================
   FOLHA (camada 1)
   =================================================================== */
.sheet{position:relative;z-index:2;background:var(--graphite);border-radius:36px 36px 0 0;box-shadow:0 -40px 100px -30px rgba(0,0,0,.9);border-top:1px solid var(--line-strong)}

/* problema */
.act-problem{position:relative}
.problem-stage{height:100svh;min-height:620px;display:grid;align-items:center;position:relative}
.problem-in{position:relative;z-index:2}
.problem-title{max-width:26ch;margin-bottom:32px;color:#fff}
.problem-title span{color:var(--dim)}
.problem-meta{display:flex;align-items:center;gap:18px;margin-bottom:38px}
.problem-rail{position:relative;width:180px;height:1px;background:var(--line-strong)}
.problem-rail i{position:absolute;left:0;top:-1px;height:3px;width:25%;background:#fff;transform-origin:left}
.quotes{position:relative;min-height:2.4em}
.quote{position:absolute;inset:0 0 auto 0}
.quote:first-child{position:relative}
.quote .q{max-width:14ch;font-weight:500}   /* deixa a direita livre para o símbolo */
.quote p.t-cap{margin-top:26px;max-width:44ch;font-size:15px}
.verdict{padding-block:0 var(--gap);position:relative;z-index:2}
.verdict h2{max-width:20ch}

/* ===================================================================
   FUNIL — placa de metal escovado (única seção clara)
   =================================================================== */
.act-funnel{background:var(--plate);color:var(--plate-ink);border-radius:36px;margin-inline:clamp(8px,1.2vw,16px);position:relative;overflow:hidden}
.act-funnel::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 3px),linear-gradient(180deg,#F1F2F5,#DADDE3);opacity:.9;pointer-events:none}
.act-funnel::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 30% 20%,rgba(255,255,255,.7),transparent 70%);pointer-events:none}
.funnel-stage{height:100svh;min-height:660px;display:grid;align-items:center;overflow:hidden;position:relative;z-index:1}
.funnel-in{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,80px);align-items:center}
.funnel-copy{position:relative;min-height:300px}
.stage-copy{position:absolute;inset:0 0 auto 0}
.stage-copy:first-child{position:relative}
.stage-copy .t-label{color:var(--plate-dim);display:block;margin-bottom:22px}
.stage-copy h2{max-width:11ch;color:var(--plate-ink)}
.stage-copy p{margin-top:20px;max-width:36ch;color:var(--plate-dim)}
.funnel-visual{position:relative;aspect-ratio:5/4;max-height:74svh;border-radius:24px;overflow:hidden;background:#0C0C0F;border:1px solid rgba(0,0,0,.2);box-shadow:0 60px 100px -50px rgba(0,0,0,.6)}
.dots{position:absolute;inset:0}
.dot{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#C9CED6;will-change:transform,opacity}
.page{position:absolute;left:50%;top:50%;width:min(60%,330px);aspect-ratio:3/4;transform:translate(-50%,-50%);background:#15161A;border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9);padding:22px;display:flex;flex-direction:column;gap:12px;will-change:transform,opacity}
.page i{display:block;height:10px;border-radius:5px;background:rgba(255,255,255,.08)}
.page i.w60{width:60%}.page i.w80{width:80%}.page i.w40{width:40%}.page i.w90{width:90%}
.page .page-hero{height:34%;border-radius:10px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03))}
.page .page-btn{margin-top:auto;height:38px;border-radius:999px;background:linear-gradient(180deg,#fff,#B3B9C4)}
.msgs{position:absolute;inset:0;pointer-events:none}
.msg{position:absolute;display:flex;gap:9px;align-items:flex-start;padding:11px 14px 11px 12px;border-radius:14px;background:rgba(20,21,25,.92);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 40px -20px rgba(0,0,0,.8);font-size:13.5px;line-height:1.35;max-width:230px;color:#fff;will-change:transform,opacity}
.msg::before{content:"";flex:0 0 7px;width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px rgba(37,211,102,.15),0 0 12px rgba(37,211,102,.7)}
.msg b{display:block;font-size:11.5px;color:rgba(255,255,255,.5);font-weight:500;margin-bottom:1px}
.msg-1{right:6%;top:12%}.msg-2{right:10%;top:44%}.msg-3{right:4%;bottom:14%}

/* ===================================================================
   SERVIÇOS — fundo branco (continua o claro do funil), cartões pretos
   =================================================================== */
.services{position:relative;background:var(--paper);color:var(--plate-ink);border-radius:36px;margin:clamp(10px,1.2vw,16px) clamp(8px,1.2vw,16px) 0;padding-block:var(--gap)}
.services-head{display:grid;justify-items:center;text-align:center;gap:18px;margin-bottom:56px}
.services-head .t-label{color:var(--plate-dim)}
.services-head h2{max-width:18ch;color:var(--plate-ink)}
.services-head .t-sub{max-width:52ch;color:var(--plate-dim)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cards .card-sites{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.card-sites .card-stage{aspect-ratio:auto;min-height:100%;border-bottom:0;border-right:1px solid var(--line)}
.card-sites .card-body{padding:clamp(26px,2.6vw,36px)}
.card-sites h3{font-size:clamp(30px,3.2vw,44px)}
/* modalidades: contrato em destaque só pela borda e pelo brilho */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.mode{border-radius:16px;padding:18px 18px 16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.mode-name{display:block;font-style:italic;font-size:15px;letter-spacing:-.01em;text-transform:none;color:var(--faint);margin-bottom:12px;font-weight:500}
.mode ul{margin:0;gap:8px}
.mode li{font-size:14px}
.mode-contract{background:linear-gradient(160deg,#1B1D22,#0E0F12);border-color:transparent;box-shadow:0 30px 60px -30px rgba(210,220,235,.35)}
.mode-contract .mode-name{color:#fff}
.mode-contract li{color:#fff}
.mode-contract li::before{background:linear-gradient(140deg,#fff,#DCE1E8 50%,#8E949E)}
.card{position:relative;border-radius:26px;background:linear-gradient(160deg,#141518,#050507);color:var(--text);display:flex;flex-direction:column;overflow:hidden;isolation:isolate;box-shadow:0 40px 80px -40px rgba(0,0,0,.55);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.card:hover{transform:translateY(-4px)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.05) 40%,rgba(255,255,255,.18));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}
/* palco: ícones em arco em repouso, vídeo entra no hover / centro da tela */
.card-stage{position:relative;aspect-ratio:16/10;background:#000;overflow:hidden;border-bottom:1px solid var(--line)}
.card-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 60%,rgba(205,212,224,.16),transparent 70%);pointer-events:none}
.icon-arc{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1);z-index:1}
.icon-arc i{position:absolute;aspect-ratio:1;display:grid;place-items:center;border-radius:22%;background:linear-gradient(160deg,#1E2025,#0B0B0E);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 40px -20px rgba(0,0,0,.9);color:#fff;animation:arc-float 6s ease-in-out infinite;will-change:transform}
.icon-arc svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-arc i:nth-child(1){width:14%;left:7%;top:54%;animation-delay:-1.2s}
.icon-arc i:nth-child(2){width:19%;left:22%;top:36%;animation-delay:-2.6s}
.icon-arc i:nth-child(3){width:26%;left:37%;top:23%;animation-delay:0s;background:linear-gradient(180deg,#fff,#B3B9C4);color:#000;border-color:transparent;z-index:1}
.icon-arc i:nth-child(4){width:19%;left:59%;top:36%;animation-delay:-3.8s}
.icon-arc i:nth-child(5){width:14%;left:79%;top:54%;animation-delay:-5s}
@keyframes arc-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-7%) rotate(1.5deg)}}
/* ===== cenas animadas dos cards (substituem o vídeo: nítidas em qualquer tela) ===== */
.scene{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1);z-index:1;display:grid;place-items:center;padding:clamp(14px,2vw,26px)}
.card.is-live .scene{opacity:1;transform:none}

/* --- tráfego: painel de plataforma de anúncio --- */
.scene-ads .ui{position:relative;width:100%;aspect-ratio:16/10;border-radius:12px;background:linear-gradient(160deg,#15161A,#0A0A0D);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -28px rgba(0,0,0,.9);overflow:hidden;display:flex;flex-direction:column}
.ui-bar{flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:8px 10px;border-bottom:1px solid var(--line)}
.ui-bar i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22)}
.ui-tab{margin-left:8px;width:34%;height:7px;border-radius:4px;background:rgba(255,255,255,.1)}
.ui-body{flex:1;display:flex;min-height:0}
.ui-rail{flex:0 0 16%;border-right:1px solid var(--line);display:grid;align-content:start;gap:7px;padding:9px 7px}
.ui-rail i{height:5px;border-radius:3px;background:rgba(255,255,255,.12)}
.ui-rail i:first-child{background:rgba(255,255,255,.3)}
.ui-main{flex:1;padding:9px 10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ui-row{display:flex;align-items:center;gap:6px;padding:4px 5px;border-radius:5px;transition:background .3s}
.ui-row .rw{height:5px;border-radius:3px;background:rgba(255,255,255,.16)}
.ui-row .rw.w70{width:70%}.ui-row .rw.w55{width:55%}.ui-row .rw.w80{width:80%}
.ui-row .rb{margin-left:auto;width:14%;height:5px;border-radius:3px;background:rgba(255,255,255,.1)}
.ui-field{margin-top:3px;display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.ui-field .fl{width:26%;height:5px;border-radius:3px;background:rgba(255,255,255,.14)}
.ui-field .fv{width:16%;height:9px;border-radius:3px;background:linear-gradient(140deg,#fff,#9AA1AB);transform-origin:left;transition:transform .5s}
.ui-curve{margin-top:6px;width:100%;flex:1;min-height:0}
.ui-curve .grid{stroke:rgba(255,255,255,.07);stroke-width:1}
.ui-curve .line{fill:none;stroke:url(#chrome);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240}
.ui-ping{position:absolute;right:9px;bottom:9px;width:9px;height:9px;border-radius:50%;background:var(--signal);opacity:0;box-shadow:0 0 0 3px rgba(37,211,102,.18),0 0 14px rgba(37,211,102,.75)}
.scene-ads .cursor{position:absolute;width:13px;height:17px;left:52%;top:42%;fill:#fff;stroke:#000;stroke-width:.8;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));opacity:0}
/* a cena só roda quando o card está ativo */
.card.is-live .scene-ads .cursor{animation:cur 5s ease-in-out infinite}
.card.is-live .scene-ads .is-pick{animation:pick 5s ease-in-out infinite}
.card.is-live .scene-ads .fv{animation:grow 5s ease-in-out infinite}
.card.is-live .scene-ads .line{animation:draw 5s ease-in-out infinite}
.card.is-live .scene-ads .ui-ping{animation:ping 5s ease-in-out infinite}
@keyframes cur{0%{opacity:0;left:62%;top:58%}8%{opacity:1}22%{left:30%;top:41%}38%{left:30%;top:41%}52%{left:34%;top:63%}70%{left:34%;top:63%}88%{opacity:1}100%{opacity:0;left:62%;top:58%}}
@keyframes pick{0%,18%{background:transparent}26%,100%{background:rgba(255,255,255,.08)}}
@keyframes grow{0%,52%{transform:scaleX(1)}68%,100%{transform:scaleX(2.6)}}
@keyframes draw{0%,60%{stroke-dashoffset:240}92%,100%{stroke-dashoffset:0}}
@keyframes ping{0%,84%{opacity:0;transform:scale(.6)}92%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}

/* --- growth: funil com gargalo que abre --- */
.scene-funnel .fn{width:100%;display:grid;gap:clamp(10px,2vw,18px)}
.fn-step{position:relative;display:flex;align-items:center;gap:10px}
.fn-bar{height:clamp(20px,3.6vw,34px);border-radius:5px;background:linear-gradient(140deg,rgba(255,255,255,.34),rgba(255,255,255,.12));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.fn-bar.s1{width:92%}.fn-bar.s2{width:70%}.fn-bar.s3{width:26%}.fn-bar.s4{width:18%}
.fn-tag{font-size:clamp(10px,1.1vw,12px);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.fn-mark{position:absolute;left:27%;top:50%;width:clamp(16px,3vw,24px);height:2px;margin-left:6px;transform:translateY(-50%);background:rgba(255,255,255,.5);opacity:0}
.scene-funnel .lens{position:absolute;width:clamp(26px,5vw,38px);height:auto;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;opacity:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
.card.is-live .scene-funnel .lens{animation:lens 5s ease-in-out infinite}
.card.is-live .scene-funnel .s3{animation:open3 5s ease-in-out infinite}
.card.is-live .scene-funnel .s4{animation:open4 5s ease-in-out infinite}
.card.is-live .scene-funnel .fn-mark{animation:mark 5s ease-in-out infinite}
@keyframes lens{0%{opacity:0;left:62%;top:14%}12%{opacity:.9}30%{left:6%;top:56%}52%{left:6%;top:56%;opacity:.9}64%{opacity:0}100%{opacity:0;left:62%;top:14%}}
@keyframes mark{0%,28%{opacity:0}36%,56%{opacity:1}68%,100%{opacity:0}}
@keyframes open3{0%,56%{width:26%}78%,100%{width:62%}}
@keyframes open4{0%,62%{width:18%}84%,100%{width:46%}}
.card.is-live .icon-arc{opacity:0;transform:scale(.92)}
/* leque de heros reais no card de sites */
.card-stage-fan{display:grid;place-items:center;padding:clamp(16px,2.2vw,30px);background:radial-gradient(70% 60% at 50% 40%,#16161d,#000 70%)}
.fan{position:relative;width:100%;aspect-ratio:16/10;max-height:100%}
.fan-card{position:absolute;left:50%;top:50%;width:82%;height:auto;border-radius:9px;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -24px rgba(0,0,0,.9);transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .5s;will-change:transform}
.fan-l{transform:translate(-50%,-50%) translateX(-20%) rotate(-9deg) scale(.86);filter:brightness(.62) saturate(.85);z-index:1}
.fan-r{transform:translate(-50%,-50%) translateX(20%) rotate(9deg) scale(.86);filter:brightness(.62) saturate(.85);z-index:1}
.fan-c{transform:translate(-50%,-50%) translateY(3%);z-index:2}
.card:hover .fan-l{transform:translate(-50%,-50%) translateX(-32%) rotate(-14deg) scale(.88);filter:brightness(.78) saturate(.95)}
.card:hover .fan-r{transform:translate(-50%,-50%) translateX(32%) rotate(14deg) scale(.88);filter:brightness(.78) saturate(.95)}
.card:hover .fan-c{transform:translate(-50%,-50%) translateY(-2%) scale(1.04)}
.card-body{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.2vw,30px)}
.card h3{max-width:14ch}
.card .result{margin-top:14px;font-size:15px;line-height:1.5;color:var(--dim)}
.card ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.card li{display:flex;gap:12px;font-size:14.5px;line-height:1.5;color:var(--dim)}
.card li::before{content:"";flex:0 0 13px;height:13px;margin-top:5px;border-radius:4px;background:linear-gradient(140deg,#fff,#8E949E 50%,#2A2D33)}
.card-foot{margin-top:auto;padding-top:28px;display:grid;gap:12px;justify-items:start}
.card-foot .pill{padding:14px 22px;font-size:14px}
.card-more{font-size:14px;color:var(--dim);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.25)}
.card-more:hover{color:#fff}

/* ===================================================================
   PROVA — InsectControl. Fundo preto, KPIs visíveis, hover só realça.
   Exceção de cor autorizada: --ic-red / --ic-navy só aqui.
   =================================================================== */
.proof{position:relative;background:var(--ink);padding-block:var(--gap);margin-top:clamp(10px,1.2vw,16px);border-radius:36px 36px 0 0}
.proof-head{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:32px 56px;align-items:end;margin-bottom:56px}
.proof-head .t-label{display:block;margin-bottom:18px}
.proof-head h2{max-width:16ch}
.proof-side{display:grid;gap:22px;justify-items:start}
.proof-logo{width:clamp(180px,16vw,240px);height:auto}
.proof-side .t-sub{max-width:46ch}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.kpi{position:relative;padding:34px 28px 30px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.kpi:nth-child(4n){border-right:0}
.kpi:nth-last-child(-n+1){border-bottom:0}
.kpi-wide{grid-column:span 2;border-bottom:0}
.kpi:nth-child(n+5){border-bottom:0}
/* realce: véu marinho que sobe (1ª fileira) ou desce (2ª), barra vermelha que cresce */
.kpi::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,46,68,.55),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.kpi:nth-child(n+5)::before{background:linear-gradient(0deg,rgba(8,46,68,.55),transparent 70%)}
.kpi:hover::before,.kpi.is-on::before{opacity:1}
.kpi-label{position:relative;display:block;font-size:14px;line-height:1.3;color:var(--dim);padding-left:16px;transition:transform .35s cubic-bezier(.2,.8,.2,1),color .3s}
.kpi-label::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:14px;border-radius:2px;background:var(--line-strong);transition:height .35s cubic-bezier(.2,.8,.2,1),background .3s}
.kpi:hover .kpi-label,.kpi.is-on .kpi-label{transform:translateX(6px);color:#fff}
.kpi:hover .kpi-label::before,.kpi.is-on .kpi-label::before{height:26px;background:var(--ic-red)}
.kpi-value{position:relative;display:block;font-weight:500;font-size:clamp(36px,3vw,48px);white-space:nowrap;line-height:.95;letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums}
.kpi-long{font-size:clamp(28px,2.3vw,36px)}
.kpi-value .was{color:var(--faint);font-size:.62em;letter-spacing:-.03em}
.kpi-value i{font-style:normal;font-size:.5em;color:var(--faint);vertical-align:.2em;margin:0 .12em}
.kpi-value small{display:block;margin-top:10px;font-size:13px;font-weight:400;letter-spacing:0;color:var(--dim)}
.kpi-scores{display:flex;gap:14px;flex-wrap:wrap;white-space:normal;font-size:clamp(28px,2.2vw,34px)}
.kpi-scores span{display:grid;gap:6px}
.kpi-scores small{margin-top:0;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.kpi-list{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px}
/* a célula da IA cita a resposta real; a fonte fica junto para não virar afirmação solta */
.kpi-ai{gap:16px}
.kpi-quote{position:relative;display:block;font-size:13.5px;line-height:1.45;color:var(--dim);border-left:2px solid var(--line-strong);padding-left:12px}
.kpi-quote b{color:#fff;font-weight:600}
.kpi-quote em{display:block;margin-top:8px;font-style:normal;font-size:11.5px;line-height:1.35;color:var(--faint)}
.kpi-list li{display:flex;gap:12px;font-size:15px;line-height:1.45;color:#fff}
.kpi-list li::before{content:"";flex:0 0 13px;height:13px;margin-top:5px;border-radius:4px;background:var(--ic-red)}

/* ===================================================================
   EVOLUI × ENVELHECE
   =================================================================== */
.evolve{padding-top:clamp(40px,5vw,72px)}
.evolve-head{max-width:22ch;margin-bottom:28px}
.wipe-stage{height:100svh;min-height:600px;display:grid;align-items:center}
.wipe{position:relative;border-radius:26px;overflow:hidden;min-height:min(56svh,520px);background:#0B0B0E;display:grid}
.layer{grid-area:1/1;padding:clamp(28px,4vw,60px);display:grid;grid-template-columns:1fr 1fr;gap:40px;align-content:start;position:relative}
.layer h3{grid-column:1/-1;max-width:20ch}
.layer ul{list-style:none;margin:0;padding:0;display:grid;gap:16px;align-content:start}
.layer li{display:flex;gap:12px;font-size:16px;line-height:1.45}
.layer-old{background:#0B0B0E;color:var(--faint)}
.layer-old h3{color:var(--faint)}
.layer-old li::before{content:"";flex:0 0 14px;height:14px;margin-top:5px;border-radius:4px;background:rgba(255,255,255,.12)}
.layer-new{background:var(--plate);color:var(--plate-ink);clip-path:inset(0 100% 0 0);will-change:clip-path;z-index:2}
.layer-new::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 3px),linear-gradient(180deg,#F1F2F5,#D8DBE1);pointer-events:none}
.layer-new>*{position:relative}
.layer-new li{color:var(--plate-ink)}
.layer-new li::before{content:"";flex:0 0 14px;height:14px;margin-top:5px;border-radius:4px;background:#111}
.layer-new .note{grid-column:1/-1;margin-top:auto;font-size:13px;color:var(--plate-dim)}
.wipe-line{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--signal);box-shadow:0 0 22px rgba(37,211,102,.8);z-index:3;will-change:transform}
.wipe-hint{margin-top:18px;font-size:13px;color:var(--faint)}

/* ===================================================================
   PROCESSO — horizontal
   =================================================================== */
.process{padding-top:var(--gap)}
.process-head{display:grid;gap:14px;justify-items:start;flex:0 0 auto}
.process-head .t-sub{max-width:48ch}
/* o cabeçalho entra no bloco pinado: ele fica em cena durante o scroll lateral */
.process-stage{height:100svh;min-height:580px;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4vh,48px);overflow:hidden}
.track{display:flex;gap:20px;will-change:transform;padding-inline:var(--gutter)}
.step{flex:0 0 min(62vw,700px);min-height:min(62svh,540px);border-radius:26px;background:#0F1013;padding:clamp(28px,3.2vw,52px);display:flex;flex-direction:column;position:relative;overflow:hidden}
.step .n{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.step .big{position:absolute;right:-6px;top:-18px;font-size:clamp(120px,16vw,260px);line-height:1;letter-spacing:-.06em;font-weight:500;opacity:.9}
.step h3{margin-top:auto;max-width:12ch;position:relative}
.step p{margin-top:16px;max-width:34ch;position:relative}
.step.plate{background:var(--plate);color:var(--plate-ink)}
.step.plate .n,.step.plate p{color:var(--plate-dim)}
.track-dots{display:none}

/* ===================================================================
   FAQ
   =================================================================== */
.faq{padding-top:var(--gap)}
.faq-list{margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:28px 0;font-size:clamp(20px,2.4vw,34px);line-height:1.15;letter-spacing:-.02em;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#fff}
.faq summary span{font-size:13px;color:var(--faint);white-space:nowrap}
.faq details[open] summary span::after{content:"Fechar"}
.faq details:not([open]) summary span::after{content:"Ler mais"}
.faq .ans{padding:0 0 32px;max-width:64ch;color:var(--dim);font-size:16px;line-height:1.55}

/* ===================================================================
   FINAL — o símbolo volta atrás do título
   =================================================================== */
.final{position:relative;margin-top:var(--gap);background:#000;overflow:hidden;border-radius:36px 36px 0 0;border-top:1px solid var(--line-strong);min-height:100svh;display:grid;align-items:center;padding-block:120px}
/* CTA claro: mesma placa do bloco de antecipação; a estrela vira marca acima do título */
.final-light{background:var(--plate);color:var(--plate-ink);border-top:0;min-height:0;padding-block:clamp(120px,17vh,200px) clamp(90px,12vh,150px)}
.final-light::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 3px),linear-gradient(180deg,#F4F5F8,#D9DCE3);opacity:.9;pointer-events:none}
.final-light::after{content:"";position:absolute;inset:0;background:radial-gradient(52% 44% at 50% 34%,rgba(255,255,255,.85),transparent 72%);pointer-events:none}
.final-light .t-display{font-size:clamp(50px,8.2vw,132px);letter-spacing:-.045em;color:var(--plate-ink);max-width:14ch}
.final-light .t-sub{color:var(--plate-dim);margin-top:30px}
.final-light .final-support{color:var(--plate-dim)}
.final .hero-glow{top:50%}
.orb-final{position:relative;width:clamp(190px,25vw,330px);aspect-ratio:1;margin-bottom:clamp(-18px,-1.2vw,-6px);pointer-events:none;opacity:0}
.orb-final canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.final-in{position:relative;z-index:3;display:grid;justify-items:center;text-align:center}
.final h2{max-width:12ch}
.final .t-sub{margin-top:26px;max-width:40ch}
.final .hero-cta{margin-top:36px;justify-content:center}
.final-support{margin-top:22px;font-size:13px;color:var(--faint)}

footer{background:#000;color:var(--faint);padding:40px 0 34px;font-size:13px}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 28px;align-items:center;border-top:1px solid var(--line);padding-top:28px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:#fff}

/* ===================================================================
   RESPONSIVO — os 4 pins rodam também no celular; aqui só cabe layout
   =================================================================== */
@media (min-width:901px){.hero h1 .line{white-space:nowrap}}
@media (max-height:760px) and (min-width:901px){.hero-in{padding-top:calc(var(--nav-h) + 14px + 28px);gap:16px}.t-giant{font-size:clamp(40px,5.6vw,84px)}}
@media (max-width:1100px){
  .cards{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi:nth-child(4n){border-right:1px solid var(--line)}
  .kpi:nth-child(2n){border-right:0}
  .kpi:nth-child(5),.kpi:nth-child(6){border-bottom:1px solid var(--line)}
  .kpi-wide{grid-column:1/-1;border-bottom:0}
  .kpi:nth-child(n+5)::before{background:linear-gradient(180deg,rgba(8,46,68,.55),transparent 70%)}
  .kpi:nth-child(n+3)::before{background:linear-gradient(0deg,rgba(8,46,68,.55),transparent 70%)}
}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-in{grid-template-columns:1fr auto;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  /* performance: sem grão e sem blur de 30px em elemento de 130vmax */
  .grain{display:none}
  .hero-glow{filter:none}
  .ping{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,14,17,.92)}
  .hero{min-height:640px}
  .hero-in{padding-top:calc(var(--nav-h) + 14px + 34px);gap:18px}
  .hero-eyebrow{max-width:26ch;line-height:1.5}
  .hero .t-sub{font-size:16px;max-width:38ch}
  .ping{max-width:210px;font-size:13px}
  .ping-1{left:auto;right:5%;top:71%}
  .marquee{padding:18px 0}
  .sheet{border-radius:24px 24px 0 0}
  /* problema (pinado): frases menores para caber 4 linhas + legenda */
  .problem-stage{min-height:600px}
  .problem-meta{gap:12px;margin-bottom:28px}
  .problem-meta .t-label:last-child{display:none}
  .problem-rail{width:120px}
  .problem-title{margin-bottom:20px;font-size:clamp(20px,5.6vw,24px)}
  .quote .q{max-width:none;font-size:clamp(30px,8.4vw,40px)}
  .quote p.t-cap{margin-top:18px}
  /* funil (pinado): coluna única, cópia em cima do visual */
  .act-funnel{border-radius:24px;margin-inline:8px}
  .funnel-stage{min-height:620px}
  .funnel-in{grid-template-columns:1fr;gap:22px;align-content:center}
  .funnel-copy{min-height:210px}
  .stage-copy .t-label{margin-bottom:12px}
  .stage-copy h2{font-size:clamp(34px,9.5vw,44px)}
  .stage-copy p{margin-top:12px;font-size:15px;max-width:none}
  .funnel-visual{max-height:44svh;aspect-ratio:5/4;width:100%}
  .msg{max-width:200px;font-size:12.5px}
  /* hero claro: a estrela vive embaixo, o texto em cima */
  .hero-light .grain{display:none}
  /* serviços */
  .services{border-radius:24px;margin-inline:8px}
  .card-stage-fan{padding:14px}
  .fan-card{width:82%;border-radius:7px}
  .fan-l{transform:translate(-50%,-50%) translateX(-18%) rotate(-8deg) scale(.9)}
  .fan-r{transform:translate(-50%,-50%) translateX(18%) rotate(8deg) scale(.9)}
  .services-head{margin-bottom:36px}
  .cards{grid-template-columns:1fr}
  .cards .card-sites{grid-template-columns:1fr}
  .fan-card{width:80%}
  .card-sites .card-stage{aspect-ratio:16/10;min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .modes{grid-template-columns:1fr}
  .card-foot{justify-items:stretch}
  .card-foot .pill{justify-content:center}
  .card-more{text-align:center}
  /* prova */
  .proof{border-radius:24px 24px 0 0}
  .proof-head{grid-template-columns:1fr;gap:24px}
  .proof-logo{width:180px}
  .kpis{grid-template-columns:1fr;border-radius:18px}
  .kpi{border-right:0!important;border-bottom:1px solid var(--line)!important;min-height:0;padding:24px 22px;gap:18px}
  .kpi:last-child{border-bottom:0!important}
  .kpi::before{background:linear-gradient(180deg,rgba(8,46,68,.55),transparent 70%)!important}
  .kpi-list{grid-template-columns:1fr}
  /* evolui × envelhece (pinado): título + placa cabem em 100svh */
  .evolve-head{margin-bottom:20px}
  .wipe-stage{min-height:0}
  .wipe{min-height:0}
  .layer{grid-template-columns:1fr;gap:18px;padding:22px}
  .layer li{font-size:14.5px}
  .layer ul{gap:10px}
  .wipe-hint{display:none}
  /* processo (pinado, horizontal) */
  .process-stage{min-height:560px;gap:20px}
  .track{gap:12px}
  .step{flex:0 0 min(82vw,420px);min-height:min(56svh,460px);padding-top:64px}
  .step .big{font-size:120px;top:-10px;right:0}
  .faq summary{grid-template-columns:1fr;gap:8px}
  .final{border-radius:24px 24px 0 0;min-height:0;padding-block:140px 110px}
  .final-light .t-display{font-size:clamp(44px,12vw,58px)}
  .orb-final{width:clamp(150px,44vw,200px);margin-bottom:-10px}
}
@media (max-width:480px){.pill{width:100%;justify-content:center}.nav-cta .pill{width:auto}.hero-cta{width:100%}.kpi-scores{gap:14px}}
@media (prefers-reduced-motion:reduce){
  .chrome-live{animation:none}
  .icon-arc i{animation:none}
  .scene{opacity:1;transform:none}        /* cena parada no estado final */
  .card-stage .icon-arc{display:none}
  .scene *{animation:none!important}
  .scene-ads .line{stroke-dashoffset:0}
  .scene-ads .ui-ping{opacity:1}
  .scene-ads .is-pick{background:rgba(255,255,255,.08)}
  .scene-ads .cursor{display:none}
  .scene-funnel .s3{width:62%}
  .scene-funnel .s4{width:46%}
  .scene-funnel .lens{display:none}
  .fan-card{transition:none}
  .card:hover .fan-l{transform:translate(-50%,-50%) translateX(-20%) rotate(-9deg) scale(.86)}
  .card:hover .fan-r{transform:translate(-50%,-50%) translateX(20%) rotate(9deg) scale(.86)}
  .card:hover .fan-c{transform:translate(-50%,-50%) translateY(3%)}
  .layer-new{clip-path:none}
  .wipe-line,.wipe-hint{display:none}
  .orb{position:absolute;height:100svh;inset:0 0 auto 0}
  .hero{position:relative}            /* sem sticky: hero e símbolo rolam juntos */
  .problem-stage{height:auto;min-height:0;padding-block:var(--gap) 48px}
  .problem-meta{display:none}
  .quote,.stage-copy{position:relative!important;opacity:1!important;transform:none!important}
  .quotes{display:grid;gap:40px}
  .funnel-stage{height:auto;min-height:0;padding-block:64px}
  .funnel-copy{display:grid;gap:32px;min-height:0}
  .page,.msg,.dot{opacity:1!important;transform:none!important}
  .page{transform:translate(-50%,-50%)!important}
  .wipe-stage{height:auto;min-height:0}
  /* sem pin, o processo vira carrossel rolável */
  .process-stage{height:auto;min-height:0;overflow:visible;display:block}
  .process-head{margin-bottom:32px}
  .track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .track::-webkit-scrollbar{display:none}
  .step{scroll-snap-align:center}
  .track-dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
  .track-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
  .track-dots i.on{background:#fff;transform:scale(1.5)}
}

/* ===================================================================
   PÁGINAS DE TEXTO (privacidade, termos)
   =================================================================== */
.doc-page{background:var(--graphite)}
.doc{max-width:74ch;padding-block:calc(var(--nav-h) + 14px + clamp(56px,10vh,110px)) clamp(64px,10vh,120px)}
.doc-back{margin-bottom:36px}
.doc-back a{color:var(--faint);text-decoration:none;transition:color .2s}
.doc-back a:hover{color:#fff}
.doc h1{margin-bottom:10px}
.doc-date{font-size:13px;color:var(--faint);margin-bottom:48px}
.doc h2{font-size:clamp(20px,2.2vw,26px);line-height:1.2;letter-spacing:-.02em;font-weight:500;margin:44px 0 14px;color:#fff}
.doc p{font-size:16.5px;line-height:1.65;color:var(--dim);margin-bottom:16px}
.doc strong{color:#fff;font-weight:600}
.doc a{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.35)}
.doc a:hover{text-decoration-color:#fff}
.doc ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:11px}
/* nada de flex aqui: ele separaria <strong> do resto e abriria vão antes da vírgula */
.doc li{position:relative;padding-left:24px;font-size:16.5px;line-height:1.6;color:var(--dim)}
.doc li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:12px;border-radius:3px;background:linear-gradient(140deg,#fff,#8E949E 50%,#2A2D33)}
.doc-page footer{background:#000}
@media (max-width:900px){
  .doc{padding-block:calc(var(--nav-h) + 14px + 48px) 72px}
  .doc p,.doc li{font-size:16px}
}

/* ===================================================================
   GAVETA DE CONTATO — só existe na versão .com (en/index.html)
   =================================================================== */
[hidden]{display:none!important}   /* as regras da gaveta usam display:grid e venciam o hidden do navegador */
.scrim{position:fixed;inset:0;z-index:200;background:rgba(6,6,9,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .35s}
.scrim.is-on{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:201;width:min(100%,430px);
  background:linear-gradient(170deg,#16171B,#0A0A0D);border-left:1px solid var(--line-strong);
  box-shadow:-40px 0 90px -40px rgba(0,0,0,.95);
  padding:clamp(24px,4vw,34px) clamp(22px,3.4vw,32px) calc(clamp(24px,4vw,34px) + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:18px;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);visibility:hidden;transition:transform .42s cubic-bezier(.2,.8,.2,1),visibility .42s}
.drawer.is-on{transform:none;visibility:visible}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-top:calc(env(safe-area-inset-top,0px))}
.drawer-x{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--dim);cursor:pointer;transition:color .2s,border-color .2s}
.drawer-x:hover{color:#fff;border-color:var(--line-strong)}
.drawer-x svg{width:18px;height:18px}
.drawer-sub{font-size:15px;line-height:1.5;color:var(--dim);margin-top:-6px}

.drawer-opts{display:grid;gap:12px;margin-top:6px}
.drawer-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;text-decoration:none;cursor:pointer;
  padding:18px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);
  transition:border-color .25s,background .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.drawer-opt:hover{border-color:var(--line-strong);background:rgba(255,255,255,.06);transform:translateY(-2px)}
.opt-ic{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(160deg,#1E2025,#0B0B0E);border:1px solid rgba(255,255,255,.12);color:#fff}
.opt-ic svg{width:21px;height:21px}
.opt-txt{flex:1;min-width:0;display:grid;gap:3px}
.opt-txt b{font-weight:600;font-size:16px;letter-spacing:-.015em;color:#fff}
.opt-txt small{font-size:13px;line-height:1.4;color:var(--dim)}
.opt-go{flex:0 0 auto;width:15px;height:15px;color:var(--faint);transition:transform .25s cubic-bezier(.2,.8,.2,1),color .25s}
.drawer-opt:hover .opt-go{transform:translateX(3px);color:#fff}

.drawer-form{display:grid;gap:15px;margin-top:6px}
.fld{display:grid;gap:7px}
.fld span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500}
.fld input,.fld textarea{width:100%;font:inherit;font-size:15px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:13px;padding:13px 14px;transition:border-color .2s,background .2s;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.3)}
.fld input:focus,.fld textarea:focus{outline:none;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.07)}
.fld input[aria-invalid="true"]{border-color:#E4555F}
.hp,.hp *{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.drawer-send{justify-content:center;width:100%}
.drawer-send[disabled]{opacity:.6;pointer-events:none}
.drawer-note{font-size:13.5px;line-height:1.45;color:var(--dim);min-height:1.2em}
.drawer-note.is-bad{color:#F08A91}
.drawer-note.is-good{color:var(--signal)}
.drawer-back{align-self:start;background:none;border:0;padding:4px 0;font-size:13px;color:var(--faint);cursor:pointer;transition:color .2s}
.drawer-back:hover{color:#fff}

body.drawer-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .drawer{transition:none}
  .scrim{transition:none}
  .drawer-opt:hover{transform:none}
}