/* altunin.pro v3 (09.10.2026): страницы услуг uslugi/*.html и расширенные карточки на главной и в каталоге.
   Подключается после home.css, pages.css и v2.css. */

/* ---------- карточки на главной: ссылка в заголовке, теги подуслуг ---------- */
.svc h3 a { color: inherit; }
.svc h3 a:hover { color: var(--home-teal-ink); }
.svc--accent h3 a:hover { color: var(--home-turquoise); }
.svc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.svc__tags span { padding: 4px 9px; border: 1px solid var(--home-line-light); border-radius: 999px; color: var(--home-text-soft); font-size: 12.5px; line-height: 1.3; }
.svc__list .svc__more { color: var(--home-teal-ink); font-size: 14px; }
.svc__list .svc__more::before { display: none; }
.tsvc h3 a { color: inherit; }
.tsvc h3 a:hover { color: var(--home-turquoise); }
.tsvc__foot { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.tsvc__foot .v2-chip { margin-top: 0 !important; }
.tsvc__more { display: inline-flex; align-items: center; min-height: 32px; color: var(--home-turquoise); font-size: 14px; font-weight: 500; white-space: nowrap; }
.tsvc__more::after { margin-left: 8px; content: "→"; transition: transform 180ms ease; }
.tsvc__more:hover::after { transform: translateX(4px); }

/* ---------- страница услуги ---------- */
.sp-hero .page-hero__inner > div { max-width: 920px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.sp-chips .v2-chip { background: rgba(42, 232, 198, 0.12); color: var(--home-turquoise); white-space: normal; line-height: 1.3; }
.sp-hero__actions { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; margin-top: 32px; }
.sp-hero__actions .home-button { min-width: 0; }
.sp-hero__actions .home-link--light:hover { color: var(--home-turquoise); }

.home-page .sp-symptoms__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; border-top: 1px solid var(--home-line-light); }
.sp-symptoms__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--home-line-light); font-size: 17px; font-weight: 400; line-height: 1.5; }
.sp-symptoms__list li > span { padding-top: 4px; color: var(--home-teal-ink); font-family: var(--home-display); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; }

.sp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sp-card { display: flex; flex-direction: column; min-width: 0; padding: 26px 26px 24px; border: 1px solid var(--home-line-light); border-radius: var(--v2-radius); background: var(--v2-card); transition: transform 200ms ease, box-shadow 200ms ease; }
.sp-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(22, 26, 32, 0.1); }
.sp-card__num { color: var(--home-teal-ink); font-family: var(--home-display); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; }
.sp-card h3 { margin-top: 14px !important; font-family: var(--home-display); font-size: clamp(19px, 1.5vw, 22px); font-weight: 680; line-height: 1.18; letter-spacing: -0.03em; }
.sp-card > p:not(.sp-card__result) { margin-top: 10px !important; color: var(--home-text-soft); font-size: 15px; line-height: 1.5; }
.sp-card__result { margin-top: auto !important; padding-top: 14px; color: var(--home-ink); font-size: 14.5px; line-height: 1.45; }
.sp-card__result::before { display: block; width: 100%; height: 1px; margin-bottom: 14px; content: ""; background: var(--home-line-light); }
.sp-card__result b { display: block; margin-bottom: 4px; color: var(--home-teal-ink); font-family: var(--home-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

.sp-process { color: var(--home-paper); background: radial-gradient(circle at 92% 8%, rgba(42, 232, 198, 0.1), transparent 32%), var(--home-bg-deep); }
.home-page .sp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--home-line-dark); border-bottom: 1px solid var(--home-line-dark); }
.sp-steps li { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 26px 26px 28px 0; border-right: 1px solid var(--home-line-dark); }
.sp-steps li + li { padding-left: 26px; }
.sp-steps li:last-child { border-right: 0; }
.sp-steps__num { color: var(--home-turquoise); font-family: var(--home-display); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; }
.sp-steps h3 { font-family: var(--home-display); font-size: clamp(18px, 1.5vw, 22px); font-weight: 650; line-height: 1.2; letter-spacing: -0.03em; }
.sp-steps p { margin-top: 8px !important; color: var(--home-text-muted); font-size: 14.5px; line-height: 1.5; }
.sp-steps .v2-chip { margin-top: auto; align-self: flex-start; background: var(--v2-chip-bg-dark); color: var(--home-turquoise); }
.sp-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; margin-top: 44px; }
.sp-proof__item { min-width: 0; padding-top: 18px; border-top: 2px solid var(--home-turquoise-deep); }
.sp-proof__item strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; font-family: var(--home-display); font-size: clamp(30px, 2.8vw, 40px); font-weight: 750; line-height: 1; letter-spacing: -0.045em; }
.sp-proof__item strong small { color: var(--home-text-muted); font-family: var(--home-body); font-size: 15px; font-weight: 400; letter-spacing: 0; }
.sp-proof__item p { margin-top: 12px !important; color: var(--home-text-muted); font-size: 14.5px; line-height: 1.5; }

.sp-formats { display: grid; gap: 12px; }
.sp-format { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 16px 28px; align-items: center; padding: 22px 26px; border: 1px solid var(--home-line-light); border-radius: var(--v2-radius); background: var(--v2-card); transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.sp-format:hover { transform: translateY(-2px); border-color: rgba(16, 163, 138, 0.45); box-shadow: 0 18px 40px rgba(22, 26, 32, 0.08); }
.sp-format h3 { font-family: var(--home-display); font-size: clamp(20px, 1.6vw, 24px); font-weight: 700; line-height: 1.15; letter-spacing: -0.035em; }
.sp-format p { margin-top: 6px !important; color: var(--home-text-soft); font-size: 14.5px; line-height: 1.5; }
.sp-format__cta { display: inline-flex; align-items: center; color: var(--home-teal-ink); font-family: var(--home-display); font-size: 14px; font-weight: 700; white-space: nowrap; }
.sp-format__cta::after { margin-left: 8px; content: "→"; }

.sp-faq__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.sp-q { border-top: 1px solid var(--home-line-light); }
.sp-q:last-child { border-bottom: 1px solid var(--home-line-light); }
.sp-q summary { position: relative; padding: 18px 44px 18px 0; cursor: pointer; list-style: none; font-family: var(--home-display); font-size: clamp(17px, 1.3vw, 20px); font-weight: 650; letter-spacing: -0.02em; }
.sp-q summary::-webkit-details-marker { display: none; }
.sp-q summary::after { position: absolute; right: 2px; top: 50%; width: 10px; height: 10px; content: ""; border-right: 1.5px solid var(--home-teal-ink); border-bottom: 1.5px solid var(--home-teal-ink); transform: translateY(-70%) rotate(45deg); transition: transform 200ms ease; }
.sp-q[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.sp-q p { padding: 0 0 20px; max-width: 640px; color: var(--home-text-soft); font-size: 15.5px; line-height: 1.55; }
.sp-aside { padding: 26px 28px 28px; border: 1px solid var(--home-line-light); border-radius: var(--v2-radius); background: var(--v2-card); }
.sp-aside h3 { font-family: var(--home-display); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--home-teal-ink); }
.sp-aside h3 + h3, .sp-aside ul + h3 { margin-top: 26px !important; }
.sp-aside h3:not(:first-child) { margin-top: 26px !important; }
.sp-entry { display: grid; gap: 4px; margin-top: 12px; padding: 16px 18px; border-radius: 4px; color: var(--home-paper); background: radial-gradient(circle at 100% 0%, rgba(42, 232, 198, 0.22), transparent 40%), var(--home-bg-deep); }
.sp-entry b { font-family: var(--home-display); font-size: 16px; font-weight: 650; letter-spacing: -0.02em; }
.sp-entry span { color: var(--home-text-muted); font-size: 13.5px; }
.sp-entry:hover b { color: var(--home-turquoise); }
.home-page .sp-related { display: grid; margin-top: 10px !important; }
.sp-related li { border-top: 1px solid var(--home-line-light); }
.sp-related a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 12px 0; font-family: var(--home-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.sp-related a small { grid-column: 2; color: var(--home-text-soft); font-family: var(--home-body); font-size: 12.5px; font-weight: 300; }
.sp-related a:hover { color: var(--home-teal-ink); }
.sp-switch { display: inline-flex; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--home-line-light); width: 100%; color: var(--home-teal-ink); font-size: 14px; font-weight: 500; }

/* ---------- цены личных форматов ---------- */
.fmt__cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 12px !important; font-family: var(--home-display); font-size: clamp(26px, 2.2vw, 32px); font-weight: 750; line-height: 1; letter-spacing: -0.04em; color: var(--home-ink); }
.fmt__cost small { color: var(--home-text-soft); font-family: var(--home-body); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.fmt--accent .fmt__cost { color: var(--home-turquoise); }
.fmt--accent .fmt__cost small { color: var(--home-text-muted); }
.sp-format { grid-template-columns: 48px minmax(0, 1fr) auto auto auto; }
.sp-format__price { font-family: var(--home-display); font-size: clamp(18px, 1.4vw, 22px); font-weight: 750; letter-spacing: -0.03em; white-space: nowrap; }

/* ---------- потери в деньгах (страница маркетинга) ---------- */
.sp-losses { background: var(--home-paper-warm); }
.sp-losses__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.home-page .sp-losses__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sp-losses__list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; padding: 18px 20px 18px 18px; border: 1px solid var(--home-line-light); border-radius: var(--v2-radius); background: var(--v2-card); }
.sp-losses__list li > span { padding-top: 3px; color: var(--home-teal-ink); font-family: var(--home-display); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; }
.sp-losses__list h3 { font-family: var(--home-display); font-size: 16.5px; font-weight: 680; line-height: 1.25; letter-spacing: -0.02em; }
.sp-losses__list p { margin-top: 6px !important; color: var(--home-text-soft); font-size: 14px; line-height: 1.5; }
.sp-calc { position: sticky; top: 100px; padding: 28px 30px 30px; border-radius: var(--v2-radius); color: var(--home-paper); background: radial-gradient(circle at 100% 0%, rgba(42, 232, 198, 0.22), transparent 42%), var(--home-bg-deep); box-shadow: 0 24px 60px rgba(13, 19, 25, 0.25); }
.sp-calc__label { color: var(--home-turquoise); font-family: var(--home-display); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.sp-calc__formula { margin-top: 12px !important; font-family: var(--home-display); font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.sp-calc__num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin-top: 22px !important; font-family: var(--home-display); font-size: clamp(36px, 3.4vw, 50px); font-weight: 750; line-height: 1; letter-spacing: -0.05em; color: var(--home-turquoise); }
.sp-calc__num small { color: var(--home-text-muted); font-family: var(--home-body); font-size: 15px; font-weight: 400; letter-spacing: 0; }
.sp-calc__text { margin-top: 12px !important; color: #D1D6DC; font-size: 15px; line-height: 1.55; }
.sp-calc__note { margin-top: 16px !important; padding-top: 14px; border-top: 1px solid var(--home-line-dark); color: var(--home-text-muted); font-size: 13.5px; line-height: 1.5; }
.sp-calc__actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 20px; }
.sp-calc__actions .home-button { min-width: 0; }
.sp-calc__actions .home-link--light:hover { color: var(--home-turquoise); }

/* ---------- адаптив ---------- */
@media (max-width: 1180px) {
  .sp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .sp-losses__grid { grid-template-columns: 1fr; }
  .sp-calc { position: static; }
  .home-page .sp-steps { grid-template-columns: 1fr 1fr; }
  .sp-steps li:nth-child(2) { border-right: 0; }
  .sp-steps li:nth-child(-n+2) { border-bottom: 1px solid var(--home-line-dark); }
  .sp-steps li:nth-child(3) { padding-left: 0; }
  .sp-faq__grid { grid-template-columns: 1fr; }
  .sp-format { grid-template-columns: 48px minmax(0, 1fr); }
  .sp-format .v2-chip, .sp-format__price, .sp-format__cta { grid-column: 2; justify-self: start; }
}
@media (max-width: 767px) {
  .home-page .sp-losses__list { grid-template-columns: 1fr; gap: 10px; }
  .sp-losses__list li { padding: 16px 16px 16px 14px; }
  .sp-calc { padding: 22px 18px 24px; }
  .sp-calc__actions { flex-direction: column; align-items: stretch; }
  .sp-calc__actions .home-button { width: 100%; }
  .home-page .sp-symptoms__list { grid-template-columns: 1fr; gap: 0; }
  .sp-symptoms__list li { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 16px 0; font-size: 16px; }
  .sp-cards { grid-template-columns: 1fr; gap: 12px; }
  .sp-card { padding: 22px 20px 20px; }
  .home-page .sp-steps { grid-template-columns: 1fr; }
  .sp-steps li, .sp-steps li + li { padding: 20px 0 22px; border-right: 0; border-bottom: 1px solid var(--home-line-dark); }
  .sp-steps li:last-child { border-bottom: 0; }
  .sp-proof { grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }
  .sp-format { grid-template-columns: 1fr; gap: 10px; padding: 20px 18px; }
  .sp-format .v2-num { display: none; }
  .sp-format .v2-chip, .sp-format__price, .sp-format__cta { grid-column: 1; }
  .sp-aside { padding: 22px 18px; }
  .sp-hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .sp-hero__actions .home-button { width: 100%; }
  .svc__tags span { font-size: 12px; }
}