@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&display=swap');

:root{
  --bg:#0B0F14;
  --text:#E6EDF3;
  --muted:#9BA7B4;
  --blue:#2F80FF;
  --blue2:#1c6fff;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
  overflow-x:hidden;
}
.container{ max-width:1100px; margin:0 auto; padding:0 22px; }
.nav, header, section, footer { position:relative; z-index:1; }

/* Background */
.bg{ position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.92; }
.blob{ position:absolute; border-radius:999px; filter: blur(55px); opacity:.22; animation: float 10s ease-in-out infinite; }
.b1{ width:420px; height:420px; left:-120px; top:160px; background: var(--blue); }
.b2{ width:380px; height:380px; right:-140px; top:80px; background: var(--blue); animation-delay:-2.5s; }
.grid{
  position:absolute; inset:-1px; opacity:.16;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at 35% 20%, black 0%, transparent 55%);
}
@keyframes float{
  0%,100%{ transform: translateY(0) translateX(0) scale(1); }
  50%{ transform: translateY(-18px) translateX(10px) scale(1.03); }
}

/* ===================== NAV ===================== */
.nav{
  position:sticky; top:0; z-index:30;
  background: rgba(11,15,20,.55);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.nav__content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
}

/* Logo maior */
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand__logo{
  height: 72px;
  display:block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
  transition: transform .18s ease, filter .18s ease;
}
.brand:hover .brand__logo{
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 22px 60px rgba(47,128,255,.22));
}

/* ===== Barra de botões (retângulo) com LED passando em volta ===== */
.nav__links{
  position: relative;
  display:flex;
  align-items:center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 20px;

  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);

  isolation: isolate;
  overflow: hidden;
}

.nav__links::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius: 24px;
  background: none;          /* some com o ring */
  animation: none;           /* remove o giro */
  opacity: 0;                /* garante invisível */
  pointer-events:none;
}

.nav__links::after{
  content:"";
  position:absolute;
  inset: 2px;
  border-radius: 18px;

  background: rgba(11,15,20,.62);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.05);

  z-index: 1;
  pointer-events:none;
}

.nav__links .navGlow{
  position:absolute;
  top:0; bottom:0;
  left:-60%;
  width:220%;
  z-index: 1;
  pointer-events:none;

  /* reflexo LONGO que atravessa tudo */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(47,128,255,.08) 25%,
    rgba(47,128,255,.22) 50%,
    rgba(47,128,255,.08) 75%,
    transparent 100%
  );

  opacity: .95;
  animation: navGlowSweep 3.0s ease-in-out infinite;
}

@keyframes navGlowSweep{
  0%   { transform: translateX(-35%); }
  50%  { transform: translateX(35%); }
  100% { transform: translateX(-35%); }
}
@keyframes navLedSpin{ to{ transform: rotate(360deg); } }
@keyframes navGlowSweep{
  0%   { transform: translateX(-45%); opacity:.55; }
  50%  { transform: translateX(45%);  opacity:.95; }
  100% { transform: translateX(-45%); opacity:.55; }
}

.nav__links > *{
  position: relative;
  z-index: 2;
}

.nav__actions{ display:flex; align-items:center; gap:10px; }

/* Menu Button */
.menuBtn{
  display:none;
  background:transparent;
  border:1px solid rgba(30,38,48,.9);
  border-radius:12px;
  padding:10px 10px;
  cursor:pointer;
}
.menuBtn span{
  display:block;
  width:20px;
  height:2px;
  background: rgba(230,237,243,.9);
  margin:4px 0;
  border-radius:2px;
}

/* Mobile Menu */
.mobileMenu{
  display:none;
  border-bottom:1px solid rgba(30,38,48,.6);
  background: rgba(11,15,20,.86);
  backdrop-filter: blur(12px);
}
.mobileMenu a{
  display:block;
  padding:14px 22px;
  text-decoration:none;
  color:var(--text);
  border-top:1px solid rgba(30,38,48,.35);
}
.mobileMenu a:hover{ background: rgba(255,255,255,.03); }
.mobileMenu .mmCta{
  background: rgba(47,128,255,.14);
  font-weight:900;
}
.mobileMenu.open{ display:block; }

/* ================= NAV ITEMS (IGUAL AO CONTATO) ================= */
.navItem{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:12px 16px;
  border-radius:14px;

  font-weight:900;
  font-size:13px;
  letter-spacing:-.2px;
  text-decoration:none;

  color: rgba(230,237,243,.95);

  border:1px solid rgba(47,128,255,.40);
  background:
    radial-gradient(180px 80px at 20% 20%, rgba(47,128,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

  box-shadow:
    0 16px 40px rgba(47,128,255,.10),
    0 10px 26px rgba(0,0,0,.22);

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  overflow:hidden;
  white-space:nowrap;
}

.navItem::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background: radial-gradient(300px 140px at var(--nx, 30%) var(--ny, 30%), rgba(47,128,255,.26), transparent 60%);
  opacity:.55;
  pointer-events:none;
  transition: opacity .18s ease;
}

.navItem:hover{
  transform: translateY(-2px);
  border-color: rgba(47,128,255,.80);
  box-shadow:
    0 24px 70px rgba(47,128,255,.18),
    0 18px 45px rgba(0,0,0,.26);
}
.navItem:hover::before{ opacity:.95; }
.navItem:active{ transform: translateY(-1px); }

/* ===================== Buttons ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px;
  text-decoration:none; font-weight:900;
  border:1px solid transparent;
  transition:.18s;
  white-space:nowrap;
}
.btn--primary{
  background:var(--blue);
  color:white;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn--primary:hover{
  transform: translateY(-1px);
  background:var(--blue2);
  box-shadow: 0 18px 48px rgba(47,128,255,.22);
}
.btn--secondary{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(30,38,48,.9);
  color: var(--text);
}
.btn--secondary:hover{
  transform: translateY(-1px);
  border-color: rgba(47,128,255,.65);
}

.shine{ position:relative; overflow:hidden; }
.shine::after{
  content:""; position:absolute; top:-80%; left:-60%;
  width:60%; height:260%;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: shine 3.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shine{
  0%,65%{ transform: translateX(-120%) rotate(22deg); opacity:0; }
  75%{ opacity:1; }
  100%{ transform: translateX(260%) rotate(22deg); opacity:0; }
}

/* ===================== NAV CTA (Contato separado) ===================== */
.navContact{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:12px 16px;
  border-radius:14px;

  font-weight:900;
  font-size:14px;
  letter-spacing:-.2px;

  color: rgba(230,237,243,.95);
  text-decoration:none;

  border:1px solid rgba(47,128,255,.55);
  background:
    radial-gradient(180px 80px at 20% 20%, rgba(47,128,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

  box-shadow:
    0 18px 45px rgba(47,128,255,.18),
    0 12px 30px rgba(0,0,0,.25);

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}

.navContact::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background: radial-gradient(300px 140px at var(--nx, 30%) var(--ny, 30%), rgba(47,128,255,.28), transparent 60%);
  opacity:.55;
  pointer-events:none;
  transition: opacity .18s ease;
}
.navContact:hover{
  transform: translateY(-2px);
  border-color: rgba(47,128,255,.85);
  box-shadow:
    0 24px 70px rgba(47,128,255,.22),
    0 18px 45px rgba(0,0,0,.28);
}
.navContact:hover::before{ opacity:.9; }
.navContact:active{ transform: translateY(-1px); }

.navContact.shine::after{
  background: linear-gradient(90deg, transparent, rgba(47,128,255,.28), rgba(255,255,255,.18), transparent);
  animation: shine 3.2s ease-in-out infinite;
}

/* ===================== HERO ===================== */
.hero{
  padding:82px 0 70px;
  background:
    radial-gradient(900px 400px at 20% 10%, rgba(47,128,255,.16), transparent 60%),
    radial-gradient(900px 400px at 80% 20%, rgba(47,128,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #0E141B 100%);
  overflow:hidden;
}
.spotlight{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(520px 300px at var(--mx, 50%) var(--my, 30%), rgba(47,128,255,.22), transparent 60%);
  opacity:.95;
}
.hero__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:34px; align-items:stretch; }
.hero__text{ min-height: 560px; display:flex; flex-direction:column; justify-content:center; }
.heroBadge{
  display:inline-block; margin-bottom:14px;
  padding:6px 12px; border-radius:999px;
  background:rgba(47,128,255,.12);
  border:1px solid rgba(47,128,255,.25);
  font-size:12px; color:#8fb8ff; font-weight:900;
}
.title{ font-size:44px; line-height:1.08; letter-spacing:-0.7px; margin:0 0 14px; }
.tblue{ color: #CFE0FF; }
.lead{ margin:0; color: var(--muted); font-size:18px; max-width: 560px; }
.hero__cta{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }

.typingWrap{ display:inline-flex; align-items:baseline; gap:6px; }
.typingBox{ display:inline-block; width: 14ch; white-space: nowrap; overflow: hidden; vertical-align: baseline; }
.typingText{ display:inline-block; white-space:nowrap; color:#CFE0FF; font-weight:900; letter-spacing:-0.3px; }
.typingCursor{ color:#CFE0FF; font-weight:900; animation: blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.heroProof{ display:flex; gap:14px; margin-top:18px; font-size:13px; color:rgba(230,237,243,.75); flex-wrap:wrap; }
.heroProof span{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.heroProof span:hover{ transform: translateY(-2px); border-color: rgba(47,128,255,.35); box-shadow: 0 14px 34px rgba(47,128,255,.12); }

.stats{ display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; }
.stat{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(30,38,48,.85);
  border-radius:14px;
  padding:12px 14px;
  min-width: 160px;
}
.stat__num{ font-size:22px; font-weight:900; letter-spacing:-.4px; }
.stat__txt{ color:var(--muted); font-size:13px; }

/* HERO CARD */
.hero__card{
  height:100%;
  min-height:560px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-radius:18px;
  border:1px solid rgba(30,38,48,.85);
  background: rgba(17,24,33,.7);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .2s ease;
  transform-style: preserve-3d;
  will-change: transform;
  position:relative;
}
.hero__card::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:18px;
  background: radial-gradient(520px 240px at var(--cx, 50%) var(--cy, 30%), rgba(47,128,255,.22), transparent 60%);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.hero__card:hover::before{ opacity:1; }

.cardTop{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(30,38,48,.85); }
.dots{ display:flex; gap:6px; }
.dots span{ width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.08); border:1px solid rgba(30,38,48,.9); }
.tag{ font-size:12px; color: var(--muted); }
.mock{ padding:18px 16px 16px; flex:1; display:flex; flex-direction:column; justify-content:center; }
.cardBottom{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px 16px 16px; border-top:1px solid rgba(30,38,48,.85); }
.mini strong{ display:block; }
.mini span{ color:var(--muted); font-size:12px; }

/* SECTIONS */
.section{ padding:78px 0; }
.section.alt{
  background: linear-gradient(180deg, rgba(17,24,33,.35), transparent 85%);
  border-top:1px solid rgba(30,38,48,.35);
  border-bottom:1px solid rgba(30,38,48,.35);
}
.section__head{ text-align:center; margin-bottom:34px; }
.section__head h2{ margin:0 0 8px; font-size:34px; letter-spacing:-.5px; }
.section__head p{ margin:0 auto; max-width:720px; color:var(--muted); }

/* BENEFÍCIOS */
#beneficios .compare, #beneficios .grid3{ max-width: 980px; margin-left:auto; margin-right:auto; }
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; position:relative; }
.box{
  background: rgba(17,24,33,.55);
  border:1px solid rgba(30,38,48,.9);
  border-radius:18px;
  padding:18px;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.box.good{ border-color: rgba(47,128,255,.25); }
.box h3{ margin:0 0 10px; }

.grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:18px; }
.card{
  background: rgba(17,24,33,.65);
  border:1px solid rgba(30,38,48,.9);
  border-radius:18px;
  padding:22px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;
}
.card h3{ margin:0 0 6px; font-size:18px; }
.card p{ margin:0 0 14px; color:var(--muted); }

#beneficios ul, #beneficios .list{ list-style:none; padding-left:0; margin:12px 0 0; }
#beneficios ul li, #beneficios .list li{
  position:relative;
  padding-left:18px;
  margin:10px 0;
  border-radius:10px;
  padding-top:6px;
  padding-bottom:6px;
  padding-right:10px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
#beneficios ul li::before, #beneficios .list li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(47,128,255,.95);
  box-shadow: 0 0 0 4px rgba(47,128,255,.12);
  transform: translateY(-50%);
}
#beneficios .compareList li:hover{
  background: rgba(47,128,255,.10);
  border:1px solid rgba(47,128,255,.22);
  transform: translateX(2px);
}
#beneficios .compareList li::after{ content:none !important; }
#beneficios .box::after{ content:none !important; }

/* reveal cards */
.premiumSection{ position:relative; overflow:hidden; }
.revealCard{
  opacity:0;
  transform:translateY(40px) scale(.985);
  transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
.revealCard.visible{ opacity:1; transform:translateY(0) scale(1); }
.box:hover, .card:hover{
  transform:translateY(-6px);
  box-shadow:0 25px 70px rgba(0,0,0,.45);
  border-color:rgba(47,128,255,.35);
}
.box::before, .card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background: radial-gradient(320px circle at var(--x,50%) var(--y,50%), rgba(47,128,255,.18), transparent 62%);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.box:hover::before, .card:hover::before{ opacity:1; }

/* MOBILE PROOF */
.mobileProof{
  background: linear-gradient(180deg, rgba(17,24,33,.35), transparent 85%);
  border-top:1px solid rgba(30,38,48,.35);
  border-bottom:1px solid rgba(30,38,48,.35);
}
.mobileProof__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:center; }
.mobileProof__text h2{ font-size:34px; margin-bottom:14px; }
.mobileProof__text p{ color:var(--muted); margin-bottom:18px; max-width:520px; }
.mobilePoints{ display:grid; gap:8px; margin-bottom:22px; font-weight:900; }
.floatingWrap{ display:flex; justify-content:center; }
.floatAnimation{ animation: floatMove 9s ease-in-out infinite; }
.floatingImg{ width:100%; max-width:520px; display:block; filter: drop-shadow(0 45px 90px rgba(0,0,0,.7)); }
@keyframes floatMove{ 0%{ transform: translateY(0px); } 50%{ transform: translateY(-14px); } 100%{ transform: translateY(0px); } }

/* PARA QUEM É - CARROSSEL */
.chipsCarousel{
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  padding: 10px 0;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.chipsTrack{ display:flex; gap:12px; width:max-content; will-change:transform; animation: chipsMarquee 38s linear infinite; }
.chipsCarousel:hover .chipsTrack{ animation-play-state: paused; }
@keyframes chipsMarquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

.chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(30,38,48,.9);
  background: rgba(255,255,255,.03);
  color:rgba(230,237,243,.92);
  font-weight:900;
  font-size:13px;
  letter-spacing:-.2px;
  white-space: nowrap;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  overflow:hidden;
}
.chip::before{
  content:"";
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(47,128,255,.95);
  box-shadow: 0 0 0 4px rgba(47,128,255,.12);
}
.chip::after{
  content:"";
  position:absolute; inset:0;
  border-radius:999px;
  background: radial-gradient(240px circle at var(--x,50%) var(--y,50%), rgba(47,128,255,.22), transparent 62%);
  opacity:0;
  transition: opacity .2s ease;
  pointer-events:none;
}
.chip:hover{
  transform: translateY(-3px);
  border-color: rgba(47,128,255,.35);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.chip:hover::after{ opacity:1; }

/* SUPORTE */
.split{ display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; align-items:center; }
.split__text h2{ margin:0 0 10px; font-size:32px; letter-spacing:-.4px; }
.split__text p{ margin:0 0 14px; color:var(--muted); }
.ctaRow{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
.miniNote{ margin-top:12px; color: var(--muted); font-size: 12px; }

/* TABS */
.supportTabs{ display:grid; gap:10px; }
.checkTab{
  text-align:left;
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(30,38,48,.9);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-weight:900;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.checkTab:hover{ transform: translateY(-2px); border-color: rgba(47,128,255,.30); box-shadow: 0 14px 34px rgba(47,128,255,.12); }
.checkTab.is-active{
  border-color: rgba(47,128,255,.55);
  box-shadow: 0 18px 46px rgba(47,128,255,.18);
  background: radial-gradient(260px 120px at 20% 20%, rgba(47,128,255,.14), rgba(255,255,255,.03));
}

/* PAINEL */
.mediaCard{
  border-radius:18px;
  border:1px solid rgba(30,38,48,.9);
  background: rgba(17,24,33,.65);
  overflow:hidden;
  box-shadow: var(--shadow);
  position:relative;
}
.mediaCard::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:18px;
  background: radial-gradient(420px circle at var(--x,50%) var(--y,30%), rgba(47,128,255,.18), transparent 62%);
  opacity:0;
  transition: opacity .2s ease;
  pointer-events:none;
}
.mediaCard:hover::before{ opacity:1; }

.mediaTop{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid rgba(30,38,48,.85); }
.mediaTop span{ width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.08); border:1px solid rgba(30,38,48,.9); }
.panelTopRight{ margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.panelTopRight strong{ color:rgba(230,237,243,.85); font-size:13px; font-weight:900; }

.panelStatus{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(47,128,255,.20);
  background: rgba(47,128,255,.10);
  color: rgba(230,237,243,.88);
  font-weight:900;
  font-size:12px;
  line-height:1;
  position:relative;
  overflow:hidden;
}
.panelDot{
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(47,128,255,.95);
  box-shadow: 0 0 0 4px rgba(47,128,255,.12);
  animation: panelDotPulse 2.2s ease-in-out infinite;
}
@keyframes panelDotPulse{ 0%,100%{ transform: scale(1); opacity:.55; } 50%{ transform: scale(1.18); opacity:1; } }

.panelBody{ padding:16px; position: relative; overflow: hidden; min-height: 310px; }
.panel{
  display:block;
  position:absolute;
  inset: 16px 16px 70px 16px;
  opacity: 0;
  transform: translateX(18px);
  filter: blur(6px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, filter .28s ease;
}
.panel.is-show{
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
  pointer-events: auto;
}
.panel h3{ margin: 6px 0 8px; font-size:18px; letter-spacing:-.2px; }
.panel p{ margin: 0 0 12px; color: var(--muted); font-size:13px; line-height:1.55; }

.panelList{ list-style:none; padding:0; margin: 0 0 12px; }
.panelList li{
  position:relative;
  padding-left:18px;
  margin: 10px 0;
  font-size:13px;
  color: rgba(230,237,243,.92);
  font-weight:800;
}
.panelList li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55em;
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(47,128,255,.95);
  box-shadow: 0 0 0 4px rgba(47,128,255,.12);
  transform: translateY(-50%);
}
.panelExample{
  margin-top:10px;
  padding:12px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color: rgba(230,237,243,.88);
  font-size:12px;
  font-weight:800;
}
.panelBtn{
  position:absolute;
  left:16px; right:16px; bottom:16px;
  border-radius:14px;
  padding: 13px 16px;
}

/* COMO FUNCIONA */
.flowWrap{
  max-width: 980px;
  margin: 0 auto;
  background: rgba(17,24,33,.55);
  border:1px solid rgba(30,38,48,.85);
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}
.flowWrap::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(500px circle at var(--x,50%) var(--y,30%), rgba(47,128,255,.14), transparent 62%);
  opacity:.85;
  pointer-events:none;
}
.flowBar{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  margin-bottom: 18px;
  position:relative;
  z-index:1;
}
.flowFill{
  display:block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(47,128,255,.65), rgba(47,128,255,1));
  border-radius: 999px;
  transition: width .45s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 16px 40px rgba(47,128,255,.25);
}

.flowSteps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; position:relative; z-index:1; }
.flowStep{
  border:1px solid rgba(30,38,48,.85);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 12px;
  text-align:left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  color: var(--text);
}
.flowStep:hover{ transform: translateY(-3px); border-color: rgba(47,128,255,.35); box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.flowStep.is-active{ border-color: rgba(47,128,255,.65); box-shadow: 0 22px 60px rgba(47,128,255,.18); background: radial-gradient(260px 120px at 20% 20%, rgba(47,128,255,.16), rgba(255,255,255,.03)); }

.flowNum{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
  background: rgba(47,128,255,.16);
  border:1px solid rgba(47,128,255,.35);
}
.flowText strong{ display:block; font-size: 14px; font-weight: 900; color: #fff; letter-spacing:-.2px; }
.flowText small{ display:block; margin-top: 2px; font-weight: 800; color: rgba(255,255,255,.72); }

.flowPanels{ position: relative; min-height: 120px; margin-top: 10px; z-index:1; }
.flowPanel{
  position:absolute; inset: 0;
  opacity:0;
  transform: translateY(10px);
  filter: blur(6px);
  transition: opacity .28s ease, transform .28s ease, filter .28s ease;
  pointer-events:none;
}
.flowPanel.is-show{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events:auto;
}
.flowPanel h3{ margin:0 0 6px; font-size: 18px; color: #fff; letter-spacing:-.2px; }
.flowPanel p{ margin:0 0 12px; color: rgba(255,255,255,.84); font-weight: 700; max-width: 780px; }
.flowTags{ display:flex; gap:10px; flex-wrap:wrap; }
.flowTag{
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(30,38,48,.85);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 12px;
}
.flowCta{ margin-top: 16px; z-index:1; position:relative; }
.flowCta .btn{ width: 100%; border-radius: 14px; padding: 14px 16px; }

/* CASES - CARROSSEL */
.caseCarousel{ position:relative; max-width: 980px; margin: 0 auto; }
.caseViewport{ overflow:hidden; border-radius: 18px; }
.caseTrack{ display:flex; gap:18px; transition: transform .5s cubic-bezier(.16,1,.3,1); will-change: transform; }
.caseSlide{ flex: 0 0 100%; display:grid; grid-template-rows: auto 1fr; gap:12px; }

.caseShot{
  position: relative;
  overflow: hidden;
  border-radius:18px;
  border:1px solid rgba(47,128,255,.60);
  background: rgba(17,24,33,.45);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding: 12px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.caseShot::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:18px;
  background: radial-gradient(circle at center, rgba(47,128,255,.45), rgba(47,128,255,.15), transparent 70%);
  opacity:0;
  transition: opacity .35s ease;
  z-index:0;
  pointer-events:none; /* FIX: nunca bloquear clique */
}
.caseShot img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  z-index:1;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.caseShot:hover{ transform: translateY(-4px); border-color: rgba(47,128,255,.95); box-shadow: 0 25px 70px rgba(47,128,255,.35); }
.caseShot:hover::before{ opacity:.9; animation: casePulse 2.2s ease-in-out infinite; }
.caseShot:hover img{ transform: scale(1.02); }
@keyframes casePulse{
  0%   { opacity:.35; transform: scale(.96); }
  50%  { opacity:.85; transform: scale(1.03); }
  100% { opacity:.35; transform: scale(.96); }
}

.caseInfo{
  border-radius:18px;
  border:1px solid rgba(30,38,48,.85);
  background: rgba(17,24,33,.55);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  padding: 16px;
}
.caseTopRow{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom: 10px; }
.caseName strong{ display:block; font-size:16px; letter-spacing:-.2px; }
.caseName span{ display:block; color: var(--muted); font-weight:800; font-size:12px; margin-top:2px; }
.caseMeta{ display:flex; align-items:center; gap:8px; }
.caseBadge{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(47,128,255,.22);
  background: rgba(47,128,255,.10);
  color: rgba(230,237,243,.92);
  font-weight:900;
  font-size:12px;
}
.caseTime{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(230,237,243,.88);
  font-weight:900;
  font-size:12px;
}
.caseQuote{
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 3px solid rgba(47,128,255,.55);
  color: rgba(230,237,243,.92);
  font-weight:750;
  line-height:1.55;
}
.caseActions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 10px; }
.caseFoot{ display:flex; gap:12px; flex-wrap:wrap; color: var(--muted); font-weight:800; font-size:12px; }

.caseNav{
  position:absolute;
  top: 46%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 14px;
  border:1px solid rgba(30,38,48,.85);
  background: rgba(11,15,20,.65);
  color: rgba(230,237,243,.95);
  font-size: 26px;
  font-weight: 900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  z-index: 5;
}
.caseNav:hover{ transform: translateY(-50%) translateY(-2px); border-color: rgba(47,128,255,.35); box-shadow: 0 14px 34px rgba(47,128,255,.12); }
.casePrev{ left: -10px; }
.caseNext{ right: -10px; }

.caseDots{ display:flex; justify-content:center; gap:10px; margin-top: 14px; }
.caseDot{
  width:10px; height:10px;
  border-radius:999px;
  border:1px solid rgba(30,38,48,.85);
  background: rgba(255,255,255,.05);
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.caseDot:hover{ transform: translateY(-2px); border-color: rgba(47,128,255,.35); }
.caseDot.is-active{
  background: rgba(47,128,255,.9);
  border-color: rgba(47,128,255,.9);
  box-shadow: 0 0 0 4px rgba(47,128,255,.12);
}

/* FAQ */
.faq{ max-width: 860px; margin: 0 auto; display:grid; gap:12px; }
.faq__item{
  background: rgba(17,24,33,.6);
  border:1px solid rgba(30,38,48,.9);
  border-radius:16px;
  padding: 14px 16px;
}
.faq__item summary{ cursor:pointer; font-weight:900; list-style:none; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item p{ margin:10px 0 0; color:var(--muted); }

/* CTA FINAL */
.section.cta{ padding:56px 0 80px; }
.ctaBox{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-radius:20px;
  padding:26px;
  border:1px solid rgba(47,128,255,.22);
  background: radial-gradient(600px 220px at 30% 10%, rgba(47,128,255,.22), transparent 55%), rgba(17,24,33,.6);
}
.ctaBox h2{ margin:0 0 6px; font-size:26px; }
.ctaBox p{ margin:0; color:var(--muted); max-width: 520px; }

/* FOOTER (sem mapa do site) */
.footer{
  border-top:1px solid rgba(30,38,48,.55);
  background: radial-gradient(900px 280px at 18% 15%, rgba(47,128,255,.18), transparent 60%),
              radial-gradient(900px 280px at 82% 40%, rgba(47,128,255,.10), transparent 60%),
              rgba(0,0,0,.12);
  position:relative;
  overflow:hidden;
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap:18px;
  padding:34px 0 18px;
  align-items:start;
}
.footBrand{ display:flex; flex-direction:column; gap:12px; }
.footBrand__logoWrap{
  display:inline-flex; width:fit-content;
  border-radius:16px;
  padding:10px 12px;
  border:1px solid rgba(30,38,48,.85);
  background: rgba(255,255,255,.02);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.footBrand__logoWrap:hover{ transform: translateY(-2px); border-color: rgba(47,128,255,.35); box-shadow: 0 18px 44px rgba(47,128,255,.10); }
.footBrand__logo{ height:56px; display:block; }
.footBrand__desc{ margin:0; color: var(--muted); max-width: 380px; font-weight:700; }

.footSocial{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top: 2px; }
.socialBtn{
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(30,38,48,.9);
  background: rgba(255,255,255,.03);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.socialBtn img{ width:24px; height:24px; object-fit:contain; display:block; transition: transform .18s ease, filter .18s ease; }
.socialBtn:hover{ transform: translateY(-3px); border-color: rgba(47,128,255,.40); box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.socialHint{ color: rgba(230,237,243,.75); font-weight:800; font-size:12px; margin-left: 2px; opacity:.9; }

.footCta{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.footTitle{ margin:0 0 6px; font-size:13px; letter-spacing:-.2px; color: rgba(230,237,243,.90); font-weight:900; }
.footSmall{ margin:0; color: var(--muted); font-weight:700; max-width: 360px; font-size:13px; line-height:1.55; }
.footBtn{
  width:100%;
  border-radius:14px;
  padding:14px 16px;
  box-shadow: 0 18px 45px rgba(47,128,255,.20);
  border:1px solid rgba(255,255,255,.12);
}
.footCopy{ margin-top:6px; color: var(--muted); font-size:13px; display:flex; flex-direction:column; gap:4px; }

.footBar{ border-top:1px solid rgba(30,38,48,.55); background: rgba(0,0,0,.18); padding:12px 0; }
.footBar__inner{ display:flex; align-items:center; gap:10px; color: rgba(230,237,243,.70); font-weight:900; font-size:12px; }
.footBar__dot{ width:8px; height:8px; border-radius:999px; background: rgba(47,128,255,.95); box-shadow: 0 0 0 4px rgba(47,128,255,.12); }

/* Reveal */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

/* Premium mock cards */
.premiumMock .mock__title{ font-size: 18px; letter-spacing: -0.2px; font-weight: 900; }
.premiumMock .mock__sub{ color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 6px; margin-bottom: 16px; }
.mockGrid--sell{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mockItemSell{
  position: relative;
  border-radius: 14px;
  padding: 14px 14px;
  background: radial-gradient(120px 80px at 20% 15%, rgba(47,128,255,.14), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mockItemSell:hover{ transform: translateY(-3px); border-color: rgba(47,128,255,.28); box-shadow: 0 16px 42px rgba(0,0,0,.36); }
.mockItemSell strong{ display:block; font-size: 13px; font-weight: 900; letter-spacing: -0.2px; margin-bottom: 4px; }
.mockItemSell span{ display:block; font-size: 12px; line-height: 1.35; color: var(--muted); }
.okDot{
  display:inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  margin-right: 8px;
  background: rgba(47,128,255,.95);
  box-shadow: 0 0 0 4px rgba(47,128,255,.12);
  transform: translateY(-1px);
}
.mockValue{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-size:13px;
  color:rgba(230,237,243,.92);
  line-height:1.45;
  font-weight:800;
}
.mockBtn{
  width: 100%;
  margin-top: 12px;
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(47,128,255,.20);
  border: 1px solid rgba(255,255,255,.12);
  padding: 13px 16px;
}

/* WhatsApp FLOAT */
.wpp{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:60;
  display:block;
  background:transparent;
  text-decoration:none;
}
.wpp img{
  width:76px;
  height:76px;
  display:block;
  object-fit:contain;
  border-radius:18px;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.35));
  transform: translateZ(0);
  animation: wppPulse 6s ease-in-out infinite;
  transition: transform .18s ease, filter .18s ease;
}
.wpp:hover img{
  animation-play-state: paused;
  transform: scale(1.08);
  filter: drop-shadow(0 18px 44px rgba(47,128,255,.38));
}
@keyframes wppPulse{
  0%, 72%, 100% { transform: scale(1); filter: drop-shadow(0 14px 30px rgba(0,0,0,.35)); }
  76%          { transform: scale(1.08); filter: drop-shadow(0 18px 44px rgba(47,128,255,.32)); }
  80%          { transform: scale(1); }
  84%          { transform: scale(1.05); }
  88%          { transform: scale(1); }
}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__text, .hero__card{ min-height:auto; }
  .nav__links{ display:none; }
  .menuBtn{ display:block; }
  .grid3, .compare, .split, .footer__grid{ grid-template-columns:1fr; }
  .title{ font-size:38px; }
  .mobileProof__grid{ grid-template-columns:1fr; text-align:center; }
  .mobileProof__text p{ margin-left:auto; margin-right:auto; }
  .mockGrid--sell{ grid-template-columns: 1fr; }
  .panelBody{ min-height: 340px; }
  .flowSteps{ grid-template-columns: 1fr; }
  .flowPanels{ min-height: 160px; }
  .casePrev{ left: 10px; }
  .caseNext{ right: 10px; }
  .brand__logo{ height: 66px; }
}
@media (max-width: 420px){
  .title{ font-size:34px; }
  .btn{ width:100%; }
  .hero__cta{ flex-direction:column; }
  .typingBox{ width: 16ch; }
}
/* ===== FIX mobile: painel do suporte não cobrir conteúdo com o botão ===== */
@media (max-width: 980px){
  /* dá mais espaço embaixo dentro do painel (onde fica o botão absoluto) */
  .panelBody{ 
    padding-bottom: 96px; 
  }

  /* garante que o conteúdo do painel nunca fique “embaixo” do botão */
  .panel{
    inset: 16px 16px 110px 16px; /* era 70px -> aumenta */
  }

  /* deixa o “Exemplo” com espaço extra pra não encostar no botão */
  .panelExample{
    margin-bottom: 22px;
  }
}
/* ===== FIX mobile: CTA final não cortar o botão ===== */
@media (max-width: 980px){
  .ctaBox{
    flex-direction: column;
    align-items: stretch;
  }

  .ctaBox .btn{
    width: 100%;
  }
}