/* ═══════════════════════════════════════════════════════
   Microset LP – Image-slice approach
   ═══════════════════════════════════════════════════════ */

@font-face {
  font-family: "Microset Display";
  src: url("../assets/fonts/microset-display-regular.woff") format("woff");
  font-style: normal;
  font-weight: 100 500;
  font-display: swap;
}

@font-face {
  font-family: "Microset Display";
  src: url("../assets/fonts/microset-display-bold.woff") format("woff");
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}

@font-face {
  font-family: "Microset Display";
  src: url("../assets/fonts/microset-display-italic.woff") format("woff");
  font-style: italic;
  font-weight: 100 500;
  font-display: swap;
}

@font-face {
  font-family: "Microset Text";
  src: url("../assets/fonts/microset-text-regular.woff") format("woff");
  font-style: normal;
  font-weight: 100 500;
  font-display: swap;
}

@font-face {
  font-family: "Microset Text";
  src: url("../assets/fonts/microset-text-bold.woff") format("woff");
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}

@font-face {
  font-family: "Microset Text";
  src: url("../assets/fonts/microset-text-italic.woff") format("woff");
  font-style: italic;
  font-weight: 100 500;
  font-display: swap;
}

@font-face {
  font-family: "Microset Text";
  src: url("../assets/fonts/microset-text-bold-italic.woff") format("woff");
  font-style: italic;
  font-weight: 600 900;
  font-display: swap;
}

*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  background: #0d0c1e;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── ANIMAÇÕES DE ENTRADA ───────────────────────────────── */
.motion-ready .motion-section {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
  transition:
    opacity 800ms cubic-bezier(.22, 1, .36, 1),
    transform 900ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.motion-ready .motion-section.motion-left {
  transform: translate3d(-48px, 0, 0);
}

.motion-ready .motion-section.motion-right {
  transform: translate3d(48px, 0, 0);
}

.motion-ready .motion-section.motion-scale {
  transform: scale(.965);
}

.motion-ready .motion-section.is-visible {
  opacity: 1;
  transform: none;
}

.motion-ready .motion-media {
  opacity: 0;
  transform: scale(.94);
  transition:
    opacity 750ms cubic-bezier(.22, 1, .36, 1),
    transform 950ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.motion-ready .motion-media.is-visible {
  opacity: 1;
  transform: none;
}

.motion-ready .motion-stagger {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 550ms cubic-bezier(.22, 1, .36, 1),
    transform 650ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--motion-delay, 0ms);
}

.motion-ready .is-visible .motion-stagger,
.motion-ready .motion-stagger.is-visible {
  opacity: 1;
  transform: none;
}

.overlay-link,
.btn-cta,
.btn-submit-blue,
.btn-submit,
.footer-wa {
  transition: transform 220ms ease, filter 220ms ease, background 220ms ease;
}

.overlay-link:hover,
.btn-cta:hover,
.btn-submit-blue:hover,
.btn-submit:hover,
.footer-wa:hover {
  transform: translateY(-2px) scale(1.015);
  filter: brightness(1.06);
}

/* ── HEADER ────────────────────────────────────────────── */
.header {
  position: relative;
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  z-index: 1000;
  background: #35344f;
  height: 130px;
}

.header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc((100vw - 100%) / -2);
  background: #35344f;
  pointer-events: none;
}

.header-inner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-logo { height: 54px; display: block; }

.header-nav {
  display: flex;
  gap: 32px;
  margin: 0 auto;
}

.header-nav a {
  color: #c8c5e2;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}

.header-nav a:hover { color: #fff; }

.btn-cta {
  background: #5170ff;
  color: #fff;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
}

.btn-cta:hover { background: #3124d5; }

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}

.mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  border-radius: 2px;
}

.mobile-menu {
  display: none;
  background: #35344f;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.mobile-menu.open {
  display: flex;
  flex-direction: column;
  padding: 16px 24px 20px;
  gap: 16px;
}

.mobile-menu a {
  color: #c8c5e2;
  text-decoration: none;
  font-size: 15px;
}

/* ── PAGE WRAPPER ───────────────────────────────────────── */
.page-wrapper {
  position: relative;
  max-width: 1366px;
  margin: 0 auto;
  padding-top: 0;
}

.anchor-target {
  position: absolute;
  top: 0;
  left: 0;
}

/* ── SECTION BASE (image-slice) ─────────────────────────── */
.sec {
  position: relative;
  width: 100%;
  line-height: 0;
  font-size: 0;
  container-type: inline-size;
  --bleed-left: transparent;
  --bleed-right: transparent;
  z-index: 0;
}

.sec::before,
.sec::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: max(0px, calc((100vw - 100%) / 2 + 1px));
  pointer-events: none;
}

.sec::before {
  right: calc(100% - 1px);
  background: var(--bleed-left);
}

.sec::after {
  left: calc(100% - 1px);
  background: var(--bleed-right);
}

.sec-img {
  display: block;
  width: 100%;
  height: auto;
}

#sec-hero {
  --bleed-left: #35344f;
  --bleed-right: #35344f;
}

#sec-numbers {
  --bleed-left: linear-gradient(to bottom, #35344f 0 10px, #c6d2f4 10px, #b6c7f8 100%);
  --bleed-right: linear-gradient(to bottom, #35344f 0 10px, #a5bcfc 10px, #93b0ff 100%);
}

#sec-gargalos,
#sec-solutions,
#sec-clientes {
  --bleed-left: #eaedee;
  --bleed-right: #eaedee;
}

#sec-historia {
  --bleed-left: #eaedee;
  --bleed-right: #eaedee;
  background: #eaedee;
}

/* Mantém a altura da seção, mas remove qualquer arte estática atrás do vídeo. */
#sec-historia > .sec-img {
  visibility: hidden;
}


#sec-gargalos {
  --bleed-left: linear-gradient(to bottom, #b5c6f7 0 6px, #eaedee 6px);
  --bleed-right: linear-gradient(to bottom, #93b0ff 0 6px, #eaedee 6px);
}

#sec-form {
  --bleed-left: linear-gradient(to bottom, #eaedee 0 6px, #485e9a 6px, #485e9a calc(100% - 5px), #eaedee calc(100% - 5px));
  --bleed-right: linear-gradient(to bottom, #eaedee 0 6px, #485e9a 6px, #485e9a calc(100% - 5px), #eaedee calc(100% - 5px));
}

#sec-closing {
  --bleed-left: linear-gradient(to bottom, #eaedee 0 76.6%, #35344f 76.6%);
  --bleed-right: linear-gradient(to bottom, #eaedee 0 76.6%, #000000 76.6%);
}

#footer {
  --bleed-left: #35344f;
  --bleed-right: #000;
}

/* ── TEXTOS REAIS SOBRE O LAYOUT ORIGINAL ───────────────── */
.copy-mask,
.live-copy,
.solutions-photo-clean {
  position: absolute;
}

.copy-mask { z-index: 6; }

.live-copy {
  z-index: 8;
  line-height: 1.25;
  font-size: 1cqw;
  color: #35344f;
  font-family: "Microset Text", Arial, sans-serif;
}

.live-copy h1,
.live-copy h2,
.live-copy h3,
.live-copy p {
  margin: 0;
}

.live-copy em { font-weight: 300; }

.canva-motion {
  display: block;
  transform-origin: center;
}

.motion-ready .canva-fade {
  opacity: 0;
}

.motion-ready .is-visible .canva-fade {
  animation: canva-fade 600ms ease both;
}

.motion-ready .canva-slide-right {
  opacity: 0;
  transform: translateX(-80px);
}

.motion-ready .is-visible .canva-slide-right {
  animation: canva-slide-right 600ms ease var(--canva-delay, 0ms) both;
}

.motion-ready .header .canva-slide-right {
  animation: canva-slide-right 500ms ease var(--canva-delay, 0ms) both;
}

.motion-ready .canva-pop {
  opacity: 0;
  transform: scale(.9);
}

.motion-ready .is-visible .canva-pop {
  animation:
    canva-pop-scale 4000ms linear 0ms both,
    canva-pop-opacity 500ms ease var(--canva-delay, 0ms) both;
}

@keyframes canva-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes canva-slide-right {
  from { opacity: 0; transform: translateX(-80px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes canva-pop-opacity {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes canva-pop-scale {
  0% { transform: scale(.9); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Hero */
.hero-copy-mask {
  top: 10%;
  left: 47%;
  width: 44%;
  height: 67%;
  background: #35344f;
}

.hero-copy {
  top: 15.3%;
  left: 48.9%;
  width: 42%;
  color: #fff;
}

.hero-copy h1 {
  font-size: 3.45cqw;
  line-height: 1.01;
  font-weight: 750;
  letter-spacing: -.04em;
}

.hero-copy p {
  margin-top: 2.15cqw;
  color: #f3f3fa;
  font-size: 1.43cqw;
  line-height: 1.62;
}

/* Números */
.numbers-title-mask {
  top: 34%;
  left: 4.5%;
  width: 30%;
  height: 34%;
  background: linear-gradient(100deg, #c3cff4, #b9c9f6);
}

.numbers-title {
  top: 38%;
  left: 5.7%;
  width: 29%;
  color: #35344f;
}

.numbers-title h2 {
  font-size: 4.2cqw;
  line-height: .95;
  font-weight: 750;
}

.numbers-title p {
  margin-left: 1.8cqw;
  font-size: 3.75cqw;
  line-height: .96;
  font-weight: 300;
  letter-spacing: -.06em;
}

.numbers-title p span,
.numbers-title p em {
  display: inline-block;
}

.numbers-title p em { font-size: 1.35em; }

.number-mask {
  background: #a9befa;
  z-index: 7;
}

.number-mask-a { top: 14%; left: 74.6%; width: 16.4%; height: 25%; }
.number-mask-b { top: 57%; left: 38.6%; width: 20.8%; height: 18%; }
.number-mask-c { top: 70%; left: 71.5%; width: 14.7%; height: 16%; }

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #35344f;
  text-align: center;
}

.metric strong {
  font-size: 4.8cqw;
  line-height: 1;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.08em;
}

.metric span {
  margin-top: .5cqw;
  font-size: 1.1cqw;
  line-height: 1.25;
}

.metric-a { top: 16%; left: 75.1%; width: 15.5%; }
.metric-b { top: 59%; left: 39%; width: 20%; }
.metric-c { top: 72%; left: 72%; width: 14%; }

/* Gargalos */
.gargalos-title-mask {
  top: 29%;
  left: 4.5%;
  width: 30%;
  height: 42%;
  background: #eaedee;
}

.gargalos-title {
  top: 32.5%;
  left: 5.7%;
  width: 29%;
  color: #57427c;
  font-family: "Microset Display", Arial, sans-serif;
}

.gargalos-title small {
  display: block;
  margin-bottom: 1.1cqw;
  font-size: 1cqw;
}

.gargalos-title h2 {
  font-size: 2.95cqw;
  line-height: 1.08;
  font-weight: 750;
}

.gargalos-title h2 em { font-weight: 300; }

.card-copy-mask {
  top: 31%;
  height: 37%;
  width: 14.2%;
  background: #eaedee;
}

.card-copy-mask-1 { left: 43.4%; }
.card-copy-mask-2 { left: 61.1%; }
.card-copy-mask-3 { left: 78.8%; }

.issue-copy {
  top: 31.7%;
  width: 14%;
  color: #35344f;
  text-align: center;
}

.issue-copy-1 { left: 43.5%; }
.issue-copy-2 { left: 61.2%; }
.issue-copy-3 { left: 78.9%; }

.issue-copy h3 {
  font-size: 1.25cqw;
  line-height: 1.05;
  font-weight: 800;
}

.issue-copy p {
  margin-top: 2cqw;
  font-size: .87cqw;
  line-height: 1.35;
}

/* Soluções */
.solutions-photo-clean {
  z-index: 7;
  top: 0;
  left: 11.25%;
  width: 75.84%;
  height: 38.7%;
  border-radius: 0 0 2.5cqw 2.5cqw;
  background:
    linear-gradient(rgba(22, 38, 92, .28), rgba(22, 38, 92, .28)),
    url("../assets/extracted_24.jpeg") center 43% / cover no-repeat;
}

.solutions-heading {
  z-index: 8;
  top: 20.6%;
  left: 27%;
  width: 58%;
  color: #fff;
}

.solutions-heading small {
  display: block;
  margin-left: 17%;
  margin-bottom: 1.1cqw;
  font-size: 1cqw;
}

.solutions-heading h2 {
  font-size: 3.45cqw;
  line-height: 1.02;
  font-weight: 750;
  letter-spacing: -.035em;
}

.solutions-heading h2 em { font-weight: 300; }

.solution-copy-mask {
  z-index: 7;
  top: 40%;
  width: 23%;
  height: 34%;
  background: #2b4088;
}

.solution-copy-mask-1 { left: 12%; }
.solution-copy-mask-2 { left: 38%; }
.solution-copy-mask-3 { left: 64%; }

.solution-copy {
  z-index: 8;
  top: 41%;
  width: 23%;
  color: #fff;
  text-align: center;
}

.solution-copy-1 { left: 12%; }
.solution-copy-2 { left: 38%; }
.solution-copy-3 { left: 64%; }

.solution-copy h3 {
  font-size: 1.65cqw;
  font-weight: 750;
  line-height: 1.1;
}

.solution-copy p {
  margin-top: 5.3cqw;
  font-size: 1.55cqw;
  line-height: 1.48;
}

/* Clientes */
.clientes-copy-mask {
  top: 5%;
  left: 24%;
  width: 52%;
  height: 52%;
  background: #eaedee;
}

.clientes-copy {
  top: 13%;
  left: 24%;
  width: 52%;
  color: #5270ff;
  text-align: center;
}

.clientes-copy small {
  display: block;
  margin-bottom: 1.1cqw;
  font-size: 1cqw;
}

.clientes-copy h2 {
  font-size: 3.65cqw;
  line-height: 1;
  font-weight: 750;
}

.clientes-copy h2 em { font-weight: 300; }

/* Formulário */
.form-copy-mask {
  top: 18%;
  left: 4.5%;
  width: 29%;
  height: 59%;
  background: #485e9a;
}

.form-copy {
  top: 26.5%;
  left: 5.7%;
  width: 29%;
  color: #fff;
}

.form-copy small { font-size: 1cqw; }

.form-copy h2 {
  margin-top: 1.6cqw;
  font-size: 3.45cqw;
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: -.04em;
}

.form-copy h2 strong { font-weight: 750; }

.form-copy p {
  margin-top: 1.7cqw;
  font-size: 1.45cqw;
  line-height: 1.4;
}

.form-copy p em { font-weight: 750; }

/* Encerramento */
.closing-copy-mask {
  top: 10%;
  left: 4.5%;
  width: 30%;
  height: 58%;
  background: #eaedee;
}

.closing-copy {
  top: 11.8%;
  left: 5.65%;
  width: 29%;
  color: #57427c;
  font-family: "Microset Display", Arial, sans-serif;
}

.closing-copy small { font-size: 1cqw; }

.closing-copy h2 {
  margin-top: 1.2cqw;
  font-size: 2.9cqw;
  line-height: 1.08;
  font-weight: 750;
}

.closing-copy p {
  margin-top: 1.7cqw;
  color: #35344f;
  font-size: 1.42cqw;
  line-height: 1.38;
}

/* ── TRANSPARENT OVERLAY LINKS ──────────────────────────── */
.overlay-link {
  position: absolute;
  display: block;
  cursor: pointer;
  z-index: 10;
}

/* ── VÍDEO DO HERO ──────────────────────────────────────── */
.hero-video-backdrop {
  position: absolute;
  z-index: 4;
  top: 10.43%;
  left: 7.32%;
  width: 37.63%;
  height: 65%;
  border-radius: 34px;
  background: #35344f;
}

.hero-video {
  position: absolute;
  z-index: 5;
  top: 10.43%;
  left: 7.32%;
  width: 37.63%;
  height: 65%;
  display: block;
  object-fit: cover;
  border: 0;
  border-radius: 34px;
  background: #35344f;
}

.motion-ready .hero-video {
  opacity: 0;
  transform: translateX(-80px);
}

.motion-ready #sec-hero.is-visible .hero-video {
  animation: canva-hero-video 500ms ease 1400ms both;
}

@keyframes canva-hero-video {
  from { opacity: 0; transform: translateX(-80px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── VIDEO OVERLAY ──────────────────────────────────────── */
.overlay-video {
  position: absolute;
  z-index: 10;
  border-radius: 18px;
  overflow: hidden;
  background: #eaedee;
}

.overlay-video iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── VÍDEO "UMA HISTÓRIA" ──────────────────────────────── */
.historia-video {
  position: absolute;
  z-index: 20;
  top: -15.7895%; /* 90 px acima do recorte de 570 px */
  left: 6.368%;   /* x = 87 px em 1366 px */
  width: 87.189%; /* 1191 px em 1366 px */
  height: 100%;   /* 570 px: proporção exata do retângulo */
  overflow: hidden;
  border-radius: clamp(12px, 2.635vw, 36px);
  background: #eaedee; /* mesmo fundo da seção original enquanto o vídeo carrega */
  box-shadow: 0 0 0 2px #eaedee; /* elimina frestas de subpixel sobre a arte escura anterior */
}

/* Wrapper que recebe a animação de entrada (a moldura acima fica sempre sólida) */
.historia-video-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Vídeo em "cover": preenche toda a moldura larga sem faixas pretas nas laterais */
.historia-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 100%;
  border: 0;
  display: block;
}

.motion-ready .canva-case-media {
  opacity: 0;
  transform: scale(.75);
  transform-origin: center;
}

.motion-ready #sec-historia.is-visible .canva-case-media {
  animation: canva-case-video 550ms ease 350ms both;
}

@keyframes canva-case-video {
  from { opacity: 0; transform: scale(.75); }
  to { opacity: 1; transform: scale(1); }
}

/* ── FORM SECTION ───────────────────────────────────────── */
.sec-form {
  line-height: 0;
  font-size: 0;
}

/* Overlay do painel escuro sobre a imagem de fundo */
.form-panel {
  position: absolute;
  top: 0.76%;
  left: 39.24%;
  width: 54.03%;
  height: 88.23%;
  background: #35344f;
  border-radius: 36px;
  padding: 32px 52px 24px;
  display: flex;
  align-items: center;
  z-index: 10;
  box-sizing: border-box;
}

.lead-form { width: 100%; }

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 46px;
}

.fg { margin-bottom: 10px; }

.fl {
  display: block;
  color: #c5cae9;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 8px;
  line-height: normal;
}

.fl span { color: #00a5ff; }

.fi {
  width: 100%;
  height: 70px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(53, 52, 79, 0) 10%,
    #353651 24%,
    #383b5a 43%,
    #414562 68%,
    #4c4e68 86%,
    #52536b 100%
  );
  border: 0;
  border-radius: 0 999px 999px 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  color: #d7daf0;
  font-size: 14px;
  padding: 0 18px;
  outline: none;
  transition: filter 0.2s;
  font-family: inherit;
  line-height: normal;
}

.fi:focus { filter: brightness(1.08); }

.fi::placeholder { color: #c7cae5; opacity: 1; }

.fi-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238888b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 40px;
}

.fi-select option {
  background-color: #35344f;
  color: #d7daf0;
}

/* Blue submit button */
.btn-submit-blue {
  width: 100%;
  height: 61px;
  background: linear-gradient(90deg, #4c63a5 0%, #4f65a7 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  display: block;
  text-align: center;
  margin-top: 4px;
  font-family: inherit;
  transition: background 0.2s;
  line-height: normal;
}

.btn-submit-blue:hover { background: #3245b8; }
.btn-submit-blue:disabled { opacity: 0.6; cursor: not-allowed; }

/* Green WA submit button */
.btn-submit {
  width: 100%;
  height: 61px;
  background: linear-gradient(90deg, #31c34a 0%, #37bb4a 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.2s;
  line-height: normal;
  box-sizing: border-box;
}

.btn-submit:hover { background: #1fba58; }

.form-feedback {
  margin-top: 4px;
  font-size: 11px;
  text-align: center;
  line-height: 1.4;
  min-height: 16px;
  color: #25d366;
}

.form-feedback.error { color: #ff6b6b; }

/* ── FOOTER SECTION ─────────────────────────────────────── */
.sec-footer { line-height: 0; }

/* ── WHATSAPP DO RODAPÉ ─────────────────────────────────── */
.footer-wa {
  position: absolute;
  top: -7.143%;
  left: 90.117%;
  z-index: 20;
  width: 4.539%;
  aspect-ratio: 1;
  display: block;
  transition: transform 0.2s;
}

.footer-wa:hover { transform: scale(1.08); }

.footer-wa img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── POPUP ──────────────────────────────────────────────── */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.popup-overlay.active { display: flex; }

.popup {
  width: min(918px, calc(100vw - 32px), calc((100vh - 32px) * 0.8));
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
}

.popup-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popup-hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.popup-close { top: 5.1%; left: 78.2%; width: 13.2%; height: 10.6%; }
.popup-whatsapp { top: 50.8%; left: 18.7%; width: 60.6%; height: 7%; }
.popup-facebook { top: 75.1%; left: 19.9%; width: 10%; height: 8.6%; }
.popup-instagram { top: 75.1%; left: 32.5%; width: 10%; height: 8.6%; }
.popup-linkedin { top: 75.1%; left: 44.1%; width: 10.7%; height: 8.6%; }
.popup-youtube { top: 75.1%; left: 55.6%; width: 10.7%; height: 8.6%; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .header-nav { display: none; }
  .btn-cta { display: none; }
  .mobile-toggle { display: block; }
}

@media (max-width: 768px) {
  .overlay-link { display: none; }
  .overlay-video { display: none; }

  .form-layout { flex-direction: column; }
  .form-left-col { display: none; }
  .form-right-col { padding: 24px 16px 32px; min-height: auto; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .motion-ready .motion-section,
  .motion-ready .motion-media,
  .motion-ready .motion-stagger,
  .motion-ready .canva-motion,
  .motion-ready .hero-video,
  .motion-ready .canva-case-media {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}

/* Accessibility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}