:root {
  --navy: #0d1540;
  --navy2: #1a2560;
  --navy3: #050b1e;
  --pink: #ff3c9a;
  --blue: #4d9fff;
  --white: #ffffff;
  --gray: #a0aec0;
}

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

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--navy3);
  color: var(--white);
  font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
}

/* ── PROGRESS BAR ── */
#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pink), var(--blue));
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
}

/* ── TRANSITION OVERLAY ── */
#transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
  clip-path: circle(0% at 50% 50%);
  background: radial-gradient(circle at 50% 50%,
    #1a2560 0%,
    #0d1540 40%,
    #050b1e 100%);
  will-change: clip-path;
}

/* ── NAV DOTS ── */
#nav-dots {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid rgba(255,255,255,0.3);
}
.nav-dot.active {
  background: var(--pink);
  transform: scale(1.5);
  border-color: var(--pink);
}
.nav-dot:hover { background: rgba(255,255,255,0.6); }

/* ── SCENE BASE ── */
.scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 60px 40px;
}
.scene.is-active {
  display: flex;
}

/* ── SHADER CANVAS ── */
.hero-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* ── HERO ── */
.scene-hero {
  /* background removido: o shader canvas cobre 100% da cena.
     O body (--navy3) serve de fallback se WebGL não estiver disponível. */
  z-index: 1;
}
.stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: twinkle var(--dur, 3s) ease-in-out infinite;
  opacity: var(--op, 0.5);
}
@keyframes twinkle {
  0%, 100% { opacity: var(--op, 0.5); }
  50% { opacity: 0.05; }
}
.hero-frame {
  position: absolute;
  inset: 14px;
  border: 2px solid rgba(30, 80, 160, 0.6);
  border-radius: 18px;
  pointer-events: none;
  opacity: 0.8;
  box-shadow: 0 0 18px rgba(30, 80, 180, 0.25), inset 0 0 18px rgba(20, 60, 140, 0.1);
}
.hero-side-text {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-size: 9px;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  font-family: Arial, sans-serif;
  font-weight: 400;
}
.hero-content {
  text-align: center;
  position: relative;
  z-index: 2;
  user-select: none;
}
.hero-rocket {
  display: block;
  margin-bottom: 6px;
}
.hero-rocket-svg {
  display: block;
  margin: 0 auto;
  width: 230px;
  height: auto;
  filter:
    drop-shadow(0 0 28px rgba(255, 130, 0, 0.5))
    drop-shadow(0 0 60px rgba(255, 80, 0, 0.2));
  pointer-events: none;
}

/* ── Chama: oscila no eixo Y como fogo real ── */
.r-flames {
  transform-origin: 140px 405px;
  animation: rFlameWave 0.22s ease-in-out infinite alternate;
}
@keyframes rFlameWave {
  from { transform: scaleY(1)    scaleX(1);    }
  to   { transform: scaleY(1.16) scaleX(0.88); }
}

/* ── Fumaça: pulsa e deriva levemente ── */
.r-smoke ellipse {
  animation: rSmokePulse 3.8s ease-in-out infinite;
}
.r-smoke ellipse:nth-child(2) { animation-delay: -1.2s; }
.r-smoke ellipse:nth-child(3) { animation-delay: -2.5s; }
.r-smoke ellipse:nth-child(4) { animation-delay: -0.6s; }
.r-smoke ellipse:nth-child(5) { animation-delay: -3.2s; }
.r-smoke ellipse:nth-child(6) { animation-delay: -1.8s; }
@keyframes rSmokePulse {
  0%, 100% { transform: translateY(0)   scale(1);    opacity: 1;    }
  50%      { transform: translateY(-7px) scale(1.07); opacity: 0.75; }
}
.hero-logo-text {
  font-size: clamp(120px, 22vw, 300px);
  font-weight: 900;
  letter-spacing: -16px;
  line-height: 0.85;
  text-align: center;
  user-select: none;
  pointer-events: none;
}
/* Wrapper: SEM overflow hidden — apenas movemos este elemento com GSAP.
   Assim o background-clip: text do .hub-letter nunca cria layer GPU opaco. */
.hub-letter-wrap {
  display: inline-block;
  line-height: 1;
  vertical-align: top;
}
/* Letra: branco sólido — sem background-clip, sem filter, sem GPU layer */
.hub-letter {
  display: block;
  color: #ffffff;
  line-height: 0.9;
  padding-bottom: 0.08em;
  text-shadow:
    0 0 40px rgba(255,255,255,0.25),
    0 2px 8px rgba(0,0,0,0.35);
}
/* Glow pulsante via text-shadow — não promove GPU layer */
@keyframes hubLetterGlow {
  0%, 100% {
    text-shadow: 0 0 40px rgba(255,255,255,0.25), 0 2px 8px rgba(0,0,0,0.35);
  }
  50% {
    text-shadow:
      0 0 30px rgba(255,255,255,0.6),
      0 0 60px rgba(255,60,154,0.45),
      0 0 100px rgba(77,159,255,0.25),
      0 2px 8px rgba(0,0,0,0.2);
  }
}
.hub-letter.glow-active {
  animation: hubLetterGlow 3s ease-in-out infinite;
}

/* ── COMETS ── */
.comet {
  position: absolute;
  height: 2px;
  border-radius: 100px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(100, 200, 255, 0.10) 25%,
    rgba(140, 220, 255, 0.55) 70%,
    rgba(190, 235, 255, 0.90) 100%);
  pointer-events: none;
  left: -220px;
  animation: cometFly linear infinite;
}
/* Cabeça brilhante: azul claro */
.comet::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c8ecff;
  box-shadow: 0 0 5px 2px rgba(100, 200, 255, 0.85);
}
@keyframes cometFly {
  0%   { transform: translateX(0)      rotate(-18deg); opacity: 0;   }
  6%   { opacity: 1; }
  88%  { opacity: 0.75; }
  100% { transform: translateX(130vw)  rotate(-18deg); opacity: 0;   }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .comet              { animation: none; display: none; }
  .star               { animation: none; opacity: 0.4; }
  .r-flames           { animation: none; }
  .r-smoke ellipse    { animation: none; }
}
.hero-tagline {
  margin-top: 24px;
  font-size: clamp(20px, 2.8vw, 34px);
  letter-spacing: 9px;
  color: #5ecfff;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(60, 180, 255, 0.7), 0 0 40px rgba(40, 140, 255, 0.35);
}
.hero-sub {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 3px;
  color: rgba(235, 245, 255, 0.82);
  font-family: Arial, sans-serif;
  font-weight: 400;
}
.scroll-hint {
  display: none;
}

/* ── QUEM SOMOS ── */
.scene-about {
  background: linear-gradient(135deg, #0f1b4e 0%, #1a2560 100%);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 80px;
  align-items: center;
}
.about-logo-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hub-wordmark {
  font-size: clamp(36px, 5vw, 70px);
  font-weight: 900;
  letter-spacing: -3px;
  border: 2px solid white;
  border-radius: 100px;
  padding: 10px 28px;
  display: inline-block;
}
.wearewedo {
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.5);
  font-family: Arial, sans-serif;
}
.about-since {
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.25);
  font-family: Arial, sans-serif;
}
.about-divider {
  width: 1px;
  height: 240px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.25), transparent);
  flex-shrink: 0;
}
.about-text-col { max-width: 520px; }
/* Estado inicial — GSAP anima tudo ao entrar; nada deve piscar */
.scene-about .about-logo-col,
.scene-about .about-divider,
.scene-about .about-label,
.scene-about .about-heading,
.scene-about .about-item { opacity: 0; }
.about-label {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--pink);
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
  font-weight: 700;
}
.about-heading {
  font-size: clamp(15px, 2.2vw, 22px);
  font-weight: 900;
  margin-bottom: 28px;
  line-height: 1.3;
}
.about-items { display: flex; flex-direction: column; gap: 16px; }
.about-item {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.8);
  font-family: Arial, sans-serif;
  font-weight: 400;
  padding-left: 18px;
  border-left: 2px solid var(--pink);
}
.about-item b { color: white; }

/* ── MANIFESTO ── */
.scene-manifesto {
  background: #050b1e;
  min-height: 100vh;
  align-items: center;
  justify-content: flex-start;
  padding: 80px;
}
.manifesto-bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(8, 1fr);
  overflow: hidden;
}
.manifesto-tile {
  background-image: url('../img/slide03.png');
  background-size: 1400% 800%; /* 14 cols × 100%, 8 rows × 100% */
  opacity: 0;
  will-change: transform, opacity;
}
/* Gradiente animado em cima da foto — efeito luz de palco */
.manifesto-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    rgba(5,11,30,0.92)   0%,
    rgba(30,0,80,0.65)   35%,
    rgba(0,60,160,0.50)  60%,
    rgba(5,11,30,0.85)  100%
  );
  background-size: 300% 300%;
  animation: manifestoGradient 9s ease-in-out infinite;
}
@keyframes manifestoGradient {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
/* Raios de luz estilo palco — pseudoelemento */
.manifesto-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 60% at 70% 80%, rgba(0,180,255,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 30% 50% at 85% 90%, rgba(255,60,154,0.12) 0%, transparent 70%);
  animation: lightBeams 6s ease-in-out infinite alternate;
}
@keyframes lightBeams {
  from { opacity: 0.6; transform: scaleX(1);    }
  to   { opacity: 1.0; transform: scaleX(1.12); }
}

/* Estado inicial — GSAP anima ao entrar */
.scene-manifesto .manifesto-hub-icon,
.scene-manifesto .manifesto-title,
.scene-manifesto .manifesto-desc { opacity: 0; }
.manifesto-content { position: relative; z-index: 2; max-width: 860px; }
.manifesto-hub-icon {
  width: 52px; height: 52px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 32px;
}
.manifesto-title {
  font-size: clamp(34px, 6.5vw, 84px);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.manifesto-title .pink { color: var(--pink); }
.manifesto-desc {
  font-size: clamp(12px, 1.3vw, 16px);
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  font-family: Arial, sans-serif;
  font-weight: 400;
  max-width: 560px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── ECOSSISTEMA ── */
.scene-eco {
  background: radial-gradient(ellipse 80% 70% at 50% 50%, #0f1d50 0%, #070e2a 60%, #030818 100%);
  flex-direction: column;
  gap: 14px;
  padding: 36px 48px 28px;
  overflow: hidden;
}

/* Raios de spotlight saindo do centro */
.eco-bg-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    conic-gradient(from 180deg at 50% 52%,
      transparent 0deg,
      rgba(255,60,154,0.04) 12deg,
      transparent 24deg,
      transparent 60deg,
      rgba(77,159,255,0.05) 72deg,
      transparent 84deg,
      transparent 120deg,
      rgba(255,60,154,0.03) 132deg,
      transparent 144deg,
      transparent 180deg,
      rgba(77,159,255,0.05) 192deg,
      transparent 204deg,
      transparent 240deg,
      rgba(255,60,154,0.04) 252deg,
      transparent 264deg,
      transparent 300deg,
      rgba(77,159,255,0.04) 312deg,
      transparent 324deg,
      transparent 360deg);
  animation: raysSpin 40s linear infinite;
}
@keyframes raysSpin { to { transform: rotate(360deg); } }

/* Header */
.eco-header { text-align: center; position: relative; z-index: 2; }
.eco-eyebrow {
  font-size: 10px;
  letter-spacing: 5px;
  color: var(--pink);
  font-family: Arial, sans-serif;
  font-weight: 700;
  margin-bottom: 6px;
  opacity: 0;
}
.eco-title {
  font-size: clamp(26px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: 8px;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
}

/* Grid */
.eco-grid {
  display: grid;
  grid-template-columns: 1fr 220px 1fr;
  gap: 16px;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  position: relative;
  z-index: 2;
}
.eco-col { display: flex; flex-direction: column; gap: 7px; }
.eco-col-right { text-align: right; align-items: flex-end; }

.eco-group-label {
  font-size: 9px;
  letter-spacing: 3px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0.7;
}
.eco-label-pink { color: var(--pink); }
.eco-label-blue { color: var(--blue); }

.eco-item {
  font-size: 13.5px;
  color: rgba(255,255,255,0.75);
  font-family: Arial, sans-serif;
  padding: 9px 14px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  transition: background 0.25s, color 0.25s, transform 0.25s;
  cursor: default;
  opacity: 0;
}
.eco-item-pink {
  border-left-color: rgba(255,60,154,0.4);
}
.eco-item-blue {
  border-right-color: rgba(77,159,255,0.4);
}
.eco-item-pink:hover {
  background: rgba(255,60,154,0.12);
  border-left-color: var(--pink);
  color: #fff;
  transform: translateX(4px);
}
.eco-item-blue:hover {
  background: rgba(77,159,255,0.12);
  border-right-color: var(--blue);
  color: #fff;
  transform: translateX(-4px);
}

/* Centro orbital */
.eco-center {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Linha horizontal que conecta as colunas */
.eco-beam-h {
  position: absolute;
  left: -60px; right: -60px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,60,154,0.5) 30%,
    rgba(255,255,255,0.6) 50%,
    rgba(77,159,255,0.5) 70%,
    transparent 100%);
  transform: scaleX(0);
  opacity: 0;
}
.eco-hub-circle {
  width: 180px; height: 180px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0;
}
/* Anel principal com glow */
.eco-hub-circle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,60,154,0.8);
  box-shadow:
    0 0 18px rgba(255,60,154,0.5),
    0 0 40px rgba(255,60,154,0.2),
    inset 0 0 18px rgba(255,60,154,0.08);
  animation: hubPulse 3s ease-in-out infinite;
}
@keyframes hubPulse {
  0%,100% { box-shadow: 0 0 18px rgba(255,60,154,0.5), 0 0 40px rgba(255,60,154,0.2), inset 0 0 18px rgba(255,60,154,0.08); }
  50%      { box-shadow: 0 0 28px rgba(255,60,154,0.8), 0 0 70px rgba(255,60,154,0.35), inset 0 0 28px rgba(255,60,154,0.15); }
}
/* Órbitas rotativas */
.eco-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.15);
  pointer-events: none;
}
.eco-orbit-1 {
  width: 216px; height: 216px;
  animation: spinSlow 18s linear infinite;
}
.eco-orbit-2 {
  width: 252px; height: 252px;
  border-color: rgba(77,159,255,0.12);
  animation: spinSlow 30s linear infinite reverse;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Ponto de interseção nas órbitas */
.eco-orbit-1::after {
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 8px var(--pink);
}
.eco-orbit-2::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
}

.eco-hub-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  z-index: 1;
  background: radial-gradient(circle, rgba(255,60,154,0.12) 0%, transparent 70%);
  width: 100%; height: 100%;
  border-radius: 50%;
  justify-content: center;
}
.eco-hub-label {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -2px;
  text-shadow: 0 0 20px rgba(255,60,154,0.6);
}
.eco-hub-sub {
  font-size: 7px;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,0.5);
  font-family: Arial, sans-serif;
  text-transform: uppercase;
}

/* Categorias */
.eco-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1280px;
  width: 100%;
  position: relative;
  z-index: 2;
}
.eco-cat {
  border-radius: 8px;
  padding: 16px 10px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.9);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  opacity: 0;
  transition: transform 0.25s, box-shadow 0.25s;
}
.eco-cat:hover { transform: translateY(-2px); }
.eco-cat-icon { font-size: 13px; }
.eco-cat-1 {
  background: linear-gradient(135deg, rgba(255,60,154,0.2), rgba(255,60,154,0.06));
  border: 1px solid rgba(255,60,154,0.4);
}
.eco-cat-1:hover { box-shadow: 0 4px 20px rgba(255,60,154,0.25); }
.eco-cat-2 {
  background: linear-gradient(135deg, rgba(77,159,255,0.2), rgba(77,159,255,0.06));
  border: 1px solid rgba(77,159,255,0.4);
}
.eco-cat-2:hover { box-shadow: 0 4px 20px rgba(77,159,255,0.25); }
.eco-cat-3 {
  background: linear-gradient(135deg, rgba(130,80,255,0.2), rgba(130,80,255,0.06));
  border: 1px solid rgba(130,80,255,0.4);
}
.eco-cat-3:hover { box-shadow: 0 4px 20px rgba(130,80,255,0.25); }
.eco-cat-4 {
  background: linear-gradient(135deg, rgba(0,200,180,0.2), rgba(0,200,180,0.06));
  border: 1px solid rgba(0,200,180,0.4);
}
.eco-cat-4:hover { box-shadow: 0 4px 20px rgba(0,200,180,0.2);
}

/* ── PROPOSTA ── */
.scene-proposta {
  background: #050b1e;
  height: 100vh;
  min-height: 100vh;
  align-items: stretch;
  justify-content: center;
  padding: 0 80px;
  overflow: hidden;
}
.proposta-layout {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  gap: 0;
}
/* Fundo: mesma imagem do slide 3 */
.proposta-bg {
  position: absolute;
  inset: 0;
  background: url('../img/slide03.png') center/cover no-repeat;
  opacity: 0.45;
  transform: scale(1.04);
  animation: manifestoBgPulse 12s ease-in-out infinite alternate;
}
/* Gradiente animado idêntico ao manifesto */
.proposta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    rgba(5,11,30,0.92)   0%,
    rgba(30,0,80,0.65)   35%,
    rgba(0,60,160,0.50)  60%,
    rgba(5,11,30,0.85)  100%
  );
  background-size: 300% 300%;
  animation: manifestoGradient 9s ease-in-out infinite;
}
.proposta-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 60% at 70% 80%, rgba(0,180,255,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 30% 50% at 85% 90%, rgba(255,60,154,0.12) 0%, transparent 70%);
  animation: lightBeams 6s ease-in-out infinite alternate;
}
.proposta-content {
  position: relative;
  z-index: 2;
  flex: 0 0 52%;
}
.proposta-video-wrap {
  flex: 0 0 48%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}
.proposta-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.proposta-tag {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--pink);
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  opacity: 0;
}
.proposta-title {
  font-size: clamp(30px, 5.5vw, 70px);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  opacity: 0;
}
.proposta-title .pink { color: var(--pink); }

/* ── CLIENTES ── */
.scene-clients {
  background: linear-gradient(135deg, #1a2560, #0d1540);
  flex-direction: column;
  gap: 44px;
  padding: 80px 60px;
}
.clients-title {
  font-size: clamp(15px, 2.2vw, 26px);
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
}
.clients-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  max-width: 960px;
  width: 100%;
}
.client-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 18px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.75);
  transition: all 0.35s;
  min-height: 66px;
  text-align: center;
  cursor: default;
}
.client-card:hover {
  background: rgba(255,60,154,0.14);
  border-color: var(--pink);
  color: white;
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 10px 28px rgba(255,60,154,0.18);
}

/* ── SECTION DIVIDER ── */
.scene-section-title {
  min-height: 100vh;
  align-items: center;
  justify-content: flex-start;
  padding: 80px;
}
.section-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.35) saturate(1.3);
}
.section-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10,15,48,0.93) 48%, transparent);
}
.section-content { position: relative; z-index: 2; }
.section-label {
  font-size: 11px;
  letter-spacing: 6px;
  color: var(--pink);
  margin-bottom: 14px;
  font-family: Arial, sans-serif;
  font-weight: 700;
}
.section-big-title {
  font-size: clamp(56px, 11vw, 140px);
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -4px;
}
.hub-badge {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 100px;
  padding: 7px 18px;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.5);
  font-family: Arial, sans-serif;
}
.hub-badge .pink { color: var(--pink); }

/* ── CASE ── */
.scene-case {
  min-height: 100vh;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 80px;
}
.case-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.case-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(5,11,30,0.98) 0%, rgba(5,11,30,0.55) 55%, rgba(5,11,30,0.1) 100%),
    linear-gradient(to right, rgba(5,11,30,0.92) 0%, transparent 65%);
}
.case-content { position: relative; z-index: 2; max-width: 680px; }
.case-brand {
  font-size: 10px;
  letter-spacing: 5px;
  color: var(--pink);
  margin-bottom: 12px;
  font-family: Arial, sans-serif;
  font-weight: 700;
}
.case-title {
  font-size: clamp(32px, 5.5vw, 68px);
  font-weight: 900;
  line-height: 1.0;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.case-bracket {
  display: flex;
  gap: 0;
}
.case-bracket-line {
  width: 3px;
  background: var(--pink);
  flex-shrink: 0;
  margin-right: 14px;
  border-radius: 2px;
}
.case-desc {
  font-size: clamp(12px, 1.2vw, 15px);
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
  font-family: Arial, sans-serif;
  font-weight: 400;
}
.case-desc b { color: white; font-weight: 700; }
.hub-logo-corner {
  position: absolute;
  bottom: 36px;
  right: 54px;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.3);
  font-family: Arial, sans-serif;
}

/* ── PHOTO GRID ── */
.scene-photos {
  padding: 16px;
  background: #030812;
  align-items: stretch;
}
.photo-grid {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}
.photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* ── EXPERTISE ── */
.scene-expertise {
  background: linear-gradient(135deg, #eef2ff 0%, #e8eeff 100%);
  color: #0d1540;
  flex-direction: column;
  gap: 44px;
  padding: 80px 60px;
  align-items: flex-start;
}
.expertise-title {
  font-size: clamp(20px, 2.8vw, 34px);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0d1540;
}
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 1100px;
}
.expertise-card {
  background: rgba(13,21,64,0.04);
  border: 1px solid rgba(13,21,64,0.12);
  border-radius: 12px;
  padding: 26px 22px;
  transition: all 0.3s;
}
.expertise-card:hover {
  background: rgba(255,60,154,0.07);
  border-color: var(--pink);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255,60,154,0.12);
}
.expertise-card-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #0d1540;
  margin-bottom: 10px;
}
.expertise-card-desc {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(13,21,64,0.65);
  font-family: Arial, sans-serif;
  font-weight: 400;
}
.expertise-highlight {
  grid-column: 1 / -1;
  background: #0d1540;
  color: white;
  border-radius: 12px;
  padding: 22px 28px;
  font-size: clamp(13px, 1.3vw, 16px);
  line-height: 1.65;
  font-family: Arial, sans-serif;
  font-weight: 400;
  border: none;
  transition: none;
}
.expertise-highlight:hover { transform: none; box-shadow: none; }

/* ── FESTIVAIS ── */
.scene-festivais {
  background: linear-gradient(160deg, #0a0f30 0%, #1a2560 100%);
  flex-direction: column;
  gap: 36px;
  padding: 80px;
  align-items: flex-start;
}
.festivais-title {
  font-size: clamp(48px, 10vw, 120px);
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -4px;
}
.festivais-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  max-width: 1060px;
  width: 100%;
}
.festivais-brands, .festivais-desc {
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.8;
  color: rgba(255,255,255,0.78);
  font-family: Arial, sans-serif;
  font-weight: 400;
}
.festivais-brands b { color: var(--pink); }
.festivais-desc b { color: white; font-weight: 700; }

/* ── END SLIDE ── */
.scene-end {
  background: radial-gradient(ellipse at center, #1a2560 0%, #0d1540 60%, #030712 100%);
  flex-direction: column;
  gap: 24px;
  padding: 60px;
  align-items: center;
  text-align: center;
}
.end-plug {
  font-size: 11px;
  letter-spacing: 5px;
  color: var(--pink);
  font-family: Arial, sans-serif;
  font-weight: 700;
}
.end-hub {
  font-size: clamp(80px, 14vw, 190px);
  font-weight: 900;
  letter-spacing: -8px;
  line-height: 1;
  background: linear-gradient(160deg, #fff 35%, rgba(255,255,255,0.35));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.end-copy {
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.28);
  font-family: Arial, sans-serif;
  max-width: 480px;
  line-height: 1.9;
}
.end-footer {
  display: flex;
  gap: 20px;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.25);
  font-family: Arial, sans-serif;
  margin-top: 8px;
}
.end-footer .pink { color: var(--pink); }

/* ── CURSOR GLOW ── */
#cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,60,154,0.55) 0%, rgba(77,159,255,0.2) 50%, transparent 70%);
  pointer-events: none;
  z-index: 99997;
  mix-blend-mode: screen;
  will-change: transform;
}

/* ── UTILS ── */
.pink { color: var(--pink); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .scene-about { flex-direction: column; padding: 60px 40px; }
  .about-divider { width: 160px; height: 1px; }
  .eco-grid { grid-template-columns: 1fr; gap: 16px; }
  .eco-col-right { text-align: left; align-items: flex-start; }
  .eco-categories { grid-template-columns: repeat(2, 1fr); }
  .clients-grid { grid-template-columns: repeat(3, 1fr); }
  .expertise-grid { grid-template-columns: 1fr; }
  .festivais-content { grid-template-columns: 1fr; gap: 28px; }
  .scene-case { padding: 40px; }
  .scene { padding: 40px 24px; }
}