:root{--ink:#ffffff;--bg:#0f1220;--header:#151935;--nav:#23274a;--banner:#7c9cf5;--muted:#aab2d6;--card:#141938;--stroke:#2a2f5b;--btn:#5865F2}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}
header{display:flex;align-items:center;padding:10px 20px;background:var(--header)}
.logo{font-weight:800;font-size:20px}
nav{background:var(--nav);display:flex;justify-content:center;gap:18px;padding:10px}
nav a{color:#fff;text-decoration:none;font-weight:600}
.banner{background:url('imagez/baaaaaaaa.gif') center/cover no-repeat;text-align:center;padding:40px 20px;font-size:24px;font-weight:700;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5)}

/* GRID OF ITEMS */
.wrap{max-width:1100px;margin:0 auto;padding:22px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--stroke);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .2s ease, box-shadow .25s ease;will-change:transform, box-shadow}
.thumb{aspect-ratio:16/9;background:#0e1330;display:block;object-fit:cover;width:100%}
.meta{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.title{font-weight:700;margin:0}
.desc{margin:0;color:var(--muted);font-size:14px;line-height:1.4}
.actions{padding:0 14px 14px}
.card:hover, .card:focus-within{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,0,170,.35),0 8px 20px rgba(255,0,170,.18),0 0 28px rgba(255,0,170,.3)}

@media (prefers-reduced-motion: reduce){
  .card{transition:none}
  .card:hover, .card:focus-within{transform:none}
}
.btn{appearance:none;border:none;display:inline-flex;align-items:center;gap:10px;background:var(--btn);color:#fff;font-weight:700;border-radius:10px;padding:10px 14px;text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn svg{display:block}
footer{text-align:center;padding:20px;font-size:14px;color:#aaa;background:var(--header)}