:root{
  --bg:#0f1115; --bg-alt:#141723; --text:#eaeaf0; --muted:#a8adbd;
  --primary:#29b36b; --primary-2:#2dcc84; --secondary:#1e88e5; --secondary-2:#36a3ff;
  --card:#151926; --border:#23283a;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Open Sans',sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Layout base */
.container{max-width:1140px;margin:0 auto;padding:0 16px}
.grid-2{display:grid;grid-template-columns:1fr;gap:28px}
@media (min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}

.site-header{position:sticky;top:0;z-index:20}
.glass{background:rgba(15,17,21,.55);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.glass.scrolled{background:rgba(15,17,21,.85)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.brand img{height:64px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.menu a{margin-left:16px;color:var(--muted)}
.menu a:hover{color:var(--text)}

/* Hero */
.hero{position:relative;min-height:86vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.10) 40%,rgba(0,0,0,.65))}
.hero-overlay{position:absolute;left:0;right:0;bottom:6vh;z-index:2;text-align:center;padding:0 16px}
.hero-overlay h1{font-size:48px;margin:0 0 8px;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hero-overlay p{margin:0 0 18px;color:#d9dbe6}
@media (max-width:768px){ .hero-overlay{bottom:5vh} .hero-overlay h1{font-size:36px} }
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* Botões (alinhamento perfeito + ícone) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--border); padding:12px 18px; border-radius:12px;
  cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  line-height:1; font-weight:700; text-align:center;
}
.btn .icon{height:18px;width:auto;display:inline-block}
.btn.primary{background:linear-gradient(135deg, var(--primary), var(--primary-2));border-color:transparent;color:#0b1116;font-weight:800;box-shadow:0 10px 30px rgba(41,179,107,.25)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 12px 34px rgba(41,179,107,.32)}
.btn.secondary{background:linear-gradient(135deg, var(--secondary), var(--secondary-2));border-color:transparent;color:#fff;font-weight:800;box-shadow:0 10px 30px rgba(30,136,229,.25)}
.btn.secondary:hover{transform:translateY(-1px);box-shadow:0 12px 34px rgba(30,136,229,.32)}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--text);font-weight:600}
.btn.outline{background:transparent;border-color:var(--primary);color:#dff7ea;font-weight:700}
.btn:focus-visible{outline:2px solid #2dcc84; outline-offset:2px}

/* App section */
.section{padding:72px 0}
.section.alt{background:var(--bg-alt)}
.section h2{margin:0 0 16px}
.section p{color:var(--muted)}

#app .app-wrap{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:28px}
#app .app-shot{position:relative}
#app .app-shot::before{content:"";position:absolute;inset:auto -10% -8% -10%;height:60%;background:radial-gradient(50% 60% at 50% 50%, rgba(41,179,107,.18), transparent 60%), radial-gradient(40% 50% at 60% 60%, rgba(30,136,229,.15), transparent 60%);filter:blur(42px);z-index:0}
#app .shot-frame{position:relative;z-index:1;border-radius:18px;padding:0;background:transparent}
#app .shot-frame img{display:block;width:100%;border-radius:16px;box-shadow:0 18px 46px rgba(0,0,0,.45)}
#app .app-content h2{margin-bottom:6px}
#app .app-content h3{margin:0 0 10px; font-weight:700; color:#eaeaf0}
#app .features-grid{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 0 14px}
@media (min-width:700px){#app .features-grid{grid-template-columns:1fr 1fr;gap:18px}}
#app .features-grid ul{list-style:none;padding:0;margin:0;color:#cfd3df}
#app .features-grid li{position:relative;padding-left:18px;margin:8px 0}
#app .features-grid li::before{content:'\2713';position:absolute;left:0;top:0;color:var(--primary)}
#app .app-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:flex-start;margin-top:10px}

/* Cards/planos */
.cards{display:grid;grid-template-columns:1fr;gap:22px;margin-top:18px}
@media (min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid var(--border);padding:22px;border-radius:16px;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(0,0,0,.35);border-color:rgba(255,255,255,.12)}
.card.featured{border-color:rgba(41,179,107,.6);box-shadow:0 12px 34px rgba(41,179,107,.18)}
.card h3{margin:0 0 8px}
.card .price{font-size:28px;font-weight:800;margin:4px 0 10px;color:#fff}
.card ul{list-style:none;padding:0;margin:0 0 16px;color:var(--muted)}
.card li{padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.card li:last-child{border-bottom:0}

/* Features */
.features{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){.features{grid-template-columns:repeat(3,1fr)}}
.feat{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));border:1px solid var(--border);padding:16px;border-radius:12px}
.feat strong{display:block;margin-bottom:6px}
.feat span{color:#cfd3df}

/* FAQ */
.faq details{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));border:1px solid var(--border);padding:14px 16px;border-radius:10px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:700}
.faq p{color:#cfd3df}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:18px 0;background:rgba(20,23,35,.7)}
.footer{display:flex;justify-content:space-between;align-items:center;gap:12px}
.footer small{color:var(--muted)}
.footer nav a{margin-left:14px;color:var(--muted)}

/* WhatsApp FAB */
.wa-fab{position:fixed;right:18px;bottom:18px;z-index:30;background:linear-gradient(135deg,#25D366,#19b855);color:#0b1116;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px rgba(37,211,102,.35);border:1px solid rgba(255,255,255,.2)}
.wa-fab:hover{transform:translateY(-1px);box-shadow:0 16px 42px rgba(37,211,102,.45)}

/* ===== Mobile tweaks ===== */
@media (max-width: 768px) {
  .hero { min-height: 72vh; padding-top: 60px; }
  .hero-overlay h1 { font-size: 30px; line-height: 1.2; }
  .hero-overlay p { font-size: 15px; }

  .hero-ctas { flex-direction: column; gap: 10px; }
  .btn { width: 100%; padding: 14px 16px; border-radius: 12px; font-size: 15px; }

  #app .app-wrap { grid-template-columns: 1fr; }
  #app .shot-frame { width: 88%; margin: 0 auto; padding: 0; background: transparent; }
  #app .app-shot img { width: 100%; max-width: 100%; margin: 0 auto; }
  #app .app-content { padding-top: 10px; }
  #app .app-actions { gap: 14px; } /* mantém respiro entre APK / Play */

  .section { padding: 48px 0; }
  .cards { gap: 18px; }
  .card { padding: 18px; border-radius: 14px; }
  .card h3 { font-size: 20px; }
  .card .price { font-size: 24px; }

  .wa-fab { bottom: 12px; right: 12px; width: 52px; height: 52px; }
  .footer { flex-direction: column; text-align: center; gap: 8px; }
}

@media (max-width: 380px) {
  .hero-overlay h1 { font-size: 26px; }
  .btn { font-size: 14px; padding: 12px 14px; }
  .card .price { font-size: 22px; }
}

/* Skip link (acessibilidade) */
.skip-link,
a[href^="#"][class*="skip"]{
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus,
a[href^="#"][class*="skip"]:focus{
  position: fixed; left: 12px; top: 12px; width: auto; height: auto;
  padding: 8px 12px; background: #0b0e14; color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 8px; z-index: 10000;
}

/* ===== Acessibilidade/SEO =====
   Título só para leitores de tela e mecanismos de busca */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}