.hero-banner{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08);margin:18px 0}
.hero-media{width:100%;height:160px;background-size:cover;background-position:center}
@media(min-width:640px){.hero-media{height:220px}}
@media(min-width:980px){.hero-media{height:300px}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.05),rgba(0,0,0,0.35))}
.hero-inner{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px 16px 18px 16px}
.hero-title{font-size:clamp(20px,5vw,40px);font-weight:800;margin:0;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.hero-sub{font-size:clamp(13px,3.2vw,18px);margin:.3rem 0 0;color:#fff;max-width:900px;line-height:1.35;text-shadow:0 2px 8px rgba(0,0,0,.35)}
@media(max-width:420px){.hero-sub{display:none}}
.container{max-width:1180px;margin-inline:auto;padding:28px}
.grid{display:grid;gap:18px}.grid-3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{border:1px solid #eee;border-radius:20px;padding:16px;background:#fff}
.card-logo{height:32px;object-fit:contain;border-radius:8px;background:#111827}
.small{color:#666;font-size:.95rem}
.kicker{color:#666;font-size:.95rem;margin:6px 0}
.header{position:sticky;top:0;background:#ffffffd9;border-bottom:1px solid #eee}
.brand{display:flex;gap:12px;align-items:center}
.brand img{height:34px;border-radius:8px}
nav{margin-left:auto;display:flex;gap:18px}