/* ═══════════════════════════════════════════════════════════════════
   V26 DESIGN UNIFICATION — Vanguard Tech
   Alinhamento visual com o formulário e propostas comerciais
   Nunito 900 · #0ea5e9 · #f97316 · #080b12
   Carregado como última camada — sobrepõe V5→V25 sem quebrar lógica
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. VARIÁVEIS GLOBAIS — nova paleta ── */
:root {
  --c-bg:      #080b12;
  --c-surface: #0a0f1c;
  --c-card:    #0f1623;
  --c-border:  #243352;
  --c-primary: #0ea5e9;
  --c-accent:  #f97316;
  --c-success: #10b981;
  --c-text:    #e2e8f0;
  --c-muted:   #8899b4;
  --c-faint:   #1a2540;
  --c-primary-rgb: 14, 165, 233;
  --c-accent-rgb:  249, 115, 22;
  --ff-display: 'Nunito', sans-serif;
  --ff-body:    'Nunito Sans', sans-serif;
  --ff-mono:    'JetBrains Mono', monospace;
  --glass-border: rgba(14, 165, 233, 0.18);
  --glow-sm: 0 0 16px rgba(14,165,233,.25);
  --glow-md: 0 0 32px rgba(14,165,233,.30);
}

/* ── 2. BASE — fundo + tipografia ── */
html { background: #080b12; }

body {
  background: #080b12;
  color: var(--c-text);
  font-family: var(--ff-body);
}

/* Grain do V5 → grid geométrico do formulário */
body::before {
  background-image:
    linear-gradient(rgba(14,165,233,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,.05) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  background-color: transparent !important;
  opacity: 1 !important;
}

/* ── 3. HUD + TICKER — ocultados (poluição visual) ── */
.sys-hud,
.vg-ticker,
.vg-noise,
#vg-noise-canvas { display: none !important; }

/* ── 4. NAVBAR ── */
.navbar {
  background: transparent !important;
  border-bottom: none !important;
}
.navbar--scrolled,
.navbar.scrolled {
  background: rgba(8,11,18,.85) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #243352 !important;
}
.navbar__logo,
.navbar__logo .brand-name,
.navbar__logo span {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}

/* ── 5. TIPOGRAFIA GERAL ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
}
.section__title,
.hero__headline,
.scanner-section__title,
.quiz__question {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
}
p, li, span, a, button, input, select, textarea {
  font-family: 'Nunito Sans', sans-serif !important;
}
/* Terminal e código mantêm mono */
.terminal, .terminal__cmd, .terminal__prompt,
.terminal__metric-label, .terminal__metric-value,
.footer__version,
code, pre { font-family: 'JetBrains Mono', monospace !important; }

/* ── 6. GRADIENTES DE TEXTO ── */
.text-gradient {
  background: linear-gradient(135deg, #0ea5e9, #818cf8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.text-gradient--accent {
  background: linear-gradient(135deg, #f97316, #fbbf24) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── 7. BADGES + TAGS ── */
.label-tag,
.section__label .label-tag,
.nav-tag,
.quiz__quad-badge,
.pricing-card__badge,
.feature-card__tag,
.scanner-section__badge {
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: .65rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56,189,248,.35) !important;
  background: rgba(14,165,233,.10) !important;
  border-radius: 100px !important;
  padding: 5px 14px !important;
}

/* ── 8. BOTÕES ── */
.btn {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  border-radius: 100px !important;
  transition: all .25s ease !important;
}
.btn--primary {
  background: var(--c-accent) !important;
  border: 1px solid var(--c-accent) !important;
  color: #fff !important;
}
.btn--primary:hover {
  background: linear-gradient(135deg, #0ea5e9, #818cf8) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 20px rgba(14,165,233,.30) !important;
}
.btn--outline {
  background: transparent !important;
  border: 1px solid var(--c-primary) !important;
  color: var(--c-primary) !important;
}
.btn--outline:hover {
  background: rgba(14,165,233,.10) !important;
}
.btn--ghost {
  background: transparent !important;
  border: 1px solid #243352 !important;
  color: var(--c-muted) !important;
}
.btn--ghost:hover {
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
}

/* ── 9. CARDS (features, pricing, hud-card) ── */
.feature-card,
.hud-card,
.hud-corners {
  background: #0f1623 !important;
  border: 1px solid #243352 !important;
  border-radius: 14px !important;
  transition: border-color .25s, box-shadow .25s !important;
}
.feature-card:hover,
.hud-card:hover {
  border-color: rgba(14,165,233,.35) !important;
  box-shadow: 0 4px 24px rgba(14,165,233,.06) !important;
}
.feature-card__title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}
.feature-card__desc {
  color: var(--c-muted) !important;
}

/* ── 10. PRICING CARDS ── */
.pricing-card {
  background: #0f1623 !important;
  border: 1px solid #243352 !important;
  border-radius: 16px !important;
  transition: border-color .25s, box-shadow .25s !important;
}
.pricing-card:hover {
  border-color: rgba(14,165,233,.35) !important;
  box-shadow: 0 8px 32px rgba(14,165,233,.08) !important;
}
.pricing-card--iah,
.pricing-card--iah.scan-reveal {
  border-color: rgba(14,165,233,.35) !important;
  box-shadow: 0 0 0 1px rgba(14,165,233,.15), 0 8px 32px rgba(14,165,233,.08) !important;
}
.pricing-card__name {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
}
.pricing-card__amount {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  color: var(--c-text) !important;
}
.pricing-cta--cyan {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  border-radius: 100px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}
.pricing-cta--gold {
  background: transparent !important;
  border: 1px solid var(--c-primary) !important;
  color: var(--c-primary) !important;
  border-radius: 100px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  display: block !important;
  text-align: center !important;
  padding: 14px !important;
}
.pricing-cta--gold:hover {
  background: rgba(14,165,233,.10) !important;
}

/* ── 11. SCANNER ── */
.scanner-section {
  background: transparent !important;
}
.scanner-form__input {
  background: #0a0f1c !important;
  border: 1px solid #243352 !important;
  color: var(--c-text) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  border-radius: 12px !important;
}
.scanner-form__input:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,.12) !important;
  outline: none !important;
}
.scanner-form__btn {
  background: var(--c-accent) !important;
  border: none !important;
  color: #fff !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  border-radius: 100px !important;
}
.scanner-form__btn:hover {
  background: linear-gradient(135deg, #0ea5e9, #818cf8) !important;
}

/* ── 12. QUIZ ── */
.quiz {
  background: #0f1623 !important;
  border: 1px solid #243352 !important;
  border-radius: 16px !important;
}
.quiz__card-opt {
  background: #0a0f1c !important;
  border: 1px solid #243352 !important;
  border-radius: 12px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  transition: border-color .2s, background .2s !important;
}
.quiz__card-opt:hover {
  border-color: rgba(14,165,233,.45) !important;
  background: rgba(14,165,233,.06) !important;
}
.quiz__card-opt.selected,
.quiz__card-opt[aria-pressed="true"] {
  border-color: var(--c-primary) !important;
  background: rgba(14,165,233,.12) !important;
}
.quiz__card-label {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}
.quiz__select {
  background: #0a0f1c !important;
  border: 1px solid #243352 !important;
  color: var(--c-text) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  border-radius: 12px !important;
}
.quiz__input {
  background: #0a0f1c !important;
  border: 1px solid #243352 !important;
  color: var(--c-text) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  border-radius: 12px !important;
}
.quiz__input:focus, .quiz__select:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,.12) !important;
  outline: none !important;
}
.quiz__progress-bar {
  background: linear-gradient(90deg, #0ea5e9, #818cf8) !important;
}

/* ── 13. HERO ── */
.hero__badge .label-tag {
  font-size: .65rem !important;
}
.hero__sub {
  color: var(--c-muted) !important;
  font-family: 'Nunito Sans', sans-serif !important;
}
.hero__social-proof span { color: var(--c-muted) !important; }
.hero__social-proof span > span { color: var(--c-primary) !important; }

/* ── 14. STEPS (how it works) ── */
.step__num {
  color: var(--c-primary) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
}
.step__title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}
.step__desc { color: var(--c-muted) !important; }

/* ── 15. STACK ── */
.stack__item { color: var(--c-muted) !important; }
.stack__item-dot { background: var(--c-primary) !important; }

/* ── 16. FOOTER ── */
.footer {
  background: #0a0f1c !important;
  border-top: 1px solid #243352 !important;
}
.footer__logo,
.footer__brand .brand-name {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}
.footer__tagline { color: var(--c-muted) !important; }
.footer__copy, .footer__version { color: var(--c-muted) !important; }
.footer__link-list a { color: var(--c-muted) !important; }
.footer__link-list a:hover { color: var(--c-primary) !important; }
.footer__link-title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
}

/* ── 17. SEÇÃO NOVA — SERVIÇOS ── */
.v26-servicos {
  padding: 80px 0;
  max-width: 900px;
  margin: 0 auto;
}
.v26-servicos .section__desc {
  color: var(--c-muted);
  max-width: 560px;
  margin: 0 auto;
}
.v26-servicos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 640px) {
  .v26-servicos-grid { grid-template-columns: 1fr; }
}
.v26-servico-card {
  background: #0f1623;
  border: 1px solid #243352;
  border-radius: 14px;
  padding: 28px 24px;
  transition: border-color .25s, box-shadow .25s;
  border-left: 2px solid transparent;
}
.v26-servico-card:hover {
  border-color: rgba(14,165,233,.35);
  border-left-color: var(--c-primary);
  box-shadow: 0 4px 24px rgba(14,165,233,.06);
}
.v26-servico-icon {
  font-size: 1.5rem;
  margin-bottom: 14px;
}
.v26-servico-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--c-text);
  margin-bottom: 8px;
}
.v26-servico-desc {
  font-family: 'Nunito Sans', sans-serif;
  font-size: .875rem;
  color: var(--c-muted);
  line-height: 1.6;
}

/* ── 18. SEÇÃO NOVA — POR QUE VANGUARD ── */
.v26-diferenciais {
  padding: 80px 0;
  max-width: 900px;
  margin: 0 auto;
}
.v26-diferenciais-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 640px) {
  .v26-diferenciais-grid { grid-template-columns: 1fr; }
}
.v26-diferencial-card {
  background: #0f1623;
  border: 1px solid #243352;
  border-radius: 14px;
  padding: 32px 24px;
  transition: border-color .25s, box-shadow .25s;
}
.v26-diferencial-card:hover {
  border-color: rgba(14,165,233,.35);
  box-shadow: 0 4px 24px rgba(14,165,233,.06);
}
.v26-diferencial-num {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 2rem;
  color: var(--c-primary);
  opacity: .3;
  margin-bottom: 16px;
  line-height: 1;
}
.v26-diferencial-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--c-text);
  margin-bottom: 10px;
}
.v26-diferencial-desc {
  font-family: 'Nunito Sans', sans-serif;
  font-size: .875rem;
  color: var(--c-muted);
  line-height: 1.65;
}

/* ── 19. CLOSER MACHINE ── */
.closer-machine {
  background: #0f1623 !important;
  border: 1px solid #243352 !important;
  border-radius: 16px !important;
}
.closer-machine__header {
  background: #0a0f1c !important;
  border-bottom: 1px solid #243352 !important;
}
.closer-machine__agent-name {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}

/* ── 20. SCROLLBAR ── */
html {
  scrollbar-color: rgba(14,165,233,.4) transparent;
}
html::-webkit-scrollbar-thumb {
  background: rgba(14,165,233,.4) !important;
}

/* ── 21. CURSOR — restaura cursor nativo (V25 usava crosshair customizado) ── */
html, body, * {
  cursor: auto !important;
}
a, button, [role="button"], [tabindex], select, input[type="submit"],
input[type="button"], input[type="checkbox"], input[type="radio"],
label[for], .btn, .quiz__card-opt, .pricing-cta,
.feature-card, .closer-machine__close, .btn-hermes-open {
  cursor: pointer !important;
}
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="url"], textarea, select {
  cursor: text !important;
}
.vg-cursor { display: none !important; }

/* ── 22. STATUS DOTS ── */
.hud-status-dot { background: var(--c-primary) !important; }
.hud-status-dot--green { background: var(--c-success) !important; }
.hud-status-dot--red { background: #ef4444 !important; }

/* ── 23. OUTROS — campo de texto livre nas perguntas do quiz ── */
.quiz__card-opt--outros {
  border-style: dashed !important;
  border-color: rgba(14,165,233,.3) !important;
  color: var(--c-muted) !important;
  margin-top: .25rem;
}
.quiz__card-opt--outros:hover {
  border-color: var(--c-primary) !important;
  color: var(--c-text) !important;
}
.quiz__card-opt--outros.selected {
  border-color: var(--c-primary) !important;
  border-style: solid !important;
  color: var(--c-primary) !important;
}
.outros-box {
  margin-top: .75rem;
  display: flex;
  gap: .75rem;
  align-items: center;
  animation: fadeUp .2s ease both;
}
.outros-input {
  flex: 1;
  background: #0a0f1c;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: .75rem 1rem;
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: .95rem;
  outline: none;
  transition: border-color .2s;
}
.outros-input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(14,165,233,.12);
}
.outros-input::placeholder { color: var(--c-muted); }
.outros-confirmar {
  white-space: nowrap;
  padding: .75rem 1.5rem !important;
  font-size: .85rem !important;
}
