.category-hero::before {
  background-image: url("/assets/saunaservice/catalog/commercial-sauna-hero-1600.webp");
  background-position: center;
}

.category-hero::after {
  background:
    linear-gradient(90deg, rgba(10,9,8,.98) 0%, rgba(10,9,8,.86) 39%, rgba(10,9,8,.18) 72%, rgba(10,9,8,.3) 100%),
    linear-gradient(0deg, rgba(10,9,8,.78), transparent 52%);
}

.load-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.load-card { min-height: 340px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: 0 14px 40px rgba(23,21,20,.055); }
.load-card__label { color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.load-card h3 { margin: 16px 0 10px; font-size: 31px; line-height: 1; letter-spacing: -.04em; }
.load-card > p { margin: 0; color: var(--muted); line-height: 1.6; }
.load-card dl { display: grid; gap: 10px; margin: auto 0 0; padding-top: 26px; }
.load-card dl > div { display: grid; grid-template-columns: .78fr 1.22fr; gap: 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.load-card dt { color: var(--muted); font-size: 12px; }
.load-card dd { margin: 0; font-size: 13px; font-weight: 750; line-height: 1.4; }

.system-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: start; }
.system-layout h2 { margin: 0; font-size: clamp(40px, 5vw, 68px); line-height: .98; letter-spacing: -.055em; }
.system-layout__intro > p { margin: 24px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.system-chain { display: grid; gap: 12px; }
.system-step { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 23px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.system-step:not(:last-child)::after { content: ""; position: absolute; left: 49px; bottom: -13px; width: 2px; height: 14px; background: var(--accent); }
.system-step b { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: var(--ink); background: var(--accent); }
.system-step h3 { margin: 1px 0 7px; font-size: 21px; letter-spacing: -.025em; }
.system-step p { margin: 0; color: var(--muted); line-height: 1.55; }

.service-panel { overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; border-radius: 30px; color: #fff; background: var(--stone); }
.service-panel__image { position: relative; min-height: 610px; background: #26211d; }
.service-panel__image img { width: 100%; height: 100%; object-fit: cover; }
.service-panel__image span { position: absolute; left: 20px; bottom: 20px; padding: 8px 11px; border-radius: 999px; color: #fff; background: rgba(15,13,12,.72); backdrop-filter: blur(9px); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.service-panel__copy { padding: 52px; align-self: center; }
.service-panel__copy h2 { margin: 0; font-size: clamp(40px, 4.8vw, 64px); line-height: .97; letter-spacing: -.055em; }
.service-panel__copy > p { margin: 22px 0 0; color: rgba(255,255,255,.65); font-size: 17px; line-height: 1.62; }
.service-checks { display: grid; gap: 10px; margin-top: 28px; }
.service-check { padding: 16px 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.45; }
.service-check strong { display: block; margin-bottom: 4px; color: #fff; font-size: 16px; }

.risk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.risk-card { min-height: 250px; padding: 24px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: #211e1b; }
.risk-card b { color: var(--accent); font-size: 12px; letter-spacing: .12em; }
.risk-card h3 { margin: auto 0 10px; font-size: 24px; line-height: 1.05; letter-spacing: -.035em; }
.risk-card p { margin: 0; color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.52; }

.decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.decision-card { padding: 30px; border: 1px solid var(--line); border-radius: 26px; background: #fff; }
.decision-card h3 { margin: 0 0 18px; font-size: 29px; letter-spacing: -.035em; }
.decision-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.decision-list li { position: relative; padding-left: 25px; color: var(--muted); line-height: 1.52; }
.decision-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.decision-card--accent { color: #fff; background: var(--ink); border-color: var(--ink); }
.decision-card--accent .decision-list li { color: rgba(255,255,255,.68); }

@media (max-width: 1020px) {
  .load-grid { grid-template-columns: 1fr 1fr; }
  .load-card:last-child { grid-column: 1 / -1; }
  .system-layout, .service-panel { grid-template-columns: 1fr; }
  .service-panel__image { min-height: 480px; }
  .risk-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .category-hero::before { background-image: url("/assets/saunaservice/catalog/commercial-sauna-hero-960.webp"); background-position: 66% center; }
  .category-hero h1 { font-size: clamp(38px, 10.8vw, 49px); line-height: .96; }
  .load-grid, .risk-grid, .decision-grid { grid-template-columns: 1fr; }
  .load-card:last-child { grid-column: auto; }
  .load-card { min-height: 320px; }
  .system-layout { gap: 34px; }
  .system-step { grid-template-columns: 44px 1fr; padding: 19px; }
  .system-step b { width: 40px; height: 40px; }
  .system-step:not(:last-child)::after { left: 39px; }
  .service-panel__image { min-height: 350px; }
  .service-panel__copy { padding: 28px; }
  .risk-card { min-height: 220px; }
  .decision-card { padding: 24px; }
}