:root {
  --bg: #090a0d;
  --bg-soft: #0e1014;
  --panel: #12151b;
  --panel-2: #171a21;
  --line: rgba(255, 255, 255, 0.11);
  --line-bright: rgba(255, 255, 255, 0.2);
  --text: #f5f7fb;
  --muted: #9ba3b2;
  --cyan: #7ae8f5;
  --blue: #5f8cff;
  --violet: #9d67ff;
  --lime: #b8f88e;
  --accent-gradient: linear-gradient(120deg, var(--cyan), #6d9cff 48%, #b06df5);
  --shell: min(1180px, calc(100vw - 48px));
  --radius: 26px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 90% 7%, rgba(78, 104, 255, 0.08), transparent 26rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  content: "";
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
.section-shell, .nav-shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; background: #fff; color: #000; border-radius: 8px; transform: translateY(-140%); }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(9, 10, 13, 0.82);
  backdrop-filter: blur(18px);
}

.nav-shell { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 760; letter-spacing: -0.035em; font-size: 20px; }
.brand img { border-radius: 11px; box-shadow: 0 8px 28px rgba(60, 103, 255, 0.22); }
.site-nav { display: flex; align-items: center; gap: 8px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.025); }
.site-nav a { padding: 8px 16px; color: var(--muted); font-size: 13px; border-radius: 999px; transition: color .2s, background .2s; }
.site-nav a:hover { color: #fff; }
.site-nav a.is-active { color: #fff; background: rgba(255, 255, 255, 0.09); }
.nav-cta { font-size: 13px; padding: 10px 15px; border: 1px solid var(--line-bright); border-radius: 999px; transition: border-color .2s, background .2s; }
.nav-cta:hover, .nav-cta.is-current { border-color: rgba(122, 232, 245, .55); background: rgba(122, 232, 245, .08); }
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: #fff; }

.hero { min-height: 760px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 28px; padding-block: 70px 90px; }
.eyebrow, .kicker { text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 720; color: #aab2c2; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; }
.eyebrow span { display: inline-block; width: 24px; height: 1px; background: var(--accent-gradient); box-shadow: 0 0 10px var(--blue); }
.hero h1, .page-hero h1, .download-hero h1 { margin: 0; font-size: clamp(54px, 5.55vw, 80px); line-height: .98; letter-spacing: -.067em; font-weight: 540; }
h1 em, h2 em { font-style: normal; color: transparent; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; }
.hero-lede { max-width: 510px; margin: 28px 0 0; color: #aeb5c2; font-size: 17px; line-height: 1.78; }
.button-row { display: flex; align-items: center; gap: 12px; margin-top: 34px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; font-size: 13px; font-weight: 720; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s, background .25s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #071014; background: linear-gradient(105deg, #b5fbff, #82cbff 43%, #9d92ff); box-shadow: 0 10px 36px rgba(75, 126, 255, .25); }
.button-primary:hover { box-shadow: 0 14px 44px rgba(75, 126, 255, .38); }
.button-ghost { border-color: var(--line); color: #d4d8e0; background: rgba(255, 255, 255, .02); }
.button-ghost:hover { border-color: var(--line-bright); background: rgba(255, 255, 255, .05); }
.play-mini { width: 22px; height: 22px; border: 1px solid var(--line-bright); border-radius: 50%; position: relative; }
.play-mini::after { content: ""; position: absolute; left: 8px; top: 6px; border-left: 6px solid #dceaff; border-block: 4px solid transparent; }
.hero-proof { display: flex; align-items: center; gap: 10px; margin-top: 44px; color: #77808f; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.hero-proof i { width: 3px; height: 3px; background: #53606f; border-radius: 50%; }

.hero-visual { min-height: 590px; position: relative; perspective: 1200px; }
.glow-sphere { position: absolute; width: 440px; height: 440px; right: 60px; top: 60px; border-radius: 50%; filter: blur(2px); background: radial-gradient(circle at 35% 30%, rgba(122, 232, 245, .12), rgba(79, 84, 255, .12) 30%, rgba(103, 44, 181, .05) 59%, transparent 70%); box-shadow: inset 0 0 80px rgba(111, 124, 255, .06); }
.orbit { position: absolute; border: 1px solid rgba(122, 213, 245, .14); border-radius: 50%; transform: rotate(-18deg); }
.orbit::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px 4px rgba(122, 232, 245, .5); }
.orbit-one { width: 560px; height: 280px; right: 5px; top: 128px; }
.orbit-one::after { top: 26px; right: 94px; }
.orbit-two { width: 490px; height: 490px; right: 35px; top: 18px; border-color: rgba(155, 103, 255, .09); transform: rotate(38deg); }
.orbit-two::after { width: 4px; height: 4px; bottom: 74px; left: 44px; background: var(--violet); }
.theater-card { position: absolute; z-index: 4; width: 520px; right: 15px; top: 102px; padding: 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 24px; background: linear-gradient(145deg, rgba(30, 34, 45, .92), rgba(13, 15, 20, .95)); box-shadow: 0 36px 90px rgba(0, 0, 0, .54), inset 0 1px rgba(255, 255, 255, .08); transform: rotateY(-4deg) rotateX(2deg); transform-style: preserve-3d; transition: transform .16s ease-out; }
.theater-topline { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 5px 0 7px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 5px; height: 5px; background: #505866; border-radius: 50%; }
.quality-pill { padding: 5px 8px; border: 1px solid var(--line); color: #9da8b8; border-radius: 999px; font-size: 8px; letter-spacing: .12em; }
.screen-scene { position: relative; height: 292px; overflow: hidden; border-radius: 15px; background: #111522; }
.scene-sky { position: absolute; inset: 0; background: radial-gradient(circle at 66% 40%, rgba(128, 159, 255, .25), transparent 10%), radial-gradient(circle at 50% 52%, #354984, #151b37 35%, #090b16 76%); }
.scene-sky::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.5px); background-size: 42px 49px; opacity: .45; }
.scene-planet { position: absolute; width: 240px; height: 240px; left: 144px; top: 80px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #a3d5df, #48638c 28%, #232b53 59%, #11152b 70%); box-shadow: -20px -20px 80px rgba(122, 212, 245, .12); }
.scene-planet::after { content: ""; position: absolute; width: 330px; height: 70px; top: 75px; left: -48px; border: 7px solid rgba(173, 203, 255, .32); border-left-color: rgba(255, 255, 255, .65); border-radius: 50%; transform: rotate(-11deg); }
.scene-horizon { position: absolute; left: -10%; right: -10%; bottom: -104px; height: 190px; border-radius: 50% 50% 0 0; background: #080b14; box-shadow: 0 -10px 65px rgba(64, 91, 186, .22); }
.center-play { position: absolute; z-index: 3; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, .38); border-radius: 50%; background: rgba(8, 12, 22, .42); backdrop-filter: blur(10px); cursor: pointer; transition: transform .3s var(--ease), background .3s; }
.center-play:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(88, 111, 196, .35); }
.center-play span { display: block; margin-left: 22px; border-left: 17px solid white; border-block: 11px solid transparent; }
.center-play.is-playing span { width: 14px; height: 18px; border: 0; margin-left: 18px; background: linear-gradient(90deg, #fff 0 35%, transparent 35% 64%, #fff 64%); }
.player-controls { height: 50px; display: flex; align-items: center; gap: 10px; padding-inline: 7px; color: #7c8492; }
.control-play { width: 0; height: 0; border-left: 7px solid #d7dce6; border-block: 5px solid transparent; }
.progress-track { flex: 1; height: 2px; background: #343945; }
.progress-track i { display: block; width: 42%; height: 100%; background: var(--accent-gradient); box-shadow: 0 0 12px var(--blue); }
.timecode, .tiny-control { font-size: 8px; letter-spacing: .08em; }
.tiny-control { border: 1px solid #343945; padding: 3px 4px; border-radius: 3px; color: #aab0bd; }
.floating-chip { position: absolute; z-index: 5; display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, .14); background: rgba(18, 21, 29, .82); box-shadow: 0 18px 44px rgba(0, 0, 0, .38); backdrop-filter: blur(14px); }
.chip-server { left: 15px; top: 385px; width: 205px; padding: 11px; gap: 10px; border-radius: 15px; }
.chip-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #a9f6ff; font-size: 12px; background: linear-gradient(140deg, rgba(87, 223, 244, .25), rgba(102, 83, 230, .22)); }
.floating-chip small, .floating-chip strong { display: block; }
.floating-chip small { color: #737c8a; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.floating-chip strong { margin-top: 3px; font-size: 11px; font-weight: 600; }
.chip-server > i { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #89f2bd; box-shadow: 0 0 12px #4cff9b; }
.chip-mode { right: -12px; top: 455px; display: block; width: 124px; padding: 12px 14px; border-radius: 13px; }
.signal-strip { overflow: hidden; border-block: 1px solid var(--line); background: rgba(255, 255, 255, .018); }
.signal-track { width: max-content; height: 54px; display: flex; align-items: center; gap: 30px; animation: ticker 28s linear infinite; color: #6e7683; font-size: 9px; letter-spacing: .22em; }
.signal-track i { color: #82d9ec; font-style: normal; font-size: 10px; }

.connect-section { padding-block: 135px; }
.section-heading { display: grid; grid-template-columns: 1fr 400px; align-items: end; gap: 80px; margin-bottom: 58px; }
.kicker { margin: 0 0 18px; color: #747d8d; }
.section-heading h2, .experience-copy h2, .lab-copy h2, .requirements-card h2 { margin: 0; font-size: clamp(39px, 4.2vw, 60px); line-height: 1.05; font-weight: 520; letter-spacing: -.055em; }
.section-heading > p { margin: 0 0 4px; color: #9098a7; font-size: 14px; line-height: 1.8; }
.server-stage { display: grid; grid-template-columns: .9fr 1.1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #0d0f13; }
.server-list { padding: 20px; border-right: 1px solid var(--line); }
.server-item { min-height: 116px; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 15px; padding: 15px; border: 1px solid transparent; border-radius: 17px; opacity: .58; transition: opacity .2s, background .2s, border-color .2s; }
.server-item + .server-item { margin-top: 5px; }
.server-item:hover, .server-item.is-active { opacity: 1; background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .08); }
.server-symbol { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: #181b22; }
.jellyfin-symbol i { width: 24px; height: 28px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(#9d65ff, #5cceff); }
.jellyfin-symbol i::after { content: ""; display: block; width: 10px; height: 12px; margin: 9px auto; clip-path: inherit; background: #181b22; }
.emby-symbol i { width: 27px; height: 27px; background: #9be56c; border-radius: 7px; transform: rotate(45deg); box-shadow: inset 0 0 0 6px #1d2b19; }
.local-symbol i { width: 25px; height: 20px; border: 2px solid #8e9aaa; border-radius: 3px; position: relative; }
.local-symbol i::after { content: ""; position: absolute; width: 12px; height: 2px; bottom: -7px; left: 5px; background: #8e9aaa; }
.server-item small { color: #68717f; font-size: 8px; letter-spacing: .13em; }
.server-item h3 { margin: 4px 0 5px; font-size: 19px; }
.server-item p { margin: 0; color: #727b89; font-size: 11px; }
.status-dot { color: #9ff7c8; font-size: 9px; padding: 5px 8px; border: 1px solid rgba(100, 244, 174, .2); border-radius: 999px; }
.status-dot.subtle { color: #a8afba; border-color: var(--line); }
.library-preview { padding: 28px; background: radial-gradient(circle at 70% 10%, rgba(70, 96, 196, .11), transparent 45%); }
.library-bar { display: flex; justify-content: space-between; margin-bottom: 25px; color: #667080; font-size: 9px; letter-spacing: .14em; }
.poster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.poster { aspect-ratio: .69; position: relative; display: flex; align-items: flex-end; padding: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; color: white; font-size: 10px; font-weight: 700; letter-spacing: .09em; line-height: 1.25; }
.poster::before { content: ""; position: absolute; inset: 0; opacity: .8; }
.poster span, .poster small { position: relative; z-index: 1; }
.poster small { position: absolute; right: 9px; top: 9px; padding: 3px 5px; background: rgba(0,0,0,.4); border-radius: 4px; font-size: 7px; }
.poster-a::before { background: radial-gradient(circle at 55% 36%, #e5a175 0 8%, transparent 9%), radial-gradient(circle at 50% 35%, #725170, #171c36 48%, #090b12 73%); }
.poster-b::before { background: linear-gradient(145deg, transparent 40%, rgba(255,201,129,.5) 41% 43%, transparent 44%), radial-gradient(circle at 70% 30%, #3f7b99, #171b2a 53%, #090b0e); }
.poster-c::before { background: radial-gradient(ellipse at 50% 45%, transparent 0 18%, rgba(135,196,225,.5) 19% 21%, transparent 22%), radial-gradient(circle, #354d74, #080b13 64%); }
.poster-d::before { background: linear-gradient(168deg, transparent 46%, #2c5669 47% 55%, #111820 56%), radial-gradient(circle at 60% 27%, #d2ebed 0 1%, transparent 2%), #17223b; }
.library-caption { display: flex; justify-content: space-between; gap: 20px; margin-top: 21px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 10px; }
.library-caption span { color: #747c8b; }
.library-caption strong { color: #b6bdc9; font-weight: 560; }

.experience-section { padding-bottom: 135px; }
.experience-card { min-height: 560px; position: relative; overflow: hidden; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 34px; background: radial-gradient(circle at 74% 48%, rgba(87, 117, 221, .2), transparent 31%), linear-gradient(135deg, #11141b, #0c0e13); }
.experience-copy { position: relative; z-index: 4; width: 48%; padding: 70px; }
.experience-copy p:not(.kicker) { color: #9098a7; font-size: 14px; line-height: 1.85; margin: 25px 0; }
.text-link { display: inline-flex; gap: 10px; color: #dce1ea; font-size: 12px; border-bottom: 1px solid #596170; padding-bottom: 5px; }
.experience-rings { position: absolute; width: 660px; height: 660px; right: -50px; top: -55px; }
.ring { position: absolute; border: 1px solid rgba(116, 199, 235, .18); border-radius: 50%; }
.ring-a { inset: 10%; }
.ring-b { inset: 22%; border-color: rgba(155, 105, 255, .2); }
.ring-c { inset: 35%; border-color: rgba(255, 255, 255, .15); }
.vr-lens { position: absolute; inset: 31%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.vr-lens span { width: 98px; height: 78px; border: 2px solid rgba(189, 230, 255, .48); border-radius: 50% 50% 44% 44%; background: radial-gradient(circle at 50% 50%, rgba(78, 105, 198, .3), rgba(8, 12, 20, .7)); box-shadow: inset 0 0 40px rgba(104, 192, 244, .12), 0 0 30px rgba(70, 104, 210, .1); }
.starburst { position: absolute; width: 74px; height: 74px; left: 50%; top: 50%; transform: translate(-50%, -60%); background: linear-gradient(#fff, #79ddf1); clip-path: polygon(50% 0, 57% 42%, 100% 50%, 57% 58%, 50% 100%, 43% 58%, 0 50%, 43% 42%); filter: drop-shadow(0 0 18px rgba(112, 226, 244, .5)); }
.format-row { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 18px 28px; border-top: 1px solid var(--line); color: #626b79; font-size: 8px; letter-spacing: .15em; }

.final-cta { min-height: 630px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-top: 1px solid var(--line); }
.cta-mark { margin-bottom: 28px; }
.cta-mark img { border-radius: 24px; box-shadow: 0 0 80px rgba(83, 112, 245, .28); }
.final-cta h2 { margin: 10px 0 36px; font-size: clamp(46px, 5.4vw, 74px); line-height: 1.03; letter-spacing: -.06em; font-weight: 520; }
.site-footer { min-height: 130px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; border-top: 1px solid var(--line); color: #666f7d; font-size: 10px; }
.footer-brand { color: #cbd1db; font-size: 16px; }
.site-footer > p { text-align: center; }
.footer-links { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.footer-links a:hover { color: #fff; }
.footer-links b { font-weight: inherit; }

/* Feature page */
.page-hero { min-height: 660px; position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; overflow: hidden; }
.page-hero-copy { position: relative; z-index: 3; }
.page-hero-copy > p:last-child, .download-copy > p:not(.eyebrow) { margin: 27px 0 0; max-width: 470px; color: #9aa3b1; font-size: 16px; line-height: 1.75; }
.feature-hero-art { position: relative; height: 560px; }
.feature-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(122, 232, 245, .15); border-radius: 50%; transform: translate(-50%, -50%) rotate(-16deg); }
.orbit-wide { width: 620px; height: 250px; }
.orbit-tight { width: 330px; height: 330px; border-color: rgba(154, 105, 255, .2); transform: translate(-50%, -50%) rotate(40deg); }
.feature-core { position: absolute; left: 50%; top: 50%; width: 210px; height: 210px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 39% 31%, #5e799c, #1b2342 28%, #0d1020 65%); box-shadow: 0 0 90px rgba(76, 102, 218, .22), inset -30px -35px 50px #090b13; }
.feature-core::after { content: ""; position: absolute; width: 290px; height: 62px; left: -41px; top: 67px; border: 4px solid rgba(133, 213, 239, .27); border-radius: 50%; transform: rotate(-11deg); }
.feature-core span { position: absolute; z-index: 2; left: 50%; top: 50%; width: 54px; height: 54px; transform: translate(-50%, -50%); background: linear-gradient(#fff, #8eeaf4); clip-path: polygon(50% 0, 58% 41%, 100% 50%, 58% 59%, 50% 100%, 42% 59%, 0 50%, 42% 41%); filter: drop-shadow(0 0 16px #78dbe8); }
.format-tag { position: absolute; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(16, 19, 27, .75); color: #b0b8c6; font-size: 9px; letter-spacing: .1em; backdrop-filter: blur(10px); }
.tag-a { left: 11%; top: 36%; }.tag-b { right: 1%; top: 30%; }.tag-c { right: 13%; bottom: 21%; }
.mode-lab { min-height: 620px; display: grid; grid-template-columns: .78fr 1.22fr; border: 1px solid var(--line); border-radius: 32px; overflow: hidden; background: #0d0f14; }
.lab-copy { padding: 62px 55px; border-right: 1px solid var(--line); }
.lab-copy h2 { font-size: clamp(36px, 3.8vw, 52px); }
.mode-tabs { display: grid; gap: 7px; margin-top: 45px; }
.mode-tab { position: relative; height: 52px; padding: 0 16px; text-align: left; color: #7d8695; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; transition: .2s; }
.mode-tab::after { content: "→"; position: absolute; right: 16px; opacity: 0; transform: translateX(-6px); transition: .2s; }
.mode-tab:hover, .mode-tab.is-active { color: #fff; border-color: var(--line); background: rgba(255, 255, 255, .035); }
.mode-tab.is-active::after { opacity: 1; transform: none; }
.mode-description { min-height: 68px; margin: 25px 0 0; color: #88919f; font-size: 12px; line-height: 1.75; }
.mode-visual { position: relative; min-height: 610px; overflow: hidden; background: radial-gradient(circle at 50% 44%, rgba(61, 87, 178, .28), transparent 26%), linear-gradient(#101426, #0a0c12 76%); transition: background .4s; }
.mode-grid { position: absolute; left: -20%; right: -20%; bottom: -29%; height: 65%; transform: perspective(330px) rotateX(55deg); transform-origin: bottom; background-image: linear-gradient(rgba(109, 149, 211, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 149, 211, .11) 1px, transparent 1px); background-size: 36px 36px; }
.mode-screen { position: absolute; left: 12%; right: 12%; top: 15%; height: 45%; overflow: hidden; border: 1px solid rgba(179, 211, 255, .25); border-radius: 7px; background: linear-gradient(#21345b, #925c72 62%, #151529 63%); box-shadow: 0 20px 70px rgba(68, 95, 194, .25); transition: .45s var(--ease); }
.mode-sun { position: absolute; width: 90px; height: 90px; left: 53%; top: 27%; border-radius: 50%; background: #ffc5ae; box-shadow: 0 0 50px rgba(255, 159, 157, .35); }
.mode-land { position: absolute; left: -5%; right: -5%; bottom: -20%; height: 50%; background: #171526; clip-path: polygon(0 70%, 18% 26%, 26% 50%, 46% 10%, 58% 59%, 75% 31%, 100% 65%, 100% 100%, 0 100%); }
.viewer-position { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); text-align: center; color: #7de3f2; font-size: 8px; letter-spacing: .14em; }
.viewer-position i { display: block; width: 13px; height: 13px; margin: 0 auto 8px; border: 2px solid #7de3f2; border-radius: 50%; box-shadow: 0 0 18px rgba(125, 227, 242, .6); }
.degree { position: absolute; bottom: 5%; color: #505a69; font-size: 8px; }.degree-left { left: 15%; }.degree-center { left: 49%; }.degree-right { right: 15%; }
.mode-visual[data-mode-visual="180"] { background: radial-gradient(circle at 50% 40%, rgba(110, 63, 179, .26), transparent 34%), #0c0e15; }
.mode-visual[data-mode-visual="180"] .mode-screen { left: 3%; right: 3%; top: 10%; height: 56%; border-radius: 50% 50% 12px 12px / 18% 18% 12px 12px; transform: perspective(700px) rotateX(-4deg); }
.mode-visual[data-mode-visual="360"] { background: radial-gradient(circle at 50% 44%, rgba(62, 121, 166, .25), transparent 47%), #0b0f15; }
.mode-visual[data-mode-visual="360"] .mode-screen { left: 20%; right: 20%; top: 12%; height: 52%; border-radius: 50%; transform: scale(1.08); box-shadow: inset 0 0 70px #070a12, 0 20px 80px rgba(73, 137, 200, .15); }
.feature-grid-section { padding-block: 135px; }
.section-heading.compact { margin-bottom: 48px; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature-tile { min-height: 430px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 28px 32px 34px; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.015), transparent 60%); }
.tile-number { color: #596271; font-size: 9px; letter-spacing: .15em; }
.feature-tile h3 { margin: 0 0 9px; font-size: 22px; letter-spacing: -.025em; }
.feature-tile p { max-width: 420px; margin: 0; color: #858e9c; font-size: 12px; line-height: 1.7; }
.spatial-mini { position: absolute; width: 260px; height: 190px; left: 50%; top: 47%; transform: translate(-50%, -50%); border: 1px solid rgba(115, 213, 242, .15); border-radius: 50%; }
.spatial-mini i { position: absolute; inset: 28px; border: 1px solid rgba(154, 104, 255, .2); border-radius: 50%; }
.spatial-mini span { position: absolute; width: 50px; height: 50px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--accent-gradient); clip-path: polygon(50% 0, 58% 41%, 100% 50%, 58% 59%, 50% 100%, 42% 59%, 0 50%, 42% 41%); }
.spatial-mini b { position: absolute; width: 6px; height: 6px; right: 28px; top: 45px; border-radius: 50%; background: #9ff5ff; box-shadow: 0 0 15px #9ff5ff; }
.library-nodes, .privacy-demo { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; }
.library-nodes span, .library-nodes b { width: 57px; height: 57px; display: grid; place-items: center; border: 1px solid var(--line-bright); border-radius: 16px; color: #bdc5d1; font-size: 14px; }
.library-nodes b { width: 72px; height: 72px; color: #071014; background: linear-gradient(135deg, #9cefff, #8787ff); box-shadow: 0 0 40px rgba(92, 143, 255, .22); }
.library-nodes i { width: 54px; height: 1px; background: linear-gradient(90deg, #4e5868, #8bddec, #4e5868); }
.subtitle-demo { position: absolute; top: 30%; left: 12%; right: 12%; height: 150px; display: grid; place-items: center; text-align: center; border: 1px solid var(--line); border-radius: 13px; background: radial-gradient(circle, rgba(73, 95, 169, .18), #0d1016); }
.subtitle-demo span { color: white; font-size: 15px; line-height: 1.5; text-shadow: 0 2px 10px #000; }
.subtitle-demo i { position: absolute; right: 10px; top: 10px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; color: #858e9d; font-size: 8px; font-style: normal; }
.control-demo { position: absolute; left: 11%; right: 11%; top: 42%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; color: #67707e; font-size: 8px; }
.control-demo div { height: 3px; background: #2b313b; }
.control-demo i { display: block; width: 62%; height: 100%; background: var(--accent-gradient); box-shadow: 0 0 15px var(--blue); }
.control-demo b { color: #8b93a0; font-weight: 500; }
.privacy-demo { width: 78%; justify-content: center; color: #8e97a5; font-size: 9px; letter-spacing: .12em; }
.privacy-demo i { flex: 1; height: 1px; margin-inline: 16px; position: relative; background: linear-gradient(90deg, transparent, #70dbea, transparent); }
.privacy-demo i::after { content: ""; position: absolute; width: 7px; height: 7px; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); background: #8deaf5; box-shadow: 0 0 16px #78deeb; }
.privacy-demo b { position: absolute; left: 50%; top: 13px; transform: translateX(-50%); color: #5f6876; font-size: 7px; }
.comfort-demo { position: absolute; width: 220px; height: 160px; left: 50%; top: 45%; transform: translate(-50%, -50%); display: grid; place-items: center; border: 1px solid rgba(139, 222, 238, .17); border-radius: 50%; color: #c3cad5; font-size: 11px; }
.comfort-demo i, .comfort-demo b { position: absolute; inset: 22px; border: 1px solid rgba(159, 99, 244, .18); border-radius: 50%; }
.comfort-demo b { inset: 48px; background: radial-gradient(circle, rgba(111, 170, 233, .16), transparent); }
.comfort-demo span { position: relative; z-index: 2; }
.quote-section { min-height: 570px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-top: 1px solid var(--line); }
.quote-star { margin-bottom: 26px; color: #a8f4ff; font-size: 24px; text-shadow: 0 0 28px #5dd5e7; }
.quote-section blockquote { margin: 0 0 38px; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.18; letter-spacing: -.05em; color: #e6e9ef; }

/* Download page */
.download-hero { min-height: 660px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.preview-notice { width: fit-content; margin-top: 28px; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; color: #78818f; font-size: 10px; }
.preview-notice i { width: 6px; height: 6px; border-radius: 50%; background: #f5c47b; box-shadow: 0 0 12px rgba(245, 196, 123, .45); }
.headset-visual { position: relative; height: 520px; }
.headset-glow { position: absolute; width: 430px; height: 430px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(87, 112, 232, .24), rgba(106, 59, 157, .07) 47%, transparent 68%); }
.headset-body { position: absolute; z-index: 3; width: 330px; height: 165px; left: 50%; top: 43%; transform: translate(-50%, -50%) perspective(500px) rotateX(-5deg); border: 1px solid rgba(255,255,255,.22); border-radius: 84px 84px 58px 58px; background: linear-gradient(165deg, #2a2d35, #111318 55%, #0b0d10); box-shadow: inset 0 2px rgba(255,255,255,.1), 0 38px 80px rgba(0,0,0,.5); }
.headset-body > i { position: absolute; top: 54px; width: 93px; height: 75px; border-radius: 50%; background: radial-gradient(circle at 46% 45%, #283353, #0a0d14 66%); box-shadow: inset 0 0 28px rgba(96, 157, 229, .16); }
.headset-body > i:first-child { left: 58px; }.headset-body > i:nth-child(2) { right: 58px; }
.headset-shine { position: absolute; left: 68px; right: 68px; top: 12px; height: 1px; background: linear-gradient(90deg, transparent, rgba(181, 244, 255, .5), transparent); }
.headset-strap { position: absolute; z-index: 1; width: 190px; height: 115px; top: 36%; border: 22px solid #15171c; border-radius: 50%; }
.strap-left { left: 7%; transform: rotate(9deg); }.strap-right { right: 7%; transform: rotate(-9deg); }
.headset-shadow { position: absolute; width: 350px; height: 50px; left: 50%; bottom: 14%; transform: translateX(-50%); border-radius: 50%; background: rgba(0, 0, 0, .58); filter: blur(18px); }
.headset-label { position: absolute; z-index: 4; left: 50%; bottom: 16%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; color: #7f8997; font-size: 8px; letter-spacing: .15em; }
.headset-label i { width: 5px; height: 5px; border-radius: 50%; background: #8df5bc; box-shadow: 0 0 10px #64e99e; }
.platform-section { padding-block: 70px 120px; }
.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.platform-card { min-height: 290px; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 24px; color: #fff; text-align: left; border: 1px solid var(--line); border-radius: 22px; background: #0e1015; cursor: pointer; overflow: hidden; transition: transform .3s var(--ease), border-color .3s, background .3s; }
.platform-card::before { content: ""; position: absolute; width: 190px; height: 190px; right: -60px; top: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 131, 240, .16), transparent 68%); opacity: 0; transition: opacity .3s; }
.platform-card:hover, .platform-card.is-selected { transform: translateY(-5px); border-color: rgba(130, 214, 241, .35); background: linear-gradient(145deg, rgba(54, 72, 125, .16), #0e1015 55%); }
.platform-card.is-selected::before, .platform-card:hover::before { opacity: 1; }
.platform-status { position: absolute; left: 20px; top: 19px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 999px; color: #697281; font-size: 7px; letter-spacing: .13em; }
.status-preview { color: #a8efc8; border-color: rgba(101, 233, 162, .2); }
.platform-glyph { position: absolute; left: 50%; top: 41%; transform: translate(-50%, -50%); width: 115px; height: 65px; }
.pico-glyph { border: 5px solid #8e99aa; border-radius: 50%; box-shadow: inset 0 0 0 8px #0e1116; }
.pico-glyph::after { content: ""; position: absolute; inset: 8px 30px; border: 4px solid #8e99aa; border-radius: 50%; }
.quest-glyph { border: 5px solid #8e99aa; border-radius: 52px 52px 28px 28px; }
.quest-glyph::after { content: ""; position: absolute; left: 48px; top: 21px; width: 10px; height: 10px; border-radius: 50%; background: #8e99aa; }
.pc-glyph { height: 72px; border: 4px solid #8e99aa; border-radius: 8px; }
.pc-glyph::before { content: ""; position: absolute; left: 50%; bottom: -14px; width: 44px; height: 3px; transform: translateX(-50%); background: #8e99aa; }
.platform-name { font-size: 20px; font-weight: 650; letter-spacing: -.03em; }
.platform-card small { margin-top: 5px; color: #737c8a; font-size: 10px; }
.card-action { position: absolute; right: 21px; bottom: 26px; color: #6e7888; font-size: 9px; }
.card-action i { margin-left: 4px; font-style: normal; }
.download-dock { min-height: 138px; margin-top: 16px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 35px; padding: 24px; border: 1px solid rgba(122, 203, 239, .22); border-radius: 22px; background: linear-gradient(110deg, rgba(42, 58, 105, .24), rgba(18, 21, 28, .9) 55%); }
.download-product { display: flex; align-items: center; gap: 16px; }
.download-product img { border-radius: 17px; box-shadow: 0 14px 34px rgba(58, 96, 217, .23); }
.download-product small { color: #79d9e9; font-size: 8px; letter-spacing: .15em; }
.download-product h3 { margin: 5px 0 3px; font-size: 18px; }.download-product h3 span { color: #7d8695; font-weight: 500; }.download-product p { margin: 0; color: #6d7684; font-size: 9px; }
.download-meta { display: flex; gap: 28px; }
.download-meta span { display: grid; gap: 5px; }
.download-meta b { color: #65707f; font-size: 8px; font-weight: 500; }.download-meta i { color: #abb3bf; font-size: 10px; font-style: normal; }
.download-button { gap: 10px; }
.download-button .toggle-icon { font-size: 16px; font-style: normal; transition: transform .25s var(--ease); }
.download-button[aria-expanded="true"] .toggle-icon { transform: rotate(180deg); }
.download-button:disabled { color: #697281; background: #1b1e25; box-shadow: none; cursor: not-allowed; }
.install-guide { margin-top: 16px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 42px 64px; padding: 44px; border: 1px solid rgba(122, 203, 239, .18); border-radius: 24px; background: linear-gradient(145deg, rgba(39, 56, 98, .2), rgba(12, 14, 19, .96) 52%); }
.install-guide[hidden] { display: none; }
.install-guide-intro h3 { margin: 9px 0 16px; font-size: 32px; letter-spacing: -.045em; }
.install-guide-intro > p:last-child { margin: 0; max-width: 480px; color: #8993a2; font-size: 12px; line-height: 1.75; }
.compatibility-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.compatibility-list div { min-height: 74px; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.018); }
.compatibility-list span { color: #697382; font-size: 8px; letter-spacing: .08em; }
.compatibility-list strong { color: #d3d9e2; font-size: 11px; font-weight: 580; }
.install-steps { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.install-steps li { min-height: 170px; padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.016); }
.install-steps li > span { display: block; margin-bottom: 25px; color: #75cddd; font-size: 9px; letter-spacing: .1em; }
.install-steps h4 { margin: 0 0 9px; color: #e2e6ec; font-size: 14px; }
.install-steps p { margin: 0; color: #7f8998; font-size: 10px; line-height: 1.7; }
.store-transition { grid-column: 1 / -1; margin: -15px 0 0; color: #778391; font-size: 10px; text-align: right; }
.store-transition span { margin-right: 5px; color: #8edce9; }
.requirements-section { padding-bottom: 120px; }
.requirements-card { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; padding: 60px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(135deg, rgba(255,255,255,.025), transparent); }
.requirements-card h2 { font-size: 46px; }
.requirement-list > div { display: grid; grid-template-columns: 35px 1fr; gap: 14px; padding: 21px 0; border-top: 1px solid var(--line); }
.requirement-list > div:last-child { border-bottom: 1px solid var(--line); }
.requirement-list span { color: #626c7b; font-size: 9px; padding-top: 3px; }
.requirement-list p { margin: 0; color: #7d8694; font-size: 11px; line-height: 1.65; }
.requirement-list strong { display: block; margin-bottom: 4px; color: #d5dae3; font-size: 13px; }
.support-note { min-height: 150px; display: flex; align-items: center; justify-content: center; gap: 15px; border-top: 1px solid var(--line); color: #697280; font-size: 11px; }
.support-note p { color: #c6ccd6; }
.toast { position: fixed; z-index: 100; right: 22px; bottom: 22px; width: min(370px, calc(100vw - 32px)); display: grid; grid-template-columns: 28px 1fr 26px; gap: 10px; align-items: start; padding: 17px; border: 1px solid rgba(128, 223, 243, .24); border-radius: 16px; background: rgba(20, 24, 32, .94); box-shadow: 0 24px 70px rgba(0,0,0,.5); backdrop-filter: blur(18px); transform: translateY(130%); opacity: 0; transition: .45s var(--ease); }
.toast.is-visible { transform: none; opacity: 1; }.toast > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #a7f4ff; background: rgba(91, 191, 224, .12); }.toast p { margin: 0; color: #828c9b; font-size: 10px; line-height: 1.5; }.toast strong { display: block; color: #e6eaf0; font-size: 12px; }.toast button { border: 0; background: none; color: #707988; cursor: pointer; font-size: 18px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes ticker { to { transform: translateX(-50%); } }

@media (max-width: 980px) {
  :root { --shell: min(100% - 36px, 780px); }
  .hero { grid-template-columns: 1fr; padding-top: 90px; }
  .hero-copy { text-align: center; }
  .hero-lede { margin-inline: auto; }.button-row, .hero-proof { justify-content: center; }
  .hero-visual { min-height: 550px; max-width: 650px; width: 100%; margin-inline: auto; }
  .section-heading { grid-template-columns: 1fr; gap: 24px; }
  .section-heading > p { max-width: 560px; }
  .experience-copy { width: 55%; padding: 48px; }
  .experience-rings { right: -185px; }
  .page-hero, .download-hero { grid-template-columns: 1fr; padding-top: 80px; }
  .page-hero { min-height: 900px; }.page-hero-copy, .download-copy { text-align: center; }.page-hero-copy .eyebrow, .download-copy .eyebrow { justify-content: center; }.page-hero-copy > p:last-child, .download-copy > p:not(.eyebrow) { margin-inline: auto; }.feature-hero-art { height: 490px; }
  .mode-lab { grid-template-columns: 1fr; }.lab-copy { border-right: 0; border-bottom: 1px solid var(--line); }.mode-tabs { grid-template-columns: repeat(3, 1fr); }.mode-tab { text-align: center; }.mode-tab::after { display: none; }
  .download-hero { min-height: 970px; }.headset-visual { height: 480px; }.preview-notice { margin-inline: auto; }
  .platform-grid { grid-template-columns: 1fr; }.platform-card { min-height: 230px; }.platform-glyph { left: auto; right: 13%; transform: translateY(-50%) scale(.8); }
  .download-dock { grid-template-columns: 1fr auto; }.download-meta { display: none; }
  .install-guide { grid-template-columns: 1fr; }.install-steps { grid-template-columns: 1fr; }.install-steps li { min-height: auto; }.install-steps li > span { margin-bottom: 15px; }
  .requirements-card { grid-template-columns: 1fr; gap: 35px; }
}

@media (max-width: 700px) {
  :root { --shell: calc(100% - 28px); }
  .site-header { position: sticky; top: 0; }
  .nav-shell { height: 66px; }.brand { font-size: 17px; }.brand img { width: 34px; height: 34px; }
  .nav-toggle { display: grid; place-items: center; position: relative; margin-left: auto; }
  .nav-toggle i { position: absolute; width: 16px; height: 1px; background: #fff; transition: .25s; }.nav-toggle i:first-of-type { transform: translateY(-3px); }.nav-toggle i:last-of-type { transform: translateY(3px); }.nav-toggle[aria-expanded="true"] i:first-of-type { transform: rotate(45deg); }.nav-toggle[aria-expanded="true"] i:last-of-type { transform: rotate(-45deg); }
  .site-nav { position: absolute; left: 14px; right: 14px; top: 74px; display: grid; gap: 2px; padding: 8px; border-radius: 16px; background: rgba(14,16,21,.98); box-shadow: 0 24px 50px rgba(0,0,0,.45); opacity: 0; transform: translateY(-10px); pointer-events: none; transition: .25s; }
  .site-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }.site-nav a { padding: 12px 14px; border-radius: 10px; }.nav-cta { display: none; }
  .hero { min-height: auto; padding-block: 80px 50px; }.hero h1, .page-hero h1, .download-hero h1 { font-size: clamp(44px, 13.4vw, 62px); }.hero-lede { font-size: 14px; }.button-row { flex-direction: column; align-items: stretch; }.hero-proof { flex-wrap: wrap; margin-top: 32px; }
  .hero-visual { min-height: 390px; margin-top: 10px; }.glow-sphere { width: 320px; height: 320px; right: 0; }.orbit-one { width: 380px; height: 190px; right: -20px; }.orbit-two { width: 330px; height: 330px; right: 0; }.theater-card { width: calc(100% - 16px); right: 8px; top: 72px; padding: 8px; border-radius: 18px; }.screen-scene { height: 190px; }.scene-planet { width: 160px; height: 160px; left: 28%; top: 54px; }.scene-planet::after { width: 220px; height: 46px; left: -31px; top: 51px; }.center-play { width: 50px; height: 50px; }.center-play span { margin-left: 18px; border-left-width: 13px; border-block-width: 8px; }.chip-server { left: -4px; top: 277px; transform: scale(.82); transform-origin: left; }.chip-mode { right: -5px; top: 322px; transform: scale(.82); transform-origin: right; }
  .connect-section, .feature-grid-section { padding-block: 95px; }.section-heading h2, .experience-copy h2, .lab-copy h2 { font-size: 39px; }.server-stage { grid-template-columns: 1fr; }.server-list { border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; }.server-item { min-height: 94px; grid-template-columns: 46px 1fr auto; padding: 10px; }.server-symbol { width: 44px; height: 44px; }.library-preview { padding: 16px; }.poster-grid { gap: 6px; }.poster { padding: 7px; font-size: 7px; border-radius: 7px; }.poster small { display: none; }
  .experience-section { padding-bottom: 95px; }.experience-card { min-height: 690px; align-items: flex-start; }.experience-copy { width: 100%; padding: 42px 28px; }.experience-rings { width: 480px; height: 480px; right: -118px; top: 244px; }.vr-lens span { width: 72px; height: 58px; }.format-row { overflow-x: auto; justify-content: flex-start; gap: 26px; white-space: nowrap; }
  .final-cta { min-height: 530px; }.final-cta h2 { font-size: 45px; }.site-footer { grid-template-columns: 1fr 1fr; gap: 22px; padding-block: 30px; }.site-footer > p { display: none; }.footer-links { flex-wrap: wrap; gap: 11px; }
  .page-hero { min-height: 760px; padding-top: 70px; }.feature-hero-art { height: 370px; }.orbit-wide { width: 450px; height: 180px; }.orbit-tight { width: 260px; height: 260px; }.feature-core { width: 155px; height: 155px; }.feature-core::after { width: 220px; height: 45px; left: -33px; top: 55px; }.tag-a { left: 0; }.tag-b { right: 0; }.tag-c { right: 4%; }
  .mode-lab { border-radius: 22px; }.lab-copy { padding: 40px 24px; }.mode-tabs { grid-template-columns: 1fr; }.mode-tab { text-align: left; }.mode-visual { min-height: 410px; }.mode-screen { left: 8%; right: 8%; }
  .feature-grid { grid-template-columns: 1fr; }.feature-tile { min-height: 370px; }.quote-section { min-height: 500px; }.quote-section blockquote { font-size: 34px; }
  .download-hero { min-height: 810px; padding-top: 70px; }.headset-visual { height: 370px; }.headset-body { width: 270px; height: 136px; }.headset-body > i { top: 43px; width: 78px; height: 64px; }.headset-body > i:first-child { left: 44px; }.headset-body > i:nth-child(2) { right: 44px; }.headset-strap { width: 140px; height: 90px; border-width: 18px; }.strap-left { left: -2%; }.strap-right { right: -2%; }.headset-glow { width: 340px; height: 340px; }
  .platform-section { padding-top: 50px; }.platform-card { min-height: 220px; }.platform-glyph { right: 4%; }.download-dock { grid-template-columns: 1fr; gap: 24px; }.download-button { width: 100%; }.install-guide { padding: 28px 22px; gap: 30px; }.compatibility-list { grid-template-columns: 1fr; }.store-transition { margin-top: -5px; text-align: left; line-height: 1.6; }.requirements-card { padding: 35px 24px; }.support-note { flex-direction: column; text-align: center; gap: 0; padding-block: 35px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}