@layer components {

/* ── Cabeçalho de site ─────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 24px; left: 0;
  width: 100%;
  /* coluna: o painel móvel precisa abrir abaixo da barra, não ao lado dela */
  display: flex; flex-direction: column; align-items: center;
  z-index: 9999;
  pointer-events: none;
  font-family: var(--font-family);
}
@media (max-width: 768px) { .site-header { top: 16px; } }

.nav-shell {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg);
  padding: 12px 16px 12px 24px;
  border-radius: var(--radius-xl);
  width: auto; max-width: 900px;
  background: rgb(15 15 18 / .92);
  border: 1px solid rgb(255 255 255 / .08);
  box-shadow: var(--shadow-lg), var(--shadow-inset-top);
  transition: all var(--dur-slow) var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav-shell { background: rgb(15 15 18 / .6); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); }
}
.site-header.is-scrolled .nav-shell {
  padding: 8px 12px 8px 24px;
  border-radius: var(--radius-pill);
  background: rgb(10 10 12 / .9);
  border-color: rgb(255 255 255 / .12);
  gap: var(--space-md);
}
@media (max-width: 768px) {
  .nav-shell { padding: 8px 12px 8px 20px; border-radius: var(--radius-pill); gap: var(--space-md); width: calc(100% - 32px); max-width: 400px; }
}

.nav-logo { display: flex; align-items: center; padding: 4px; border-radius: var(--radius-md); background: radial-gradient(circle, rgb(var(--color-accent-warm-rgb) / .12) 0%, transparent 75%); transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.nav-logo:hover { transform: scale(1.08); background: radial-gradient(circle, rgb(var(--color-accent-warm-rgb) / .2) 0%, transparent 75%); }
.nav-logo__img { height: 48px; width: 48px; object-fit: contain; border-radius: var(--radius-sm); filter: drop-shadow(0 0 10px rgb(var(--color-accent-warm-rgb) / .35)); }
@media (max-width: 768px) { .nav-logo__img { height: 38px; width: 38px; } }

.nav-links {
  display: flex; align-items: center; gap: var(--space-xl);
  max-width: 600px; overflow: hidden; white-space: nowrap;
  transition: max-width var(--dur-slow) var(--ease), opacity var(--dur-base) var(--ease), gap var(--dur-slow) var(--ease);
}
@media (max-width: 768px) { .nav-links { display: none; } }
.site-header.is-scrolled .nav-links { max-width: 0; opacity: 0; gap: 0; pointer-events: none; }
.nav-link { color: var(--color-text-2-cold); font-size: var(--font-size-md); font-weight: var(--fw-medium); transition: color var(--dur-fast) var(--ease); padding-block: 12px; }
.nav-link:hover { color: var(--color-text); }

.nav-cta {
  display: inline-flex; align-items: center;
}
/* No mobile o CTA fica fixo na barra em vez de viver dentro do menu sanfona:
   é a ação principal da página e não deve depender de abrir o menu.
   Dobra a especificidade de propósito: .btn--pill-sm é declarado depois e
   venceria no empate de origem. */
@media (max-width: 768px) {
  /* min-height garante alvo de toque de 44px sem crescer a barra: o logo (46px)
     continua sendo o item mais alto do shell. */
  .nav-cta.btn--pill-sm { font-size: var(--font-size-sm); padding: 10px 16px; min-height: 44px; justify-content: center; }
}
@media (max-width: 380px) {
  .nav-cta.btn--pill-sm { font-size: var(--font-size-xs); padding: 9px 12px; }
}

.btn--pill-sm {
  background: var(--color-text); color: var(--color-text-on-light);
  font-size: var(--font-size-md); font-weight: var(--fw-bold);
  padding: 12px 24px; border-radius: var(--radius-pill);
  transition: all var(--dur-base) var(--ease); white-space: nowrap;
}
.btn--pill-sm:hover { background: #fff; transform: scale(1.04); box-shadow: 0 6px 20px rgb(255 255 255 / .15); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
@media (max-width: 768px) { .nav-toggle { display: flex; } }
.nav-toggle__bar { width: 18px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.nav-mobile {
  pointer-events: auto;
  margin-top: 8px;
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background: rgb(10 10 12 / .96);
  border: 1px solid rgb(255 255 255 / .1);
  box-shadow: var(--shadow-lg);
  width: calc(100% - 32px);
  max-width: 400px;
}
.nav-mobile nav { display: flex; flex-direction: column; gap: var(--space-sm); }
.nav-mobile__link { padding: 12px 8px; font-size: var(--font-size-lg); font-weight: var(--fw-medium); color: var(--color-text-2-cold); border-radius: var(--radius-sm); }
.nav-mobile__link:hover { color: var(--color-text); background: rgb(255 255 255 / .05); }

/* ── Eyebrow ───────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-size: var(--font-size-sm); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.eyebrow--cold { color: var(--color-accent-cold); background: rgb(var(--color-accent-cold-rgb) / .1); padding: 6px 14px; border-radius: var(--radius-pill); border: var(--border-cold); }
.eyebrow--warm { color: var(--color-accent-warm); background: rgb(var(--color-accent-warm-rgb) / .1); padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid rgb(var(--color-accent-warm-rgb) / .2); }
.eyebrow--warm-plain { color: var(--color-accent-warm); }

/* ── Título de seção ───────────────────────────────────────────────── */
.section-title {
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-lg);
  background: var(--grad-title-cold);
  background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  font-size: var(--font-size-h2);
}
.section-title--cold { background: var(--grad-title-cold); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.section-title--warm { background: var(--grad-title-warm); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-size: var(--font-size-h2-hero); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.section-title--warm-xs { background: var(--grad-title-warm); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-size: var(--font-size-h2-xs); line-height: 1.15; }

.text-gradient-warm { background: linear-gradient(90deg, #fff, var(--color-accent-warm)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.text-gradient-cold { background: linear-gradient(90deg, #fff 0%, var(--color-accent-cold) 100%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ── Botão de aura (âncora primária) ───────────────────────────────── */
.btn-aura {
  position: relative; display: inline-flex;
  border-radius: var(--radius-pill); padding: 2.5px; overflow: hidden;
  box-shadow: var(--shadow-glow-cold);
  z-index: 1; transition: transform var(--dur-fast) var(--ease);
}
.btn-aura:hover { transform: scale(1.03); }
.btn-aura--warm { box-shadow: var(--shadow-glow-warm); }

.btn-aura__spinner {
  position: absolute; top: 50%; left: 50%;
  width: 300%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  animation: spin-aura 4s linear infinite;
  background: conic-gradient(from 0deg, var(--color-accent-cold-deep) 0%, var(--color-accent-cold) 25%, #ffffff 50%, var(--color-accent-cold) 75%, var(--color-accent-cold-deep) 100%);
}
.btn-aura--warm .btn-aura__spinner {
  background: conic-gradient(from 0deg, transparent 0%, transparent 65%, rgb(var(--color-accent-warm-rgb) / .9) 85%, #ffffff 100%);
}
@keyframes spin-aura { to { transform: translate(-50%, -50%) rotate(360deg); } }

.btn--primary {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: var(--space-sm);
  background: var(--color-text); color: var(--color-text-on-light);
  font-size: var(--font-size-lg); font-weight: var(--fw-bold);
  padding: 18px 42px; border-radius: 47px;
  transition: background var(--dur-fast) var(--ease);
}
.btn-aura:hover .btn--primary { background: #fff; }
.btn-aura:hover .btn__icon { transform: translateY(3px); }
.btn__icon { transition: transform var(--dur-fast) var(--ease); }
@media (max-width: 768px) {
  .btn-aura, .btn--primary { width: 100%; justify-content: center; }
  .btn--primary { padding: 16px 20px; font-size: 1rem; gap: var(--space-xs); }
}
@media (max-width: 400px) {
  .btn--primary { padding: 16px 12px; font-size: .9rem; }
}

.btn--light {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  background: var(--color-text); color: var(--color-bg-cold);
  font-size: var(--font-size-lg); font-weight: var(--fw-bold);
  padding: 16px 36px; border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px rgb(var(--color-accent-cold-rgb) / .15);
  transition: all var(--dur-base) var(--ease);
}
.btn--light:hover { background: #fff; transform: translateY(-3px) scale(1.02); box-shadow: 0 15px 40px rgb(var(--color-accent-cold-rgb) / .3); }
.btn--light:hover svg { transform: translateX(4px); }
.btn--light svg { transition: transform var(--dur-fast) var(--ease); }

.btn--submit {
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  width: 100%; padding: 20px; margin-top: var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg); font-weight: var(--fw-bold); color: #fff;
  background: linear-gradient(135deg, var(--color-accent-warm-deep), var(--color-accent-warm));
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.btn--submit:hover { transform: scale(1.02); opacity: .95; }
.btn__wa { flex: 0 0 auto; transition: transform var(--dur-fast) var(--ease); }
.btn--submit:hover .btn__wa { transform: scale(1.1); }
.btn--submit[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ── Badge / pill genérico ─────────────────────────────────────────── */
.badge {
  font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: var(--ls-wider);
  padding: 4px 10px; border-radius: var(--radius-pill); font-weight: var(--fw-bold);
}
.badge--cold { background: var(--color-accent-cold-deep); color: #fff; border: 1px solid rgb(var(--color-accent-cold-rgb) / .4); margin-bottom: var(--space-sm); display: inline-block; }
.badge--warm { background: rgb(var(--color-accent-warm-rgb) / .15); color: var(--color-accent-warm); border: 1px solid rgb(var(--color-accent-warm-rgb) / .2); margin-right: auto; }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 8px 18px; border-radius: var(--radius-pill);
  font-size: var(--font-size-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  margin-bottom: var(--space-lg);
}
.pill--cold {
  background: rgb(var(--color-accent-cold-rgb) / .05); border: var(--border-cold);
  color: var(--color-accent-cold);
}
.pill__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent-cold); box-shadow: 0 0 8px var(--color-accent-cold);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }

/* ── Cartão de vidro base ──────────────────────────────────────────── */
.glass-card {
  position: relative;
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgb(18 18 18 / .6) 0%, rgb(10 10 10 / .8) 100%);
  border: var(--border-cold);
  box-shadow: var(--shadow-inset-top), var(--shadow-glow-cold);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.glass-card--warm {
  background: linear-gradient(160deg, rgb(30 30 30 / .6) 0%, rgb(15 15 15 / .8) 100%);
  border: var(--border-warm);
  border-top: 1px solid rgb(255 191 0 / .15);
  box-shadow: var(--shadow-md), var(--shadow-inset-top);
}

/* ── Glare seguidor de mouse ───────────────────────────────────────── */
[data-glare] { position: relative; }
.glare,
.stat-card__glare, .feature-card__glow, .proof-card__glow, .obsidian__glare, .glass-badge__glare, .accordion__glow {
  position: absolute;
  width: 300px; height: 300px;
  top: var(--y, -150px); left: var(--x, -150px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgb(var(--color-accent-cold-rgb) / .12) 0%, transparent 100%);
  opacity: 0; z-index: 1;
  transition: opacity var(--dur-base) var(--ease);
  pointer-events: none;
}
[data-glare]:hover > .glare,
[data-glare]:hover .stat-card__glare,
[data-glare]:hover .feature-card__glow,
[data-glare]:hover .proof-card__glow,
[data-glare]:hover .obsidian__glare,
[data-glare]:hover .glass-badge__glare,
.accordion__item:hover .accordion__glow {
  opacity: 1;
}
.feature-card__glow, .accordion__glow { background: radial-gradient(circle closest-side, rgb(var(--color-accent-warm-rgb) / .15) 0%, transparent 100%); }
.obsidian__glare { width: 500px; height: 500px; background: radial-gradient(circle closest-side, rgb(var(--color-accent-warm-rgb) / .12) 0%, transparent 100%); }
.glass-badge__glare { width: 150px; height: 150px; background: radial-gradient(circle closest-side, rgb(var(--color-accent-warm-rgb) / .15) 0%, transparent 100%); }

/* ── Revelação por scroll ──────────────────────────────────────────── */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.js .reveal--d1 { transition-delay: .15s; }
.js .reveal--d2 { transition-delay: .30s; }
.js .reveal--d3 { transition-delay: .45s; }

/* ── Medidor / barra de progresso ──────────────────────────────────── */
.meter {
  display: block; width: 100%; height: 6px; border-radius: var(--radius-xs);
  overflow: hidden; background: rgb(255 255 255 / .05);
}
.meter__fill {
  display: block; height: 100%; width: 0%; border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--color-accent-warm-deep) 0%, var(--color-accent-warm) 100%);
  box-shadow: 0 0 8px var(--color-accent-warm);
  transition: width 3.5s var(--ease);
}

/* ── Campo de formulário ───────────────────────────────────────────── */
.field { margin-bottom: var(--space-lg); text-align: left; }
.field__label { display: block; margin-bottom: var(--space-xs); font-weight: var(--fw-semibold); color: var(--color-text-2-warm); font-size: var(--font-size-md); }
.field__label--inline { display: inline; font-weight: var(--fw-regular); font-size: var(--font-size-sm); }
.field__label--inline a { color: var(--color-accent-warm); text-decoration: underline; }
.field__control {
  width: 100%; padding: 18px 24px; border-radius: var(--radius-sm);
  border: var(--border-warm);
  background: rgb(0 0 0 / .3); color: var(--color-text);
  font-size: var(--font-size-base);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field__control:focus-visible {
  outline: none; border-color: var(--color-accent-warm);
  box-shadow: 0 0 0 4px rgb(var(--color-accent-warm-rgb) / .15);
}
.field__control[aria-invalid="true"] { border-color: var(--color-danger); }
.field__hint { font-size: var(--font-size-xs); color: var(--color-text-3-warm); margin: 6px 0 0; }
.field__error { font-size: var(--font-size-sm); color: var(--color-danger); margin: 6px 0 0; font-weight: var(--fw-semibold); }
.field--consent { display: flex; align-items: flex-start; gap: var(--space-sm); }
.field--consent .field__check { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--color-accent-warm); }

/* ── Ruído e orbs ──────────────────────────────────────────────────── */
.noise { position: absolute; inset: 0; background-image: var(--noise-url); pointer-events: none; }

.orb { position: absolute; border-radius: 50%; pointer-events: none; }

}