.scene{height:calc(100% - 50px);position:relative;border-radius:24px;overflow:hidden;background:radial-gradient(circle at 50% 36%,rgba(107,234,255,.1),transparent 36%),rgba(0,0,0,.22)}.business-image-wrap{position:absolute;inset:12px;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015));display:grid;place-items:center}.business-image{width:100%;height:100%;object-fit:contain;filter:saturate(1.02) contrast(1.05) brightness(.88);transition:opacity .45s var(--ease),transform .75s var(--ease)}.business-image-wrap:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,8,19,.12),rgba(3,8,19,.42));pointer-events:none}.image-fallback{display:none;position:absolute;inset:0;place-items:center;color:rgba(255,255,255,.25);font-size:42px;font-weight:900;letter-spacing:1px}.network-svg{position:absolute;inset:0;z-index:4;pointer-events:none}.line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:8 14;opacity:0;filter:drop-shadow(0 0 9px rgba(107,234,255,.45));animation:dashMove 3.8s linear infinite}.line-connect,.line-fwa{stroke:rgba(107,234,255,.42)}.line-ai{stroke:rgba(190,132,255,.38)}.scene.connect-active .line-connect,.scene.connect-active .line-fwa{opacity:.85}.scene.understand-active .line-ai{opacity:.75}.wifi-pulse{position:absolute;left:48%;bottom:22%;width:220px;height:220px;z-index:5;opacity:0;pointer-events:none;transform:translate(-50%,50%)}.scene.connect-active .wifi-pulse{opacity:1}.wifi-pulse span{position:absolute;inset:50%;border:1px solid rgba(107,234,255,.58);border-radius:50%;transform:translate(-50%,-50%);animation:wifiWave 2.4s ease-out infinite;box-shadow:0 0 22px rgba(107,234,255,.28)}.wifi-pulse span:nth-child(2){animation-delay:.55s}.wifi-pulse span:nth-child(3){animation-delay:1.1s}.hud-column{position:absolute;z-index:12;display:flex;flex-direction:column;gap:10px;top:64px;bottom:14px;width:232px;pointer-events:none}.hud-left{left:18px}.hud-right{right:18px}.hud-card{position:relative;padding:12px;opacity:0;transform:translateY(12px);transition:.42s var(--ease);pointer-events:auto}.hud-card.visible{opacity:1;transform:translateY(0)}.hud-title{font-size:11px;color:#dcf8ff;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}.status-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06)}.status-row:last-child{border-bottom:0}.status-row b{color:var(--green);font-size:12px}.big-kpi{font-size:36px;font-weight:900;letter-spacing:-1px}.cyan{color:var(--cyan);text-shadow:0 0 16px rgba(107,234,255,.45)}.gold{color:var(--gold);text-shadow:0 0 16px rgba(255,216,107,.35)}.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.analytics-grid div{padding:9px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}.analytics-grid span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.analytics-grid b{display:block;margin-top:5px;font-size:18px}.status-low{color:var(--green)!important}.status-medium{color:var(--orange)!important}.status-high{color:var(--red)!important}.cctv-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.cctv-grid div{height:50px;border-radius:12px;background:linear-gradient(135deg,rgba(107,234,255,.11),rgba(255,255,255,.02));border:1px solid rgba(107,234,255,.12);position:relative;overflow:hidden}.cctv-grid div:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(107,234,255,.05) 8px 9px);animation:scanline 2.2s linear infinite}.cctv-grid span{position:absolute;left:8px;bottom:7px;font-size:10px;color:#d7f8ff}.rec-dot{color:#fff;background:rgba(255,70,90,.18);border:1px solid rgba(255,70,90,.35);border-radius:999px;padding:4px 8px;font-size:10px}.rec-dot:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff4458;margin-right:6px;box-shadow:0 0 10px #ff4458;animation:blink 1s infinite}.heat-map{height:100px;border-radius:16px;background:rgba(255,255,255,.04);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.heat-map i{position:absolute;width:62px;height:62px;border-radius:50%;filter:blur(8px);opacity:.85;background:radial-gradient(circle,var(--gold),rgba(255,120,40,.34),transparent 68%);animation:breathe 3s ease-in-out infinite}.heat-map i:nth-child(1){left:18%;top:20%}.heat-map i:nth-child(2){left:52%;top:36%;animation-delay:.5s}.heat-map i:nth-child(3){left:36%;top:58%;animation-delay:1s}.heat-labels{margin-top:9px;color:var(--muted);font-size:11px}.welcome-phone{height:110px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(107,234,255,.14);padding:14px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:7px}.phone-top{width:46px;height:5px;border-radius:99px;background:rgba(255,255,255,.28)}.welcome-phone strong{color:#fff}.welcome-phone span{color:var(--cyan);font-size:12px}.journey-flow{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px}.journey-flow span{border:1px solid rgba(107,234,255,.18);background:rgba(107,234,255,.08);border-radius:999px;padding:9px 12px;color:#e9fbff;font-weight:800;font-size:12px;box-shadow:0 0 15px rgba(107,234,255,.16);animation:softPulse 2.4s ease-in-out infinite}.journey-flow i{height:2px;flex:1;background:linear-gradient(90deg,transparent,var(--cyan),transparent);position:relative}.journey-flow i:after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan);animation:journeyDot 2s linear infinite}.impact-card{border-color:rgba(255,216,107,.28);box-shadow:0 0 28px rgba(255,216,107,.14),0 16px 42px rgba(0,0,0,.34)}.impact-row{display:flex;justify-content:space-between;padding:8px 0;color:var(--muted);font-size:13px;border-bottom:1px solid rgba(255,255,255,.06)}.impact-row:last-child{border:0}.impact-row b{color:var(--gold);text-shadow:0 0 14px rgba(255,216,107,.35)}


/* Scenario-specific heat map geometry */
.heat-map i{transition:left .55s var(--ease),top .55s var(--ease),width .55s var(--ease),height .55s var(--ease),background .55s var(--ease),opacity .55s var(--ease)}
.heat-map.retail i:nth-child(1){left:12%;top:22%;width:70px;height:70px;background:radial-gradient(circle,#ffd86b,rgba(255,135,40,.42),transparent 68%)}
.heat-map.retail i:nth-child(2){left:57%;top:30%;width:58px;height:58px;background:radial-gradient(circle,#ff9f43,rgba(255,120,40,.36),transparent 68%)}
.heat-map.retail i:nth-child(3){left:36%;top:62%;width:52px;height:52px;background:radial-gradient(circle,#6beaff,rgba(107,234,255,.25),transparent 68%)}
.heat-map.cafe i:nth-child(1){left:18%;top:52%;width:78px;height:78px;background:radial-gradient(circle,#ff9f43,rgba(255,120,40,.42),transparent 68%)}
.heat-map.cafe i:nth-child(2){left:63%;top:20%;width:62px;height:62px;background:radial-gradient(circle,#ffd86b,rgba(255,170,55,.38),transparent 68%)}
.heat-map.cafe i:nth-child(3){left:44%;top:38%;width:46px;height:46px;background:radial-gradient(circle,#6beaff,rgba(107,234,255,.24),transparent 68%)}
.heat-map.beauty i:nth-child(1){left:20%;top:18%;width:54px;height:54px;background:radial-gradient(circle,#6beaff,rgba(107,234,255,.28),transparent 68%)}
.heat-map.beauty i:nth-child(2){left:52%;top:48%;width:68px;height:68px;background:radial-gradient(circle,#ffd86b,rgba(255,135,40,.36),transparent 68%)}
.heat-map.beauty i:nth-child(3){left:72%;top:24%;width:44px;height:44px;background:radial-gradient(circle,#c891ff,rgba(190,132,255,.3),transparent 68%)}
.heat-map.clinic i:nth-child(1){left:16%;top:28%;width:62px;height:62px;background:radial-gradient(circle,#ffd86b,rgba(255,160,55,.34),transparent 68%)}
.heat-map.clinic i:nth-child(2){left:48%;top:60%;width:54px;height:54px;background:radial-gradient(circle,#6beaff,rgba(107,234,255,.26),transparent 68%)}
.heat-map.clinic i:nth-child(3){left:68%;top:24%;width:52px;height:52px;background:radial-gradient(circle,#55e58c,rgba(85,229,140,.24),transparent 68%)}
.heat-map.office i:nth-child(1){left:24%;top:58%;width:54px;height:54px;background:radial-gradient(circle,#6beaff,rgba(107,234,255,.25),transparent 68%)}
.heat-map.office i:nth-child(2){left:58%;top:24%;width:64px;height:64px;background:radial-gradient(circle,#ffd86b,rgba(255,160,55,.32),transparent 68%)}
.heat-map.office i:nth-child(3){left:72%;top:58%;width:42px;height:42px;background:radial-gradient(circle,#c891ff,rgba(190,132,255,.28),transparent 68%)}

/* v2.3 Protect workflow data paths: camera -> cloud -> owner mobile */
.protect-flow{fill:none;stroke-linecap:round;opacity:0;pointer-events:none;transition:opacity .45s var(--ease);filter:drop-shadow(0 0 10px rgba(107,234,255,.42))}
.protect-flow-base{stroke:rgba(107,234,255,.22);stroke-width:2.2}
.protect-flow-packet{stroke:rgba(215,250,255,.88);stroke-width:3.2;stroke-dasharray:2 42;animation:protectPacketFlow 1.55s linear infinite;filter:drop-shadow(0 0 12px rgba(107,234,255,.7))}
.protect-flow-packet.delay-1{animation-delay:.38s}.protect-flow-packet.delay-2{animation-delay:.75s}
.scene.protect-active .protect-flow-base{opacity:.7}
.scene.protect-active .protect-flow-packet{opacity:.96}
.scene.protect-active .cctv-card.visible{animation:protectCardEnter .72s var(--ease) both .95s}
@keyframes protectPacketFlow{to{stroke-dashoffset:-44}}
@keyframes protectCardEnter{0%{opacity:0;transform:translateY(14px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}


/* v2.4 active-scene matte glass layer */
.scene-matte{position:absolute;inset:12px;border-radius:22px;z-index:1;pointer-events:none;opacity:0;transition:opacity .55s var(--ease),backdrop-filter .55s var(--ease);background:linear-gradient(135deg,rgba(4,14,24,.34),rgba(7,24,38,.18));backdrop-filter:blur(0px) saturate(1.05);box-shadow:inset 0 0 120px rgba(0,0,0,.18)}
.scene.any-active .scene-matte{opacity:1;backdrop-filter:blur(2.2px) saturate(1.08)}
.scene.any-active .business-image{filter:saturate(1.04) contrast(1.08) brightness(.74)}
.scene:not(.any-active) .network-svg,.scene:not(.any-active) .equipment-zone,.scene:not(.any-active) .hud-column{z-index:3}
.network-svg,.equipment-zone,.hud-column,.wifi-pulse{z-index:4}

/* v2.4 finale Business Impact overlay */
.impact-finale{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.96);width:min(520px,64%);z-index:8;padding:24px 26px;border-radius:28px;background:linear-gradient(135deg,rgba(8,24,38,.78),rgba(8,16,28,.58));border:1px solid rgba(107,234,255,.22);backdrop-filter:blur(22px);box-shadow:0 0 42px rgba(107,234,255,.20),0 24px 80px rgba(0,0,0,.45),inset 0 0 34px rgba(107,234,255,.06);opacity:0;pointer-events:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.scene.impact-active .impact-finale{opacity:1;transform:translate(-50%,-50%) scale(1);animation:finaleHold 4.8s ease-in-out 1 both}
.finale-kicker{color:var(--cyan);font-size:11px;text-transform:uppercase;letter-spacing:2px;text-align:center;font-weight:900}.impact-finale h3{margin:10px 0 18px;text-align:center;color:#fff;font-size:22px;letter-spacing:.2px;text-shadow:0 0 22px rgba(107,234,255,.32)}.finale-bars{display:flex;flex-direction:column;gap:10px}.finale-bars div{display:grid;grid-template-columns:1fr 135px 44px;align-items:center;gap:10px;color:#c8d7e4;font-size:12px}.finale-bars i{height:7px;border-radius:999px;background:linear-gradient(90deg,var(--cyan2),var(--cyan),var(--gold));box-shadow:0 0 18px rgba(107,234,255,.35);transform-origin:left;animation:finaleBar 1.1s var(--ease) both}.finale-bars div:nth-child(2) i{animation-delay:.12s}.finale-bars div:nth-child(3) i{animation-delay:.24s}.finale-bars div:nth-child(4) i{animation-delay:.36s}.finale-bars b{color:var(--gold);font-size:13px;text-align:right;text-shadow:0 0 15px rgba(255,216,107,.35)}.impact-finale strong{display:block;margin-top:20px;color:var(--cyan);font-size:18px;letter-spacing:1.4px;text-transform:uppercase;text-align:center;text-shadow:0 0 22px rgba(107,234,255,.46)}.impact-finale em{display:block;margin-top:7px;text-align:center;font-style:normal;color:#d8eef6;font-size:12px;letter-spacing:1.3px;text-transform:uppercase}
@keyframes finaleBar{from{transform:scaleX(.12);opacity:.35}to{transform:scaleX(1);opacity:1}}
@keyframes finaleHold{0%{opacity:0;transform:translate(-50%,-45%) scale(.96)}12%,82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:.92;transform:translate(-50%,-50%) scale(1)}}