*{box-sizing:border-box;margin:0;padding:0}
html{background:#06163a}
body{min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#eaf2ff;background:radial-gradient(1200px 600px at 20% -10%,#0f52ba55,transparent 60%),radial-gradient(900px 500px at 100% 0%,#00c2cb33,transparent 55%),linear-gradient(180deg,#06163a,#0a2152 70%,#06163a);line-height:1.5}
.wrap{max-width:1080px;margin:0 auto;padding:28px 18px 56px}
header{display:flex;flex-direction:column;gap:6px;margin:18px 0 30px}
h1{font-size:clamp(28px,6vw,46px);letter-spacing:.5px}
h1 span{color:#00c2cb}
.sub{color:#b9cdf2;font-size:clamp(15px,3.6vw,18px)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.card{display:flex;flex-direction:column;background:#0b2a6b66;border:1px solid #00c2cb44;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,border-color .15s,box-shadow .15s}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:#00c2cb;box-shadow:0 8px 30px #00c2cb22;outline:none}
.thumb{aspect-ratio:16/9;background:#0a2152;display:block;width:100%;object-fit:cover}
.body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.tag{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#00c2cb;font-weight:700}
h2{font-size:22px}
p{color:#c9d8f5;font-size:15px}
.ctl{font-size:13px;color:#8fb0e8}
.play{margin-top:auto;align-self:flex-start;background:#00c2cb;color:#032a33;font-weight:800;padding:10px 20px;border-radius:999px;font-size:15px}
.soon{border-style:dashed;opacity:.8;justify-content:center;align-items:center;text-align:center;padding:40px 18px;min-height:260px}
.soon h2{color:#8fb0e8}
footer{margin-top:44px;text-align:center;color:#8fb0e8;font-size:14px}
footer strong{color:#00c2cb}