:root{--bg:#0a0a0b;--card:#141416;--surface:#1c1c1f;--text:#f5f5f7;--muted:#a1a1a6;--tertiary:#6e6e73;--line:rgba(255,255,255,.12);--red:#e50914;--gold:#d8b45a;--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.site-header{height:82px;position:absolute;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;max-width:var(--max);margin:auto;padding:0 30px}.brand{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.18em}.brand-mark{width:27px;height:27px;border-radius:8px;overflow:hidden;background:#101a27;display:grid;place-items:center;box-shadow:0 0 24px rgba(229,9,20,.2)}.brand-mark img{width:100%;height:100%;object-fit:cover}.desktop-nav{display:flex;gap:32px;margin-left:110px}.desktop-nav a,.footer-links a{color:var(--muted);font-size:12px;transition:color .2s}.desktop-nav a:hover,.footer-links a:hover{color:var(--text)}.header-cta{font-size:12px;border:1px solid var(--line);padding:11px 14px;border-radius:999px;transition:.2s}.header-cta:hover{border-color:var(--red);background:rgba(229,9,20,.1)}.header-cta span,.text-link span,.button span{color:var(--red);margin-left:9px}.menu-toggle,.mobile-nav{display:none}.section-pad{max-width:var(--max);margin:auto;padding-left:30px;padding-right:30px}.hero{min-height:790px;height:100vh;max-height:900px;position:relative;display:flex;align-items:center;padding-top:85px;isolation:isolate}.hero-video{position:absolute;inset:0 -15%;z-index:-2;overflow:hidden;background:radial-gradient(circle at 70% 32%,#2b0d11 0,transparent 28%),radial-gradient(circle at 72% 70%,#3a0b10 0,transparent 25%),#0a0a0b}.video-orb{position:absolute;width:560px;height:560px;right:10%;top:5%;border-radius:50%;background:radial-gradient(circle,#71202b 0,#220b11 35%,transparent 70%);filter:blur(35px);opacity:.75}.video-grid{position:absolute;inset:0;background:linear-gradient(105deg,rgba(10,10,11,.95) 18%,rgba(10,10,11,.78) 46%,rgba(10,10,11,.3)),linear-gradient(0deg,rgba(10,10,11,.9),transparent 50%),repeating-linear-gradient(90deg,transparent 0 80px,rgba(255,255,255,.018) 81px 82px);mask-image:linear-gradient(to right,black 0%,black 65%,transparent 100%)}.hero-copy{position:relative;width:51%;z-index:3}.eyebrow{font:500 10px/1 DM Mono,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 26px}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 13px var(--red);margin-right:9px;vertical-align:middle}.hero h1{font-size:clamp(58px,7vw,100px);line-height:.94;letter-spacing:-.08em;margin:0 0 28px;font-weight:800}.hero h1 span,.section-heading h2 span,.player-copy h2 span,.profile-card h2 span,.platform-copy h2 span,.performance h2 span,.download h2 span{color:var(--red)}.hero-lede{max-width:420px;color:var(--muted);font-size:15px;line-height:1.65;margin:0 0 31px}.hero-actions{display:flex;align-items:center;gap:26px}.button{display:inline-flex;align-items:center;padding:14px 18px;font-size:12px;font-weight:600;border-radius:999px}.button-primary{background:var(--red);box-shadow:0 10px 40px rgba(229,9,20,.25);transition:transform .2s,box-shadow .2s}.button-primary:hover{transform:translateY(-2px);box-shadow:0 13px 44px rgba(229,9,20,.4)}.text-link{font-size:12px}.hero-meta{display:flex;gap:24px;margin-top:75px;font:10px DM Mono,monospace;text-transform:uppercase;color:var(--tertiary);letter-spacing:.08em}.hero-meta b{color:var(--red);font-weight:400;margin-right:7px}.hero-device{position:absolute;right:7%;width:390px;top:16%;z-index:2}.phone-shell{position:relative;width:315px;height:610px;margin:auto;padding:8px;border-radius:44px;background:linear-gradient(135deg,#555 0,#1d1d1f 16%,#09090a 50%,#343438 100%);box-shadow:28px 40px 80px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.2);transform:rotate(6deg)}.phone-screen{height:100%;overflow:hidden;border-radius:37px;background:var(--bg);position:relative;border:1px solid rgba(255,255,255,.08)}.phone-speaker{position:absolute;z-index:2;top:16px;left:50%;width:84px;height:20px;transform:translateX(-50%);border-radius:20px;background:#050505}.app-top{display:flex;align-items:center;justify-content:space-between;padding:28px 18px 19px;font-size:10px;color:var(--muted)}.app-user b{color:var(--text);font-weight:600}.icon-button{font-size:22px;color:var(--text)}.app-section-title{display:flex;justify-content:space-between;align-items:center;padding:0 18px 11px;font-size:13px;font-weight:700}.app-section-title small{font:8px DM Mono,monospace;color:var(--tertiary);font-weight:400}.continue-card{height:185px;margin:0 14px;position:relative;overflow:hidden;border-radius:12px;background:var(--surface)}.continue-art{position:absolute;inset:0;background:radial-gradient(circle at 75% 23%,#ca5c40 0,transparent 18%),linear-gradient(130deg,#1b3148,#0c121b 40%,#b24331 110%)}.continue-art:after{content:'';position:absolute;right:30px;bottom:0;width:110px;height:140px;background:linear-gradient(145deg,transparent 28%,#343f4e 29% 50%,transparent 51%),linear-gradient(60deg,transparent 42%,#cf6b4d 43% 58%,transparent 59%);opacity:.7}.continue-copy{position:absolute;inset:auto auto 20px 17px;z-index:1}.continue-copy small{font:7px DM Mono,monospace;color:#d7d7dc}.continue-copy strong{display:block;font-size:21px;line-height:.95;letter-spacing:-.07em;margin:7px 0}.continue-copy em{font-style:normal;font:7px DM Mono,monospace;color:var(--muted)}.watch-line{display:block;width:90px;height:2px;background:rgba(255,255,255,.25);margin-bottom:5px}.watch-line i{display:block;width:45%;height:100%;background:var(--red)}.play-button,.scene-play{display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;font-size:10px}.play-button{position:absolute;right:16px;bottom:18px;width:32px;height:32px;z-index:2}.catalog-title{margin-top:24px}.poster-row{display:flex;gap:7px;padding:0 14px}.poster{height:130px;flex:1;border-radius:7px;background:#334b59;position:relative;overflow:hidden}.poster:after,.window-poster:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 65%)}.poster-one{background:linear-gradient(145deg,#5f3a34,#142535 52%,#b18458)}.poster-two{background:linear-gradient(145deg,#071e2d,#527289 45%,#a45b43)}.poster-three{background:linear-gradient(145deg,#1e1823,#a7735e 55%,#12192a)}.app-tabs{position:absolute;bottom:0;inset-inline:0;height:55px;display:flex;justify-content:space-around;align-items:center;background:rgba(10,10,11,.94);border-top:1px solid rgba(255,255,255,.08);font-size:7px;color:var(--tertiary)}.app-tabs span{display:flex;flex-direction:column;align-items:center;gap:4px}.app-tabs b{font-size:13px;font-weight:400}.app-tabs .active{color:var(--red)}.device-shadow{position:absolute;bottom:7%;left:14%;width:280px;height:40px;background:#000;filter:blur(20px);opacity:.7;z-index:-1}.device-note{position:absolute;right:0;bottom:3%;font:9px DM Mono,monospace;color:var(--muted);text-transform:uppercase;display:flex;gap:9px;align-items:center}.device-note b{color:var(--text);font-weight:400}.scroll-cue{position:absolute;bottom:26px;left:30px;color:var(--tertiary);font:10px DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em}.scroll-cue span{display:inline-block;width:1px;height:35px;background:linear-gradient(var(--red),transparent);vertical-align:middle;margin-right:12px}.app-signal{min-height:105px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0d0d0f;display:flex;align-items:center;justify-content:center;gap:clamp(38px,9vw,135px)}.app-signal div{display:flex;flex-direction:column;gap:6px}.app-signal strong{font-size:23px;letter-spacing:-.06em}.app-signal span:not(.live-dot),.signal-copy{font:9px DM Mono,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}.signal-copy{display:block;margin-left:auto;margin-right:30px}.catalog{padding-top:145px;padding-bottom:150px}.section-heading{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:66px}.section-heading .eyebrow{grid-column:1/-1;margin-bottom:0}.section-heading h2,.player-copy h2,.platform-copy h2,.performance h2,.download h2{font-size:clamp(42px,5vw,70px);line-height:.96;letter-spacing:-.08em;margin:0;font-weight:700}.section-heading>p:last-child{max-width:315px;color:var(--muted);font-size:14px;line-height:1.65;margin:0}.section-heading h2 span,.player-copy h2 span,.profile-card h2 span,.platform-copy h2 span,.performance h2 span,.download h2 span{color:var(--muted)}.catalog-layout{display:flex;flex-direction:column-reverse;gap:50px}
.catalog-window{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 35px 80px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:15px;width:100%}.app-top-bar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:15px}.app-logo{width:24px;height:24px;border-radius:6px;overflow:hidden;display:block}.app-logo img{width:100%;height:100%;object-fit:cover}.app-main-tabs{display:flex;gap:32px;font-size:13px;color:var(--muted);font-weight:500}.app-main-tabs .active{color:#fff;font-weight:700}.app-time{font:10px DM Mono,monospace;color:var(--tertiary)}
.app-workspace{display:grid;grid-template-columns:200px 1fr;gap:20px}
.app-sidebar{display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.06);padding-right:20px;height:100%}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.06)}.sidebar-title{font-size:20px;font-weight:700;letter-spacing:-.05em}.sidebar-badge{font:9px DM Mono,monospace;background:rgba(229,9,20,.15);color:var(--red);padding:4px 8px;border-radius:99px}.sidebar-menu{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.menu-item{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:8px;font-size:13px;color:var(--muted);cursor:pointer;transition:.2s;border:1px solid transparent}.menu-item.active{background:rgba(229,9,20,.1);border-color:rgba(229,9,20,.3);color:#fff;font-weight:600}.menu-item:not(.active):hover{background:var(--surface);color:#fff}.item-count{font:9px DM Mono,monospace;opacity:.6}.app-content{display:flex;flex-direction:column;padding-top:4px}.window-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.window-title{font-size:18px;font-weight:700}.window-search{background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:8px 13px;font-size:13px}.window-search span{font-size:11px;margin-left:5px}
.window-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:15px}
.window-poster{aspect-ratio:1.5/2;position:relative;overflow:hidden;border-radius:8px;display:flex;align-items:flex-end;padding:12px}.window-poster b{position:relative;z-index:1;font-size:13px;line-height:.95;letter-spacing:-.06em}.poster-overlay{position:relative;z-index:2;display:flex;flex-direction:column;gap:2px}.poster-overlay small{font:9px DM Mono,monospace;color:var(--gold)}.poster-four{background:linear-gradient(145deg,#345471,#0e1420 45%,#b24c3f)}.poster-five{background:linear-gradient(145deg,#172a3e,#b07247 50%,#22202c)}.poster-six{background:linear-gradient(145deg,#4b433a,#181c28 50%,#a77668)}.poster-seven{background:linear-gradient(145deg,#aa8064,#27384b 45%,#13181d)}.poster-eight{background:linear-gradient(145deg,#132c42,#95a6a6 55%,#222631)}
.catalog-copy{align-self:center;text-align:center;display:flex;flex-direction:column;align-items:center}
.catalog-copy p{text-align:center}.copy-index{font:10px DM Mono,monospace;color:var(--red);display:flex;align-items:center;gap:10px}.copy-index span{display:block;width:40px;height:1px;background:var(--red)}.catalog-copy h3{font-size:34px;line-height:.99;letter-spacing:-.07em;margin:25px 0 18px}.catalog-copy p,.player-copy>p:not(.eyebrow),.platform-copy>p:not(.eyebrow),.profile-card>div:nth-child(2)>p:last-child,.download-inner>div>p:last-child{color:var(--muted);font-size:14px;line-height:1.7;margin:0;max-width:290px}.copy-tags,.platform-list{display:flex;gap:9px;margin-top:29px}.copy-tags span,.platform-list span{border:1px solid var(--line);border-radius:999px;padding:8px 10px;color:var(--muted);font:8px DM Mono,monospace;background:var(--surface)}.copy-tags span:first-child{border-color:var(--red);color:var(--text);background:rgba(229,9,20,.1)}.player-section,.platforms,.performance{border-top:1px solid var(--line);padding-top:140px;padding-bottom:145px}.player-section{display:grid;grid-template-columns:.7fr 1.3fr;gap:65px;align-items:center}.player-copy>p:not(.eyebrow){margin:28px 0 29px}.player-stage{height:440px;position:relative;display:flex;justify-content:center;align-items:center}.player-window{width:78%;aspect-ratio:1.7;border:8px solid #29292b;border-radius:13px;box-shadow:0 30px 60px rgba(0,0,0,.6);transform:rotate(-3deg);overflow:hidden;position:relative;background:#050506}.player-scene{height:100%;position:relative;background:radial-gradient(circle at 68% 26%,#b63c42 0,transparent 18%),linear-gradient(140deg,#331e23,#130d12 44%,#1b2b36 45%,#0a0b0e)}.player-scene:after{content:'';position:absolute;right:17%;bottom:0;width:38%;height:72%;background:linear-gradient(150deg,transparent 20%,#13181f 21% 49%,transparent 50%),linear-gradient(40deg,transparent 32%,#7c4746 33% 45%,transparent 46%);opacity:.8}.scene-badge,.scene-title{position:absolute;z-index:1;font:9px DM Mono,monospace;text-transform:uppercase}.scene-badge{top:20px;left:21px;background:var(--red);padding:5px 7px}.scene-title{bottom:23px;left:21px}.scene-play{position:absolute;z-index:2;inset:0;margin:auto;width:48px;height:48px;background:rgba(229,9,20,.9);font-size:14px}.player-toolbar{position:absolute;z-index:3;bottom:0;left:0;right:0;display:flex;gap:15px;align-items:center;padding:20px;color:#fff;font:10px DM Mono,monospace;background:linear-gradient(transparent,rgba(0,0,0,.9))}.progress{height:2px;background:rgba(255,255,255,.28);flex:1}.progress i{display:block;width:48%;height:100%;background:var(--red)}.pip-card{position:absolute;right:3%;bottom:4px;width:185px;background:rgba(28,28,31,.88);border:1px solid rgba(255,255,255,.17);padding:14px;border-radius:9px;backdrop-filter:blur(14px)}.pip-card small{font:8px DM Mono,monospace;color:var(--red)}.pip-preview{height:66px;background:linear-gradient(145deg,#412029,#0d171f 58%,#9a4c44);margin:11px 0;display:grid;place-items:center}.pip-preview span{width:26px;height:26px;display:grid;place-items:center;background:var(--red);border-radius:50%;font-size:9px}.pip-card strong{font-size:14px;line-height:1.1;letter-spacing:-.04em}.profile-section{padding-top:0;padding-bottom:145px}.profile-card{display:grid;grid-template-columns:115px 1fr 290px;gap:34px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:38px 40px;background:radial-gradient(circle at 16% 36%,rgba(229,9,20,.1),transparent 23%),var(--card)}.profile-avatar{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#9f4545,#221c22);font-size:30px;font-weight:800;border:3px solid #2c2b2d}.profile-card h2{font-size:37px;line-height:.99;letter-spacing:-.07em;margin:0 0 15px}.profile-card h2 span{color:var(--muted)}.profile-settings{background:var(--surface);padding:17px;border-radius:10px;display:grid;grid-template-columns:1fr auto auto;gap:9px;align-items:center}.profile-settings span{font:8px DM Mono,monospace;color:var(--tertiary)}.profile-settings strong{font-size:11px;font-weight:500;text-align:right}.profile-settings strong b{font-size:8px;color:#30d158}.profile-settings i{font-style:normal;color:var(--tertiary);font-size:18px}.profile-settings hr{border:0;border-top:1px solid var(--line);grid-column:1/-1;width:100%;margin:2px 0}.platforms{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}.platform-copy>p:not(.eyebrow){margin:27px 0}.platform-list span{padding:11px 14px;background:var(--surface)}.platform-list span i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--tertiary);margin-right:7px}.platform-list span.active{color:var(--text);border-color:var(--red);background:rgba(229,9,20,.1)}.platform-list span.active i{background:var(--red)}.tv-visual{height:340px;position:relative}.tv-frame{position:absolute;right:0;top:0;width:92%;height:265px;padding:22px 26px;background:linear-gradient(140deg,#29151b,#110f13 48%,#182a31);border:7px solid #27272a;border-radius:6px;box-shadow:0 25px 50px #000}.tv-top{display:flex;justify-content:space-between;font:9px DM Mono,monospace;color:var(--muted)}.tv-top span:last-child{color:#30d158}.tv-hero{margin-top:36px}.tv-hero small{font:8px DM Mono,monospace;color:var(--red)}.tv-hero strong{display:block;font-size:35px;line-height:.93;letter-spacing:-.07em;margin:10px 0}.tv-hero em{font-style:normal;color:var(--red)}.tv-cta{font-size:10px;color:var(--muted)}.tv-rail{display:flex;gap:7px;margin-top:20px}.tv-rail i{height:37px;flex:1;border-radius:3px;background:#7d4141}.tv-rail i:nth-child(2){background:#35515e}.tv-rail i:nth-child(3){background:#55464c}.tv-rail i:nth-child(4){background:#8b6b55}.tv-base{position:absolute;right:19%;bottom:30px;width:55%;height:7px;background:#242427;transform:skewX(-30deg);box-shadow:0 12px 15px #000}.performance{padding-bottom:145px}.performance-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:65px}.performance-heading h2{min-width:54%}.performance-grid{display:grid;grid-template-columns:1fr 1fr 2r;gap:15px}.metric{border-top:1px solid var(--line);padding-top:18px;min-height:170px}.metric strong{font-size:72px;line-height:1;letter-spacing:-.1em}.metric>b{font:11px DM Mono,monospace;color:var(--red);margin-left:7px}.metric p{font:11px DM Mono,monospace;line-height:1.5;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-top:28px}.metric-wide{position:relative}.metric-rule{position:absolute;top:58px;left:145px;right:0;height:1px;background:var(--line)}.metric-rule i{display:block;width:54%;height:1px;background:var(--red)}.download{padding-top:105px;padding-bottom:105px;background:linear-gradient(135deg,#141416,#0d0d0f)}.download-inner{display:flex;align-items:center;justify-content:space-between;padding:55px 62px;border:1px solid var(--line);background:radial-gradient(circle at 85% 35%,rgba(229,9,20,.18),transparent 28%)}.download h2{font-size:clamp(46px,5.6vw,76px)}.download-inner>div>p:last-child{margin-top:22px}.download-actions{display:flex;flex-direction:column;align-items:flex-end;gap:18px}.app-store{display:flex;align-items:center;gap:12px;padding:12px 16px;width:195px;background:#f5f5f7;color:#0a0a0b;border-radius:8px;transition:transform .2s}.app-store:hover{transform:translateY(-2px)}.app-icon{width:29px;height:29px;border-radius:7px;overflow:hidden}.app-icon img{width:100%;height:100%;object-fit:cover}.app-store small,.app-store strong{display:block}.app-store small{font-size:8px}.app-store strong{font-size:18px;letter-spacing:-.04em}.app-store b{margin-left:auto;font-weight:400}.download-note{font:9px DM Mono,monospace;color:var(--muted);text-transform:uppercase}.site-footer{max-width:var(--max);min-height:150px;margin:auto;padding:42px 30px;display:flex;align-items:flex-start;gap:50px;position:relative}.site-footer p{color:var(--muted);font-size:11px;margin:4px 0 0}.footer-links{display:flex;gap:24px;margin-left:auto;margin-right:95px}.copyright{position:absolute;right:30px;bottom:18px;color:#52525b;font:9px DM Mono,monospace}.animate-blur-fade-up{opacity:0;filter:blur(20px);transform:translateY(40px);animation:blurFadeUp 1s ease-out forwards}@keyframes blurFadeUp{to{opacity:1;filter:blur(0);transform:translateY(0)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.animate-blur-fade-up{animation:none;opacity:1;filter:none;transform:none}}@media(max-width:800px){.site-header{height:70px;padding:0 20px}.desktop-nav,.header-cta{display:none}.menu-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:0;padding:10px}.menu-toggle span{display:block;width:21px;height:1px;background:var(--text)}.mobile-nav{position:absolute;display:flex;flex-direction:column;gap:22px;top:61px;right:14px;padding:23px 25px;background:var(--card);border:1px solid var(--line);border-radius:12px;opacity:0;pointer-events:none;transform:translateY(-12px);transition:.3s}.mobile-nav.open{opacity:1;pointer-events:auto;transform:none}.mobile-nav a{font-size:13px}.section-pad{padding-left:20px;padding-right:20px}.hero{min-height:800px;height:auto;max-height:none;padding-top:130px;display:block}.hero-copy{width:100%}.hero h1{font-size:16vw}.hero-lede{font-size:13px;max-width:320px}.hero-actions{gap:18px}.hero-meta{margin-top:44px}.hero-device{position:relative;right:auto;top:auto;width:100%;margin-top:34px;height:490px}.phone-shell{width:260px;height:500px;transform:rotate(5deg)}.app-top{padding-top:26px}.continue-card{height:151px}.poster{height:105px}.device-note{bottom:0;right:2px}.scroll-cue{left:20px;bottom:17px}.app-signal{padding:24px 20px;display:grid;grid-template-columns:1fr 1fr;gap:22px}.signal-copy{grid-column:1/-1;margin:2px 0 0}.catalog{padding-top:90px;padding-bottom:95px}.section-heading{display:block;margin-bottom:40px}.section-heading h2{font-size:43px;margin:20px 0 23px}.catalog-layout,.player-section,.platforms{display:block}.catalog-window{display:block;padding:14px}.app-sidebar{display:none}.player-section,.platforms{padding-top:90px;padding-bottom:95px}.player-copy>p:not(.eyebrow){margin:24px 0}.player-stage{height:325px;margin-top:28px}.player-window{width:94%;border-width:6px}.pip-card{width:145px;padding:11px;bottom:0}.pip-card strong{font-size:12px}.pip-preview{height:51px}.profile-section{padding-bottom:95px}.profile-card{display:block;padding:27px 23px}.profile-avatar{margin-bottom:24px}.profile-card h2{font-size:39px;margin-bottom:18px}.profile-settings{margin-top:28px}.platform-copy>p:not(.eyebrow){margin-bottom:25px}.tv-visual{height:310px;margin-top:33px}.tv-frame{width:95%;height:230px;padding:16px 18px}.tv-hero{margin-top:25px}.tv-hero strong{font-size:27px}.performance{padding-top:90px;padding-bottom:95px}.performance-heading{display:block;margin-bottom:45px}.performance-heading h2{margin-top:20px}.performance-grid{grid-template-columns:1fr 1fr;gap:22px}.metric-wide{grid-column:1/-1}.metric strong{font-size:58px}.metric-rule{left:125px}.download{padding-top:60px;padding-bottom:60px}.download-inner{display:block;padding:35px 24px}.download-actions{align-items:flex-start;margin-top:36px}.site-footer{display:block;min-height:215px;padding:35px 20px}.site-footer p{margin-top:17px}.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:40px 0 0}.copyright{left:20px;right:auto}}
/* Cinematic video layer from the supplied hero direction. */
.hero{overflow:hidden;isolation:isolate}
.hero-video{position:absolute;inset:0;width:100%;height:100%;z-index:-4;object-fit:cover;object-position:center;filter:saturate(.72) contrast(1.08);background:#0a0a0b}
.hero-video-tint{position:absolute;inset:0;z-index:-3;pointer-events:none;background:rgba(10,10,11,.18);mix-blend-mode:multiply}
.hero-video-tint:after{display:none}
.hero-blur-overlay{display:none}
.hero-copy,.hero-device,.scroll-cue{z-index:3}
.hero{overflow:hidden!important; padding-left: max(30px, calc((100vw - var(--max)) / 2 + 30px))!important; padding-right: max(30px, calc((100vw - var(--max)) / 2 + 30px))!important;}
.hero-video{inset:0!important;width:100%!important;height:100%!important;z-index:-4!important;object-fit:cover!important;object-position:center!important;filter:saturate(.72) contrast(1.08)!important;background:#0a0a0b!important}
.hero-video-tint{z-index:-3!important}
.hero-device{z-index:3!important}
.liquid-glass{background:var(--surface);border:1px solid var(--line);box-shadow:none;position:relative;overflow:hidden}.liquid-glass:before{display:none}
.site-header.scrolled{position:fixed;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 10px 35px rgba(0,0,0,.18)}
.desktop-nav a.active,.mobile-nav a.active{color:var(--text)}
.hero-video{transform:scale(calc(1 + var(--scroll-progress,0) * .04));transition:filter .25s ease;filter:saturate(calc(.72 + var(--scroll-progress,0) * .16)) contrast(1.08) brightness(calc(1 - var(--scroll-progress,0) * .12))!important}
.hero-device{transform:translateY(calc(var(--scroll-progress,0) * -24px));transition:transform .12s linear}
.animate-blur-fade-up{animation:none!important;opacity:0;filter:blur(20px);transform:translateY(40px)}
.animate-blur-fade-up.is-visible{animation:blurFadeUp 1s ease-out forwards!important}
@media (prefers-reduced-motion:reduce){.hero-video,.hero-device{transform:none!important}.site-header.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none}.animate-blur-fade-up{animation:none!important;opacity:1;filter:none;transform:none}}
.evil-eye{--eye-x:.72;--eye-y:.38;position:absolute;z-index:0;right:3%;top:8%;width:min(52vw,650px);aspect-ratio:1.7/1;display:grid;place-items:center;opacity:.38;pointer-events:none;filter:drop-shadow(0 0 32px rgba(229,9,20,.3));transform:translate3d(calc((var(--eye-x) - .5) * 18px),calc((var(--eye-y) - .5) * 12px),0);transition:opacity .4s ease}.evil-eye:before{content:'';position:absolute;inset:7% 3%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(229,9,20,.18),transparent 54%);filter:blur(24px)}.eye-ring{width:68%;height:82%;border-radius:50%;display:grid;place-items:center;position:relative;transform:rotate(-8deg);background:radial-gradient(ellipse at center,rgba(255,255,255,.05) 0 34%,transparent 35%),conic-gradient(from 0deg,rgba(229,9,20,.06),rgba(229,9,20,.5),rgba(255,255,255,.12),rgba(229,9,20,.08),rgba(229,9,20,.55),rgba(229,9,20,.06));box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 55px rgba(229,9,20,.24);clip-path:ellipse(50% 50% at 50% 50%)}.eye-ring:before,.eye-ring:after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.16)}.eye-ring:before{inset:9%}.eye-ring:after{inset:18%;border-color:rgba(229,9,20,.38)}.eye-iris{width:35%;aspect-ratio:1;border-radius:50%;position:relative;background:radial-gradient(circle at 50% 50%,#050505 0 15%,#e50914 16% 25%,#6f070f 26% 47%,#ef4444 48% 55%,#250507 56% 68%,#050505 69%);box-shadow:0 0 0 8px rgba(229,9,20,.16),0 0 28px rgba(229,9,20,.62);transition:transform .1s linear}.eye-pupil{position:absolute;inset:31%;border-radius:50%;background:#020203;box-shadow:0 0 10px rgba(0,0,0,.9)}.eye-iris i{position:absolute;width:8%;height:18%;border-radius:99px;background:rgba(255,255,255,.8);filter:blur(1px)}.eye-iris i:first-of-type{left:28%;top:19%;transform:rotate(-28deg)}.eye-iris i:last-of-type{right:23%;bottom:20%;width:5%;height:10%;opacity:.45}.hero-blur-overlay{z-index:1!important}.hero-copy,.hero-device,.scroll-cue{position:relative}
.evil-eye{will-change:transform}
@media(max-width:800px){.evil-eye{width:115vw;right:-45%;top:28%;opacity:.22}}
@media(prefers-reduced-motion:reduce){.evil-eye{display:none}}
.evil-eye-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.72;will-change:contents}@media(max-width:800px){.evil-eye-canvas{opacity:.3}}@media(prefers-reduced-motion:reduce){.evil-eye-canvas{display:none}}
/* React Bits EvilEye is the hero's live WebGL layer; the old remote video is intentionally removed. */
.hero{background:radial-gradient(circle at 72% 32%,rgba(229,9,20,.12),transparent 26%),#0a0a0b;isolation:isolate}
.evil-eye-root{position:absolute;inset:0;z-index:0;pointer-events:auto;opacity:.82}
.evil-eye-root .evil-eye-container{width:100%;height:100%}
.evil-eye-root canvas{display:block;width:100%;height:100%}
.hero-copy,.scroll-cue{position:relative;z-index:3}
/* Persistent eye: fixed to the viewport so its centre never scrolls away. */
.evil-eye-root{position:fixed!important;inset:0!important;z-index:0!important;pointer-events:none!important;opacity:0.8!important}
.evil-eye-root .evil-eye-container,.evil-eye-root canvas{width:100%!important;height:100%!important}
.site-header{z-index:50}
@media (max-width:800px){.evil-eye-root{opacity:.5!important}}
@media (prefers-reduced-motion:reduce){.evil-eye-root{opacity:.35!important}}
/* Ensure hero device is absolutely positioned on the far right */
.hero-device{position:absolute!important;z-index:3!important;}

/* Ensure all UI cards and text containers have solid backgrounds so the eye doesn't make them unreadable */
.catalog-copy, .player-copy, .platform-copy, .section-heading, .profile-card, .catalog-window, .player-window, .tv-frame, .pip-card {
    background: var(--bg) !important;
    position: relative;
    z-index: 2;
}
.catalog-copy, .player-copy, .platform-copy, .section-heading {
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
/* Opaque product panels orbit the fixed eye instead of covering it. */
:root{--eye-lane:clamp(250px,26vw,390px)}
.eye-safe-lane{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--eye-lane) minmax(0,1fr);column-gap:clamp(28px,4vw,72px);align-items:center}
.surface-card{background:var(--card)}
.catalog.eye-safe-lane{padding-top:145px;padding-bottom:150px;display:block}
.catalog.eye-safe-lane .section-heading{display:block;margin:0 0 48px}
.catalog.eye-safe-lane .section-heading .eyebrow{margin-bottom:20px}
.catalog.eye-safe-lane .catalog-layout{display:flex;flex-direction:column;gap:50px}
.catalog.eye-safe-lane .catalog-window{width:100%;padding:20px;grid-column:auto;grid-row:auto}
.editorial-header{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-bottom:60px}
.editorial-header h2{font-size:clamp(45px,6vw,80px);line-height:1;letter-spacing:-.08em;margin:0 0 30px;font-weight:800}
.editorial-header h2 span{color:var(--red)}
.editorial-right .lead{font-size:18px;line-height:1.6;color:var(--text);font-weight:500;margin-bottom:20px}
.editorial-right p{font-size:14px;line-height:1.7;color:var(--muted);max-width:420px}
.player-section.eye-safe-lane{grid-template-columns:minmax(0,1fr) var(--eye-lane) minmax(0,1fr);gap:0;padding-top:140px;padding-bottom:145px}
.player-section.eye-safe-lane .player-stage{grid-column:1;grid-row:1;height:360px;margin:0}
.player-section.eye-safe-lane .player-window{width:100%}
.player-section.eye-safe-lane .player-copy{grid-column:3;grid-row:1}
/* --- Landscape Series Detail Component --- */
.series-detail{padding-bottom:0;position:relative}
.landscape-backdrop{position:relative;width:100%;height:85vh;min-height:700px;background-size:cover;background-position:center top}
.backdrop-gradient{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,11,.2) 0%,rgba(10,10,11,.8) 50%,var(--bg) 100%),linear-gradient(to right,rgba(10,10,11,.9) 0%,transparent 50%)}
.landscape-glass-panel{position:absolute;bottom:0;left:0;right:0;height:55%;min-height:380px;border-top:1px solid rgba(255,255,255,.08);border-top-left-radius:24px;border-top-right-radius:24px;overflow:hidden;padding:40px;display:flex;align-items:flex-end}
.glass-background{position:absolute;inset:0;background:rgba(15,15,17,.75);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);z-index:-1}
.glass-content{display:flex;justify-content:space-between;align-items:flex-end;width:100%;max-width:var(--max);margin:0 auto;gap:60px}
.glass-hero-cluster{display:flex;gap:30px;align-items:flex-end;flex:1.2}
.glass-poster{width:160px;aspect-ratio:2/3;border-radius:12px;background-size:cover;background-position:center;box-shadow:0 15px 40px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1)}
.glass-info{display:flex;flex-direction:column;gap:12px}
.glass-badges{display:flex;gap:8px;font:10px DM Mono,monospace}
.badge-red{background:var(--red);color:#fff;padding:4px 8px;border-radius:4px;font-weight:600}
.badge-outline{border:1px solid rgba(255,255,255,.3);color:var(--muted);padding:4px 8px;border-radius:4px}
.glass-title{font-size:clamp(32px,4vw,48px);line-height:1;margin:0;font-weight:800;letter-spacing:-.04em}
.glass-meta{display:flex;align-items:center;gap:10px;font:12px DM Mono,monospace;color:var(--muted)}
.glass-meta .dot{color:var(--tertiary)}
.glass-meta .imdb{color:var(--gold);font-weight:700}
.glass-synopsis{font-size:14px;line-height:1.6;color:var(--text);opacity:.8;max-width:480px;margin:0}
.glass-actions{display:flex;gap:12px;margin-top:10px}
.btn-primary-app{background:#fff;color:#000;padding:12px 24px;border-radius:8px;font-weight:700;font-size:14px;border:none;cursor:pointer;transition:transform .2s}
.btn-primary-app:hover{transform:scale(1.05)}
.btn-secondary-app{background:rgba(255,255,255,.1);color:#fff;padding:12px 24px;border-radius:8px;font-weight:600;font-size:14px;border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:background .2s}
.btn-secondary-app:hover{background:rgba(255,255,255,.2)}
.btn-icon-app{background:rgba(255,255,255,.1);color:#fff;width:44px;height:44px;border-radius:8px;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;font-size:20px;cursor:pointer}
.glass-episodes{flex:1;display:flex;flex-direction:column;gap:20px}
.glass-tabs{display:flex;gap:24px;font-size:13px;color:var(--muted);font-weight:500;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:12px}
.glass-tabs .active{color:#fff;font-weight:700;position:relative}
.glass-tabs .active::after{content:'';position:absolute;bottom:-13px;left:0;right:0;height:2px;background:var(--red)}
.glass-episode-scroll{display:flex;gap:16px}
.glass-episode-card{width:180px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:8px;overflow:hidden;transition:transform .2s}
.glass-episode-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.08)}
.glass-episode-card.active{border-color:rgba(255,255,255,.3)}
.glass-episode-card .ep-thumb{height:100px;background-size:cover;background-position:center;position:relative}
.ep-play-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;font-size:24px;color:#fff}
.glass-episode-card .ep-info{padding:12px;font-size:11px}
.glass-episode-card .ep-info strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;font-size:12px}
.glass-episode-card .ep-info small{color:var(--muted)}
.ep-info strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.ep-info small{color:var(--muted)}
.profile-section.eye-safe-lane{padding-top:0;padding-bottom:145px}
.profile-section.eye-safe-lane .profile-card{grid-column:1;padding:28px;display:block}
.profile-section.eye-safe-lane .profile-avatar{margin-bottom:20px}
.profile-section.eye-safe-lane .profile-settings{margin-top:26px}
.platforms.eye-safe-lane{grid-template-columns:minmax(0,1fr) var(--eye-lane) minmax(0,1fr);gap:0;padding-top:140px;padding-bottom:145px}
.platforms.eye-safe-lane .platform-copy{grid-column:1;grid-row:1}
.platforms.eye-safe-lane .tv-visual{grid-column:3;grid-row:1;margin:0;width:100%}
.platforms.eye-safe-lane .tv-frame{width:100%;right:auto}
@media (max-width:800px){.eye-safe-lane,.player-section.eye-safe-lane,.series-detail.eye-safe-lane,.platforms.eye-safe-lane{display:block}.catalog.eye-safe-lane{padding-top:90px;padding-bottom:95px}.catalog.eye-safe-lane .section-heading{margin-bottom:40px}.catalog.eye-safe-lane .catalog-layout{display:block}.catalog.eye-safe-lane .catalog-copy{margin-top:35px}.player-section.eye-safe-lane,.series-detail.eye-safe-lane,.platforms.eye-safe-lane{padding-top:90px;padding-bottom:95px}.player-section.eye-safe-lane .player-stage{height:325px;margin-top:28px}.series-detail.eye-safe-lane .detail-window{aspect-ratio:auto;height:450px;margin-top:30px;transform:none}.profile-section.eye-safe-lane{padding-bottom:95px}.profile-section.eye-safe-lane .profile-card{padding:27px 23px}.profile-section.eye-safe-lane .profile-avatar{margin-bottom:24px}.platforms.eye-safe-lane .tv-visual{width:auto;margin-top:33px}}
/* Keep real product surfaces fully opaque; the eye only appears in the reserved gap. */

main,.site-footer{position:relative;z-index:1;transform:translateZ(0);will-change:transform}
.hero{background:radial-gradient(circle at 72% 32%,rgba(10,10,11,.34),transparent 46%)!important}
.download{background:transparent!important}
.surface-card,.catalog-window,.profile-card,.player-window,.pip-card,.tv-frame,.download-inner{opacity:1!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.pip-card{background:var(--surface)!important}
.download-inner{background:var(--card)!important}

/* Hero phone: a portrait version of the real Live TV screen anatomy. */
.hero-device{right:clamp(42px,8vw,118px)!important;top:15%!important;width:352px!important;height:650px!important}
.phone-shell{width:322px!important;height:624px!important;transform:rotate(0deg)!important;padding:8px!important;border-radius:45px!important;background:linear-gradient(145deg,#3a3a3e,#1d1d1f 30%,#111113 60%,#2a2a2e)!important;box-shadow:26px 35px 76px rgba(0,0,0,.78),0 0 0 1.5px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.15)!important}
.phone-shell,.device-note{opacity:1!important}
.phone-screen.tiviverse-live-screen{background:#0a0a0b!important;border-color:#2a2a2e!important;color:#f5f5f7;padding:0 13px 57px}
.app-status{height:38px;padding:13px 8px 0;display:flex;justify-content:space-between;font-size:8px;font-weight:700;letter-spacing:.03em}
.app-brand{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:-.04em}.app-brand img{width:19px;height:19px;border-radius:5px}.tiviverse-live-screen .app-top{padding:5px 7px 0}.tiviverse-live-screen .icon-button{background:#1c1c1f!important;border:1px solid #343438!important;color:#f5f5f7!important}
.app-welcome{margin:19px 7px 16px;display:flex;flex-direction:column;gap:5px}.app-welcome small{color:#e50914;font:8px DM Mono,monospace;letter-spacing:.12em}.app-welcome strong{font-size:25px;line-height:1;letter-spacing:-.07em}.app-welcome span{color:#a1a1a6;font-size:9px;line-height:1.4}
.app-category-row{display:flex;gap:7px;padding:0 7px 16px;overflow:hidden;white-space:nowrap}.app-category-row span{background:#1c1c1f;border:1px solid #303035;border-radius:8px;padding:7px 9px;color:#a1a1a6;font:8px DM Mono,monospace}.app-category-row .selected{background:#e50914;border-color:#e50914;color:#fff}
.live-channel-list{display:grid;gap:8px;padding:0 7px}.live-channel{min-height:64px;display:grid;grid-template-columns:39px 1fr auto;gap:9px;align-items:center;padding:8px;background:#141416;border:1px solid #29292d;border-radius:10px}.live-channel.active{border-color:#e50914;box-shadow:0 0 0 1px #e50914}.channel-logo{width:37px;height:37px;display:grid;place-items:center;border-radius:8px;font-size:15px;font-weight:800}.logo-news{background:#e50914}.logo-sport{background:#225f4d}.logo-cinema{background:#534326}.live-channel strong,.live-channel small{display:block}.live-channel strong{font-size:10px;letter-spacing:-.02em}.live-channel small{margin-top:4px;color:#a1a1a6;font-size:8px}.live-channel i{display:block;width:100%;height:2px;margin-top:6px;background:#303035}.live-channel i b{display:block;width:58%;height:100%;background:#e50914}.live-channel em{align-self:start;color:#a1a1a6;font:7px DM Mono,monospace;font-style:normal}
.app-bottom-nav{position:absolute;left:0;right:0;bottom:0;height:49px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;background:#141416;border-top:1px solid #29292d}.app-bottom-nav span{display:flex;flex-direction:column;align-items:center;gap:3px;color:#6e6e73;font-size:7px}.app-bottom-nav b{font-size:11px;font-weight:400}.app-bottom-nav .active{color:#e50914}.device-note{background:#141416!important;border:1px solid #303035;border-radius:8px;padding:9px 11px;color:#f5f5f7!important}.device-note b{color:#a1a1a6!important}
@media(max-width:800px){.hero-device{right:auto!important;top:auto!important;width:100%!important;height:560px!important}.phone-shell{width:286px!important;height:554px!important}.device-note{right:0!important;bottom:0!important}.app-welcome{margin-top:14px}.live-channel-list{gap:6px}.live-channel{min-height:56px}.app-category-row{padding-bottom:11px}.app-bottom-nav{height:45px}}

/* --- TIVIVERSE PREMIUM OVERHAUL --- */
/* Hero device adjustments */
.hero-device { transform: scale(1.08) rotate(-4deg); transform-origin: right center; z-index: 10 !important; }
.hero-copy h1 { font-size: clamp(65px, 8vw, 120px); letter-spacing: -0.05em; font-weight: 900; line-height: 0.92; }

/* Premium Live Card (Phone Mockup) */
.premium-live-card { margin: 0 7px 12px; height: 160px; border-radius: 12px; background-size: cover; background-position: center; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 12px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.live-badge { align-self: flex-start; background: var(--red); color: #fff; font: 8px DM Mono, monospace; padding: 4px 6px; border-radius: 4px; letter-spacing: 0.1em; }
.live-card-info h4 { margin: 0 0 2px; font-size: 11px; color: rgba(255,255,255,0.8); }
.live-card-info p { margin: 0; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.1; }

/* Real content adjustments */
.window-poster { background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,0.1); transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; }
.window-poster:hover { transform: scale(1.05); z-index: 2; box-shadow: 0 20px 40px rgba(0,0,0,0.6); }
.window-poster:after { display: none; } /* Remove CSS gradient overlay if real image is used */
.window-poster b { display: none; } /* Hide placeholder text */

.tv-hero { border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); padding: 25px; margin-top: 25px; }
.rail-poster { flex: 1; height: 50px; border-radius: 4px; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,0.1); opacity: 0.8; transition: 0.2s; }
.rail-poster:hover { opacity: 1; transform: translateY(-2px); }
.tv-rail i { display: none; } /* Hide old CSS placeholders */

/* Features Section */
.features-section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-top: 145px; padding-bottom: 145px; border-top: 1px solid var(--line); }
.feature-card { padding: 40px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.feature-card h3 { font-size: 38px; line-height: 1; letter-spacing: -0.06em; margin: 15px 0 20px; }
.feature-card h3 span { color: var(--muted); }
.feature-card p { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 90%; }
.pin-mockup { margin-top: 30px; display: flex; gap: 12px; }
.pin-mockup span { display: grid; place-items: center; width: 45px; height: 55px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 24px; color: var(--text); }
@media(max-width:800px){ .features-section { grid-template-columns: 1fr; padding-top: 90px; padding-bottom: 90px; gap: 20px; } .feature-card { padding: 25px; } .feature-card h3 { font-size: 32px; } }

/* Fix missing player background settings */
.player-scene { background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); }
.player-scene:after { display: none; }
.pip-preview { background-size: cover !important; background-position: center !important; position: relative; }
.pip-preview span { position: absolute; z-index: 2; }
.pip-preview:after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.4); }

/* =========================================================
   COMPREHENSIVE MOBILE RESPONSIVE ENGINE (< 900px & < 500px)
   ========================================================= */

@media (max-width: 900px) {
  :root {
    --eye-lane: 0px;
  }

  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  .section-pad {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* 1. Header & Mobile Menu */
  .site-header {
    height: 68px !important;
    padding: 0 18px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    background: rgba(10, 10, 11, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    z-index: 999 !important;
  }

  .desktop-nav,
  .site-header .header-cta {
    display: none !important;
  }

  .menu-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px;
    cursor: pointer;
    padding: 0 !important;
    z-index: 1001;
    transition: background 0.2s;
  }

  .menu-toggle:active {
    background: rgba(255, 255, 255, 0.12) !important;
  }

  .menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  .mobile-nav {
    position: fixed !important;
    top: 76px !important;
    left: 14px !important;
    right: 14px !important;
    background: rgba(18, 18, 22, 0.97) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 20px !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-12px) !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    z-index: 1000 !important;
  }

  .mobile-nav.open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  .mobile-nav a {
    display: flex;
    align-items: center;
    padding: 13px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
    border-radius: 12px;
    transition: all 0.2s;
    text-decoration: none;
  }

  .mobile-nav a:hover,
  .mobile-nav a.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }

  .mobile-nav a[href="#download"] {
    margin-top: 10px;
    background: var(--red);
    color: #fff !important;
    font-weight: 700;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(229, 9, 20, 0.4);
  }

  /* 2. Hero Section */
  .hero {
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    padding-top: 110px !important;
    padding-bottom: 60px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  .hero-copy {
    position: relative !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    z-index: 3 !important;
  }

  .hero-copy .eyebrow {
    margin-bottom: 16px !important;
  }

  .hero-copy h1,
  .hero h1 {
    font-size: clamp(38px, 10vw, 56px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.05em !important;
    margin: 0 0 18px !important;
    text-align: center !important;
  }

  .hero-lede {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    max-width: 360px !important;
    margin: 0 auto 24px !important;
    text-align: center !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 300px !important;
    gap: 12px !important;
    margin: 0 auto !important;
  }

  .hero-actions .button {
    width: 100% !important;
    justify-content: center !important;
    padding: 15px 20px !important;
    font-size: 13px !important;
  }

  .hero-actions .text-link {
    display: inline-flex !important;
    justify-content: center !important;
    padding: 8px !important;
    font-size: 13px !important;
  }

  .hero-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 18px !important;
    margin-top: 28px !important;
    font-size: 9px !important;
  }

  .hero-device {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 330px !important;
    height: auto !important;
    margin: 36px auto 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    z-index: 3 !important;
  }

  .phone-shell {
    width: 100% !important;
    max-width: 295px !important;
    height: 560px !important;
    transform: none !important;
    margin: 0 auto !important;
    border-radius: 40px !important;
    padding: 8px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
  }

  .phone-screen {
    border-radius: 32px !important;
  }

  .device-note {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 16px !important;
    font-size: 9px !important;
  }

  .device-shadow,
  .scroll-cue {
    display: none !important;
  }

  /* 3. Eye safe lanes reset */
  .eye-safe-lane,
  .player-section.eye-safe-lane,
  .profile-section.eye-safe-lane,
  .platforms.eye-safe-lane,
  .catalog.eye-safe-lane {
    display: block !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  /* 4. Editorial Header */
  .editorial-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .editorial-header h2 {
    font-size: clamp(34px, 8.5vw, 48px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.06em !important;
    margin: 0 0 14px !important;
  }

  .editorial-right .lead {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
  }

  .editorial-right p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  /* 5. Catalog Section */
  .catalog {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
  }

  .catalog-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .catalog-window {
    padding: 14px !important;
    border-radius: 16px !important;
    width: 100% !important;
  }

  .app-top-bar {
    gap: 10px !important;
    padding-bottom: 12px !important;
  }

  .app-main-tabs {
    gap: 14px !important;
    font-size: 12px !important;
  }

  .app-workspace {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .app-sidebar {
    display: flex !important;
    flex-direction: column !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-right: 0 !important;
    padding-bottom: 12px !important;
    height: auto !important;
  }

  .sidebar-header {
    display: none !important;
  }

  .sidebar-menu {
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    white-space: nowrap !important;
  }

  .sidebar-menu::-webkit-scrollbar {
    display: none;
  }

  .menu-item {
    padding: 7px 12px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  .window-header {
    margin-bottom: 12px !important;
  }

  .window-title {
    font-size: 15px !important;
  }

  .window-search {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  .window-grid {
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)) !important;
    gap: 10px !important;
  }

  .window-poster {
    border-radius: 6px !important;
  }

  /* 6. Player Section */
  .player-section {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  .player-copy {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .player-copy h2 {
    font-size: clamp(34px, 8.5vw, 48px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.06em !important;
    margin: 0 0 16px !important;
  }

  .player-copy p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
  }

  .player-stage {
    grid-column: auto !important;
    grid-row: auto !important;
    height: auto !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
  }

  .player-window {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    border-width: 4px !important;
    border-radius: 12px !important;
    transform: none !important;
  }

  .pip-card {
    width: 125px !important;
    padding: 8px 10px !important;
    right: 8px !important;
    bottom: 8px !important;
    border-radius: 8px !important;
  }

  .pip-card small {
    font-size: 7px !important;
  }

  .pip-card strong {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .pip-preview {
    height: 44px !important;
    margin: 5px 0 !important;
    border-radius: 4px !important;
  }

  .pip-preview span {
    width: 20px !important;
    height: 20px !important;
    font-size: 8px !important;
  }

  .player-toolbar {
    padding: 10px 12px !important;
    gap: 8px !important;
    font-size: 9px !important;
  }

  .scene-play {
    width: 38px !important;
    height: 38px !important;
    font-size: 11px !important;
  }

  /* 7. Series Detail Section */
  .series-detail {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
  }

  .landscape-backdrop {
    height: auto !important;
    min-height: unset !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
  }

  .backdrop-gradient {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom, rgba(10,10,11,0.1) 0%, rgba(10,10,11,0.85) 45%, rgba(10,10,11,0.98) 100%) !important;
  }

  .landscape-glass-panel {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    min-height: unset !important;
    border-radius: 16px !important;
    padding: 18px 14px !important;
    margin: 120px 8px 8px 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: block !important;
    z-index: 2 !important;
  }

  .glass-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  .glass-hero-cluster {
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;
    align-items: flex-start !important;
    flex: none !important;
  }

  .glass-poster {
    width: 88px !important;
    min-width: 88px !important;
    aspect-ratio: 2 / 3 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important;
  }

  .glass-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .glass-title {
    font-size: clamp(20px, 6vw, 28px) !important;
    margin: 0 !important;
    line-height: 1.05 !important;
  }

  .glass-meta {
    font-size: 10px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .glass-synopsis {
    font-size: 12px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .glass-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 4px !important;
  }

  .btn-primary-app,
  .btn-secondary-app {
    padding: 9px 14px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }

  .btn-icon-app {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    border-radius: 6px !important;
  }

  .glass-episodes {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .glass-tabs {
    gap: 16px !important;
    font-size: 12px !important;
    padding-bottom: 8px !important;
  }

  .glass-episode-scroll {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
  }

  .glass-episode-scroll::-webkit-scrollbar {
    height: 4px;
  }

  .glass-episode-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
  }

  .glass-episode-card {
    min-width: 135px !important;
    max-width: 135px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
  }

  .glass-episode-card .ep-thumb {
    height: 76px !important;
  }

  .glass-episode-card .ep-info {
    padding: 8px !important;
  }

  .glass-episode-card .ep-info strong {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }

  .glass-episode-card .ep-info small {
    font-size: 9px !important;
  }

  /* 8. Features Section */
  .features-section {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-top: 75px !important;
    padding-bottom: 75px !important;
  }

  .feature-card {
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }

  .feature-card h3 {
    font-size: clamp(24px, 6.5vw, 32px) !important;
    margin: 10px 0 14px !important;
  }

  .feature-card p {
    font-size: 13.5px !important;
    max-width: 100% !important;
  }

  .pin-mockup {
    margin-top: 20px !important;
    gap: 8px !important;
  }

  .pin-mockup span {
    width: 38px !important;
    height: 48px !important;
    font-size: 18px !important;
  }

  /* 9. Profile Section */
  .profile-section {
    padding-top: 0 !important;
    padding-bottom: 75px !important;
  }

  .profile-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 24px 20px !important;
    border-radius: 16px !important;
    grid-template-columns: 1fr !important;
  }

  .profile-avatar {
    width: 60px !important;
    height: 60px !important;
    font-size: 24px !important;
    margin-bottom: 0 !important;
  }

  .profile-card h2 {
    font-size: clamp(28px, 7vw, 36px) !important;
    margin-bottom: 10px !important;
  }

  .profile-card p {
    font-size: 13.5px !important;
  }

  .profile-settings {
    margin-top: 6px !important;
    padding: 14px !important;
    border-radius: 10px !important;
    width: 100% !important;
  }

  /* 10. Platforms Section */
  .platforms {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  .platform-copy {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .platform-copy h2 {
    font-size: clamp(34px, 8.5vw, 48px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.06em !important;
    margin: 0 0 16px !important;
  }

  .platform-copy p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
  }

  .platform-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }

  .platform-list span {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }

  .tv-visual {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    margin-top: 0 !important;
  }

  .tv-frame {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 16px !important;
    border-width: 5px !important;
    border-radius: 14px !important;
  }

  .tv-top {
    font-size: 9px !important;
  }

  .tv-hero {
    margin-top: 14px !important;
    padding: 16px 14px !important;
  }

  .tv-hero small {
    font-size: 8px !important;
  }

  .tv-hero strong {
    font-size: 20px !important;
    margin: 6px 0 !important;
    line-height: 1.1 !important;
  }

  .tv-cta {
    font-size: 10px !important;
  }

  .tv-rail {
    display: flex !important;
    gap: 8px !important;
    margin-top: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }

  .rail-poster {
    min-width: 62px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  .tv-base {
    display: none !important;
  }

  /* 11. Performance Section */
  .performance {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
  }

  .performance-heading {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 36px !important;
  }

  .performance-heading h2 {
    font-size: clamp(34px, 8.5vw, 48px) !important;
    min-width: 100% !important;
  }

  .performance-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .metric {
    min-height: unset !important;
    padding: 16px 0 !important;
  }

  .metric strong {
    font-size: 52px !important;
  }

  .metric p {
    font-size: 11px !important;
    margin-top: 10px !important;
  }

  .metric-rule {
    display: none !important;
  }

  /* 12. Download Section */
  .download {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .download-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 30px 20px !important;
    border-radius: 20px !important;
    text-align: center !important;
    align-items: center !important;
  }

  .download h2 {
    font-size: clamp(34px, 8.5vw, 48px) !important;
  }

  .download-actions {
    align-items: center !important;
    width: 100% !important;
    gap: 14px !important;
  }

  .app-store {
    width: 100% !important;
    max-width: 220px !important;
    justify-content: center !important;
  }

  /* 13. Footer */
  .site-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 20px !important;
    padding: 40px 20px !important;
    min-height: unset !important;
  }

  .site-footer p {
    margin: 0 !important;
  }

  .footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px 18px !important;
    margin: 10px 0 !important;
  }

  .copyright {
    position: static !important;
    margin-top: 10px !important;
  }
}

/* Extra small mobile adjustments (< 400px) */
@media (max-width: 400px) {
  .phone-shell {
    max-width: 275px !important;
    height: 520px !important;
  }

  .window-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .glass-hero-cluster {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .glass-info {
    align-items: center !important;
  }

  .glass-actions {
    justify-content: center !important;
  }
}