:root { --primary:#E31C25; --secondary:#111111; }
body { background:#f6f7f9; color:#222; }
.app-header { position:sticky; top:0; background:#fff; z-index:1000; padding:.5rem 0; }
.app-header .logo { width:40px; height:40px; border-radius:8px; object-fit:cover; margin-right:.75rem; }
.app-header .title { font-weight:600; font-size:1rem; }
.category-bar { position:sticky; top:56px; background:#fff; border-bottom:1px solid #eee; }
.category-bar .scroll { display:flex; overflow-x:auto; gap:.5rem; padding:.5rem .75rem; }
.chip { display:inline-block; padding:.5rem .9rem; border-radius:999px; background:#f0f1f3; color:#333; text-decoration:none; white-space:nowrap; }
.chip.active, .chip:hover { background:var(--primary); color:#fff; }
.banner-strip { display:flex; gap:.75rem; padding:.75rem; overflow-x:auto; }
.banner-card { display:block; border-radius:16px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.08); }
.banner-card img { display:block; width:100%; height:140px; object-fit:cover; }
.banner-card.wide img { height:180px; }
.product-card { display:flex; gap:.75rem; background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.06); padding:.75rem; }
.product-img { width:100px; height:100px; border-radius:12px; object-fit:cover; }
.product-title { font-weight:600; }
.product-desc { font-size:.9rem; color:#666; }
.product-price { font-weight:700; color:var(--secondary); }
.cart-btn { border-radius:999px; }
.cart-drawer { position:fixed; right:-380px; top:0; width:360px; height:100vh; background:#fff; box-shadow:-12px 0 32px rgba(0,0,0,.12); transition:right .25s ease; display:flex; flex-direction:column; z-index:1100; }
.cart-drawer.open { right:0; }
.cart-header { display:flex; align-items:center; gap:.5rem; padding:.75rem; border-bottom:1px solid #eee; }
.cart-body { flex:1; padding:.75rem; overflow:auto; }
.cart-footer { padding:.75rem; border-top:1px solid #eee; display:flex; justify-content:space-between; align-items:center; }
.section-title { font-weight:700; margin:.5rem 0 1rem; }
.modal-content { border-radius:16px; }
@media (min-width: 992px) {
  .product-img { width:120px; height:120px; }
  .banner-card img { height:180px; }
}

.saas-body {
  background:
    radial-gradient(circle at top left, rgba(78, 113, 255, 0.22), transparent 28%),
    radial-gradient(circle at top right, rgba(28, 200, 138, 0.16), transparent 24%),
    #f4f7fb;
  color: #0f172a;
}

.saas-topbar {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}

.saas-brand {
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .02em;
}

.saas-brand:hover {
  color: #fff;
}

.saas-brand-mark {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
}

.saas-hero {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 64, 175, 0.88)),
    #0f172a;
}

.saas-badge {
  display: inline-flex;
  align-items: center;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
}

.saas-hero-text {
  color: rgba(255,255,255,.82);
  font-size: 1.05rem;
  max-width: 42rem;
}

.saas-card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.saas-card-compact {
  padding: 1rem 1.25rem;
  min-width: 220px;
}

.saas-search-card {
  position: relative;
  overflow: hidden;
}

.saas-search-card::after {
  content: "";
  position: absolute;
  inset: auto -40px -50px auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(59,130,246,.18), transparent 70%);
  pointer-events: none;
}

.saas-mini-stat,
.saas-feature-box,
.saas-stat-card,
.saas-code-block {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 20px;
  padding: 1rem 1.1rem;
}

.saas-mini-stat {
  min-width: 220px;
}

.saas-mini-stat strong,
.saas-feature-box strong,
.saas-stat-card strong,
.saas-code-block strong,
.saas-metric-list strong {
  display: block;
  margin-bottom: .25rem;
}

.saas-mini-stat span,
.saas-feature-box span,
.saas-stat-card span,
.saas-metric-list span {
  color: #64748b;
}

.saas-price-tag {
  white-space: nowrap;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
  border-radius: 999px;
  padding: .65rem .9rem;
}

.saas-progress-shell {
  padding: .85rem 1rem;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.saas-progress {
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.saas-checklist,
.saas-metric-list {
  display: grid;
  gap: .85rem;
}

.saas-checklist > div,
.saas-metric-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.saas-checklist > div:last-child,
.saas-metric-list > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.saas-code-block code {
  white-space: pre-wrap;
  word-break: break-word;
  color: #0f172a;
}

.table > :not(caption) > * > * {
  padding: .9rem .75rem;
}

@media (max-width: 767.98px) {
  .saas-card {
    padding: 1.2rem;
    border-radius: 20px;
  }

  .saas-checklist > div,
  .saas-metric-list > div {
    flex-direction: column;
    gap: .35rem;
  }
}