/* ============================================================
   Aureon Pagamentos — Landing apex (aureonpagamentos.com.br)
   Art direction: "Fintech claro premium" (Stripe / Mercury / Linear light).
   Violeta = único accent. Verde só dinheiro, vermelho só atraso,
   âmbar só "vence em breve". Sobriedade > brilho. Claro, arejado, limpo.
   ------------------------------------------------------------
   tokens.css é light-oriented — aqui repontamos as superfícies da
   landing (antes DARK) para o esquema CLARO, reusando os tokens claros.
   ============================================================ */

/* ------------------------------------------------------------
   0. LIGHT SURFACE TOKENS (escopo da landing)
   Mantemos os nomes --ink-* / --on-ink-* para não tocar o resto do
   arquivo; só mudamos os VALORES para claro.
   ------------------------------------------------------------ */
:root {
  /* Superfícies claras (branco e cinza-frio quase-branco) */
  --ink-base:    var(--surface-page);      /* fundo da página (~#FAFAFA cool) */
  --ink-base-2:  var(--neutral-100);       /* seção alternada (faixa cinza sutil) */
  --ink-elev:    var(--surface-card);      /* cards elevados (branco) */
  --ink-elev-2:  var(--neutral-100);       /* hover / inset interno */
  --ink-line:    var(--border-subtle);     /* hairline border (cinza-200) */
  --ink-line-2:  var(--border-default);    /* hairline mais visível (cinza-300) */

  /* Texto sobre claro (ink on light) */
  --on-ink-strong: var(--text-primary);    /* headings / números (near-black) */
  --on-ink:        var(--text-body);        /* body */
  --on-ink-soft:   var(--text-secondary);   /* secundário */
  --on-ink-faint:  var(--text-tertiary);    /* meta, faint (AA em pequeno) */

  /* Accent violeta — sobre claro usamos os tokens AA do tokens.css.
     accent-on-dark vira o roxo "de texto/ícone" AA sobre branco. */
  --accent-on-dark: var(--violet-700);      /* roxo AA p/ texto/ícone < 18px sobre branco */
  --accent-solid:   var(--violet-500);      /* roxo de preenchimento (botão/badge/dot) */
  --accent-glow:    oklch(54.5% 0.248 294 / 0.18);  /* halo bem sutil */

  /* Semânticos calibrados p/ claro (texto AA sobre branco) */
  --ink-green:  var(--green-700);
  --ink-red:    var(--red-600);
  --ink-amber:  var(--amber-700);

  /* Faixa clara sutil pra alternar seções (em vez de dark) */
  --g-soft:     var(--neutral-100);
  /* Banda violeta-clara pro CTA final */
  --violet-band: var(--violet-50);

  --font-display: 'Bricolage Grotesque', var(--font-sans);

  --lp-container: 1180px;
}

/* ------------------------------------------------------------
   1. RESET / BASE
   ------------------------------------------------------------ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--on-ink);
  background: var(--ink-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--violet-100); color: var(--violet-700); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -48px;
  background: var(--accent-solid); color: #fff;
  padding: 8px 14px; border-radius: var(--radius);
  font-weight: 600; font-size: 14px; z-index: 999;
  transition: top var(--motion-base) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* Foco visível global AA */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------
   2. LAYOUT — container
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--lp-container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.container-narrow { max-width: 760px; }

/* ------------------------------------------------------------
   3. BUTTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out),
              transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn-sm  { height: 36px; padding-inline: var(--space-4); font-size: 14px; }
.btn-lg  { height: 50px; padding-inline: var(--space-6); font-size: 16px; }

.btn-primary {
  background: var(--violet-500);
  color: #fff;
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.18) inset,
              0 6px 18px -8px var(--accent-glow);
}
.btn-primary:hover {
  background: var(--violet-600);
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.22) inset,
              0 10px 24px -8px var(--accent-glow);
}

.btn-ghost {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--border-default);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  background: var(--neutral-50);
  border-color: var(--violet-200);
  box-shadow: var(--shadow);
}

/* Ghost button over the dark photo hero — light outline + light text */
.btn-ghost-on-dark {
  background: oklch(100% 0 0 / 0.08);
  color: #fff;
  border-color: oklch(100% 0 0 / 0.55);
  box-shadow: none;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.btn-ghost-on-dark:hover {
  background: oklch(100% 0 0 / 0.16);
  border-color: #fff;
  box-shadow: none;
}

/* ------------------------------------------------------------
   4. SHARED — eyebrow, section heads
   ------------------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-solid);
  box-shadow: 0 0 0 3px var(--violet-100);
}

.section { padding-block: clamp(64px, 9vw, 120px); }
.section-alt { background: var(--g-soft); }

/* "Como funciona" — soft, light/cool gradient (violet→light-blue→white wash).
   Scoped to #como-funciona ONLY so #faq (also .section-alt) stays plain gray.
   Distinct "color moment", lighter & cooler than the dark Segurança band. */
#como-funciona.section-alt {
  background:
    linear-gradient(180deg,
      var(--violet-50) 0%,
      oklch(97.5% 0.02 230) 45%,
      #ffffff 100%);
}
/* the step badge's blend-ring was tuned for the old gray bg;
   on the cool gradient use a soft violet ring so it sits cleanly. */
#como-funciona .step-badge {
  box-shadow: 0 0 0 5px oklch(100% 0 0 / 0.6);
}

.section-head {
  max-width: 640px;
  margin: 0 0 var(--space-12);
}
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--on-ink-strong);
}
.section-lead {
  margin: var(--space-4) 0 0;
  font-size: 17px;
  color: var(--on-ink-soft);
  max-width: 52ch;
}

/* ------------------------------------------------------------
   5. HEADER
   ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: oklch(99.5% 0.001 250 / 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border-subtle);
  transition: border-color var(--motion-slow) var(--ease-out),
              box-shadow var(--motion-slow) var(--ease-out),
              background-color var(--motion-slow) var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border-default);
  background: oklch(99.5% 0.001 250 / 0.88);
  box-shadow: 0 8px 24px -16px oklch(0% 0 0 / 0.18);
}
.header-inner {
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
}

.brand {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-weight: 700;
  color: var(--on-ink-strong);
}
.brand-mark { width: 28px; height: 28px; border-radius: 7px; }
.brand-name { font-size: 16px; letter-spacing: -0.01em; }
.brand-name-soft { color: var(--on-ink-soft); font-weight: 500; }

.header-nav {
  display: flex; align-items: center; gap: var(--space-6);
  margin-left: auto;
}
.header-nav a {
  font-size: 14px;
  color: var(--on-ink-soft);
  transition: color var(--motion-base) var(--ease-out);
}
.header-nav a:hover { color: var(--on-ink-strong); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }

/* ------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 110px) clamp(64px, 9vw, 120px);
  overflow: hidden;
}
/* very subtle violet-tinted light wash behind the hero */
.hero-glow {
  position: absolute; pointer-events: none;
  top: -20%; left: 50%; transform: translateX(-32%);
  width: 1200px; height: 1100px;
  background: radial-gradient(circle at center,
              oklch(96.5% 0.022 294 / 0.85) 0%,
              oklch(98% 0.012 294 / 0.45) 38%,
              transparent 64%);
  filter: blur(10px);
  z-index: 0;
}

/* ---- DARK PHOTO HERO (only dark section on an otherwise-light page) ---- */
.hero-photo {
  /* real photo behind a STRONG predominantly-violet overlay.
     Layers, top→bottom: violet radial glow, deep indigo→violet linear, photo. */
  background-image:
    radial-gradient(120% 90% at 78% 8%, oklch(54.5% 0.248 294 / 0.42) 0%, transparent 55%),
    linear-gradient(150deg,
      oklch(24% 0.13 290 / 0.95) 0%,
      oklch(34% 0.19 293 / 0.90) 42%,
      oklch(30% 0.17 290 / 0.92) 72%,
      oklch(22% 0.12 288 / 0.96) 100%),
    url("/assets/img/hero-finance.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, center 30%;
  background-repeat: no-repeat;
}
/* the light violet wash glow is wrong over a dark bg — soften/hide it */
.hero-photo .hero-glow { display: none; }

/* flip hero text to light over the violet overlay (AA on dark) */
.hero-photo .hero-title { color: #fff; }
.hero-photo .hero-sub   { color: oklch(96% 0.01 294 / 0.92); }
.hero-photo .hero-trust { color: oklch(90% 0.02 294 / 0.78); }
.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--on-ink-strong);
}
.hero-sub {
  margin: var(--space-6) 0 0;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--on-ink-soft);
  max-width: 46ch;
}
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-8);
}
.hero-trust {
  margin: var(--space-6) 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--on-ink-faint);
}

/* ---- HERO ENTRANCE (on load, CSS-only) ----
   Stagger the copy in (title → sub → CTAs → trust) and float the
   dashboard card in slightly after. `both` keeps them at the `from`
   state before they play, so there's no flash. Reduced-motion users
   get the static page (override below) — never left invisible. */
@media (prefers-reduced-motion: no-preference) {
  .hero-title,
  .hero-sub,
  .hero-ctas,
  .hero-trust {
    animation: heroRise 0.62s var(--ease-out) both;
  }
  .hero-title  { animation-delay: 0ms; }
  .hero-sub    { animation-delay: 90ms; }
  .hero-ctas   { animation-delay: 180ms; }
  .hero-trust  { animation-delay: 260ms; }

  .hero-mock {
    animation: heroMockIn 0.7s var(--ease-out) 200ms both;
  }
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroMockIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ---- HERO MOCK (CSS-only dashboard) ---- */
.hero-mock { position: relative; }
.mock-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow:
    var(--shadow-lg),
    0 30px 60px -30px oklch(54.5% 0.248 294 / 0.18);
}
/* thin brand-mark hairline at top of card — VERY sparing use of rainbow */
.mock-card::before {
  content: ""; position: absolute; left: var(--space-6); right: var(--space-6); top: 0;
  height: 2px; border-radius: 2px;
  background: var(--gradient-brand-mark);
  opacity: 0.85;
}

.mock-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-5);
}
.mock-head-left { display: inline-flex; align-items: center; gap: var(--space-2); }
.mock-dot { width: 8px; height: 8px; border-radius: 50%; }
.mock-dot-violet { background: var(--accent-solid); box-shadow: 0 0 0 3px var(--violet-100); }
.mock-title { font-size: 13px; font-weight: 600; color: var(--on-ink); }
.mock-chip {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--on-ink-soft);
  background: var(--neutral-100);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

.mock-total {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--ink-line);
}
.mock-total-label {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--on-ink-faint);
}
.mock-total-value {
  font-size: clamp(30px, 4.2vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--on-ink-strong);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.mock-total-delta { font-size: 12px; font-weight: 600; }
.mock-up { color: var(--ink-green); }

/* ---- HERO MOCK micro-motion on load ----
   Aging bars grow from scaleX(0)→1 (origin left, animate transform NOT
   flex so layout/widths stay correct), staggered; delta fades in.
   Played via .mock-card.is-live (JS toggles it). Guarded by reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .mock-card.is-live .aging-seg {
    transform-origin: left center;
    animation: agingGrow 0.7s var(--ease-out) both;
  }
  .mock-card.is-live .aging-seg.seg-0  { animation-delay: 520ms; }
  .mock-card.is-live .aging-seg.seg-30 { animation-delay: 620ms; }
  .mock-card.is-live .aging-seg.seg-60 { animation-delay: 720ms; }
  .mock-card.is-live .aging-seg.seg-90 { animation-delay: 820ms; }

  .mock-card.is-live .mock-total-delta {
    animation: deltaIn 0.5s var(--ease-out) 1100ms both;
  }
}
@keyframes agingGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes deltaIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* aging */
.mock-aging { margin-bottom: var(--space-5); }
.mock-aging-label-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-3);
}
.mock-aging-label {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--on-ink-soft);
}
.mock-aging-meta { font-size: 12px; color: var(--ink-red); font-weight: 600; }

.aging-bar {
  display: flex; gap: 3px; height: 12px;
  margin-bottom: var(--space-3);
}
.aging-seg { border-radius: 3px; }
.seg-0  { background: var(--violet-500); }
.seg-30 { background: var(--violet-200); }
.seg-60 { background: var(--amber-500); }
.seg-90 { background: var(--red-500); }

.aging-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  font-size: 11.5px; color: var(--on-ink-soft);
}
.aging-legend li { display: inline-flex; align-items: center; gap: 6px; }
.aging-legend .lg-danger { color: var(--ink-red); font-weight: 600; }
.lg-dot { width: 8px; height: 8px; border-radius: 2px; }
.d-0  { background: var(--violet-500); }
.d-30 { background: var(--violet-200); }
.d-60 { background: var(--amber-500); }
.d-90 { background: var(--red-500); }

/* receivable rows */
.mock-rows { display: flex; flex-direction: column; gap: 2px; }
.mock-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius);
  transition: background-color var(--motion-base) var(--ease-out);
}
.mock-row:hover { background: var(--neutral-100); }
.row-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  font-family: var(--font-mono);
  color: var(--violet-700);
  background: var(--violet-50);
  border: 1px solid var(--violet-100);
}
.row-name { font-size: 13.5px; font-weight: 500; color: var(--on-ink); }
.row-status {
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.st-warning { color: var(--amber-700); background: var(--amber-100); }
.st-success { color: var(--green-700); background: var(--green-100); }
.st-danger  { color: var(--red-700);   background: var(--red-100); }
.row-value { font-size: 13px; font-weight: 600; color: var(--on-ink-strong); }

/* ------------------------------------------------------------
   7. RECURSOS — feature grid
   ------------------------------------------------------------ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.feature-card {
  background: var(--surface-card);
  /* brand aqua border — softened so it reads premium, not neon, at 1px on white */
  border: 1px solid oklch(82% 0.09 195);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-slow) var(--ease-out),
              border-color var(--motion-slow) var(--ease-out),
              box-shadow var(--motion-slow) var(--ease-out);
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-aqua-500);
  box-shadow: var(--shadow-md);
}
.feature-icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: var(--space-5);
}
/* soft violet glow behind the duotone icon (static — reduced-motion safe) */
.feature-icon::after {
  content: ""; position: absolute; inset: -8px; z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(54.5% 0.248 294 / 0.20), transparent 70%);
}
.feature-icon svg { position: relative; z-index: 1; width: 46px; height: 46px; }
.feature-title {
  font-size: 17px; font-weight: 600;
  color: var(--on-ink-strong);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}
.feature-desc { font-size: 14.5px; color: var(--on-ink-soft); line-height: 1.55; }

/* ------------------------------------------------------------
   8. COMO FUNCIONA — steps
   ------------------------------------------------------------ */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
/* connecting line on desktop */
.steps::before {
  content: ""; position: absolute;
  top: 22px; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-line-2) 18%, var(--ink-line-2) 82%, transparent);
  z-index: 0;
}
.step { position: relative; z-index: 1; }
.step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-family: var(--font-mono); font-weight: 600; font-size: 17px;
  color: var(--violet-700);
  background: var(--violet-50);
  border: 1px solid var(--violet-200);
  box-shadow: 0 0 0 5px var(--g-soft);
  margin-bottom: var(--space-5);
}
.step-title {
  font-size: 18px; font-weight: 600;
  color: var(--on-ink-strong);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}
.step-desc { font-size: 14.5px; color: var(--on-ink-soft); line-height: 1.55; max-width: 32ch; }

/* ------------------------------------------------------------
   9. KPI BAND
   ------------------------------------------------------------ */
.kpi-band {
  padding-block: clamp(48px, 6vw, 72px);
  border-block: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.kpi {
  position: relative;
  padding-left: var(--space-5);
}
/* thin brand hairline accent — sparing rainbow */
.kpi::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 2px; border-radius: 2px;
  background: var(--gradient-brand-mark);
  opacity: 0.7;
}
.kpi-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--on-ink-strong);
}
.kpi-label {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--on-ink-soft);
}

/* ------------------------------------------------------------
   10. SEGURANÇA
   ------------------------------------------------------------ */
.seg-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}
.seg-list { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); }
.seg-item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  font-size: 15px; color: var(--on-ink-soft); line-height: 1.55;
}
.seg-item strong { color: var(--on-ink-strong); font-weight: 600; }
.seg-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%;
  color: var(--green-700);
  background: var(--green-100);
  border: 1px solid var(--green-200);
}
.seg-check svg { width: 15px; height: 15px; }

/* security visual — "camadas de proteção": 3 planos de vidro em
   profundidade + cadeado animado no núcleo */
.seg-visual {
  position: relative;
  display: grid; place-items: center;
}

/* the framed dark block (same footprint the old photo had) */
.seg-lock {
  position: relative;
  width: 100%;
  height: 460px;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background:
    radial-gradient(120% 95% at 50% 8%,
      oklch(28% 0.13 292 / 0.55) 0%, transparent 62%),
    radial-gradient(90% 60% at 50% 100%,
      oklch(22% 0.12 288 / 0.45) 0%, transparent 70%),
    #14082e;
  box-shadow: var(--shadow-lg),
              0 30px 60px -30px oklch(54.5% 0.248 294 / 0.22);
  isolation: isolate;
}

/* ---- camadas de proteção: painéis de vidro translúcidos em leve
   perspectiva 3D, de trás (maior, mais alto) pra frente (menor, mais baixo).
   Estado base (sem JS / reduced-motion) = pilha completa, visível. ---- */
.seg-layer {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 16px;
  transform: var(--seg-tf);
  opacity: var(--seg-op, 1);
  background: linear-gradient(180deg,
    oklch(100% 0 0 / 0.085) 0%,
    oklch(100% 0 0 / 0.028) 100%);
  border: 1px solid oklch(75% 0.16 294 / 0.32);
  box-shadow:
    0 22px 44px -20px oklch(0% 0 0 / 0.55),
    0 0 30px -8px oklch(54.5% 0.248 294 / 0.35),
    inset 0 1px 0 oklch(100% 0 0 / 0.10);
}
.seg-layer-back {
  --seg-tf: translate(-50%, calc(-50% - 70px)) perspective(900px) rotateX(12deg);
  --seg-op: 0.8;
  width: 78%; height: 236px;
}
.seg-layer-mid {
  --seg-tf: translate(-50%, calc(-50% - 22px)) perspective(900px) rotateX(10deg);
  --seg-op: 0.9;
  width: 68%; height: 216px;
}
.seg-layer-front {
  --seg-tf: translate(-50%, calc(-50% + 26px)) perspective(900px) rotateX(8deg);
  width: 58%; height: 196px;
  border-color: oklch(80% 0.15 294 / 0.45);
}
.seg-layer-label {
  position: absolute;
  top: 12px; left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: oklch(93% 0.025 290 / 0.78);
  white-space: nowrap;
}
.seg-layer-front .seg-layer-label { color: oklch(95% 0.03 290 / 0.92); }
/* ícone do conceito da camada: violeta claro, um degrau acima do label */
.seg-layer-icon {
  width: 19px; height: 19px;
  flex: none;
  color: oklch(84% 0.105 294);
}
.seg-layer-front .seg-layer-icon { color: oklch(88% 0.115 294); }

/* the padlock svg, núcleo da pilha (frente, centro-baixo) */
.seg-lock-svg {
  position: relative;
  z-index: 2;
  width: 168px;
  height: 168px;
  overflow: visible;
  transform: translateY(54px);
}

/* ---- DEFAULT (no JS / reduced-motion / pre-scroll) = LOCKED ---- */
.seg-lock .lock-body {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center bottom;
}
.seg-lock .lock-shackle {
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(0);             /* closed/locked */
}
.seg-lock .lock-ring { opacity: 0; }
.seg-lock .lock-key-glow { opacity: 0.9; }

/* ---- ANIMATION (added when .lock-animate is set by the observer) ----
   Sequência: camadas entram de trás pra frente (stagger ~190ms),
   e SÓ DEPOIS o cadeado faz a animação de travar (delay base 0.95s). */
.seg-lock.lock-animate .seg-layer-back {
  animation: segLayerIn 0.55s var(--ease-out) 0s both;
}
.seg-lock.lock-animate .seg-layer-mid {
  animation: segLayerIn 0.55s var(--ease-out) 0.19s both;
}
.seg-lock.lock-animate .seg-layer-front {
  animation: segLayerIn 0.55s var(--ease-out) 0.38s both;
}
.seg-lock.lock-animate .lock-body {
  animation: lockBodyIn 0.55s var(--ease-out) 0.95s both;
}
.seg-lock.lock-animate .lock-shackle {
  animation: lockShackle 0.85s var(--ease-out) 0.95s both;
}
.seg-lock.lock-animate .lock-ring {
  animation: lockRing 0.6s ease-out 1.65s both;
}
.seg-lock.lock-animate .lock-key-glow {
  animation: lockKeyFlash 0.8s ease-out 1.5s both;
}

/* camada entra "vindo de trás": some, mais funda e levemente maior,
   e assenta no transform base (--seg-tf é por-camada). */
@keyframes segLayerIn {
  0% {
    opacity: 0;
    transform: var(--seg-tf) translateY(-22px) scale(1.04);
  }
  100% {
    opacity: var(--seg-op, 1);
    transform: var(--seg-tf);
  }
}

/* belt-and-suspenders: com reduced-motion, tudo no estado final estático
   mesmo que .lock-animate apareça (o JS já não a adiciona). */
@media (prefers-reduced-motion: reduce) {
  .seg-lock.lock-animate .seg-layer,
  .seg-lock.lock-animate .lock-body,
  .seg-lock.lock-animate .lock-shackle,
  .seg-lock.lock-animate .lock-ring,
  .seg-lock.lock-animate .lock-key-glow {
    animation: none;
  }
}

@keyframes lockBodyIn {
  0%   { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}
/* shackle: surge levantado (aberto) e desce/trava com clique. opacity esconde o início. */
@keyframes lockShackle {
  0%   { opacity: 0; transform: translateY(-14px); }  /* levantado = aberto, invisível */
  18%  { opacity: 1; transform: translateY(-14px); }  /* já visível, ainda aberto */
  42%  { transform: translateY(-14px); }              /* segura aberto */
  74%  { transform: translateY(3px); }                /* desce passando do fechado (clique) */
  88%  { transform: translateY(-1px); }
  100% { opacity: 1; transform: translateY(0); }       /* assenta travado */
}
/* pulse ring outward once */
@keyframes lockRing {
  0%   { opacity: 0;   transform: scale(0.7); }
  20%  { opacity: 0.75; }
  100% { opacity: 0;   transform: scale(1.5); }
}
.seg-lock .lock-ring {
  transform-box: fill-box;
  transform-origin: center;
}
/* keyhole flashes brighter violet, then settles to gentle glow */
@keyframes lockKeyFlash {
  0%   { opacity: 0.4; }
  45%  { opacity: 1; }
  100% { opacity: 0.9; }
}

/* ------------------------------------------------------------
   10b. SEGURANÇA — DARK BRAND BAND ("o momento de segurança")
   The only dark area besides the hero. Strong, premium, predominantly
   violet/indigo. Scoped to #seguranca so nothing else is affected.
   ------------------------------------------------------------ */
#seguranca {
  position: relative;
  isolation: isolate;
  background:
    /* subtle violet glow layer */
    radial-gradient(110% 80% at 82% 12%,
      oklch(54.5% 0.248 294 / 0.30) 0%, transparent 58%),
    /* deep indigo → violet → brand-blue, premium not flat */
    linear-gradient(150deg,
      oklch(26% 0.13 287) 0%,
      var(--violet-600) 48%,
      oklch(34% 0.20 272) 100%);
}

/* ---- text flip to light (AA on the dark gradient) ---- */
#seguranca .section-title { color: #fff; }
#seguranca .section-lead  { color: oklch(90% 0.02 280); }
#seguranca .seg-item {
  color: oklch(90% 0.02 280);       /* light lavender-white body */
}
#seguranca .seg-item strong { color: #fff; }

/* ---- check chips: subtle translucent white/violet on dark
   (no bright green circle — keeps the "green = money only" discipline) ---- */
#seguranca .seg-check {
  color: oklch(96% 0.03 290);                 /* near-white, faint violet tint */
  background: oklch(100% 0 0 / 0.12);          /* translucent white circle */
  border-color: oklch(100% 0 0 / 0.2);         /* faint border */
}

/* ---- make the .seg-lock card POP against the dark band:
   brighter visible border + stronger shadow + violet outer glow.
   Padlock animation & internals untouched. ---- */
#seguranca .seg-lock {
  border-color: oklch(100% 0 0 / 0.12);
  box-shadow:
    0 30px 70px -28px oklch(0% 0 0 / 0.55),
    0 0 0 1px oklch(100% 0 0 / 0.04),
    0 24px 60px -24px oklch(54.5% 0.248 294 / 0.55);
}

/* ------------------------------------------------------------
   11. FAQ
   ------------------------------------------------------------ */
/* FAQ head fica alinhado à ESQUERDA (default), como as outras seções. */

.faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item {
  background: var(--ink-elev);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  padding: 0 var(--space-5);
  transition: border-color var(--motion-base) var(--ease-out);
}
.faq-item[open] { border-color: var(--ink-line-2); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-size: 16px; font-weight: 600;
  color: var(--on-ink-strong);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono); font-weight: 400; font-size: 22px;
  color: var(--violet-700);
  line-height: 1;
  transition: transform var(--motion-base) var(--ease-out);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p {
  margin: 0;
  padding: 0 0 var(--space-5);
  font-size: 14.5px; color: var(--on-ink-soft); line-height: 1.6;
  max-width: 62ch;
}
.faq-item code {
  font-family: var(--font-mono); font-size: 0.85em;
  color: var(--violet-700);
  background: var(--violet-50);
  padding: 1px 5px; border-radius: 4px;
}
.faq-item strong { color: var(--on-ink); }

/* ------------------------------------------------------------
   12. CTA FINAL
   ------------------------------------------------------------ */
.cta-final {
  position: relative;
  padding-block: clamp(72px, 10vw, 130px);
  text-align: center;
  overflow: hidden;
  /* Banda ESCURA vibrante que fecha a página, agora com MESH violeta↔aqua.
     Base = violeta profundo com transição DIAGONAL nítida: o canto sup-esq
     puxa pro aqua-teal, fundindo (via hue ~215) com o violeta no caminho,
     e o canto inf-dir escurece. O verde-água ganha presença real no
     .cta-glow (blooms grandes/saturados nos cantos), mas o CENTRO segue
     violeta profundo (bloom escuro central) → texto branco continua AA+. */
  background:
    /* transição diagonal violeta↔aqua: aqua vibrante no sup-esq, fundindo
       por um stop hue ~215 no violeta, escurecendo até o inf-dir */
    linear-gradient(132deg,
      oklch(66% 0.150 198)  0%,    /* aqua-teal claro e saturado no canto */
      oklch(54% 0.165 215) 18%,    /* ponte aqua→violeta (azul-petróleo) */
      var(--violet-600)    40%,
      var(--violet-700)    62%,
      oklch(33% 0.175 294) 100%),  /* violeta bem profundo no inf-dir */
    var(--violet-700);
  border-top: 1px solid oklch(78% 0.130 195 / 0.45);     /* hairline aqua translúcida */
  border-bottom: 1px solid oklch(78% 0.130 195 / 0.20);
}
/* Mesh gradient: blooms de aqua GRANDES e saturados nos cantos/diagonal +
   reforço violeta profundo no centro (mantém a zona do texto escura → AA). */
.cta-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    /* AQUA forte no canto superior-esquerdo — protagonista do mesh */
    radial-gradient(64% 92% at -4% -10%,
      oklch(80% 0.155 196 / 0.72) 0%,
      oklch(78% 0.140 198 / 0.34) 30%,
      oklch(70% 0.130 210 / 0.12) 52%,
      transparent 68%),
    /* AQUA no canto inferior-direito (diagonal oposta), bem presente */
    radial-gradient(62% 88% at 104% 110%,
      oklch(81% 0.150 195 / 0.62) 0%,
      oklch(79% 0.135 198 / 0.26) 34%,
      transparent 64%),
    /* faixa aqua-azulada na borda direita-meio pra fundir aqua↔violeta */
    radial-gradient(48% 72% at 106% 44%,
      oklch(64% 0.155 215 / 0.48) 0%,
      oklch(60% 0.150 222 / 0.16) 40%,
      transparent 64%),
    /* sopro de aqua na borda esquerda-meio (presença nos dois lados) */
    radial-gradient(40% 64% at -6% 56%,
      oklch(76% 0.140 200 / 0.34) 0%,
      transparent 58%),
    /* BLOOM de violeta profundo no CENTRO → escurece onde o texto assenta,
       blindando o contraste mesmo com o aqua chegando mais perto */
    radial-gradient(56% 86% at 50% 50%,
      oklch(31% 0.180 294 / 0.94) 0%,
      oklch(35% 0.185 294 / 0.62) 40%,
      oklch(40% 0.190 294 / 0.18) 64%,
      transparent 80%);
}
.cta-inner { position: relative; z-index: 1; }
.cta-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;                       /* sobre violet-700 → ~10:1 (AAA) */
  max-width: 18ch; margin-inline: auto;
}
.cta-sub {
  margin: var(--space-5) auto var(--space-8);
  font-size: 17px;
  color: oklch(100% 0 0 / 0.82);     /* branco a 82% sobre violet-700 → ~7.3:1 (AA/AAA) */
  max-width: 44ch;
}
/* Botão invertido: branco com texto violeta — alto contraste sobre a banda escura. */
.cta-final .btn-primary {
  background: #fff;
  color: var(--violet-700);          /* violet-700 sobre branco → ~10:1 (AAA) */
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.6) inset,
              0 10px 30px -10px oklch(20% 0.10 294 / 0.55);
}
.cta-final .btn-primary:hover {
  background: oklch(98% 0.012 294);  /* off-white com leve tinta violeta */
  color: var(--violet-700);
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.7) inset,
              0 14px 36px -10px oklch(20% 0.10 294 / 0.6);
}

/* ------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------ */
.site-footer {
  background: var(--ink-base-2);
  border-top: 1px solid var(--ink-line);
  padding-block: var(--space-12) var(--space-6);
}
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--ink-line);
}
.footer-tagline { margin: var(--space-3) 0 0; font-size: 14px; color: var(--on-ink-soft); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer-nav a {
  font-size: 14px; color: var(--on-ink-soft);
  transition: color var(--motion-base) var(--ease-out);
}
.footer-nav a:hover { color: var(--on-ink-strong); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
}
.footer-copy { font-size: 13px; color: var(--on-ink-faint); }
.footer-version {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--on-ink-faint);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}

/* ------------------------------------------------------------
   14. REVEAL-ON-SCROLL (JS-gated, fails open)
   ------------------------------------------------------------ */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(4px);
  transition: opacity 700ms var(--ease-out),
              transform 700ms var(--ease-out),
              filter 700ms var(--ease-out);
  will-change: opacity, transform, filter;
}
.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Staggered cascade for grid/list children — each sibling waits a beat
   so the row ripples in instead of popping at once. Delay applies on the
   way IN; is-visible keeps the same delay (fine, it's a one-shot reveal). */
.js-reveal .feature-grid > .reveal:nth-child(2),
.js-reveal .steps > .reveal:nth-child(2),
.js-reveal .kpi-row > .reveal:nth-child(2),
.js-reveal .faq-list > .reveal:nth-child(2),
.js-reveal .seg-list > .reveal:nth-child(2) { transition-delay: 80ms; }

.js-reveal .feature-grid > .reveal:nth-child(3),
.js-reveal .steps > .reveal:nth-child(3),
.js-reveal .kpi-row > .reveal:nth-child(3),
.js-reveal .faq-list > .reveal:nth-child(3),
.js-reveal .seg-list > .reveal:nth-child(3) { transition-delay: 160ms; }

.js-reveal .feature-grid > .reveal:nth-child(4),
.js-reveal .kpi-row > .reveal:nth-child(4),
.js-reveal .faq-list > .reveal:nth-child(4) { transition-delay: 240ms; }

.js-reveal .feature-grid > .reveal:nth-child(5),
.js-reveal .faq-list > .reveal:nth-child(5) { transition-delay: 320ms; }

.js-reveal .feature-grid > .reveal:nth-child(6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1; transform: none; filter: none;
    transition: none; transition-delay: 0ms;
  }
}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-copy { max-width: 640px; }
  .hero-mock { max-width: 520px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .seg-grid { grid-template-columns: 1fr; }
  .seg-visual { order: -1; }
  .seg-lock { height: 300px; }
  .seg-lock-svg { width: 128px; height: 128px; transform: translateY(38px); }
  /* camadas compactas: mantêm a faixa do label visível em 300px de altura */
  .seg-layer-back  { --seg-tf: translate(-50%, calc(-50% - 48px)) perspective(900px) rotateX(12deg); height: 152px; }
  .seg-layer-mid   { --seg-tf: translate(-50%, calc(-50% - 14px)) perspective(900px) rotateX(10deg); height: 138px; }
  .seg-layer-front { --seg-tf: translate(-50%, calc(-50% + 18px)) perspective(900px) rotateX(8deg);  height: 124px; }
  .seg-layer-label { font-size: 11px; top: 10px; left: 14px; gap: 6px; }
  .seg-layer-icon { width: 16px; height: 16px; }
}

/* Hide header nav on small screens, keep Entrar CTA */
@media (max-width: 720px) {
  .header-nav { display: none; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-6); }
  .steps { grid-template-columns: 1fr; gap: var(--space-6); }
  .steps::before { display: none; }
}

/* Mobile */
@media (max-width: 560px) {
  .container { padding-inline: var(--space-5); }
  .feature-grid { grid-template-columns: 1fr; }
  .hero-ctas .btn { flex: 1 1 auto; }
  .mock-card { padding: var(--space-5); }
  .footer-inner { flex-direction: column; gap: var(--space-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  /* CTA no formato estreito: os blooms de canto horizontais somem na vertical,
     então re-ancoramos o aqua no TOPO e na BASE da banda (ainda diagonal,
     leve viés p/ os cantos) pra garantir presença visível do verde-água. */
  .cta-final {
    background:
      linear-gradient(168deg,
        oklch(66% 0.150 198)  0%,
        oklch(54% 0.165 215) 14%,
        var(--violet-600)    34%,
        var(--violet-700)    66%,
        oklch(33% 0.175 294) 100%),
      var(--violet-700);
  }
  .cta-glow {
    background:
      /* aqua forte no topo (vindo do canto sup-esq) */
      radial-gradient(120% 46% at 18% -8%,
        oklch(80% 0.155 196 / 0.70) 0%,
        oklch(78% 0.140 200 / 0.30) 32%,
        transparent 60%),
      /* aqua na base (canto inf-dir) */
      radial-gradient(120% 44% at 82% 108%,
        oklch(81% 0.150 195 / 0.60) 0%,
        oklch(79% 0.135 200 / 0.24) 34%,
        transparent 62%),
      /* bloom violeta profundo central, mais estreito p/ caber atrás do texto */
      radial-gradient(78% 56% at 50% 50%,
        oklch(31% 0.180 294 / 0.95) 0%,
        oklch(35% 0.185 294 / 0.60) 42%,
        transparent 78%);
  }
}

/* Very small — keep mock readable */
@media (max-width: 380px) {
  .mock-total-value { font-size: 28px; }
  .row-status { font-size: 10px; padding: 2px 6px; }
}