:root{--radius:20px;--shadow:0 10px 30px rgba(0,0,0,.08);--ink:#111;--muted:#666}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;color:var(--ink);background:#f7f7f9;line-height:1.7}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin-inline:auto;padding:28px}
.header{position:sticky;top:0;background:#ffffffd9;backdrop-filter:blur(8px);border-bottom:1px solid #eee;z-index:50}
.brand{display:flex;gap:12px;align-items:center}
.brand img{height:34px;border-radius:8px}
nav{margin-left:auto;display:flex;gap:18px}nav a{font-weight:500}
.hero-banner{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);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}}
.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;box-shadow:0 2px 14px rgba(0,0,0,.04);transition:transform .18s, box-shadow .18s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card-logo{height:32px;object-fit:contain;border-radius:8px;background:#111827}
.kicker{color:var(--muted);font-size:.95rem;margin:6px 0}
.small{color:var(--muted);font-size:.95rem}
.section{margin:28px 0}
.footer{border-top:1px solid #eee;background:#fff;margin-top:28px}
.footer-grid{display:grid;gap:10px}@media(min-width:720px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.breadcrumbs{font-size:.95rem;color:#555;margin:8px 0 16px}.breadcrumbs a{text-decoration:underline}
.lead{font-size:1.05rem}
.truncate-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pro-list{display:grid;gap:10px}.pro-list li{display:flex;gap:8px;align-items:flex-start}