:root{--acc:#FE3C00;--cyan:#00e6ff;--gold:#d9b26a;--ink:#05070c;}
@font-face{font-family:"Poppins";src:url(./assets/poppins-100.woff2) format("woff2");font-weight:100;font-display:swap;}
@font-face{font-family:"Poppins";src:url(./assets/poppins-200.woff2) format("woff2");font-weight:200;font-display:swap;}
@font-face{font-family:"Poppins";src:url(./assets/poppins-300.woff2) format("woff2");font-weight:300;font-display:swap;}
*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;background:var(--ink);color:#eaf2ff;
  font-family:"SF Pro Display","Helvetica Neue","Segoe UI",system-ui,Arial,sans-serif;}
img{ -webkit-user-drag:none; user-drag:none; }
#stage{position:fixed;inset:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#0a1120 0%,#05070c 70%);}
.chapter{position:absolute;inset:0;opacity:0;pointer-events:none;will-change:opacity,transform;}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
#vignette{position:absolute;inset:0;pointer-events:none;z-index:40;
  background:radial-gradient(120% 100% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%);mix-blend-mode:multiply;}

/* ============ INTRO (white) ============ */
#ch-intro{background:#eef2f7;z-index:10;}
#introWhite{position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,#ffffff 0%,#eef3f9 55%,#d9e4f0 100%);}
#introGlow{position:absolute;inset:0;background:radial-gradient(closest-side at 50% 52%,rgba(120,200,255,.35),transparent 60%);mix-blend-mode:screen;opacity:0;}
#title0{z-index:30;}
.stack0{display:flex;flex-direction:column;gap:.02em;align-items:center;font-family:"Poppins","SF Pro Display",sans-serif;font-weight:200;line-height:.98;letter-spacing:.02em;color:#0b0b0f;}
.stack0 .big-ai{font-size:clamp(150px,32vw,480px);font-weight:100;line-height:.82;letter-spacing:.04em;color:#0b0b0f;}
.stack0 span{font-size:clamp(34px,7vw,96px);font-weight:200;letter-spacing:.12em;}
.stack0 span:nth-child(2){color:#1c2026;margin-top:.1em;}
.stack0 span:nth-child(3){color:#3a4048;}
#stoneWrap{position:absolute;left:50%;top:44%;width:min(46vw,440px);aspect-ratio:1/1;transform:translate(-50%,-50%);will-change:transform,opacity;}
#stoneImg{width:100%;height:100%;object-fit:contain;animation:stoneFire 2.6s ease-in-out infinite;}
@keyframes stoneFire{0%,100%{filter:drop-shadow(0 0 24px rgba(255,140,30,.85)) drop-shadow(0 0 60px rgba(255,90,20,.6)) drop-shadow(0 0 120px rgba(230,60,10,.4)) drop-shadow(0 20px 40px rgba(20,10,5,.5));}50%{filter:drop-shadow(0 0 48px rgba(255,190,60,1)) drop-shadow(0 0 110px rgba(255,120,30,.85)) drop-shadow(0 0 220px rgba(240,70,15,.6)) drop-shadow(0 20px 40px rgba(20,10,5,.5));}}
#stoneWrap .mx{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  font-weight:800;font-size:min(9vw,88px);letter-spacing:.06em;color:rgba(8,5,3,.86);
  mix-blend-mode:multiply;text-shadow:0 1px 0 rgba(255,180,90,.35),0 -1px 2px rgba(0,0,0,.6);opacity:0;}
.ititle{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);text-align:center;opacity:0;pointer-events:none;width:100%;z-index:30;}
.huge{font-weight:800;letter-spacing:.03em;line-height:.95;font-size:clamp(52px,10.4vw,178px);white-space:nowrap;color:#0b0b0f;padding:0 4.5vw;}
.huge.xx{font-size:clamp(56px,12vw,190px);letter-spacing:.02em;font-style:italic;font-weight:600;
  font-family:"Didot","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;}
.lava{background-image:url(./assets/tex1.jpg);background-size:170% 170%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:brightness(1.15) saturate(1.5) contrast(1.18) drop-shadow(0 0 26px rgba(255,110,25,.5)) drop-shadow(0 0 60px rgba(255,80,10,.28)) drop-shadow(0 12px 34px rgba(12,18,34,.4));animation:lavaShift 7s ease-in-out infinite;}
@keyframes lavaShift{0%,100%{background-position:0% 28%}50%{background-position:100% 72%}}
.ititle .tag{margin-top:56px;font-family:"Poppins","SF Pro Display",sans-serif;font-weight:200;letter-spacing:.24em;font-size:clamp(30px,4.6vw,62px);color:#0b0b0f;
  -webkit-text-fill-color:#0b0b0f;text-shadow:none;line-height:1.1;display:inline-block;transform-origin:50% 50%;animation:tagBreathe 5.5s ease-in-out infinite;}
@keyframes tagBreathe{0%,100%{transform:scale(1) rotate(0deg);letter-spacing:.24em;opacity:.92}50%{transform:scale(1.045) rotate(-.5deg);letter-spacing:.3em;opacity:1}}
.frag{display:inline-block;will-change:transform,opacity;}
.lava .frag{background-image:url(./assets/tex1.jpg);background-size:230% 230%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;filter:grayscale(.5) brightness(.74);animation:lavaShift 10s ease-in-out infinite;}
#introFlash{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,#fff,rgba(255,255,255,0) 60%);opacity:0;mix-blend-mode:screen;}
.ihint,.gcap{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);font-size:11px;letter-spacing:.4em;color:#9fb4d6;opacity:.85;display:flex;gap:10px;align-items:center;}
.ihint .dot,.dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ============ GATEWAY ============ */
#ch-gate{z-index:9;background:#02040a;}
#gBg{position:absolute;inset:-6%;background:url(./assets/bg.jpg) center/cover no-repeat;
  filter:brightness(.62) saturate(1.1) contrast(1.05);animation:ken 26s ease-in-out infinite alternate;}
@keyframes ken{0%{transform:scale(1.06) translate(-1%,0)}100%{transform:scale(1.18) translate(2%,-2%)}}
#gBg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,22,.4),rgba(2,4,10,.75));}
#gAtmos{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.gcloud{position:absolute;width:88%;opacity:.62;mix-blend-mode:screen;filter:brightness(1.15);}
.gcloud.c1{top:-8%;left:-12%;animation:drift 30s linear infinite;}
.gcloud.c2{bottom:-10%;right:-14%;width:80%;opacity:.55;animation:drift2 38s linear infinite;}
@keyframes drift{0%{transform:translateX(-10%) translateY(0)}50%{transform:translateX(6%) translateY(-3%)}100%{transform:translateX(20%) translateY(0)}}
@keyframes drift2{0%{transform:translateX(12%)}100%{transform:translateX(-20%)}}
.gsmoke{position:absolute;bottom:-16%;width:56%;opacity:.6;mix-blend-mode:screen;}
.gsmoke.s1{left:-8%;animation:smk 12s ease-in-out infinite;}
.gsmoke.s2{right:-8%;width:50%;animation:smk 15s ease-in-out infinite reverse;}
@keyframes smk{0%{transform:translateY(8%) scale(1);opacity:0}30%{opacity:.65}100%{transform:translateY(-22%) scale(1.28);opacity:0}}
#gAlien{position:absolute;left:12%;top:18%;width:min(22vw,240px);opacity:.92;filter:drop-shadow(0 0 34px rgba(120,240,255,.6));animation:afloat 7s ease-in-out infinite;}
@keyframes afloat{0%,100%{transform:translate(0,0) rotate(-4deg) scale(1)}50%{transform:translate(5%,-9%) rotate(4deg) scale(1.06)}}
#gDrone{position:absolute;right:7%;top:26%;width:min(28vw,320px);filter:drop-shadow(0 18px 30px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(0,230,255,.45));animation:dfly 6s ease-in-out infinite;}
@keyframes dfly{0%{transform:translate(8%,0) rotate(5deg) scale(1)}50%{transform:translate(-16%,10%) rotate(-6deg) scale(1.22)}100%{transform:translate(8%,0) rotate(5deg) scale(1)}}
.gx{position:absolute;pointer-events:none;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(0,230,255,.4));}
.gd2{right:22%;top:12%;width:min(14vw,150px);animation:dfly2 4.4s ease-in-out infinite;}
.gd3{left:20%;bottom:14%;width:min(11vw,120px);animation:dfly3 5.6s ease-in-out infinite;opacity:.9;}
.ga2{right:14%;bottom:20%;width:min(13vw,140px);opacity:.85;filter:drop-shadow(0 0 26px rgba(120,240,255,.55));animation:afloat2 4.6s ease-in-out infinite;}
.ga3{left:24%;top:10%;width:min(10vw,110px);opacity:.7;filter:drop-shadow(0 0 20px rgba(120,240,255,.5));animation:afloat3 4s ease-in-out infinite;}
.ga4{right:30%;top:40%;width:min(8vw,90px);opacity:.6;animation:afloat2 5.4s ease-in-out infinite reverse;}
@keyframes dfly2{0%{transform:translate(0,0) rotate(-18deg) scale(1)}50%{transform:translate(-18%,12%) rotate(-6deg) scale(1.28)}100%{transform:translate(0,0) rotate(-18deg) scale(1)}}
@keyframes dfly3{0%{transform:translate(0,0) rotate(12deg) scale(1)}50%{transform:translate(20%,-10%) rotate(4deg) scale(1.3)}100%{transform:translate(0,0) rotate(12deg) scale(1)}}
@keyframes afloat2{0%,100%{transform:translate(0,0) rotate(-6deg) scale(.92)}50%{transform:translate(-7%,-11%) rotate(6deg) scale(1.2)}}
@keyframes afloat3{0%,100%{transform:translate(0,0) rotate(5deg) scale(.9)}50%{transform:translate(9%,-9%) rotate(-5deg) scale(1.18)}}
.sstone{position:absolute;top:50%;left:50%;width:min(20vw,240px);opacity:0;pointer-events:none;z-index:19;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.25));will-change:transform,opacity;}
#sStone1{filter:hue-rotate(-12deg) brightness(1.05) drop-shadow(0 20px 30px rgba(0,0,0,.25));}
#sStone2{filter:hue-rotate(18deg) brightness(.92) contrast(1.1) drop-shadow(0 20px 30px rgba(0,0,0,.25));}
#sStone3{filter:hue-rotate(-25deg) saturate(1.3) drop-shadow(0 20px 30px rgba(0,0,0,.25));}
#sStone4{filter:hue-rotate(30deg) brightness(1.08) drop-shadow(0 20px 30px rgba(0,0,0,.25));}
#sStone5{filter:hue-rotate(6deg) contrast(1.15) drop-shadow(0 20px 30px rgba(0,0,0,.25));}
#sStone6{filter:hue-rotate(-8deg) brightness(.96) saturate(1.2) drop-shadow(0 20px 30px rgba(0,0,0,.25));}
#gStack{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(78vh,78vw);aspect-ratio:1/1;will-change:transform;perspective:1100px;}
#gStack::before,#gStack::after{content:"";position:absolute;left:50%;top:50%;width:118%;height:118%;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(0,230,255,.22);box-shadow:0 0 50px rgba(0,230,255,.16) inset,0 0 30px rgba(0,230,255,.12);pointer-events:none;}
#gStack::before{animation:spin 26s linear infinite;}
#gStack::after{width:134%;height:134%;border-color:rgba(255,120,40,.16);border-style:dashed;animation:spin 40s linear infinite reverse;}
#gStack>*{position:absolute;inset:0;margin:auto;}
#gCore{width:150%;height:150%;border-radius:50%;
  background:radial-gradient(circle,rgba(150,205,255,.55) 0%,rgba(70,150,255,.34) 26%,rgba(30,110,255,.16) 48%,transparent 70%);
  filter:blur(10px);mix-blend-mode:screen;animation:corePulse 4.6s ease-in-out infinite;pointer-events:none;}
@keyframes corePulse{0%,100%{transform:scale(.72);opacity:.6}50%{transform:scale(1.28);opacity:1}}
#gMachine{width:68%;height:68%;object-fit:contain;animation:machineGlow 3.4s ease-in-out infinite, spinY 9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinY{to{transform:rotateY(360deg)}}
#gGate{width:100%;height:100%;object-fit:contain;animation:gateGlow 5.5s ease-in-out infinite;}
@keyframes machineGlow{
  0%,100%{ filter:brightness(1.2) saturate(1.5) drop-shadow(0 0 26px rgba(60,150,255,1)) drop-shadow(0 0 70px rgba(40,110,255,.85)) drop-shadow(0 0 140px rgba(25,85,240,.55)); }
  50%{ filter:brightness(1.42) saturate(1.7) drop-shadow(0 0 54px rgba(110,185,255,1)) drop-shadow(0 0 130px rgba(60,140,255,1)) drop-shadow(0 0 240px rgba(35,100,250,.75)); }
}
@keyframes gateGlow{
  0%,100%{ filter:brightness(1.2) saturate(1.25) drop-shadow(0 0 60px rgba(235,246,255,.7)) drop-shadow(0 0 140px rgba(185,225,255,.5)) drop-shadow(0 0 240px rgba(150,205,255,.3)) drop-shadow(0 20px 60px rgba(0,0,0,.6)); }
  50%{ filter:brightness(1.45) saturate(1.4) drop-shadow(0 0 130px rgba(255,255,255,1)) drop-shadow(0 0 280px rgba(210,238,255,.85)) drop-shadow(0 0 440px rgba(170,220,255,.6)) drop-shadow(0 20px 60px rgba(0,0,0,.6)); }
}
@keyframes gateShine{
  0%,100%{transform:scale(.99) rotate(0deg);filter:saturate(1.3) brightness(1.1) drop-shadow(0 0 46px rgba(0,210,255,.5)) drop-shadow(0 20px 60px rgba(0,0,0,.6));}
  50%{transform:scale(1.025) rotate(.6deg);filter:saturate(1.55) brightness(1.28) drop-shadow(0 0 84px rgba(120,240,255,.85)) drop-shadow(0 20px 60px rgba(0,0,0,.6));}}
#gRainbow{position:absolute;left:50%;bottom:-46%;width:130vw;height:130vw;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle, transparent 37%, rgba(255,40,40,.16) 39%, rgba(255,150,0,.16) 41%, rgba(255,240,0,.15) 43%, rgba(30,210,90,.15) 45%, rgba(0,150,255,.16) 47%, rgba(150,40,255,.16) 49%, transparent 51%);
  mix-blend-mode:screen;opacity:0;pointer-events:none;filter:blur(2px);animation:rainbowFade 11s ease-in-out infinite;}
@keyframes rainbowFade{0%,100%{opacity:0}42%,58%{opacity:.75}}
#gFlash{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(180,240,255,.9),transparent 55%);opacity:0;mix-blend-mode:screen;}
#gLabel{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);text-align:center;letter-spacing:.5em;}
#gLabel span{display:block;font-size:11px;color:#8fb6d8;opacity:.8;margin-bottom:6px;}
#gLabel b{font-weight:200;font-size:clamp(20px,3.4vw,44px);letter-spacing:.34em;color:#eaf7ff;text-shadow:0 0 24px rgba(0,230,255,.5);}

/* ============ WORLDS ============ */
#ch-worlds{z-index:8;background:#000;}
#vwrap{position:absolute;inset:0;}
.wv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:opacity;}
#wGrade{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 90% at 50% 42%,transparent 52%,rgba(0,0,0,.5) 100%),
  linear-gradient(180deg,rgba(0,0,0,.28),transparent 30%,transparent 72%,rgba(0,0,0,.42));}
#wFlick{position:absolute;inset:0;pointer-events:none;background:rgba(180,220,255,.06);opacity:0;mix-blend-mode:screen;}
#wBolt{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(210,235,255,.9),transparent 55%);opacity:0;mix-blend-mode:screen;}
#caption{position:absolute;left:6%;bottom:11%;display:flex;flex-direction:column;gap:6px;opacity:0;pointer-events:none;}
#caption .cnum{font-weight:200;font-size:clamp(30px,5vw,64px);letter-spacing:.08em;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.6);}
#caption .ctxt{font-size:12px;letter-spacing:.4em;color:var(--cyan);text-shadow:0 0 14px rgba(0,230,255,.5);}

/* ============ ROBOT (baby, walk cycle) ============ */
#whiteWipe{position:fixed;inset:0;background:#fff;opacity:0;z-index:55;pointer-events:none;}
#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:14;pointer-events:none;opacity:0;transition:opacity .3s;}
#robotShadow{position:absolute;left:50%;bottom:4%;width:16vh;height:3.2vh;max-width:170px;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,.28) 45%,transparent 72%);
  filter:blur(3px);opacity:0;pointer-events:none;z-index:21;}
#rig{position:absolute;left:50%;bottom:-4%;height:34vh;max-height:360px;aspect-ratio:438/655;transform:translateX(-50%);
  opacity:0;pointer-events:none;z-index:22;transform-origin:50% 100%;will-change:transform,opacity;}
#rigInner{position:absolute;inset:0;transform-origin:50% 100%;animation:rigBob .66s ease-in-out infinite, rigGlow 2.3s ease-in-out infinite;}
@keyframes rigGlow{0%,100%{filter:drop-shadow(0 14px 20px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(255,210,70,.45)) drop-shadow(0 0 46px rgba(255,180,40,.32))}50%{filter:drop-shadow(0 14px 20px rgba(0,0,0,.45)) drop-shadow(0 0 44px rgba(255,224,96,.8)) drop-shadow(0 0 88px rgba(255,190,50,.6))}}
.rp{position:absolute;height:auto;filter:saturate(1.55) brightness(1.14) contrast(1.06);}
.rp.head,.rp.body{filter:saturate(1.6) brightness(1.16) contrast(1.05);}
.rp.head{left:5.48%;top:0.3%;width:89.04%;transform-origin:50% 94%;animation:rHead .66s ease-in-out infinite;z-index:4;}
.rp.body{left:32.88%;top:37.56%;width:40.18%;z-index:3;}
.rp.armL{left:0%;top:42.75%;width:36.07%;transform-origin:62% 6%;animation:rArmL .66s ease-in-out infinite;z-index:1;}
.rp.armR{left:68.04%;top:42.75%;width:31.96%;transform-origin:38% 6%;animation:rArmR .66s ease-in-out infinite;z-index:1;}
.rp.legL{left:24.66%;top:66.87%;width:21.92%;transform-origin:52% 5%;animation:rLegL .66s ease-in-out infinite;z-index:2;}
.rp.legR{left:63.93%;top:66.87%;width:25.57%;transform-origin:48% 5%;animation:rLegR .66s ease-in-out infinite;z-index:2;}
@keyframes rigBob{0%,100%{transform:translateY(0)}25%{transform:translateY(-4.2%)}50%{transform:translateY(0)}75%{transform:translateY(-4.2%)}}
@keyframes rLegL{0%{transform:translateY(0) rotate(15deg)}25%{transform:translateY(-16%) rotate(-4deg)}50%{transform:translateY(0) rotate(-15deg)}75%{transform:translateY(-4%) rotate(4deg)}100%{transform:translateY(0) rotate(15deg)}}
@keyframes rLegR{0%{transform:translateY(0) rotate(-15deg)}25%{transform:translateY(-4%) rotate(4deg)}50%{transform:translateY(0) rotate(15deg)}75%{transform:translateY(-16%) rotate(-4deg)}100%{transform:translateY(0) rotate(-15deg)}}
@keyframes rArmL{0%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}100%{transform:rotate(-9deg)}}
@keyframes rArmR{0%{transform:rotate(9deg)}50%{transform:rotate(-9deg)}100%{transform:rotate(9deg)}}
@keyframes rHead{0%,100%{transform:rotate(2.4deg)}50%{transform:rotate(-2.4deg)}}

/* ============ DEVICES ============ */
#ch-computer{z-index:7;background:radial-gradient(120% 100% at 50% 42%,#0c1524 0%,#04070d 72%);}
#ch-laptop{z-index:7;background:radial-gradient(120% 100% at 50% 42%,#0b1422 0%,#04070d 72%);}
.devVign{position:absolute;inset:0;z-index:1;background:radial-gradient(125% 105% at 50% 46%,transparent 56%,rgba(0,8,16,.42));}
.nature{position:absolute;inset:0;overflow:hidden;z-index:0;}
.nature::before{content:"";position:absolute;inset:-3%;background:url(./assets/waterfall.jpg) center/cover no-repeat;
  filter:saturate(1.16) contrast(1.08) brightness(1.1);animation:natureKen 20s ease-in-out infinite alternate;}
@keyframes natureKen{0%{transform:scale(1.03) translate(0,0) skewX(0deg)}50%{transform:scale(1.045) translate(-.5%,-.4%) skewX(.4deg)}100%{transform:scale(1.05) translate(.4%,-.2%) skewX(-.4deg)}}
.nature::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 70% at 50% 8%,rgba(200,245,255,.14),transparent 46%),
    radial-gradient(150% 60% at 50% 108%,rgba(150,225,225,.30),transparent 60%),
    linear-gradient(180deg,rgba(4,20,26,.20),transparent 26%,transparent 60%,rgba(2,26,32,.42)),
    linear-gradient(90deg,rgba(20,120,120,.10),transparent 22%,transparent 78%,rgba(20,120,120,.10));}
/* soft volumetric depth haze layer sitting in the mid-scene */
.nature::before{filter:saturate(1.12) contrast(1.06) brightness(1.06) hue-rotate(-4deg);}
.waterFX{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:1;}
.nfall{position:absolute;left:41%;top:20%;width:16%;height:50%;pointer-events:none;mix-blend-mode:screen;opacity:.2;filter:blur(1.4px);
  background:repeating-linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.1) 2px,rgba(255,255,255,0) 6px);
  animation:fallFlow .5s linear infinite;}
@keyframes fallFlow{0%{background-position:0 0}100%{background-position:0 12px}}
.nmist{position:absolute;left:20%;bottom:-4%;width:62%;height:34%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse at 50% 100%,rgba(238,250,255,.55),rgba(210,240,245,.22) 45%,transparent 74%);filter:blur(26px);animation:mistPulse 9s ease-in-out infinite;}
@keyframes mistPulse{0%,100%{opacity:.42;transform:translateY(0) scale(1)}50%{opacity:.66;transform:translateY(-6%) scale(1.08)}}
/* second drifting mist band rising through the falls */
.nmist::after{content:"";position:absolute;left:8%;bottom:30%;width:84%;height:60%;
  background:radial-gradient(ellipse at 50% 80%,rgba(235,250,255,.34),transparent 70%);filter:blur(30px);animation:mistPulse2 11s ease-in-out infinite;}
@keyframes mistPulse2{0%,100%{opacity:.22;transform:translateY(6%) scale(1)}50%{opacity:.4;transform:translateY(-8%) scale(1.12)}}
.nleaf{position:absolute;pointer-events:none;transform-origin:50% 0;filter:drop-shadow(0 10px 16px rgba(0,0,0,.3));}
.nleaf.l1{left:-3%;top:-3%;width:27vw;max-width:410px;animation:sway1 4.4s ease-in-out infinite;filter:hue-rotate(-8deg) brightness(1.05) drop-shadow(0 10px 16px rgba(0,0,0,.3));}
.nleaf.l2{right:-4%;top:-3%;width:31vw;max-width:470px;animation:sway2 5.2s ease-in-out infinite;filter:hue-rotate(10deg) brightness(.96) drop-shadow(0 10px 16px rgba(0,0,0,.3));}
.nleaf.l3{left:30%;top:-4%;width:17vw;max-width:260px;animation:sway3 4s ease-in-out infinite;filter:hue-rotate(-14deg) brightness(1.08) drop-shadow(0 10px 16px rgba(0,0,0,.3));}
.nleaf.l4{right:22%;top:-5%;width:14vw;max-width:210px;animation:sway4 6.6s ease-in-out infinite;filter:hue-rotate(6deg) brightness(.92) drop-shadow(0 10px 16px rgba(0,0,0,.3));}
.nleaf.l5{left:-4%;bottom:-6%;top:auto;width:25vw;max-width:380px;transform-origin:20% 100%;animation:sway5 3.1s ease-in-out infinite;filter:hue-rotate(-6deg) brightness(1.02) drop-shadow(0 10px 16px rgba(0,0,0,.3));}
.nleaf.l6{left:9%;bottom:-8%;top:auto;width:15vw;max-width:230px;transform-origin:40% 100%;animation:sway6 2.6s ease-in-out infinite;filter:hue-rotate(14deg) brightness(1.06) drop-shadow(0 10px 16px rgba(0,0,0,.3));}
.nleaf.l7{right:-3%;bottom:-7%;top:auto;width:23vw;max-width:350px;transform-origin:80% 100%;animation:sway7 3.6s ease-in-out infinite;filter:hue-rotate(-12deg) brightness(1.0) drop-shadow(0 10px 16px rgba(0,0,0,.3));}
.nleaf.l8{right:12%;bottom:-9%;top:auto;width:13vw;max-width:200px;transform-origin:60% 100%;animation:sway8 2.9s ease-in-out infinite;filter:hue-rotate(8deg) brightness(1.1) drop-shadow(0 10px 16px rgba(0,0,0,.3));}
@keyframes sway1{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.6deg)}}
@keyframes sway2{0%,100%{transform:scaleX(-1) rotate(-2.6deg)}50%{transform:scaleX(-1) rotate(2deg)}}
@keyframes sway3{0%,100%{transform:rotate(1.6deg) translateY(0)}50%{transform:rotate(-3.4deg) translateY(1.6%)}}
@keyframes sway4{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(1.6deg)}}
@keyframes sway5{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-5.5deg)}}
@keyframes sway6{0%,100%{transform:rotate(-6deg) translateX(0)}50%{transform:rotate(7deg) translateX(1.4%)}}
@keyframes sway7{0%,100%{transform:scaleX(-1) rotate(-4deg)}50%{transform:scaleX(-1) rotate(5deg)}}
@keyframes sway8{0%,100%{transform:scaleX(-1) rotate(5deg) translateX(0)}50%{transform:scaleX(-1) rotate(-6deg) translateX(-1.2%)}}
#pcDolly,#lpDolly{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);will-change:transform;z-index:2;}
#pcImg{display:block;width:min(66vw,640px);height:auto;
  filter:drop-shadow(0 0 24px rgba(74,208,200,.42)) drop-shadow(0 16px 10px rgba(0,12,16,.6)) drop-shadow(0 46px 78px rgba(0,0,0,.5));}
#lpImg{display:block;width:min(76vw,840px);height:auto;
  filter:drop-shadow(0 0 26px rgba(74,208,200,.42)) drop-shadow(0 18px 12px rgba(0,12,16,.6)) drop-shadow(0 50px 84px rgba(0,0,0,.5));}
#pcScreen{position:absolute;left:28%;top:27.5%;width:35%;height:30%;overflow:hidden;border-radius:12px;background:transparent;
  transform:perspective(1000px) rotateX(1.5deg) rotateY(-3deg) rotateZ(1.4deg);transform-origin:center;animation:pcHue 9s ease-in-out infinite;}
@keyframes pcHue{0%,100%{filter:hue-rotate(-9deg) saturate(1.12) contrast(1.05) brightness(1.02)}50%{filter:hue-rotate(13deg) saturate(1.26) contrast(1.08) brightness(1.05)}}
#pcCanvas{width:100%;height:100%;display:block;}
#lpScreen{position:absolute;left:25%;top:22%;width:55%;height:43%;overflow:hidden;background:#04070e;border-radius:4px;}
#pcDive,#lpDive{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;pointer-events:none;z-index:3;
  background:radial-gradient(circle at 50% 48%,rgba(150,240,255,.95),rgba(0,150,255,.4) 35%,transparent 68%);}
/* live scrolling site inside laptop */
.lp-bar{position:absolute;top:0;left:0;right:0;height:9%;z-index:3;display:flex;align-items:center;gap:.5vw;padding:0 2%;
  background:linear-gradient(180deg,#1a2233,#0e1522);border-bottom:1px solid rgba(255,255,255,.08);}
.lpd{width:.7vw;height:.7vw;border-radius:50%;}.lpd.r{background:#ff5f57}.lpd.y{background:#febc2e}.lpd.g{background:#28c840}
.lp-url{margin-left:1vw;flex:1;text-align:center;color:#8fb6d8;font-size:.85vw;letter-spacing:.1em;
  background:rgba(255,255,255,.06);border-radius:4px;padding:.15em 0;}
.lp-view{position:absolute;top:9%;left:0;right:0;bottom:0;overflow:hidden;background:#f5f5f7;}
.lp-scroll{position:absolute;left:0;right:0;top:0;animation:lpScrollLoop 12s linear infinite;color:#1d1d1f;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Poppins',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
@keyframes lpScrollLoop{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
.lp-page{padding:0 0 5%;}
.lp-nav{display:flex;justify-content:space-between;align-items:center;padding:1.2% 5%;font-size:.56vw;background:rgba(255,255,255,.92);}
.lp-nav b{font-weight:700;letter-spacing:.01em;}
.lp-nav em{font-style:normal;color:#6e6e73;font-size:.82em;letter-spacing:.02em;}
.lp-hero{padding:5% 6% 3%;text-align:center;background:linear-gradient(180deg,#fbfbfd,#eef1f6);}
.lp-eyebrow{color:#0071e3;font-weight:600;font-size:.95vw;letter-spacing:.03em;}
.lp-h1{margin:.6% 0 0;font-weight:700;font-size:3.4vw;letter-spacing:-.03em;line-height:1.02;color:#1d1d1f;}
.lp-lead{margin:1.4% auto 0;max-width:82%;color:#6e6e73;font-size:1.12vw;line-height:1.35;}
.lp-links{margin-top:2.2%;display:flex;gap:1.8vw;justify-content:center;}
.lk{color:#0071e3;font-size:1vw;font-weight:500;}.lk.o{color:#6e6e73;}
.lp-shot{margin:2% 5% 0;height:5.6vw;border-radius:.7vw;position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 6%,rgba(120,190,255,.5),rgba(10,20,45,0) 55%),radial-gradient(80% 60% at 72% 100%,rgba(255,120,60,.32),rgba(10,20,45,0) 60%),linear-gradient(160deg,#0b1230,#132a54 55%,#0a1024);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1.2vw 3vw rgba(10,20,45,.22);}
.lp-shot.hero::after{content:"";position:absolute;left:20%;right:20%;top:26%;bottom:22%;border-radius:.7vw;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03));box-shadow:inset 0 0 2.6vw rgba(120,190,255,.4),0 0 1.8vw rgba(120,190,255,.28);}
.lp-duo{margin-top:2.2%;display:flex;gap:1.4%;padding:0 6%;}
.lp-card{flex:1;height:5vw;border-radius:.6vw;position:relative;overflow:hidden;box-shadow:0 .8vw 2vw rgba(10,20,45,.1);}
.lp-card .cc{position:absolute;left:8%;right:8%;top:10%;text-align:center;}
.lp-card b{display:block;font-weight:700;font-size:.72vw;letter-spacing:-.01em;}
.lp-card em{display:block;font-style:normal;font-size:.92vw;margin-top:.3vw;}
.lp-card .lk{display:inline-block;margin-top:.7vw;font-size:.92vw;}
.lp-card.dark{background:radial-gradient(90% 70% at 50% 120%,rgba(90,170,255,.4),rgba(10,16,36,0) 60%),linear-gradient(165deg,#0a1024,#16305e);color:#fff;}
.lp-card.dark em{color:#a9c6ef;}.lp-card.dark .lk.w{color:#7fb2ff;}
.lp-card.light{background:linear-gradient(165deg,#f4f6fb,#e4eaf4);color:#1d1d1f;}
.lp-card.light em{color:#6e6e73;}
.lp-feat{margin-top:2.6%;display:flex;justify-content:center;gap:2.4vw;padding:0 6%;}
.lf{display:flex;flex-direction:column;align-items:center;gap:.55vw;}
.lf b{font-weight:600;font-size:.82vw;color:#1d1d1f;letter-spacing:.01em;}
.fi{width:2vw;height:2vw;border-radius:.55vw;position:relative;box-shadow:0 .3vw .8vw rgba(0,0,0,.12);}
.fi::after{content:"";position:absolute;inset:26%;border-radius:.22vw;background:rgba(255,255,255,.9);}
.fi.a{background:linear-gradient(135deg,#0A84FF,#5ea8ff);}
.fi.b{background:linear-gradient(135deg,#ff7a45,#ffb057);}
.fi.c{background:linear-gradient(135deg,#34c759,#7ae08a);}
.fi.d{background:linear-gradient(135deg,#af52de,#c98cf0);}
.fi.e{background:linear-gradient(135deg,#00c7d4,#59d8e6);}
.lp-foot{margin-top:3.6%;text-align:center;color:#a1a1a6;font-size:.8vw;letter-spacing:.02em;}

/* ============ OUTRO (white, apple) ============ */
#ch-map{z-index:10;background:#02060f;}
#ch-energy{z-index:11;background:#01040c;}
#mapFX,#energyFX{position:absolute;inset:0;width:100%;height:100%;}
#ch-energy::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(1,5,14,.88),rgba(1,5,14,.82) 45%,rgba(1,5,14,.92));}
#energyFX{z-index:1;}
.en-bgvid{position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:100%;min-height:100%;transform:translate(-50%,-50%);object-fit:cover;z-index:0;opacity:.3;filter:brightness(.28) saturate(1.25) contrast(1.15);}
#mapLabel,#energyLabel{position:absolute;left:8%;bottom:12%;z-index:2;pointer-events:none;}
#mapLabel span,#energyLabel span{display:block;font-size:12px;letter-spacing:.42em;color:#5aa8e0;margin-bottom:10px;}
#mapLabel b,#energyLabel b{font-weight:200;font-size:clamp(30px,5.4vw,74px);letter-spacing:.14em;color:#eaf7ff;text-shadow:0 0 30px rgba(40,150,255,.6);}
#ch-outro{z-index:12;background:#04070f;color:#e6edf7;overflow:auto;}
.out-wrap{position:relative;min-height:100%;max-width:1560px;margin:0 auto;padding:9vh 5vw 6vh;display:flex;flex-direction:column;justify-content:center;}
.out-eyebrow{letter-spacing:.42em;font-size:clamp(16px,1.6vw,20px);color:#8a8f98;font-weight:600;}
.out-h{margin-top:14px;font-weight:200;font-size:clamp(64px,12vw,200px);letter-spacing:-.02em;line-height:.92;color:#eef4fd;}
.out-h .grad{background:linear-gradient(90deg,#0a2e6e,#1e5fc8,#0a3d8f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  background-size:300% 100%;animation:gslide 7s ease-in-out infinite;font-weight:300;}
@keyframes gslide{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.g{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-size:220% 100%;animation:gslide 6s ease-in-out infinite;}
.g1{background-image:linear-gradient(90deg,#0a2e6e,#1e5fc8);}
.g2{background-image:linear-gradient(90deg,#0a2e6e,#1e5fc8);}
.g3{background-image:linear-gradient(90deg,#0a2e6e,#1e5fc8);}
.g4{background-image:linear-gradient(90deg,#0a2e6e,#1e5fc8);}
.g5{background-image:linear-gradient(90deg,#0a2e6e,#1e5fc8);}
.g6{background-image:linear-gradient(90deg,#0a2e6e,#1e5fc8);}
.out-grid{margin-top:6vh;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.oc{background:rgba(15,24,42,.66);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:30px 26px;transition:transform .3s,box-shadow .3s;}
.oc:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,132,255,.12);}
.ocn{font-size:18px;letter-spacing:.2em;font-weight:800;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:gslide 6s ease-in-out infinite;}
.oc h4{margin-top:14px;font-weight:600;font-size:clamp(26px,2.6vw,44px);letter-spacing:-.01em;color:#eef4fd;line-height:1.12;}
.oc p{margin-top:12px;font-size:clamp(16px,1.4vw,21px);color:#aeb9c9;letter-spacing:.01em;}
.ocd{display:block;margin-top:14px;font-style:normal;font-size:clamp(14px,1.1vw,17px);line-height:1.5;color:#96a3b5;letter-spacing:.005em;}
.out-word{margin:8vh 0 3vh;text-align:center;font-family:"Didot","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;
  font-weight:600;font-style:italic;font-size:clamp(56px,11vw,170px);letter-spacing:.01em;line-height:1.1;white-space:nowrap;
  background:linear-gradient(100deg,#3a80e6,#5db6ff,#9fe4ff,#4a9bf0);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:gslide 7s ease-in-out infinite, outWordGlow 4s ease-in-out infinite;}
@keyframes outWordGlow{0%,100%{filter:drop-shadow(0 0 26px rgba(74,168,255,.4));}50%{filter:drop-shadow(0 0 54px rgba(93,182,255,.65)) drop-shadow(0 0 96px rgba(0,230,255,.28));}}
.out-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:38px 34px;margin-top:2vh;background:rgba(6,11,20,.72);backdrop-filter:blur(12px);}
.of-col h5{position:relative;font-size:15px;letter-spacing:.28em;color:#8a8f98;font-weight:700;margin-bottom:16px;padding-left:20px;}
.of-col h5.anim::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;
  background:linear-gradient(90deg,#0A84FF,#00e6ff);box-shadow:0 0 10px rgba(10,132,255,.7);animation:pulse 1.8s ease-in-out infinite;}
.of-col a,.of-col span{position:relative;display:block;font-size:19px;color:#c9d4e2;text-decoration:none;letter-spacing:.01em;line-height:1.85;width:fit-content;}
.of-col a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:2px;background:linear-gradient(90deg,#0A84FF,#00e6ff);transition:width .3s;}
.of-col a:hover{color:#0A84FF;}
.of-col a:hover::after{width:100%;}
.of-col a.ph{font-weight:700;font-size:22px;background:linear-gradient(90deg,#0A84FF,#00e6ff,#0A84FF);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gslide 4s linear infinite;padding-left:26px;}
.of-col a.ph .ring{position:absolute;left:2px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;border:2px solid #0A84FF;animation:ringPulse 1.8s ease-out infinite;}
@keyframes ringPulse{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.7);opacity:0}}
.out-guar{margin-top:34px;text-align:center;font-size:clamp(15px,1.5vw,19px);letter-spacing:.22em;color:#7b828c;}
.out-guar b{color:#0A84FF;}
.out-websites{margin-top:10vh;text-align:center;}
.ow-head{font-weight:200;font-size:clamp(40px,7vw,110px);letter-spacing:-.02em;line-height:.95;color:#0b0b0f;margin-bottom:4vh;}
.ow-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 26px;max-width:1000px;margin:0 auto;}
.ow-grid a{font-weight:800;font-size:clamp(20px,2.6vw,40px);letter-spacing:-.01em;text-decoration:none;line-height:1.1;
  background:linear-gradient(90deg,#0A84FF,#00e6ff,#8b5cf6);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:gslide 7s ease-in-out infinite;transition:transform .25s;}
.ow-grid a:nth-child(3n){background-image:linear-gradient(90deg,#fb923c,#ff3b3b);}
.ow-grid a:nth-child(3n+1){background-image:linear-gradient(90deg,#a3e635,#22c55e);}
.ow-grid a:hover{transform:translateY(-3px) scale(1.04);}
.out-stats{margin-top:11vh;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.out-stats .stat b{display:block;font-weight:800;font-size:clamp(40px,5.5vw,80px);letter-spacing:-.02em;line-height:1;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:gslide 6s ease-in-out infinite;}
.out-stats .stat span{display:block;margin-top:10px;font-size:clamp(13px,1.2vw,17px);letter-spacing:.14em;color:#86868b;text-transform:uppercase;}
.out-graphics{margin-top:11vh;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:24px;padding:clamp(28px,4vw,56px);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.06);}
.og-head{font-weight:300;font-size:clamp(30px,5vw,68px);letter-spacing:-.02em;color:#0b0b0f;}
.og-p{max-width:820px;margin:24px auto 0;font-size:clamp(16px,1.5vw,21px);line-height:1.6;color:#5b626c;}
.og-caps{margin:34px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:820px;}
.og-caps span{font-size:clamp(13px,1.2vw,16px);letter-spacing:.06em;color:#0b0b0f;background:#f2f3f7;border:1px solid rgba(0,0,0,.06);border-radius:999px;padding:.6em 1.2em;}
.og-tag{margin-top:30px;font-style:italic;font-family:"Didot","Bodoni MT","Playfair Display",Georgia,serif;font-size:clamp(20px,2.4vw,34px);
  background:linear-gradient(90deg,#0A84FF,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.out-mega{margin:11vh auto 0;text-align:center;font-weight:900;font-size:clamp(40px,11vw,150px);letter-spacing:.01em;line-height:.9;width:100%;white-space:nowrap;
  background:linear-gradient(90deg,#0a2e6e,#1e5fc8,#0a3d8f);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:gslide 6s linear infinite,megaGlow 3s ease-in-out infinite;}
@keyframes megaGlow{0%,100%{filter:drop-shadow(0 0 28px rgba(10,60,140,.4))}50%{filter:drop-shadow(0 0 72px rgba(30,95,200,.7))}}

/* ============ persistent chrome ============ */
#brand{position:fixed;left:26px;top:22px;font-weight:700;letter-spacing:.28em;font-size:14px;color:#eaf2ff;z-index:60;text-shadow:0 2px 12px rgba(0,0,0,.5);}
#topnav{position:fixed;right:26px;top:20px;z-index:60;}
.tn.big{font-weight:600;letter-spacing:.3em;font-size:13px;color:#eaf2ff;cursor:pointer;padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(10,18,30,.35);backdrop-filter:blur(8px);}
.tn.big:hover{border-color:var(--cyan);color:var(--cyan);}
#dock{position:fixed;left:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:60;}
.db{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(10,17,30,.97);border:1px solid rgba(255,255,255,.14);color:#cfe0f4;cursor:pointer;box-shadow:0 4px 14px rgba(0,6,16,.4);transition:.25s;}
.db:hover{border-color:var(--cyan);color:var(--cyan);transform:translateX(3px);}
.db svg{width:20px;height:20px;}
.db.on{color:var(--cyan);border-color:rgba(0,230,255,.5);}
#aiBot{position:fixed;right:22px;bottom:22px;width:148px;height:148px;border-radius:50%;border:none;cursor:pointer;z-index:61;
  background:transparent;box-shadow:none;
  animation:botFloat 4s ease-in-out infinite;padding:0;overflow:visible;}
#aiBot img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 18px rgba(120,220,255,.7));animation:botSpin 2.4s linear infinite;transform-style:preserve-3d;}
@keyframes botFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes botSpin{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}
#progress{position:fixed;left:0;bottom:0;width:100%;height:3px;background:rgba(255,255,255,.08);z-index:60;}
#pfill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--acc));box-shadow:0 0 12px var(--cyan);}
/* light-mode chrome when outro active */
.on-light #brand{color:#0b0b0f;text-shadow:none;}
.on-light .tn.big{color:#0b0b0f;border-color:rgba(0,0,0,.15);background:rgba(255,255,255,.6);}
.on-light .db{background:rgba(255,255,255,.7);border-color:rgba(0,0,0,.1);color:#333;}
.on-light #progress{background:rgba(0,0,0,.08);}

/* ============ chat ============ */
#chat{position:fixed;right:22px;bottom:108px;width:min(92vw,360px);max-height:70vh;display:flex;flex-direction:column;
  background:rgba(9,16,28,.92);border:1px solid rgba(255,255,255,.12);border-radius:18px;backdrop-filter:blur(16px);
  z-index:70;opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transition:.3s;overflow:hidden;}
#chat.open{opacity:1;transform:none;pointer-events:auto;}
.ch-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1);}
.ch-head img{width:34px;height:34px;object-fit:contain;}
.ch-head b{font-size:14px;}.ch-head span{display:block;font-size:11px;color:#6fd6ea;}
#chClose{margin-left:auto;background:none;border:none;color:#9fb4d6;font-size:22px;cursor:pointer;}
#chBody{padding:14px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;}
.msg{max-width:82%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;}
.msg.bot{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);}
.msg.me{align-self:flex-end;background:linear-gradient(135deg,var(--acc),#ff6a3c);color:#fff;}
.ch-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 10px;}
.chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#cfe0f4;border-radius:20px;padding:6px 12px;font-size:12px;cursor:pointer;}
.chip:hover{border-color:var(--cyan);color:var(--cyan);}
.ch-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.1);}
.ch-input input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 12px;color:#eaf2ff;font-size:13.5px;outline:none;}
.ch-input button{background:var(--acc);border:none;color:#fff;border-radius:12px;padding:0 16px;font-size:16px;cursor:pointer;}

/* ============ menu ============ */
#menu{position:fixed;inset:0;background:rgba(3,7,14,.94);backdrop-filter:blur(18px);z-index:90;
  opacity:0;pointer-events:none;transition:.4s;display:flex;flex-direction:column;justify-content:center;padding:0 8vw;}
#menu.open{opacity:1;pointer-events:auto;}
#menuClose{position:absolute;right:5vw;top:4vh;background:none;border:none;color:#9fb4d6;font-size:36px;cursor:pointer;}
.m-head{letter-spacing:.4em;font-size:12px;color:var(--cyan);}
.m-title{font-weight:200;font-size:clamp(30px,6vw,72px);line-height:1;margin:14px 0 4vh;letter-spacing:.02em;}
.m-list{display:flex;flex-direction:column;gap:2px;max-width:760px;}
.m-row{display:flex;align-items:center;gap:22px;padding:14px 8px;border-top:1px solid rgba(255,255,255,.1);font-weight:200;
  font-size:clamp(18px,3vw,34px);letter-spacing:.14em;color:#cfe0f4;cursor:pointer;transition:.25s;}
.m-row span{font-size:13px;letter-spacing:.1em;color:#5f7ea0;width:34px;}
.m-row:hover{color:#fff;padding-left:22px;background:linear-gradient(90deg,rgba(0,230,255,.08),transparent);}

/* ============ enter + loader ============ */
#enter{position:fixed;inset:0;z-index:120;background:radial-gradient(circle at 50% 40%,#0a1424,#04060b 75%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .8s,visibility .8s;}
#enter.gone{opacity:0;visibility:hidden;pointer-events:none;}
.e-brand{font-weight:200;font-size:clamp(38px,8vw,110px);letter-spacing:.22em;color:#eaf7ff;text-shadow:0 0 40px rgba(0,200,255,.4);}
.e-sub{letter-spacing:.5em;font-size:12px;color:#7fa8c8;}
#enterBtn{margin-top:14px;background:var(--acc);border:none;color:#fff;font-weight:600;letter-spacing:.24em;font-size:14px;
  padding:16px 34px;border-radius:12px;cursor:pointer;box-shadow:0 12px 34px rgba(254,60,0,.45);transition:.25s;}
#enterBtn:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(254,60,0,.6);}
#loaderHintOld{position:fixed;left:50%;bottom:8vh;transform:translateX(-50%);z-index:110;text-align:center;}
#loader.gone{opacity:0;pointer-events:none;}
.lbar{width:220px;height:3px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden;}
#lfill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--acc));transition:width .3s;}
.ltx{margin-top:10px;font-size:11px;letter-spacing:.4em;color:#7fa8c8;}

@media(max-width:720px){
  .out-grid{grid-template-columns:1fr;} .out-foot{grid-template-columns:1fr;}
  .out-stats{grid-template-columns:repeat(2,1fr);gap:28px 16px;}
  .ow-grid{gap:12px 18px;}
  #dock{left:10px;gap:9px;} .db{width:38px;height:38px;}
  #gAlien{width:34vw;left:6%;} #gDrone{width:44vw;right:2%;}
  #rig{height:16vh;} #robotShadow{width:13vh;}
}

/* ================================================================= */
/*  MX · OUTRO BACKGROUND VIDEO — journey.mp4 continuous loop         */
/*  Additive only. White footer theme + dark text preserved.         */
/*  Pinned via #ch-outro's fixed-containing-block (chapter            */
/*  will-change:transform); auto-hides with the chapter's opacity.   */
/*  filter is only ever on the <video> element (never a container).  */
/* ================================================================= */
.out-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:#03060e;}
.out-bgvid{position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:100%;min-height:100%;
  transform:translate(-50%,-50%) scale(1.04);object-fit:cover;opacity:.34;
  filter:brightness(.3) saturate(1.1) contrast(1.1);}
.out-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,7,16,.92),rgba(3,7,16,.9) 42%,rgba(3,7,16,.95));}

/* ================================================================= */
/*  MX · WATERFALL REALISM + LEAF DESYNC                             */
/*  Additive overrides (equal specificity, later-wins). Nothing      */
/*  above is deleted.                                                */
/* ================================================================= */
/* slightly more dramatic, realistic waterfall photo grade */
.nature::before{filter:saturate(1.12) contrast(1.06) brightness(1.03);}
/* every leaf moves differently — varied speed + phase so none are identical */
.nleaf.l1{animation-duration:4.7s;animation-delay:-1.9s;}
.nleaf.l2{animation-duration:6.3s;animation-delay:-3.1s;}
.nleaf.l3{animation-duration:3.3s;animation-delay:-0.6s;}
.nleaf.l4{animation-duration:7.9s;animation-delay:-4.6s;}
.nleaf.l5{animation-duration:2.6s;animation-delay:-1.2s;}
.nleaf.l6{animation-duration:5.7s;animation-delay:-2.4s;}
.nleaf.l7{animation-duration:3.9s;animation-delay:-0.3s;}
.nleaf.l8{animation-duration:6.9s;animation-delay:-5.2s;}

/* ================================================================= */
/*  MX · ENERGY GLOBE (reference photo) + WATER REALISM + LEAF SWAY   */
/*  Additive/override only — updates the three sections GT flagged.   */
/* ================================================================= */

/* --- pre-footer GLOBE is a live crystal world drawn on #energyFX (no image) --- */

/* --- waterfall: HEAVY realistic PHOTO backdrop; canvas adds live flowing motion on #waterFX --- */
.waterFX{opacity:.72;}
.nfall{opacity:.2;}

/* --- leaves: distinctly different sway AMOUNTS (some heavy, some barely) + speeds + phases; none identical --- */
@keyframes nsw1{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(9deg)}}
@keyframes nsw2{0%,100%{transform:scaleX(-1) rotate(-1.2deg)}50%{transform:scaleX(-1) rotate(1deg)}}
@keyframes nsw3{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(-4deg) translateY(1.4%)}}
@keyframes nsw4{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(8deg)}}
@keyframes nsw5{0%,100%{transform:rotate(1deg)}50%{transform:rotate(-1.6deg)}}
@keyframes nsw6{0%,100%{transform:rotate(-10deg) translateX(0)}50%{transform:rotate(11deg) translateX(1.8%)}}
@keyframes nsw7{0%,100%{transform:scaleX(-1) rotate(-3deg)}50%{transform:scaleX(-1) rotate(4deg)}}
@keyframes nsw8{0%,100%{transform:scaleX(-1) rotate(1.6deg)}50%{transform:scaleX(-1) rotate(-1.1deg)}}
.nleaf.l1{animation-name:nsw1;animation-duration:5.3s;animation-delay:-1.1s;}
.nleaf.l2{animation-name:nsw2;animation-duration:3.7s;animation-delay:-2.4s;}
.nleaf.l3{animation-name:nsw3;animation-duration:6.8s;animation-delay:-0.7s;}
.nleaf.l4{animation-name:nsw4;animation-duration:4.4s;animation-delay:-3.3s;}
.nleaf.l5{animation-name:nsw5;animation-duration:7.9s;animation-delay:-1.9s;}
.nleaf.l6{animation-name:nsw6;animation-duration:3.1s;animation-delay:-0.4s;}
.nleaf.l7{animation-name:nsw7;animation-duration:5.9s;animation-delay:-4.1s;}
.nleaf.l8{animation-name:nsw8;animation-duration:8.7s;animation-delay:-2.7s;}

/* ============ LOADING SCREEN (thin Poppins, exact white) ============ */
#loader{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;transform:none;z-index:2147483000;overflow:hidden;transition:opacity .55s ease;
  background:linear-gradient(135deg,#040a1a 0%,#071a38 30%,#0a2350 50%,#071a38 70%,#03060f 100%);
  background-size:300% 300%;animation:ldAurora 9s ease-in-out infinite;}
/* dynamic drifting light blooms (not a flat block) */
#loader::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38% 34% at 30% 28%,rgba(0,180,255,.28),transparent 70%),
    radial-gradient(42% 36% at 72% 30%,rgba(90,120,255,.22),transparent 72%),
    radial-gradient(50% 40% at 50% 82%,rgba(255,150,60,.12),transparent 74%);
  animation:ldBlooms 11s ease-in-out infinite;mix-blend-mode:screen;}
/* fine moving particle field */
#loader::after{content:"";position:absolute;inset:-20%;pointer-events:none;opacity:.5;mix-blend-mode:screen;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%,rgba(150,220,255,.9),transparent),radial-gradient(1.5px 1.5px at 70% 60%,rgba(120,190,255,.8),transparent),radial-gradient(1px 1px at 45% 80%,rgba(255,200,140,.7),transparent),radial-gradient(1.5px 1.5px at 85% 25%,rgba(160,225,255,.8),transparent),radial-gradient(1px 1px at 33% 55%,rgba(200,235,255,.7),transparent);
  background-size:100% 100%;animation:ldStars 16s linear infinite;}
@keyframes ldAurora{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes ldBlooms{0%,100%{transform:translate(0,0) scale(1);opacity:.85}50%{transform:translate(2%,-2%) scale(1.08);opacity:1}}
@keyframes ldStars{from{transform:translateY(0)}to{transform:translateY(-8%)}}
@media (prefers-reduced-motion: reduce){#loader,#loader::before,#loader::after{animation:none!important;}}
.ld-bot{display:block;width:min(150px,32vw);height:auto;margin:0 auto 26px;position:relative;z-index:2;filter:drop-shadow(0 0 34px rgba(74,168,255,.5)) drop-shadow(0 18px 30px rgba(0,8,20,.6));animation:ldBotFloat 2.9s ease-in-out infinite;}
@keyframes ldBotFloat{
  0%{transform:translate(0,0) rotate(0deg) scale(1,1);}
  10%{transform:translate(-9px,3px) rotate(-9deg) scale(1.1,.88);}
  26%{transform:translate(7px,-46px) rotate(10deg) scale(.9,1.12);}
  40%{transform:translate(-7px,-28px) rotate(-15deg) scale(1,1);}
  54%{transform:translate(9px,-42px) rotate(372deg) scale(1,1);}
  68%{transform:translate(-5px,-8px) rotate(350deg) scale(1.06,.94);}
  82%{transform:translate(5px,3px) rotate(364deg) scale(1.11,.87);}
  92%{transform:translate(-3px,0) rotate(357deg) scale(.96,1.04);}
  100%{transform:translate(0,0) rotate(360deg) scale(1,1);}
}
#loader.gone{opacity:0;pointer-events:none;}
.ld-c{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:92%;max-width:1100px;text-align:center;font-family:"Poppins","SF Pro Display",sans-serif;color:#eaf2ff;z-index:2;}
.ld-t1{font-weight:200;font-size:clamp(32px,6.4vw,72px);letter-spacing:.2em;line-height:1.4;color:#f2f7ff;text-shadow:0 0 32px rgba(74,168,255,.45);}
.ld-t2{font-weight:200;font-size:clamp(20px,4vw,40px);letter-spacing:.28em;line-height:1.7;color:#9fc6ff;}
.ld-t3{font-weight:200;font-size:clamp(13px,2.2vw,24px);letter-spacing:.14em;line-height:1.6;margin-top:.5em;white-space:normal;color:#8ba3c9;}
.ld-bar{width:min(300px,58vw);height:2px;background:rgba(255,255,255,.1);margin:42px auto 0;border-radius:2px;overflow:hidden;}
#ldFill{display:block;height:100%;width:0%;background:linear-gradient(90deg,#4aa8ff,#00e6ff);box-shadow:0 0 14px rgba(74,168,255,.7);transition:width .28s ease;}
.ld-enter{margin-top:30px;font-family:"Poppins",sans-serif;font-weight:300;font-size:12px;letter-spacing:.42em;color:#eaf2ff;opacity:0;cursor:pointer;transition:opacity .6s,background .3s;border:1px solid rgba(120,180,255,.42);display:inline-block;padding:13px 40px;border-radius:40px;background:rgba(74,168,255,.08);}
.ld-enter:hover{background:rgba(74,168,255,.2);}
.ld-enter.show{opacity:1;}
.ld-enter:hover{background:#111;color:#fff;}
/* mascot glassy-robot blink + float */
#aiBot img{animation:botFloat 4s ease-in-out infinite, botBlink 5.5s ease-in-out infinite !important;}
@keyframes botFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes botBlink{0%,44%,50%,100%{filter:drop-shadow(0 0 16px rgba(90,180,255,.75)) brightness(1)}47%{filter:drop-shadow(0 0 26px rgba(120,210,255,1)) brightness(1.25)}}
/* AI-scene digital rain (neon 01 matrix) — behind the bots, over the white stage */
#aiRain{position:fixed;inset:0;width:100vw;height:100vh;z-index:13;pointer-events:none;opacity:0;}

/* ============ OUTRO FINALE — cycling website names (intro style) ============ */
.out-finale{position:relative;z-index:5;width:100vw;margin-left:calc(-50vw + 50%);height:340vh;}
.ofn-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;background:radial-gradient(120% 100% at 50% 40%,#0a1730 0%,#050b1c 60%,#03060f 100%);}
.ofn-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,rgba(4,10,26,.5) 0%,rgba(4,10,26,.32) 55%,rgba(4,10,26,.2) 100%);z-index:1;}
.ofn-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%) scale(.97);white-space:nowrap;z-index:3;
  font-family:"Poppins","SF Pro Display",sans-serif;font-weight:200;font-size:clamp(34px,6.5vw,92px);letter-spacing:.30em;
  color:#ffffff;opacity:0;text-shadow:0 0 46px rgba(90,180,255,.9),0 0 14px rgba(255,255,255,.7),0 2px 30px rgba(0,0,0,.5);
  transition:opacity .5s ease,transform .5s ease,letter-spacing .5s ease;}
.ofn-word.on{opacity:1;transform:translate(-50%,-50%) scale(1);letter-spacing:.16em;}
@keyframes ofnCycle{
  0%{opacity:0;transform:translate(-50%,-42%) scale(.97);letter-spacing:.30em;}
  1.8%{opacity:1;transform:translate(-50%,-50%) scale(1);letter-spacing:.14em;}
  5.4%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  6.6%{opacity:0;transform:translate(-50%,-58%) scale(1.02);letter-spacing:.08em;}
  100%{opacity:0;}
}

/* finale space background — drifting ships + alien (animated, glowing) */
.ofn-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;}
.ofn-ship{position:absolute;filter:drop-shadow(0 0 26px rgba(70,150,255,.55)) brightness(1.02);opacity:.9;will-change:transform;}
.ofn-ship.s1{width:min(42vw,640px);top:10%;left:-46vw;animation:shipDrift1 30s linear infinite;}
.ofn-ship.s2{width:min(28vw,420px);top:62%;left:-34vw;animation:shipDrift2 40s linear infinite;animation-delay:-8s;}
.ofn-ship.s3{width:min(30vw,450px);top:66%;right:-36vw;animation:shipDrift3 36s linear infinite;animation-delay:-14s;}
.ofn-ship.s4{width:min(44vw,660px);top:4%;right:-48vw;animation:shipDrift4 44s linear infinite;animation-delay:-22s;}
@keyframes shipDrift1{0%{transform:translateX(0) translateY(0)}100%{transform:translateX(150vw) translateY(-30px)}}
@keyframes shipDrift2{0%{transform:translateX(0)}100%{transform:translateX(150vw) translateY(24px)}}
@keyframes shipDrift3{0%{transform:translateX(0)}100%{transform:translateX(-150vw) translateY(-20px)}}
@keyframes shipDrift4{0%{transform:translateX(0)}100%{transform:translateX(-150vw) translateY(28px)}}
.ofn-alien{position:absolute;width:min(34vw,460px);bottom:0;left:4%;opacity:.9;filter:drop-shadow(0 0 40px rgba(90,180,255,.7)) brightness(1.1);animation:alienFloat 6s ease-in-out infinite;z-index:2;}
@keyframes alienFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}

/* intro G-images (shrink to dots + fade as you scroll) */
#introGs{position:absolute;inset:0;z-index:2;pointer-events:none;}
#introGs .ig1,#introGs .ig2{opacity:var(--igOpA,0);}
#introGs .ig5,#introGs .ig7{opacity:var(--igOpB,0);}
#introGs .ig3{opacity:calc(var(--igOpC,0) * 0.6);}
#introGs .ig{position:absolute;filter:drop-shadow(0 0 26px rgba(90,170,255,.45));transform-origin:center;will-change:transform,opacity;}
#introGs .ig1{width:min(38vw,650px);left:0%;bottom:-3%;top:auto;transform:scale(var(--igS,1));filter:drop-shadow(0 26px 32px rgba(0,8,18,.55)) drop-shadow(0 0 26px rgba(90,170,255,.4));}
#introGs .ig2{width:min(34vw,570px);right:0%;bottom:-3%;top:auto;transform:scale(var(--igS,1));filter:drop-shadow(0 26px 32px rgba(0,8,18,.55)) drop-shadow(0 0 26px rgba(90,170,255,.4));}
#introGs .ig3{width:min(24vw,360px);left:50%;top:46%;transform:translate(-50%,-50%) scale(calc(var(--igS,1) * 1.05));opacity:.5;}
#introGs .ig5{width:min(20vw,320px);left:4%;top:64%;transform:scale(var(--igS,1));}
#introGs .ig7{width:min(22vw,340px);right:4%;top:62%;transform:scale(var(--igS,1));}

/* ==================================================================
   V21 · GATEWAY ENHANCEMENT  (additive — overrides earlier rules)
   1) remove alien + drone elements  2) EXTREME breathing portal glow
   3) intense WHITE electric "लपलप" flicker on the baby robot
   ================================================================== */
#gAlien,#gDrone,.gx.gd2,.gx.gd3,.gx.ga2,.gx.ga3,.gx.ga4{display:none!important;}

/* portal — extreme continuous high-intensity breathing glow */
#gGate{animation:gateGlowX 3.1s ease-in-out infinite!important;}
@keyframes gateGlowX{
  0%,100%{ filter:brightness(1.28) saturate(1.32)
    drop-shadow(0 0 80px rgba(255,255,255,.92))
    drop-shadow(0 0 180px rgba(150,220,255,.72))
    drop-shadow(0 0 320px rgba(90,180,255,.5))
    drop-shadow(0 20px 60px rgba(0,0,0,.6)); }
  50%{ filter:brightness(1.62) saturate(1.5)
    drop-shadow(0 0 190px rgba(255,255,255,1))
    drop-shadow(0 0 370px rgba(195,236,255,.96))
    drop-shadow(0 0 580px rgba(120,200,255,.72))
    drop-shadow(0 20px 60px rgba(0,0,0,.6)); }
}
/* inner machine — hotter, faster pulse to match */
#gMachine{animation:machineGlowX 2.6s ease-in-out infinite, spinY 9s linear infinite!important;}
@keyframes machineGlowX{
  0%,100%{ filter:brightness(1.3) saturate(1.55)
    drop-shadow(0 0 40px rgba(90,180,255,1)) drop-shadow(0 0 110px rgba(60,140,255,.9)) drop-shadow(0 0 220px rgba(35,100,250,.6)); }
  50%{ filter:brightness(1.6) saturate(1.8)
    drop-shadow(0 0 90px rgba(150,210,255,1)) drop-shadow(0 0 210px rgba(90,170,255,1)) drop-shadow(0 0 380px rgba(50,120,255,.8)); }
}
/* portal core aura — much heavier bloom that breathes */
#gCore{
  background:radial-gradient(circle,rgba(200,235,255,.75) 0%,rgba(110,185,255,.5) 24%,rgba(50,140,255,.26) 46%,transparent 68%)!important;
  filter:blur(14px)!important;animation:corePulseX 3.1s ease-in-out infinite!important;}
@keyframes corePulseX{0%,100%{transform:scale(.7);opacity:.55}50%{transform:scale(1.5);opacity:1}}
/* an extra breathing halo ring behind the whole gateway */
#gStack::before{box-shadow:0 0 90px rgba(120,205,255,.5) inset,0 0 70px rgba(90,180,255,.45)!important;animation:spin 26s linear infinite, haloBreath 3.1s ease-in-out infinite!important;}
@keyframes haloBreath{0%,100%{border-color:rgba(120,205,255,.28);opacity:.7}50%{border-color:rgba(180,230,255,.7);opacity:1}}

/* baby robot — intense WHITE electric flicker (लपलप), keeps the walk bob */
#rigInner{animation:rigBob .66s ease-in-out infinite, botZap .82s steps(1,end) infinite!important;}
@keyframes botZap{
  0%  { filter:drop-shadow(0 14px 20px rgba(0,0,0,.45)) drop-shadow(0 0 34px rgba(255,255,255,.95)) drop-shadow(0 0 70px rgba(185,228,255,.82)) drop-shadow(0 0 120px rgba(120,200,255,.5)); }
  17% { filter:drop-shadow(0 14px 20px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(255,255,255,.35)) drop-shadow(0 0 26px rgba(255,205,70,.5)); }
  33% { filter:drop-shadow(0 14px 20px rgba(0,0,0,.45)) drop-shadow(0 0 52px rgba(255,255,255,1)) drop-shadow(0 0 104px rgba(205,238,255,.95)) drop-shadow(0 0 170px rgba(135,205,255,.6)); }
  50% { filter:drop-shadow(0 14px 20px rgba(0,0,0,.45)) drop-shadow(0 0 6px rgba(255,255,255,.3)) drop-shadow(0 0 22px rgba(255,190,55,.45)); }
  67% { filter:drop-shadow(0 14px 20px rgba(0,0,0,.45)) drop-shadow(0 0 66px rgba(255,255,255,1)) drop-shadow(0 0 132px rgba(212,240,255,.98)) drop-shadow(0 0 210px rgba(150,210,255,.62)); }
  83% { filter:drop-shadow(0 14px 20px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(255,255,255,.5)) drop-shadow(0 0 30px rgba(255,208,66,.5)); }
  100%{ filter:drop-shadow(0 14px 20px rgba(0,0,0,.45)) drop-shadow(0 0 34px rgba(255,255,255,.95)) drop-shadow(0 0 68px rgba(190,230,255,.8)); }
}

/* ==================================================================
   V21 · 3D GLOBE  (pre-footer map section)
   ================================================================== */
#globeWrap{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
  width:min(74vh,74vw);height:min(74vh,74vw);z-index:1;pointer-events:auto;}
#globeGL{width:100%;height:100%;display:block;filter:drop-shadow(0 0 60px rgba(40,140,255,.35));}
#globeCtl{position:absolute;right:2%;bottom:6%;display:flex;flex-direction:column;gap:9px;z-index:3;}
#globeCtl button{width:40px;height:40px;border-radius:12px;border:1px solid rgba(120,200,255,.28);
  background:rgba(10,26,52,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#cfe9ff;font-size:16px;font-weight:300;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s ease;letter-spacing:0;}
#globeCtl button:hover{background:rgba(30,110,255,.35);border-color:rgba(150,220,255,.6);box-shadow:0 0 22px rgba(50,150,255,.5);transform:translateY(-1px);}
#globeCtl button:active{transform:scale(.94);}
#globeHint{position:absolute;left:50%;top:-5%;bottom:auto;transform:translateX(-50%);white-space:nowrap;
  font-size:10px;letter-spacing:.34em;color:#5aa8e0;opacity:.66;pointer-events:none;}
@media(max-width:820px){ #globeWrap{width:88vw;height:88vw;top:46%;} #globeCtl button{width:36px;height:36px;} }

/* globe section: dim the existing 2D map to a faint backdrop so the 3D globe is the hero */
#ch-map #mapFX{opacity:.20;}

/* ==================================================================
   V21 · 3D WEBSITE CARD DECK  (scroll-driven perspective stack,
   floats over the journey.mp4 backdrop — video itself untouched)
   ================================================================== */
.ws3d{position:relative;width:100vw;margin-left:calc(-50vw + 50%);height:540vh;z-index:6;}
.ws3d-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;}
.ws3d-sticky::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 92% at 50% 44%,rgba(3,8,20,.42) 0%,rgba(3,8,20,.7) 60%,rgba(2,5,14,.9) 100%);}
.ws3d-head{position:relative;z-index:2;margin-top:9vh;font-weight:200;letter-spacing:-.02em;line-height:.95;
  font-size:clamp(40px,7vw,104px);color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.5);text-align:center;}
.ws3d-head .grad{background:linear-gradient(90deg,#5aa8ff,#00e6ff,#3a7dff);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;}
.ws3d-sub{position:relative;z-index:2;margin-top:12px;font-size:clamp(12px,1.4vw,16px);letter-spacing:.32em;
  text-transform:uppercase;color:#8fbfe8;opacity:.85;}
.ws3d-stage{position:relative;z-index:1;flex:1;width:100%;perspective:1700px;perspective-origin:50% 46%;}
.ws3d-deck{position:absolute;left:50%;top:48%;width:0;height:0;transform-style:preserve-3d;}
.ws3d-card{position:absolute;left:50%;top:50%;width:min(560px,86vw);text-decoration:none;color:inherit;
  transform:translate(-50%,-50%);transform-style:preserve-3d;backface-visibility:hidden;
  border-radius:22px;overflow:hidden;will-change:transform,opacity;
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(244,249,255,.8));
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px rgba(120,190,255,.12),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .55s cubic-bezier(.22,.61,.24,1),opacity .55s ease,box-shadow .35s ease;}
.ws3d-card::after{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:var(--wc,linear-gradient(90deg,#0A84FF,#00e6ff));}
.wsc-top{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid rgba(0,0,0,.06);background:rgba(255,255,255,.5);}
.wsc-dot{width:11px;height:11px;border-radius:50%;display:inline-block;}
.wsc-dot.r{background:#ff5f57;}.wsc-dot.y{background:#febc2e;}.wsc-dot.g{background:#28c840;}
.wsc-url{margin-left:12px;font-size:13px;letter-spacing:.02em;color:#5b626c;font-weight:600;
  background:rgba(0,0,0,.05);padding:5px 14px;border-radius:20px;}
.wsc-body{position:relative;padding:30px 30px 30px;}
.wsc-n{position:absolute;right:26px;top:20px;font-weight:800;font-size:clamp(40px,5vw,66px);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(10,60,140,.16);opacity:.9;}
.wsc-body h3{font-weight:800;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.02em;line-height:1.05;color:#0b1830;}
.wsc-body p{margin-top:10px;font-size:clamp(14px,1.5vw,18px);color:#5b6270;letter-spacing:.01em;line-height:1.4;max-width:78%;}
.wsc-cta{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:700;font-size:15px;letter-spacing:.02em;
  color:#0A84FF;padding:10px 20px;border-radius:30px;border:1px solid rgba(10,132,255,.28);background:rgba(10,132,255,.06);
  text-decoration:none;transition:all .25s ease;}
.ws3d-card:hover{box-shadow:0 50px 110px rgba(0,0,0,.6),0 0 60px rgba(40,140,255,.4),inset 0 1px 0 rgba(255,255,255,.8);}
.wsc-cta:hover{background:#0A84FF;color:#fff;box-shadow:0 8px 26px rgba(10,132,255,.5);}
.ws3d-prog{position:relative;z-index:2;width:min(560px,80vw);height:3px;margin-bottom:5vh;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden;}
#ws3dBar{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#5aa8ff,#00e6ff);box-shadow:0 0 14px rgba(0,200,255,.7);}
@media(max-width:820px){ .ws3d{height:300vh;} .wsc-body p{max-width:100%;} }

/* ==================================================================
   V21 · FOOTER / OUTRO POLISH  (additive; light Apple-white WOW)
   ================================================================== */
/* service cards — gradient reveal accent + deeper lift */
.oc{position:relative;overflow:hidden;background:linear-gradient(165deg,#ffffff,#f6f9ff)!important;
  border:1px solid rgba(10,60,140,.09)!important;box-shadow:0 10px 30px rgba(20,60,120,.05);}
.oc::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#0A84FF,#00e6ff);transition:transform .45s cubic-bezier(.22,.61,.24,1);}
.oc:hover::before{transform:scaleX(1);}
.oc:hover{transform:translateY(-8px)!important;box-shadow:0 30px 70px rgba(10,110,255,.16)!important;border-color:rgba(10,132,255,.28)!important;}
/* footer block — premium frosted slab */
.out-foot{position:relative;margin-top:2vh;padding:44px clamp(24px,4vw,54px)!important;border-radius:26px;
  background:linear-gradient(165deg,rgba(11,19,34,.85),rgba(6,12,24,.82));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 30px 80px rgba(0,10,30,.4),inset 0 1px 0 rgba(255,255,255,.08);}
.of-col a{transition:color .25s ease,transform .25s ease;}
.of-col a:hover{transform:translateX(4px);}
/* stat blocks — subtle hover pop */
.out-stats .stat{transition:transform .3s ease;}
.out-stats .stat:hover{transform:translateY(-6px) scale(1.03);}
/* graphics chips — hover lift + accent */
.out-graphics span:not(.grad){transition:all .25s ease;}
.out-graphics span:not(.grad):hover{border-color:rgba(10,132,255,.4)!important;color:#0A84FF!important;transform:translateY(-2px);box-shadow:0 8px 22px rgba(10,132,255,.14);}

/* ===== declutter per brief: remove gateway alien/drone visuals + 2 bottom leaves ===== */
#gAlien,#gDrone,.gx.gd2,.gx.gd3,.gx.ga2,.gx.ga3,.gx.ga4{display:none!important;}
.nleaf.l6,.nleaf.l8{display:none!important;}

/* ===== brief removals: 2 intro drones + 2 bottom stones ===== */
.ig.ig5,.ig.ig7{display:none!important;}
#sStone2,#sStone6{display:none!important;}

/* ===== SERVICES JOURNEY — premium floating service text at various positions through the scroll ===== */
#svcJourney{position:fixed;inset:0;pointer-events:none;z-index:16;overflow:hidden;font-family:"Poppins","SF Pro Display",sans-serif;}
.svcItem{position:absolute;opacity:0;transform:translateY(18px) scale(.96);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1);white-space:nowrap;letter-spacing:.01em;line-height:1;text-shadow:0 6px 30px rgba(0,10,30,.5);}
.svcItem.on{opacity:1;transform:translateY(0) scale(1);}
.svcItem .a{font-weight:200;color:#eaf2ff;}
.svcItem .b{font-weight:800;background:linear-gradient(100deg,#4aa8ff,#00e6ff,#8fd4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.svcTag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity 1s ease;white-space:nowrap;font-weight:200;letter-spacing:.02em;
  background:linear-gradient(100deg,#dfefff,#5db6ff 55%,#dfefff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:0 0 60px rgba(74,168,255,.3);}
.svcTag.on{opacity:.92;}

/* ===== visible BUILD marker — confirms the fresh deploy is actually loading (cache check) ===== */
#buildId{position:fixed;left:10px;bottom:8px;z-index:2147483600;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.12em;color:#00e6ff;background:rgba(2,8,18,.82);border:1px solid rgba(0,230,255,.4);
  padding:4px 9px;border-radius:6px;pointer-events:none;text-shadow:0 0 8px rgba(0,230,255,.6);box-shadow:0 0 14px rgba(0,230,255,.2);}

/* prominent build number on the loader — first screen, unmistakable version check */
.ld-build{margin-top:20px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:15px;letter-spacing:.22em;
  color:#00e6ff;text-shadow:0 0 14px rgba(0,230,255,.7);border:1px solid rgba(0,230,255,.45);display:inline-block;
  padding:7px 18px;border-radius:8px;background:rgba(0,230,255,.06);}

/* ==================================================================
   V23 · FINAL SCENE REBUILD — NEAR-BLACK / DEEP ROYAL NAVY CINEMA
   Electric cyan + restrained amber. Zero white haze anywhere.
   ================================================================== */

/* ---- TRUE-Z tracer layer (above 3D, below chrome) ---- */
#tracerFX{position:fixed;inset:0;z-index:15;pointer-events:none;}

/* ---- INTRO: light theme retired -> deep royal navy stage ---- */
#ch-intro{background:#040a1c!important;}
#introWhite{background:radial-gradient(circle at 50% 42%,#0c2450 0%,#071736 46%,#03080f 100%)!important;}
#introGlow{background:radial-gradient(closest-side at 50% 52%,rgba(40,140,255,.30),transparent 62%)!important;opacity:.5!important;}
.stack0{color:#f2f8ff!important;}
.stack0 .big-ai{color:#f7fbff!important;text-shadow:0 0 60px rgba(60,160,255,.35);}
.stack0 span:nth-child(2){color:#cfe4ff!important;}
.stack0 span:nth-child(3){color:#8fb0d8!important;}
.ititle .tag{color:#e8f2ff!important;text-shadow:0 0 34px rgba(60,160,255,.3);}
#introGs{display:none!important;}   /* photo panels retired on the navy stage */
/* stone-impact flash: white-hot CORE with navy falloff — impact without white-out */
#introFlash{background:radial-gradient(circle at 50% 45%,rgba(232,246,255,.95) 0%,rgba(90,170,255,.5) 26%,rgba(8,24,58,0) 66%)!important;}
/* chapter wipes: royal-navy blink, never a white screen */
#whiteWipe{background:radial-gradient(circle at 50% 50%,#0a1e44 0%,#061431 46%,#02070f 100%)!important;}

/* ---- service journey text: always readable over any footage ---- */
.svcItem,.svcTag{text-shadow:0 2px 18px rgba(2,8,20,.85),0 0 44px rgba(2,8,20,.6);}

/* ---- gate: golden bottle-guide light that flies INTO the gateway ---- */
#gBottle{position:absolute;left:50%;top:50%;width:92px;height:92px;opacity:0;pointer-events:none;z-index:6;
  background:radial-gradient(circle at 50% 42%,#fff6dc 0%,#ffd98a 26%,#e8a63e 48%,rgba(217,178,106,0) 72%);
  border-radius:50%;filter:blur(1.5px) drop-shadow(0 0 34px rgba(255,205,110,.95)) drop-shadow(0 0 90px rgba(255,170,60,.6));
  will-change:transform,opacity;}
#gBottle::after{content:"";position:absolute;left:50%;top:50%;width:180%;height:26%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(255,220,140,.55),transparent 70%);filter:blur(4px);}

/* ---- WS3D deck: waypoint zap on card lock ---- */
.ws3d-stage{position:relative;}
.ws3d-stage.zap::after{content:"";position:absolute;left:50%;top:52%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  border:2px solid rgba(120,225,255,.9);box-shadow:0 0 34px rgba(90,200,255,.8),inset 0 0 18px rgba(120,225,255,.5);
  animation:wsZap .8s cubic-bezier(.16,.84,.3,1) forwards;pointer-events:none;}
@keyframes wsZap{0%{transform:scale(.25);opacity:1}100%{transform:scale(7.5);opacity:0}}

/* ==================================================================
   V23 · WEB UNIVERSE = ONE sequence only + ALIEN FINALE with true depth
   ================================================================== */
/* duplicate one-by-one word list retired — the 3D deck is the single Web Universe */
.ofn-word{display:none!important;}
.out-finale{height:150vh!important;}
/* starships: pushed far back in Z — small, dim, soft, slow (atmospheric perspective) */
.ofn-ship{opacity:.62!important;filter:blur(1.1px) brightness(.72) saturate(.9) drop-shadow(0 0 18px rgba(70,150,255,.35))!important;}
.ofn-ship.s1{width:min(23vw,340px)!important;animation-duration:74s!important;}
.ofn-ship.s2{width:min(15vw,215px)!important;animation-duration:96s!important;}
.ofn-ship.s3{width:min(16vw,230px)!important;animation-duration:88s!important;}
.ofn-ship.s4{width:min(24vw,350px)!important;animation-duration:108s!important;}
.ofn-alien{width:min(19vw,250px)!important;left:6%!important;opacity:.68!important;
  filter:blur(.8px) brightness(.78) drop-shadow(0 0 26px rgba(90,180,255,.45))!important;
  animation-duration:9s!important;}
/* volumetric fog banks drifting between camera and the fleet */
.ofn-fog{position:absolute;inset:-12%;z-index:3;pointer-events:none;border-radius:50%;filter:blur(46px);opacity:.5;will-change:transform;}
.ofn-fog.f1{background:radial-gradient(ellipse 62% 34% at 30% 62%,rgba(20,52,110,.55),transparent 70%);animation:fogDrift1 34s ease-in-out infinite alternate;}
.ofn-fog.f2{background:radial-gradient(ellipse 54% 30% at 72% 28%,rgba(14,38,86,.5),transparent 70%);animation:fogDrift2 46s ease-in-out infinite alternate;}
@keyframes fogDrift1{from{transform:translate3d(-4%,1%,0) scale(1);}to{transform:translate3d(5%,-2%,0) scale(1.12);}}
@keyframes fogDrift2{from{transform:translate3d(3%,-1%,0) scale(1.08);}to{transform:translate3d(-5%,2%,0) scale(1);}}
/* rim-light pass so the fleet reads as lit hulls, not stickers */
.ofn-stage::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 108%,rgba(3,7,16,.85) 0%,rgba(3,7,16,.25) 38%,transparent 62%),
             radial-gradient(80% 50% at 50% -8%,rgba(60,140,255,.14),transparent 58%);}
/* finale headline */
.ofn-title{position:relative;z-index:6;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;}
.ofn-title .ot-eyebrow{font-family:"IBM Plex Mono","SF Mono",monospace;font-size:clamp(12px,1.2vw,15px);letter-spacing:.5em;color:#6fd8ff;}
.ofn-title b{font-weight:200;font-size:clamp(44px,7.6vw,120px);line-height:1.02;letter-spacing:.02em;color:#f2f8ff;
  text-shadow:0 0 70px rgba(70,160,255,.45);}
.ofn-title .ot-sub{font-weight:300;font-size:clamp(14px,1.5vw,20px);letter-spacing:.14em;color:#9fb8d9;}

/* ==================================================================
   V23 · FOOTER — dark immediately, everything readable
   White cards = dark text (kept). Dark panels = white text (fixed).
   ================================================================== */
.og-head{color:#eaf2ff!important;}
.og-p{color:#9fb0c6!important;}
.out-guar{color:#8b96a6!important;}
/* ecosystem strip — white pills, dark text (per rule) on the dark stage */
.out-eco{margin:9vh auto 1vh;text-align:center;max-width:1180px;}
.oe-head{font-weight:200;font-size:clamp(30px,4.6vw,64px);letter-spacing:-.01em;color:#eaf2ff;}
.oe-head .grad{background:linear-gradient(90deg,#5aa8ff,#00e6ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.oe-sub{margin-top:10px;font-size:clamp(13px,1.3vw,17px);letter-spacing:.18em;color:#8fa2bd;}
.oe-grid{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.oe-grid span{font-size:clamp(13px,1.25vw,16px);letter-spacing:.04em;color:#0b1830;font-weight:600;
  background:linear-gradient(165deg,#ffffff,#eef4ff);border:1px solid rgba(120,180,255,.35);border-radius:999px;padding:.62em 1.25em;
  box-shadow:0 6px 22px rgba(0,20,60,.35),inset 0 1px 0 rgba(255,255,255,.9);}
/* HUGE MARVIX LABS — uncropped, outer glow, internal molten motion, slow light sweep */
.out-mega{margin-top:7vh;text-align:center;white-space:nowrap;font-weight:200;line-height:1.06;letter-spacing:-.01em;
  font-size:clamp(56px,13.2vw,390px);padding-bottom:.10em;overflow:visible;
  background:linear-gradient(100deg,#3f86e8 0%,#79c2ff 16%,#eaf6ff 30%,#8fd8ff 44%,#3f86e8 58%,#79c2ff 74%,#eaf6ff 88%,#3f86e8 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:megaSweep 9s linear infinite,megaGlow 4.6s ease-in-out infinite;}
@keyframes megaSweep{from{background-position:0% 50%;}to{background-position:300% 50%;}}
@keyframes megaGlow{
  0%,100%{filter:drop-shadow(0 0 30px rgba(70,160,255,.5)) drop-shadow(0 0 90px rgba(0,190,255,.28));}
  50%{filter:drop-shadow(0 0 60px rgba(110,190,255,.75)) drop-shadow(0 0 150px rgba(0,210,255,.45));}}
@media(max-width:820px){
  .out-mega{font-size:clamp(40px,12.4vw,120px);}
  .ofn-title b{font-size:clamp(34px,10vw,64px);}
  .oe-grid span{font-size:12px;}
}

/* ============================================================================
   MX-G1 · EARTH SECTION — rotating globe directly after the aircraft sequence
   ============================================================================ */
#mxEarthSec{position:relative;text-align:center;padding:11vh 0 7vh;}
.mxe-eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.42em;
  color:rgba(150,205,245,.72);text-transform:uppercase;}
.mxe-h{margin-top:16px;font-weight:200;font-size:clamp(40px,7.4vw,110px);letter-spacing:-.01em;line-height:.96;color:#eef4fd;}
.mxe-h span{background:linear-gradient(90deg,#1e5fc8,#38b6ff,#1e5fc8);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:gslide 7s ease-in-out infinite;font-weight:300;}
#globeWrap{position:relative;width:min(80vw,580px);height:min(80vw,580px);margin:30px auto 8px;}
#globeGL{position:relative;width:100%!important;height:100%!important;display:block;z-index:2;cursor:grab;}
/* atmospheric light glow halo behind the Earth */
.mxe-glow{position:absolute;inset:-18%;z-index:1;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 50% 46%, rgba(46,125,255,.30) 0%, rgba(28,90,210,.16) 38%, rgba(10,32,80,.06) 58%, transparent 72%);
  filter:blur(6px);animation:mxeBreathe 6.5s ease-in-out infinite;}
@keyframes mxeBreathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}
.mxe-sub{margin-top:12px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;
  letter-spacing:.14em;color:rgba(170,196,224,.66);}
@media (prefers-reduced-motion: reduce){ .mxe-glow{animation:none;} }

/* ============================================================================
   MX-V1 · VERTICAL VIDEO STACK — journey.mp4 then w1..w14, strictly one below
   another. Pure vertical CSS flow: NO sliders, NO carousels, NO horizontal axis.
   ============================================================================ */
#mxVStack{position:relative;display:flex;flex-direction:column;gap:5.5vh;
  width:min(92vw,1180px);margin:2vh auto 9vh;padding-top:5vh;}
#mxVStack .mxe-eyebrow{text-align:center;margin-bottom:1vh;}
.mxv{position:relative;margin:0;border-radius:22px;overflow:hidden;
  background:#060b14;border:1px solid rgba(90,140,210,.16);
  box-shadow:0 24px 70px rgba(2,6,14,.66), 0 0 0 1px rgba(10,20,40,.5) inset;}
.mxv video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
.mxv figcaption{position:absolute;left:22px;bottom:16px;z-index:2;display:flex;align-items:baseline;gap:12px;
  font-family:"Poppins","SF Pro Display",sans-serif;font-weight:300;letter-spacing:.2em;font-size:14px;color:#dfeafa;
  text-shadow:0 2px 12px rgba(0,0,0,.75);}
.mxv figcaption b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:12px;
  color:rgba(140,205,255,.85);letter-spacing:.3em;}
.mxv::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(3,7,14,.55) 100%);}
@media (max-width:760px){ #mxVStack{gap:3.5vh;} .mxv{border-radius:14px;} .mxv figcaption{left:14px;bottom:10px;} }

/* ============================================================================
   MX-X1 · RESTRUCTURED FLOW — retired chapters inert (instant restore = remove
   this rule), vertical film stack chapter, stack repositioned for mid-page.
   ============================================================================ */
#ch-worlds,#ch-vstack{display:none!important;}  /* MX-6S: films + stack PURGED; computer+laptop live again for S4 */
#ch-vstack{z-index:11;background:
  radial-gradient(120% 90% at 50% 0%,#0a1526 0%,#04070f 58%,#02040a 100%);overflow:hidden;visibility:hidden;}
#ch-vstack #mxVStack{position:absolute;left:50%;top:0;transform:translate(-50%,0);
  margin:0;padding:9vh 0 16vh;will-change:transform;}
#ch-vstack .mxe-eyebrow{text-align:center;}

/* ============================================================================
   MX-F1 · FULL-SCREEN FILM CAPTIONS — vibrant glass container, text on top
   ============================================================================ */
#caption{left:6%;bottom:9%;padding:16px 26px 14px;border-radius:18px;
  background:rgba(6,14,28,.44);border:1px solid rgba(120,190,255,.22);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(2,6,14,.55), inset 0 1px 0 rgba(190,225,255,.14);}
#caption .cnum{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:15px;
  letter-spacing:.34em;color:#ffb35c;text-shadow:0 0 18px rgba(255,138,31,.8);}
#caption .ctxt{display:block;margin-top:6px;font-weight:300;letter-spacing:.08em;
  font-size:clamp(30px,4.6vw,64px);line-height:1;
  background:linear-gradient(92deg,#eaf5ff 0%,#7fd4ff 42%,#ffb35c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 18px rgba(4,10,22,.7)) drop-shadow(0 0 26px rgba(80,170,255,.35));}

/* ============================================================================
   MX-J2 · FOOTER — journey.mp4 continuous, VIBRANT, glass text containers on top
   ============================================================================ */
.out-bgvid{opacity:.62!important;filter:brightness(.72) saturate(1.35) contrast(1.08)!important;}
.out-veil{background:linear-gradient(180deg,rgba(3,7,15,.55) 0%,rgba(3,7,15,.28) 40%,rgba(3,7,15,.62) 100%)!important;}
.out-h,.out-eyebrow{position:relative;z-index:2;}
.out-grid .oc{background:rgba(6,13,26,.52)!important;border:1px solid rgba(110,180,255,.20)!important;
  border-radius:20px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 22px 60px rgba(2,6,14,.5), inset 0 1px 0 rgba(190,225,255,.12)!important;}
.out-foot .of-col{background:rgba(6,13,26,.46);border:1px solid rgba(110,180,255,.16);
  border-radius:16px;padding:18px 20px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.out-guar{background:rgba(6,13,26,.5);border:1px solid rgba(110,180,255,.18);border-radius:14px;
  display:inline-block;padding:12px 22px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}


/* ============================================================================
   MX-DATAMESH · persistent global background layer (behind EVERYTHING)
   ============================================================================ */
html,body{background:#03081e!important;}
#stage{position:relative;z-index:1;}
/* loader no longer paints a solid blue block — the data-mesh shows immediately */
#loader{background:transparent!important;}
#loader::before{background:radial-gradient(60% 50% at 50% 40%,rgba(3,8,30,.35),rgba(3,8,30,.72) 100%)!important;animation:none!important;}
#loader::after{opacity:.35!important;}
/* footer: let the mesh persist behind the outro instead of a hard black */
#ch-outro{background:transparent!important;}
.out-bg{opacity:.5!important;}

/* ============================================================================
   MX-VBLEND · Gateway w1..w14 videos BLEND over the persistent data-mesh
   (screen blend + lifted floor so black areas go transparent -> no blackout,
   mesh always shows through, UI labels stay visible)
   ============================================================================ */
/* MX-VOPAQUE: gateway w1..w14 render in STANDARD OPAQUE blend so video content is clear */
#ch-worlds{background:transparent!important;}
#ch-worlds .wv{mix-blend-mode:normal;opacity:0;}
#ch-computer,#ch-laptop{background:transparent!important;}

/* ============================================================================
   MX-BGVIDEO · global seamless video background (behind everything, z0)
   ============================================================================ */
#bgVideo{position:fixed;inset:0;z-index:0;pointer-events:none;background:#02060f;overflow:hidden;}
#bgVideo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1.6s ease;will-change:opacity;}
#bgVideo video.on{opacity:1;}
#bgVideo .bgv-veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,rgba(3,8,22,.12),rgba(3,8,22,.42) 100%);}
html,body{background:#02060f!important;}
#stage{position:relative;z-index:1;}

/* ============================================================================
   MX-INTRO · minimalist BLACK opening — glossy jelly white "MARVIX LABS"
   ============================================================================ */
#loader{background:#000!important;}
#loader::before,#loader::after{display:none!important;}
#loader .ld-c{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:0;}
#loader .ld-title{
  font-family:"Poppins","SF Pro Display",system-ui,sans-serif;font-weight:800;
  font-size:clamp(46px,9vw,140px);letter-spacing:.06em;line-height:1;
  background:linear-gradient(180deg,#ffffff 0%,#f3f7ff 38%,#c9d6e6 52%,#ffffff 72%,#e9f0fb 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  filter:
    drop-shadow(0 2px 1px rgba(255,255,255,.85))
    drop-shadow(0 6px 10px rgba(10,20,40,.55))
    drop-shadow(0 0 26px rgba(150,190,255,.35))
    drop-shadow(0 0 42px rgba(255,225,170,.20));
  animation:jellyGloss 4.5s ease-in-out infinite;}
@keyframes jellyGloss{
  0%,100%{ transform:scale(1) skewX(0deg); filter:drop-shadow(0 2px 1px rgba(255,255,255,.85)) drop-shadow(0 6px 10px rgba(10,20,40,.55)) drop-shadow(0 0 26px rgba(150,190,255,.35)) drop-shadow(0 0 42px rgba(255,225,170,.20)); }
  50%{ transform:scale(1.015) skewX(-.4deg); filter:drop-shadow(0 3px 1px rgba(255,255,255,.95)) drop-shadow(0 8px 14px rgba(10,20,40,.6)) drop-shadow(0 0 34px rgba(170,205,255,.5)) drop-shadow(0 0 54px rgba(255,225,170,.32)); } }
#loader .ld-tag{margin-top:18px;font-family:"Poppins","SF Pro Display",sans-serif;font-weight:300;
  font-size:clamp(14px,1.7vw,22px);letter-spacing:.24em;text-transform:none;
  color:#eaf0fb;text-shadow:0 0 14px rgba(255,225,170,.45),0 0 26px rgba(150,190,255,.3);}
#loader .ld-bar{margin-top:40px;width:min(260px,52vw);height:2px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden;}
#loader #ldFill{display:block;height:100%;width:0;background:linear-gradient(90deg,#8fd0ff,#ffffff,#ffd9a0);box-shadow:0 0 12px rgba(150,200,255,.7);}
#loader .ld-enter{margin-top:26px;padding:11px 34px;border:1px solid rgba(255,255,255,.35);border-radius:40px;
  font-family:"Poppins",sans-serif;font-weight:500;letter-spacing:.32em;font-size:13px;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.04);backdrop-filter:blur(6px);transition:all .3s ease;}
#loader .ld-enter:hover{background:rgba(255,255,255,.12);box-shadow:0 0 24px rgba(150,200,255,.4);}
@media (prefers-reduced-motion: reduce){ #loader .ld-title{animation:none!important;} }

/* ============================================================================
   MX-VENH · global video contrast/brightness boost + top/bottom smoke overlay
   ============================================================================ */
#bgVideo video{filter:brightness(1.08) contrast(1.08) saturate(1.06);}
.out-bgvid{filter:brightness(1.08) contrast(1.08) saturate(1.06)!important;}
/* atmospheric smoke/fog: dense at top & bottom edges, translucent center -> hides frame edges */
#bgVideo::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(180deg,#02060f 0%,rgba(2,6,15,.72) 7%,rgba(2,6,15,0) 22%,rgba(2,6,15,0) 78%,rgba(2,6,15,.72) 93%,#02060f 100%);}
#bgVideo::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='smk'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.011' numOctaves='4' seed='5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.35  0 0 0 0 0.5  0 0 0 0 0.75  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='28%25' filter='url(%23smk)'/%3E%3Crect y='72%25' width='100%25' height='28%25' filter='url(%23smk)'/%3E%3C/svg%3E");
  background-size:cover;animation:smkDrift 40s linear infinite;}
@keyframes smkDrift{from{background-position:0 0}to{background-position:-900px 0}}
@media (prefers-reduced-motion: reduce){ #bgVideo::after{animation:none;} }

/* ============================================================================
   MX-LIQUID · MARVIX LABS liquid / gel flow text
   ============================================================================ */
#loader .ld-title{
  background:linear-gradient(110deg,#ffffff 0%,#eaf3ff 20%,#bcd0e8 34%,#ffffff 48%,#dfeafb 60%,#b9cfe8 74%,#ffffff 90%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:liquidFlow 5.5s ease-in-out infinite, jellyGloss 4.5s ease-in-out infinite;}
@keyframes liquidFlow{
  0%{background-position:0% 50%; transform:scale(1) skewX(0deg)}
  25%{transform:scale(1.02,0.98) skewX(-1.2deg)}
  50%{background-position:100% 50%; transform:scale(0.985,1.02) skewX(1deg)}
  75%{transform:scale(1.015,0.99) skewX(-0.6deg)}
  100%{background-position:0% 50%; transform:scale(1) skewX(0deg)}}

/* ============================================================================
   MX-CLOUDS · realistic drifting cloud/fog over the background video
   ============================================================================ */
.bgv-clouds{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='700'%3E%3Cfilter id='cl'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0045 0.008' numOctaves='5' seed='9'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55  0 0 0 0 0.68  0 0 0 0 0.9  0 0 0 0.55 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1.3' exponent='2.2' offset='-0.25'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='34%25' filter='url(%23cl)'/%3E%3Crect y='66%25' width='100%25' height='34%25' filter='url(%23cl)'/%3E%3C/svg%3E");
  background-size:cover;animation:cloudDrift 60s linear infinite;}
@keyframes cloudDrift{from{background-position:0 0}to{background-position:-1200px 0}}
@media (prefers-reduced-motion: reduce){ .bgv-clouds{animation:none;} }
/* keep robot rig + WebGL scene (plane/missile, models) ABOVE the video bg */
#rig,#robotShadow,#gl{z-index:14!important;}
#gl{position:fixed;inset:0;pointer-events:none;}

/* MX-LIQUID: apply the viscous displacement filter + keep the glossy gel gradient */
#loader .ld-title{ filter:url(#mxLiquid)
  drop-shadow(0 2px 1px rgba(255,255,255,.9))
  drop-shadow(0 8px 14px rgba(10,20,40,.6))
  drop-shadow(0 0 30px rgba(170,205,255,.4))
  drop-shadow(0 0 48px rgba(255,225,170,.24)); }

/* ============================================================================
   MX-FOOTER-ASPECT · portrait (9:16) footer clips must not stretch
   ============================================================================ */
.out-bgvid{object-fit:cover;}                 /* landscape footer.mp4 fills */
.out-bgvid.portrait,#outBgVid[data-portrait="1"]{object-fit:contain!important;background:#03060f;}

/* ============================================================================
   MX-SVC-TICKER · continuous services + contact floating over the video
   (persists top->footer; does NOT disappear)
   ============================================================================ */
#svcTicker{position:fixed;left:0;right:0;bottom:0;z-index:12;pointer-events:none;overflow:hidden;
  height:44px;display:flex;align-items:center;
  background:linear-gradient(0deg,rgba(3,7,18,.55),rgba(3,7,18,0));}
#svcTicker .tk{display:inline-flex;gap:44px;white-space:nowrap;padding-left:100%;
  animation:tkScroll 42s linear infinite;
  font:600 14px/1 "Poppins",system-ui,sans-serif;letter-spacing:.14em;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.7);}
#svcTicker .tk b{color:#ffd9a0;font-weight:700;}
#svcTicker .tk .dot{color:#0A84FF;}
@keyframes tkScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion: reduce){ #svcTicker .tk{animation-duration:120s;} }

/* ============================================================================
   MX-NAV · aligned header navigation
   ============================================================================ */
#topnav{display:flex;align-items:center;gap:26px;}
#mxNav{display:flex;gap:22px;align-items:center;}
#mxNav a{font:600 12px/1 "Poppins",system-ui,sans-serif;letter-spacing:.22em;color:#eaf0fb;
  text-decoration:none;opacity:.82;transition:opacity .25s,text-shadow .25s;text-shadow:0 1px 8px rgba(0,0,0,.6);}
#mxNav a:hover{opacity:1;text-shadow:0 0 14px rgba(150,200,255,.7);}
@media (max-width:760px){ #mxNav{display:none;} }

/* ============================================================================
   MX-SVC-HERO · continuous center service loop + flanking streams (over video)
   ============================================================================ */
#svcHero{position:fixed;inset:0;z-index:11;pointer-events:none;display:flex;align-items:center;justify-content:center;}
#svcHero .sh-center{width:min(70vw,900px);display:flex;justify-content:center;}
#svcHero .sh-card{padding:34px 48px;border-radius:26px;text-align:center;
  background:rgba(8,16,32,.30);border:1px solid rgba(150,195,255,.22);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 30px 90px rgba(2,6,16,.5), inset 0 1px 0 rgba(200,225,255,.16);
  opacity:0;transform:translateY(18px) scale(.98);}
#svcHero .sh-card.in{animation:shIn .8s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes shIn{to{opacity:1;transform:translateY(0) scale(1);}}
#svcHero .sh-num{display:block;font:700 15px/1 "IBM Plex Mono",monospace;letter-spacing:.4em;color:#ffb35c;
  text-shadow:0 0 18px rgba(255,150,60,.7);margin-bottom:14px;}
#svcHero .sh-title{margin:0;font:800 clamp(30px,6vw,72px)/1.02 "Poppins",system-ui,sans-serif;letter-spacing:-.01em;
  background:linear-gradient(180deg,#ffffff,#cfe0f5);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 20px rgba(4,10,22,.7));}
#svcHero .sh-sub{margin:14px 0 0;font:400 clamp(13px,1.6vw,18px)/1.4 "Poppins",sans-serif;letter-spacing:.14em;color:#bcd0ea;}
/* flanking vertical streams */
#svcHero .sh-flank{position:absolute;top:0;bottom:0;width:210px;overflow:hidden;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);}
#svcHero .sh-left{left:2.5vw;} #svcHero .sh-right{right:2.5vw;text-align:right;}
#svcHero .sh-stream{display:flex;flex-direction:column;gap:16px;animation:shStream 32s linear infinite;}
#svcHero .sh-right .sh-stream{animation-direction:reverse;}
#svcHero .sh-stream span{font:600 13px/1.2 "Poppins",sans-serif;letter-spacing:.1em;color:#dbe8fb;
  text-shadow:0 1px 8px rgba(0,0,0,.7);}
@keyframes shStream{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media (max-width:900px){ #svcHero .sh-flank{display:none;} }
@media (prefers-reduced-motion: reduce){ #svcHero .sh-stream{animation:none;} #svcHero .sh-card{opacity:1;transform:none;animation:none;} }

/* ============================================================================
   MX-FOOTER-CONTACT · contact overlay + inquiry button + 9:16 fix
   ============================================================================ */
.out-bgvid{object-fit:cover;}
#outBgVid[data-portrait="1"],.out-bgvid.portrait{object-fit:contain!important;background:#03060f;}
.mx-inquiry{display:inline-block;margin-top:18px;padding:14px 34px;border-radius:40px;
  background:#FE3C00;color:#fff;font:700 14px/1 "Poppins",sans-serif;letter-spacing:.14em;text-decoration:none;
  box-shadow:0 14px 40px rgba(254,60,0,.4);transition:transform .25s,box-shadow .25s;}
.mx-inquiry:hover{transform:translateY(-2px);box-shadow:0 20px 54px rgba(254,60,0,.55);}


/* ============================================================================
   MX-SVC-TYPO · varied futuristic typography + larger side text
   (offline-safe font stacks; graceful fallback if a family isn't installed)
   ============================================================================ */
:root{
  --f-techno:"Orbitron","Syne","Space Grotesk","Poppins",system-ui,sans-serif;   /* category titles */
  --f-geo:"Space Grotesk","Syne","Poppins",system-ui,sans-serif;                 /* alt titles */
  --f-mono:"JetBrains Mono","SF Mono","IBM Plex Mono",ui-monospace,monospace;     /* sub-services */
}
/* center hero title: big, techno, neon */
#svcHero .sh-title{ font-family:var(--f-techno)!important; letter-spacing:.02em;
  text-shadow:0 0 22px rgba(120,190,255,.45), 0 0 48px rgba(120,190,255,.25); }
#svcHero .sh-sub{ font-family:var(--f-mono)!important; letter-spacing:.16em; color:#dbe8fb;
  font-size:clamp(15px,1.9vw,22px)!important; }
#svcHero .sh-num{ font-family:var(--f-mono)!important; }
/* per-cycle accent: alternate title look via data-variant set by JS */
#svcHero .sh-card[data-v="1"] .sh-title{ font-family:var(--f-geo)!important; font-weight:800; }
#svcHero .sh-card[data-v="2"] .sh-title{ font-family:var(--f-techno)!important; font-weight:700; letter-spacing:.06em; }
/* flanking streams — MUCH larger + varied, legible over motion */
#svcHero .sh-flank{ width:300px!important; opacity:.72!important; }
#svcHero .sh-stream span{ font-family:var(--f-techno); font-weight:700;
  font-size:clamp(18px,1.7vw,26px)!important; letter-spacing:.06em; color:#eaf3ff;
  text-shadow:0 0 14px rgba(90,160,255,.55), 0 2px 10px rgba(0,0,0,.8); }
#svcHero .sh-stream span:nth-child(3n+2){ font-family:var(--f-mono); font-weight:500; color:#a9d8ff;
  font-size:clamp(15px,1.4vw,20px)!important; letter-spacing:.02em; text-transform:uppercase; }
#svcHero .sh-stream span:nth-child(3n+3){ font-family:var(--f-geo); font-weight:800; color:#ffd9a0;
  text-shadow:0 0 16px rgba(255,170,80,.5); }
/* ticker larger + techno */
#svcTicker .tk{ font-family:var(--f-techno)!important; font-size:16px!important; letter-spacing:.12em; }
@media (max-width:900px){ #svcHero .sh-stream span{ font-size:16px!important; } }