@font-face { font-family:Golos; src:url('./golos.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
:root { color-scheme:dark; font-family:Golos,Arial,sans-serif; color:#fff; background:#163da6; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; background:linear-gradient(100deg,#102e9acc,#1d4dc43d),url('./facets.png') center/cover; }
a { color:inherit; }
a:focus-visible,video:focus-visible { outline:3px solid #9cf8ff; outline-offset:6px; }
.contours { position:fixed; pointer-events:none; z-index:0; top:8%; right:-200px; width:900px; height:900px; border-radius:50%; background:repeating-radial-gradient(ellipse at center,transparent 0,transparent 34px,#c3eeff22 35px,transparent 36px,transparent 60px); }
.header { position:relative; max-width:1160px; margin:auto; padding:30px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.header img { filter:brightness(0) invert(1); }
.header span { color:#d8e9ff; font-size:13px; }
main { position:relative; max-width:1160px; padding:28px 40px 52px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) 320px; grid-template-areas:'intro video' 'actions video'; column-gap:80px; align-items:start; }
.intro { grid-area:intro; }
.eyebrow { margin:0 0 24px; text-transform:uppercase; font-size:12px; font-weight:650; letter-spacing:.13em; color:#bcf7ff; }
h1 { margin:0; font-size:clamp(42px,5vw,64px); line-height:1.03; letter-spacing:-.045em; font-weight:730; }
h1 em { font-style:normal; color:#a8f1ff; }
.lead { font-size:25px; line-height:1.4; margin:26px 0 18px; }
.description { max-width:430px; font-size:17px; line-height:1.55; margin:0; color:#e2eaff; }
.scene-access { grid-area:actions; margin-top:28px; }
.primary { display:inline-flex; min-height:56px; align-items:center; justify-content:space-between; gap:36px; padding:15px 23px; background:#ff3f65; border:1px solid #ff8099; border-radius:12px; font-size:18px; font-weight:650; text-decoration:none; }
.primary:hover { background:#eb2d56; }
.primary span { font-size:27px; line-height:1; }
.camera-note { font-size:13px; line-height:1.55; color:#d2e4ff; margin:15px 0 26px; }
.qr-row { display:flex; align-items:center; gap:20px; }
.qr { display:block; flex:0 0 128px; width:128px; height:128px; border-radius:10px; background:#fff; overflow:hidden; }
.qr img { display:block; width:100%; height:100%; }
.qr-row h2 { font-size:16px; line-height:1.4; font-weight:650; margin:0 0 9px; }
.qr-row p { font-size:13px; line-height:1.6; color:#d2e4ff; margin:0; }
.video-demo { grid-area:video; margin:0; width:100%; }
.video-frame { border:5px solid #bcdcf7; border-radius:32px; overflow:hidden; background:#090e24; }
video { display:block; width:100%; aspect-ratio:588/1280; object-fit:contain; }
figcaption { display:flex; justify-content:space-between; font-size:12px; line-height:1.5; color:#daebff; margin:16px 8px 0; }
figcaption span { font-variant-numeric:tabular-nums; color:#a9f1ff; }
#video-error { font-size:14px; line-height:1.5; }
@media (max-width:900px) {
 main { grid-template-columns:minmax(0,1fr) 280px; gap:28px 36px; padding-top:16px; }
 h1 { font-size:47px; }
 .lead { font-size:22px; }
 .scene-access { margin-top:0; }
 .qr-row { gap:13px; }
 .qr { flex-basis:104px; width:104px; height:104px; }
}
@media (max-width:650px) {
 .header { padding:22px 22px 28px; }
 .header img { width:105px; height:35px; }
 .header span { max-width:120px; font-size:11px; text-align:right; }
 main { padding:8px 22px 40px; grid-template-columns:1fr; grid-template-areas:'intro' 'video' 'actions'; gap:28px; }
 .eyebrow { font-size:11px; margin-bottom:18px; }
 h1 { font-size:clamp(37px,10.5vw,56px); }
 .lead { font-size:21px; margin:20px 0 12px; }
 .description { font-size:15px; }
 .video-demo { max-width:270px; justify-self:center; }
 .video-frame { border-width:4px; border-radius:28px; }
 .primary { display:flex; width:100%; }
 .qr-row { margin-top:24px; gap:18px; }
 .qr { flex-basis:116px; width:116px; height:116px; }
 .qr-row h2 { font-size:15px; }
 .qr-row p { font-size:12px; }
}