:root{color-scheme:light;--bg:#f5f8fa;--ink:#102741;--muted:#496177;--line:#cddbe4;--panel:#fff;--soft:#e7f1f5;--blue:#006aa9;--deep:#0b2442;--button:#102e4c;--buttonInk:#fff}
:root[data-theme=dark]{color-scheme:dark;--bg:#0b1829;--ink:#f1f8ff;--muted:#aebfd0;--line:#344759;--panel:#13273b;--soft:#183147;--blue:#67caff;--button:#a1dfff;--buttonInk:#10283a}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,"Segoe UI",sans-serif}html{scroll-behavior:smooth}a,button,summary,input{touch-action:manipulation}a{color:inherit;text-decoration:none}a:hover{color:var(--blue)}button,summary{cursor:pointer}button{font:inherit;color:inherit}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #039edf;outline-offset:4px}.wrap{width:min(1260px,91%);margin:auto}.skip{position:absolute;top:-80px;z-index:20;background:var(--panel);padding:8px}.skip:focus{top:4px}header,footer,.brand,.actions,.tools,nav,.cap,.swatches{display:flex;align-items:center}header{min-height:80px;gap:30px;border-bottom:1px solid var(--line)}.brand{gap:8px;font-size:22px;letter-spacing:-1.3px;font-weight:760;color:var(--ink)}.brand span{color:var(--blue);margin-left:-7px}.brand img{width:31px;height:34px}nav{margin-inline-start:auto;gap:28px}nav a,.actions a,.tools,footer a{font-size:14px;font-weight:620}.tools{gap:7px}.tools summary,.tools button{background:var(--panel);border:1px solid var(--line);padding:6px 12px;border-radius:18px;list-style:none}summary::-webkit-details-marker{display:none}.tools button{font-size:19px;line-height:23px}.tools details{position:relative}.tools details div{position:absolute;inset-inline-end:0;z-index:5;top:120%;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel);min-width:140px}.tools details a{display:block;padding:5px 9px}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5%;padding:38px 0 48px}.copy{padding:5% 0}.kicker,.serial,.scene-label,.sample>small,.cap small{font:650 11px/1.6 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}.kicker{color:var(--blue);display:flex;align-items:center;gap:8px}i{display:inline-block;width:7px;height:7px;background:#00abe9;border-radius:50%}h1,h2,h3,p{margin:0}h1{font-size:clamp(54px,6.5vw,98px);line-height:1.02;letter-spacing:-.073em;margin:21px 0}em{font-style:normal;color:var(--blue)}p{color:var(--muted)}.copy p,.inner>p{font-size:clamp(16px,1.4vw,20px);max-width:46ch}.actions{gap:20px;flex-wrap:wrap;margin-top:27px}.play{display:inline-flex;align-items:center;gap:9px;background:var(--button);color:var(--buttonInk)!important;border:0;border-radius:10px;padding:9px 17px;text-align:start;font-size:18px!important;font-weight:680;line-height:1.15}.play small{display:block;font-size:10px;font-weight:520}.play>span:first-child{font-size:28px}.stage{min-height:clamp(350px,37vw,500px);position:relative;isolation:isolate;overflow:hidden;border:1px solid #30516c;border-radius:26px;background:radial-gradient(ellipse at 56% 55%,#136589 0%,#0c3a58 40%,#091e36 78%);display:grid;place-items:center}.stage:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#86cdef45 1px,transparent 1px);background-size:17px 17px}.orb,.orbit{position:absolute;border:1px solid #8ce5ff55;border-radius:50%;width:82%;height:48%;transform:rotate(-24deg)}.orbit{width:112%;height:68%;border-style:dashed;opacity:.45}.phone{background:#11253b;border:4px solid #122131;box-shadow:0 0 0 1px #91abba,0 14px 24px #00162838;border-radius:18px;overflow:hidden;line-height:0}.phone img{width:100%;height:auto;display:block}.stage .phone{width:clamp(120px,13vw,171px);transform:rotate(8deg);position:relative;margin-inline-start:18%;border-radius:16px}.floatshield{width:clamp(92px,11vw,152px);position:absolute;left:11%;top:38%;filter:drop-shadow(0 16px 13px #00102199);animation:drift 5s ease-in-out infinite}.serial,.scene-label{position:absolute;bottom:16px;color:#c5eefd;font-size:9px}.scene-label{left:18px;letter-spacing:.04em;background:#09223ae0;padding:4px 9px;border:1px solid #538099;border-radius:20px}.serial{right:16px}@keyframes drift{50%{transform:translateY(-6px) rotate(-4deg)}}h2{font-size:clamp(30px,4.2vw,56px);line-height:1.12;letter-spacing:-.055em;margin:10px 0 20px}h3{font-size:22px;line-height:1.28;letter-spacing:-.045em}main section[id]{scroll-margin-top:18px}.studio{padding:clamp(22px,4vw,55px);background:var(--soft);border:1px solid var(--line);border-radius:22px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:9%}.controls{max-width:370px;margin-top:19px}.controls label{display:flex;justify-content:space-between;font-weight:650}input[type=range]{width:100%;accent-color:#0879b9}.swatches{gap:9px;font-size:13px;margin-top:10px}.swatches button{padding:0;width:23px;height:23px;border-radius:100%;background:var(--sw);border:2px solid var(--panel)}.swatches button[aria-pressed=true]{outline:2px solid var(--blue)}.sample{padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:15px}.sample small{color:var(--blue)}.ticket{position:relative;overflow:hidden;margin-top:10px;padding:24px;border-radius:10px;background:linear-gradient(130deg,#e6f6ff,#a5d8ef);color:#103451}.ticket h3{margin:22px 0 6px;font-size:30px}.ticket p{color:#264c68}.ticket:after{content:"";position:absolute;inset:0;background:var(--filter,#104677);opacity:var(--opacity,.35)}.barcode{width:80px;height:18px;margin-top:16px;background:repeating-linear-gradient(90deg,#294356 0 2px,transparent 2px 5px,#294356 5px 6px,transparent 6px 9px)}#features,#gallery,#faq{padding:60px 0 0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}article{padding:24px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.cap{justify-content:space-between;margin-bottom:25px}.cap svg{width:25px;color:var(--blue)}.cap small{color:var(--muted)}article p{margin-top:9px;font-size:15px}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}.shot{background:var(--soft);border:1px solid var(--line);border-radius:15px;padding:20px 14px 12px}.shot .phone{width:75%;margin:0 auto 15px}.shot span{font-size:14px;font-weight:600}.shot:hover .phone{transform:translateY(-3px)}.phone{transition:transform .2s}dialog{padding:10px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:16px;max-height:96dvh;max-width:92vw}dialog::backdrop{background:#051623ce}dialog img{max-height:78dvh;max-width:82vw;display:block;margin:auto}dialog button{border:0;background:var(--soft);border-radius:8px;padding:7px 11px;margin-bottom:7px}.question{border-top:1px solid var(--line);padding:16px 0}.question summary{font-weight:640;font-size:18px}.question p{padding-top:10px;max-width:75ch}footer{margin:48px 0 0;border-top:1px solid var(--line);padding:24px 0;gap:20px}footer>span{color:var(--muted);font-size:12px}footer>div{display:flex;gap:18px;margin-inline-start:auto}.inner{max-width:800px;padding:60px 0;margin:auto}.inner h1{font-size:clamp(42px,6vw,74px)}.inner article{margin-top:20px}.inner article h2{font-size:26px}.inner .link{display:inline-block;margin-top:20px;color:var(--blue)}[dir=rtl] :is(h1,h2,h3,.kicker,.scene-label){letter-spacing:0;line-height:1.4}[dir=rtl] .stage .phone{margin-inline-start:0;margin-left:18%}@media(max-width:850px){.cards{grid-template-columns:repeat(2,1fr)}.gallery{grid-template-columns:repeat(2,1fr)}.shot .phone{max-width:155px}nav{gap:14px}}@media(max-width:680px){header{flex-wrap:wrap;gap:8px;justify-content:space-between;padding:12px 0}.tools{margin-inline-start:auto}nav{order:3;width:100%;margin:0;gap:19px}.hero,.studio{grid-template-columns:1fr;gap:22px}.hero{padding:22px 0 28px}.copy{padding:0}.stage{min-height:350px}.stage .phone{width:134px}.floatshield{left:17%}.studio{padding:20px}.inner{padding:36px 0}#features,#gallery,#faq{padding-top:38px}footer{flex-wrap:wrap}footer>div{margin:0}footer>span{display:none}.gallery{gap:9px}.shot{padding:15px 6px 9px}.shot .phone{width:84%;border-radius:10px}.cards{grid-template-columns:1fr}.cap{margin-bottom:12px}.brand{font-size:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Preview premium hero */
.hero{min-height:clamp(610px,calc(100vh - 80px),820px);padding-block:clamp(34px,6vw,86px)}
.hero .copy{position:relative;z-index:2}.hero h1{max-width:720px;text-shadow:0 0 34px #5bcfff18}
.stage{min-height:clamp(430px,48vw,650px);border-color:#2d6b91;background:radial-gradient(circle at 50% 48%,#1688b6 0,#0d4669 31%,#071b33 73%);box-shadow:inset 0 0 90px #2bbdff18,0 30px 80px #02132135}
.stage:after{content:"";position:absolute;inset:8%;border:1px solid #83dcff2b;border-radius:50%;transform:rotate(-18deg);box-shadow:0 0 70px #20bfff26;pointer-events:none}
.shield-glow{position:absolute;width:55%;aspect-ratio:1;background:#27bfff26;filter:blur(34px);clip-path:polygon(50% 0,92% 17%,82% 78%,50% 100%,18% 78%,8% 17%);animation:shieldPulse 4.5s ease-in-out infinite}
.hero-phones{position:relative;width:100%;height:100%;min-height:clamp(380px,44vw,585px);z-index:2;filter:drop-shadow(0 30px 25px #00132399)}
.hero-phone{position:absolute;width:clamp(126px,15vw,190px);transition:transform .35s ease,filter .35s ease}.hero-phone .phone{width:100%;border-radius:22px;border-width:5px;background:#071726;box-shadow:0 0 0 1px #a4ddf2aa,0 24px 40px #001321aa,0 0 28px #5bd6ff35}.hero-phone .phone .phone{border:0;box-shadow:none;border-radius:14px}
.hero-phone-back{left:16%;top:24%;transform:rotate(-17deg) scale(.87);opacity:.86;z-index:1}.hero-phone-main{left:35%;top:9%;transform:rotate(2deg);z-index:3}.hero-phone-front{right:10%;top:28%;transform:rotate(16deg) scale(.9);opacity:.92;z-index:2}.hero-phone:hover{transform:translateY(-12px) rotate(0) scale(1.02);filter:brightness(1.12)}
.floatshield{z-index:4;left:43%;top:44%;width:clamp(80px,10vw,135px);animation:shieldFloat 5s ease-in-out infinite;filter:drop-shadow(0 0 18px #54d8ff) drop-shadow(0 18px 15px #00102199)}
@keyframes shieldPulse{50%{transform:scale(1.1);opacity:.72}}@keyframes shieldFloat{50%{transform:translateY(-12px) rotate(3deg)}}
@media(max-width:680px){.hero{min-height:0}.stage{min-height:430px}.hero-phones{min-height:405px}.hero-phone{width:125px}.hero-phone-back{left:8%;top:26%}.hero-phone-main{left:30%;top:12%}.hero-phone-front{right:5%;top:29%}.floatshield{left:42%;top:45%}}

/* Balanced three-device presentation */
.hero-phones{position:relative;display:grid;place-items:center;min-height:clamp(420px,43vw,590px);height:auto;width:100%;z-index:2;filter:drop-shadow(0 28px 28px #00132399)}
.hero-phone{position:absolute;width:clamp(132px,14vw,184px);transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease;will-change:transform}
.hero-phone .phone{width:100%;padding:5px;border:1px solid #a6dff3;border-radius:24px;background:linear-gradient(145deg,#182f45,#071625 70%);box-shadow:0 0 0 1px #0a1725,0 24px 38px #00101fbd,0 0 30px #36caff2b;overflow:hidden}
.hero-phone .phone img{display:block;width:100%;height:auto;aspect-ratio:9/19;object-fit:cover;border-radius:17px}
.hero-phone-left{left:8%;top:27%;transform:rotate(-7deg) scale(.86);z-index:1;opacity:.92}
.hero-phone-center{left:50%;top:8%;transform:translateX(-50%);z-index:3}
.hero-phone-right{right:8%;top:27%;transform:rotate(7deg) scale(.86);z-index:1;opacity:.92}
.hero-phone-left:hover{transform:translateY(-8px) rotate(-4deg) scale(.9);filter:brightness(1.08)}
.hero-phone-center:hover{transform:translate(-50%,-8px) scale(1.015);filter:brightness(1.08)}
.hero-phone-right:hover{transform:translateY(-8px) rotate(4deg) scale(.9);filter:brightness(1.08)}
.floatshield{left:50%;top:46%;transform:translateX(-50%);width:clamp(76px,9vw,124px);z-index:4;animation:shieldFloat 5.5s ease-in-out infinite;filter:drop-shadow(0 0 18px #54d8ff) drop-shadow(0 18px 15px #00102199)}
@media(max-width:900px){.hero-phones{min-height:470px}.hero-phone{width:clamp(118px,18vw,160px)}.hero-phone-left{left:5%}.hero-phone-right{right:5%}}
@media(max-width:680px){.hero-phones{min-height:395px}.hero-phone{width:112px}.hero-phone-left{left:2%;top:28%;transform:rotate(-5deg) scale(.82)}.hero-phone-center{top:10%}.hero-phone-right{right:2%;top:28%;transform:rotate(5deg) scale(.82)}.floatshield{top:46%;width:78px}}
.demo-link{display:inline-flex;align-items:center;gap:8px;color:var(--blue)}
.action-video{margin-top:58px;padding:clamp(22px,4vw,54px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,6vw,80px);align-items:center;background:linear-gradient(135deg,#071c34,#0b3552);border:1px solid #2d6b91;border-radius:24px;overflow:hidden;position:relative}
.action-video:before{content:"";position:absolute;width:360px;height:360px;right:8%;top:-34%;background:#18bfff22;filter:blur(32px);border-radius:50%;pointer-events:none}.action-video .video-copy,.action-video .video-frame{position:relative;z-index:1}.action-video h2{color:#f5fbff}.action-video p{max-width:38ch;margin-bottom:24px;color:#b8d7e8}.video-frame{background:#020e1d;border:1px solid #6bbfe455;border-radius:18px;padding:9px;box-shadow:0 22px 55px #00101f99}.video-frame video{display:block;width:100%;max-height:560px;object-fit:cover;border-radius:11px;background:#071a2f}.video-frame video:focus-visible{outline:3px solid #4ed8ff;outline-offset:4px}@media(max-width:700px){.action-video{grid-template-columns:1fr;margin-top:38px;padding:20px}.action-video h2{font-size:34px}.video-frame{padding:6px}.video-frame video{max-height:430px}}
@media(prefers-reduced-motion:reduce){.video-frame video{animation:none}.hero-loop{display:none}}