/* =========================================================
   ACDC ENERGIA · APRESENTAÇÃO CINEMATOGRÁFICA REAL
   Cliente: LIBERTE VEÍCULOS / SUNFIT — UC 30181310
   Sistema: 292,64 kWp · 472 módulos · R$ 654.000
   Dados extraídos da Proposta Executiva mai/2026
   Duração: ~52 segundos · Renderização: 1920x1080
   ========================================================= */
:root{
  --acdc-orange: #F39200;
  --acdc-orange-bright: #FFA51F;
  --acdc-orange-deep: #C57500;
  --solar-yellow: #FFD23F;
  --energy-cyan: #00E5FF;
  --green-money: #4ADE80;
  --bg-deep: #050810;
  --bg-mid: #0A1224;
  --bg-light: #15203A;
  --steel: #4A5568;
  --concrete: #A0AEC0;
  --white: #F7FAFC;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  width:100%; height:100%; overflow:hidden;
  background:#000; color:var(--white);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  cursor:default;
}

/* ============== STAGE & CINEMA EFFECTS ============== */
.stage{
  position:fixed; inset:0;
  background:#000;
  overflow:hidden;
}
.letterbox-top, .letterbox-bottom{
  position:absolute; left:0; right:0; height:0;
  background:#000; z-index:1000; pointer-events:none;
  animation: letterbox 1s ease-out 0.2s forwards;
}
.letterbox-top{ top:0; }
.letterbox-bottom{ bottom:0; }
@keyframes letterbox{
  from{height:0} to{height:5vh}
}
.vignette{
  position:absolute; inset:0; pointer-events:none; z-index:50;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
}
.grain{
  position:absolute; inset:-50%; pointer-events:none; z-index:60;
  opacity:0.045; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.4s steps(2) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}
  50%{transform:translate(-3%,2%)}
  100%{transform:translate(2%,-2%)}
}

.scene{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition: opacity 0.6s ease;
}
.scene.active{ opacity:1; visibility:visible; }

/* Universal corner branding */
.corner-logo{
  position:absolute;
  top:7vh; left:4vw;
  width:140px;
  z-index:200;
  opacity:0;
  pointer-events:none;
}
.scene.active .corner-logo{
  animation: cornerLogoIn 0.8s ease-out 0.4s forwards;
}
@keyframes cornerLogoIn{
  from{ opacity:0; transform:translateY(-10px); }
  to{ opacity:0.95; transform:translateY(0); }
}
.corner-logo img{ width:100%; display:block; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8)); }

/* Corner case-info */
.case-tag{
  position:absolute;
  top:7vh; right:4vw;
  z-index:200;
  text-align:right;
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:0.7vw;
  letter-spacing:0.3em;
  color:var(--concrete);
  text-transform:uppercase;
  opacity:0;
}
.scene.active .case-tag{
  animation: cornerLogoIn 0.8s ease-out 0.4s forwards;
}
.case-tag .accent{ color:var(--acdc-orange); display:block; margin-top:6px;}

/* =========================================================
   SCENE 1 · LOGO INTRO (0-4s)
   ========================================================= */
#scene1{
  background: radial-gradient(ellipse at center, #0a1224 0%, #050810 70%, #000 100%);
}
.particles{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(243,146,0,0.6), transparent),
    radial-gradient(1px 1px at 33% 67%, rgba(255,210,63,0.5), transparent),
    radial-gradient(2px 2px at 67% 33%, rgba(243,146,0,0.4), transparent),
    radial-gradient(1px 1px at 88% 78%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 45% 89%, rgba(243,146,0,0.5), transparent),
    radial-gradient(2px 2px at 78% 12%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 22% 56%, rgba(255,210,63,0.4), transparent);
  background-size: 800px 800px;
  animation: particlesFloat 30s linear infinite;
}
@keyframes particlesFloat{
  from{ background-position: 0 0; }
  to{ background-position: 800px 800px; }
}
.intro-logo-wrap{
  position:relative;
  text-align:center;
  z-index:10;
}
.intro-logo-wrap img{
  width:38vw; max-width:720px;
  opacity:0;
  transform: scale(0.85);
  filter: blur(20px);
  animation: introLogo 2.4s cubic-bezier(.2,.8,.2,1) 0.4s forwards;
}
@keyframes introLogo{
  0% { opacity:0; transform: scale(0.7); filter: blur(20px); }
  60%{ opacity:1; transform: scale(1.04); filter: blur(0); }
  100%{ opacity:1; transform: scale(1); filter: blur(0); }
}
.light-burst{
  position:absolute; top:50%; left:50%;
  width:0; height:0;
  background: radial-gradient(circle, rgba(243,146,0,0.6) 0%, transparent 70%);
  border-radius:50%; transform:translate(-50%,-50%);
  animation: lightBurst 2.4s ease-out 0.9s forwards;
  pointer-events:none;
}
@keyframes lightBurst{
  0%{ width:0; height:0; opacity:0; }
  50%{ width:1100px; height:1100px; opacity:0.85; }
  100%{ width:1700px; height:1700px; opacity:0; }
}
.intro-tagline{
  position:absolute;
  top:64%; left:50%; transform:translateX(-50%);
  font-family:'Inter', sans-serif;
  font-weight:300;
  font-size:1.15vw;
  letter-spacing:0.5em;
  color:var(--acdc-orange);
  text-transform:uppercase;
  opacity:0;
  animation: fadeInUpDelayed 1.5s ease-out 2.4s forwards;
  white-space:nowrap;
}
@keyframes fadeInUpDelayed{
  from{ opacity:0; transform:translate(-50%,15px); }
  to{ opacity:1; transform:translate(-50%,0); }
}

/* =========================================================
   SCENE 2 · AERIAL FACADE ESTABLISHING (4-9s)
   ========================================================= */
.bg-photo{
  position:absolute; inset:-8%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.65) contrast(1.05) saturate(1.1);
}
#scene2 .bg-photo{
  background-image: url('../fachada_selfit.jpg');
  animation: kenBurns1 6s ease-out forwards;
}
@keyframes kenBurns1{
  from{ transform: scale(1.0) translate(0, 0); }
  to  { transform: scale(1.18) translate(-2%, -2%); }
}
.scene-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 0%, rgba(5,8,16,0.4) 60%, rgba(5,8,16,0.95) 100%);
}
#scene2 .title-block{
  position:absolute;
  bottom:14%; left:6%;
  z-index:10;
  opacity:0;
  animation: slideInLeft 1.2s ease-out 0.8s forwards;
  max-width:60%;
}
@keyframes slideInLeft{
  from{ opacity:0; transform:translateX(-40px); }
  to  { opacity:1; transform:translateX(0); }
}
.accent-bar{
  width:80px; height:4px;
  background:var(--acdc-orange);
  margin-bottom:18px;
}
.kicker{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:0.8vw;
  letter-spacing:0.5em;
  color:var(--acdc-orange);
  margin-bottom:14px;
  text-transform:uppercase;
}
.headline-xl{
  font-family:'Bebas Neue', sans-serif;
  font-size:5.5vw;
  letter-spacing:0.04em;
  line-height:0.95;
  color:var(--white);
  text-shadow: 0 4px 30px rgba(0,0,0,0.9);
}
.headline-xl .accent{ color:var(--acdc-orange); }
.subline{
  font-family:'Inter', sans-serif;
  font-weight:300;
  font-size:1.1vw;
  letter-spacing:0.05em;
  margin-top:18px;
  color:var(--concrete);
  max-width:80%;
}
.location{
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:0.85vw;
  letter-spacing:0.18em;
  margin-top:24px;
  color:var(--white);
}
.location::before{
  content:"◉ ";
  color:var(--acdc-orange);
}

/* HUD coordinates */
.hud-gps{
  position:absolute;
  top:14vh; right:5vw;
  font-family:'Orbitron', sans-serif;
  font-size:0.7vw;
  color:var(--energy-cyan);
  letter-spacing:0.25em;
  opacity:0;
  text-align:right;
  z-index:200;
  animation: fadeIn 1s ease-out 1.5s forwards;
}
.hud-gps .lock{ color:var(--acdc-orange); margin-top:6px; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* =========================================================
   SCENE 3 · TELHADO REAL ESTADO ATUAL (9-13s)
   ========================================================= */
#scene3 .bg-photo{
  background-image: url('../telhado_aereo_03.jpg');
  animation: kenBurns2 5s ease-in-out forwards;
}
@keyframes kenBurns2{
  from{ transform: scale(1.05) translate(0, 0); }
  to  { transform: scale(1.20) translate(2%, -3%); }
}
#scene3 .scene-label{
  position:absolute;
  top:48%; left:50%; transform:translate(-50%,-50%);
  text-align:center;
  z-index:20;
  opacity:0;
  animation: scaleIn 0.8s ease-out 0.5s forwards;
}
@keyframes scaleIn{
  from{ opacity:0; transform:translate(-50%,-50%) scale(0.85); }
  to  { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
#scene3 .label-mini{
  font-family:'Inter', sans-serif;
  font-weight:300;
  font-size:0.9vw;
  letter-spacing:0.5em;
  color:var(--acdc-orange);
  text-transform:uppercase;
  margin-bottom:14px;
}
#scene3 .label-big{
  font-family:'Bebas Neue', sans-serif;
  font-size:6vw;
  letter-spacing:0.08em;
  color:var(--white);
  text-shadow: 0 4px 30px rgba(0,0,0,1);
  line-height:1;
}
#scene3 .area-info{
  position:absolute;
  bottom:18%; left:50%; transform:translateX(-50%);
  font-family:'Inter', sans-serif;
  font-weight:300;
  font-size:0.95vw;
  letter-spacing:0.3em;
  color:var(--white);
  text-transform:uppercase;
  text-align:center;
  opacity:0;
  animation: fadeInUpDelayed 1s ease-out 1.5s forwards;
}
#scene3 .area-info strong{ color:var(--acdc-orange); font-weight:700; letter-spacing:0.1em; }

/* Scanning line effect */
.scan-line{
  position:absolute; left:0; right:0;
  height:120px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(243,146,0,0.05) 30%,
    rgba(243,146,0,0.4) 50%,
    rgba(255,210,63,0.6) 50%,
    rgba(243,146,0,0.05) 70%,
    transparent 100%);
  filter: blur(2px);
  z-index:15;
  pointer-events:none;
  top:-120px;
  opacity:0;
}
#scene3 .scan-line{
  animation: scanDown 3s ease-in-out 1.2s forwards;
}
@keyframes scanDown{
  0%{ top:-120px; opacity:1; }
  100%{ top:100%; opacity:0; }
}

/* =========================================================
   SCENE 4 · TRANSFORMAÇÃO (telhado vira render com painéis) (13-18s)
   ========================================================= */
#scene4 .split-stage{
  position:absolute; inset:0;
  display:flex;
  z-index:5;
}
#scene4 .left-half{
  width:50%;
  background: url('../telhado_aereo_03.jpg') center/cover no-repeat;
  filter: brightness(0.75) contrast(1.05);
  position:relative;
}
#scene4 .right-half{
  width:50%;
  background: url('../cobertura_render.png') center/cover no-repeat;
  filter: brightness(0.85) contrast(1.1) saturate(1.1);
  position:relative;
}
#scene4 .left-half::after,
#scene4 .right-half::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7));
}
#scene4 .label{
  position:absolute;
  bottom:20%;
  font-family:'Bebas Neue', sans-serif;
  font-size:3.5vw;
  letter-spacing:0.18em;
  color:var(--white);
  text-shadow: 0 4px 24px rgba(0,0,0,1);
  z-index:10;
}
#scene4 .label-antes{
  left:8%;
  color:var(--concrete);
}
#scene4 .label-depois{
  right:8%; text-align:right;
  color:var(--acdc-orange);
}
#scene4 .label small{
  display:block;
  font-family:'Inter', sans-serif;
  font-weight:300;
  font-size:0.28em;
  letter-spacing:0.4em;
  margin-bottom:8px;
  color:var(--white);
  opacity:0.7;
}
#scene4 .vs-divider{
  position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:3px; height:80%;
  background: linear-gradient(180deg, transparent, var(--acdc-orange) 30%, var(--acdc-orange) 70%, transparent);
  z-index:8;
  box-shadow: 0 0 16px var(--acdc-orange);
  opacity:0;
  animation: dividerIn 0.6s ease-out 0.3s forwards;
}
@keyframes dividerIn{
  from{ opacity:0; height:0; }
  to{ opacity:1; height:80%; }
}
#scene4 .center-stat{
  position:absolute;
  top:14%; left:50%; transform:translateX(-50%);
  text-align:center;
  z-index:10;
  opacity:0;
  animation: fadeInUpDelayed 1s ease-out 1s forwards;
}
#scene4 .center-stat .small{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:0.85vw;
  letter-spacing:0.45em;
  color:var(--acdc-orange);
  text-transform:uppercase;
  margin-bottom:10px;
}
#scene4 .center-stat .big{
  font-family:'Bebas Neue', sans-serif;
  font-size:3.2vw;
  letter-spacing:0.05em;
  color:var(--white);
  line-height:1;
}

/* =========================================================
   SCENE 5 · HERO RENDER 3D (18-22s)
   ========================================================= */
#scene5 .bg-photo{
  background-image: url('../capa_render_3d.png');
  background-size: cover;
  filter: brightness(0.85) contrast(1.1) saturate(1.1);
  animation: kenBurns3 5s ease-in-out forwards;
}
@keyframes kenBurns3{
  from{ transform: scale(1.0); }
  to  { transform: scale(1.10); }
}
#scene5 .scene-overlay{
  background: linear-gradient(135deg, rgba(5,8,16,0.5) 0%, transparent 40%, transparent 60%, rgba(5,8,16,0.85) 100%);
}
#scene5 .hero-stat{
  position:absolute;
  bottom:14%; right:6%;
  text-align:right;
  z-index:10;
  opacity:0;
  animation: slideInRight 1.2s ease-out 0.6s forwards;
}
@keyframes slideInRight{
  from{ opacity:0; transform:translateX(40px); }
  to  { opacity:1; transform:translateX(0); }
}
#scene5 .hero-stat .number{
  font-family:'Bebas Neue', sans-serif;
  font-size:11vw;
  line-height:0.85;
  color:var(--acdc-orange);
  text-shadow: 0 0 50px rgba(243,146,0,0.5), 0 4px 30px rgba(0,0,0,0.9);
  letter-spacing:-0.02em;
}
#scene5 .hero-stat .unit{
  font-family:'Bebas Neue', sans-serif;
  font-size:3.5vw;
  letter-spacing:0.05em;
  color:var(--white);
  margin-top:-10px;
}
#scene5 .hero-stat .desc{
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:0.9vw;
  letter-spacing:0.3em;
  color:var(--concrete);
  text-transform:uppercase;
  margin-top:18px;
}

/* =========================================================
   SCENE 6 · CARDS TÉCNICOS (22-28s)
   ========================================================= */
#scene6{ background: linear-gradient(180deg, #0a1224 0%, #050810 100%); }
#scene6 .scene-title{
  position:absolute;
  top:18%; left:50%; transform:translateX(-50%);
  text-align:center;
  z-index:10;
}
#scene6 .scene-title .small{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:0.85vw;
  letter-spacing:0.5em;
  color:var(--acdc-orange);
  text-transform:uppercase;
  margin-bottom:10px;
  opacity:0;
  animation: fadeInDown 1s ease-out forwards;
}
#scene6 .scene-title .big{
  font-family:'Bebas Neue', sans-serif;
  font-size:3vw;
  letter-spacing:0.15em;
  color:var(--white);
  opacity:0;
  animation: fadeInDown 1s ease-out 0.3s forwards;
}
@keyframes fadeInDown{
  from{ opacity:0; transform:translateY(-15px); }
  to  { opacity:1; transform:translateY(0); }
}
#scene6 .card-grid{
  position:relative;
  width:84%; max-width:1500px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
  z-index:10;
}
.tech-card{
  background: linear-gradient(135deg, rgba(15,23,42,0.85), rgba(15,23,42,0.5));
  border:1px solid rgba(243,146,0,0.25);
  backdrop-filter: blur(8px);
  padding:32px 26px;
  border-radius:6px;
  position:relative;
  overflow:hidden;
  opacity:0;
  transform:translateY(40px);
}
.tech-card.show{
  animation: cardIn 0.8s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes cardIn{ to{ opacity:1; transform:translateY(0); } }
.tech-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--acdc-orange), var(--solar-yellow));
}
.tech-card .tag{
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:0.7vw;
  letter-spacing:0.3em;
  color:var(--concrete);
  margin-bottom:12px;
  text-transform:uppercase;
}
.tech-card .value{
  font-family:'Bebas Neue', sans-serif;
  font-size:4.2vw;
  color:var(--white);
  line-height:1;
}
.tech-card .unit{
  font-family:'Inter', sans-serif;
  font-weight:400;
  font-size:0.95vw;
  color:var(--acdc-orange);
  margin-top:8px;
  letter-spacing:0.05em;
}
.tech-card .meta{
  font-family:'Inter', sans-serif;
  font-weight:300;
  font-size:0.7vw;
  color:var(--concrete);
  margin-top:12px;
  letter-spacing:0.05em;
  opacity:0.9;
}

/* =========================================================
   SCENE 7 · INVERSOR HUAWEI (28-32s)
   ========================================================= */
#scene7{
  background: radial-gradient(ellipse at center, #1a2030 0%, #050810 80%);
}
#scene7 .equip-stage{
  position:relative;
  width:90%;
  max-width:1700px;
  display:flex;
  align-items:center;
  z-index:10;
}
#scene7 .equip-image{
  width:55%;
  position:relative;
  opacity:0;
  transform:translateX(-40px);
  animation: slideInLeft 1.2s ease-out 0.4s forwards;
}
#scene7 .equip-image img{
  width:100%; display:block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.7));
}
#scene7 .equip-info{
  width:45%;
  padding-left:5%;
  opacity:0;
  transform:translateX(40px);
  animation: slideInRight 1.2s ease-out 0.7s forwards;
}
.equip-info .badge{
  display:inline-block;
  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:0.7vw;
  letter-spacing:0.4em;
  color:var(--acdc-orange);
  background: rgba(243,146,0,0.1);
  border:1px solid rgba(243,146,0,0.3);
  padding:6px 14px;
  text-transform:uppercase;
  margin-bottom:18px;
}
.equip-info .model{
  font-family:'Bebas Neue', sans-serif;
  font-size:4vw;
  letter-spacing:0.04em;
  color:var(--white);
  line-height:0.95;
  margin-bottom:8px;
}
.equip-info .model .accent{ color:var(--acdc-orange); }
.equip-info .model-sub{
  font-family:'Inter', sans-serif;
  font-weight:300;
  font-size:1vw;
  letter-spacing:0.15em;
  color:var(--concrete);
  margin-bottom:30px;
  text-transform:uppercase;
}
.equip-info .specs{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:20px 30px;
  margin-bottom:24px;
}
.spec-item{
  border-left: 3px solid var(--acdc-orange);
  padding-left: 14px;
}
.spec-item .label{
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:0.65vw;
  letter-spacing:0.3em;
  color:var(--concrete);
  text-transform:uppercase;
  margin-bottom:4px;
}
.spec-item .value{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.7vw;
  color:var(--white);
  line-height:1;
}
.spec-item .value small{
  font-family:'Inter', sans-serif;
  font-weight:400;
  font-size:0.55em;
  color:var(--acdc-orange);
  letter-spacing:0.1em;
  margin-left:4px;
}
.equip-info .quantity-pill{
  display:inline-block;
  background: linear-gradient(135deg, var(--acdc-orange), var(--acdc-orange-deep));
  color:var(--white);
  font-family:'Bebas Neue', sans-serif;
  font-size:1.6vw;
  letter-spacing:0.1em;
  padding:10px 26px;
  border-radius:4px;
  box-shadow: 0 8px 24px rgba(243,146,0,0.3);
}

/* =========================================================
   SCENE 8 · OTIMIZADOR & RSD (32-36s)
   ========================================================= */
#scene8{
  background: radial-gradient(ellipse at center, #1a2030 0%, #050810 80%);
}
#scene8 .equip-stage{
  position:relative;
  width:88%; max-width:1700px;
  display:flex;
  align-items:center;
  z-index:10;
}
#scene8 .equip-info{
  width:55%;
  padding-right:5%;
  opacity:0;
  transform:translateX(-30px);
  animation: slideInLeft 1.2s ease-out 0.6s forwards;
}
#scene8 .equip-image{
  width:45%;
  position:relative;
  opacity:0;
  transform:translateX(30px);
  animation: slideInRight 1.2s ease-out 0.4s forwards;
}
#scene8 .equip-image img{
  width:100%; display:block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8));
}
#scene8 .nbr-stamp{
  position:absolute;
  top:10%; right:5%;
  font-family:'Orbitron', sans-serif;
  font-weight:700;
  text-align:center;
  background: rgba(243,146,0,0.15);
  border:2px solid var(--acdc-orange);
  padding:14px 22px;
  border-radius:6px;
  z-index:20;
  opacity:0;
  animation: fadeInUpDelayed 1s ease-out 1.5s forwards;
}
#scene8 .nbr-stamp .top{
  font-size:0.7vw;
  letter-spacing:0.3em;
  color:var(--white);
}
#scene8 .nbr-stamp .big{
  font-size:1.5vw;
  color:var(--acdc-orange);
  margin:6px 0;
}
#scene8 .nbr-stamp .sub{
  font-size:0.65vw;
  letter-spacing:0.2em;
  color:var(--concrete);
  text-transform:uppercase;
}

/* =========================================================
   SCENE 9 · CONFORMIDADE & DIFERENCIAIS (36-40s)
   ========================================================= */
#scene9{
  background: linear-gradient(180deg, #0a1224 0%, #050810 100%);
}
#scene9 .scene-title{
  position:absolute;
  top:14%; left:50%; transform:translateX(-50%);
  text-align:center;
  z-index:10;
}
#scene9 .scene-title .small{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:0.85vw;
  letter-spacing:0.5em;
  color:var(--acdc-orange);
  text-transform:uppercase;
  margin-bottom:10px;
}
#scene9 .scene-title .big{
  font-family:'Bebas Neue', sans-serif;
  font-size:2.8vw;
  letter-spacing:0.15em;
  color:var(--white);
}
#scene9 .compliance-grid{
  width:85%; max-width:1500px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px;
  z-index:10;
}
.compliance-card{
  background: linear-gradient(135deg, rgba(15,23,42,0.85), rgba(15,23,42,0.4));
  border:1px solid rgba(243,146,0,0.25);
  padding:32px 28px;
  border-radius:6px;
  position:relative;
  opacity:0;
  transform:translateY(30px);
}
.compliance-card.show{ animation: cardIn 0.8s cubic-bezier(.2,.8,.2,1) forwards; }
.compliance-card .icon{
  width:54px; height:54px;
  background:rgba(243,146,0,0.15);
  border:1px solid rgba(243,146,0,0.4);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  color:var(--acdc-orange);
}
.compliance-card .icon svg{ width:28px; height:28px; }
.compliance-card .title{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.6vw;
  letter-spacing:0.05em;
  color:var(--white);
  line-height:1.05;
  margin-bottom:10px;
}
.compliance-card .desc{
  font-family:'Inter', sans-serif;
  font-weight:300;
  font-size:0.78vw;
  line-height:1.6;
  color:var(--concrete);
}
.compliance-card .desc strong{ color:var(--white); font-weight:500; }

/* =========================================================
   SCENE 10 · NÚMEROS FINANCEIROS (40-46s)
   ========================================================= */
#scene10{
  background: linear-gradient(135deg, #0a1224 0%, #050810 100%);
}
#scene10 .scene-title{
  position:absolute;
  top:10%; left:50%; transform:translateX(-50%);
  text-align:center;
  z-index:10;
}
#scene10 .scene-title .small{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:0.85vw;
  letter-spacing:0.5em;
  color:var(--green-money);
  text-transform:uppercase;
  margin-bottom:10px;
}
#scene10 .scene-title .big{
  font-family:'Bebas Neue', sans-serif;
  font-size:3vw;
  letter-spacing:0.1em;
  color:var(--white);
}
#scene10 .finance-grid{
  width:84%; max-width:1500px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:24px;
  z-index:10;
}
.fin-card{
  position:relative;
  background: linear-gradient(135deg, rgba(74,222,128,0.06), rgba(15,23,42,0.5));
  border-left:4px solid var(--acdc-orange);
  padding:30px 36px;
  border-radius:4px;
  opacity:0;
  transform:translateX(-30px);
}
.fin-card.show{ animation: resultIn 0.7s ease-out forwards; }
@keyframes resultIn{ to{ opacity:1; transform:translateX(0); } }
.fin-card.highlight{ border-left-color: var(--green-money); }
.fin-card.highlight .value{ color: var(--green-money); }
.fin-card .label{
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:0.75vw;
  letter-spacing:0.35em;
  color:var(--concrete);
  text-transform:uppercase;
  margin-bottom:10px;
}
.fin-card .value{
  font-family:'Bebas Neue', sans-serif;
  font-size:4.5vw;
  color:var(--white);
  line-height:1;
}
.fin-card .value .currency{
  font-size:0.45em;
  color:var(--acdc-orange);
  margin-right:0.15em;
  vertical-align:super;
  font-family:'Inter', sans-serif;
  font-weight:700;
  letter-spacing:0.05em;
}
.fin-card .unit{
  font-family:'Inter', sans-serif;
  font-weight:400;
  font-size:0.85vw;
  color:var(--acdc-orange);
  margin-top:6px;
  letter-spacing:0.12em;
}
.fin-card .icon{
  position:absolute;
  top:24px; right:30px;
  width:40px; height:40px;
  color:var(--acdc-orange);
  opacity:0.4;
}

/* =========================================================
   SCENE 11 · PAGAMENTO (46-50s)
   ========================================================= */
#scene11{ background: radial-gradient(ellipse at center, #0a1224 0%, #050810 80%); }
#scene11 .scene-title{
  position:absolute;
  top:12%; left:50%; transform:translateX(-50%);
  text-align:center;
  z-index:10;
}
#scene11 .scene-title .small{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:0.85vw;
  letter-spacing:0.5em;
  color:var(--acdc-orange);
  text-transform:uppercase;
  margin-bottom:10px;
}
#scene11 .scene-title .big{
  font-family:'Bebas Neue', sans-serif;
  font-size:3.2vw;
  letter-spacing:0.05em;
  color:var(--white);
}
#scene11 .scene-title .big .accent{ color:var(--green-money); }
#scene11 .pay-grid{
  width:88%; max-width:1700px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px;
  z-index:10;
}
.pay-card{
  position:relative;
  background: linear-gradient(180deg, rgba(15,23,42,0.9), rgba(15,23,42,0.5));
  border:1px solid rgba(243,146,0,0.25);
  padding:30px 28px;
  border-radius:8px;
  opacity:0;
  transform:translateY(30px);
}
.pay-card.show{ animation: cardIn 0.8s cubic-bezier(.2,.8,.2,1) forwards; }
.pay-card.featured{
  border-color: var(--green-money);
  box-shadow: 0 0 30px rgba(74,222,128,0.15);
}
.pay-card .head{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.8vw;
  letter-spacing:0.08em;
  color:var(--white);
  border-bottom:1px solid rgba(243,146,0,0.2);
  padding-bottom:14px;
  margin-bottom:18px;
}
.pay-card.featured .head{ color: var(--green-money); border-color: rgba(74,222,128,0.3); }
.pay-card .row{
  display:flex; justify-content:space-between;
  font-family:'Inter', sans-serif;
  font-size:0.8vw;
  padding:8px 0;
  color:var(--concrete);
}
.pay-card .row strong{ color:var(--white); font-weight:600; }
.pay-card .punch{
  margin-top:18px;
  padding:12px 14px;
  background: rgba(74,222,128,0.12);
  border-left: 3px solid var(--green-money);
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:0.85vw;
  letter-spacing:0.08em;
  color: var(--green-money);
  text-transform:uppercase;
}

/* =========================================================
   SCENE 12 · CTA FINAL (50-54s)
   ========================================================= */
#scene12{ background:#000; }
#scene12 .final-block{
  text-align:center;
  z-index:10;
  position:relative;
  width:90%;
  max-width:1500px;
  margin:0 auto;
  padding:0 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
#scene12 .final-logo{
  margin-bottom:40px;
  opacity:0;
  animation: introLogo 1.5s ease-out 0.3s forwards;
}
#scene12 .final-logo img{
  width:24vw; max-width:520px;
}
#scene12 .final-tagline{
  font-family:'Inter', sans-serif;
  font-weight:300;
  font-size:1.1vw;
  letter-spacing:0.5em;
  color:var(--concrete);
  text-transform:uppercase;
  margin-bottom:14px;
  opacity:0;
  animation: fadeInUpDelayed 1s ease-out 1s forwards;
}
#scene12 .final-headline{
  font-family:'Bebas Neue', sans-serif;
  font-size:4vw;
  letter-spacing:0.05em;
  line-height:0.95;
  color:var(--white);
  margin-bottom:36px;
  opacity:0;
  animation: fadeInUpDelayed 1s ease-out 1.4s forwards;
  text-align:center;
  width:100%;
}
#scene12 .final-headline .accent{ color:var(--acdc-orange); }
#scene12 .contact-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:24px 36px;
  margin-bottom:24px;
  opacity:0;
  animation: fadeInUpDelayed 1s ease-out 1.8s forwards;
  width:100%;
}
#scene12 .contact-item{
  font-family:'Inter', sans-serif;
  text-align:center;
  min-width:140px;
}
#scene12 .contact-item .lbl{
  font-weight:500;
  font-size:0.62vw;
  letter-spacing:0.3em;
  color:var(--concrete);
  text-transform:uppercase;
  margin-bottom:6px;
}
#scene12 .contact-item .val{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.35vw;
  letter-spacing:0.05em;
  color:var(--white);
  white-space:nowrap;
}
#scene12 .contact-item .val .accent{ color:var(--acdc-orange); }
#scene12 .author-line{
  font-family:'Inter', sans-serif;
  font-weight:400;
  font-size:0.7vw;
  letter-spacing:0.3em;
  color:var(--concrete);
  text-transform:uppercase;
  margin-top:20px;
  opacity:0;
  animation: fadeInUpDelayed 1s ease-out 2.2s forwards;
  text-align:center;
}
#scene12 .author-line .accent{ color:var(--acdc-orange); font-weight:600; }

/* =========================================================
   PROGRESS BAR + START SCREEN
   ========================================================= */
.timeline{
  position:fixed;
  bottom:0; left:0; right:0;
  height:3px;
  background:rgba(255,255,255,0.08);
  z-index:2000;
  display:none;
}
.timeline-fill{
  height:100%;
  width:0;
  background: linear-gradient(90deg, var(--acdc-orange), var(--solar-yellow));
  box-shadow: 0 0 12px rgba(243,146,0,0.7);
  animation: progressBar 54s linear forwards;
}
@keyframes progressBar{ to{ width:100%; } }

.controls{
  position:fixed;
  bottom:20px; right:20px;
  z-index:3000;
  display:flex; gap:8px;
  opacity:0.4;
  transition: opacity 0.3s;
}
.controls:hover{ opacity:1; }
.ctrl-btn{
  background: rgba(243,146,0,0.2);
  border:1px solid var(--acdc-orange);
  color: var(--white);
  padding:8px 16px;
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:0.2em;
  cursor:pointer;
  border-radius:3px;
  text-transform:uppercase;
}
.ctrl-btn:hover{ background: rgba(243,146,0,0.4); }

.start-screen{
  position:fixed; inset:0;
  background:#000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:5000;
  cursor:pointer;
  transition: opacity 0.6s;
}
.start-screen.hide{ opacity:0; pointer-events:none; }
.start-screen .start-logo{
  width:30vw; max-width:480px;
  margin-bottom:50px;
  opacity:0.95;
}
.start-screen .play-icon{
  width:120px; height:120px;
  border:3px solid var(--acdc-orange);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:30px;
  transition: transform 0.3s;
}
.start-screen:hover .play-icon{ transform:scale(1.1); }
.start-screen .play-icon::after{
  content:"";
  width:0; height:0;
  border-left: 30px solid var(--acdc-orange);
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  margin-left:8px;
}
.start-screen .start-text{
  font-family:'Bebas Neue', sans-serif;
  font-size:2.5vw;
  letter-spacing:0.3em;
  color:var(--white);
}
.start-screen .start-sub{
  font-family:'Inter', sans-serif;
  font-weight:300;
  font-size:0.85vw;
  letter-spacing:0.3em;
  color:var(--concrete);
  text-transform:uppercase;
  margin-top:14px;
  text-align:center;
  max-width:600px;
}