:root {
  --navy-950: #000918;
  --navy-900: #000c1e;
  --navy-800: #00050d;
  --navy-700: #001336;
  --navy-600: #0d1c3b;
  --blue-accent: #1e468d;
  --blue-highlight: #005cff;
  --ink-white: #ffffff;
  --ink-italic: #c4d9ff;
  --ink-teal: #d9ffef;
  --ink-footer-link: #aef3ff;
  --red-bad-bg: #ffeded;
  --green-good-bg: #edfff7;
  --banner-red: #900;
  --red-accent: #ff4a4a; /* vermelho vivo para destaque de texto sobre o navy */
  --font-serif: 'Perfectly Nineties', 'Georgia', serif;
  --font-sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-script: 'Birthstone Bounce', cursive;
  --container-w: 1480px;
  /* Movimento: uma única "personalidade" pra hovers e reveals (suave, ease-in-out) */
  --motion-ease: cubic-bezier(0.45, 0, 0.25, 1);
  --motion-hover: 0.35s;
  --motion-reveal: 0.4s;
}

@font-face {
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-ThinItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-Extralight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-ExtralightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* Sem arquivo "Light Italic" original; reaproveita o Extralight Italic (peso mais próximo disponível) */
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-ExtralightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-SemiBoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-ExtraBoldItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('assets/fonts/PerfectlyNineties-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Birthstone Bounce';
  src: url('assets/fonts/BirthstoneBounce-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Birthstone Bounce';
  src: url('assets/fonts/BirthstoneBounce-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy-950);
  color: var(--ink-white);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
p { margin: 0; }
strong { font-weight: 700; }
em { font-style: italic; }

.container {
  max-width: calc(var(--container-w) + 48px);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}
/* Blocos que no Figma têm 1451px alinhados à esquerda do container de 1480px */
.w-1451 { width: 1451px; max-width: 100%; }

.serif-heading {
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.24;
  letter-spacing: -0.046em;
  color: var(--ink-white);
  margin: 0;
}
.serif-heading--sm { font-size: clamp(28px, 4.3vw, 54px); line-height: 1.09; letter-spacing: -0.0498em; }
.serif-heading em { font-weight: 200; font-style: italic; color: var(--ink-italic); }
.serif-heading--center { text-align: center; }

.section-subtext {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink-white);
  text-align: center;
  max-width: 640px;
  margin: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: none;
  border-radius: 80px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  cursor: pointer;
  text-decoration: none;
  padding: 14px 12px 14px 24px;
  box-shadow: 0 0 0 rgba(0,92,255,0);
  transition: transform var(--motion-hover) var(--motion-ease), box-shadow var(--motion-hover) var(--motion-ease);
}
.btn:hover { transform: scale(1.04); }
.btn--primary { background: var(--blue-accent); color: #f8f6f3; }
.btn--primary:hover { box-shadow: 0 6px 26px rgba(0,92,255,0.34), 0 0 0 1px rgba(255,255,255,0.06); }
.btn--white { background: #ffffff; color: var(--navy-600); box-shadow: 0 0 0 rgba(255,255,255,0); }
.btn--white:hover { box-shadow: 0 6px 26px rgba(255,255,255,0.26); }
.btn--full { width: 100%; padding: 20px; justify-content: center; }
.btn--wide { width: 100%; max-width: 620px; margin: 40px auto 0; }
.btn-arrow {
  width: 52.3px;
  height: 52.3px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-arrow img { width: 13.9px; height: 11.7px; }
.btn-arrow--dark { background: #0f1e3d; }
.btn-arrow--dark img { filter: none; } /* vector-arrow2.svg já é branco */
.btn--icon {
  display: flex;
  margin: 0 auto;
  padding: 12px 12px 12px 20px;
  gap: 8px;
  font-size: 16px;
  line-height: 20.8px;
  letter-spacing: -0.48px;
  height: 66px;
  max-width: 100%;
}
.btn--icon > span:first-child { flex: 1; text-align: center; }

/* Top banner (Figma: 57px de altura, texto 20px / 27px) */
.top-banner {
  position: relative;
  z-index: 10;
  background: var(--banner-red);
  padding: 15px 16px;
  text-align: center;
}
.top-banner p {
  font-size: 20px;
  line-height: 27px;
  font-weight: 400;
  letter-spacing: -0.36px;
  margin: 0;
}
.banner-regular { font-weight: 400; }
.banner-semibold { font-weight: 600; }

/* Hero
   O hero do Figma é um "canvas" fixo de 1918x873 (Main Container), posicionado 8px
   por baixo da tarja. Reproduzimos as coordenadas exatas do Figma em px dentro de
   .hero-canvas e escalamos o canvas inteiro (zoom) para a largura da tela.
   --hero-scale é definido no <head> (min(1, largura / 1918)). */
.hero {
  position: relative;
  margin-top: -8px;
  background: var(--navy-950);
  overflow: hidden;
}
.hero-canvas {
  position: relative;
  width: 1918px;
  height: 873px;
  margin: 0 auto;
  background: var(--navy-950);
  isolation: isolate; /* blend modes (overlay/exclusion/color-dodge) misturam com o fundo navy do canvas */
  zoom: var(--hero-scale, 1);
}
@supports not (zoom: 1) {
  .hero-canvas { transform: scale(var(--hero-scale, 1)); transform-origin: top left; }
  .hero { height: calc(873px * var(--hero-scale, 1)); }
}

.hero-bg,
.hero-vignettes { position: absolute; inset: 0; pointer-events: none; }
/* .hero-bg não recebe z-index de propósito: um contexto de empilhamento próprio faria os
   blend modes dos filhos misturarem com transparência em vez do fundo do canvas */
.hero-glow--6 { z-index: 1; }
.hero-photo { z-index: 2; }
.hero-vignettes { z-index: 3; }
.hero-glow--4 { z-index: 4; }
.hero-content { z-index: 5; }

/* Telas fantasmas e script ficam recortados no frame de 1918px (como no Figma);
   em telas mais largas só foto, brilhos, grade e textura vazam para fora do canvas */
.hero-bg-clip { position: absolute; inset: 0; overflow: hidden; }

/* Telas fantasmas (Background Image 167:23) */
.hero-bg-ghost {
  position: absolute;
  left: 622px;
  top: -354px;
  width: 2071px;
  height: 958px;
  mix-blend-mode: exclusion;
  opacity: 0.41;
  -webkit-mask-image: url('assets/hero-bg-mask.svg');
  mask-image: url('assets/hero-bg-mask.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 110.6px -149.4px;
  mask-position: 110.6px -149.4px;
  -webkit-mask-size: 1816.8px 1283.8px;
  mask-size: 1816.8px 1283.8px;
}
.hero-bg-ghost img { width: 100%; height: 100%; object-fit: cover; }

/* Script "For" (Background Text 167:49) */
.hero-bg-script {
  position: absolute;
  left: 951px;
  top: -387px;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1184.182px;
  line-height: 1293.829px;
  letter-spacing: -58.98px;
  color: #bdd5ff;
  white-space: nowrap;
  mix-blend-mode: overlay;
  opacity: 0.59;
  -webkit-mask-image: url('assets/hero-bg-mask.svg');
  mask-image: url('assets/hero-bg-mask.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: -218.4px -116.4px;
  mask-position: -218.4px -116.4px;
  -webkit-mask-size: 1816.8px 1283.8px;
  mask-size: 1816.8px 1283.8px;
}

/* Grade de divisores verticais (fundo 167:25): linhas de 2px a cada 120px.
   Estendida para além do canvas para telas mais largas que 1918px. */
.hero-dividers {
  position: absolute;
  left: -1200px;
  right: -1200px;
  top: -268px;
  height: 1201px;
  background: repeating-linear-gradient(to right, rgba(0,71,83,0.05) 0 2px, transparent 2px 120px);
}

/* Textura de pontos (master 167:48) */
.hero-texture {
  position: absolute;
  left: -1400px;
  top: -268px;
  width: 4718px;
  height: 1264px;
  opacity: 0.03;
  background-image: url('assets/hero-texture.png');
  background-size: 1400px 1399px;
  background-position: 0 0;
  background-repeat: repeat;
}

/* Elipses (centros calculados a partir das caixas do Figma) */
.hero-glow { position: absolute; display: block; max-width: none; pointer-events: none; transform: translate(-50%, -50%); }
.hero-glow--2  { left: 1557.3px; top: 89.9px;  width: 383.287px;  height: 951.741px;  transform: translate(-50%,-50%) rotate(31.09deg); mix-blend-mode: color-dodge; }
.hero-glow--6  { left: 1472px;   top: 384.3px; width: 679.483px;  height: 422.137px;  transform: translate(-50%,-50%) rotate(31.09deg); mix-blend-mode: color-dodge; }
.hero-glow--1  { left: 1394px;   top: 893.5px; width: 1816.8px;   height: 1283.8px; }
.hero-glow--3a { left: 733.5px;  top: 701.5px; width: 1543.8px;   height: 1355.8px; }
.hero-glow--3b { left: 796.5px;  top: 701.5px; width: 1543.8px;   height: 1355.8px; }
.hero-glow--5  { left: 1507.5px; top: 914.5px; width: 2311.8px;   height: 1241.8px; }
.hero-glow--4  { left: 1671.6px; top: 213.7px; width: 679.483px;  height: 962.636px;  transform: translate(-50%,-50%) rotate(31.09deg); mix-blend-mode: color-dodge; }

/* Foto (Rectangle 94 181:335): 1429x1245 em (576,-92), imagem alinhada ao topo */
.hero-photo {
  position: absolute;
  left: 576px;
  top: -92px;
  width: 1429px;
  height: 1245px;
  border-radius: 27px;
  overflow: hidden;
}
.hero-photo img { width: 100%; height: auto; display: block; }

/* Conteúdo (Content Section 167:58): 740px em (220,155), gap 16 */
.hero-content {
  position: absolute;
  left: 220px;
  top: 155px;
  width: 740px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
/* Logo centralizada em relação ao título (920px) logo abaixo dela */
.hero-logo { width: 920px; height: 126px; display: flex; justify-content: center; }
.hero-logo img { width: 239.65px; height: 123.53px; object-fit: contain; object-position: top; }
.hero-heading {
  width: 920px;
  font-size: 68px;
  line-height: 73px;
  letter-spacing: -3.39px;
}
.hero-subtext {
  width: 548px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: -0.36px;
}
.hero-subtext__highlight { font-weight: 700; color: var(--red-accent); }

.hero-form { width: 629px; display: flex; flex-direction: column; gap: 14.67px; }
.hero-form-row { display: flex; justify-content: space-between; gap: 12.84px; }
.hero-form-row input {
  width: 308.08px;
  height: 64.18px;
  min-width: 0;
  background: rgba(255,255,255,0.03);
  border: 0.917px solid rgba(255,255,255,0.15);
  border-radius: 41.72px;
  padding: 0 16px 0 37.59px;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14.67px;
  line-height: 20.77px;
  letter-spacing: -0.947px;
}
.hero-form-row input::placeholder { color: rgba(255,255,255,0.59); }
.hero-form-row input:focus { outline: none; border-color: rgba(255,255,255,0.4); }
.hero-submit {
  width: 100%;
  height: 60px;
  padding: 11px 11px 11px 18.34px;
  border-radius: 73.35px;
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.34px;
}

/* Proof section */
.proof-section { background: var(--navy-900); padding: 75px 0 74px; }
.proof-header { text-align: center; max-width: 712px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 19px; }
.proof-header .section-subtext { max-width: 548px; }
.proof-grid {
  max-width: 1172px;
  margin: 38px auto 0;
  display: flex;
  gap: 15.8px;
  align-items: flex-start;
}
.proof-col { display: flex; flex-direction: column; gap: 15.8px; min-width: 0; }
.proof-col--1 { flex: 415.973; }
.proof-col--2 { flex: 401.738; }
.proof-col--3 { flex: 322.656; }
.proof-item {
  width: 100%;
  border-radius: 14px;
  overflow: hidden; /* o zoom da foto fica contido no card */
  display: block;
}
.proof-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--motion-hover) var(--motion-ease);
}
.proof-item:hover img { transform: scale(1.06); }
.proof-btn { width: 401px; margin-top: 38px; }

/* Modules (Figma: título 58/72, cards 436px, imagem 654 + barra 92, gap 23) */
.modules-section { padding: 111px 0 110px; overflow: hidden; }
.modules-header {
  max-width: calc(var(--container-w) + 48px);
  margin: 0 auto 67px;
  padding: 0 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.modules-header .serif-heading { max-width: 590px; }
.modules-pagination { display: flex; gap: 6px; margin-top: 76px; }
.pag-btn {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: none;
  background: rgba(0,71,83,0.56);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform var(--motion-hover) var(--motion-ease), background-color var(--motion-hover) var(--motion-ease);
}
.pag-btn:hover { transform: scale(1.05); background: rgba(0,71,83,0.8); }
.pag-btn img { width: 23.1px; height: 23.1px; display: block; }
.pag-btn--prev { background: #004753; }
.pag-btn--next img { transform: rotate(180deg); }

.modules-track {
  display: flex;
  gap: 23px;
  overflow-x: auto;
  padding: 40px 24px 56px max(24px, calc((100% - var(--container-w)) / 2));
  margin: -40px 0 -40px; /* compensa o respiro vertical usado pela escala/glow no hover */
  scroll-padding-left: max(24px, calc((100% - var(--container-w)) / 2));
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.modules-track::-webkit-scrollbar { display: none; }
.module-card {
  flex: 0 0 436px;
  scroll-snap-align: start;
  border-radius: 32px 32px 0 0;
  box-shadow: 0 0 0 rgba(0,92,255,0);
  transition: transform var(--motion-hover) var(--motion-ease), box-shadow var(--motion-hover) var(--motion-ease);
}
.module-card:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 40px rgba(0,92,255,0.22), 0 0 0 1px rgba(196,217,255,0.08);
}
.module-card > img {
  width: 100%;
  height: 654px;
  object-fit: cover;
  border-radius: 32px 32px 0 0;
}
.module-title {
  background: var(--navy-600);
  height: 92px;
  padding: 0 46px;
  display: flex;
  gap: 11px;
  align-items: center;
}
.module-icon { flex-shrink: 0; width: 19.7px; height: 16.6px; display: flex; align-items: center; justify-content: center; }
.module-icon img { width: 16.6px; height: auto; transform: rotate(90deg); }
.module-title p strong { font-weight: 600; }
.module-title p.module-title--mixed { font-weight: 300; }
.module-title p {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 19.9px;
  letter-spacing: 0;
  max-width: 320px;
}

/* Módulo expansível: painel com as aulas sobe por cima da imagem ao clicar na barra */
.module-card--expandable { position: relative; border-radius: 32px 32px 0 0; overflow: hidden; cursor: pointer; }
.module-toggle {
  width: 100%;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: background 0.25s ease;
}
.module-card--expandable:hover .module-toggle, .module-toggle[aria-expanded="true"] { background: var(--navy-700); }
.module-toggle .module-icon img { transition: transform 0.35s ease; }
.module-toggle[aria-expanded="true"] .module-icon img { transform: rotate(-90deg); }
.module-lessons {
  position: absolute;
  left: 0; right: 0;
  bottom: 92px;
  z-index: 1;
  max-height: calc(100% - 92px);
  overflow-y: auto;
  background: rgba(0, 12, 30, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.08);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, visibility 0s linear 0.45s;
}
.module-lessons.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, visibility 0s;
}
.module-lessons__inner { padding: 34px 46px 30px; }
.module-lessons__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-italic);
  opacity: 0.7;
  margin-bottom: 18px;
}
.module-lessons__list { list-style: none; margin: 0; padding: 0; }
.module-lessons__list li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 15px;
  line-height: 21px;
  font-weight: 300;
  color: var(--ink-white);
}
.module-lessons__list li:first-child { border-top: none; padding-top: 0; }
.module-lessons__list li:last-child { padding-bottom: 0; }
.module-lessons__num {
  flex-shrink: 0;
  width: 52px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--ink-italic);
}

/* Compare (Figma: bloco de 1270px, cards 625x128, pad 37/58/37/29, texto 20/27 Light) */
.compare-section { background: var(--navy-950); padding: 0 0 67px; }
.compare-section .serif-heading { max-width: 643px; margin: 0 auto; }
.compare-grid {
  max-width: 1270px;
  margin: 43px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.compare-col { display: flex; flex-direction: column; gap: 15px; }
.compare-item {
  border-radius: 22px;
  border: 2px solid;
  padding: 35px 56px 35px 27px; /* 37/58/37/29 do Figma menos a borda de 2px */
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-height: 128px;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition:
    transform var(--motion-hover) var(--motion-ease),
    box-shadow var(--motion-hover) var(--motion-ease),
    background-color var(--motion-hover) var(--motion-ease),
    border-color var(--motion-hover) var(--motion-ease);
}
.compare-item:hover { transform: scale(1.02); }
.compare-col--bad .compare-item { background: #0a0000; border-color: rgba(255,255,255,0.1); }
.compare-col--good .compare-item { background: #000f0d; border-color: rgba(0,53,38,0.49); }
.compare-col--bad .compare-item:hover {
  background: #170407;
  border-color: rgba(255,90,90,0.28);
  box-shadow: 0 8px 30px rgba(255,60,60,0.12);
}
.compare-col--good .compare-item:hover {
  background: #03170f;
  border-color: rgba(80,230,160,0.28);
  box-shadow: 0 8px 30px rgba(60,220,140,0.12);
}
.compare-icon {
  width: 50px; height: 50px;
  border-radius: 8.75px;
  border: 1.25px solid;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 13px;
}
.compare-icon img { width: 100%; height: 100%; }
.compare-icon--bad { background: var(--red-bad-bg); border-color: rgba(36,0,1,0.31); }
.compare-icon--good { background: var(--green-good-bg); border-color: rgba(0,36,14,0.31); }
.compare-item p { font-size: 20px; font-weight: 300; letter-spacing: -0.36px; line-height: 27px; max-width: 364px; }
.compare-item p.compare-text--wide { max-width: 430px; }
.compare-col--good .compare-item p { color: var(--ink-teal); }
.compare-btn { width: 581px; margin-top: 40px; }

/* Guarantee */
.guarantee-section { background: var(--navy-950); padding: 36px 0 75px; }
.guarantee-title { margin-bottom: 67px; }

.guarantee-row1 {
  display: grid;
  grid-template-columns: 1045fr 396fr;
  gap: 10px;
  margin-bottom: 14px;
}
.guarantee-row1 > * { min-height: 322px; }

.guarantee-card {
  background: #ffffff;
  border: 0.86px solid rgba(0,71,83,0.12);
  border-radius: 6.9px;
  display: grid;
  grid-template-columns: 445px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
}
.guarantee-media { position: relative; overflow: hidden; }
.guarantee-media-frame {
  position: absolute;
  width: 467px;
  height: 736px;
  left: -21.86px;
  top: -92.86px;
  overflow: hidden;
}
.guarantee-media-frame img {
  position: absolute;
  width: 240.53%;
  height: 114.29%;
  left: -65.18%;
  top: -14.29%;
  max-width: none;
}
.guarantee-copy { padding: 63px 40px 40px 26px; display: flex; flex-direction: column; justify-content: flex-start; gap: 17px; }
.guarantee-icon,
.bonus-icon {
  width: 70px; height: 70px;
  padding: 4px 5px;
  border-radius: 11px;
  background: rgba(0,71,83,0.05);
  border: 1px solid rgba(0,0,0,0.11);
  box-sizing: border-box;
  object-fit: contain;
}
.guarantee-copy p {
  color: #020c27;
  font-size: 26.7px;
  font-weight: 300;
  line-height: 36px;
  letter-spacing: -0.48px;
  max-width: 470px;
}

.bonus-card {
  border-radius: 6.9px;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 54px 53px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.bonus-icon { position: relative; z-index: 1; }
.bonus-card--dark .bonus-icon { background: #abc9ff; }
.bonus-card p {
  font-size: 26.7px;
  font-weight: 300;
  letter-spacing: -0.48px;
  line-height: 36px;
  position: relative;
  z-index: 1;
}
.bonus-card--dark { background: var(--navy-700); color: #fff; }
.bonus-card--dark p { max-width: 292px; font-weight: 600; }
.bonus-card--dark p strong { font-weight: 800; }
.bonus-card--light p { font-weight: 400; }
.bonus-card--light p strong { font-weight: 600; }
.guarantee-copy p strong { font-weight: 600; }
.bonus-card--light { background: #ffffff; color: var(--navy-950); }
.bonus-ribbon { position: absolute; top: -3px; left: 275px; width: 59px; height: 83px; }
.text-blue { color: var(--blue-highlight); }

.guarantee-row2 {
  display: grid;
  grid-template-columns: 686fr 752fr;
  gap: 13px;
}
.guarantee-row2 > * { min-height: 426px; }
.bonus-card--zoom { padding: 90px 59px 40px; }
.bonus-card--zoom p { max-width: 249px; }
.bonus-card--workshop { padding: 64px 70px 40px; gap: 18px; }
.bonus-card__workshop { max-width: 611px; }

/* Zoom / Macbook mockup (coordenadas do Figma dentro do card de 686x426; rotação na origem superior-esquerda) */
.bonus-card--zoom { overflow: hidden; }
.zoom-mockup {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.zoom-mockup__laptop {
  position: absolute;
  left: 307.6px;
  top: -2px;
  width: 542.2px;
  height: 486.1px;
  object-fit: contain;
  transform-origin: top left;
  transform: rotate(11.46deg);
}
.zoom-mockup__badge {
  position: absolute;
  left: 293px;
  top: 128.8px;
  width: 99.3px;
  height: 99.3px;
  transform-origin: top left;
  transform: rotate(-13.2deg);
}
.zoom-toolbar {
  position: absolute;
  top: 291px;
  left: 330px;
  width: 326px;
  height: 37.8px;
  background: rgba(0,0,0,0.44);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 6.2px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 4px;
  pointer-events: none;
}
.zoom-toolbar__btn { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.zoom-toolbar__btn img { width: 9px; height: 9px; }
.zoom-toolbar__btn span { font-size: 5px; line-height: 1; color: rgba(255,255,255,0.62); font-family: -apple-system, BlinkMacSystemFont, sans-serif; white-space: nowrap; }
.zoom-toolbar__btn--green span { color: #23d959; }
.zoom-toolbar__end {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 5px;
  color: #fff;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Black offer (Figma: caixa 1451x615 radius 47, selo 299px 168px acima) */
.black-section { padding: 0 0 113px; }
.black-wrap { position: relative; padding-top: 168px; }
.black-box {
  position: relative;
  background: var(--navy-600);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 47px;
  min-height: 615px;
  padding: 173px 40px 0;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.black-watermark {
  position: absolute;
  left: -517px;
  top: -773px;
  font-family: var(--font-script);
  font-size: 1733px;
  line-height: 1894px;
  letter-spacing: -86px;
  color: rgba(189,213,255,0.015);
  white-space: nowrap;
  pointer-events: none;
}
.black-wax-seal {
  position: absolute;
  top: 19px;
  left: 556px;
  width: 299px;
  height: 301px;
  transform: rotate(-8.4deg);
  z-index: 2;
}
.black-eyebrow {
  font-size: 22px;
  line-height: 27px;
  font-weight: 500;
  letter-spacing: -0.36px;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.black-heading { max-width: 897px; margin-top: 14px; position: relative; z-index: 1; }
.black-heading__underline {
  color: var(--ink-teal);
  font-style: italic;
  text-decoration: underline;
  font-weight: 300;
}
.black-btn { width: 312px; margin: 29px auto 0; }
.black-decoration { width: 226.7px; height: 56px; margin-top: auto; position: relative; z-index: 1; }
.black-decoration img { width: 100%; height: 100%; }

/* Founder (Figma: texto 708px, foto 622.7x657 radius 23.4, 20/27) */
.founder-section { padding: 0 0 82px; }
.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 708px) minmax(0, 622.7px);
  justify-content: space-between;
  gap: 48px;
  align-items: start;
}
.founder-copy .serif-heading { margin-bottom: 26px; }
.founder-copy p {
  font-size: 20px;
  font-weight: 300;
  line-height: 27px;
  letter-spacing: -0.36px;
  color: rgba(255,255,255,0.7);
}
.founder-copy strong { color: #fff; font-weight: 600; }
.founder-copy .medium { color: #fff; font-weight: 500; }
.founder-media {
  background: var(--navy-800);
  border-radius: 23.4px;
  overflow: hidden;
  aspect-ratio: 622.7 / 657;
  filter: grayscale(1) contrast(1.05);
}
/* Figma: crop mostra a largura toda e 80,7% da altura a partir de 1,67% do topo */
.founder-media img { width: 100%; height: auto; margin-top: -2.18%; }

/* Footer */
.site-footer { padding: 0 0 119px; }
.footer-divider { height: 1px; background: rgba(255,255,255,0.08); margin-bottom: 32px; }
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-copy, .footer-links a { font-size: 14px; color: rgba(255,255,255,0.6); text-decoration: none; }
.footer-credit { font-size: 14px; }
.footer-credit span { color: var(--ink-footer-link); font-weight: 500; }
.footer-links { display: flex; gap: 24px; }
.footer-links a:hover { color: #fff; }

/* Páginas legais (Política de Privacidade e Termos de Uso) */
.legal-header { padding: 32px 0 0; }
.legal-logo { display: inline-block; }
.legal-logo img { width: 160px; height: auto; }
.legal-page { padding: 56px 0 96px; }
.legal-page .container { max-width: 800px; }
.legal-eyebrow { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 18px; }
.legal-page h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 28px; }
.legal-page h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 48px 0 14px;
}
.legal-intro { font-size: 19px; line-height: 1.55; color: rgba(255,255,255,0.85); }
.legal-page p, .legal-page li {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.72);
}
.legal-page p + p, .legal-page ul + p, .legal-page p + ul { margin-top: 14px; }
.legal-page ul, .legal-page ol { padding-left: 22px; margin: 12px 0; }
.legal-page li + li { margin-top: 8px; }
.legal-page strong { color: #fff; font-weight: 600; }
.legal-page a { color: var(--ink-footer-link); text-decoration: underline; text-underline-offset: 3px; transition: color var(--motion-hover) var(--motion-ease); }
.legal-page a:hover { color: #fff; }
.legal-box { background: var(--navy-600); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 20px 24px; margin-top: 14px; }
.legal-toc { margin: 32px 0 8px; padding: 22px 26px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: rgba(255,255,255,0.02); }
.legal-toc ol { margin: 0; columns: 2; column-gap: 32px; }
.legal-toc li { font-size: 15px; break-inside: avoid; }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } .legal-page h2 { font-size: 24px; } }

/* Aviso de consentimento abaixo do formulário do hero */
.hero-consent { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.55); letter-spacing: -0.01em; }
.hero-consent a { color: rgba(255,255,255,0.8); text-decoration: underline; text-underline-offset: 2px; transition: color var(--motion-hover) var(--motion-ease); }
.hero-consent a:hover { color: #fff; }

/* Scroll reveal (classe .reveal é aplicada pelo script.js; sem JS nada fica escondido) */
.reveal {
  opacity: 0;
  translate: 0 18px; /* propriedade separada de `transform` pra não brigar com a escala do hover */
  transition:
    opacity var(--motion-reveal) var(--motion-ease) var(--reveal-delay, 0s),
    translate var(--motion-reveal) var(--motion-ease) var(--reveal-delay, 0s),
    transform var(--motion-hover) var(--motion-ease),
    box-shadow var(--motion-hover) var(--motion-ease),
    background-color var(--motion-hover) var(--motion-ease),
    border-color var(--motion-hover) var(--motion-ease);
}
.reveal.is-visible { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: none; transition: none; }
  .btn:hover, .pag-btn:hover, .proof-item:hover img, .module-card:hover, .compare-item:hover { transform: none; }
}

/* Responsive */
@media (max-width: 1100px) {
  /* Hero mobile/tablet: sai do canvas fixo de 1918px e vira fluxo (texto → foto),
     mantendo a atmosfera do desktop (grade, textura, telas fantasmas, "For",
     feixes de luz, halo azul e vinhetas) adaptada à tela menor */
  .hero { margin-top: 0; }
  .hero-canvas {
    zoom: 1; transform: none; width: auto; height: auto;
    display: flex; flex-direction: column;
    padding: 44px 24px 0; overflow: hidden;
  }

  /* 1. Ordem: texto → foto */
  .hero-content { order: 1; position: relative; left: 0; top: 0; width: 100%; max-width: 600px; align-items: flex-start; text-align: left; gap: 14px; }
  .hero-photo   { order: 2; }

  /* 2. Foto full-bleed, recorte na figura, base esvaecendo no navy */
  .hero-photo {
    position: relative; left: 0; top: 0; isolation: isolate;
    width: calc(100% + 48px); margin: 32px -24px 0;
    height: clamp(360px, 108vw, 540px);
    border-radius: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  }
  .hero-photo img {
    position: absolute; z-index: 1; left: 50%; top: -6%;
    width: 118%; max-width: none; height: auto;
    transform: translateX(-46%);
  }
  .hero-photo::before { /* halo azul atrás da foto (= glow-6) */
    content: ''; position: absolute; z-index: 0; left: 50%; top: 8%;
    width: 130%; height: 62%; transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(0,92,255,0.6) 0%, rgba(30,70,141,0.28) 38%, transparent 68%);
    mix-blend-mode: color-dodge; filter: blur(28px);
  }
  .hero-photo::after { /* vinhetas (= glow-1/3/5) */
    content: ''; position: absolute; z-index: 2; inset: 0;
    background:
      linear-gradient(to top, var(--navy-950) 0%, rgba(0,9,24,0.55) 22%, transparent 55%),
      radial-gradient(ellipse 70% 60% at 0% 100%, rgba(0,9,24,0.7), transparent 70%);
  }

  /* 3. Fundo: grade, textura, telas fantasmas, "For" e feixes de luz */
  .hero-bg { display: block; }
  .hero-vignettes, .hero-glow--6 { display: none; }
  .hero-dividers { left: 0; right: 0; top: 0; height: 100%;
    background: repeating-linear-gradient(to right, rgba(0,71,83,0.07) 0 1.5px, transparent 1.5px 72px); }
  .hero-texture { left: 0; top: 0; width: 100%; height: 100%; opacity: 0.04; background-size: 700px 699.5px; }
  .hero-bg-ghost {
    left: auto; right: -88%; top: -14%; width: 150%; height: 58%; opacity: 0.14;
    -webkit-mask: radial-gradient(ellipse 58% 52% at 52% 46%, #000 20%, transparent 100%);
            mask: radial-gradient(ellipse 58% 52% at 52% 46%, #000 20%, transparent 100%);
  }
  .hero-bg-script {
    left: auto; right: -6%; top: -9%;
    font-size: clamp(320px, 110vw, 620px); line-height: 1; letter-spacing: -0.05em;
    -webkit-mask: radial-gradient(ellipse 60% 55% at 50% 50%, #000 15%, transparent 100%);
            mask: radial-gradient(ellipse 60% 55% at 50% 50%, #000 15%, transparent 100%);
  }
  .hero-glow--2 { display: block; left: 102%; top: 6%;  width: 150px; height: 460px; opacity: 0.6; }
  .hero-glow--4 { display: block; left: 97%;  top: 10%; width: 230px; height: 540px; opacity: 0.65; }

  /* 4. Hierarquia tipográfica */
  /* Logo exatamente no centro da tela (largura da tela menos o padding lateral do canvas) */
  .hero-logo { width: calc(100vw - 48px); height: auto; justify-content: center; }
  .hero-logo img { width: 180px; height: auto; }
  .hero-heading { width: 100%; font-size: clamp(34px, 9.4vw, 54px); line-height: 1.05; letter-spacing: -0.0498em; }
  .hero-heading br, .hero-subtext br { display: none; }
  .hero-subtext { width: 100%; max-width: 520px; font-size: 17px; line-height: 24px; }
  .hero-form { width: 100%; max-width: 629px; gap: 12px; }
  .hero-form-row input { flex: 1 1 220px; width: auto; height: 56px; }
  .hero-submit { height: 56px; }

  .founder-grid { grid-template-columns: 1fr; }
  .founder-section { padding-top: 64px; }
  .black-wrap { padding-top: 120px; }
  .black-wax-seal { left: 50%; margin-left: -110px; width: 220px; height: auto; top: 0; }
  .black-box { padding-top: 140px; min-height: 0; padding-bottom: 40px; }
  .compare-section { padding-top: 64px; }
  .guarantee-section { padding-top: 64px; }
  .modules-section { padding: 80px 0; }
  .modules-header { margin-bottom: 40px; }
  .modules-pagination { margin-top: 0; }
  .module-card { flex-basis: 320px; }
  .module-card > img { height: 480px; }
  .module-lessons__inner { padding: 26px 28px 24px; }
  .module-lessons__label { margin-bottom: 12px; }
  .module-lessons__list li { padding: 10px 0; font-size: 14px; line-height: 20px; gap: 12px; }
  .module-lessons__num { width: 46px; font-size: 16px; }
  .guarantee-copy { padding: 40px 32px; }
  .bonus-card, .bonus-card--zoom, .bonus-card--workshop { padding: 40px 32px; }
  .guarantee-copy p, .bonus-card p { font-size: 21px; line-height: 29px; }
  .founder-media { max-width: 480px; margin: 0 auto; order: -1; }
  .guarantee-row1 { grid-template-columns: 1fr; }
  .guarantee-card { grid-template-columns: 1fr; text-align: center; }
  .guarantee-media { width: 100%; height: 240px; }
  .guarantee-copy { display: flex; flex-direction: column; align-items: center; }
  .guarantee-row2 { grid-template-columns: 1fr; }
  .bonus-card--zoom { min-height: 320px; }
}

@media (max-width: 760px) {
  /* Títulos em serifa maiores que o texto de apoio, como no desktop */
  .serif-heading, .serif-heading--sm { font-size: clamp(36px, 10.2vw, 48px); line-height: 1.08; }
  .serif-heading br { display: none; }
  .top-banner { padding: 10px 16px; }
  .top-banner p { font-size: 14px; line-height: 19px; letter-spacing: -0.2px; }
  .section-subtext { font-size: 15px; line-height: 1.4; max-width: 420px; margin: 0 auto; }
  .hero-heading { font-size: clamp(36px, 10.2vw, 48px); }
  .hero-subtext { font-size: 16px; line-height: 23px; }
  .hero-photo img { top: -13%; width: 168%; transform: translateX(-45%); }
  .compare-grid { grid-template-columns: 1fr; }
  .compare-item { padding: 24px; gap: 16px; }
  .compare-item p { max-width: none; }
  .proof-grid { flex-direction: column; }
  .hero-form-row { flex-direction: column; }
  .hero-form-row input { flex: 0 0 auto; width: 100%; }
  .black-box { padding: 120px 20px 40px; border-radius: 24px; }
  .black-heading { font-size: clamp(26px, 6vw, 40px); }
  .black-heading br, .guarantee-copy p br, .bonus-card p br { display: none; }
  .bonus-card--zoom { min-height: 520px; }
  .zoom-mockup { transform: scale(0.6); transform-origin: top left; left: -120px; top: 190px; }
  .proof-btn, .compare-btn, .black-btn { width: 100%; }
  .btn--icon { height: auto; }
  .founder-copy p { font-size: 17px; line-height: 1.55; }
  .modules-header { justify-content: center; text-align: center; }
}