:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#182235;background:#f4f6f8;line-height:1.5}
.wrap{width:min(1100px,calc(100% - 24px));margin:24px auto 70px}
.hero,section,footer{background:#fff;border:1px solid #dce1e8;border-radius:18px;padding:clamp(18px,4vw,34px);margin-bottom:16px}
.hero{background:linear-gradient(135deg,#182235,#264c80);color:#fff}
.hero h1{font-size:clamp(2rem,6vw,3.2rem);line-height:1.05;margin:.3rem 0 1rem;max-width:700px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:850;font-size:.75rem;color:#ee6b37}

.filters{display:flex;flex-wrap:wrap;gap:8px;padding:14px 4px;margin-bottom:8px}
.filters button{border:1px solid #aab5c5;background:#fff;color:#182235;border-radius:999px;padding:.5rem 1rem;font-weight:700;font-size:.85rem;cursor:pointer}
.filters button[aria-pressed="true"]{background:#182235;color:#fff;border-color:#182235}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card{border:1px solid #dce1e8;border-radius:16px;overflow:hidden;background:#f8f9fb;display:flex;flex-direction:column}
.card-media{position:relative;aspect-ratio:4/3;background:#e2e6ec}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.tag{position:absolute;top:10px;left:10px;background:#ee6b37;color:#fff;font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;padding:.3rem .6rem;border-radius:999px}
.card-body{padding:16px;display:flex;flex-direction:column;gap:8px}
.caption{font-weight:800;color:#264c80;margin:0}
.detail{margin:0;font-size:.88rem;color:#4c596d}

footer{font-size:.92rem;color:#4c596d}
footer a{color:#ee6b37;font-weight:700;text-decoration:none}
footer a:hover{text-decoration:underline}