/* =========================
   FONTS (local)
   ========================= */
@font-face {
  font-family: "Orbitron";
  src: url("../fonts/Orbitron.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo";
  src: url("../fonts/Exo.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* =========================
   THEME
   ========================= */
:root{
  --bg0:#050507;
  --bg1:#0B0B10;
  --txt:#EDEDED;
  --muted: rgba(237,237,237,.72);

  --gold:#F2CF1F;
  --goldGlow:#F2E935;
  --purple:#8A14DE;
  --purpleGlow:#C76EFF;
  --cyan:#3DE3C7;

  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.14);

  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --radius: 18px;

  --ease: cubic-bezier(.16,1,.3,1); /* softer, more cinematic */
  --t: 720ms;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--txt);
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden; /* travado até o loading sair */
  font-family: "Exo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  :root{ --t: 0ms; }
}

/* =========================
   LOADING
   ========================= */
.loading{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background: linear-gradient(180deg, #040406, #0B0B10);
  z-index:9999;

  /* start hidden, then fade-in */
  opacity: 0;
  transform: scale(.985);
  filter: blur(10px);

  transition:
    opacity 2000ms var(--ease),
    transform 2000ms var(--ease),
    filter 2000ms var(--ease);
}
/* =========================
   TECH BACKGROUND OVERLAYS
   - no glow blobs; instead floating tech shapes
   ========================= */

/* Base overlay: faint grid + scanlines */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.18;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 62px),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  transform: translateZ(0);
  mix-blend-mode: overlay;
}

/* Floating layer: tech icons/paths as SVG data URIs */
body .techFloat{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:3; /* above scene bg, below content */
  overflow:hidden;
  display:block;
  opacity: 1;
  isolation:isolate;
  transform: translateZ(0);
}

/* Tech Float: Increased presence, more graphic, less glow */
.techFloat:before,
.techFloat:after{
  content:"";
  position:absolute;
  inset:-10%;
  opacity:.92;
  background-repeat:no-repeat;
  background-size: 760px 760px;
  /* Make it visible on dark bg */
  mix-blend-mode: normal;
  filter:
    contrast(1.15)
    brightness(1.15)
    saturate(1.12)
    drop-shadow(0 0 22px rgba(199,110,255,.16))
    drop-shadow(0 0 18px rgba(242,233,53,.12));
  animation: floatA 16s var(--ease) infinite alternate;
}

.techFloat:after{
  opacity:.78;
  background-size: 900px 900px;
  animation: floatB 22s var(--ease) infinite alternate;
}

/* Fallback: if scene-specific rules don't apply, still show a tech motif */
.techFloat:before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M120 260h240v120h180v-90h220'/%3E%3Cpath d='M170 640h220v-120h180v140h190'/%3E%3Cpath d='M260 160v140h150v160'/%3E%3Cpath d='M650 740v-170h-150v-90'/%3E%3C/g%3E%3Cg fill='%23FFFFFF' fill-opacity='.10'%3E%3Ccircle cx='350' cy='390' r='7'/%3E%3Ccircle cx='520' cy='300' r='6'/%3E%3Ccircle cx='570' cy='620' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 18% 48%;
}
.techFloat:after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.12' stroke-width='2'%3E%3Cpath d='M180 520c90-40 180-40 270 0s180 40 270 0'/%3E%3Cpath d='M200 560c70-28 140-28 210 0s140 28 210 0'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 78% 38%;
}

@keyframes floatA{
  0%{ transform: translate3d(-2%, 2%, 0) scale(1); }
  100%{ transform: translate3d(2%, -2%, 0) scale(1.03); }
}
@keyframes floatB{
  0%{ transform: translate3d(2%, -1%, 0) scale(1); }
  100%{ transform: translate3d(-2%, 2%, 0) scale(1.04); }
}

/* Scene-specific “tech motifs” (SVG patterns) */
body[data-scene="0"] .techFloat:before{ /* HERO: circuit + nodes */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23F2CF1F' stroke-opacity='.22' stroke-width='2'%3E%3Cpath d='M110 250h220v120h160v-90h210'/%3E%3Cpath d='M160 590h200v-120h170v140h190'/%3E%3Cpath d='M260 150v140h140v160'/%3E%3Cpath d='M650 720v-170h-140v-90'/%3E%3C/g%3E%3Cg fill='%23C76EFF' fill-opacity='.18'%3E%3Ccircle cx='330' cy='370' r='7'/%3E%3Ccircle cx='490' cy='280' r='6'/%3E%3Ccircle cx='360' cy='470' r='5'/%3E%3Ccircle cx='720' cy='300' r='6'/%3E%3Ccircle cx='550' cy='610' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 10% 45%;
}

body[data-scene="0"] .techFloat:after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%238A14DE' stroke-opacity='.18' stroke-width='2'%3E%3Cpath d='M120 420h240v-120h180v240h240'/%3E%3Cpath d='M210 740h220v-160h210v-120h120'/%3E%3C/g%3E%3Cg fill='%233DE3C7' fill-opacity='.10'%3E%3Crect x='610' y='220' width='18' height='18' rx='4'/%3E%3Crect x='280' y='640' width='16' height='16' rx='4'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 80% 35%;
}

body[data-scene="1"] .techFloat:before{ /* DOR: warning/alerts + jitter lines */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23C76EFF' stroke-opacity='.18' stroke-width='2'%3E%3Cpath d='M140 260h220M140 300h340M140 340h280'/%3E%3Cpath d='M520 560h220M520 600h260M520 640h200'/%3E%3C/g%3E%3Cg fill='%23F2CF1F' fill-opacity='.14'%3E%3Cpath d='M680 260l40 70h-80z'/%3E%3Ccircle cx='230' cy='640' r='10'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 12% 50%;
}
body[data-scene="1"] .techFloat:after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23F2E935' stroke-opacity='.14' stroke-width='2'%3E%3Cpath d='M180 520c90-40 180-40 270 0s180 40 270 0'/%3E%3Cpath d='M200 560c70-28 140-28 210 0s140 28 210 0'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 78% 38%;
}

body[data-scene="2"] .techFloat:before{ /* CORE: app/system/automation icons */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23F2CF1F' stroke-opacity='.18' stroke-width='2'%3E%3Crect x='160' y='200' width='170' height='240' rx='18'/%3E%3Crect x='390' y='260' width='160' height='120' rx='14'/%3E%3Cpath d='M640 240h110v220H640z'/%3E%3Cpath d='M245 470v120h305'/%3E%3Cpath d='M470 470v120h210'/%3E%3C/g%3E%3Cg fill='%233DE3C7' fill-opacity='.10'%3E%3Ccircle cx='250' cy='270' r='10'/%3E%3Ccircle cx='250' cy='310' r='10'/%3E%3Ccircle cx='250' cy='350' r='10'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 14% 46%;
}
body[data-scene="2"] .techFloat:after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23C76EFF' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M590 620h210'/%3E%3Cpath d='M590 660h160'/%3E%3Cpath d='M590 700h120'/%3E%3C/g%3E%3Cg fill='%238A14DE' fill-opacity='.12'%3E%3Crect x='180' y='610' width='120' height='70' rx='16'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 78% 52%;
}

body[data-scene="3"] .techFloat:before{ /* BENEFÍCIOS: timeline bars */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%233DE3C7' stroke-opacity='.12' stroke-width='2'%3E%3Cpath d='M160 260h420'/%3E%3Cpath d='M160 320h520'/%3E%3Cpath d='M160 380h300'/%3E%3Cpath d='M160 440h560'/%3E%3C/g%3E%3Cg fill='%23F2CF1F' fill-opacity='.12'%3E%3Crect x='650' y='250' width='18' height='18' rx='4'/%3E%3Crect x='520' y='430' width='18' height='18' rx='4'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 16% 45%;
}
body[data-scene="3"] .techFloat:after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23C76EFF' stroke-opacity='.14' stroke-width='2'%3E%3Cpath d='M600 260v420'/%3E%3Cpath d='M660 260v340'/%3E%3Cpath d='M720 260v280'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 82% 40%;
}

body[data-scene="4"] .techFloat:before{ /* MÉTODO: flow arrows */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23F2CF1F' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M170 300h220l40 40-40 40H170z'/%3E%3Cpath d='M170 520h320l40 40-40 40H170z'/%3E%3C/g%3E%3Cg fill='%23C76EFF' fill-opacity='.10'%3E%3Ccircle cx='640' cy='340' r='12'/%3E%3Ccircle cx='670' cy='560' r='10'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 14% 50%;
}
body[data-scene="4"] .techFloat:after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%233DE3C7' stroke-opacity='.12' stroke-width='2'%3E%3Cpath d='M560 260h220'/%3E%3Cpath d='M560 320h180'/%3E%3Cpath d='M560 380h140'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 82% 45%;
}

body[data-scene="5"] .techFloat:before{ /* TRUST: badges */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23F2CF1F' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M240 240h220v220H240z'/%3E%3Cpath d='M520 280h180v180H520z'/%3E%3C/g%3E%3Cg fill='%233DE3C7' fill-opacity='.10'%3E%3Cpath d='M330 320l30 30 60-70'/%3E%3Cpath d='M600 340l20 20 40-50'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 16% 44%;
}
body[data-scene="5"] .techFloat:after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23C76EFF' stroke-opacity='.14' stroke-width='2'%3E%3Cpath d='M620 600c40-40 80-40 120 0'/%3E%3Cpath d='M600 640c60-60 120-60 180 0'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 80% 55%;
}

body[data-scene="6"] .techFloat:before{ /* EXTRAS: web layout wireframe */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23C76EFF' stroke-opacity='.14' stroke-width='2'%3E%3Crect x='170' y='240' width='560' height='360' rx='18'/%3E%3Cpath d='M170 320h560'/%3E%3Cpath d='M230 360h220'/%3E%3Cpath d='M230 410h320'/%3E%3Cpath d='M230 460h280'/%3E%3C/g%3E%3Cg fill='%23F2CF1F' fill-opacity='.10'%3E%3Crect x='520' y='360' width='170' height='140' rx='14'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 14% 50%;
}
body[data-scene="6"] .techFloat:after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%233DE3C7' stroke-opacity='.10' stroke-width='2'%3E%3Cpath d='M640 260v420'/%3E%3Cpath d='M700 260v360'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 82% 45%;
}

body[data-scene="7"] .techFloat:before{ /* CONTACT: message bubble */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23F2CF1F' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M220 280h460v260H380l-120 90v-90H220z'/%3E%3Cpath d='M280 360h320'/%3E%3Cpath d='M280 420h260'/%3E%3Cpath d='M280 480h200'/%3E%3C/g%3E%3Cg fill='%233DE3C7' fill-opacity='.10'%3E%3Ccircle cx='640' cy='320' r='10'/%3E%3Ccircle cx='600' cy='320' r='10'/%3E%3Ccircle cx='560' cy='320' r='10'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 14% 52%;
}
body[data-scene="7"] .techFloat:after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23C76EFF' stroke-opacity='.14' stroke-width='2'%3E%3Cpath d='M610 620h220'/%3E%3Cpath d='M610 660h180'/%3E%3Cpath d='M610 700h140'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 82% 40%;
}

/* Z stack */
/* 0: grid+grain */
/* 1: scene bg */
/* 2: particles */
/* 3: techFloat */
/* 10+: UI/content */

.topbar, .progress{ position: fixed; z-index: 30; }

/* Stage (scenes) sits below overlays */
.stage{ position: relative; z-index: 10; }

/* Scene background and video stay behind overlays */
.scene__bg{ z-index: 1; }
.heroVideo{ z-index: 2; }

/* Tech overlays ABOVE stage, BELOW content */
body .techParticles{ z-index: 18; }
body .techFloat{ z-index: 19; }

/* FLOATING ICONS (SVGs)
   ========================= */

.floatIcons{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 17; /* above bg/video, below particles/techFloat/content */
  overflow: hidden;

  /* HARD HIDE: prevents any initial flash */
  display: none;

  opacity: 0;
  transform: translateZ(0);
  transition: opacity 420ms var(--ease);
}

body.icons-ready .floatIcons{
  display: block;
  opacity: 1;
}

.floatIcon{
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 44px;
  height: 44px;
  opacity: 0;
  color: var(--gold); /* default */
  filter:
    drop-shadow(0 10px 26px rgba(0,0,0,.55));
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

.no-color {
  color: transparent !important;
}

/* Only show after JS applies positions */
.floatIcon.is-laidout{ opacity: var(--iconOpacity, .22); }

.floatIcon svg{
  width: 100%;
  height: 100%;
  display:block;
}

/* Scene-linked palette */
body[data-scene="0"] .floatIcon{ color: var(--gold); }
body[data-scene="1"] .floatIcon{ color: var(--purpleGlow); }
body[data-scene="2"] .floatIcon{ color: var(--cyan); }
body[data-scene="3"] .floatIcon{ color: rgba(242,207,31,.92); }
body[data-scene="4"] .floatIcon{ color: rgba(199,110,255,.92); }
body[data-scene="5"] .floatIcon{ color: var(--goldGlow); }
body[data-scene="6"] .floatIcon{ color: rgba(255,255,255,.72); }
body[data-scene="7"] .floatIcon{ color: var(--gold); }

/* Gradient look: apply subtle extra glow per palette */
body[data-scene="0"] .floatIcon,
body[data-scene="5"] .floatIcon{
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55)) drop-shadow(0 0 20px rgba(242,233,53,.16));
}
body[data-scene="1"] .floatIcon,
body[data-scene="4"] .floatIcon{
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55)) drop-shadow(0 0 20px rgba(199,110,255,.16));
}

@keyframes iconFloatA{
  0%{ transform: translate3d(var(--x), var(--y), 0) translateY(0px) rotate(var(--r)); }
  100%{ transform: translate3d(var(--x), var(--y), 0) translateY(-18px) rotate(calc(var(--r) + 4deg)); }
}
@keyframes iconFloatB{
  0%{ transform: translate3d(var(--x), var(--y), 0) translateY(0px) rotate(var(--r)); }
  100%{ transform: translate3d(var(--x), var(--y), 0) translateY(22px) rotate(calc(var(--r) - 4deg)); }
}

.loading.is-visible{
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
}

.loading.is-hidden{
  pointer-events:none;
  opacity:0;
  transform: scale(1.02);
  filter: blur(12px);
}

.loading__wrap{
  width:min(520px, calc(100% - 36px));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}

.loading__logo{
  width:min(240px, 58vw);
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(242,233,53,.12));
}

.loading__lottie{
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 0 22px rgba(199,110,255,.14));
}

.loading__copy{
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(237,237,237,.70);
}

/* =========================
   TOPBAR
   ========================= */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  padding: 18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:50;
  pointer-events:none; /* só os botões clicáveis */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

body.boot-ready .topbar{
  opacity: 1;
  transform: translateY(0);
}
.topbar__left{ display:flex; align-items:baseline; gap:10px; pointer-events:auto; }
.topbar__logo{
  font-family:"Orbitron", sans-serif;
  letter-spacing:.14em;
  font-weight:800;
  font-size:13px;
}
.topbar__tag{
  font-size:11px;
  color: rgba(237,237,237,.55);
  letter-spacing:.14em;
}
.topbar__right{
  display:flex; gap:10px;
  pointer-events:auto;
}

.chip{
  text-decoration:none;
  color:#101015;
  background: var(--gold);
  border:1px solid rgba(255,255,255,.10);
  padding: 9px 12px;
  border-radius: 999px;
  font-weight:700;
  font-size:12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
.chip--outline{
  background: rgba(255,255,255,.06);
  color: var(--txt);
  border:1px solid rgba(199,110,255,.28);
}

/* =========================
   PROGRESS NAV
   ========================= */
.progress{
  position:fixed;
  right:16px;
  top:50%;
  opacity: 0;
  transform: translateY(-50%) translateX(10px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:60;
}

body.boot-ready .progress{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.progress__dot{
  width:10px; height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), border var(--t) var(--ease);
}
.progress__dot.is-active{
  background: var(--gold);
  border-color: rgba(242,233,53,.65);
  box-shadow: 0 0 18px rgba(242,233,53,.45);
  transform: scale(1.12);
}
.progress__label{
  margin-top:10px;
  width: 140px;
  text-align:right;
  font-size:12px;
  color: rgba(237,237,237,.70);
  letter-spacing:.06em;
}

/* =========================
   STAGE + SCENES
   ========================= */
.stage{
  position:relative;
  height:100dvh;
  width:100%;
}

.scene{
  position:absolute; inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  transform: translateY(0);
  filter: blur(0);
  pointer-events:none;
  z-index: 0;
}


/* Active scene is interactive */
.scene.is-active{ pointer-events:auto; }

/* =========================
   SEQUENTIAL TRANSITIONS (no mixing)
   ========================= */

/* Base state: hidden */
.scene{ opacity:0; transform: translateY(0); filter: blur(0); }

/* Active shows instantly ONLY when not transitioning */
.scene.is-active:not(.is-entering):not(.is-leaving){ opacity:1; }

/* While entering, keep hidden until we switch to enter-to-center */
.scene.is-entering.is-active{ opacity:0; }

 .scene.is-leaving{
   pointer-events:none;
   transition:
     opacity 720ms var(--ease),
     transform 720ms var(--ease),
     filter 720ms var(--ease);
   will-change: opacity, transform, filter;
 }

/* While leaving, if is-active is present, keep opacity 1 (until leave-* sets to 0) */
.scene.is-leaving.is-active{ opacity:1; }

/* Faster leave when going UP (back) so previous shows sooner */
.scene.is-leaving.leave-down{
  transition:
    opacity 520ms var(--ease),
    transform 520ms var(--ease),
    filter 520ms var(--ease);
}

.scene.is-entering{
  pointer-events:none;
  transition:
    opacity 820ms var(--ease),
    transform 820ms var(--ease),
    filter 820ms var(--ease);
  will-change: opacity, transform, filter;
}

/* Faster enter when going UP (back) */
.scene.is-entering.enter-from-up{
  transition:
    opacity 520ms var(--ease),
    transform 520ms var(--ease),
    filter 520ms var(--ease);
}

/* Direction: DOWN (next) */
.scene.is-leaving.leave-up{ opacity:0; transform: translateY(-160px); filter: blur(10px); }
.scene.is-entering.enter-from-down{ opacity:0; transform: translateY(160px); filter: blur(12px); }
.scene.is-entering.is-active.enter-to-center{ opacity:1; transform: translateY(0); filter: blur(0); }

/* Direction: UP (prev) */
.scene.is-leaving.leave-down{ opacity:0; transform: translateY(160px); filter: blur(10px); }
.scene.is-entering.enter-from-up{ opacity:0; transform: translateY(-110px); filter: blur(7px); }

.scene__bg{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.92;
  /* Remove transform by var --y, since we don't animate by progress anymore */
  transition:none;
  will-change: transform;
  z-index: 1;
}

.scene__content{
  width:min(1120px, calc(100% - 44px));
  padding: 86px 0 52px;
  position:relative;
  z-index:12;
}

/* Hero video overlay */
.heroVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.22;         /* sutil */
  filter:saturate(.9) contrast(1.05);
  pointer-events:none;
}
.heroVideo:not([src]), .heroVideo source[src=""]{ display:none; }

/* ==========================
   HERO TECH BUILD
   ========================= */
.heroBuild{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(10px);
  will-change: opacity, transform, filter;
}

body.boot-ready .scene--hero.is-active[data-revealed="true"] .heroBuild{
  animation: techRise 1100ms var(--ease) both;
}

body.boot-ready .scene--hero.is-active[data-revealed="true"] .heroBuild.d1{ animation-delay: 120ms; }
body.boot-ready .scene--hero.is-active[data-revealed="true"] .heroBuild.d2{ animation-delay: 260ms; }
body.boot-ready .scene--hero.is-active[data-revealed="true"] .heroBuild.d3{ animation-delay: 420ms; }
body.boot-ready .scene--hero.is-active[data-revealed="true"] .heroBuild.d4{ animation-delay: 620ms; }
body.boot-ready .scene--hero.is-active[data-revealed="true"] .heroBuild.d5{ animation-delay: 780ms; }

/* Scan / grid overlay */
.scene--hero .scene__content{
  position:relative;
}

.scene--hero .scene__content:before{
  content:"";
  position:absolute;
  inset:-30px -40px;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.00), rgba(242,233,53,.06), rgba(255,255,255,.00)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 70px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 48px);
  filter: blur(.2px);
  mix-blend-mode: overlay;
}

body.boot-ready .scene--hero.is-active[data-revealed="true"] .scene__content:before{
  animation: scanBuild 1400ms var(--ease) both;
}

/* A subtle "tech line" sweep */
.scene--hero .scene__content:after{
  content:"";
  position:absolute;
  left:-10%;
  top: 22%;
  width:120%;
  height:2px;
  pointer-events:none;
  opacity:0;
  background: linear-gradient(90deg, transparent, rgba(242,233,53,.55), rgba(199,110,255,.38), transparent);
  box-shadow: 0 0 26px rgba(242,233,53,.18);
}

body.boot-ready .scene--hero.is-active[data-revealed="true"] .scene__content:after{
  animation: techSweep 1200ms var(--ease) both;
  animation-delay: 220ms;
}

@keyframes techRise{
  0%{ opacity:0; transform: translateY(18px); filter: blur(10px); }
  55%{ opacity:1; filter: blur(2px); }
  100%{ opacity:1; transform: translateY(0); filter: blur(0); }
}

@keyframes scanBuild{
  0%{ opacity:0; transform: translateY(12px); }
  35%{ opacity:.22; }
  100%{ opacity:.10; transform: translateY(0); }
}

@keyframes techSweep{
  0%{ opacity:0; transform: translateY(-10px); }
  35%{ opacity:.85; transform: translateY(0); }
  100%{ opacity:0; transform: translateY(18px); }
}

/* =========================
   TYPO
   ========================= */
.kicker{
  color: rgba(237,237,237,.70);
  letter-spacing:.18em;
  font-size:12px;
  text-transform:uppercase;
  margin-bottom:10px;
}
.h1{
  font-family:"Orbitron", sans-serif;
  letter-spacing: .02em;
  line-height:1.05;
  font-size: clamp(34px, 6vw, 72px);
  margin:0 0 14px;
  text-shadow: 0 0 30px rgba(0,0,0,.55);
}
.h3{
  font-family:"Orbitron", sans-serif;
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing:.02em;
}
.lead{
  color: rgba(237,237,237,.82);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height:1.55;
  max-width: 760px;
  margin: 0 0 18px;
}
.lead--tight{ max-width: 620px; margin-top: 14px; }

.p{
  margin:0;
  color: rgba(237,237,237,.74);
  line-height:1.5;
  font-size:14px;
}
.footNote{
  margin-top:20px;
  font-size:12px;
  color: rgba(237,237,237,.55);
  letter-spacing:.08em;
}

/* =========================
   BUTTONS
   ========================= */
.ctaRow{
  margin-top: 22px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.ctaRow--contact{ margin-top: 16px; }
.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.02em;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease), border 180ms var(--ease);
  user-select:none;
}
.btn:active{ transform: translateY(1px); }

.btn--gold{
  background: linear-gradient(180deg, rgba(242,233,53,.98), rgba(242,207,31,.92));
  color: #0D0D12;
  box-shadow: 0 18px 35px rgba(0,0,0,.45), 0 0 30px rgba(242,233,53,.20);
}
.btn--gold:hover{
  box-shadow: 0 22px 42px rgba(0,0,0,.55), 0 0 42px rgba(242,233,53,.28);
  transform: translateY(-1px);
}

.btn--outline{
  background: rgba(255,255,255,.06);
  color: var(--txt);
  border: 1px solid rgba(199,110,255,.32);
  box-shadow: 0 16px 28px rgba(0,0,0,.35);
}
.btn--outline:hover{
  border-color: rgba(242,207,31,.30);
  transform: translateY(-1px);
}

.btn--ghost{
  background: transparent;
  color: rgba(237,237,237,.70);
  border:1px solid rgba(255,255,255,.14);
}
.btn--ghost:hover{ color: rgba(237,237,237,.90); }

/* Pills */
.chipsRow{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
.pill{
  font-size:12px;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.24);
  color: rgba(237,237,237,.78);
}
.pill--cyan{
  border-color: rgba(61,227,199,.35);
  box-shadow: 0 0 24px rgba(61,227,199,.10);
}

/* =========================
   COMPONENTS
   ========================= */
.bullets{
  margin: 18px 0 10px;
  padding-left: 18px;
  color: rgba(237,237,237,.80);
  max-width: 780px;
}
.bullets li{ margin: 10px 0; }

.quote{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top: 18px;
}
.quote__line{
  width: 46px;
  height: 2px;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(242,233,53,.40);
  border-radius:999px;
}
.quote__text{ margin:0; color: rgba(237,237,237,.86); }

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top: 18px;
}
@media (max-width: 980px){
  .grid3{ grid-template-columns: 1fr; }
}

.card{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 16px;
  position:relative;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.card:before{
  content:"";
  position:absolute; inset:-60px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 35%, rgba(255,255,255,.03)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 20px);
  filter: blur(14px);
  opacity:.55;
}
.card > *{ position:relative; z-index:1; }

.card__cap{
  font-family:"Orbitron", sans-serif;
  letter-spacing:.18em;
  color: rgba(237,237,237,.55);
  font-size:11px;
  margin-bottom:10px;
}

.mock{
  margin-top:14px;
  height: 120px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  position:relative;
}
.mock:before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(242,207,31,.10), rgba(138,20,222,.10));
}
.mock--dash:after{
  content:"";
  position:absolute; inset:14px;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 10px, transparent 10px, transparent 20px);
  opacity:.65;
}
.mock--phone:after{
  content:"";
  position:absolute;
  width: 92px; height: 148px;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18));
}
.mock--flow:after{
  content:"";
  position:absolute; inset:14px;
  background:
    radial-gradient(10px 10px at 15% 45%, rgba(242,233,53,.9), transparent 55%),
    radial-gradient(10px 10px at 50% 30%, rgba(199,110,255,.9), transparent 55%),
    radial-gradient(10px 10px at 80% 60%, rgba(61,227,199,.9), transparent 55%),
    linear-gradient(120deg, transparent 0 25%, rgba(255,255,255,.10) 25% 26%, transparent 26% 52%, rgba(255,255,255,.10) 52% 53%, transparent 53% 100%);
  opacity:.55;
}

.timeline{
  margin-top: 18px;
  max-width: 720px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.step{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.step__dot{
  width:10px; height:10px;
  border-radius:999px;
  background: var(--gold);
  margin-top:6px;
  box-shadow: 0 0 18px rgba(242,233,53,.30);
  flex: 0 0 auto;
}
.step__dot--cyan{ background: var(--cyan); box-shadow: 0 0 18px rgba(61,227,199,.25); }
.step__text{ color: rgba(237,237,237,.80); line-height:1.55; }

.process{
  margin-top: 18px;
  max-width: 820px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.process__item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.process__n{
  font-family:"Orbitron", sans-serif;
  color: rgba(242,207,31,.92);
  letter-spacing:.10em;
  font-weight:800;
  width: 42px;
}
.process__t{
  font-weight:900;
  margin-bottom: 4px;
}
.process__p{
  color: rgba(237,237,237,.72);
  line-height:1.5;
  font-size:14px;
}

.seals{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 900px;
}
@media (max-width: 980px){
  .seals{ grid-template-columns: 1fr; }
}
.seal{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 14px;
  display:flex;
  gap: 12px;
  align-items:center;
}
.seal__icon{
  width: 12px; height: 12px;
  border-radius: 4px;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(242,233,53,.35);
}
.seal__icon--cyan{ background: var(--cyan); box-shadow: 0 0 18px rgba(61,227,199,.25); }
.seal__t{ font-weight:800; color: rgba(237,237,237,.82); }

.note{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  align-items:center;
  color: rgba(237,237,237,.62);
  font-size:12px;
}
.note__dot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(199,110,255,.9);
  box-shadow: 0 0 18px rgba(199,110,255,.25);
}

/* Contact */
.contactCard{
  margin-top: 18px;
  max-width: 720px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.contactRow{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 10px 6px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.contactRow:last-child{ border-bottom:none; }
.contactLabel{
  color: rgba(237,237,237,.55);
  font-size:12px;
  letter-spacing:.06em;
}
.contactValue{
  color: rgba(237,237,237,.90);
  text-decoration:none;
  font-weight:900;
}
.contactValue:hover{ color: rgba(242,233,53,.92); }
.contactHint{ color: rgba(237,237,237,.70); }

.footer{
  margin-top: 18px;
  color: rgba(237,237,237,.62);
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.footer__mini{ font-size:12px; }

/* =========================
   BACKGROUNDS (no images required)
   ========================= */
.bg--intro,
.bg--hero,
.bg--pain,
.bg--core,
.bg--benefits,
.bg--process,
.bg--trust,
.bg--extras,
.bg--contact{
  background:
    radial-gradient(1200px 820px at 50% 40%, rgba(255,255,255,.03), transparent 65%),
    linear-gradient(180deg, #040406, #0B0B10);
  opacity: .98;
}

/* Variações sutis por cena (sem cor) */
.bg--hero{   background: radial-gradient(1200px 820px at 40% 35%, rgba(255,255,255,.035), transparent 65%), linear-gradient(180deg, #040406, #0B0B10); }
.bg--pain{   background: radial-gradient(1200px 820px at 60% 55%, rgba(255,255,255,.030), transparent 65%), linear-gradient(180deg, #040406, #0B0B10); }
.bg--core{   background: radial-gradient(1200px 820px at 45% 50%, rgba(255,255,255,.032), transparent 65%), linear-gradient(180deg, #040406, #0B0B10); }
.bg--benefits{ background: radial-gradient(1200px 820px at 55% 45%, rgba(255,255,255,.030), transparent 65%), linear-gradient(180deg, #040406, #0B0B10); }
.bg--process{ background: radial-gradient(1200px 820px at 50% 55%, rgba(255,255,255,.030), transparent 65%), linear-gradient(180deg, #040406, #0B0B10); }
.bg--trust{  background: radial-gradient(1200px 820px at 50% 40%, rgba(255,255,255,.028), transparent 65%), linear-gradient(180deg, #040406, #0B0B10); }
.bg--extras{ background: radial-gradient(1200px 820px at 55% 52%, rgba(255,255,255,.028), transparent 65%), linear-gradient(180deg, #040406, #0B0B10); }
.bg--contact{background: radial-gradient(1200px 820px at 45% 45%, rgba(255,255,255,.030), transparent 65%), linear-gradient(180deg, #040406, #0B0B10); }

/* Grain */
  /* Grain layer */
.scene__bg:after, body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity:.10;
  mix-blend-mode: overlay;
}
/* Extra: subtle tech particles */
body .techParticles{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2; /* between bg and techFloat */
  overflow:hidden;
  opacity:.55;
  mix-blend-mode: overlay;
  isolation:isolate;
  transform: translateZ(0);
}

.techParticles:before,
.techParticles:after{
  content:"";
  position:absolute;
  inset:-20%;
  background-repeat:no-repeat;
  background-size: 1100px 1100px;
  filter: blur(.2px);
  animation: particlesA 18s var(--ease) infinite alternate;
}

.techParticles:after{
  opacity:.7;
  background-size: 1400px 1400px;
  animation: particlesB 26s var(--ease) infinite alternate;
}

@keyframes particlesA{
  0%{ transform: translate3d(-1.5%, 1.5%, 0) scale(1); }
  100%{ transform: translate3d(1.5%, -1.5%, 0) scale(1.02); }
}
@keyframes particlesB{
  0%{ transform: translate3d(1.5%, -1%, 0) scale(1); }
  100%{ transform: translate3d(-1.5%, 1.5%, 0) scale(1.03); }
}

/* Scene-linked particle color accents (still subtle) */
body[data-scene="0"] .techParticles:before,
body[data-scene="2"] .techParticles:before,
body[data-scene="5"] .techParticles:before,
body[data-scene="7"] .techParticles:before{
  background-image: radial-gradient(circle at 20% 30%, rgba(242,207,31,.35) 0 2px, transparent 3px),
                    radial-gradient(circle at 60% 55%, rgba(199,110,255,.22) 0 2px, transparent 3px),
                    radial-gradient(circle at 80% 35%, rgba(61,227,199,.18) 0 2px, transparent 3px);
}

body[data-scene="1"] .techParticles:before,
body[data-scene="3"] .techParticles:before,
body[data-scene="4"] .techParticles:before,
body[data-scene="6"] .techParticles:before{
  background-image: radial-gradient(circle at 25% 40%, rgba(199,110,255,.26) 0 2px, transparent 3px),
                    radial-gradient(circle at 55% 25%, rgba(242,207,31,.22) 0 2px, transparent 3px),
                    radial-gradient(circle at 78% 62%, rgba(255,255,255,.16) 0 2px, transparent 3px);
}

/* add a faint dotted grid layer */
.techParticles:after{
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 70%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 35%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,.12) 0 1px, transparent 2px);
}