:root{
  --mb-brand: #2563eb; /* blue-600 */
  --mb-dark: #0b1220;
}

.brand-mark{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2563eb, #22c55e);
  color: #fff;
  font-weight: 800;
  letter-spacing: .5px;
  font-size: .95rem;
}

.hero{
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(37, 99, 235, .18), transparent 60%),
    radial-gradient(900px 400px at 80% 20%, rgba(34, 197, 94, .16), transparent 60%),
    linear-gradient(180deg, #ffffff, #f8fafc);
}

.hero-search{
  border-radius: 16px;
}

.hero-art{
  position: relative;
  height: 200px;
}
@media (min-width: 992px){
  .hero-art{ height: 220px; }
}
.hero-art-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.05));
  z-index: 1;
}
.hero-art img{ position: relative; z-index: 0; }

.cat-card{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  text-decoration:none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cat-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}
.cat-icon{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(37,99,235,.10);
  font-size: 20px;
}

.feature-card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px;
  height: 100%;
  background: #fff;
}
.feature-step{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(34,197,94,.14);
  color: #166534;
  font-weight: 800;
  margin-bottom: 10px;
}

.manual-card{
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.manual-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

/* Print */
@media print{
  nav, footer, #pdfBtn, #printBtn { display:none !important; }
  body { background: #fff !important; }
}