/* ==========================================================================
   ARKBUNKER & ARKGATEWAY — Design System 4.0
   Light warm theme, Black + Yellow brand identity
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand: #FFD21F;
  --brand-hover: #FFE566;
  --brand-dim: #C69A00;
  --brand-bg: rgba(255, 210, 31, 0.15);
  --brand-border: rgba(255, 210, 31, 0.4);

  /* Surfaces (Linear Midnight Precision Instrument Palette) */
  --bg-page: #08090a;
  --bg-section-alt: #0f1011;
  --bg-card: #0f1011;
  --bg-card-hover: #161718;
  --bg-dark: #08090a;
  --bg-dark-card: #0f1011;
  --bg-dark-elevated: #161718;

  /* Text */
  --text-heading: #ffffff;
  --text-body: #d0d6e0;
  --text-muted: #8a8f98;
  --text-inverse: #FAFAF8;
  --on-brand: #111113;

  /* Borders (Hairline 0.5px / 1px) */
  --border-light: #23252a;
  --border-medium: #383b3f;

  /* Semantic */
  --success: #27a644;
  --success-bg: rgba(39, 166, 68, 0.15);
  --error: #eb5757;
  --info: #02b8cc;

  /* Typography */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 64px;
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.15s var(--ease);
  --transition-normal: 0.25s var(--ease);
}

html[data-theme="light"] {
  --bg-page: #FAFAF8;
  --bg-section-alt: #F1F1ED;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FFFFFF;
  --bg-dark: #18181B;
  --bg-dark-card: #27272A;
  --bg-dark-elevated: #2D2D30;
  --text-heading: #111113;
  --text-body: #27272A;
  --text-muted: #4B5563;
  --text-inverse: #FAFAF8;
  --on-brand: #111113;
  --border-light: #D4D4D8;
  --border-medium: #9CA3AF;
  --success-bg: rgba(22, 163, 74, 0.08);
}

/* Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--text-heading);
  cursor: pointer;
  transition: var(--transition-fast);
  margin-right: 8px;
}

.theme-toggle-btn:hover {
  background: var(--brand-bg);
  border-color: var(--brand);
  color: var(--brand);
}

html[data-theme="dark"] .icon-theme-sun { display: block; }
html[data-theme="dark"] .icon-theme-moon { display: none; }
html[data-theme="light"] .icon-theme-sun { display: none; }
html[data-theme="light"] .icon-theme-moon { display: block; }

/* --------------------------------------------------------------------------
   2. Reset & Baseline
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  top: 12px;
  left: 16px;
  z-index: 200;
  background: #111113;
  color: #FAFAF8;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--brand);
}
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 16px);
  background: var(--bg-page);
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

body {
  min-width: 320px;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  font-weight: 700;
  line-height: 1.2;
}

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

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

ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

.wrap {
  width: min(var(--max-width), calc(100% - clamp(24px, 4vw, 48px)));
  margin-inline: auto;
}

.text-center { text-align: center; }
.text-brand { color: var(--brand) !important; }
.text-success { color: var(--success) !important; }
.text-muted { color: var(--text-muted) !important; }

/* SVG Icons */
.icon, .icon-btn, .icon-bento, .icon-inline, .icon-tab, .icon-core, .icon-m, .icon-f, .icon-s {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-inline {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
}

.mini-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: -2px;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
}

/* --------------------------------------------------------------------------
   4. Navbar
   -------------------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 100;
  background: var(--bg-dark);
  border-bottom: 1px solid #27272A;
  transition: var(--transition-normal);
}

.navbar.scrolled {
  background: var(--bg-dark);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

.navbar-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.navbar-brand img {
  height: 32px;
  width: auto;
}

.brand-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  background: var(--brand-bg);
  color: var(--brand-dim);
  border: 1px solid var(--brand-border);
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.navbar-links a {
  font-size: 13px;
  font-weight: 500;
  color: #A1A1AA;
  transition: color var(--transition-fast);
  position: relative;
}

.navbar-links a:hover { color: #E4E4E7; }

.navbar-links a.active {
  color: #E4E4E7;
}

.navbar-links a.active::after { width: 100%; }

.navbar-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--brand);
  transition: width var(--transition-fast);
}

.navbar-links a:hover::after { width: 100%; }

/* Nav dropdown "Mais" — desktop hover, mobile sempre expandido */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #A1A1AA;
  padding: 0;
  transition: color var(--transition-fast);
}

.nav-dropdown-toggle:hover { color: #E4E4E7; }

.nav-caret {
  transition: transform var(--transition-fast);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  background: #27272A;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 8px;
  display: none;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  z-index: 130;
}

.nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.nav-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.nav-dropdown-menu a::after { display: none; }

.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}

.nav-dropdown:focus-within .nav-caret,
.nav-dropdown.open .nav-caret {
  transform: rotate(180deg);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-ghost-nav {
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.btn-ghost-nav:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--brand);
}

.btn-primary-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
  background: var(--brand);
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.btn-primary-nav:hover {
  background: var(--brand-hover);
}

.icon-nav { width: 13px; height: 13px; }

.navbar-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: 120;
}

.navbar-toggle span {
  width: 22px;
  height: 2px;
  background: #E4E4E7;
  border-radius: 2px;
  transition: var(--transition-fast);
}

.navbar-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggle.active span:nth-child(2) { opacity: 0; }
.navbar-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
.hero-section {
  padding: clamp(20px, 3vw, 36px) 0 clamp(50px, 7vw, 90px);
  background: var(--bg-page);
  position: relative;
  overflow: hidden;
}

.hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.hero-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 12px;
  margin-bottom: 20px;
}

.status-indicator.live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse 2s infinite;
}

.pill-text {
  color: var(--text-body);
  font-weight: 500;
}

.pill-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #713F12;
  background: #FEF08A;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #FDE047;
}

.hero-headline {
  font-size: clamp(34px, 4.4vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 16px;
  color: var(--text-heading);
}

.hero-headline .highlight {
  color: #854D0E;
}

.hero-subtext {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--text-body);
  line-height: 1.7;
  max-width: min(500px, 90%);
  margin-bottom: clamp(16px, 2.5vw, 28px);
}

.hero-subtext strong {
  color: var(--text-heading);
  font-weight: 700;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 12px);
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  color: var(--text-heading);
  background: var(--brand);
  padding: clamp(10px, 1.5vw, 12px) clamp(16px, 2.5vw, 24px);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.btn-hero-primary:hover {
  background: var(--brand-hover);
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 600;
  color: var(--text-heading);
  border: 1.5px solid var(--border-medium);
  padding: clamp(9px, 1.4vw, 11px) clamp(14px, 2.2vw, 22px);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  transition: var(--transition-fast);
}

.btn-hero-secondary:hover {
  border-color: var(--text-heading);
  background: #FAFAFA;
}

.icon-btn { width: 16px; height: 16px; }

/* Trust Signals Bar — below hero */
.trust-signals-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-top: clamp(16px, 2vw, 24px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.trust-signals-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(12px, 1.5vw, 16px) clamp(16px, 2vw, 24px);
  flex-wrap: wrap;
}

.signal-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12px, 1.2vw, 14px);
  color: var(--text-body);
  font-weight: 600;
}

.signal-icon {
  width: 18px;
  height: 18px;
  color: #16A34A;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

/* Hero Right: Screenshot */
.hero-right {
  position: relative;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}

.hero-screenshot {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
  transform-origin: center center;
}

.hero-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #FAFAF8;
  background: rgba(24, 24, 27, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  padding: 8px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  animation: hero-float 5s ease-in-out infinite;
}

.hero-chip svg {
  width: 14px;
  height: 14px;
  stroke: var(--brand);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0;
}

.hero-chip-split {
  top: 14px;
  left: 14px;
}

.hero-chip-cashback {
  bottom: 14px;
  right: 14px;
  animation-delay: -2.5s;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-chip {
    animation: none;
  }
}

.hero-screenshot img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   6. SECTION HEADERS (reusable)
   -------------------------------------------------------------------------- */
.section-head {
  max-width: min(640px, 90%);
  margin: 0 auto clamp(32px, 4vw, 56px);
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand-dim);
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.section-title {
  font-size: clamp(26px, 3.5vw, 40px);
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   7. FEATURE CARDS (replaces Bento Grid)
   -------------------------------------------------------------------------- */
.features-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--bg-page);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(12px, 2vw, 20px);
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 2.5vw, 28px) clamp(16px, 2vw, 24px);
  transition: var(--transition-normal);
}

.feature-card:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--brand);
  border: 1px solid #E5BE15;
  color: #111113;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(255, 210, 31, 0.35);
}

.feature-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.feature-category {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #854D0E;
  margin-bottom: 6px;
}

.feature-title {
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--text-heading);
}

.feature-desc {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 16px;
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
  transition: var(--transition-fast);
}

.feature-link:hover { color: var(--brand-dim); }
.feature-link svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   8. SCREENSHOTS GALLERY (NEW)
   -------------------------------------------------------------------------- */
.gallery-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--bg-section-alt);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(12px, 2vw, 20px);
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  transition: var(--transition-normal);
}

.gallery-item:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

.gallery-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px;
  background: linear-gradient(transparent, rgba(24, 24, 27, 0.92));
  color: white;
  font-size: 13px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   9. SOLUTIONS TABS
   -------------------------------------------------------------------------- */
.solutions-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--bg-page);
  border-top: 1px solid var(--border-light);
}

.solution-tabs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.8vw, 8px);
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.sol-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(8px, 1.2vw, 10px) clamp(12px, 1.8vw, 18px);
  border-radius: var(--radius-sm);
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 600;
  color: #3F3F46;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: var(--transition-fast);
}

.sol-tab-btn:hover {
  color: var(--text-heading);
  border-color: var(--border-medium);
  background: #FAFAFA;
}

.sol-tab-btn.active {
  color: var(--text-heading);
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(255, 210, 31, 0.25);
}

.icon-tab { width: 15px; height: 15px; stroke-width: 2.2; }

.solution-display-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.sol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(20px, 3.5vw, 40px);
  align-items: center;
}

.sol-badge-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.sol-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #713F12;
  background: #FEF08A;
  border: 1px solid #FDE047;
  padding: 3px 8px;
  border-radius: 3px;
}

.sol-stat {
  font-size: 12px;
  color: #15803D;
  font-weight: 700;
}

.sol-headline {
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  line-height: 1.25;
  color: var(--text-heading);
}

.sol-description {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 20px;
}

.sol-description strong { color: var(--text-heading); font-weight: 700; }

.sol-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-body);
  font-weight: 500;
}

.check-item svg {
  width: 16px;
  height: 16px;
  color: #16A34A;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.btn-sol-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
  background: var(--brand);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.btn-sol-cta:hover { background: var(--brand-hover); }

/* Mockup Window */
.mockup-window {
  background: var(--bg-dark);
  border: 1px solid #3F3F46;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.mockup-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  background: #27272A;
  border-bottom: 1px solid #3F3F46;
}

.m-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.m-title {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #71717A;
}

.mockup-content { padding: 18px; }

.rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.r-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-inverse);
}

.r-status {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--success);
  background: rgba(22, 163, 74, 0.15);
  padding: 2px 7px;
  border-radius: 3px;
}

.rule-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.rb-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xs);
  font-size: 12px;
  color: #D4D4D8;
}

.rb-item strong {
  font-family: var(--font-mono);
  color: var(--brand);
}

.rule-cashback-callout {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--brand-bg);
  border: 1px dashed var(--brand-border);
  border-radius: var(--radius-xs);
  font-size: 11px;
  color: var(--text-inverse);
}

/* --------------------------------------------------------------------------
   10. PIPELINE (How it works) — Horizontal Timeline
   -------------------------------------------------------------------------- */
.pipeline-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--bg-section-alt);
}

.pipeline-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 clamp(8px, 1.5vw, 16px);
  position: relative;
}

.pipeline-step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(12px, 1.5vw, 20px);
}

.pipeline-step-number {
  font-family: var(--font-mono);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 800;
  color: #A1A1AA;
  width: clamp(40px, 4vw, 56px);
  height: clamp(40px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  position: relative;
  z-index: 2;
  transition: var(--transition-normal);
}

.pipeline-step:hover .pipeline-step-number,
.pipeline-step.highlight .pipeline-step-number {
  color: #854D0E;
  border-color: var(--brand);
  background: #FFFEF5;
}

.pipeline-step-line {
  width: 2px;
  height: clamp(16px, 2vw, 24px);
  background: var(--border-light);
}

.pipeline-step-icon {
  width: clamp(36px, 3.5vw, 44px);
  height: clamp(36px, 3.5vw, 44px);
  border-radius: var(--radius-sm);
  background: var(--brand);
  border: 1px solid #E5BE15;
  color: #111113;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(8px, 1vw, 12px);
  box-shadow: 0 2px 6px rgba(255, 210, 31, 0.3);
}

.pipeline-step-icon svg {
  width: clamp(16px, 1.5vw, 20px);
  height: clamp(16px, 1.5vw, 20px);
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.pipeline-step-title {
  font-size: clamp(13px, 1.3vw, 15px);
  margin-bottom: clamp(4px, 0.5vw, 8px);
  color: var(--text-heading);
}

.pipeline-step-desc {
  font-size: clamp(12px, 1.1vw, 13px);
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: clamp(6px, 0.8vw, 10px);
}

.pipeline-step-latency {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-dim);
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-xs);
  padding: 3px 8px;
}

.pipeline-step.highlight .pipeline-step-number {
  background: var(--brand);
  border-color: var(--brand);
  color: #111113;
}
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(255, 210, 31, 0.3);
}

.step-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; }

.step-title {
  font-size: 14px;
  margin-bottom: 8px;
}

.step-desc {
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.65;
  margin-bottom: 12px;
}

.step-latency {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--success);
  background: var(--success-bg);
  padding: 2px 8px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   11. INTEGRATIONS
   -------------------------------------------------------------------------- */
.integracoes-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--bg-page);
}

.integracoes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(10px, 1.5vw, 16px);
}

.integracao-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: clamp(14px, 2vw, 20px);
  transition: var(--transition-normal);
}

.integracao-card:hover {
  border-color: var(--brand-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.integracao-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 4px;
}

.integracao-category {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding: 2px 6px;
  background: var(--bg-section-alt);
  border-radius: 3px;
}

.integracao-desc {
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   12. NATIVE FEATURES (Area de Membros)
   -------------------------------------------------------------------------- */
.native-features-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--bg-section-alt);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.sol-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.sol-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.5;
}

.sol-list li::before {
  content: '\2713';
  color: var(--brand-dim);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.sol-text {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 20px;
}

.sol-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-dim);
  background: var(--brand-bg);
  padding: 3px 10px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 14px;
}

/* Member mock card */
.sol-card-stack {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.mock-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.mock-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.mock-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mock-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
}

.mock-role { font-size: 11px; color: var(--text-muted); }

.mock-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
}

.mock-badge.green {
  color: var(--success);
  background: var(--success-bg);
}

.mock-progress {
  height: 5px;
  background: var(--border-light);
  border-radius: 3px;
  margin-bottom: 16px;
  overflow: hidden;
}

.mock-bar {
  height: 100%;
  background: var(--brand);
  border-radius: 3px;
}

.mock-courses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.mock-course {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--bg-section-alt);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
}

.mock-course.done {
  color: var(--success);
  border-color: rgba(22, 163, 74, 0.25);
  background: var(--success-bg);
}

.mock-course.active {
  color: var(--brand-dim);
  border-color: var(--brand-border);
  background: var(--brand-bg);
}

.mock-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border-light);
  padding-top: 12px;
}

.mock-stat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   13. CALCULATOR / SIMULATOR
   -------------------------------------------------------------------------- */
.calculator-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--bg-page);
}

.calc-title {
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.calc-header {
  max-width: min(640px, 90%);
  margin: 0 auto clamp(32px, 4vw, 48px);
}

.calc-desc {
  font-size: clamp(13px, 1.3vw, 14px);
  color: var(--text-muted);
  margin-bottom: 0;
}

.calc-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
  max-width: 1020px;
  margin-inline: auto;
}

/* Simulador ocupa a largura total: campos à esquerda, resultado à direita */
.sim-body {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.calc-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.sim-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-dim);
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  margin-bottom: 14px;
}

.sim-title {
  font-size: 20px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.sim-lead {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.sim-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: clamp(10px, 1.5vw, 14px);
}

.sim-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.sim-field-full { grid-column: 1 / -1; }

.sim-field input,
.sim-field select {
  width: 100%;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text-heading);
  font-family: var(--font-mono);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}

.sim-field input:focus,
.sim-field select:focus {
  border-color: var(--brand);
}

.sim-field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2371717A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.sim-field-error {
  font-size: 11px;
  color: var(--error);
  margin-top: 3px;
  min-height: 14px;
}

.sim-method-toggle {
  display: flex;
  gap: 8px;
}

.sim-method-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sim-method-btn:hover {
  border-color: var(--border-medium);
  color: var(--text-heading);
}

.sim-method-btn.active {
  border-color: var(--brand);
  background: var(--brand-bg);
  color: var(--brand-dim);
}

.sim-method-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sim-method-icon svg { width: 100%; height: 100%; }

.sim-method-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
}

.sim-method-copy small {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
}

.sim-switch-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.sim-switch-copy span {
  display: block;
  font-size: 13px;
  color: var(--text-heading);
  font-weight: 600;
}

.sim-switch-copy small { font-size: 11px; color: var(--text-muted); }

.sim-switch {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}

.sim-switch input { opacity: 0; width: 0; height: 0; }

.sim-slider {
  position: absolute;
  inset: 0;
  background: var(--border-medium);
  border-radius: 999px;
  transition: background 0.2s ease;
}

.sim-slider::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.sim-switch input:checked + .sim-slider { background: var(--brand); }
.sim-switch input:checked + .sim-slider::before { transform: translateX(18px); }

.sim-helper {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Results */
.sim-results {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}

.sim-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: clamp(8px, 1.2vw, 12px);
  margin-bottom: clamp(10px, 1.5vw, 16px);
}

.sim-kpi {
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px;
}

.sim-kpi.primary { border-color: var(--brand-border); }

.sim-kpi small {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.sim-kpi strong {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 800;
  color: var(--text-heading);
}

.sim-kpi.primary strong { color: var(--brand-dim); }

.sim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sim-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  padding: 7px 12px 7px 0;
  white-space: nowrap;
}

.sim-table td {
  font-family: var(--font-mono);
  color: var(--text-heading);
  padding: 7px 0;
}

.sim-table tr + tr { border-top: 1px solid var(--border-light); }

.sim-disclaimer {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 10px;
}

/* Efficiency Panel */
.eficiencia-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ef-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 4px;
}

.ef-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.ef-display {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  color: var(--brand-dim);
}

.custom-range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: var(--border-light);
  outline: none;
  margin-bottom: 6px;
}

.custom-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.slider-scale-points {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.ef-metrics {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ef-metric {
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  gap: 10px;
}

.ef-metric-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-xs);
  background: var(--brand);
  border: 1px solid #E5BE15;
  color: #111113;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ef-metric-icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.icon-m { width: 15px; height: 15px; }

.ef-metric-data {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ef-m-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}

.ef-m-number {
  display: block;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
}

.ef-m-sub {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
}

.btn-ef-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
  background: var(--brand);
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.btn-ef-cta:hover { background: var(--brand-hover); }

/* --------------------------------------------------------------------------
   14. SECURITY / INSTITUTIONAL — Inline layout
   -------------------------------------------------------------------------- */
.security-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--bg-section-alt);
}

.security-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(20px, 3vw, 32px);
}

.security-pillar-item {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.5vw, 16px);
  padding: clamp(16px, 2vw, 20px);
  background: transparent;
  border-radius: var(--radius-md);
  transition: var(--transition-normal);
}

.security-pillar-item:hover {
  background: var(--bg-card);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.pillar-icon {
  width: clamp(40px, 4vw, 48px);
  height: clamp(40px, 4vw, 48px);
  border-radius: var(--radius-sm);
  background: var(--brand);
  border: 1px solid #E5BE15;
  color: #111113;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(255, 210, 31, 0.3);
}

.pillar-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; }

.pillar-text h4 {
  font-size: clamp(13px, 1.3vw, 15px);
  margin-bottom: 4px;
  color: var(--text-heading);
}

.pillar-text p {
  font-size: clamp(12px, 1.1vw, 13px);
  color: var(--text-body);
  line-height: 1.6;
}

.partners-matrix-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.hub-section .partners-matrix-card {
  margin-top: clamp(32px, 4vw, 48px);
  width: 100%;
}

.matrix-title {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.bank-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-body);
  transition: var(--transition-fast);
}

.bank-item:hover {
  border-color: var(--brand-border);
  color: var(--brand-dim);
}

.bank-item.special { border-style: dashed; color: var(--text-muted); }

.b-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--bg-page);
}

.faq-container-v2 {
  max-width: min(720px, 90%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 10px);
}

.faq-card-v2 {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.faq-card-v2.active { border-color: var(--brand-border); }

.faq-header-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  text-align: left;
  gap: 14px;
}

.faq-q-text {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading);
  transition: color var(--transition-fast);
}

.faq-card-v2:hover .faq-q-text,
.faq-card-v2.active .faq-q-text {
  color: var(--brand-dim);
}

.faq-indicator {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-section-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #FFFFFF;
  transition: transform 0.25s var(--ease), color var(--transition-fast), border-color var(--transition-fast);
}

.faq-card-v2.active .faq-indicator {
  transform: rotate(180deg);
  color: #FFFFFF;
  background: var(--brand-bg);
}

.icon-chevron {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-body-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease), padding 0.3s ease;
  padding: 0 20px;
}

.faq-card-v2.active .faq-body-content {
  max-height: 500px;
  padding: 0 20px 20px;
}

.faq-body-content p {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.7;
}

.faq-body-content p + p { margin-top: 12px; }
.faq-body-content strong { color: var(--text-heading); }

/* --------------------------------------------------------------------------
   17. FINAL CTA
   -------------------------------------------------------------------------- */
.final-cta-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: linear-gradient(135deg, #111113 0%, #1A1A1D 100%);
}

.cta-master-card {
  border-radius: var(--radius-xl);
  padding: clamp(48px, 6vw, 72px) clamp(24px, 4vw, 56px);
  text-align: center;
  background: linear-gradient(135deg, #111113 0%, #1A1A1D 100%);
  border: 1px solid rgba(255, 210, 31, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 210, 31, 0.1);
}

.cta-content-inner {
  max-width: 600px;
  margin: 0 auto;
}

.cta-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--brand);
  background: rgba(255, 210, 31, 0.1);
  border: 1px solid rgba(255, 210, 31, 0.2);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.sparkle-icon { font-size: 12px; }

.cta-big-heading {
  font-size: clamp(26px, 3.5vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 16px;
  color: var(--text-inverse);
}

.cta-description {
  font-size: 15px;
  color: #A1A1AA;
  line-height: 1.7;
  margin-bottom: 28px;
}

.cta-buttons-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.btn-cta-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading);
  background: var(--brand);
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.btn-cta-gold:hover { background: var(--brand-hover); }

.btn-cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-inverse);
  border: 1px solid #52525B;
  padding: 11px 24px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.btn-cta-outline:hover {
  border-color: #71717A;
  color: white;
}

.cta-disclaimer {
  font-size: 12px;
  color: #71717A;
}

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--bg-dark);
  border-top: 1px solid #27272A;
  padding: clamp(36px, 5vw, 56px) 0 clamp(20px, 3vw, 32px);
}

.footer-health-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #27272A;
  border: 1px solid #3F3F46;
  border-radius: var(--radius-sm);
  margin-bottom: 36px;
  font-size: 11px;
  flex-wrap: wrap;
  gap: 10px;
}

.health-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #A1A1AA;
}

.health-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}

.health-status strong { color: #E4E4E7; }

.health-links a {
  color: var(--brand);
  font-weight: 600;
  transition: var(--transition-fast);
}

.health-links a:hover { text-decoration: underline; }

.footer-columns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin-bottom: clamp(20px, 3vw, 36px);
}

.footer-logo {
  height: 28px;
  width: auto;
  margin-bottom: 14px;
}

.f-brand-desc {
  font-size: 12px;
  color: #71717A;
  line-height: 1.7;
  max-width: 280px;
  margin-bottom: 16px;
}

.f-legal-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: #71717A;
}

.f-legal-info strong { color: #A1A1AA; }

.f-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #E4E4E7;
  margin-bottom: 14px;
}

.f-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.f-links a {
  font-size: 13px;
  color: #A1A1AA;
  transition: color var(--transition-fast);
}

.f-links a:hover { color: var(--brand); }

.f-contact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.f-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #A1A1AA;
}

.icon-f {
  width: 14px;
  height: 14px;
  color: var(--brand);
  flex-shrink: 0;
  margin-top: 2px;
}

.f-social-row { display: flex; gap: 8px; }

.social-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #3F3F46;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A1A1AA;
  transition: var(--transition-fast);
}

.social-btn:hover {
  background: var(--brand);
  color: var(--text-heading);
  border-color: var(--brand);
}

.icon-s { width: 15px; height: 15px; }

.footer-bottom-bar {
  border-top: 1px solid #27272A;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #52525B;
  flex-wrap: wrap;
  gap: 12px;
}

.regulatory-disclaimer {
  max-width: 500px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   19. BACK TO TOP
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 95;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-fast);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--brand-hover);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   PAYMENT METHODS SECTION (NEW)
   -------------------------------------------------------------------------- */
.payment-methods-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--bg-section-alt);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(24px, 4vw, 48px);
}

.pay-method-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 32px) clamp(16px, 2.5vw, 28px);
  position: relative;
  transition: var(--transition-normal);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.pay-method-card:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.pay-method-card.highlight {
  background: #FFFDF5;
  border-color: var(--brand-border);
}

.pay-method-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--brand);
  border: 1px solid #E5BE15;
  color: #111113;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(255, 210, 31, 0.35);
}

.pay-method-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.pay-method-badge {
  position: absolute;
  top: 28px;
  right: 28px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #713F12;
  background: #FEF08A;
  border: 1px solid #FDE047;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: uppercase;
}

.pay-method-badge.green {
  color: #14532D;
  background: #DCFCE7;
  border-color: #BBF7D0;
}

.pay-method-title {
  font-size: 20px;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: var(--text-heading);
}

.pay-method-desc {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 20px;
}

.pay-method-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
}

.pay-method-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-body);
  font-weight: 500;
}

.pay-method-features li::before {
  content: '✓';
  color: #16A34A;
  font-weight: 700;
  font-size: 14px;
}

/* Card Brands Container inside Payment Methods */
.card-brands-container {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 3vw, 32px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  grid-column: span 2;
}

.card-brands-header {
  text-align: center;
  margin-bottom: clamp(12px, 2vw, 24px);
}

.cb-title {
  display: block;
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 4px;
}

.cb-sub {
  font-size: clamp(12px, 1.2vw, 13px);
  color: var(--text-muted);
}

.card-brands-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 18vw, 140px), 1fr));
  gap: clamp(8px, 1.5vw, 16px);
  justify-items: center;
}

.card-brand-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.8vw, 8px);
  padding: clamp(5px, 1vw, 8px) clamp(8px, 1.5vw, 14px);
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  width: 100%;
}

.card-brand-pill:hover {
  border-color: var(--brand-border);
  background: #FFFDF5;
}

.card-brand-pill img {
  height: clamp(16px, 2.5vw, 22px);
  width: auto;
  object-fit: contain;
}

.card-brand-pill span {
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.1vw, 11px);
  font-weight: 600;
  color: var(--text-heading);
}

/* --------------------------------------------------------------------------
   20. SCROLL REVEAL
   -------------------------------------------------------------------------- */
[data-reveal="fade-up"] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

[data-reveal="fade-left"] {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

[data-reveal].visible {
  opacity: 1;
  transform: none;
}

/* Tabular Numbers */
.sim-kpi strong,
.sim-table td,
.ef-display,
.hb-val,
.lt-amount,
.step-latency,
.ef-m-number {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   21. RESPONSIVE — Fluid first, minimal overrides
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --nav-height: 56px;
  }

  .wrap { width: min(100% - clamp(16px, 4vw, 32px), 1200px); }

  .navbar-toggle { display: flex; }
  .navbar-menu {
    position: fixed;
    inset: 0;
    background: rgba(24, 24, 27, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    z-index: 115;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
  }

  .navbar-menu.active {
    opacity: 1;
    visibility: visible;
  }

  .navbar-links {
    flex-direction: column;
    gap: 20px;
  }

  .navbar-links a { font-size: 16px; color: #D4D4D8; }

  .nav-dropdown { text-align: center; }

  .nav-dropdown-toggle {
    font-size: 16px;
    color: #D4D4D8;
    justify-content: center;
    margin: 0 auto;
  }

  .nav-dropdown-menu {
    position: static;
    display: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 8px 0 0;
    text-align: center;
  }

  .nav-dropdown.open .nav-dropdown-menu { display: block; }

  .nav-dropdown-menu a {
    white-space: normal;
    font-size: 15px;
    color: #A1A1AA;
    padding: 9px 12px;
  }

  .navbar-actions {
    flex-direction: column;
    width: 100%;
    max-width: min(240px, 80%);
  }

  .btn-primary-nav {
    width: 100%;
    justify-content: center;
    padding: 12px;
  }

  .hero-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero-right {
    order: 2;
    margin-top: 0;
    margin-right: 0;
  }

  .solution-tabs-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .sol-tab-btn {
    white-space: normal;
    text-align: center;
    justify-content: center;
    padding: 8px 6px;
    font-size: 11px;
    gap: 4px;
    min-height: 40px;
  }

  .sol-tab-btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 60%;
  }

  .hero-cta-group {
    flex-direction: column;
  }

  .hero-cta-group .btn-hero-primary,
  .hero-cta-group .btn-hero-secondary {
    width: 100%;
    justify-content: center;
  }

  .hero-section {
    padding: clamp(16px, 3vw, 32px) 0 clamp(32px, 5vw, 48px);
  }

  .pipeline-timeline {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .pipeline-step {
    flex-direction: row;
    text-align: left;
    gap: clamp(12px, 2vw, 16px);
    padding: clamp(12px, 2vw, 16px) 0;
    border-bottom: 1px solid var(--border-light);
  }

  .pipeline-step:last-child {
    border-bottom: none;
  }

  .pipeline-step-marker {
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
  }

  .pipeline-step-line {
    width: 2px;
    height: 12px;
  }

  .pipeline-step-number {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .payment-methods-grid {
    grid-template-columns: 1fr;
  }

  .card-brands-container {
    grid-column: span 1;
  }
}

/* ==========================================================================
   V2 — Hero secundário, Hub (somente nomes) e Seja Parceiro (WhatsApp)
   ========================================================================== */
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.hero-screenshot-secondary {
  max-width: min(320px, 70%);
  margin-left: auto;
  margin-top: 0;
}

.hub-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--bg-section-alt);
}

.hub-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
}

.hub-item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 22px 16px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-heading);
}

.parceiro-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--bg-page);
}

.parceiro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.parceiro-note {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 14px;
}

.parceiro-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.parceiro-form-title {
  font-size: 20px;
  margin-bottom: 16px;
}

.parceiro-form {
  display: grid;
  gap: 14px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
}

.form-input,
.form-select {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--text-body);
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 11px 12px;
  outline: none;
}

.form-input:focus,
.form-select:focus {
  border-color: var(--brand-dim);
  box-shadow: 0 0 0 3px var(--brand-bg);
}

.form-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text-muted);
}

.form-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #111113;
}

.form-check a {
  text-decoration: underline;
  font-weight: 600;
  color: var(--text-heading);
}

.btn-parceiro-submit {
  background: #111113;
  color: #FAFAF8;
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--radius-md);
  padding: 13px 16px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.btn-parceiro-submit:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.form-error {
  display: none;
  font-size: 13px;
  color: var(--error);
  font-weight: 600;
}

.form-error.visible {
  display: block;
}

.form-success {
  font-size: 14px;
  font-weight: 600;
  color: var(--success);
}

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

  .hub-list {
    grid-template-columns: 1fr 1fr;
  }

  .hero-screenshot-secondary {
    max-width: 78%;
  }
}

@media (max-width: 560px) {
  .hub-list,
  .form-row-2 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   V3 — Redesign narrativo: prova, para-quem, sem/com, bento, vitrine, case
   ========================================================================== */
.section-title,
.hero-headline,
.calc-title,
.cta-big-heading {
  text-wrap: balance;
}

.inline-link {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--text-heading);
}

/* Grain warm sutil sobre hero e CTA (paleta intacta) */
.hero-section::before,
.final-cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.48 0 0 0 0 0.38 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-section > *,
.final-cta-section > * {
  position: relative;
}

/* Faixa de prova */
.proof-band {
  background: var(--bg-section-alt);
  border-block: 1px solid var(--border-light);
}

.proof-band-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-block: clamp(20px, 3vw, 32px);
}

.proof-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proof-number {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}

.proof-label {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Para quem */
.para-quem-section {
  padding: clamp(28px, 4vw, 48px) 0 clamp(16px, 2.5vw, 28px);
}

.para-quem-head {
  margin-bottom: 20px;
}

.para-quem-head .section-title {
  font-size: clamp(20px, 2.4vw, 28px);
}

.para-quem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.para-quem-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--transition-normal);
  position: relative;
}

.para-quem-card:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.para-quem-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  color: #854D0E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.para-quem-icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.para-quem-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #854D0E;
}

.para-quem-card strong {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-heading);
  min-height: 3.2em;
}

.para-quem-arrow {
  margin-top: auto;
  padding-top: 4px;
  color: var(--brand-dim);
  display: inline-flex;
}

.para-quem-arrow svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-fast);
}

.para-quem-card:hover .para-quem-arrow svg {
  transform: translateX(4px);
}

/* Sem / Com */
.semcom-section {
  padding: clamp(28px, 4vw, 48px) 0;
}

.semcom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.semcom-col {
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--border-light);
}

.semcom-sem {
  background: var(--bg-section-alt);
}

.semcom-com {
  background: #111113;
  border-color: #111113;
  color: #FAFAF8;
}

.semcom-com .semcom-tag { color: var(--brand); }

.semcom-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 12px;
}

.semcom-col ul {
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.6;
}

.semcom-sem li::before {
  content: "✕ ";
  color: var(--error);
  font-weight: 700;
}

.semcom-com li::before {
  content: "✓ ";
  color: var(--brand);
  font-weight: 700;
}

/* Bento features */
.features-grid {
  grid-template-columns: repeat(3, 1fr);
}

.feature-card-wide {
  grid-column: span 2;
  background: #111113;
  border-color: #111113;
  color: #E4E4E7;
}

.feature-card-wide .feature-title { color: #FAFAF8; }
.feature-card-wide .feature-desc { color: #D4D4D8; }
.feature-card-wide .feature-link { color: var(--brand); }

.feature-pain {
  font-size: 13px;
  font-weight: 600;
  color: var(--error);
  margin-bottom: 8px;
}

.feature-card-wide .feature-pain { color: var(--brand-hover); }

/* Pipeline progress */
.pipeline-progress {
  height: 4px;
  background: var(--border-light);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.pipeline-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--brand);
  border-radius: 100px;
  transform: scaleX(0);
  transform-origin: left center;
}

/* Vitrine */
.vitrine-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--bg-section-alt);
  border-block: 1px solid var(--border-light);
}

.vitrine-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.vitrine-bio {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vitrine-bio-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
}

.vitrine-bio-icons {
  display: flex;
  gap: 10px;
}

.bio-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #111113;
  color: #FAFAF8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bio-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.vitrine-bio-hint {
  font-size: 12.5px;
  color: var(--text-muted);
}

.vitrine-mock {
  max-width: 340px;
  margin-inline: auto;
}

.vitrine-products {
  display: grid;
  gap: 10px;
}

.vitrine-product {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.vp-thumb {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand-border);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vp-thumb svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.vp-thumb-curso {
  background: linear-gradient(135deg, #FFD21F, #FFE566);
  color: #111113;
}

.vp-thumb-fisico {
  background: #111113;
  border-color: #111113;
  color: #FFD21F;
}

.vp-thumb-mentoria {
  background: linear-gradient(135deg, #F1F1ED, #FFFFFF);
  color: #854D0E;
}

.vp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vp-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
}

.vp-price {
  font-size: 12px;
  color: var(--text-muted);
}

.vitrine-pay {
  text-align: center;
  background: var(--brand);
  color: #111113;
  font-weight: 800;
  font-size: 14px;
  border-radius: var(--radius-md);
  padding: 12px;
  margin-top: 4px;
}

/* Case */
.case-section {
  padding: clamp(28px, 4vw, 48px) 0;
}

.case-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-left: 5px solid var(--brand);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3.5vw, 40px);
  max-width: 820px;
  margin-inline: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  position: relative;
}

.case-quote-mark {
  font-size: 64px;
  line-height: 1;
  color: var(--brand);
  font-family: Georgia, serif;
  margin-bottom: -12px;
}

.case-text {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.75;
  color: var(--text-body);
  margin-bottom: 20px;
}

.case-author {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.case-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #111113;
  color: var(--brand);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.case-who {
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
}

.case-who strong { color: var(--text-heading); }
.case-who span { color: var(--text-muted); }

.case-metric {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  color: #15803D;
  background: var(--success-bg);
  border-radius: 100px;
  padding: 6px 14px;
  white-space: nowrap;
}

.case-seal {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* CTA owner + glow parallax */
.cta-owner {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.75;
  margin-top: 12px;
}

.cta-master-card {
  position: relative;
  overflow: hidden;
}

/* Bento compacto — mesma grade, metade do ar */
.features-section {
  padding: clamp(36px, 5vw, 56px) 0;
}

.features-section .section-head {
  margin-bottom: 28px;
}

.features-grid {
  gap: 12px;
}

.feature-card {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
}

.feature-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
}

.feature-icon svg {
  width: 16px;
  height: 16px;
}

.feature-title {
  font-size: 15.5px;
  margin-bottom: 6px;
}

.feature-pain {
  font-size: 12px;
  margin-bottom: 4px;
}

.feature-desc {
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.feature-link {
  margin-top: auto;
  padding-top: 6px;
}

/* Faixa horizontal: ocupa a linha inteira, sem buraco no bento */
.feature-card-strip {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 18px;
}

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

.feature-strip-body {
  flex: 1;
  min-width: 0;
}

.feature-strip-body .feature-desc {
  margin-bottom: 0;
}

.feature-strip-link {
  margin-top: 0;
  padding-top: 0;
  flex-shrink: 0;
}

/* Cross-link sob área de membros */
.sol-cross {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-muted);
}

/* ==========================================================================
   V4 — Legibilidade: escala, contraste, ritmo por tiers, lista densa
   ========================================================================== */
body {
  font-size: 16px;
  line-height: 1.75;
}

h1, h2, h3 {
  letter-spacing: -0.03em;
}

.hero-headline,
.section-title,
.calc-title,
.cta-big-heading {
  line-height: 1.1;
}

p, li {
  text-wrap: pretty;
}

.section-subtitle {
  font-size: 17px;
  line-height: 1.7;
  font-weight: 500;
  max-width: 62ch;
}

/* Corpo de leitura: 13px -> 14.5px */
.feature-desc,
.pay-method-desc,
.integracao-desc,
.pipeline-step-desc,
.faq-body-content p,
.sol-text,
.hub-item {
  font-size: 14.5px;
  line-height: 1.7;
}

.semcom-col ul,
.sol-list li,
.pay-method-features li {
  font-size: 14.5px;
  line-height: 1.7;
}

/* Rótulos: mínimo 12px */
.badge-tag,
.feature-category,
.matrix-title,
.para-quem-tag,
.semcom-tag,
.case-seal,
.sol-tag,
.pay-method-badge,
.sim-eyebrow,
.vitrine-bio-label {
  font-size: 12px;
}

.integracao-category,
.slider-scale-points {
  font-size: 11.5px;
}

/* Notas e disclaimers: mínimo 12.5px */
.sim-disclaimer,
.cta-disclaimer,
.regulatory-disclaimer,
.copyright-text,
.mock-role,
.sim-switch-copy small,
.sim-helper,
.form-check,
.vitrine-bio-hint,
.health-text,
.f-brand-desc,
.f-legal-info {
  font-size: 12.5px;
  line-height: 1.65;
}

/* Tier 2: apoio compacto, títulos menores */
.semcom-section,
.integracoes-section,
.hub-section,
.faq-section,
.security-section {
  padding: clamp(36px, 5vw, 56px) 0;
}

.semcom-section .section-head,
.integracoes-section .section-head,
.hub-section .section-head,
.faq-section .section-head,
.security-section .section-head {
  margin-bottom: 28px;
}

.semcom-section .section-title,
.integracoes-section .section-title,
.hub-section .section-title,
.faq-section .section-title,
.security-section .section-title {
  font-size: clamp(24px, 3vw, 30px);
}

/* Integrações: lista densa 2 colunas, mesmo conteúdo */
.integracoes-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  max-width: 960px;
  margin-inline: auto;
}

.integracao-card {
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  padding: 14px 0;
}

.integracao-card:hover {
  border-color: var(--border-light);
  box-shadow: none;
}

.integracao-card:hover .integracao-name {
  color: var(--brand-dim);
}

.integracao-name {
  font-size: 16px;
}

.integracao-desc {
  max-width: 60ch;
}

/* Links e foco */
.inline-link,
.f-links a,
.health-links a {
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

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

  .sim-body {
    grid-template-columns: 1fr;
  }
}
[data-parallax-hero] {
  will-change: transform;
}

.gallery-item img {
  will-change: transform;
  transition: transform 0.15s linear;
}

@media (max-width: 900px) {
  .proof-band-inner {
    grid-template-columns: 1fr 1fr;
  }

  .para-quem-grid {
    grid-template-columns: 1fr;
  }

  .semcom-grid,
  .vitrine-grid {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-card-wide {
    grid-column: span 1;
  }

  .feature-card-strip {
    grid-column: span 1;
    flex-direction: column;
    align-items: stretch;
  }

  .feature-card-strip .feature-icon {
    margin-bottom: 10px;
  }

  .feature-strip-body .feature-desc {
    margin-bottom: 10px;
  }

  .case-metric {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .hub-list,
  .form-row-2,
  .proof-band-inner {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   V5 — Linear Midnight Polish (dark-first)
   Corrige valores de tema claro hardcoded herdados de versões anteriores.
   ========================================================================== */

/* Acento: texto sobre fundo brand */
.btn-primary-nav,
.btn-hero-primary,
.btn-sol-cta,
.btn-cta-gold,
.btn-ef-cta,
.btn-parceiro-submit,
.vitrine-pay,
.back-to-top,
.mock-avatar {
  color: var(--on-brand);
}

.btn-parceiro-submit {
  background: var(--brand);
}

.btn-parceiro-submit:hover {
  background: var(--brand-hover);
  opacity: 1;
  transform: translateY(-1px);
}

/* Nav → hairline Linear */
.navbar,
.site-footer,
.footer-bottom-bar {
  border-color: var(--border-light);
}

.navbar.scrolled {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 32px rgba(0, 0, 0, 0.45);
}

.navbar-links a,
.nav-dropdown-toggle {
  color: var(--text-muted);
}

.navbar-links a:hover,
.nav-dropdown-toggle:hover {
  color: var(--text-body);
}

.navbar-links a.active {
  color: var(--text-heading);
}

.btn-ghost-nav {
  background: var(--bg-card);
  border-color: var(--border-medium);
  color: var(--text-heading);
}

.btn-ghost-nav:hover {
  background: var(--bg-card-hover);
  border-color: var(--text-body);
  color: var(--brand);
}

.nav-dropdown-menu {
  background: var(--bg-card);
  border-color: var(--border-light);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.nav-dropdown-menu a:hover {
  background: var(--bg-card-hover);
}

/* Hero */
.hero-headline .highlight {
  color: var(--brand);
}

.hero-subtext {
  color: var(--text-muted);
}

.btn-hero-secondary {
  background: transparent;
  border-color: var(--border-medium);
  color: var(--text-heading);
}

.btn-hero-secondary:hover {
  border-color: var(--text-body);
  background: var(--bg-card);
}

.hero-chip {
  background: var(--bg-card);
  border-color: var(--border-medium);
  color: var(--text-heading);
}

.hero-screenshot {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.trust-signals-bar {
  box-shadow: none;
}

/* Tags mono → gold brand adaptativo */
.pill-tag,
.sol-tag {
  color: var(--brand);
  background: var(--brand-bg);
  border-color: var(--brand-border);
}

/* Seções e cards flat com hairline (sem sombras pesadas) */
.feature-card,
.para-quem-card,
.pay-method-card,
.solution-display-card,
.sol-card-stack,
.case-card,
.parceiro-form-card,
.card-brands-container,
.partners-matrix-card,
.semcom-col,
.semcom-com,
.feature-card-wide {
  box-shadow: none;
}

.feature-card:hover,
.para-quem-card:hover,
.pay-method-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.semcom-com {
  background: var(--bg-card-hover);
  border-color: var(--border-medium);
  color: var(--text-heading);
}

.feature-card-wide {
  background:
    linear-gradient(180deg, rgba(255, 210, 31, 0.06), transparent 40%),
    var(--bg-card-hover);
  border-color: var(--border-medium);
}

.feature-card-wide .feature-title { color: var(--text-heading); }
.feature-card-wide .feature-desc { color: var(--text-muted); }
.feature-card-wide .feature-link { color: var(--brand); }

/* Ícones brand: sem glow, hairline gold */
.feature-icon,
.pipeline-step-icon,
.pillar-icon,
.pay-method-icon,
.ef-metric-icon {
  border-color: var(--brand-border);
  box-shadow: none;
  color: var(--on-brand);
}

/* Tabs soluções */
.sol-tab-btn {
  background: var(--bg-card);
  color: var(--text-muted);
  border-color: var(--border-light);
  box-shadow: none;
}

.sol-tab-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-heading);
  border-color: var(--border-medium);
}

.sol-tab-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 0 0 1px rgba(255, 210, 31, 0.35);
}

/* Mockups (screen look escuro) */
.mockup-window {
  border-color: var(--border-medium);
  background: var(--bg-dark);
}

.mockup-header {
  background: var(--bg-card-hover);
  border-color: var(--border-medium);
}

.m-title { color: var(--text-muted); }
.rb-item { color: var(--text-body); }

.rule-cashback-callout {
  color: var(--brand);
  border-style: solid;
}

/* Pipeline numbers */
.pipeline-step:hover .pipeline-step-number,
.pipeline-step.highlight .pipeline-step-number {
  color: var(--brand);
  border-color: var(--brand-border);
  background: var(--brand-bg);
}

.pipeline-step.highlight .pipeline-step-number {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.pipeline-step-latency {
  color: var(--brand);
  background: var(--brand-bg);
  border-color: var(--brand-border);
}

/* Categorias mono → gold brand adaptativo */
.feature-category,
.para-quem-tag {
  color: var(--brand-dim);
}

/* Badge de método de pagamento e card highlight → soft gold dark */
.pay-method-badge {
  color: var(--brand);
  background: var(--brand-bg);
  border-color: var(--brand-border);
}

.pay-method-badge.green {
  color: var(--success);
  background: var(--success-bg);
  border-color: rgba(39, 166, 68, 0.25);
}

.pay-method-card.highlight {
  background:
    linear-gradient(180deg, rgba(255, 210, 31, 0.05), transparent 50%),
    var(--bg-card-hover);
  border-color: var(--brand-border);
}

/* Vitrine bio / thumbs */
.bio-icon {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-light);
  color: var(--text-heading);
}

.vp-thumb-fisico {
  background: var(--bg-card-hover);
  border-color: var(--border-medium);
  color: var(--brand);
}

.vp-thumb-mentoria {
  background: var(--bg-card-hover);
  border-color: var(--border-medium);
  color: var(--brand-dim);
}

/* Form parceiro */
.form-input,
.form-select {
  background: var(--bg-page);
  color: var(--text-body);
}

.form-input:focus,
.form-select:focus {
  box-shadow: 0 0 0 3px var(--brand-bg);
}

.form-check input { accent-color: var(--brand); }

/* Footer converter para tokens */
.health-status { color: var(--text-muted); }
.health-status strong { color: var(--text-heading); }
.f-title { color: var(--text-heading); }
.f-links a { color: var(--text-muted); }
.f-links a:hover { color: var(--brand); }
.f-contact-list li { color: var(--text-muted); }
.f-brand-desc { color: var(--text-muted); }
.f-legal-info { color: var(--text-muted); }
.f-legal-info strong { color: var(--text-body); }
.footer-bottom-bar { color: var(--text-muted); }
.regulatory-disclaimer { color: var(--text-muted); }

.footer-health-bar {
  background: var(--bg-card);
  border-color: var(--border-light);
}

/* CTA final → card hairline sobre página */
.final-cta-section {
  background: var(--bg-page);
}

.cta-master-card {
  background: linear-gradient(160deg, #0f1011, #161718);
  border-color: var(--border-medium);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Hero screenshot → frame Linear (crisp, hairline, sem stretch) */
.hero-screenshot {
  border-radius: var(--radius-md);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hero-screenshot img {
  width: 100%;
  height: auto;
}

/* Features → showcase Linear: duas linhas largas texto + screenshot */
.features-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.feature-card-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.feature-card-wide .feature-card-body {
  padding: clamp(22px, 3vw, 34px) clamp(20px, 2.8vw, 32px);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.feature-card-wide .feature-media {
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: stretch;
  border-left: 1px solid var(--border-light);
  background: var(--bg-dark);
}

.feature-card-wide.flip .feature-media {
  order: -1;
  border-left: 0;
  border-right: 1px solid var(--border-light);
}

.feature-card-wide .feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Vitrine visual com screenshot real */
.vitrine-mock {
  max-width: min(540px, 100%);
}

.vitrine-shots {
  padding: 0;
}

.vitrine-shots img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .feature-card-wide {
    grid-template-columns: 1fr;
  }

  .feature-card-wide.flip .feature-media {
    order: 0;
  }

  .feature-card-wide .feature-media,
  .feature-card-wide.flip .feature-media {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--border-light);
  }

  .feature-card-wide .feature-media img {
    max-height: 280px;
    object-fit: cover;
    object-position: top center;
  }
}

.cta-big-heading {
  color: #FAFAF8;
}

.btn-cta-outline {
  border-color: var(--border-medium);
  color: #FAFAF8;
}

.btn-cta-outline:hover {
  border-color: #d0d6e0;
  color: #ffffff;
}

/* Grain mais sutil */
.hero-section::before,
.final-cta-section::before {
  opacity: 0.3;
}

/* Back-to-top */
.back-to-top {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   Tema claro — restaura valores quentes originais onde necessário
   -------------------------------------------------------------------------- */
html[data-theme="light"] .hero-headline .highlight { color: #854D0E; }

html[data-theme="light"] .btn-hero-secondary {
  background: #FFFFFF;
  border-color: var(--border-medium);
  color: var(--text-heading);
}

html[data-theme="light"] .btn-hero-secondary:hover {
  border-color: var(--text-muted);
  background: #FAFAFA;
}

html[data-theme="light"] .btn-ghost-nav {
  background: rgba(17, 17, 19, 0.04);
  border-color: rgba(17, 17, 19, 0.12);
  color: #111113;
}

html[data-theme="light"] .btn-ghost-nav:hover {
  background: rgba(17, 17, 19, 0.08);
  border-color: rgba(17, 17, 19, 0.25);
  color: #111113;
}

html[data-theme="light"] .nav-dropdown-menu {
  background: #FFFFFF;
  border-color: var(--border-light);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .nav-dropdown-menu a:hover {
  background: #F4F4F5;
}

html[data-theme="light"] .hero-chip {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(17, 17, 19, 0.1);
  color: #111113;
}

html[data-theme="light"] .pill-tag,
html[data-theme="light"] .sol-tag {
  color: #713F12;
  background: #FEF08A;
  border-color: #FDE047;
}

html[data-theme="light"] .semcom-com {
  background: #111113;
  border-color: #111113;
  color: #FAFAF8;
}

html[data-theme="light"] .pipeline-step-latency {
  color: var(--brand-dim);
  background: var(--brand-bg);
  border-color: var(--brand-border);
}

html[data-theme="light"] .feature-category,
html[data-theme="light"] .para-quem-tag {
  color: #854D0E;
}

html[data-theme="light"] .pay-method-badge {
  color: #713F12;
  background: #FEF08A;
  border-color: #FDE047;
}

html[data-theme="light"] .pay-method-badge.green {
  color: #14532D;
  background: #DCFCE7;
  border-color: #BBF7D0;
}

html[data-theme="light"] .pay-method-card.highlight {
  background: #FFFDF5;
  border-color: var(--brand-border);
}

html[data-theme="light"] .feature-card-wide {
  background: transparent;
  border-color: transparent;
}

html[data-theme="light"] .feature-card-wide .feature-desc { color: var(--text-muted); }

html[data-theme="light"] .bio-icon {
  background: #111113;
  border-color: #111113;
  color: #FAFAF8;
}

html[data-theme="light"] .vp-thumb-fisico {
  background: #111113;
  border-color: #111113;
  color: #FFD21F;
}

html[data-theme="light"] .vp-thumb-mentoria {
  background: linear-gradient(135deg, #F1F1ED, #FFFFFF);
  border-color: var(--border-light);
  color: #854D0E;
}

html[data-theme="light"] .form-input,
html[data-theme="light"] .form-select {
  background: #FFFFFF;
  color: var(--text-body);
}

html[data-theme="light"] .mockup-window {
  background: #18181B;
  border-color: #3F3F46;
}

html[data-theme="light"] .mockup-header {
  background: #27272A;
  border-color: #3F3F46;
}

html[data-theme="light"] .rule-cashback-callout {
  color: #111113;
  border-style: dashed;
}

html[data-theme="light"] .pipeline-step:hover .pipeline-step-number,
html[data-theme="light"] .pipeline-step.highlight .pipeline-step-number {
  color: #854D0E;
  border-color: var(--brand);
  background: #FFFEF5;
}

html[data-theme="light"] .pipeline-step.highlight .pipeline-step-number {
  background: var(--brand);
  border-color: var(--brand);
  color: #111113;
}

html[data-theme="light"] .cta-master-card {
  background: linear-gradient(160deg, #111113, #1A1A1D);
  border-color: var(--border-medium);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="light"] .final-cta-section {
  background: #FAFAF8;
}

html[data-theme="light"] .btn-cta-outline {
  border-color: #52525B;
}

html[data-theme="light"] .btn-hero-primary,
html[data-theme="light"] .btn-sol-cta,
html[data-theme="light"] .btn-cta-gold,
html[data-theme="light"] .btn-ef-cta,
html[data-theme="light"] .vitrine-pay,
html[data-theme="light"] .back-to-top {
  color: #111113;
}

html[data-theme="light"] .mock-avatar { color: #111113; }

html[data-theme="light"] .btn-parceiro-submit {
  background: #111113;
  color: #FAFAF8;
}

html[data-theme="light"] .btn-parceiro-submit:hover {
  background: #111113;
  opacity: 0.92;
}

/* Ajuste no mobile: o menu vai por cima do tema */
html[data-theme="light"] .navbar-menu {
  background: rgba(250, 250, 248, 0.97);
}

/* ==========================================================================
   V6 — Revisão: tema claro (navbar/footer/chips), mobile e bandeiras
   ========================================================================== */

/* Navbar clara de verdade (o --bg-dark deixava texto escuro em fundo escuro) */
html[data-theme="light"] .navbar,
html[data-theme="light"] .navbar.scrolled {
  background: #FAFAF8;
}

html[data-theme="light"] .navbar.scrolled {
  box-shadow: 0 1px 0 var(--border-light), 0 12px 24px rgba(17, 17, 19, 0.06);
}

html[data-theme="light"] .btn-ghost-nav:hover { color: #854D0E; }

/* Chips âmbar legíveis no tema claro (eram brand-dim sobre brand-bg, contraste 1.8) */
html[data-theme="light"] .brand-badge,
html[data-theme="light"] .badge-tag,
html[data-theme="light"] .sol-badge,
html[data-theme="light"] .sim-eyebrow,
html[data-theme="light"] .pipeline-step-latency,
html[data-theme="light"] .sim-method-btn.active {
  color: #854D0E;
  background: #FEF08A;
  border-color: #FDE047;
}

html[data-theme="light"] .case-metric {
  color: #15803D;
  background: #DCFCE7;
  border-color: #BBF7D0;
}

/* Rodapé claro no tema claro (acompanha a página, como a Linear) */
html[data-theme="light"] .site-footer {
  background: #FAFAF8;
}

html[data-theme="light"] .footer-health-bar {
  background: #FFFFFF;
  border-color: var(--border-light);
}

html[data-theme="light"] .health-status strong { color: #27272A; }
html[data-theme="light"] .health-links a { color: #854D0E; }

html[data-theme="light"] .social-btn {
  background: rgba(17, 17, 19, 0.04);
  border-color: var(--border-light);
  color: #52525B;
}

html[data-theme="light"] .social-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #111113;
}

/* Bandeiras: bloco em largura total e pills uniformes centralizadas */
.card-brands-container {
  grid-column: 1 / -1;
}

.card-brands-grid-v2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 16px);
}

.card-brand-pill {
  width: auto;
  min-width: 124px;
  padding: 8px 14px;
}

/* Mockups são "telas" escuras nos dois temas — texto sempre claro lá dentro */
html[data-theme="light"] .mockup-window .m-title,
html[data-theme="light"] .mockup-window .mock-name {
  color: #E4E4E7;
}

html[data-theme="light"] .mockup-window .mock-role,
html[data-theme="light"] .mockup-window .rb-item {
  color: #A1A1AA;
}

html[data-theme="light"] .mockup-window .rb-item strong {
  color: var(--brand);
}

/* Aplicações práticas: tabs segmentados de largura uniforme no desktop */
@media (min-width: 769px) {
  .solution-tabs-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    gap: 8px;
  }

  .sol-tab-btn {
    justify-content: center;
    white-space: nowrap;
  }
}

/* Head dividido: título à esquerda, subtítulo à direita (só em soluções) */
@media (min-width: 900px) {
  #solucoes .section-head-split {
    text-align: left;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(16px, 3vw, 48px);
    align-items: end;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(28px, 4vw, 48px);
  }

  #solucoes .section-head-split .section-subtitle {
    max-width: 560px;
    margin-left: auto;
  }
}

#solucoes .section-head {
  margin-bottom: clamp(28px, 4vw, 48px);
}

#solucoes .section-subtitle {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile: features em coluna única para os blocos alinharem (Liquidação Multicanal) */
@media (max-width: 900px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-card-strip {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   V7 — Fidelidade Linear (visual): Inter, ritmo 96–140, flat+hairline,
   FAQ lista 2 col, trust bar mono, acessibilidade, tema claro zinc
   ========================================================================== */

/* Tipografia Linear: títulos 600, corpo denso (override V4: 16/1.75 -> 15/1.6) */
body {
  font-size: 15px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

/* Ritmo vertical Linear: seções com respiro 96–140 no desktop */
.para-quem-section,
.vitrine-section,
.native-features-section,
.semcom-section,
.features-section,
.payment-methods-section,
.calculator-section,
.case-section,
.solutions-section,
.pipeline-section,
.integracoes-section,
.security-section,
.hub-section,
.faq-section,
.final-cta-section {
  padding: clamp(72px, 9vw, 120px) 0;
}

.para-quem-section,
.faq-section,
.hub-section {
  background: var(--bg-page);
}

/* Flat + hairline: remove grain (hero/CTA) */
.hero-section::before,
.final-cta-section::before {
  display: none;
}

/* feature-card-wide sem gradiente amarelo (fundo sólido flat) */
.feature-card-wide {
  background: var(--bg-card-hover);
}

/* Hovers Linear: só mudança de cor, sem lift/translateY nem sombra */
.gallery-item:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-medium);
}

.pay-method-card:hover,
.para-quem-card:hover,
.feature-card:hover {
  transform: none;
  box-shadow: none;
}

.btn-parceiro-submit:hover {
  transform: none;
}

/* Navbar: hairline só no scroll (sem sombra pesada) */
.navbar.scrolled {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

.navbar-links a,
.nav-dropdown-toggle {
  font-size: 13.5px;
}

/* Botões: canto Linear (6px) */
.btn-primary-nav,
.btn-hero-primary,
.btn-hero-secondary,
.btn-sol-cta,
.btn-ef-cta,
.btn-cta-gold,
.btn-cta-outline,
.btn-back-cta,
.btn-parceiro-submit {
  border-radius: var(--radius-sm);
}

/* Trust bar -> linha mono discreta com divisórias hairline */
.trust-signals-bar {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  margin-top: clamp(32px, 4vw, 48px);
  box-shadow: none;
}

.trust-signals-inner {
  padding: clamp(10px, 1vw, 14px) 0;
}

.signal-item {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.signal-icon {
  width: 14px;
  height: 14px;
  color: var(--brand);
}

/* FAQ -> acordeão hairline em 2 colunas (texto intacto) */
.faq-container-v2 {
  max-width: min(920px, 94%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 5vw, 72px);
}

.faq-card-v2 {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
}

.faq-card-v2:hover .faq-q-text {
  color: var(--brand-dim);
}

.faq-card-v2.active {
  border-bottom-color: var(--brand-border);
}

.faq-header-btn {
  padding: 18px 4px;
  gap: 14px;
}

.faq-indicator {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-medium);
  color: #FFFFFF;
}

.faq-card-v2:hover .faq-indicator {
  color: #FFFFFF;
  border-color: var(--brand);
}

.faq-card-v2.active .faq-indicator {
  color: #FFFFFF;
  background: transparent;
  border-color: var(--brand);
}

.faq-body-content {
  padding: 0 4px;
}

.faq-card-v2.active .faq-body-content {
  padding: 0 4px 18px;
}

/* Tema claro: bordas zinc mais suaves (Linear light) */
html[data-theme="light"] {
  --border-light: #E4E4E4;
}

/* Acessibilidade: foco visível + movimento reduzido */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Responsivo: FAQ 1 coluna no mobile */
@media (max-width: 768px) {
  .faq-container-v2 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   V8 — Bloco comparativo (Gateway tradicional x Asaas x ArkGateway)
   ========================================================================== */
.compare-section {
  padding: clamp(72px, 9vw, 120px) 0;
}

.compare-scroll {
  overflow-x: auto;
}

.compare-grid {
  min-width: 680px;
}

.compare-row {
  display: grid;
  grid-template-columns: 0.95fr 1.25fr 1.25fr 1.8fr;
  border-bottom: 1px solid var(--border-light);
}

.compare-head .compare-cell {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 12px;
}

.compare-cell {
  padding: 16px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-body);
}

.compare-cell:not(:first-child) {
  border-left: 1px solid var(--border-light);
}

.compare-label {
  color: var(--text-muted);
  font-weight: 600;
}

.compare-ark {
  background: var(--brand-bg);
  border-left: 1px solid var(--brand-border) !important;
  color: var(--text-heading);
  font-weight: 600;
}

.compare-head .compare-ark {
  color: var(--brand-dim);
}

html[data-theme="light"] .compare-head .compare-ark {
  color: #854D0E;
}

/* ==========================================================================
   V9 — Contexto visual completo da Linear (vista no site real):
   texto near-white, escala 64/48, peso ~500, hero centrado com frame
   full-width, caption mono, pills arredondados, learn-more 16px regular
   ========================================================================== */

html[data-theme="dark"] {
  --text-heading: #F7F8F8;
  --text-body: #E8EAED;
}

body {
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

.hero-headline,
.section-title,
.calc-title,
.cta-big-heading {
  letter-spacing: -0.022em;
}

/* Escala Linear: h1 64, h2 48, sub 19–20 */
.hero-headline {
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1.05;
}

/* No celular as duas sentenças do h1 cabem inteiras (1 linha cada) */
@media (max-width: 500px) {
  .hero-headline {
    font-size: 36px;
  }
}

.section-title {
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.08;
}

/* Regras específicas anteriores reduziam o h2 — Linear unifica em 48 */
.semcom-section .section-title,
.integracoes-section .section-title,
.hub-section .section-title,
.faq-section .section-title,
.security-section .section-title,
.para-quem-head .section-title {
  font-size: clamp(32px, 4.2vw, 48px);
}

.section-subtitle {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 620px;
}

/* Hero centrado, frame full-width */
.hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-left {
  max-width: 780px;
}

.hero-subtext {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.hero-cta-group {
  justify-content: center;
}

.hero-frame {
  width: 100%;
  max-width: 1100px;
  margin-top: clamp(36px, 5vw, 64px);
}

.hero-screenshot {
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 64px rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-light);
}

.hero-screenshot img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Pills Linear: 9999px, 12–13px, gold brand subtil */
.badge-tag,
.sol-badge,
.sim-eyebrow {
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 6px 14px;
}

.pill-tag {
  border-radius: 9999px;
  letter-spacing: 0.04em;
}

/* Learn more → estilo Linear: 16px, regular, near-white */
.feature-link {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-heading);
  gap: 6px;
}

.feature-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.feature-link:hover svg {
  transform: translateX(3px);
}

/* Frames de features: canto Linear + mais respiro entre blocos */
.feature-card-wide {
  border-radius: 12px;
}

.features-section .feature-card-wide {
  margin-bottom: clamp(56px, 8vw, 120px);
}

.features-section .feature-card-wide:last-child {
  margin-bottom: 0;
}

/* Proof band: números near-white + label mono discreto */
.proof-number {
  color: var(--text-heading);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.proof-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Tema claro: mantém hierarquia zinc, hero centrado igual */
html[data-theme="light"] .hero-caption {
  color: var(--text-muted);
}

html[data-theme="light"] .feature-card-wide .feature-link {
  color: #854D0E;
}

/* ==========================================================================
   V10 — Espinha Linear nas capacidades: blocos empilhados com pills + frame
   full-width
   ========================================================================== */

/* Features -> pilha de capacidades full-width (padrão Linear) */
.features-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vw, 120px);
  margin-top: clamp(40px, 6vw, 72px);
}

.features-section .feature-card-wide {
  margin-bottom: 0;
}

.feature-card-wide {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 44px);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.feature-card-wide.feature-card-flip {
  grid-template-columns: 1fr;
}

.feature-card-wide .feature-card-body {
  max-width: 640px;
  padding: 0;
}

.feature-card-wide .feature-title {
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
}

.feature-card-wide .feature-desc {
  font-size: 16px;
  line-height: 1.6;
}

.feature-card-wide .feature-media {
  width: 100%;
  min-height: 0;
  border-left: 0;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  overflow: hidden;
  background: var(--bg-dark-elevated);
}

.feature-card-wide .feature-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: top center;
}

.feature-card-wide.feature-card-flip .feature-media {
  order: 0;
}

/* Pill tabs das capacidades */
.cap-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.cap-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  border-radius: 9999px;
  padding: 5px 12px;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.cap-pill:hover {
  border-color: var(--brand-border);
  color: var(--brand-dim);
}

/* Strip Liquidação Multicanal: faixa horizontal Linear */
.feature-card-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-card);
  padding: clamp(18px, 2.5vw, 26px) clamp(18px, 2.5vw, 28px);
}

html[data-theme="light"] .feature-card-wide .feature-media {
  background: var(--bg-card);
}

html[data-theme="light"] .hero-cap-item {
  color: var(--text-muted);
}

@media (max-width: 700px) {
  .feature-card-strip {
    grid-template-columns: 1fr;
  }

  .feature-card-strip .feature-icon {
    display: none;
  }
}

/* ==========================================================================
   V18 — Ajustes de tema claro
   Frase-problema dos wide-cards agora âmbar no claro; sombras suaves nos
   frames; ouro mais definido nos pills do comparativo e latência
   ========================================================================== */

html[data-theme="light"] .feature-pain,
html[data-theme="light"] .feature-card-wide .feature-pain {
  color: #854D0E;
}

html[data-theme="light"] .feature-card-wide .feature-link {
  color: #854D0E;
}

html[data-theme="light"] .feature-card-wide .feature-link:hover {
  color: #B45309;
}

html[data-theme="light"] .hero-screenshot {
  box-shadow: 0 18px 50px rgba(17, 17, 19, 0.10), 0 2px 8px rgba(17, 17, 19, 0.04);
}

html[data-theme="light"] .hub-frame {
  box-shadow: 0 18px 48px rgba(17, 17, 19, 0.10);
}

html[data-theme="light"] .compare-tag {
  border-color: #E1B94F;
}

html[data-theme="light"] .compare-ark {
  border-left-color: #D4A73C !important;
}

html[data-theme="light"] .cap-pill:hover {
  border-color: #E1B94F;
  color: #854D0E;
}

html[data-theme="light"] .pipeline-step-latency {
  color: #854D0E;
  background: #FFF3C4;
  border-color: #F6DF8F;
}

html[data-theme="light"] .badge-tag {
  background: #FEF08A;
  border-color: #FDE047;
}

/* Seta do FAQ: preta no tema claro */
html[data-theme="light"] .faq-indicator {
  color: #111113;
}

html[data-theme="light"] .faq-card-v2:hover .faq-indicator,
html[data-theme="light"] .faq-card-v2.active .faq-indicator {
  color: #111113;
  border-color: #D4A73C;
}

/* Respiro vertical tipo Linear (≈ 120–128px no topo e na base) */
.hero-section {
  padding: clamp(64px, 9vw, 120px) 0 clamp(72px, 10vw, 128px);
}

.hero-pill-badge {
  margin-bottom: 18px;
}

.hero-headline {
  margin-bottom: 20px;
}

.hero-subtext {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  margin-bottom: clamp(24px, 3vw, 32px);
}

.hero-frame {
  margin-top: clamp(48px, 7vw, 80px);
}

/* Parágrafos em peso regular (Linear usa 400) */
.section-subtitle {
  font-weight: 400;
}

/* Hub de Crédito: frame full-width com a imagem fornecida */
.hub-frame {
  margin-top: clamp(28px, 4vw, 40px);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-dark-elevated);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.hub-frame img {
  width: 100%;
  height: auto;
  display: block;
}

html[data-theme="light"] .hub-frame {
  background: var(--bg-card);
}

@media (max-width: 700px) {
  .hero-section {
    padding-top: clamp(44px, 11vw, 64px);
  }
}

/* ==========================================================================
   V12 — Primeira dobra afinada com a Linear
   - CTAs em pill (9999px), primário com mais peso, altura casada
   - Caption vira pills com borda (textos split/cashback em destaque)
   - Frame ocupa a largura total do wrap
   - Subtexto 18px mais contido
   ========================================================================== */

.btn-hero-primary,
.btn-hero-secondary {
  border-radius: 9999px;
  font-size: 16px;
}

.btn-hero-primary {
  padding: 14px 28px;
}

.btn-hero-secondary {
  padding: 13px 24px;
}

.hero-frame {
  max-width: 1200px;
}

.hero-subtext {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
}

.hero-caption {
  gap: 10px 12px;
}

.hero-cap-item {
  padding: 5px 14px;
  border: 1px solid var(--border-light);
  border-radius: 9999px;
  background: var(--bg-card);
}

html[data-theme="light"] .hero-cap-item {
  background: var(--bg-page);
}

/* ==========================================================================
   V13 — Gestão de espaço na primeira dobra:
   badge removido, botões de volta ao raio 6px, hero compacto para a
   imagem do painel aparecer já no primeiro viewport (padrão Linear)
   ========================================================================== */

.hero-section {
  padding: clamp(40px, 5.5vw, 72px) 0 clamp(48px, 6vw, 72px);
}

.hero-headline {
  margin-bottom: 12px;
}

.hero-subtext {
  max-width: 620px;
  font-size: clamp(15px, 1.3vw, 17px);
  margin-bottom: clamp(18px, 2.4vw, 24px);
}

.hero-frame {
  margin-top: clamp(24px, 3.5vw, 40px);
}

.btn-hero-primary,
.btn-hero-secondary {
  border-radius: 6px;
  font-size: 15px;
}

.btn-hero-primary {
  padding: 12px 24px;
}

.btn-hero-secondary {
  padding: 11px 22px;
}

@media (max-width: 700px) {
  .hero-section {
    padding-top: clamp(32px, 9vw, 48px);
  }
}

/* ==========================================================================
   V15 — Parallax do hero removido (frame estático, como na Linear);
   caption tem z-index de segurança para nunca ser coberta
   ========================================================================== */

.hero-caption {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   V16 — Comparativo polido (espinha Linear)
   - Tabela emoldurada em card hairline com radius 12
   - Células com mais respiro (14px / padding 18px)
   - Coluna "Capacidade" fixa no scroll horizontal (mobile)
   - Cabeçalho ArkGateway com dot dourado
   ========================================================================== */

.compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-card);
}

.compare-grid {
  min-width: 600px;
}

.compare-head .compare-cell {
  padding-top: 14px;
  padding-bottom: 14px;
}

.compare-cell {
  padding: 18px 16px;
  font-size: 14px;
  line-height: 1.5;
}

/* Coluna de rótulo fixa ao rolar horizontalmente */
.compare-cell:first-child {
  position: sticky;
  left: 0;
  background: var(--bg-card);
  z-index: 1;
}

.compare-head .compare-ark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.compare-ark-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}

html[data-theme="light"] .compare-cell:first-child {
  background: var(--bg-card);
}

/* ==========================================================================
   V17 — Coluna Ark com pills de capacidades (célula Checkout) e
   rebalanceamento de colunas dando mais largura ao ArkGateway
   ========================================================================== */

.compare-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.compare-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--brand-dim);
  border: 1px solid var(--brand-border);
  border-radius: 9999px;
  padding: 4px 10px;
}

html[data-theme="light"] .compare-tag {
  color: #854D0E;
}

@media (max-width: 700px) {
  .compare-tag {
    font-size: 11px;
    padding: 3px 8px;
  }

  .compare-tags {
    gap: 4px;
  }
}

/* ==========================================================================
   V20 — Vitrine: texto à esquerda, screenshot no tamanho natural ao lado
   Imagem 640×339 exibida em 640px (sem upscale), coluna direita dedicada
   ========================================================================== */

.vitrine-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.vitrine-visual {
  width: 100%;
}

.vitrine-mock {
  max-width: 640px;
  margin-inline: 0;
}

.vitrine-shots img {
  width: 100%;
  height: auto;
  display: block;
}

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

  .vitrine-mock {
    margin-inline: auto;
  }
}

/* ==========================================================================
   V21 — App Download (hero): CTA dourado após o dashboard + plataformas
   O JS marca .is-detected na plataforma do visitante (data-platform).
   ========================================================================== */

.hero-app-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 32px);
}

.btn-app-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #18181b;
  background: #EDCF1F;
  padding: 12px 16px;
  border-radius: 10px;
  transition: var(--transition-fast);
  box-shadow: 0 8px 24px rgba(237, 207, 31, 0.16);
}

.btn-app-download:hover {
  background: var(--brand-hover);
  transform: translateY(-1px);
}

.btn-app-download:active {
  transform: translateY(0);
}

.icon-app {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.app-platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.app-platforms-lead {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-fast);
}

.app-platform svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.app-platform.is-detected {
  font-family: var(--font-mono);
  color: var(--brand-dim);
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: 9999px;
  padding: 4px 10px;
}

html[data-theme="light"] .app-platform.is-detected {
  color: #854D0E;
}

@media (max-width: 560px) {
  .app-platforms {
    gap: 6px 10px;
  }
}

/* ==========================================================================
   V22 — App Download no CTA final: linha de chips entre botoes e disclaimer
   ========================================================================== */

.cta-app-line {
  display: flex;
  justify-content: center;
  margin-top: clamp(14px, 2vw, 18px);
}

/* V23 — CTA final: o botao de app usa o mesmo raio do botao de conta.
   Os dois ficam lado a lado em .cta-buttons-wrap, entao precisam casar;
   10px e o raio do .btn-app-download (referencia da hero). */
.cta-buttons-wrap .btn-cta-gold {
  border-radius: 10px;
}

/* V24 — o par de botoes do CTA final casa por completo.
   O botao de app usa .btn-app-download (classe da hero, onde era o unico
   botao do bloco e por isso tinha tom, corpo e espaco proprios). Aqui ele
   divide linha com .btn-cta-gold, e as duas derivacoes ficavam visiveis:
   #EDCF1F contra --brand, 45px contra 46.5px de altura, fonte 15 contra 14.

   Alinha o botao de app ao token da marca e as metricas do irmao, para o
   par ler como conjunto. Escopado em .cta-buttons-wrap: a hero, onde o
   botao esta so, mantem a aparencia aprovada. */
.cta-buttons-wrap .btn-app-download {
  background: var(--brand);
  font-size: 14px;
  padding: 12px 28px;
}