/* ===========================================================================
   Real Designs — style.css
   Bold Geometric: zero gradientes, borders pretos grossos, tipografia gigante,
   shadows offset sólidos (sem blur), sem border-radius (exceto 2px).
   =========================================================================== */

/* ---- Globals: selection, scrollbar, noise overlay ------------------------- */

::selection { background: var(--color-accent-primary); color: var(--color-text-inverse); }

html { scrollbar-color: var(--color-accent-primary) var(--color-bg-primary); }
::-webkit-scrollbar         { width: 8px; height: 8px; }
::-webkit-scrollbar-track   { background: var(--color-bg-primary); }
::-webkit-scrollbar-thumb   { background: var(--color-accent-primary); }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent-primary-dark); }

.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: multiply;
  z-index: 50;
}
.noise-overlay svg { width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  .noise-overlay { opacity: 0.04; }
}

/* ---- Layout primitives ---------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-x);
}

.section {
  padding-block: var(--space-8);
  position: relative;
}

.section--dark {
  background: var(--color-bg-secondary);
  color: var(--color-text-inverse);
}

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

.section--bordered { border-top: var(--border-thin); }

/* ---- Header (sticky) ------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg-primary);
  border-bottom: var(--border-thin);
  padding: 14px var(--container-pad-x);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transform: translateY(0);
  will-change: transform;
  animation: header-drop 720ms var(--ease-poster) both;
}

@keyframes header-drop {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

/* Subtle hard shadow only after scrolling past the header — wired by JS. */
.site-header.is-scrolled {
  box-shadow: 0 2px 0 #1E1E1E;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  transition: transform var(--duration-base) var(--ease-out);
  opacity: 0;
  animation: header-item-in 600ms var(--ease-poster) 180ms forwards;
}

.site-header__logo:hover {
  transform: rotate(-1.5deg) translateX(-1px);
}

.site-header__logo img {
  height: clamp(40px, 5vw, 64px);
  width: auto;
  display: block;
}

/* Middle nav floats right, sitting tight against the CTA. */
.site-header__nav {
  display: none;
  margin-left: auto;
  gap: clamp(18px, 2vw, 28px);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .site-header__nav { display: flex; align-items: center; }
}

.site-header__nav a {
  position: relative;
  padding-block: 4px;
  opacity: 0;
  animation: header-item-in 560ms var(--ease-poster) forwards;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-header__nav a:nth-child(1) { animation-delay: 260ms; }
.site-header__nav a:nth-child(2) { animation-delay: 320ms; }
.site-header__nav a:nth-child(3) { animation-delay: 380ms; }
.site-header__nav a:nth-child(4) { animation-delay: 440ms; }

.site-header__nav a:hover {
  color: var(--color-accent-primary);
}

.site-header__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 2px;
  width: 0;
  background: var(--color-accent-primary);
  transition: width var(--duration-base) var(--ease-out);
}

.site-header__nav a:hover::after,
.site-header__nav a:focus-visible::after {
  width: 100%;
}

/* High-contrast header CTA: burnt-red fill, thick black border, live dot,
   solid offset shadow on hover. Built off-button (not .btn) so the in-header
   sizing and personality live in one place. */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: clamp(8px, 1.5vw, 16px);
  padding: clamp(12px, 1.4vw, 16px) clamp(20px, 2.2vw, 28px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 1.05vw, 16px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-primary);
  background: var(--color-accent-primary);
  border: var(--border-thick);
  border-radius: var(--radius-sharp);
  position: relative;
  opacity: 0;
  animation: header-item-in 600ms var(--ease-poster) 520ms forwards;
  transition: transform 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out),
              background 200ms var(--ease-out),
              color 200ms var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 #1E1E1E;
  background: #1E1E1E;
  color: var(--color-accent-primary);
}

.site-header__cta:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 4px;
}

.site-header__cta:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 #1E1E1E;
}

.site-header__cta .arrow {
  display: inline-block;
  font-size: 1.15em;
  transition: transform var(--duration-fast) var(--ease-out);
}

.site-header__cta:hover .arrow {
  transform: translateX(4px);
}

.site-header__cta-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: #1E1E1E;
  border-radius: 50%;
  box-shadow: 0 0 0 0 currentColor;
  animation: cta-pulse 1.8s ease-in-out infinite;
}

.site-header__cta:hover .site-header__cta-dot {
  background: var(--color-accent-primary);
}

@keyframes cta-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.55); opacity: 0.35; }
}

@keyframes header-item-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__logo,
  .site-header__nav a,
  .site-header__cta,
  .site-header__cta-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 18px 28px;
  border: var(--border-thin);
  border-radius: var(--radius-sharp);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
}

.btn--primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--color-bg-secondary);
  color: var(--color-text-inverse);
  border: var(--border-thin);
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
  isolation: isolate;
  cursor: pointer;
}

.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  transform: translateX(-100%);
  transition: transform var(--duration-base) var(--ease-out);
  z-index: -1;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  color: var(--color-accent-primary);
}

.btn--primary:hover::before,
.btn--primary:focus-visible::before {
  transform: translateX(0);
}

.btn--primary:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.btn--primary:active {
  transform: translateY(1px);
}

/* Inverted variant for use on dark backgrounds */
.btn--primary.on-dark {
  background: var(--color-bg-primary);
  color: var(--color-bg-secondary);
  border-color: var(--color-bg-primary);
}

.btn--primary.on-dark:hover,
.btn--primary.on-dark:focus-visible {
  color: var(--color-accent-primary);
}

/* Disabled (used by #pay-button before the legal checkbox is ticked) */
.btn--primary[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--primary[aria-disabled="true"]::before {
  transform: translateX(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary,
  .btn--primary::before {
    transition: none;
  }
}

.btn--secondary {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.btn--secondary:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-inverse);
}

.btn--ghost {
  background: transparent;
  border: var(--border-thin);
}

.btn--ghost:hover {
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
}

.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn .arrow { font-size: 1.2em; transition: transform var(--duration-fast); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---- Ambient — gradient blobs --------------------------------------------- */

.blob-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.blob {
  position: absolute;
  display: block;
  width: 65%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  filter: blur(120px);
  mix-blend-mode: multiply;
  opacity: 0.55;
  will-change: transform;
}

.blob--warm {
  background: var(--color-blob-warm);
  top: -15%;
  left: -10%;
}

.blob--pink {
  background: var(--color-blob-pink);
  bottom: -10%;
  right: -5%;
}

@media (prefers-reduced-motion: reduce) {
  .blob {
    opacity: 0.35; /* slightly calmer when motion is off */
  }
}

/* ---- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--color-bg-secondary);
  color: var(--color-text-inverse);
  padding: clamp(96px, 12vh, 160px) 0 clamp(64px, 8vh, 120px);
  overflow: hidden;
  isolation: isolate;
}

.hero .container {
  position: relative;
  z-index: 1;
}

/* WebGL fluid field — sits behind everything, above the section background.
   Hidden by default; .has-webgl on <html> reveals it and hides .blob-field. */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease-poster);
  pointer-events: none;
}

.has-webgl .hero__canvas { opacity: 1; }
.has-webgl [data-hero-blobs] { display: none; }

/* Cinematic boot — hold the canvas dark, then ignite. */
.hero--booting .hero__canvas { opacity: 0; transition: none; }
.hero--booting .hero__eyebrow,
.hero--booting .hero__headline,
.hero--booting .hero__sub,
.hero--booting .hero__cta-row,
.hero--booting .hero__avatars,
.hero--booting .hero__microproof {
  opacity: 0;
  transform: translateY(28px);
}

.hero__eyebrow,
.hero__headline,
.hero__sub,
.hero__cta-row,
.hero__avatars,
.hero__microproof {
  transition:
    opacity 900ms var(--ease-poster),
    transform 900ms var(--ease-poster);
}

.hero:not(.hero--booting) .hero__eyebrow    { transition-delay: 80ms; }
.hero:not(.hero--booting) .hero__headline   { transition-delay: 220ms; }
.hero:not(.hero--booting) .hero__sub        { transition-delay: 520ms; }
.hero:not(.hero--booting) .hero__cta-row    { transition-delay: 640ms; }
.hero:not(.hero--booting) .hero__avatars    { transition-delay: 780ms; }
.hero:not(.hero--booting) .hero__microproof { transition-delay: 880ms; }

/* Scroll-driven hero tightening — Chrome/Safari/Edge. Firefox falls back to
   the static headline + IntersectionObserver reveal already in place. */
@supports (animation-timeline: scroll()) {
  .has-webgl .hero__headline {
    animation: hero-tighten linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
  @keyframes hero-tighten {
    0%   { letter-spacing: -0.05em; transform: translateY(0)   scale(1); }
    100% { letter-spacing: -0.075em; transform: translateY(-32px) scale(0.97); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__canvas { display: none; }
  .has-webgl [data-hero-blobs] { display: block; }
  .hero--booting .hero__eyebrow,
  .hero--booting .hero__headline,
  .hero--booting .hero__sub,
  .hero--booting .hero__cta-row,
  .hero--booting .hero__avatars,
  .hero--booting .hero__microproof {
    opacity: 1;
    transform: none;
  }
}

.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--color-text-inverse);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-5);
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 11vw, 200px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-5);
  max-width: 16ch;
}

.hero__headline .accent {
  color: var(--color-accent-primary);
  white-space: nowrap;
}

.hero__sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.4;
  color: var(--color-text-inverse);
  opacity: 0.82;
  max-width: 52ch;
  margin: 0 0 var(--space-6);
}

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

.hero__avatars {
  display: flex;
  align-items: center;
  margin-top: var(--space-5);
}

.hero__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--color-text-inverse);
  display: inline-block;
  margin-left: -10px;
  object-fit: cover;
  background: var(--color-text-inverse);
}

.hero__avatar:first-child {
  margin-left: 0;
}

.hero__microproof {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-text-inverse);
  opacity: 0.7;
}

.hero__microproof strong {
  font-weight: 700;
  opacity: 1;
}

/* ---- Marquee -------------------------------------------------------------- */

.marquee {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border-top: 1px solid var(--color-text-primary);
  border-bottom: 1px solid var(--color-text-primary);
  overflow: hidden;
  padding-block: 18px;
  position: relative;
  white-space: nowrap;
  user-select: none;
}

.marquee__track {
  display: inline-flex;
  gap: 48px;
  animation: marquee-scroll 28s linear infinite;
  padding-right: 48px;
}

.marquee__item {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 36px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: inherit;
}

.marquee__sep {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 36px);
  color: inherit;
  opacity: 0.45;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

.marquee--dark {
  background: var(--color-bg-secondary);
  color: var(--color-text-inverse);
  border-top-color: var(--color-text-inverse);
  border-bottom-color: var(--color-text-inverse);
}

.marquee--magenta {
  background: var(--color-bg-primary);
  color: var(--color-accent-primary);
  border-top: 1px solid var(--color-text-primary);
  border-bottom: 1px solid var(--color-text-primary);
}

/* ---- Section heading ------------------------------------------------------ */

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  padding: 6px 14px;
  border: var(--border-thin);
  margin-bottom: var(--space-3);
}

.section-title {
  font-size: var(--font-display-lg);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
  max-width: 16ch;
}

.section-title .accent { color: var(--color-accent-primary); }

.section-lead {
  font-size: var(--font-body-lg);
  max-width: 60ch;
  margin-bottom: var(--space-5);
  color: var(--color-text-primary);
}

/* ---- Mockup gallery / Exemplos ------------------------------------------- */

/* Header: title + 3-up stats strip, separated by a thin rule. */
.exemplos-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: end;
  border-bottom: var(--border-thin);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
}
.exemplos-head__intro { min-width: 0; }
.exemplos-head__intro .section-title { margin-bottom: 0; }

.exemplos-head__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: var(--space-4);
  align-items: end;
}
.exemplos-head__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: var(--space-3);
  border-left: var(--border-thin);
  line-height: 1;
}
.exemplos-head__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 4.5vw, 64px);
  letter-spacing: -0.04em;
  color: var(--color-accent-primary);
  line-height: 0.85;
}
.exemplos-head__num small {
  font-size: 0.5em;
  font-weight: 700;
  margin-left: 0.05em;
  vertical-align: 0.3em;
}
.exemplos-head__lbl {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (max-width: 1023px) {
  .exemplos-head { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 567px) {
  .exemplos-head__stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .exemplos-head__stats li { padding-left: var(--space-2); }
  .exemplos-head__num { font-size: clamp(32px, 9vw, 48px); }
  .exemplos-head__lbl { font-size: 10px; letter-spacing: 0.08em; }
}

/* Editorial 12-col rhythm: row 1 = 7+5, row 2 = 5+7, row 3 = 6+6.
   No margin-top offset — each card sits in its row honestly.
   align-items: start so cards keep their natural height instead of stretching
   to the tallest sibling (which would leave empty space inside shorter cards). */
.mockup-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-5) var(--space-4);
  align-items: start;
}

.mockup-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.mockup-card--7 { grid-column: span 7; }
.mockup-card--5 { grid-column: span 5; }
.mockup-card--6 { grid-column: span 6; }

/* Corner numeral overlaps the media's top-left to anchor each card */
.mockup-card__num {
  position: absolute;
  top: -10px;
  left: -6px;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--color-text-primary);
  background: var(--color-bg-muted);
  padding: 2px 8px 0;
  pointer-events: none;
  transition: color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.mockup-card:hover .mockup-card__num {
  color: var(--color-accent-primary);
  transform: translate(-2px, -2px) rotate(-2deg);
}

.mockup-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border: var(--border-thin);
  background: var(--color-bg-primary);
  aspect-ratio: 4 / 5;
}
/* Aspect ratio per card width: wide cards landscape-ish, narrow cards portrait */
.mockup-card--7 .mockup-card__media { aspect-ratio: 16 / 11; }
.mockup-card--6 .mockup-card__media { aspect-ratio: 5 / 4; }
.mockup-card--5 .mockup-card__media { aspect-ratio: 4 / 5; }

.mockup-card__media img,
.mockup-card__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--duration-base) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.mockup-card:hover .mockup-card__media img,
.mockup-card:hover .mockup-card__media svg {
  filter: grayscale(0) contrast(1);
  transform: scale(1.04);
}

.mockup-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  background: var(--color-accent-tertiary);
  color: var(--color-bg-secondary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
  pointer-events: none;
}
.mockup-card:hover .mockup-card__badge {
  opacity: 1;
  transform: translateY(0);
}

.mockup-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-hair);
  transition: border-color var(--duration-base) var(--ease-out);
}
.mockup-card:hover .mockup-card__meta {
  border-bottom-color: var(--color-accent-primary);
}
.mockup-card__meta-text { min-width: 0; }

.mockup-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.mockup-card__sector,
.mockup-card__category {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Arrow hint: slides in from the left on hover, anchored to the meta row */
.mockup-card__hint {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 28px);
  color: var(--color-accent-primary);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.mockup-card:hover .mockup-card__hint {
  opacity: 1;
  transform: translateX(0);
}

.mockup-card__tagline {
  margin: var(--space-2) 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-muted);
  max-width: 42ch;
}

.mockups-note {
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
}
.mockups-note strong { color: var(--color-text-primary); }

@media (max-width: 767px) {
  .mockup-grid { gap: var(--space-4) var(--space-3); }
  .mockup-card--7,
  .mockup-card--5,
  .mockup-card--6 { grid-column: span 12; }
  .mockup-card--7 .mockup-card__media,
  .mockup-card--6 .mockup-card__media,
  .mockup-card--5 .mockup-card__media { aspect-ratio: 4 / 5; }
}

/* ===========================================================================
   GARANTIAS — 4 flat cards (top border only)
   =========================================================================== */
.guarantees-grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.guarantee-card {
  position: relative;
  padding: var(--space-4) 0 var(--space-3);
  border-top: var(--border-thin);
  background: transparent;
  transition: transform var(--duration-base) var(--ease-out);
}

.guarantee-card:hover {
  transform: translateY(-3px);
}

.guarantee-card__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-accent-primary);
  margin-bottom: var(--space-3);
}

.guarantee-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}

.guarantee-card__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 1023px) { .guarantees-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 567px)  { .guarantees-grid { grid-template-columns: 1fr; } }

/* ===========================================================================
   FAQ — accordion, flat brutalist with hairline dividers
   =========================================================================== */
.faq {
  margin-top: var(--space-6);
  max-width: 880px;
  margin-inline: auto;
}

.faq__item {
  border-top: var(--border-thin);
  padding-block: 0;
  background: transparent;
}

.faq__item:last-child {
  border-bottom: var(--border-thin);
}

.faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  transition: color var(--duration-fast) var(--ease-out);
}

.faq__trigger:hover { color: var(--color-accent-primary); }

.faq__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--color-accent-primary);
  background: transparent;
  border: 0;
  transition: transform var(--duration-base) var(--ease-out);
}

.faq__item[open] .faq__icon { transform: rotate(45deg); }

.faq__body {
  padding: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 64ch;
}

.faq__body p + p { margin-top: 12px; }

/* Reset default details/summary styles */
.faq__item summary { list-style: none; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }

/* ---- Final CTA ------------------------------------------------------------ */

.final-cta,
#checkout {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding-block: var(--space-10);
  background: var(--color-bg-secondary);
  color: var(--color-text-inverse);
}

.final-cta .container,
#checkout .container {
  position: relative;
  z-index: 1;
}

.final-cta__title {
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-3);
}

.final-cta__title .accent { color: var(--color-accent-primary); }

.final-cta__sub {
  font-family: var(--font-body);
  font-size: var(--font-body-lg);
  color: var(--color-text-inverse);
  max-width: 50ch;
  margin: 0 auto var(--space-4);
  opacity: 0.9;
}

/* ---- Legal checkbox / form ------------------------------------------------ */

.legal-checkbox {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  border: var(--border-thick);
  padding: var(--space-3);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-hard);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 auto var(--space-4);
  max-width: 720px;
  text-align: left;
}

.legal-checkbox strong { color: var(--color-text-primary); }

.legal-checkbox input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  accent-color: var(--color-accent-primary);
  cursor: pointer;
}

.legal-checkbox ul {
  margin-top: 8px;
  margin-left: 18px;
  list-style: disc;
}

.legal-checkbox li + li { margin-top: 4px; }

.legal-checkbox label { cursor: pointer; }

/* ---- Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  padding-block: var(--space-6) 0;
  border-top: var(--border-thin);
  position: relative;
  overflow: hidden;
}

.footer-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-5);
}

@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.footer-col h3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.footer-col h3::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--color-accent-primary);
  flex-shrink: 0;
}

.footer-col a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding-block: 5px;
  font-size: 14px;
  color: var(--color-text-primary);
  opacity: 0.85;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              gap var(--duration-fast) var(--ease-out);
}

.footer-col a::before {
  content: "→";
  display: inline-block;
  width: 0;
  overflow: hidden;
  font-weight: 700;
  color: var(--color-accent-primary);
  transform: translateX(-4px);
  opacity: 0;
  transition: width var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.footer-col a:hover,
.footer-col a:focus-visible {
  opacity: 1;
  color: var(--color-accent-primary);
  gap: 8px;
  transform: translateX(4px);
}

.footer-col a:hover::before,
.footer-col a:focus-visible::before {
  width: 1em;
  opacity: 1;
  transform: translateX(0);
}

/* The first column (logo + tagline) shouldn't get the "→ slide" treatment on
   its logo image, so reset the gap/transform behaviour there. */
.footer-col > a:has(img) {
  display: inline-block;
  padding-block: 0;
}

.footer-col > a:has(img)::before {
  content: none;
}

.footer-col > a:has(img):hover,
.footer-col > a:has(img):focus-visible {
  transform: none;
  gap: 0;
}

.footer-col img {
  max-width: 220px;
  width: 100%;
  height: auto;
  margin-bottom: var(--space-2);
}

.footer-col p {
  font-size: 14px;
  color: var(--color-text-muted);
  max-width: 32ch;
}

/* Back-to-top giant marker. Replaces the old decorative ghost — same scale,
   now a real anchor with a hover cross-fade between the wordmark and an arrow. */
.footer-ghost {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-5);
  padding-block: clamp(12px, 2vw, 32px);
  text-decoration: none;
  user-select: none;
  border-top: 1px solid var(--color-border-subtle);
  overflow: hidden;
  cursor: pointer;
  outline: none;
}

.footer-ghost__label,
.footer-ghost__arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(64px, 12vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  display: inline-block;
  transition: transform 520ms var(--ease-poster),
              opacity 380ms var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.footer-ghost__label {
  color: var(--color-border-subtle);
}

.footer-ghost__arrow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(80px, 14vw, 220px);
  color: var(--color-accent-primary);
  opacity: 0;
  transform: translateY(40%);
}

.footer-ghost:hover .footer-ghost__label,
.footer-ghost:focus-visible .footer-ghost__label {
  color: var(--color-text-primary);
  transform: translateY(-30%);
  opacity: 0;
}

.footer-ghost:hover .footer-ghost__arrow,
.footer-ghost:focus-visible .footer-ghost__arrow {
  transform: translateY(0);
  opacity: 1;
}

.footer-ghost:focus-visible {
  background: var(--color-bg-muted);
}

@media (prefers-reduced-motion: reduce) {
  .footer-ghost__label,
  .footer-ghost__arrow {
    transition: none;
  }
}

/* ---- Utility: rotated breakouts ------------------------------------------- */

.rotate-neg { transform: rotate(-2deg); }
.rotate-pos { transform: rotate(2deg); }

/* ---- Pricing badge (price callout) ---------------------------------------- */

.price-callout {
  display: inline-block;
  background: var(--color-accent-primary);
  color: var(--color-text-primary);
  border: var(--border-thin);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 56px);
  padding: 16px 28px;
  box-shadow: var(--shadow-hard);
  transform: rotate(-2deg);
}

/* ---- Reveal animations (Intersection Observer driven) --------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-reveal) var(--ease-poster),
              transform var(--duration-reveal) var(--ease-poster);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Skip link ------------------------------------------------------------ */

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 200;
  background: var(--color-accent-primary);
  padding: 12px 18px;
  border: var(--border-thin);
}

/* ===========================================================================
   PARTNERS — logos grid (Confiam em nós)
   =========================================================================== */
.partners__grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.partners__logo {
  border: var(--border-thin);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  padding: var(--space-3);
  aspect-ratio: 3 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.partners__logo:hover {
  background: var(--color-accent-secondary);
  color: var(--color-bg-secondary);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}

.partners__logo svg,
.partners__logo img {
  width: 100%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
  /* Logos fornecidas vêm brancas s/ fundo — forçamos monocromático escuro p/ contraste no card beige. */
  filter: brightness(0);
}

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

/* ===========================================================================
   MANIFESTO — split layout, image + text on dark
   =========================================================================== */
.manifesto {
  position: relative;
  overflow: hidden;
}

.manifesto__grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--space-7);
  align-items: center;
}

/* Principles stack: typographic manifesto, no decorative image needed */
.manifesto__principles {
  position: relative;
  border: var(--border-thick);
  border-color: var(--color-bg-primary);
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: transparent;
  overflow: hidden;
}
.manifesto__principles::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 88px;
  height: 24px;
  background: var(--color-accent-primary);
  pointer-events: none;
}
.manifesto__principles::after {
  content: "—";
  position: absolute;
  top: 0;
  right: 12px;
  height: 24px;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-bg-primary);
  letter-spacing: 0.5em;
  pointer-events: none;
}

.manifesto__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.manifesto__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(228, 226, 221, 0.18);
  color: var(--color-text-inverse);
}
.manifesto__item:last-child { border-bottom: 0; padding-bottom: 0; }

.manifesto__item-num {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-accent-secondary);
}

.manifesto__item-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--color-text-inverse);
}

/* Climax: third principle is the brand colour */
.manifesto__item:nth-child(3) .manifesto__item-word { color: var(--color-accent-primary); }

.manifesto__seal {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(228, 226, 221, 0.18);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.manifesto__seal-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.04em;
  color: var(--color-accent-primary);
  line-height: 1;
}
.manifesto__seal-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  opacity: 0.72;
}

.manifesto__text .section-eyebrow {
  color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
  background: transparent;
}
.manifesto__text .section-title { color: var(--color-text-inverse); }
.manifesto__text .section-title .accent { color: var(--color-accent-primary); }

.manifesto__lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--color-text-inverse);
  opacity: 0.85;
  margin-top: var(--space-3);
  max-width: 540px;
}

.manifesto__bullets {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.manifesto__bullets li {
  display: grid;
  grid-template-columns: 1.5em 1fr;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-inverse);
  opacity: 0.85;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(228, 226, 221, 0.12);
}
.manifesto__bullets li:last-child { border-bottom: 0; padding-bottom: 0; }
.manifesto__bullets li > span { color: var(--color-accent-primary); font-weight: 700; }

@media (max-width: 1023px) {
  .manifesto__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}
@media (max-width: 567px) {
  .manifesto__principles { padding: var(--space-4) var(--space-3) var(--space-3); }
  .manifesto__item-word { font-size: clamp(40px, 11vw, 64px); }
  .manifesto__item:nth-child(2) .manifesto__item-word { padding-left: var(--space-2); }
  .manifesto__item:nth-child(3) .manifesto__item-word { padding-left: var(--space-3); }
}

/* ===========================================================================
   SOBRE NÓS — Centered founder portrait on dark, museum-label flanks
   ===========================================================================
   Lives on .section--dark. Top: eyebrow + headline + lead, all left-aligned.
   Centre: a wide stage with the cutout dead-centre and a museum-style name
   label on each side, vertically centred against the figures. The portrait
   uses a CSS mask-image gradient so the bottom dissolves into the ink canvas
   instead of cutting flat. KPI strip closes the section.
   =========================================================================== */
.sobre { position: relative; overflow: hidden; }

/* Dark-canvas text overrides — mirror the .manifesto__text pattern */
.sobre .section-eyebrow {
  color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
  background: transparent;
}
.sobre .section-title { color: var(--color-text-inverse); }
.sobre .section-title .accent { color: var(--color-accent-primary); }

.sobre__head {
  max-width: 1100px;
  margin: 0 0 var(--space-5);
}

.sobre__lead {
  color: var(--color-text-inverse);
  opacity: 0.85;
  max-width: 64ch;
  margin: var(--space-3) 0 0;
}

/* ---- Stage: photo dominates the section, names lay out below as a film
       credits card — left column under the left founder, right column under
       the right founder. Same museum-caption energy, but the photo can now
       breathe at ~70vw without squeezing the labels. ---- */
.sobre__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5vw, 32px);
  margin: 0;
}

/* ---- Portrait: dominates the section. Up to 1100 px wide on big screens
       so the figures read at near-life-size on a 1440 monitor. ---- */
.sobre__portrait {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.sobre__portrait-photo {
  display: block;
  width: 100%;
  height: auto;
  max-width: clamp(480px, 72vw, 1100px);
  object-fit: contain;
  filter: contrast(1.05) saturate(1.02);
  /* Bottom dissolves into the dark canvas — no hard edge. The fade starts
     at ~58% so it touches the figures' hips and dies into the section. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}

/* ---- People credits card — two columns matched to the photo's max-width,
       so the left column sits under the left figure and the right under the
       right. Each label expands; names get room to breathe at 56–80 px. ---- */
.sobre__people {
  width: 100%;
  max-width: clamp(480px, 72vw, 1100px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 120px);
  margin-top: calc(var(--space-4) * -1);
  /* Pull labels up slightly so the fade in the photo meets the name typography */
  position: relative;
  z-index: 2;
}

.sobre__label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sobre__label--left {
  text-align: left;
  align-items: flex-start;
}
.sobre__label--right {
  text-align: right;
  align-items: flex-end;
}

.sobre__label-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 58px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--color-accent-primary);
  margin: 0;
}

.sobre__label-rule {
  display: block;
  width: 120px;
  height: 3px;
  background: var(--color-accent-primary);
  margin-block: 8px;
}

.sobre__label-role {
  font-family: var(--font-body);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--color-text-inverse);
  opacity: 0.78;
  margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1023px) {
  .sobre__portrait-photo { max-width: 88vw; }
  .sobre__people { max-width: 88vw; gap: var(--space-4); }
  .sobre__label-name { font-size: clamp(28px, 6vw, 48px); }
}

@media (max-width: 567px) {
  .sobre__head { margin-bottom: var(--space-4); }
  /* Keep 2 columns on mobile so each founder's name stays beside the
     other, mirroring the photo above. Tighten everything to fit ~150 px
     per column at 390 px viewport. */
  .sobre__people { gap: var(--space-2); }
  .sobre__label { gap: var(--space-1); }
  .sobre__label-name { font-size: clamp(18px, 4.6vw, 26px); line-height: 1.0; }
  .sobre__label-rule { width: 48px; height: 2px; margin-block: 4px; }
  .sobre__label-role { font-size: 10px; letter-spacing: 0.18em; line-height: 1.5; }
}

/* ===========================================================================
   SERVICES — 4 cards (O que fazemos)
   =========================================================================== */
.section-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.services-grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.service-card {
  position: relative;
  padding: var(--space-4) 0 var(--space-3);
  border-top: var(--border-thin);
  background: transparent;
  transition: transform var(--duration-base) var(--ease-out),
              border-top-color var(--duration-base) var(--ease-out);
}

.service-card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 28px;
  height: 4px;
  background: var(--color-accent-primary);
  transition: width var(--duration-base) var(--ease-out);
}
.service-card:hover { transform: translateY(-3px); }
.service-card:hover::before { width: 72px; }

.service-card__num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-accent-primary);
  margin-bottom: var(--space-3);
  transform-origin: 0 100%;
  transition: transform var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.service-card:hover .service-card__num {
  transform: rotate(-2deg);
  color: var(--color-accent-deep);
}

.service-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}
/* Brand punctuation: every service title ends with a burnt-red period */
.service-card__title::after {
  content: ".";
  color: var(--color-accent-primary);
}

.service-card__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 1023px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 567px)  { .services-grid { grid-template-columns: 1fr; } }

/* ===========================================================================
   MID CTA — banner row, full-width with burnt red panel
   =========================================================================== */
.mid-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border: var(--border-thin);
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.mid-cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-bg-primary);
  margin: 0;
  max-width: 720px;
}

.mid-cta__title .accent {
  background: var(--color-bg-secondary);
  color: var(--color-accent-secondary);
  padding: 0 10px;
}

.mid-cta__btn {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .mid-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
  }
}

/* ===========================================================================
   PILLARS — 4 cards (Por que escolher)
   =========================================================================== */
.pillars-grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.pillar-card {
  padding: var(--space-4);
  border: var(--border-thin);
  background: var(--color-bg-primary);
  transition: background var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.pillar-card:hover {
  background: var(--color-bg-muted);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}

.pillar-card__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-hair);
  margin-bottom: var(--space-3);
}

.pillar-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(16px, 1.3vw, 19px);
  margin: 0 0 var(--space-2);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.pillar-card__body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 1023px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 567px)  { .pillars-grid { grid-template-columns: 1fr; } }

/* ===========================================================================
   TESTIMONIALS — 3 cards (TODO-LEGAL inventados)
   =========================================================================== */
.testimonials-grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.testimonial {
  position: relative;
  padding: var(--space-5);
  border: var(--border-thin);
  background: var(--color-bg-primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.testimonial__stars {
  font-size: 20px;
  color: var(--color-accent-primary);
  letter-spacing: 4px;
}

.testimonial__quote {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--color-text-primary);
  margin: 0;
  quotes: "“" "”";
}

.testimonial__quote::before {
  content: open-quote;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.2em;
  margin-right: 4px;
  color: var(--color-accent-primary);
}
.testimonial__quote::after {
  content: close-quote;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.4em;
  margin-left: 2px;
  color: var(--color-accent-primary);
}

.testimonial__author {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: var(--border-hair);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

.testimonial__avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  border: var(--border-thin);
  object-fit: cover;
  background: var(--color-bg-base);
}

.testimonial__author-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.testimonial__author strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text-primary);
}
.testimonial__author span {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
}

@media (max-width: 1023px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-inline: auto;
  }
}

/* ===========================================================================
   STATS — 3 big numerals on dark
   =========================================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  text-align: center;
}

.stat {
  position: relative;
  padding: var(--space-4) var(--space-3);
  border-right: 1px solid var(--color-text-inverse);
}

.stat:last-child { border-right: none; }

.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 12vw, 200px);
  line-height: 1;
  color: var(--color-accent-primary);
  letter-spacing: -0.05em;
}

.stat__unit {
  font-size: 0.5em;
  vertical-align: 0.25em;
  margin-left: -0.05em;
}

.stat__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  margin-top: var(--space-3);
  opacity: 0.85;
}

@media (max-width: 767px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .stat {
    border-right: none;
    border-bottom: 1px solid var(--color-text-inverse);
    padding-bottom: var(--space-4);
  }
  .stat:last-child { border-bottom: none; }
}

/* ---- Anchor offset for sticky header -------------------------------------- */

section[id] { scroll-margin-top: 100px; }

/* ---- Sticky CTA mobile ---------------------------------------------------- */

.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg-secondary);
  color: var(--color-text-inverse);
  border-top: 1px solid var(--color-bg-primary);
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-out);
}

.sticky-cta.is-visible {
  transform: translateY(0);
}

@media (max-width: 767px) {
  .sticky-cta { display: flex; }
}

.sticky-cta__copy {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.2;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--color-text-inverse);
}

.sticky-cta__copy strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text-inverse);
}

.sticky-cta__copy span {
  font-size: 11px;
  color: var(--color-text-inverse);
  opacity: 0.75;
}

.sticky-cta__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: 0;
  padding: 12px 16px;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}

.sticky-cta__btn:hover,
.sticky-cta__btn:focus-visible {
  background: var(--color-accent-primary-dark);
}

.sticky-cta__btn:active {
  transform: translate(1px, 1px);
}

/* Add bottom-padding to body on mobile so sticky-cta does not occlude footer content */
@media (max-width: 767px) {
  body { padding-bottom: 72px; }
}

/* ---- Exit-intent modal ---------------------------------------------------- */

.exit-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(30, 30, 30, 0.65);
}

.exit-modal.is-open {
  display: flex;
  animation: exitFadeIn var(--duration-base) var(--ease-out);
}

.exit-modal__backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  cursor: pointer;
}

.exit-modal__panel {
  position: relative;
  max-width: 480px;
  width: 100%;
  background: var(--color-bg-primary);
  border: var(--border-thick);
  padding: var(--space-5);
  max-height: 92vh;
  overflow-y: auto;
}

.exit-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: color var(--duration-fast) var(--ease-out);
}

.exit-modal__close:hover {
  color: var(--color-accent-primary);
}

.exit-modal__pill {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  margin-bottom: var(--space-3);
}

.exit-modal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-3);
  color: var(--color-text-primary);
}

.exit-modal__title .accent { color: var(--color-accent-primary); }

.exit-modal__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.exit-modal__code {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2em;
  padding: 4px 10px;
  border: var(--border-thin);
  background: transparent;
  color: var(--color-text-primary);
}

@keyframes exitFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- Upsell card (obrigado.html) ----------------------------------------- */

.upsell-card {
  position: relative;
  border: var(--border-thin);
  background: var(--color-bg-primary);
  padding: clamp(24px, 4vw, 44px);
  margin-block: var(--space-5);
}

.upsell-card__badge {
  position: absolute;
  top: -14px;
  left: 24px;
  background: var(--color-accent-primary);
  color: var(--color-text-primary);
  border: var(--border-thin);
  padding: 4px 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.upsell-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-3);
}

.upsell-card__title .accent { color: var(--color-accent-primary); }

.upsell-card__lead {
  font-size: var(--font-body-lg);
  line-height: 1.45;
  margin-bottom: var(--space-3);
}

.upsell-card__list {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-3);
}

.upsell-card__list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding-block: 14px;
  border-bottom: 1px dashed var(--color-border-subtle);
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.45;
}

.upsell-card__list li:last-child { border-bottom: none; }

.upsell-card__check {
  color: var(--color-accent-primary);
  font-weight: 900;
  font-size: 20px;
}

.upsell-card__price {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: line-through;
  white-space: nowrap;
}

.upsell-card__summary {
  padding-block: var(--space-3);
  border-top: var(--border-thick);
  border-bottom: var(--border-thick);
  margin-bottom: var(--space-3);
}

.upsell-card__summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.8vw, 22px);
}

.upsell-card__summary-line--final {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: clamp(22px, 2.8vw, 32px);
}

.upsell-card__price-final {
  color: var(--color-accent-primary);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
}

.upsell-card__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-2);
}

@media (min-width: 600px) {
  .upsell-card__actions { flex-direction: row; align-items: center; }
}

.upsell-card__note {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.upsell-card .btn--primary {
  margin-top: var(--space-3);
}

/* ---- Legal page utilities ------------------------------------------------ */

.warning-box,
.legal-warning {
  border: none;
  border-left: 4px solid var(--color-accent-secondary);
  background: var(--color-bg-muted);
  padding: var(--space-3) var(--space-4);
  margin-block: var(--space-4);
}

.warning-box strong,
.legal-warning strong {
  color: var(--color-text-primary);
}

.scenario {
  border: var(--border-thin);
  background: var(--color-bg-primary);
  padding: var(--space-4);
  margin-block: var(--space-3);
  box-shadow: none;
}

.scenario h3,
.scenario h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 19px);
  margin: 0 0 var(--space-2);
  color: var(--color-text-primary);
}

/* Tables on privacidade.html (and any legal content table) */
table.data-table,
.legal-content table,
.legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-4);
  font-family: var(--font-body);
  font-size: 14px;
}

.legal-content table th,
.legal-content table td,
.legal-page table th,
.legal-page table td,
table.data-table th,
table.data-table td {
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-2);
  text-align: left;
  vertical-align: top;
}

.legal-content table th,
.legal-page table th,
table.data-table th {
  background: var(--color-bg-muted);
  font-family: var(--font-display);
  font-weight: 600;
}

/* Livre-resolução form-modelo block — flatten to brutalist hairline */
.legal-form {
  border: var(--border-thin);
  background: var(--color-bg-muted);
  padding: var(--space-3) var(--space-4);
  margin-block: var(--space-3);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* ---- Briefing page (Tally embed wrapper) --------------------------------- */

.tally-embed {
  border: var(--border-thin);
  background: var(--color-bg-primary);
  padding: var(--space-3);
  margin-block: var(--space-5);
}

/* ---- Print --------------------------------------------------------------- */

@media print {
  .marquee, .sticky-cta, .exit-modal { display: none; }
  body { color: #000; background: #fff; }
}

/* ===========================================================================
   MOTION LAYER — different animation types per section
   Globals (scroll bar, cursor companion), reveal variants, per-section
   keyframes. All respect prefers-reduced-motion via the global token reset.
   =========================================================================== */

/* ---- Scroll progress bar (top of page) ----------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 120;
  pointer-events: none;
  background: transparent;
}

.scroll-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent-urgency);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 80ms linear;
  will-change: transform;
}

/* ---- Hero accent — slow colour pulse on the price ------------------------ */
.hero:not(.hero--booting) .hero__headline .accent {
  animation: hero-accent-pulse 4.2s ease-in-out 1.4s infinite;
}

@keyframes hero-accent-pulse {
  0%, 100% { color: var(--color-accent-primary); transform: translateY(0); }
  50%      { color: #FFD08A;                     transform: translateY(-2px); }
}

/* ---- Marquee 1 — hover slows, items expand ------------------------------- */
.marquee:hover .marquee__track {
  animation-duration: 60s; /* slow it down — original feels ~24s */
}

.marquee__item {
  transition: letter-spacing var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.marquee:hover .marquee__item {
  letter-spacing: 0.04em;
}

/* ---- Marquee 2 (magenta, reverse) — permanent skew + hover slow ---------- */
.marquee--magenta .marquee__track {
  transform: skewX(-3deg);
}

.marquee--magenta:hover .marquee__track {
  animation-duration: 55s;
}

/* ===========================================================================
   REVEAL VARIANTS — each section gets a distinct entrance technique.
   All inherit the IO trigger from `.reveal` → `.is-visible`. The base rule
   above already sets the `transition` window; variants override the
   starting transform / filter only.
   =========================================================================== */

/* Default reveal (existing) is fade + translateY(24px). Variants follow. */

/* Slide from left (gives the right side more breathing room) */
.reveal--slide-left {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity var(--duration-reveal) var(--ease-poster),
              transform var(--duration-reveal) var(--ease-poster);
}
.reveal--slide-left.is-visible { opacity: 1; transform: translateX(0); }

/* Slide from right */
.reveal--slide-right {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity var(--duration-reveal) var(--ease-poster),
              transform var(--duration-reveal) var(--ease-poster);
}
.reveal--slide-right.is-visible { opacity: 1; transform: translateX(0); }

/* 3D tilt-up — for service cards */
.reveal--tilt {
  opacity: 0;
  transform: perspective(800px) rotateX(-18deg) translateY(40px);
  transform-origin: 50% 100%;
  transition: opacity var(--duration-reveal) var(--ease-poster),
              transform var(--duration-reveal) var(--ease-poster);
}
.reveal--tilt.is-visible { opacity: 1; transform: perspective(800px) rotateX(0deg) translateY(0); }

/* Blur defocus — for mockup cards */
.reveal--blur {
  opacity: 0;
  filter: blur(10px);
  transform: scale(0.94);
  transition: opacity var(--duration-reveal) var(--ease-poster),
              filter var(--duration-reveal) var(--ease-poster),
              transform var(--duration-reveal) var(--ease-poster);
}
.reveal--blur.is-visible { opacity: 1; filter: blur(0); transform: scale(1); }

/* Stamp — for guarantee cards (subtle press-in) */
.reveal--stamp {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 420ms var(--ease-poster),
              transform 520ms var(--ease-poster);
}
.reveal--stamp.is-visible { opacity: 1; transform: scale(1); }

/* Jitter — for partner logos (random rotation seeds) */
.reveal--jitter {
  opacity: 0;
  transform: rotate(var(--jitter, -1.4deg)) translateY(16px);
  transition: opacity var(--duration-reveal) var(--ease-poster),
              transform var(--duration-reveal) var(--ease-poster);
}
.reveal--jitter.is-visible { opacity: 1; transform: rotate(0) translateY(0); }

/* ---- Stagger groups — children animate in sequence ----------------------- */
.stagger-group .reveal {
  transition-delay: calc(var(--stagger, 80ms) * var(--i, 0));
}
.stagger-group .reveal--tilt {
  transition-delay: calc(var(--stagger, 80ms) * var(--i, 0));
}
.stagger-group .reveal--blur {
  transition-delay: calc(var(--stagger, 100ms) * var(--i, 0));
}
.stagger-group .reveal--stamp {
  transition-delay: calc(var(--stagger, 90ms) * var(--i, 0));
}
.stagger-group .reveal--jitter {
  transition-delay: calc(var(--stagger, 70ms) * var(--i, 0));
}

/* ---- Manifesto principles — counter animation --------------------------- */
.manifesto__item-num {
  font-variant-numeric: tabular-nums;
}

/* While the counter is animating, dim the trailing word in slightly */
.manifesto__item[data-counting="true"] .manifesto__item-word {
  opacity: 0.4;
  transition: opacity 480ms var(--ease-out);
}

.manifesto__item .manifesto__item-word {
  display: inline-block;
  transition: opacity 480ms var(--ease-out);
}

/* ---- Service-card number rotate on hover -------------------------------- */
.service-card__num {
  display: inline-block;
  transition: transform 380ms var(--ease-poster),
              color var(--duration-base) var(--ease-out);
}

.service-card:hover .service-card__num {
  transform: rotate(-8deg) scale(1.08);
  color: var(--color-accent-urgency);
}

/* ---- Mockup parallax tilt on hover (3D — JS-driven) --------------------- */
.mockup-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 480ms var(--ease-poster),
              box-shadow 480ms var(--ease-poster);
  will-change: transform;
}

.mockup-card__media {
  transform-style: preserve-3d;
  transition: transform 480ms var(--ease-poster);
}

.mockup-card[data-tilt="true"] {
  /* JS writes --tx, --ty, --tr in degrees */
  transform: perspective(1000px)
             rotateX(var(--ty, 0deg))
             rotateY(var(--tx, 0deg))
             translateZ(0);
}

.mockup-card[data-tilt="true"] .mockup-card__media {
  transform: translateZ(30px);
}

/* ---- Pillar — coral underline draws under title ------------------------ */
.pillar-card__title {
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
}

.pillar-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--color-accent-urgency);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 720ms var(--ease-poster) 220ms;
}

.pillar-card.is-visible .pillar-card__title::after,
.pillar-card.reveal.is-visible .pillar-card__title::after {
  transform: scaleX(1);
}

/* Pillar number — quick "ink soak" (blur fade) when card reveals */
.pillar-card__num {
  filter: blur(0);
  transition: filter 600ms var(--ease-out);
}

.pillar-card:not(.is-visible) .pillar-card__num {
  filter: blur(6px);
}

/* ---- Guarantee — number ink-soak ---------------------------------------- */
.guarantee-card__num {
  filter: blur(0);
  transition: filter 600ms var(--ease-out);
}

.guarantee-card:not(.is-visible) .guarantee-card__num {
  filter: blur(8px);
  opacity: 0.6;
}

/* ---- Testimonials — stars fill sequentially ---------------------------- */
.testimonial__stars {
  display: inline-flex;
  gap: 2px;
  letter-spacing: 0;
}

.testimonial__stars .star {
  display: inline-block;
  color: var(--color-border-subtle);
  transition: color 320ms var(--ease-out),
              transform 320ms var(--ease-poster);
  transform: scale(0.7);
}

.testimonial.is-visible .testimonial__stars .star {
  color: var(--color-accent-primary);
  transform: scale(1);
}

.testimonial.is-visible .testimonial__stars .star:nth-child(1) { transition-delay: 200ms; }
.testimonial.is-visible .testimonial__stars .star:nth-child(2) { transition-delay: 280ms; }
.testimonial.is-visible .testimonial__stars .star:nth-child(3) { transition-delay: 360ms; }
.testimonial.is-visible .testimonial__stars .star:nth-child(4) { transition-delay: 440ms; }
.testimonial.is-visible .testimonial__stars .star:nth-child(5) { transition-delay: 520ms; }

/* Card lift on hover */
.testimonial {
  transition: transform 320ms var(--ease-poster),
              box-shadow 320ms var(--ease-poster);
}

.testimonial:hover {
  transform: translateY(-4px);
}

/* ---- Stats count-up — number transitions in via JS, but add a ----------
   pre-reveal state so the count starts only after the number is visible. */
.stat__num {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* Suppress the inner unit while counter is mid-flight (looks cleaner) */
.stat[data-counting="true"] .stat__unit {
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}

.stat .stat__unit {
  opacity: 1;
  transition: opacity 320ms var(--ease-out) 1300ms;
}

/* ---- FAQ heading — letter-by-letter reveal ----------------------------- */
.faq-title .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em) rotate(-6deg);
  transition: opacity 480ms var(--ease-poster),
              transform 480ms var(--ease-poster);
}

.faq-title.is-visible .letter {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

.faq-title.is-visible .letter:nth-child(1) { transition-delay: 60ms; }
.faq-title.is-visible .letter:nth-child(2) { transition-delay: 140ms; }
.faq-title.is-visible .letter:nth-child(3) { transition-delay: 220ms; }
.faq-title.is-visible .letter:nth-child(4) { transition-delay: 300ms; }
.faq-title.is-visible .letter:nth-child(5) { transition-delay: 380ms; }
.faq-title.is-visible .letter:nth-child(6) { transition-delay: 460ms; }

.faq__body p {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 280ms var(--ease-out) 80ms,
              transform 280ms var(--ease-out) 80ms;
}

.faq__item[open] .faq__body p {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Final CTA — checkbox SVG check stroke draw ----------------------- */
.legal-checkbox {
  position: relative;
}

/* Hide the native checkbox visually but keep it focusable + clickable; the
   SVG box below is the visible control. */
.legal-checkbox input[type="checkbox"] {
  opacity: 0;
}

/* Bump the col-1 width so the visual + input + text grid feel intentional. */
.legal-checkbox {
  grid-template-columns: 28px 1fr;
  gap: 18px;
}

.legal-checkbox input[type="checkbox"] {
  width: 28px;
  height: 28px;
}

.legal-checkbox__visual {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
  /* Align with the input cell inside the padded card (padding = --space-3) */
  left: var(--space-3);
  top: calc(var(--space-3) + 2px);
  border: var(--border-thin);
  background: var(--color-bg-primary);
  color: var(--color-accent-urgency);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 var(--color-accent-urgency);
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow 200ms var(--ease-poster),
              transform 200ms var(--ease-poster);
}

/* Hover on the whole label highlights the visual box */
.legal-checkbox:hover .legal-checkbox__visual {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--color-accent-urgency);
}

.legal-checkbox input:focus-visible ~ .legal-checkbox__visual {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.legal-checkbox input:checked ~ .legal-checkbox__visual {
  background: var(--color-accent-urgency);
  color: var(--color-text-inverse);
  box-shadow: 0 0 0 0 transparent;
  transform: translate(3px, 3px);
}

.legal-checkbox__visual .check-stroke {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 360ms var(--ease-poster);
}

.legal-checkbox input:checked ~ .legal-checkbox__visual .check-stroke {
  stroke-dashoffset: 0;
}

/* Pay button — enable flash + magnetic-ready */
#pay-button {
  transform-origin: center;
  transition: transform 220ms var(--ease-poster),
              box-shadow var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              filter var(--duration-base) var(--ease-out);
  will-change: transform;
}

#pay-button[aria-disabled="false"] {
  animation: pay-enable-flash 700ms var(--ease-out) 1;
}

@keyframes pay-enable-flash {
  0%   { box-shadow: 0 0 0 0 var(--color-accent-urgency); }
  60%  { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: var(--shadow-hard); }
}

/* ---- Magnetic button shared rule -------------------------------------- */
.is-magnetic {
  transition: transform 320ms var(--ease-poster);
  will-change: transform;
}

/* ---- 3D push button --------------------------------------------------
   Two-tone extrusion: bone face floats above a coloured slab anchored by
   an ink/bone base shadow. Hover collapses the slab half-way (button
   presses down to the anchor line); active flattens both layers fully
   (button stamps into the page). The contrast between face and slab
   colour is what makes the depth read — single-tone stacks blend out. */
.btn--3d {
  position: relative;
  box-shadow:
    4px 4px 0 var(--color-accent-primary),
    8px 8px 0 var(--color-text-primary);
  transition: transform 160ms var(--ease-poster),
              box-shadow 160ms var(--ease-poster),
              color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out);
}

.btn--3d:hover,
.btn--3d:focus-visible {
  transform: translate(4px, 4px);
  box-shadow:
    0 0 0 0 transparent,
    4px 4px 0 var(--color-text-primary);
}

.btn--3d:active {
  transform: translate(8px, 8px);
  box-shadow:
    0 0 0 0 transparent,
    0 0 0 0 transparent;
}

/* On-dark variant — coral slab + bone anchor so the extrusion stays
   visible against the ink section background. */
.btn--3d.on-dark {
  box-shadow:
    4px 4px 0 var(--color-accent-urgency),
    8px 8px 0 var(--color-text-inverse);
}

.btn--3d.on-dark:hover,
.btn--3d.on-dark:focus-visible {
  box-shadow:
    0 0 0 0 transparent,
    4px 4px 0 var(--color-text-inverse);
}

.btn--3d.on-dark:active {
  box-shadow:
    0 0 0 0 transparent,
    0 0 0 0 transparent;
}

/* Reveal-end-state transform must not override the 3D hover transform —
   re-state hover/active with higher specificity so they win. */
.btn--3d.reveal--slide-left.is-visible:hover,
.btn--3d.reveal--slide-right.is-visible:hover,
.btn--3d.reveal.is-visible:hover {
  transform: translate(4px, 4px);
}
.btn--3d.reveal--slide-left.is-visible:active,
.btn--3d.reveal--slide-right.is-visible:active,
.btn--3d.reveal.is-visible:active {
  transform: translate(8px, 8px);
}

@media (prefers-reduced-motion: reduce) {
  .btn--3d,
  .btn--3d:hover,
  .btn--3d:focus-visible,
  .btn--3d:active {
    transform: none;
    transition: background var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
  }
}

/* ---- Reveal-vs-hover transform reconciliation ------------------------
   The variants above set `transform` on .is-visible, which would otherwise
   suppress the existing hover translateY/translate of these cards (same
   specificity, source order would win for the reveal). Re-state the hover
   intent with higher specificity so hover wins. */
.partners__logo.reveal--jitter.is-visible:hover {
  transform: translate(-2px, -2px) rotate(0);
}
.service-card.reveal--tilt.is-visible:hover {
  transform: perspective(800px) rotateX(0) translateY(-3px);
}
.guarantee-card.reveal--stamp.is-visible:hover {
  transform: scale(1) translateY(-3px);
}
.pillar-card.reveal.is-visible:hover {
  transform: translate(-2px, -2px);
}
.testimonial.reveal.is-visible:hover {
  transform: translateY(-4px);
}
.testimonial.reveal--slide-left.is-visible:hover,
.testimonial.reveal--slide-right.is-visible:hover {
  transform: translateX(0) translateY(-4px);
}

/* Mockup tilt must beat the reveal--blur.is-visible transform */
.mockup-card.reveal--blur.is-visible[data-tilt="true"] {
  transform: perspective(1000px)
             rotateX(var(--ty, 0deg))
             rotateY(var(--tx, 0deg))
             translateZ(0);
}

/* Visual-disable reduced motion fallback for the inert states above */
@media (prefers-reduced-motion: reduce) {
  .hero:not(.hero--booting) .hero__headline .accent { animation: none; }
  .scroll-progress__bar { transition: none; }
  .marquee:hover .marquee__track,
  .marquee--magenta:hover .marquee__track {
    animation-duration: inherit;
  }
  .reveal--tilt,
  .reveal--blur,
  .reveal--stamp,
  .reveal--slide-left,
  .reveal--slide-right,
  .reveal--jitter {
    opacity: 0;
    transform: none;
    filter: none;
  }
  .reveal--tilt.is-visible,
  .reveal--blur.is-visible,
  .reveal--stamp.is-visible,
  .reveal--slide-left.is-visible,
  .reveal--slide-right.is-visible,
  .reveal--jitter.is-visible {
    opacity: 1;
  }
  .pillar-card__title::after { transform: scaleX(1); transition: none; }
  .pillar-card__num,
  .guarantee-card__num { filter: none; }
  .testimonial.is-visible .testimonial__stars .star { transition: none; }
  .faq-title .letter { opacity: 1; transform: none; transition: none; }
  #pay-button[aria-disabled="false"] { animation: none; }
}