:root{--img-506342d7cb:url("../assets/experience/a-smarter-stay/experience-visual.webp");
  --bg:#070909; --ink:#f4f1e9; --muted:#b7b5ae; --gold:#d7b46a;
  --cyan:#55d9ee; --glass:rgba(8,10,10,.64); --line:rgba(255,255,255,.13);
}
*{box-sizing:border-box} html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050606;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
button{font:inherit;color:inherit}
#experience{position:relative;width:100vw;height:100vh;overflow:hidden;background:#080909}
.scene{position:absolute;inset:0;opacity:0;pointer-events:none;transform:scale(1.035);transition:opacity 1s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.scene.active{opacity:1;pointer-events:auto;transform:scale(1)}
.scene.exit{opacity:0;transform:scale(.985)}
.ambience{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(255,205,130,.08),transparent 35%),linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.52))}
.topbar{position:absolute;z-index:50;top:clamp(14px,2.4vh,22px);right:clamp(14px,2.2vw,28px);display:flex;align-items:center;gap:10px}.orient{min-width:108px;height:34px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.progress{min-width:56px;text-align:center}
.orient{border:1px solid var(--line);background:rgba(5,7,7,.42);backdrop-filter:blur(12px);padding:8px 12px;border-radius:999px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.progress{font-size:11px;letter-spacing:.16em;color:#bcbab2;background:rgba(5,7,7,.3);padding:8px 10px;border-radius:999px}
.copy{position:absolute;z-index:10;left:7vw;top:13vh;max-width:520px}
.kicker{color:var(--gold);font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:15px}
h1{font-weight:400;font-size:clamp(36px,5vw,72px);line-height:.98;margin:0 0 18px;letter-spacing:-.035em}
.lead{font-size:clamp(15px,1.35vw,19px);line-height:1.55;color:#d3d0c8;max-width:500px}
.continue{position:absolute;z-index:20;bottom:7vh;left:7vw;border:0;background:transparent;color:#f3f0e9;letter-spacing:.18em;text-transform:uppercase;font-size:11px;font-weight:500;cursor:pointer;opacity:.0;transform:translateY(8px);transition:.5s}
.continue.show{opacity:1;transform:translateY(0)}
.continue span{display:inline-block;margin-left:12px;font-size:18px;vertical-align:-2px;transition:.25s}
.continue:hover span{transform:translateX(5px)}
.enter{margin-top:30px;display:inline-flex;align-items:center;gap:15px;border:1px solid rgba(255,255,255,.2);background:rgba(8,9,9,.32);backdrop-filter:blur(10px);border-radius:999px;padding:13px 19px;font-size:11px;letter-spacing:.17em;text-transform:uppercase;cursor:pointer;transition:.35s}
.enter:hover{border-color:rgba(215,180,106,.7);background:rgba(215,180,106,.10);transform:translateY(-2px)}
.enter i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px rgba(215,180,106,.6)}

.hotel-svg{position:absolute;inset:0;width:100%;height:100%}
.dim{opacity:.8}.thin{stroke:rgba(255,255,255,.16);stroke-width:1}.warm{fill:rgba(224,178,105,.26)}
/* Scene 1 */
.s1-copy{top:18vh}.s1-copy h1{font-size:clamp(32px,4.4vw,62px)}.s1-copy .kicker{margin-bottom:10px}
.entrance-note{position:absolute;right:8vw;bottom:14vh;color:#aeadA6;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
/* Scene 2 */
.phone{position:absolute;right:13vw;top:17vh;width:245px;height:480px;border:2px solid #262a29;border-radius:34px;background:#0b0e0e;box-shadow:0 30px 90px rgba(0,0,0,.6),inset 0 0 0 7px #050707;transform:rotate(1.2deg);overflow:hidden}
.phone:before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:72px;height:17px;border-radius:12px;background:#020303}
.phone .screen{position:absolute;inset:34px 14px 16px;padding:30px 20px}
.brand{font-size:10px;letter-spacing:.2em;color:#888;text-transform:uppercase}
.notif{margin-top:42px;border:1px solid #292e2d;background:#101413;border-radius:18px;padding:18px;box-shadow:0 12px 35px rgba(0,0,0,.25)}
.notif small{color:#9a9c96;font-size:10px}.notif h3{font-size:18px;font-weight:450;margin:10px 0}.notif p{font-size:11px;color:#b8b9b2;line-height:1.45}
.phonebtn{width:100%;border:1px solid rgba(215,180,106,.55);background:rgba(215,180,106,.08);border-radius:999px;padding:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.info-row{margin-top:18px;font-size:10px;color:#8d918c;line-height:1.8}.info-row b{color:#ddd7c8;font-weight:500}
.reception{position:absolute;left:0;right:0;bottom:0;height:47%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.15)),#111514;clip-path:polygon(0 30%,55% 10%,100% 30%,100% 100%,0 100%)}
.reception-top{position:absolute;left:27%;right:18%;top:25%;height:5px;background:#4b4030;box-shadow:0 0 45px rgba(215,180,106,.16)}
.lamp{position:absolute;bottom:35%;width:3px;height:120px;background:#5b5e59}.lamp:after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:54px;height:24px;border-radius:50%;background:rgba(224,178,105,.26);filter:blur(10px)}
.s2status{position:absolute;left:7vw;bottom:14vh;max-width:430px;color:#aaa79f;font-size:12px;line-height:1.6}
.s2status strong{color:#eee9df;font-weight:500}
/* Scene 3 */
.corridor{position:absolute;inset:0;background:linear-gradient(90deg,#080a0a,#121515 50%,#080a0a)}
.corridor:before{content:"";position:absolute;left:50%;top:13%;width:1px;height:75%;background:rgba(255,255,255,.12);box-shadow:-24vw 10vh 0 rgba(255,255,255,.02),24vw 10vh 0 rgba(255,255,255,.02)}
.wallleft,.wallright{position:absolute;top:0;bottom:0;width:38%;background:linear-gradient(120deg,#101313,#171b1a)}.wallleft{left:0;clip-path:polygon(0 0,100% 10%,100% 88%,0 100%)}.wallright{right:0;clip-path:polygon(0 10%,100% 0,100% 100%,0 88%)}
.floor{position:absolute;left:0;right:0;bottom:0;height:37%;background:linear-gradient(180deg,#171a18,#090b0b);clip-path:polygon(0 30%,50% 0,100% 30%,100% 100%,0 100%)}
.door{position:absolute;left:50%;top:19%;transform:translateX(-50%);width:245px;height:57%;background:linear-gradient(90deg,#171a18,#252823 50%,#171a18);border:1px solid #3a3d38;box-shadow:0 35px 80px rgba(0,0,0,.45)}
.door:before{content:"204";position:absolute;top:13%;left:50%;transform:translateX(-50%);font-size:18px;letter-spacing:.16em;color:#d8d4ca}
.lock{position:absolute;right:-42px;top:39%;width:80px;height:190px;background:linear-gradient(90deg,#151817,#272b28);border:1px solid #454a45;border-radius:10px;box-shadow:0 15px 30px rgba(0,0,0,.35);padding:12px 9px}
.lockdisplay{height:32px;background:#070909;border:1px solid #333836;border-radius:4px;color:#70dceb;font-size:10px;display:flex;align-items:center;justify-content:center;letter-spacing:.08em}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:9px}
.keys button{border:0;background:#111514;color:#d5d8d1;border-radius:4px;font-size:11px;padding:6px 0;cursor:pointer}
.keys button:hover{background:#252a27}
.handle{position:absolute;bottom:22%;right:18px;width:48px;height:10px;border-radius:5px;background:#8f745e}
.panel{position:absolute;left:calc(50% + 150px);top:39%;width:116px;height:122px;background:#080b0b;border:1px solid #303532;border-radius:8px;padding:10px;box-shadow:0 15px 30px rgba(0,0,0,.35)}
.panel .room{font-size:15px;color:#3bcfe6;text-align:center;margin-bottom:8px}.bell{font-size:28px;text-align:center;color:#48d7ea}.panelrow{display:flex;justify-content:space-between;margin-top:10px;font-size:10px;color:#bbb}.panelrow button{border:0;background:none;color:#bbb;font-size:10px;cursor:pointer}.panelrow button.active{color:#d9b66c}
.scene3copy{left:7vw;top:12vh;max-width:390px}.scene3copy h1{font-size:clamp(29px,3.6vw,52px)}
.choicebar{position:absolute;z-index:30;left:7vw;bottom:11vh;display:flex;gap:9px;opacity:0;transform:translateY(10px);transition:.5s}
.choicebar.show{opacity:1;transform:none}
.choice{border:1px solid var(--line);background:rgba(7,9,9,.7);backdrop-filter:blur(10px);border-radius:999px;padding:11px 16px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.choice:hover,.choice.selected{border-color:rgba(215,180,106,.7);background:rgba(215,180,106,.08)}
.result{position:absolute;z-index:35;left:7vw;bottom:20vh;max-width:360px;opacity:0;transform:translateY(10px);transition:.5s}
.result.show{opacity:1;transform:none}.result .tag{color:var(--cyan);font-size:10px;letter-spacing:.16em}.result h2{font-size:22px;font-weight:450;margin:7px 0}.result p{color:#aaa;font-size:12px;line-height:1.5;margin:0}
.menu{position:absolute;z-index:100;inset:0;background:rgba(2,4,4,.82);backdrop-filter:blur(18px);display:none;align-items:center;justify-content:center}
.menu.open{display:flex}.menuinner{width:min(560px,84vw);border:1px solid var(--line);background:rgba(12,15,14,.8);padding:28px;border-radius:20px}.menu h2{font-weight:400;margin:0 0 20px;font-size:26px}.menuline{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;color:#aaa}.menuline b{color:#eee;font-weight:450}.close{float:right;border:0;background:none;cursor:pointer;color:#aaa}
.fadeflash{position:absolute;z-index:200;inset:0;background:#eee;opacity:0;pointer-events:none}
.fadeflash.go{animation:flash .9s ease}
@keyframes flash{0%{opacity:0}30%{opacity:.09}100%{opacity:0}}
/* Visual refinement v4 */
.scene1-photo,.scene2-photo,.scene10-photo{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:center;z-index:0}
.scene1-photo{background-position:center center;transform:scale(1.02)}
.scene2-photo{background-position:72% 52%;filter:saturate(.82) brightness(.62)}
.scene10-photo{background-position:center center;filter:saturate(.86) brightness(.62)}
#s1 .hotel-svg{opacity:0}
#s1 .ambience{background:linear-gradient(90deg,rgba(3,5,5,.80) 0%,rgba(3,5,5,.48) 42%,rgba(3,5,5,.16) 75%),linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.50));z-index:1}
#s1 .copy,#s1 .entrance-note,#s1 .continue{z-index:5}
#s2 .hotel-svg{opacity:0}
#s2 .ambience{background:linear-gradient(90deg,rgba(4,6,6,.82) 0%,rgba(4,6,6,.48) 44%,rgba(4,6,6,.20) 78%),linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.48));z-index:1}
#s2 .copy,#s2 .phone,#s2 .s2status,#s2 .continue{z-index:5}

/* Scene 3 access interaction */
.door:before{display:none}.room-number{position:absolute;top:12%;left:50%;transform:translateX(-50%);font-size:24px;letter-spacing:.20em;color:#eee8dc;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.lock{transition:transform .65s cubic-bezier(.2,.7,.2,1),right .65s,top .65s;z-index:8}.lock.focus{transform:scale(1.12);transform-origin:center right}
.access-demo{position:absolute;left:calc(100% + 38px);top:6%;width:250px;min-height:310px;opacity:0;pointer-events:none;transform:translateX(12px) scale(.94);transition:.55s;z-index:12}
.access-demo.show-pin,.access-demo.show-finger{opacity:1;transform:none}
.demo-label{font-size:11px;letter-spacing:.18em;color:#d7b46a;text-transform:uppercase;margin-bottom:10px}
.demo-pad{position:relative;width:210px;padding:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(8,10,9,.86);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.demo-pad span{height:42px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:#111514;font-size:12px;color:#d7d8d2}.demo-pad span.target{border-color:rgba(85,217,238,.45);background:rgba(85,217,238,.07)}
.finger-pin{position:absolute;width:34px;height:88px;right:42px;top:105px;border-radius:20px 20px 14px 14px;background:linear-gradient(90deg,#b97d60,#e3ad8b 48%,#9d684f);transform:rotate(-18deg);box-shadow:0 8px 18px rgba(0,0,0,.45);transform-origin:bottom center;animation:tapPin 1.5s ease-in-out infinite}
.finger-pin:before{content:"";position:absolute;left:7px;top:6px;width:20px;height:15px;border-radius:12px;background:#f0b99b;opacity:.8}.finger-pin:after{content:"";position:absolute;right:-10px;bottom:5px;width:22px;height:35px;border-radius:50%;background:#9d684f;transform:rotate(32deg)}
@keyframes tapPin{0%,100%{transform:rotate(-18deg) translate(7px,-4px)}45%{transform:rotate(-18deg) translate(0,3px)}60%{transform:rotate(-18deg) translate(0,8px)}}
.fingerprint-demo{display:none;position:relative;width:210px;height:230px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(8,10,9,.86);box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:hidden}.access-demo.show-finger .demo-pad{display:none}.access-demo.show-finger .fingerprint-demo{display:block}.finger-shape{position:absolute;left:78px;top:48px;width:54px;height:125px;border-radius:30px 30px 18px 18px;background:linear-gradient(90deg,#9d684f,#e0a887 48%,#9b654d);transform:rotate(-5deg);box-shadow:0 12px 22px rgba(0,0,0,.4)}.fingerprint-mark{position:absolute;left:86px;top:88px;font-size:48px;color:rgba(255,255,255,.75);text-shadow:0 0 18px rgba(85,217,238,.28)}
#s3 .panel{left:calc(50% + 160px);top:58%;opacity:0;transform:translateY(8px);transition:.55s}#s3 .panel.reveal{opacity:1;transform:none}
#s3 .panel-title{font-size:10px;letter-spacing:.12em;color:#98a09a;text-align:center;margin-bottom:6px}
#s3 .bell{font-size:22px}
#s3 .choice{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:116px;padding:10px 15px}.choice b{font-size:10px;font-weight:500;letter-spacing:.12em}.choice span{font-size:10px;color:#a0a7a1;letter-spacing:.10em;text-transform:uppercase}

/* Scene 4–6 alignment */
.net-hotel{left:58%;top:53%;width:min(760px,55vw);height:430px}
.net-question{max-width:350px;top:13vh}.net-question h1{font-size:clamp(30px,3.5vw,50px)}
.net-result{right:5vw;bottom:9vh}
#s5 .fire-room{left:12%;right:16%;top:18%;bottom:16%}.fire-message{top:15vh;max-width:360px}.fire-steps{right:5vw;top:22vh;width:215px}.camera-view{left:7vw;bottom:16vh;width:270px;height:155px}.fire-note{right:5vw;bottom:9vh}
#s6 .ops-room{left:7vw;top:24vh;width:43vw;height:52vh;background:linear-gradient(145deg,rgba(21,26,24,.88),rgba(8,11,10,.82))}
#s6 .request-card{right:7vw;top:22vh}.ops-copy{top:9vh;max-width:430px}.ops-note{bottom:8vh}

/* Scene 9 alignment */
.perspective-hotel{left:58%;width:min(760px,58vw);height:470px}.perspective-copy{left:7vw;top:9vh;max-width:300px}.perspective-copy h1{font-size:clamp(30px,3.6vw,50px)}.pview{padding:34px 42px}.pview .quote{font-size:30px;max-width:470px;margin-top:70px}.perspective-insight{right:5vw;width:235px}

/* Scene 10 */
#s10 .close-bg{background:linear-gradient(90deg,rgba(4,6,6,.80),rgba(4,6,6,.35) 58%,rgba(4,6,6,.24)),linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.54));z-index:1}
#s10 .close-copy{top:13vh;max-width:470px;z-index:8}.close-copy h1{font-size:clamp(36px,4.6vw,66px)}.close-sub{max-width:430px}.explore-solutions{left:7vw;bottom:14vh}.solution-links{right:5vw;top:18vh;width:270px}.solution-detail{left:7vw;bottom:6vh;width:min(420px,38vw)}.close-cta{right:5vw;bottom:6vh;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:440px}.close-cta a{color:inherit;text-decoration:none}.close-cta .whatsapp{border:1px solid rgba(85,217,238,.38);background:rgba(85,217,238,.06);border-radius:999px;padding:12px 17px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* Experience menu */
.menuline{width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.08);background:transparent;text-align:left;cursor:pointer}.menuline:hover{background:rgba(255,255,255,.025)}.menuline span{transition:.25s}.menuline:hover span{color:#eee;transform:translateX(4px)}

@media(max-width:800px){
 .copy{left:7vw;top:11vh;max-width:72vw}.phone{right:5vw;top:31vh;transform:scale(.78) rotate(1deg);transform-origin:top right}.s2status{left:7vw;bottom:8vh;max-width:55vw}
 .door{width:185px}.panel{left:calc(50% + 105px);transform:scale(.82);transform-origin:left top}.lock{right:-35px;transform:scale(.82);transform-origin:right top}
}

/* Scenes 04–06 */
.network-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(54,133,147,.10),transparent 32%),linear-gradient(135deg,#070a0a,#101616 48%,#060808)}
.net-hotel{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(900px,76vw);height:480px;border:1px solid rgba(255,255,255,.09);background:rgba(12,16,15,.62);box-shadow:0 30px 100px rgba(0,0,0,.45)}
.net-label{position:absolute;left:28px;top:22px;font-size:10px;letter-spacing:.2em;color:#a0a7a1;text-transform:uppercase}
.net-node{position:absolute;border:1px solid rgba(255,255,255,.16);background:rgba(9,12,11,.92);border-radius:10px;padding:12px 14px;min-width:150px;transition:.5s}
.net-node strong{display:block;font-size:12px;font-weight:500}.net-node span{font-size:11px;color:#9aa19b;line-height:1.5}
.net-node.guest{left:7%;top:20%}.net-node.ops{right:7%;top:20%}.net-node.security{left:7%;bottom:15%}.net-node.core{left:50%;top:50%;transform:translate(-50%,-50%);border-color:rgba(85,217,238,.35);text-align:center}
.net-node.core strong{color:#55d9ee}
.net-node.warn{border-color:rgba(205,153,92,.55);box-shadow:0 0 30px rgba(205,153,92,.08)}
.net-lines{position:absolute;inset:0}.net-lines line{stroke:rgba(85,217,238,.55);stroke-width:1.75;stroke-dasharray:5 7;animation:flow 2.5s linear infinite}
.net-lines .warnline{stroke:rgba(205,153,92,.45)}
@keyframes flow{to{stroke-dashoffset:-24}}
.net-question{position:absolute;left:7vw;top:11vh;max-width:440px;z-index:10}.net-question h1{font-size:clamp(30px,4vw,58px)}
.net-choices{position:absolute;left:7vw;bottom:10vh;z-index:15;display:flex;gap:9px}.net-choices button,.fire-choices button,.request-btn{border:1px solid rgba(255,255,255,.14);background:rgba(5,8,8,.7);backdrop-filter:blur(10px);border-radius:999px;padding:11px 17px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.net-choices button:hover,.net-choices button.selected{border-color:rgba(85,217,238,.65);background:rgba(85,217,238,.08)}
.net-result{position:absolute;right:7vw;bottom:9vh;width:290px;z-index:20;opacity:0;transform:translateY(10px);transition:.5s}.net-result.show{opacity:1;transform:none}.net-result h2{font-size:20px;font-weight:450;margin:5px 0}.net-result p{font-size:11px;color:#a5aaa4;line-height:1.55;margin:0}
.net-result .tag,.fire-tag{font-size:11px;letter-spacing:.16em;color:#55d9ee;text-transform:uppercase}

.fire-bg{position:absolute;inset:0;background:radial-gradient(circle at 65% 45%,rgba(198,133,73,.12),transparent 22%),linear-gradient(135deg,#0b0e0d,#151918 55%,#080a09)}
.fire-hotel{position:absolute;inset:0}.fire-room{position:absolute;left:14%;right:14%;top:17%;bottom:14%;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,#171b19,#0b0e0d);box-shadow:0 30px 90px rgba(0,0,0,.5)}
.fire-room:before{content:"ZONE 2";position:absolute;right:5%;top:7%;font-size:10px;letter-spacing:.2em;color:#8b908b}
.smoke{position:absolute;right:24%;top:31%;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(204,210,202,.18),transparent 65%);filter:blur(8px);opacity:0;transition:1s}
.alarm{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:150px;height:110px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:#101312;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.5s}
.alarm .dot{width:12px;height:12px;border-radius:50%;background:#363b37;margin-bottom:10px}.alarm b{font-size:10px;letter-spacing:.14em}.alarm span{font-size:11px;color:#9aa19b;margin-top:5px}
.fire-room.active .smoke{opacity:1}.fire-room.active .alarm{border-color:rgba(210,118,72,.7);box-shadow:0 0 50px rgba(210,118,72,.16)}.fire-room.active .alarm .dot{background:#df754b;box-shadow:0 0 20px rgba(223,117,75,.7)}
.fire-steps{position:absolute;right:7vw;top:24vh;width:235px;z-index:10}.step{border-left:1px solid rgba(255,255,255,.12);padding:9px 0 9px 15px;color:#8b928c;font-size:10px;transition:.5s}.step.active{color:#e8e3d8;border-color:#d27a4f}.step b{display:block;font-weight:500;font-size:11px;margin-bottom:3px}.step span{font-size:11px;color:#98a09a}
.fire-trigger{position:absolute;left:7vw;bottom:10vh;z-index:20}.fire-trigger button{border:1px solid rgba(205,153,92,.55);background:rgba(205,153,92,.08);border-radius:999px;padding:12px 18px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}.fire-message{position:absolute;left:7vw;top:18vh;max-width:400px;z-index:10}.fire-message h1{font-size:clamp(30px,4vw,56px)}.fire-message .lead{max-width:390px}
.camera-view{position:absolute;left:7vw;bottom:18vh;width:300px;height:180px;border:1px solid rgba(85,217,238,.35);background:linear-gradient(145deg,#151b1a,#080b0b);display:none;overflow:hidden}.camera-view.show{display:block}.camera-view:before{content:"CAM 02 · ZONE 2";position:absolute;left:12px;top:10px;font-size:10px;letter-spacing:.15em;color:#55d9ee}.camera-view:after{content:"VISUAL VERIFICATION";position:absolute;right:12px;bottom:10px;font-size:10px;letter-spacing:.12em;color:#aaa}.cam-cross{position:absolute;left:50%;top:50%;width:65px;height:45px;border:1px solid rgba(85,217,238,.55);transform:translate(-50%,-50%)}
.fire-note{position:absolute;right:7vw;bottom:10vh;width:250px;color:#a8aaa3;font-size:11px;line-height:1.55;display:none}.fire-note.show{display:block}.fire-note strong{display:block;color:#eee7dc;font-weight:450;margin-bottom:5px}

.ops-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0a0d0c,#111614 52%,#080a09)}
.ops-room{position:absolute;left:7vw;top:18vh;width:45vw;height:58vh;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,#151a18,#0b0e0d);box-shadow:0 30px 90px rgba(0,0,0,.4)}
.ops-room:before{content:"ROOM 204";position:absolute;top:25px;left:25px;font-size:10px;letter-spacing:.2em;color:#a0a7a1}
.ops-bed{position:absolute;left:20%;top:33%;width:48%;height:25%;background:#202522;border:1px solid #343936}.ops-bed:before{content:"";position:absolute;left:0;top:0;width:30%;height:100%;background:#292f2b;border-right:1px solid #3c423d}
.ops-person{position:absolute;right:14%;bottom:15%;width:35px;height:90px;background:#242925;border-radius:20px 20px 8px 8px;opacity:.8}.ops-person:before{content:"";position:absolute;left:7px;top:-25px;width:22px;height:22px;border-radius:50%;background:#2b302c}
.request-card{position:absolute;right:7vw;top:20vh;width:310px;border:1px solid rgba(255,255,255,.12);background:rgba(10,13,12,.78);backdrop-filter:blur(12px);border-radius:15px;padding:20px;z-index:20;box-shadow:0 25px 70px rgba(0,0,0,.4)}.request-card .mini{font-size:11px;color:#a0a7a1;letter-spacing:.14em;text-transform:uppercase}.request-card h2{font-size:21px;font-weight:450;margin:8px 0}.request-card p{font-size:11px;color:#a5aaa4;line-height:1.5}.request-status{margin:18px 0 12px;border-top:1px solid rgba(255,255,255,.08);padding-top:13px}.req-step{font-size:10px;color:#8b928c;padding:8px 0;border-left:1px solid #303530;padding-left:12px;transition:.45s}.req-step.active{color:#eee8dd;border-color:#55d9ee}.req-step b{font-weight:500}.request-btn{width:100%;margin-top:10px;border-color:rgba(85,217,238,.35)}.ops-copy{position:absolute;left:7vw;top:8vh;z-index:10;max-width:420px}.ops-copy h1{font-size:clamp(29px,3.7vw,53px)}.ops-note{position:absolute;left:7vw;bottom:9vh;font-size:11px;color:#a8aaa3;max-width:430px;line-height:1.5}.ops-note strong{color:#eee8dd;font-weight:450}


/* Scenes 07–10 */
.energy-bg{position:absolute;inset:0;background:radial-gradient(circle at 52% 48%,rgba(216,180,106,.09),transparent 30%),linear-gradient(135deg,#080b0a,#111614 50%,#070908)}
.energy-hotel{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);width:min(880px,76vw);height:500px;border:1px solid rgba(255,255,255,.1);background:rgba(12,16,14,.62);box-shadow:0 30px 100px rgba(0,0,0,.5);overflow:hidden}
.energy-roof{position:absolute;left:13%;right:13%;top:10%;height:10%;border-bottom:1px solid #353b36}
.energy-floor{position:absolute;left:13%;right:13%;height:20%;border-bottom:1px solid rgba(255,255,255,.09)}
.energy-floor.f1{top:20%}.energy-floor.f2{top:40%}.energy-floor.f3{top:60%}.energy-floor.f4{top:80%}
.energy-room{position:absolute;width:9%;height:12%;border:1px solid rgba(255,255,255,.09);transition:.5s}
.energy-room:nth-of-type(1){left:19%;top:25%}.energy-room:nth-of-type(2){left:31%;top:25%}.energy-room:nth-of-type(3){left:43%;top:25%}.energy-room:nth-of-type(4){left:55%;top:25%}.energy-room:nth-of-type(5){left:67%;top:25%}
.energy-room:nth-of-type(6){left:19%;top:45%}.energy-room:nth-of-type(7){left:31%;top:45%}.energy-room:nth-of-type(8){left:43%;top:45%}.energy-room:nth-of-type(9){left:55%;top:45%}.energy-room:nth-of-type(10){left:67%;top:45%}
.energy-room:nth-of-type(11){left:19%;top:65%}.energy-room:nth-of-type(12){left:31%;top:65%}.energy-room:nth-of-type(13){left:43%;top:65%}.energy-room:nth-of-type(14){left:55%;top:65%}.energy-room:nth-of-type(15){left:67%;top:65%}
.energy-room.on{background:rgba(215,180,106,.17);border-color:rgba(215,180,106,.35);box-shadow:0 0 20px rgba(215,180,106,.07)}
.energy-flow{position:absolute;left:12%;right:12%;bottom:6%;height:2px;background:rgba(85,217,238,.2);overflow:hidden}.energy-flow i{display:block;width:22%;height:100%;background:#55d9ee;box-shadow:0 0 15px rgba(85,217,238,.6);animation:energyflow 2s linear infinite}
@keyframes energyflow{to{transform:translateX(420%)}}
.energy-source{position:absolute;left:4%;bottom:4%;font-size:10px;letter-spacing:.14em;color:#929a94}.energy-demand{position:absolute;right:4%;bottom:4%;font-size:10px;letter-spacing:.14em;color:#929a94}
.energy-copy{position:absolute;left:7vw;top:10vh;z-index:10;max-width:430px}.energy-copy h1{font-size:clamp(30px,4vw,56px)}
.energy-controls{position:absolute;left:7vw;bottom:9vh;z-index:20;display:flex;gap:8px;flex-wrap:wrap;max-width:500px}.energy-controls button{border:1px solid rgba(255,255,255,.14);background:rgba(5,8,8,.72);backdrop-filter:blur(10px);border-radius:999px;padding:10px 14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.energy-controls button:hover,.energy-controls button.selected{border-color:rgba(215,180,106,.65);background:rgba(215,180,106,.08)}
.energy-result{position:absolute;right:7vw;bottom:9vh;width:280px;z-index:20;opacity:0;transform:translateY(10px);transition:.5s}.energy-result.show{opacity:1;transform:none}.energy-result .tag{font-size:11px;letter-spacing:.15em;color:#d7b46a}.energy-result h2{font-size:19px;font-weight:450;margin:5px 0}.energy-result p{font-size:11px;color:#a6aaa3;line-height:1.5;margin:0}

.existing-bg{position:absolute;inset:0;background:linear-gradient(135deg,#080b0a,#151918 52%,#090b0a)}
.existing-room{position:absolute;left:7vw;top:18vh;width:48vw;height:60vh;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,#151a18,#0b0e0d);box-shadow:0 30px 90px rgba(0,0,0,.4)}
.existing-cam{position:absolute;right:15%;top:18%;width:125px;height:90px;border:1px solid #424943;background:#171c1a;box-shadow:0 12px 30px rgba(0,0,0,.35)}.existing-cam:before{content:"CCTV · EXISTING";position:absolute;left:9px;top:8px;font-size:10px;letter-spacing:.1em;color:#858d85}.lens{position:absolute;left:50%;top:56%;width:34px;height:34px;border-radius:50%;border:2px solid #616a62;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 6px #242a26}
.oldtag{position:absolute;left:10%;bottom:18%;font-size:11px;letter-spacing:.14em;color:#939a94}.existing-copy{position:absolute;left:7vw;top:8vh;max-width:450px;z-index:10}.existing-copy h1{font-size:clamp(30px,4vw,57px)}
.existing-options{position:absolute;right:7vw;top:25vh;width:260px;z-index:20;display:grid;gap:8px}.existing-options button{border:1px solid rgba(255,255,255,.13);background:rgba(8,11,10,.76);backdrop-filter:blur(10px);border-radius:10px;padding:13px;text-align:left;cursor:pointer}.existing-options button b{display:block;font-size:11px;font-weight:500}.existing-options button span{font-size:11px;color:#9aa19b}.existing-options button:hover,.existing-options button.selected{border-color:rgba(85,217,238,.55);background:rgba(85,217,238,.06)}
.existing-result{position:absolute;right:7vw;bottom:9vh;width:300px;z-index:20;opacity:0;transform:translateY(10px);transition:.5s}.existing-result.show{opacity:1;transform:none}.existing-result .tag{font-size:11px;letter-spacing:.15em;color:#55d9ee}.existing-result h2{font-size:19px;font-weight:450;margin:5px 0}.existing-result p{font-size:11px;color:#a6aaa3;line-height:1.5;margin:0}.existing-room.integrated .existing-cam{border-color:rgba(85,217,238,.7);box-shadow:0 0 35px rgba(85,217,238,.12)}.existing-room.replaced .existing-cam{opacity:.2}.existing-room.added:after{content:"NEW CAPABILITY";position:absolute;right:14%;top:42%;border:1px solid rgba(215,180,106,.5);padding:8px;font-size:10px;letter-spacing:.12em;color:#d7b46a;background:rgba(215,180,106,.06)}

.perspective-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(85,217,238,.07),transparent 28%),linear-gradient(135deg,#070a09,#121715 50%,#070909)}
.perspective-hotel{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);width:min(900px,78vw);height:500px;border:1px solid rgba(255,255,255,.1);background:rgba(12,16,14,.68);box-shadow:0 30px 100px rgba(0,0,0,.5)}
.pview{position:absolute;inset:0;opacity:0;transition:.6s;padding:35px}.pview.active{opacity:1}
.pview.guest{background:linear-gradient(145deg,rgba(215,180,106,.04),transparent)}.pview.team{background:linear-gradient(145deg,rgba(85,217,238,.04),transparent)}.pview.owner{background:linear-gradient(145deg,rgba(170,170,170,.04),transparent)}
.pview h2{font-size:18px;font-weight:450;margin:0 0 10px}.pview .quote{font-size:36px;font-weight:350;max-width:520px;line-height:1.08;margin-top:80px}.metricrow{display:flex;gap:10px;margin-top:35px;flex-wrap:wrap}.metric{border:1px solid rgba(255,255,255,.11);padding:14px 16px;min-width:125px;background:rgba(7,9,8,.55)}.metric small{display:block;color:#98a09a;font-size:10px;letter-spacing:.12em}.metric b{display:block;margin-top:5px;font-size:15px;font-weight:450}
.perspective-copy{position:absolute;left:7vw;top:9vh;max-width:430px;z-index:10}.perspective-copy h1{font-size:clamp(29px,4vw,55px)}
.perspective-controls{position:absolute;left:7vw;bottom:9vh;z-index:20;display:flex;gap:8px}.perspective-controls button{border:1px solid rgba(255,255,255,.14);background:rgba(5,8,8,.72);backdrop-filter:blur(10px);border-radius:999px;padding:11px 15px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.perspective-controls button.selected{border-color:rgba(85,217,238,.6);background:rgba(85,217,238,.07)}.perspective-insight{position:absolute;right:7vw;bottom:9vh;width:270px;color:#a6aaa3;font-size:11px;line-height:1.5}.perspective-insight strong{display:block;color:#eee8dd;font-weight:450;margin-bottom:5px}

.close-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(215,180,106,.10),transparent 28%),linear-gradient(135deg,#090c0b,#121715 50%,#080a09)}
.close-hotel{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:min(980px,80vw);height:480px;border:1px solid rgba(255,255,255,.1);background:rgba(11,15,13,.65);box-shadow:0 30px 100px rgba(0,0,0,.5);overflow:hidden}.close-hotel:before{content:"";position:absolute;inset:13%;border:1px solid rgba(255,255,255,.07)}.close-glow{position:absolute;left:15%;right:15%;bottom:15%;height:1px;background:#d7b46a;box-shadow:0 0 45px rgba(215,180,106,.5)}
.close-copy{position:absolute;left:7vw;top:10vh;max-width:520px;z-index:10}.close-copy h1{font-size:clamp(32px,4.4vw,62px)}.close-sub{font-size:15px;color:#c9c7c0;line-height:1.6;max-width:520px}
.solution-links{position:absolute;right:7vw;top:20vh;width:285px;display:grid;gap:7px;z-index:20}.solution-links button{border:1px solid rgba(255,255,255,.11);background:rgba(7,10,9,.72);border-radius:9px;padding:10px 12px;text-align:left;color:#b6b8b1;font-size:11px;letter-spacing:.08em;cursor:pointer}.solution-links button:hover{border-color:rgba(215,180,106,.55);color:#eee8dd;background:rgba(215,180,106,.05)}
.solution-detail{position:absolute;left:7vw;bottom:10vh;width:430px;z-index:20;opacity:0;transform:translateY(10px);transition:.5s}.solution-detail.show{opacity:1;transform:none}.solution-detail .tag{font-size:11px;color:#d7b46a;letter-spacing:.16em}.solution-detail h2{font-size:20px;font-weight:450;margin:5px 0}.solution-detail p{font-size:11px;color:#a7aaa3;line-height:1.5;margin:0}
.close-cta{position:absolute;right:7vw;bottom:9vh;display:flex;gap:8px;z-index:25}.close-cta button{border:1px solid rgba(255,255,255,.15);background:rgba(7,10,9,.72);border-radius:999px;padding:12px 17px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.close-cta .primary{border-color:rgba(215,180,106,.6);background:rgba(215,180,106,.08)}


.service-request{position:absolute;left:50%;bottom:13vh;transform:translateX(-50%) translateY(10px);opacity:0;transition:.4s;z-index:30;border:1px solid rgba(215,180,106,.45);background:rgba(8,10,9,.86);backdrop-filter:blur(12px);padding:13px 18px;border-radius:10px;font-size:10px;letter-spacing:.08em}.service-request.show{opacity:1;transform:translateX(-50%)}
.existing-question{margin-top:24px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#d7b46a}
.explore-solutions{position:absolute;left:7vw;bottom:16vh;z-index:25;border:1px solid rgba(215,180,106,.55);background:rgba(215,180,106,.07);border-radius:999px;padding:13px 18px;color:#eee8dd;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.4s}.explore-solutions:hover{background:rgba(215,180,106,.13)}
.solution-links{opacity:0;pointer-events:none;transform:translateY(10px);transition:.5s}.solution-links.revealed{opacity:1;pointer-events:auto;transform:none}
.close-cta{opacity:.35;transition:.4s}.close-cta.active{opacity:1}
@media(max-width:800px){.energy-result,.existing-result,.perspective-insight,.solution-detail{left:7vw;right:7vw;width:auto}.solution-links{right:7vw;width:260px}.close-cta{right:7vw;bottom:6vh;flex-wrap:wrap}.explore-solutions{bottom:23vh}.existing-options{right:7vw;width:230px}}


/* FINAL CINEMATIC BACKGROUND PASS */
.scene1-photo,.scene2-photo,.scene10-photo{background-size:cover;background-repeat:no-repeat;z-index:0}
.scene1-photo{background-image:var(--img-506342d7cb) !important;background-position:center 58%;filter:saturate(.88) brightness(.72)}
.scene2-photo{background-image:url("../assets/experience/a-smarter-stay/scene-02-bg.webp") !important;background-position:center center;filter:saturate(.86) brightness(.58)}
#s1 .hotel-svg,#s2 .hotel-svg{display:none}
#s10 .scene10-photo{background-image:var(--img-506342d7cb) !important;background-position:center 56%;filter:saturate(.88) brightness(.52)}

/* Scene 03: use the real Room 204 corridor image as the world; HTML creates only the interaction overlays. */
#s3 .corridor{background:url("../assets/experience/a-smarter-stay/scene-03-bg.webp") center center/cover no-repeat !important}
#s3 .corridor:before,#s3 .wallleft,#s3 .wallright,#s3 .floor{display:none}
#s3 .door{left:50%;top:0;width:100%;height:100%;background:transparent;border:0;box-shadow:none;transform:none}
#s3 .door:before,#s3 .door>.handle,#s3 .door>.room-number{display:none}
#s3 .door>.lock{display:none}
#s3 .panel{opacity:0;transform:translateX(10px);pointer-events:none;transition:.45s;left:auto;right:14vw;top:44%;background:rgba(8,11,11,.78);backdrop-filter:blur(10px)}
#s3 .panel.reveal{opacity:1;transform:none;pointer-events:auto}
#s3 .access-demo{left:calc(50% + 120px);top:33%;}
#s3 .choicebar{bottom:10vh}

/* Scene 04: server-room image, technical UI remains foreground. */
#s4 .network-bg{background:linear-gradient(90deg,rgba(3,5,5,.82),rgba(3,6,6,.48),rgba(3,5,5,.72)),url("../assets/experience/a-smarter-stay/scene-04-bg.webp") center/cover no-repeat !important}
#s4 .net-hotel{left:55%;top:52%;width:min(820px,61vw);height:460px;background:rgba(7,11,10,.60)}
#s4 .net-question{left:7vw;top:13vh;max-width:380px;z-index:20}
#s4 .net-question h1{font-size:clamp(34px,4.1vw,58px);line-height:1.02}
#s4 .net-choices{left:7vw;bottom:9vh}

/* Scene 05: event card floats over the real corridor; translucent, shifted right. */
#s5 .fire-bg{background:linear-gradient(90deg,rgba(4,6,6,.60),rgba(4,6,6,.28),rgba(4,6,6,.50)),url("../assets/experience/a-smarter-stay/scene-05-bg.webp") center/cover no-repeat !important}
#s5 .fire-room{left:39%;right:auto;top:18%;width:39%;height:58%;background:rgba(8,11,10,.50);backdrop-filter:blur(3px)}
#s5 .fire-message{left:7vw;top:15vh;max-width:410px}
#s5 .fire-steps{right:7vw;top:17vh}
#s5 .camera-view{left:7vw;bottom:18vh}

/* Scene 06: real Room 204 interior + housekeeping staff; request card is the interaction layer. */
#s6 .ops-bg{background:linear-gradient(90deg,rgba(4,6,6,.66),rgba(4,6,6,.22),rgba(4,6,6,.46)),url("../assets/experience/a-smarter-stay/scene-06-bg.webp") center/cover no-repeat !important}
#s6 .ops-room{display:none}
#s6 .ops-copy{left:7vw;top:9vh;max-width:430px}
#s6 .request-card{right:7vw;top:22vh;background:rgba(7,10,9,.72)}

/* Scene 07: operational hotel/energy environment. */
#s7 .energy-bg{background:linear-gradient(90deg,rgba(3,5,4,.70),rgba(3,5,4,.24),rgba(3,5,4,.48)),url("../assets/experience/a-smarter-stay/scene-07-bg.webp") center/cover no-repeat !important}
#s7 .energy-hotel{background:rgba(8,12,10,.56);backdrop-filter:blur(3px);left:58%;width:min(760px,55vw)}
#s7 .energy-copy{left:7vw;top:10vh;max-width:430px}

/* Scene 08: clean CCTV environment. */
#s8 .existing-bg{background:linear-gradient(90deg,rgba(3,5,5,.74),rgba(3,5,5,.30),rgba(3,5,5,.56)),url("../assets/experience/a-smarter-stay/scene-08-bg.webp") center/cover no-repeat !important}
#s8 .existing-room{background:rgba(9,12,11,.58);backdrop-filter:blur(3px)}

/* Scene 09: clean coastal panorama, with quiet right-side space for perspectives. */
#s9 .perspective-bg{background:linear-gradient(90deg,rgba(4,6,6,.62),rgba(4,6,6,.20) 55%,rgba(4,6,6,.12)),url("../assets/experience/a-smarter-stay/scene-09-bg.webp") center/cover no-repeat !important}
#s9 .perspective-hotel{left:auto;right:5vw;top:50%;width:min(600px,47vw);height:auto;background:transparent;border:0;box-shadow:none}
#s9 .pview{background:rgba(8,11,10,.68);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);border-radius:16px;margin:12px 0;padding:22px 26px}
#s9 .pview .quote{font-size:25px;margin-top:14px}
#s9 .perspective-copy{left:7vw;top:12vh;max-width:360px}
#s9 .perspective-copy h1{font-size:clamp(32px,3.8vw,54px)}
#s9 .perspective-insight{right:auto;left:7vw;bottom:8vh;width:330px}
#s9 .perspective-controls{left:7vw;bottom:20vh}

/* Scene 10: darker CTA treatment over the final hotel image. */
#s10 .close-bg{background:linear-gradient(90deg,rgba(3,5,5,.76),rgba(3,5,5,.36) 62%,rgba(3,5,5,.30)),linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.50));z-index:1}
#s10 .close-cta button,#s10 .close-cta .whatsapp{background:rgba(7,9,9,.58);border-color:rgba(255,255,255,.18)}
#s10 .close-cta .primary{background:rgba(215,180,106,.13);border-color:rgba(215,180,106,.48)}

/* Keep Experience control stable and quiet. */
.topbar{position:fixed !important;top:22px;right:32px;z-index:150;display:flex;align-items:center;gap:10px}
@media(max-width:800px){
 #s4 .net-hotel,#s7 .energy-hotel{left:58%;width:58vw}
 #s9 .perspective-hotel{right:5vw;width:50vw}
 #s9 .perspective-copy{max-width:300px}
}


/* ===== Revision pass ===== */
.continue{pointer-events:none;visibility:hidden}.continue.show{pointer-events:auto;visibility:visible}
.orient[hidden]{display:none}.orient.back{min-width:36px;padding:8px 12px;font-size:14px;letter-spacing:0}
button:focus-visible,[role=button]:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* Scene 3: door layer was shifted off-screen; keep it pinned and click-through, pad re-enables clicks */
#s3 .door{left:0;pointer-events:none}
#s3 .access-demo{left:calc(50% - 40px);top:30%}
.access-demo.show-pin,.access-demo.show-finger{pointer-events:auto}
.finger-pin{pointer-events:none;transition:opacity .3s}.finger-pin.hide{opacity:0}
.demo-label{font-size:11px}
.pin-display{width:210px;margin-bottom:10px;padding:11px;text-align:center;font-size:18px;letter-spacing:.34em;color:#70dceb;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(8,10,9,.86)}
.pin-hint{width:210px;margin-top:10px;text-align:center;font-size:11px;color:#a0a7a1}
.access-demo.show-finger .pin-display,.access-demo.show-finger .pin-hint{display:none}
.demo-pad span{cursor:pointer;user-select:none;transition:background .2s,border-color .2s}.demo-pad span:hover,.demo-pad span:focus-visible{background:#1b211f;border-color:rgba(85,217,238,.45)}
.demo-pad.shake{animation:shake .4s}@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.fingerprint-demo{cursor:pointer}.fp-hint{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-style:normal;font-size:11px;letter-spacing:.14em;color:#a0a7a1;text-transform:uppercase}
.fingerprint-demo.scanning .fingerprint-mark{color:#55d9ee;text-shadow:0 0 22px rgba(85,217,238,.7)}
#s3 .panel{width:136px}
/* Scene 4 */
#s4 .net-hotel{left:68%;width:min(740px,50vw)}
.net-node.internet{left:50%;top:8%;transform:translateX(-50%);text-align:center}
/* Scene 7 */
#s7 .energy-hotel{left:68%;width:min(720px,50vw)}
.energy-count{position:absolute;right:4%;top:4%;font-size:11px;letter-spacing:.14em;color:#c9ccc5}
.energy-hotel.solar .energy-source{color:#d7b46a}
/* Scene 8 */
.existing-result .tradeoff{margin-top:9px;color:#cfd2cb}
/* Scene 9 */
.perspective-controls{flex-wrap:wrap;align-items:center;max-width:420px}.pv-hint{flex-basis:100%;font-size:11px;color:#a0a7a1;margin-top:4px}
/* Scene 10: primary CTA always visible */
.close-cta{opacity:1}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}.fadeflash{display:none}}
/* ===== Final visual refinement pass ===== */
/* From Scene 03 onward, continuation is a consistent, quiet bottom-right action. */
#s3 .continue,#s4 .continue,#s5 .continue,#s6 .continue,#s7 .continue,#s8 .continue,#s9 .continue{left:auto;right:5vw;bottom:5vh;font-weight:650;font-size:11px;letter-spacing:.18em;padding:13px 18px;border:1px solid rgba(215,180,106,.52);border-radius:999px;background:rgba(8,10,9,.48);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.22)}
#s3 .continue:hover,#s4 .continue:hover,#s5 .continue:hover,#s6 .continue:hover,#s7 .continue:hover,#s8 .continue:hover,#s9 .continue:hover{background:rgba(215,180,106,.10);border-color:rgba(215,180,106,.78)}
/* Scene 05: the visual verification is an actual camera feed, not a placeholder box. */
#s5 .fire-message{left:7vw;top:15vh;max-width:390px}
#s5 .fire-steps{right:5vw;top:21vh;width:220px}
#s5 .camera-view{left:auto;right:27vw;top:17vh;bottom:auto;width:min(430px,34vw);height:min(275px,31vh);border:1px solid rgba(85,217,238,.42);border-radius:9px;background-color:#080b0b;background-size:cover;background-position:center;box-shadow:0 25px 65px rgba(0,0,0,.48);display:none;overflow:hidden}
#s5 .camera-view.show{display:block}
#s5 .camera-view:before{content:"CAM 02 · ZONE 2 · CORRIDOR";left:12px;top:10px;right:auto;font-size:10px;letter-spacing:.12em;color:#e8e3d8;background:rgba(3,5,5,.52);padding:6px 8px;border-radius:5px;z-index:3}
#s5 .camera-view:after{content:"● LIVE   ·   07 OCT 2026 · 14:32:18";right:10px;bottom:9px;font-size:9px;letter-spacing:.08em;color:#eee9df;background:rgba(3,5,5,.55);padding:5px 7px;border-radius:4px;z-index:3}
#s5 .camera-view .cam-cross{left:50%;top:52%;width:58px;height:38px;border:1px solid rgba(85,217,238,.52);box-shadow:0 0 22px rgba(85,217,238,.08);opacity:.7}
#s5 .camera-view .cam-cross:before{content:"ZONE 2";position:absolute;left:7px;top:-17px;font-size:8px;letter-spacing:.12em;color:#55d9ee}
#s5 .camera-view .cam-cross:after{content:"";position:absolute;inset:-80px -120px;background:radial-gradient(circle at center,transparent 42%,rgba(0,0,0,.32) 100%);pointer-events:none}
/* Scene 08: let the real CCTV camera in the photograph do the visual work. */
#s8 .existing-room{display:none}
#s8 .existing-copy{left:7vw;top:13vh;max-width:520px}
#s8 .existing-options{right:7vw;top:28vh;width:275px}
#s8 .oldtag{position:static;margin-top:18px}
#s8 .existing-question{margin-top:18px}

/* Final desktop spacing polish — keep narrative, interaction and response areas visually separate. */
@media(min-width:801px){
  #s7 .energy-result{right:7vw;bottom:16vh;width:300px;max-width:22vw}
  #s7 .energy-demand{display:none}
  #s7 .energy-result p{max-width:300px}
  #s8 .existing-options{top:23vh}
  #s8 .existing-result{right:7vw;bottom:14vh;width:315px;max-width:24vw}
}
/* Scene 10: solution areas are the interaction; no redundant reveal button. */
#s10 .solution-links{opacity:1;pointer-events:auto}
#s10 .solution-links button{position:relative}
#s10 .solution-links button:after{content:"→";position:absolute;right:14px;color:#9aa19b;transition:.2s}
#s10 .solution-links button:hover:after{transform:translateX(4px);color:#d7b46a}
#s10 .close-cta{right:5vw;bottom:5vh;max-width:440px}
/* WhatsApp consent micro-modal */
.wa-consent-backdrop{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.56);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:24px}
.wa-consent-backdrop.show{display:flex}
.wa-consent{width:min(430px,92vw);padding:24px 24px 20px;background:rgba(11,14,13,.96);border:1px solid rgba(215,180,106,.42);border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.55);color:#eee9df}
.wa-consent .kicker{margin-bottom:9px}.wa-consent h2{font-size:22px;font-weight:500;margin:0 0 10px}.wa-consent p{font-size:12px;line-height:1.55;color:#b7bbb4;margin:0 0 12px}.wa-consent .wa-note{font-size:10px;color:#8f9690;margin-bottom:17px}.wa-consent-actions{display:flex;justify-content:flex-end;gap:9px}.wa-consent-actions button{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#eee9df;border-radius:999px;padding:10px 15px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.wa-consent-actions .wa-continue{border-color:rgba(215,180,106,.6);background:rgba(215,180,106,.10)}
/* ===== Phone layout (<=700px) ===== */
@media(max-width:700px){
  .copy,#s4 .net-question,#s5 .fire-message,#s6 .ops-copy,#s7 .energy-copy,#s8 .existing-copy,#s9 .perspective-copy{left:5vw;right:5vw;top:9vh;max-width:none;width:auto}
  .copy h1,#s4 .net-question h1,#s5 .fire-message h1,#s6 .ops-copy h1,#s7 .energy-copy h1,#s8 .existing-copy h1,#s9 .perspective-copy h1{font-size:clamp(26px,7.4vw,32px);line-height:1.06}
  .lead,.copy p{font-size:14px;line-height:1.5}
  /* 3 */
  #s3 .access-demo{left:calc(50% - 105px);top:34%}
  #s3 .panel{right:auto;left:5vw;top:auto;bottom:24vh;width:140px}
  #s3 .result,#result{left:5vw;right:5vw;width:auto}
  /* 4 */
  #s4 .net-hotel{left:50%;top:60%;width:92vw;height:340px}
  #s4 .net-node{min-width:0;width:41%;padding:9px 10px}
  #s4 .net-node.internet,#s4 .net-node.core{width:46%}
  #s4 .net-node.guest{left:4%;top:20%}#s4 .net-node.ops{right:4%;top:20%}#s4 .net-node.security{left:4%;bottom:6%;top:auto}
  #s4 .net-choices{left:5vw;right:5vw;bottom:5vh;display:flex;gap:8px}
  #s4 .net-result,#netResult{left:5vw;right:5vw;width:auto;bottom:12vh}
  /* 5 */
  #s5 .fire-room{left:5vw;width:46%;top:36%;height:26%}
  #s5 .fire-steps{right:5vw;top:36%;width:42vw}
  #s5 .camera-view{left:5vw;bottom:14vh;width:44vw;height:96px}
  /* 6 */
  #s6 .request-card{left:5vw;right:5vw;top:32vh;width:auto}
  /* 7 */
  #s7 .energy-hotel{left:50%;top:54%;width:90vw;height:230px}
  #s7 .energy-controls{left:5vw;right:5vw;bottom:5vh;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #s7 .energy-result{left:5vw;right:5vw;bottom:22vh;width:auto}
  /* 8 */
  #s8 .existing-options{left:5vw;right:5vw;top:auto;bottom:5vh;width:auto;grid-template-columns:1fr 1fr}
  #s8 .existing-result{left:5vw;right:5vw;bottom:30vh;width:auto}
  /* 9 */
  #s9 .perspective-hotel{left:5vw;right:5vw;width:auto;top:52%}
  #s9 .pview{padding:14px 16px;margin:6px 0}#s9 .pview .quote{font-size:18px;margin-top:8px}
  #s9 .perspective-controls{left:5vw;bottom:19vh;max-width:90vw}
  #s9 .perspective-insight{left:5vw;right:5vw;bottom:5vh;width:auto}
  /* 10 */
  .solution-links{left:5vw;right:5vw;top:30vh;width:auto}
  .close-cta{left:5vw;right:5vw;bottom:5vh;justify-content:flex-start;max-width:none}
  .continue{left:auto;right:5vw;bottom:2.2vh}
}
@media(max-width:700px){
  #s3 .access-demo{top:29%}
  #s3 .panel{left:auto;right:5vw;bottom:21vh;width:38vw}
  #result{right:auto;width:52vw;bottom:22vh;top:auto}
  #s4 .net-hotel{height:320px;top:57%}
  #s4 .net-node:not(.core) span{display:none}
  #s4 .net-node.internet{top:4%}#s4 .net-node.guest,#s4 .net-node.ops{top:24%}
  #s7 .energy-demand{display:none}
  #s8 .existing-room{left:5vw;right:5vw;top:41%;width:auto;height:100px}
  #s8 .existing-result{bottom:27vh}
  #s9 .perspective-hotel{transform:translateY(-50%);height:300px;top:49%}
}
@media(max-width:700px){
  .pin-hint{display:none}
  #s3 .panel{width:36vw;bottom:22vh}
  #result{width:48vw}
}
#s3 .panel{z-index:15}

.chapter-label{position:absolute;z-index:60;left:clamp(14px,2.2vw,28px);top:clamp(14px,2.4vh,22px);display:flex;align-items:baseline;gap:10px;color:rgba(238,235,226,.72);font-size:9px;letter-spacing:.18em;text-transform:uppercase}.chapter-label strong{color:#f0ece2;font-weight:500}.screen-note{display:none;position:absolute;z-index:55;left:50%;bottom:18px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);padding:7px 11px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(5,7,7,.55);backdrop-filter:blur(8px);color:rgba(230,227,218,.72);font-size:9px;letter-spacing:.08em;text-align:center}.consult-experience{position:absolute;z-index:55;left:clamp(14px,2.2vw,28px);bottom:clamp(14px,2.4vh,22px);display:none}
@media(max-width:700px){.chapter-label{left:14px;top:14px;gap:7px;font-size:8px}.chapter-label span{display:none}.screen-note{display:block;bottom:8px}.topbar{right:14px;top:14px}.continue{bottom:max(28px,calc(env(safe-area-inset-bottom) + 24px));}.s2status{bottom:15vh;max-width:48vw}.phone{right:4vw;top:24vh;transform:scale(.66) rotate(1deg);transform-origin:top right}.scene2-photo{background-size:contain;background-position:center top;background-color:#080a0a}.scene1-photo,.scene10-photo{background-size:contain;background-position:center top;background-color:#080a0a}}
@media(min-width:701px){.chapter-label{display:flex}}

/* FINAL MOBILE VIEWPORT QA — keep progression controls clear of browser/safe-area edges */
@media(max-width:700px){
  .continue{z-index:120;bottom:max(76px,calc(env(safe-area-inset-bottom) + 58px));right:5vw;left:auto;display:inline-flex;align-items:center;min-height:34px;padding:8px 0}
  #s1 .continue,#s2 .continue,#s3 .continue,#s4 .continue,#s5 .continue,#s6 .continue,#s7 .continue,#s8 .continue,#s9 .continue{bottom:max(76px,calc(env(safe-area-inset-bottom) + 58px))}
  .screen-note{bottom:8px;z-index:55}
  /* Closing scene: compact two-column solution map and a dedicated action zone. */
  #s10 .close-copy{left:5vw;right:5vw;top:10vh;max-width:none}
  #s10 .close-copy h1{font-size:clamp(30px,8vw,38px);line-height:1.04;margin-bottom:12px}
  #s10 .close-sub{font-size:13px;line-height:1.45;max-width:none}
  #s10 .solution-links{left:5vw;right:5vw;top:31vh;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
  #s10 .solution-links button{min-height:46px;padding:11px 34px 11px 13px;font-size:10px;line-height:1.25}
  #s10 .close-cta{left:5vw;right:5vw;bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px));display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:none;align-items:stretch}
  #s10 .close-cta button,#s10 .close-cta a{min-height:42px;display:flex;align-items:center;justify-content:center;padding:10px 12px;text-align:center;font-size:9px;letter-spacing:.10em;line-height:1.25}
  #s10 .close-cta .primary{grid-column:1 / -1}
}

.orientation-note{color:#777;font-size:11px;line-height:1.5;margin-top:20px}

.pin-code{color:#55d9ee}