/* ══════════════════════════════════════════════════════════════════
   PAYTIME DESIGN SYSTEM — design-system.css
   Unified stylesheet: shared.css + design-system-new.html
   Version: V2.0 — Brand Kit V5 Final
══════════════════════════════════════════════════════════════════ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── 1. TOKENS & VARIABLES ── */
/* ── Design Tokens ── */
:root {
  --azul-escuro: #03021E;
  --azul-profundo: #02023C;
  --azul-medio: #04017B;
  --azul-paytime: #400FF2;
  --lilas: #9884FF;
  --lilas-claro: #D9CDFD;
  --off-white: #E9E4ED;

  --primary-50: #F5F2FE;
  --primary-100: #E9E4ED;
  --primary-200: #D9CDFD;
  --primary-300: #C4B4FC;
  --primary-400: #9884FF;
  --primary-500: #400FF2;
  --primary-600: #3309C4;
  --primary-700: #04017B;
  --primary-800: #030158;
  --primary-900: #02023C;

  --grad-primary: linear-gradient(135deg, #04017B, #400FF2);
  --grad-accent: linear-gradient(135deg, #400FF2, #9884FF);
  --grad-light: linear-gradient(135deg, #9884FF, #D9CDFD);
  --grad-soft: linear-gradient(135deg, #D9CDFD, #E9E4ED);
  --grad-card: linear-gradient(145deg, #ffffff, #F5F2FE);


  --gray-900: #03021E;
  --gray-800: #18233C;
  --gray-700: #3D4C6F;
  --gray-600: #5A6A8A;
  --gray-500: #8A9BB8;
  --gray-400: #C6C5C9;
  --gray-300: #DDD9E4;
  --gray-200: #EDEAF2;
  --gray-100: #F5F2FA;
  --gray-50: #FAF8FD;

  --success: #22C55E;
  --warning: #F59E0B;
  --error: #F07878;
  --success-solid: #21B686;
  --warning-solid: #E6AD42;
  --error-solid: #E43E62;

  --font-heading: 'Poppins', -apple-system, sans-serif;
  --font-body: 'Poppins', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-display: clamp(1.75rem, 2.8vw + 0.6rem, 2.8rem);
  --text-h1: clamp(1.875rem, 2.5vw + 0.5rem, 2.75rem);
  --text-h2: clamp(1.5rem, 2vw + 0.3rem, 2.25rem);
  --text-h3: clamp(1.125rem, 1vw + 0.3rem, 1.5rem);
  --text-h4: clamp(1rem, 0.8vw + 0.2rem, 1.125rem);
  --text-body: 0.9rem;
  --text-body-sm: clamp(0.8125rem, 0.2vw + 0.65rem, 0.9375rem);
  --text-caption: 0.8125rem;
  --text-overline: 0.6875rem;

  /* ── Badge ── */
  --badge-font-size: 0.7rem;
  --badge-font-weight: 500;
  --badge-padding: 0.25rem 0.65rem;
  --badge-border: 1px solid;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 6rem;
  --space-20: 8rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 3px rgba(3, 2, 30, 0.06);
  --shadow-sm: 0 2px 8px rgba(3, 2, 30, 0.08);
  --shadow-md: 0 4px 20px rgba(3, 2, 30, 0.10);
  --shadow-lg: 0 8px 40px rgba(3, 2, 30, 0.12);
  --shadow-xl: 0 16px 64px rgba(3, 2, 30, 0.14);
  --shadow-blue: 0 4px 24px rgba(64, 15, 242, 0.28);

  --border-light: rgba(64, 15, 242, 0.10);
  --border-medium: rgba(64, 15, 242, 0.18);
  --border-strong: rgba(64, 15, 242, 0.35);

  --bg-body: #FAF8FD;
  --bg-white: #ffffff;
  --bg-blue: #400FF2;
  --bg-navy: #03021E;

  /* ── Light canvas tokens ── */
  --canvas: #FAF8FE;
  --canvas-deep: #F2EDFB;
  --ink: #03021E;
  --ink-soft: rgba(3, 2, 30, 0.62);
  --ink-mute: rgba(3, 2, 30, 0.45);
  --ink-line: rgba(3, 2, 30, 0.08);

  /* ── Glass blur scale ── */
  --glass-blur: 28px;
  --glass-blur-strong: 44px;

  /* ── Spacing sp- scale (matches reference pages) ── */
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
}


/* ── Additional design system tokens ── */
:root {
  --font-brand: 'Poppins', -apple-system, sans-serif;
  --font-heading: 'Poppins', -apple-system, sans-serif;
  --text-h4: clamp(1rem, 0.8vw + 0.2rem, 1.125rem);
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-10: 128px;
  --radius-2xl: 44px;
  --shadow-xlg: 0 24px 60px rgba(64, 15, 242, 0.18), 0 4px 16px rgba(3, 2, 30, 0.10);
  --shadow-glow: 0 0 0 8px rgba(64, 15, 242, 0.08), 0 12px 32px rgba(64, 15, 242, 0.30);
  --border-subtle: rgba(152, 132, 255, 0.12);
  --c-dark: #03021E;
  --c-deep: #02023C;
  --c-navy: #1B1660;
  --c-blue: #400FF2;
  --c-blue-mid: #5a28ff;
  --c-lilas: #9884FF;
  --c-lilas-lt: #D9CDFD;
  --c-canvas: #FAF8FE;
  --c-canvas-dp: #F0EEFF;
  --c-gold: #d4c685;
}

/* ── 2. RESET & BASE ── */
/* ── Normalização global de ícones DS dentro de containers visuais ── */
[class*="-icon"]>.ds-icon,
[class*="__icon"]>.ds-icon,
[class*="-check"]>.ds-icon,
[class*="__check"]>.ds-icon,
[class*="__num"]>.ds-icon,
[class*="step__"]>.ds-icon,
[class*="-cell__icon"]>.ds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 1em;
  height: 1em;
}


/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(186, 213, 255, 0.58), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(196, 184, 255, 0.50), transparent 34%),
    linear-gradient(180deg, #F8FAFF 0%, #F4F3FF 42%, #FFFFFF 100%);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

ul {
  list-style: none;
}



::selection {
  background: var(--azul-paytime);
  color: #fff;
}

main {
  position: relative;
  z-index: 2;
}

/* ── 3. LAYOUT (container, section, grid) ── */
/* ── Layout ── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container--narrow {
  max-width: 760px;
}

.section {
  padding: var(--sp-8) 0;
}

@media (max-width: 768px) {
  .section {
    padding: var(--sp-7) 0;
  }
}

.section--large {
  padding: var(--space-10) 0;
}

.section--small {
  padding: var(--space-5) 0;
}

.section--white {
  background: var(--bg-white);
}

.section--light {
  background: var(--bg-body);
}

/* ── Alternância automática de background em páginas light ──
   Hero (1º filho, ímpar) = aurora. Depois: par=branco / ímpar=aurora (transparente).
   Resultado: aurora, branco, aurora, branco… a partir do hero. */
[data-navbar-theme="light"] main>section:nth-child(even) {
  background: #ffffff;
}

.section-header {
  max-width: 820px;
  margin: 0 auto var(--space-10);
  text-align: center;
}

.overline {
  font-size: var(--text-overline);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-500);
  display: inline-block;
  margin-bottom: var(--space-3);
}

.overline--white {
  color: rgba(255, 255, 255, 0.7);
}

.section-title {
  /* font-family: var(--font-heading); */
  font-weight: 700;
  /* font-size: var(--text-h1); */
  font-size: clamp(34px, 4.4vw, 56px);
  /* line-height: 1.2; */
  line-height: 1.04;
  /* letter-spacing: -0.01em; */
  letter-spacing: -0.03em;
  /* color: var(--gray-900); */
  color: var(--ink);
  margin-top: var(--sp-4);
  /* margin-bottom: var(--space-4); */
  margin-bottom: var(--sp-4);
}

.section-title--white {
  color: #fff;
}

.section-subtitle {
  font-size: var(--text-body);
  color: var(--gray-600);
  line-height: 1.72;
}

.section-subtitle--white {
  color: rgba(255, 255, 255, 0.75);
}

.section-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.section-pill {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 0.35rem 0.875rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}



/* ── 4. TYPOGRAPHY ── */
/* ── Gradient utilities ── */
.bg-grad-primary {
  background: var(--grad-primary);
}

.bg-grad-accent {
  background: var(--grad-accent);
}

.bg-grad-light {
  background: var(--grad-light);
}

.bg-grad-soft {
  background: var(--grad-soft);
}

.bg-grad-card {
  background: var(--grad-card);
}

.text-grad-primary {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-grad-accent {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-grad-light {
  background: var(--grad-light);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-grad-soft {
  background: var(--grad-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}



/* ── DS type scale (type-*, section-head, eyebrow) ── */
/* V2 · SECTION TYPOGRAPHY STANDARDS .section-head+.section-title+.section-desc+.eyebrow ══════════════════════════════════════════════════════ */

/* Container */
.section-head {
  max-width: 760px;
  margin-bottom: var(--sp-7, 48px);
}

.section-head.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem;
}

.section-head.center .section-desc {
  margin-left: auto;
  margin-right: auto;
}

/* Section title — em tag: lilás on dark, gradient on light */
.section-title em {
  font-style: normal;
  color: var(--lilas);
}

[data-navbar-theme="light"] .section-title {
  color: var(--ink);
}

[data-navbar-theme="light"] .section-title em {
  color: inherit;
  background: linear-gradient(135deg, var(--azul-paytime) 0%, var(--lilas) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Section description (V2 alias + light variant) */
.section-desc {
  font-size: 17px;
  color: rgba(233, 228, 237, 0.65);
  line-height: 1.6;
  max-width: 640px;
}

[data-navbar-theme="light"] .section-desc,
[data-navbar-theme="light"] .section-subtitle {
  color: var(--ink-soft);
}

/* ── Eyebrow pill badge ── */
/* ══════════════════════════════════════════════════════════════════
   EYEBROW — classe única do site.
   .eyebrow            → liquid glass (padrão atual, igual ao hero do online)
   .eyebrow-secondary  → estilo anterior (lilás translúcido) — troque a classe
                          .eyebrow → .eyebrow-secondary p/ voltar ao antigo
   .eyebrow-tertiary   → sólido roxo suave
   ══════════════════════════════════════════════════════════════════ */
.eyebrow,
.eyebrow-secondary,
.eyebrow-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  white-space: nowrap;
  margin-bottom: var(--space-3);
}

/* Padrão — liquid glass (mesmo efeito dos chips do checkout / hero do online) */
.eyebrow {
  color: var(--primary-500);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.35));
  border: 1px solid rgb(64 15 242 / 12%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
  box-shadow: 0 6px 16px rgba(64, 15, 242, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* Sobre fundo escuro: vidro escuro + texto claro */
[data-navbar-theme="dark"] .eyebrow {
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Secundário — estilo anterior (lilás translúcido) */
.eyebrow-secondary {
  color: var(--lilas-claro);
  background: rgba(152, 132, 255, 0.10);
  border: 1px solid rgba(152, 132, 255, 0.25);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
[data-navbar-theme="light"] .eyebrow-secondary {
  color: var(--azul-paytime);
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(64, 15, 242, 0.18);
}

/* Terciário — sólido roxo suave */
.eyebrow-tertiary {
  background: rgba(64, 15, 242, 0.10);
  color: var(--primary-500);
  border: 1px solid rgba(64, 15, 242, 0.2);
}

/* Dot compartilhado (acompanha a cor do texto) */
.eyebrow .dot,
.eyebrow-secondary .dot,
.eyebrow-tertiary .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

/* ══════════════════════════════════════════════════════
   
/* TYPE */
.type-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.type-row {
  display: grid;
  grid-template-columns: 120px 1fr 200px;
  gap: var(--sp-5);
  align-items: baseline;
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.95);
}

.type-row .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.type-row .specs {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  text-align: right;
}

.type-display {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

.type-h1 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.type-h2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.type-h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.type-body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.type-small {
  font-size: 13px;
  color: var(--ink-soft);
}

.type-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--azul-paytime);
  text-transform: uppercase;
}



/* ── 5. BUTTONS ── */
/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 1rem 1.875rem;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  text-decoration: none;
}

.btn--primary {
  background: var(--primary-500);
  color: #fff;
  box-shadow: 0 4px 18px rgba(64, 15, 242, 0.22);
}

.btn--primary:hover {
  background: var(--c-blue-mid);
  box-shadow: 0 8px 26px rgba(64, 15, 242, 0.32);
}

.btn--secondary {
  background: #ffffff;
  color: rgb(11, 18, 32);
  border: 1px solid rgb(215, 218, 226);
}

.btn--secondary:hover {
  background: #eae3fe;
  color: var(--azul-paytime);
  border-color: #eae3fe;
}

.btn--outline {
  background: #ffffff;
  color: rgb(11, 18, 32);
  border: 1px solid rgb(215, 218, 226);
}

.btn--outline:hover {
  background: #f2f4f8;
  color: rgb(11, 18, 32);
  border-color: rgb(196, 201, 212);
}

/* Botão compacto — usado em cards/afordâncias (ex.: "Ver case", "Saiba mais") */
.btn--sm {
  padding: 10px 16px;
  font-size: 13px;
  gap: 7px;
}

/* Badge "Em breve" — tratamento único do site */
.badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500, #400FF2);
  background: rgba(64, 15, 242, 0.08);
  border: 1px solid rgba(64, 15, 242, 0.16);
  border-radius: 100px;
  padding: 2px 9px;
  vertical-align: middle;
}

/* Liquid glass button (teste) — mesmo efeito dos chips do checkout */
.btn--glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.30));
  color: var(--primary-500);
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 10px 28px rgba(64, 15, 242, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.btn--glass:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.48));
  color: var(--primary-600);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 14px 34px rgba(64, 15, 242, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.btn--white {
  background: #fff;
  color: var(--primary-500);
  box-shadow: var(--shadow-sm);
}

/* Hover = troca de cor: branco → azul profundo da marca, texto branco */
.btn--white:hover {
  background: var(--primary-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn--white:active {
  background: var(--primary-700);
  color: #fff;
}

/* White + shine: mesma troca de cor (sobrepõe o glow azul do .btn--shine:hover) */
.btn--white.btn--shine:hover {
  background: #eae3fe;
  color: var(--azul-paytime);
  border-color: #eae3fe;
  box-shadow: var(--shadow-sm);
  transform: none;
}

.btn--outline-white {
  background: #ffffff;
  color: rgb(11, 18, 32);
  border: 1px solid rgb(215, 218, 226);
}

.btn--outline-white:hover {
  background: #f2f4f8;
  color: rgb(11, 18, 32);
  border-color: rgb(196, 201, 212);
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: var(--text-body);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* ── CTA Shine — brilho deslizante para CTAs primárias de "Falar com especialista" ── */
.btn--shine {
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px -4px rgba(64, 15, 242, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
  transition: transform .25s ease, box-shadow .25s ease;
}

.btn--shine:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -4px rgba(64, 15, 242, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.btn--shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%);
  transform: skewX(-20deg);
  animation: shineSlide 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* Brilho branco fica suave sobre botões claros (.btn--white) */
.btn--white.btn--shine::before {
  background: linear-gradient(110deg, transparent 20%, rgba(64, 15, 242, 0.18) 50%, transparent 80%);
}

@keyframes shineSlide {
  0% {
    left: -120%;
  }

  55% {
    left: 140%;
  }

  100% {
    left: 140%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn--shine::before {
    animation: none;
  }
}


/* ── 6. BADGES & PILLS ── */
/* ── Badges ── */
.badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 100px;
  border: var(--badge-border) transparent;
  font-size: 10.5px;
  font-weight: var(--badge-font-weight);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.badge--blue {
  background: rgba(64, 15, 242, 0.10);
  color: var(--primary-500);
  border-color: rgba(64, 15, 242, 0.2);
}

.badge--white {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

[data-navbar-theme="light"] .badge--white {
  background: rgb(255 255 255 / 15%);
  color: rgb(255 255 255);
  border-color: rgb(255 255 255 / 40%);
  font-size: 0.55rem;
}

/* Liquid glass eyebrow (teste) — mesmo efeito dos chips do checkout */
.badge--glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.35));
  color: var(--primary-500);
  border: 1px solid rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 0 10px 24px rgba(64, 15, 242, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}



/* ── DS badge variants ── */

.badge.brand {
  background: rgba(64, 15, 242, 0.10);
  color: var(--azul-paytime);
  border: 1px solid rgba(64, 15, 242, 0.18);
}

.badge.success {
  background: rgba(0, 185, 109, 0.12);
  color: #00875c;
  border: 1px solid rgba(0, 185, 109, 0.25);
}

.badge.warn {
  background: rgba(217, 148, 29, 0.12);
  color: #b06b00;
  border: 1px solid rgba(217, 148, 29, 0.25);
}

.badge.error {
  background: rgba(192, 57, 141, 0.12);
  color: #8b0e5e;
  border: 1px solid rgba(192, 57, 141, 0.25);
}

.badge.neutral {
  background: rgba(3, 2, 30, 0.06);
  color: var(--ink-soft);
  border: 1px solid rgba(3, 2, 30, 0.10);
}

.badge.dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.badge.live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00875c;
  animation: pulse 1.6s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .4;
  }
}

/* INPUT */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}

.field-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.field-input {
  font-family: var(--font-brand);
  font-size: 14px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(64, 15, 242, 0.15);
  color: var(--ink);
  transition: all 0.2s;
  outline: none;
  width: 100%;
}

.field-input:focus {
  border-color: var(--azul-paytime);
  box-shadow: 0 0 0 4px rgba(64, 15, 242, 0.12);
  background: #fff;
}

.field-input.with-icon {
  padding-left: 40px;
}

.field-wrap {
  position: relative;
}

.field-wrap .icon-l {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink-mute);
}

/* SWITCH */
.switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 100px;
  background: rgba(3, 2, 30, 0.15);
  cursor: pointer;
  transition: background 0.2s;
}

.switch::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(3, 2, 30, 0.2);
  transition: left 0.2s;
}

.switch.on {
  background: var(--azul-paytime);
}

.switch.on::after {
  left: 22px;
}



/* ── DS chip ── */
/* CHIP */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 1);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
}

.chip:hover {
  background: rgba(255, 255, 255, 0.95);
}

.chip.active {
  background: var(--azul-paytime);
  color: #fff;
  border-color: var(--azul-paytime);
}

.chip-close {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(3, 2, 30, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}



/* ── 7. GLASS SURFACES ── */
.glass-strong {
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(200%);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 40%, rgba(64, 15, 242, 0.10) 100%);
  border-color: rgba(255, 255, 255, 0.18);
}

/* ── Light variants ── */
[data-navbar-theme="light"] .glass {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.6) 100%);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(64, 15, 242, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.6),
    inset -1px 0 0 rgba(64, 15, 242, 0.04),
    0 14px 40px rgba(64, 15, 242, 0.10),
    0 2px 8px rgba(3, 2, 30, 0.06);
}

[data-navbar-theme="light"] .glass::before {
  background:
    radial-gradient(ellipse 70% 40% at 25% 0%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(ellipse 50% 30% at 90% 100%, rgba(152, 132, 255, 0.18), transparent 60%);
}

[data-navbar-theme="light"] .glass::after {
  background: linear-gradient(135deg, transparent 30%, rgba(152, 132, 255, 0.10) 70%, rgba(64, 15, 242, 0.08) 100%);
}

[data-navbar-theme="light"] .glass-strong {
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.55) 50%, rgb(217 205 253 / 19%) 100%);
  border-color: rgba(255, 255, 255, 0.95);
}

/* ── glass-white: card branco semitransparente com borda e sombra suave ── */
.glass-white {
  background: #ffffff85;
  border: 1px solid rgb(255 255 255);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 8px 24px rgba(64, 15, 242, 0.08);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-radius: var(--radius-lg);
}

/* ── glass-soft: glass para páginas light com fundo branco→lilás suave ── */
.glass-soft {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.55) 50%, rgb(244 241 255 / 55%) 100%);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(64, 15, 242, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.6),
    inset -1px 0 0 rgba(64, 15, 242, 0.04),
    0 14px 40px rgb(64 15 242 / 4%),
    0 2px 8px rgba(3, 2, 30, 0.06);
  isolation: isolate;
  overflow: hidden;
}

.glass-soft>* {
  position: relative;
  z-index: 1;
}

/* Hero light: remove dark grad-hero, deixa o canvas de blobs aparecer */
[data-navbar-theme="light"] .hero {
  background: transparent;
}

[data-navbar-theme="light"] .hero__eyebrow-text {
  color: var(--primary-500);
}

[data-navbar-theme="light"] .hero__headline {
  color: var(--gray-950);
}

[data-navbar-theme="light"] .hero__sub {
  color: var(--gray-600);
}

[data-navbar-theme="light"] .hero__stat-value {
  color: var(--primary-500);
}

[data-navbar-theme="light"] .hero__stat-label {
  color: var(--gray-500);
}

[data-navbar-theme="light"] .hero__stat-sep {
  background: rgba(64, 15, 242, 0.10);
}

[data-navbar-theme="light"] .hero .btn--outline-white {
  color: rgb(11, 18, 32);
  border-color: rgb(215, 218, 226);
  background: #ffffff;
}

[data-navbar-theme="light"] .hero .btn--outline-white:hover {
  background: #f2f4f8;
  border-color: rgb(196, 201, 212);
}

[data-navbar-theme="light"] .dev-section .btn--outline-white,
[data-navbar-theme="light"] .section--light .btn--outline-white {
  color: rgb(11, 18, 32);
  border-color: rgb(215, 218, 226);
  background: #ffffff;
  box-shadow: none;
}

[data-navbar-theme="light"] .dev-section .btn--outline-white:hover,
[data-navbar-theme="light"] .section--light .btn--outline-white:hover {
  color: rgb(11, 18, 32);
  background: #f2f4f8;
  border-color: rgb(196, 201, 212);
}

/* ══════════════════════════════════════════════════════
   

/* ── DS glass (light canvas variants) ── */
/* GLASS */
.glass {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 50%, rgba(245, 242, 251, 0.78) 100%);
  backdrop-filter: blur(10px) saturate(170%);
  -webkit-backdrop-filter: blur(10px) saturate(170%);
  border-radius: 22px;
  /* radius-lg liquid */
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(64, 15, 242, 0.06),
    0 14px 40px rgba(64, 15, 242, 0.10),
    0 2px 8px rgba(3, 2, 30, 0.06);
  isolation: isolate;
  overflow: hidden;
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 40% at 25% 0%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(ellipse 50% 30% at 90% 100%, rgba(152, 132, 255, 0.14), transparent 60%);
  mix-blend-mode: screen;
  z-index: 1;
}

.glass>* {
  position: relative;
  z-index: 2;
}

.glass-pill {
  border-radius: 100px;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 8px 22px rgba(64, 15, 242, 0.10);
}

.glass-dark {
  position: relative;
  background: linear-gradient(135deg, #02023C, #04017B);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(152, 132, 255, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(3, 2, 30, 0.5),
    0 24px 60px rgba(3, 2, 30, 0.25);
  color: var(--off-white);
  isolation: isolate;
  overflow: hidden;
}

.glass-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 40% at 20% 0%, rgba(152, 132, 255, 0.4), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(64, 15, 242, 0.4), transparent 60%);
  mix-blend-mode: screen;
  z-index: 1;
}

.glass-dark>* {
  position: relative;
  z-index: 2;
}



/* ── Glass demo variants (dark/light) ── */
/* 1. GLASS SYSTEM */
.glass-d {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(152, 132, 255, 0.06) 100%), rgba(152, 132, 255, 0.07);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(3, 2, 30, 0.45), 0 16px 48px rgba(3, 2, 30, 0.45);
  overflow: hidden;
}

.glass-d::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 40% at 25% 0%, rgba(255, 255, 255, 0.35), transparent 60%), radial-gradient(ellipse 50% 30% at 90% 100%, rgba(152, 132, 255, 0.25), transparent 60%);
  pointer-events: none;
}

.glass-l {
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border-radius: 22px;
  border: 1px solid rgba(64, 15, 242, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 8px 24px rgba(64, 15, 242, 0.08);
  overflow: hidden;
}

.glass-demo {
  position: relative;
  width: 200px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.glass-demo-title {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

.glass-demo-title--light {
  font-size: 11px;
  font-weight: 600;
  color: #5A6A8A;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.4;
}

.glass-demo-val {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.glass-demo-val--light {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.glass-demo-sub--light {
  font-size: 10px;
  color: #8A9BB8;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
}

.glass-demo-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
}



/* ── 8. CARDS (feature-card, glass-soft, etc.) ── */
/* ── Features grid ── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.feature-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: 0 4px 16px rgba(64, 15, 242, 0.06);
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.feature-card:hover {
  border-color: var(--border-medium);
  box-shadow: 0 14px 32px rgba(64, 15, 242, 0.12);
}

/* .feature-card tem fundo branco sólido — o backdrop-filter herdado de .glass-soft
   é invisível e provoca ghosting/duplicação no scroll. Desligamos só aqui. */
.feature-card.glass-soft {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.feature-icon {
  width: 44px;
  height: 44px;
  background: rgba(64, 15, 242, 0.09);
  color: var(--primary-500);
  border-radius: 12px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: var(--space-4);
}

.feature-icon svg {
  width: 22px;
  height: 22px;
  color: var(--primary-500);
  stroke: var(--primary-500);
}

.feature-title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-2);
}

.feature-card p {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* Botão do feature-card ancorado no rodapé do card → alinha na mesma linha
   entre cards de alturas diferentes (o card já é flex-column e o grid estica
   à mesma altura). !important vence o margin-top inline dos .cta-row. */
.feature-card .cta-row {
  margin-top: auto !important;
  padding-top: var(--space-3);
}

/* ── feature-header: icon + title lado a lado ── */
.feature-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.feature-header .feature-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.feature-header .feature-title {
  font-size: var(--text-h3);
  margin-bottom: 0;
  line-height: 1.25;
}

.feature-desc {
  font-size: var(--text-body-sm);
  color: var(--gray-600);
  line-height: 1.6;
  flex: 1;
}

/* ── Check list (usado em feature-card com bullets) ── */
.check-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.check-list li {
  position: relative;
  padding-left: 30px;
  font-size: var(--text-body-sm);
  color: var(--gray-600);
  line-height: 1.55;
}

/* Círculo (≥16px) — só o disco, sem o ícone */
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(64, 15, 242, 0.08);
  border: 1px solid rgba(64, 15, 242, 0.18);
}

/* Ícone (14×14) desenhado via mask — vetor nítido e dimensionável,
   não é background-image, então escala perfeitamente. */
.check-list li::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 5px;
  width: 14px;
  height: 14px;
  background-color: #400FF2;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.check-list li strong {
  color: var(--gray-900);
  font-weight: 700;
}




/* ── DS component tiles (cmp-row, module-tile, meta-card, chart-card, etc.) ── */
/* COMPONENTS */
.cmp-row {
  padding: var(--sp-5);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-3);
}

.cmp-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--ink-line);
}

.cmp-row-name {
  font-size: 14px;
  font-weight: 600;
}

.cmp-row-token {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--azul-paytime);
}

.cmp-stage {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  background: var(--bg-soft, #F5F2FE);
  border: 1px solid var(--border-light, #E6E8EE);
  border-radius: var(--radius-lg, 14px);
  padding: var(--sp-7, 28px);
}



/* ── DS glass demos ── */
/* GLASS DEMOS */
.glass-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.glass-demo {
  min-height: 180px;
  height: 180px;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.glass-demo .name {
  font-size: 14px;
  font-weight: 600;
}

.glass-demo .token {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--azul-paytime);
}

.glass-demo .specs {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-mute);
}



/* ── 9. HERO COMPONENTS ── */
/* ── Hero base ── */
.hero {
  background: transparent;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 110px;
  padding-bottom: var(--space-8);
}

@keyframes circle-float {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-20px) scale(1.03);
  }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 1rem 0.375rem 0.5rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}

.hero__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: pulse-dot 2.2s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.75);
  }
}

.hero__eyebrow-text {
  font-size: var(--text-caption);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.03em;
}

.hero__headline {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: var(--space-5);
}

.hero__sub {
  font-size: clamp(0.875rem, 0.7vw + 0.5rem, 1rem);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.72;
  max-width: 540px;
  margin-bottom: var(--space-8);
}

.hero__ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-8);
}



/* ── Hero light context ── */
/* Hero light: remove dark grad-hero, deixa o canvas de blobs aparecer */
[data-navbar-theme="light"] .hero {
  background: transparent;
}

[data-navbar-theme="light"] .hero__eyebrow {
  background: rgba(64, 15, 242, 0.07);
  border: 1px solid rgba(64, 15, 242, 0.15);
}

[data-navbar-theme="light"] .hero__eyebrow-text {
  color: var(--primary-500);
}

[data-navbar-theme="light"] .hero__headline {
  color: var(--gray-950);
}

[data-navbar-theme="light"] .hero__sub {
  color: var(--gray-600);
}

[data-navbar-theme="light"] .hero__stat-value {
  color: var(--primary-500);
}

[data-navbar-theme="light"] .hero__stat-label {
  color: var(--gray-500);
}

[data-navbar-theme="light"] .hero__stat-sep {
  background: rgba(64, 15, 242, 0.10);
}

[data-navbar-theme="light"] .hero .btn--outline-white {
  color: rgb(11, 18, 32);
  border-color: rgb(215, 218, 226);
  background: #ffffff;
}

[data-navbar-theme="light"] .hero .btn--outline-white:hover {
  background: #f2f4f8;
  border-color: rgb(196, 201, 212);
}

[data-navbar-theme="light"] .dev-section .btn--outline-white,
[data-navbar-theme="light"] .section--light .btn--outline-white {
  color: rgb(11, 18, 32);
  border-color: rgb(215, 218, 226);
  background: #ffffff;
  box-shadow: none;
}

[data-navbar-theme="light"] .dev-section .btn--outline-white:hover,
[data-navbar-theme="light"] .section--light .btn--outline-white:hover {
  color: rgb(11, 18, 32);
  background: #f2f4f8;
  border-color: rgb(196, 201, 212);
}

/* ══════════════════════════════════════════════════════
   

/* ── Page common hero styles ── */
/* ── Page canvas (animated blobs) ── */
.page-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.pg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.38;
  will-change: transform;
}

.pg-blob--1 {
  width: 700px;
  height: 700px;
  top: -220px;
  left: -180px;
  background: radial-gradient(circle, #BAD5FF, transparent 68%);
  animation: pgDrift1 26s ease-in-out infinite;
}

.pg-blob--2 {
  width: 600px;
  height: 600px;
  top: 28%;
  right: -140px;
  background: radial-gradient(circle, #C4B8FF, transparent 68%);
  animation: pgDrift2 32s ease-in-out infinite;
}

.pg-blob--3 {
  width: 520px;
  height: 520px;
  bottom: 8%;
  left: 22%;
  background: radial-gradient(circle, #B8E8FF, transparent 68%);
  animation: pgDrift3 24s ease-in-out infinite;
}

.pg-blob--4 {
  width: 360px;
  height: 360px;
  top: 55%;
  right: 28%;
  background: radial-gradient(circle, #D6F0FF, transparent 68%);
  animation: pgDrift4 36s ease-in-out infinite;
}

@keyframes pgDrift1 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(70px, 110px) scale(1.08);
  }

  66% {
    transform: translate(-50px, 55px) scale(0.96);
  }
}

@keyframes pgDrift2 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  40% {
    transform: translate(-90px, -70px) scale(1.12);
  }

  70% {
    transform: translate(55px, 38px) scale(0.92);
  }
}

@keyframes pgDrift3 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  30% {
    transform: translate(100px, -50px) scale(1.06);
  }

  65% {
    transform: translate(-35px, 85px) scale(0.96);
  }
}

@keyframes pgDrift4 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-65px, -100px) scale(1.15);
  }
}

/* ── Hero 2-col layout (canônico — usado por todas as páginas de produto/solução) ── */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  overflow: visible;
}

@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    display: none;
  }
}

/* Imagem mockada no hero 2-col (provisória — páginas banking) */
.hero-mock-img {
  max-width: 100%;
  height: auto;
  max-height: 460px;
  filter: drop-shadow(0 30px 60px rgba(3, 2, 30, 0.18));
}

.hero-headline {
  font-size: clamp(44px, 5.4vw, 55px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-5);
  color: var(--ink);
}

.hero-headline em {
  font-style: normal;
  background: linear-gradient(135deg, var(--azul-paytime) 0%, var(--lilas) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 auto var(--sp-6);
}

.hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: var(--sp-3);
  flex-wrap: nowrap;
}

.hero-ctas {
  flex-wrap: nowrap;
}

.hero-cta-row .btn,
.hero-ctas .btn {
  flex: 0 0 auto;
}

.ab-ctas,
.as-ctas,
.nf-ctas,
.rv-hero__ctas,
.cr-ctas,
.lp-hero__ctas {
  flex-wrap: nowrap !important;
}

.hero-meta {
  margin-top: var(--sp-7);
  display: flex;
  justify-content: center;
  gap: var(--sp-7);
  flex-wrap: wrap;
}

.hero-meta-item .num {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--azul-paytime);
  line-height: 1;
}

.hero-meta-item .lbl {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Features bento grid ── */
.features-bento {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

/* 3 por linha por padrão; linhas incompletas ficam CENTRALIZADAS (flex + justify-center) */
.features-bento>* {
  flex: 0 1 calc((100% - 2 * var(--sp-4)) / 3);
  min-width: 0;
}

/* Seções com EXATAMENTE 4 cards → 4 colunas em monitor normal (≥1000px).
   Não afeta seções de 3/6 cards nem o mobile (que colapsa em 2/1 abaixo de 880px). */
@media (min-width: 1000px) {
  .features-bento:has(> :nth-child(4)):not(:has(> :nth-child(5)))>* {
    flex-basis: calc((100% - 3 * var(--sp-4)) / 4);
  }
}

/* Seções com EXATAMENTE 2 cards → 2 colunas CENTRALIZADas (não alinha à esquerda).
   Cards não devem ficar encostados na esquerda deixando buraco à direita. */
@media (min-width: 700px) {
  .features-bento:has(> :nth-child(2)):not(:has(> :nth-child(3)))>* {
    flex-basis: min(420px, calc((100% - var(--sp-4)) / 2));
  }
}

.feature-icon-light,
.feature-icon-dark {
  width: 44px;
  height: 44px;
  font-size: 22px;
  border-radius: 12px;
  background: rgba(64, 15, 242, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon-light svg,
.feature-icon-dark svg {
  width: 22px;
  height: 22px;
  color: var(--primary-500);
  stroke: var(--primary-500);
}

/* Flat — variantes legadas mantidas para retrocompatibilidade */
.feature-icon-dark--flat-bemobi {
  background: var(--primary-500);
}

.feature-icon-dark--flat-lilas {
  background: var(--lilas, #9884FF);
}

@media (max-width: 880px) {
  .features-bento>* {
    flex-basis: calc((100% - var(--sp-4)) / 2);
  }
}

@media (max-width: 600px) {
  .features-bento>* {
    flex-basis: 100%;
  }
}

/* ── Steps grid ── */
/* Column count varies by page (3 or 4); base provides shared card styles */
.steps-grid {
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.steps-grid::before {
  content: "";
  position: absolute;
  top: 50px;
  height: 2px;
  background: linear-gradient(to right,
      transparent 0%, var(--azul-paytime) 15%,
      var(--lilas) 50%, var(--azul-paytime) 85%, transparent 100%);
  opacity: 0.35;
  z-index: 0;
}

.step-card {
  padding: var(--sp-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.step-num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul-paytime), #5a28ff);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 28px rgba(64, 15, 242, 0.35), 0 0 0 8px rgba(255, 255, 255, 0.6);
  margin-bottom: var(--sp-4);
}

.step-card h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
}

.step-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

@media (max-width: 880px) {
  .steps-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  /* cards empilhados não devem ocupar 100% — largura de card, centralizados */
  .steps-grid .step-card {
    max-width: 440px;
    width: 100%;
    margin-inline: auto;
  }

  .steps-grid::before {
    display: none;
  }
}

/* ── Trust block ── */
/* grid-template-columns varies (5-col vs 4-col); each page sets its own */
.trust-block {
  margin-top: var(--sp-7);
  padding: var(--sp-6) var(--sp-7);
}

.trust-inner {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}

.trust-item {
  text-align: center;
  position: relative;
  padding: 0 var(--sp-3);
}

.trust-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  width: 1px;
  height: 50%;
  background: rgba(64, 15, 242, 0.12);
}

.trust-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}

.trust-value.featured {
  background: linear-gradient(135deg, var(--azul-paytime), var(--lilas));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.trust-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 880px) {
  .trust-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
  }

  .trust-item:not(:last-child)::after {
    display: none;
  }
}

/* ── CTA block ── */
.cta-block {
  padding: var(--sp-8);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)), linear-gradient(135deg, var(--primary-700), var(--primary-500) 58%, var(--primary-400));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xl);
  color: #fff;
  box-shadow: 0 30px 80px rgba(64, 15, 242, 0.24);
}

.cta-block::before {
  background: radial-gradient(ellipse 70% 40% at 25% 0%, rgb(0 209 255 / 32%), transparent 60%), radial-gradient(ellipse 50% 30% at 90% 100%, rgba(152, 132, 255, 0.18), transparent 60%);
}

.cta-block::after {
  content: "";
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(64, 15, 242, 0.25), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.cta-block>* {
  position: relative;
  z-index: 2;
}

.cta-block h2 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: white;
  margin-bottom: var(--sp-4);
}

.cta-block h2 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--lilas), var(--gray-50));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-block p {
  font-size: 18px;
  color: white;
  max-width: 560px;
  margin: 0 auto var(--sp-6);
}

.cta-row {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .cta-block {
    padding: var(--sp-7) var(--sp-5);
  }
}



.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.cta-title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.016em;
  color: #fff;
  margin-bottom: var(--space-4);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-subtitle {
  font-size: var(--text-body);
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-6);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}



/* ── Audience page styles ── */
/* ── Audience pages (marketplaces, fintechs, entretenimento) ── */
.audience-page {
  color: var(--gray-950);
  background:
    radial-gradient(circle at 12% 8%, rgba(186, 213, 255, 0.58), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(196, 184, 255, 0.50), transparent 34%),
    linear-gradient(180deg, #F8FAFF 0%, #F4F3FF 42%, #FFFFFF 100%);
}

.audience-main {
  position: relative;
  z-index: 1;
  overflow: hidden;
}




.audience-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(64, 15, 242, 0.16);
  color: var(--primary-500);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(64, 15, 242, 0.08);
}

.audience-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--primary-500);
  box-shadow: 0 0 12px rgba(64, 15, 242, 0.48);
}








.audience-flow__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(64, 15, 242, 0.10);
}

.audience-flow__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--gray-600);
  font-weight: 600;
}

.audience-flow__status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22C55E;
}

.audience-flow__chip {
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(64, 15, 242, 0.10);
  color: var(--primary-500);
  font-size: 0.72rem;
  font-weight: 700;
}

.audience-flow__metric {
  padding: var(--space-5) 0 var(--space-3);
}

.audience-flow__label {
  color: var(--gray-500);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.audience-flow__value {
  margin-top: 8px;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
  font-weight: 800;
  color: var(--gray-950);
  letter-spacing: -0.04em;
}

.audience-flow__value span {
  color: var(--primary-500);
}

.audience-flow__bar {
  position: relative;
  height: 92px;
  margin: var(--space-2) 0 var(--space-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(64, 15, 242, 0.06), rgba(64, 15, 242, 0.02));
  overflow: hidden;
}

.audience-flow__bar::before {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 20px;
  height: 54px;
  background: linear-gradient(135deg, transparent 0 12%, rgba(64, 15, 242, 0.14) 13% 100%);
  clip-path: polygon(0 72%, 18% 48%, 38% 56%, 58% 26%, 77% 38%, 100% 8%, 100% 100%, 0 100%);
}

.audience-flow__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.audience-flow__cards>div,
.audience-flow__card {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(64, 15, 242, 0.08);
}

.audience-flow__cards>div strong,
.audience-flow__card strong {
  display: block;
  color: var(--gray-950);
  font-size: 1rem;
  margin-bottom: 4px;
}

.audience-flow__cards>div span,
.audience-flow__card span {
  color: var(--gray-500);
  font-size: 0.78rem;
}

.audience-section {
  padding: var(--space-12) 0;
}

.audience-section--white {
  background: rgba(255, 255, 255, 0.76);
}

.audience-section-head {
  max-width: 760px;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.audience-section-title {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--gray-950);
}

.audience-section-title em {
  font-style: normal;
  color: var(--primary-500);
}

.audience-section-desc {
  color: var(--gray-600);
  line-height: 1.72;
  margin-top: var(--space-4);
}

.audience-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.audience-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(64, 15, 242, 0.10);
  box-shadow: 0 18px 48px rgba(64, 15, 242, 0.07);
}

.audience-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(64, 15, 242, 0.09);
  color: var(--primary-500);
  margin-bottom: var(--space-4);
}

.audience-card h3 {
  font-size: 1.08rem;
  color: var(--gray-950);
  margin-bottom: var(--space-3);
  line-height: 1.28;
}

.audience-card p {
  color: var(--gray-600);
  line-height: 1.66;
  font-size: 0.94rem;
}

.audience-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
  align-items: center;
}

.audience-list {
  display: grid;
  gap: var(--space-3);
}

.audience-list__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(64, 15, 242, 0.09);
}

.audience-list__item i {
  color: var(--primary-500);
  margin-top: 3px;
}

.audience-list__item strong {
  color: var(--gray-950);
}

.audience-list__item p {
  color: var(--gray-600);
  font-size: 0.92rem;
  line-height: 1.58;
  margin-top: 3px;
}




@media (max-width: 960px) {

  .audience-hero__grid,
  .audience-split {
    grid-template-columns: 1fr;
  }


  .audience-card-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {

  .audience-card-grid,
  .audience-flow__cards {
    grid-template-columns: 1fr;
  }


}



/* ── Bemobi credibility section ── */
/* ── Bemobi credibility section (api, no-code) ── */
.bemobi-section {
  background: linear-gradient(135deg, var(--azul-escuro) 0%, #04017B 60%, var(--azul-paytime) 100%);
  padding: var(--space-12) 0;
  position: relative;
  overflow: hidden;
}

.bemobi-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(152, 132, 255, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.section-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.section-stat {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  backdrop-filter: blur(10px);
}

.section-stat__value {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-heading);
  line-height: 1;
  margin-bottom: 0.375rem;
}

.section-stat__label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

[data-navbar-theme="light"] .section-pill {
  background: rgba(64, 15, 242, 0.08);
  border-color: rgba(64, 15, 242, 0.14);
  color: var(--primary-500);
}

[data-navbar-theme="light"] .section-stat {
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(64, 15, 242, 0.12);
  box-shadow: 0 18px 44px rgba(64, 15, 242, 0.10);
}

[data-navbar-theme="light"] .section-stat__value {
  color: var(--gray-950);
}

[data-navbar-theme="light"] .section-stat__label {
  color: var(--gray-600);
}



/* ── Step indicator ── */
/* ── Step indicator (plataforma, presencial) ── */
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.step__num {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
  box-shadow: 0 8px 24px rgba(64, 15, 242, 0.25);
  position: relative;
  z-index: 1;
}

.step__title {
  font-size: var(--text-lg);
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.step__desc {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  line-height: 1.65;
}



/* ── DS hero orb ── */
/* 6. HERO ORB */
.hero-orb {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6a3aff 0%, var(--c-blue) 40%, #1a0680 100%);
  filter: blur(1px);
  box-shadow: inset -30px -30px 60px rgba(3, 2, 30, 0.6), inset 20px 20px 60px rgba(217, 205, 253, 0.5), 0 30px 80px rgba(64, 15, 242, 0.55);
  animation: orbPulse 8s ease-in-out infinite alternate;
  position: relative;
}

.hero-orb::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 18%;
  width: 40%;
  height: 30%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.45), transparent 70%);
  border-radius: 50%;
  filter: blur(6px);
}

@keyframes orbPulse {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.06);
  }
}



/* ── DS floating hero cards ── */
/* 7. FLOATING HERO CARDS */
.hero-card {
  position: relative;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(152, 132, 255, 0.08));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 36px rgba(3, 2, 30, 0.4);
}

.hero-card.balance {
  width: 240px;
  animation: vcFloat1 9s ease-in-out infinite;
}

.hero-card.txn {
  width: 200px;
  animation: vcFloat2 11s ease-in-out infinite;
}

.hero-card.api {
  width: 180px;
  animation: vcFloat3 13s ease-in-out infinite;
}

@keyframes vcFloat1 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes vcFloat2 {

  0%,
  100% {
    transform: translateY(-6px);
  }

  50% {
    transform: translateY(6px);
  }
}

@keyframes vcFloat3 {

  0%,
  100% {
    transform: translateY(4px);
  }

  50% {
    transform: translateY(-8px);
  }
}

.card-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.card-amount {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.card-amount span {
  font-size: 13px;
  opacity: 0.5;
}

.card-bar {
  display: flex;
  height: 5px;
  border-radius: 4px;
  overflow: hidden;
  margin: 10px 0;
  background: rgba(3, 2, 30, 0.4);
}

.card-bar .b1 {
  flex: 5;
  background: linear-gradient(90deg, var(--c-blue), var(--c-lilas));
}

.card-bar .b2 {
  flex: 3;
  background: var(--c-lilas);
  opacity: 0.5;
}

.card-bar .b3 {
  flex: 2;
  background: rgba(217, 205, 253, 0.4);
}

.card-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  font-family: 'JetBrains Mono', monospace;
}

.card-txn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.card-txn .lbl {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}

.card-txn .val {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.card-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(64, 15, 242, 0.6);
  color: #fff;
  margin-bottom: 6px;
}

.card-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
}

.card-code .ckw {
  color: var(--lilas);
}

.card-code .cstr {
  color: #D9CDFD;
}



/* ── DS balance bar ── */
/* 8. BALANCE BAR */
.balance-bar-demo {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 20px 24px;
  width: 280px;
}

.balance-bar-demo .ttl {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.balance-bar-demo .val {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.bb {
  display: flex;
  height: 8px;
  border-radius: 6px;
  overflow: hidden;
  gap: 2px;
  margin-bottom: 10px;
}

.bb .s1 {
  flex: 5;
  background: linear-gradient(90deg, var(--c-blue), var(--c-lilas));
  border-radius: 6px 0 0 6px;
}

.bb .s2 {
  flex: 3;
  background: var(--c-lilas);
  opacity: 0.6;
}

.bb .s3 {
  flex: 2;
  background: rgba(217, 205, 253, 0.4);
  border-radius: 0 6px 6px 0;
}

.bb-labels {
  display: flex;
  gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.45);
}

.bb-label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bb-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.bb-label.pix::before {
  background: var(--c-blue);
}

.bb-label.card::before {
  background: var(--c-lilas);
}

.bb-label.boleto::before {
  background: rgba(217, 205, 253, 0.4);
}



/* ── 10. NAVIGATION ── */
/* ── Navbar ── */

/* Glass pill — exato do claude-design/home.html */
.glass-pill {
  border-radius: 100px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(3, 2, 30, 0.4),
    0 8px 24px rgba(3, 2, 30, 0.3);
}

/* Topbar layout — exato do claude-design/home.html */
nav.topbar {
  position: fixed;
  top: 16px;
  /* var(--sp-4) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: min(1180px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 10px 22px;
  transition: background 0.35s ease, border-color 0.35s ease,
    box-shadow 0.35s ease, top 0.35s ease;
}

.topbar.scrolled {
  top: 10px;
}

/* Light theme pill */
[data-navbar-theme="light"] .topbar {
  background: rgb(255 255 255 / 30%);
  border-color: rgba(107, 66, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 8px 24px rgba(64, 15, 242, 0.08);
}

/* ── Variante: barra de largura total, sem cantos arredondados (sóbria) ──
   Mantém o MESMO vidro/blur/sombra da .glass-pill (transparência igual à anterior);
   esta classe cuida só do LAYOUT: full-width, sem raio, conteúdo + megamenu
   contidos numa largura container (1200px) via padding lateral do nav.
   (.navbar__item--mega é position:static → o megamenu usa a caixa de padding do nav.)
   Backup da versão pill em _backup/*.pre-navbar-flat.bak (revert). */
nav.topbar.topbar--full {
  top: 0;
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  max-width: none;
  border-radius: 0;
  border-width: 0 0 1px 0;
  padding: 10px 0;
}

nav.topbar.topbar--full.scrolled {
  top: 0;
}

/* Conteúdo do menu alinhado ao .container do site (mesma largura e padding).
   .navbar__inner usa a classe .container; aqui só o layout em linha. */
.topbar--full .navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  position: relative;
}

@media (max-width: 900px) {
  nav.topbar.topbar--full {
    padding: 8px 0;
  }
}

/* Megamenu (Soluções) contido na largura container, alinhado ao conteúdo */
.topbar--full .navbar__megamenu-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Megamenu à mesma distância da barra que os dropdowns simples (gap +5px).
   Compensa o deslocamento causado pelo wrapper .navbar__inner. */
.topbar--full .navbar__item--mega .navbar__dropdown {
  top: calc(100% - 2px);
}

/* Dropdowns simples (Para quem, Modelos, Recursos) à mesma distância da barra
   que o megamenu de Soluções (ponte/padding-top de 18px). */
.topbar--full .navbar__item:not(.navbar__item--mega) .navbar__dropdown {
  padding-top: 18px;
}

/* Brand */
.navbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 44px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.navbar__brand:hover {
  opacity: 0.85;
}

.navbar__logo {
  height: 25px;
  width: auto;
  display: block;
}

.navbar__symbol {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #5a28ff, #400FF2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.navbar__wordmark {
  height: 14px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

[data-navbar-theme="light"] .navbar__wordmark g {
  fill: var(--azul-paytime);
}

/* Links */
.navbar__links {
  display: flex;
  gap: 2px;
  list-style: none;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  margin-left: var(--space-5);
}

.navbar__item {
  position: relative;
}

.navbar__link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 13px;
  border-radius: 100px;
  color: rgba(233, 228, 237, 0.80);
  transition: background 0.22s, color 0.22s;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}

.navbar__link svg {
  width: 13px;
  height: 13px;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.navbar__item:hover>.navbar__link {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.navbar__item:hover>.navbar__link svg {
  transform: rotate(180deg);
}

.navbar__link--plain:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

[data-navbar-theme="light"] .navbar__link {
  color: var(--gray-700);
}

[data-navbar-theme="light"] .navbar__item:hover>.navbar__link,
[data-navbar-theme="light"] .navbar__link--plain:hover {
  background: rgba(64, 15, 242, 0.07);
  color: var(--primary-500);
}

/* Dropdown */
.navbar__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  padding-top: 10px;
  /* ponte invisível: mantém hover ao cruzar o gap */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.navbar__item:hover .navbar__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.navbar__dropdown-inner {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  box-shadow: var(--shadow-lg);
}

.navbar__dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background 0.15s;
  text-decoration: none;
}

.navbar__dropdown-item:hover {
  background: var(--gray-50);
}

.navbar__dropdown-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(64, 15, 242, 0.10) !important;
  color: var(--primary-500) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.navbar__dropdown-item:hover .navbar__dropdown-icon {
  background: rgba(30, 144, 255, 0.18) !important;
  color: #1e90ff !important;
  transform: scale(1.05);
}

.navbar__dropdown-item:hover .navbar__dropdown-icon svg {
  stroke: #1e90ff !important;
}

.navbar__dropdown-icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor !important;
}

.navbar__dropdown-icon i {
  font-size: 0.875rem;
}

.navbar__dropdown-title {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.3;
}

.navbar__dropdown-desc {
  font-size: var(--text-caption);
  color: var(--gray-500);
  margin-top: 2px;
}

.navbar__divider {
  height: 1px;
  background: var(--gray-200);
  margin: var(--space-1) var(--space-3);
}

/* Actions */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.navbar__ghost {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 100px;
  color: rgba(233, 228, 237, 0.85);
  transition: background 0.22s, color 0.22s;
  text-decoration: none;
  white-space: nowrap;
}

.navbar__ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  text-decoration: none;
}

[data-navbar-theme="light"] .navbar__ghost {
  color: var(--gray-700);
}

[data-navbar-theme="light"] .navbar__ghost:hover {
  background: rgba(64, 15, 242, 0.07);
  color: var(--primary-500);
}

.navbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 10px 18px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: var(--primary-500);
  box-shadow: 0 4px 18px rgba(64, 15, 242, 0.22);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.navbar__cta::before {
  display: none;
}

.navbar__cta:hover {
  transform: translateY(-1px);
  text-decoration: none;
  background: #3008e6;
  box-shadow: 0 8px 26px rgba(64, 15, 242, 0.32);
}

/* Secondary variant (mesmo tamanho do CTA, estilo secundário) */
.navbar__cta--secondary {
  background: #ffffff;
  color: rgb(11, 18, 32);
  border: 1px solid rgb(215, 218, 226);
  box-shadow: none;
}

.navbar__cta--secondary:hover {
  background: #f2f4f8;
  color: rgb(11, 18, 32);
  border-color: rgb(196, 201, 212);
  box-shadow: none;
}

/* Hamburger */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  /* alvo de toque mínimo 44x44 (Apple HIG) — barras seguem centralizadas */
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  margin-left: 8px;
  background: none;
  border: none;
  color: rgba(233, 228, 237, 0.85);
}

.navbar__hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: all 0.3s;
}

[data-navbar-theme="light"] .navbar__hamburger {
  color: var(--gray-700);
}

@media (max-width: 900px) {
  .topbar {
    padding: 8px 10px 8px 16px;
  }

  .navbar__links,
  .navbar__actions,
  .navbar__ghost {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }
}

@media (max-width: 480px) {
  .navbar__cta span {
    display: none;
  }
}






/* ── 12. CODE WINDOW ── */
/* ── Code window ────────────────────────────────────
   .code-window     → terminal escuro standalone (sempre dark)
   .code-window-glass → usa .glass/.glass-strong do contexto
───────────────────────────────────────────────────── */
.code-window {
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #0d0c27;
  border: 1px solid rgba(152, 132, 255, 0.2);
  box-shadow: 0 24px 60px rgba(3, 2, 30, 0.45);
}

.code-window-glass {
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
}

/* bar e body sempre dark dentro de .code-window */
.code-window .code-window-bar {
  background: #1a1840;
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.code-window .code-window-title {
  color: rgba(255, 255, 255, 0.35);
}

.code-window .code-window-body {
  color: rgba(233, 228, 237, 0.8);
  background: linear-gradient(135deg, #02023C, #04017B);
}

.code-window .code-window-body .kw {
  color: var(--lilas);
}

.code-window .code-window-body .str {
  color: #50fa7b;
}

.code-window .code-window-body .num {
  color: #ffb86c;
}

.code-window .code-window-body .key {
  color: #bd93f9;
}

.code-window .code-window-body .com {
  color: rgba(255, 255, 255, 0.25);
  font-style: italic;
}

.code-window .code-window-body .fn {
  color: #ff9e7a;
}

.code-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(3, 2, 30, 0.25);
}

.code-window-light .code-window-bar {
  border-bottom-color: rgba(152, 132, 255, 0.2);
  background: rgba(64, 15, 242, 0.04);
}

.code-window-dots {
  display: flex;
  gap: 6px;
}

.code-window-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.code-window-dots span:nth-child(1) {
  background: #ff6058;
}

.code-window-dots span:nth-child(2) {
  background: #ffbd2d;
}

.code-window-dots span:nth-child(3) {
  background: #28c840;
}

.code-window-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(233, 228, 237, 0.55);
  margin-left: 8px;
}

.code-window-light .code-window-title {
  color: var(--ink-mute);
}

.code-window-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--lilas);
  padding: 3px 9px;
  background: rgba(64, 15, 242, 0.18);
  border-radius: 100px;
  border: 1px solid rgba(152, 132, 255, 0.3);
}

.code-window-light .code-window-tag {
  color: var(--azul-paytime);
  background: rgba(64, 15, 242, 0.1);
  border-color: rgba(64, 15, 242, 0.2);
}

.code-window-body {
  padding: 24px 32px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  color: rgba(233, 228, 237, 0.85);
  white-space: pre;
  overflow-x: auto;
}

.code-window-light .code-window-body {
  color: var(--ink);
}

/* Syntax — dark */
.code-window-body .kw {
  color: #ff7eb6;
}

.code-window-body .str {
  color: #c4ffd6;
}

.code-window-body .num {
  color: #ffce85;
}

.code-window-body .key {
  color: var(--lilas);
}

.code-window-body .com {
  color: rgba(233, 228, 237, 0.4);
  font-style: italic;
}

.code-window-body .fn {
  color: #79c8ff;
}

/* Syntax — light (opt-in via .code-window-light no wrapper) */
.code-window-light .code-window-body .kw {
  color: #c0398d;
}

.code-window-light .code-window-body .str {
  color: #007a4a;
}

.code-window-light .code-window-body .num {
  color: #b85d00;
}

.code-window-light .code-window-body .key {
  color: var(--azul-paytime);
}

.code-window-light .code-window-body .com {
  color: var(--ink-mute);
  font-style: italic;
}

.code-window-light .code-window-body .fn {
  color: #1a6db8;
}



/* ── DS code window (block4) ── */
/* 9. CODE WINDOW */
.code-window {
  border-radius: 16px;
  overflow: hidden;
  background: #0d0c27;
  border: 1px solid rgba(152, 132, 255, 0.2);
  min-width: 340px;
  box-shadow: 0 20px 50px rgba(3, 2, 30, 0.5);
}

.code-window-bar {
  background: #1a1840;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.code-dots {
  display: flex;
  gap: 6px;
}

.code-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.code-dots span:nth-child(1) {
  background: #ff6058;
}

.code-dots span:nth-child(2) {
  background: #ffbd2d;
}

.code-dots span:nth-child(3) {
  background: #28c840;
}

.code-window-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.08em;
  margin-left: 4px;
}

.code-window-body {
  padding: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.75);
}

.vc-kw {
  color: var(--lilas);
}

.vc-str {
  color: #D9CDFD;
}

.vc-num {
  color: #5ae6c8;
}

.vc-key {
  color: rgba(255, 255, 255, 0.55);
}

.vc-cm {
  color: rgba(255, 255, 255, 0.25);
  font-style: italic;
}

.vc-fn {
  color: #ff9e7a;
}



/* ── 13. FAQ ACCORDION ── */
/* ── FAQ accordion ── */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.faq-item {
  padding: var(--sp-5);
}

.faq-item summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 300;
  color: var(--azul-paytime);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(64, 15, 242, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s;
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin-top: var(--sp-4);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.65;
}




/* ── 14. STAT STRIP ── */
/* ── Stat strip ── */
.stat-strip {
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.stat-strip-item {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.stat-strip-num {
  white-space: nowrap;
}

.stat-strip-item+.stat-strip-item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-6) * -0.5);
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(64, 15, 242, 0.15), transparent);
}

.stat-strip-num {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--azul-paytime);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-strip-label {
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.4;
}

@media (max-width: 880px) {
  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-strip-item+.stat-strip-item::before {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════
   
/* 12. STAT STRIP */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100%;
}

.stat-strip-item {
  padding: 20px 24px;
  position: relative;
}

.stat-strip-item+.stat-strip-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(152, 132, 255, 0.25), transparent);
}

.stat-num {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #fff, var(--c-lilas-lt));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}



/* ── Numbers bar ── */
/* ── Numbers bar (api, no-code) ── */

.numbers-bar__item {
  padding: 2rem 1.5rem;
  text-align: center;
  border-right: 1px solid var(--border-light);
}

.numbers-bar__item:last-child {
  border-right: none;
}

.numbers-bar__value {
  display: block;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  font-family: var(--font-heading);
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: 0.375rem;
}

.numbers-bar__label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.4;
}



/* ── 15. DEVICE MOCKS (device-pos, device-phone, device-tablet, device-cards, cc) ── */
/* === DEVICE: POS terminal === */
.device-pos {
  width: 200px;
  border-radius: 22px;
  background: linear-gradient(135deg, #02023C, #04017B);
  padding: 10px;
  border: 1px solid rgba(152, 132, 255, 0.3);
  box-shadow: 0 22px 50px rgba(3, 2, 30, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.device-pos-screen {
  border-radius: 12px;
  background: linear-gradient(180deg, #FAF8FE, #EFE9F8);
  padding: 14px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

.device-pos-screen .top {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.device-pos-screen .brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.device-pos-screen .label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-top: 4px;
}

.device-pos-screen .amount {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 4px 0 12px;
}

.device-pos-screen .amount .cur,
.device-pos-screen .amount .cents {
  font-size: 13px;
  opacity: 0.5;
}

.device-pos-screen .tap {
  margin-top: auto;
  background: linear-gradient(135deg, var(--azul-paytime), #5a28ff);
  border-radius: 10px;
  padding: 12px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.device-pos-screen .tap::before,
.device-pos-screen .tap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 2s ease-out infinite;
}

.device-pos-screen .tap::after {
  animation-delay: 0.6s;
}

@keyframes ripple {
  0% {
    width: 25px;
    height: 25px;
    opacity: 1;
  }

  100% {
    width: 100px;
    height: 100px;
    opacity: 0;
  }
}

.device-pos-screen .tap .ico {
  width: 26px;
  height: 26px;
  margin: 0 auto 4px;
  position: relative;
  z-index: 2;
}

.device-pos-screen .tap .ico svg {
  width: 100%;
  height: 100%;
}

.device-pos-screen .tap .lbl {
  position: relative;
  z-index: 2;
  font-size: 10px;
  font-weight: 600;
}

/* === DEVICE: Smartphone (Tap on Phone) === */
.device-phone {
  width: 165px;
  border-radius: 28px;
  background: linear-gradient(135deg, #02023C, #04017B);
  padding: 7px;
  border: 1px solid rgba(152, 132, 255, 0.25);
  box-shadow: 0 22px 50px rgba(3, 2, 30, 0.4);
}

.device-phone-screen {
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, var(--canvas-deep));
  padding: 14px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.device-phone .notch {
  width: 40px;
  height: 12px;
  background: #03021E;
  border-radius: 100px;
  margin-bottom: 10px;
}

.device-phone .lbl {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--ink-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.device-phone .amt {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 4px 0 14px;
}

.device-phone .ring {
  margin-top: auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul-paytime), var(--lilas));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(64, 15, 242, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
}

.device-phone .ring::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(64, 15, 242, 0.5);
  border-radius: 50%;
  animation: ring 2s ease-out infinite;
}

@keyframes ring {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.device-phone .ring svg {
  width: 30px;
  height: 30px;
  color: #fff;
}

/* === DEVICE: Tablet === */
.device-tablet {
  width: 240px;
  border-radius: 18px;
  background: linear-gradient(160deg, #292360, #03021E);
  padding: 8px;
  border: 1px solid rgba(152, 132, 255, 0.3);
  box-shadow: 0 22px 50px rgba(3, 2, 30, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.device-tablet-screen {
  border-radius: 12px;
  background: linear-gradient(180deg, #FAF8FE, #ECE6F7);
  aspect-ratio: 1.6/1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.device-tablet-screen .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.device-tablet-screen .val {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* === DEVICE: Card stack === */
.device-cards {
  position: relative;
  width: 200px;
  height: 130px;
}

.cc {
  position: absolute;
  width: 200px;
  height: 120px;
  border-radius: 14px;
  padding: 14px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 14px 30px rgba(3, 2, 30, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cc-1 {
  background: linear-gradient(135deg, #02023C, #04017B);
  z-index: 3;
  transform: translate(-20px, -10px);
  border: 1px solid rgba(152, 132, 255, 0.35);
}

.cc-2 {
  background: linear-gradient(135deg, #5a28ff, #400FF2);
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cc-3 {
  background: linear-gradient(135deg, var(--lilas), var(--lilas-claro));
  color: var(--ink);
  z-index: 1;
  transform: translate(20px, 10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.cc .chip {
  width: 22px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(135deg, #d4c685, #a8941a);
  align-self: flex-start;
}

.cc .num {
  font-size: 10px;
  letter-spacing: 0.18em;
}

.cc .row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.cc .name {
  font-size: 9px;
  opacity: 0.9;
  text-transform: uppercase;
}

.cc .brand-mark {
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* === QR CODE === */
.qr-code {
  width: 160px;
  height: 160px;
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 14px 30px rgba(3, 2, 30, 0.12);
  position: relative;
}

.qr-code svg {
  width: 100%;
  height: 100%;
}

.qr-code .pix-tag {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #00b96d;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  border-radius: 100px;
  box-shadow: 0 6px 14px rgba(0, 185, 109, 0.35);
}

/* === BANK SLIP === */
.boleto {
  width: 240px;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(3, 2, 30, 0.1);
  border: 1px solid var(--ink-line);
  position: relative;
}

.boleto-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--ink-line);
  margin-bottom: 8px;
}

.boleto-head .b-bank {
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--azul-paytime);
}

.boleto-head .b-tag {
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}

.boleto-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 9.5px;
}

.boleto-row .v {
  color: var(--ink);
  font-weight: 600;
}

.boleto-row .l {
  color: var(--ink-mute);
}

.boleto-amt {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.boleto-amt .v {
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.boleto-barcode {
  margin-top: 10px;
  height: 30px;
  background:
    repeating-linear-gradient(90deg, #03021E 0 2px, transparent 2px 4px,
      #03021E 4px 7px, transparent 7px 8px,
      #03021E 8px 9px, transparent 9px 12px,
      #03021E 12px 14px, transparent 14px 17px);
  border-radius: 2px;
}

/* === CHART === */
.chart-card {
  width: 100%;
  max-width: 320px;
  padding: 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(3, 2, 30, 0.08);
  border: 1px solid var(--ink-line);
}

.chart-card .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.chart-card .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.chart-card .v {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.chart-card .delta {
  font-size: 11px;
  color: #00875c;
  font-family: var(--font-mono);
  font-weight: 600;
}

.chart-card svg {
  width: 100%;
  height: 60px;
  display: block;
}

/* === TX RECEIPT === */
.receipt {
  width: 240px;
  padding: 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(3, 2, 30, 0.10);
  border: 1px solid var(--ink-line);
  position: relative;
}

.receipt::before,
.receipt::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--canvas);
  border-radius: 50%;
}

.receipt::before {
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
}

.receipt::after {
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
}

.receipt-head {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--ink-line);
  margin-bottom: 12px;
}

.receipt-head .ico {
  width: 36px;
  height: 36px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: rgba(0, 135, 92, 0.12);
  color: #00875c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.receipt-head .ico svg {
  width: 18px;
  height: 18px;
}

.receipt-head .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.receipt-amt {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-align: center;
  margin: 4px 0 14px;
}

.receipt-amt .currency,
.receipt-amt .cents {
  font-size: 14px;
  opacity: 0.5;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 4px 0;
}

.receipt-row .l {
  color: var(--ink-mute);
}

.receipt-row .v {
  font-family: var(--font-mono);
  font-weight: 500;
}

/* === CODE BLOCK === */
.code-block {
  background: linear-gradient(135deg, #02023C, #04017B);
  color: var(--off-white);
  border-radius: 12px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  width: 100%;
  border: 1px solid rgba(152, 132, 255, 0.3);
  overflow: auto;
}

.code-block .k {
  color: #ff79c6;
}

.code-block .s {
  color: #50fa7b;
}

.code-block .n {
  color: #bd93f9;
}

.code-block .c {
  color: rgba(233, 228, 237, 0.45);
  font-style: italic;
}

.code-block .m {
  color: #ffb86c;
}

/* === ICON LIBRARY === */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--sp-3);
}

.icon-tile {
  aspect-ratio: 1/1;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.icon-tile:hover {
  background: rgba(64, 15, 242, 0.06);
  border-color: rgba(64, 15, 242, 0.25);
  color: var(--azul-paytime);
}

.icon-tile svg {
  width: 24px;
  height: 24px;
}

.icon-tile .nm {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
}

.icon-tile:hover .nm {
  color: var(--azul-paytime);
}

/* === APP ICONS === */
.app-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-3) var(--sp-2);
}

.app-icon-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

/* unified squircle tile (no outer backdrop) */
.app-icon {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #F8F6FC);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 12px 24px -10px rgba(3, 2, 30, 0.20),
    0 2px 5px rgba(3, 2, 30, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  flex-shrink: 0;
}

.app-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 30% 10%, rgba(255, 255, 255, 0.5), transparent 55%);
  pointer-events: none;
}

.app-icon .glyph {
  width: 52px;
  height: 52px;
  position: relative;
  z-index: 1;
}

.app-icon-tile .ai-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.app-icon-tile .ai-token {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* === MOCK CLIENT LOGO === */
.mock-logo-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-4);
}

@media (max-width: 880px) {
  .mock-logo-grid {
    grid-template-columns: 1fr;
  }
}

.mock-logo-stage {
  border-radius: var(--radius-xl, 24px);
  border: 1px solid var(--ink-line);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(152, 132, 255, 0.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #FAF8FE);
  padding: var(--sp-7) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  overflow: hidden;
  container-type: inline-size;
}

.mock-logo-stage.dark {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(152, 132, 255, 0.18), transparent 60%),
    linear-gradient(135deg, #02023C, #04017B);
  border-color: rgba(152, 132, 255, 0.18);
}

.mock-logo-stage.canvas {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(152, 132, 255, 0.12), transparent 60%),
    linear-gradient(180deg, #F5F2F9, #E9E4ED);
}

/* Logo variant wrapper with label */
.logo-variant {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.logo-variant__label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 2px;
}

.logo-variant__token {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: 5px;
  padding: 2px 0px;
  display: inline-block;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logo-variant__name {
  font-family: var(--font-ui, var(--font-brand));
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-logo {
  display: inline-flex;
  align-items: center;
  gap: min(14px, 4.5cqw);
}

.mock-logo .ml-mark {
  position: relative;
  width: min(66px, 22cqw);
  aspect-ratio: 66 / 50;
  height: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.mock-logo .ml-mark svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mock-logo .ml-word {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: min(30px, 9.5cqw);
  letter-spacing: -0.04em;
  color: var(--azul-escuro);
  line-height: 1;
}

.mock-logo .ml-word .ml-thin {
  font-weight: 300;
}


/* Variants */
.mock-logo.size-sm .ml-mark {
  width: 42px;
  height: 32px;
}

.mock-logo.size-sm .ml-word {
  font-size: 18px;
}

.mock-logo.size-sm {
  gap: 10px;
}

.mock-logo.size-lg .ml-mark {
  width: 95px;
  height: 72px;
}

.mock-logo.size-lg .ml-word {
  font-size: 44px;
}

.mock-logo.size-lg {
  gap: 18px;
}

.mock-logo.invert .ml-word {
  color: #ffffff;
}

/* Vertical variant */
.mock-logo.vertical {
  flex-direction: column;
  align-items: center;
  gap: min(10px, 3.5cqw);
}

.mock-logo.vertical .ml-mark {
  width: min(66px, 22cqw);
  aspect-ratio: 66 / 50;
  height: auto;
}

.mock-logo.vertical .ml-word {
  text-align: center;
}

.mock-logo.vertical.size-sm {
  gap: 7px;
}

.mock-logo.vertical.size-sm .ml-mark {
  width: 42px;
  height: 32px;
}

.mock-logo.vertical.size-lg {
  gap: 14px;
}

.mock-logo.vertical.size-lg .ml-mark {
  width: 95px;
  height: 72px;
}

.mock-logo .ml-word {
  font-size: 13px;
}

.mock-logo .ml-mark {
  width: 30px;
  height: 23px;
}

.mock-logo.vertical .ml-mark {
  width: 30px;
  height: 23px;
}



/* ── Paytime logo lockup (brand applications) ── */
/* Combined lockup SVG (img) inside a stage */
.pt-logo-img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Symbol full-bleed: fills entire card */
.pt-logo-img--fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.pt-lockup {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  gap: min(12px, 3.5cqw);
}

.pt-lockup.vertical {
  flex-direction: column;
  align-items: center;
  gap: min(8px, 2.5cqw);
}

.pt-symbol {
  width: min(50px, 16cqw);
  aspect-ratio: 1;
  flex-shrink: 0;
}

.pt-symbol svg {
  width: 100%;
  height: 100%;
  display: block;
}

.pt-wordmark {
  height: min(28px, 8.5cqw);
  aspect-ratio: 2590 / 850;
  flex-shrink: 1;
  min-width: 0;
}

.pt-wordmark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.pt-lockup.vertical .pt-symbol {
  width: min(60px, 18cqw);
}

.pt-lockup.vertical .pt-wordmark {
  height: min(20px, 6cqw);
  aspect-ratio: 2590 / 850;
}

.mock-logo-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--ink-line);
}

.mock-logo-meta .meta-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mock-logo-meta .meta-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.mock-logo-meta .meta-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.mock-logo-meta .meta-val.mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--azul-paytime);
}

.mock-logo-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.mock-logo-side .small-stage {
  border-radius: 16px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, 0.55);
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
}

.mock-logo-side .small-stage.dark {
  background: linear-gradient(135deg, #02023C, #04017B);
  border-color: rgba(152, 132, 255, 0.18);
}

.mock-logo-side .small-stage .stage-tag {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.mock-logo-side-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

/* TOC */
.toc-pill {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 100px;
}

.toc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(3, 2, 30, 0.18);
  transition: all 0.2s;
  cursor: pointer;
}

.toc-dot.active {
  background: var(--azul-paytime);
  transform: scale(1.5);
  box-shadow: 0 0 10px var(--azul-paytime);
}

@media (max-width: 1100px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .shell main {
    padding: var(--sp-5);
  }

  .ds-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .ds-section-head .desc {
    text-align: left;
  }

  .toc-pill {
    display: none;
  }
}

/* TOAST COPY */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  box-shadow: 0 14px 32px rgba(3, 2, 30, 0.3);
  z-index: 100;
  transition: transform 0.3s ease;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}


/* ── POS terminal mock (block4) ── */
/* 3. POS TERMINAL MOCK */
.pos-mock {
  width: 260px;
  border-radius: 24px;
  background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-dark) 100%);
  padding: 12px;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(152, 132, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 30px 60px rgba(3, 2, 30, 0.5);
}

.pos-screen {
  border-radius: 14px;
  background: linear-gradient(180deg, var(--c-canvas) 0%, #EFE9F8 100%);
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.pos-screen-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(3, 2, 30, 0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.vc-signal {
  display: inline-flex;
  gap: 2px;
  align-items: flex-end;
}

.vc-signal span {
  width: 3px;
  background: var(--c-blue);
  border-radius: 1px;
}

.vc-signal span:nth-child(1) {
  height: 5px;
}

.vc-signal span:nth-child(2) {
  height: 8px;
}

.vc-signal span:nth-child(3) {
  height: 11px;
}

.pos-brand {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.pos-brand-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: var(--c-blue);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.pos-amount-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: rgba(3, 2, 30, 0.4);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pos-amount {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
  margin: 4px 0 14px;
}

.pos-amount .curr {
  font-size: 16px;
  opacity: 0.45;
  margin-right: 3px;
}

.pos-amount .cts {
  font-size: 16px;
  opacity: 0.45;
}

.pos-tap-zone {
  margin-top: auto;
  background: linear-gradient(135deg, var(--c-blue), var(--c-blue-mid));
  border-radius: 12px;
  padding: 16px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.pos-tap-zone::before,
.pos-tap-zone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: vcRipple 2s ease-out infinite;
}

.pos-tap-zone::after {
  animation-delay: 0.6s;
}

@keyframes vcRipple {
  0% {
    width: 28px;
    height: 28px;
    opacity: 1;
  }

  100% {
    width: 130px;
    height: 130px;
    opacity: 0;
  }
}

.pos-tap-icon {
  position: relative;
  z-index: 2;
  width: 32px;
  height: 32px;
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pos-tap-icon svg {
  width: 100%;
  height: 100%;
}

.pos-tap-text {
  position: relative;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
}

.pos-tap-sub {
  position: relative;
  z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 2px;
}



/* ── Phone mock (block4) ── */
/* 4. PHONE MOCK */
.phone-mock {
  width: 180px;
  border-radius: 28px;
  background: linear-gradient(135deg, #02023C, #04017B);
  padding: 8px;
  border: 1px solid rgba(152, 132, 255, 0.25);
  box-shadow: 0 30px 60px rgba(3, 2, 30, 0.5);
  animation: floatPhone 8s ease-in-out infinite alternate;
}

@keyframes floatPhone {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-12px);
  }
}

.phone-screen {
  border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #F2EDFB 100%);
  padding: 14px;
  min-height: 290px;
  display: flex;
  flex-direction: column;
}

.phone-notch {
  width: 46px;
  height: 13px;
  background: var(--c-dark);
  border-radius: 100px;
  margin: 0 auto 10px;
}

.phone-amount-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  color: rgba(3, 2, 30, 0.4);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

.phone-amount {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-align: center;
  margin: 3px 0 12px;
}

.phone-card {
  margin: var(--sp-3) 0;
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, #02023C, #04017B);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.phone-card .chip {
  width: 16px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(135deg, #d4c685, #a8941a);
}

.phone-tap-circle {
  margin-top: auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-blue), var(--c-lilas));
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 8px 24px rgba(64, 15, 242, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.phone-tap-circle svg {
  width: 32px;
  height: 32px;
  color: #fff;
}

.phone-tap-circle::before,
.phone-tap-circle::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(64, 15, 242, 0.5);
  border-radius: 50%;
  animation: vcRipple2 2s ease-out infinite;
}

.phone-tap-circle::after {
  animation-delay: 0.6s;
}

@keyframes vcRipple2 {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.phone-tap-lbl {
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: rgba(3, 2, 30, 0.5);
  margin-top: 6px;
}



/* ── Credit card stack (block4) ── */
/* 5. CREDIT CARD STACK */
.card-stack {
  position: relative;
  width: 300px;
  height: 220px;
}

.credit-card {
  position: absolute;
  width: 280px;
  aspect-ratio: 1.6/1;
  border-radius: 20px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  color: #fff;
  box-shadow: 0 24px 60px rgba(64, 15, 242, 0.22);
}

.credit-card.cc-1 {
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-dark) 100%);
  border: 1px solid rgba(152, 132, 255, 0.35);
  z-index: 3;
  top: 0;
  left: 0;
  transform: translate(-20px, -10px) rotate(-3deg);
}

.credit-card.cc-2 {
  background: linear-gradient(135deg, var(--c-blue-mid) 0%, var(--c-blue) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 2;
  top: 0;
  left: 0;
}

.credit-card.cc-3 {
  background: linear-gradient(135deg, var(--c-lilas) 0%, var(--c-lilas-lt) 100%);
  color: var(--c-dark);
  border: 1px solid rgba(255, 255, 255, 0.6);
  z-index: 1;
  top: 0;
  left: 0;
  transform: translate(30px, 22px) rotate(2deg);
}

.cc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cc-chip {
  width: 28px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--c-gold), #a8941a);
  position: relative;
}

.cc-chip::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.cc-net {
  display: flex;
}

.cc-net .ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-lilas);
  opacity: 0.8;
}

.cc-net .ring:last-child {
  margin-left: -10px;
  opacity: 0.6;
}

.cc-num {
  font-size: 12px;
  letter-spacing: 0.15em;
  opacity: 0.75;
  margin-top: 8px;
}

.cc-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.cc-name {
  font-size: 9px;
  letter-spacing: 0.12em;
  opacity: 0.6;
}

.cc-exp {
  font-size: 9px;
  opacity: 0.6;
}



/* ── PIX flow steps ── */
/* 13. PIX FLOW STEPS */
.pix-flow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 280px;
}

.pix-step {
  position: relative;
  padding: 12px 14px 12px 46px;
  border: 1px solid rgba(64, 15, 242, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  color: var(--ink);
}

.pix-step .num {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(64, 15, 242, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 10px;
  color: var(--ink);
}

.pix-step.done {
  background: linear-gradient(135deg, var(--c-blue-mid), var(--c-blue));
  color: #fff;
  border-color: transparent;
}

.pix-step.done .num {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.pix-connector {
  width: 1px;
  height: 8px;
  background: rgba(64, 15, 242, 0.15);
  margin: 0 0 0 23px;
}



/* ── Trust badge ── */
/* 14. TRUST BADGE */
.trust-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 18px;
  border-radius: 18px;
  width: 100px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(152, 132, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
}

.trust-badge .badge-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(152, 132, 255, 0.3), rgba(64, 15, 242, 0.5));
  border: 1px solid rgba(152, 132, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
}

.trust-badge .badge-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.1em;
  text-align: center;
}



/* ── Routing block ── */
/* 15. ROUTING BLOCK */
.routing-demo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 280px;
}

.routing-tx {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.routing-tx .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.routing-tx .val {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.routing-tx .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 3px;
}

.routing-acq {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.routing-acq .name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.routing-acq .ms {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--c-lilas);
  background: rgba(64, 15, 242, 0.15);
  padding: 2px 7px;
  border-radius: 100px;
}

.routing-acq.winner {
  background: linear-gradient(135deg, var(--c-blue), var(--c-blue-mid));
  border-color: transparent;
}

.routing-acq.winner .name {
  color: #fff;
}

.routing-acq.winner .ms {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}


/* ── 16. SPLIT BUILDER ── */
/* 10. SPLIT BUILDER */
.split-builder {
  width: 300px;
}

.split-incoming {
  background: linear-gradient(135deg, var(--c-blue-mid), var(--c-blue));
  color: #fff;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(64, 15, 242, 0.3);
}

.split-incoming .lbl {
  font-size: 11px;
  opacity: 0.8;
}

.split-incoming .val {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.split-arrow {
  text-align: center;
  font-size: 16px;
  opacity: 0.35;
  margin: 4px 0;
}

.split-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 1);
  margin-bottom: 6px;
  box-shadow: 0 4px 12px rgba(64, 15, 242, 0.06);
}

.split-row .av {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--c-lilas), var(--c-blue));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.split-row .info .name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.split-row .info .role {
  font-size: 10px;
  color: #5A6A8A;
}

.split-row .pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-blue);
  font-family: 'JetBrains Mono', monospace;
}



/* ── 17. MARQUEE ── */
/* 11. MARQUEE */
.marquee-wrap {
  overflow: hidden;
  position: relative;
  padding: 8px 0;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: vcMarquee 40s linear infinite;
}

@keyframes vcMarquee {
  to {
    transform: translateX(-50%);
  }
}

.marquee-tag {
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(152, 132, 255, 0.12);
  border: 1px solid rgba(152, 132, 255, 0.22);
  color: var(--c-lilas-lt);
}

.marquee-tag .glyph {
  color: var(--gray-700);
}



/* ── Eyebrow badge (block4) ── */
/* 2. EYEBROW BADGE */
.eyebrow-d {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-lilas-lt);
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(152, 132, 255, 0.12);
  border: 1px solid rgba(152, 132, 255, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.eyebrow-l {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-blue);
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(64, 15, 242, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.eyebrow-d .dot,
.eyebrow-l .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-lilas);
  box-shadow: 0 0 12px var(--c-lilas);
  animation: dotPulse 2s ease-in-out infinite;
}

.eyebrow-l .dot {
  background: var(--c-blue);
  box-shadow: 0 0 10px var(--c-blue);
}

@keyframes dotPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}



/* ── 18. ANIMATIONS & KEYFRAMES ── */
/* ── Animations ── */
.animate-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-in[data-delay="1"] {
  transition-delay: 0.10s;
}

.animate-in[data-delay="2"] {
  transition-delay: 0.20s;
}

.animate-in[data-delay="3"] {
  transition-delay: 0.30s;
}

.animate-in[data-delay="4"] {
  transition-delay: 0.40s;
}






@keyframes auroradrift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(60px, -50px) scale(1.07);
  }

  100% {
    transform: translate(-50px, 30px) scale(0.95);
  }
}

































@keyframes lm-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

@keyframes lm-float {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-12px);
  }
}

/* ── 19. PAGE BACKGROUNDS (aurora, grain, page-canvas) ── */
/* ── Aurora / Grain ─────────────────────────────────
   Fundo animado usado em páginas de tema claro.
   O .aurora tem background padrão (index.html).
   Páginas que precisarem de variação sobrescrevem
   apenas o `background` do .aurora inline.
───────────────────────────────────────────────────── */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 10% 5%, rgba(152, 132, 255, 0.12), transparent 70%),
    radial-gradient(ellipse 50% 40% at 95% 30%, rgba(217, 205, 253, 0.16), transparent 70%),
    linear-gradient(180deg, #FDFCFE 0%, #FAF8FC 50%, #F5F2F9 100%);
}

.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  mix-blend-mode: multiply;
  opacity: 0.5;
  animation: auroradrift 32s ease-in-out infinite alternate;
}

.aurora::before {
  top: -8%;
  left: -10%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(152, 132, 255, 0.4), transparent 60%);
  filter: blur(140px);
  mix-blend-mode: multiply;
  opacity: 0.25;
}

.aurora::after {
  bottom: -15%;
  right: -10%;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(64, 15, 242, 0.4), transparent 60%);
  animation-delay: -16s;
  animation-duration: 38s;
}

.aurora-c {
  position: absolute;
  top: 45%;
  left: 60%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 205, 253, 0.7), transparent 65%);
  filter: blur(120px);
  mix-blend-mode: multiply;
  opacity: 0.6;
  animation: auroradrift 26s ease-in-out infinite alternate-reverse;
}



.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.10;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.18  0 0 0 0 0.32  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}




/* ── 21. RESPONSIVE ── */
/* ── Shared responsive ── */
@media (max-width: 768px) {


  .section-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {

  .numbers-bar__item {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }

  .numbers-bar__item:last-child {
    border-bottom: none;
  }
}



/* ── FOOTER ── */
/* ── Footer ── */
.footer {
  background: var(--bg-navy);
  padding: var(--space-8) var(--space-4);
  position: relative;
  z-index: 2;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.footer__logo-symbol {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.footer__logo-wordmark {
  height: 20px;
  width: auto;
  display: block;
}

.footer__logo-img {
  height: 28px;
  width: auto;
  display: block;
}

.footer__tagline {
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.68;
  margin-bottom: var(--space-6);
  max-width: 280px;
}

.footer__certs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.footer__cert {
  padding: 0.3rem 0.75rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}

/* Faixa de selos de verificação (PCI DSS, ISO 9001, ReclameAQUI) */
.footer__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  margin-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__badge {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.88);
}

.footer__badge svg {
  height: 34px;
  width: auto;
  display: block;
}

.footer__badge-iso-img {
  height: 34px;
  width: auto;
  display: block;
  margin-right: 8px;
  filter: brightness(0) invert(1);
  opacity: 0.88;
}

.footer__b3-mark {
  flex: none;
}

/* ─────────────────────────────────────────────────────────────
   Navegador de categoria (.macro-*) — seção reaproveitável que
   lista as soluções da mesma categoria, destacando a página atual.
   Injetada por components.js (data-cat-nav). Portada do solucoes.html.
   ───────────────────────────────────────────────────────────── */
.macro-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4, 18px);
  max-width: 1120px;
  margin: 0 auto;
}

.macro-card {
  flex: 0 1 258px;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(11, 18, 32, .07);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 34px rgba(64, 15, 242, .06);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  font: inherit;
  text-decoration: none;
  display: block;
}

.macro-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(64, 15, 242, .13);
  border-color: rgba(64, 15, 242, .2);
}

.macro-card.is-current {
  border-color: var(--azul-paytime);
  box-shadow: 0 0 0 2px rgba(64, 15, 242, .18), 0 18px 44px rgba(64, 15, 242, .12);
}

.macro-card__ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(64, 15, 242, .08);
  color: var(--azul-paytime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-bottom: 14px;
}

.macro-card__t {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}

.macro-card__d {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 5px;
  line-height: 1.5;
}

.macro-stat {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: var(--sp-6, 32px) auto 0;
  max-width: 900px;
}

.macro-stat .ms {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2, #3B4463);
  background: rgba(64, 15, 242, .06);
  border: 1px solid rgba(64, 15, 242, .12);
  border-radius: 100px;
  padding: 7px 14px;
}

.macro-stat .ms b {
  color: var(--azul-paytime);
}

.macro-foot {
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: var(--sp-5, 26px);
}

.macro-foot b {
  color: var(--ink);
  font-weight: 600;
}

/* Selo premiação ReclameAQUI (colorido, imagem oficial) */
.footer__badge--award {
  color: inherit;
}

.footer__badge-award-img {
  height: 50px;
  width: auto;
  display: block;
  border-radius: 6px;
}

/* Mobile: selo ReclameAQUI (RA Prêmio) centralizado em linha própria e os
   demais selos centralizados abaixo. */
@media (max-width: 768px) {
  .footer__trust {
    justify-content: center;
    text-align: center;
  }
  .footer__badge--award {
    flex-basis: 100%;
    justify-content: center;
    margin-bottom: var(--space-2);
  }
}

.footer__col-title {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-4);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.18s;
}

.footer__link:hover {
  color: rgba(255, 255, 255, 0.9);
}

.footer__bottom {
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__copy {
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.35);
}

.footer__bemobi-badge {
  opacity: 0.8;
  padding: 0.25rem 0.5rem;
  letter-spacing: 0em;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.footer__bemobi-badge:hover {
  opacity: 1;
}

.footer__social {
  display: flex;
  gap: var(--space-2);
}

.social-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.45);
  transition: all 0.18s;
}

.social-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

.social-btn:hover {
  background: var(--primary-500);
  border-color: var(--primary-500);
  color: #fff;
  transform: translateY(-2px);
}


/* ── Responsive ── */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 768px) {
  .hero__ctas {
    flex-direction: column;
  }

  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-4);
  }

  .section {
    padding: var(--space-6) 0;
  }

  .section--large {
    padding: var(--space-8) 0;
  }
}

/* ══════════════════════════════════════════════════════
   

/* ── OTHERS (DS-specific components) ── */
/* AVATARS */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lilas), var(--azul-paytime));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(64, 15, 242, 0.2);
}

.avatar.lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
}

.avatar.sm {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

.avatar-stack {
  display: flex;
}

.avatar-stack .avatar:not(:first-child) {
  margin-left: -10px;
}


/* TOOLTIP */
.tooltip {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 8px 20px rgba(3, 2, 30, 0.25);
}

.tooltip::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 16px;
  width: 10px;
  height: 10px;
  background: var(--ink);
  transform: rotate(45deg);
}


/* PROGRESS */
.progress {
  height: 8px;
  background: rgba(3, 2, 30, 0.08);
  border-radius: 100px;
  overflow: hidden;
  width: 100%;
}

.progress>span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--azul-paytime), var(--lilas));
  border-radius: 100px;
  box-shadow: 0 0 12px rgba(64, 15, 242, 0.4);
}

/* META CARDS – financial primitives */
.meta-card {
  padding: var(--sp-4);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: var(--radius-md);
  flex: 1;
  min-width: 200px;
}

.meta-card .lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}

.meta-card .val {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}

.meta-card .delta {
  font-size: 11px;
  font-family: var(--font-mono);
  margin-top: 4px;
  font-weight: 600;
}

.meta-card .delta.up {
  color: #00875c;
}

.meta-card .delta.dn {
  color: #c0398d;
}

/* MODULES — devices & financial primitives */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}

.module-tile {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 380px;
}

.module-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(245, 242, 251, 0.8), rgba(255, 255, 255, 0.5));
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  position: relative;
  overflow: hidden;
  min-height: 240px;
}

.module-stage.dark {
  background: linear-gradient(135deg, #02023C, #04017B);
}

.module-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.module-foot .name {
  font-size: 14px;
  font-weight: 600;
}

.module-foot .token {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--azul-paytime);
}



@media (max-width: 1100px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .shell main {
    padding: var(--sp-5);
  }

  .ds-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .ds-section-head .desc {
    text-align: left;
  }

  .toc-pill {
    display: none;
  }
}


/* ── Live Monitor ── */
/* live monitor */
.live-monitor {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.lm-card {
  padding: 28px 28px 22px;
  border-radius: 22px;
}

.lm-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.lm-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.lm-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #00b96d;
  box-shadow: 0 0 0 4px rgba(0, 185, 109, 0.18);
  animation: lm-pulse 2s infinite;
}



.lm-pills {
  display: flex;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.lm-pills span {
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(64, 15, 242, 0.08);
  color: var(--azul-paytime);
}

.lm-pills span.active {
  background: var(--azul-paytime);
  color: #fff;
}

.lm-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-bottom: 6px;
}

.lm-amount {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 8px;
}

.lm-amount .cur {
  font-size: 20px;
  opacity: 0.55;
  margin-right: 6px;
}

.lm-amount .cents {
  font-size: 22px;
  opacity: 0.4;
}

.lm-delta {
  font-size: 14px;
  font-weight: 600;
  color: #00b96d;
}

.lm-delta span {
  color: rgba(3, 2, 30, 0.5);
  font-weight: 400;
  margin-left: 4px;
}

.lm-chart {
  height: 130px;
  margin: 18px 0;
}

.lm-chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lm-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lm-kpi {
  position: relative;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.95);
}

.lm-kpi-lbl {
  font-size: 11.5px;
  color: rgba(3, 2, 30, 0.55);
  margin-bottom: 4px;
}

.lm-kpi-val {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.lm-kpi-icn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #5a28ff, #400FF2);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 14px rgba(64, 15, 242, 0.3);
}

.lm-floater {
  position: absolute;
  right: -20px;
  bottom: 30px;
  width: 240px;
  padding: 14px 16px;
  border-radius: 16px;
  animation: lm-float 8s ease-in-out infinite alternate;
}



.lm-float-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.lm-float-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  background: linear-gradient(135deg, #5a28ff, #400FF2);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
}

.lm-float-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(3, 2, 30, 0.55);
}

.lm-float-time .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00b96d;
  box-shadow: 0 0 6px #00b96d;
}

.lm-float-code {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}

.lm-float-code .n {
  color: #c0398d;
}

.lm-float-code .s {
  color: #00875a;
}

.lm-float-code .m {
  color: #d97706;
}

.lm-float-code .b {
  color: var(--azul-paytime);
  font-weight: 600;
}

@media (max-width: 720px) {
  .lm-floater {
    right: 10px;
    bottom: -10px;
    width: 200px;
  }
}

/* ── VC Stage (design system showcase) ── */
/* ── Stage (showcase area) ── */
.vc-stage {
  border-radius: 20px;
  padding: 48px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.vc-stage--dark {
  background: linear-gradient(135deg, #03021E 0%, #050226 100%);
}

.vc-stage--mid {
  background: linear-gradient(135deg, #02023C, #04017B);
}

.vc-stage--light {
  background: linear-gradient(135deg, #F0EEFF 0%, #E8E2F8 100%);
}

.vc-stage--white {
  background: #fff;
  border: 1px solid rgba(64, 15, 242, 0.08);
}

.vc-stage--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.vc-stage--split .half {
  padding: 48px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.vc-stage--split .half--dark {
  background: linear-gradient(135deg, #03021E, #050226);
}

.vc-stage--split .half--light {
  background: linear-gradient(135deg, #F0EEFF, #E8E2F8);
}



/* ── DS colors grid (design system only) ── */
/* COLORS */
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}

.swatch {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--ink-line);
  background: #fff;
  transition: transform 0.2s;
  cursor: pointer;
}

.swatch:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.swatch-color {
  height: 110px;
  position: relative;
}

.swatch-color::after {
  content: "Click to copy";
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.25);
  padding: 3px 7px;
  border-radius: 100px;
  opacity: 0;
  transition: opacity 0.2s;
}

.swatch:hover .swatch-color::after {
  opacity: 1;
}

.swatch-info {
  padding: 12px 14px;
}

.swatch-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.swatch-hex {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 2px;
}

.swatch-token {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--azul-paytime);
  letter-spacing: 0.08em;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--ink-line);
}



/* ── DS spacing visual ── */
/* SPACING */
.spacing-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-2);
}

.spacing-row .lbl {
  width: 70px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  font-weight: 600;
}

.spacing-row .px {
  width: 60px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
}

.spacing-row .bar {
  height: 12px;
  background: linear-gradient(90deg, var(--azul-paytime), var(--lilas));
  border-radius: 4px;
}



/* ── DS radii / shadows visual ── */
/* RADII / SHADOWS */
.radii-grid,
.shadow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-4);
}

.radius-tile {
  aspect-ratio: 1/1;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(64, 15, 242, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.radius-tile .name {
  font-size: 13px;
  font-weight: 600;
}

.radius-tile .px {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
}

.shadow-tile {
  aspect-ratio: 1.4/1;
  background: #fff;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--ink-line);
}

.shadow-tile.sm {
  box-shadow: var(--shadow-sm);
}

.shadow-tile.md {
  box-shadow: var(--shadow-md);
}

.shadow-tile.lg {
  box-shadow: var(--shadow-xlg);
}

.shadow-tile.glow {
  box-shadow: var(--shadow-glow);
}

.shadow-tile .name {
  font-size: 13px;
  font-weight: 600;
}

.shadow-tile .token {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
}



/* ── SPACING UTILITIES ── */
/* SPACING UTILITIES Baseadas em --space-* (rem) e --sp-* (px) Uso: p-4,
px-6,
py-3,
mt-5,
gap-4 … Sistema --space-*: 1=0.25r 2=0.5r 3=0.75r 4=1r 5=1.5r 6=2r 8=3r 10=4r 12=5r 16=6r 20=8r Sistema --sp-*: 3=12px 4=16px 5=24px 6=32px 7=48px 8=64px 9=96px ══════════════════════════════════════════════════════ */

/* ── Padding — todas as faces ── */
.p-1 {
  padding: var(--space-1);
}

.p-2 {
  padding: var(--space-2);
}

.p-3 {
  padding: var(--space-3);
}

.p-4 {
  padding: var(--space-4);
}

.p-5 {
  padding: var(--space-5);
}

.p-6 {
  padding: var(--space-6);
}

.p-8 {
  padding: var(--space-8);
}

.p-10 {
  padding: var(--space-10);
}

.p-12 {
  padding: var(--space-12);
}

/* ── Padding — eixo X (esquerda + direita) ── */
.px-1 {
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}

.px-2 {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.px-3 {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.px-4 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.px-5 {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.px-6 {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.px-10 {
  padding-left: var(--space-10);
  padding-right: var(--space-10);
}

.px-12 {
  padding-left: var(--space-12);
  padding-right: var(--space-12);
}

/* ── Padding — eixo Y (topo + base) ── */
.py-1 {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.py-2 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.py-3 {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.py-4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.py-5 {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.py-6 {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.py-10 {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

/* ── Padding — faces individuais ── */
.pt-1 {
  padding-top: var(--space-1);
}

.pt-2 {
  padding-top: var(--space-2);
}

.pt-3 {
  padding-top: var(--space-3);
}

.pt-4 {
  padding-top: var(--space-4);
}

.pt-5 {
  padding-top: var(--space-5);
}

.pt-6 {
  padding-top: var(--space-6);
}

.pt-8 {
  padding-top: var(--space-8);
}

.pb-1 {
  padding-bottom: var(--space-1);
}

.pb-2 {
  padding-bottom: var(--space-2);
}

.pb-3 {
  padding-bottom: var(--space-3);
}

.pb-4 {
  padding-bottom: var(--space-4);
}

.pb-5 {
  padding-bottom: var(--space-5);
}

.pb-6 {
  padding-bottom: var(--space-6);
}

.pb-8 {
  padding-bottom: var(--space-8);
}

.pl-3 {
  padding-left: var(--space-3);
}

.pl-4 {
  padding-left: var(--space-4);
}

.pl-5 {
  padding-left: var(--space-5);
}

.pl-6 {
  padding-left: var(--space-6);
}

.pr-3 {
  padding-right: var(--space-3);
}

.pr-4 {
  padding-right: var(--space-4);
}

.pr-5 {
  padding-right: var(--space-5);
}

.pr-6 {
  padding-right: var(--space-6);
}

/* ── Margin — todas as faces ── */
.m-0 {
  margin: 0;
}

.m-1 {
  margin: var(--space-1);
}

.m-2 {
  margin: var(--space-2);
}

.m-3 {
  margin: var(--space-3);
}

.m-4 {
  margin: var(--space-4);
}

.m-5 {
  margin: var(--space-5);
}

.m-6 {
  margin: var(--space-6);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* ── Margin — eixo X ── */
.mx-1 {
  margin-left: var(--space-1);
  margin-right: var(--space-1);
}

.mx-2 {
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}

.mx-3 {
  margin-left: var(--space-3);
  margin-right: var(--space-3);
}

.mx-4 {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

/* ── Margin — eixo Y ── */
.my-2 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.my-3 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.my-4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.my-5 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

.my-6 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

/* ── Margin — faces individuais ── */
.mt-1 {
  margin-top: var(--space-1);
}

.mt-2 {
  margin-top: var(--space-2);
}

.mt-3 {
  margin-top: var(--space-3);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-5 {
  margin-top: var(--space-5);
}

.mt-6 {
  margin-top: var(--space-6);
}

.mt-8 {
  margin-top: var(--space-8);
}

.mb-1 {
  margin-bottom: var(--space-1);
}

.mb-2 {
  margin-bottom: var(--space-2);
}

.mb-3 {
  margin-bottom: var(--space-3);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mb-5 {
  margin-bottom: var(--space-5);
}

.mb-6 {
  margin-bottom: var(--space-6);
}

.mb-8 {
  margin-bottom: var(--space-8);
}

.ml-2 {
  margin-left: var(--space-2);
}

.ml-3 {
  margin-left: var(--space-3);
}

.ml-4 {
  margin-left: var(--space-4);
}

.ml-auto {
  margin-left: auto;
}

.mr-2 {
  margin-right: var(--space-2);
}

.mr-3 {
  margin-right: var(--space-3);
}

.mr-4 {
  margin-right: var(--space-4);
}

.mr-auto {
  margin-right: auto;
}

/* ── Gap (flex / grid) ── */
.gap-1 {
  gap: var(--space-1);
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-5 {
  gap: var(--space-5);
}

.gap-6 {
  gap: var(--space-6);
}

.gap-8 {
  gap: var(--space-8);
}

/* ── Sistema --sp-* (px) — para quem usa a escala maior ── */
.p-sp3 {
  padding: var(--sp-3);
}

.p-sp4 {
  padding: var(--sp-4);
}

.p-sp5 {
  padding: var(--sp-5);
}

.p-sp6 {
  padding: var(--sp-6);
}

.p-sp7 {
  padding: var(--sp-7);
}

.px-sp4 {
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}

.px-sp5 {
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}

.px-sp6 {
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
}

.py-sp4 {
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}

.py-sp5 {
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
}

.mt-sp4 {
  margin-top: var(--sp-4);
}

.mt-sp5 {
  margin-top: var(--sp-5);
}

.mb-sp4 {
  margin-bottom: var(--sp-4);
}

.mb-sp5 {
  margin-bottom: var(--sp-5);
}

.gap-sp3 {
  gap: var(--sp-3);
}

.gap-sp4 {
  gap: var(--sp-4);
}

.gap-sp5 {
  gap: var(--sp-5);
}

.gap-sp6 {
  gap: var(--sp-6);
}

/* ══════════════════════════════════════════════════════
   GLOBAL MOBILE IMPROVEMENTS — max-width: 768px
   These rules patch common layout patterns across all
   pages. Per-page overrides live in each page's <style>.
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hero */
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: var(--sp-6);
  }

  .hero-visual {
    display: none !important;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-headline {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  .hero-sub {
    font-size: 16px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-row,
  .hero-ctas {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
  }

  .hero-cta-row .btn,
  .hero-ctas .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Stats */
  .stat-strip {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }

  .stat-strip-num {
    font-size: 1.6rem;
  }

  /* Sections */
  .section {
    padding: var(--sp-8) var(--sp-4);
  }

  .section-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .section-desc {
    font-size: 15px;
  }

  /* Grids */
  .features-bento {
    grid-template-columns: 1fr;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .steps-grid::before {
    display: none;
  }

  /* CTA block */
  .cta-block {
    padding: var(--sp-7) var(--sp-5);
    text-align: center;
  }

  .cta-row {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
  }

  .cta-row .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Comparison tables */
  .compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Badge */
  .badge {
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  /* Eyebrow */
  .eyebrow {
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE NAVBAR DRAWER (hamburger menu)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.body--menu-open {
    overflow: hidden;
  }

  /* FULLSCREEN drawer no mobile — cobre TUDO, inclusive logo */
  .navbar--menu-open .navbar__links {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0 !important;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0 !important;
    background: #F5F2FE;
    padding: 64px 20px env(safe-area-inset-bottom, 24px);
    gap: 4px;
    z-index: 1000000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    justify-content: flex-start;
    align-items: stretch;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }

  /* Primeiro item ganha respiro extra do topo */
  .navbar--menu-open .navbar__links>li:first-child {
    margin-top: 0.5rem;
  }

  /* Removido o ::before X decorativo — o hambúrguer animado (linhas → X) é o botão real */
  /* Logo decorativo via ::after — removido, brand original agora aparece */
  /* Topbar passa a ocupar a viewport inteira quando menu aberto
     (sem isso, o transform: translateX(-50%) ancora o fixed-child à pilula) */
  nav.topbar.navbar--menu-open {
    z-index: 1000001 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    transform: none !important;
    background: #F5F2FE !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 14px 18px !important;
    border-radius: 0 !important;
    justify-content: space-between !important;
  }

  /* Logo do brand fica visível no topbar quando menu aberto */
  nav.topbar.navbar--menu-open .navbar__brand {
    visibility: visible;
    z-index: 1000002;
  }

  nav.topbar.navbar--menu-open .navbar__brand .navbar__wordmark path,
  nav.topbar.navbar--menu-open .navbar__brand .navbar__wordmark polygon {
    fill: var(--azul-paytime, #400FF2) !important;
  }

  /* Actions (Entrar/Falar com vendas/Contrate agora) — escondidas, ficam dentro do drawer */
  nav.topbar.navbar--menu-open .navbar__actions {
    visibility: hidden;
  }

  nav.topbar.navbar--menu-open .navbar__hamburger {
    position: relative;
    z-index: 1000001 !important;
    visibility: visible !important;
  }

  nav.topbar.navbar--menu-open {
    z-index: 1000001 !important;
  }

  /* Drawer começa logo abaixo do navbar, sem espaço extra */
  .navbar--menu-open .navbar__links {
    padding-top: 70px !important;
    /* exatamente a altura do navbar */
    margin-top: 0 !important;
  }

  .navbar--menu-open .navbar__item {
    width: 100%;
    list-style: none;
  }

  .navbar--menu-open .navbar__link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(64, 15, 242, 0.06);
    font-size: 15px;
    font-weight: 700;
    color: var(--azul-paytime, #400FF2);
    cursor: pointer;
  }

  .navbar--menu-open .navbar__link svg {
    transition: transform .25s;
  }

  .navbar--menu-open .navbar__item--open .navbar__link svg {
    transform: rotate(180deg);
  }

  .navbar--menu-open .navbar__dropdown {
    position: static !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    pointer-events: none !important;
    max-height: 0;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    transition: max-height .25s, opacity .2s;
  }

  .navbar--menu-open .navbar__item--open .navbar__dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    max-height: none;
    margin: 4px 0 8px !important;
    overflow: visible;
  }

  .navbar--menu-open .navbar__dropdown-inner {
    grid-template-columns: 1fr !important;
    padding: 4px 0 !important;
    gap: 4px !important;
    background: transparent !important;
  }

  .navbar--menu-open .navbar__dropdown-item {
    padding: 10px 14px !important;
    border-radius: 10px;
  }

  .navbar--menu-open li:has(> .navbar__link--plain) .navbar__link--plain {
    display: flex;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(64, 15, 242, 0.04);
    font-size: 15px;
    font-weight: 600;
    color: #0e0d27;
  }

  /* Hide top-bar actions when drawer is open — they live INSIDE drawer instead */
  .navbar--menu-open .navbar__actions {
    display: none !important;
  }

  /* Drawer-injected actions (added by JS) — only visible inside mobile drawer */
  .navbar__drawer-actions {
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(64, 15, 242, 0.08);
  }

  .navbar--menu-open .navbar__drawer-actions {
    display: flex !important;
  }

  .navbar__drawer-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }

  .navbar__drawer-actions .drawer-ghost {
    background: rgba(64, 15, 242, 0.04);
    color: #0e0d27;
    border: 1px solid rgba(64, 15, 242, 0.12);
  }

  .navbar__drawer-actions .drawer-cta {
    background: linear-gradient(135deg, #400FF2, #5a28ff);
    color: #fff;
    box-shadow: 0 8px 20px rgba(64, 15, 242, 0.25);
  }

  .navbar--menu-open .navbar__hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .navbar--menu-open .navbar__hamburger span:nth-child(2) {
    opacity: 0;
  }

  .navbar--menu-open .navbar__hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}

/* ══════════════════════════════════════════════════════════════════
   DEEP MOBILE VISUAL REVIEW (CSS-only, desktop intact)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Global typography clamp — no horizontal bleed */
  body {
    -webkit-text-size-adjust: 100%;
  }

  h1,
  h2,
  h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Hero universal — stack, hide visual */
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: var(--sp-5) !important;
  }

  .hero-visual,
  .hero-figure,
  .audience-hero .hero-visual {
    display: none !important;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-headline,
  .hero-title {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
  }

  .hero-sub,
  .hero-subtitle {
    font-size: 15px !important;
    max-width: 100%;
  }

  .hero-cta-row,
  .hero-ctas,
  .hero-actions {
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .hero-cta-row .btn,
  .hero-ctas .btn,
  .hero-actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Stats / stat-strip — collapse */
  .stat-strip,
  .stats-grid,
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .stat-strip-num,
  .stat-num {
    font-size: 1.5rem !important;
  }

  .stat-strip-label,
  .stat-label {
    font-size: 11px !important;
  }

  /* Hero stats specifically */
  .hero-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .hero-stats-item {
    padding: 14px !important;
  }

  /* Section spacing */
  .section {
    padding: 56px var(--sp-4) !important;
  }

  .section+.section {
    padding-top: 0 !important;
  }

  .section-head {
    margin-bottom: 32px !important;
  }

  /* Multi-col grids universal collapse */
  .features-bento,
  .features-grid,
  .feature-grid,
  .bento-grid,
  .three-col,
  .four-col,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* 2-col on mobile when source is 3-4 col */
  .audience-grid,
  .solutions-grid,
  .integrations-grid,
  .why-grid {
    grid-template-columns: 1fr !important;
  }

  /* Cards trim padding */
  .feature-card,
  .audience-card,
  .solution-card,
  .why-item,
  .info-card,
  .glass-card,
  .card {
    padding: 20px !important;
  }

  /* Hide decorative-only elements */
  .floating-decoration,
  .deco-blob,
  .deco-arrow,
  .scroll-hint,
  .decorative-divider,
  .marquee--deco {
    display: none !important;
  }

  /* Background blobs scaled down */
  .pg-blob {
    transform: scale(0.6) !important;
    opacity: 0.5 !important;
  }

  .aurora-c {
    filter: blur(60px) !important;
  }

  /* CTAs centered + stacked everywhere */
  .cta-row,
  .ctas-row,
  .section-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .cta-row .btn,
  .ctas-row .btn,
  .section-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Tables / compare blocks */
  .compare-wrap,
  .comparison-table,
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Code window — smaller font */
  .code-window-body {
    font-size: 11px !important;
    padding: 14px !important;
  }

  /* Photo grids universal */
  .photo-strip-grid,
  .gallery-grid,
  .photos-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Container width */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Generic 2-col layouts to 1-col */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* CTA block (dark final card) */
  .cta-block {
    padding: 40px 24px !important;
    text-align: center !important;
  }

  .cta-block h2 {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }

  .cta-block p {
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {

  .stat-strip,
  .stats-grid,
  .stats-row,
  .hero-stats {
    grid-template-columns: 1fr !important;
  }

  .lp-hero__trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px !important;
  }

  .navbar__cta {
    font-size: 13px;
    padding: 8px 14px;
  }
}



/* ══════════════════════════════════════════════════════════════════
   MOBILE FIXES — overflow + table + button icons + stats
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Global overflow protection */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  main,
  section {
    max-width: 100vw;
    overflow-x: clip;
  }

  /* Comparison tables — horizontal scroll with bleed-out */
  .compare-wrap,
  .comparison-wrap,
  .table-wrap,
  [class*="compare-table"],
  .pricing-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 0 16px !important;
    scrollbar-width: thin;
  }

  .compare-wrap table,
  .compare-wrap>table,
  .comparison-wrap table,
  .compare-table,
  .pricing-table {
    min-width: 560px !important;
    width: max-content !important;
  }

  .compare-wrap th,
  .compare-wrap td,
  .compare-table th,
  .compare-table td,
  .comparison-wrap th,
  .comparison-wrap td {
    font-size: 12px !important;
    padding: 12px 10px !important;
    line-height: 1.4 !important;
  }

  /* Button icon size cap — fixes huge arrows in CTAs */
  .btn svg,
  .btn--primary svg,
  .btn--lg svg,
  .btn--shine svg,
  .btn--white svg,
  .btn--outline svg,
  .btn--outline-white svg,
  .navbar__cta svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  .btn {
    font-size: 14px !important;
    padding: 12px 20px !important;
    gap: 8px !important;
  }

  .btn--lg {
    font-size: 15px !important;
    padding: 14px 22px !important;
  }

  .btn--shine {
    font-size: 15px !important;
    padding: 14px 22px !important;
  }

  .lp-hero__ctas .btn--shine {
    font-size: 16px !important;
    padding: 16px 24px !important;
  }

  /* Stats / bento — keep 2x2 but tighter, or stack at 480 */
  .institutional-stats,
  .stats-grid,
  .stats-bento,
  .stat-cards,
  .bemobi-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .institutional-stats>*,
  .stats-grid>*,
  .stats-bento>*,
  .stat-cards>*,
  .bemobi-stats>* {
    padding: 16px 14px !important;
    min-width: 0 !important;
  }

  .institutional-stats .stat-num,
  .stats-grid .stat-num,
  .stats-bento .stat-num,
  .stat-cards .stat-num {
    font-size: 1.5rem !important;
  }

  /* Bento layouts — be safe with min-width 0 */
  [class*="bento"]>*,
  [class*="grid-cards"]>*,
  .features-grid>*,
  .audience-grid>*,
  .solutions-grid>* {
    min-width: 0 !important;
  }

  /* Compare table when it is grid-based (not <table>) */
  .compare-grid,
  .compare-rows {
    grid-template-columns: 1.2fr 1fr 1fr !important;
    font-size: 12px !important;
  }

  .compare-grid>*,
  .compare-rows>* {
    padding: 10px 8px !important;
    min-width: 0 !important;
    word-break: break-word;
  }

  /* Eyebrow / chips dont break layout */
  .chip-row,
  .badge-row,
  .pills-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .chip,
  .pill,
  .badge {
    font-size: 9px !important;
    padding: 4px 10px !important;
  }
}

@media (max-width: 480px) {

  .institutional-stats,
  .stats-grid,
  .stats-bento,
  .stat-cards,
  .bemobi-stats {
    grid-template-columns: 1fr !important;
  }

  .compare-grid,
  .compare-rows {
    font-size: 11px !important;
  }

  /* Body padding tighter */
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}



/* ══════════════════════════════════════════════════════════════════
   MOBILE — section edges + b2b2b card uniformity
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Sections: backgrounds extend edge-to-edge, content padded only by .container */
  html,
  body {
    margin: 0 !important;
  }

  body {
    padding: 0 !important;
  }

  main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .section,
  .section--tinted,
  .section--dark,
  .hero,
  .audience-hero,
  .lp-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }

  /* Container handles all horizontal padding */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── B2B2B flow — uniform cards on mobile ── */
  .b2b2b-flow {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    margin: 32px 0 !important;
  }

  .b2b2b-node {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(64, 15, 242, 0.10);
    border-radius: 18px;
    padding: 24px !important;
    box-shadow: 0 6px 18px rgba(64, 15, 242, 0.04);
  }

  /* Highlighted card keeps its gradient — just unify dimensions */
  .b2b2b-node--you {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.06)),
      linear-gradient(135deg, #04017B 0%, #400FF2 58%, #9884FF 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 22px 52px rgba(64, 15, 242, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  }

  .b2b2b-arrow {
    display: none !important;
  }

  /* Other "flow" / "chain" patterns — same idea */
  [class*="-flow"]>[class*="-node"],
  [class*="-chain"]>[class*="-node"],
  [class*="-steps"]>[class*="-step"] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  [class*="-arrow"]:not(.btn):not(.btn *) {
    display: none !important;
  }
}



/* Drawer-injected actions — hidden by default everywhere */
.navbar__drawer-actions {
  display: none !important;
}

@media (max-width: 900px) {
  .navbar--menu-open .navbar__drawer-actions {
    display: flex !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   NAVBAR MEGAMENU — estilo Stripe (full-width 3-col)
   Aplicado APENAS no item .navbar__item--mega (Soluções)
   ══════════════════════════════════════════════════════════════════ */
.navbar__item--mega {
  position: static;
}

.navbar__item--mega .navbar__dropdown {
  left: 0;
  right: 0;
  /* overlap the topbar's bottom padding so the mouse can travel from
     the link down to the menu card without losing hover */
  top: calc(100% - 12px);
  transform: translateY(-6px);
  width: 100%;
  min-width: 0;
  /* invisible hover bridge — visible card is below this padding */
  padding-top: 18px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.navbar__item--mega:hover .navbar__dropdown {
  transform: translateY(0);
}

.navbar__megamenu-inner {
  /* Fills the full topbar width — no max-width restriction */
  width: 100%;
  margin: 0;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px 32px;
  box-sizing: border-box;
}

/* Liquid-glass variant — exact match to .topbar (.glass-pill + light-theme override) */
.navbar__megamenu-inner--glass {
  isolation: isolate;
  /* mesmo background do .topbar no light theme */
  background: rgb(255 255 255 / 30%);
  /* mesmo blur do .glass-pill */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  /* mesma borda do light theme */
  border-color: rgba(107, 66, 255, 0.12);
  /* shadow do light theme + reforço de profundidade do dropdown */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 8px 24px rgba(64, 15, 242, 0.08),
    0 18px 40px rgba(64, 15, 242, 0.10);
}

.navbar__megamenu-inner--glass .navbar__megamenu-col-title {
  color: var(--gray-700);
  border-bottom-color: rgba(64, 15, 242, 0.14);
}

.navbar__megamenu-inner--glass .navbar__megamenu-item:hover {
  background: rgba(255, 255, 255, 0.45);
}

.navbar__megamenu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}

.navbar__megamenu-grid--4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.navbar__megamenu-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--azul-paytime);
  background: rgba(64, 15, 242, 0.10);
}

.navbar__megamenu-col-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gray-700);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(64, 15, 242, 0.10);
}

.navbar__megamenu-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background .15s, transform .18s;
}

.navbar__megamenu-item+.navbar__megamenu-item {
  margin-top: 2px;
}

/* Banner "Nossos cases" no megamenu (coluna "Para o seu ecossistema") */
.navbar__mm-cases {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-height: 150px;
  margin-top: 18px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(64, 15, 242, 0.12);
  background: #0B1220;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, transform .2s ease;
}
.navbar__mm-cases:hover {
  box-shadow: 0 14px 34px rgba(11, 18, 32, 0.14);
  transform: translateY(-2px);
}
.navbar__mm-cases__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* Scrim azul escuro sobre a imagem, pra o texto branco ficar legível */
.navbar__mm-cases__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, 0.35) 42%, rgba(11, 18, 32, 0.82) 76%, rgba(11, 18, 32, 0.96) 100%);
}
.navbar__mm-cases__body {
  position: relative;
  z-index: 1;
  display: block;
  padding: 14px 16px 15px;
}
.navbar__mm-cases__title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.navbar__mm-cases__sub {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.74);
  margin-top: 3px;
  line-height: 1.45;
}
.navbar__mm-cases__cta {
  display: inline-block;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: #C9BCFF;
}

.navbar__megamenu-item:hover {
  background: rgba(64, 15, 242, 0.04);
}

.navbar__megamenu-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(64, 15, 242, 0.08);
  color: var(--azul-paytime);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .18s, color .18s;
}

.navbar__megamenu-item__icon svg {
  width: 16px;
  height: 16px;
}

.navbar__megamenu-item:hover .navbar__megamenu-item__icon {
  background: rgba(30, 144, 255, 0.18);
  color: #1e90ff;
}

.navbar__megamenu-item__body {
  min-width: 0;
}

.navbar__megamenu-item__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--azul-paytime);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: 2px;
  transition: color .18s;
}

.navbar__megamenu-item:hover .navbar__megamenu-item__title {
  color: #1e90ff;
}

.navbar__megamenu-item__desc {
  font-size: 12.5px;
  color: var(--gray-600);
  line-height: 1.4;
}

.navbar__megamenu-item--soon {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

.navbar__megamenu-item--soon .navbar__megamenu-item__title::after {
  content: " · em breve";
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-left: 4px;
}

/* Mobile — colapsa pra 1 coluna no drawer */
@media (max-width: 900px) {
  .navbar__item--mega .navbar__dropdown {
    padding-left: 0;
    padding-right: 0;
  }

  .navbar__megamenu-inner {
    padding: 12px 0;
    box-shadow: none;
    border: none;
    background: transparent;
  }

  .navbar__megamenu-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .navbar__megamenu-col-title {
    margin-bottom: 8px;
    padding-bottom: 6px;
    font-size: 10px;
  }

  /* Linhas compactas: ícone pequeno + título apenas (descrição escondida no mobile) */
  .navbar__megamenu-item {
    grid-template-columns: 22px 1fr !important;
    gap: 10px !important;
    padding: 6px 4px !important;
    margin: 0 !important;
    align-items: center !important;
  }

  .navbar__megamenu-item__icon {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
  }

  .navbar__megamenu-item__icon svg {
    width: 12px !important;
    height: 12px !important;
  }

  .navbar__megamenu-item__body {
    min-width: 0;
  }

  .navbar__megamenu-item__title {
    font-size: 13px !important;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 0;
  }

  /* Descrição escondida no mobile pra reduzir altura de cada linha */
  .navbar__megamenu-item__desc {
    display: none !important;
  }

  /* "em breve" badge inline */
  .navbar__megamenu-item--soon .navbar__megamenu-item__title::after {
    display: inline-block;
    margin-left: 4px;
    font-size: 8px !important;
  }

  /* ── Categorias do megamenu como acordeões colapsáveis no drawer ── */
  .navbar--menu-open .navbar__megamenu-grid {
    gap: 8px !important;
  }

  .navbar--menu-open .navbar__megamenu-grid > div {
    background: #fff;
    border: 1px solid rgba(64, 15, 242, 0.06);
    border-radius: 12px;
    overflow: hidden;
  }

  .navbar--menu-open .navbar__megamenu-col-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    padding: 13px 16px !important;
    border-bottom: none !important;
    color: #0e0d27;
    cursor: pointer;
    user-select: none;
  }

  /* Chevron da categoria */
  .navbar--menu-open .navbar__megamenu-col-title::after {
    content: "";
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    opacity: 0.55;
    transition: transform .25s;
  }

  .navbar--menu-open .navbar__megamenu-col--open .navbar__megamenu-col-title::after {
    transform: rotate(-135deg);
    margin-top: 3px;
  }

  /* Itens colapsados por padrão; expandem quando a categoria está aberta */
  .navbar--menu-open .navbar__megamenu-grid > div .navbar__megamenu-item {
    display: none !important;
  }

  .navbar--menu-open .navbar__megamenu-grid > div.navbar__megamenu-col--open .navbar__megamenu-item {
    display: grid !important;
    padding: 8px 16px !important;
    margin: 0 !important;
  }

  .navbar--menu-open .navbar__megamenu-grid > div.navbar__megamenu-col--open {
    padding-bottom: 6px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Spacing entre listas/checklists e CTAs subsequentes — fix global
   ══════════════════════════════════════════════════════════════════ */
.feature-checklist+.btn,
.feature-checklist+a.btn,
.feature-checklist+div,
ul+.btn,
ul+a.btn,
ol+.btn,
ol+a.btn {
  margin-top: var(--space-7, 32px) !important;
}

.feature-checklist+div .btn:first-child {
  margin-top: 0;
}


/* Step cards — fundo sólido sem gradiente */
.step-card.glass {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(64, 15, 242, 0.08);
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE FINAL PASS — auditoria sistêmica
   Aplicado em TODAS as páginas
   ══════════════════════════════════════════════════════════════════ */

/* ── Tablets / mobile médio ── */
@media (max-width: 900px) {

  /* Hero: centralizar tudo + reduzir headline */
  .hero-copy,
  .hero-inner .hero-copy,
  .lp-hero__copy {
    text-align: center !important;
  }

  .hero-copy .eyebrow,
  .hero-inner .hero-copy .eyebrow,
  .lp-hero__copy .lp-hero__eyebrow,
  .hero-copy .badge {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
  }

  /* Texto longo quebra em vez de estourar a tela */
  .hero-headline,
  .hero-sub,
  .lp-hero__headline,
  .lp-hero__sub,
  .nf-headline,
  .nf-sub,
  .rv-headline,
  .rv-sub,
  .ab-headline,
  .ab-sub,
  .as-headline,
  .as-sub,
  .cr-headline,
  .cr-sub,
  .sb-h1,
  .sb-lead,
  .hub-hero h1,
  .hub-hero p {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* Badges/eyebrows longos quebram em vez de estourar */
  .badge,
  .badge--blue,
  .eyebrow {
    white-space: normal !important;
    max-width: 100%;
    word-spacing: 0.1em;
  }

  /* Hero block: garantir que nada escapa */
  .hero-copy,
  .hero-inner,
  .lp-hero__copy {
    max-width: 100%;
    min-width: 0;
  }

  .hero-headline,
  .lp-hero__headline,
  .nf-headline,
  .rv-headline,
  .ab-headline,
  .as-headline,
  .cr-headline,
  .sb-h1,
  .hub-hero h1 {
    font-size: clamp(2rem, 7vw, 2.8rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
  }

  .hero-sub,
  .lp-hero__sub,
  .nf-sub,
  .rv-sub,
  .ab-sub,
  .as-sub,
  .cr-sub,
  .sb-lead {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Section heads */
  .section-title {
    font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
    line-height: 1.15 !important;
  }

  .section-desc {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* Padding mais compacto em sections */
  .section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* ── Mobile (≤768) ── */
@media (max-width: 768px) {

  /* Container final padding pra evitar tocar a borda */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Form fields — touch target mínimo iOS/Android */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important;
    /* evita zoom no iOS */
  }

  textarea {
    min-height: 88px !important;
  }

  /* Botões: garantir touch target ≥44px */
  .btn {
    min-height: 44px !important;
  }

  /* CTAs nos heros: stack vertical com margem lateral */
  .hero-cta-row,
  .hero-ctas,
  .hero-actions,
  .nf-ctas,
  .rv-hero__ctas,
  .ab-ctas,
  .as-ctas,
  .cr-ctas,
  .lp-hero__ctas {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    gap: 10px !important;
    padding-left: 10%;
    padding-right: 10%;
    box-sizing: border-box;
  }

  .hero-cta-row .btn,
  .hero-ctas .btn,
  .hero-actions .btn,
  .nf-ctas .btn,
  .rv-hero__ctas .btn,
  .ab-ctas .btn,
  .as-ctas .btn,
  .cr-ctas .btn,
  .lp-hero__ctas .btn {
    width: 100% !important;
    max-width: none !important;
    justify-content: center;
  }

  /* Footer: empilhar colunas */
  .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 20px !important;
    margin-bottom: 2rem;
  }

  /* Brand (1ª coluna) ocupa as 2 colunas e centraliza tudo */
  .footer__grid>div:first-child {
    grid-column: 1 / -1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .footer__grid>div:first-child p {
    max-width: 320px;
    margin: 0 auto;
  }

  /* Badges/Pills do brand centralizadas */
  .footer__grid>div:first-child>div[class*="badge"],
  .footer__grid>div:first-child .badges,
  .footer__grid>div:first-child .footer__badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Logo centralizado */
  .footer__logo {
    justify-content: center !important;
    margin-bottom: 0;
  }

  /* Submenus mais compactos no mobile */
  .footer__links {
    gap: 3px !important;
  }

  .footer__links li {
    line-height: 1.3;
  }

  .footer__links li a {
    font-size: 13px !important;
    /* alvo de toque confortável no mobile (~40px de altura) sem alongar demais o rodapé */
    padding: 10px 0;
    display: inline-block;
  }

  .footer__col-title {
    margin-bottom: 10px !important;
  }

  .footer__bottom {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center;
  }

  /* Stat strip — texto menor + 2 col */
  .stat-strip {
    padding: 18px 20px !important;
    gap: 14px !important;
  }

  .stat-strip-num {
    font-size: 1.4rem !important;
  }

  .stat-strip-label {
    font-size: 11.5px !important;
  }

  /* Stat card numbers menores */
  .lp-stat-num,
  .nf-step__day {
    font-size: 1.5rem !important;
  }

  /* Foto overlay (gradient + texto) — encolhe a fonte */
  [style*="position:absolute"][style*="background: linear-gradient(to right"]>div>div:last-child,
  [style*="position:absolute"][style*="rgba(3,2,30"]>div>div:last-child {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  /* Photo blocks com texto — padding interno menor */
  [style*="border-radius: 24px"][style*="max-height"] [style*="padding: 40px 48px"],
  [style*="border-radius: 24px"][style*="max-height"] [style*="padding:40px 48px"] {
    padding: 24px 22px !important;
  }

  [style*="border-radius: 24px"][style*="max-height: 400px"],
  [style*="border-radius: 24px"][style*="max-height:400px"] {
    max-height: 280px !important;
  }

  [style*="border-radius: 24px"][style*="max-height: 400px"] img,
  [style*="border-radius: 24px"][style*="max-height:400px"] img {
    height: 280px !important;
  }

  /* Cards — menos padding */
  .feature-card {
    padding: 22px !important;
  }

  /* CTA block (dark final) */
  .cta-block {
    padding: 36px 22px !important;
    border-radius: 22px !important;
  }

  .cta-block h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important;
    line-height: 1.2 !important;
  }

  .cta-block p {
    font-size: 14px !important;
  }

  .cta-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .cta-row .btn {
    width: 100% !important;
    max-width: 360px !important;
    margin-inline: auto !important;
  }

  /* Cross-link cards (auto-injected) */
  .xlink-section .xlink-grid {
    gap: 12px !important;
  }

  .xlink-card {
    padding: 18px !important;
  }

  /* Modal/popups: viewport seguro */
  body.body--menu-open {
    overflow: hidden !important;
  }

  /* Smooth scroll anchors */
  html {
    scroll-padding-top: 80px;
  }

  /* Sticky nav: garante topo na frente */
  nav.topbar {
    z-index: 1000 !important;
  }
}

/* ── Mobile pequeno (≤480) ── */
@media (max-width: 480px) {
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Hero ainda mais compacto */
  .hero,
  .lp-hero {
    padding-top: 90px !important;
    padding-bottom: 40px !important;
  }

  .hero-headline,
  .lp-hero__headline,
  .nf-headline,
  .rv-headline,
  .ab-headline,
  .as-headline,
  .cr-headline,
  .sb-h1,
  .hub-hero h1 {
    font-size: clamp(1.7rem, 8vw, 2.3rem) !important;
  }

  /* Section padding mínimo */
  .section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .section-head {
    margin-bottom: 24px !important;
  }

  /* Eyebrows menores */
  .eyebrow {
    font-size: 9px !important;
    padding: 4px 10px !important;
  }

  /* Stat strip 1 col */
  .stat-strip {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center;
    padding: 16px !important;
  }

  .stat-strip-item {
    padding: 8px 0 !important;
  }

  /* Cards padding ainda menor */
  .feature-card {
    padding: 18px !important;
  }

  .feature-icon,
  .feature-icon-light {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }

  .feature-icon svg,
  .feature-icon-light svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* h3 em cards */
  .feature-card h3,
  .feature-card .feature-title {
    font-size: 0.95rem !important;
  }

  .feature-card p,
  .feature-card .feature-desc {
    font-size: 13px !important;
  }

  /* Photo overlay text ainda menor */
  [style*="border-radius: 24px"][style*="max-height: 400px"],
  [style*="border-radius: 24px"][style*="max-height:400px"] {
    max-height: 220px !important;
  }

  [style*="border-radius: 24px"][style*="max-height: 400px"] img,
  [style*="border-radius: 24px"][style*="max-height:400px"] img {
    height: 220px !important;
  }

  /* Footer ainda mais compacto */
  .footer {
    padding: 36px 0 !important;
  }

  .footer__col-title {
    font-size: 12px !important;
  }

  .footer__link {
    font-size: 13px !important;
  }

  /* CTA block menor */
  .cta-block {
    padding: 28px 18px !important;
  }

  /* Removido — fullscreen drawer cuida disso na regra principal acima */
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — fixes adicionais
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Garantir respiro entre sections consecutivas — evita eyebrow colado no card de cima */
  .section+.section {
    padding-top: 36px !important;
  }

  .section+section[style*="padding"] {
    padding-top: 36px !important;
  }

  /* Section-head sempre com margem do topo */
  .section .section-head,
  section .section-head {
    padding-top: 8px;
  }

  /* Containers internos — respeitam padding do container pai (16px) */
  .section-inner,
  .api-showcase,
  .compare-actions,
  .features-bento {
    max-width: 100%;
    min-width: 0;
  }

  /* Cards/blocks que extrapolam — garante respeitar largura do container */
  .roi-wrap,
  .compare,
  .pain-quote,
  .code-window,
  .code-window-glass {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — fix de overflow em containers grid/flex
   Causa: grid/flex items têm min-width: auto por default, o que
   faz crescer até caber o max-content (code blocks, mono text,
   strings longas). Em telas pequenas isso estoura o container.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Grid containers comuns — colunas podem shrinkar abaixo do max-content */
  .hero-inner,
  .section-inner,
  .api-showcase,
  .features-bento,
  .audience-grid,
  .solutions-grid,
  .ft-split,
  .ab-tabs,
  .ab-endpoints,
  .ab-dx,
  .ab-steps,
  .nf-bundle,
  .rv-arc,
  .rv-personas,
  .rv-why,
  .lp-photo-row,
  .hub-grid,
  .as-stats,
  .as-feat,
  .as-migration,
  .cr-pillars,
  .cr-benefits,
  .cr-process,
  .sb-facts,
  .nf-related,
  .rv-related,
  .ab-related,
  .as-related,
  .features-grid,
  .audience-card-grid,
  .audience-split,
  .audience-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* TODOS os children desses containers — permitir shrinkagem */
  .hero-inner>*,
  .section-inner>*,
  .api-showcase>*,
  .features-bento>*,
  .audience-grid>*,
  .solutions-grid>*,
  .ft-split>*,
  .ab-endpoints>*,
  .ab-dx>*,
  .ab-steps>*,
  .nf-bundle>*,
  .rv-arc>*,
  .rv-personas>*,
  .rv-why>*,
  .lp-photo-row>*,
  .hub-grid>*,
  .as-stats>*,
  .as-feat>*,
  .as-migration>*,
  .cr-pillars>*,
  .cr-benefits>*,
  .cr-process>*,
  .features-grid>* {
    min-width: 0 !important;
    max-width: 100%;
  }

  /* Code blocks com mono text — scroll horizontal interno */
  .code-window,
  .code-window-glass,
  .ab-code {
    max-width: 100%;
    overflow-x: auto !important;
    box-sizing: border-box;
  }

  .code-window pre,
  .code-window-body pre,
  .ab-code__body pre {
    white-space: pre;
  }

  /* Tabelas com max-content forçando overflow */
  .compare-table,
  .gw-table {
    max-width: 100%;
    table-layout: auto;
  }

  /* Containers globais respeitam viewport */
  .container,
  main,
  body {
    max-width: 100vw;
    overflow-x: clip;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — centralizar conteúdo de seções 2-col que colapsam
   Mantém bullets/checklists com texto à esquerda (apenas o bloco
   inteiro fica centralizado).
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Containers 2-col colapsados pra 1-col — centralizar tudo */
  .section-inner-2col,
  .portal-section {
    grid-template-columns: minmax(0, 1fr) !important;
    text-align: center !important;
  }

  .section-inner-2col>*,
  .portal-section>* {
    align-items: center;
    min-width: 0;
  }

  /* Section-head sem .center modifier — centralizar no mobile */
  .section-head {
    text-align: center !important;
  }

  .section-head>* {
    margin-left: auto;
    margin-right: auto;
  }

  /* Listas com checks/bullets — manter texto à esquerda
     mas centralizar o bloco como um todo */
  .feature-checklist,
  .api-bullets,
  ul[style*="list-style: none"] {
    text-align: left !important;
    max-width: 460px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Listas inline complexas (com inline styles) — alinha block ao centro */
  .portal-section ul,
  .section-inner-2col ul {
    max-width: 460px;
    margin: 0 auto !important;
  }

  /* CTAs (div com inline style display:flex) — centralizar */
  .section-inner-2col>div>div[style*="display: flex"],
  .portal-section>div>div[style*="display: flex"] {
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   EYEBROWS — padronização de espaçamento (desktop + mobile)
   Todas as variantes recebem o mesmo respiro do topo e do título.
   ══════════════════════════════════════════════════════════════════ */
.eyebrow,
.audience-eyebrow,
.ab-eyebrow,
.as-eyebrow,
.cr-eyebrow,
.nf-eyebrow,
.roi-eyebrow,
.rv-eyebrow,
.sb-eyebrow,
.lp-hero__eyebrow,
.hub-hero__eyebrow {
  display: inline-flex !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

/* O título imediatamente após o eyebrow nunca cola */
.eyebrow+h1,
.eyebrow+h2,
.eyebrow+h3,
.audience-eyebrow+h1,
.audience-eyebrow+h2,
.ab-eyebrow+h1,
.as-eyebrow+h1,
.cr-eyebrow+h1,
.nf-eyebrow+h1,
.roi-eyebrow+h1,
.rv-eyebrow+h1,
.sb-eyebrow+h1,
.lp-hero__eyebrow+h1,
.hub-hero__eyebrow+h1 {
  margin-top: 0 !important;
}

@media (max-width: 768px) {

  .eyebrow,
  .audience-eyebrow,
  .ab-eyebrow,
  .as-eyebrow,
  .cr-eyebrow,
  .nf-eyebrow,
  .roi-eyebrow,
  .rv-eyebrow,
  .sb-eyebrow,
  .lp-hero__eyebrow,
  .hub-hero__eyebrow {
    margin-bottom: 14px !important;
  }

  /* marketplaces — audience-section layouts colapsam e centralizam */
  .audience-section .audience-split,
  .audience-section .audience-section-head {
    grid-template-columns: minmax(0, 1fr) !important;
    text-align: center !important;
  }

  .audience-section .audience-section-head,
  .audience-split>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
  }

  .audience-section .audience-eyebrow {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .audience-section .audience-section-title,
  .audience-section .audience-section-desc {
    text-align: center;
    max-width: 100%;
  }

  /* Lista do audience mantém texto à esquerda, bloco centralizado */
  .audience-list {
    max-width: 460px;
    margin: 0 auto !important;
    text-align: left;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — section-stats cards uniformes + reduzir gap entre seções
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Gap menor entre as colunas que colapsaram */
  .section-inner {
    gap: var(--space-5) !important;
  }

  /* Stats em 1 coluna, cards uniformes */
  .section-stats {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100%;
    max-width: 100%;
  }

  .section-stat {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-align: center;
    padding: 18px 20px !important;
  }

  .section-stat__value {
    font-size: 1.6rem !important;
  }

  .section-stat__label {
    font-size: 0.78rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — hero content alignment + eyebrow tipografia
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hero copy / content em coluna flexível — alinha tudo verticalmente */
  .hero-content,
  .hero-copy,
  .hero-inner .hero-copy,
  .lp-hero__copy,
  .nf-hero__copy,
  .rv-hero__copy,
  .ab-hero__copy,
  .as-hero__copy,
  .cr-hero__copy,
  .sb-hero__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    width: 100%;
  }

  /* Filhos diretos do hero content respeitam alinhamento centralizado */
  .hero-content>*,
  .hero-copy>* {
    text-align: center;
    max-width: 100%;
  }

  /* Eyebrow no mobile: menor + sem word-spacing exagerado */
  .eyebrow,
  .audience-eyebrow,
  .ab-eyebrow,
  .as-eyebrow,
  .cr-eyebrow,
  .nf-eyebrow,
  .rv-eyebrow,
  .roi-eyebrow,
  .sb-eyebrow,
  .lp-hero__eyebrow,
  .hub-hero__eyebrow,
  .badge.badge--blue {
    font-size: 8px !important;
    word-spacing: 0 !important;
    letter-spacing: .14em !important;
  }
}

/* ── Stat-strip liquidglass (arredondado + visível, igual ao backup) ── */
[data-navbar-theme="light"] .stat-strip.glass-strong,
[data-navbar-theme="light"] .stat-strip.glass {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.62) 42%, rgba(217, 205, 253, 0.50) 100%);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 22px 60px rgba(64, 15, 242, 0.10);
  overflow: hidden;
}
/* ============================================================================
   UX — LARGURA DE CTAs NO MOBILE (regra unificada, autoritativa)
   Benchmark: em telas ≤768px todo botão de CTA vira full-width com um
   cap único (380px), centralizado e com alvo de toque ≥48px. Os containers
   de CTA empilham na vertical. Normaliza as regras fragmentadas anteriores
   (o hero estava sem cap → largo demais; os demais capavam em 320/360).
   Navbar (.navbar__cta) e drawer (.drawer-cta) não usam .btn → intactos.
   ============================================================================ */
@media (max-width: 768px) {
  .hero-cta-row, .hero-ctas, .hero-actions, .hero__ctas, .lp-hero__ctas,
  .cta-row, .ctas-row, .section-cta, .cta-block .cta-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--space-3, 12px) !important;
  }
  .hero-cta-row .btn, .hero-ctas .btn, .hero-actions .btn, .hero__ctas .btn, .lp-hero__ctas .btn,
  .cta-row .btn, .ctas-row .btn, .section-cta .btn, .cta-block .btn,
  .btn {
    width: 100% !important;
    max-width: 380px !important;
    margin-inline: auto !important;
    justify-content: center !important;
    min-height: 48px !important;
    white-space: normal !important;
  }
}

/* ============================================================================
   .cards-center — grade de cards centralizada (orphan-safe)
   ----------------------------------------------------------------------------
   Converte um container de cards para flexbox (wrap + justify-content:center),
   de modo que, quando a última linha fica incompleta (card "órfão"), o(s)
   card(s) restante(s) fiquem CENTRALIZADOS em vez de encostados à esquerda.

   Uso: adicionar a classe `cards-center` ao container. O `display:grid` inline
   é sobreposto via !important (o `grid-template-columns` inline vira inerte).
   Ajuste por container com variáveis inline:
     --card-basis : largura-alvo mínima antes de quebrar coluna (default 300px)
     --card-max   : largura máx. de cada card = largura da coluna no desktop.
                    Mantém o card órfão do MESMO tamanho dos irmãos ao centralizar.
   Ex.: <div class="pt-cases cards-center" style="--card-basis:300px;--card-max:368px">
   ============================================================================ */
.cards-center {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
.cards-center > * {
  flex: 1 1 var(--card-basis, 300px);
  max-width: var(--card-max, 100%);
  min-width: 0;
}

/* ============================================================================
   .destaque-glow — realce do card "Sua empresa" no componente de Split
   (borda em gradiente via mask + glow suave + shimmer). Aplicado ao card
   destacado dentro do visual de split (home via frag-hero-split, split.html, etc.)
   ============================================================================ */
.destaque-glow {
  box-shadow: 0 0 24px 2px rgba(64, 15, 242, .32), 0 14px 34px rgba(64, 15, 242, .20) !important;
}
.destaque-glow::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  padding: 2px;
  background: linear-gradient(125deg, #9884FF 0%, #400FF2 45%, #C9BCFF 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  animation: destaque-shimmer 3.2s ease-in-out infinite;
}
@keyframes destaque-shimmer { 0%, 100% { opacity: .75 } 50% { opacity: 1 } }

/* ============================================================================
   .case-highlight — bloco padronizado de case (logo + 2 stats + CTA), com borda
   Usado em api/no-code/hibrido para uniformizar os cases (Takeat/Yelly/Fortlev).
   ============================================================================ */
.case-highlight {
  max-width: 660px;
  margin: var(--sp-6, 24px) auto 0;
  padding: var(--sp-6, 32px);
  border: 1px solid rgba(11, 18, 32, 0.09);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 44px rgba(11, 18, 32, 0.06);
  text-align: center;
}
.case-highlight__logo {
  width: 54px; height: 54px; border-radius: 14px;
  object-fit: cover; display: block; margin: 0 auto var(--sp-5, 24px);
  background: #fff; border: 1px solid rgba(11, 18, 32, 0.06);
  box-shadow: 0 10px 26px rgba(11, 18, 32, 0.08);
}
.case-highlight__stats {
  display: flex; justify-content: center; align-items: flex-start;
  gap: var(--sp-6, 32px); margin-bottom: var(--sp-5, 24px); flex-wrap: wrap;
}
.case-highlight__stat { flex: 1 1 0; min-width: 150px; }
.case-highlight__num {
  font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(135deg, var(--azul-paytime, #400FF2), var(--lilas, #9884FF));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.case-highlight__label { font-size: 13px; color: var(--ink-soft, #5A6577); margin-top: 8px; line-height: 1.4; }
@media (max-width: 520px) {
  .case-highlight__stats { gap: var(--sp-4, 16px); }
  .case-highlight__stat { min-width: 45%; }
}

/* Feature-cards: botão/CTA sempre alinhado ao rodapé do card (cards de altura
   igual → CTAs alinhados mesmo com descrições de tamanhos diferentes). */
.feature-card { display: flex; flex-direction: column; }
.feature-card > .btn,
.feature-card > a.btn { margin-top: auto; }

/* .check-list--cross — variante de "erro": X vermelho-claro no lugar do check
   (ex.: lista "Construindo do zero" = o jeito difícil/errado). */
.check-list--cross li::before {
  background: rgba(239, 68, 68, 0.09);
  border-color: rgba(239, 68, 68, 0.26);
}
.check-list--cross li::after {
  background-color: #EF4444;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* .case-logo — logo da marca no hero dos cases (compartilhado/genérico).
   Páginas de case só sobrescrevem quando a logo precisa de fundo branco
   (ex.: Fortlev usa object-fit:contain; background:#fff). */
.case-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* .cmp-ic — chip circular de ícone (X/check) no comparativo da home.
   Mesmo estilo dos bullets do .check-list / .check-list--cross (círculo). */
.cmp-ic {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.cmp-ic--x {
  background: rgba(239, 68, 68, 0.09);
  border: 1px solid rgba(239, 68, 68, 0.26);
  color: #EF4444;
}
.cmp-ic--ok {
  background: rgba(64, 15, 242, 0.08);
  border: 1px solid rgba(64, 15, 242, 0.18);
  color: var(--primary-500);
}

/* ══════════════════════════════════════════════════════════════════════
   .case-spotlight — destaque de case em 2 colunas (copy + foto).
   Cor da marca (CTA + <em> do título) via .cs--red/.cs--blue/.cs--amber.
   Fundo: normal da página (o wash colorido fica só nos heros dos cases).
   ══════════════════════════════════════════════════════════════════════ */
.case-spotlight { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-8, 40px); align-items: center; }
.case-spotlight__logo-row { display: flex; align-items: center; gap: var(--sp-4, 16px); margin-bottom: var(--sp-5, 24px); }
.case-spotlight__logo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
.case-spotlight__name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.case-spotlight h2 { font-size: clamp(30px, 3.0vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: var(--ink); margin: 0 0 var(--sp-4, 16px); }
.case-spotlight h2 em { font-style: normal; background: var(--cs-accent, linear-gradient(135deg, #400FF2, #5a28ff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.case-spotlight__sub { font-size: 16px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 var(--sp-5, 24px); max-width: 480px; }
.case-spotlight__cta { background: var(--cs-accent, linear-gradient(135deg, #400FF2, #5a28ff)); border-color: transparent; color: #fff; transition: filter .18s ease, transform .18s ease, box-shadow .18s ease; }
.case-spotlight__cta:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 10px 26px var(--cs-shadow, rgba(64, 15, 242, 0.28)); }
.case-spotlight__photo { border-radius: 24px; overflow: hidden; box-shadow: 0 18px 48px var(--cs-shadow, rgba(64, 15, 242, 0.22)); }
.case-spotlight__photo img { width: 100%; height: 400px; object-fit: cover; object-position: center; display: block; }

.cs--red { --cs-accent: linear-gradient(135deg, #C0392B, #E74C3C); --cs-shadow: rgba(192, 57, 43, 0.28); }
.cs--blue { --cs-accent: linear-gradient(135deg, #1D4ED8, #3B82F6); --cs-shadow: rgba(29, 78, 216, 0.28); }
.cs--amber { --cs-accent: linear-gradient(135deg, #fbb900, #df9a20); --cs-shadow: rgba(168, 93, 0, 0.28); }
.cs--solar { --cs-accent: linear-gradient(135deg, #FF7614, #E85410); --cs-shadow: rgba(242, 118, 32, 0.28); } /* laranja "SOLAR" da logo Fortlev */

@media (max-width: 900px) {
  .case-spotlight { grid-template-columns: 1fr; gap: var(--sp-6, 32px); }
  .case-spotlight__sub { max-width: none; }
  .case-spotlight__photo img { height: 300px; }
}

/* ══════════════════════════════════════════════════════════════════════
   .tap-cta-full — CTA full-bleed com imagem de fundo + scrim escuro.
   Componente compartilhado (Tap on Phone, Fintechs, ...). A imagem de
   fundo é definida por instância via inline style na .tap-cta-full.
   ══════════════════════════════════════════════════════════════════════ */
.tap-cta-full {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 440px;
  border-radius: var(--radius-xl, 24px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 80px rgba(11, 18, 32, 0.22);
  background: #0B1220 center / cover no-repeat;
}
.tap-cta-full__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 18, 32, 0.94) 0%, rgba(11, 18, 32, 0.80) 44%, rgba(11, 18, 32, 0.30) 78%, rgba(11, 18, 32, 0.10) 100%);
  pointer-events: none;
}
.tap-cta-full__body {
  position: relative;
  z-index: 1;
  padding: clamp(32px, 5vw, 64px);
  max-width: 660px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4, 16px);
  color: #fff;
}
.tap-cta-full__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C9BCFF;
}
.tap-cta-full__body h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.tap-cta-full__body h2 em { color: #C9BCFF; font-style: normal; }
.tap-cta-full__body p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
}
@media (max-width: 720px) {
  .tap-cta-full { min-height: 520px; align-items: flex-end; background-position: 60% center; }
  .tap-cta-full__scrim {
    background: linear-gradient(180deg, rgba(11, 18, 32, 0.25) 0%, rgba(11, 18, 32, 0.82) 52%, rgba(11, 18, 32, 0.96) 100%);
  }
  .tap-cta-full__body { max-width: none; }
}