.service-catalog { background: #fff; color: var(--text); }
.catalog-container { width: calc(100% - 116px); max-width: 1440px; margin-inline: auto; }
.catalog-opening { padding: 40px 0 32px; border-bottom: 1px solid var(--line); background: var(--ice); }
.catalog-rule { display: block; width: 72px; height: 4px; margin-bottom: 24px; background: var(--blue); }
.catalog-opening h1 { margin: 0; color: var(--navy); font-size: 56px; line-height: 1.02; font-weight: 900; letter-spacing: 0; }
.catalog-opening p { max-width: 780px; margin: 16px 0 0; font-size: 18px; line-height: 1.5; font-weight: 500; color: #3f4860; }
.catalog-list { padding-block: 24px 40px; }
.catalog-item { border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.catalog-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 16px; list-style: none; cursor: pointer; color: var(--navy); font-size: 18px; font-weight: 600; line-height: 1.45; transition: background 160ms, color 160ms; }
.catalog-item summary::-webkit-details-marker { display: none; }
.catalog-item summary:hover, .catalog-item[open] summary { color: var(--blue); background: var(--ice); }
.catalog-item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.catalog-arrow { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; color: var(--blue); font-size: 30px; line-height: 1; transition: transform 180ms; }
.catalog-item[open] .catalog-arrow { transform: rotate(90deg); }
.catalog-item p { max-width: 940px; margin: 0; padding: 8px 16px 24px; font-size: 1.02rem; line-height: 1.6; color: #3f4860; }
@media (max-width: 900px) {
  .catalog-container { width: calc(100% - 48px); }
  .catalog-opening h1 { font-size: 48px; }
}
@media (max-width: 540px) {
  .catalog-container { width: calc(100% - 36px); }
  .catalog-opening { padding: 26px 0 24px; }
  .catalog-opening h1 { font-size: 44px; }
  .catalog-opening p, .catalog-item summary, .catalog-item p { font-size: 16px; }
  .catalog-item summary { padding: 16px 4px; gap: 12px; }
  .catalog-item p { padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-item summary, .catalog-arrow { transition: none; }
}