/* ===========================================================
   AGENTE LIMPEZAS — DESIGN SYSTEM
   =========================================================== */

:root {
  /* Cor — paleta da marca */
  --navy-950: #06122A;
  --navy-900: #0A1B3D;
  --navy-800: #101F4A;
  --navy-700: #17285C;
  --navy-600: #223A7A;
  --navy-500: #2E4A97;

  --green-500: #6EBE45;
  --green-400: #83CE5A;
  --green-300: #A6DE85;

  --blue-500: #3A8FD9;
  --blue-400: #55A6EA;
  --blue-300: #90C7F0;

  --cristal-100: #F5F9FC;
  --cristal-200: #E3ECF3;
  --cristal-300: #C8D6E2;

  --ink-900: #FFFFFF;
  --ink-700: #DDE6EF;
  --ink-500: #9AA8BA;
  --ink-300: #607085;

  --bg: var(--navy-950);
  --bg-elev: var(--navy-900);

  /* Tipografia */
  --f-display: "Fraunces", "Times New Roman", serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala (base 8) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;
  --s-10: 160px;

  /* Escala tipográfica fluida */
  --t-eyebrow: clamp(11px, 0.75vw, 13px);
  --t-body: clamp(15px, 1.05vw, 17px);
  --t-lead: clamp(17px, 1.25vw, 20px);
  --t-h4: clamp(20px, 1.6vw, 26px);
  --t-h3: clamp(26px, 2.4vw, 38px);
  --t-h2: clamp(36px, 4.6vw, 76px);
  --t-h1: clamp(48px, 8vw, 132px);

  /* Timing */
  --e-out: cubic-bezier(.22,.61,.36,1);
  --e-in: cubic-bezier(.55,.06,.68,.19);
  --e-inout: cubic-bezier(.65,.05,.36,1);
  --d-fast: .3s;
  --d-med: .6s;
  --d-slow: 1.1s;

  /* Container */
  --wrap: 1240px;
  --wrap-narrow: 860px;
  --gutter: clamp(20px, 4vw, 64px);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-700);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

/* Wrap */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

/* Text primitives */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--ink-900);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  color: var(--green-400);
  font-weight: 500;
}
p { margin: 0; }
.eyebrow {
  font-family: var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  color: var(--blue-400);
  margin: 0 0 var(--s-4);
}
.section-title { font-size: var(--t-h2); }
.section-sub {
  font-size: var(--t-lead);
  color: var(--ink-500);
  max-width: 62ch;
  margin-top: var(--s-4);
}
.section-head {
  text-align: center;
  margin-bottom: var(--s-8);
}
.section-head .section-sub { margin-inline: auto; }

/* ===========================================================
   LOADER
   =========================================================== */
.loader {
  position: fixed;
  inset: 0;
  background: var(--navy-950);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  transition: opacity .8s var(--e-out), visibility 0s .8s;
}
.loader.is-hidden { opacity: 0; visibility: hidden; }
.loader__mark img {
  filter: drop-shadow(0 0 30px rgba(110, 190, 69, .35));
  animation: loaderBob 2.4s var(--e-inout) infinite;
}
@keyframes loaderBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.03); }
}
.loader__bar {
  width: 200px;
  height: 2px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  border-radius: 2px;
}
.loader__bar span {
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--blue-400), transparent);
  animation: loaderSlide 1.4s var(--e-inout) infinite;
}
@keyframes loaderSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.loader__label {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ===========================================================
   NAV
   =========================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .35s var(--e-out), backdrop-filter .35s var(--e-out), border-color .35s var(--e-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(6, 18, 42, .78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(255,255,255,.06);
}
.nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s-4) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink-900);
}
.nav__logo {
  height: 44px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
  transition: transform .3s var(--e-out);
}
.nav__brand:hover .nav__logo { transform: scale(1.05); }
.nav__links {
  display: flex;
  gap: var(--s-5);
  margin-left: auto;
  align-items: center;
}
.nav__links a {
  font-size: 14px;
  color: var(--ink-500);
  transition: color .2s;
  position: relative;
}
.nav__links a:hover { color: var(--ink-900); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -4px;
  height: 1px;
  background: var(--green-400);
  transition: right .3s var(--e-out);
}
.nav__links a:hover::after { right: 0; }
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--green-500);
  color: var(--navy-950);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 999px;
  transition: transform .2s var(--e-out), background .2s var(--e-out);
  box-shadow: 0 0 0 0 rgba(110, 190, 69, .4);
}
.nav__cta:hover {
  background: var(--green-400);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(110, 190, 69, .5);
}
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  margin-left: 4px;
  z-index: 110;
  position: relative;
}
.nav__toggle span {
  width: 22px;
  height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: transform .3s var(--e-out), opacity .3s var(--e-out);
  transform-origin: center;
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* active nav link (per page) */
body[data-page="inicio"]   .nav__links a[data-page="inicio"],
body[data-page="servicos"] .nav__links a[data-page="servicos"],
body[data-page="sobre"]    .nav__links a[data-page="sobre"],
body[data-page="contato"]  .nav__links a[data-page="contato"] {
  color: var(--green-400);
}
body[data-page="inicio"]   .nav__links a[data-page="inicio"]::after,
body[data-page="servicos"] .nav__links a[data-page="servicos"]::after,
body[data-page="sobre"]    .nav__links a[data-page="sobre"]::after,
body[data-page="contato"]  .nav__links a[data-page="contato"]::after {
  right: 0;
}

/* ===========================================================
   BUTTONS
   =========================================================== */
/* --- 3D buttons: chapa em relevo, textura, sombra em camadas --- */
.btn {
  --btn-h: 4px;               /* profundidade da chapa */
  --btn-shadow: 0 12px 28px -12px rgba(0,0,0,.5);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  transform: translateZ(0);
  will-change: transform, box-shadow;
  transition:
    transform .18s cubic-bezier(.2,.9,.3,1),
    box-shadow .22s var(--e-out),
    filter .22s var(--e-out);
  overflow: hidden;
  isolation: isolate;
}
.btn::before {
  /* highlight glass superior */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,.1) 100%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}
.btn::after {
  /* textura de granulado sutil */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px);
  background-size: 4px 4px;
  opacity: .18;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}
.btn > * { position: relative; z-index: 2; }

.btn--primary {
  background:
    linear-gradient(180deg, #84D255 0%, #6EBE45 55%, #4EA22D 100%);
  color: #0B2E00;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 var(--btn-h) 0 -1px #3B7B22,
    0 calc(var(--btn-h) + 2px) 12px rgba(0,0,0,.35),
    0 20px 40px -18px rgba(110, 190, 69, .55);
  text-shadow: 0 1px 0 rgba(255,255,255,.15);
}
.btn--primary:hover {
  --btn-h: 6px;
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 var(--btn-h) 0 -1px #3B7B22,
    0 calc(var(--btn-h) + 4px) 20px rgba(0,0,0,.4),
    0 26px 50px -16px rgba(110, 190, 69, .75);
}
.btn--primary:active {
  --btn-h: 1px;
  transform: translateY(3px);
  filter: brightness(.95);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.25),
    inset 0 -1px 0 rgba(255,255,255,.2),
    0 var(--btn-h) 0 -1px #3B7B22,
    0 4px 10px rgba(0,0,0,.3);
}

.btn--ghost {
  color: var(--ink-900);
  border: 1px solid rgba(255,255,255,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 4px 0 -1px rgba(0,0,0,.5),
    0 10px 24px rgba(0,0,0,.25);
}
.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.4);
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 6px 0 -1px rgba(0,0,0,.5),
    0 14px 30px rgba(0,0,0,.35);
}
.btn--ghost:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.35),
    0 1px 0 -1px rgba(0,0,0,.5);
}

.btn--big {
  padding: 22px 38px;
  font-size: 17px;
  --btn-h: 6px;
}
.btn--big:hover { --btn-h: 8px; }
.btn--big:active { --btn-h: 2px; }

/* Nav CTA também ganha o mesmo tratamento */
.nav__cta {
  background: linear-gradient(180deg, #84D255 0%, #6EBE45 55%, #4EA22D 100%);
  color: #0B2E00;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 3px 0 -1px #3B7B22,
    0 8px 18px -6px rgba(110, 190, 69, .5);
  text-shadow: 0 1px 0 rgba(255,255,255,.12);
  transition: transform .18s var(--e-out), filter .22s, box-shadow .22s;
}
.nav__cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 5px 0 -1px #3B7B22,
    0 14px 28px -8px rgba(110, 190, 69, .7);
  background: linear-gradient(180deg, #84D255 0%, #6EBE45 55%, #4EA22D 100%);
}
.nav__cta:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.2),
    0 1px 0 -1px #3B7B22;
}

/* ===========================================================
   HERO
   =========================================================== */
.hero {
  position: relative;
  height: 460vh;
  background: var(--navy-950);
}
.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--navy-950);
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    radial-gradient(1200px 800px at 50% 40%, rgba(6, 18, 42, 0) 0%, rgba(6, 18, 42, .35) 60%, rgba(6, 18, 42, .8) 100%);
  mix-blend-mode: multiply;
}
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(6, 18, 42, .55) 0%, rgba(6, 18, 42, 0) 25%, rgba(6, 18, 42, 0) 55%, rgba(6, 18, 42, .85) 100%);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gutter);
  max-width: var(--wrap);
  margin: 0 auto;
  left: 0; right: 0;
  pointer-events: none;
}
.hero__overlay > * { pointer-events: auto; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-bottom: var(--s-6);
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}
.hero__eyebrow .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-400);
  box-shadow: 0 0 12px var(--green-400);
  animation: pulse 2.4s var(--e-inout) infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .6; }
}

.hero__title {
  font-family: var(--f-display);
  color: var(--ink-900);
  font-size: var(--t-h1);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 500;
  max-width: 14ch;
  margin: 0 0 var(--s-6);
}
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.05em;
}
.hero__title .line em {
  color: var(--green-400);
  font-style: italic;
}
.hero__title .line > * {
  display: inline-block;
}

.hero__sub {
  font-size: var(--t-lead);
  color: var(--ink-500);
  max-width: 46ch;
  margin-bottom: var(--s-6);
  opacity: 0;
  transform: translateY(20px);
}
.hero__ctas {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
}

/* Cristalinidade meter */
.meter {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink-700);
  font-family: var(--f-body);
  opacity: 0;
  transition: opacity 1s var(--e-out) .3s;
}
.meter.is-ready { opacity: 1; }
.meter__label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-500);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.meter__track {
  position: relative;
  width: 3px;
  height: min(360px, 42vh);
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: visible;
}
.meter__fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(to top, var(--blue-500), var(--green-400));
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(110, 190, 69, .5);
  transition: height .05s linear;
}
.meter__ticks {
  position: absolute;
  left: 8px;
  top: 0; bottom: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  pointer-events: none;
}
.meter__ticks span {
  display: block;
  width: 4px;
  height: 1px;
  background: rgba(255,255,255,.15);
}
.meter__value {
  display: flex;
  align-items: baseline;
  font-family: var(--f-display);
  color: var(--ink-900);
  font-weight: 500;
}
.meter__value span { font-size: 28px; letter-spacing: -0.02em; }
.meter__value em { font-style: normal; font-size: 12px; margin-left: 2px; color: var(--ink-500); }

/* Scroll cue */
.hero__scroll {
  position: absolute;
  bottom: var(--s-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-500);
  opacity: 0;
  animation: fadeInDelay 1s var(--e-out) 1.4s forwards, bounce 2.4s var(--e-inout) 2s infinite;
}
@keyframes fadeInDelay { to { opacity: 1; } }
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* ===========================================================
   MANIFESTO
   =========================================================== */
.manifesto {
  padding: var(--s-10) 0;
  background: linear-gradient(to bottom, var(--navy-950), var(--navy-900));
  text-align: center;
}
.manifesto .eyebrow { color: var(--blue-400); }
.manifesto__title {
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink-900);
  max-width: 20ch;
  margin: 0 auto;
}
.manifesto__title .strike {
  color: var(--ink-500);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--green-500);
}
.manifesto__title em {
  font-style: italic;
  color: var(--green-400);
}
.manifesto__body {
  max-width: 56ch;
  margin: var(--s-6) auto 0;
  font-size: var(--t-lead);
  color: var(--ink-500);
}

/* ===========================================================
   SERVIÇOS
   =========================================================== */
.services {
  padding: var(--s-10) 0;
  background: var(--navy-900);
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
.service {
  background: var(--navy-800);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.05);
  transition: transform .5s var(--e-out), border-color .5s var(--e-out);
  display: flex;
  flex-direction: column;
}
.service:hover {
  transform: translateY(-6px);
  border-color: rgba(110, 190, 69, .3);
}
.service__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}
.service__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--e-out);
}
.service:hover .service__media img { transform: scale(1.06); }
.service__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(6, 18, 42, .5) 100%);
}
.service__body {
  padding: var(--s-5) var(--s-5) var(--s-6);
  position: relative;
  flex: 1;
}
.service__num {
  position: absolute;
  top: -22px;
  right: var(--s-5);
  font-family: var(--f-display);
  font-size: 48px;
  color: var(--green-400);
  font-weight: 500;
  letter-spacing: -0.03em;
  opacity: .9;
  line-height: 1;
}
.service h3 {
  font-size: var(--t-h3);
  margin-bottom: var(--s-3);
}
.service p {
  color: var(--ink-500);
  margin-bottom: var(--s-4);
}
.service ul li {
  font-size: 14px;
  color: var(--ink-700);
  padding: 8px 0 8px 20px;
  position: relative;
  border-top: 1px solid rgba(255,255,255,.05);
}
.service ul li:first-child { border-top: 0; }
.service ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border: 2px solid var(--blue-400);
  border-right: 0; border-bottom: 0;
  transform: translateY(-50%) rotate(135deg);
  margin-top: -2px;
}

/* ===========================================================
   BEFORE/AFTER
   =========================================================== */
.ba {
  padding: var(--s-10) 0;
  background: linear-gradient(to bottom, var(--navy-900), var(--navy-950));
}
.ba__stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.ba__slider { position: relative; }
.ba__compare {
  --split: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 24px;
  user-select: none;
  cursor: ew-resize;
  border: 1px solid rgba(255,255,255,.06);
}
.ba__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba__clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
  transition: clip-path .05s linear;
}
.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split);
  width: 3px;
  background: var(--ink-900);
  transform: translateX(-50%);
  cursor: ew-resize;
  z-index: 10;
  outline: none;
  transition: left .05s linear;
}
.ba__grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  background: var(--ink-900);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.ba__grip::before, .ba__grip::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 2px solid var(--navy-900);
  border-right: 0; border-bottom: 0;
}
.ba__grip::before { transform: rotate(-45deg) translateX(4px); }
.ba__grip::after { transform: rotate(135deg) translateX(4px); }
.ba__tag {
  position: absolute;
  top: var(--s-4);
  font-size: 11px;
  letter-spacing: 0.3em;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  z-index: 5;
}
.ba__tag--l {
  left: var(--s-4);
  background: rgba(6, 18, 42, .7);
  color: var(--cristal-100);
  border: 1px solid rgba(255,255,255,.14);
}
.ba__tag--r {
  right: var(--s-4);
  background: var(--green-500);
  color: var(--navy-950);
}

.ba__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.ba__card {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,.05);
}
.ba__card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1s var(--e-out);
}
.ba__card:hover img { transform: scale(1.05); }
.ba__card figcaption {
  padding: var(--s-3) var(--s-4);
  font-size: 13px;
  color: var(--ink-500);
}

/* ===========================================================
   MÉTODO (steps)
   =========================================================== */
.method {
  padding: var(--s-10) 0;
  background: var(--navy-900);
}
/* --- naocodei nº 23 — Painéis que expandem --- */
.panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--s-2);
  height: 480px;
  border-radius: 24px;
  overflow: hidden;
  transition: grid-template-columns .7s cubic-bezier(.6, .05, .28, 1);
}
.panels:has(.panel.is-open:nth-child(1)) { grid-template-columns: 2.6fr 1fr 1fr 1fr; }
.panels:has(.panel.is-open:nth-child(2)) { grid-template-columns: 1fr 2.6fr 1fr 1fr; }
.panels:has(.panel.is-open:nth-child(3)) { grid-template-columns: 1fr 1fr 2.6fr 1fr; }
.panels:has(.panel.is-open:nth-child(4)) { grid-template-columns: 1fr 1fr 1fr 2.6fr; }
.panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 0;
  color: var(--ink-900);
  text-align: left;
  cursor: pointer;
  background: var(--navy-800);
  transition: border-color .5s var(--e-out);
}
.panel:hover { border-color: rgba(110, 190, 69, .4); }
.panel__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.45) brightness(.65);
  transition: filter .7s var(--e-out), transform 1.5s var(--e-out);
}
.panel.is-open .panel__bg {
  filter: grayscale(0) brightness(.85);
  transform: scale(1.06);
}
.panel__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 18, 42, .3) 0%, rgba(6, 18, 42, .9) 100%);
  transition: opacity .5s var(--e-out);
}
.panel.is-open .panel__shade {
  background: linear-gradient(180deg, rgba(6, 18, 42, .1) 0%, rgba(6, 18, 42, .82) 100%);
}
.panel__num {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--green-400);
  font-weight: 600;
  z-index: 2;
  letter-spacing: -0.02em;
}
.panel__label {
  position: absolute;
  bottom: var(--s-4);
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center left;
  white-space: nowrap;
  z-index: 2;
  font-family: var(--f-display);
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--s-3);
  transition: opacity .3s;
}
.panel__label b { font-size: 22px; color: var(--ink-900); font-weight: 500; letter-spacing: -0.02em; }
.panel__label em { font-style: normal; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-500); }
.panel.is-open .panel__label { opacity: 0; }
.panel__body {
  position: absolute;
  bottom: var(--s-5);
  left: var(--s-5);
  right: var(--s-5);
  z-index: 3;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s var(--e-out) .2s, transform .5s var(--e-out) .2s;
}
.panel.is-open .panel__body {
  opacity: 1;
  transform: none;
}
.panel__body h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.panel__body p { font-size: 15px; color: var(--ink-700); max-width: 46ch; }

/* ===========================================================
   VOICE (quote)
   =========================================================== */
.voice {
  padding: var(--s-10) 0 var(--s-8);
  background: var(--navy-950);
  position: relative;
}
.voice::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 80% 50%, rgba(58, 143, 217, .08), transparent 70%),
    radial-gradient(500px 250px at 20% 50%, rgba(110, 190, 69, .06), transparent 70%);
  pointer-events: none;
}
.voice__quote {
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
}
.voice__mark {
  display: block;
  font-family: var(--f-display);
  font-size: 160px;
  line-height: .8;
  color: var(--green-400);
  opacity: .4;
  margin-bottom: -20px;
}
.voice__quote p {
  font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  max-width: 28ch;
  margin: 0 auto;
}
.voice__quote p em {
  font-style: italic;
  color: var(--green-400);
  font-weight: 500;
}
.voice__by {
  margin-top: var(--s-5);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.voice__dash {
  width: 32px;
  height: 1px;
  background: var(--ink-500);
}

/* ===========================================================
   STATS
   =========================================================== */
.stats {
  padding: var(--s-8) 0;
  background: var(--navy-950);
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
.stats__grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat__val--text {
  font-size: clamp(38px, 4.8vw, 68px);
  white-space: nowrap;
}
.stat {
  text-align: center;
  padding: var(--s-4);
}
.stat__val {
  font-family: var(--f-display);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1;
  letter-spacing: -0.03em;
  display: inline-block;
}
.stat em {
  font-style: normal;
  font-family: var(--f-display);
  font-size: clamp(32px, 4vw, 56px);
  color: var(--green-400);
  vertical-align: baseline;
  margin-left: 2px;
}
.stat__label {
  display: block;
  margin-top: var(--s-3);
  font-size: 13px;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* ===========================================================
   KIT
   =========================================================== */
.kit {
  padding: var(--s-10) 0;
  background: linear-gradient(to bottom, var(--navy-950), var(--navy-900));
}
.kit__wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s-8);
  align-items: center;
}
.kit__copy .section-title { text-align: left; }
.kit__copy .eyebrow { margin-bottom: var(--s-3); }
.kit__body {
  color: var(--ink-500);
  font-size: var(--t-lead);
  margin-top: var(--s-4);
  margin-bottom: var(--s-6);
  max-width: 42ch;
}
.kit__body b { color: var(--green-400); font-weight: 600; }
.kit__list li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--ink-700);
  font-size: 15px;
}
.kit__list li:last-child { border-bottom: 0; }
.kit__list li span {
  color: var(--green-400);
  margin-right: var(--s-2);
}
.kit__media {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  aspect-ratio: 4 / 3;
}
.kit__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.kit__badge {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  background: rgba(6, 18, 42, .8);
  backdrop-filter: blur(8px);
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
}
.kit__badge b {
  display: block;
  font-family: var(--f-display);
  color: var(--green-400);
  font-size: 20px;
  letter-spacing: 0.05em;
}
.kit__badge em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ===========================================================
   GALERIA
   =========================================================== */
.gallery {
  padding: var(--s-10) 0;
  background: var(--navy-900);
}
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: var(--s-3);
}
.gallery__grid figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: var(--navy-800);
}
.gallery__grid figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.5s var(--e-out);
}
.gallery__grid figure:hover img { transform: scale(1.08); }
.gallery__grid figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 18, 42, .9) 0%, rgba(6, 18, 42, 0) 40%);
}
.gallery__grid figcaption {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  right: var(--s-3);
  z-index: 2;
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 500;
}
.gallery__tall { grid-row: span 2; }
.gallery__wide { grid-column: span 2; }

/* ===========================================================
   AREA DE ATENDIMENTO
   =========================================================== */
.area {
  padding: var(--s-10) 0;
  background: linear-gradient(to bottom, var(--navy-900), var(--navy-950));
}
.area__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.area__card {
  padding: var(--s-6);
  background: var(--navy-800);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.05);
  transition: transform .4s var(--e-out), border-color .4s var(--e-out);
  position: relative;
}
.area__card:hover {
  transform: translateY(-4px);
  border-color: rgba(110, 190, 69, .3);
}
.area__pin {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  background: rgba(58, 143, 217, .12);
  border-radius: 50%;
  margin-bottom: var(--s-4);
  position: relative;
}
.area__pin::before {
  content: "";
  width: 14px; height: 14px;
  border: 2px solid var(--blue-400);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  margin-top: -4px;
}
.area__card h3 {
  font-size: var(--t-h3);
  margin-bottom: var(--s-3);
}
.area__card p {
  font-size: 14px;
  color: var(--ink-500);
  line-height: 1.6;
}

/* ===========================================================
   FAQ
   =========================================================== */
.faq {
  padding: var(--s-10) 0;
  background: var(--navy-950);
}
.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.faq details {
  background: var(--navy-800);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.05);
  overflow: hidden;
  transition: border-color .3s;
}
.faq details[open] { border-color: rgba(110, 190, 69, .3); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-4) var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-display);
  font-size: var(--t-h4);
  font-weight: 500;
  color: var(--ink-900);
  gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq__ico {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  position: relative;
  transition: transform .3s var(--e-out), background .3s;
}
.faq__ico::before, .faq__ico::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1.5px;
  background: var(--ink-900);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--e-out);
}
.faq__ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq__ico {
  background: var(--green-500);
  border-color: var(--green-500);
}
.faq details[open] .faq__ico::before { background: var(--navy-950); }
.faq details[open] .faq__ico::after { transform: translate(-50%, -50%) rotate(0deg); background: var(--navy-950); }
.faq__body {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--ink-500);
  font-size: 15px;
  line-height: 1.7;
}

/* ===========================================================
   CTA
   =========================================================== */
.cta {
  padding: var(--s-8) 0 var(--s-10);
  background: var(--navy-950);
}
.cta__card {
  background:
    radial-gradient(1200px 400px at 50% 0%, rgba(110, 190, 69, .15), transparent 70%),
    radial-gradient(800px 300px at 100% 100%, rgba(58, 143, 217, .15), transparent 70%),
    var(--navy-800);
  border: 1px solid rgba(110, 190, 69, .25);
  border-radius: 32px;
  padding: var(--s-8) var(--s-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta__card::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(110, 190, 69, .05), transparent 40%);
  animation: rotate 30s linear infinite;
}
@keyframes rotate {
  to { transform: rotate(360deg); }
}
.cta__card > * { position: relative; }
.cta__card h2 {
  font-size: var(--t-h2);
  max-width: 22ch;
  margin: 0 auto var(--s-4);
}
.cta__card > p {
  color: var(--ink-500);
  font-size: var(--t-lead);
  margin-bottom: var(--s-6);
  max-width: 46ch;
  margin-inline: auto;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.foot {
  background: var(--navy-950);
  border-top: 1px solid rgba(255,255,255,.05);
  color: var(--ink-500);
  font-size: 14px;
}
.foot__wrap {
  padding: var(--s-8) var(--gutter);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-6);
}
.foot__col {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.foot__col b {
  color: var(--ink-900);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: var(--s-2);
}
.foot__col a { transition: color .2s; }
.foot__col a:hover { color: var(--green-400); }
.foot__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.foot__logo {
  height: 48px;
  width: auto;
  object-fit: contain;
}
.foot__brand b {
  display: block;
  color: var(--ink-900);
  font-family: var(--f-display);
  font-size: 18px;
  margin: 0;
}
.foot__brand em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.foot__col--brand p { max-width: 40ch; }
.foot__base {
  border-top: 1px solid rgba(255,255,255,.04);
  padding: var(--s-4) 0;
}
.foot__baseWrap {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-300);
}
.foot__sig b { color: var(--green-400); font-weight: 600; }

/* ===========================================================
   WHATSAPP FLOAT
   =========================================================== */
.wa-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 60px; height: 60px;
  background: #25D366;
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 90;
  box-shadow: 0 12px 30px rgba(37, 211, 102, .5);
  transition: transform .3s var(--e-out);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: waPulse 2s ease-out infinite;
}
@keyframes waPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ===========================================================
   REVEAL BASE
   =========================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--e-out), transform .8s var(--e-out);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 960px) {
  .services__grid,
  .ba__grid,
  .steps,
  .stats__grid,
  .area__grid { grid-template-columns: repeat(2, 1fr); }

  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
  .gallery__tall { grid-row: auto; }
  .gallery__wide { grid-column: span 2; }

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

  .foot__wrap { grid-template-columns: repeat(2, 1fr); }

  .steps::before { display: none; }
}

@media (max-width: 860px) {
  /* NAV MOBILE — drawer + hambúrguer no canto direito */
  .nav__toggle { display: flex; }
  .nav__cta {
    padding: 10px 14px;
    font-size: 13px;
  }
  .nav__cta svg { width: 18px; height: 18px; }
  /* Logo à esquerda | hambúrguer à direita: space-between resolve */
  .nav__inner {
    justify-content: space-between;
    gap: 0;
    padding: var(--s-3) 20px;
    overflow: visible;
  }
  /* Logo inteira, sem corte e sem sombra */
  .nav__brand {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .nav__logo {
    height: 48px;
    width: auto;
    max-width: none;
    display: block;
    object-fit: contain;
    filter: none;
    margin: 0;
    padding: 0;
  }
  .nav__brand:hover .nav__logo { transform: none; }
  /* Hambúrguer branco + sombra leve para ficar legível sobre o vídeo */
  .nav__toggle {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
  }
  .nav__toggle span { background: #fff; }
  .nav__links {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(88vw, 340px);
    padding: 96px var(--s-6) var(--s-6);
    background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
    border-left: 1px solid rgba(255,255,255,.06);
    flex-direction: column;
    gap: var(--s-2);
    align-items: stretch;
    margin: 0;
    transform: translateX(100%);
    transition: transform .35s var(--e-out);
    box-shadow: -20px 0 60px rgba(0,0,0,.5);
  }
  .nav.is-open .nav__links { transform: none; }
  .nav__links a {
    font-family: var(--f-display);
    font-size: 26px;
    padding: 14px 0;
    color: var(--ink-900);
    border-bottom: 1px solid rgba(255,255,255,.06);
    letter-spacing: -0.01em;
  }
  .nav__links a::after { display: none; }
  .nav.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(6, 18, 42, .55);
    z-index: -1;
    backdrop-filter: blur(4px);
  }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; }

  .hero { height: 420vh; }
  .hero__title {
    font-size: clamp(42px, 12vw, 68px);
    max-width: none;
    white-space: normal;
  }
  .hero__sub { font-size: 15px; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { justify-content: center; }
  .hero__eyebrow {
    font-size: 9px;
    padding: 6px 12px;
    letter-spacing: 0.18em;
  }
  .hero__eyebrow span:not(.dot) {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .meter {
    right: 14px;
    transform: translateY(-50%) scale(.75);
    transform-origin: right center;
  }

  .services__grid,
  .ba__grid,
  .steps,
  .stats__grid,
  .area__grid,
  .foot__wrap { grid-template-columns: 1fr; }

  .gallery__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
  }
  .gallery__wide { grid-column: auto; }

  .section-head { margin-bottom: var(--s-6); }

  .cta__card { padding: var(--s-6) var(--s-4); }
  .cta__card h2 { font-size: clamp(28px, 8vw, 44px); }

  .btn--big { padding: 18px 24px; font-size: 15px; }
  .btn--big span { font-size: 13px; }

  .foot__baseWrap { justify-content: center; text-align: center; }
}

@media (max-width: 460px) {
  .meter { display: none; }
  .nav__cta span { display: none; }
  .nav__cta { padding: 10px; }
  .nav__cta svg { width: 20px; height: 20px; }
  /* .nav__logo mantém 48px do bloco 860px — respeita o range 44-48px pedido */
}

/* ===========================================================
   HERO — DESKTOP ONLY (min-width: 769px)
   Tira a etiqueta de cima da logo do header e empurra o stack
   da hero para baixo: ~92px de cabeçalho + ~36px de folga.
   Mobile (≤768px) não é afetado — lá o .hero__overlay é display:none.
   =========================================================== */
@media (min-width: 769px) {
  .hero__overlay {
    justify-content: flex-start;
    padding-top: 128px;
  }
  .hero__eyebrow {
    margin-bottom: var(--s-4);
  }
}

/* ===========================================================
   ATO II — HERO 2 (novo vídeo frame)
   =========================================================== */
.hero2 {
  position: relative;
  height: 700vh;
  background: #000;
  z-index: 1;
}
.hero2__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #000;
}
.hero2__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero2__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* camada de escurecimento removida — vídeo mostrado em plena qualidade */
  background: none;
}
.hero2__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gutter);
  max-width: var(--wrap);
  margin: 0 auto;
  left: 0; right: 0;
  pointer-events: none;
}
.hero2__overlay > * { pointer-events: auto; }
.hero2__eyebrow {
  color: var(--green-400);
  margin-bottom: var(--s-4);
  align-self: flex-start;
  opacity: 0;
}
.hero2__title {
  font-family: var(--f-display);
  font-size: clamp(36px, 5.4vw, 88px);
  line-height: 1.02;
  color: var(--ink-900);
  letter-spacing: -0.03em;
  font-weight: 500;
  max-width: 18ch;
  margin: 0 0 var(--s-5);
}
.hero2__title em {
  color: var(--green-400);
  font-style: italic;
}
.hero2__sub {
  font-size: var(--t-lead);
  color: var(--ink-500);
  max-width: 52ch;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--e-out), transform .8s var(--e-out);
}
.hero2__sub.is-in { opacity: 1; transform: none; }
.hero2__chapters {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-family: var(--f-display);
}
.chap {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(6, 18, 42, .55);
  backdrop-filter: blur(8px);
  transition: background .3s, border-color .3s, transform .3s;
  opacity: .45;
}
.chap span { font-family: var(--f-body); font-size: 11px; color: var(--ink-500); letter-spacing: 0.2em; }
.chap em { font-style: normal; font-size: 14px; color: var(--ink-900); font-weight: 500; letter-spacing: -0.01em; }
.chap.is-active {
  opacity: 1;
  background: rgba(110, 190, 69, .18);
  border-color: rgba(110, 190, 69, .5);
  transform: translateX(-6px);
}
.chap.is-active span { color: var(--green-400); }

/* progress bar for hero 2 (barra horizontal em baixo) */
.progress2 {
  position: absolute;
  bottom: var(--s-4);
  left: var(--gutter);
  right: 260px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink-500);
}
.progress2__label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}
.progress2__bar {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
}
.progress2__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-500), var(--green-400));
  width: 0%;
  box-shadow: 0 0 10px rgba(110, 190, 69, .4);
  transition: width .05s linear;
}
.progress2__value {
  font-family: var(--f-display);
  color: var(--ink-900);
  font-size: 18px;
  font-weight: 500;
  min-width: 46px;
  text-align: right;
}
.progress2__value em { font-style: normal; font-size: 11px; color: var(--ink-500); margin-left: 2px; }

/* ===========================================================
   SEAM — transição GSAP entre hero 1 e hero 2
   =========================================================== */
.seam {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  visibility: hidden;
}
.seam.is-active { visibility: visible; }
.seam__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52%;
  background: linear-gradient(180deg, #0A1B3D, #06122A);
  transform: translateX(-100%);
  will-change: transform;
}
.seam__panel--l { left: 0; }
.seam__panel--r { right: 0; transform: translateX(100%); }
.seam__flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(110, 190, 69, .35), transparent 60%);
  opacity: 0;
  mix-blend-mode: screen;
}

/* ===========================================================
   naocodei nº 04 — Texto que se preenche
   Base layer em cinza fosco; layer de cima com estilos reais
   (branco, strike, em verde) revelado por clip-path da esquerda p/ direita.
   =========================================================== */
.fill-text {
  position: relative;
  display: inline-block;
}
.fill-text__base {
  color: rgba(255, 255, 255, .14);
}
.fill-text__base em,
.fill-text__base .strike {
  color: rgba(255, 255, 255, .14);
  text-decoration-color: rgba(255,255,255,.14);
  font-style: italic;
}
.fill-text__over {
  position: absolute;
  inset: 0;
  color: var(--ink-900);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .06s linear;
  pointer-events: none;
}
.fill-text__over em { color: var(--green-400); font-style: italic; }
.fill-text__over .strike {
  color: var(--ink-500);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--green-500);
}

/* ===========================================================
   naocodei nº 16 — Revelar palavra por palavra
   =========================================================== */
.word-piece {
  display: inline-block;
  opacity: 0;
  transform: translateY(30%) scale(.94);
  filter: blur(6px);
  transition: opacity .55s var(--e-out), transform .55s var(--e-out), filter .55s var(--e-out);
  will-change: opacity, transform, filter;
}
.word-piece.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ===========================================================
   naocodei nº 32 — Texto de partículas (canvas layer)
   =========================================================== */
.particle-text {
  position: relative;
  display: inline-block;
  color: transparent;
}
.particle-text canvas {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cta__heading em {
  color: var(--green-400);
  font-style: italic;
}

/* ===========================================================
   Ajustes responsivos para novas seções
   =========================================================== */
@media (max-width: 960px) {
  .panels {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 130px;
    height: auto;
  }
  .panels:has(.panel.is-open) { grid-auto-rows: auto; }
  .panel { min-height: 130px; }
  .panel.is-open { min-height: 260px; }
  .panel__label {
    transform: none;
    bottom: var(--s-3);
    left: var(--s-3);
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .hero2__chapters {
    display: none;
  }
  .progress2 { right: var(--gutter); }
}
@media (max-width: 720px) {
  .hero2 { height: 500vh; }
  .hero2__title { font-size: clamp(32px, 8vw, 48px); }
}

/* ===========================================================
   POR QUE ESCOLHER (substituiu o Método)
   =========================================================== */
.why {
  padding: var(--s-10) 0;
  background: var(--navy-900);
}
.why__stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: var(--s-3);
  color: var(--green-400);
  font-size: 20px;
  letter-spacing: 4px;
}
.why__lead {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 30px);
  color: var(--ink-900);
  margin-top: 0;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.why__body p {
  color: var(--ink-500);
  font-size: var(--t-lead);
  margin-bottom: var(--s-4);
  line-height: 1.7;
}
.why__body p b { color: var(--ink-900); font-weight: 600; }
.why__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin: var(--s-6) 0;
}
.why-pillar {
  padding: var(--s-5);
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 20px;
  transition: transform .4s var(--e-out), border-color .4s var(--e-out);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-start;
}
.why-pillar:hover { transform: translateY(-4px); border-color: rgba(110,190,69,.3); }
.why-pillar__ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(110, 190, 69, .12);
  color: var(--green-400);
  margin-bottom: var(--s-2);
}
.why-pillar b {
  font-family: var(--f-display);
  font-size: var(--t-h4);
  color: var(--ink-900);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.why-pillar span {
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.55;
}
.why__cta {
  text-align: center;
  margin-top: var(--s-6);
}

/* ===========================================================
   CAROUSEL (antes/depois)
   =========================================================== */
.carousel {
  position: relative;
  padding: 0 var(--s-2);
}
.carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  border-radius: 24px;
  outline: none;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport:focus-visible { outline: 2px solid var(--green-400); outline-offset: 4px; }
.carousel__track {
  display: flex;
  gap: var(--s-4);
  padding: 0 4px;
}
.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,.06);
  position: relative;
  isolation: isolate;
}
.carousel__slide img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;      /* mostra a foto INTEIRA — não corta topo/base */
  object-position: center;
  background: #06122A;      /* letterbox no navy do site */
  display: block;
}
.carousel__slide figcaption {
  padding: var(--s-3) var(--s-4);
  font-size: 13px;
  color: var(--ink-500);
  background: var(--navy-800);
  border-top: 1px solid rgba(255,255,255,.05);
}
.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(6, 18, 42, .85);
  color: var(--ink-900);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  transition: background .25s, transform .2s, color .25s;
  z-index: 5;
  cursor: pointer;
}
.carousel__nav:hover {
  background: var(--green-500);
  color: var(--navy-950);
  transform: translateY(-50%) scale(1.05);
}
.carousel__nav--prev { left: -8px; }
.carousel__nav--next { right: -8px; }
.carousel__nav[disabled] { opacity: .35; cursor: not-allowed; }
.carousel__nav[disabled]:hover { background: rgba(6, 18, 42, .85); color: var(--ink-900); transform: translateY(-50%); }

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--s-4);
}
.carousel__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .25s, transform .25s, width .25s;
}
.carousel__dot.is-active {
  background: var(--green-400);
  width: 26px;
  border-radius: 4px;
}

@media (max-width: 720px) {
  .carousel__nav { display: none; }
  .carousel { padding: 0; }
  .carousel__slide figcaption { font-size: 12px; }
}

/* ===========================================================
   PAGE-SHELL (para Serviços, Sobre, Contato)
   =========================================================== */
.page {
  padding-top: 100px; /* leave room for fixed nav */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-hero {
  padding: var(--s-8) 0 var(--s-6);
  background: linear-gradient(180deg, var(--navy-950), var(--navy-900));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 380px at 20% 20%, rgba(110, 190, 69, .09), transparent 70%),
    radial-gradient(700px 300px at 80% 80%, rgba(58, 143, 217, .12), transparent 70%);
  pointer-events: none;
}
.page-hero .wrap { position: relative; }
.page-hero h1 {
  font-family: var(--f-display);
  font-size: clamp(40px, 6vw, 76px);
  color: var(--ink-900);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  max-width: 20ch;
  margin: var(--s-3) auto 0;
}
.page-hero h1 em { color: var(--green-400); font-style: italic; }
.page-hero p {
  color: var(--ink-500);
  font-size: var(--t-lead);
  max-width: 56ch;
  margin: var(--s-4) auto 0;
}
.page-hero .btn { margin-top: var(--s-6); }
.page-body { flex: 1; }

/* ===========================================================
   PÁGINA SERVIÇOS
   =========================================================== */
.svc-list {
  padding: var(--s-9) 0;
  background: var(--navy-900);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.svc-item {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.svc-item:nth-child(even) .svc-item__media { order: -1; }
.svc-item__media {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  aspect-ratio: 4 / 3;
}
.svc-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-item__body h2 {
  font-size: var(--t-h3);
  margin-bottom: var(--s-3);
}
.svc-item__body h2 em { color: var(--green-400); font-style: italic; }
.svc-item__body .eyebrow { margin-bottom: var(--s-3); }
.svc-item__body p {
  color: var(--ink-500);
  font-size: var(--t-lead);
  line-height: 1.6;
}
.svc-flow {
  padding: var(--s-9) 0;
  background: var(--navy-950);
}
.svc-flow__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.svc-flow__step {
  padding: var(--s-5);
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
}
.svc-flow__step .num {
  font-family: var(--f-display);
  color: var(--green-400);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-3);
}
.svc-flow__step h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.svc-flow__step p { color: var(--ink-500); font-size: 14px; line-height: 1.6; }

/* ===========================================================
   PÁGINA SOBRE
   =========================================================== */
.about {
  padding: var(--s-9) 0;
  background: var(--cristal-100);
  color: var(--navy-900);
}
.about .wrap { max-width: 780px; }
.about .eyebrow { color: var(--blue-500); }
.about h2 {
  color: var(--navy-950);
  font-size: var(--t-h2);
  margin-bottom: var(--s-4);
}
.about p {
  font-size: var(--t-lead);
  color: var(--navy-900);
  line-height: 1.7;
  margin-bottom: var(--s-4);
}
.about p b { color: var(--navy-950); font-weight: 600; }
.about-region {
  padding: var(--s-9) 0;
  background:
    radial-gradient(1000px 500px at 50% 50%, rgba(58, 143, 217, .12), transparent 70%),
    var(--navy-900);
  color: var(--ink-700);
}
.about-region .region-card {
  padding: var(--s-7);
  background: rgba(6, 18, 42, .55);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 24px;
  backdrop-filter: blur(6px);
  max-width: 780px;
  margin: 0 auto;
}
.about-region h3 {
  font-size: var(--t-h3);
  color: var(--ink-900);
  margin-bottom: var(--s-4);
}
.about-region p {
  color: var(--ink-700);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: var(--s-3);
}
.about-region p b { color: var(--ink-900); }
.about-region p .hi { color: var(--green-400); font-weight: 500; }

/* ===========================================================
   PÁGINA CONTATO — formulário
   =========================================================== */
.contact-hero {
  padding: var(--s-10) 0 var(--s-8);
  background:
    radial-gradient(800px 500px at 50% 30%, rgba(110, 190, 69, .15), transparent 70%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.contact-hero h1 {
  font-family: var(--f-display);
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.02;
  color: var(--ink-900);
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin: var(--s-3) auto 0;
  font-weight: 500;
}
.contact-hero h1 em {
  color: var(--green-400);
  font-style: italic;
}
.contact-hero p {
  color: var(--ink-500);
  font-size: var(--t-lead);
  max-width: 52ch;
  margin: var(--s-4) auto 0;
}
.contact-hero__ctas {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-6);
  flex-wrap: wrap;
}
.contact-form-section {
  padding: var(--s-9) 0;
  background: var(--cristal-100);
  color: var(--navy-900);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-8);
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
.contact-copy .eyebrow { color: var(--blue-500); }
.contact-copy h2 {
  font-family: var(--f-display);
  color: var(--navy-950);
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-4);
  font-weight: 500;
}
.contact-copy p { color: var(--navy-700); font-size: 15px; line-height: 1.7; }

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.form__field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-800);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.form__field label .req { color: #d64545; }
.form__field input,
.form__field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(10, 27, 61, .12);
  background: #fff;
  color: var(--navy-950);
  font: inherit;
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}
.form__field input:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px rgba(110, 190, 69, .18);
}
.form__field textarea {
  min-height: 130px;
  resize: vertical;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.form__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.form__note {
  font-size: 12px;
  color: var(--navy-700);
  opacity: .7;
  max-width: 34ch;
}
.contact-area {
  padding: var(--s-8) 0;
  background: var(--navy-900);
  text-align: center;
}
.contact-area .eyebrow { color: var(--blue-400); }
.contact-area h2 {
  font-size: var(--t-h2);
  color: var(--ink-900);
  margin-bottom: var(--s-6);
  max-width: 22ch;
  margin-inline: auto;
}
.contact-area h2 em { color: var(--green-400); font-style: italic; }
.contact-area__info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  max-width: 780px;
  margin: 0 auto;
}
.contact-area__card {
  padding: var(--s-5);
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
}
.contact-area__card b {
  display: block;
  font-family: var(--f-display);
  color: var(--green-400);
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.contact-area__card span {
  color: var(--ink-500);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .svc-item { grid-template-columns: 1fr; gap: var(--s-4); }
  .svc-item:nth-child(even) .svc-item__media { order: 0; }
  .svc-flow__grid { grid-template-columns: repeat(2, 1fr); }
  .why__pillars { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-area__info { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .form__row { grid-template-columns: 1fr; }
  .svc-flow__grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   MOBILE HERO (≤768px) — canvas com frames leves em "contain"
   Substitui os <video> por <canvas> desenhados por mobile-hero.js.
   Nada aqui afeta o desktop.
   =========================================================== */
/* Blocos exclusivos do mobile: por padrão escondidos (desktop não renderiza) */
.hero__stack-top, .hero__stack-bottom, .hero__grad { display: none; }

@media (max-width: 768px) {
  /* esconde os <video> — o canvas do mobile-hero.js aparece no lugar */
  .hero__video, .hero2__video { display: none !important; }

  /* remove overlays custosos / que atrapalham a legibilidade */
  .hero__grain, .hero__vignette, .hero2__vignette { display: none !important; }
  .hero__overlay, .hero__scroll, .meter { display: none !important; }
  .hero2__overlay { display: none !important; }

  /* tira o segundo botão de WhatsApp do topo — deixa só o flutuante */
  .nav__cta { display: none !important; }

  /* ===== HERO (Ato I) — STICKY dentro do próprio trilho ===== */
  .hero {
    height: 200vh;                   /* trilho: 100vh pin + 100vh exit natural */
    position: relative;
    background: #06122A;              /* navy-950 — mesmo tom da Manifesto */
    z-index: 1;                      /* fica ABAIXO das seções seguintes */
  }
  .hero__stage {
    position: sticky !important;     /* NÃO é mais fixed — sticky natural, exit natural */
    top: 0 !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    width: auto !important;
    height: 100vh !important;
    z-index: 1;                      /* baixo — não pode cobrir a próxima seção */
    padding: 0 !important;
    gap: 0 !important;
    display: block !important;
    background: #06122A;              /* opaco, mesmo tom que a Manifesto no topo */
    overflow: hidden;
  }
  /* Regras antigas do fixed removidas — o sticky nativo cuida da saída sozinho */

  /* Canvas cobre a tela inteira em modo COVER */
  .hero__canvas.mobile-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    background: #0A1B3D;
    margin: 0 !important;
    z-index: 1;
    display: block !important;
  }

  /* Gradientes p/ legibilidade — SÓ atrás dos textos, meio livre */
  .hero__grad {
    display: block;
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
    z-index: 2;
  }
  .hero__grad--top {
    top: 0;
    height: 22vh;                       /* cobre só a área da nav + folga */
    background: linear-gradient(to bottom,
      rgba(6, 18, 42, .55) 0%,          /* MAIS SUAVE — antes era .88 (parecia faixa dura) */
      rgba(6, 18, 42, .22) 50%,
      rgba(6, 18, 42, 0) 100%);
  }
  .hero__grad--bottom {
    bottom: 0;
    height: 44vh;
    background: linear-gradient(to top,
      rgba(6, 18, 42, .92) 0%,
      rgba(6, 18, 42, .55) 60%,
      rgba(6, 18, 42, 0) 100%);
  }

  /* Stack TOP absoluto — logo abaixo do cabeçalho */
  .hero__stack-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: calc(72px + 12px) var(--gutter) 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    order: 0;
    margin: 0;
    flex: none;
  }
  .hero__eyebrow-m {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(6, 18, 42, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-self: flex-start;
    max-width: 100%;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.35;
    white-space: normal;
  }
  .hero__eyebrow-m .dot {
    flex-shrink: 0;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green-400);
    box-shadow: 0 0 10px var(--green-400);
  }
  .hero__title-m {
    font-family: var(--f-display);
    color: #fff;
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 500;
    margin: 0;
    text-shadow: 0 2px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.35);
  }
  .hero__title-m em { color: var(--green-400); font-style: italic; font-weight: 500; }

  /* Stack BOTTOM absoluto */
  .hero__stack-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0 var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 24px);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0;
    order: 0;
    margin: 0;
    flex: none;
  }
  .hero__sub-m {
    font-size: 13.5px;
    line-height: 1.5;
    color: #E3ECF3;
    margin: 0 0 24px 0;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
  }
  .hero__ctas-m {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .hero__ctas-m .btn {
    justify-content: center;
    padding: 14px 20px;
    font-size: 14px;
  }

  /* Botão flutuante do WhatsApp — ESCONDIDO enquanto a hero está na tela */
  body.hero-in-view .wa-float { display: none !important; }

  /* ===== CABEÇALHO — transparente por PADRÃO no mobile ===== */
  /* Não depende de nenhuma classe do JS: já começa transparente com o degradê.
     Assim, cache velho ou observer atrasado NÃO fazem a faixa navy voltar. */
  .nav,
  .nav.is-scrolled {
    background: linear-gradient(to bottom, rgba(6,18,42,.65) 0%, rgba(6,18,42,0) 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 none !important;
    box-shadow: none !important;
  }
  /* SÓ quando a hero termina, JS adiciona .past-hero no <body> → navy sólido com blur */
  body.past-hero .nav,
  body.past-hero .nav.is-scrolled {
    background: rgba(6, 18, 42, .85) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    border-bottom: 0 none !important;
  }
  /* Transição de 0.3s herdada de .nav no base — cabeçalho anima suave entre estados */

  /* Garante que a HERO começa em top:0 (canvas passando por trás do cabeçalho) */
  .hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ===== CAMADAS: seções depois da hero ficam ACIMA dela (z-index maior)
     e com fundo sólido, para nunca passarem por baixo do vídeo ===== */
  .manifesto, .services, .ba, .voice, .stats, .kit,
  .area, .faq, .svc-flow, .cta, .foot {
    position: relative;
    z-index: 2;
  }
  /* Garante navy sólido no topo da primeira seção depois da hero (transição cor-perfeita) */
  .manifesto {
    background: #06122A !important;   /* solid navy-950, sem transparência */
    padding-top: calc(72px + 48px) !important; /* cabeçalho fixo (~72px) + 48px de folga */
  }
  /* Cabeçalho fixo e float acima de tudo — nada os cobre */
  .nav { z-index: 100; }
  .wa-float { z-index: 100; }

  /* ===== HERO 2 (Ato II) — REMOVIDO INTEIRO no mobile ===== */
  .hero2 { display: none !important; }

  /* ===== Safe area contra botão flutuante do WhatsApp (~82px canto direito) ===== */
  /* CTA final tem card centralizado — o WhatsApp float fica no canto, não sobrepõe conteúdo.
     Já a última seção antes do rodapé ganha uma folga extra. */
  .cta { padding-bottom: calc(var(--s-8) + 40px); }
  .foot__base { padding-bottom: calc(var(--s-4) + 32px); }

  /* Espaçamento consistente entre seções no mobile */
  .manifesto, .services, .ba, .why, .voice, .stats,
  .kit, .area, .faq, .svc-flow, .cta {
    padding-top: var(--s-7);
    padding-bottom: var(--s-7);
  }
}

/* ===========================================================
   REDUCED MOTION (never collapse hero!)
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__eyebrow, .hero__sub, .hero__ctas { opacity: 1; transform: none; }
  /* HERO height preserved — scroll binding still needs it */
}