:root {
  color-scheme: dark;
  --bg: #060910; --text: #f5f7fc; --muted: #b5c0d0;
  --cyan: #5ee5f3; --violet: #b394ff; --line: #283341;
  font-family: Segoe UI, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.6; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; border-radius: 7px; }
button:disabled { cursor: default; }
svg { width: 24px; height: 24px; flex-shrink: 0; }
p, h1, h2, h3, figure { margin: 0; }
p { color: var(--muted); }
[hidden] { display: none !important; }
.wrap { width: calc(100% - 112px); max-width: 1440px; margin-inline: auto; }
.skip-link { position: absolute; top: 8px; left: 16px; z-index: 30; padding: 12px; color: #07101a; background: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #ffffff18; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; background: linear-gradient(135deg,#00d9e9,#754bed); border-radius: 11px; font-size: 28px; font-weight: 900; color: white; }
.brand strong { font-size: 24px; letter-spacing: .13em; line-height: 1; }
.brand strong span { display: block; font-size: 9px; letter-spacing: .58em; font-weight: 500; margin-top: 9px; }
.desktop-nav { display: flex; gap: 30px; font-size: 14px; color: #d2d9e5; }
.desktop-nav a { position: relative; padding: 15px 0; }
.desktop-nav a[aria-current] { color: var(--cyan); }
.desktop-nav a[aria-current]:after { content: ''; position: absolute; bottom: 6px; left: 0; right: 0; height: 2px; background: var(--cyan); box-shadow: 0 0 12px #46d8ff66; }
.desktop-nav a:hover, .site-footer a:hover { color: var(--cyan); }
.header-actions { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.login { border: 1px solid #777eae; padding: 8px 22px; border-radius: 9px; background: #0b102280; }
.login:hover { border-color: var(--cyan); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 12px 24px; border-radius: 9px; font-size: 14px; font-weight: 650; line-height: 1.4; transition: background .2s, border-color .2s; }
.button svg { width: 19px; height: 19px; }
.button.primary, .button.small { background: linear-gradient(110deg,#50def0,#ac91fa); color: #080d1a; }
.button.primary:hover, .button.small:hover { background: linear-gradient(110deg,#85e9f6,#c4afff); }
.button.small { min-height: 42px; padding: 9px 18px; }
.button.secondary { border: 1px solid #7f87aa; background: #0b1021c9; }
.button.secondary:hover { background: #15273c; border-color: var(--cyan); }
.mobile-menu { display: none; }

/* Static room, separate vector bezel and live HTML screen share the photographed perspective. */
.cinema-hero { --scene-size: min(1280px,100vw); position: relative; isolation: isolate; overflow: clip; height: calc(var(--scene-size) * .82); min-height: 980px; background: radial-gradient(ellipse at 8% 43%,#4b1d696b,transparent 43%), radial-gradient(ellipse at 94% 42%,#13405e75,transparent 43%),#080b13; }
.cinema-hero:after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg,var(--bg),transparent 23%); pointer-events: none; }
.cinema-visual { position: absolute; inset: 0; z-index: -2; overflow: clip; }
.scene-layer { position: absolute; width: var(--scene-size); aspect-ratio: 1; left: 50%; top: 0; transform: translateX(-50%); }
.scene-layer:after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg,#080b13 0,transparent 16%,transparent 84%,#080b13 100%),linear-gradient(0deg,var(--bg),transparent 30%,transparent 88%,#080b1355); pointer-events: none; }
.cinema-photo { width: 100%; height: 100%; display: block; }
.tv-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tv-projection { width: 880px; height: 520px; transform-origin: 0 0; transform: matrix3d(0.62219416386083,-0.0045173961840629,0,-3.5072951739618e-06,0,0.62115384615385,0,0,0,0,1,0,250,319,0,1); background: #080f1c; overflow: hidden; color: #edf4ff; font-family: Segoe UI,Arial,sans-serif; line-height: 1.3; }
.hero-copy { position: relative; z-index: 3; padding-top: 126px; text-align: center; }
.eyebrow { font-size: 10px; font-weight: 650; letter-spacing: .19em; color: #c3cedd; }
.hero-copy .eyebrow { font-size: 11px; letter-spacing: .23em; }
h1 { margin-top: 12px; font-size: clamp(56px,4.75vw,78px); font-weight: 720; letter-spacing: -.052em; line-height: 1.07; }
h1 span { background: linear-gradient(100deg,#72e8f0,#b1afff 55%,#b58cfa); background-clip: text; -webkit-background-clip: text; color: transparent; }
.hero-lead { max-width: 650px; margin: 15px auto 0; font-size: 17px; line-height: 1.65; color: #d2dbe8; }
.hero-actions { display: flex; justify-content: center; gap: 13px; margin-top: 19px; }
.demo-controls { position: absolute; z-index: 4; top: calc(var(--scene-size) * .65 + 10px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 7px 12px; background: #090e1ee8; border: 1px solid #656f8d; border-radius: 40px; box-shadow: 0 12px 35px #0005; }
.transport { display: flex; align-items: center; gap: 5px; }
.transport button { min-width: 40px; min-height: 40px; border: 0; border-radius: 24px; background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.transport button:hover { background: #263347; }
.transport button svg { width: 17px; height: 17px; }
.transport .play-toggle { gap: 7px; min-width: 90px; font-size: 12px; }
.transport button:disabled { opacity: .7; }
.demo-scene-name { font-size: 12px; color: #dae3f4; min-width: 89px; margin-left: 8px; }
.scene-picker { display: flex; align-items: center; gap: 2px; padding-left: 10px; border-left: 1px solid #465064; }
.scene-picker button { display: grid; place-items: center; width: 26px; height: 32px; padding: 0; border: 0; background: transparent; border-radius: 50%; }
.scene-picker button span { width: 5px; height: 5px; border-radius: 50%; background: #8996af; }
.scene-picker button[aria-pressed=true] span { width: 15px; border-radius: 9px; background: var(--cyan); }
.demo-caption { position: absolute; top: calc(var(--scene-size) * .65 + 85px); left: 20px; right: 20px; font-size: 11px; color: #d2dcef; text-align: center; }
.caption-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #c1a3ff; margin-right: 5px; vertical-align: 2px; }
.caption-detail { display: block; margin-top: 3px; color: #aab8cc; font-size: 10px; }
.static-notice { position: absolute; top: calc(var(--scene-size) * .65 + 10px); left: 20px; right: 20px; font-size: 12px; text-align: center; }
.status-slot:empty { display: none; }
.home-notice { margin-top: 24px; padding: 16px 20px; border: 1px solid #59687f; border-radius: 10px; }
.legal-note { margin: 110px auto 20px; padding: 20px; width: calc(100% - 40px); max-width: 1440px; background: #142238; border: 1px solid #536783; border-radius: 12px; position: relative; z-index: 12; }
.legal-note a { color: var(--cyan); }

/* Synthetic TV interface. Motion is finite and paused by the shared demo clock. */
.demo-app { height: 100%; padding: 23px 25px; background: radial-gradient(ellipse at 76% 0,#14233555,transparent 70%),#080f1c; }
.demo-topbar { display: flex; height: 46px; align-items: flex-start; gap: 20px; border-bottom: 1px solid #2e3b4c; padding-bottom: 14px; }
.demo-topbar>strong { font-size: 25px; letter-spacing: .09em; line-height: 1; }
.demo-topbar>strong>span { display: block; margin-top: 5px; font-size: 6px; letter-spacing: .58em; }
.demo-preview-tag { padding: 5px 9px; border: 1px solid #4b647a; border-radius: 5px; font-size: 11px; letter-spacing: .1em; color: #b4cedc; }
.demo-profile { display: flex; gap: 8px; align-items: center; margin-left: auto; font-size: 17px; color: #cad6e7; }
.demo-profile svg { width: 20px; height: 20px; }
.demo-clock { font-size: 17px; color: #cad6e7; }
.demo-body { height: 425px; display: grid; grid-template-columns: 140px 1fr; gap: 22px; padding-top: 22px; }
.demo-sidebar { display: flex; flex-direction: column; gap: 12px; padding-top: 9px; color: #b9c7da; }
.demo-sidebar>div { display: flex; gap: 9px; align-items: center; min-height: 47px; padding: 10px 8px; border-left: 2px solid transparent; border-radius: 5px; font-size: 15px; }
.demo-sidebar svg { width: 20px; height: 20px; }
[data-scene=home] .demo-nav-home,[data-scene=live] .demo-nav-live,[data-scene=epg] .demo-nav-epg,[data-scene=library] .demo-nav-library,[data-scene=settings] .demo-nav-settings { color: white; background: linear-gradient(90deg,#1d628c88,#3b2f6677); border-left-color: #53dce8; }
.demo-scenes { position: relative; min-width: 0; height: 100%; }
.demo-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
[data-view=home] .scene-home,[data-view=live] .scene-live,[data-view=epg] .scene-epg,[data-view=library] .scene-library, [data-playback=static] .scene-home { opacity: 1; visibility: visible; }
.demo-eyebrow { font-size: 11px; letter-spacing: .16em; color: #9eb7cb; margin-bottom: 6px; }
.demo-scene h2 { font-size: 30px; letter-spacing: -.035em; line-height: 1.2; font-weight: 550; margin-bottom: 18px; }
.home-panels { display: grid; grid-template-columns: 1.18fr 1fr; gap: 16px; height: 244px; }
.home-feature { position: relative; overflow: hidden; border-radius: 8px; background: #193d4d; border: 2px solid #61c9e1; }
.mountain-art { position: absolute; inset: 0; background: radial-gradient(circle at 74% 22%,#d9c5c7 0 7%,transparent 7.4%),linear-gradient(#1d3152,#7290a7 64%,#173343); }
.mountain-art:before,.mountain-art:after,.mountain-art i,.mountain-art b { content: ''; position: absolute; inset: 22% -2% 20%; background: #4e667e; clip-path: polygon(0 90%,20% 18%,41% 76%,65% 0,100% 90%); }
.mountain-art:after { inset: 40% -4% 0; background: #1e394d; }
.mountain-art i { inset: 23% -2% 20%; background: #a9b7c4; clip-path: polygon(15% 33%,20% 18%,25% 32%,21% 29%,18% 30%,61% 16%,65% 0,72% 18%,65% 12%); }
.mountain-art b { inset: 75% 0 0; clip-path: none; background: linear-gradient(#2c5263,#142937); }
.home-feature:after { content: ''; position: absolute; inset: 15% 0 0; background: linear-gradient(transparent,#06111ec9); }
.live-chip { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 4px 6px; font-size: 10px; color: #d9f8fa; background: #07111e99; border-radius: 4px; }
.landscape-copy { position: absolute; z-index: 2; bottom: 17px; left: 18px; right: 8px; display: flex; flex-direction: column; gap: 6px; }
.landscape-copy small { font-size: 10px; letter-spacing: .13em; color: #bddeea; }
.landscape-copy strong { font-size: 27px; line-height: 1.15; font-weight: 550; }
.landscape-copy>span { font-size: 12px; color: #d2e2ec; }
.home-media h3 { font-size: 17px; font-weight: 500; margin-bottom: 12px; }
.home-posters { height: 212px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.poster { position: relative; overflow: hidden; border: 1px solid #607c9477; border-radius: 7px; padding: 12px; display: flex; flex-direction: column; justify-content: end; background: #15263d; }
.poster-aurora { background: linear-gradient(160deg,#071e3d,#332147 58%,#0b1a2a); }
.poster-aurora .poster-art { position: absolute; inset: -10% -65% 30%; transform: rotate(-25deg); background: linear-gradient(90deg,transparent,#6cbfbf88,transparent 40%,#a16ee7bb,transparent 70%); filter: blur(9px); }
.poster-orbit { background: radial-gradient(circle at 68% 35%,#ba9987 0 12%,#515365 12.5%,transparent 16%),linear-gradient(160deg,#273a56,#091526); }
.poster-orbit .poster-art { position: absolute; inset: 45% -20% 20%; border-top: 1px solid #c4af99; transform: rotate(-35deg); }
.poster-coast { background: radial-gradient(ellipse at 20% 30%,#66a4ac,#1c4265 39%,#071d36 40%,#317185 60%,#142231 61%); }
.poster>span { z-index: 1; font-size: 16px; font-weight: 550; line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 2px 9px #000; }
.poster>small { z-index: 1; font-size: 9px; color: #d2dbe9; letter-spacing: .05em; margin-top: 8px; }
.home-shortcuts { display: flex; gap: 12px; margin-top: 17px; }
.home-shortcuts>span { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border: 1px solid #35495f; border-radius: 5px; font-size: 13px; color: #c4d5e8; }
.home-shortcuts svg { width: 17px; height: 17px; }
.live-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; padding-top: 5px; }
.live-card { min-height: 250px; border: 2px solid #33465c; border-radius: 9px; background: linear-gradient(160deg,#183044,#0f1c2c); padding: 20px 15px; display: flex; flex-direction: column; }
.channel-symbol { display: grid; place-items: center; height: 47px; width: 47px; background: #213b52; border: 1px solid #5b7793; border-radius: 10px; font-size: 25px; margin-bottom: 20px; }
.live-card>strong { font-size: 22px; font-weight: 550; margin-bottom: 12px; }
.live-card>span { font-size: 17px; color: #d3dfed; line-height: 1.4; }
.live-card>small { font-size: 13px; color: #a6bfd0; margin-top: auto; padding-top: 15px; }
.live-bottom { display: flex; gap: 9px; align-items: center; margin-top: 20px; font-size: 13px; color: #bbcdde; }
.live-bottom svg { width: 17px; height: 17px; }
.epg-heading { display: flex; justify-content: space-between; align-items: center; }
.epg-heading>span { font-size: 16px; color: #bfcee0; }
.epg-heading h2 { margin-bottom: 15px; }
.epg-grid { overflow: hidden; border: 1px solid #415369; border-radius: 7px; }
.epg-times { display: grid; grid-template-columns: 170px repeat(3,1fr); padding: 11px 12px; background: #1b293b; color: #d4e0ee; font-size: 15px; }
.epg-row { display: grid; grid-template-columns: 170px 1.15fr 1fr; min-height: 64px; border-top: 1px solid #34475b; font-size: 17px; color: #c2cfdf; background: #101d2e; }
.epg-row>strong { display: flex; align-items: center; gap: 7px; padding: 11px 10px; font-weight: 500; border-right: 1px solid #34475b; font-size: 16px; }
.epg-row i { font-style: normal; padding: 4px; width: 23px; height: 26px; background: #253b51; border-radius: 4px; text-align: center; font-size: 13px; }
.epg-row>span { display: flex; align-items: center; padding: 9px 11px; border-right: 1px solid #34475b; }
.epg-selected { color: #effaff; background: #184252; box-shadow: inset 3px 0 #65e0e9; }
.epg-footnote { font-size: 12px; color: #9eb6ca; margin-top: 13px; }
.library-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }
.media-card { min-width: 0; }
.media-card>.poster { height: 237px; border: 2px solid #41546b; padding: 15px; }
.media-card>strong { display: block; font-size: 19px; font-weight: 550; margin-top: 11px; }
.media-card>small { font-size: 12px; color: #b7c7db; }
.settings-list { border: 1px solid #3e536c; border-radius: 8px; overflow: hidden; }
.settings-list>div { display: flex; justify-content: space-between; align-items: center; min-height: 65px; padding: 12px 17px; background: #142236; border-bottom: 1px solid #3a4d64; font-size: 19px; }
.settings-list>div>span { display: flex; align-items: center; gap: 12px; }
.settings-list>div>span>svg { width: 23px; height: 23px; }
.settings-list strong { font-size: 17px; font-weight: 500; color: #d1e3ef; display: flex; gap: 9px; align-items: center; }
.settings-list i { width: 17px; height: 17px; border-radius: 50%; display: block; }
.color-cyan { background: #5bdae9; }.color-violet { background: #ae86fa; }
.settings-list b { font-weight: 500; }.color-label-violet { display: none; }
.settings-footnote { font-size: 12px; margin-top: 15px; color: #aec2d5; }

.features { padding-top: 46px; padding-bottom: 55px; }
.section-heading { text-align: center; margin-bottom: 38px; }
.section-heading .eyebrow { color: #a0a5c6; font-size: 9px; }
.section-heading h2 { font-size: 34px; font-weight: 580; letter-spacing: -.035em; margin-top: 9px; }
.section-heading>p:last-child { font-size: 14px; margin-top: 8px; }
.feature-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; }
.feature { border-top: 1px solid var(--line); padding-top: 25px; }
.feature-icon { height: 48px; width: 48px; display: grid; place-items: center; border: 1px solid #536b9d; border-radius: 14px; background: linear-gradient(145deg,#10283b,#201a3a); color: var(--cyan); margin-bottom: 18px; }
.feature:nth-child(even) .feature-icon { color: #b595f9; }
.feature-icon svg { width: 27px; height: 27px; }
.feature h3 { font-size: 18px; line-height: 1.4; letter-spacing: -.02em; font-weight: 600; }
.feature .feature-lead { color: #d5dfed; font-size: 13px; margin-top: 8px; }
.feature>p:last-child { font-size: 13px; line-height: 1.8; margin-top: 7px; }
.platform { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 0; }
.platform .eyebrow { font-size: 9px; color: #9cb0c9; }
.platform h2 { font-size: 24px; letter-spacing: -.03em; font-weight: 550; margin-top: 8px; }
.platform p:not(.eyebrow) { font-size: 13px; line-height: 1.8; margin-top: 9px; max-width: 480px; }
.source-note { display: flex; align-items: center; gap: 23px; padding-left: 44px; border-left: 1px solid var(--line); }
.source-note>svg { width: 32px; height: 32px; color: #adc0d9; }
.source-note h3 { font-size: 17px; line-height: 1.4; font-weight: 550; }
.release { display: flex; justify-content: space-between; gap: 45px; align-items: center; padding-top: 38px; }
.release>div { max-width: 770px; }
.release .eyebrow { font-size: 9px; color: #b0a0d2; }
.release h2 { font-size: 25px; line-height: 1.35; letter-spacing: -.03em; font-weight: 550; margin: 10px 0; }
.release p:not(.eyebrow) { font-size: 13px; line-height: 1.8; }
.release .button { flex-shrink: 0; font-size: 12px; }
.content-boundary { padding-top: 22px; padding-bottom: 34px; }
.content-boundary p { font-size: 11px; color: #a0adc1; line-height: 1.8; max-width: 1000px; }
.site-footer { padding: 28px 0; border-top: 1px solid var(--line); }
.footer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 23px; }
.footer-top>p { font-size: 12px; }.footer-top .brand-mark { width: 28px; height: 28px; font-size: 19px; border-radius: 8px; }.footer-top .brand strong { font-size: 17px; }.footer-top .brand strong span { font-size: 6px; margin-top: 5px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 22px; font-size: 11px; color: #b9c5d5; }
.footer-truth { font-size: 10px; color: #98a8be; line-height: 1.9; margin-top: 22px; max-width: 1100px; }

@media (max-width: 1200px) {
  .wrap { width: calc(100% - 64px); }.desktop-nav { gap: 20px; }.header-actions { gap: 12px; }.login { padding: 8px 16px; }.brand strong { font-size: 21px; }.brand-mark { width: 37px; height: 37px; }
  .cinema-hero { min-height: 930px; }.hero-copy { padding-top: 122px; }h1 { font-size: 60px; }.hero-lead { font-size: 16px; }.feature-grid { gap: 25px; }
}
@media (max-width: 1050px) {
  .desktop-nav,.header-actions { display: none; }.site-header { min-height: 88px; }.mobile-menu { display: block; }.mobile-menu summary { cursor: pointer; list-style: none; display: flex; gap: 12px; align-items: center; padding: 10px 16px; border: 1px solid #687796; border-radius: 9px; background: #0b1124cc; font-size: 13px; }.mobile-menu summary::-webkit-details-marker { display: none; }.mobile-menu summary span { color: var(--cyan); }.mobile-menu nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 14px; background: #111a2b; border: 1px solid #4d5f7c; border-radius: 12px; box-shadow: 0 20px 35px #0009; }.mobile-menu nav a { padding: 13px 14px; border-radius: 7px; font-size: 14px; }.mobile-menu nav a:hover { background: #26364e; }
  .cinema-hero { min-height: 0; height: calc(var(--scene-size) * .82 + 140px); }.scene-layer { top: 140px; }.hero-copy { padding-top: 117px; }h1 { font-size: clamp(38px,6.1vw,62px); }.hero-lead { font-size: 16px; max-width: 630px; }.demo-controls { top: calc(var(--scene-size) * .65 + 150px); }.demo-caption { top: calc(var(--scene-size) * .65 + 225px); }.static-notice { top: calc(var(--scene-size) * .65 + 150px); }
  .demo-app { padding: 20px; }.demo-body { grid-template-columns: 75px 1fr; gap: 16px; }.demo-sidebar>div { min-height: 50px; justify-content: center; padding: 10px 3px; }.demo-sidebar>div>span { display: none; }.demo-sidebar svg { width: 27px; height: 27px; }.demo-topbar>strong { font-size: 29px; }.demo-topbar { height: 49px; }.demo-topbar>strong>span { font-size: 7px; }.demo-profile,.demo-clock { font-size: 20px; }.demo-scene h2 { font-size: 33px; }.demo-eyebrow { font-size: 14px; }.epg-row { font-size: 21px; min-height: 67px; }.epg-row>strong { font-size: 20px; }.epg-times { font-size: 19px; }.landscape-copy strong { font-size: 32px; }.home-shortcuts { gap: 8px; }.home-shortcuts>span { font-size: 15px; }.live-card>strong { font-size: 24px; }.live-card>span { font-size: 21px; }.live-card>small { font-size: 16px; }.media-card>strong { font-size: 24px; }.media-card>small { font-size: 15px; }.poster>span { font-size: 20px; }.settings-list>div { font-size: 24px; }.settings-list strong { font-size: 21px; }
  .feature-grid { grid-template-columns: 1fr 1fr; gap: 32px; }.platform { gap: 35px; }.source-note { gap: 20px; padding-left: 30px; }.release { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 680px) {
  .wrap { width: calc(100% - 40px); }.site-header { min-height: 80px; }.brand strong { font-size: 21px; }.brand-mark { width: 35px; height: 35px; font-size: 24px; }.brand strong span { font-size: 7px; margin-top: 7px; }.mobile-menu nav { grid-template-columns: 1fr; }
  .cinema-hero { height: auto; padding-bottom: 28px; background: radial-gradient(ellipse at 0 35%,#49245f55,transparent 60%),radial-gradient(ellipse at 100% 40%,#173c5a66,transparent 60%),#090c15; }.hero-copy { padding-top: 115px; }.hero-copy .eyebrow { font-size: 8px; letter-spacing: .18em; }h1 { font-size: clamp(44px,12.8vw,68px); margin-top: 17px; line-height: 1.06; }h1 span { display: block; }.hero-lead { font-size: 15px; line-height: 1.75; margin-top: 21px; max-width: 400px; }.hero-actions { flex-direction: column; gap: 12px; margin-top: 25px; }.hero-actions .button { min-height: 51px; font-size: 14px; }
  .cinema-visual { position: relative; inset: auto; z-index: 1; width: calc(100% - 32px); aspect-ratio: 1.6; margin: 29px auto 0; overflow: clip; }.scene-layer { width: 175%; left: -40.225%; top: -84.6%; transform: none; }.scene-layer:after { background: linear-gradient(0deg,#06091066,transparent 8%,transparent 92%,#06091055); }
  .demo-controls { position: relative; top: auto; left: auto; transform: none; display: flex; flex-direction: column; gap: 3px; width: max-content; max-width: calc(100% - 40px); margin: 14px auto 0; padding: 7px 12px 4px; border-radius: 17px; }.transport { gap: 3px; }.transport button { min-height: 42px; min-width: 42px; }.transport .play-toggle { min-width: 90px; font-size: 13px; }.demo-scene-name { min-width: 85px; font-size: 12px; }.scene-picker { border-left: 0; padding: 0; gap: 5px; }.scene-picker button { width: 30px; height: 28px; }.demo-caption { position: relative; top: auto; left: auto; right: auto; font-size: 10px; padding: 0 18px; margin-top: 17px; }.caption-detail { font-size: 9px; }.static-notice { position: static; text-align: center; font-size: 11px; margin-top: 15px; padding: 0 20px; }
  .demo-app { padding: 18px; }.demo-topbar { height: 56px; gap: 12px; }.demo-topbar>strong { font-size: 35px; }.demo-topbar>strong>span { font-size: 8px; }.demo-preview-tag { display: none; }.demo-profile,.demo-clock { font-size: 24px; }.demo-profile svg { width: 26px; height: 26px; }.demo-body { grid-template-columns: 63px 1fr; height: 417px; gap: 15px; padding-top: 19px; }.demo-sidebar { gap: 16px; }.demo-sidebar>div { min-height: 51px; }.demo-sidebar svg { width: 32px; height: 32px; }.demo-eyebrow { font-size: 17px; }.demo-scene h2 { font-size: 40px; margin-bottom: 18px; }.home-panels { grid-template-columns: 1.4fr 1fr; height: 247px; }.home-feature .live-chip { font-size: 16px; }.landscape-copy strong { font-size: 40px; }.landscape-copy>small { font-size: 15px; }.landscape-copy>span { display: none; }.home-posters { grid-template-columns: 1fr; height: 209px; }.home-posters .poster-orbit { display: none; }.home-media h3 { font-size: 23px; }.poster>span { font-size: 27px; }.poster>small { font-size: 14px; }.home-shortcuts>span { font-size: 19px; padding: 10px 12px; }.home-shortcuts>span:last-child { display: none; }.home-shortcuts svg { width: 22px; height: 22px; }
  .live-cards { grid-template-columns: 1fr 1fr; gap: 20px; }.live-card-three { display: none; }.live-card { min-height: 263px; padding: 20px; }.channel-symbol { width: 54px; height: 54px; font-size: 31px; margin-bottom: 16px; }.live-card>strong { font-size: 31px; }.live-card>span { font-size: 27px; }.live-card>small { font-size: 21px; }.live-bottom { font-size: 19px; }
  .epg-times { grid-template-columns: 170px repeat(3,1fr); font-size: 25px; padding: 10px; }.epg-row { grid-template-columns: 170px 1.1fr 1fr; min-height: 89px; font-size: 29px; }.epg-row>strong { font-size: 24px; padding: 7px; }.epg-row>strong i { display: none; }.epg-row>span { padding: 7px 10px; }.epg-last { display: none; }.epg-heading>span { font-size: 23px; }.epg-footnote { font-size: 17px; margin-top: 13px; }
  .library-cards { grid-template-columns: 1fr 1fr; gap: 25px; }.media-third { display: none; }.media-card>.poster { height: 246px; padding: 18px; }.media-card>strong { font-size: 29px; margin-top: 10px; }.media-card>small { font-size: 20px; }.settings-list>div { font-size: 29px; min-height: 71px; padding: 12px; }.settings-list strong { font-size: 25px; }.settings-list>div>span>svg { display: none; }.settings-footnote { font-size: 18px; margin-top: 16px; }
  .features { padding-top: 36px; padding-bottom: 32px; }.section-heading { text-align: left; margin-bottom: 25px; }.section-heading .eyebrow { font-size: 8px; letter-spacing: .14em; }.section-heading h2 { font-size: 28px; line-height: 1.25; margin-top: 12px; }.section-heading>p:last-child { font-size: 13px; line-height: 1.7; margin-top: 12px; }.feature-grid { grid-template-columns: 1fr; gap: 25px; }.feature { display: grid; grid-template-columns: 45px 1fr; gap: 0 17px; padding-top: 23px; }.feature-icon { grid-row: 1/4; margin: 0; width: 45px; height: 45px; border-radius: 12px; }.feature-icon svg { width: 25px; height: 25px; }.feature h3,.feature>p { grid-column: 2; }.feature h3 { font-size: 17px; }.feature .feature-lead { font-size: 12px; margin-top: 5px; }.feature>p:last-child { font-size: 12px; line-height: 1.85; margin-top: 6px; }
  .platform { grid-template-columns: 1fr; gap: 24px; padding: 28px 0; }.platform h2 { font-size: 24px; }.platform p:not(.eyebrow) { font-size: 12px; }.source-note { border-left: 0; border-top: 1px solid var(--line); padding: 23px 0 0; align-items: flex-start; gap: 17px; }.source-note>svg { width: 27px; height: 27px; margin-top: 4px; }.source-note h3 { font-size: 15px; }.release { padding-top: 28px; }.release h2 { font-size: 24px; }.release p:not(.eyebrow) { font-size: 12px; line-height: 1.9; }.release .button { width: 100%; min-height: 49px; font-size: 13px; }.content-boundary { padding-bottom: 28px; }.site-footer { padding-top: 24px; }.footer-top { align-items: flex-start; gap: 20px; }.footer-top>p { text-align: right; max-width: 105px; font-size: 10px; }.site-footer nav { gap: 12px 18px; }.footer-truth { font-size: 10px; }
}
@media (max-width: 1050px) {
  .scene-epg .demo-eyebrow { display: none; }
}
@media (max-width: 680px) {
  .demo-body { height: 428px; padding-top: 16px; }
  .live-card { min-height: 240px; padding: 16px; }
  .channel-symbol { width: 44px; height: 44px; font-size: 28px; margin-bottom: 12px; }
  .live-card>strong { font-size: 29px; margin-bottom: 10px; }
  .live-card>span { font-size: 26px; line-height: 1.3; }
  .live-card>small { font-size: 20px; padding-top: 10px; }
  .live-bottom { margin-top: 16px; }
  .epg-heading h2 { font-size: 38px; margin-bottom: 12px; }
  .epg-row { min-height: 80px; font-size: 32px; }
  .epg-row>strong { font-size: 32px; }
  .epg-times { font-size: 31px; }
  .epg-footnote { display: none; }
  .media-card>.poster { height: 230px; }
  .settings-list>div { min-height: 66px; }
  .settings-footnote { font-size: 16px; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*:before,*:after { transition: none !important; animation: none !important; }
}

/* Remote flow: a single moving focus, stable content and a right-hand settings panel. */
.demo-app { position: relative; --demo-accent: #80e3ed; overflow: hidden; }
[data-accent=violet] .demo-app { --demo-accent: #bd9afa; }
.demo-focus { position: absolute; top: 0; left: 0; z-index: 8; pointer-events: none; border: 3px solid var(--demo-accent); border-radius: 9px; box-shadow: 0 0 0 2px #080f1c99; }
.demo-focus>i { display: block; position: absolute; inset: 0; background: var(--demo-accent); opacity: 0; border-radius: 5px; }
.demo-sidebar .is-demo-focus { background: #263d53; color: #fff; }
.home-feature { border-color: #37556b; }
.live-card-one { position: relative; overflow: hidden; }
.live-card-one.is-demo-focus { background: linear-gradient(150deg,#1f4356,#132539); }
.live-preview { position: absolute; top: 18px; right: 12px; width: 80px; height: 48px; border-radius: 5px; overflow: hidden; background: linear-gradient(#334e6c,#7f9cab); }
.live-preview i { position: absolute; inset: 14px -20px -10px; background: #1d3a4c; clip-path: polygon(0 100%,30% 0,53% 70%,75% 20%,100% 100%); }
.live-preview b { position: absolute; right: 4px; top: 4px; font-size: 8px; letter-spacing: .1em; color: #f1f9ff; }
.epg-row>span { position: relative; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
.epg-row>span>small { font-size: 12px; color: #c3dbe7; }
.epg-selected { background: #173443; box-shadow: inset 3px 0 var(--demo-accent); }
.epg-selected .is-demo-focus { background: #224957; color: #fff; }
.media-card.is-demo-focus>.poster { border-color: var(--demo-accent); }
.settings-panel { position: absolute; z-index: 6; top: 76px; right: 15px; bottom: 15px; width: 425px; padding: 27px 23px; border: 1px solid #49617b; border-radius: 12px; background: #102034; box-shadow: -18px 0 50px #050b1699; transform: translateX(105%); visibility: hidden; }
[data-scene=settings] .settings-panel { visibility: visible; }
[data-overlay=true] .settings-panel { transform: translateX(0); }
.settings-panel h2 { line-height: 1.2; font-size: 31px; font-weight: 550; margin: 5px 0 7px; letter-spacing: -.03em; }
.settings-subtitle { font-size: 17px; color: #bed1e1; margin-bottom: 23px; }
.settings-panel .settings-list>div { min-height: 63px; padding: 12px 13px; font-size: 20px; }
.settings-panel .settings-list strong { font-size: 18px; }
.settings-color { position: relative; }
[data-accent=cyan] .color-cyan,[data-accent=violet] .color-violet { outline: 2px solid white; outline-offset: 3px; }
[data-accent=violet] .color-label-cyan { display: none; }
[data-accent=violet] .color-label-violet { display: block; }
[data-playback=static] .demo-focus { display: none; }
@media(max-width:1050px) {
 .settings-panel { width: 470px; }.settings-panel h2 { font-size: 35px; }
 .settings-panel .settings-list>div { font-size: 25px; }.settings-panel .settings-list strong { font-size: 23px; }
}
@media(max-width:680px) {
 .demo-focus { border-width: 4px; }
 .epg-row>span>small { font-size: 19px; line-height: 1.15; }.epg-row { min-height: 84px; line-height: 1.16; }.epg-row>span { padding: 6px 10px; gap: 3px; }.epg-times { line-height: 1.35; }
 .settings-panel { top: 78px; right: 12px; bottom: 12px; width: 595px; padding: 16px 25px; }
 .settings-panel h2 { font-size: 40px; }.settings-subtitle { font-size: 25px; margin-bottom: 22px; }
 .settings-panel .settings-list>div { font-size: 30px; min-height: 68px; }
 .settings-panel .settings-list strong { font-size: 27px; }.settings-panel .settings-footnote { font-size: 21px; line-height: 1.4; }
 .live-preview { width: 100px; height: 55px; }.live-preview b { font-size: 12px; }
}

/* Hero polish: keep the room fixed; enlarge only the device and projected UI. */
.tv-device { transform-box: view-box; transform-origin: 525px 480px; transform: scale(1.2); }
.tv-overlay { z-index: 1; }
.tv-wall-light { position: absolute; z-index: 0; left: 11%; top: 20%; width: 80%; height: 54%; opacity: .9; pointer-events: none; mask-image: radial-gradient(ellipse 50% 50% at 50% 50%,#000 65%,transparent 100%); }
.scene-light { position: absolute; inset: 0; opacity: 0; }
.light-home { opacity: 1; background: radial-gradient(ellipse at 25% 45%,#36bdcc70, #267d9f30 38%,transparent 67%),radial-gradient(ellipse at 78% 46%,#9660d776,#643e9636 40%,transparent 68%); }
.light-live { background: radial-gradient(ellipse at 25% 45%,#2278d080,#25699130 40%,transparent 68%),radial-gradient(ellipse at 78% 46%,#397acc78,#244f8a30 40%,transparent 68%); }
.light-epg { background: radial-gradient(ellipse at 25% 45%,#34bac56c,#24678830 40%,transparent 68%),radial-gradient(ellipse at 78% 46%,#3b80bd78,#28557630 40%,transparent 68%); }
.light-library { background: radial-gradient(ellipse at 25% 45%,#8256c580,#513a8d30 40%,transparent 68%),radial-gradient(ellipse at 78% 46%,#a04d9c78,#673c8c30 40%,transparent 68%); }
.light-settings { background: radial-gradient(ellipse at 25% 45%,#477bd574,#27537830 40%,transparent 68%),radial-gradient(ellipse at 78% 46%,#8256c44c,#4a3e7c30 40%,transparent 68%); }
.hero-copy { text-align: left; padding-top: 124px; }
.hero-copy .eyebrow { font-size: 9px; letter-spacing: .19em; color: #afbdce; }
.hero-copy h1 { max-width: 640px; font-size: clamp(32px,2.6vw,44px); line-height: 1.12; font-weight: 650; letter-spacing: -.035em; }
.hero-copy h1 span { background-image: linear-gradient(105deg,#93d7df,#ada4da); }
.hero-lead { max-width: 440px; margin: 11px 0 0; font-size: 14px; line-height: 1.6; color: #bdc9da; }
.hero-actions { justify-content: flex-start; gap: 10px; margin-top: 15px; }
.hero-actions .button { min-height: 39px; padding: 9px 15px; border-radius: 7px; font-size: 12px; gap: 8px; }
.hero-actions .button svg { width: 15px; height: 15px; }
.hero-actions .primary { background: linear-gradient(110deg,#69c9d6,#a39bd2); }
.demo-controls { top: calc(var(--scene-size) * .69 + 20px); }
.demo-caption { top: calc(var(--scene-size) * .69 + 95px); }
.static-notice { top: calc(var(--scene-size) * .69 + 20px); }
@media(max-width:1050px) and (min-width:681px) {
 .hero-copy { padding-top: 117px; }.hero-copy h1 { font-size: 34px; }
 .cinema-hero { height: calc(var(--scene-size) * .85 + 180px); }
 .demo-controls { top: calc(var(--scene-size) * .69 + 150px); }
 .demo-caption { top: calc(var(--scene-size) * .69 + 225px); }
 .static-notice { top: calc(var(--scene-size) * .69 + 150px); }
}
@media(max-width:680px) {
 .tv-device { transform: scale(1); }
 .tv-wall-light { opacity: .26; }
 .hero-copy { padding-top: 105px; }
 .hero-copy .eyebrow { font-size: 8px; }
 .hero-copy h1 { font-size: clamp(28px,7.5vw,32px); margin-top: 12px; line-height: 1.15; }
 .hero-copy h1 span { display: inline; }
 .hero-lead { font-size: 13px; line-height: 1.65; margin-top: 12px; }
 .hero-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
 .hero-actions .button { min-height: 42px; padding: 8px 10px; font-size: 12px; gap: 6px; }
 .cinema-visual { margin-top: 24px; }
 .demo-controls,.demo-caption { top: auto; }
 .static-notice { top: auto; }
}
@media(prefers-reduced-motion:reduce) { .tv-wall-light { opacity: .27; } }

/* 006: only the narrow layout changes; the desktop composition above stays intact. */
.cinema-room { display: contents; }
@media (max-width:680px) {
 .site-header { min-height:72px; }
 .mobile-menu summary { min-height:44px; }
 .hero-copy { padding-top:93px; }
 .hero-actions { margin-top:14px; }
 .hero-actions .button { min-height:44px; }
 .cinema-hero { padding-bottom:16px; }
 .cinema-visual { width:calc(100% - 8px);aspect-ratio:1.56;margin-top:20px; }
 .scene-layer { width:176.5%;left:-40.49072265625%;top:-79.065625%; }
 .scene-layer:after { background:linear-gradient(0deg,#06091070,transparent 5%,transparent 95%,#06091060); }
 /* Uniformly map a smaller logical canvas through the original homography. */
 .tv-projection { width:720px;height:425.454545px;transform:matrix3d(0.62219416386083,-0.0045173961840629,0,-3.5072951739618e-06,0,0.62115384615385,0,0,0,0,1,0,250,319,0,1) scale(1.22222222222222); }
 .demo-app { padding:16px; }
 .demo-topbar { height:48px;padding-bottom:8px;gap:14px; }
 .demo-topbar>strong { font-size:28px; }
 .demo-topbar>strong>span { font-size:5px;margin-top:4px; }
 .demo-profile,.demo-clock { font-size:18px; }
 .demo-profile svg { width:22px;height:22px; }
 .demo-body { height:345px;padding-top:12px;grid-template-columns:54px 1fr;gap:14px; }
 .demo-sidebar { gap:12px; }
 .demo-sidebar>div { min-height:44px;padding:8px 3px; }
 .demo-sidebar svg { width:28px;height:28px; }
 .demo-scene>.demo-eyebrow { display:none; }
 .demo-scene h2 { font-size:35px;margin-bottom:12px;line-height:1.2; }
 .home-panels { height:210px;gap:14px;grid-template-columns:1.3fr 1fr; }
 .landscape-copy { bottom:14px;left:14px; }
 .landscape-copy strong { font-size:32px; }
 .landscape-copy>small { font-size:13px; }
 .home-feature .live-chip { font-size:13px; }
 .home-media h3 { font-size:24px;line-height:1.2;margin-bottom:10px; }
 .home-posters { height:168px; }
 .poster>span { font-size:23px; }
 .poster>small { font-size:12px; }
 .home-shortcuts { gap:8px;margin-top:12px; }
 .home-shortcuts>span { font-size:16px;padding:8px 10px; }
 .home-shortcuts svg { width:19px;height:19px; }
 .live-cards { grid-template-columns:1fr; }
 .live-card-two,.live-card-three { display:none; }
 .live-card { min-height:214px;padding:16px; }
 .channel-symbol { width:36px;height:36px;font-size:24px;margin-bottom:10px; }
 .live-card>strong { font-size:28px;margin-bottom:8px; }
 .live-card>span { font-size:26px;line-height:1.25; }
 .live-card>small { font-size:18px;padding-top:8px; }
 .live-preview { width:160px;height:90px;top:16px;right:16px; }
 .live-preview b { font-size:12px; }
 .live-bottom { font-size:14px;margin-top:16px; }
 .epg-heading>span { font-size:20px; }
 .epg-times { grid-template-columns:140px repeat(3,1fr);font-size:22px;padding:8px 10px; }
 .epg-row { grid-template-columns:140px 1.1fr 1fr;min-height:76px;font-size:26px;line-height:1.16; }
 .epg-selected { min-height:106px; }
 .epg-row>strong { font-size:24px; }
 .epg-row>span>small { font-size:18px; }
 .epg-row:nth-child(n+4) { display:none; }
 .library-cards { gap:16px; }
 .media-card>.poster { height:210px;padding:15px; }
 .media-card>strong { font-size:26px;margin-top:8px; }
 .media-card>small { font-size:16px; }
 .settings-panel { top:60px;right:10px;bottom:10px;width:540px;padding:18px; }
 .settings-panel .demo-eyebrow { font-size:11px;margin-bottom:6px; }
 .settings-panel h2 { font-size:32px;margin:5px 0 14px; }
 .settings-subtitle { display:none; }
 .settings-panel .settings-list>div { font-size:24px;min-height:56px;padding:10px 12px; }
 .settings-panel .settings-list strong { font-size:22px; }
 .settings-panel .settings-footnote { font-size:14px;line-height:1.4;margin-top:10px; }
 .demo-controls { width:max-content;max-width:calc(100% - 28px);padding:0;margin-top:8px;gap:0;border:0;border-radius:0;background:transparent;box-shadow:none; }
 .transport { gap:4px;padding:0 2px;border:1px solid #656f8d;border-radius:24px;background:#090e1ee8; }
 .transport button { min-width:44px;min-height:44px; }
 .transport .play-toggle { min-width:90px; }
 .demo-scene-name { min-width:85px;margin-left:5px; }
 .scene-picker { gap:0; }
 .scene-picker button { width:44px;height:44px; }
 .demo-caption { margin-top:6px;font-size:11px;line-height:1.4; }
 .caption-detail { font-size:10px;line-height:1.5; }
}