/* RESET */
* { box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background:#f6f8fb; color:#212529; }

/* NAVBAR */
.navbar-brand img { display:block; }
.nav-link { font-weight:500; color:#2b2f32 !important; }
.nav-link:hover { color:#0d6efd !important; }
.navbar-toggler { border:none; }
.navbar-toggler:focus { box-shadow:none; }

/* HERO */
.hero { background: linear-gradient(135deg,#0d6efd,#0056b3); color:#fff; padding:80px 0; }
.hero h1 { font-weight:800; font-size:2.25rem; }
.hero p { opacity:.95; }

/* GRID HELPERS */
.grid-4-3-2 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width: 991px){ .grid-4-3-2{ grid-template-columns:repeat(3,1fr);} }
@media (max-width: 767px){ .grid-4-3-2{ grid-template-columns:repeat(2,1fr);} }

/* KATEGORI */
.kategori-box{ background:#fff; padding:18px 12px; border:1px solid #e7ebf0; border-radius:12px; text-align:center; transition:.25s; }
.kategori-box i{ font-size:1.6rem; color:#0d6efd; margin-bottom:8px; }
.kategori-box:hover{ transform:translateY(-4px); box-shadow:0 6px 16px rgba(0,0,0,.06); background:#0d6efd; color:#fff; }
.kategori-box:hover i{ color:#fff; }

/* PRODUK CARD */
.product-card{ background:#fff; border:1px solid #e7ebf0; border-radius:14px; overflow:hidden; transition:.25s; padding:10px; }
.product-card:hover{ transform:translateY(-4px); box-shadow:0 8px 18px rgba(0,0,0,.08); }
.product-card img{ width:100%; height:180px; object-fit:cover; border-radius:10px; background:#f2f4f7; }
.product-card h6{ margin:10px 0 6px; font-weight:600; font-size:1rem; }
.product-card .vendor{ font-size:.85rem; color:#6c757d; }
.product-card .price{ color:#0d6efd; font-weight:700; }
.product-card .rating{ font-size:.85rem; color:#f59e0b; }

/* BADGES */
.badge-soft{ background:#eef4ff; color:#0d6efd; border-radius:999px; padding:6px 10px; font-weight:600; }

/* UTIL */
.section-title{ font-weight:800; letter-spacing:.3px; }
.card-clean{ background:#fff; border:1px solid #e7ebf0; border-radius:14px; }

/* FOOTER */
footer a{ text-decoration:none; }

/* ACCESSIBILITY */
:focus-visible { outline: 3px solid #98c1ff; outline-offset: 1px; }
```
```

---