/* ========================================
   OFFSHOREPROZ ALLIANCE ONBOARDING
   Design: Navy + Gold, Glassmorphism
   Ultra-refined pixel-perfect edition
   ======================================== */

/* === RESET & BASE === */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --navy: #0a1628;
  --navy-light: #1a2744;
  --navy-mid: #0f1d35;
  --gold: #d4a853;
  --gold-light: #e8c97a;
  --gold-dim: rgba(212, 168, 83, 0.15);
  --white: #ffffff;
  --gray: #94a3b8;
  --gray-dark: #64748b;
  --green: #22c55e;
  --yellow: #eab308;
  --red: #ef4444;

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Poppins", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.08);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--white);
  background: var(--navy);
  overflow-x: hidden;
}

::selection {
  background: rgba(212, 168, 83, 0.3);
  color: var(--white);
}

/* === PARTICLE CANVAS === */
.particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}

/* === GOLD GRADIENT TEXT === */
.gold-gradient {
  background: linear-gradient(
    135deg,
    var(--gold),
    var(--gold-light),
    var(--gold)
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShift 4s ease-in-out infinite;
}

@keyframes goldShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* === GLOW CARD EFFECT === */
.glow-card {
  position: relative;
  overflow: hidden;
}

.glow-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(212, 168, 83, 0),
    rgba(212, 168, 83, 0.2),
    rgba(212, 168, 83, 0),
    rgba(212, 168, 83, 0.1)
  );
  background-size: 400% 400%;
  animation: borderShimmer 5s ease-in-out infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.glow-card:hover::before {
  opacity: 1;
}

.glow-card {
  transition:
    transform 0.4s var(--ease-out),
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}

@keyframes borderShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* === SHIMMER BUTTON === */
.shimmer-btn {
  position: relative;
  overflow: hidden;
}

.shimmer-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  animation: shimmerMove 2.5s ease-in-out infinite;
}

.shimmer-btn:hover {
  box-shadow:
    0 0 40px rgba(212, 168, 83, 0.5),
    0 0 80px rgba(212, 168, 83, 0.15);
}

@keyframes shimmerMove {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

/* === PROGRESS BAR === */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 100;
}

.progress-fill {
  height: 100%;
  width: 12.5%;
  background: linear-gradient(
    90deg,
    var(--gold),
    var(--gold-light),
    var(--gold)
  );
  background-size: 200% 100%;
  animation: progressGradient 3s linear infinite;
  transition: width 0.6s var(--ease-out);
  box-shadow:
    0 0 12px rgba(212, 168, 83, 0.5),
    0 0 24px rgba(212, 168, 83, 0.2);
  position: relative;
}

.progress-fill::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 6px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow:
    0 0 10px var(--gold),
    0 0 20px rgba(212, 168, 83, 0.5);
}

@keyframes progressGradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* === NAV DOTS + SETAS — REMOVIDOS ===
   Navegacao de deck (8 dots + setas prev/next) nao faz sentido numa
   landing de rolagem vertical. A barra de progresso foi mantida e
   repropostada como indicador de scroll. */

/* === SCROLL CONTAINER === */
.scroll-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  z-index: 1;
}

.section {
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 48px;
  position: relative;
}

/* Hero ocupa a dobra inteira; as demais crescem com o conteudo. */
#section-0 {
  min-height: 100svh;
  padding-top: 72px;
}

.section-inner {
  max-width: 1200px;
  width: 100%;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.55s var(--ease-out),
    filter 0.55s var(--ease-out);
  filter: blur(2px);
}

.section-inner.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* === ANIMATION ITEMS (GSAP-powered stagger) === */
.anim-item {
  opacity: 0;
  transform: translateY(16px);
}

.section-inner.visible .anim-item {
  /* GSAP handles these — fallback for non-JS */
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}

/* === GLASS CARD === */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 20px;
  transition:
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}

/* === STEP BADGE === */
.step-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid rgba(212, 168, 83, 0.3);
  border-radius: 999px;
  margin-bottom: 8px;
  background: var(--gold-dim);
}

/* === SECTION HEADLINES === */
.section-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: 10px;
  color: var(--white);
}

.section-headline.center {
  text-align: center;
}

.section-sub {
  font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.08rem);
  color: var(--gray);
  margin-bottom: 18px;
  max-width: 560px;
}

.section-sub.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* === TWO COLUMN LAYOUT === */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.col-text {
  display: flex;
  flex-direction: column;
}
.col-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   SECTION 1: HERO
   ======================================== */
.hero-section {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  gap: 0;
}

.hero-glow {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(212, 168, 83, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}

.hero-glow-2 {
  position: absolute;
  bottom: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(212, 168, 83, 0.04) 0%,
    transparent 70%
  );
  pointer-events: none;
  animation: glowPulse 5s ease-in-out infinite reverse;
}

@keyframes glowPulse {
  0%,
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1.1);
  }
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    black 30%,
    transparent 70%
  );
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--gold);
  padding: 6px 14px;
  border: 1px solid rgba(212, 168, 83, 0.3);
  border-radius: 999px;
  margin-bottom: 8px;
  background: var(--gold-dim);
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(212, 168, 83, 0.5);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(212, 168, 83, 0.6);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 0 8px rgba(212, 168, 83, 0);
  }
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 0.8rem + 3.2vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: 6px;
  max-width: 760px;
  text-shadow: 0 0 60px rgba(212, 168, 83, 0.08);
}

.hero-sub {
  font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.12rem);
  color: var(--gray);
  max-width: 640px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.hero-amount {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--white);
  display: inline-block;
  transition: transform 0.15s var(--ease-out);
}

.hero-cards {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.mini-card {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 180px;
  text-align: center;
  transition: all 0.3s var(--ease-out);
}

.mini-card:hover {
  background: var(--glass-hover);
  border-color: rgba(212, 168, 83, 0.25);
  transform: translateY(-4px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(212, 168, 83, 0.06);
}

.mini-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(212, 168, 83, 0.1);
  color: var(--gold);
  position: relative;
}

.mini-icon::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 13px;
  background: radial-gradient(
    circle,
    rgba(212, 168, 83, 0.15) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.mini-card:hover .mini-icon::after {
  opacity: 1;
}

.mini-icon.gold {
  background: rgba(212, 168, 83, 0.2);
}

.mini-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--white);
}

.mini-desc {
  font-size: 12px;
  color: var(--gray);
}

.hero-social-proof {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.proof-text {
  font-size: 13px;
  color: var(--gray-dark);
}

.proof-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 12px;
}

.proof-badge strong {
  display: block;
  color: var(--white);
}

.proof-badge span {
  font-size: 11px;
  color: var(--gray);
}

.proof-badge i,
.proof-badge svg {
  color: var(--gold);
}

.cta-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  animation: bounce-right 1.5s ease-in-out infinite;
}

.cta-arrow:hover {
  color: var(--gold-light);
  gap: 14px;
}

@keyframes bounce-right {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6px);
  }
}

/* ========================================
   SECTION 2: CADASTRO
   ======================================== */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--gray);
}

.feature-item i,
.feature-item svg {
  color: var(--green);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.feature-item code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold);
  background: var(--gold-dim);
  padding: 2px 8px;
  border-radius: 6px;
}

.time-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gold);
  font-family: var(--font-mono);
}

.time-badge i,
.time-badge svg {
  width: 16px;
  height: 16px;
}

/* Form Mockup */
.form-mockup {
  width: 100%;
  max-width: 400px;
  padding: 24px;
}

.form-header {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 20px;
  color: var(--white);
  text-align: center;
}

.form-field {
  margin-bottom: 10px;
}

.form-field label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray);
  margin-bottom: 5px;
}

.form-field label i,
.form-field label svg {
  width: 13px;
  height: 13px;
  color: var(--gold);
}

.input-mock {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 11px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--white);
  display: flex;
  align-items: center;
  transition:
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}

.input-mock:focus-within,
.form-field.typing .input-mock {
  border-color: rgba(212, 168, 83, 0.4);
  box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.1);
}

.typing-text {
  min-height: 1.2em;
}

.cursor {
  color: var(--gold);
  animation: blink 1s step-end infinite;
  margin-left: 1px;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.type-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--gray);
  transition: all 0.2s;
}

.pill.active {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold);
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  box-shadow: 0 0 20px rgba(212, 168, 83, 0.25);
  text-decoration: none;
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 30px rgba(212, 168, 83, 0.4),
    0 4px 20px rgba(0, 0, 0, 0.3);
}

.btn-gold:active {
  transform: translateY(0);
}

.form-cta {
  width: 100%;
  margin-top: 6px;
}

/* ========================================
   SECTION 3: CONTRATO
   ======================================== */
.contract-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.contract-feat {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.contract-feat i,
.contract-feat svg {
  color: var(--gold);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.contract-feat strong {
  display: block;
  font-size: 14px;
  color: var(--white);
  margin-bottom: 2px;
}

.contract-feat span {
  font-size: 13px;
  color: var(--gray);
}

.trust-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--gray);
  padding: 5px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--glass-bg);
}

.trust-badge i,
.trust-badge svg {
  width: 13px;
  height: 13px;
  color: var(--gold);
}

/* Contract Preview */
.contract-preview {
  width: 100%;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.contract-header {
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 12px;
}

.contract-logo {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 3px;
}

.contract-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
}

.contract-articles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.article {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--gray-dark);
  padding: 3px 8px;
  border-radius: 4px;
  transition: all 0.3s;
}

.article.highlight {
  color: var(--gold);
  background: var(--gold-dim);
  border-left: 2px solid var(--gold);
}

.contract-sign-area {
  text-align: center;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}

.sign-line {
  border-bottom: 1px dashed var(--gray-dark);
  padding-bottom: 4px;
  margin-bottom: 6px;
  display: flex;
  justify-content: center;
}

.sign-svg {
  width: 180px;
  height: 36px;
}

.sign-path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 2s var(--ease-out);
}

.section-inner.visible .sign-path {
  stroke-dashoffset: 0;
}

.sign-label {
  font-size: 10px;
  color: var(--gray-dark);
  font-style: italic;
}

/* ========================================
   SECTION 4: CALENDLY LINK
   ======================================== */
.link-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.flow-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--gold-dim);
  border: 1px solid rgba(212, 168, 83, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  transition: all 0.3s var(--ease-out);
}

.flow-step:hover .flow-icon {
  transform: scale(1.1) translateY(-2px);
  box-shadow:
    0 0 20px rgba(212, 168, 83, 0.25),
    0 8px 16px rgba(0, 0, 0, 0.2);
  background: rgba(212, 168, 83, 0.2);
}

.flow-label {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.4;
}

.flow-arrow {
  color: var(--gold);
  opacity: 0.5;
}

.behind-scenes {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 16px;
}

.behind-scenes h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 8px;
}

.behind-scenes ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.behind-scenes li {
  font-size: 13px;
  color: var(--gray);
  padding-left: 16px;
  position: relative;
}

.behind-scenes li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* Link Card */
.link-card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.link-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray);
}

.link-label i,
.link-label svg {
  color: var(--gold);
}

.link-url {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 12px 16px;
}

.link-url code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gray);
  word-break: break-all;
  line-height: 1.6;
}

.copy-btn {
  align-self: center;
}

.link-notification {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 12px 16px;
  background: rgba(212, 168, 83, 0.06);
  border-color: rgba(212, 168, 83, 0.15);
}

.link-notification i,
.link-notification svg {
  color: var(--gold);
  flex-shrink: 0;
}

.link-notification strong {
  display: block;
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 2px;
}

.link-notification span {
  font-size: 12px;
  color: var(--gray);
}

/* ========================================
   SECTION 5: CLIENTE
   ======================================== */
.timeline-vertical {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 24px;
}

.timeline-vertical::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(to bottom, var(--glass-border), var(--gold));
}

.tl-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  position: relative;
}

.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--navy-light);
  border: 2px solid var(--gray-dark);
  flex-shrink: 0;
  position: absolute;
  left: -24px;
  z-index: 1;
}

.tl-dot.gold {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(212, 168, 83, 0.5);
  animation: goldDotPulse 2s ease-in-out infinite;
}

@keyframes goldDotPulse {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(212, 168, 83, 0.5);
  }
  50% {
    box-shadow:
      0 0 16px rgba(212, 168, 83, 0.8),
      0 0 24px rgba(212, 168, 83, 0.3);
  }
}

.tl-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray);
}

.tl-content i,
.tl-content svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
}

.tl-content strong {
  color: var(--gold);
}

/* Meeting Card */
.meeting-card {
  width: 100%;
  max-width: 380px;
  overflow: hidden;
}

.meeting-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 14px;
  font-weight: 600;
  font-size: 14px;
}

.meeting-header i,
.meeting-header svg {
  color: var(--gold);
}

.status-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 0 auto;
}

.status-badge.green {
  background: rgba(34, 197, 94, 0.15);
  color: var(--green);
}

.status-badge.yellow {
  background: rgba(234, 179, 8, 0.15);
  color: var(--yellow);
}

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

.meeting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
}

.meeting-label {
  font-size: 12px;
  color: var(--gray-dark);
}

.meeting-value {
  font-size: 13px;
  font-weight: 500;
}

.meeting-amount {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
}

.highlight-row {
  padding: 8px 12px;
  background: var(--gold-dim);
  border-radius: 10px;
  margin-top: 4px;
}

.meeting-footer {
  font-size: 11px;
  color: var(--gray-dark);
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
}

/* ========================================
   SECTION 6: COMISSÕES
   ======================================== */
.comissoes-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1300px;
}

.comissoes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  width: 100%;
}

.comissoes-charts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-card {
  padding: 20px;
}

.chart-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 3px;
}

.chart-subtitle {
  font-size: 12px;
  color: var(--gold);
  font-family: var(--font-mono);
  margin-bottom: 16px;
}

.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bar-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gray);
  min-width: 82px;
  text-align: right;
  flex-shrink: 0;
}

.bar-track {
  flex: 1;
  display: flex;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  gap: 2px;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--white);
  width: 0;
  transition: width 1s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.bar-fill::after {
  content: attr(data-value);
  white-space: nowrap;
}

.bar-fill.company {
  background: linear-gradient(135deg, #2a3a5c, #344566);
}

.bar-fill.partner {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
}

.bar-fill.partner.animated {
  animation: barGlow 2s ease-in-out infinite alternate;
}

@keyframes barGlow {
  0% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 0 8px rgba(212, 168, 83, 0.3);
  }
}

.bar-fill.animated {
  width: var(--width);
}

.chart-legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--gray);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.legend-dot.company {
  background: #344566;
}
.legend-dot.partner {
  background: var(--gold);
}

/* Commission Cards */
.comissoes-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.commission-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.commission-card {
  text-align: center;
  padding: 14px 10px;
  transition: all 0.3s var(--ease-out);
}

.commission-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 168, 83, 0.3);
}

.commission-card.featured {
  border-color: var(--gold);
  background: var(--gold-dim);
  box-shadow: 0 0 20px rgba(212, 168, 83, 0.15);
  animation: featuredPulse 3s ease-in-out infinite;
}

@keyframes featuredPulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(212, 168, 83, 0.15);
  }
  50% {
    box-shadow:
      0 0 30px rgba(212, 168, 83, 0.25),
      0 0 60px rgba(212, 168, 83, 0.08);
  }
}

.commission-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.commission-label {
  font-size: 11px;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.commission-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
}

.commission-value .plus {
  font-size: 16px;
}

.commission-per {
  font-size: 11px;
  color: var(--gray-dark);
  margin-top: 2px;
}

/* Simulator */
.simulator {
  padding: 20px;
}

.simulator-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
}

.simulator-title i,
.simulator-title svg {
  color: var(--gold);
}

.slider-group {
  margin-bottom: 16px;
}

.slider-label {
  font-size: 12px;
  color: var(--gray);
  margin-bottom: 8px;
  display: block;
}

.gold-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
  cursor: pointer;
}

.gold-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  box-shadow: 0 0 12px rgba(212, 168, 83, 0.5);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out);
}

.gold-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.gold-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  box-shadow: 0 0 12px rgba(212, 168, 83, 0.5);
  border: none;
  cursor: pointer;
}

.slider-value {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-top: 8px;
}

.simulator-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  background: var(--gold-dim);
  border-radius: 12px;
  border: 1px solid rgba(212, 168, 83, 0.2);
}

.result-label {
  font-size: 13px;
  color: var(--gray);
}

.result-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  transition: transform 0.15s var(--ease-out);
}

/* Commission Rules */
.commission-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rule {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--gray);
}

.rule i,
.rule svg {
  width: 15px;
  height: 15px;
  color: var(--gold);
  flex-shrink: 0;
}

/* ========================================
   SECTION 7: DASHBOARD
   ======================================== */
.dashboard-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1000px;
}

.dashboard-mockup {
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(212, 168, 83, 0.15);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(212, 168, 83, 0.04);
}

.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--glass-border);
}

.dash-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.dash-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-opa {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  padding: 3px 8px;
  background: var(--gold-dim);
  border-radius: 6px;
}

.dash-logout {
  font-size: 11px;
  color: var(--gray-dark);
  cursor: pointer;
  background: none;
  border: none;
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 20px;
}

.dash-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}

.dash-stat:hover {
  border-color: rgba(212, 168, 83, 0.2);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    0 0 12px rgba(212, 168, 83, 0.06);
  transform: translateY(-2px);
}

.dash-stat.has-chart {
  padding-bottom: 8px;
}

.dash-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: var(--gray);
}

.dash-stat-icon.green {
  color: var(--green);
}
.dash-stat-icon.gold {
  color: var(--gold);
}

.dash-stat-icon i,
.dash-stat-icon svg {
  width: 18px;
  height: 18px;
}

.dash-stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
}

.dash-stat-label {
  font-size: 11px;
  color: var(--gray-dark);
  margin-top: 2px;
}

.dash-copy-btn {
  font-size: 10px;
  color: var(--gold);
  border: 1px solid rgba(212, 168, 83, 0.3);
  border-radius: 6px;
  padding: 3px 8px;
  background: transparent;
  cursor: pointer;
  margin-top: 6px;
}

/* Sparkline in stat card */
.sparkline {
  width: 90%;
  height: 24px;
  margin: 4px auto 0;
  display: block;
}

.sparkline-line {
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  transition: stroke-dashoffset 1.5s var(--ease-out);
}

.sparkline-area {
  opacity: 0;
  transition: opacity 1.5s var(--ease-out);
}

.sparkline-dot {
  opacity: 0;
  transition: opacity 0.5s 1.2s var(--ease-out);
}

.section-inner.visible .sparkline-dot {
  animation: sparkDotPulse 1.5s ease-in-out 2s infinite;
}

@keyframes sparkDotPulse {
  0%,
  100% {
    r: 3;
    filter: drop-shadow(0 0 2px rgba(212, 168, 83, 0.5));
  }
  50% {
    r: 4;
    filter: drop-shadow(0 0 6px rgba(212, 168, 83, 0.8));
  }
}

.section-inner.visible .sparkline-line {
  stroke-dashoffset: 0;
}

.section-inner.visible .sparkline-area {
  opacity: 1;
}

.section-inner.visible .sparkline-dot {
  opacity: 1;
}

/* Donut Chart Row */
.dash-chart-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 0 20px 16px;
  align-items: start;
}

.dash-donut-section {
  text-align: center;
}

.donut-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.donut-chart {
  width: 110px;
  height: 110px;
}

.donut-ring {
  transition: stroke-dashoffset 1.8s var(--ease-out);
  filter: drop-shadow(0 0 3px rgba(212, 168, 83, 0.4));
}

.donut-text {
  opacity: 0;
  transition: opacity 0.5s 1s var(--ease-out);
}

.section-inner.visible .donut-ring {
  stroke-dashoffset: 69.4; /* 209.4 * (1 - 0.667) */
}

.section-inner.visible .donut-text {
  opacity: 1;
}

.donut-chart.donut-glow .donut-ring {
  filter: drop-shadow(0 0 6px rgba(212, 168, 83, 0.5));
  animation: donutGlow 2.5s ease-in-out infinite;
}

@keyframes donutGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(212, 168, 83, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(212, 168, 83, 0.6));
  }
}

.dash-table-section {
  flex: 1;
}

.dash-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dash-section-title i,
.dash-section-title svg {
  width: 14px;
  height: 14px;
  color: var(--gold);
}

.dash-table {
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  overflow: hidden;
}

.dash-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr 0.8fr 0.8fr;
  padding: 8px 14px;
  font-size: 12px;
  border-bottom: 1px solid var(--glass-border);
  align-items: center;
}

.dash-row:last-child {
  border-bottom: none;
}

.dash-row-header {
  background: rgba(255, 255, 255, 0.03);
  font-weight: 600;
  color: var(--gray);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dash-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 20px 16px;
}

.dash-docs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.dash-doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  font-size: 10px;
  color: var(--gray);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.2s var(--ease-out);
}

.dash-doc:hover {
  border-color: rgba(212, 168, 83, 0.2);
  background: rgba(212, 168, 83, 0.04);
}

.dash-doc i,
.dash-doc svg {
  color: var(--gold);
  width: 18px;
  height: 18px;
}

.dash-contract-info p {
  font-size: 12px;
  color: var(--gray);
  margin-bottom: 8px;
}

.dash-contract-actions {
  display: flex;
  gap: 6px;
}

.dash-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--gray);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 5px 10px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}

.dash-btn:hover {
  border-color: rgba(212, 168, 83, 0.3);
  color: var(--gold);
}

.dash-btn i,
.dash-btn svg {
  width: 13px;
  height: 13px;
  color: var(--gold);
}

.dash-teaser {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: rgba(212, 168, 83, 0.04);
  border-top: 1px solid var(--glass-border);
  font-size: 11px;
  color: var(--gray-dark);
  flex-wrap: wrap;
}

.dash-teaser span:first-child {
  font-weight: 600;
  color: var(--gold);
}

.teaser-item {
  padding: 2px 6px;
  background: var(--glass-bg);
  border-radius: 6px;
}

/* ========================================
   SECTION 8: CTA FINAL
   ======================================== */
.cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  max-width: 900px;
}

.cta-glow {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(212, 168, 83, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}

.cta-glow-2 {
  position: absolute;
  bottom: -100px;
  left: 30%;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(212, 168, 83, 0.04) 0%,
    transparent 70%
  );
  pointer-events: none;
  animation: glowPulse 5s ease-in-out infinite reverse;
}

.cta-headline {
  font-size: clamp(1.8rem, 1.3rem + 2.5vw, 2.8rem);
}

.cta-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.cta-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.cta-step-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  transition: all 0.3s var(--ease-out);
}

.cta-step:hover .cta-step-icon {
  border-color: rgba(212, 168, 83, 0.3);
  background: var(--gold-dim);
  color: var(--gold);
  transform: translateY(-2px);
}

.cta-step-icon.gold {
  color: var(--gold);
  background: var(--gold-dim);
  border-color: rgba(212, 168, 83, 0.3);
  box-shadow: 0 0 16px rgba(212, 168, 83, 0.2);
  animation: ctaIconPulse 2s ease-in-out infinite;
}

@keyframes ctaIconPulse {
  0%,
  100% {
    box-shadow: 0 0 16px rgba(212, 168, 83, 0.2);
  }
  50% {
    box-shadow: 0 0 24px rgba(212, 168, 83, 0.35);
  }
}

.cta-step-icon i,
.cta-step-icon svg {
  width: 20px;
  height: 20px;
}

.cta-step-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--white);
}

.cta-step-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gray-dark);
}

.cta-step-arrow {
  color: var(--gold);
  opacity: 0.4;
  margin-top: -20px;
}

.cta-main {
  font-size: 16px;
  padding: 14px 40px;
  margin-bottom: 10px;
  transition: all 0.3s var(--ease-out);
}

.cta-main:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 0 40px rgba(212, 168, 83, 0.5),
    0 8px 30px rgba(0, 0, 0, 0.3),
    0 0 80px rgba(212, 168, 83, 0.12);
}

.cta-note {
  font-size: 13px;
  color: var(--gray-dark);
  margin-bottom: 32px;
}

.cta-secondary {
  margin-bottom: 32px;
}

.cta-secondary p {
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 10px;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s var(--ease-out);
}

.btn-outline:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
  color: var(--gold);
}

.btn-outline i,
.btn-outline svg {
  width: 16px;
  height: 16px;
}

/* Footer */
.onboarding-footer {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--glass-border);

  /* ===== REGISTER FORM (Section 8 — Real Form) ===== */
  .register-card {
    width: 100%;
    max-width: 480px;
    padding: 32px 28px;
    margin-bottom: 24px;
  }

  .register-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--white);
    margin-bottom: 24px;
  }

  .register-header i,
  .register-header svg {
    width: 22px;
    height: 22px;
    color: var(--gold);
  }

  .register-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    color: #f87171;
    font-size: 13px;
    align-items: center;
    gap: 8px;
  }

  .register-error i,
  .register-error svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .register-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 16px;
    color: #4ade80;
    font-size: 15px;
    align-items: center;
    gap: 10px;
    justify-content: center;
    font-weight: 600;
  }

  .register-success i,
  .register-success svg {
    width: 22px;
    height: 22px;
  }

  .reg-field {
    margin-bottom: 16px;
  }

  .reg-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray);
    margin-bottom: 6px;
  }

  .reg-field label i,
  .reg-field label svg {
    width: 14px;
    height: 14px;
    color: var(--gold);
  }

  .reg-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 11px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--white);
    transition:
      border-color 0.3s var(--ease-out),
      box-shadow 0.3s var(--ease-out);
    outline: none;
    box-sizing: border-box;
  }

  .reg-input::placeholder {
    color: rgba(148, 163, 184, 0.4);
  }

  .reg-input:focus {
    border-color: rgba(212, 168, 83, 0.5);
    box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.1);
  }

  .reg-input.error {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
  }

  .field-error {
    display: block;
    font-size: 11px;
    color: #f87171;
    margin-top: 4px;
    min-height: 16px;
  }

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

  .partner-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .partner-pill {
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gray);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
    font-family: var(--font-body);
  }

  .partner-pill:hover {
    border-color: rgba(212, 168, 83, 0.3);
    color: var(--gold);
    background: rgba(212, 168, 83, 0.05);
  }

  .partner-pill.active {
    background: var(--gold-dim);
    border-color: var(--gold);
    color: var(--gold);
    font-weight: 600;
  }

  .register-submit {
    width: 100%;
    font-size: 15px;
    padding: 14px 24px;
    margin-top: 8px;
    position: relative;
  }

  .register-submit span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .register-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
  }

  .reg-spinner {
    display: inline-block;
    vertical-align: middle;
  }

  .register-note {
    font-size: 12px;
    color: var(--gray-dark);
    text-align: center;
    margin-top: 14px;
  }
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.footer-brand {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gray);
  letter-spacing: 0.05em;
}

.footer-address {
  font-size: 11px;
  color: var(--gray-dark);
}

.footer-copy {
  font-size: 11px;
  color: var(--gray-dark);
}

.footer-links {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.footer-links a {
  font-size: 11px;
  color: var(--gray-dark);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--gold);
}

.footer-attribution {
  margin-top: 4px;
}

.footer-attribution a {
  font-size: 10px;
  color: var(--gray-dark);
  text-decoration: none;
  opacity: 0.6;
}

.footer-attribution a:hover {
  opacity: 1;
  color: var(--gold);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
  .two-col {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

  .commission-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .section {
    padding: 50px 24px 80px;
  }

  .dash-bottom {
    grid-template-columns: 1fr;
  }

  .dash-chart-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --mobile-gutter: 16px;
  }

  html {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
  }

  body {
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .particle-canvas {
    opacity: 0.35;
  }

  .scroll-container {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh;
    transform: none !important;
    transition: none !important;
    scroll-snap-type: none !important;
  }

  .section {
    width: 100%;
    min-height: auto;
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 52px var(--mobile-gutter) 64px;
    scroll-snap-align: none !important;
    scroll-snap-stop: none !important;
  }

  #section-0 {
    min-height: 100svh;
    padding-top: 44px;
  }

  .section-inner {
    max-width: 100%;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    padding-top: 0;
  }

  .two-col {
    gap: 22px;
  }

  .col-text,
  .col-visual {
    width: 100%;
    min-width: 0;
  }

  /* font-size fica por conta do clamp() fluido — sem salto no breakpoint.
     (o antigo 2rem daqui ja era codigo morto: sobrescrito pelo bloco v5) */
  .section-headline,
  .hero-headline,
  .cta-headline {
    line-height: 1.08;
  }

  .section-sub,
  .hero-sub {
    line-height: 1.55;
    margin-bottom: 18px;
  }

  .step-badge,
  .hero-badge {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    letter-spacing: 0.08em;
  }

  .hero-content,
  .hero-section {
    width: 100%;
  }

  .hero-section,
  .cta-section {
    overflow-x: hidden;
  }

  .hero-glow,
  .hero-glow-2,
  .cta-glow,
  .cta-glow-2 {
    width: min(360px, 100%);
    height: 360px;
  }

  .hero-glow-2,
  .cta-glow-2 {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .hero-cards {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
  }

  .mini-card {
    width: 100%;
    max-width: 360px;
    flex-direction: row;
    text-align: left;
    padding: 12px 14px;
    gap: 12px;
  }

  .proof-badge {
    width: 100%;
    max-width: 360px;
    align-items: flex-start;
  }

  .form-mockup,
  .contract-preview,
  .link-card,
  .meeting-card,
  .chart-card,
  .simulator,
  .dashboard-mockup {
    width: 100%;
    max-width: 100%;
  }

  .form-mockup,
  .chart-card,
  .simulator {
    padding: 18px;
  }

  .type-pills,
  .trust-badges,
  .partner-pills {
    gap: 8px;
  }

  .pill,
  .trust-badge,
  .partner-pill {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }

  .link-flow {
    flex-direction: column;
    align-items: stretch;
  }

  .flow-step {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }

  .flow-arrow {
    transform: rotate(90deg);
    align-self: center;
  }

  .behind-scenes {
    padding: 14px;
  }

  .timeline-vertical {
    padding-left: 20px;
  }

  .tl-item {
    align-items: flex-start;
    padding: 10px 0;
  }

  .tl-content {
    align-items: flex-start;
    line-height: 1.45;
  }

  .meeting-row {
    gap: 16px;
  }

  .meeting-value {
    text-align: right;
  }

  .comissoes-grid,
  .comissoes-right,
  .comissoes-charts {
    gap: 16px;
  }

  .bar-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px;
  }

  .bar-label {
    min-width: 0;
  }

  .bar-track {
    min-width: 0;
  }

  .chart-legend {
    flex-wrap: wrap;
  }

  .cta-step-arrow {
    display: none;
  }

  .cta-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    overflow: visible;
    overflow-x: visible;
  }

  .cta-step {
    min-width: 0;
    padding: 10px 6px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
  }

  .cta-main,
  .btn-outline {
    width: 100%;
    max-width: 360px;
  }

  .cta-main {
    padding-inline: 18px;
  }

  .cta-note {
    margin-bottom: 20px;
  }

  .cta-secondary {
    width: 100%;
    margin-bottom: 24px;
  }

  .dash-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 14px;
  }

  .dash-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
  }

  .dash-brand {
    line-height: 1.35;
    letter-spacing: 0.06em;
  }

  .dash-chart-row,
  .dash-bottom {
    padding: 0 14px 14px;
    gap: 14px;
  }

  .dash-chart-row > *,
  .dash-bottom > *,
  .dash-table-section {
    min-width: 0;
  }

  .dash-table {
    max-width: 100%;
    overflow: visible;
  }

  .dash-row {
    font-size: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    gap: 8px 10px;
    padding: 12px;
  }

  .dash-row-header {
    display: none;
  }

  .dash-row:not(.dash-row-header) {
    margin: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
  }

  .dash-row:not(.dash-row-header) span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .dash-row:not(.dash-row-header) span::before {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--gray-dark);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .dash-row:not(.dash-row-header) span:nth-child(1)::before {
    content: "Nome";
  }

  .dash-row:not(.dash-row-header) span:nth-child(2)::before {
    content: "Empresa";
  }

  .dash-row:not(.dash-row-header) span:nth-child(3)::before {
    content: "Data";
  }

  .dash-row:not(.dash-row-header) span:nth-child(4)::before {
    content: "Valor";
  }

  .dash-row:not(.dash-row-header) span:nth-child(5)::before {
    content: "Status";
  }

  .dash-row:not(.dash-row-header) span:nth-child(5) {
    align-items: flex-start;
  }

  .commission-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .commission-card {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    text-align: left;
    column-gap: 12px;
  }

  .commission-icon {
    margin-bottom: 0;
  }

  .commission-value {
    grid-column: 3;
    grid-row: 1 / span 2;
    text-align: right;
  }

  .commission-per {
    grid-column: 2;
  }

  .commission-value {
    font-size: 18px;
  }

  .result-value {
    font-size: 20px;
  }

  .trust-badges {
    flex-direction: column;
  }

  .simulator-result {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  .onboarding-footer {
    padding-bottom: 24px;
  }

  /* Register form mobile */
  .register-card {
    padding: 20px 16px;
    max-width: 100%;
  }

  .reg-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .partner-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .register-submit {
    font-size: 13px;
    padding: 10px 18px;
  }
}

/* === MOBILE: AJUSTES DE ESPACAMENTO ===
   O layout vertical virou o padrao (regras base), entao aqui sobrou apenas
   o que e de fato especifico de tela pequena. Os overrides antigos de
   opacity/transform em .section-inner foram removidos: eles usavam
   !important e desligavam a animacao de revelacao no mobile. */
@media (max-width: 768px) {
  .section {
    padding: 52px var(--mobile-gutter) 64px;
  }

  .section-inner {
    padding-top: 0;
  }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .scroll-container {
    transition-duration: 0.01ms !important;
  }

  .particle-canvas {
    display: none;
  }

  .anim-item {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ============================================================
   CAMADA V5/V6/V6b — portada do redesign aprovado (Standalone)
   Sobrescreve a base. Nao editar acima desta linha para o hero.
   ============================================================ */
/* ===== V5 — identidade OffshoreProz premium ===== */
:root{
  --navy:#070E1D;--navy-light:#16233F;--navy-mid:#0C1730;
  --gold:#D6AE4C;--gold-light:#EED88F;--gold-dim:rgba(214,175,66,.12);
  --font-body:'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-mono:'DM Mono',monospace;
  --glass-bg:rgba(255,255,255,.045);--glass-border:rgba(222,187,92,.16);--glass-hover:rgba(214,175,66,.08)}
body{background:radial-gradient(1400px 900px at 72% -12%,#16233F 0%,#0C1730 44%,#070E1D 100%)}
#goldLines{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.85}
.particle-canvas{display:none}
.gold-gradient{background:linear-gradient(135deg,#F5E3A5,#DDB44A,#F5E3A5);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-headline{font-weight:600;font-size:clamp(2.1rem,1rem + 3.8vw,3.5rem);letter-spacing:.005em;line-height:1.06;text-shadow:none}
/* Quebra o H1 no ponto final entre as duas frases, em vez de deixar o wrap
   natural cortar "sobre / offshore." e orfanar "remunerado". No mobile volta a
   fluir normalmente, senao cada frase vira um bloco estreito demais. */
.hero-headline .hl-line{display:inline}
@media (min-width:768px){
  .hero-headline .hl-line{display:block}
  /* .hero-content trava em 760px e a 1a frase precisa de ~779px no tamanho
     maximo do clamp, orfanando "offshore." sozinha na linha. Alarga so o H1
     (headline mais larga que o corpo e proposital), sem mexer em sub e cards. */
  .hero-headline{margin-inline:-32px;max-width:none}
}
.section-headline{font-weight:600;font-size:clamp(1.9rem,1.3rem + 2.1vw,2.9rem);letter-spacing:.005em;line-height:1.08}
.cta-headline{font-size:clamp(2.2rem,1.6rem + 2.6vw,3.4rem)}
.hero-badge,.step-badge{font-size:10.5px;letter-spacing:.2em;border-color:rgba(214,175,66,.35);background:rgba(214,175,66,.08)}
.v5-mark{width:72px;height:72px;margin:0 auto 16px;line-height:0}
/* Icones inline do helper icon(). A classe .ico era emitida no HTML mas nunca
   existiu aqui, entao os SVGs caiam no default do spec (100% do container).
   Dimensionar em `em` faz o icone acompanhar o font-size do contexto (botao,
   label, badge). flex:none impede que o flex container o estique. */
.ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.15em}
.v5-mark svg,[data-mark] svg{width:100%;height:100%;overflow:visible}
.btn-gold{background:linear-gradient(135deg,#F0D179 0%,#DDB44A 52%,#C6982E 100%);color:#181F31;border-radius:12px;box-shadow:0 10px 22px -12px rgba(198,152,46,.6),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-gold:hover{box-shadow:0 14px 26px -12px rgba(198,152,46,.75),inset 0 1px 0 rgba(255,255,255,.5)}
.shimmer-btn:hover{box-shadow:0 0 40px rgba(214,175,66,.45),0 0 80px rgba(214,175,66,.14)}
.glass-card{border-radius:16px}
.form-header{font-size:20px;font-weight:600;letter-spacing:.01em}
.contract-title{font-size:15px;font-weight:600;letter-spacing:.04em}
.register-header{font-size:20px;font-weight:600}
.chart-title,.simulator-title{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:.01em}
.commission-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 auto 8px;border-radius:12px;background:linear-gradient(150deg,#1A2A47,#0F1B33);border:1px solid rgba(214,175,66,.45);box-shadow:inset 0 0 12px rgba(214,175,66,.16);color:var(--gold)}
.commission-icon svg{width:20px;height:20px}
.bar-fill.company{background:linear-gradient(135deg,#22345A,#2C4270)}
.mini-title{font-size:13px}
.dash-brand{gap:10px}
.footer-links a:hover{color:var(--gold-light)}
@media(max-width:768px){.commission-icon{margin:0}.v5-mark{width:58px;height:58px}}


/* ===== V6 — logo animada, contraste e conversão ===== */
:root{--gray:#A9B5C9;--gray-dark:#8C99AF}
.v5-arcspin{transform-origin:48px 48px;animation:v5spin 9s linear infinite}
@keyframes v5spin{to{transform:rotate(360deg)}}
.v5-mark .ringdraw{stroke-dasharray:276.5;stroke-dashoffset:276.5;animation:v5ring 1.5s cubic-bezier(.65,0,.25,1) .25s forwards}
@keyframes v5ring{to{stroke-dashoffset:0}}
.v5-mark{filter:drop-shadow(0 0 24px rgba(214,175,66,.3))}
.article{color:#93A2BC}
.flow-label,.mini-desc,.behind-scenes li{color:#AEB9CC}
.link-url code{color:#B9C4D6}
.proof-text,.cta-note{color:var(--gray)}
.sticky-cta{position:fixed;top:16px;right:18px;z-index:120;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-family:var(--font-body);font-size:13px;font-weight:700;color:#181F31;text-decoration:none;background:linear-gradient(135deg,#F0D179,#DDB44A 52%,#C6982E);box-shadow:0 10px 24px -10px rgba(198,152,46,.65),inset 0 1px 0 rgba(255,255,255,.45);transition:opacity .35s ease,transform .35s ease}
.sticky-cta:hover{transform:translateY(-1px)}
.sticky-cta.hidden{opacity:0;pointer-events:none;transform:translateY(-6px)}
.sticky-cta svg{width:14px;height:14px}
@media(max-width:768px){.sticky-cta{top:auto;bottom:14px;right:14px}}
@media(prefers-reduced-motion:reduce){.v5-arcspin,.v5-mark .ringdraw{animation:none}.v5-mark .ringdraw{stroke-dashoffset:0}}


/* ===== V6b — hero compacto APENAS em celular deitado =====
   Era global (max-height:760px) na época do deck horizontal, quando o hero
   tinha de caber numa viewport travada. Como agora a landing é vertical e
   rola, isso só penalizava laptops (viewport ~705px) travando o h1 em 40px,
   menor que os h2 de 46px. Mantido apenas para landscape em telas pequenas. */
@media (max-height: 760px) and (orientation: landscape) and (max-width: 926px){
  .v5-mark{width:52px;height:52px;margin-bottom:8px}
  .hero-headline{font-size:clamp(1.7rem,.9rem + 2.6vw,2.5rem);margin-bottom:4px}
  .hero-sub{margin-bottom:8px}
  .hero-cards{margin-bottom:10px}
  .mini-card{padding:9px 12px;width:168px}
  .hero-social-proof{margin-bottom:10px;gap:5px}
  .proof-badge{padding:6px 12px}
  #section-0 .btn-gold{padding:11px 24px;font-size:14px}
  .hero-badge{margin-bottom:4px}
  #section-0 .anim-item[style*="margin-bottom:14px"]{margin-bottom:8px !important}
}

/* V6c — mobile baixo (390x740): mini-cards viram linhas full-width.
   3 cards empilhados a 168px de largura estouravam a altura e o texto
   quebrava em 3 linhas; em grid "icone | titulo/desc" cabe tudo sem corte. */
@media (max-width: 480px){
  #section-0.section{padding-top:16px !important;padding-bottom:40px !important}
  #section-0 .v5-mark{width:42px !important;height:42px !important;margin-bottom:6px !important}
  #section-0 .hero-badge{margin-bottom:3px !important}
  #section-0 .hero-sub{font-size:.85rem !important;margin-bottom:6px !important}
  #section-0 .hero-cards{gap:6px !important;margin-bottom:8px !important;width:100% !important;align-items:stretch !important}
  #section-0 .mini-card{
    width:100% !important;max-width:none !important;
    display:grid !important;grid-template-columns:auto 1fr !important;
    grid-template-areas:"icon title" "icon desc" !important;
    align-items:center !important;column-gap:11px !important;row-gap:0 !important;
    text-align:left !important;padding:8px 13px !important;
  }
  #section-0 .mini-icon{grid-area:icon !important;margin:0 !important}
  #section-0 .mini-title{grid-area:title !important}
  #section-0 .mini-desc{grid-area:desc !important}
  #section-0 .hero-social-proof{margin-bottom:4px !important;gap:4px !important}
  #section-0 .anim-item[style*="margin-bottom:14px"]{margin-bottom:8px !important}
  #section-0 .anim-item[style*="margin-bottom:12px"]{margin-bottom:8px !important}
}
@media (max-height: 640px) and (orientation: landscape) and (max-width: 926px){
  .hero-section{overflow-y:auto;max-height:100%;padding:10px 0 74px}
  .v5-mark{width:42px;height:42px;margin-bottom:5px}
  #section-0 .hero-content > div:first-child{display:none}
  .hero-social-proof{display:none}
  .hero-headline{font-size:1.6rem;margin-bottom:3px}
  .hero-sub{font-size:.85rem;margin-bottom:8px}
  .hero-badge{font-size:9px;padding:4px 10px}
  .hero-cards{margin-bottom:8px;gap:8px}
  .mini-card{padding:7px 10px;width:158px}
  .mini-icon{width:30px;height:30px}
  .cta-arrow{font-size:13px}
  #section-0 .btn-gold{padding:10px 22px;font-size:13.5px}
}
@media (max-height: 760px) and (min-width: 769px){
}


  /* Ativado só se o JS/CDN não rodar — garante que o layout seja visível */
  html.sem-animacao .anim-item,
  html.sem-animacao .section-inner .anim-item {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
  html.sem-animacao .section-inner { opacity: 1 !important; }


  .anim-item { opacity: 1 !important; transform: none !important; }
  .section-inner { opacity: 1 !important; }

/* ========================================================================
   FLOAT — "15 min confidenciais" (trilha high-touch do funil)
   ------------------------------------------------------------------------
   O .sticky-cta do topo serve o autosserviço (cadastro grátis, imediato).
   Este bloco serve o perfil oposto e dominante neste nicho: contador ou
   advogado que põe a própria reputação em jogo ao indicar um cliente e
   por isso quer falar com uma pessoa ANTES de assinar qualquer coisa.
   Duas trilhas, dois públicos — não é CTA duplicado.

   Aparece só após 12% de rolagem (quem não leu nada ainda não tem contexto
   para agendar), é dispensável, e a dispensa persiste 30 dias em
   localStorage para não hostilizar quem já disse não.
   ======================================================================== */
.float-meet{
  position:fixed;right:20px;bottom:20px;z-index:130;width:312px;
  padding:16px 17px 15px;border-radius:16px;
  background:linear-gradient(158deg,rgba(23,34,58,.97),rgba(12,20,38,.97));
  border:1px solid rgba(212,168,83,.28);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;
  transition:opacity .42s var(--ease-out),transform .42s var(--ease-out);
}
.float-meet.is-open{opacity:1;transform:none;pointer-events:auto}
.float-meet-eyebrow{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-mono),monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(212,168,83,.85);margin-bottom:9px;
}
.float-meet-eyebrow::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--gold,#d4a853);
  box-shadow:0 0 0 3px rgba(212,168,83,.18);animation:floatPulse 2.6s ease-in-out infinite;
}
@keyframes floatPulse{0%,100%{opacity:1}50%{opacity:.35}}
.float-meet-title{
  font-family:var(--font-display),sans-serif;font-size:16.5px;font-weight:600;
  line-height:1.25;color:#fff;margin-bottom:6px;letter-spacing:.005em;
}
.float-meet-desc{
  font-size:12.6px;line-height:1.5;color:rgba(255,255,255,.62);margin-bottom:13px;
}
.float-meet-cta{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  padding:11px 16px;border-radius:10px;text-decoration:none;
  font-size:13.5px;font-weight:700;color:#161d2e;
  background:linear-gradient(135deg,#f0d179,#ddb44a 52%,#c6982e);
  box-shadow:0 10px 22px -10px rgba(198,152,46,.7),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out);
}
.float-meet-cta:hover{transform:translateY(-1.5px);box-shadow:0 14px 26px -10px rgba(198,152,46,.8),inset 0 1px 0 rgba(255,255,255,.5)}
.float-meet-cta svg{width:14px;height:14px}
.float-meet-note{
  margin-top:9px;text-align:center;font-size:10.8px;color:rgba(255,255,255,.42);
}
.float-meet-close{
  position:absolute;top:9px;right:9px;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:7px;cursor:pointer;background:transparent;
  color:rgba(255,255,255,.4);font-size:15px;line-height:1;
  transition:color .2s,background .2s;
}
.float-meet-close:hover{color:#fff;background:rgba(255,255,255,.08)}

/* Mobile: vira barra inferior. O .sticky-cta também mora no rodapé em
   telas pequenas, então ele sai de cena para não empilhar dois CTAs
   flutuantes um sobre o outro. */
@media (max-width:768px){
  .float-meet{
    left:10px;right:10px;bottom:10px;width:auto;
    padding:12px 13px;border-radius:14px;
  }
  .float-meet-title{font-size:15px}
  .float-meet-desc{font-size:12px;margin-bottom:11px}
  body.has-float .sticky-cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  .float-meet{transition:opacity .2s linear;transform:none}
  .float-meet-eyebrow::before{animation:none}
}

/* ============================================================
   FAQ / AEO — acordeão nativo <details> com animação CSS pura
   ============================================================ */

/* permite animar height:auto (Chrome 129+/Safari 26+) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}

/* a seção do FAQ cresce com o conteúdo (base .section usa overflow:hidden) */
.section-faq {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

.faq-section { max-width: 880px; }

.faq-list {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.022);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    border-color 0.35s var(--ease-out),
    background 0.35s var(--ease-out),
    transform 0.35s var(--ease-out);
}

.faq-item:hover { border-color: rgba(212, 168, 83, 0.28); }

.faq-item[open] {
  border-color: rgba(212, 168, 83, 0.4);
  background: rgba(212, 168, 83, 0.045);
}

/* filete dourado à esquerda quando aberto */
.faq-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-light));
  opacity: 0;
  transform: scaleY(0.3);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.faq-item[open]::before { opacity: 1; transform: scaleY(1); }

.faq-q {
  list-style: none;
  cursor: pointer;
  padding: 21px 60px 21px 26px;
  font-size: 1.03rem;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.94);
  transition: color 0.25s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--gold-light); }
.faq-item[open] .faq-q { color: var(--gold-light); }

.faq-q:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 16px;
}

/* chevron */
.faq-q::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 27px;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.65;
  transition: transform 0.35s var(--ease-out), opacity 0.25s var(--ease-out);
}
.faq-item[open] .faq-q::after {
  transform: rotate(-135deg) translate(-3px, -3px);
  opacity: 1;
}

.faq-a {
  padding: 0 26px 24px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.95rem;
  line-height: 1.72;
}
.faq-a p + p { margin-top: 12px; }
.faq-a strong { color: rgba(255, 255, 255, 0.92); font-weight: 600; }

/* animação de abertura sem JS */
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.4s var(--ease-out),
    content-visibility 0.4s allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }

@media (max-width: 768px) {
  .faq-list { margin-top: 32px; }
  .faq-q { padding: 18px 52px 18px 20px; font-size: 0.97rem; }
  .faq-q::after { right: 20px; top: 24px; }
  .faq-a { padding: 0 20px 20px; font-size: 0.91rem; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item::before,
  .faq-q,
  .faq-q::after,
  .faq-item::details-content { transition: none !important; }
}

/* ============================================================
   ACABAMENTO MODERNO — grain premium + spotlight nos cards
   ============================================================ */

/* Textura de filme sobre a página inteira. Quebra o "digital chapado"
   dos gradientes escuros e disfarça banding em telas 8-bit. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.038;
  mix-blend-mode: overlay;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Spotlight dourado que segue o cursor dentro de cada card de vidro. */
.glass-card {
  position: relative;
  isolation: isolate;
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 0%),
    rgba(212, 168, 83, 0.11),
    rgba(212, 168, 83, 0.04) 40%,
    transparent 68%
  );
}

@media (hover: hover) {
  .glass-card:hover::before { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .glass-card::before { transition: none; }
}