/* Site tokens. The TV palette is shared by every illustrative interface. */
:root {
  color-scheme: dark;
  --bg: #0e0f11;
  --surface: #1c1d20;
  --surface-raised: #2a2b2e;
  --text: #f4f5f8;
  --muted: #a4a6b0;
  --subtle: #a4a6b0;
  --selected: #dce6f5;
  --violet: #7c5cff;
  --cyan: #22d3ee;
  --pink: #f43f9e;
  --amber: #fbbf24;
  --green: #8cdbb0;
  --line: #ffffff14;
  --radius: 28px;
  --pill: 999px;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;
  --space-7: 8rem;
  --body: 1rem;
  --small: .75rem;
  --heading: clamp(2.35rem, 4.4vw, 4.2rem);
  --page: min(1200px, calc(100% - 96px));
  --accent: var(--cyan);
  --accent-end: var(--green);
  --accent-ink: var(--cyan);
  --halo-opacity: .38;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  background: var(--bg);
  color: var(--text);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; font-size: var(--body); line-height: 1.6; }
::selection { background: var(--violet); color: var(--text); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.06; font-weight: 550; letter-spacing: -.055em; text-wrap: balance; }
h2 { font-size: var(--heading); }
h2 span { color: var(--muted); }
p { text-wrap: pretty; }
.muted { color: var(--muted); }
.skip { position: fixed; top: -100px; left: var(--space-2); z-index: 100; background: var(--selected); color: var(--bg); padding: var(--space-2); border-radius: var(--radius); }
.skip:focus { top: var(--space-2); }
.site-header { width: var(--page); height: 90px; margin: auto; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: var(--bg); }
.brand { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 1.65rem; font-weight: 650; letter-spacing: -.06em; line-height: 1; min-height: 44px; }
.brand-caption { font-size: .55rem; line-height: 1.4; font-weight: 500; letter-spacing: .13em; white-space: nowrap; margin-left: var(--space-2); color: var(--muted); padding-left: var(--space-2); border-left: 1px solid var(--line); }
.nav-links { display: flex; align-items: center; gap: var(--space-4); }
.nav-links > a { font-size: .8rem; color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; }
.nav-links > a:hover, .footer-links a:hover { color: var(--text); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); border-radius: var(--pill); background: var(--selected); color: var(--bg); padding: .85rem 1.6rem; font-size: .85rem; font-weight: 600; border: 1px solid transparent; min-height: 48px; transition: transform 150ms, background 150ms; }
.button:hover { background: var(--text); transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.nav-links > .button-small { color: var(--bg); padding: .55rem 1.2rem; }
.button-outline { background: transparent; color: var(--text); border-color: #ffffff38; }
.button-outline:hover { background: var(--surface-raised); }
.menu-button { display: none; }
.eyebrow { font-size: .64rem; letter-spacing: .18em; font-weight: 600; line-height: 1.6; color: var(--muted); display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-3); }
.status-dot { width: 6px; height: 6px; border-radius: var(--pill); background: var(--cyan); display: inline-block; box-shadow: 0 0 12px #22d3ee66; flex-shrink: 0; }
.actions { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }
.text-link { font-size: .8rem; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.text-link:hover { color: var(--cyan); }
.hero { position: relative; overflow: clip; }
.hero-sticky { position: relative; padding-top: var(--space-5); min-height: 850px; }
.hero-copy { position: relative; text-align: center; z-index: 3; }
.hero-copy .eyebrow { justify-content: center; margin-bottom: var(--space-2); }
h1 { font-size: clamp(3.7rem, 6.5vw, 6.2rem); letter-spacing: -.065em; line-height: 1.05; }
h1 span { background: linear-gradient(100deg, #dce6f5 3%, #bba9ff 52%, #7c5cff 100%); background-clip: text; color: transparent; }
.hero-copy > p:not(.eyebrow) { font-size: .95rem; color: var(--muted); margin-top: var(--space-3); line-height: 1.65; }
.hero-copy .actions { margin-top: var(--space-3); }
.mobile-break { display: none; }
.hero-stage { position: relative; height: clamp(350px, 38vw, 540px); width: 100%; perspective: 1400px; display: grid; place-items: center; isolation: isolate; }
.orbit { width: min(1000px, 90vw); aspect-ratio: 1; border: 1px solid #7c5cff24; border-radius: 50%; position: absolute; pointer-events: none; transform: rotateX(70deg) rotateZ(-25deg); box-shadow: 0 0 100px #7c5cff0d, inset 0 0 80px #7c5cff0a; z-index: -1; }
.orbit-two { width: min(1250px, 105vw); border-color: #22d3ee0c; transform: rotateX(70deg) rotateZ(20deg); }
.tv-stack { position: relative; width: min(760px, 72vw); aspect-ratio: 16 / 9; container-type: inline-size; transform-style: preserve-3d; transform: rotateX(13deg) rotateY(-16deg) rotateZ(4deg); }
.tv-layer { position: absolute; inset: 0; border-radius: var(--radius); transform-style: preserve-3d; pointer-events: none; }
.backdrop-layer { background: var(--bg); border: 1px solid #ffffff32; box-shadow: 20px 35px 65px #0009, -25px 0 80px #7c5cff20, 30px 0 90px #22d3ee14; }
.ambient { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: radial-gradient(ellipse at 65% 20%, #7c5cff26, transparent 60%), linear-gradient(145deg, var(--surface), var(--bg) 70%); }
.tv-topbar { position: absolute; top: 6%; left: 5%; right: 5%; display: flex; align-items: center; gap: 1.6cqw; font-size: 1.65cqw; }
.avatar { display: grid; place-items: center; width: 4cqw; height: 4cqw; font-size: 2.5cqw; border-radius: var(--pill); background: linear-gradient(145deg, #9bb5fc, #7452be); }
.tv-pills { display: flex; align-items: center; padding: .5cqw; background: var(--surface-raised); border-radius: var(--pill); gap: .6cqw; }
.tv-pills > * { padding: .4cqw 1.5cqw; font-weight: 500; }
.tv-pills b { border-radius: var(--pill); background: var(--selected); color: var(--bg); }
.tools span { padding: .4cqw .8cqw; }
.tv-topbar time { margin-left: auto; color: var(--muted); }
.tv-pick { position: absolute; top: 21%; left: 5%; right: 5%; height: 39%; border-radius: 2cqw; overflow: hidden; }
.art { position: relative; isolation: isolate; overflow: hidden; background-color: var(--surface); }
.tv-pick.art { position: absolute; }
.art-violet { background: radial-gradient(ellipse at 80% 30%, #9b6df7 0%, #503ca2 28%, #23173f 60%, #15111d); }
.art-cyan { background: radial-gradient(ellipse at 85% 0%, #8ce6df, #1b6d7c 35%, #102f4b 68%, #111c28); }
.art-amber { background: radial-gradient(ellipse at 75% 15%, #ffdd8d, #bd7138 33%, #704445 58%, #302334); }
.art-pink { background: radial-gradient(ellipse at 90% 10%, #f5a7c2, #af3d7e 35%, #552a67 62%, #241c38); }
.art-green { background: radial-gradient(ellipse at 70% 10%, #c7d8a1, #527c69 35%, #1c4d49 68%, #112b30); }
.art::before { content: ""; position: absolute; width: 75%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #ffffff42; box-shadow: 0 0 0 14px #ffffff06, 0 0 0 28px #ffffff06, 0 0 0 42px #ffffff06; right: -15%; top: -15%; z-index: -1; transform: rotate(-35deg) scaleX(.7); }
.art::after { content: ""; position: absolute; width: 100%; height: 65%; background: linear-gradient(145deg, #ffffff1c, #ffffff00); border-top: 1px solid #ffffff25; border-radius: 50%; transform: rotate(-35deg); right: -30%; bottom: -30%; z-index: -1; }
.art-orb { position: absolute; height: 115%; aspect-ratio: 1; right: 3%; top: -10%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #f4d6ff55, #a98ce722 35%, #1c143a99 65%); border: 1px solid #d5b1ff33; box-shadow: inset -20px -20px 35px #120a3499, 0 0 50px #c6a0ff20; z-index: -1; }
.pick-text { position: absolute; top: 12%; left: 4%; display: flex; flex-direction: column; align-items: flex-start; gap: .8cqw; }
.pick-text small { font-size: .75cqw; letter-spacing: .2em; color: #e3d9fa; }
.pick-text strong { font-size: 3.6cqw; line-height: 1; font-weight: 500; letter-spacing: -.05em; }
.pick-text > span { font-size: .85cqw; color: #d4c9e7; }
.mini-button { padding: .6em 1.2em; border-radius: var(--pill); display: inline-flex; align-items: center; background: var(--selected); color: var(--bg); font-size: .8cqw; font-weight: 600; }
.tiny-dots { position: absolute; bottom: 5%; right: 4%; font-size: .9cqw; letter-spacing: .3em; color: var(--selected); }
.tv-row { position: absolute; top: 64%; left: 5%; right: 5%; }
.tv-row > small, .tv-apps > small { display: block; font-size: 1cqw; margin-bottom: 1cqw; color: var(--muted); }
.mini-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8cqw; }
.mini-cards > div { aspect-ratio: 2.3; border-radius: 1.4cqw; display: flex; align-items: flex-end; padding: 1cqw; }
.mini-cards span { font-size: 1.1cqw; font-weight: 600; letter-spacing: -.02em; }
.tv-apps { position: absolute; top: 85%; left: 5%; right: 5%; }
.tv-apps > small { margin-bottom: .6cqw; }
.app-icons { display: flex; gap: 2.3cqw; }
.app-icons i { width: 3.4cqw; height: 3.4cqw; font-size: 1.5cqw; font-style: normal; display: grid; place-items: center; border-radius: var(--pill); background: #5376a4; color: var(--text); }
.app-icons i:nth-child(2n) { background: #7960a8; }.app-icons i:nth-child(3n) { background: #a76256; }.app-icons i:nth-child(4n) { background: #437671; }
.hero-focus { position: absolute; top: 68%; left: 4.5%; width: 22.3%; height: 16.7%; border-radius: 1.7cqw; border: 2px solid #dce6f5bb; box-shadow: 0 0 20px #c6b1ff44, 0 0 0 3px #ffffff0d; }
.stack-labels { position: absolute; bottom: 7%; width: var(--page); max-width: 850px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); text-align: center; pointer-events: none; }
.layer-label { padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--pill); background: var(--bg); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); opacity: 0; white-space: nowrap; }
.layer-label::before { content: ""; width: 24px; height: 1px; background: var(--violet); display: inline-block; vertical-align: middle; margin-right: var(--space-1); }
.hero-bottom { width: var(--page); display: flex; align-items: center; justify-content: space-between; margin: auto; position: relative; z-index: 3; padding-bottom: var(--space-3); font-size: .55rem; letter-spacing: .13em; color: var(--subtle); }
.scroll-cue { color: var(--muted); letter-spacing: .02em; font-size: .65rem; }.scroll-cue span { margin-left: var(--space-2); }
.feature { width: var(--page); margin: auto; padding: var(--space-7) 0; border-top: 1px solid var(--line); position: relative; isolation: isolate; --progress: 0; }
.home-feature { --accent: var(--cyan); --accent-end: var(--green); --accent-ink: var(--cyan); }
.picks-feature { --accent: var(--violet); --accent-end: var(--pink); --accent-ink: #c1b1ff; }
.channels-feature { --accent: var(--pink); --accent-end: var(--amber); --accent-ink: #ff8dc8; }
.connections-feature { --accent: var(--amber); --accent-end: var(--green); --accent-ink: var(--amber); }
.live-feature { --accent: var(--pink); --accent-end: var(--cyan); --accent-ink: #ff8dc8; }
.privacy-feature { --accent: var(--green); --accent-end: var(--cyan); --accent-ink: var(--green); }
.hardware-feature { --accent: var(--cyan); --accent-end: var(--violet); --accent-ink: var(--cyan); }
.download-feature { --accent: var(--violet); --accent-end: var(--pink); --accent-ink: #c1b1ff; }
.feature .eyebrow { color: var(--accent-ink); }
.feature h2 span { color: var(--accent-ink); background: linear-gradient(110deg, var(--accent-ink), var(--accent-end)); background-clip: text; -webkit-text-fill-color: transparent; }
/* Decorative halos live in their own clipped plane, never over the copy. */
.feature-halo { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; }
.feature-halo::before { content: ""; position: absolute; width: min(90%, 760px); aspect-ratio: 1; left: 5%; top: 20%; border-radius: 50%; background: radial-gradient(ellipse, transparent 38%, color-mix(in srgb, var(--accent) 26%, transparent) 52%, transparent 70%), conic-gradient(from 30deg, transparent, color-mix(in srgb, var(--accent) 20%, transparent), transparent, color-mix(in srgb, var(--accent-end) 20%, transparent), transparent); opacity: var(--halo-opacity); transform: rotate(-20deg) scale(.85); }
.feature-halo::before { mask-image: radial-gradient(circle, #000 40%, transparent 70%); }
.split .feature-halo::before { width: 60%; left: 42%; top: 5%; }
.channels-feature .feature-halo::before { left: -2%; }
.feature-halo::after { content: ""; position: absolute; width: min(65%, 520px); aspect-ratio: 1; left: 18%; top: 28%; border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent); border-bottom-color: var(--accent-end); border-radius: 50%; opacity: var(--halo-opacity); transform: rotateX(45deg) rotate(-25deg); }
.split .feature-halo::after { left: 50%; top: 10%; width: 45%; }
.channels-feature .feature-halo::after { left: 3%; }
.halo-divider { position: absolute; width: min(36%, 280px); aspect-ratio: 1; top: 0; right: 8%; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 50%; transform: translateY(-50%) rotateX(65deg); pointer-events: none; z-index: -1; box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 0 32px color-mix(in srgb, var(--accent) 3%, transparent); }
.section-heading { text-align: center; max-width: 850px; margin: 0 auto var(--space-5); }
.section-heading .eyebrow { justify-content: center; }
.section-heading > p:not(.eyebrow), .feature-copy > p:not(.eyebrow) { color: var(--muted); font-size: .95rem; line-height: 1.8; margin-top: var(--space-3); }
.demo-panel { background: linear-gradient(145deg, #202126, #151619); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: var(--radius); box-shadow: 0 24px 64px #0003, 0 0 48px color-mix(in srgb, var(--accent) 12%, transparent); }
.channel-a, .program.current, .library-posters > :first-child { border: 1px solid var(--accent); box-shadow: inset 0 0 22px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent); }
.carousel-demo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 32px color-mix(in srgb, var(--accent) 22%, transparent); pointer-events: none; }
.privacy-feature .privacy-ring { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 0 70px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 0 50px color-mix(in srgb, var(--accent) 10%, transparent); }
.privacy-feature .shield { stroke: var(--accent-ink); filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 40%, transparent)); }
.privacy-facts > div > span { color: var(--accent-ink); }
.home-demo { padding: var(--space-4); max-width: 1000px; margin: auto; }
.demo-topline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: .75rem; margin-bottom: var(--space-4); }.demo-topline > span:first-child { display: inline-flex; align-items: center; gap: var(--space-1); }
.mini-halo { display: inline-block; width: 20px; height: 14px; border: 3px solid var(--violet); border-right-color: var(--cyan); border-radius: 50%; transform: rotate(-30deg); }
.home-cards { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.poster { border-radius: 22px; aspect-ratio: 1.4; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-3); }
.poster-kicker { font-size: .46rem; letter-spacing: .15em; margin-bottom: auto; color: #f4f5f8cc; }
.poster strong { font-size: clamp(1.2rem, 3.4vw, 3rem); line-height: .95; letter-spacing: -.055em; font-weight: 550; margin-top: var(--space-3); }
.poster small { font-size: .6rem; margin-top: var(--space-2); color: #f4f5f8cc; }
.moving-focus { position: absolute; top: 0; bottom: 0; left: 0; width: calc((100% - 48px) / 3); border-radius: 22px; border: 2px solid var(--selected); box-shadow: inset 0 0 20px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent); pointer-events: none; }
.home-demo-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: .7rem; color: var(--muted); }
.remote-hint { display: flex; align-items: center; gap: 6px; }.remote-hint span { margin-left: var(--space-1); }kbd { background: var(--surface-raised); border: 1px solid #ffffff10; border-radius: 6px; font: inherit; min-width: 26px; height: 26px; display: grid; place-items: center; font-size: .6rem; }
.feature-notes { display: flex; justify-content: center; gap: var(--space-5); margin-top: var(--space-4); color: var(--muted); font-size: .7rem; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: var(--space-6); }
.split > * { min-width: 0; }
.hardware-visual { overflow: clip; }
.feature-copy { max-width: 460px; }.feature-copy .detail-note { font-size: .7rem!important; border-left: 2px solid var(--violet); padding-left: var(--space-2); margin-top: var(--space-4)!important; }
.carousel-demo { position: relative; overflow: hidden; }
.carousel-track { display: grid; }
.carousel-slide { aspect-ratio: 1.25; }
html:not(.motion) .carousel-dots { display: none; }
.carousel-slide .art-orb { height: 85%; top: -5%; right: -35%; }.slide-copy { position: absolute; inset: auto var(--space-4) var(--space-5); }.slide-copy small { font-size: .55rem; letter-spacing: .16em; }.slide-copy h3 { font-size: clamp(2rem, 4vw, 3.5rem); margin-top: var(--space-2); }.slide-copy p { font-size: .65rem; margin-top: var(--space-2); color: #e1d3ed; }.slide-copy .mini-button { font-size: .65rem; margin-top: var(--space-3); }.carousel-dots { position: absolute; bottom: var(--space-3); right: var(--space-4); display: flex; gap: 6px; }.carousel-dots i { width: 5px; height: 5px; border-radius: var(--pill); background: #ffffff40; }.carousel-dots i:first-child { background: var(--text); width: 18px; }
.channel-demo { padding: var(--space-4); }.channel-rows { display: grid; gap: 12px; position: relative; }.channel-row { display: flex; align-items: center; gap: var(--space-2); background: var(--surface-raised); border: 1px solid #ffffff0a; border-radius: 16px; padding: var(--space-2); height: 80px; }.channel-row strong { display: block; font-size: .8rem; font-weight: 500; }.channel-row small { color: var(--muted); font-size: .6rem; }.drag-handle { color: var(--subtle); font-size: 1.3rem; }.row-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }.violet { background: #7c5cff30; color: #c1b1ff; }.cyan { background: #22d3ee25; color: var(--cyan); }.amber { background: #fbbf2420; color: var(--amber); }.toggle { width: 28px; height: 16px; border-radius: var(--pill); margin-left: auto; background: #747682; position: relative; flex-shrink: 0; }.toggle::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--selected); position: absolute; top: 2px; left: 2px; }.toggle.on { background: var(--violet); }.toggle.on::after { transform: translateX(12px); }.saved-note { margin-top: var(--space-4); font-size: .65rem; color: var(--muted); display: flex; align-items: center; gap: var(--space-1); }.inline-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-4); }.inline-tags span { font-size: .65rem; color: var(--muted); border: 1px solid var(--line); border-radius: var(--pill); padding: .35rem .9rem; }
.connection-diagram { display: grid; grid-template-columns: 150px 1fr 380px 1fr 150px; align-items: center; gap: var(--space-2); margin-top: var(--space-6); }.provider { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-4) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.provider strong { font-size: 1.1rem; font-weight: 500; }.provider small { color: var(--muted); font-size: .6rem; }.connection-wire { position: relative; height: 1px; background: linear-gradient(90deg, #fbbf2480, #7c5cff80); }.wire-right { background: linear-gradient(90deg, #7c5cff80, #22d3ee80); }.connection-wire span { position: absolute; width: 6px; height: 6px; top: -2px; left: 45%; background: var(--selected); border-radius: var(--pill); box-shadow: 0 0 15px var(--violet); }.library-tv { padding: var(--space-3); }.library-tv .demo-topline { margin-bottom: var(--space-3); }.library-posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.library-posters > div { aspect-ratio: .8; border-radius: 12px; padding: 12px; display: flex; align-items: flex-end; font-size: 1.1rem; line-height: 1; letter-spacing: -.04em; font-weight: 600; }.library-tv > small { display: block; font-size: .55rem; color: var(--muted); margin-top: var(--space-2); }.diagram-caption { font-size: .7rem; color: var(--muted); text-align: center; margin-top: var(--space-4); }
.live-badge { display: inline-flex; align-items: center; gap: var(--space-1); border: 1px solid #f43f9e44; border-radius: var(--pill); padding: .4rem .8rem; font-size: .55rem; letter-spacing: .12em; margin-top: var(--space-4); color: #f5a9cf; }.live-badge .status-dot { background: var(--pink); box-shadow: 0 0 10px #f43f9e66; }.epg { padding: var(--space-4); overflow: hidden; }.epg .demo-topline { margin-bottom: var(--space-3); }.epg-times { display: flex; justify-content: space-between; padding-left: 72px; color: var(--muted); font-size: .55rem; margin-bottom: var(--space-2); }.epg-body { position: relative; }.epg-row { display: grid; grid-template-columns: 58px 1.4fr 1fr; gap: 8px; margin-bottom: 8px; }.epg-row:nth-child(2) { grid-template-columns: 58px 1fr 1.4fr; }.station { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; font-size: 1.6rem; line-height: 1; }.station small { font-size: .4rem; letter-spacing: .14em; margin-top: 6px; }.program { min-width: 0; padding: 18px 12px; border-radius: 10px; background: var(--surface-raised); font-size: .65rem; display: flex; flex-direction: column; justify-content: center; }.program small { font-size: .5rem; color: var(--muted); margin-top: 6px; }.program.current { background: #7c5cff30; border: 1px solid #7c5cff80; }.now-line { position: absolute; top: 0; bottom: 0; left: 43%; width: 1px; background: var(--pink); box-shadow: 0 0 10px #f43f9e40; }.now-line span { position: absolute; top: -16px; left: -12px; font-size: .4rem; padding: 1px 4px; background: var(--pink); border-radius: 3px; color: white; }.epg-caption { color: var(--muted); font-size: .6rem; margin-top: var(--space-3); }
.privacy-feature { padding-top: var(--space-5); }.privacy-visual { position: relative; height: 280px; display: grid; place-items: center; }.privacy-ring { position: absolute; width: 250px; aspect-ratio: 1; border-radius: 50%; border: 1px solid #7c5cff45; box-shadow: 0 0 70px #7c5cff12, inset 0 0 50px #7c5cff10; }.ring-outer { width: 350px; border-color: #7c5cff1c; }.shield { width: 85px; height: 100px; filter: drop-shadow(0 0 20px #7c5cff66); stroke: #b6a4ff; stroke-width: 1.5; }.shield-check { stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.privacy-satellite { position: absolute; left: calc(50% + 100px); top: 60%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); padding: .5rem 1rem; font-size: .65rem; color: var(--muted); }.privacy-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-6); }.privacy-facts > div { padding-top: var(--space-3); border-top: 1px solid var(--line); }.privacy-facts > div > span { color: #baabf4; font-size: .65rem; }.privacy-facts h3 { font-size: 1rem; letter-spacing: -.02em; margin-top: var(--space-3); }.privacy-facts p { font-size: .8rem; color: var(--muted); margin-top: var(--space-2); max-width: 300px; }
.hardware-specs { display: flex; gap: var(--space-5); margin-top: var(--space-4); }.hardware-specs strong { font-size: 2.4rem; font-weight: 500; letter-spacing: -.06em; line-height: 1; display: block; }.hardware-specs strong span { font-size: 1.15rem; }.hardware-specs small { font-size: .6rem; color: var(--muted); display: block; margin-top: var(--space-2); }.hardware-visual { height: 370px; position: relative; display: grid; place-items: center; perspective: 800px; }.hardware-halo { position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #7c5cff99; transform: rotateX(65deg) rotateZ(-25deg); box-shadow: 0 0 30px #7c5cff30, inset 0 0 60px #7c5cff15; }.tv-box { width: 240px; height: 170px; border: 1px solid #ffffff30; background: linear-gradient(145deg, #3b3b43, #1c1d20 55%, #131419); border-radius: var(--radius); transform: rotateX(40deg) rotateZ(-22deg); box-shadow: -10px 18px 0 #121316, -11px 19px 0 #ffffff20, -20px 40px 40px #0009; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); }.tv-box > span:nth-child(2) { font-size: 1.1rem; color: #dce6f580; letter-spacing: -.04em; }.tv-box i { position: absolute; bottom: 6px; width: 4px; height: 4px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 8px var(--cyan); }.remote { width: 64px; height: 230px; background: linear-gradient(110deg, #383941, #1a1b20); border: 1px solid #ffffff20; border-radius: var(--pill); position: absolute; top: 40px; right: 8%; transform: rotate(-20deg); box-shadow: 10px 25px 30px #0008; padding: 18px 7px; text-align: center; }.remote-power { color: #c2a9f1; font-size: .8rem; }.dpad { width: 48px; height: 48px; display: grid; place-items: center; margin-top: var(--space-2); border: 8px solid #44454e; border-radius: 50%; background: var(--surface-raised); }.dpad span { font-size: .5rem; color: var(--muted); }.remote-buttons { display: flex; justify-content: space-around; margin-top: var(--space-2); color: var(--muted); font-size: .75rem; }.remote > i { display: block; width: 18px; height: 45px; background: var(--surface-raised); border-radius: var(--pill); margin: var(--space-2) auto; }.hardware-label { position: absolute; bottom: 0; font-size: .55rem; letter-spacing: .15em; color: var(--muted); }
.download-feature { text-align: center; padding: var(--space-7) 0 var(--space-7); overflow: hidden; isolation: isolate; }.download-feature .eyebrow { justify-content: center; }.download-feature h2 { font-size: clamp(3rem, 6vw, 5.5rem); }.download-feature > p:not(.eyebrow) { color: var(--muted); margin-top: var(--space-3); font-size: .95rem; }.download-feature > .availability-note { font-size: .65rem!important; color: var(--muted); }.unavailable { cursor: not-allowed; }.button.unavailable { opacity: .7; }.button.unavailable:hover { transform: none; }.download-orbit { position: absolute; width: 650px; height: 650px; left: calc(50% - 325px); top: 100px; z-index: -1; border: 1px solid #7c5cff30; border-radius: 50%; transform: rotateX(60deg); box-shadow: 0 0 80px #7c5cff0d, inset 0 0 80px #7c5cff0d; }
.site-footer { width: var(--page); margin: auto; padding: var(--space-5) 0 var(--space-4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }.site-footer > div > p { font-size: .7rem; color: var(--muted); margin-top: var(--space-1); }.footer-links { display: flex; gap: var(--space-4); align-items: center; font-size: .7rem; color: var(--muted); flex-wrap: wrap; }.footer-links a { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }.legal-note { flex-basis: 100%; font-size: .55rem; color: var(--subtle); max-width: 720px; }

/* Motion is an enhancement: default styles above are the complete static site. */
@media (prefers-reduced-motion: no-preference) {
  .motion .hero { height: 230vh; }
  .motion .hero-sticky { position: sticky; top: 90px; height: calc(100svh - 90px); min-height: 650px; display: flex; flex-direction: column; overflow: clip; }
  .motion .hero-copy { transform: translateY(calc(var(--copy-exit, 0) * -35px)); opacity: calc(1 - var(--copy-exit, 0)); }
  .motion .hero-copy[inert] { pointer-events: none; }
  .motion .hero-stage { position: absolute; inset: 0; height: 100%; min-height: 0; padding-top: 30px; }
  .motion .tv-stack { width: min(700px, 72vw, 78svh); transform: translateY(calc((1 - var(--copy-exit, 0)) * 145px)) rotateX(calc(13deg + var(--explode, 0) * 32deg)) rotateY(calc(-16deg - var(--explode, 0) * 4deg)) rotateZ(calc(4deg - var(--explode, 0) * 13deg)) scale(calc(1 - var(--explode, 0) * .18)); }
  .motion .tv-layer { transform: translateZ(calc(var(--explode, 0) * (var(--layer) - 2.5) * 52px)); }
  .motion .tv-layer:not(.backdrop-layer)::before { content: ""; position: absolute; inset: 0; border: 1px solid #b8a5ff55; border-radius: inherit; background: #7c5cff04; opacity: var(--explode, 0); }
  .motion .layer-label { opacity: var(--label-opacity, 0); }
  .motion .hero-bottom { margin: auto auto 0; flex-shrink: 0; }
  .motion .moving-focus { transform: translateX(calc(var(--focus-index, 0) * (100% + 24px))); }
  .motion .feature-halo::before { opacity: calc(.45 + var(--progress) * .5); transform: rotate(calc(-20deg + var(--progress) * 100deg)) scale(calc(.8 + var(--progress) * .35)); }
  .motion .feature-halo::after { opacity: calc(.35 + var(--progress) * .55); transform: rotateX(45deg) rotate(calc(-25deg + var(--progress) * 80deg)) scale(calc(.85 + var(--progress) * .3)); }
  .motion .halo-divider { opacity: calc(.4 + var(--progress) * .5); transform: translateY(-50%) rotateX(65deg) scale(calc(.8 + var(--progress) * .4)); }
  .motion .carousel-demo { aspect-ratio: 1.25; }
  .motion .carousel-track { display: flex; height: 100%; transform: translateX(calc(var(--slide, 0) * -100%)); }
  .motion .carousel-slide { min-width: 100%; height: 100%; aspect-ratio: auto; }
  .motion .carousel-dots i { width: 5px; background: #ffffff40; }.motion .carousel-dots i.active { width: 18px; background: var(--text); }
  .motion .channel-a { position: relative; z-index: 2; border-color: #b8a5ff66; box-shadow: 0 8px 25px #0004; transform: translateY(calc((1 - var(--reorder, 1)) * 92px)) translateX(calc(var(--lift, 0) * -10px)) scale(calc(1 + var(--lift, 0) * .03)); }
  .motion .channel-b { transform: translateY(calc((1 - var(--reorder, 1)) * -92px)); }
  .motion .channel-c { opacity: calc(1 - var(--hide, 0) * .55); transform: translateX(calc(var(--hide, 0) * 12px)); }
  .motion .toggle.off { background: var(--violet); }
  .motion .toggle.off::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--subtle); opacity: var(--hide, 0); }
  .motion .toggle.off::after { transform: translateX(calc((1 - var(--hide, 0)) * 12px)); }
  .motion .connection-wire span { transform: translateX(calc(var(--progress) * 40px - 20px)); }
  .motion .library-tv { transform: translateY(calc((1 - var(--progress)) * 18px)); }
  .motion .now-line { transform: translateX(calc(var(--progress) * 100px - 50px)); }
  .motion .ring-outer { transform: scale(calc(.8 + var(--progress) * .3)); }
  .motion .ring-inner { transform: scale(calc(.9 + var(--progress) * .1)) rotate(calc(var(--progress) * 30deg)); }
  .motion .shield { transform: translateY(calc((1 - var(--progress)) * 15px)); }
  .motion .hardware-halo { transform: rotateX(65deg) rotateZ(calc(-25deg + var(--progress) * 35deg)); }
  .motion .remote { transform: translateY(calc((1 - var(--progress)) * 30px)) rotate(calc(-28deg + var(--progress) * 12deg)); }
  .motion .download-orbit { transform: rotateX(60deg) scale(calc(.85 + var(--progress) * .2)); }
}
@media (min-width: 1500px) { .hero-sticky { padding-top: var(--space-6); }.tv-stack { width: min(1000px, 66vw); }.hero-stage { height: 560px; } }
@media (max-width: 1000px) {
  :root { --page: calc(100% - 64px); --space-7: 6rem; }
  .brand-caption { display: none; }.nav-links { gap: var(--space-3); }
  .split { gap: var(--space-4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .connection-diagram { grid-template-columns: 120px 1fr minmax(0, 330px) 1fr 120px; gap: var(--space-1); }
  .provider { padding: var(--space-3) var(--space-1); }.provider small { font-size: .5rem; }
  .layer-label { font-size: 8px; }
  .feature-notes { gap: var(--space-3); font-size: .6rem; }
  .poster { padding: var(--space-2); }.poster-kicker { font-size: .4rem; }
  .channel-demo, .epg { padding: var(--space-3); }.channel-row { gap: 10px; padding: 10px; }.channel-row small { font-size: .5rem; }.channel-row strong { font-size: .7rem; }.row-icon { width: 28px; height: 28px; }.program { padding: 15px 8px; font-size: .55rem; }.program small { font-size: .4rem; }
  .tv-box { width: 190px; height: 145px; }.remote { right: 2%; }.privacy-facts { gap: var(--space-4); }
}
@media (max-width: 700px) {
  :root { --page: calc(100% - 40px); --space-7: 4.5rem; --heading: clamp(2.1rem, 8vw, 3.4rem); }
  html { scroll-padding-top: 28px; }
  .site-header { height: 76px; }.brand { font-size: 1.5rem; }.brand img { width: 30px; height: 30px; }
  .nav-links { gap: var(--space-2); }.nav-links > a { font-size: .7rem; }
  .js .menu-button { display: inline-flex; justify-content: space-between; align-items: center; gap: var(--space-3); border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); padding: 0 var(--space-2); min-height: 44px; font-size: .75rem; cursor: pointer; }
  .js .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 20px 60px #0008; }
  .js .nav-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }.js .nav-links a { padding: var(--space-1) var(--space-2); }.js .nav-links .button { margin-top: var(--space-1); }
  html:not(.js) .site-header { height: auto; min-height: 76px; flex-wrap: wrap; padding: var(--space-2) 0; gap: var(--space-2); }html:not(.js) .nav-links { flex-wrap: wrap; gap: var(--space-2); }html:not(.js) .nav-links .button-small { padding: .4rem .8rem; }
  .hero-sticky { padding-top: var(--space-5); min-height: 700px; }.hero-copy { padding: 0 var(--space-2); }h1 { font-size: clamp(3.3rem, 12vw, 5rem); }.mobile-break { display: block; }.hero-copy .eyebrow { font-size: .53rem; }.hero-copy > p:not(.eyebrow) { font-size: .8rem; margin-top: var(--space-2); }.hero-copy .actions { gap: var(--space-3); }.button { padding: .7rem 1.2rem; font-size: .75rem; }.text-link { font-size: .7rem; }
  .hero-stage { height: 300px; }.tv-stack { width: 82vw; }.tv-layer { border-radius: 14px; }.hero-bottom { justify-content: center; }.hero-bottom > span:not(.scroll-cue) { display: none; }.scroll-cue { font-size: .6rem; }
  .orbit { width: 95vw; }.orbit-two { width: 110vw; }.layer-label { font-size: 0; padding: 2px 8px; }.layer-label::before { width: 8px; }.layer-label::after { content: attr(data-number); font-size: 10px; }
  .stack-labels { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .feature { padding-top: var(--space-7); padding-bottom: var(--space-7); }.section-heading { margin-bottom: var(--space-4); }.eyebrow { font-size: .53rem; margin-bottom: var(--space-2); }.section-heading > p:not(.eyebrow), .feature-copy > p:not(.eyebrow) { font-size: .85rem; }.desktop-break { display: none; }
  .home-demo { padding: var(--space-2); border-radius: 20px; }.demo-topline { font-size: .6rem; margin-bottom: var(--space-3); }.demo-topline .muted { font-size: .5rem; }.home-cards { gap: 12px; }.poster { padding: 10px; border-radius: 14px; aspect-ratio: .65; }.poster-kicker { font-size: .32rem; letter-spacing: .08em; }.poster strong { font-size: clamp(1rem, 4.7vw, 2rem); }.poster small { font-size: .4rem; line-height: 1.5; }.moving-focus { width: calc((100% - 24px) / 3); border-radius: 14px; }.home-demo-footer { margin-top: var(--space-3); font-size: .55rem; }.remote-hint { gap: 3px; }.remote-hint span { display: none; }kbd { min-width: 22px; height: 22px; font-size: .5rem; }.feature-notes { flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: .55rem; }
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }.feature-copy { max-width: 100%; }.channels-feature .feature-copy { grid-row: 1; }.carousel-demo { aspect-ratio: 1.15; }.slide-copy h3 { font-size: 2.5rem; }.slide-copy { inset: auto var(--space-3) var(--space-5); }.slide-copy small { font-size: .5rem; }.slide-copy p { font-size: .6rem; }.channel-demo { padding: var(--space-3); }.channel-row strong { font-size: .8rem; }.channel-row small { font-size: .6rem; }.row-icon { width: 36px; height: 36px; }
  .connection-diagram { grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-4); position: relative; }.provider { padding: var(--space-3); }.provider small { font-size: .6rem; }.provider-plex { grid-column: 1; grid-row: 1; }.provider-jellyfin { grid-column: 2; grid-row: 1; }.library-tv { grid-column: 1 / -1; grid-row: 2; width: 85%; margin: auto; position: relative; }.connection-wire { position: absolute; top: 120px; height: 65px; width: 1px; z-index: -1; }.wire-left { left: 25%; }.wire-right { right: 25%; }.connection-wire span { top: 50%; left: -2px; }.library-posters > div { font-size: 1rem; }.program { font-size: .6rem; }.program small { font-size: .45rem; }.epg { padding: var(--space-3); }.epg-row { grid-template-columns: 48px 1.4fr 1fr; }.epg-row:nth-child(2) { grid-template-columns: 48px 1fr 1.4fr; }.epg-times { padding-left: 60px; }
  .privacy-visual { height: 230px; }.privacy-ring { width: 190px; }.ring-outer { width: 270px; }.shield { width: 70px; }.privacy-satellite { left: calc(50% + 65px); font-size: .55rem; padding: .4rem .8rem; }.privacy-facts { grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-4); }.privacy-facts > div { padding: var(--space-3) 0 0; }.privacy-facts > div > span { float: left; margin-right: var(--space-3); }.privacy-facts h3 { margin-top: 0; }.privacy-facts p { margin-left: 39px; max-width: none; font-size: .75rem; }
  .hardware-visual { height: 330px; }.tv-box { width: 210px; height: 160px; }.remote { right: 5%; }.hardware-specs { gap: var(--space-5); }.download-feature h2 { font-size: clamp(2.5rem, 11vw, 4rem); }.download-feature .actions { gap: var(--space-2); flex-direction: column; }.download-feature .button { min-width: 260px; }.download-orbit { width: 450px; height: 450px; left: calc(50% - 225px); }.site-footer { gap: var(--space-3); }.footer-links { gap: var(--space-3); font-size: .65rem; }.legal-note { font-size: .5rem; }
}
@media (max-width: 360px) { :root { --page: calc(100% - 32px); }.home-demo { padding: 12px; }.home-cards { gap: 10px; }.poster { padding: 8px; }.poster small { display: none; }.moving-focus { width: calc((100% - 20px) / 3); }.demo-topline .muted { display: none; }.channel-demo, .epg { padding: var(--space-2); }.channel-row { gap: 8px; }.channel-row small { font-size: .5rem; } }
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .motion .hero { height: 200svh; }.motion .hero-sticky { top: 76px; height: calc(100svh - 76px); min-height: 0; }.motion .tv-stack { width: min(80vw, 70svh); transform: translateY(calc((1 - var(--copy-exit, 0)) * 155px)) rotateX(calc(13deg + var(--explode, 0) * 32deg)) rotateY(-12deg) rotateZ(calc(4deg - var(--explode, 0) * 12deg)) scale(calc(1 - var(--explode, 0) * .1)); }.motion .tv-layer { transform: translateZ(calc(var(--explode, 0) * (var(--layer) - 2.5) * 32px)); }.motion .moving-focus { transform: translateX(calc(var(--focus-index, 0) * (100% + 12px))); }.motion .connection-wire span { transform: translateY(calc(var(--progress) * 30px - 15px)); }.motion .now-line { transform: translateX(calc(var(--progress) * 60px - 30px)); }
}
@media (max-width: 700px) {
  .carousel-demo { aspect-ratio: auto; }
  .carousel-slide, .motion .carousel-demo { aspect-ratio: 1.15; }
  .split .feature-halo::before { width: 100%; left: 0; top: 35%; }
  .split .feature-halo::after { width: 85%; left: 8%; top: 40%; }
}
.channels-feature .channel-a, .live-feature .program.current { border-color: var(--accent); box-shadow: inset 0 0 22px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent); }
.privacy-feature .privacy-facts > div > span { color: var(--accent-ink); }
/* Short screens use document flow: copy and links never fade before scrolling into view. */
@media (max-height: 650px) and (prefers-reduced-motion: no-preference) {
  .motion .hero { height: auto; }
  .motion .hero-sticky { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; }
  .motion .hero-copy { transform: none; opacity: 1; }
  .motion .hero-stage { position: relative; inset: auto; height: auto; min-height: 0; padding-top: var(--space-5); padding-bottom: var(--space-5); }
  .motion .tv-stack { width: min(760px, 72vw); transform: rotateX(13deg) rotateY(-16deg) rotateZ(4deg); }
  .motion .tv-layer { transform: none; }
  .motion .tv-layer:not(.backdrop-layer)::before, .motion .stack-labels { display: none; }
}
@media (max-width: 360px) and (prefers-reduced-motion: no-preference) { .motion .moving-focus { transform: translateX(calc(var(--focus-index, 0) * (100% + 10px))); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*, *::before, *::after { transition: none!important; animation: none!important; }.button:hover { transform: none; } }