:root{
    --ground:#f5f5f7; --surface:#ffffff; --surface-2:#fbfbfd; --inset:#f1f1f4;
    --text:#1d1d1f; --dim:#6e6e73; --mute:#8a8a8f;
    --line:#e3e3e8; --line-2:#d0d0d7;
    --lime:#a6e000; --lime-deep:#7fa800; --ink:#1d1d1f;
    --red:#e5484d; --green:#1a9d4b;
    --shadow-s:0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.04);
    --shadow-m:0 2px 6px rgba(0,0,0,.06), 0 18px 48px rgba(0,0,0,.07);
    --r:16px; --r-lg:22px;
    --max:1120px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; overflow-x:hidden}
  body{
    margin:0; background:var(--ground); color:var(--text);
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
    /* Rodape sempre no fim da janela: em pagina curta ele nao sobe para o meio
       da tela deixando um vazio embaixo. O <main> cresce e empurra. */
    min-height:100vh; display:flex; flex-direction:column;
  }
  body > main{flex:1 0 auto}
  body > footer{flex-shrink:0; margin-top:auto}
  h1,h2,h3{margin:0; letter-spacing:-.028em; text-wrap:balance; font-weight:700; line-height:1.12}
  h1{font-size:clamp(38px,5.6vw,62px)}
  h2{font-size:clamp(28px,3.6vw,40px)}
  h3{font-size:19px; letter-spacing:-.02em}
  p{margin:0}
  a{color:inherit; text-decoration:none}
  img{max-width:100%; display:block}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
  .eyebrow{
    font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
    color:var(--lime-deep);
  }
  .lead{color:var(--dim); font-size:clamp(17px,1.9vw,20px); max-width:62ch}

  /* selo de suporte 24/7 — diferencial do hero */
  .plantao{
    display:inline-flex; align-items:center; gap:9px; margin-top:20px;
    padding:9px 15px 9px 12px; border:1px solid var(--line); border-radius:999px;
    background:var(--surface); font-size:13.5px; color:var(--text);
  }
  .plantao b{font-weight:650}
  .plantao .pulse{
    position:relative; width:8px; height:8px; border-radius:50%;
    background:var(--lime); flex:none;
  }
  .plantao .pulse::after{
    content:''; position:absolute; inset:-5px; border-radius:50%;
    border:1px solid var(--lime); opacity:.55; animation:plantaoPulse 2.4s ease-out infinite;
  }
  @keyframes plantaoPulse{
    0%{transform:scale(.6); opacity:.6}
    70%{transform:scale(1.35); opacity:0}
    100%{opacity:0}
  }
  @media (prefers-reduced-motion:reduce){ .plantao .pulse::after{animation:none; opacity:.35} }

  /* marca */
  .brand{display:inline-flex; align-items:flex-end; font-size:26px; letter-spacing:-.038em; line-height:1}
  .brand .mv{font-weight:700; color:var(--text)}
  .brand .loc{font-weight:500; color:var(--dim)}
  .brand .dot{width:7px; height:7px; border-radius:50%; background:var(--lime); margin-left:5px; margin-bottom:5px}

  /* nav */
  header{position:sticky; top:0; z-index:50; background:rgba(245,245,247,.82); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line)}
  .nav{display:flex; align-items:center; gap:18px; height:62px}
  .nav nav{display:flex; gap:18px; margin-left:auto; font-size:14.5px; color:var(--dim); font-weight:500}
  .nav nav a{white-space:nowrap}
  .nav nav a:hover{color:var(--text)}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    border-radius:11px; padding:11px 20px; font-size:14.5px; font-weight:600;
    border:1px solid transparent; cursor:pointer; transition:.16s ease; white-space:nowrap;
  }
  .btn-lime{background:var(--lime); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06)}
  .btn-lime:hover{background:#b4ee1a; transform:translateY(-1px)}
  .btn-dark{background:var(--text); color:#fff}
  .btn-dark:hover{background:#000; transform:translateY(-1px)}
  .btn-ghost{border-color:var(--line-2); color:var(--text); background:var(--surface)}
  .btn-ghost:hover{border-color:var(--mute)}
  .btn-lg{padding:15px 28px; font-size:16px; border-radius:13px}

  /* hero */
  .hero{padding:76px 0 24px}
  .hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center}
  .hero h1 span{color:var(--lime-deep)}
  .hero .lead{margin-top:20px}
  .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
  .micro{margin-top:16px; font-size:13.5px; color:var(--mute)}

  /* mockup do celular bloqueado */
  .phone-stage{display:flex; justify-content:center; align-items:center; padding:8px}
  .hero-block{width:min(320px,80vw); height:auto}
  .two-ph{display:flex; gap:16px; justify-content:center; align-items:center}
  .app-grid .two-ph .device{width:min(168px,42vw); margin:0}
  .device{
    width:min(300px,72vw); aspect-ratio:760/1651; padding:9px; flex:none;
    background:#0a0a0c; border-radius:46px;
    box-shadow:0 2px 6px rgba(0,0,0,.12), 0 30px 64px rgba(0,0,0,.26), inset 0 0 0 2px #26272b;
  }
  .device img{width:100%; height:100%; object-fit:cover; border-radius:37px; display:block; background:#111}

  /* seção do app */
  .app-sec{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .app-grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:60px; align-items:center}
  .app-grid .device{margin:0 auto}

  /* tela de bloqueio (mockup) */
  .lockscreen{
    width:100%; height:100%; border-radius:37px; overflow:hidden; position:relative;
    background:
      radial-gradient(115% 70% at 50% -8%, #262a30 0%, rgba(38,42,48,0) 58%),
      linear-gradient(180deg,#141518 0%,#0d0e11 58%,#0a0a0c 100%);
    color:#fff; display:flex; flex-direction:column; align-items:center;
    padding:20px 18px 24px; text-align:center;
    font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  }
  .ls-status{position:absolute; top:13px; left:20px; right:20px; display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:600}
  .ls-status .r{display:flex; gap:5px; align-items:center}
  .ls-status svg{width:16px; height:12px; opacity:.92}
  .ls-clock{margin-top:34px}
  .ls-date{font-size:12.5px; color:#c9cbcf}
  .ls-time{font-size:60px; font-weight:250; letter-spacing:-2px; line-height:1; margin-top:1px}
  .ls-lock{margin-top:auto; margin-bottom:11px; width:34px; height:34px; border-radius:11px; background:rgba(230,180,0,.14); display:grid; place-items:center}
  .ls-lock svg{width:17px; height:17px; color:#f0c020}
  .ls-msg{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:14px 14px 13px}
  .ls-title{font-size:14.5px; font-weight:700; margin-bottom:5px}
  .ls-msg p{font-size:11.3px; line-height:1.5; color:#cfd1d5}
  .ls-store{margin-top:9px; font-size:11.5px; font-weight:700; color:var(--lime)}
  .ls-brand{margin-top:13px; font-size:12px; font-weight:600; color:#83868b; letter-spacing:-.02em}
  .ls-brand b{color:#fff}
  .ls-brand i{display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--lime); margin-left:3px; vertical-align:1px; font-style:normal}

  /* faixa de provas */
  .strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); margin-top:48px}
  .strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding-top:30px; padding-bottom:30px}
  .stat{padding-left:34px; border-left:1px solid var(--line)}
  .stat:first-child{padding-left:0; border-left:0}
  .stat b{display:block; font-size:26px; font-weight:700; letter-spacing:-.03em}
  .stat span{font-size:13.5px; color:var(--dim)}

  /* seções */
  section{padding:86px 0; scroll-margin-top:74px}
  #topo{scroll-margin-top:74px}
  .strip{scroll-margin-top:74px}
  .sec-head{max-width:64ch; margin-bottom:46px}
  .sec-head h2{margin-top:12px}
  .sec-head p{margin-top:16px}

  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:28px; box-shadow:var(--shadow-s);
  }
  .card h3{margin-bottom:9px}
  .card p{color:var(--dim); font-size:15px}
  .ico{
    width:40px; height:40px; border-radius:11px; background:var(--inset);
    display:grid; place-items:center; margin-bottom:18px; color:var(--lime-deep);
  }
  .ico svg{width:20px; height:20px}

  /* pagamento */
  .pay{background:var(--text); color:#fff}
  .pay .eyebrow{color:var(--lime)}
  .pay .lead{color:#a8adb4}
  .pay-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
  .flow{display:flex; flex-direction:column; gap:1px; background:rgba(255,255,255,.1); border-radius:var(--r-lg); overflow:hidden; border:1px solid rgba(255,255,255,.1)}
  .flow div{background:#232529; padding:19px 22px; display:flex; align-items:center; gap:15px; font-size:15px}
  .flow .n{
    width:26px; height:26px; border-radius:8px; background:var(--lime); color:var(--ink);
    display:grid; place-items:center; font-size:12.5px; font-weight:700; flex:none;
  }
  .flow .last{background:#2a2d31}
  .flow b{font-weight:600}
  .flow small{display:block; color:#9aa0a7; font-size:13px; font-weight:400; margin-top:2px}

  /* passos */
  .steps{counter-reset:s; display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; position:relative}
  .step::before{
    counter-increment:s; content:counter(s);
    display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
    background:var(--text); color:#fff; font-size:13.5px; font-weight:700; margin-bottom:16px;
  }
  .step h3{margin-bottom:8px}
  .step p{color:var(--dim); font-size:15px}

  /* segurança */
  .security-box{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:44px; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; box-shadow:var(--shadow-s);
  }
  .checks{display:flex; flex-direction:column; gap:14px; margin-top:8px}
  .check{display:flex; gap:12px; align-items:flex-start; font-size:15.5px}
  .check svg{width:19px; height:19px; flex:none; margin-top:2px; color:var(--lime-deep)}
  .check span{color:var(--dim)}
  .check b{color:var(--text); font-weight:600}

  /* supervisão / serialização */
  .vias{display:grid; grid-template-columns:1fr 1fr; gap:20px}
  .via{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:30px; display:flex; flex-direction:column; gap:14px;
  }
  .via-top{display:flex; align-items:center; gap:12px}
  .via-ic{
    display:grid; place-items:center; width:38px; height:38px; border-radius:11px; flex:none;
    background:var(--text); color:#fff;
  }
  .via-ic svg{width:20px; height:20px}
  .via h3{font-size:19px}
  .via .tag{
    font-size:12px; font-weight:700; letter-spacing:.02em; padding:5px 10px; border-radius:99px;
    background:rgba(166,224,0,.16); color:var(--lime-deep); align-self:flex-start;
  }
  .via p{color:var(--dim); font-size:15px}
  .via ul{list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:2px}
  .via li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--dim)}
  .via li svg{width:17px; height:17px; flex:none; margin-top:2px; color:var(--lime-deep)}

  /* cadastro */
  .signup{background:var(--surface); border-top:1px solid var(--line)}
  .form-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:start}
  form{display:grid; gap:14px}
  .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  label{display:block; font-size:13.5px; font-weight:500; color:var(--dim); margin-bottom:6px}
  input, textarea{
    width:100%; padding:13px 15px; font:inherit; font-size:15.5px; color:var(--text);
    background:var(--surface-2); border:1px solid var(--line-2); border-radius:11px; outline:none; transition:.15s;
  }
  input:focus, textarea:focus{border-color:var(--lime-deep); background:#fff; box-shadow:0 0 0 3px rgba(166,224,0,.18)}
  .contact{display:flex; flex-direction:column; gap:12px; margin-top:26px}
  .contact a{
    display:flex; gap:13px; align-items:center; padding:15px 18px; background:var(--surface-2);
    border:1px solid var(--line); border-radius:13px; font-size:15px; transition:.15s;
  }
  .contact a:hover{border-color:var(--line-2); background:#fff}
  .contact svg{width:19px; height:19px; color:var(--dim); flex:none}
  .contact small{display:block; color:var(--mute); font-size:12.5px; margin-top:1px}

  /* rodapé */
  footer{background:var(--ground); border-top:1px solid var(--line); padding:52px 0 40px}
  .foot{display:flex; justify-content:space-between; gap:34px; flex-wrap:wrap; align-items:flex-start}
  .foot-links{display:flex; gap:26px; font-size:14px; color:var(--dim); flex-wrap:wrap}
  .foot-links a:hover{color:var(--text)}
  /* redes sociais — botões de ícone, mesmo traço dos ícones das seções */
  .foot-social{display:flex; gap:10px; margin-top:18px}
  .foot-social a{
    width:40px; height:40px; border-radius:11px;
    border:1px solid var(--line); background:var(--surface);
    display:grid; place-items:center; color:var(--dim); transition:.16s ease;
  }
  .foot-social a:hover{color:var(--ink); border-color:var(--lime-deep); transform:translateY(-1px)}
  .foot-social svg{width:19px; height:19px}
  .legal{margin-top:30px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--mute); line-height:1.7}

  /* ── Banner rotativo do topo ──────────────────────────────────────────────
     Entra entre o cabeçalho e o hero. Fundo escuro para destacar do corpo claro
     da página, no mesmo desenho das artes de divulgação. O texto é texto de
     verdade (reflui no celular e o Google lê) — não é imagem com letra dentro. */
  .hb{position:relative; background:#0b0c0e; overflow:hidden; isolation:isolate}
  .hb::before{
    content:''; position:absolute; z-index:0; width:900px; height:900px; border-radius:50%;
    right:-260px; top:-420px;
    background:radial-gradient(circle, rgba(196,242,77,.16) 0%, rgba(196,242,77,.05) 42%, transparent 68%);
  }
  .hb-viewport{position:relative; z-index:1; height:430px}
  .hb-slide{
    position:absolute; inset:0; opacity:0; visibility:hidden;
    transition:opacity .55s ease, visibility .55s;
  }
  .hb-slide[data-on]{opacity:1; visibility:visible}
  .hb-in{
    max-width:var(--max); margin:0 auto; padding:0 24px; height:100%;
    display:flex; align-items:center; gap:28px;
  }
  .hb-txt{flex:1; min-width:0; color:#f3f4f5}
  .hb-eyebrow{
    font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--lime); margin-bottom:12px;
  }
  .hb-txt h2{
    font-size:clamp(26px,3.5vw,44px); font-weight:800; letter-spacing:-.032em;
    line-height:1.06; color:#fff;
  }
  .hb-txt h2 b{color:var(--lime); font-weight:800}
  .hb-txt p{margin-top:14px; font-size:clamp(14.5px,1.5vw,18px); color:#9aa0a6; max-width:46ch}
  .hb-cta{
    display:inline-flex; align-items:center; gap:9px; margin-top:22px;
    background:var(--lime); color:var(--ink); font-weight:700; font-size:15px;
    padding:12px 22px; border-radius:999px; transition:.16s ease;
  }
  .hb-cta:hover{background:#d4ff5e; transform:translateY(-1px)}
  /* A caixa é mais alta que o banner de propósito: o aparelho sangra pela borda de baixo,
     como nas artes. object-fit:contain normaliza — sem ele o item de grid usa o tamanho
     natural da imagem como mínimo e cada slide cortaria de um jeito diferente. */
  .hb-img{flex:none; width:340px; height:500px; margin-top:64px; position:relative}
  .hb-img::before{
    content:''; position:absolute; z-index:-1; width:78%; height:60%; border-radius:50%;
    background:radial-gradient(ellipse, rgba(196,242,77,.20), transparent 70%); filter:blur(34px);
  }
  .hb-img img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 26px 44px rgba(0,0,0,.7))}
  /* controles */
  .hb-dots{
    position:absolute; z-index:2; left:0; right:0; bottom:18px;
    display:flex; justify-content:center; gap:9px;
  }
  .hb-dots button{
    width:26px; height:4px; border-radius:99px; border:0; padding:0; cursor:pointer;
    background:rgba(255,255,255,.24); transition:.2s ease;
  }
  .hb-dots button[aria-current='true']{background:var(--lime); width:38px}
  .hb-arrow{
    position:absolute; z-index:2; top:50%; transform:translateY(-50%);
    width:42px; height:42px; border-radius:50%; cursor:pointer;
    border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#f3f4f5;
    display:grid; place-items:center; transition:.16s ease;
  }
  .hb-arrow:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3)}
  .hb-prev{left:14px} .hb-next{right:14px}
  @media (max-width:1180px){ .hb-arrow{display:none} }
  @media (max-width:900px){
    .hb-viewport{height:360px}
    .hb-img{width:240px; height:400px; margin-top:52px}
  }
  /* No celular a composição vira coluna: o aparelho INTEIRO em cima e o texto embaixo.
     Lado a lado, numa tela de 390 px, o aparelho ficava maior que a faixa e saía cortado
     em cima, embaixo e na direita — parecia imagem quebrada. */
  @media (max-width:620px){
    .hb-viewport{height:428px}
    .hb-in{flex-direction:column; justify-content:center; gap:14px; text-align:center; padding:20px 24px 34px}
    .hb-txt{max-width:none; width:100%}
    .hb-txt p{display:none}
    .hb-txt h2{margin-left:auto; margin-right:auto}
    .hb-eyebrow{margin-bottom:8px}
    .hb-cta{margin-top:18px}
    .hb-img{
      order:-1;                 /* aparelho primeiro, botão perto do polegar */
      width:150px; height:186px; margin:0 auto;
    }
    .hb-img::before{width:70%; height:52%}
    .hb-dots{bottom:12px}
  }
  @media (max-width:380px){
    .hb-viewport{height:404px}
    .hb-img{width:132px; height:164px}
  }
  @media (prefers-reduced-motion:reduce){ .hb-slide{transition:none} }

  /* preços */
  .pricing{max-width:540px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-m); overflow:hidden}
  .pricing-head{padding:28px 32px 26px; text-align:center; border-bottom:1px solid var(--line); background:var(--surface-2)}
  .badge{display:inline-flex; align-items:center; gap:7px; background:var(--lime); color:var(--ink); font-weight:700; font-size:13.5px; padding:8px 16px; border-radius:999px; letter-spacing:.01em}
  .badge svg{width:15px; height:15px}
  .pricing-head p{margin-top:12px; color:var(--dim); font-size:14.5px}
  .price-rows{padding:6px 32px}
  .price-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; border-bottom:1px solid var(--line)}
  .price-row:last-child{border-bottom:0}
  .price-row .lbl b{display:block; font-weight:600; font-size:16px}
  .price-row .lbl small{color:var(--mute); font-size:12.5px}
  .price-row .val{font-weight:700; font-size:22px; letter-spacing:-.02em; white-space:nowrap; text-align:right}
  .price-row .val small{font-weight:500; font-size:13px; color:var(--mute)}
  .promo{margin:4px 32px 0; background:rgba(166,224,0,.13); border:1px solid rgba(127,168,0,.35); border-radius:14px; padding:14px 16px; display:flex; gap:11px; align-items:center; font-size:14.5px; color:var(--text)}
  .promo svg{width:20px; height:20px; color:var(--lime-deep); flex:none}
  .pricing-foot{padding:22px 32px 30px}
  .pricing-foot .btn{width:100%}
  .pricing-note{text-align:center; margin-top:14px; font-size:13px; color:var(--mute)}
  /* linha destacada "1ª licença grátis" */
  .price-row.free{background:linear-gradient(90deg, rgba(166,224,0,.14), rgba(166,224,0,0)); margin:0 -32px; padding-left:32px; padding-right:32px; border-bottom:1px solid var(--line)}
  .price-row.free .lbl b{display:flex; align-items:center; gap:8px}
  .price-row.free .lbl small{display:block; margin-top:3px}
  .tag-free{background:var(--lime); color:var(--ink); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:6px}
  .price-row.free .val{color:var(--lime-deep)}
  .price-row .was{color:var(--mute); font-weight:500; font-size:15px; text-decoration:line-through; margin-right:8px}

  /* popup da promoção (abre ao entrar no site) */
  .promo-pop{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(16,17,19,.55); backdrop-filter:blur(6px); animation:promoIn .25s ease}
  .promo-pop[hidden]{display:none}
  .promo-card{position:relative; max-width:440px; width:100%; background:linear-gradient(180deg,#1c1d20,#101113); color:#fff; border:1px solid rgba(255,255,255,.1); border-radius:24px; padding:36px 30px 28px; box-shadow:0 30px 90px rgba(0,0,0,.55)}
  .promo-x{position:absolute; top:15px; right:15px; width:34px; height:34px; border-radius:50%; border:0; background:rgba(255,255,255,.08); color:#fff; cursor:pointer; display:grid; place-items:center; transition:.15s}
  .promo-x:hover{background:rgba(255,255,255,.18)}
  .promo-x svg{width:15px; height:15px}
  .promo-eyebrow{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lime)}
  .promo-card h3{font-size:27px; font-weight:700; letter-spacing:-.025em; margin:11px 0 0; line-height:1.14; color:#fff}
  .promo-gift{font-size:44px; font-weight:700; letter-spacing:-.03em; color:var(--lime); margin:14px 0 4px; line-height:1}
  .promo-gift .was{font-size:20px; color:#7d8087; text-decoration:line-through; margin-right:10px; font-weight:500}
  .promo-text{color:#c4c6ca; font-size:14.5px; line-height:1.55; margin-top:8px}
  .promo-actions{display:flex; gap:10px; margin-top:24px}
  .promo-actions .btn{flex:1; justify-content:center}
  .promo-card .btn-ghost{border-color:rgba(255,255,255,.22); color:#fff; background:transparent}
  .promo-card .btn-ghost:hover{border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.04)}
  @keyframes promoIn{from{opacity:0}to{opacity:1}}
  @media (prefers-reduced-motion:reduce){.promo-pop{animation:none}}

  /* faq */
  .faq{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
  details.q{
    background:var(--surface); border:1px solid var(--line); border-radius:15px;
    padding:4px 22px; box-shadow:var(--shadow-s); transition:border-color .15s;
  }
  details.q[open]{border-color:var(--line-2)}
  details.q summary{
    list-style:none; cursor:pointer; padding:18px 0; display:flex; align-items:center; gap:14px;
    font-size:16.5px; font-weight:600; color:var(--text);
  }
  details.q summary::-webkit-details-marker{display:none}
  details.q summary .plus{
    margin-left:auto; flex:none; width:22px; height:22px; position:relative; transition:transform .2s;
  }
  details.q summary .plus::before, details.q summary .plus::after{
    content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    background:var(--lime-deep); border-radius:2px;
  }
  details.q summary .plus::before{width:13px; height:2.4px}
  details.q summary .plus::after{width:2.4px; height:13px; transition:opacity .2s}
  details.q[open] summary .plus::after{opacity:0}
  details.q .a{padding:0 0 20px; color:var(--dim); font-size:15.5px; line-height:1.65; max-width:70ch}

  @media (max-width:900px){
    .hero-grid,.pay-grid,.security-box,.form-grid,.app-grid{grid-template-columns:1fr; gap:40px}
    .app-grid .device{order:-1}
    .grid-3,.steps,.vias{grid-template-columns:1fr}
    .grid-2{grid-template-columns:1fr}
    .strip .wrap{grid-template-columns:1fr 1fr; gap:22px 0}
    .strip .stat{padding-left:22px}
    .strip .stat:nth-child(odd){padding-left:0; border-left:0}
    .nav nav{display:none}
    section{padding:64px 0}
    .hero{padding-top:52px}
    .security-box{padding:30px}
    .phone-stage{order:-1}
  }
  @media (max-width:560px){
    .wrap{padding:0 18px}
    .nav{gap:12px}
    .nav > .btn-ghost{display:none}          /* "Entrar no painel" fica no rodapé no celular */
    .nav .btn{padding:10px 16px; font-size:13.5px}
    h1{font-size:clamp(32px,8.8vw,40px)}
    /* popup de abertura mais compacto no celular */
    .promo-card{padding:26px 20px 22px; border-radius:20px}
    .promo-card h3{font-size:21px}
    .promo-gift{font-size:34px}
    .promo-gift .was{font-size:16px}
    .promo-text{font-size:13.5px}
    .promo-actions{gap:8px}
    .promo-actions .btn{font-size:14px; padding:12px 8px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto}}

  /* estoque protegido (demonstração com o olho) */
  .est-grid{grid-template-columns:.9fr 1.1fr}
  .est-stage{display:flex; flex-direction:column; align-items:center; gap:18px}
  .est-device{width:min(280px,70vw)}
  .est-screen > .est-locked, .est-screen > .est-free{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; padding:20px 18px 24px; transition:opacity .45s ease}
  .est-screen[data-estado='travado'] .est-free{opacity:0; pointer-events:none}
  .est-screen[data-estado='livre'] .est-locked{opacity:0; pointer-events:none}
  .est-screen .est-free{background:linear-gradient(160deg,#2b4a7a 0%,#5b3f8c 55%,#a3527a 100%); padding-top:44px}
  .est-timer{display:inline-flex; align-items:center; gap:7px; background:rgba(0,0,0,.38); border-radius:999px; padding:6px 12px; font-size:11.5px; color:#fff; white-space:nowrap}
  .est-timer b{font-variant-numeric:tabular-nums; color:var(--lime)}
  .est-dot{width:7px; height:7px; border-radius:50%; background:var(--lime)}
  .est-apps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px 14px; width:100%; margin-top:26px; padding:0 4px}
  .est-apps i, .est-dock i{display:block; aspect-ratio:1; border-radius:24%; background:var(--c)}
  .est-dock{margin-top:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; width:100%; padding:12px; border-radius:26px; background:rgba(255,255,255,.18)}
  .est-card{display:flex; align-items:center; gap:14px; width:min(320px,86vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 12px 12px 18px; box-shadow:var(--shadow-s)}
  .est-card-info{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35}
  .est-card-info b{font-size:15px}
  .est-card-info span{font-size:13px; color:var(--dim)}
  .est-eye{width:46px; height:46px; flex:none; border-radius:12px; border:0; cursor:pointer; display:grid; place-items:center; background:var(--lime); color:var(--ink); transition:transform .15s ease, background .2s ease}
  .est-eye:hover{transform:translateY(-1px)}
  .est-eye:focus-visible{outline:3px solid rgba(166,224,0,.45); outline-offset:2px}
  .est-eye svg{width:22px; height:22px}
  .est-eye .olho-fechado{display:none}
  .est-eye[aria-pressed='true']{background:var(--ink); color:#fff}
  .est-eye[aria-pressed='true'] .olho-aberto{display:none}
  .est-eye[aria-pressed='true'] .olho-fechado{display:block}
  .est-hint{font-size:13.5px; color:var(--mute); text-align:center; max-width:32ch; min-height:4.8em}
  @media (max-width:900px){ .est-grid{grid-template-columns:1fr} .est-stage{order:-1} }
  /* menu do topo: em tela média os itens não cabem (passava da janela). Some primeiro o que
     tem atalho no banner e no rodapé; abaixo de 900px o menu inteiro já some. */
  @media (max-width:1480px){ .nav nav{gap:14px} .nav nav a[href="#supervisao"], .nav nav a[href="#seguranca"]{display:none} }
  @media (max-width:1360px){ .nav nav a[href="#recursos"], .nav nav a[href="#faq"], .nav nav a[href="/modulos"]{display:none} }
  @media (max-width:1060px){ .nav nav a[href="#pagamento"], .nav nav a[href="#precos"]{display:none} }