:root{--bg: #ffffff;--text: #0b0b0b;--accent: #0ea5ff;}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:1.25rem}
.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid #e5e7eb}
.logo{display:flex;align-items:center;gap:.75rem;font-weight:800}
.logo img{height:36px}
.badge{background:var(--accent);padding:.15rem .5rem;border-radius:.5rem;font-size:.72rem;font-weight:800;color:#001e2b}
.nav a{margin-left:1rem;opacity:.9}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.card{border:1px solid #e5e7eb;border-radius:1rem;background:#fff;overflow:hidden}
.card img{width:100%;height:230px;object-fit:contain;background:#f9fafb}
.card .p{padding:0 1rem 1rem}
.card h3{font-size:1rem;margin:.6rem 0 .2rem}
.meta{font-size:.78rem;opacity:.7}
.brand-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;align-items:center}
.brand-grid img{max-height:70px;width:auto;margin:0 auto;display:block}
.footer{margin-top:2rem;border-top:1px solid #e5e7eb;padding:2rem 0;font-size:.9rem;opacity:.85}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}