/* ============ TOKENS ============ */
:root{
  --bg: #0b0a14;
  --bg-alt: #100e1c;
  --surface: #16142590;
  --surface-solid: #171426;
  --border: #2a2740;
  --text: #f4f2ff;
  --text-dim: #b8b3d1;
  --text-dimmer: #8983a8;
  --primary: #8b5cf6;
  --primary-2: #ec4899;
  --accent: #22d3ee;
  --warn: #f59e0b;
  --success: #34d399;
  --gradient: linear-gradient(120deg, #8b5cf6 0%, #ec4899 55%, #f59e0b 100%);
  --gradient-2: linear-gradient(135deg, #22d3ee, #8b5cf6);
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 20px 50px -20px rgba(139, 92, 246, 0.35);
  --font-head: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
}

@media (prefers-color-scheme: light){
  :root{ }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3{ font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
p{ margin: 0 0 1em; color: var(--text-dim); }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
.container{ max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.text-gradient{
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em;
  font-family: var(--font-head);
  font-weight: 700;
  border-radius: 999px;
  padding: 16px 30px;
  cursor: pointer;
  border: none;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  white-space: nowrap;
}
.btn--primary{
  background: var(--gradient);
  color: #fff;
  box-shadow: var(--shadow);
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 24px 60px -18px rgba(236,72,153,.55); }
.btn--ghost{
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn--ghost:hover{ border-color: var(--primary); color: var(--primary); }
.btn--lg{ padding: 18px 36px; font-size: 1.05rem; }
.btn--sm{ padding: 10px 20px; font-size: .85rem; }
.btn--block{ width: 100%; }

/* ============ TOP BAR ============ */
.top-bar{
  background: var(--gradient);
  color:#fff;
  text-align:center;
  font-size: .85rem;
  font-weight: 600;
  padding: 9px 12px;
}
.top-bar p{ margin:0; color:#fff; }
#topbar-timer{ font-variant-numeric: tabular-nums; background: rgba(0,0,0,.2); padding: 2px 8px; border-radius: 6px; margin-left: 4px;}

/* ============ HEADER ============ */
.header{
  position: sticky; top:0; z-index: 100;
  backdrop-filter: blur(14px);
  background: rgba(11,10,20,.75);
  border-bottom: 1px solid var(--border);
}
.header__inner{
  display:flex; align-items:center; justify-content: space-between;
  padding: 14px 24px;
}
.logo{ font-family: var(--font-head); font-weight:800; font-size:1.25rem; color:var(--text); }
.logo span{ background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav{ display:flex; gap: 28px; }
.nav a{ font-size:.92rem; font-weight:600; color: var(--text-dim); transition: color .2s; }
.nav a:hover{ color: var(--text); }
.header__cta{ display:inline-flex; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:24px; height:2px; background:var(--text); border-radius:2px; }

/* ============ HERO ============ */
.hero{ position:relative; padding: 90px 0 70px; overflow:hidden; }
.hero__bg{
  position:absolute; inset:-20% -10% auto -10%; height: 700px;
  background:
    radial-gradient(circle at 20% 20%, rgba(139,92,246,.35), transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(236,72,153,.3), transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(34,211,238,.2), transparent 55%);
  filter: blur(30px);
  z-index:0;
}
.hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items:center;
}
.hero__content, .hero__visual{ min-width: 0; }
.badge{
  display:inline-block; padding: 7px 16px; border-radius:999px;
  background: var(--surface); border:1px solid var(--border);
  font-size:.8rem; font-weight:700; color: var(--text-dim);
  margin-bottom: 20px;
}
.hero h1{ font-size: clamp(2.2rem, 4.2vw, 3.4rem); letter-spacing:-.02em; }
.hero__subtitle{ font-size: 1.1rem; max-width: 540px; }
.hero__bullets{ display:flex; flex-direction:column; gap:10px; margin: 24px 0 32px; }
.hero__bullets li{ display:flex; align-items:center; gap:10px; font-weight:600; color: var(--text); }
.icon-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background: var(--gradient-2); color:#0b0a14; font-size:.7rem; font-weight:900; flex:none;
}
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 32px; }
.hero__social-proof{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.avatars{ display:flex; }
.avatar{
  width:36px; height:36px; border-radius:50%;
  background: var(--c, var(--primary));
  border:2px solid var(--bg);
  margin-left:-10px;
}
.avatars .avatar:first-child{ margin-left:0; }
.rating{ display:flex; flex-direction:column; font-size:.82rem; color: var(--text-dimmer); }
.stars{ color: var(--warn); letter-spacing:2px; font-size:.9rem; }

/* Hero visual mock */
.hero__visual{ display:flex; justify-content:center; }
.mock-phone{
  width: 300px; border-radius: 36px; padding: 14px;
  background: linear-gradient(160deg, #1c1930, #0f0d1c);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
}
.mock-phone__notch{
  width: 70px; height:6px; border-radius:4px; background: #33304a;
  margin: 0 auto 14px;
}
.mock-phone__screen{ display:flex; flex-direction:column; gap:14px; }
.mock-card{
  background: var(--surface-solid); border:1px solid var(--border);
  border-radius: 14px; padding: 14px; position:relative;
}
.mock-label{ font-size:.72rem; font-weight:700; color: var(--text-dimmer); display:block; margin-bottom:8px; }
.mock-chart{ width:100%; height:48px; }
.mock-chart polyline{ fill:none; stroke: url(#g); stroke-width:3; }
.mock-card--chart .mock-chart polyline{ stroke: var(--accent); }
.mock-up{ display:inline-block; margin-top:8px; font-size:.75rem; font-weight:800; color: var(--success); }
.mock-progress{ height:8px; border-radius:999px; background:#2a2740; overflow:hidden; }
.mock-progress__bar{ height:100%; background: var(--gradient); }
.mock-rows{ display:flex; flex-direction:column; gap:6px; }
.mock-row{ height:8px; border-radius:4px; background:#2a2740; }
.mock-row:nth-child(2){ width:80%; }
.mock-row:nth-child(3){ width:60%; }

/* ============ STRIP ============ */
.strip{ padding: 28px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.strip__inner{ display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; text-align:center; }
.strip p{ margin:0; font-size:.85rem; color: var(--text-dimmer); }
.strip__items{ display:flex; gap:26px; flex-wrap:wrap; }
.strip__items span{ font-family: var(--font-head); font-weight:700; color: var(--text-dim); opacity:.8; }

/* ============ SECTION GENERIC ============ */
.section{ padding: 90px 0; }
.section--dark{ background: var(--bg-alt); }
.section__head{ max-width: 680px; margin: 0 auto 52px; text-align:center; }
.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color: var(--primary-2); margin-bottom: 12px;
}
.section__head h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); }
.section__desc{ font-size:1.05rem; }

.grid{ display:grid; gap: 24px; }
.grid > *{ min-width: 0; }
.grid--2{ grid-template-columns: 1fr 1fr; }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--4{ grid-template-columns: repeat(4, 1fr); }

/* Pain cards */
.pain-card{
  background: var(--surface-solid); border:1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
}
.pain-card__icon{ font-size:2rem; display:block; margin-bottom:14px; }
.pain-card h3{ font-size:1.1rem; margin-bottom:8px; }
.pain-card p{ font-size:.92rem; margin:0; }

/* Bridge */
.bridge{ padding: 70px 0; text-align:center; }
.bridge__inner{ max-width: 760px; margin:0 auto; }
.bridge h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
.bridge p{ font-size:1.1rem; }

/* Modules */
.modules{ display:flex; flex-direction:column; gap: 4px; max-width: 820px; margin: 0 auto; }
.module{
  display:flex; gap:22px; align-items:flex-start;
  padding: 22px 8px; border-bottom: 1px solid var(--border);
}
.module__num{
  font-family: var(--font-head); font-weight:800; font-size:1.3rem;
  background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  flex:none; width: 50px;
}
.module h3{ font-size:1.08rem; margin-bottom:4px; }
.module p{ margin:0; font-size:.92rem; }

/* Feature cards (plataforma / planilhas) */
.feature-card{
  background: var(--surface-solid); border:1px solid var(--border);
  border-radius: var(--radius); padding: 26px; position:relative;
}
.feature-card--highlight{
  border-color: transparent;
  background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box,
              var(--gradient) border-box;
  border: 1.5px solid transparent;
}
.feature-card__tag{
  position:absolute; top:16px; right:16px;
  font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  background: var(--gradient); color:#fff; padding: 4px 10px; border-radius:999px;
}
.feature-card__icon{ font-size:1.8rem; display:block; margin-bottom:14px; }
.feature-card h3{ font-size:1.02rem; margin-bottom:6px; }
.feature-card p{ font-size:.88rem; margin:0; }

/* For who */
.for-who__card{
  border-radius: var(--radius); padding: 32px; border:1px solid var(--border);
}
.for-who__card--yes{ background: linear-gradient(160deg, rgba(52,211,153,.12), transparent); }
.for-who__card--no{ background: linear-gradient(160deg, rgba(236,72,153,.1), transparent); }
.for-who__card h3{ font-size:1.2rem; }
.for-who__card ul{ display:flex; flex-direction:column; gap:12px; }
.for-who__card--yes li{ padding-left:26px; position:relative; color:var(--text); }
.for-who__card--yes li::before{ content:"✔"; position:absolute; left:0; color: var(--success); font-weight:800; }
.for-who__card--no li{ padding-left:26px; position:relative; color:var(--text-dim); }
.for-who__card--no li::before{ content:"✕"; position:absolute; left:0; color: var(--primary-2); font-weight:800; }

/* Testimonials */
.testimonial{
  margin:0; background: var(--surface-solid); border:1px solid var(--border);
  border-radius: var(--radius); padding: 26px; position:relative;
}
.testimonial__tag{
  display:inline-block; font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color: var(--text-dimmer); border:1px solid var(--border); border-radius:999px;
  padding: 3px 10px; margin-bottom: 12px;
}
.testimonial p{ color: var(--text); font-size:.98rem; }
.testimonial footer{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.testimonial footer div{ display:flex; flex-direction:column; font-style:normal; }
.testimonial footer strong{ font-size:.9rem; }
.testimonial footer span{ font-size:.78rem; color: var(--text-dimmer); }

/* Author */
.author{ display:flex; align-items:center; gap:36px; background: var(--surface-solid); border:1px solid var(--border); border-radius: var(--radius); padding: 40px; }
.author__avatar{
  width:120px; height:120px; border-radius:50%; background: var(--gradient); flex:none;
  overflow:hidden;
  /* Para ajustar o enquadramento da foto, mude --avatar-pos (ex: "center 15%" mostra mais o topo) */
  --avatar-pos: center 20%;
}
.author__avatar img{ width:100%; height:100%; object-fit:cover; object-position: var(--avatar-pos); display:block; }
.author__content h2{ font-size:1.6rem; }

/* Offer */
.section--offer{ background: var(--bg-alt); }
.offer-card{
  display:grid; grid-template-columns: 1.1fr .9fr;
  background: var(--surface-solid); border:1px solid var(--border);
  border-radius: 24px; overflow:hidden; max-width: 900px; margin: 0 auto;
  box-shadow: var(--shadow);
}
.offer-card > *{ min-width: 0; }
.offer-card__stack{ padding: 44px; border-right:1px solid var(--border); }
.offer-card__stack h3{ font-size:1.1rem; margin-bottom: 20px; }
.stack-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
.stack-list li{ display:flex; justify-content:space-between; font-size:.92rem; color: var(--text-dim); padding-bottom:14px; border-bottom: 1px dashed var(--border); }
.stack-list li strong{ color: var(--text); text-decoration: line-through; opacity:.6; font-weight:600; }
.stack-total{ display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:1.05rem; padding-top:6px; }
.stack-total strong{ text-decoration: line-through; color: var(--text-dimmer); font-size:1.2rem; }

.offer-card__price{
  padding: 44px; display:flex; flex-direction:column; align-items:center; text-align:center;
  background: radial-gradient(circle at 50% 0%, rgba(139,92,246,.18), transparent 60%);
}
.offer-card__badge{
  background: var(--gradient); color:#fff; font-size:.72rem; font-weight:800;
  padding:6px 14px; border-radius:999px; margin-bottom:18px; text-transform:uppercase; letter-spacing:.04em;
}
.price-old{ font-size:.9rem; color: var(--text-dimmer); text-decoration: line-through; }
.price-new{ font-family: var(--font-head); font-size:3.4rem; font-weight:800; color: var(--text); line-height:1; margin:6px 0; }
.price-new small{ font-size:1.4rem; font-weight:700; vertical-align: super; }
.price-installments{ font-size:.85rem; color: var(--text-dimmer); margin-bottom:24px; }
.offer-card__timer{ margin-top:16px; font-size:.85rem; font-weight:700; color: var(--warn); }
#offer-timer{ font-variant-numeric: tabular-nums; }
.offer-card__secure{ margin-top:14px; font-size:.78rem; color: var(--text-dimmer); }

/* Guarantee */
.guarantee__inner{
  display:flex; align-items:center; gap:32px;
  background: var(--surface-solid); border:1px solid var(--border);
  border-radius: var(--radius); padding: 40px; max-width: 900px; margin: 0 auto;
}
.guarantee__seal{ font-size:3rem; flex:none; }
.guarantee h2{ font-size:1.4rem; }
.guarantee p{ margin:0; }

/* FAQ */
.faq{ max-width: 760px; margin: 0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ border:1px solid var(--border); border-radius: var(--radius-sm); overflow:hidden; background: var(--surface-solid); }
.faq-item__q{
  width:100%; text-align:left; background:none; border:none; color: var(--text);
  font-family: var(--font-head); font-weight:700; font-size:.98rem;
  padding: 18px 22px; display:flex; justify-content:space-between; align-items:center; cursor:pointer;
}
.faq-item__icon{ font-size:1.3rem; color: var(--primary-2); transition: transform .25s ease; flex:none; }
.faq-item.is-open .faq-item__icon{ transform: rotate(45deg); }
.faq-item__a{ max-height:0; overflow:hidden; transition: max-height .3s ease; padding: 0 22px; }
.faq-item__a p{ margin:0 0 18px; font-size:.92rem; }
.faq-item.is-open .faq-item__a{ max-height: 240px; }

/* Final CTA */
.final-cta{ padding: 100px 0; text-align:center; position:relative; overflow:hidden; }
.final-cta::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 30%, rgba(236,72,153,.22), transparent 60%);
}
.final-cta__inner{ position:relative; max-width: 620px; margin:0 auto; }
.final-cta h2{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.final-cta p{ font-size:1.1rem; margin-bottom: 28px; }

/* Footer */
.footer{ background: var(--bg-alt); border-top:1px solid var(--border); padding: 56px 0 100px; }
.footer__inner{ display:grid; grid-template-columns: 1.2fr .8fr 1.2fr; gap: 40px; }
.logo--footer{ display:inline-block; margin-bottom:10px; }
.footer p{ font-size:.85rem; }
.footer__links{ display:flex; flex-direction:column; gap:10px; }
.footer__links a{ font-size:.9rem; color: var(--text-dim); }
.footer__links a:hover{ color: var(--text); }
.footer__legal p{ font-size:.76rem; color: var(--text-dimmer); margin-bottom:8px; }

/* Mobile sticky bar */
.mobile-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:90;
  padding: 12px 16px; background: rgba(11,10,20,.9); backdrop-filter: blur(10px);
  border-top:1px solid var(--border);
}

/* ============ REVEAL ANIMATION ============ */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__visual{ order:-1; }
  .grid--4{ grid-template-columns: repeat(2, 1fr); }
  .grid--3{ grid-template-columns: repeat(2, 1fr); }
  .offer-card{ grid-template-columns: 1fr; }
  .offer-card__stack{ border-right:none; border-bottom:1px solid var(--border); }
  .footer__inner{ grid-template-columns: 1fr; }
}

@media (max-width: 480px){
  .btn{ white-space: normal; text-align: center; }
  .hero__actions .btn, .final-cta__inner .btn{ width: 100%; }
}

@media (max-width: 720px){
  .nav, .header__cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav.is-open{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background: var(--surface-solid); padding: 20px 24px; gap:16px; border-bottom:1px solid var(--border);
  }
  .grid--4, .grid--3, .grid--2{ grid-template-columns: 1fr; }
  .mobile-bar{ display:block; }
  .section{ padding: 64px 0; }
  .author{ flex-direction:column; text-align:center; }
  .guarantee__inner{ flex-direction:column; text-align:center; }
  body{ padding-bottom: 76px; }
}