:root { --ink:#20272d; --muted:#78828a; --paper:#f4f2ee; --sage:#e8edf0; --lime:#b9d4e8; --line:rgba(32,39,45,.14); --page:#f4f2ee; --surface:#f4f2ee; --surface-alt:#e8edf0; --surface-warm:#eeebe5; --copy-muted:#727c84; --link:#496579; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--page); scroll-behavior:smooth; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.glass { border:1px solid rgba(255,255,255,.42); background:linear-gradient(130deg,rgba(255,255,255,.28),rgba(255,255,255,.10)); box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 18px 55px rgba(10,25,18,.15); -webkit-backdrop-filter:blur(22px) saturate(145%); backdrop-filter:blur(22px) saturate(145%); }
.hero { position:relative; z-index:0; isolation:isolate; min-height:920px; height:min(1000px,100svh); overflow:hidden; border-radius:0 0 28px 28px; color:white; background:#22372b; }
.hero__art,.hero__shade { position:absolute; inset:0; z-index:-2; }
.hero__art { background:url("./assets/hero-residential-complex-optimized.webp") center 50% / cover no-repeat; transform:scale(1.015); }
.hero__shade { z-index:-1; background:linear-gradient(90deg,rgba(11,24,18,.44),rgba(13,25,20,.16) 55%,rgba(13,25,20,.37)),linear-gradient(0deg,rgba(10,22,16,.55),transparent 40%,rgba(12,23,18,.23)); }
.nav-wrap { width:min(1380px,calc(100% - 76px)); margin:0 auto; padding-top:24px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:4; }
.brand { display:inline-flex; align-items:center; gap:10px; color:white; font:700 21px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-.8px; }
.brand__mark { width:30px; height:30px; display:inline-flex; justify-content:center; align-items:end; gap:2px; padding:7px 6px; border:1px solid rgba(255,255,255,.78); border-radius:10px 10px 7px 7px; transform:rotate(-4deg); }
.brand__mark span { width:4px; border-radius:4px; background:var(--lime); }.brand__mark span:nth-child(1){height:8px}.brand__mark span:nth-child(2){height:15px}.brand__mark span:nth-child(3){height:11px}
.nav { display:flex; align-items:center; gap:27px; border-radius:999px; padding:13px 23px; color:rgba(255,255,255,.87); font-size:11px; }.nav a { transition:opacity .2s; }.nav a:hover { opacity:.62; }.nav__current { color:white; font-weight:700; }.nav__login { color:white; font-size:11px; font-weight:600; padding:13px 17px; border-radius:999px; }.nav__login span { margin-left:9px; }
.hero__content { width:min(1240px,calc(100% - 100px)); height:calc(100% - 74px); margin:0 auto; display:grid; grid-template-columns:.72fr 1fr; gap:clamp(60px,12vw,190px); align-items:center; padding:26px 4% 62px; }
.hero-phone { width:clamp(245px,25vw,315px); min-height:628px; justify-self:center; align-self:center; position:relative; overflow:hidden; padding:20px 17px 13px; border-radius:39px; border-color:rgba(255,255,255,.7); background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(236,245,232,.77)); color:#22382c; box-shadow:inset 0 1px 0 white,0 40px 90px rgba(5,18,12,.31),0 0 0 7px rgba(255,255,255,.12); transform:rotate(-3deg); }
.hero-phone__island { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:76px; height:17px; border-radius:20px; background:#203429; }.hero-phone__status { display:flex; justify-content:space-between; margin:4px 4px 18px; font-size:8px; font-weight:700; }.phone-brand { display:flex; align-items:center; gap:8px; font:700 12px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }.phone-brand .brand__mark { width:24px; height:24px; border-color:#98aa98; padding:4px; border-radius:7px; }.phone-brand .brand__mark span { background:#78916e; }.phone-avatar { width:27px; height:27px; margin-left:auto; border-radius:50%; display:grid; place-items:center; color:#516b56; background:#e5ecdf; font-size:9px; }
.phone-greeting { color:#8a9589; margin:25px 0 3px; font-size:9px; }.hero-phone h2 { font:700 22px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-.05em; margin:0 0 13px; }.phone-address { display:flex; align-items:center; gap:8px; border:1px solid rgba(79,105,79,.12); border-radius:13px; background:rgba(255,255,255,.75); padding:10px; }.phone-address>span:first-child { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:#5d795e; background:#e9f0e5; font-size:18px; }.phone-address>span:nth-child(2) { display:block; flex:1; }.phone-address b,.phone-address small { display:block; }.phone-address b { font-size:9px; }.phone-address small { color:#8a9589; margin-top:3px; font-size:7px; }.phone-address>span:last-child { color:#7d8a7e; font-size:13px; }
.phone-access { border-radius:15px; padding:12px; margin-top:12px; background:rgba(255,255,255,.77); border:1px solid rgba(79,105,79,.1); }.phone-access__head { display:flex; justify-content:space-between; align-items:center; color:#8d998d; font-size:6px; letter-spacing:.13em; font-weight:700; }.phone-online { letter-spacing:0; color:#758675; font-size:7px; font-weight:500; }.phone-online i,.camera-glass i { display:inline-block; width:5px; height:5px; border-radius:50%; background:#a8c978; margin-right:3px; }.phone-access__buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:11px; }.phone-access__buttons>div { display:flex; flex-direction:column; gap:6px; padding:10px 9px; background:#f0f4ed; border-radius:11px; }.phone-access__buttons small { font-size:7px; color:#435749; }.phone-action-icon { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; color:#526f59; background:#e0ebdd; font-size:15px; }.phone-action-icon--gold { color:#9a825b; background:#f1ebdf; }
.phone-camera { height:168px; margin-top:12px; position:relative; overflow:hidden; border-radius:15px; background:#334635; }.phone-camera__image { position:absolute; inset:0; background:linear-gradient(0deg,rgba(14,29,19,.55),transparent 70%),url("./assets/camera-courtyard-optimized.webp") center 58% / cover; }.phone-camera__live { position:absolute; top:9px; right:9px; border-radius:999px; padding:5px 7px; background:rgba(10,22,14,.49); color:white; font-size:6px; letter-spacing:.08em; }.phone-camera__live i { display:inline-block; width:5px; height:5px; margin-right:3px; border-radius:50%; background:#ee8c78; }.phone-camera__label { position:absolute; left:11px; bottom:10px; color:white; font-size:10px; font-weight:600; }
.phone-bottom { display:flex; justify-content:space-between; text-align:center; margin:14px 0 0; color:#89968b; font-size:14px; }.phone-bottom>span { display:flex; flex-direction:column; gap:4px; align-items:center; }.phone-bottom small { font-size:6px; }.phone-bottom__active { color:#526c55!important; }.phone-demo { display:block; text-align:center; color:#9aa69a; letter-spacing:.14em; font-size:5px; margin-top:13px; }
.hero__copy { max-width:620px; padding-bottom:20px; }.eyebrow { display:inline-flex; align-items:center; gap:9px; padding:10px 14px; border-radius:999px; color:rgba(255,255,255,.92); font-size:10px; letter-spacing:.025em; }.status-dot { width:7px; height:7px; border-radius:50%; display:inline-block; background:var(--lime); box-shadow:0 0 14px rgba(213,240,139,.8); }.hero h1 { font:500 clamp(55px,7.2vw,94px)/.98 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-.065em; margin:25px 0 22px; }.hero h1 em { font-family:inherit; font-style:normal; font-weight:400; }.hero__lead { max-width:500px; color:rgba(255,255,255,.87); font-size:clamp(15px,1.35vw,18px); line-height:1.68; margin:0 0 27px; }.button { min-height:49px; padding:0 19px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:20px; font-weight:600; font-size:11px; transition:transform .2s,box-shadow .2s; }.button:hover,.story-link:hover { transform:translateY(-2px); }.button--light { background:#fff; color:#17241d; }.button--light span { font-size:16px; }.hero__note { margin:17px 0 0; color:rgba(255,255,255,.66); font-size:9px; }.hero__bottom { position:absolute; bottom:21px; left:50%; transform:translateX(-50%); display:flex; gap:18px; align-items:center; white-space:nowrap; border-radius:999px; padding:10px 16px; color:rgba(255,255,255,.8); font-size:8px; letter-spacing:.045em; }.bottom-line { width:28px; height:1px; background:rgba(255,255,255,.5); }
.story-row { min-height:680px; display:grid; grid-template-columns:.76fr 1.24fr; align-items:center; gap:8%; padding:95px max(8vw,calc((100vw - 1170px)/2)); overflow:hidden; }.story-row--door { background:#f4f2ec; }.story-row--camera { background:#e7ede4; }.story-row--gate { background:#f1eee7; }.story-row--guest { background:#e2e9e0; }.story-row--credentials { background:#f4f2ec; }.story-copy { max-width:400px; position:relative; z-index:2; }.story-index { display:flex; align-items:center; gap:10px; color:#7c8c7d; font-size:8px; letter-spacing:.16em; font-weight:700; }.story-index i { width:22px; height:1px; background:#a6b2a2; }.story-copy h2,.faq__heading h2 { font:500 clamp(40px,5vw,63px)/1.04 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-.06em; margin:26px 0 18px; }.story-copy p,.faq__heading>p:last-child { color:#777f77; font-size:13px; line-height:1.8; max-width:370px; margin:0; }.story-link { display:inline-flex; align-items:center; gap:16px; margin-top:25px; color:#35543e; font-size:11px; font-weight:700; transition:transform .2s; }.story-link span { font-size:15px; }.story-visual { height:475px; position:relative; display:grid; place-items:center; border-radius:27px; overflow:hidden; }.story-visual--door { background:radial-gradient(ellipse at 72% 26%,#d9e3d4,#afc1ae 62%,#879b8c); }.story-visual--door::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.3) 40.2%,transparent 41%); }.visual-kicker { position:absolute; top:20px; left:20px; display:flex; gap:8px; align-items:center; padding:9px 12px; border-radius:999px; color:white; font-size:8px; }
.door-scene { width:100%; height:100%; position:relative; display:grid; place-items:center; }.door-frame { position:absolute; top:49px; left:34%; width:205px; height:342px; padding:13px; border-radius:100px 100px 7px 7px; background:#738675; box-shadow:0 28px 52px rgba(34,55,40,.18); }.door-panel { height:100%; border:1px solid rgba(255,255,255,.45); border-radius:88px 88px 4px 4px; background:linear-gradient(115deg,#829487,#526858); position:relative; }.door-handle { position:absolute; right:18px; top:55%; width:7px; height:36px; border-radius:9px; background:#d7c9a8; }.door-reader { position:absolute; left:-22px; top:51%; width:13px; height:25px; border:1px solid rgba(255,255,255,.8); border-radius:4px; background:#46574a; }.door-number { position:absolute; right:18px; top:45%; color:rgba(255,255,255,.8); font:16px Georgia,serif; }.door-phone { position:absolute; right:8%; bottom:33px; width:195px; border-radius:19px; padding:18px; color:#283b2d; background:rgba(255,255,255,.82); }.door-phone__label { display:block; color:#8b998c; font-size:7px; letter-spacing:.15em; margin-bottom:18px; }.door-phone b,.door-phone__hint { display:block; }.door-phone b { font:600 12px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }.door-phone__hint { margin-top:6px; font-size:8px; color:#839084; }.door-phone button,.gate-button button,.guest-phone button { display:flex; justify-content:space-between; align-items:center; width:100%; border:0; border-radius:10px; padding:11px 12px; margin-top:15px; background:#294232; color:white; font-size:8px; }.door-phone button span,.gate-button button span,.guest-phone button span { color:var(--lime); font-size:14px; }.visual-demo { position:absolute; bottom:13px; right:15px; color:rgba(255,255,255,.72); font-size:7px; letter-spacing:.08em; text-transform:uppercase; }
.story-visual--camera { background:#24382d; }.camera-picture { position:absolute; inset:0; background:linear-gradient(0deg,rgba(14,30,19,.48),transparent 60%),url("./assets/camera-courtyard-optimized.webp") center 56% / cover; filter:saturate(.8); transform:scale(1.02); }.camera-glass { position:absolute; left:25px; right:25px; bottom:23px; border-radius:17px; padding:14px 16px; color:white; }.camera-glass__top,.camera-glass__bottom { display:flex; align-items:center; justify-content:space-between; font-size:7px; letter-spacing:.11em; }.camera-glass__top span:last-child { color:rgba(255,255,255,.6); }.camera-glass__bottom { margin-top:22px; padding-top:12px; border-top:1px solid rgba(255,255,255,.2); letter-spacing:0; }.camera-glass__bottom b { font-size:12px; }.camera-glass__bottom span { color:rgba(255,255,255,.64); font-size:8px; }
.story-row--gate .story-visual { order:0; }.story-row--gate .story-copy { order:1; padding-left:4%; }.story-visual--gate { background:radial-gradient(ellipse at 48% 80%,#e8ddc7,#c6d0c3 65%,#9caf9f); }.gate-scene { position:relative; width:100%; height:100%; }.gate-post { position:absolute; z-index:2; left:19%; bottom:75px; width:42px; height:124px; border-radius:9px 9px 3px 3px; background:linear-gradient(90deg,#f3f2eb,#d9ded7); box-shadow:0 20px 35px rgba(42,54,43,.18); }.gate-post__light { position:absolute; top:12px; left:50%; transform:translateX(-50%); width:9px; height:9px; border-radius:50%; background:#b8db77; box-shadow:0 0 12px #d9f1a0; }.gate-arm { position:absolute; z-index:1; left:23%; bottom:176px; width:54%; height:13px; border-radius:8px; transform-origin:left center; transform:rotate(-13deg); background:repeating-linear-gradient(125deg,#f5f3ec 0 33px,#bd634b 33px 62px); box-shadow:0 8px 15px rgba(34,48,37,.15); }.gate-car { position:absolute; left:52%; bottom:97px; width:190px; height:74px; border-radius:38px 56px 16px 14px; background:linear-gradient(140deg,#718575,#415b4a); box-shadow:0 22px 33px rgba(43,60,45,.22); }.gate-car::before { content:""; position:absolute; left:38px; top:-32px; width:108px; height:47px; border-radius:40px 55px 0 0; background:linear-gradient(145deg,#a2b0a2,#5a715e); }.gate-car::after { content:""; position:absolute; left:61px; top:-23px; width:56px; height:35px; border-radius:25px 32px 0 0; background:rgba(214,226,210,.7); }.gate-car span,.gate-car i { position:absolute; bottom:-12px; width:29px; height:29px; border:5px solid #344438; background:#bdc4b8; border-radius:50%; }.gate-car span { left:28px; }.gate-car i { right:30px; }.gate-button { position:absolute; right:7%; top:50px; width:190px; padding:16px; display:flex; flex-direction:column; align-items:flex-start; border-radius:18px; color:#344538; background:rgba(255,255,255,.66); }.gate-button>span { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; margin-bottom:12px; color:#657961; background:#e6ede2; font-size:18px; }.gate-button b { font:600 11px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }.gate-button small { margin-top:5px; color:#879187; font-size:7px; }.gate-button button { margin-top:13px; padding:9px 10px; font-size:7px; }
.story-visual--guest { background:radial-gradient(ellipse at 70% 30%,#cfddcb,#9fb39f 70%,#819887); }.guest-phone { position:relative; z-index:1; width:245px; min-height:420px; padding:17px; border:5px solid rgba(36,52,40,.92); border-radius:34px; background:#fbfcf9; color:#26392e; box-shadow:0 30px 65px rgba(29,48,34,.29); transform:rotate(-4deg); }.guest-phone__status,.guest-phone__header { display:flex; justify-content:space-between; align-items:center; }.guest-phone__status { margin:0 4px 20px; font-size:7px; font-weight:700; }.guest-phone__header { font-size:9px; }.guest-phone__header span { color:#748373; font-size:17px; }.guest-phone p { margin:25px 0 5px; color:#89968a; font-size:8px; }.guest-phone h3 { margin:0; font:600 19px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-.05em; }.qr-code { width:142px; height:142px; margin:19px auto 15px; border:8px solid white; border-radius:12px; box-shadow:0 4px 20px rgba(30,52,35,.08); background-color:#fff; background-image:linear-gradient(90deg,#273a2e 13%,transparent 13% 24%,#273a2e 24% 30%,transparent 30% 39%,#273a2e 39% 50%,transparent 50% 60%,#273a2e 60% 69%,transparent 69% 77%,#273a2e 77%),linear-gradient(#273a2e 12%,transparent 12% 20%,#273a2e 20% 29%,transparent 29% 42%,#273a2e 42% 48%,transparent 48% 58%,#273a2e 58% 67%,transparent 67% 73%,#273a2e 73%); background-blend-mode:multiply; background-size:31px 31px,29px 29px; background-position:0 0,8px 5px; }.qr-code span { position:absolute; }.guest-details { display:flex; flex-direction:column; gap:5px; padding:9px 10px; border-radius:9px; background:#f1f4ef; }.guest-details span { font-size:6px; color:#8c988d; letter-spacing:.12em; }.guest-details b { font-size:8px; }.guest-phone button { margin-top:10px; font-size:7px; }.guest-phone__demo { display:block; margin-top:8px; text-align:center; color:#9aa59a; font-size:5px; letter-spacing:.13em; }.guest-note { position:absolute; right:5%; top:85px; z-index:2; display:flex; align-items:center; gap:9px; padding:12px; color:white; border-radius:15px; }.guest-note__icon { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:rgba(255,255,255,.17); color:var(--lime); }.guest-note b,.guest-note small { display:block; }.guest-note b { font-size:8px; }.guest-note small { color:rgba(255,255,255,.62); margin-top:4px; font-size:7px; }.guest-note .status-dot { margin-left:5px; width:5px; height:5px; }
.credential-grid { min-height:460px; position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:17px; padding:17px 20px 33px; align-items:center; }.credential { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:170px; padding:21px; border-radius:22px; background:#e9eee6; color:#2c4132; box-shadow:0 15px 36px rgba(51,65,51,.09); }.credential--key { background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.23)); transform:translateY(15px) rotate(-4deg); }.credential--pin { min-height:137px; align-items:center; background:#f1ece2; transform:translateY(-13px) rotate(3deg); }.credential--face { min-height:150px; align-items:center; background:#e9eee7; transform:translateY(5px) rotate(4deg); }.credential--car { min-height:137px; align-items:center; background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.3)); transform:translateY(-9px) rotate(-2deg); }.credential-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid #bdcbbb; border-radius:14px; font-size:23px; margin-bottom:16px; color:#627d64; }.credential-label { color:#8b978b; font-size:7px; letter-spacing:.13em; }.credential b { margin-top:9px; font:600 14px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }.credential--pin b,.credential--car b { padding:7px 13px; border:1px solid #cad3c7; border-radius:8px; background:rgba(255,255,255,.72); letter-spacing:.08em; font-size:14px; }.credential small { margin-top:7px; color:#879187; font-size:8px; }.face-icon { width:59px; height:59px; margin-bottom:8px; position:relative; border:1px solid #bdcbbb; border-radius:17px; background:rgba(255,255,255,.42); }.face-icon i { position:absolute; top:20px; width:4px; height:4px; border-radius:50%; background:#607563; }.face-icon i:first-child { left:18px; }.face-icon i:nth-child(2) { right:18px; }.face-icon b { position:absolute; left:18px; bottom:14px; width:22px; height:10px; border-bottom:1.5px solid #607563; border-radius:50%; }.credential--face b { font-size:10px; }.credential-note { position:absolute; left:50%; bottom:7px; transform:translateX(-50%); white-space:nowrap; color:#939b91; font-size:7px; }
.faq { display:grid; grid-template-columns:.7fr 1fr; gap:12%; padding:120px max(8vw,calc((100vw - 1170px)/2)) 130px; background:#f4f2ec; }.faq__heading h2 { margin-top:23px; }.faq__heading>p:last-child { max-width:300px; font-size:11px; }.faq__list { border-top:1px solid var(--line); }.faq details { padding:22px 0; border-bottom:1px solid var(--line); }.faq summary { list-style:none; display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-size:11px; font-weight:600; }.faq summary::-webkit-details-marker { display:none; }.faq summary span { color:#859185; font-size:19px; font-weight:300; transition:transform .2s; }.faq details[open] summary span { transform:rotate(45deg); }.faq details p { max-width:530px; margin:13px 30px 0 0; color:#778078; font-size:10px; line-height:1.7; }
.footer { display:flex; align-items:center; justify-content:space-between; padding:26px max(8vw,calc((100vw - 1170px)/2)); background:#1b2a21; color:rgba(255,255,255,.65); font-size:9px; }.brand--footer { color:white; font-size:17px; }.brand--footer .brand__mark { width:25px; height:25px; border-radius:8px; padding:5px; }.footer>a:last-child { color:white; }.footer>a:last-child span { margin-left:6px; }
@media(max-width:950px) { .nav-wrap { width:calc(100% - 40px); }.nav { gap:15px; padding:11px 15px; }.hero__content { width:calc(100% - 48px); gap:7vw; padding-left:0; padding-right:0; }.hero-phone { width:260px; min-height:585px; }.phone-camera { height:145px; }.story-row { padding-left:6vw; padding-right:6vw; gap:5%; min-height:610px; }.story-visual { height:430px; }.story-copy h2 { font-size:clamp(38px,4.8vw,55px); }.door-frame { left:26%; transform:scale(.9); }.door-phone { right:4%; }.gate-car { transform:scale(.88); transform-origin:left bottom; }.gate-button { right:4%; }.faq { padding-left:6vw; padding-right:6vw; } }
@media(max-width:650px) { .hero { min-height:920px; height:920px; border-radius:0 0 20px 20px; }.hero__art { background-position:58% center; }.hero__shade { background:linear-gradient(180deg,rgba(13,25,19,.32),rgba(13,25,19,.14) 42%,rgba(11,24,17,.76)),linear-gradient(90deg,rgba(13,25,19,.35),transparent); }.nav-wrap { width:calc(100% - 30px); padding-top:14px; gap:5px; }.brand { font-size:15px; gap:6px; }.brand__mark { width:24px; height:24px; padding:5px; }.nav { gap:6px; padding:9px 8px; font-size:7px; }.nav__login { padding:9px 9px; font-size:8px; }.nav__login span { margin-left:3px; }.hero__content { height:calc(100% - 58px); width:100%; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:22px; padding:76px 18px 56px; }.hero__copy { order:0; max-width:420px; width:100%; text-align:center; padding:0; }.hero__copy .eyebrow { font-size:8px; padding:8px 10px; }.hero h1 { font-size:clamp(42px,11vw,57px); margin:15px 0 11px; }.hero__lead { max-width:370px; margin:0 auto 16px; font-size:12px; line-height:1.48; }.hero__copy .button { min-height:42px; font-size:10px; }.hero__note { margin-top:9px; font-size:7px; }.hero-phone { order:1; width:205px; min-height:501px; padding:18px 13px 9px; border-radius:31px; transform:rotate(-2deg); }.hero-phone__island { top:7px; width:64px; height:14px; }.hero-phone__status { margin:2px 3px 12px; font-size:6px; }.phone-brand { font-size:9px; gap:6px; }.phone-brand .brand__mark { width:19px; height:19px; border-radius:6px; padding:3px; }.phone-avatar { width:21px; height:21px; font-size:7px; }.phone-greeting { margin:18px 0 2px; font-size:7px; }.hero-phone h2 { font-size:17px; margin-bottom:9px; }.phone-address { padding:7px; gap:6px; border-radius:10px; }.phone-address>span:first-child { width:24px; height:24px; border-radius:7px; font-size:15px; }.phone-address b { font-size:7px; }.phone-address small { font-size:6px; }.phone-access { padding:9px; margin-top:8px; border-radius:11px; }.phone-access__head { font-size:5px; }.phone-online { font-size:6px; }.phone-access__buttons { gap:5px; margin-top:8px; }.phone-access__buttons>div { gap:4px; padding:7px; border-radius:8px; }.phone-access__buttons small { font-size:6px; }.phone-action-icon { width:20px; height:20px; font-size:12px; border-radius:6px; }.phone-camera { height:113px; margin-top:8px; border-radius:11px; }.phone-camera__live { top:6px; right:6px; padding:4px 5px; font-size:5px; }.phone-camera__label { left:8px; bottom:7px; font-size:8px; }.phone-bottom { margin-top:9px; font-size:11px; }.phone-bottom small { font-size:5px; }.phone-demo { margin-top:8px; font-size:4px; }.hero__bottom { bottom:12px; gap:8px; padding:8px 10px; font-size:6px; }.bottom-line { width:14px; }
.story-row { min-height:auto; display:flex; flex-direction:column; align-items:stretch; gap:28px; padding:76px 22px; }.story-copy { max-width:none; }.story-copy h2 { font-size:43px; margin:19px 0 12px; }.story-copy p { font-size:12px; }.story-link { margin-top:17px; font-size:10px; }.story-visual { height:350px; border-radius:19px; }.story-row--gate .story-copy { order:0; padding-left:0; }.story-row--gate .story-visual { order:1; }.visual-kicker { top:12px; left:12px; font-size:7px; padding:7px 9px; }.door-frame { top:38px; left:22%; width:160px; height:276px; transform:none; }.door-phone { width:159px; right:4%; bottom:22px; padding:13px; border-radius:15px; }.door-phone__label { margin-bottom:12px; font-size:6px; }.door-phone b { font-size:9px; }.door-phone__hint { font-size:7px; }.door-phone button { font-size:7px; padding:9px 10px; margin-top:10px; }.camera-glass { left:12px; right:12px; bottom:12px; padding:11px; }.camera-glass__bottom { margin-top:15px; }.gate-post { left:12%; bottom:57px; width:32px; height:94px; }.gate-arm { left:17%; bottom:136px; width:60%; height:10px; }.gate-car { left:43%; bottom:67px; transform:scale(.72); }.gate-button { width:150px; right:4%; top:26px; padding:12px; }.gate-button>span { width:25px; height:25px; margin-bottom:8px; font-size:15px; }.gate-button b { font-size:9px; }.gate-button small { font-size:6px; }.gate-button button { font-size:6px; padding:8px; }.guest-phone { width:207px; min-height:370px; padding:14px; border-width:4px; border-radius:29px; }.guest-phone__status { margin-bottom:16px; font-size:6px; }.guest-phone__header { font-size:8px; }.guest-phone p { margin:20px 0 4px; font-size:7px; }.guest-phone h3 { font-size:16px; }.qr-code { width:119px; height:119px; margin:15px auto 12px; }.guest-details { padding:7px 8px; }.guest-details b { font-size:7px; }.guest-phone button { padding:9px; font-size:6px; }.guest-note { right:3%; top:39px; padding:9px; border-radius:12px; gap:7px; }.guest-note__icon { width:23px; height:23px; }.guest-note b { font-size:7px; }.guest-note small { font-size:6px; }.credential-grid { min-height:355px; padding:9px 0 23px; gap:10px; }.credential { min-height:140px; padding:13px; border-radius:17px; }.credential--pin,.credential--car { min-height:115px; }.credential-icon { width:33px; height:33px; border-radius:11px; font-size:19px; margin-bottom:11px; }.credential-label { font-size:6px; }.credential b { font-size:11px; }.credential--pin b,.credential--car b { font-size:11px; padding:6px 9px; }.credential small { font-size:7px; }.face-icon { width:48px; height:48px; border-radius:14px; }.face-icon i { top:16px; }.face-icon i:first-child { left:15px; }.face-icon i:nth-child(2) { right:15px; }.face-icon b { left:14px; bottom:11px; }.credential-note { font-size:6px; }.faq { display:flex; flex-direction:column; gap:30px; padding:80px 22px 90px; }.faq__heading h2 { font-size:43px; margin:19px 0 12px; }.faq__heading>p:last-child { font-size:10px; }.faq details { padding:18px 0; }.faq summary { font-size:10px; }.faq details p { font-size:9px; }.footer { padding:22px; flex-wrap:wrap; gap:15px; }.brand--footer { font-size:15px; }.footer>span { order:3; flex-basis:100%; }.footer> a:last-child { margin-left:auto; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* iPhone Pro Max screens, theme switcher and camera feed replacements. */
.nav-tools { display:flex; align-items:center; gap:10px; }
.iphone-device { position:relative; z-index:2; padding:7px; border:1px solid rgba(255,255,255,.82); border-radius:53px; background:linear-gradient(112deg,#5d605e 0%,#e5e6e2 4%,#a4a7a3 8%,#f4f5f1 13%,#777b78 19%,#333635 47%,#c4c7c3 83%,#f7f8f4 93%,#707471 100%); box-shadow:0 38px 90px rgba(7,17,11,.34),0 2px 5px rgba(255,255,255,.32),inset 0 0 0 1px rgba(20,25,22,.62); transform-style:preserve-3d; }
.iphone-device::before,.iphone-device::after { content:""; position:absolute; z-index:3; width:3px; border:1px solid rgba(44,47,46,.72); background:linear-gradient(90deg,#555957,#d6d8d4,#777b78); pointer-events:none; }
.iphone-device::before { top:19%; right:-4px; height:11%; border-radius:0 3px 3px 0; box-shadow:0 74px 0 -1px #9b9e9a; }
.iphone-device::after { top:17%; left:-4px; height:7%; border-radius:3px 0 0 3px; box-shadow:0 48px 0 -1px #9b9e9a,0 82px 0 -1px #9b9e9a; }
.iphone-device--home { width:clamp(245px,25vw,305px); justify-self:center; transform:rotate(-3deg) rotateY(-2deg); }
.iphone-device--camera { width:clamp(245px,24vw,290px); transform:rotate(2deg) rotateY(2deg); }
.iphone-device--passes { width:clamp(265px,27vw,320px); justify-self:center; transform:rotate(-2deg) rotateY(-1deg); }
.iphone-device__screen { position:relative; width:100%; aspect-ratio:11/24; overflow:hidden; border:1px solid rgba(0,0,0,.84); border-radius:44px; background:#050606; box-shadow:inset 0 0 0 2px rgba(36,39,37,.88); }
.iphone-device__content { position:absolute; top:3%; left:0; right:0; overflow:hidden; border-radius:inherit; aspect-ratio:11/24; }
.iphone-device__screenshot { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
.iphone-dynamic-island { position:absolute; z-index:3; top:1.45%; left:50%; width:29%; height:2.35%; transform:translateX(-50%); border:1px solid rgba(255,255,255,.18); border-radius:999px; background:linear-gradient(180deg,#050606,#111313); box-shadow:0 2px 5px rgba(0,0,0,.72),inset 0 1px 1px rgba(255,255,255,.08); pointer-events:none; }
.screen-feeds { position:absolute; inset:0; z-index:1; pointer-events:none; }
.screen-feed { position:absolute; display:block; overflow:hidden; border-radius:3.7%/8%; }
.screen-feed img { display:block; width:100%; height:100%; object-fit:cover; }
.screen-feed::after { content:"13.10.2026 · 14:32"; position:absolute; top:4%; left:4%; padding:1px 3px; border-radius:3px; background:rgba(9,12,10,.34); color:rgba(255,255,255,.92); font:500 clamp(4px,.42vw,6px)/1.3 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:.02em; }
.screen-feed--home-1 { left:5.15%; top:20.9%; width:66.4%; height:14.9%; }
.screen-feed--home-2 { left:5.15%; top:43.45%; width:90.3%; height:14.85%; }
.screen-feed--home-3 { left:5.15%; top:65.95%; width:90.3%; height:14.9%; }
.screen-feed--home-4 { left:5.15%; top:88.4%; width:90.3%; height:14.9%; }
.screen-feeds--cameras .screen-feed { width:42%; height:14.5%; border-radius:8%/9%; }
.screen-feed--camera-1 { left:5.45%; top:8.35%; }
.screen-feed--camera-2 { left:53.1%; top:8.35%; }
.screen-feed--camera-3 { left:5.45%; top:30.25%; }
.screen-feed--camera-4 { left:53.1%; top:30.25%; }
.screen-feeds--cameras .screen-feed i { position:absolute; top:50%; left:50%; display:grid; width:17%; aspect-ratio:1; transform:translate(-50%,-50%); place-items:center; border-radius:50%; background:rgba(20,22,20,.68); color:white; font-size:clamp(6px,.7vw,9px); font-style:normal; }
.screen-extra-feed { position:absolute; width:42%; height:17%; overflow:hidden; border:1px solid rgba(127,132,128,.24); border-radius:8%/5%; background:#f9f7f7; color:#181818; box-shadow:0 5px 18px rgba(0,0,0,.12); }
.screen-extra-feed--row-1 { top:51.5%; }
.screen-extra-feed--row-2 { top:70.5%; }
.screen-extra-feed--left { left:5.45%; }
.screen-extra-feed--right { left:53.1%; }
.screen-extra-feed img { position:absolute; inset:0 0 auto; width:100%; height:70%; object-fit:cover; }
.screen-extra-feed b { position:absolute; left:9%; bottom:8%; font:600 clamp(6px,.72vw,9px) system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.story-row--camera { min-height:850px; }
.story-visual--camera { height:720px; overflow:visible; place-items:center; background:transparent; }
.story-visual--camera::before { content:""; position:absolute; inset:8% 16%; border-radius:50%; background:radial-gradient(ellipse,rgba(156,179,158,.44),rgba(156,179,158,0) 70%); filter:blur(20px); }


@media(max-width:950px) {
  .iphone-device--home { width:clamp(235px,27vw,280px); }
  .story-row--camera { min-height:790px; }
  .story-visual--camera { height:670px; }
  .iphone-device--camera { width:260px; }
  .iphone-device--passes { width:290px; }
}
@media(max-width:650px) {
  .nav-wrap { align-items:center; }
  .nav { gap:7px; padding:9px 10px; font-size:8px; }
  .nav>a:not(.nav__current) { display:none; }
  .nav-tools { gap:5px; }
  .nav__login { padding:9px 10px; font-size:8px; }
  .iphone-device--home { width:220px; }
  .story-row--camera { min-height:auto; }
  .story-visual--camera { height:585px; margin:0 -3px; }
  .iphone-device--camera { width:245px; }
  .iphone-device--passes { width:min(290px,88vw); }
  .screen-extra-feed b { font-size:6px; }
}

/* Realistic entrance artwork based on the user's reference. */
.story-visual--door { background:#435448; }
.story-visual--door::before { background:linear-gradient(0deg,rgba(14,26,18,.48),transparent 60%),linear-gradient(90deg,rgba(16,29,21,.12),transparent 65%); }
.story-visual--door .door-frame { display:none; }
.story-visual--door .door-phone { left:6%; right:auto; bottom:31px; width:195px; transform:rotate(-3deg); }
@media(max-width:650px) { .story-visual--door { background-position:56% 54%; }.story-visual--door .door-phone { left:4%; right:auto; bottom:22px; width:159px; } }

@media(min-width:651px) and (max-width:1400px) { .hero h1 { font-size:clamp(55px,6.7vw,86px); } }

/* Low-rise residential entrance with the barrier raised. */
.story-visual--gate { background:#35493d; }
.story-visual--gate .gate-post,.story-visual--gate .gate-arm,.story-visual--gate .gate-car { display:none; }
.story-visual--gate .gate-button { top:auto; right:18px; bottom:21px; }
@media(max-width:650px) { .story-visual--gate { background-position:54% center; }.story-visual--gate .gate-button { top:auto; right:10px; bottom:12px; } }

/* Transparent phone mockups supplied by the user, with Domida screens composited into each display. */
.iphone-device { display:block; height:auto; max-width:100%; padding:0; border:0; border-radius:0; background:none; box-shadow:none; object-fit:contain; transform:none; }
.iphone-device::before,.iphone-device::after { content:none; }
.hero__content { grid-template-columns:.92fr 1fr; gap:clamp(40px,6vw,100px); padding-left:2.5%; padding-right:2.5%; }
.iphone-device--home { width:clamp(360px,40vw,520px); justify-self:center; }
.iphone-device--camera { width:clamp(245px,27vw,330px); }
.iphone-device--passes { width:clamp(270px,28vw,350px); justify-self:center; }
.story-visual--camera { overflow:visible; }
@media(max-width:950px) {
  .hero__content { grid-template-columns:.92fr 1fr; gap:5vw; padding-left:0; padding-right:0; }
  .iphone-device--home { width:min(43vw,420px); }
  .iphone-device--camera { width:290px; }
  .iphone-device--passes { width:320px; }
}
@media(max-width:650px) {
  .iphone-device--home { width:min(94vw,390px); }
  .iphone-device--camera { width:260px; }
  .iphone-device--passes { width:min(290px,88vw); }
}

/* Follow-up refinements from the resident landing review. */
.iphone-device--camera { width:clamp(310px,34vw,400px); }
.iphone-device--passes { width:clamp(330px,34vw,430px); }
@media(max-width:950px) {
  .iphone-device--camera { width:340px; }
  .iphone-device--passes { width:370px; }
}
@media(max-width:650px) {
  .hero h1 { font-size:clamp(37px,10.2vw,48px); }
  .story-row--camera { gap:20px; padding-top:64px; padding-bottom:54px; }
  .story-visual--camera { height:auto; min-height:0; margin:0; padding:0; }
  .iphone-device--camera { width:min(92vw,365px); margin:0 auto; }
  .story-row--credentials { gap:20px; padding-top:64px; padding-bottom:48px; }
  .iphone-device--passes { width:min(96vw,430px); margin:0 auto; }
}

.story-photo { position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.story-visual--door .story-photo { object-position:center 54%; }
.story-visual--door .visual-kicker { z-index:2; }
.story-visual--gate .story-photo { object-position:center 52%; }
@media(max-width:650px) {
  .story-visual--door .story-photo { object-position:56% 54%; }
  .story-visual--gate .story-photo { object-position:54% center; }
}

.story-row--service { background:#e7ede4; }
.story-visual--service { height:auto; aspect-ratio:16/10; overflow:hidden; background:#d9e1d6; }
.story-visual--service img { display:block; width:100%; height:100%; object-fit:cover; }
@media(max-width:650px) {
  .story-row--service { gap:24px; padding-top:64px; padding-bottom:64px; }
  .story-row--service .story-copy h2 { max-width:14ch; }
  .story-visual--service { aspect-ratio:16/10; border-radius:19px; }
}

/* A quieter stone-and-slate palette: blue-gray signals the digital controls. */
.hero { background:#25323b; }
.hero__shade { background:linear-gradient(90deg,rgba(12,20,28,.48),rgba(13,22,30,.18) 55%,rgba(13,22,30,.38)),linear-gradient(0deg,rgba(11,19,27,.58),transparent 40%,rgba(12,21,29,.25)); }
.story-row--door,.story-row--credentials,.faq { background:var(--surface); }
.story-row--camera,.story-row--guest,.story-row--service { background:var(--surface-alt); }
.story-row--gate { background:var(--surface-warm); }
.story-index { color:#74818b; }
.story-index i { background:#aab5bd; }
.story-copy p,.faq__heading>p:last-child { color:var(--copy-muted); }
.story-link { color:var(--link); }
.story-link span,.faq summary span { color:#708a9e; }
.status-dot { background:var(--lime); box-shadow:0 0 14px rgba(185,212,232,.72); }
.story-visual--guest { background:radial-gradient(ellipse at 70% 30%,#dce3e8,#aebbc4 70%,#84939f); }
.credential { background:#e6ebee; color:#29333a; box-shadow:0 15px 36px rgba(45,57,67,.08); }
.credential--pin,.credential--face { background:#e1e7eb; }
.credential--key,.credential--car { background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(225,232,237,.48)); }
.credential-icon,.face-icon { border-color:#bdcbd4; color:#567286; }
.credential-icon { background:#edf1f3; }
.face-icon i { background:#567286; }
.face-icon b { border-color:#567286; }
.credential-label,.credential small,.credential-note { color:#78848d; }
.footer { background:#18232c; }