/* ===================================================
   LANDING — Tema Escuro Premium, direção Apple-style
   Tipografia tight · pill buttons · bento grid · blur reveals
   Marca: teal (#2FD4C4) + champagne (#D9B871) sobre #080A0E
=================================================== */

:root {
  /* Fundos */
  --bg:          #080A0E;
  --bg-2:        #0C0F14;
  --surface:     #12161D;
  --surface-2:   #181D26;

  /* Bordas hairline */
  --line:        rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.13);

  /* Texto */
  --text:        #F2F4F7;
  --text-mut:    #9AA3B2;

  /* Marca */
  --primary:      #2FD4C4;
  --primary-deep: #14B8A6;
  --accent:       #D9B871;
  --grad: linear-gradient(135deg, #2FD4C4 0%, #14B8A6 100%);

  /* Geometria — raios generosos, estilo Apple */
  --radius:    20px;
  --radius-lg: 28px;
  --max:       1180px;
  --trans:     .22s ease;

  /* Easings cinematográficos */
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-reveal:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Títulos — Inter tight, feel SF Pro Display */
h1, h2, h3 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.logo { font-family: 'Sora', sans-serif }

.container { max-width:var(--max); margin:0 auto; padding:0 28px }
section { padding:140px 0 }

h2 {
  font-size: clamp(34px, 4.4vw, 56px);
  text-align: center;
  color: var(--text);
}
.section-sub {
  text-align: center;
  color: var(--text-mut);
  max-width: 660px;
  margin: 22px auto 0;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 450;
}
a { text-decoration:none; color:inherit }

::selection { background: rgba(47,212,196,.25); color: var(--text) }

/* ===== EYEBROW ===== */
.eyebrow {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}

/* ===== NAV — vidro fino, estilo Apple ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8,10,14,.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease;
}
.nav.scrolled {
  background: rgba(8,10,14,.82);
  border-bottom-color: var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.logo {
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 9px;
}
.logo-mark { display:inline-block; flex-shrink:0; transition: transform var(--trans) }
.logo:hover .logo-mark { transform: rotate(-6deg) scale(1.06) }

.nav-links { display:flex; gap:34px }
.nav-links a {
  color: var(--text-mut);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: color var(--trans);
}
.nav-links a:hover { color: var(--text) }

.nav-actions { display:flex; align-items:center; gap:12px }
.lang {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 980px;
  padding: 5px 13px;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-mut);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--trans), color var(--trans);
}
.lang:hover { border-color: var(--primary); color: var(--primary) }

/* ===== BOTÕES — pill, flat, Apple-like ===== */
.btn {
  display: inline-block;
  border-radius: 980px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
  padding: 14px 30px;
  cursor: pointer;
  transition: transform .25s var(--ease-out-expo), box-shadow .25s var(--ease-out-expo),
              background .25s ease, border-color .25s ease, color .25s ease;
  font-family: inherit;
  text-align: center;
  border: none;
}
.btn-sm  { padding: 8px 18px; font-size:13.5px }
.btn-lg  { padding: 17px 36px; font-size:17px }
.btn-block { display:block; width:100% }

.btn-primary {
  background: var(--primary);
  color: #052421;
}
.btn-primary:hover {
  background: #45E2D3;
  transform: scale(1.02);
  box-shadow: 0 10px 40px rgba(47,212,196,.28);
}
.btn-primary:active { transform: scale(.99) }

.btn-ghost {
  background: rgba(255,255,255,.05);
  color: var(--text);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.24);
  transform: scale(1.02);
}

.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px }

/* Link com seta — "Learn more ›" da Apple */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--primary);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: gap .25s var(--ease-out-expo), color var(--trans);
  align-self: center;
}
.link-arrow::after {
  content: '›';
  font-size: 20px;
  line-height: 1;
  transition: transform .25s var(--ease-out-expo);
}
.link-arrow:hover { color: #45E2D3 }
.link-arrow:hover::after { transform: translateX(3px) }

/* ===== SCROLL REVEAL — fade + blur, assinatura Apple ===== */
.reveal-fade {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity .8s var(--ease-reveal), transform .8s var(--ease-reveal), filter .8s var(--ease-reveal);
}
.reveal-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-fade { opacity:1; transform:none; filter:none; transition:none }
}

/* ===== HERO ===== */
.hero {
  background: var(--bg);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
}

.hero-glow {
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 620px;
  background: radial-gradient(ellipse at center, rgba(47,212,196,.14) 0%, rgba(47,212,196,.03) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: orbFloat 9s ease-in-out infinite;
  will-change: transform;
}
.hero-orb-1 { width:460px; height:460px; top:-130px; left:-90px;
  background: radial-gradient(circle, rgba(47,212,196,.09) 0%, transparent 70%); animation-duration:9s }
.hero-orb-2 { width:380px; height:380px; top:50px; right:-70px;
  background: radial-gradient(circle, rgba(217,184,113,.07) 0%, transparent 70%); animation-delay:-3s; animation-duration:11s }
.hero-orb-3 { width:300px; height:300px; bottom:-60px; left:32%;
  background: radial-gradient(circle, rgba(47,212,196,.06) 0%, transparent 70%); animation-delay:-6s; animation-duration:13s }
@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1) }
  33%      { transform: translateY(-18px) scale(1.04) }
  66%      { transform: translateY(10px) scale(.97) }
}
@media (prefers-reduced-motion: reduce) { .hero-orb { animation:none } }

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 10%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 72px;
  align-items: center;
  width: 100%;
}

.hero-text-col { display:flex; flex-direction:column; align-items:flex-start }

.badge {
  display: inline-block;
  background: rgba(47,212,196,.08);
  color: var(--primary);
  border: 1px solid rgba(47,212,196,.2);
  font-weight: 500;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 980px;
  margin-bottom: 30px;
  letter-spacing: -.005em;
}
.badge::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
  margin-top: -2px;
}

.hero h1 {
  font-size: clamp(40px, 5.4vw, 76px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.hero h1 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--text-mut);
  margin: 26px 0 0;
  max-width: 540px;
  line-height: 1.65;
  font-weight: 450;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.hero-trust { display:flex; gap:38px; margin-top:56px; flex-wrap:wrap }
.hero-trust div { display:flex; flex-direction:column; align-items:flex-start }
.hero-trust strong {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-trust span { font-size:12.5px; color:var(--text-mut); margin-top:2px }
.hero-trust div + div { padding-left:38px; border-left:1px solid var(--line) }

/* ===== DASHBOARD MOCKUP ===== */
.hero-dashboard-wrap { position:relative; perspective:1200px; will-change:transform }
.dashboard {
  background: linear-gradient(160deg, #11151D 0%, #0D1117 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(47,212,196,0.08),
    0 40px 100px rgba(0,0,0,0.72),
    0 0 70px rgba(47,212,196,0.05);
  width: 100%;
  max-width: 540px;
  font-size: 13px;
  transform: perspective(1000px) rotateX(6deg) rotateY(-4deg) scale(0.92);
  transition: box-shadow .6s var(--ease-out-expo);
}
.hero-dashboard-wrap::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at 50% 50%, rgba(47,212,196,0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}

.db-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.db-topbar-dots { display:flex; gap:5px; flex-shrink:0 }
.db-topbar-dots span { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.12) }
.db-topbar-dots span:nth-child(1) { background:rgba(255,96,96,0.55) }
.db-topbar-dots span:nth-child(2) { background:rgba(255,189,68,0.55) }
.db-topbar-dots span:nth-child(3) { background:rgba(47,212,196,0.55) }
.db-topbar-title {
  flex: 1;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  letter-spacing: .3px;
}
.db-topbar-live {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700;
  color: var(--primary);
  letter-spacing: .4px;
  text-transform: uppercase;
}
.db-live-dot { width:6px; height:6px; border-radius:50%; background:var(--primary); animation:livePulse 2s ease-in-out infinite }
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.db-metrics {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.db-metric-card { background:#11151D; padding:14px 14px 12px; display:flex; flex-direction:column; gap:3px }
.db-metric-primary { background: linear-gradient(135deg, rgba(47,212,196,0.07) 0%, #11151D 100%) }
.db-metric-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.8px; color:rgba(255,255,255,0.38) }
.db-metric-value { font-size:22px; font-weight:700; color:var(--text); letter-spacing:-.02em; line-height:1.1 }
.db-roi-val {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.db-metric-delta { font-size:10px; font-weight:600; letter-spacing:.2px }
.db-delta-up   { color:#4ade80 }
.db-delta-down { color:var(--primary) }

.db-chart-wrap { padding:14px 16px 10px; border-bottom:1px solid rgba(255,255,255,0.07) }
.db-chart-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.db-chart-title { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:rgba(255,255,255,0.45) }
.db-chart-period { font-size:10px; color:rgba(255,255,255,0.25) }
.db-chart { display:flex; align-items:flex-end; gap:5px; height:56px }
.db-bar-group { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end }
.db-bar { width:100%; height:var(--h); background:rgba(47,212,196,0.22); border-radius:3px 3px 0 0; min-height:3px }
.db-bar-active .db-bar {
  background: linear-gradient(to top, rgba(47,212,196,0.9), rgba(47,212,196,0.5));
  box-shadow: 0 0 10px rgba(47,212,196,0.35);
}
.db-bar-group span { font-size:8.5px; color:rgba(255,255,255,0.22); font-weight:600 }

.db-table-wrap { padding:12px 16px 16px }
.db-table-header { margin-bottom:10px }
.db-table { width:100%; border-collapse:collapse }
.db-table th {
  font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px;
  color:rgba(255,255,255,0.28); text-align:left; padding:0 0 7px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.db-table th:not(:first-child) { text-align:center }
.db-table td {
  font-size:11.5px; color:rgba(255,255,255,0.72); padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,0.04); vertical-align:middle;
}
.db-table td:not(:first-child) { text-align:center }
.db-table tr:last-child td { border-bottom:none }
.db-table td:first-child { display:flex; align-items:center; gap:6px; font-weight:500 }
.db-proc-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0 }
.db-roi-chip { display:inline-block; padding:2px 8px; border-radius:20px; font-size:10.5px; font-weight:700 }
.db-roi-high { background:rgba(47,212,196,0.12); color:var(--primary); border:1px solid rgba(47,212,196,0.2) }
.db-roi-med  { background:rgba(217,184,113,0.10); color:var(--accent); border:1px solid rgba(217,184,113,0.18) }

/* ===== STATEMENTS — tela cheia, tipografia dramática ===== */
.statement-section {
  padding: 170px 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.statement-section::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 1px; height: 84px;
  background: linear-gradient(to bottom, transparent, rgba(47,212,196,0.3));
}
.statement-section-alt { background: var(--bg-2) }

.statement-text {
  font-size: clamp(42px, 8.5vw, 104px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.05em;
  color: var(--text);
  max-width: 980px;
  margin: 0 auto;
  opacity: 0;
  transform: scale(0.95) translateY(24px);
  filter: blur(10px);
  transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo), filter 1s var(--ease-out-expo);
}
.statement-text em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.statement-text.is-visible { opacity:1; transform:scale(1) translateY(0); filter:blur(0) }
@media (prefers-reduced-motion: reduce) {
  .statement-text { opacity:1; transform:none; filter:none; transition:none }
}

/* ===== PROBLEM ===== */
.problem {
  background: var(--bg-2);
  padding: 110px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ===== GRID GENÉRICO ===== */
.grid { display:grid; gap:20px; margin-top:64px }
.grid-4 { grid-template-columns: repeat(4,1fr) }
.grid-3 { grid-template-columns: repeat(3,1fr) }

/* ===== ICONE CHIP ===== */
.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: rgba(47,212,196,.08);
  border: 1px solid rgba(47,212,196,.16);
  border-radius: 14px;
  color: var(--primary);
  margin-bottom: 18px;
  transition: transform .5s var(--ease-out-expo), background .5s var(--ease-out-expo);
  flex-shrink: 0;
}

/* ===== BENTO GRID — assinatura Apple ===== */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-top: 64px;
}
.bento-lg { grid-column: span 7 }
.bento-sm { grid-column: span 5 }
.bento-card:nth-child(3) { grid-column: span 5 }
.bento-card:nth-child(4) { grid-column: span 7 }

.bento-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 34px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  transition: transform .5s var(--ease-out-expo), border-color .5s var(--ease-out-expo),
              background .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo);
}
.bento-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 0%, rgba(47,212,196,.05) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .5s var(--ease-out-expo);
  pointer-events: none;
}
.bento-card:hover {
  background: var(--surface-2);
  border-color: rgba(255,255,255,.14);
  transform: translateY(-4px);
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.bento-card:hover::after { opacity:1 }
.bento-card:hover .ic { transform: scale(1.08); background: rgba(47,212,196,.13) }

.bento-card h3 {
  font-size: 21px;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -.025em;
}
.bento-card p {
  color: var(--text-mut);
  font-size: 15px;
  line-height: 1.65;
  max-width: 480px;
}

/* Decorações dentro dos bentos */
.bento-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 26px;
}
.bento-chips span {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-mut);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 980px;
  padding: 6px 14px;
}
.bento-pill {
  margin-top: auto;
  padding-top: 26px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bento-ghost {
  position: absolute;
  right: 18px;
  bottom: -14px;
  font-size: 108px;
  font-weight: 800;
  letter-spacing: -.05em;
  color: rgba(47,212,196,.07);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ===== PARA QUIEN ===== */
.para-quien { background: var(--bg-2) }
.pq-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:64px }
.pq-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 34px;
  transition: border-color .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo);
}
.pq-col:hover { border-color:var(--line-strong); box-shadow:0 16px 48px rgba(0,0,0,.35) }
.pq-col h3 { font-size:19px; margin-bottom:18px; letter-spacing:-.02em }
.pq-yes h3 { color: var(--primary) }
.pq-no  h3 { color: #f07070 }
.pq-col ul { list-style:none }
.pq-col li {
  padding: 11px 0 11px 28px;
  position: relative;
  font-size: 14.5px;
  color: var(--text-mut);
  border-bottom: 1px solid var(--line);
}
.pq-col li:last-child { border-bottom:none }
.pq-yes li::before { content:"✓"; position:absolute; left:0; color:var(--primary); font-weight:700 }
.pq-no  li::before { content:"✕"; position:absolute; left:0; color:#f07070; font-weight:700 }

/* ===== PLANOS — 4 colunas ===== */
.planes { background: var(--bg) }
.plans-grid { gap:18px }
.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo), transform .5s var(--ease-out-expo);
}
.plan:hover {
  border-color: rgba(255,255,255,.16);
  transform: translateY(-4px);
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.plan-featured {
  border-color: rgba(47,212,196,.4);
  background: linear-gradient(165deg, var(--surface-2) 0%, #131c26 100%);
  box-shadow: 0 0 0 1px rgba(47,212,196,.08), 0 28px 72px rgba(0,0,0,.5);
}
.plan-featured:hover {
  border-color: rgba(47,212,196,.65);
  box-shadow: 0 0 0 1px rgba(47,212,196,.16), 0 12px 44px rgba(47,212,196,.16), 0 28px 72px rgba(0,0,0,.5);
}
.plan-tag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #052421;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 980px;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(47,212,196,.35);
}
.plan h3 { font-size:19px; color:var(--text); letter-spacing:-.02em }
.price {
  font-size: 34px;
  font-weight: 800;
  color: var(--text);
  margin: 10px 0 2px;
  letter-spacing: -.035em;
}
.price span { font-size:14px; font-weight:500; color:var(--text-mut); letter-spacing:0 }
.plan-for { color:var(--text-mut); font-size:13.5px; margin-bottom:20px; min-height:40px }
.plan ul { list-style:none; margin-bottom:22px; flex:1 }
.plan li {
  padding: 9px 0 9px 25px;
  position: relative;
  font-size: 13.5px;
  color: var(--text-mut);
  border-bottom: 1px solid var(--line);
}
.plan li::before { content:"✓"; position:absolute; left:0; color:var(--primary); font-weight:700 }
.plan-roi-note {
  background: rgba(47,212,196,.06);
  border: 1px solid rgba(47,212,196,.14);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text-mut);
  margin-bottom: 20px;
  line-height: 1.5;
}
.guarantee {
  text-align: center;
  margin-top: 40px;
  color: var(--text-mut);
  font-weight: 500;
  background: rgba(47,212,196,.05);
  border: 1px solid rgba(47,212,196,.14);
  width: 100%;
  padding: 18px 22px;
  border-radius: 16px;
  font-size: 14.5px;
}

/* ===== PROCESO ===== */
.proceso { background: var(--bg-2) }
.step { text-align:center; padding:12px }
.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--grad);
  color: #052421;
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 14px;
  box-shadow: 0 4px 24px rgba(47,212,196,.26);
  transition: box-shadow .5s var(--ease-out-expo), transform .5s var(--ease-out-expo);
}
.step:hover .num { box-shadow:0 6px 34px rgba(47,212,196,.42); transform:scale(1.06) }
.step-time {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--accent);
  margin-bottom: 8px;
}
.step h3 { font-size:19px; color:var(--text); margin-bottom:8px; letter-spacing:-.02em }
.step p  { color:var(--text-mut); font-size:14.5px; max-width:310px; margin:0 auto; line-height:1.65 }

/* ===== GARANTIA ===== */
.garantia-section {
  background: var(--bg);
  padding: 100px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.garantia-box {
  display: flex;
  align-items: center;
  gap: 34px;
  background: linear-gradient(135deg, rgba(47,212,196,.06) 0%, rgba(47,212,196,.02) 100%);
  border: 1px solid rgba(47,212,196,.2);
  border-radius: var(--radius-lg);
  padding: 48px 56px;
  max-width: 820px;
  margin: 0 auto;
  box-shadow: 0 20px 64px rgba(0,0,0,.3);
}
.garantia-icon { flex-shrink:0 }
.garantia-content h2 {
  text-align: left;
  font-size: clamp(24px, 2.8vw, 32px);
  margin-bottom: 10px;
}
.garantia-content p { color:var(--text-mut); font-size:16px; line-height:1.65 }

/* ===== TESTIMONIOS ===== */
.testimonios { background: var(--bg-2) }
.metrics-strip {
  display: flex;
  margin-top: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.metric-item {
  flex: 1;
  text-align: center;
  padding: 28px 16px;
  border-right: 1px solid var(--line);
  transition: background .5s var(--ease-out-expo);
}
.metric-item:hover { background: var(--surface-2) }
.metric-item:last-child { border-right:none }
.metric-item strong {
  display: block;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.metric-item span { font-size:13px; color:var(--text-mut) }
.metrics-source {
  margin: 12px auto 0;
  max-width: 900px;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}
.metrics-source a {
  color: var(--text-mut);
  text-decoration: underline;
  text-decoration-color: rgba(47,212,196,.35);
  text-underline-offset: 3px;
}
.metrics-source a:hover { color: var(--primary) }

.testimonios-grid { margin-top:44px }
.tcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo), transform .5s var(--ease-out-expo);
}
.tcard:hover {
  border-color: var(--line-strong);
  box-shadow: 0 20px 56px rgba(0,0,0,.45);
  transform: translateY(-3px);
}
.ejemplo-tag {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(255,255,255,.06);
  color: var(--text-mut);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 980px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tcard-body { padding:30px 26px 26px; display:flex; flex-direction:column; flex:1 }
.tcard-quote { font-size:15px; color:var(--text); line-height:1.65; flex:1; margin-bottom:22px }
.tcard-author { display:flex; align-items:center; gap:12px; margin-bottom:14px }
.tcard-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad);
  color: #052421;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tcard-author strong { display:block; font-size:14.5px; color:var(--text) }
.tcard-author span  { display:block; font-size:12.5px; color:var(--text-mut) }
.tcard-result {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(47,212,196,.08);
  border-radius: 10px;
  padding: 9px 13px;
}

.section-cta { text-align:center; margin-top:56px }

/* ===== FAQ ===== */
.faq-section { background: var(--bg) }
.faq-list { margin-top:52px; max-width:760px; margin-left:auto; margin-right:auto }
.faq-item { border-bottom:1px solid var(--line) }
.faq-item:first-child { border-top:1px solid var(--line) }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
  padding: 24px 44px 24px 0;
  position: relative;
  transition: color .3s var(--ease-out-expo);
}
.faq-q:hover { color: var(--primary) }
.faq-q::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: var(--text-mut);
  font-weight: 300;
  line-height: 1;
  transition: transform .3s var(--ease-out-expo), color .3s var(--ease-out-expo);
}
.faq-q:hover::after { color: var(--primary) }
.faq-q[aria-expanded="true"]::after { content:"−"; transform:translateY(-50%) }
.faq-a { padding:0 44px 24px 0 }
.faq-a p { color:var(--text-mut); font-size:15px; line-height:1.7 }

/* ===== FORMULARIO ===== */
.lead-form-section { background: var(--bg-2); padding:140px 0; border-top:1px solid var(--line) }
.lead-form-box {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 56px 60px;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: 0 40px 110px rgba(0,0,0,.5);
}
.lead-form-box h2 { font-size:clamp(28px,3vw,38px); margin-bottom:6px }
.lead-form-box .section-sub { margin-bottom:38px; font-size:16px }
.lead-form { display:flex; flex-direction:column; gap:18px }
.form-group { display:flex; flex-direction:column; gap:7px }
.form-group label { font-size:13.5px; font-weight:600; color:var(--text-mut) }
.form-group input,
.form-group select {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface-2);
  transition: border-color .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo);
  -webkit-appearance: none;
  appearance: none;
}
.form-group input::placeholder { color: rgba(154,163,178,.5) }
.form-group select option { background: var(--surface-2); color: var(--text) }
.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(47,212,196,.12);
}
.form-group input.input-error,
.form-group select.input-error { border-color:#f07070 }
.field-error { font-size:12.5px; color:#f07070; min-height:16px }
.lead-form .btn { margin-top:8px }

.wa-alt { text-align:center; margin-top:22px; font-size:14px; color:var(--text-mut) }
.wa-alt a {
  color: var(--primary);
  font-weight: 600;
  transition: color var(--trans);
}
.wa-alt a:hover { color:#45E2D3 }

.microcopy-seg { text-align:center; margin-top:24px; font-size:13px; color:var(--text-mut); line-height:1.5; opacity:.8 }
.microcopy-pd  { text-align:center; margin-top:8px; font-size:13px; color:var(--text-mut); font-style:italic; opacity:.65 }

/* ===== FOOTER ===== */
.footer { background:var(--bg); border-top:1px solid var(--line); color:var(--text-mut); padding:56px 0 }
.footer-inner { text-align:center }
.footer .logo { color:var(--text); display:inline-flex; align-items:center; gap:8px; margin-bottom:12px; font-size:18px }
.footer p { font-size:13.5px }

/* ===================================================
   RESPONSIVE
=================================================== */
@media (max-width: 1080px) {
  .grid-4, .plans-grid { grid-template-columns: repeat(2,1fr) }
  .plan-for { min-height:auto }
}

@media (max-width: 1024px) {
  .hero-inner { gap:44px }
}

@media (max-width: 900px) {
  section { padding:104px 0 }
  .grid-3 { grid-template-columns:1fr }
  .nav-links { display:none }
  .pq-grid { grid-template-columns:1fr }

  .bento { grid-template-columns:1fr; gap:16px }
  .bento-lg, .bento-sm,
  .bento-card:nth-child(3), .bento-card:nth-child(4) { grid-column:auto }
  .bento-card { min-height:auto }

  .garantia-box { flex-direction:column; text-align:center; padding:38px 30px }
  .garantia-content h2, .garantia-content p { text-align:center }
  .metrics-strip { flex-direction:column }
  .metric-item { border-right:none; border-bottom:1px solid var(--line) }
  .metric-item:last-child { border-bottom:none }
  .lead-form-box { padding:42px 32px }

  .hero { padding:80px 0; min-height:auto; text-align:center }
  .hero-inner { grid-template-columns:1fr; gap:52px }
  .hero-text-col { align-items:center; text-align:center }
  .hero-cta { justify-content:center }
  .hero-trust { justify-content:center }
  .hero-trust div { align-items:center }
  .hero-trust div + div { padding-left:30px }
  .hero-dashboard-wrap { max-width:480px; margin:0 auto }
  .dashboard { transform:scale(0.96) }

  .statement-section { padding:120px 0 }
}

@media (max-width: 560px) {
  section { padding:84px 0 }
  .grid-4, .plans-grid { grid-template-columns:1fr }
  .hero-trust { gap:20px }
  .hero-trust div + div { border-left:none; padding-left:0 }
  .btn-block { width:100% }
  .garantia-box { padding:30px 22px }
  .lead-form-box { padding:34px 22px }
  .hero-orb, .hero-grid { display:none }
  .dashboard { transform:none !important; font-size:12px }
  .db-metric-value { font-size:18px }
  .db-chart { height:44px }
  .statement-section { padding:90px 0 }
  .statement-text { font-size:clamp(34px,10.5vw,56px); letter-spacing:-.04em }
  .bento-ghost { font-size:72px }
}

/* ===== SISTEMA VECTA v2 — seções novas (ROI, escassez, 7 passos, plano premium) ===== */

/* Fluxo de 7 passos — herda .step; grid-4 vira 4+3 */
.steps-flow { margin-top: 56px }

/* Seção ROI */
.roi-section { background: var(--bg-2) }
.roi-box {
  max-width: 640px;
  margin: 48px auto 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.roi-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
}
.roi-row:last-child { border-bottom: none }
.roi-label { color: var(--text-mut); font-size: 15px }
.roi-value { font-weight: 700; font-size: 17px; white-space: nowrap }
.roi-row-total { background: rgba(47,212,196,0.07) }
.roi-row-total .roi-label { color: var(--text); font-weight: 600 }
.roi-value-hl {
  font-size: 24px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.roi-note {
  max-width: 640px;
  margin: 22px auto 0;
  text-align: center;
  color: var(--text-mut);
  font-size: 14px;
  line-height: 1.6;
}

/* Escassez real nos planos */
.plan-scarcity {
  max-width: 660px;
  margin: 44px auto 0;
  text-align: center;
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  padding: 18px 26px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Plano premium — Turismo Médico */
.plan-premium { border-color: rgba(217,184,113,0.4) }
.plan-premium:hover { border-color: rgba(217,184,113,0.65) }
.plan-tag-premium {
  background: linear-gradient(135deg, #D9B871, #C9A45C);
  color: #14110A;
}

/* Grid de erros (autoridade) */
.errores-grid { margin-top: 56px }

@media (max-width: 560px) {
  .roi-row { padding: 15px 18px }
  .roi-label { font-size: 13.5px }
  .roi-value { font-size: 15px }
  .roi-value-hl { font-size: 20px }
}

/* ===== SERVICIOS — HUB (conceito clay 3D adaptado ao tema escuro) ===== */
.servicios-hub { background: var(--bg-2) }

.hub-scroll-stage {
  position: relative;
  height: 155vh;
  min-height: 1050px;
  margin-top: 56px;
}

.hub-graphic {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 450px;
  margin: 56px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Círculos concéntricos */
.hub-circles {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.015);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04);
  display: flex; justify-content: center; align-items: center;
  z-index: 1;
}
.hub-circles::before {
  content: "";
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 15px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04);
  position: absolute;
}
.hub-circles::after {
  content: "";
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(47,212,196,0.05);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.25), 0 0 0 1px rgba(47,212,196,0.12);
  position: absolute;
}

/* Centro — logo Vecta com glow teal */
.hub-center {
  position: relative;
  z-index: 10;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid rgba(47,212,196,0.25);
  display: flex; justify-content: center; align-items: center;
  filter: drop-shadow(0 10px 22px rgba(47,212,196,0.22));
  will-change: transform, filter;
}
.hub-center::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(47,212,196,.45);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* Líneas de conexión */
.hub-lines {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
}
.hub-line {
  fill: none;
  stroke: rgba(47,212,196,0.3);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 4 6;
  will-change: opacity, stroke-dashoffset;
}

/* Nodos flotantes — dark clay */
.hub-node {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 130px;
  text-align: center;
}
.hub-node-icon {
  width: 64px; height: 64px;
  background: linear-gradient(145deg, #1C222C, #12161D);
  border-radius: 16px;
  display: flex; justify-content: center; align-items: center;
  color: var(--primary);
  box-shadow:
    10px 15px 25px rgba(0,0,0,0.45),
    -4px -4px 12px rgba(255,255,255,0.03),
    inset 2px 2px 5px rgba(255,255,255,0.07),
    inset -2px -2px 5px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: default;
  transition: border-color var(--trans), transform var(--trans);
  will-change: transform, opacity, filter;
}
.hub-node:hover .hub-node-icon {
  border-color: rgba(47,212,196,0.45);
  transform: translateY(-3px);
}
.hub-node-icon svg { width: 30px; height: 30px }
.hub-node-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mut);
  line-height: 1.35;
  will-change: opacity, transform;
}
.hub-node:hover .hub-node-label { color: var(--text) }

/* Movimento centro -> destinos. O JS ativa somente quando disponível. */
.hub-graphic.hub-motion-ready .hub-node-icon,
.hub-graphic.hub-motion-ready .hub-node-label {
  transition: none;
}
.hub-graphic.hub-motion-ready .hub-node.is-arrived .hub-node-icon {
  border-color: rgba(47,212,196,.46);
  box-shadow:
    0 0 0 1px rgba(47,212,196,.12),
    0 14px 34px rgba(0,0,0,.5),
    0 0 28px rgba(47,212,196,.18),
    inset 2px 2px 5px rgba(255,255,255,.09),
    inset -2px -2px 5px rgba(0,0,0,.5);
}
.hub-graphic.is-settled .hub-center::before {
  animation: hubCenterSignal 2.8s var(--ease-out-expo) infinite;
}
.hub-graphic.is-settled .hub-line {
  animation: hubLineSignal 4.5s linear infinite;
}
.hub-graphic.is-settled .hub-line:nth-child(2),
.hub-graphic.is-settled .hub-line:nth-child(5) { animation-delay: -.8s }
.hub-graphic.is-settled .hub-line:nth-child(3),
.hub-graphic.is-settled .hub-line:nth-child(6) { animation-delay: -1.6s }
@keyframes hubCenterSignal {
  0% { opacity:.5; transform:scale(1) }
  55%,100% { opacity:0; transform:scale(1.75) }
}
@keyframes hubLineSignal {
  to { stroke-dashoffset:-30 }
}

/* Posiciones (3 izquierda, 3 derecha) */
.hub-l1 { top: 12%; left: 14%; }
.hub-l2 { top: 50%; left: 8%; transform: translateY(-50%); }
.hub-l3 { bottom: 8%; left: 14%; }
.hub-r1 { top: 12%; right: 14%; }
.hub-r2 { top: 50%; right: 8%; transform: translateY(-50%); }
.hub-r3 { bottom: 8%; right: 14%; }

/* Mobile: hub vira grid simples */
@media (max-width: 900px) {
  .hub-scroll-stage { height:auto; min-height:0; margin-top:56px }
  .hub-scroll-stage .hub-graphic { position:static; top:auto }
  .hub-circles, .hub-lines { display: none }
  .hub-graphic {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 14px;
    max-width: 420px;
    overflow: visible;
  }
  .hub-center {
    position:relative;
    grid-column:1 / -1;
    justify-self:center;
    width:78px;
    height:78px;
    margin-bottom:8px;
    transform:none !important;
    filter:drop-shadow(0 12px 28px rgba(47,212,196,.28)) !important;
  }
  .hub-graphic.hub-motion-ready.is-visible .hub-center::before {
    animation:hubCenterSignal 2.8s var(--ease-out-expo) infinite;
  }
  .hub-node { position: static; transform: none; width: auto }
  .hub-graphic.hub-motion-ready .hub-node {
    opacity: 0;
    transform: translateY(14px) scale(.96);
  }
  .hub-graphic.hub-motion-ready.is-visible .hub-node {
    animation: hubMobileIn .65s var(--ease-out-expo) forwards;
    animation-delay: calc(var(--hub-i, 0) * 80ms);
  }
  .hub-graphic.hub-motion-ready .hub-node-icon,
  .hub-graphic.hub-motion-ready .hub-node-label {
    opacity: 1;
    filter: none;
    transform: none;
  }
  .hub-graphic.hub-motion-ready.is-visible .hub-node-icon {
    animation:hubMobileNodePulse 7.2s ease-in-out infinite;
    animation-delay:calc(.75s + var(--hub-i, 0) * 1.05s);
  }
  .hub-graphic.hub-motion-ready.is-visible .hub-node-label {
    animation:hubMobileLabelPulse 7.2s ease-in-out infinite;
    animation-delay:calc(.75s + var(--hub-i, 0) * 1.05s);
  }
}
@keyframes hubMobileIn { to { opacity:1; transform:translateY(0) scale(1) } }
@keyframes hubMobileNodePulse {
  0%,3%,17%,100% { transform:translateY(0) scale(1); border-color:rgba(255,255,255,.06); box-shadow:10px 15px 25px rgba(0,0,0,.45),-4px -4px 12px rgba(255,255,255,.03),inset 2px 2px 5px rgba(255,255,255,.07),inset -2px -2px 5px rgba(0,0,0,.5) }
  7%,12% { transform:translateY(-5px) scale(1.06); border-color:rgba(47,212,196,.58); box-shadow:0 16px 34px rgba(0,0,0,.52),0 0 30px rgba(47,212,196,.28),inset 2px 2px 5px rgba(255,255,255,.1),inset -2px -2px 5px rgba(0,0,0,.5) }
}
@keyframes hubMobileLabelPulse {
  0%,3%,17%,100% { color:var(--text-mut); transform:translateY(0) }
  7%,12% { color:var(--text); transform:translateY(-2px) }
}
@media (max-width: 360px) {
  .hub-graphic { grid-template-columns: 1fr }
  .hub-center { grid-column:1 }
}

/* ===================================================
   VECTA EXPERIENCE — navegação e jornada interativa
=================================================== */
.skip-link {
  position: fixed;
  left: 18px;
  top: 14px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--primary);
  color: #052421;
  font-weight: 700;
  transform: translateY(-180%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0) }

.menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255,255,255,.03);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.menu-toggle span {
  width: 15px;
  height: 1px;
  background: var(--text);
  transition: transform .3s var(--ease-out-expo), opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg) }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg) }
.menu-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px }

.mobile-menu {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 28px 26px;
  border-top: 1px solid var(--line);
  flex-direction: column;
  gap: 4px;
}
.mobile-menu[hidden] { display: none }
.mobile-menu a:not(.btn) {
  padding: 13px 2px;
  color: var(--text-mut);
  font-size: 17px;
  border-bottom: 1px solid var(--line);
}
.mobile-menu .btn { margin-top: 14px }

/* Hero — acabamento editorial e pistas de interação */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.hero-text-col { position: relative }
.hero-text-col::before {
  content: 'V';
  position: absolute;
  left: -58px;
  top: -84px;
  font-family: 'Sora', sans-serif;
  font-size: 260px;
  line-height: 1;
  color: rgba(255,255,255,.018);
  pointer-events: none;
}
.demo-label {
  position: absolute;
  right: 16px;
  top: -34px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-mut);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.demo-label > span:first-child {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(217,184,113,.6);
}
.scroll-cue {
  position: absolute;
  z-index: 4;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.42);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.scroll-cue i {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  position: relative;
}
.scroll-cue i::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  left: 10px;
  top: 8px;
  border-right: 1px solid var(--primary);
  border-bottom: 1px solid var(--primary);
  transform: rotate(45deg);
  animation: cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop { 0%,100%{transform:translateY(0) rotate(45deg);opacity:.5} 50%{transform:translateY(5px) rotate(45deg);opacity:1} }

/* Jornada — visual sticky com cenas guiadas por scroll */
.journey-section {
  position: relative;
  padding: 150px 0 100px;
  background:
    radial-gradient(circle at 50% 8%, rgba(47,212,196,.08), transparent 28%),
    var(--bg);
  overflow: clip;
  border-bottom: 1px solid var(--line);
}
.journey-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) .6px, transparent .6px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 70%);
  opacity: .16;
  pointer-events: none;
}
.journey-heading { position: relative; z-index: 2; margin-bottom: 90px }
.journey-heading h2 em {
  color: var(--primary);
  font-style: normal;
}
.journey-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .65fr);
  gap: clamp(70px, 9vw, 140px);
  align-items: start;
}
.journey-visual-wrap { position: sticky; top: 92px }
.journey-mobile-copy { display:none }
.journey-visual {
  position: relative;
  height: min(680px, calc(100vh - 125px));
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 34px;
  background:
    radial-gradient(circle at 25% 18%, rgba(47,212,196,.10), transparent 32%),
    radial-gradient(circle at 80% 78%, rgba(217,184,113,.08), transparent 30%),
    linear-gradient(155deg, #11161D 0%, #090C11 62%, #0E1218 100%);
  box-shadow: 0 44px 120px rgba(0,0,0,.56), inset 0 1px rgba(255,255,255,.04);
  isolation: isolate;
}
.journey-noise {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black, transparent 82%);
}
.journey-orbit {
  position: absolute;
  border: 1px solid rgba(47,212,196,.10);
  border-radius: 50%;
  pointer-events: none;
}
.journey-orbit-a { width: 520px; height: 520px; left: -250px; top: 80px }
.journey-orbit-b { width: 360px; height: 360px; right: -180px; bottom: -120px; border-color: rgba(217,184,113,.10) }
.journey-topline {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(7,10,14,.44);
  backdrop-filter: blur(16px);
}
.journey-live { display: flex; align-items: center; gap: 8px; color: var(--text-mut); font-size: 11px; text-transform: uppercase; letter-spacing: .09em }
.journey-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 16px rgba(47,212,196,.7) }
.journey-scene-label { color: rgba(255,255,255,.68); font-size: 12px; font-weight: 600 }
.journey-canvas { position: absolute; inset: 58px 0 6px }

.scene-card {
  position: absolute;
  z-index: 5;
  width: min(72%, 420px);
  padding: 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: rgba(18,23,30,.92);
  box-shadow: 0 28px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.05);
  opacity: 0;
  transform: translateY(38px) scale(.94);
  filter: blur(9px);
  pointer-events: none;
  transition: opacity .65s var(--ease-out-expo), transform .75s var(--ease-out-expo), filter .55s ease;
}
.journey-visual[data-scene="1"] .scene-search,
.journey-visual[data-scene="2"] .scene-chat,
.journey-visual[data-scene="3"] .scene-qualify,
.journey-visual[data-scene="4"] .scene-calendar,
.journey-visual[data-scene="5"] .scene-revenue {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}
.scene-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(47,212,196,.22);
  mask-image: linear-gradient(130deg, black, transparent 48%);
  pointer-events: none;
}
.scene-kicker { display: block; color: var(--primary); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 16px }
.scene-search { left: 10%; top: 17% }
.search-bar { display:flex; align-items:center; gap:10px; padding:13px 15px; border-radius:999px; background:#fff; color:#202124; font-size:12px }
.search-bar > span { width:12px; height:12px; border:1.5px solid #5f6368; border-radius:50%; position:relative; flex:none }
.search-bar > span::after { content:''; width:5px; height:1.5px; background:#5f6368; position:absolute; right:-4px; bottom:-2px; transform:rotate(45deg) }
.search-bar b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.search-result { margin-top:18px; padding:2px 6px }
.search-result small { color:var(--text-mut); font-size:10px }
.search-result strong { display:block; color:#8CB6FF; font-size:15px; margin:5px 0; letter-spacing:-.02em }
.search-result p { color:var(--text-mut); font-size:12px; line-height:1.5 }

.scene-chat { right: 10%; top: 13%; padding: 0; overflow:hidden }
.chat-head { display:flex; align-items:center; gap:11px; padding:15px 18px; border-bottom:1px solid var(--line); background:rgba(47,212,196,.05) }
.chat-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--grad); color:#052421; font-weight:800 }
.chat-head div { display:flex; flex-direction:column }
.chat-head strong { font-size:13px }
.chat-head small { color:var(--primary); font-size:10px }
.chat-body { padding:20px; display:flex; flex-direction:column; gap:11px; min-height:220px; background:linear-gradient(rgba(8,12,16,.65), rgba(8,12,16,.9)) }
.bubble { width:82%; padding:11px 13px; border-radius:14px; font-size:12px; line-height:1.45 }
.bubble-in { background:rgba(255,255,255,.08); color:var(--text); border-bottom-left-radius:4px }
.bubble-out { align-self:flex-end; background:rgba(47,212,196,.14); color:#D8FFFB; border-bottom-right-radius:4px }
.typing { display:flex; gap:3px; padding:8px 10px; width:max-content; border-radius:12px; background:rgba(255,255,255,.06) }
.typing i { width:4px; height:4px; border-radius:50%; background:var(--text-mut); animation:typingPulse 1.2s infinite }
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typingPulse { 0%,70%,100%{opacity:.25;transform:translateY(0)} 35%{opacity:1;transform:translateY(-2px)} }

.scene-qualify { left: 14%; top: 12%; display:grid; grid-template-columns:120px 1fr; gap:24px; align-items:center }
.scene-qualify .scene-kicker { grid-column:1/-1; margin-bottom:-4px }
.score-ring { width:116px; height:116px; border-radius:50%; display:grid; place-content:center; text-align:center; background:radial-gradient(circle at center, #10151C 60%, transparent 61%), conic-gradient(var(--primary) 0 86%, rgba(255,255,255,.08) 86%); box-shadow:0 0 40px rgba(47,212,196,.1) }
.score-ring strong { font-size:32px; line-height:1 }
.score-ring span { color:var(--text-mut); font-size:11px }
.qualify-list { display:flex; flex-direction:column; gap:14px }
.qualify-list span { display:flex; align-items:center; gap:9px; color:var(--text-mut); font-size:12px }
.qualify-list i { width:8px; height:8px; border-radius:50%; background:var(--primary); box-shadow:0 0 10px rgba(47,212,196,.5) }
.qualify-list b { color:var(--text); font-weight:600 }

.scene-calendar { right: 10%; top: 16%; width:min(76%, 440px) }
.calendar-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px }
.calendar-head span { color:var(--text-mut); font-size:12px }
.calendar-head strong { color:var(--accent); font-size:13px }
.calendar-days { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-bottom:20px }
.calendar-days span { height:42px; display:grid; place-items:center; color:var(--text-mut); border:1px solid var(--line); border-radius:11px; font-size:12px }
.calendar-days .active { background:var(--primary); border-color:var(--primary); color:#052421; font-weight:800; box-shadow:0 8px 24px rgba(47,212,196,.22) }
.appointment { display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; background:rgba(47,212,196,.08); border:1px solid rgba(47,212,196,.14) }
.appointment > i { width:3px; height:34px; border-radius:2px; background:var(--primary) }
.appointment div { display:flex; flex-direction:column; gap:3px }
.appointment strong { font-size:12px }
.appointment small { color:var(--text-mut); font-size:10px }

.scene-revenue { left: 12%; top: 10%; width:min(76%, 450px) }
.revenue-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px }
.revenue-head span { color:var(--text-mut); font-size:11px; text-transform:uppercase; letter-spacing:.08em }
.revenue-head small { color:var(--accent); border:1px solid rgba(217,184,113,.24); border-radius:999px; padding:4px 9px; font-size:9px; text-transform:uppercase; letter-spacing:.08em }
.revenue-value { display:block; font-size:clamp(34px,5vw,54px); letter-spacing:-.05em; line-height:1; background:linear-gradient(120deg,#fff 20%,var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent }
.revenue-caption { display:block; color:var(--text-mut); font-size:12px; margin-top:8px }
.mini-bars { height:100px; margin:26px 0 18px; display:flex; align-items:flex-end; gap:8px; border-bottom:1px solid var(--line) }
.mini-bars i { flex:1; height:var(--bar,30%); border-radius:5px 5px 0 0; background:linear-gradient(to top,rgba(47,212,196,.2),rgba(47,212,196,.75)); transform-origin:bottom; animation:barRise .8s var(--ease-out-expo) both }
.mini-bars i:nth-child(1){--bar:28%}.mini-bars i:nth-child(2){--bar:42%}.mini-bars i:nth-child(3){--bar:38%}.mini-bars i:nth-child(4){--bar:58%}.mini-bars i:nth-child(5){--bar:68%}.mini-bars i:nth-child(6){--bar:82%}.mini-bars i:nth-child(7){--bar:100%}
@keyframes barRise { from{transform:scaleY(.15);opacity:.2} to{transform:scaleY(1);opacity:1} }
.revenue-footer { display:flex; align-items:center; justify-content:space-between; color:var(--text-mut); font-size:12px }
.revenue-footer strong { color:var(--primary); font-size:24px }

.journey-pulse { position:absolute; width:160px; height:160px; right:-40px; bottom:20px; border:1px solid rgba(47,212,196,.12); border-radius:50%; opacity:.5 }
.journey-pulse::before,.journey-pulse::after { content:''; position:absolute; inset:24px; border:1px solid rgba(47,212,196,.15); border-radius:50% }
.journey-pulse::after { inset:54px; background:rgba(47,212,196,.08) }
.journey-pulse i { position:absolute; z-index:2; left:50%; top:50%; width:7px; height:7px; transform:translate(-50%,-50%); background:var(--primary); border-radius:50%; box-shadow:0 0 25px var(--primary) }
.journey-progress { position:absolute; z-index:25; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.04) }
.journey-progress span { display:block; width:20%; height:100%; background:var(--grad); box-shadow:0 0 16px rgba(47,212,196,.5); transition:width .6s var(--ease-out-expo) }

.journey-steps { padding-bottom: 12vh }
.journey-step {
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: .28;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .65s var(--ease-out-expo);
}
.journey-step.is-active { opacity:1; transform:translateY(0) }
.journey-step > span { color:var(--primary); font-size:12px; font-weight:700; letter-spacing:.12em; margin-bottom:18px }
.journey-step h3 { font-size:clamp(27px,3.2vw,43px); line-height:1.08; margin-bottom:20px }
.journey-step p { color:var(--text-mut); font-size:17px; line-height:1.7; max-width:430px }

@media (max-width: 900px) {
  .menu-toggle { display:flex }
  .nav-actions { gap:8px }
  .mobile-menu:not([hidden]) { display:flex }
  .journey-section { padding:110px 0 70px }
  .journey-heading { margin-bottom:54px }
  .journey-layout { display:block }
  .journey-visual-wrap {
    position:sticky;
    top:70px;
    z-index:5;
    padding-bottom:14px;
    background:linear-gradient(180deg,rgba(8,10,14,.98) 78%,rgba(8,10,14,.92) 90%,transparent);
  }
  .journey-visual { height:min(42vh,330px); min-height:270px; border-radius:24px }
  .journey-mobile-copy {
    display:block;
    min-height:190px;
    padding:18px 4px 24px;
  }
  .journey-mobile-copy.is-changing { animation:journeyMobileCopyIn .58s var(--ease-out-expo) both }
  .journey-mobile-copy-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px }
  .journey-mobile-copy-head span { color:var(--primary); font-size:12px; font-weight:800; letter-spacing:.13em }
  .journey-mobile-copy-head small { color:var(--text-dim); font-size:10px; text-transform:uppercase; letter-spacing:.09em }
  .journey-mobile-copy-head small::after { content:' ↓'; color:var(--primary) }
  .journey-mobile-copy h3 { font-size:clamp(25px,7vw,34px); line-height:1.08; letter-spacing:-.035em; margin-bottom:12px }
  .journey-mobile-copy p { max-width:560px; color:var(--text-mut); font-size:15px; line-height:1.55 }
  .journey-steps { padding-bottom:8vh }
  .journey-step {
    min-height:62vh;
    max-width:560px;
    margin:0 auto;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
  }
  .scene-card { width:min(78%,430px) }
}
@keyframes journeyMobileCopyIn {
  from { opacity:.2; transform:translateY(12px); filter:blur(5px) }
  to { opacity:1; transform:translateY(0); filter:blur(0) }
}

@media (max-width: 560px) {
  .nav-inner { height:62px }
  .nav-actions .btn-sm { display:none }
  .menu-toggle { width:36px; height:36px }
  .hero { padding:88px 0 96px }
  .hero-text-col::before { display:none }
  .demo-label { top:-30px; right:0 }
  .scroll-cue { display:none }
  .journey-section { padding-top:94px }
  .journey-heading h2 br { display:none }
  .journey-visual { height:min(40vh,300px); min-height:250px; border-radius:21px }
  .journey-topline { height:50px; padding:0 15px }
  .journey-live span { display:none }
  .journey-scene-label { font-size:10.5px }
  .journey-canvas { inset:50px 0 3px }
  .scene-card { width:86%; padding:17px; border-radius:17px }
  .scene-search,.scene-qualify,.scene-revenue { left:7%; top:10% }
  .scene-chat,.scene-calendar { right:7%; top:9% }
  .scene-qualify { grid-template-columns:90px 1fr; gap:14px }
  .score-ring { width:86px; height:86px }
  .score-ring strong { font-size:25px }
  .chat-body { min-height:180px; padding:14px }
  .bubble { font-size:10.5px }
  .calendar-days span { height:32px }
  .revenue-value { font-size:34px }
  .mini-bars { height:60px; margin:18px 0 12px }
  .journey-pulse { display:none }
  .journey-mobile-copy { min-height:205px; padding-top:16px }
  .journey-mobile-copy h3 { font-size:clamp(24px,7.6vw,30px) }
  .journey-mobile-copy p { font-size:14px; line-height:1.52 }
  .journey-step { min-height:58vh; padding:0 }
}

/* Calculadora de retorno */
.roi-calculator {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 30px;
  background: var(--line);
  box-shadow: 0 35px 90px rgba(0,0,0,.28);
}
.hub-scroll-stage .hub-graphic {
  position: sticky;
  top: max(84px, calc(50vh - 225px));
}
.roi-controls { padding: 42px; background: var(--surface) }
.roi-control + .roi-control { margin-top: 34px }
.roi-control-head { display:flex; justify-content:space-between; align-items:baseline; gap:18px; margin-bottom:17px }
.roi-control-head label { color:var(--text-mut); font-size:13px; font-weight:600 }
.roi-control-head output { color:var(--text); font-size:18px; font-weight:750; letter-spacing:-.03em }
.roi-control input[type="range"] {
  width:100%;
  height:4px;
  border-radius:999px;
  appearance:none;
  background:linear-gradient(to right,var(--primary) 0 var(--range-progress,50%),rgba(255,255,255,.1) var(--range-progress,50%) 100%);
  outline:none;
}
.roi-control input[type="range"]::-webkit-slider-thumb {
  appearance:none;
  width:21px;
  height:21px;
  border-radius:50%;
  border:5px solid #102C2A;
  background:var(--primary);
  box-shadow:0 0 0 1px rgba(47,212,196,.45),0 5px 16px rgba(0,0,0,.45);
  cursor:grab;
}
.roi-control input[type="range"]::-moz-range-thumb {
  width:12px;
  height:12px;
  border-radius:50%;
  border:5px solid #102C2A;
  background:var(--primary);
  box-shadow:0 0 0 1px rgba(47,212,196,.45),0 5px 16px rgba(0,0,0,.45);
  cursor:grab;
}
.roi-control input[type="range"]:focus-visible { outline:2px solid var(--primary); outline-offset:8px }
.roi-range { display:flex; justify-content:space-between; margin-top:10px; color:rgba(255,255,255,.28); font-size:10px }
.roi-result {
  position:relative;
  padding:42px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 80% 10%,rgba(47,212,196,.14),transparent 35%),
    linear-gradient(145deg,#0E181B,#0C1016);
}
.roi-result::after { content:''; position:absolute; width:190px; height:190px; right:-90px; bottom:-90px; border:1px solid rgba(47,212,196,.11); border-radius:50%; box-shadow:0 0 0 34px rgba(47,212,196,.025),0 0 0 68px rgba(47,212,196,.015) }
.roi-result-kicker { color:var(--primary); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em }
.roi-result-main { margin:28px 0 36px; display:flex; flex-direction:column }
.roi-result-main > span { color:var(--text-mut); font-size:12px }
.roi-result-main strong { font-size:clamp(38px,5vw,62px); line-height:1; letter-spacing:-.055em; margin:8px 0; background:linear-gradient(120deg,#fff 20%,var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent }
.roi-result-main small { color:var(--text-mut); font-size:11px }
.roi-result-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; position:relative; z-index:2 }
.roi-result-grid div { padding:15px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025); display:flex; flex-direction:column; gap:5px }
.roi-result-grid span { color:var(--text-mut); font-size:10px; line-height:1.4 }
.roi-result-grid strong { color:var(--text); font-size:19px }
.roi-result > p { position:relative; z-index:2; color:rgba(255,255,255,.36); font-size:10px; line-height:1.5; margin-top:20px }

@media (max-width: 760px) {
  .roi-calculator { grid-template-columns:1fr; border-radius:24px }
  .roi-controls,.roi-result { padding:30px 24px }
  .roi-result-main { margin:22px 0 28px }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue i::after,.typing i,.mini-bars i { animation:none }
  .scene-card,.journey-step,.journey-progress span { transition:none }
  .journey-mobile-copy.is-changing { animation:none }
  .hub-graphic.hub-motion-ready .hub-node,
  .hub-graphic.hub-motion-ready .hub-node-icon,
  .hub-graphic.hub-motion-ready .hub-node-label {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .hub-graphic.is-settled .hub-center::before,
  .hub-graphic.hub-motion-ready.is-visible .hub-center::before,
  .hub-graphic.is-settled .hub-line { animation:none }
}