:root{--pink:#ff3f77;--white:#fff;--muted:#94959c;--max:1440px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#000;color:#fff;font-family:"DM Sans",Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;width:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar{position:fixed;inset:0 0 auto;height:92px;background:rgba(27,27,27,.68);backdrop-filter:blur(3px);z-index:100}.topbar-inner{max-width:var(--max);height:100%;margin:auto;padding:0 92px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:10px;font-size:29px;font-weight:800}.logo-mark{width:49px;height:49px;border-radius:12px 12px 12px 5px;background:linear-gradient(145deg,#ff6b95,var(--pink));display:grid;place-items:center;box-shadow:0 0 22px rgba(255,63,119,.24)}.logo-mark i{display:block;margin-left:4px;width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:16px solid #fff}.nav{display:flex;align-items:center;gap:53px;font-size:22px}.nav a{transition:color .2s}.nav a:hover{color:var(--pink)}.menu-toggle{display:none;background:none;border:0;color:#fff;padding:8px}.menu-toggle>span{display:block;width:25px;height:2px;background:#fff;margin:5px}
.hero{height:1024px;max-width:var(--max);margin:auto;position:relative;display:flex;align-items:center;padding:92px 60px 0 92px;overflow:hidden;background:#000}.hero-bg{position:absolute;inset:92px 0 0;background:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.88) 32%,rgba(0,0,0,.45) 68%,rgba(0,0,0,.78) 100%),url("assets/home-redesign.png") center/cover no-repeat;opacity:.5}.hero::before{content:"";position:absolute;inset:92px 0 0;background:radial-gradient(circle at 77% 55%,rgba(185,0,64,.27),transparent 31%)}.hero-copy{position:relative;z-index:4;width:550px;flex:0 0 550px}.hero-copy h1{font-size:60px;line-height:1.08;margin:0;font-weight:800}.hero-copy h2{font-size:30px;line-height:1.25;margin:31px 0 0;font-weight:700}.hero-copy p{width:550px;color:#a5a6ab;font-size:20px;line-height:1.55;margin:29px 0 0}.store-row{display:flex;gap:58px;margin-top:68px}.store-button{width:200px;height:70px;border-radius:10px;background:#fff;color:#121212;display:flex;align-items:center;padding:0 17px;gap:12px;box-shadow:0 5px 20px rgba(0,0,0,.25);transition:transform .2s}.store-button:hover{transform:translateY(-3px)}.store-button small{display:block;font-size:9px;letter-spacing:.5px}.store-button strong{display:block;font-size:21px;line-height:1.05}.tv-store-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--pink),#c51452);display:grid;place-items:center;color:#fff;font-size:16px}.smart-store-icon{width:39px;height:30px;border:3px solid #161616;border-radius:5px;display:grid;place-items:center;font-weight:800;font-size:12px}
.tv-stage{width:680px;height:520px;position:relative;z-index:3;margin-left:55px;display:flex;flex-direction:column;align-items:center;justify-content:center}.signal-rings{position:absolute;left:50%;top:48%;width:650px;height:650px;transform:translate(-50%,-50%);z-index:-1}.signal-rings i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,0,83,.25);box-shadow:0 0 25px rgba(255,0,83,.12)}.signal-rings i:nth-child(2){inset:75px}.signal-rings i:nth-child(3){inset:150px;background:radial-gradient(circle,rgba(234,0,77,.23),transparent 64%)}.television{position:relative;width:650px;padding:12px 12px 18px;border-radius:30px;background:linear-gradient(145deg,#555963,#111318 48%,#333640);box-shadow:inset 0 1px 2px rgba(255,255,255,.35),0 30px 55px rgba(0,0,0,.6)}.television-screen{aspect-ratio:16/9;overflow:hidden;border-radius:19px;background:#000}.television-screen img{height:100%;object-fit:cover}.television-led{position:absolute;right:28px;bottom:7px;width:4px;height:4px;border-radius:50%;background:var(--pink);box-shadow:0 0 7px var(--pink)}.television-neck{width:80px;height:38px;background:linear-gradient(90deg,#15171c,#4c4f57,#111318);clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}.television-base{width:260px;height:12px;border-radius:50%;background:linear-gradient(#555862,#111318);box-shadow:0 9px 18px rgba(0,0,0,.65)}
.content-panel{max-width:var(--max);margin:auto;padding:55px 92px 100px;background:#050506;box-shadow:0 -4px 13px rgba(0,0,0,.75)}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;height:756px}.feature-card{position:relative;border-radius:14px;overflow:hidden;padding:52px 290px 42px 43px;background:linear-gradient(135deg,#202126,#121317 70%);border:1px solid rgba(255,255,255,.035)}.feature-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 84% 40%,rgba(255,63,119,.18),transparent 35%)}.feature-card h3{position:relative;margin:0;font-size:30px;line-height:1.2}.feature-card p{position:relative;color:#92949a;font-size:18px;line-height:1.5;margin:21px 0 0;max-width:340px}.feature-art{position:absolute;right:60px;top:80px;color:var(--pink)}.play-art{width:125px;height:125px;border:4px solid rgba(255,63,119,.5);border-radius:50%;display:grid;place-items:center;font-size:50px;padding-left:9px;box-shadow:0 0 50px rgba(255,63,119,.2)}.episode-art{width:180px;height:160px}.episode-art>*{position:absolute;display:grid;place-items:center;width:80px;height:110px;border-radius:11px;background:linear-gradient(145deg,#34353c,#17181c);border:1px solid rgba(255,255,255,.13);font-style:normal;font-size:22px}.episode-art b{left:0;top:32px;transform:rotate(-12deg)}.episode-art i{left:50px;top:8px;z-index:2;color:#fff}.episode-art em{right:0;top:37px;transform:rotate(12deg)}.dpad-art{width:150px;height:150px;border-radius:50%;border:18px solid #282a30;background:#17181c;display:grid;place-items:center;box-shadow:0 0 45px rgba(255,63,119,.18)}.dpad-art b{width:61px;height:61px;border-radius:50%;background:var(--pink);display:grid;place-items:center;color:#fff}.cc-art{font-size:51px;font-weight:800;border:4px solid var(--pink);border-radius:18px;padding:24px 20px;top:98px;right:78px}.catalog-section{margin-top:47px}.section-title-row{height:72px;display:flex;align-items:center;justify-content:space-between}.section-title-row h2{font-size:36px;margin:0}.arrows{display:flex;gap:6px}.arrows span{width:48px;height:48px;border-radius:50%;background:#1e1f23;display:grid;place-items:center;font-size:34px;color:#94969b}.trend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:23px}.trend-card{height:350px;border-radius:10px;overflow:hidden;background:#191a1d;display:flex;flex-direction:column}.trend-image{height:225px;overflow:hidden}.trend-image img{height:100%;object-fit:cover}.crop-a img{object-position:center 38%}.crop-b img{object-position:center 28%}.crop-c img{object-position:center}.trend-copy{flex:1;padding:14px 20px}.trend-copy>div{display:flex;align-items:center;justify-content:space-between;gap:15px}.trend-copy h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-size:20px}.trend-copy span{color:var(--pink);font-size:14px}.trend-copy p{font-size:15px;line-height:1.45;color:#909198;margin:13px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.popular-section{margin-top:45px}.poster-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:20px}.poster-grid article{min-width:0}.poster{height:280px;border-radius:10px;overflow:hidden;background:#18191d}.poster img{height:100%;width:600%;max-width:none;object-fit:cover}.poster-1 img{transform:translateX(0)}.poster-2 img{transform:translateX(-16.66%)}.poster-3 img{transform:translateX(-33.33%)}.poster-4 img{transform:translateX(-50%)}.poster-5 img{transform:translateX(-66.66%)}.poster-6 img{transform:translateX(-83.33%)}.poster-grid h3{font-size:16px;margin:13px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.poster-grid p{color:#8e9097;font-size:14px;margin:5px 0 0}.release-section{margin-top:50px}.release-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}.release-grid article{background:#141519;border-radius:12px;overflow:hidden}.release-grid img{height:305px;object-fit:cover}.release-grid article>div{padding:25px 28px 31px}.release-grid span{font-size:12px;color:var(--pink);font-weight:700;letter-spacing:1.5px}.release-grid h3{font-size:25px;margin:10px 0 0}.release-grid p{color:#96979d;font-size:16px;line-height:1.6;margin:12px 0 0}
footer{background:#111214;padding:75px 0 30px}.footer-inner{max-width:1256px;margin:auto;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:70px}.footer-inner .logo{font-size:25px}.footer-inner .logo-mark{width:40px;height:40px}.footer-inner .logo-mark i{border-top-width:9px;border-bottom-width:9px;border-left-width:13px}.footer-inner p,.footer-inner a{color:#94959a}.footer-inner p{font-size:16px}.footer-inner>div:not(:first-child){display:flex;flex-direction:column;gap:13px}.footer-inner h3{font-size:20px;margin:0 0 8px}.footer-inner a:hover{color:#fff}.copyright{max-width:1256px;margin:55px auto 0;padding-top:25px;border-top:1px solid #27282c;color:#74767c;font-size:14px}
@media(max-width:1100px){.topbar-inner{padding:0 45px}.hero{height:auto;min-height:980px;padding:145px 50px 80px;display:block}.hero-copy{width:min(550px,100%);margin:auto;text-align:center}.hero-copy p{width:auto}.store-row{justify-content:center}.tv-stage{margin:70px auto 0;width:min(680px,100%)}.content-panel{padding:50px 45px 90px}.feature-grid{height:auto}.feature-card{min-height:340px;padding:42px 220px 38px 35px}.feature-art{right:40px;transform:scale(.8)}.poster-grid{grid-template-columns:repeat(3,1fr)}.poster{height:350px}.footer-inner,.copyright{width:calc(100% - 90px)}}
@media(max-width:720px){.topbar{height:76px}.topbar-inner{padding:0 20px}.logo{font-size:21px}.logo-mark{width:36px;height:36px;border-radius:9px}.logo-mark i{border-top-width:8px;border-bottom-width:8px;border-left-width:12px}.menu-toggle{display:block;z-index:2}.nav{position:fixed;inset:0;background:rgba(0,0,0,.96);display:flex;flex-direction:column;justify-content:center;gap:32px;font-size:31px;opacity:0;pointer-events:none;transition:.2s}.menu-open .nav{opacity:1;pointer-events:auto}.hero{padding:120px 20px 65px;min-height:810px}.hero-bg{inset:76px 0 0}.hero-copy{text-align:left}.hero-copy h1{font-size:48px}.hero-copy h2{font-size:25px;margin-top:22px}.hero-copy p{font-size:16px;line-height:1.6;margin-top:20px}.store-row{margin-top:35px;gap:12px;justify-content:flex-start}.store-button{width:calc(50% - 6px);height:60px;padding:0 10px;gap:8px}.store-button strong{font-size:15px}.store-button small{font-size:7px}.tv-store-icon{width:32px;height:32px}.smart-store-icon{width:33px;height:26px}.tv-stage{height:290px;margin-top:35px}.television{width:100%;padding:7px 7px 11px;border-radius:16px}.television-screen{border-radius:10px}.television-neck{height:22px}.television-base{width:150px;height:8px}.signal-rings{width:390px;height:390px}.signal-rings i:nth-child(2){inset:45px}.signal-rings i:nth-child(3){inset:90px}.content-panel{padding:25px 18px 70px}.feature-grid{grid-template-columns:1fr;gap:15px}.feature-card{min-height:300px;padding:28px 155px 28px 24px}.feature-card h3{font-size:24px}.feature-card p{font-size:15px}.feature-art{right:15px;top:78px;transform:scale(.65)}.section-title-row h2{font-size:27px}.arrows{display:none}.trend-grid{grid-template-columns:1fr;gap:16px}.trend-card{height:330px}.poster-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.poster-grid article{flex:0 0 62%;scroll-snap-align:start}.poster{height:320px}.release-grid{grid-template-columns:1fr}.release-grid img{height:220px}.footer-inner{width:calc(100% - 40px);grid-template-columns:1fr;gap:35px}.copyright{width:calc(100% - 40px)}body.menu-open{overflow:hidden}}

/* Poster crops from the TV app screen: keep each title inside its own card. */
.poster-grid{grid-template-columns:repeat(5,1fr)}
.poster{height:310px;background-color:#18191d;background-image:url("assets/home-redesign.png");background-repeat:no-repeat;background-size:845% auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.poster img{width:1px;height:1px;opacity:0}
.poster-1{background-position:4.8% 52%}.poster-2{background-position:24.7% 52%}.poster-3{background-position:44.2% 52%}.poster-4{background-position:63.7% 52%}.poster-5{background-position:83.3% 52%}
@media(max-width:1100px){.poster-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.poster-grid{display:flex}.poster{height:320px}}