*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#fff;background:#07070a;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
img{display:block;max-width:100%}
.page{color:#fff;background:radial-gradient(circle at 14% -8%,#ff43b838,#0000 28%),radial-gradient(circle at 92% 10%,#745bff29,#0000 24%),linear-gradient(#120913 0%,#08080b 56%,#07070a 100%);min-height:100vh}
.shell{min-height:100vh;padding:max(env(safe-area-inset-top),12px) 14px 92px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;font-size:30px;font-weight:900;letter-spacing:-.04em;line-height:1}
.brand img{width:39px;height:39px;border-radius:12px;object-fit:cover;flex:none}
.age{color:#ffffffc2;background:#00000047;border:1px solid #ffffff1f;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:900}
.download-panel,.quota{background:#ffffff0e;border:1px solid #ffffff14;box-shadow:0 18px 48px #00000038}
.download-panel{border-radius:22px;display:grid;gap:12px;padding:18px}
.copy p,.section-head p{color:#ff8ce3;margin:0;font-size:11px;font-weight:900}
.copy h1{color:#fff;margin:8px 0;font-size:30px;font-weight:900;line-height:1.05;letter-spacing:0}
.copy span,.quota span{color:#ffffffad;font-size:12px;font-weight:600;line-height:1.45}
.cta,.sticky{display:block;text-align:center;text-decoration:none;color:#fff;background:linear-gradient(135deg,#ff48d0,#765cff);border:0;border-radius:18px;width:100%;padding:14px 12px;font-size:14px;font-weight:900;box-shadow:0 14px 34px #ff48d042}
.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.benefits span{color:#ffffffd6;text-align:center;background:#ffffff12;border-radius:14px;min-width:0;padding:8px 4px;font-size:10px;font-weight:900}
.quota{border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:13px 14px}
.quota strong{color:#fff;flex:none;font-size:13px;font-weight:900}
.quota span{text-align:right}
.videos{margin-top:18px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.section-head h2{color:#fff;margin:4px 0 0;font-size:18px;font-weight:900}
.section-head button{color:#ffffffdb;background:#ffffff14;border:1px solid #ffffff1a;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:900}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-inline:-12px;padding:0 12px}
.card{display:block;color:inherit;text-decoration:none;background:#16161c;border-radius:12px;overflow:hidden;cursor:pointer}
.poster{position:relative;width:100%;padding-bottom:56.25%;background:#101014}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 45%,#0000008a 100%);pointer-events:none}
.duration{position:absolute;right:6px;bottom:6px;z-index:1;color:#fff;background:#0009;border-radius:4px;padding:2px 4px;font-size:10px;font-weight:700}
.play{position:absolute;left:50%;top:50%;z-index:1;width:40px;height:40px;margin:-20px 0 0 -20px;display:flex;align-items:center;justify-content:center;padding-left:2px;border-radius:999px;background:#ff48d0cc;color:#fff;font-size:14px;box-shadow:0 0 18px #ff48d066;opacity:0;pointer-events:none;transition:opacity .2s}
.card:hover .play,.card:focus-within .play{opacity:1}
.meta{padding:8px}
.meta h3{color:#fff;font-size:12px;font-weight:500;line-height:16px;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta p{display:flex;gap:8px;color:#ffffff8a;font-size:10px}
.sticky{position:fixed;left:16px;right:16px;bottom:max(env(safe-area-inset-bottom),12px);z-index:20;width:auto;box-shadow:0 16px 36px #00000061,0 12px 32px #ff48d047}
@media (min-width:760px){
  .shell{max-width:760px;margin:0 auto}
  .download-panel{grid-template-columns:1fr 220px;align-items:end}
  .benefits{grid-column:1 / -1}
  .sticky{width:min(520px,100vw - 32px);left:50%;right:auto;transform:translateX(-50%)}
}