:root{
  --bg:#050508;--ink:#f6f1e9;--muted:#b9b3aa;--gold:#d7b47a;--cyan:#7df3ff;--pink:#ff79df;--glass:rgba(11,11,16,.66);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#050508;color:var(--ink);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.progress{position:fixed;inset:0 0 auto 0;height:3px;background:rgba(255,255,255,.05);z-index:50}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--gold),var(--pink));box-shadow:0 0 18px rgba(125,243,255,.25)}
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1080px,calc(100% - 28px));height:58px;z-index:40;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:0 12px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(7,7,11,.72);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:12px}.brand-logo{display:block;width:auto;height:38px;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.24))}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.links{display:flex;justify-content:center;gap:24px;color:rgba(246,241,233,.65);font-size:10px}.cta{padding:11px 15px;border-radius:999px;background:linear-gradient(135deg,#f5f1ea,#d7b47a);color:#08070b;font-size:9px;font-weight:900;letter-spacing:.08em}
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(circle at 75% 26%,rgba(125,243,255,.06),transparent 20%),radial-gradient(circle at 78% 62%,rgba(255,121,223,.05),transparent 22%),#050508}
.stage:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 28%,rgba(5,5,8,.18) 62%,rgba(5,5,8,.92) 100%),linear-gradient(180deg,transparent 60%,rgba(5,5,8,.8));pointer-events:none}
.scene{position:absolute;inset:0;opacity:0;transform:scale(.96);transition:opacity .5s ease,transform .6s ease;perspective:1200px;transform-style:preserve-3d}.scene.active{opacity:1;transform:scale(1)}
.hud{position:absolute;left:18px;bottom:18px;z-index:6;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(5,5,9,.42);backdrop-filter:blur(12px)}.hud b{font-size:22px;color:var(--gold)}.hud small{display:block;font-size:6px;letter-spacing:.18em;color:#888}.hud strong{font-size:7px;letter-spacing:.14em}
main{position:relative;z-index:3}.act{min-height:145svh;display:flex;align-items:center;padding:90px 4vw}.sticky{position:sticky;top:0;min-height:100svh;width:100%;display:flex;align-items:center}.copy{width:min(540px,92vw);padding:24px 24px 22px;border:1px solid rgba(255,255,255,.07);border-radius:24px;background:linear-gradient(145deg,rgba(9,9,14,.78),rgba(14,12,16,.44));backdrop-filter:blur(15px);box-shadow:0 30px 90px rgba(0,0,0,.3)}.copy.right{margin-left:auto}.kicker{margin:0 0 12px;color:var(--gold);font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;opacity:.95}.copy h1,.copy h2{margin:0;line-height:.88;letter-spacing:-.06em;font-weight:800}.copy h1{font-size:clamp(52px,7vw,104px)}.copy h2{font-size:clamp(42px,5vw,72px)}em{font-family:Georgia,serif;color:var(--gold);font-weight:700}.copy p:not(.kicker){font-size:14px;line-height:1.65;color:#d0cbc2;margin:16px 0 0}.service{margin-top:18px;border-top:1px solid rgba(255,255,255,.07)}.service span{display:block;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:11px;color:#ddd7ce}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.btn{padding:11px 14px;border-radius:999px;font-size:8px;font-weight:900;letter-spacing:.09em;border:1px solid rgba(255,255,255,.1)}.btn.primary{background:linear-gradient(135deg,#f5f0e8,#d7b47a);color:#08070b}
.centercopy{width:min(720px,92vw);margin:auto;text-align:center}.centercopy h2{font-size:clamp(48px,7vw,100px)}


/* Project slider */
.project-slider-card{width:min(1560px,calc(100vw - 40px));margin:0 auto;padding:22px;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:linear-gradient(145deg,rgba(9,9,14,.62),rgba(14,12,16,.32));backdrop-filter:blur(16px);box-shadow:0 30px 90px rgba(0,0,0,.24)}
.project-intro{margin:4px 0 18px;max-width:760px}.project-intro h2{margin:0;line-height:.92;letter-spacing:-.06em;font-size:clamp(34px,4.8vw,62px);font-weight:800}.project-intro h2 em{display:block}.project-intro p{margin:12px 0 0;font-size:14px;line-height:1.65;color:#d0cbc2}
.project-slider{position:relative;overflow:hidden;border-radius:20px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));min-height:360px;width:100%}
.slider-track{display:flex;width:max-content;gap:18px;padding:18px;animation:sliderMove 18s linear infinite}
.project-slide{position:relative;flex:0 0 min(760px,74vw);height:300px;border-radius:18px;overflow:hidden;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;box-shadow:0 22px 44px rgba(0,0,0,.28)}
.project-slide:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 18%,rgba(255,255,255,.16),transparent 22%),linear-gradient(135deg,rgba(255,255,255,.06),transparent 45%);pointer-events:none}
.project-slide:after{content:'';position:absolute;right:18px;top:18px;width:110px;height:110px;border-radius:22px;background:rgba(255,255,255,.08);backdrop-filter:blur(4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.project-slide.green{background:linear-gradient(135deg,#0f211b,#1c5f49 55%,#59c591)}
.project-slide.blue{background:linear-gradient(135deg,#111a31,#214579 55%,#68b8ff)}
.project-slide.pink{background:linear-gradient(135deg,#2a1329,#6e2f65 55%,#ff6ecb)}
.project-badge{display:inline-flex;align-self:flex-start;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(10,10,14,.18);font-size:9px;font-weight:800;letter-spacing:.18em;margin-bottom:auto}
.project-slide h3{margin:0;font-size:clamp(28px,4vw,46px);line-height:.95;letter-spacing:-.04em;max-width:70%}
.project-slide p{margin:10px 0 0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.88);max-width:70%}
.project-line{position:absolute;left:22px;right:22px;bottom:20px;height:5px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.65),rgba(255,255,255,.08))}
.slider-dots{display:flex;justify-content:center;gap:8px;padding-top:14px}.slider-dots span{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.24)}.slider-dots span.active{width:24px;background:linear-gradient(90deg,var(--cyan),var(--pink))}
@keyframes sliderMove{0%,10%{transform:translateX(0)}30%,40%{transform:translateX(calc(-1 * (min(520px,72vw) + 18px)))}60%,70%{transform:translateX(calc(-2 * (min(520px,72vw) + 18px)))}90%,100%{transform:translateX(calc(-3 * (min(520px,72vw) + 18px)))}}

/* Scene 1 camera */
.camera-rig{position:absolute;right:9%;top:15%;width:420px;height:560px;transform-style:preserve-3d;transform:rotateY(-10deg) rotateX(2deg)}
.cam-body{position:absolute;left:80px;top:70px;width:260px;height:150px;border-radius:22px;background:linear-gradient(145deg,#262b33,#0f1116);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 40px 70px rgba(0,0,0,.5);transform:translateZ(45px)}
.cam-body:before{content:"";position:absolute;left:46px;top:-28px;width:110px;height:28px;border-radius:9px;background:#2a2f37}.cam-body:after{content:"";position:absolute;right:-16px;top:30px;width:30px;height:92px;border-radius:8px;background:#20242b}
.lens{position:absolute;left:158px;top:100px;width:155px;height:155px;border-radius:50%;background:radial-gradient(circle,#8ffaff 0 7%,#17313a 8% 16%,#0e1116 17% 38%,#242a31 39% 56%,#0b0d11 57% 100%);box-shadow:0 0 34px rgba(125,243,255,.35),0 0 0 14px #171a20,0 0 0 24px #252a31;transform:translateZ(110px)}
.tripod-hub{position:absolute;left:198px;top:250px;width:26px;height:110px;border-radius:14px;background:#272c33}.leg{position:absolute;left:205px;top:335px;width:12px;height:210px;border-radius:8px;background:linear-gradient(#303640,#14171c);transform-origin:top}.leg.a{transform:rotate(20deg)}.leg.b{transform:rotate(-20deg)}.leg.c{transform:rotateX(18deg) translateZ(-55px)}
.softbox{position:absolute;width:120px;height:200px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.14),rgba(255,255,255,.02));filter:blur(.2px)}.softbox.l{left:8%;top:20%;transform:rotateY(35deg)}.softbox.r{right:2%;top:18%;transform:rotateY(-35deg)}

/* Scene 2 flash */
.flashburst{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.98),rgba(255,255,255,.7) 12%,rgba(125,243,255,.22) 28%,transparent 58%);animation:pulse 1.7s ease-in-out infinite}.flashburst:before,.flashburst:after{content:"";position:absolute;left:50%;top:50%;width:70vw;height:4px;background:linear-gradient(90deg,transparent,#fff,transparent);transform:translate(-50%,-50%) rotate(0deg);opacity:.3}.flashburst:after{transform:translate(-50%,-50%) rotate(90deg)}@keyframes pulse{50%{filter:brightness(1.4);transform:scale(1.06)}}

/* Scene 3 structure system - completely new concept */
.structure-field{position:absolute;inset:8% 4% 8% 4%;pointer-events:none}
.structure-grid{position:absolute;inset:4% 2% 10%;border-radius:38px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.structure-grid:before{content:'';position:absolute;inset:22px;background:repeating-linear-gradient(90deg,transparent 0 86px,rgba(18,24,34,.05) 86px 88px),repeating-linear-gradient(180deg,transparent 0 62px,rgba(18,24,34,.04) 62px 64px);border-radius:28px;opacity:.8}
.structure-grid:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 14% 20%,rgba(125,243,255,.16),transparent 20%),radial-gradient(circle at 82% 24%,rgba(255,121,223,.14),transparent 18%),radial-gradient(circle at 68% 72%,rgba(215,180,122,.12),transparent 20%)}
.structure-board{position:absolute;left:24%;right:24%;top:16%;height:32%;border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.18));backdrop-filter:blur(18px);box-shadow:0 28px 60px rgba(37,33,52,.12),inset 0 0 0 1px rgba(255,255,255,.45)}
.structure-board:before{content:'';position:absolute;left:28px;right:28px;top:24px;height:12px;background:rgba(20,26,36,.12);box-shadow:0 24px 0 rgba(20,26,36,.08);border-radius:12px}
.structure-board:after{content:'';position:absolute;left:38px;right:38px;bottom:28px;height:94px;background:linear-gradient(180deg,rgba(13,20,34,.08),rgba(13,20,34,.02));border-radius:24px;box-shadow:inset 0 0 0 1px rgba(13,20,34,.06)}
.structure-lane{position:absolute;left:8%;right:8%;bottom:8%;height:24%;background:linear-gradient(180deg,rgba(60,44,36,.92),rgba(47,34,28,.76) 46%,rgba(109,100,95,.18) 84%,transparent 100%);clip-path:polygon(10% 0,88% 0,100% 34%,0 34%);filter:drop-shadow(0 20px 44px rgba(0,0,0,.16))}
.structure-card{position:absolute;width:152px;height:96px;border-radius:24px;background:linear-gradient(145deg,rgba(18,26,42,.94),rgba(16,22,34,.78));box-shadow:0 20px 36px rgba(24,22,38,.16),inset 0 0 0 1px rgba(255,255,255,.05)}
.structure-card:before{content:'';position:absolute;left:16px;top:16px;right:16px;height:7px;background:rgba(255,255,255,.14);box-shadow:0 16px 0 rgba(255,255,255,.08);border-radius:8px}
.structure-card:after{content:'';position:absolute;right:16px;bottom:14px;width:44px;height:10px;border-radius:999px;background:linear-gradient(90deg,rgba(125,243,255,.98),rgba(255,121,223,.88))}
.structure-card.c1{left:9%;top:22%;transform:rotate(-7deg)}
.structure-card.c2{right:10%;top:18%;transform:rotate(6deg)}
.structure-card.c3{left:14%;bottom:22%;transform:rotate(8deg)}
.structure-card.c4{right:14%;bottom:20%;transform:rotate(-6deg)}
.structure-path{position:absolute;height:4px;border-radius:999px;background:linear-gradient(90deg,rgba(125,243,255,.12),rgba(125,243,255,.98),rgba(255,121,223,.82));box-shadow:0 0 16px rgba(125,243,255,.22)}
.structure-path.p1{left:20%;top:36%;width:19%;transform:rotate(4deg)}
.structure-path.p2{right:21%;top:35%;width:18%;transform:rotate(-8deg)}
.structure-path.p3{left:25%;bottom:24%;width:18%;transform:rotate(-12deg)}
.structure-path.p4{right:24%;bottom:23%;width:16%;transform:rotate(10deg)}
.structure-node{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 6px rgba(125,243,255,.12),0 0 18px rgba(125,243,255,.45)}
.structure-node.n1{left:38%;top:34%}.structure-node.n2{right:37%;top:34%}.structure-node.n3{left:42%;bottom:24%;background:var(--gold);box-shadow:0 0 0 6px rgba(215,180,122,.14),0 0 18px rgba(215,180,122,.35)}.structure-node.n4{right:40%;bottom:23%;background:var(--pink);box-shadow:0 0 0 6px rgba(255,121,223,.14),0 0 18px rgba(255,121,223,.35)}
.structure-ring{position:absolute;right:22%;bottom:20%;width:188px;height:188px;border-radius:50%;border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 0 0 18px rgba(255,255,255,.05),inset 0 0 0 46px rgba(125,243,255,.05)}
.structure-ring:before,.structure-ring:after{content:'';position:absolute;border-radius:50%;background:currentColor}.structure-ring:before{left:18px;top:52px;width:12px;height:12px;color:var(--cyan);box-shadow:0 0 0 6px rgba(125,243,255,.12)}.structure-ring:after{right:26px;bottom:32px;width:14px;height:14px;color:var(--pink);box-shadow:0 0 0 8px rgba(255,121,223,.12)}
.structure-dash{position:absolute;left:48%;top:28%;width:132px;height:132px;border-radius:28px;border:2px dashed rgba(20,26,38,.14);transform:rotate(8deg)}

/* Scene 4 wind - visually different */
.wind-photo{position:absolute;width:210px;height:150px;background:#efe8dc;padding:11px;box-shadow:0 28px 50px rgba(0,0,0,.4)}.wind-photo i{display:block;width:100%;height:100%;background:linear-gradient(135deg,#101a31,#3f589a)}.w1{left:8%;top:40%;transform:rotate(-28deg)}.w2{left:28%;top:18%;transform:rotate(16deg)}.w3{left:52%;top:22%;transform:rotate(-12deg)}.w4{right:4%;top:48%;transform:rotate(24deg)}.hero-photo{position:absolute;left:50%;top:50%;width:290px;height:205px;transform:translate(-50%,-50%) rotate(-2deg);background:#efe8dc;padding:13px;box-shadow:0 0 70px rgba(125,243,255,.15)}.hero-photo i{display:block;width:100%;height:100%;background:linear-gradient(135deg,#142d26,#3b9a72)}.wind-lines{position:absolute;inset:0;background:repeating-linear-gradient(-12deg,transparent 0 90px,rgba(255,255,255,.025) 92px 94px);animation:wind 5s linear infinite}@keyframes wind{to{transform:translateX(120px)}}

/* Scene 5 podium */
.stagefloor{position:absolute;left:10%;right:6%;bottom:8%;height:28%;background:linear-gradient(#2a211c,#0f1016);transform:perspective(1000px) rotateX(65deg);box-shadow:0 0 0 1px rgba(255,255,255,.04),0 40px 90px rgba(0,0,0,.38)}
.audience-glow{position:absolute;left:2%;right:24%;bottom:8%;height:58%;background:radial-gradient(circle at 24% 48%,rgba(125,243,255,.34),transparent 24%),radial-gradient(circle at 54% 42%,rgba(255,121,223,.24),transparent 22%),radial-gradient(circle at 78% 35%,rgba(215,180,122,.22),transparent 18%),linear-gradient(180deg,rgba(255,255,255,.08),transparent 60%);filter:blur(4px)}
.podium{position:absolute;right:20%;bottom:18%;width:184px;height:176px;border-radius:10px 10px 18px 18px;background:linear-gradient(180deg,#5a3e30 0%,#2a211c 28%,#17181c 100%);box-shadow:0 30px 60px rgba(0,0,0,.48)}.podium:before{content:'';position:absolute;left:-10px;right:-10px;top:-14px;height:22px;border-radius:12px;background:linear-gradient(180deg,#715446,#44332c);box-shadow:0 10px 18px rgba(0,0,0,.28)}.podium:after{content:'';position:absolute;left:22px;right:22px;top:34px;height:3px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);box-shadow:0 32px 0 rgba(255,255,255,.06)}.speaker{position:absolute;right:23%;bottom:35%;width:118px;height:248px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.36))}.speaker .head{position:absolute;left:38px;top:0;width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,#5b6474,#343d4f)}.speaker .torso{position:absolute;left:22px;top:34px;width:72px;height:138px;border-radius:28px;background:linear-gradient(180deg,#223248,#101824);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}.speaker .torso:before{content:'';position:absolute;left:28px;top:14px;width:14px;height:40px;background:rgba(255,255,255,.08);clip-path:polygon(0 0,100% 0,66% 100%,34% 100%)}.speaker .arm{position:absolute;top:82px;width:16px;height:96px;border-radius:10px;background:linear-gradient(180deg,#223248,#101824)}.speaker .arm.l{left:8px;transform:rotate(22deg)}.speaker .arm.r{right:8px;transform:rotate(-22deg)}
.mic,.mic.m2{display:none}
.crowd{position:absolute;left:6%;right:36%;bottom:12%;height:52%;display:grid;grid-template-columns:repeat(7,1fr);gap:12px 14px;align-content:end}.person{position:relative;height:108px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.18))}.person:before{content:"";position:absolute;left:50%;top:0;width:24px;height:24px;border-radius:50%;background:#586170;transform:translateX(-50%);box-shadow:0 0 16px rgba(255,255,255,.1)}.person:after{content:"";position:absolute;left:50%;top:22px;width:30px;height:70px;border-radius:16px;background:linear-gradient(180deg,#314255,#1b2838);transform:translateX(-50%);box-shadow:0 0 26px rgba(125,243,255,.14)}.person i,.person b{position:absolute;top:36px;width:8px;height:48px;background:#4a5666;border-radius:6px;transform-origin:top}.person i{left:35%;transform:rotate(-34deg);animation:clapL .55s ease-in-out infinite alternate}.person b{right:35%;transform:rotate(34deg);animation:clapR .55s ease-in-out infinite alternate}.person:nth-child(3n):after{background:linear-gradient(180deg,#274d63,#193245)}.person:nth-child(4n):after{background:linear-gradient(180deg,#4b3357,#2b2036)}.person:nth-child(5n):after{background:linear-gradient(180deg,#5a4a2b,#302518)}@keyframes clapL{to{transform:rotate(-8deg)}}@keyframes clapR{to{transform:rotate(8deg)}}

/* Scene 6 whatsapp */
.desk{position:absolute;left:8%;right:8%;bottom:10%;height:42%;background:linear-gradient(155deg,#38291f,#1b1512);transform:perspective(950px) rotateX(61deg)}
.phone{position:absolute;left:10%;top:18%;width:208px;height:388px;border-radius:36px;background:linear-gradient(180deg,#171d27,#0e1118);border:7px solid #2d3340;box-shadow:0 25px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.04);transform:rotate(-8deg)}.phone:before{content:'';position:absolute;left:50%;top:9px;transform:translateX(-50%);width:74px;height:12px;border-radius:0 0 10px 10px;background:#0b0d13;box-shadow:0 2px 0 rgba(255,255,255,.04)}.phone:after{content:'';position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:46px;height:4px;border-radius:3px;background:rgba(255,255,255,.14)}.phonescreen{position:absolute;inset:14px;border-radius:24px;background:linear-gradient(#0d1517,#0f1c20);box-shadow:inset 0 0 0 1px rgba(125,243,255,.18),0 0 26px rgba(0,0,0,.18)}.bubble{height:32px;border-radius:14px;margin:18px 12px;background:linear-gradient(90deg,#25a07d,#15382b)}.bubble:nth-child(even){margin-left:36px;background:linear-gradient(90deg,#285a89,#17232d)}.chatfloat{position:absolute;left:20%;top:17%;width:200px;height:220px;pointer-events:none}.chatfloat.rightchat{left:auto;right:18%;top:18%;width:164px;height:204px}.midchat{position:absolute;left:41%;top:28%;width:180px;height:150px;pointer-events:none}.msg{position:absolute;display:block;width:112px;height:46px;border-radius:18px;background:linear-gradient(90deg,rgba(36,175,136,.92),rgba(36,122,178,.86));box-shadow:0 14px 26px rgba(0,0,0,.22)}.msg:after{content:'';position:absolute;left:14px;bottom:-8px;width:18px;height:18px;background:inherit;clip-path:polygon(0 0,100% 0,0 100%)}.msg.m1{left:8px;top:126px}.msg.m2{left:72px;top:72px;width:94px;background:linear-gradient(90deg,rgba(36,122,178,.94),rgba(183,92,208,.84))}.msg.m3{left:24px;top:18px;width:124px;background:linear-gradient(90deg,rgba(36,175,136,.94),rgba(255,121,223,.8))}.rightchat .msg:after{left:auto;right:14px;clip-path:polygon(100% 0,100% 100%,0 0)}.rightchat .msg.m1{left:42px;top:116px;background:linear-gradient(90deg,rgba(36,122,178,.94),rgba(183,92,208,.84))}.rightchat .msg.m2{left:6px;top:64px;width:92px;background:linear-gradient(90deg,rgba(36,175,136,.94),rgba(36,122,178,.84))}.rightchat .msg.m3{left:26px;top:14px;width:118px;background:linear-gradient(90deg,rgba(36,175,136,.94),rgba(255,121,223,.8))}.midchat .msg{transform:scale(.72);opacity:.96}.midchat .c1{left:10px;top:54px;background:linear-gradient(90deg,rgba(36,175,136,.9),rgba(36,122,178,.88))}.midchat .c2{left:72px;top:16px;width:94px;background:linear-gradient(90deg,rgba(36,122,178,.94),rgba(255,121,223,.84))}.flowline{position:absolute;left:29%;top:38%;width:42%;height:4px;background:linear-gradient(90deg,rgba(125,243,255,.25),rgba(125,243,255,1),rgba(255,121,223,.78));box-shadow:0 0 18px rgba(125,243,255,.24)}.crm{position:absolute;right:9%;top:15%;width:208px;height:388px;border-radius:36px;background:linear-gradient(180deg,#171d27,#0e1118);border:7px solid #2d3340;box-shadow:0 25px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.04);transform:rotate(8deg)}.crm:before{content:'';position:absolute;left:50%;top:9px;transform:translateX(-50%);width:74px;height:12px;border-radius:0 0 10px 10px;background:#0b0d13;box-shadow:0 2px 0 rgba(255,255,255,.04)}.crm:after{content:'';position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:46px;height:4px;border-radius:3px;background:rgba(255,255,255,.14)}.crmgrid{position:absolute;inset:14px;border-radius:24px;background:linear-gradient(#0d1517,#0f1c20);box-shadow:inset 0 0 0 1px rgba(125,243,255,.18),0 0 26px rgba(0,0,0,.18);padding-top:10px;overflow:hidden}.crmgrid i{display:block;height:32px;border-radius:14px;margin:18px 12px;background:linear-gradient(90deg,#25a07d,#15382b);box-shadow:0 10px 22px rgba(0,0,0,.12)}.crmgrid i:nth-child(even){margin-left:36px;background:linear-gradient(90deg,#285a89,#17232d)}.flowdot{position:absolute;left:49%;top:44%;width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px rgba(125,243,255,.65)}

/* Scene 7 consulting - new concept */
.strategy-room{position:absolute;left:34%;right:4%;top:10%;bottom:8%}
.strategy-room:before{content:"";position:absolute;left:4%;right:0;top:0;bottom:18%;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border-radius:32px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.strategy-wall{position:absolute;left:10%;top:10%;width:58%;height:38%;border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.12));backdrop-filter:blur(14px);box-shadow:0 18px 46px rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,255,255,.35);transform:perspective(1000px) rotateX(8deg)}
.strategy-wall:before{content:'';position:absolute;left:26px;right:26px;top:22px;height:10px;background:rgba(8,12,18,.12);box-shadow:0 20px 0 rgba(8,12,18,.08)}
.kpi-bars{position:absolute;left:34px;right:220px;bottom:28px;height:120px;display:flex;align-items:flex-end;gap:18px}
.kpi-bars i{display:block;flex:1;border-radius:14px 14px 6px 6px;background:linear-gradient(180deg,rgba(125,243,255,.95),rgba(32,62,70,.82));box-shadow:0 10px 24px rgba(0,0,0,.12)}
.kpi-bars i:nth-child(1){height:36%}.kpi-bars i:nth-child(2){height:54%;background:linear-gradient(180deg,rgba(255,121,223,.9),rgba(75,35,67,.84))}.kpi-bars i:nth-child(3){height:76%;background:linear-gradient(180deg,rgba(215,180,122,.95),rgba(88,64,29,.84))}.kpi-bars i:nth-child(4){height:92%}
.growth-line{position:absolute;left:54px;right:118px;top:98px;height:120px;pointer-events:none}
.growth-line svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 12px rgba(125,243,255,.18))}
.strategy-arc{position:absolute;right:6%;top:14%;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,121,223,.15),transparent 56%);filter:blur(8px)}
.strategy-ring{position:absolute;right:7%;top:18%;width:150px;height:150px;border-radius:50%;border:2px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 18px rgba(255,255,255,.04),inset 0 0 0 42px rgba(125,243,255,.05)}
.strategy-ring:before,.strategy-ring:after{content:'';position:absolute;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px rgba(125,243,255,.4)}
.strategy-ring:before{left:16px;top:64px;width:12px;height:12px}.strategy-ring:after{right:18px;top:30px;width:10px;height:10px;background:var(--pink);box-shadow:0 0 14px rgba(255,121,223,.35),-42px 80px 0 0 var(--gold)}
.strategy-desk{position:absolute;left:6%;right:0;bottom:8%;height:34%;background:linear-gradient(155deg,#3b2b21,#1a1411);transform:perspective(1050px) rotateX(64deg);box-shadow:0 34px 80px rgba(0,0,0,.38)}
.blueprint{position:absolute;left:14%;bottom:22%;width:248px;height:160px;background:linear-gradient(145deg,#f0ebe2,#d9d4ca);box-shadow:0 22px 40px rgba(0,0,0,.22);transform:rotate(-10deg)}
.blueprint:before{content:'';position:absolute;inset:18px;border:2px dashed rgba(33,45,63,.28);border-radius:12px;background:repeating-linear-gradient(90deg,transparent 0 26px,rgba(33,45,63,.08) 27px 28px),repeating-linear-gradient(transparent 0 26px,rgba(33,45,63,.08) 27px 28px)}
.blueprint:after{content:'';position:absolute;left:36px;top:40px;width:140px;height:74px;border:3px solid rgba(255,121,223,.55);border-radius:18px 18px 34px 18px;transform:rotate(-8deg)}
.consult-disk{position:absolute;right:4%;bottom:20%;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(10,12,18,.08) 0 28%,transparent 29%),radial-gradient(circle,rgba(125,243,255,.18),transparent 64%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),inset 0 0 0 32px rgba(255,255,255,.04),inset 0 0 0 64px rgba(255,121,223,.03)}
.consult-disk .node{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--cyan);box-shadow:0 0 16px rgba(125,243,255,.35)}
.consult-disk .node.n1{left:22px;top:124px}.consult-disk .node.n2{left:96px;top:38px;background:var(--pink);box-shadow:0 0 16px rgba(255,121,223,.3)}.consult-disk .node.n3{right:34px;top:74px;background:var(--gold);box-shadow:0 0 16px rgba(215,180,122,.3)}.consult-disk .node.n4{right:72px;bottom:38px}
.consult-disk .track{position:absolute;left:42px;top:40px;width:176px;height:176px;border:2px dashed rgba(255,255,255,.16);border-radius:50%}
.consult-tag{position:absolute;right:0;bottom:18%;width:120px;height:74px;border-radius:18px;background:linear-gradient(145deg,rgba(20,29,44,.95),rgba(13,18,28,.88));box-shadow:0 18px 34px rgba(0,0,0,.2),inset 0 0 0 1px rgba(255,255,255,.04)}
.consult-tag:before{content:'';position:absolute;left:16px;right:34px;top:18px;height:8px;background:rgba(255,255,255,.16);box-shadow:0 18px 0 rgba(255,255,255,.08)}
.consult-tag:after{content:'';position:absolute;right:16px;bottom:16px;width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,var(--gold),#7a6030)}

/* Scene 8 web - new concept */
.webstage{position:absolute;inset:8% 7% 10% 8%}
.webstage:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 18%,rgba(125,243,255,.08),transparent 22%),radial-gradient(circle at 84% 24%,rgba(255,121,223,.08),transparent 20%);pointer-events:none}
.browser-layer{position:absolute;border-radius:26px;background:linear-gradient(145deg,rgba(22,28,40,.82),rgba(10,14,22,.78));box-shadow:0 26px 50px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.04)}
.browser-layer.l1{left:18%;top:16%;width:520px;height:300px;transform:rotate(-8deg)}
.browser-layer.l2{left:22%;top:20%;width:520px;height:300px;transform:rotate(-3deg);opacity:.82}
.browser-main{position:absolute;left:20%;top:18%;width:540px;height:320px;border-radius:28px;background:linear-gradient(145deg,#0f141d,#0a0d15);box-shadow:0 34px 70px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.04);transform:rotate(3deg);overflow:hidden}
.browser-main:before{content:'';position:absolute;left:0;right:0;top:0;height:44px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:0 1px 0 rgba(255,255,255,.04)}
.browser-main:after{content:'';position:absolute;left:18px;top:15px;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25);box-shadow:16px 0 0 rgba(255,255,255,.18),32px 0 0 rgba(255,255,255,.12)}
.browser-content{position:absolute;inset:58px 18px 18px;display:grid;grid-template-columns:1.2fr .9fr;grid-template-rows:130px 1fr;gap:18px}
.browser-hero{position:relative;border-radius:22px;background:linear-gradient(135deg,#1a2233,#28172d);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.browser-hero:before{content:'';position:absolute;left:22px;top:22px;width:56%;height:14px;background:rgba(255,255,255,.18);box-shadow:0 28px 0 rgba(255,255,255,.1),0 56px 0 rgba(255,255,255,.07)}
.browser-hero:after{content:'';position:absolute;left:22px;bottom:20px;width:122px;height:30px;border-radius:18px;background:linear-gradient(90deg,var(--gold),#806539)}
.browser-form{position:relative;border-radius:22px;background:linear-gradient(135deg,#101823,#152534)}
.browser-form:before{content:'';position:absolute;left:20px;top:20px;width:68%;height:12px;background:rgba(255,255,255,.16);box-shadow:0 26px 0 rgba(255,255,255,.08),0 52px 0 rgba(255,255,255,.08),0 78px 0 rgba(255,255,255,.08)}
.browser-form:after{content:'';position:absolute;left:20px;bottom:20px;width:84px;height:28px;border-radius:14px;background:linear-gradient(90deg,var(--cyan),#2d5a67)}
.browser-grid{position:relative;border-radius:22px;background:linear-gradient(145deg,#111724,#0e1420);grid-column:1/3;overflow:hidden}
.browser-grid:before{content:'';position:absolute;left:20px;right:20px;top:22px;height:10px;background:rgba(255,255,255,.12);box-shadow:0 24px 0 rgba(255,255,255,.07)}
.browser-grid:after{content:'';position:absolute;left:20px;right:20px;bottom:20px;height:96px;background:linear-gradient(90deg,rgba(125,243,255,.18) 0 28%,transparent 28% 34%,rgba(255,121,223,.16) 34% 60%,transparent 60% 66%,rgba(215,180,122,.18) 66% 100%);border-radius:18px}
.module-float{position:absolute;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));backdrop-filter:blur(6px);box-shadow:0 18px 38px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.04)}
.module-float:before{content:'';position:absolute;left:14px;right:28px;top:14px;height:8px;background:rgba(255,255,255,.14);box-shadow:0 16px 0 rgba(255,255,255,.08)}
.module-float.m1{right:12%;top:18%;width:176px;height:92px}
.module-float.m2{right:8%;top:36%;width:132px;height:72px}
.module-float.m3{right:16%;top:52%;width:164px;height:84px}
.phone-stack{position:absolute;left:8%;bottom:14%;width:180px;height:330px;border-radius:30px;background:#141922;border:7px solid #202633;box-shadow:0 24px 54px rgba(0,0,0,.4);transform:rotate(-8deg);overflow:hidden}
.phone-stack:before{content:'';position:absolute;left:50%;top:8px;transform:translateX(-50%);width:72px;height:12px;border-radius:0 0 10px 10px;background:#0b0d13}.phone-stack:after{content:'';position:absolute;inset:14px;border-radius:20px;background:linear-gradient(135deg,#0d121a,#201529)}
.phone-stack .mob{position:absolute;z-index:2;border-radius:14px;background:linear-gradient(90deg,rgba(36,175,136,.92),rgba(36,122,178,.86));box-shadow:0 12px 20px rgba(0,0,0,.18)}
.phone-stack .mob.one{left:26px;top:54px;width:96px;height:22px}.phone-stack .mob.two{right:24px;top:94px;width:74px;height:20px;background:linear-gradient(90deg,rgba(255,121,223,.82),rgba(125,243,255,.78))}.phone-stack .mob.three{left:26px;top:138px;width:122px;height:22px}.phone-stack .mob.four{left:26px;bottom:54px;width:84px;height:24px;background:linear-gradient(90deg,var(--gold),#886633)}
.web-cursor{position:absolute;right:18%;bottom:16%;width:54px;height:74px;clip-path:polygon(0 0,100% 56%,58% 62%,72% 100%,48% 100%,36% 68%,0 78%);background:linear-gradient(180deg,#fff,#cdd4df);filter:drop-shadow(0 10px 20px rgba(0,0,0,.25))}
.web-gridlines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 94px,rgba(255,255,255,.03) 95px 96px),repeating-linear-gradient(transparent 0 94px,rgba(255,255,255,.03) 95px 96px);opacity:.4}

/* Scene 9 calls - new concept */
.callhub{position:absolute;inset:9% 8% 10% 8%}
.callhub:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 24%,rgba(125,243,255,.08),transparent 22%),radial-gradient(circle at 82% 22%,rgba(255,121,223,.08),transparent 22%);pointer-events:none}
.support-ring{position:absolute;left:6%;top:18%;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.06) 0 18%,transparent 19%),radial-gradient(circle at 50% 50%,rgba(125,243,255,.18),transparent 66%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),inset 0 0 0 34px rgba(255,255,255,.03),inset 0 0 0 68px rgba(255,121,223,.03)}
.support-ring:before{content:'';position:absolute;inset:28px;border-radius:50%;border:2px dashed rgba(255,255,255,.14)}
.support-ring:after{content:'';position:absolute;left:50%;top:50%;width:76px;height:76px;border-radius:50%;transform:translate(-50%,-50%);background:linear-gradient(180deg,#192334,#101720);box-shadow:0 0 0 12px rgba(255,255,255,.04)}
.support-ring .pulse{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 16px rgba(125,243,255,.35)}
.support-ring .pulse.p1{left:20px;top:112px}.support-ring .pulse.p2{left:98px;top:26px;background:var(--pink);box-shadow:0 0 16px rgba(255,121,223,.35)}.support-ring .pulse.p3{right:26px;top:68px;background:var(--gold);box-shadow:0 0 16px rgba(215,180,122,.35)}.support-ring .pulse.p4{right:88px;bottom:28px}
.phone-node{position:absolute;left:14%;bottom:16%;width:170px;height:104px;border-radius:24px;background:linear-gradient(145deg,#151f2d,#0f1723);box-shadow:0 20px 42px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.05)}
.phone-node:before{content:'';position:absolute;left:22px;top:18px;width:70px;height:14px;background:rgba(255,255,255,.16);box-shadow:0 22px 0 rgba(255,255,255,.08)}
.phone-node:after{content:'';position:absolute;right:26px;top:26px;width:34px;height:34px;border:7px solid var(--cyan);border-left-color:transparent;border-top-color:transparent;border-radius:14px;transform:rotate(45deg)}
.operator-hub{position:absolute;left:38%;top:18%;width:250px;height:280px;border-radius:32px;background:linear-gradient(180deg,rgba(16,20,28,.74),rgba(13,18,25,.82));box-shadow:0 28px 60px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.04)}
.operator-hub:before{content:'';position:absolute;left:18px;right:18px;bottom:18px;height:46px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
.operator{position:absolute;left:50%;top:50%;width:170px;height:220px;transform:translate(-50%,-44%);filter:drop-shadow(0 18px 26px rgba(0,0,0,.22))}
.operator .head{position:absolute;left:54px;top:0;width:62px;height:62px;border-radius:50%;background:linear-gradient(180deg,#8b94a5,#596273)}
.operator .body{position:absolute;left:28px;top:68px;width:114px;height:120px;border-radius:54px 54px 34px 34px;background:linear-gradient(180deg,#243449,#132238)}
.operator .body:before{content:'';position:absolute;left:46px;top:22px;width:22px;height:42px;background:rgba(255,255,255,.12);clip-path:polygon(0 0,100% 0,68% 100%,32% 100%)}
.operator .ear{position:absolute;top:42px;width:30px;height:78px;border-radius:18px;background:#1a202b}.operator .ear.l{left:10px}.operator .ear.r{right:10px}.operator .ear:before{content:'';position:absolute;left:-10px;right:-10px;top:-16px;height:44px;border:10px solid #1a202b;border-bottom:none;border-radius:30px 30px 0 0}.operator .mic{position:absolute;left:24px;top:108px;width:78px;height:8px;border-radius:4px;background:linear-gradient(90deg,#1a202b,#7c8497);transform:rotate(18deg)}.operator .mic:after{content:'';position:absolute;right:-4px;top:-4px;width:16px;height:16px;border-radius:50%;background:#d2d8e0}
.flow-rail{position:absolute;left:30%;top:40%;width:44%;height:8px;border-radius:999px;background:linear-gradient(90deg,rgba(125,243,255,.2),rgba(125,243,255,.95),rgba(255,121,223,.8),rgba(215,180,122,.85));box-shadow:0 0 18px rgba(125,243,255,.18)}
.flow-rail:before,.flow-rail:after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;top:50%;transform:translateY(-50%);background:var(--cyan);box-shadow:0 0 18px rgba(125,243,255,.35)}.flow-rail:before{left:24%}.flow-rail:after{right:18%;background:var(--gold);box-shadow:0 0 18px rgba(215,180,122,.35)}
.agenda-panel{position:absolute;right:8%;top:16%;width:280px;height:300px;border-radius:30px;background:linear-gradient(145deg,#10151d,#0b0f16);box-shadow:0 30px 62px rgba(0,0,0,.36),inset 0 0 0 1px rgba(255,255,255,.05)}
.agenda-panel:before{content:'';position:absolute;left:20px;top:18px;width:44%;height:12px;background:rgba(255,255,255,.16);box-shadow:0 24px 0 rgba(255,255,255,.08)}
.agenda-grid{position:absolute;left:20px;right:20px;top:76px;bottom:20px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:12px}
.agenda-grid i{display:block;border-radius:12px;background:rgba(125,243,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.agenda-grid i.active{background:var(--gold);box-shadow:0 0 18px rgba(215,180,122,.18)}
.status-pill{position:absolute;border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:0 14px 26px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.04)}
.status-pill:before{content:'';position:absolute;left:14px;right:26px;top:14px;height:8px;background:rgba(255,255,255,.14);box-shadow:0 16px 0 rgba(255,255,255,.08)}
.status-pill.s1{right:18%;bottom:18%;width:160px;height:74px}.status-pill.s2{left:42%;bottom:18%;width:180px;height:84px}
.status-pill:after{content:'';position:absolute;right:14px;bottom:14px;width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,var(--pink),#6f2d62)}
.status-pill.s1:after{background:linear-gradient(180deg,var(--gold),#82652e)}
.support-shadow{position:absolute;left:20%;right:16%;bottom:8%;height:26%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.14));filter:blur(22px)}

/* Scene 10 final */
.final-orb{position:absolute;left:50%;top:50%;width:180px;height:180px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0 6%,#d7b47a 7% 16%,#19202a 17% 52%,#08090d 53%);box-shadow:0 0 80px rgba(215,180,122,.25)}


/* === OVERRIDES ESCENAS 4, 6, 7 Y 10 === */
/* Escena 4: quitar cuadro blanco grande y conservar la estructura */
.structure-board,
.structure-board:before,
.structure-board:after{display:none !important}

/* Escena 6: más puntos de comunicación moviéndose en ambas direcciones */
.flowdot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px rgba(125,243,255,.65),0 0 30px rgba(125,243,255,.22)}
.flowdot.d1{left:48%;top:44%}
.flowdot.d2{left:56%;top:39%;width:10px;height:10px;background:var(--pink);box-shadow:0 0 16px rgba(255,121,223,.55),0 0 26px rgba(255,121,223,.18)}
.flowdot.d3{left:41%;top:36%;width:12px;height:12px}
.flowdot.d4{left:60%;top:49%;width:9px;height:9px;background:var(--gold);box-shadow:0 0 16px rgba(215,180,122,.48),0 0 26px rgba(215,180,122,.14)}
.flowdot.d5{left:52%;top:33%;width:8px;height:8px;background:var(--cyan)}
.flowdot.d6{left:46%;top:31%;width:11px;height:11px;background:var(--cyan)}
.flowdot.d7{left:58%;top:35%;width:7px;height:7px;background:var(--cyan)}
.flowdot.d8{left:43%;top:47%;width:8px;height:8px;background:var(--pink);box-shadow:0 0 14px rgba(255,121,223,.45),0 0 24px rgba(255,121,223,.15)}
.flowdot.d9{left:63%;top:42%;width:15px;height:15px;background:rgba(125,243,255,.56);box-shadow:0 0 22px rgba(125,243,255,.30),0 0 34px rgba(125,243,255,.12)}
.flowdot.d10{left:65%;top:55%;width:9px;height:9px;background:var(--gold);box-shadow:0 0 16px rgba(215,180,122,.50),0 0 24px rgba(215,180,122,.15)}
.scene.active .flowdot.d1{animation:flowAcross 3.2s ease-in-out infinite}
.scene.active .flowdot.d2{animation:flowAcrossReverse 3.8s ease-in-out infinite}
.scene.active .flowdot.d3{animation:flowAcrossLong 4.4s ease-in-out infinite}
.scene.active .flowdot.d4{animation:flowAcrossReverse 4.8s .4s ease-in-out infinite}
.scene.active .flowdot.d5{animation:flowAcross 5.2s .8s ease-in-out infinite}
.scene.active .flowdot.d6{animation:flowAcrossLong 4.9s .2s ease-in-out infinite}
.scene.active .flowdot.d7{animation:flowAcross 3.5s 1.1s ease-in-out infinite}
.scene.active .flowdot.d8{animation:flowAcrossReverse 4.1s .7s ease-in-out infinite}
.scene.active .flowdot.d9{animation:flowAcrossLong 5.4s 1.2s ease-in-out infinite}
.scene.active .flowdot.d10{animation:flowAcrossReverse 5.8s .9s ease-in-out infinite}
@keyframes flowAcross{0%{transform:translate(-150px,18px) scale(.7);opacity:.16}50%{opacity:1}100%{transform:translate(170px,-26px) scale(1.1);opacity:.18}}
@keyframes flowAcrossReverse{0%{transform:translate(150px,-18px) scale(1.1);opacity:.18}50%{opacity:1}100%{transform:translate(-170px,26px) scale(.7);opacity:.18}}
@keyframes flowAcrossLong{0%{transform:translate(-180px,0) scale(.58);opacity:.16}40%{opacity:1}100%{transform:translate(205px,-34px) scale(1.18);opacity:.2}}

/* Escena 7: quitar cuadro blanco y dejar el gráfico vivo */
.strategy-wall{background:transparent !important;backdrop-filter:none !important;box-shadow:none !important;border:none !important;transform:none !important}
.strategy-wall:before{content:'';position:absolute;left:6px;top:10px;width:calc(120px + 440px * var(--local));height:8px;border-radius:999px;background:rgba(8,12,18,.10);box-shadow:0 22px 0 rgba(8,12,18,.08),0 44px 0 rgba(8,12,18,.06),0 66px 0 rgba(8,12,18,.045);opacity:calc(.14 + .44 * var(--local));transform-origin:left center;transform:scaleX(calc(.14 + .86 * var(--local)))}
.kpi-bars{left:0 !important;right:auto !important;width:420px;bottom:32px}
.kpi-bars i{transform-origin:bottom center;transform:scaleY(calc(.2 + .8 * var(--local)));opacity:calc(.18 + .82 * var(--local));will-change:transform,opacity}
.growth-line{left:0 !important;right:auto !important;width:430px;top:52px}
.growth-line svg{transform-origin:left center;transform:scaleX(calc(.12 + .88 * var(--local)));opacity:calc(.08 + .92 * var(--local));will-change:transform,opacity}
.scene.active .strategy-wall{animation:none !important}
.scene.active .kpi-bars i:nth-child(1),
.scene.active .kpi-bars i:nth-child(2),
.scene.active .kpi-bars i:nth-child(3),
.scene.active .kpi-bars i:nth-child(4){animation:none !important}

/* Escena 10: más botones amarillos alrededor del núcleo */
.final-pill{position:absolute;width:98px;height:42px;border-radius:22px;background:linear-gradient(145deg,#10151d,#0b0f16);box-shadow:0 18px 38px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.05);opacity:.92}
.final-pill:before{content:'';position:absolute;left:14px;top:14px;width:52px;height:13px;border-radius:999px;background:linear-gradient(90deg,#f9e6a8,#d7b47a);box-shadow:0 0 16px rgba(215,180,122,.26)}
.final-pill:after{content:'';position:absolute;right:14px;top:13px;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.14)}
.final-pill.p1{left:20%;top:26%}
.final-pill.p2{right:18%;top:24%;width:84px}
.final-pill.p3{left:18%;bottom:22%;width:90px}
.final-pill.p4{right:16%;bottom:20%;width:104px}
.final-pill.p5{left:50%;top:16%;transform:translateX(-50%);width:78px;height:38px}
.scene.active .final-pill.p1{animation:finalPill1 5.4s ease-in-out infinite}
.scene.active .final-pill.p2{animation:finalPill2 6.2s ease-in-out infinite}
.scene.active .final-pill.p3{animation:finalPill3 5.8s ease-in-out infinite}
.scene.active .final-pill.p4{animation:finalPill4 6.6s ease-in-out infinite}
.scene.active .final-pill.p5{animation:finalPill5 4.8s ease-in-out infinite}
@keyframes finalPill1{50%{transform:translate(18px,-10px) scale(1.05)}}
@keyframes finalPill2{50%{transform:translate(-20px,12px) scale(1.08)}}
@keyframes finalPill3{50%{transform:translate(24px,14px) scale(.97)}}
@keyframes finalPill4{50%{transform:translate(-22px,-12px) scale(1.04)}}
@keyframes finalPill5{50%{transform:translateX(-50%) translateY(10px) scale(1.05)}}


/* === AJUSTE FINO ESCENA 4 Y ESCENA 7 === */
/* Escena 4: tarjetas negras entran desde fuera, grandes a chicas, y quedan visibles */
.scene[data-stage="3"] .structure-card{opacity:calc(.24 + .76 * var(--local));will-change:transform,opacity}
.scene[data-stage="3"] .structure-card.c1{transform:translate(calc((1 - var(--local)) * -220px),calc((1 - var(--local)) * -120px)) scale(calc(2.25 - 1.25 * var(--local))) rotate(-7deg)}
.scene[data-stage="3"] .structure-card.c2{transform:translate(calc((1 - var(--local)) * 230px),calc((1 - var(--local)) * -120px)) scale(calc(2.15 - 1.15 * var(--local))) rotate(6deg)}
.scene[data-stage="3"] .structure-card.c3{transform:translate(calc((1 - var(--local)) * -180px),calc((1 - var(--local)) * 90px)) scale(calc(2.1 - 1.1 * var(--local))) rotate(8deg)}
.scene[data-stage="3"] .structure-card.c4{transform:translate(calc((1 - var(--local)) * 190px),calc((1 - var(--local)) * 86px)) scale(calc(2.08 - 1.08 * var(--local))) rotate(-6deg)}
.scene[data-stage="3"] .structure-path{transform-origin:left center;opacity:calc(.12 + .88 * var(--local))}
.scene[data-stage="3"] .structure-path.p1{transform:rotate(4deg) scaleX(calc(.15 + .85 * var(--local)))}
.scene[data-stage="3"] .structure-path.p2{transform:rotate(-8deg) scaleX(calc(.15 + .85 * var(--local)))}
.scene[data-stage="3"] .structure-path.p3{transform:rotate(-12deg) scaleX(calc(.15 + .85 * var(--local)))}
.scene[data-stage="3"] .structure-path.p4{transform:rotate(10deg) scaleX(calc(.15 + .85 * var(--local)))}
.scene[data-stage="3"] .structure-node{transform:scale(calc(.45 + .55 * var(--local)));opacity:calc(.2 + .8 * var(--local))}
.scene[data-stage="3"] .structure-ring{opacity:calc(.16 + .84 * var(--local));transform:scale(calc(.8 + .2 * var(--local)))}
.scene[data-stage="3"] .structure-dash{opacity:calc(.1 + .9 * var(--local));transform:rotate(calc(-18deg + 18deg * var(--local))) scale(calc(.82 + .18 * var(--local)))}

/* Escena 7: conservar movimiento actual y sumar dos líneas más al gráfico */
.growth-line.gl1{left:0 !important;top:52px !important;width:560px !important}
.kpi-bars.kpi-bars-extended{left:0 !important;right:auto !important;width:560px !important;bottom:32px !important;height:112px !important;gap:14px !important}
.kpi-bars.kpi-bars-extended i{transform-origin:bottom center;transform:scaleY(calc(.2 + .8 * var(--local)));opacity:calc(.22 + .78 * var(--local));will-change:transform,opacity}
.kpi-bars.kpi-bars-extended i:nth-child(1){height:26%;background:linear-gradient(180deg,rgba(125,243,255,.95),rgba(32,62,70,.82))}
.kpi-bars.kpi-bars-extended i:nth-child(2){height:40%;background:linear-gradient(180deg,rgba(255,121,223,.92),rgba(75,35,67,.84))}
.kpi-bars.kpi-bars-extended i:nth-child(3){height:56%;background:linear-gradient(180deg,rgba(215,180,122,.95),rgba(88,64,29,.84))}
.kpi-bars.kpi-bars-extended i:nth-child(4){height:72%;background:linear-gradient(180deg,rgba(125,243,255,.95),rgba(32,62,70,.82))}
.kpi-bars.kpi-bars-extended i:nth-child(5){height:82%;background:linear-gradient(180deg,rgba(255,121,223,.92),rgba(75,35,67,.84))}
.kpi-bars.kpi-bars-extended i:nth-child(6){height:90%;background:linear-gradient(180deg,rgba(215,180,122,.95),rgba(88,64,29,.84))}
.kpi-bars.kpi-bars-extended i:nth-child(7){height:100%;background:linear-gradient(180deg,rgba(125,243,255,.95),rgba(32,62,70,.82))}
.scene.active .growth-line.gl1{animation:lineFloatA 5.2s ease-in-out infinite}
.scene.active .kpi-bars.kpi-bars-extended{animation:lineFloatB 6.2s ease-in-out infinite}
.scene.active .kpi-bars.kpi-bars-extended i:nth-child(1){animation:barPulse 2.4s ease-in-out infinite}
.scene.active .kpi-bars.kpi-bars-extended i:nth-child(2){animation:barPulse 2.4s .2s ease-in-out infinite}
.scene.active .kpi-bars.kpi-bars-extended i:nth-child(3){animation:barPulse 2.4s .4s ease-in-out infinite}
.scene.active .kpi-bars.kpi-bars-extended i:nth-child(4){animation:barPulse 2.4s .6s ease-in-out infinite}
.scene.active .kpi-bars.kpi-bars-extended i:nth-child(5){animation:barPulse 2.4s .8s ease-in-out infinite}
.scene.active .kpi-bars.kpi-bars-extended i:nth-child(6){animation:barPulse 2.4s 1s ease-in-out infinite}
.scene.active .kpi-bars.kpi-bars-extended i:nth-child(7){animation:barPulse 2.4s 1.2s ease-in-out infinite}
@keyframes lineFloatA{50%{transform:translateY(-3px)}}
@keyframes lineFloatB{50%{transform:translate(8px,-7px)}}
@keyframes lineFloatC{50%{transform:translate(6px,7px)}}

@media(max-width:760px){
  .scene[data-stage="3"] .structure-card.c1{transform:translate(calc((1 - var(--local)) * -150px),calc((1 - var(--local)) * -90px)) scale(calc(1.8 - .8 * var(--local))) rotate(-7deg)}
  .scene[data-stage="3"] .structure-card.c2{transform:translate(calc((1 - var(--local)) * 150px),calc((1 - var(--local)) * -88px)) scale(calc(1.76 - .76 * var(--local))) rotate(6deg)}
  .scene[data-stage="3"] .structure-card.c3{transform:translate(calc((1 - var(--local)) * -130px),calc((1 - var(--local)) * 74px)) scale(calc(1.72 - .72 * var(--local))) rotate(8deg)}
  .scene[data-stage="3"] .structure-card.c4{transform:translate(calc((1 - var(--local)) * 132px),calc((1 - var(--local)) * 72px)) scale(calc(1.7 - .7 * var(--local))) rotate(-6deg)}
  .growth-line.gl1{width:330px !important;top:42px !important;left:10px !important}
  .kpi-bars.kpi-bars-extended{width:330px !important;left:8px !important;bottom:18px !important;height:86px !important;gap:8px !important}
}

@media(max-width:760px){
  .strategy-wall{left:4%;top:12%;width:90%;height:24%}
  .strategy-wall:before{left:8px;top:4px;width:calc(90px + 240px * var(--local));height:6px;box-shadow:0 16px 0 rgba(8,12,18,.08),0 32px 0 rgba(8,12,18,.06),0 48px 0 rgba(8,12,18,.045)}
  .kpi-bars{width:250px !important;left:8px !important;bottom:18px !important;gap:10px !important;height:86px !important}
  .growth-line{width:260px !important;left:10px !important;top:42px !important;height:88px !important}
  .final-pill{transform:scale(.78)}
  .final-pill.p1{left:6%;top:30%}
  .final-pill.p2{right:4%;top:28%}
  .final-pill.p3{left:8%;bottom:26%}
  .final-pill.p4{right:4%;bottom:22%}
  .final-pill.p5{top:18%}
}

@media(max-width:760px){.links{display:none}.nav{grid-template-columns:auto 1fr auto}.act{min-height:138svh;padding:80px 12px 20px}.sticky{align-items:flex-end}.copy,.copy.right{width:100%;margin:0;padding:18px 16px;border-radius:18px;background:linear-gradient(180deg,rgba(5,5,8,.28),rgba(5,5,8,.88))}.project-slider-card{width:100%;margin:0;padding:16px;border-radius:18px;background:linear-gradient(145deg,rgba(118,116,126,.30),rgba(46,43,51,.46));backdrop-filter:blur(18px);box-shadow:0 22px 46px rgba(0,0,0,.18)}.project-intro{margin:2px 0 14px}.project-intro h2{font-size:clamp(32px,11vw,48px)}.project-intro p{font-size:13px}.project-slider{min-height:260px;background:linear-gradient(180deg,rgba(14,14,20,.20),rgba(14,14,20,.08))}.slider-track{padding:14px;gap:14px}.project-slide{flex-basis:78vw;height:228px;padding:18px}.project-slide h3{max-width:100%;font-size:30px}.project-slide p{max-width:100%;font-size:13px}.copy h1{font-size:clamp(52px,15vw,78px)}.copy h2{font-size:clamp(42px,12vw,64px)}.camera-rig{right:50%;transform:translateX(50%) scale(.78) rotateY(-6deg);top:7%}.softbox{display:none}.structure-field{inset:8% 1% 12%}.structure-grid{inset:6% 0 12%;border-radius:28px}.structure-board{left:8%;right:8%;top:18%;height:24%}.structure-board:before{left:18px;right:18px;top:16px;height:8px;box-shadow:0 16px 0 rgba(20,26,36,.08)}.structure-board:after{left:16px;right:16px;bottom:18px;height:68px}.structure-lane{left:0;right:0;bottom:22%;height:18%}.structure-card{width:104px;height:68px;border-radius:18px}.structure-card:before{left:12px;top:12px;right:12px;height:5px;box-shadow:0 12px 0 rgba(255,255,255,.08)}.structure-card:after{right:12px;bottom:10px;width:30px;height:8px}.structure-card.c1{left:2%;top:26%}.structure-card.c2{right:2%;top:24%}.structure-card.c3{left:6%;bottom:32%}.structure-card.c4{right:8%;bottom:29%}.structure-path.p1{left:22%;top:35%;width:16%}.structure-path.p2{right:22%;top:35%;width:14%}.structure-path.p3{left:25%;bottom:35%;width:14%}.structure-path.p4{right:26%;bottom:33%;width:13%}.structure-node{width:10px;height:10px}.structure-node.n1{left:39%;top:34%}.structure-node.n2{right:39%;top:34%}.structure-node.n3{left:40%;bottom:34%}.structure-node.n4{right:41%;bottom:33%}.structure-ring{right:6%;bottom:26%;width:118px;height:118px;box-shadow:inset 0 0 0 10px rgba(255,255,255,.05),inset 0 0 0 28px rgba(125,243,255,.05)}.structure-dash{left:40%;top:26%;width:78px;height:78px}.hero-photo{width:190px;height:138px;top:31%}.wind-photo{width:140px;height:100px}.w1{left:-3%;top:30%}.w2{left:24%;top:12%}.w3{left:58%;top:13%}.w4{right:-4%;top:34%}.crowd{left:2%;right:38%;grid-template-columns:repeat(5,1fr);gap:4px}.audience-glow{right:30%;height:58%}.podium{right:8%;bottom:22%;transform:scale(.78)}.speaker{right:12%;bottom:31%;transform:scale(.72)}.phone{left:0;top:14%;transform:scale(.58) rotate(-8deg);transform-origin:top left}.chatfloat{left:18%;top:20%;transform:scale(.78);transform-origin:top left}.flowline{left:24%;top:34%;width:18%}.crm{right:1%;top:12%;width:33vw;height:39vh}.consult-chip,.consult-note{transform:scale(.76)}.consult-chip.c1{right:14%;top:12%}.consult-chip.c2{right:4%;top:22%}.consult-chip.c3{right:10%;top:34%}.consult-note.n1{right:8%;top:12%}.consult-note.n2{right:2%;top:24%}.laptop{left:26%;top:14%;transform:scale(.76);transform-origin:top left}.paper{transform:scale(.7) rotate(-9deg)}.monitor{left:2%;top:10%;width:74vw;height:40vh}.webdesk{display:none}.web-card{transform:scale(.78)}.web-card.wc1{left:44%;top:18%}.web-card.wc2{left:48%;top:32%}.web-card.wc3{left:52%;top:48%}.phoneweb{right:2%;top:15%;transform:scale(.64);transform-origin:top right}.phone-call{left:24%;top:18%;transform:scale(.72);transform-origin:top left}.route.one{left:39%;top:36%;width:54px}.route.two{left:49%;top:36%;width:72px}.call-screen{right:5%;top:16%;width:46vw;height:28vh}.headset{left:2%;top:18%;transform:scale(.64) rotate(-10deg);transform-origin:top left}.call-card{left:34%;top:48%;transform:scale(.68);transform-origin:top left}.confirm-card{left:47%;top:50%;transform:scale(.68);transform-origin:top left}.agent-panel{right:8%;top:24%;width:38vw;height:24vh}.agent{right:10%;top:27%;transform:scale(.62);transform-origin:top right}.wave{left:26%;top:36%;width:180px}.act[data-scene="2"]{padding-top:26px;min-height:118svh}.act[data-scene="2"] .sticky{align-items:flex-start}.act[data-scene="2"] .project-slider-card{margin-top:48vh}.act[data-scene="2"] .project-intro h2 em{display:inline}.act[data-scene="5"] .chatfloat{left:10%;top:10%;transform:scale(.62);transform-origin:top left}.act[data-scene="5"] .chatfloat.rightchat{right:4%;top:12%;transform:scale(.58);transform-origin:top right}.act[data-scene="5"] .flowline{left:26%;top:27%;width:44%}.act[data-scene="8"] .headset{opacity:.18;left:-8%;top:10%;transform:scale(.52) rotate(-10deg);transform-origin:top left}.act[data-scene="8"] .call-screen{right:4%;top:12%;width:48vw;height:30vh;opacity:.52}.act[data-scene="8"] .agent-panel{right:5%;top:15%;width:42vw;height:27vh;opacity:.9}.act[data-scene="8"] .agent{right:8%;top:18%;transform:scale(.66);transform-origin:top right}.act[data-scene="8"] .phone-call{left:18%;top:16%;transform:scale(.68);transform-origin:top left}.act[data-scene="8"] .call-card{left:31%;top:52%}.act[data-scene="8"] .confirm-card{left:48%;top:54%}.strategy-room{inset:10% 4% 8% 4%}.strategy-wall{left:4%;top:10%;width:86%;height:28%}.kpi-bars{left:18px;right:110px;bottom:20px;height:92px;gap:10px}.growth-line{left:26px;right:60px;top:78px;height:92px}.strategy-arc{right:2%;top:10%;width:120px;height:120px}.strategy-ring{right:4%;top:16%;width:96px;height:96px;box-shadow:inset 0 0 0 12px rgba(255,255,255,.04),inset 0 0 0 28px rgba(125,243,255,.05)}.strategy-desk{left:0;right:0;bottom:16%;height:22%}.blueprint{left:2%;bottom:24%;width:160px;height:108px}.consult-disk{right:4%;bottom:20%;width:178px;height:178px}.consult-disk .track{left:28px;top:28px;width:122px;height:122px}.consult-tag{right:4%;bottom:18%;width:88px;height:56px}.webstage{inset:10% 3% 10% 3%}.browser-layer.l1{left:8%;top:16%;width:68vw;height:22vh}.browser-layer.l2{left:11%;top:19%;width:68vw;height:22vh}.browser-main{left:10%;top:18%;width:72vw;height:24vh}.browser-content{inset:50px 12px 12px;grid-template-columns:1fr .8fr;grid-template-rows:96px 1fr;gap:10px}.module-float{transform:scale(.7)}.module-float.m1{right:2%;top:12%}.module-float.m2{right:0;top:31%}.module-float.m3{right:6%;top:47%}.phone-stack{left:0;bottom:16%;transform:scale(.58) rotate(-8deg);transform-origin:bottom left}.web-cursor{right:8%;bottom:16%;transform:scale(.72)}.support-ring{left:0;top:20%;width:160px;height:160px}.phone-node{left:4%;bottom:19%;width:120px;height:72px}.operator-hub{left:34%;top:18%;width:42vw;height:24vh}.operator{transform:translate(-50%,-44%) scale(.72)}.flow-rail{left:22%;top:38%;width:56%}.agenda-panel{right:0;top:18%;width:38vw;height:26vh}.agenda-grid{left:12px;right:12px;top:56px;bottom:14px;gap:8px}.status-pill.s1{right:6%;bottom:18%;width:104px;height:56px}.status-pill.s2{left:34%;bottom:18%;width:120px;height:64px}.hud{left:10px;bottom:10px}}


/* =========================================================
   BOT CREATORS — COLOR + MOTION EDITION
   Misma estructura aprobada, más energía visual y movimiento
   ========================================================= */
:root{
  --violet:#8b5cf6;
  --lime:#b7ff5a;
  --electric:#30d9ff;
  --hot:#ff4ecb;
  --white:#f7f6f2;
  --black:#050508;
}
body{transition:background .8s ease,color .8s ease}
.stage{
  transition:background .9s cubic-bezier(.22,.8,.18,1),filter .7s ease;
  background:
    radial-gradient(circle at 18% 20%,rgba(125,243,255,.08),transparent 19%),
    radial-gradient(circle at 80% 18%,rgba(255,121,223,.08),transparent 23%),
    radial-gradient(circle at 62% 78%,rgba(139,92,246,.08),transparent 24%),
    #050508;
}
.stage:before{content:"";position:absolute;inset:-12%;pointer-events:none;opacity:.36;filter:blur(54px) saturate(1.3);background:conic-gradient(from 190deg at 50% 50%,rgba(125,243,255,.12),rgba(139,92,246,.08),rgba(255,121,223,.12),rgba(215,180,122,.08),rgba(125,243,255,.12));animation:auroraDrift 14s ease-in-out infinite alternate}
@keyframes auroraDrift{0%{transform:translate3d(-2%,-2%,0) scale(1)}50%{transform:translate3d(2%,1%,0) scale(1.05)}100%{transform:translate3d(-1%,3%,0) scale(1.08)}}
.stage.light{
  background:
    radial-gradient(circle at 12% 20%,rgba(48,217,255,.14),transparent 22%),
    radial-gradient(circle at 84% 20%,rgba(255,78,203,.12),transparent 24%),
    radial-gradient(circle at 58% 74%,rgba(139,92,246,.12),transparent 26%),
    #f7f6f2;
}
.stage.light:after{background:radial-gradient(circle at center,transparent 30%,rgba(247,246,242,.08) 60%,rgba(247,246,242,.58) 100%),linear-gradient(180deg,transparent 62%,rgba(247,246,242,.72))}
.stage.light .hud{background:rgba(255,255,255,.52);border-color:rgba(10,10,16,.1);color:#15151b;box-shadow:0 16px 50px rgba(12,12,18,.1)}
.stage.light .hud small{color:#77727d}
.stage.light .hud strong{color:#17151c}
.nav.light-nav{background:rgba(255,255,255,.76);border-color:rgba(15,15,20,.1);color:#121218;box-shadow:0 18px 60px rgba(20,20,30,.12)}
.nav.light-nav .links{color:rgba(15,15,20,.62)}
.nav.light-nav .mark{border-color:rgba(139,92,246,.24);background:linear-gradient(135deg,rgba(48,217,255,.12),rgba(255,78,203,.1))}

/* copy cards switch with the scene background */
body.light-mode .copy{background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(250,247,242,.68));border-color:rgba(15,15,20,.09);box-shadow:0 30px 90px rgba(40,36,52,.12);color:#141219}
body.light-mode .copy p:not(.kicker){color:#595361}
body.light-mode .service{border-color:rgba(15,15,20,.09)}
body.light-mode .service span{color:#39343d;border-color:rgba(15,15,20,.08)}
body.light-mode .btn{border-color:rgba(15,15,20,.1)}
body.light-mode .copy h1,body.light-mode .copy h2{color:#141219}
body.light-mode em{background:linear-gradient(100deg,#a86f13,#9a43cf,#ff4ecb);-webkit-background-clip:text;background-clip:text;color:transparent}

/* stronger sales color accents */
.kicker{background:linear-gradient(90deg,var(--gold),var(--pink),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
em{background:linear-gradient(100deg,var(--gold),#f1c989,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn.primary{background:linear-gradient(135deg,#fff7eb 0%,#f0c67f 36%,#ff85df 68%,#78f3ff 100%);box-shadow:0 0 28px rgba(255,121,223,.16),0 0 34px rgba(125,243,255,.12);transition:transform .25s ease,box-shadow .25s ease}.btn.primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 34px rgba(255,121,223,.24),0 0 40px rgba(125,243,255,.18)}
.cta{background:linear-gradient(135deg,#fff6e7,#e7bc72 35%,#ff83de 67%,#7af2ff);transition:transform .25s ease,box-shadow .25s ease}.cta:hover{transform:scale(1.04);box-shadow:0 0 28px rgba(255,121,223,.2)}
.progress span{background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink),var(--gold),var(--lime));background-size:220% 100%;animation:progressColor 5s linear infinite;box-shadow:0 0 20px rgba(125,243,255,.3)}
@keyframes progressColor{to{background-position:-220% 0}}

/* 3D-like motion per scene */
.scene.active .camera-rig{animation:cameraFloat 4.8s ease-in-out infinite, cameraYaw 8s ease-in-out infinite}
.scene.active .lens{animation:lensFocus 2.2s ease-in-out infinite}
.scene.active .softbox.l{animation:softboxL 5s ease-in-out infinite}
.scene.active .softbox.r{animation:softboxR 5.8s ease-in-out infinite}
@keyframes cameraFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes cameraYaw{0%,100%{rotate:0deg}50%{rotate:1.8deg}}
@keyframes lensFocus{0%,100%{filter:brightness(1) saturate(1)}45%{filter:brightness(1.35) saturate(1.35);box-shadow:0 0 48px rgba(125,243,255,.5),0 0 0 14px #171a20,0 0 0 24px #252a31}55%{filter:brightness(1.05)}}
@keyframes softboxL{0%,100%{transform:rotateY(35deg) translateY(0)}50%{transform:rotateY(29deg) translateY(-14px)}}
@keyframes softboxR{0%,100%{transform:rotateY(-35deg) translateY(0)}50%{transform:rotateY(-29deg) translateY(12px)}}

.scene.active .photo.p1{animation:photo1 4.4s ease-in-out infinite}.scene.active .photo.p2{animation:photo2 5.2s ease-in-out infinite}.scene.active .photo.p3{animation:photo3 4.7s ease-in-out infinite}.scene.active .photo.p4{animation:photo4 5.5s ease-in-out infinite}.scene.active .photo.p5{animation:photo5 4.9s ease-in-out infinite}
@keyframes photo1{50%{transform:translateY(-18px) rotate(-8deg) rotateX(7deg)}}
@keyframes photo2{50%{transform:translateY(12px) translateX(8px) rotate(10deg) rotateY(-7deg)}}
@keyframes photo3{50%{transform:translateY(-22px) rotate(-1deg) rotateY(8deg)}}
@keyframes photo4{50%{transform:translateY(16px) rotate(17deg) rotateX(-7deg)}}
@keyframes photo5{50%{transform:translateY(-12px) translateX(-10px) rotate(-4deg) rotateY(-6deg)}}
.photo i{position:relative;overflow:hidden}.photo i:after,.wind-photo i:after,.hero-photo i:after{content:"";position:absolute;inset:-40%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 48%,transparent 62%);transform:translateX(-80%) rotate(8deg);animation:photoShine 4.6s ease-in-out infinite}@keyframes photoShine{55%,100%{transform:translateX(90%) rotate(8deg)}}

.scene.active .w1{animation:fly1 3.8s ease-in-out infinite}.scene.active .w2{animation:fly2 4.2s ease-in-out infinite}.scene.active .w3{animation:fly3 3.6s ease-in-out infinite}.scene.active .w4{animation:fly4 4.6s ease-in-out infinite}.scene.active .hero-photo{animation:heroPhoto 3.4s ease-in-out infinite}
@keyframes fly1{50%{transform:translate(46px,-28px) rotate(-12deg) rotateY(13deg)}}@keyframes fly2{50%{transform:translate(-24px,34px) rotate(26deg) rotateX(10deg)}}@keyframes fly3{50%{transform:translate(20px,-34px) rotate(-22deg) rotateY(-14deg)}}@keyframes fly4{50%{transform:translate(-44px,-12px) rotate(10deg) rotateX(-10deg)}}
@keyframes heroPhoto{0%,100%{transform:translate(-50%,-50%) rotate(-2deg) scale(1)}50%{transform:translate(-50%,-54%) rotate(1deg) scale(1.08)}}

.scene.active .speaker{animation:speakerMove 3.8s ease-in-out infinite}.scene.active .speaker .arm.l{animation:speakerArmL 2.7s ease-in-out infinite}.scene.active .speaker .arm.r{animation:speakerArmR 3.1s ease-in-out infinite}.scene.active .person i{animation:clapL .85s ease-in-out infinite alternate}.scene.active .person b{animation:clapR .85s ease-in-out infinite alternate-reverse}.scene.active .person:nth-child(3n) i,.scene.active .person:nth-child(3n) b{animation-duration:1.1s}.scene.active .person:nth-child(4n) i,.scene.active .person:nth-child(4n) b{animation-duration:.72s}
@keyframes speakerMove{50%{transform:translateY(-5px) rotate(-1deg)}}@keyframes speakerArmL{50%{transform:rotate(42deg)}}@keyframes speakerArmR{50%{transform:rotate(-48deg)}}@keyframes clapL{to{transform:rotate(-12deg) translate(7px,-8px)}}@keyframes clapR{to{transform:rotate(12deg) translate(-7px,-8px)}}

.scene.active .phone{animation:phoneFloat 4s ease-in-out infinite}.scene.active .crm{animation:crmFloat 5.2s ease-in-out infinite}.scene.active .bubble:nth-child(1){animation:bubblePulse 2.8s ease-in-out infinite}.scene.active .bubble:nth-child(2){animation:bubblePulse 2.8s .4s ease-in-out infinite}.scene.active .bubble:nth-child(3){animation:bubblePulse 2.8s .8s ease-in-out infinite}.scene.active .bubble:nth-child(4){animation:bubblePulse 2.8s 1.2s ease-in-out infinite}.scene.active .msg.m1{animation:msgFloat1 3.2s ease-in-out infinite}.scene.active .msg.m2{animation:msgFloat2 3.2s .5s ease-in-out infinite}.scene.active .msg.m3{animation:msgFloat3 3.2s 1s ease-in-out infinite}.scene.active .flowdot{animation:flowAcross 3.2s ease-in-out infinite}
@keyframes phoneFloat{50%{transform:translateY(-14px) rotate(-5deg) rotateY(7deg)}}@keyframes crmFloat{50%{transform:translateY(10px) rotateY(-4deg)}}@keyframes bubblePulse{0%,100%{opacity:.48;transform:translateX(0) scale(.96)}50%{opacity:1;transform:translateX(8px) scale(1.02)}}@keyframes msgFloat1{0%,100%{transform:translate(0,0) scale(.96);opacity:.7}50%{transform:translate(8px,-16px) scale(1.02);opacity:1}}@keyframes msgFloat2{0%,100%{transform:translate(0,0) scale(.96);opacity:.7}50%{transform:translate(14px,-18px) scale(1.03);opacity:1}}@keyframes msgFloat3{0%,100%{transform:translate(0,0) scale(.96);opacity:.7}50%{transform:translate(18px,-20px) scale(1.03);opacity:1}}@keyframes flowAcross{0%{transform:translate(-120px,20px) scale(.65);opacity:.25}50%{opacity:1}100%{transform:translate(150px,-28px) scale(1.2);opacity:.25}}

.scene.active .strategy-wall{animation:strategyWallFloat 5s ease-in-out infinite}.scene.active .consult-disk{animation:diskSpin 9s linear infinite}.scene.active .consult-tag{animation:tagFloat 4.6s ease-in-out infinite}.scene.active .blueprint{animation:sheetDrift 5.6s ease-in-out infinite}.scene.active .kpi-bars i:nth-child(1){animation:barPulse 2.4s ease-in-out infinite}.scene.active .kpi-bars i:nth-child(2){animation:barPulse 2.4s .2s ease-in-out infinite}.scene.active .kpi-bars i:nth-child(3){animation:barPulse 2.4s .4s ease-in-out infinite}.scene.active .kpi-bars i:nth-child(4){animation:barPulse 2.4s .6s ease-in-out infinite}
@keyframes strategyWallFloat{50%{transform:perspective(1000px) rotateX(8deg) translateY(-8px)}}@keyframes diskSpin{to{transform:rotate(360deg)}}@keyframes tagFloat{50%{transform:translateY(-10px) translateX(6px)}}@keyframes sheetDrift{50%{transform:rotate(-8deg) translate(12px,-12px)}}@keyframes barPulse{50%{filter:brightness(1.18);transform:scaleY(1.08)}}

.scene.active .browser-layer.l1{animation:webLayerA 5s ease-in-out infinite}.scene.active .browser-layer.l2{animation:webLayerB 5.6s ease-in-out infinite}.scene.active .browser-main{animation:webMainFloat 4.8s ease-in-out infinite}.scene.active .module-float.m1{animation:moduleA 4.2s ease-in-out infinite}.scene.active .module-float.m2{animation:moduleB 4.8s ease-in-out infinite}.scene.active .module-float.m3{animation:moduleA 5.2s ease-in-out infinite}.scene.active .phone-stack{animation:phoneTilt 5s ease-in-out infinite}.scene.active .web-cursor{animation:cursorMove 3.8s ease-in-out infinite}.scene.active .browser-grid:after{animation:gridGlow 3.8s ease-in-out infinite}
@keyframes webLayerA{50%{transform:rotate(-10deg) translate(-12px,6px)}}@keyframes webLayerB{50%{transform:rotate(-1deg) translate(10px,-8px)}}@keyframes webMainFloat{50%{transform:rotate(5deg) translateY(-10px)}}@keyframes moduleA{50%{transform:translateY(-10px)}}@keyframes moduleB{50%{transform:translateY(10px)}}@keyframes phoneTilt{50%{transform:rotate(-4deg) translateY(-12px)}}@keyframes cursorMove{50%{transform:translate(-22px,-14px)}}@keyframes gridGlow{50%{filter:brightness(1.18)}}

.scene.active .support-ring{animation:ringFloat 5.2s ease-in-out infinite}.scene.active .operator-hub{animation:hubFloat 4.8s ease-in-out infinite}.scene.active .operator{animation:operatorTalk 3.8s ease-in-out infinite}.scene.active .phone-node{animation:nodePulse 4s ease-in-out infinite}.scene.active .agenda-panel{animation:agendaFloat 5s ease-in-out infinite}.scene.active .status-pill.s1{animation:tagFloat 4.2s ease-in-out infinite}.scene.active .status-pill.s2{animation:tagFloat 4.8s ease-in-out infinite}.scene.active .flow-rail{animation:railPulse 2.4s ease-in-out infinite}
@keyframes ringFloat{50%{transform:translateY(-10px)}}@keyframes hubFloat{50%{transform:translateY(10px)}}@keyframes operatorTalk{50%{transform:translate(-50%,-46%) rotate(1deg)}}@keyframes nodePulse{50%{transform:translateY(-8px)}}@keyframes agendaFloat{50%{transform:translateY(-6px) rotateY(-3deg)}}@keyframes railPulse{50%{filter:brightness(1.2);transform:scaleX(1.03)}}

.scene.active .final-orb{animation:orbPulse 3.2s ease-in-out infinite}@keyframes orbPulse{50%{transform:scale(1.14);filter:brightness(1.3) saturate(1.25);box-shadow:0 0 110px rgba(125,243,255,.22),0 0 160px rgba(255,121,223,.15)}}

/* additional colorful scene washes */
.scene[data-stage="2"]:before,.scene[data-stage="3"]:before,.scene[data-stage="6"]:before,.scene[data-stage="7"]:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 22%,rgba(48,217,255,.12),transparent 24%),radial-gradient(circle at 82% 26%,rgba(255,78,203,.1),transparent 24%),radial-gradient(circle at 58% 78%,rgba(139,92,246,.1),transparent 26%)}
.scene[data-stage="0"]:before,.scene[data-stage="4"]:before,.scene[data-stage="5"]:before,.scene[data-stage="9"]:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 70% 24%,rgba(125,243,255,.1),transparent 22%),radial-gradient(circle at 34% 72%,rgba(255,121,223,.08),transparent 24%)}
.scene[data-stage="6"]:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 20%,rgba(125,243,255,.08),transparent 22%),radial-gradient(circle at 80% 18%,rgba(255,121,223,.08),transparent 22%),linear-gradient(180deg,rgba(255,255,255,.03),transparent 30%)}
.scene[data-stage="7"]:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 24% 18%,rgba(125,243,255,.07),transparent 24%),radial-gradient(circle at 82% 24%,rgba(255,121,223,.08),transparent 22%),linear-gradient(180deg,rgba(255,255,255,.02),transparent 32%)}
.scene[data-stage="8"]:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 16% 24%,rgba(125,243,255,.08),transparent 24%),radial-gradient(circle at 84% 20%,rgba(255,121,223,.08),transparent 22%),linear-gradient(180deg,rgba(255,255,255,.02),transparent 32%)}


@media(max-width:650px){
  .stage.light{background:radial-gradient(circle at 30% 18%,rgba(48,217,255,.13),transparent 24%),radial-gradient(circle at 76% 24%,rgba(255,78,203,.1),transparent 24%),#f7f6f2}
  body.light-mode .copy{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.9));backdrop-filter:blur(12px)}
  .scene.active .camera-rig{animation:cameraFloatMobile 4s ease-in-out infinite}
  @keyframes cameraFloatMobile{50%{translate:0 -8px}}
}



/* =========================================================
   BOT CREATORS — LOADER ORIGINAL RESTAURADO
   Mismo diseño de la versión que antes llegaba a 88%,
   pero ahora con progreso visual finito y seguro.
   ========================================================= */
body.booting{overflow:hidden}
.loader{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:#050509;color:#f4f0e9;transition:opacity .6s ease,visibility .6s ease}
.loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader__inner{width:min(420px,calc(100vw - 48px));display:grid;gap:14px;padding-top:88px}
.loader__logo-stage{position:absolute;left:50%;top:max(34px,6vh);width:min(310px,72vw);aspect-ratio:313/210;transform:translateX(-50%);pointer-events:none}
.loader__logo-piece{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;will-change:transform,opacity,filter}
.loader__logo-piece.b{animation:logoDropB .88s cubic-bezier(.22,.84,.28,1.2) .08s both}
.loader__logo-piece.o{animation:logoDropO .88s cubic-bezier(.22,.84,.28,1.2) .38s both}
.loader__logo-piece.t{animation:logoDropT .88s cubic-bezier(.22,.84,.28,1.2) .68s both}
.loader__logo-piece.creators{animation:creatorsReveal .9s cubic-bezier(.22,.75,.25,1) 1.48s both}
@keyframes logoDropB{0%{opacity:0;transform:translateY(-190px) rotate(-14deg) scale(1.08)}58%{opacity:1;transform:translateY(14px) rotate(3deg) scale(.98)}76%{transform:translateY(-8px) rotate(-1.5deg) scale(1.02)}90%{transform:translateY(4px) rotate(.5deg) scale(.995)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes logoDropO{0%{opacity:0;transform:translateY(-220px) rotate(10deg) scale(1.13)}58%{opacity:1;transform:translateY(16px) rotate(-3deg) scale(.98)}76%{transform:translateY(-9px) rotate(1.5deg) scale(1.02)}90%{transform:translateY(4px) rotate(-.5deg) scale(.995)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes logoDropT{0%{opacity:0;transform:translateY(-250px) rotate(-9deg) scale(1.16)}58%{opacity:1;transform:translateY(18px) rotate(2deg) scale(.98)}76%{transform:translateY(-10px) rotate(-1deg) scale(1.02)}90%{transform:translateY(4px) rotate(.4deg) scale(.995)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes creatorsReveal{0%{opacity:0;clip-path:inset(0 100% 0 0);filter:blur(9px) drop-shadow(0 0 0 rgba(255,121,223,0));transform:scale(.96)}45%{opacity:.6;filter:blur(3px) drop-shadow(0 0 12px rgba(255,121,223,.14))}100%{opacity:1;clip-path:inset(0 0 0 0);filter:blur(0) drop-shadow(0 0 9px rgba(125,243,255,.11));transform:scale(1)}}
.loader__inner>span{font-size:12px;font-weight:800;letter-spacing:.28em}
.loader__inner strong{font-size:clamp(54px,11vw,104px);line-height:.9;letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.loader__inner i{display:block;height:2px;background:rgba(255,255,255,.1);overflow:hidden}
.loader__inner b{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--gold),var(--pink));box-shadow:0 0 18px rgba(121,243,255,.4);transition:width .16s ease}
.loader__inner small{font-size:9px;letter-spacing:.22em;color:rgba(255,255,255,.45)}
@media(max-width:760px){.loader__inner{width:min(330px,calc(100vw - 44px));gap:12px;padding-top:64px}.loader__logo-stage{top:30px;width:min(260px,78vw)}.loader__inner>span{font-size:9px}.loader__inner strong{font-size:clamp(64px,25vw,92px)}.loader__inner small{font-size:7px;line-height:1.6}.brand-logo{height:32px}}
@media(prefers-reduced-motion:reduce){.loader{transition:opacity .25s ease,visibility .25s ease}.loader__inner b{transition:none}}


/* BOT CREATORS — botón flotante de WhatsApp */
.whatsapp-float{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:9999;
  width:62px;
  height:62px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#25D366,#19ad73);
  color:#fff;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 0 0 rgba(37,211,102,.28);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
  animation:waPulse 2.8s ease-in-out infinite;
}
.whatsapp-float:hover{transform:translateY(-4px) scale(1.05);filter:brightness(1.05);box-shadow:0 18px 40px rgba(0,0,0,.34),0 0 0 9px rgba(37,211,102,.09)}
.whatsapp-float:active{transform:scale(.96)}
.whatsapp-float svg{width:34px;height:34px;display:block;fill:currentColor}
@keyframes waPulse{0%,100%{box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 0 0 rgba(37,211,102,.26)}50%{box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 0 10px rgba(37,211,102,0)}}
@media(max-width:760px){.whatsapp-float{right:16px;bottom:16px;width:56px;height:56px}.whatsapp-float svg{width:31px;height:31px}}
@media(prefers-reduced-motion:reduce){.whatsapp-float{animation:none}}


/* BOT CREATORS — contraste premium del menú */
.nav,.nav.light-nav{
  background:linear-gradient(135deg,rgba(4,5,10,.96),rgba(17,14,24,.91)) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#fff !important;
  box-shadow:0 16px 48px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.07),0 0 28px rgba(125,243,255,.035);
  backdrop-filter:blur(18px) saturate(1.25);
}
.nav:after{content:'';position:absolute;left:18px;right:18px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(125,243,255,.42),rgba(255,121,223,.34),transparent);pointer-events:none}
.nav .links,.nav.light-nav .links{color:rgba(255,255,255,.76) !important}
.nav .links a{transition:color .2s ease,text-shadow .2s ease,opacity .2s ease}
.nav .links a:hover{color:#fff;text-shadow:0 0 15px rgba(125,243,255,.34)}
.nav .brand-logo{filter:drop-shadow(0 4px 14px rgba(0,0,0,.42)) drop-shadow(0 0 5px rgba(255,255,255,.08))}