:root {
  --sat-accent: #2563eb;
  --sat-accent-text: #fff;
  --sat-page-bg: #f8fafc;
  --sat-surface: #fff;
  --sat-text: #111827;
  --sat-muted: #6b7280;
  --sat-border: #e5e7eb;
  --sat-radius: 12px;
  --sat-wrap: min(1120px, calc(100% - 2rem));
}

.sat-wrap { width: var(--sat-wrap); margin-inline: auto; }
.sat-page { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.sat-page--alt { background: var(--sat-page-bg); }
.sat-page__head { padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.25rem, 2vw, 1.75rem); border-bottom: 1px solid var(--sat-border); background: var(--sat-surface); }
.sat-page__head h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; color: var(--sat-text); }
.sat-page__head p { margin-top: 0.65rem; max-width: 52ch; color: var(--sat-muted); line-height: 1.6; }
.sat-crumb { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; font-size: 0.8125rem; color: var(--sat-muted); margin-bottom: 0.75rem; }
.sat-crumb a:hover { color: var(--sat-accent); }
.sat-prose { max-width: 68ch; color: var(--sat-text); line-height: 1.7; }
.sat-prose p + p { margin-top: 1rem; }
.sat-prose a { color: var(--sat-accent); text-decoration: underline; text-underline-offset: 2px; }
.sat-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.sat-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.72rem 1.25rem; border-radius: 999px; border: 1px solid transparent;
  font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: transform 0.15s, background 0.15s;
}
.sat-btn:hover { transform: translateY(-1px); }
.sat-btn--primary { background: var(--sat-accent); color: var(--sat-accent-text); }
.sat-btn--ghost { background: transparent; border-color: var(--sat-border); color: var(--sat-text); }

.sat-grid { display: grid; gap: 1.25rem; }
.sat-grid--cats { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.sat-grid--products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

.sat-card {
  background: var(--sat-surface); border-radius: var(--sat-radius);
  overflow: hidden; border: 1px solid var(--sat-border);
  transition: box-shadow 0.2s, transform 0.2s;
}
.sat-card:hover { box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08); transform: translateY(-2px); }
.sat-card__media { aspect-ratio: 4/3; background: #f1f5f9; overflow: hidden; }
.sat-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sat-card__body { padding: 1rem 1.1rem 1.15rem; }
.sat-card__code { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sat-muted); }
.sat-card__title { margin-top: 0.35rem; font-size: 1.05rem; font-weight: 650; line-height: 1.35; }
.sat-card__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.75rem; margin-top: 0.75rem; font-size: 0.8125rem; }
.sat-card__specs dt { color: var(--sat-muted); }
.sat-card__specs dd { font-weight: 600; color: var(--sat-text); }
.sat-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.sat-card__actions .sat-btn { padding: 0.55rem 0.95rem; font-size: 0.8125rem; }

.sat-filter {
  display: grid; gap: 0.75rem; padding: 1.25rem;
  background: var(--sat-surface); border: 1px solid var(--sat-border); border-radius: var(--sat-radius);
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .sat-filter { grid-template-columns: 1fr 1fr auto; align-items: end; }
}
.sat-field { display: grid; gap: 0.35rem; font-size: 0.875rem; }
.sat-field span { font-weight: 600; color: var(--sat-text); }
.sat-field input, .sat-field select, .sat-field textarea {
  width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--sat-border);
  border-radius: 8px; background: #fff;
}
.sat-field input:focus, .sat-field select:focus, .sat-field textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--sat-accent) 35%, transparent);
  border-color: var(--sat-accent);
}

.sat-outcome { text-align: center; padding: clamp(3rem, 8vw, 5rem) 1rem; }
.sat-outcome__card {
  max-width: 480px; margin-inline: auto; padding: 2rem;
  background: var(--sat-surface); border-radius: var(--sat-radius); border: 1px solid var(--sat-border);
}
.sat-outcome h1 { font-size: 1.75rem; }
.sat-outcome p { margin-top: 0.75rem; color: var(--sat-muted); }

.sat-cta-band {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  background: var(--sat-text); color: #fff; text-align: center;
}
.sat-cta-band h2 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: 700; }
.sat-cta-band p { margin: 0.65rem auto 0; max-width: 46ch; opacity: 0.85; line-height: 1.6; }
.sat-cta-band .sat-actions { justify-content: center; margin-top: 1.25rem; }
.sat-cta-band .sat-btn--ghost { border-color: rgba(255,255,255,0.35); color: #fff; }

.sat-contact-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .sat-contact-grid { grid-template-columns: 1fr 1fr; } }
.sat-contact-card {
  padding: 1.25rem; border: 1px solid var(--sat-border); border-radius: var(--sat-radius); background: var(--sat-surface);
}
.sat-contact-card strong { display: block; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sat-muted); }
.sat-contact-card span, .sat-contact-card a { display: block; margin-top: 0.35rem; font-size: 1.05rem; font-weight: 600; }