/* ================================================================
   I9Appify - estilos da landing page
   Extraido do index.html (branch beta) - sem build, CSS puro.
================================================================ */

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

:root {
  --bg: #060608;
  --surface: #0B0C0F;
  --card: rgba(255,255,255,0.028);
  --text: #F4F5F7;
  --muted: #A2A7B0;
  --muted-2: #686D76;
  --accent: #3D7BFF;
  --ice: #8EC5FF;
  --amber: #FFB65C;
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.2);
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Manrope', -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

html { overflow-y: scroll; scroll-padding-top: 84px; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible { outline: 2px solid var(--ice); outline-offset: 5px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-static) { scroll-behavior: smooth; }
}
html.motion-static { scroll-behavior: auto; }
html.page-hidden *, html.page-hidden *::before, html.page-hidden *::after {
  animation-play-state: paused !important;
}
.motion-ready .marquee:not(.motion-in-view) .marquee-track { animation-play-state: paused; }
.nav-links a[aria-current="location"] { color: var(--text); }
.nav-links a[aria-current="location"]:not(.nav-cta)::after { transform: scaleX(1); }
.nav-wordmark > span { color: var(--ice); }
#bg-video.media-unavailable { color: transparent; }
a, button, summary { -webkit-tap-highlight-color: rgba(142,197,255,0.18); }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 1rem;
  z-index: 400;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  font-weight: 700;
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 2px; }

::selection { background: rgba(61,123,255,0.35); color: #fff; }

/* ─── GRAIN CINEMATOGRÁFICO ────────────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

/* ─── NAVBAR ────────────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  height: 68px;
  background: rgba(6,6,8,0.68);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  text-decoration: none;
  transition: opacity var(--ease);
}
.nav-wordmark {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text);
}
.nav-logo:hover { opacity: 0.75; }
.nav-logo img {
  height: 40px;
  width: auto;
  display: block;
  /* realça a logo metálica sobre o fundo escuro */
  filter: brightness(1.45) contrast(1.05) drop-shadow(0 0 10px rgba(142,197,255,0.18));
  transition: transform var(--ease);
}
.nav-logo:hover img {
  transform: scale(1.03);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--ease);
}
.nav-links a:hover { color: var(--text); }

/* Sublinhado animado nos links do menu */
.nav-links a:not(.nav-cta) {
  position: relative;
}
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--ice));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:not(.nav-cta):is(:hover, :focus-visible)::after { transform: scaleX(1); }

.nav-links .nav-cta {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 0.5625rem 1.25rem;
  box-shadow: 0 0 24px rgba(61,123,255,0.35);
  transition: box-shadow var(--ease), transform var(--ease);
}
.nav-cta:hover { box-shadow: 0 0 36px rgba(61,123,255,0.55); transform: translateY(-1px); }

.nav-hamburger { display: none; }

/* ─── HERO — VÍDEO SCROLL CINEMATOGRÁFICO ──────────────────────── */
/* O fluxo natural é o fallback. O JS habilita o trilho somente
   quando a experiência de movimento está disponível. */
#hero {
  position: relative;
  z-index: 1;
}

.hero-sticky {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#video-layer {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100svh;
  z-index: 1;
}

/*
  Luz ambiente atrás do vídeo: fundo preto puro com dois glows
  empilhados. O azul acompanha o clima inicial; o âmbar acende
  junto com a lâmpada do vídeo (opacidade controlada pelo JS
  conforme o progresso do scroll).
*/
#glow-blue, #glow-amber {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
#glow-blue {
  background: radial-gradient(ellipse 46% 62% at 50% 46%, rgba(37,86,196,0.34), transparent 72%);
  opacity: 0.9;
}
#glow-amber {
  background: radial-gradient(ellipse 42% 55% at 50% 30%, rgba(255,158,64,0.30), transparent 72%);
  opacity: 0;
}

#bg-video {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* personagem sempre inteiro, sem corte */
  object-position: center center;
  display: block;
  /* Primeiro frame como fundo: aparece na hora, mesmo antes de o
     mobile liberar o vídeo — elimina o "pulo" ao destravar */
  background: url('../poster.jpg') center / contain no-repeat;
}

#video-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100svh;
  z-index: 2;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.28) 20%, rgba(6,6,8,0.86) 100%),
              linear-gradient(0deg, var(--bg), transparent 20%);
  pointer-events: none;
}

/* ─── DECORAÇÃO LATERAL — VIEWFINDER DE ESTÚDIO ─────────────────
   Só aparece em telas largas, onde o vídeo vertical deixa espaço
   nas laterais. Em telas estreitas (celular) o vídeo preenche
   tudo e a decoração some.
──────────────────────────────────────────────────────────────── */
.hero-deco {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: none;
}

/* Moldura de enquadramento em volta da coluna do vídeo */
.vf-frame {
  position: absolute;
  top: 5.5rem;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc((100svh - 7.75rem) * 0.5625 + 3.5rem); /* proporção 9:16 + respiro */
  min-width: 320px;
}
.vf-frame i {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255,255,255,0.35);
}
.vf-frame i:nth-child(1) { top: 0;    left: 0;   border-right: none; border-bottom: none; }
.vf-frame i:nth-child(2) { top: 0;    right: 0;  border-left: none;  border-bottom: none; }
.vf-frame i:nth-child(3) { bottom: 0; left: 0;   border-right: none; border-top: none; }
.vf-frame i:nth-child(4) { bottom: 0; right: 0;  border-left: none;  border-top: none; }

/* HUD técnico — lado esquerdo */
.hud-left {
  position: absolute;
  left: clamp(1.5rem, 4vw, 3.5rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
}
.hud-left .hud-value { color: rgba(255,255,255,0.8); }
.hud-row { display: flex; flex-direction: column; gap: 0.25rem; }
.hud-key { font-size: 0.5625rem; color: rgba(255,255,255,0.28); }

.hud-meter {
  width: 120px;
  height: 2px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
  margin-top: 0.375rem;
}
.hud-meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--ice));
  transform: scaleX(0);
  transform-origin: left;
}

/* HUD — lado direito (assinatura vertical + capítulos) */
.hud-right {
  position: absolute;
  right: clamp(1.5rem, 4vw, 3.5rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
}
.hud-vertical {
  writing-mode: vertical-rl;
  font-size: 0.625rem;
  letter-spacing: 0.34em;
  color: rgba(255,255,255,0.26);
}
.hud-chapters {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.hud-chip {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.hud-chip i {
  width: 26px;
  height: 2px;
  background: rgba(255,255,255,0.14);
  transition: background 300ms ease;
}
.hud-chip.on { color: var(--ice); }
.hud-chip.on i { background: var(--accent); }

/* Palavras-eco gigantes vazadas nas laterais */
.echo {
  position: absolute;
  top: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 11vw, 11rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.09);
  user-select: none;
  white-space: nowrap;
  transition: opacity 500ms ease;
}
.echo-left  { left: 0;  transform: translate(-38%, calc(-50% + var(--py, 0px))) rotate(90deg); }
.echo-right { right: 0; transform: translate(38%, calc(-50% - var(--py, 0px))) rotate(-90deg); }

/* Capítulos da narrativa sobre o vídeo */
.hero-chapter {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem clamp(1.5rem, 5vw, 4rem);
}
#chapter-1 {
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 7rem 4rem;
}
#chapter-2, #chapter-3 { border-top: 1px solid var(--border); }
.hero-chapter:not(#chapter-1) .chapter-statement { font-size: clamp(2rem, 4.5vw, 3.75rem); }
.hero-footnote {
  margin-top: 1.375rem;
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.035em;
  text-wrap: balance;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 1.125rem;
  margin-bottom: 2.25rem;
  background: rgba(6,6,8,0.35);
  backdrop-filter: blur(8px);
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7.5vw, 6.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--text);
  margin-bottom: 1.75rem;
  text-wrap: balance;
}

.accent-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--ice) 0%, var(--accent) 45%, var(--ice) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
.accent-amber {
  background: linear-gradient(100deg, #FFD9A0 0%, var(--amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: clamp(1rem, 2vw, 1.1875rem);
  font-weight: 500;
  color: var(--muted);
  max-width: 540px;
  line-height: 1.7;
  margin-bottom: 2.75rem;
  text-wrap: balance;
}

.chapter-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ice);
  margin-bottom: 1.75rem;
}

.chapter-statement {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  max-width: 900px;
  text-wrap: balance;
}

.chapter-cta { margin-top: 3rem; }

/* ─── BOTÕES ────────────────────────────────────────────────────── */
.btn-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: 999px;
  padding: 0.9375rem 1.875rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--ease), box-shadow var(--ease),
              background var(--ease), border-color var(--ease),
              color var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn svg { transition: transform var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 32px rgba(61,123,255,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 52px rgba(61,123,255,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
}
/* Um brilho curto responde à interação, sem animação contínua. */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  left: 0;
  transform: translateX(-180%) skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
  pointer-events: none;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-primary:is(:hover, :focus-visible)::after {
  transform: translateX(340%) skewX(-22deg);
}

.btn-secondary {
  background: rgba(6,6,8,0.3);
  backdrop-filter: blur(8px);
  color: var(--text);
  border-color: var(--border-hover);
}
.btn-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.4);
}

/* Seta de scroll */
.scroll-hint {
  position: absolute;
  bottom: 1.125rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 0.75rem;
  color: var(--ice);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.scroll-arrow {
  width: 1px;
  height: 22px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.45));
}

/* ─── SEÇÕES (FUNDO SÓLIDO, COBREM O VÍDEO) ────────────────────── */
.page-section {
  position: relative;
  z-index: 10;
  background-color: var(--bg);
  padding: clamp(6rem, 12vh, 10rem) clamp(1.5rem, 5vw, 4rem);
  scroll-margin-top: 0;
}

.section-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* ─── MARQUEE EDITORIAL ─────────────────────────────────────────── */
.marquee {
  position: relative;
  z-index: 10;
  background: var(--bg);
  border-block: 1px solid var(--border);
  overflow: hidden;
}
.marquee-track {
  display: flex;
  width: max-content;
}
.marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee-group span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 1.125rem 0 1.125rem 1.75rem;
  white-space: nowrap;
}
.marquee-group span::after {
  content: "/";
  color: var(--accent);
  padding-left: 1.75rem;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ─── TIPOGRAFIA DE SEÇÃO ──────────────────────────────────────── */
.label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.75rem;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--text);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.section-sub {
  font-size: 1.0625rem;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.7;
}

/* ─── REVEAL ON SCROLL ─────────────────────────────────────────── */
.reveal {
  opacity: 1;
  transform: none;
}
.reveal-d1 { --reveal-delay: 50ms; }
.reveal-d2 { --reveal-delay: 100ms; }
.reveal-d3 { --reveal-delay: 150ms; }
.reveal-d4 { --reveal-delay: 200ms; }
.reveal-d5 { --reveal-delay: 250ms; }
.reveal-d6 { --reveal-delay: 300ms; }

/* ─── CARDS — SERVIÇOS ─────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 4.5rem;
}

.glow-card {
  position: relative;
  overflow: hidden;
}
.glow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
              rgba(61,123,255,0.1), transparent 65%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.glow-card:hover::before { opacity: 1; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.75rem;
  transition: border-color var(--ease), transform var(--ease);
}
.card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(61,123,255,0.12);
  border: 1px solid rgba(61,123,255,0.25);
  color: var(--ice);
  margin-bottom: 2rem;
}

.card-number {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--muted-2);
  margin-bottom: 1rem;
}

.card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  color: var(--text);
}

.card p {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

.card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
}
.card-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}
.card-list li svg { color: var(--accent); flex-shrink: 0; }

/* ─── MANIFESTO — leitura natural antes de habilitar movimento ── */
#manifesto {
  padding: 0;
}
.manifesto-sticky {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(6rem, 12vh, 10rem) clamp(1.5rem, 5vw, 4rem);
}
.manifesto-text {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.22;
  max-width: 980px;
  text-wrap: balance;
}
.manifesto-text .mw { opacity: 1; }
.manifesto-text .mw.lit { opacity: 1; }

/* ─── DIFERENCIAIS ─────────────────────────────────────────────── */
.diferenciais-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 4.5rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.diferencial-item {
  display: flex;
  align-items: flex-start;
  gap: 1.375rem;
  padding: 2.25rem 2.5rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background var(--ease);
  background: var(--card);
}
.diferencial-item:nth-child(even) { border-right: none; }
.diferencial-item:nth-last-child(-n+2) { border-bottom: none; }

.diferencial-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(61,123,255,0.1);
  border: 1px solid rgba(61,123,255,0.2);
  color: var(--ice);
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.diferencial-icon svg { width: 19px; height: 19px; }

.diferencial-text h4 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 0.375rem;
}

.diferencial-text p {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ─── PROCESSO ─────────────────────────────────────────────────── */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  margin-top: 4.5rem;
  position: relative;
}

.timeline-step {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
}

.step-top {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.step-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(61,123,255,0.1);
  border: 1px solid rgba(61,123,255,0.3);
  color: var(--ice);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(61,123,255,0.35), var(--border));
}
.timeline-step:last-child .step-line { display: none; }

.step-content h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}
.step-content p {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.68;
}

/* ─── COMPROMISSOS (STATS) ─────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 4.5rem;
}
.stat {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--border);
  background: var(--card);
}
.stat:last-child { border-right: none; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.stat-value em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ice);
}
.stat-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.5;
}

/* ─── FAQ ──────────────────────────────────────────────────────── */
.faq-list {
  margin-top: 4rem;
  border-top: 1px solid var(--border);
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.75rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  transition: color var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--ice); }
.faq-marker {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: transform var(--ease), background var(--ease), color var(--ease);
}
.faq-item[open] .faq-marker {
  transform: rotate(45deg);
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.faq-answer {
  padding: 0 3.5rem 1.75rem 0.25rem;
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 720px;
}

/* ─── CTA FINAL ────────────────────────────────────────────────── */
#cta {
  background:
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(61,123,255,0.16), transparent 70%),
    var(--bg);
}
.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
  max-width: 760px;
  margin: 0 auto;
  padding-block: clamp(2rem, 8vh, 5rem);
}
.cta-inner h2 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  margin-bottom: 0;
}
.cta-mail {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border-hover);
  padding-bottom: 2px;
  transition: color var(--ease), border-color var(--ease);
}
.cta-mail:hover { color: var(--ice); border-color: var(--ice); }

/* ─── FOOTER ───────────────────────────────────────────────────── */
footer {
  position: relative;
  z-index: 10;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 2.5rem clamp(1.5rem, 5vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--muted-2);
}
footer .nav-logo img { height: 34px; }
footer a { color: var(--muted-2); text-decoration: none; transition: color var(--ease); }
footer a:hover { color: var(--text); }

/* ─── MOVIMENTO PROGRESSIVO ──────────────────────────────────────
   Sticky permanece nativo. Sem JS, com economia de dados ou com
   pouco espaço vertical, todos os capítulos seguem no fluxo. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready:not(.motion-static) .reveal {
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  html.reveal-ready:not(.motion-static) .reveal:not(.visible) {
    opacity: 0;
    transform: translateY(20px);
  }
}

@media (prefers-reduced-motion: no-preference) and (min-height: 561px) {
  html.motion-ready:not(.motion-static) #hero { height: 400vh; height: 400svh; }
  html.motion-ready:not(.motion-static) .hero-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
  }
  html.motion-ready:not(.motion-static) #hero .hero-chapter {
    position: absolute;
    inset: 0;
    min-height: 0;
    padding: 6.5rem clamp(1.5rem, 5vw, 4rem) 8.5rem;
    border: 0;
    will-change: opacity, transform;
  }
  html.motion-ready:not(.motion-static) .hero-chapter[data-hidden] {
    visibility: hidden;
    pointer-events: none;
  }
  html.motion-ready:not(.motion-static) .hero-chapter:not(#chapter-1) .chapter-statement {
    font-size: clamp(2.25rem, 6vw, 5rem);
  }
  html.motion-ready:not(.motion-static) #video-layer,
  html.motion-ready:not(.motion-static) #video-overlay { height: 100%; }
  html.motion-ready:not(.motion-static) .scroll-hint { display: flex; }
  html.motion-ready:not(.motion-static) .marquee-track { animation: marquee 32s linear infinite; }
  html.motion-ready:not(.motion-static) .marquee:is(:hover, :focus-within) .marquee-track {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: no-preference) and (min-height: 561px) {
  html.motion-ready:not(.motion-static) #manifesto { height: 160vh; height: 160svh; }
  html.motion-ready:not(.motion-static) .manifesto-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
  }
  html.motion-ready:not(.motion-static) .manifesto-text .mw {
    opacity: 0.3;
    transition: opacity 160ms linear;
  }
  html.motion-ready:not(.motion-static) .manifesto-text .mw.lit { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) and (min-height: 561px) and (min-aspect-ratio: 5/6) and (min-width: 1100px) {
  html.motion-ready:not(.motion-static) .hero-deco { display: block; }
}

html.motion-static .reveal { opacity: 1; transform: none; transition: none; }
html.motion-static .btn-primary::after { display: none; }
html.motion-static .marquee-track { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn-primary::after { display: none; }
}

/* ─── MOBILE ───────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .grain { opacity: 0.022; }
  nav { padding-inline: 1.25rem; }
  .nav-links {
    display: flex;
    position: fixed;
    top: 68px; left: 0; right: 0;
    background: rgba(6,6,8,0.97);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem 1.5rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    z-index: 199;
    max-height: calc(100svh - 68px);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  }
  .nav-links.open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .nav-links a { width: 100%; font-size: 1rem; }
  .nav-links .nav-cta { justify-content: center; margin-top: 0.75rem; }
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
  }
  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 180ms ease, opacity 180ms ease;
  }
  .nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero-badge { font-size: 0.5625rem; letter-spacing: 0.12em; margin-bottom: 1.5rem; }
  h1 { font-size: clamp(2.35rem, 7.3vw, 4.5rem); margin-bottom: 1.375rem; }
  .hero-chapter .lead { max-width: 480px; line-height: 1.6; margin-bottom: 1.75rem; }
  .hero-footnote { font-size: 0.6875rem; margin-top: 1.125rem; }
  .chapter-label { margin-bottom: 1.375rem; }
  .chapter-cta { margin-top: 2rem; }
  .page-section { padding-block: 5.5rem; }
  .manifesto-sticky { padding-block: 5.5rem; }

  .cards-grid { grid-template-columns: 1fr; }
  .diferenciais-grid { grid-template-columns: 1fr; }
  .diferencial-item { border-right: none; }
  .diferencial-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .diferencial-item:last-child { border-bottom: none; }
  .timeline { grid-template-columns: 1fr; gap: 2.75rem; }
  .step-line { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px solid var(--border); }
  .stat:nth-child(even) { border-right: none; }
  .stat:nth-last-child(-n+2) { border-bottom: none; }
  .faq-answer { padding-right: 0.25rem; }
}

@media (max-width: 480px) {
  .btn-group { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
  .btn { width: 100%; }
  .btn-group { gap: 0.75rem; }
  .hero-chapter .btn { padding-block: 0.75rem; }
  .hero-badge { padding-inline: 0.875rem; }
  .hero-footnote { max-width: 300px; }
  .card { padding: 2rem 1.5rem; }
  .diferencial-item { padding: 1.75rem 1.5rem; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--border); }
  .stat:last-child { border-bottom: none; }
}

@media (prefers-reduced-motion: no-preference) and (min-height: 561px) and (max-width: 880px) {
  html.motion-ready:not(.motion-static) #hero { height: 340vh; height: 340svh; }
  html.motion-ready:not(.motion-static) #hero .hero-chapter {
    padding: 6rem 1.5rem 8rem;
  }
}

/* Celulares compactos e notebooks baixos: mantém CTAs dentro da tela. */
@media (min-height: 561px) and (max-height: 740px) {
  .hero-chapter h1 { font-size: clamp(2.25rem, 6.25vw, 4.25rem); margin-bottom: 1rem; }
  .hero-badge { margin-bottom: 1rem; padding-block: 0.375rem; }
  .hero-chapter .lead { font-size: 0.9375rem; line-height: 1.5; margin-bottom: 1.25rem; }
  .hero-footnote { margin-top: 0.875rem; }
  .hero-chapter .btn { min-height: 44px; padding-block: 0.625rem; }
  .scroll-hint { bottom: 0.5rem; }
  .scroll-arrow { height: 14px; }
}

@media (max-height: 560px) {
  #chapter-1 { padding-block: 6.5rem 3rem; }
  .hero-badge { margin-bottom: 1rem; }
  .hero-chapter h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
}

@media (prefers-reduced-motion: no-preference) and (min-height: 561px) and (max-height: 650px) and (max-width: 380px) {
  html.motion-ready:not(.motion-static) #hero .hero-chapter { padding-block: 5.5rem 6.5rem; }
  .hero-chapter h1 { font-size: 1.9rem; margin-bottom: 0.75rem; }
  .hero-badge { margin-bottom: 0.75rem; }
  .hero-footnote { font-size: 0.625rem; margin-top: 0.625rem; }
}

@media (hover: none) {
  .glow-card::before { display: none; }
  .btn-primary::after { display: none; }
  .card:hover, .btn:hover { transform: none; }
}

/* Sem JavaScript, a navegação móvel fica aberta no fluxo da página. */
@media (max-width: 880px) {
  html:not(.menu-ready) nav { position: relative; height: auto; flex-wrap: wrap; padding-block: 0.75rem; }
  html:not(.menu-ready) .nav-hamburger { display: none; }
  html:not(.menu-ready) .nav-links {
    position: static;
    width: 100%;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    padding: 0.5rem 0 0;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border: 0;
  }
  html:not(.menu-ready) .nav-links a { width: auto; font-size: 0.8125rem; }
  html:not(.menu-ready) #chapter-1 { padding-top: 3rem; }
}