/* ==========================================================================
   Estilos por seção (ordem da página)
   ========================================================================== */

/* Topbar ------------------------------------------------------------------*/
.topbar{
  position:sticky; top:0; z-index:var(--z-topbar);
  background:rgba(251,248,241,.86);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  max-width:1120px; margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topbar__brand{display:flex; align-items:baseline; gap:12px; text-decoration:none}
.topbar__mark{
  font-family:'Russo One', var(--font-display); font-weight:400; font-size:21px;
  color:var(--abyss); letter-spacing:.02em;
}
.topbar__name{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.topbar__nav{display:flex; align-items:center; gap:24px; margin-left:auto; margin-right:24px}
.topbar__nav a{
  font-size:14px; font-weight:600; color:var(--muted); text-decoration:none;
  transition:color .15s ease;
}
.topbar__nav a:hover{color:var(--abyss)}
@media(max-width:640px){
  .topbar__name{display:none}
  .topbar__nav{display:none}
}

/* 01 · Hero -----------------------------------------------------------------*/
.hero{
  background:
    radial-gradient(68% 58% at 78% 8%, rgba(46,196,182,.13), transparent 72%),
    radial-gradient(54% 48% at 14% 30%, rgba(255,107,91,.08), transparent 72%),
    var(--paper);
  color:var(--ink);
  padding:72px 0 96px;
}
.hero__inner{text-align:center}

.hero__badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--turquoise-d);
  background:rgba(46,196,182,.08); border:1px solid rgba(46,196,182,.45);
  padding:5px 12px; border-radius:999px; margin-bottom:22px;
}
.hero__badge-dot{
  width:5px; height:5px; border-radius:50%; background:var(--turquoise); flex-shrink:0;
}

.hero h1{color:var(--abyss); margin:0 auto 20px; max-width:22ch}
.hero .hi{color:var(--turquoise-d)}
.hero__sub{font-size:var(--fs-lead); color:var(--muted); max-width:62ch; margin:0 auto}
.hero__sub strong{color:var(--abyss)}
.hero__actions{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:30px}

/* painel com ilustração de trajeto + card interno de produto */
.hero__panel{
  position:relative; overflow:hidden;
  margin-top:56px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  padding:clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px);
}
.hero__routes{position:absolute; inset:0; width:100%; height:100%}
.hero__routes .r{fill:none; stroke-width:2; stroke-linecap:round}
.hero__routes .r--soft{stroke:#d7e3ee; stroke-dasharray:2 10}
.hero__routes .r--accent{stroke:rgba(46,196,182,.4); stroke-width:2.5; stroke-dasharray:8 10}
.hero__routes .r-node circle{fill:#c3d6e6}
.hero__routes .r-pin circle:first-child{fill:rgba(255,107,91,.18)}
.hero__routes .r-pin circle:last-child{fill:var(--coral)}

.hero__card{
  position:relative; /* acima da ilustração */
  max-width:620px; margin:0 auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  padding:28px 32px; text-align:center;
}
.hero__card-tag{font-size:11.5px; color:var(--turquoise-d); margin-bottom:6px}
.hero__card-title{
  font-family:var(--font-display); font-weight:700; font-size:1.25rem;
  color:var(--abyss); margin-bottom:20px;
}
.hero__stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.hero__stat{
  display:flex; flex-direction:column-reverse; text-align:center;
  background:var(--base); border:1px solid var(--line);
  border-radius:12px; padding:14px 8px;
}
.hero__stat dd{font-family:'Russo One', var(--font-display); font-weight:400; font-size:1.5rem; color:var(--abyss); line-height:1.1}
.hero__stat dt{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-top:4px;
}
.hero__card-route{
  margin-top:20px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.hero__card-route strong{color:var(--turquoise-d)}

@media(max-width:980px){
  .hero{padding:56px 0 72px}
}
@media(max-width:640px){
  .hero__actions .btn{width:100%}
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .hero__card{padding:24px 20px}
}

/* 02 · Problema ---------------------------------------------------------------*/
.problem{background:var(--paper)}
.pain{padding:28px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.pain:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(46,196,182,.4)}
.pain__tag{font-size:11.5px; color:var(--turquoise-d); margin-bottom:12px}
.pain h3{margin-bottom:10px}
.pain p{font-size:14px; color:var(--muted)}

/* 03 · A Travessia --------------------------------------------------------------*/
.journey{background:var(--base)}

.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-bottom:56px;
}
.steps__num{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:rgba(46,196,182,.12); border:1.5px solid var(--turquoise);
  color:var(--turquoise-d); font-weight:700; font-size:13.5px;
}
.steps__item h3{font-size:1rem; margin:14px 0 6px}
.steps__item p{font-size:13.5px; color:var(--muted)}

.phases{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr)); gap:20px}
.phase{
  padding:26px; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.phase:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.phase__head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.phase__num{font-size:11.5px; color:var(--turquoise-d); text-transform:uppercase; letter-spacing:.14em}
.phase h3{font-size:1.25rem; margin-bottom:8px}
.phase > p{font-size:13.5px; color:var(--muted); margin-bottom:16px}
.phase__mods{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto}
.phase__mods li{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.02em;
  padding:5px 10px; border:1px solid var(--line); border-radius:999px;
  background:var(--base); color:#47606f;
}
.phase--gate{border-top:4px solid var(--coral)}

.journey__cta{text-align:center; margin-top:44px}

@media(max-width:820px){
  .steps{grid-template-columns:1fr; gap:28px}
}

/* 04 · Bússola -------------------------------------------------------------------*/
.bussola{background:var(--surface); color:var(--ink); position:relative; overflow:hidden}
.bussola__grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.bussola h2{margin-top:14px}
.bussola .hi{color:var(--turquoise-d)}
.bussola .lead{color:var(--muted)}
.bussola .lead strong, .bussola .lead em{color:var(--abyss)}

.limits{margin:26px 0 22px}
.limits li{position:relative; padding:10px 0 10px 34px; color:var(--muted); font-size:14px}
.limits li strong{color:var(--abyss)}
.limits li::before{
  content:"✕"; position:absolute; left:0; top:10px;
  font-family:var(--font-mono); font-weight:700; color:var(--coral);
}
.bussola__why{
  font-size:13.5px; color:var(--muted);
  border-left:3px solid var(--turquoise); padding-left:14px;
}

.bussola__grid-lines{
  position:absolute; inset:0; left:48%;
  background-image:
    repeating-linear-gradient(90deg, rgba(11,42,74,.07) 0, rgba(11,42,74,.07) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(0deg, rgba(11,42,74,.07) 0, rgba(11,42,74,.07) 1px, transparent 1px, transparent 96px);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
  pointer-events:none;
}
.bussola__visual{position:relative; display:flex; align-items:center; justify-content:center}

@media(max-width:980px){
  .bussola__grid-lines{display:none}
}
.chat{position:relative; overflow:hidden; background:var(--paper); border-color:var(--line)}
.chat__head{
  display:flex; align-items:center; gap:10px;
  padding:14px 20px; border-bottom:1px solid var(--line);
  font-size:11.5px; color:var(--muted);
}
.chat__dot{width:8px; height:8px; border-radius:50%; background:var(--turquoise); flex-shrink:0}
.chat__body{display:flex; flex-direction:column; gap:12px; padding:20px}
.chat__msg{padding:12px 16px; border-radius:14px; font-size:13.5px; max-width:88%}
.chat__msg--user{align-self:flex-end; background:var(--sand); color:var(--ink); border-bottom-right-radius:4px}
.chat__msg--ai{align-self:flex-start; background:var(--base); color:var(--ink); border:1px solid #d8ebe9; border-bottom-left-radius:4px}
.chat__caption{padding:0 20px 16px; font-size:10.5px; color:var(--muted)}

@media(max-width:980px){
  .bussola__grid{grid-template-columns:1fr; gap:44px}
}

/* 05 · O que já está no ar ----------------------------------------------------------*/
.features{background:var(--paper)}
.feature{padding:28px}
.feature__tag{
  display:inline-block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ocean); background:rgba(30,95,142,.07);
  padding:4px 10px; border-radius:999px; margin-bottom:14px;
}
.feature h3{font-size:1.08rem; margin-bottom:8px}
.feature p{font-size:13.5px; color:var(--muted)}
.feature{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.feature:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(46,196,182,.4)}

/* 06 · Transformação -----------------------------------------------------------------*/
.transform{background:var(--paper); padding-top:0}
.transform__cols{
  display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center;
}
.transform__col{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm); padding:28px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.transform__col:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.transform__col h3{margin-bottom:14px}
.transform__col li{position:relative; padding:9px 0 9px 28px; font-size:13.5px; color:var(--muted); border-bottom:1px dashed var(--line)}
.transform__col li:last-child{border-bottom:0}
.transform__col li::before{position:absolute; left:0; font-family:var(--font-mono); font-weight:700}
.transform__col--before{border-top:4px solid var(--coral)}
.transform__col--before h3{color:var(--coral-d)}
.transform__col--before li::before{content:"✕"; color:var(--coral)}
.transform__col--after{border-top:4px solid var(--turquoise)}
.transform__col--after h3{color:var(--turquoise-d)}
.transform__col--after li::before{content:"✓"; color:var(--turquoise-d)}
.transform__arrow{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  text-align:center; white-space:nowrap;
}
@media(max-width:900px){
  .transform__cols{grid-template-columns:1fr}
}

/* 07 · Prova social ---------------------------------------------------------------------*/
.proof{background:var(--base)}
.t-card{
  padding:26px; display:flex; flex-direction:column; gap:16px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.t-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(46,196,182,.4)}
.t-card blockquote p{font-size:13.5px; line-height:1.65}
.t-card__author{display:flex; align-items:center; gap:12px}
.t-card__avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:var(--turquoise); color:var(--abyss-d);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:12.5px;
}
.t-card__who{display:flex; flex-direction:column}
.t-card__who strong{font-size:13.5px; color:var(--abyss)}
.t-card__who span{font-size:12px; color:var(--muted); margin-top:2px}

/* 08 · B2B ---------------------------------------------------------------------------------*/
.b2b{background:var(--ocean); color:var(--on-dark)}
.b2b__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.b2b h2{color:#fff; margin-top:14px}
.b2b .hi{color:var(--sand)}
.b2b .lead{color:#cfe3ef}
.b2b .lead strong{color:#fff}

.b2b__points{margin:26px 0 30px}
.b2b__points li{display:flex; gap:14px; padding:10px 0; font-size:14px; color:#cfe3ef}
.b2b__ico{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--turquoise); color:var(--turquoise);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:12.5px;
}

.report{
  background:rgba(7,28,51,.5); border-color:rgba(255,255,255,.14);
  color:var(--on-dark); padding:28px; box-shadow:none;
}
.report__tag{font-size:11.5px; color:var(--on-dark-accent); margin-bottom:10px}
.report h3{color:#fff; font-size:1.1rem; margin-bottom:22px}
.report__rows{display:flex; flex-direction:column; align-items:center; gap:6px}
.report__row{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center}
.report__label{font-size:10.5px; color:#9dc0d4; text-transform:uppercase; letter-spacing:.14em}
.report__stage{font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:#fff}
.report__stage--out{color:var(--turquoise)}
.report__arrow{color:var(--on-dark-accent); font-size:16px}
.report__caption{
  font-size:10.5px; color:#9dc0d4; margin-top:22px; padding-top:14px;
  border-top:1px dashed rgba(255,255,255,.25); text-align:center;
}

@media(max-width:980px){
  .b2b__grid{grid-template-columns:1fr; gap:44px}
}

/* 09 · Planos --------------------------------------------------------------------------------*/
.pricing{background:var(--paper)}
.pricing__grid{align-items:stretch}
.plan{position:relative; padding:30px; display:flex; flex-direction:column}
.plan__name{font-size:1.4rem}
.plan__for{font-size:13px; color:var(--muted); margin:4px 0 20px}
.plan__price{font-family:'Russo One', var(--font-display); font-weight:400; font-size:2.65rem; line-height:1; color:var(--abyss)}
.plan__currency{font-size:1.02rem; font-weight:600; color:var(--muted); margin-right:4px; vertical-align:super}
.plan__unit{font-size:11.5px; color:var(--muted); margin:8px 0 20px}
.plan__incl{display:flex; flex-direction:column; gap:10px; margin-bottom:26px; flex-grow:1}
.plan__incl li{position:relative; padding-left:26px; font-size:13.5px; color:#3d4f5c}
.plan__incl li::before{
  content:"✓"; position:absolute; left:0;
  font-family:var(--font-mono); font-weight:700; color:var(--turquoise-d);
}
.plan--featured{border:2px solid var(--turquoise); box-shadow:var(--shadow-md)}
.plan__flag{
  position:absolute; top:-13px; left:26px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--coral); color:var(--abyss-d); font-weight:700;
  padding:4px 12px; border-radius:999px;
}
.pricing__note{text-align:center; margin-top:38px; font-size:13.5px; color:var(--muted)}
.pricing__note a{color:var(--ocean); font-weight:600}
.pricing__note strong{color:var(--abyss)}

/* 10 · FAQ ------------------------------------------------------------------------------------*/
.faq{background:var(--base)}

/* 11 · CTA final --------------------------------------------------------------------------------*/
.final{background:var(--paper); color:var(--ink)}
.final__inner{max-width:720px; text-align:center}
.final h2{color:var(--abyss); margin-bottom:16px}
.final .hi{color:var(--turquoise-d)}
.final p{color:var(--muted); max-width:52ch; margin:0 auto 30px}
.final p.final__note{margin:36px auto 0; font-size:12px; color:var(--turquoise-d)}

/* Footer -----------------------------------------------------------------------------------------*/
.footer{background:var(--abyss-d); color:var(--on-dark-muted); padding:56px 0 28px}
.footer__grid{display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center}
.footer__brand img{width:96px; height:auto}
.footer__tagline{font-family:var(--font-display); font-size:14px; color:var(--on-dark); margin-top:12px; max-width:22ch}
.footer__legal p{font-size:13px; margin:4px 0}
.footer__legal strong{color:#fff; letter-spacing:.06em}
.footer__legal a{color:#9ec5d8}
.footer__legal a:hover{color:#fff}
.footer__credit{
  max-width:1120px; margin:36px auto 0; padding:20px 24px 0;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center; font-size:12px; color:rgba(234,241,244,.45);
}
.footer__credit a{color:#7fa8ff; text-decoration:none}
.footer__credit a:hover{text-decoration:underline}

@media(max-width:640px){
  .footer__grid{grid-template-columns:1fr; gap:24px}
}