:root{--secure:#54dfa2;--access:#45a4ff;--alert:#ffb85e}.access-product{background:#06111d}.access-product .product-scene{background:#06111d}.product-nav nav .current{color:var(--secure);opacity:1}.access-image{position:absolute;inset:0;background:url('assets/smart-access-villa.png') center/cover;filter:contrast(1.08) saturate(1.08);animation:accessTone 9s ease-in-out infinite alternate}.access-shade{position:absolute;inset:0;background:linear-gradient(90deg,#020a15f7,#020a15d2 35%,transparent 65%),linear-gradient(0deg,#020a159e,transparent 44%)}@keyframes accessTone{to{filter:contrast(1.12) saturate(1.18) brightness(1.06)}}.access-copy{position:absolute;z-index:3;left:10vw;top:50%;translate:0 -44%;max-width:700px}.access-copy p,.access-section-copy p,.video-copy p,.lock-copy p{font-size:15px;line-height:1.72;color:#afbacb;max-width:520px}.gate-sequence{position:absolute;z-index:3;inset:0;pointer-events:none}.gate-beams i{position:absolute;right:15%;width:25%;height:1px;background:#4ce09b;box-shadow:0 0 11px #4ce09b;animation:beamScan 2s ease-in-out infinite}.gate-beams i:nth-child(1){top:58%}.gate-beams i:nth-child(2){top:64%;animation-delay:.4s}.gate-beams i:nth-child(3){top:70%;animation-delay:.8s}@keyframes beamScan{50%{opacity:.22}}.access-marker{position:absolute;padding:9px 12px;border:1px solid #ffffff2a;border-radius:12px;background:#04151dcc;display:flex;align-items:center;gap:9px;opacity:0;transition:.5s}.access-marker>i{width:7px;height:7px;border-radius:50%;background:var(--secure);box-shadow:0 0 12px var(--secure)}.access-marker span{display:grid}.access-marker small{font-size:7px;color:#64dbb0}.access-marker b{font:500 10px Manrope}.am-detect{right:25%;top:47%}.am-open{right:33%;top:35%}.am-lock{right:8%;top:39%}.access-hero[data-access="detect"] .am-detect,.access-hero[data-access="open"] .am-open,.access-hero[data-access="lock"] .am-lock{opacity:1;transform:translateY(-7px);box-shadow:0 18px 45px #0008,0 0 25px #42df9a24}.access-live{position:absolute;z-index:4;right:5vw;bottom:6vh;width:330px;padding:14px;border:1px solid #55df9c52;border-radius:15px;background:#06151fc9;display:flex;align-items:center;gap:10px;backdrop-filter:blur(13px)}.access-live>i{width:8px;height:8px;border-radius:50%;background:var(--secure);box-shadow:0 0 14px var(--secure)}.access-live span{display:grid}.access-live small{font-size:8px;color:#67dcac}.access-live b{font:500 12px Manrope}.access-live em{margin-left:auto;font:600 8px Manrope;color:#f2bd6a;font-style:normal}.access-live>div{position:absolute;left:13px;right:13px;bottom:0;height:1px;background:#ffffff16}.access-live>div i{display:block;height:100%;background:var(--secure);animation:accessProgress 2.8s linear infinite}@keyframes accessProgress{from{width:0}to{width:100%}}
.gate-scene{background:radial-gradient(circle at 73% 50%,#175bb839,transparent 35%),#061320}.access-section-copy,.video-copy,.lock-copy{position:absolute;left:10vw;top:50%;translate:0 -48%;width:38%}.access-section-copy h2,.video-copy h2,.lock-copy h2{font-size:clamp(44px,5vw,72px)}.gate-controls,.video-actions,.credential-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}.gate-controls button,.video-actions button,.credential-tabs button{padding:10px 13px;border:1px solid #ffffff2a;border-radius:30px;background:transparent;color:#91a0b6;font-size:9px;cursor:pointer}.gate-controls button.active,.credential-tabs button.active{background:#fff;color:#07131e}.gate-demo{position:absolute;right:5vw;top:14vh;width:52vw;height:70vh;border:1px solid #ffffff22;border-radius:25px;overflow:hidden;background:linear-gradient(#172a3e,#0b1724 62%,#202831)}.gate-track{position:absolute;left:5%;right:5%;bottom:18%;height:7px;background:#56616a}.demo-gate{position:absolute;z-index:2;left:17%;bottom:20%;width:66%;height:52%;display:flex;gap:8px;padding:10px;background:#101820;border:5px solid #2e3941;transition:1.4s cubic-bezier(.76,0,.24,1)}.demo-gate i{flex:1;background:#27333a}.gate-demo.open .demo-gate{transform:translateX(-72%)}.gate-demo.close .demo-gate{transform:none}.gate-demo.pause .demo-gate{transform:translateX(-35%)}.gate-motor{position:absolute;z-index:3;right:9%;bottom:19%;width:75px;height:105px;border-radius:12px;background:#737d80;display:grid;place-content:center;text-align:center}.gate-motor i{width:24px;height:24px;border:3px solid #28343a;border-radius:50%;animation:motorSpin 1s linear infinite}.gate-demo.pause .gate-motor i{animation-play-state:paused}@keyframes motorSpin{to{rotate:360deg}}.gate-motor b{font:600 7px Manrope;margin-top:8px}.photo-beam i{position:absolute;z-index:4;left:7%;right:7%;height:1px;background:#4fe0a0;box-shadow:0 0 8px #4fe0a0}.photo-beam i:first-child{bottom:35%}.photo-beam i:last-child{bottom:43%}.gate-status,.caller,.video-result{position:absolute;left:20px;right:20px;bottom:18px;padding:12px 14px;border:1px solid #ffffff29;border-radius:13px;background:#06131dda;display:flex;align-items:center;gap:9px}.gate-status>i,.caller>i,.video-result>i{width:7px;height:7px;border-radius:50%;background:var(--secure);box-shadow:0 0 12px var(--secure)}.gate-status span,.caller span,.video-result span{display:grid}.gate-status small,.caller small,.video-result small{font-size:8px;color:#60dbaa}.gate-status b,.caller b,.video-result b{font:500 11px Manrope}.gate-status em,.caller em{margin-left:auto;font:600 9px Manrope;color:#f4bf6b;font-style:normal}
.video-scene{background:radial-gradient(circle at 72% 48%,#198b8733,transparent 34%),#06111c}.visitor-console{position:absolute;right:8vw;top:11vh;width:43vw;height:76vh;border:1px solid #ffffff25;border-radius:28px;background:#071725;padding:20px;box-shadow:0 30px 80px #0008}.video-feed{position:relative;height:72%;border-radius:18px;background:linear-gradient(#577b8d,#bd966c 62%,#313d42);overflow:hidden;display:grid;place-content:center}.visitor-avatar{width:125px;height:190px;border:1px solid #ffffff5c;border-radius:60px 60px 25px 25px;display:grid;place-content:center;text-align:center;background:#1a3240}.visitor-avatar i{width:55px;height:55px;border-radius:50%;background:#788e99;margin:auto}.visitor-avatar b{font:600 9px Manrope;margin-top:12px}.video-feed>span{position:absolute;left:15px;top:15px;font:600 8px Manrope;color:#d7e4e8}.scan-line{position:absolute;left:0;right:0;top:0;height:2px;background:#62e3c5;box-shadow:0 0 13px #62e3c5;animation:videoScan 3s linear infinite}@keyframes videoScan{to{top:100%}}.caller{bottom:83px}.video-result{bottom:18px}.video-actions button:hover{background:#164f7b;color:#fff}
.lock-scene{background:radial-gradient(circle at 74% 48%,#206dc13b,transparent 34%),#06111e}.digital-lock{position:absolute;right:17vw;top:11vh;width:270px;height:77vh;border-radius:48px;background:linear-gradient(145deg,#28333c,#040811 65%);border:1px solid #ffffff3d;box-shadow:-30px 40px 80px #0009,inset 0 0 0 5px #080d13;padding:25px}.lock-camera{width:13px;height:13px;border-radius:50%;background:#05080c;border:2px solid #53606b;margin:auto;box-shadow:0 0 15px #3b83ff}.lock-screen{height:90px;margin-top:23px;border:1px solid #ffffff23;border-radius:15px;background:#071b36;padding:14px}.lock-screen small{font-size:8px;color:#6f9af3}.lock-screen b{display:block;font:500 15px Manrope;margin-top:5px}.finger-scan{position:absolute;left:50%;top:41%;translate:-50% -50%;width:90px;height:90px;border:1px solid #4f86ea;border-radius:50%;display:grid;place-content:center}.finger-scan i{position:absolute;inset:12px;border:1px solid #66a1ff;border-radius:50%;animation:fingerPulse 2s ease-out infinite}.finger-scan i:nth-child(2){animation-delay:.65s}.finger-scan i:nth-child(3){animation-delay:1.3s}@keyframes fingerPulse{to{inset:-20px;opacity:0}}.pin-grid{display:none;position:absolute;left:50%;top:40%;translate:-50% -50%;grid-template-columns:repeat(3,38px);gap:8px}.pin-grid i{display:grid;place-content:center;width:38px;height:38px;border:1px solid #ffffff2a;border-radius:50%;font-style:normal}.digital-lock[data-credential="pin"] .finger-scan,.digital-lock[data-credential="otp"] .finger-scan,.digital-lock[data-credential="card"] .finger-scan{display:none}.digital-lock:not([data-credential="finger"]) .pin-grid{display:grid}.lock-handle{position:absolute;right:-85px;top:58%;width:125px;height:22px;border-radius:13px;background:linear-gradient(#d4b46c,#765622);box-shadow:0 12px 25px #0008}.lock-result{position:absolute;left:25px;right:25px;bottom:35px;text-align:center;color:#55dfa1}.lock-result i{display:block;width:8px;height:8px;border-radius:50%;background:var(--secure);box-shadow:0 0 12px var(--secure);margin:0 auto 8px}.lock-result b{font:600 9px Manrope;letter-spacing:.13em}
.monitor-scene,.access-features{padding:105px 7vw 40px 10vw;background:radial-gradient(circle at 82% 13%,#188b6e30,transparent 27%),#06131f}.monitor-head,.access-features .feature-heading{display:flex;align-items:end;justify-content:space-between}.monitor-head h2,.access-features .feature-heading h2{font-size:clamp(38px,4.4vw,64px);text-align:right;margin:0}.monitor-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:35px;border:1px solid #ffffff24;position:relative;padding-bottom:75px}.monitor-grid article{height:260px;padding:24px;border-right:1px solid #ffffff24;position:relative;background:#07172699}.monitor-grid article:nth-child(4){border:0}.monitor-grid span,.access-feature-grid span{font-size:10px;color:#5de0a5}.monitor-grid h3{font:500 19px Manrope;margin-top:55px}.monitor-grid p{font-size:11px;color:#93a5b9}.monitor-grid article>i{position:absolute;right:20px;top:20px;width:7px;height:7px;border-radius:50%;background:var(--secure);box-shadow:0 0 12px var(--secure)}.monitor-grid article>b{position:absolute;left:24px;bottom:22px;font:600 8px Manrope;color:#65dda8}.monitor-event{position:absolute;left:18px;right:18px;bottom:14px;height:48px;border:1px solid #ffffff20;border-radius:13px;background:#06131e;display:flex;align-items:center;padding:0 14px;gap:10px}.monitor-event>i{width:7px;height:7px;border-radius:50%;background:#ffbd67;box-shadow:0 0 12px #ffbd67}.monitor-event span{display:grid}.monitor-event small{font-size:7px;color:#d6af68}.monitor-event b{font:500 10px Manrope;color:#fff}.monitor-event em{margin-left:auto;font:600 8px Manrope;color:#7890ac;font-style:normal}.access-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px;border:1px solid #ffffff24}.access-feature-grid article{height:205px;padding:23px;border-right:1px solid #ffffff24;border-bottom:1px solid #ffffff24;transition:.4s}.access-feature-grid article:nth-child(3n){border-right:0}.access-feature-grid article:nth-child(n+4){border-bottom:0}.access-feature-grid h3{font:500 18px Manrope;margin:38px 0 7px}.access-feature-grid p{font-size:11px;color:#94a6ba;line-height:1.55}.access-feature-grid article:hover{background:#0d594667;transform:translateY(-6px);box-shadow:0 20px 55px #0008}.access-cta{background:radial-gradient(circle,#148c6840,transparent 42%),#06111d}.shield-mark{position:relative;width:88px;height:88px;display:grid;place-content:center;margin-bottom:25px}.shield-mark i{position:absolute;inset:18px;border:1px solid #55dfa3;border-radius:50%;animation:shieldPulse 2.6s ease-out infinite}.shield-mark i:nth-child(2){animation-delay:.85s}.shield-mark i:nth-child(3){animation-delay:1.7s}.shield-mark b{font-size:20px;color:#5ce0a6}@keyframes shieldPulse{to{inset:-10px;opacity:0}}
@media(max-width:900px){.access-copy,.access-section-copy,.video-copy,.lock-copy{left:16vw;width:72%}.access-copy h1{font-size:48px}.access-live{display:none}.gate-demo,.visitor-console{right:-38vw;width:83vw;opacity:.52}.digital-lock{right:-60px;opacity:.55}.monitor-grid{grid-template-columns:repeat(2,1fr)}.monitor-grid article{height:140px;padding:14px}.monitor-grid article:nth-child(2){border-right:0}.monitor-grid h3{margin-top:25px;font-size:14px}.monitor-event{display:none}.access-feature-grid{grid-template-columns:repeat(2,1fr)}.access-feature-grid article{height:145px;padding:14px}.access-feature-grid h3{font-size:14px;margin-top:22px}.access-feature-grid p{font-size:9px}}