:root{--accent:#2e91fc;--slate:#252525;--ink:#2b2f33;--muted:#6b7682;--bg:#f4f7fb;--card:#fff;--line:#e7ebf0}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
h1,h2,.brand span{font-family:'Montserrat',sans-serif}
a{text-decoration:none;color:inherit}
.topbar{display:flex;align-items:center;height:62px;padding:0 24px;background:var(--slate);color:#fff}
.topbar .brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.topbar .brand img{height:34px}
.hero{max-width:1100px;margin:0 auto;padding:46px 24px 10px;text-align:center}
.hero h1{margin:0 0 10px;font-size:34px;color:var(--slate)}
.hero p{margin:0;color:var(--muted);font-size:16px}
.grid{max-width:1100px;margin:0 auto;padding:30px 24px 50px;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(37,37,37,.06);transition:.18s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(37,37,37,.14);border-color:var(--accent)}
.cover{position:relative;aspect-ratio:16/9;background:#dfe6ef center/cover no-repeat}
.badge{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;font-family:'Montserrat';font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:5px 11px;border-radius:999px}
.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.card-body h2{margin:0 0 8px;font-size:18px;color:var(--slate);line-height:1.25}
.meta{font-size:13px;color:var(--muted);margin-bottom:16px}
.go{margin-top:auto;font-family:'Montserrat';font-weight:600;font-size:14px;color:var(--accent)}
footer{text-align:center;color:var(--muted);font-size:12.5px;padding:24px}
@media(max-width:600px){.hero h1{font-size:26px}}