/* Страницы услуг, хлебные крошки, FAQ, внутренняя перелинковка */

/* ---------- хлебные крошки ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 18px; font-size: 13px; color: var(--text-3); }
.crumbs a { color: var(--text-2); transition: color 0.2s; }
.crumbs a:hover { color: var(--accent); }
.crumbs__sep { color: var(--text-3); opacity: 0.7; }
.crumbs [aria-current] { color: var(--text-3); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq__item {
  border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.faq__item[open] { border-color: rgba(59, 91, 255, 0.3); box-shadow: var(--shadow-lg); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 18px 56px 18px 22px; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform 0.25s;
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__a { padding: 0 22px 20px; color: var(--text-2); font-size: 15px; line-height: 1.65; }
.faq__a p { margin: 0; }

/* ---------- страницы услуг ---------- */
.svc__text { max-width: 820px; margin-bottom: 40px; }
.svc__text p { color: var(--text-2); font-size: 17px; line-height: 1.7; margin: 0 0 16px; }
.svc-page .cp-col h2 { font-size: 18px; margin-bottom: 16px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc-grid--big { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.svc-case {
  display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease), border-color 0.25s, box-shadow 0.25s;
}
.svc-case:hover { transform: translateY(-5px); border-color: rgba(59, 91, 255, 0.35); box-shadow: var(--shadow-lg); }
.svc-case b { font-family: var(--font-display); font-size: 18px; line-height: 1.25; }
.svc-case span { color: var(--text-2); font-size: 14px; line-height: 1.55; flex: 1; }
.svc-case em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--accent); }
.svc-case--big { padding: 30px; }
.svc-case--big b { font-size: 21px; }
.svc-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding: 34px 38px; border-radius: 24px; border: 1px solid var(--border);
  background: radial-gradient(600px 240px at 0% 100%, rgba(59, 91, 255, 0.14), transparent 60%), var(--surface);
  box-shadow: var(--shadow-lg);
}
.svc-cta h2 { font-size: 26px; margin: 0 0 8px; }
.svc-cta p { color: var(--text-2); max-width: 620px; margin: 0; }
.svc-page .steps { grid-template-columns: repeat(5, 1fr); }

/* ссылки «Подробнее» в карточках услуг на главной */
.service__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; }
.service__more { font-size: 14px; font-weight: 600; color: var(--accent); position: relative; z-index: 2; }
.service__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* внутренняя перелинковка в подвале */
.footer__seo { display: flex; flex-wrap: wrap; gap: 6px 18px; width: 100%; order: 3; padding-top: 6px; }
.footer__seo a { font-size: 13px; color: var(--text-3); transition: color 0.2s; }
.footer__seo a:hover { color: var(--accent); }
.footer__inner { row-gap: 14px; }

@media (max-width: 1100px) {
  .svc-page .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .svc-grid, .svc-grid--big { grid-template-columns: 1fr; }
  .svc-cta { padding: 26px; }
}
@media (max-width: 640px) {
  .svc-page .steps { grid-template-columns: 1fr; }
  .faq__item summary { font-size: 15px; padding: 16px 48px 16px 18px; }
  .faq__a { padding: 0 18px 18px; }
}