:root{color-scheme:dark;--background:#080e18;--text:#f4f7fc;--muted:#95a5b9;--cyan:#27d5f3;--line:rgba(174,201,227,.14)}
*{box-sizing:border-box}
body{margin:0;background:var(--background);color:var(--text);font-family:Bahnschrift,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 84% 35%,rgba(0,109,160,.12),transparent 46%)}
.page-shell{max-width:1320px;padding:0 56px;margin:auto}
.masthead{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px;font-size:25px;letter-spacing:-1px;font-weight:600}
.brand img{display:block;object-fit:contain}.brand-x{color:var(--cyan);padding-left:2px}
.masthead-caption{color:#8d9eb3;font-size:10px;letter-spacing:2px}
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:38px;min-height:592px;align-items:center;padding:64px 0 62px}
.hero-copy{position:relative;z-index:1}
.eyebrow{display:flex;align-items:center;gap:11px;color:#8cb9ce;font-size:10px;letter-spacing:1.75px;margin:0 0 25px;font-weight:500}
.eyebrow>span{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px #00bdde6b;flex:none}
h1{font-weight:600;font-size:clamp(60px,7.3vw,100px);line-height:1;letter-spacing:-6px;white-space:nowrap;margin:0 0 26px}
h1>span{color:var(--cyan)}
.headline{font-size:clamp(23px,2.25vw,30px);line-height:1.35;font-weight:400;letter-spacing:-.6px;color:#e2eaf5;margin:0 0 19px}
.description{font-size:15px;line-height:1.8;color:var(--muted);max-width:450px;margin:0 0 25px}
.platform{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:#b2c1d2;font-size:12px;margin-bottom:23px}
.platform svg{color:#78b2ce}.platform-divider{width:1px;height:12px;background:#425467;margin:0 3px}
.actions{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:16px 20px;text-decoration:none;white-space:nowrap;border-radius:8px;font-size:14px;font-weight:600;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.button svg{flex:none}.button-primary{background:var(--cyan);color:#06202c;border:1px solid var(--cyan);box-shadow:0 5px 28px #00c7f012}
.button-primary:hover{background:#64e8ff;border-color:#64e8ff;transform:translateY(-1px)}
.button-secondary{background:rgba(19,34,51,.65);color:#e4eff9;border:1px solid #344a60}
.button-secondary:hover{background:#1a3047;border-color:#82b6cd;transform:translateY(-1px)}
.button:focus-visible{outline:3px solid white;outline-offset:5px}
.install-note{font-size:11px;line-height:1.7;color:#8798af;margin:15px 0 0;max-width:460px}
.install-note>span{color:#b3c4d7}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:390px;isolation:isolate}
.hero-visual::before{content:"";position:absolute;inset:7% -3%;background-image:linear-gradient(#45bad509 1px,transparent 1px),linear-gradient(90deg,#45bad509 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse,black,transparent 72%);z-index:-1}
.logo-halo{position:absolute;width:74%;aspect-ratio:1;background:radial-gradient(circle,rgba(0,166,218,.14),transparent 67%);filter:blur(20px);z-index:-1}
.hero-logo{display:block;width:100%;max-width:490px;height:auto;filter:drop-shadow(0 20px 38px #0009)}
.technical-frame{position:absolute;inset:22px 5px 34px;pointer-events:none;opacity:.55}
.technical-frame span{position:absolute;width:18px;height:18px;border-color:#34617a;border-style:solid;border-width:0}
.technical-frame span:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}.technical-frame span:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}.technical-frame span:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}.technical-frame span:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.visual-caption{position:absolute;bottom:4px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:17px;font-size:9px;letter-spacing:4px;color:#648da8}
.visual-caption>span{display:block;width:38px;height:1px;background:#345267}
.test-line{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:27px 0 30px}
.test-line>p{font-size:9px;letter-spacing:2px;color:#71879e;margin:0 0 20px}
.test-line>div{display:flex;flex-wrap:wrap;column-gap:32px;row-gap:15px;align-items:center;color:#bac8d8;font-size:14px}
.test-line>div>span+span::before{content:"/";color:#36526a;margin-right:30px;font-weight:300}
footer{padding:27px 0 30px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:11px;color:#788ca4}
footer>span:last-child>span{color:#36526a;margin:0 9px}
@media(min-width:1500px){.hero{min-height:650px}}
@media(max-width:1080px){.page-shell{padding:0 36px}.hero{gap:20px}.actions{gap:10px}.button{padding:15px 17px;font-size:13px}.hero-visual{min-height:330px}.test-line>div{column-gap:21px}.test-line>div>span+span::before{margin-right:21px}}
@media(max-width:800px){.page-shell{padding:0 25px}.masthead{height:86px}.masthead-caption{font-size:8px;letter-spacing:1px}.brand{font-size:22px;gap:9px}.brand img{width:44px;height:33px}.hero{grid-template-columns:1fr;gap:25px;min-height:0;padding:28px 0 36px}.hero-visual{order:-1;min-height:190px;width:min(70%,290px);margin:auto}.hero-logo{max-width:255px}.technical-frame{inset:0 -15px 12px}.visual-caption{display:none}.hero-copy{text-align:center}.eyebrow{justify-content:center;font-size:9px;margin-bottom:20px}h1{font-size:clamp(58px,11vw,82px);letter-spacing:-4px;margin-bottom:22px}.headline{font-size:25px}.description{font-size:14px;max-width:480px;margin:0 auto 23px}.platform{justify-content:center}.actions{justify-content:center}.install-note{margin:15px auto 0}.test-line{text-align:center;padding:24px 0}.test-line>div{justify-content:center;column-gap:14px;font-size:12px}.test-line>div>span+span::before{margin-right:14px}footer{font-size:10px;padding:22px 0;justify-content:center;text-align:center}}
@media(max-width:450px){.page-shell{padding:0 22px}.masthead-caption{max-width:124px;text-align:right;line-height:1.6}.hero-visual{min-height:158px;width:67%}.hero-logo{width:100%}.hero{padding-top:24px;gap:24px}.eyebrow{font-size:8px;letter-spacing:1.2px}h1{font-size:58px;letter-spacing:-3px}.headline{font-size:23px}.actions{flex-direction:column}.button{width:100%;font-size:14px}.test-line>div{gap:14px 21px}.test-line>div>span+span::before{content:none}footer{flex-direction:column;gap:10px}}
@media(prefers-reduced-motion:reduce){.button{transition:none}.button:hover{transform:none}}