*{box-sizing:border-box}html,body{margin:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(1200px 600px at 20% -10%,#2a2f6b 0,transparent 60%),radial-gradient(900px 500px at 110% 10%,#5b1f5e 0,transparent 55%),#0d0f1a;color:#e9ebf5;min-height:100vh}
header{max-width:1100px;margin:0 auto;padding:56px 20px 24px}
h1{font-size:clamp(2rem,6vw,3.4rem);margin:0;letter-spacing:-.02em;background:linear-gradient(90deg,#fff,#a9b4ff 60%,#ff9bd2);-webkit-background-clip:text;background-clip:text;color:transparent}
header p{color:#aab0c8;font-size:1.1rem;max-width:560px}
main{max-width:1100px;margin:0 auto;padding:0 20px 60px;display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.cover{aspect-ratio:16/10;background:#1a1d33;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover;display:block}
.body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.body h2{margin:0;font-size:1.35rem}.body p{margin:0;color:#b8bdd4;line-height:1.5;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px}.tags span{font-size:.75rem;padding:3px 9px;border-radius:99px;background:rgba(169,180,255,.15);color:#c9d0ff}
.play{margin-top:6px;display:inline-block;text-align:center;padding:12px 18px;border-radius:12px;background:linear-gradient(90deg,#6c7bff,#c45cff);color:#fff;font-weight:700;text-decoration:none}
.play:hover{filter:brightness(1.1)}
.soon{opacity:.55;border-style:dashed;justify-content:center;align-items:center;min-height:200px;color:#aab0c8}
footer{text-align:center;color:#6f7590;padding:20px;font-size:.9rem}footer a{color:#a9b4ff}