/* Услуги, отрасли, лицензии, стоимость работ (шаблон itach_soft).
   Подключается ссылкой со страниц разделов /services/, /catalog/. Токены — из main.css. */

/* Шапка посадочной */
.svc-hero { padding-bottom: 24px; }
.svc-hero .section__lead { font-size: 18px; max-width: 70ch; }
.svc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.svc-subtitle { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 20px; }
.svc-more { margin-top: 24px; }

/* Текст из инфоблоков */
.svc-prose { max-width: 820px; color: var(--text); }
.svc-prose > * + * { margin-top: 16px; }
.svc-prose h2 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 40px; }
.svc-prose h3 { font-size: 20px; margin-top: 28px; }
.svc-prose h4 { font-size: 18px; margin-top: 24px; }
.svc-prose > h2:first-child, .svc-prose > h3:first-child { margin-top: 0; }
.svc-prose p, .svc-prose li { color: var(--text-muted); }
.svc-prose ul, .svc-prose ol { padding-left: 22px; margin-bottom: 0; }
.svc-prose li + li { margin-top: 6px; }
.svc-prose a { color: var(--accent-strong); }
.svc-prose img { border-radius: var(--radius-card); margin: 8px 0; }
.svc-prose strong, .svc-prose b { color: var(--text); }
.svc-prose--lead p { font-size: 18px; }
.section__lead.svc-prose p { color: inherit; }
.svc-prose .svc-cards { max-width: none; margin-top: 24px; }

.svc-table { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.svc-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.svc-table td, .svc-table th { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--text-muted); }
.svc-table tr:first-child td, .svc-table th { color: var(--text); font-weight: 600; }

/* Карточки */
.svc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.svc-card__num { color: var(--accent-strong); font-weight: 600; font-size: 15px; }
.svc-card__icon { width: 48px; height: 48px; object-fit: contain; }
.svc-card__title { font-size: 19px; line-height: 1.25; }
.svc-card__title a { text-decoration: none; }
.svc-card__title a:hover { color: var(--accent-strong); }
.svc-card__text { color: var(--text-muted); font-size: 16px; }
.svc-card__text > * + * { margin-top: 8px; }
.svc-card__text ul { padding-left: 20px; margin: 0; }

/* Текст слева, карточки справа */
.svc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.svc-split__aside { position: sticky; top: calc(var(--header-h) + 24px); }
.svc-split .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Блоки на всю ширину */
.svc-rows { display: grid; gap: 16px; }
.svc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; padding: 28px 0; border-top: 1px solid var(--line); }
.svc-row__title { font-size: 20px; }

/* Этапы: число шагов разное */
.svc-steps.steps { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.svc-steps .step__text > * + * { margin-top: 6px; }

/* Чипы-ссылки */
.svc-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.svc-chips .chip { font-size: 14px; }
.chip--link { text-decoration: none; padding: 8px 14px; color: var(--text); transition: background-color .2s var(--ease), color .2s var(--ease); }
.chip--link:hover { background: var(--accent-soft); color: var(--accent-strong); }

/* Плашка со ссылкой */
.svc-note {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 32px; background: var(--accent-soft); border-radius: var(--radius-card);
}
.svc-note .svc-subtitle { margin-bottom: 8px; }
.svc-note p { color: var(--text-muted); max-width: 62ch; }
.svc-note .link-arrow { flex: none; }

/* Плитки отраслей */
.svc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc-tile {
  display: flex; flex-direction: column; gap: 8px; padding: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.svc-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.svc-tile__icon { width: 40px; height: 40px; object-fit: contain; margin-bottom: 8px; }
.svc-tile__title { font-size: 20px; font-weight: 700; }
.svc-tile__text { color: var(--text-muted); font-size: 16px; }

.svc-cases .case { grid-column: auto; }

/* /services/: направления со списком услуг */
.svc-groups { display: grid; gap: 24px; }
.svc-group {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px;
  padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.svc-group__title { font-size: clamp(24px, 2.4vw, 30px); }
.svc-group__title a { text-decoration: none; }
.svc-group__title a:hover { color: var(--accent-strong); }
.svc-group__text { margin: 12px 0 16px; color: var(--text-muted); font-size: 16px; }

.svc-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.svc-links--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc-link {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-card);
  text-decoration: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.svc-links--grid .svc-link { background: var(--surface); padding: 22px 24px; }
.svc-link:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.svc-link__title { font-weight: 700; font-size: 17px; line-height: 1.3; }
.svc-link__title::after { content: " →"; color: var(--accent-strong); }
.svc-link__text { color: var(--text-muted); font-size: 15px; line-height: 1.5; }

/* Лицензии */
.lic-group + .lic-group { margin-top: 48px; }
.lic-group__title { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 20px; }
.lic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lic-card {
  display: flex; flex-direction: column; gap: 12px; padding: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.lic-card__media { border-radius: var(--radius-input); overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; }
.lic-card__media img { width: 100%; height: 100%; object-fit: contain; }
.lic-card__title { font-size: 19px; line-height: 1.25; }
.lic-card__title a { text-decoration: none; }
.lic-card__title a:hover { color: var(--accent-strong); }
.lic-card__text { color: var(--text-muted); font-size: 15px; }
.lic-card__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.lic-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: auto; padding-top: 8px; }

.lic-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lic-section {
  display: flex; flex-direction: column; gap: 12px; padding: 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.lic-section__title { font-size: 22px; }
.lic-section__title a { text-decoration: none; }
.lic-section__title a:hover { color: var(--accent-strong); }
.lic-section__text { color: var(--text-muted); font-size: 16px; }
.lic-section .link-arrow { margin-top: auto; }

.lic-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 0; }
.lic-facts > div { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.lic-facts dt { color: var(--text-muted); font-size: 14px; }
.lic-facts dd { margin: 4px 0 0; font-weight: 700; font-size: 18px; }

/* Стоимость работ */
.price-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.price-format {
  display: flex; flex-direction: column; gap: 12px; padding: 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.price-format__label { align-self: flex-start; }
.price-format__title { font-size: 22px; }
.price-format__text { color: var(--text-muted); }
.price-format .checklist { margin: 8px 0 0; }
.price-format .link-arrow { margin-top: auto; padding-top: 8px; }

@media (max-width: 1100px) {
  .svc-cards, .svc-tiles, .lic-grid, .svc-links--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .svc-cards, .svc-tiles, .lic-grid, .lic-sections, .price-formats,
  .svc-links, .svc-links--grid, .svc-split .svc-cards { grid-template-columns: 1fr; }
  .svc-split, .svc-row, .svc-group { grid-template-columns: 1fr; gap: 20px; }
  .svc-split__aside { position: static; }
  .svc-group { padding: 24px 20px; }
  .svc-note { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .svc-cases .case { grid-column: auto; }
  .svc-hero__actions .btn { flex: 1 1 100%; }
}

/* Строки и колонки не растягиваются шире экрана из-за длинного содержимого. */
.svc-rows > *, .svc-row > *, .svc-split > *, .svc-group > * { min-width: 0; }
.svc-row table, .svc-split table { display: block; max-width: 100%; overflow-x: auto; }
.svc-row img { max-width: 100%; height: auto; }
.svc-row { overflow-wrap: anywhere; }

/* Подробности услуги вкладками: слева список тем, справа открытая тема (JS добавляет .is-tabs).
   Без JS темы идут подряд. Длинные карточки — раскрывающимися пунктами. */
.svc-tab + .svc-tab { margin-top: 16px; }
.svc-tab { padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); min-width: 0; }
.svc-tab__title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
.svc-tab__lead { margin-bottom: 20px; color: var(--text-muted); }
.svc-tab .svc-prose > :first-child { margin-top: 0; }
.svc-tabs.is-tabs { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
.svc-tabs.is-tabs .svc-tab + .svc-tab { margin-top: 0; }
.svc-tabs.is-tabs .svc-tab__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.svc-tabs__list { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 4px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.svc-tabs__btn {
  display: block; width: 100%; padding: 14px 16px; text-align: left;
  background: none; border: 0; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text-muted);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.svc-tabs__btn:hover { color: var(--text); background: var(--surface-2); }
.svc-tabs__btn[aria-selected="true"] { color: var(--accent-strong); background: var(--accent-soft); }
.svc-tab[hidden] { display: none; }

.svc-acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0; }
.svc-acc { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); transition: border-color .2s var(--ease); }
.svc-acc[open] { border-color: transparent; background: var(--accent-soft); }
.svc-acc summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px;
  font-weight: 600; font-size: 16px; line-height: 1.35; cursor: pointer; list-style: none;
}
.svc-acc summary::-webkit-details-marker { display: none; }
.svc-acc summary::after { content: "+"; flex: none; font-size: 20px; line-height: 1; color: var(--accent-strong); transition: transform .2s var(--ease); }
.svc-acc[open] summary::after { transform: rotate(45deg); }
.svc-acc__body { padding: 0 18px 18px; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.svc-acc__body p + p { margin-top: 8px; }

.svc-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; list-style: none; margin: 0; padding: 0; }
.svc-mini li { position: relative; padding-left: 22px; }
.svc-mini li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--grad); }
.svc-mini strong { display: block; }
.svc-mini a { text-decoration: none; }
.svc-mini a:hover { color: var(--accent-strong); }
.svc-mini span { display: block; margin-top: 4px; font-size: 15px; color: var(--text-muted); }

@media (max-width: 960px) {
  .svc-tabs.is-tabs { grid-template-columns: 1fr; gap: 12px; }
  .svc-tabs__list { position: static; display: flex; gap: 6px; overflow-x: auto; padding: 6px; scrollbar-width: none; }
  .svc-tabs__btn { flex: none; width: auto; max-width: 260px; padding: 10px 14px; font-size: 15px; white-space: normal; }
  .svc-tab { padding: 22px 18px; }
  .svc-acc-grid, .svc-mini { grid-template-columns: 1fr; }
}

/* Цена лицензии (модуль itach.licprices): текущая, при скидке — зачёркнутая старая и плашка с процентом. */
.lic-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 4px; }
.lic-price__now { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.lic-price__old { font-size: 16px; color: var(--text-muted); white-space: nowrap; }
.lic-price__badge {
  align-self: center; padding: 4px 10px; border-radius: var(--radius-control);
  background: var(--accent-strong); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.lic-price--sale .lic-price__now { color: var(--accent-strong); }
.lic-price--lg .lic-price__now { font-size: 30px; }
.lic-card:has(.lic-price--sale) { border-color: #ffd2bf; box-shadow: 0 10px 28px rgb(194 47 18 / .08); }
.lic-facts__price dd { margin-top: 6px; }
.lic-prices-note { margin-top: 32px; font-size: 14px; color: var(--text-muted); max-width: 70ch; }

/* «Почему … у нас» на страницах услуг: лента преимуществ на стилях .home-proof__list из main.css, четыре пункта. */
.svc-why__title { margin-bottom: 20px; max-width: 40ch; }
.svc-why { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-why .home-proof__value { white-space: normal; }
@media (max-width: 1100px) { .svc-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Страница «Сайты» (section-sites.php, по макету service-sites.html) ---------- */
.sites-center { margin-inline: auto; text-align: center; }
.section__lead.sites-center { max-width: 60ch; }
.sites-action { display: flex; justify-content: center; margin-top: 40px; }

.sites-hero { padding: 24px 0 24px; overflow-x: clip; }
.sites-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 48px; align-items: center; margin-top: 32px; }
.sites-hero__title { font-size: clamp(36px, 1rem + 4vw, 72px); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.sites-hero__lead { margin-top: 24px; max-width: 40rem; font-size: 19px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
.sites-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* «Устройства»: окно браузера с кадром сайта из кейса и телефон поверх — рамки рисуются CSS, кадры живые из портфолио */
.sites-hero__devices { position: relative; min-height: 400px; }
.device { position: absolute; display: block; overflow: hidden; background: var(--surface); box-shadow: 0 30px 60px rgb(23 25 34 / .16), 0 2px 6px rgb(23 25 34 / .06); }
.device img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.device--desktop { left: 0; right: 8%; top: 4%; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 18px; transform: perspective(1400px) rotateY(-10deg) rotateX(4deg); }
.device__bar { display: flex; gap: 6px; align-items: center; height: 28px; padding: 0 12px; background: #f1f2f5; border-bottom: 1px solid var(--line); }
.device__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d4d7de; }
.device__bar i:first-child { background: var(--brand-1); }
.device--desktop img { height: calc(100% - 28px); }
.device--phone { right: 0; bottom: 0; width: 26%; aspect-ratio: 9 / 19; border: 6px solid #171922; border-radius: 28px; transform: rotate(4deg); }
@media (prefers-reduced-motion: no-preference) {
  .device { animation: rise .9s var(--ease) both; }
  .device--phone { animation-delay: .15s; }
}

.sites-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 56px 0 0; padding: 0; }
.sites-stat { display: grid; gap: 12px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); }
.sites-stat__value {
  width: fit-content; font-size: clamp(38px, 1rem + 2.6vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -.03em;
  background: linear-gradient(120deg, #ff7a1f 0%, #ff7aa8 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sites-stat__label { font-size: 17px; font-weight: 600; }

/* Кейсы: 2 крупные карточки, затем по 3; кадр сайта выезжает снизу */
.sites-cases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 48px 0 0; padding: 0; }
.sites-case { grid-column: span 2; }
.sites-case--wide { grid-column: span 3; }
.sites-case__link {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); transition: box-shadow .25s var(--ease);
}
.sites-case__link:hover { box-shadow: var(--shadow-hover); }
.sites-case__head { display: flex; justify-content: space-between; gap: 16px; padding: 32px 32px 24px; }
.sites-case__title { font-size: clamp(22px, 1rem + .8vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.sites-case__task { color: #6d7180; }
.sites-case__go { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-strong); transition: background-color .25s var(--ease), color .25s var(--ease); }
.sites-case__go::before { content: "↗"; font-size: 22px; line-height: 1; transition: transform .25s var(--ease); }
.sites-case__link:hover .sites-case__go { background: var(--brand-1); color: #fff; }
.sites-case__link:hover .sites-case__go::before { transform: translate(2px, -2px); }
.sites-case__shot { display: block; margin: auto 32px 0; height: 240px; overflow: hidden; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; }
.sites-case--wide .sites-case__shot { height: 280px; }
.sites-case__shot img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.sites-case__link:hover .sites-case__shot img { transform: translateY(-6%); }

/* Форматы: две колонки карточек, без цен */
.sites-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 48px 0 0; padding: 0; }
.sites-format { display: flex; }
.sites-format__link, .sites-format > .sites-format__title { flex: 1; }
.sites-format__link {
  position: relative; display: grid; align-content: start; gap: 12px; padding: 28px 72px 28px 32px; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); transition: border-color .2s var(--ease), box-shadow .25s var(--ease);
}
.sites-format__link::after { content: "↗"; position: absolute; top: 26px; right: 30px; font-size: 22px; line-height: 1; color: var(--text); transition: transform .25s var(--ease), color .2s var(--ease); }
.sites-format__link:hover { box-shadow: var(--shadow-hover); }
.sites-format__link:hover::after { color: var(--accent-strong); transform: translate(3px, -3px); }
.sites-format__title { font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.sites-format__text { font-size: 16px; line-height: 1.55; color: var(--text-muted); }
/* Строки цен: серая плашка с вариантом, справа — цена на градиенте (как в макете) */
.sites-format__prices { display: grid; gap: 12px; margin-top: 8px; margin-right: -40px; }
.sites-price { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding-left: 16px; border-radius: 999px; background: var(--bg); }
.sites-price__label { font-size: 15px; font-weight: 600; }
.sites-price__value { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 999px; font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; background: linear-gradient(120deg, #ff7a1f 0%, #ff7aa8 100%); }

/* Роли команды (как в макете): силуэт-иллюстрация над названием, название — градиентная плашка */
.sites-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 48px 0 0; padding: 0; }
.sites-role { display: grid; align-content: start; gap: 8px; padding: 24px; background: rgb(255 255 255 / .7); border: 1px solid rgb(23 25 34 / .08); border-radius: var(--radius-card); }
.sites-role__image { display: block; width: auto; max-width: 100%; height: clamp(72px, 4rem + 1.5vw, 96px); object-fit: contain; object-position: left bottom; margin-bottom: 8px; opacity: .3; }
.sites-role__name { justify-self: start; padding: 4px 14px; border-radius: 999px; font-size: 20px; font-weight: 700; line-height: 1.3; color: #fff; background: linear-gradient(120deg, #ff7a1f 0%, #ff7aa8 100%); }
.sites-role__text { font-size: 17px; line-height: 1.45; color: var(--text-muted); }

/* Технологии: две бегущие строки навстречу; при reduced motion — статичный перенос */
.sites-tech { overflow: hidden; }
.tech-marquee { display: grid; gap: 24px; margin-top: 40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tech-marquee__row { display: flex; width: max-content; }
.tech-marquee__list { display: flex; flex: none; gap: 56px; list-style: none; margin: 0; padding: 0 28px; }
/* Технология: серый логотип над серым названием; при наведении логотип в цвете, название тёмное (как в макете) */
.tech-marquee__tech { display: grid; justify-items: center; align-content: start; gap: 8px; }
.tech-marquee__logo { width: auto; max-width: 128px; height: 40px; object-fit: contain; filter: grayscale(1) opacity(.5); transition: filter .2s var(--ease); }
.tech-marquee__name { font-size: clamp(28px, 1rem + 1.6vw, 36px); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: #c9cbd3; white-space: nowrap; transition: color .2s var(--ease); }
.tech-marquee__tech:hover .tech-marquee__logo { filter: none; }
.tech-marquee__tech:hover .tech-marquee__name { color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .tech-marquee__row { animation: marquee 40s linear infinite; }
  .tech-marquee__row--reverse { animation-direction: reverse; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* Другие направления: пилюли с градиентной рамкой */
.sites-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; margin: 32px auto 0; padding: 0; list-style: none; }
.sites-chip {
  display: inline-block; padding: 12px 22px; border-radius: 999px; font-weight: 600; color: var(--text); text-decoration: none; border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(90deg, var(--brand-1), #f2456b) border-box;
  transition: transform .2s var(--ease);
}
.sites-chip:hover { transform: translateY(-2px); }

@media (max-width: 1100px) {
  .sites-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sites-case, .sites-case--wide { grid-column: span 1; }
  .sites-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sites-hero__grid { grid-template-columns: 1fr; }
  .sites-hero__devices { min-height: 0; aspect-ratio: 4 / 3; }
  .sites-formats { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .sites-stats { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .sites-stat { padding: 20px; grid-template-columns: auto 1fr; align-items: center; gap: 16px; border-radius: var(--radius-card); }
  .sites-cases, .sites-roles { grid-template-columns: 1fr; }
  .sites-case__head { padding: 22px 22px 18px; }
  .sites-case__shot, .sites-case--wide .sites-case__shot { height: 200px; margin-inline: 22px; }
  .sites-format__link { padding: 22px 56px 22px 22px; border-radius: var(--radius-card); }
  .sites-format__link::after { top: 20px; right: 22px; }
  .sites-format__prices { margin-right: -34px; }
  .sites-price__label { font-size: 14px; }
  .sites-hero__actions .btn { flex: 1 1 100%; }
}

/* ---------- Страницы услуг «Сайты» (detail-sites.php, по макету service-corporate-sites.html) ---------- */
/* О услуге: крупный абзац, слова закрашиваются при прокрутке (main.js ставит --p каждому слову) */
.sites-about { padding-top: 40px; }
.sites-about__text { max-width: 52rem; margin: 0 auto; font-size: clamp(22px, 1rem + 1vw, 30px); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty; }
.text-fill__word { color: color-mix(in srgb, var(--text) calc(var(--p, 0) * 100%), #b9bdc8); }

/* Проблемы: строка — метка, описание, штамп «Решим»; оживают по мере прокрутки (is-active), без JS видно всё */
.sites-problems { margin: 48px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sites-problem { display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; align-items: center; gap: 32px; min-height: 112px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.sites-problem__keyword {
  width: fit-content; font-size: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(120deg, #ff7a1f, #ff7aa8 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: filter .5s var(--ease), opacity .5s var(--ease);
}
.sites-problem__text { font-size: clamp(19px, 1rem + .5vw, 24px); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-wrap: pretty; transition: color .5s var(--ease); }
.sites-problem__stamp {
  justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 10px; border: 2px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(90deg, #ff7a1f, #ff7aa8, #ff7a1f) border-box;
  font-size: 18px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: #f2603a;
  transform: rotate(-6deg); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.sites-problem__stamp::before { content: "✓"; font-weight: 700; letter-spacing: 0; }
.sites-problems.is-live .sites-problem:not(.is-active) .sites-problem__keyword { filter: grayscale(1); opacity: .35; }
.sites-problems.is-live .sites-problem:not(.is-active) .sites-problem__text { color: #b4b7c0; }
.sites-problems.is-live .sites-problem:not(.is-active) .sites-problem__stamp { opacity: 0; transform: translateY(6px) rotate(-6deg); }

/* Кому подходит: вкладки слева, панель справа (наведение на десктопе, клик везде) */
.sites-audience { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; margin-top: 48px; }
.sites-audience__tabs { display: grid; gap: 8px; align-content: start; }
.sites-audience__tab {
  display: flex; align-items: center; min-height: 68px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); font: inherit; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-align: left; color: var(--text-muted); cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.sites-audience__tab span { transition: transform .4s var(--ease), color .2s var(--ease); }
.sites-audience__tab:hover { background: var(--bg); color: var(--text); }
.sites-audience__tab:hover span { transform: translateX(8px); }
.sites-audience__tab.is-active { color: var(--text); border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, #ff7a1f, #ff7aa8) border-box; }
.sites-audience__panels { display: grid; min-height: 352px; }
.sites-audience__panel {
  position: relative; grid-area: 1 / 1; display: flex; flex-direction: column; gap: 24px; padding: 40px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .32s var(--ease), transform .32s var(--ease), visibility 0s linear .32s;
}
.sites-audience__panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .32s var(--ease), transform .32s var(--ease); }
.sites-audience__art { position: absolute; right: 0; bottom: 0; width: 46%; max-width: 416px; height: auto; pointer-events: none; }
.sites-audience__title { position: relative; max-width: 22ch; font-size: clamp(24px, 1rem + 1vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.sites-audience__title .section__title-muted { display: block; }
.sites-audience__text { position: relative; max-width: 36ch; font-size: clamp(17px, 1rem + .3vw, 20px); line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }

/* Форматы на странице услуги: карточки без ссылки; одна цена — карточка по центру */
.sites-format__link--static::after { display: none; }
.sites-format__link--static { padding-right: 72px; }
.sites-formats--single { grid-template-columns: minmax(0, 620px); justify-content: center; }

/* Подробный текст услуги свёрнут */
.sites-more { padding: 8px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); }
.sites-more__toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 20px; font-weight: 600; cursor: pointer; list-style: none; }
.sites-more__toggle::-webkit-details-marker { display: none; }
.sites-more__toggle::after { content: "+"; display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: 22px; transition: transform .25s var(--ease); }
.sites-more[open] .sites-more__toggle::after { transform: rotate(45deg); }
.sites-more__body { padding-bottom: 24px; }

@media (max-width: 900px) {
  .sites-problem { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
  .sites-problem__body { grid-column: 1 / -1; grid-row: 2; }
  .sites-audience { grid-template-columns: 1fr; }
  .sites-audience__tabs { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
  .sites-audience__tab { flex: none; min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14px; white-space: nowrap; color: var(--text); }
  .sites-audience__tab.is-active { color: #fff; background: linear-gradient(120deg, #ff7a1f, #ff7aa8); }
  .sites-audience__tab:hover span { transform: none; }
  .sites-audience__panels { min-height: 0; }
  .sites-audience__panel { padding: 28px 24px 120px; }
  .sites-audience__title .section__title-muted { display: inline; }
}
@media (max-width: 767px) {
  .sites-more { padding: 4px 20px; border-radius: var(--radius-card); }
}

/* Направление «Битрикс24» (макеты service-bitrix24*.html): картинка ноутбука с порталом в первом экране
   вместо «устройств», блок «Ключевые инструменты» — вкладки-пилюли с градиентом и карточки группы. */
.sites-hero__picture img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .sites-hero__picture { animation: rise .9s var(--ease) both; }
}
.sites-tools { margin-top: 40px; }
.sites-tools__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sites-tools__tab {
  min-height: 44px; padding: 8px 24px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text); cursor: pointer;
  transition: color .2s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.sites-tools__tab:hover { border-color: #ffb48a; }
.sites-tools__tab.is-active { color: #fff; border-color: transparent; background: linear-gradient(120deg, #ff7a1f, #ff7aa8); }
.sites-tools__panel { display: none; margin-top: 32px; }
.sites-tools__panel.is-active { display: block; }
.sites-tools__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.sites-tools__item { padding: 28px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.sites-tools__name { font-size: clamp(22px, 1rem + 1vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.sites-tools__text { max-width: 56rem; margin-top: 8px; font-size: 17px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
  .sites-tools__panel.is-active .sites-tools__item { animation: rise .6s var(--ease) both; }
  .sites-tools__panel.is-active .sites-tools__item:nth-child(2) { animation-delay: 70ms; }
  .sites-tools__panel.is-active .sites-tools__item:nth-child(3) { animation-delay: 140ms; }
  .sites-tools__panel.is-active .sites-tools__item:nth-child(4) { animation-delay: 210ms; }
}
@media (max-width: 900px) {
  .sites-tools__tabs { flex-wrap: nowrap; margin-inline: -16px; padding-inline: 16px; overflow-x: auto; scrollbar-width: none; }
  .sites-tools__tabs::-webkit-scrollbar { display: none; }
  .sites-tools__tab { flex: none; white-space: nowrap; }
  .sites-tools__item { padding: 22px; }
}

/* Посадочные Битрикс24 в стиле макета: карточки (sites/extra.php), таблица, пояснение под пунктом «Проблем»,
   подпись над названием формата. */
.sites-problem__body { min-width: 0; }
.sites-problem__sub { max-width: 46rem; margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; transition: color .5s var(--ease); }
.sites-problems.is-live .sites-problem:not(.is-active) .sites-problem__sub { color: #c9cbd3; }
.sites-format__label, .sites-card__label {
  width: fit-content; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--brand-1) 50%, #f2456b); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sites-cards { display: grid; gap: 16px; margin: 48px 0 0; padding: 0; list-style: none; }
.sites-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sites-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sites-card { display: grid; align-content: start; gap: 10px; padding: 28px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.sites-card__name { font-size: clamp(20px, 1rem + .6vw, 26px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.sites-card__text { font-size: 16px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }
.sites-card__text a, .sites-note a { color: var(--accent-strong); }
.sites-card__text ul { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.sites-card__text li { position: relative; padding-left: 22px; }
.sites-card__text li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(120deg, #ff7a1f, #ff7aa8); }
.sites-card--accent { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, #ff7a1f, #ff7aa8) border-box; }
.sites-table { margin-top: 48px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.sites-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.sites-table :is(th, td) { padding: 20px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.sites-table tr:last-child :is(th, td) { border-bottom: 0; }
.sites-table thead th { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.sites-table tbody th { font-weight: 600; white-space: nowrap; }
.sites-table td { color: var(--text-muted); }
.sites-note { margin-top: 24px; text-align: center; color: var(--text-muted); }
@media (max-width: 900px) {
  .sites-cards--2, .sites-cards--3 { grid-template-columns: minmax(0, 1fr); }
  .sites-card { padding: 22px; }
}
.sites-card__name a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
.sites-card__name a::after { content: " ↗"; color: var(--brand-1); }
.sites-card__name a:hover { color: var(--accent-strong); }

/* «Почему нам доверяют» (макеты service-*.html, sites/trust.php): в правом нижнем углу карточки — оранжевая поверхность под загнутым
   листом. При наведении лист отгибается через линию сгиба (отражение по диагонали) и открывает факты. Анимируются только размеры —
   геометрия сгиба выводится из фактического размера листа, поэтому при резком уходе курсора отворот не «переворачивается». */
.sites-why__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.why-card {
  --fold: 3.5rem; --fold-duration: 520ms; --fold-ease: cubic-bezier(.4, 0, .2, 1);
  position: relative; min-height: 16.5rem; padding: 32px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  clip-path: inset(0 round var(--radius-card));
}
.why-card:focus-visible { border-color: #ff7a1f; outline: none; }
.why-card__body { position: relative; z-index: 3; }
.why-card__title { max-width: 18ch; font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.why-card__text { max-width: 21ch; margin-top: 8px; font-size: 17px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.why-card__sheet {
  position: absolute; right: 0; bottom: 0; z-index: 1; width: var(--fold); height: var(--fold);
  background: linear-gradient(90deg, #ff7a1f, #ff7aa8, #ff7a1f) 0 0 / 200% 100%;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transition: width var(--fold-duration) var(--fold-ease), height var(--fold-duration) var(--fold-ease);
}
.why-card__facts { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.why-card__fact {
  padding: 4.5px 11px; border: 1px solid rgb(255 255 255 / .85); border-radius: 999px; color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  opacity: 0; transform: translateY(6px); transition: opacity .2s var(--ease), transform .32s var(--ease);
}
/* Лесенка вдоль диагонали сгиба */
.why-card__fact:nth-child(1) { margin-right: 18px; }
.why-card__fact:nth-child(2) { margin-right: 8px; }
.why-card__fold {
  position: absolute; right: 0; bottom: 0; z-index: 5; width: var(--fold); height: var(--fold); pointer-events: none;
  filter: drop-shadow(-3px -4px 9px rgb(20 20 27 / .22));
  transition: width var(--fold-duration) var(--fold-ease), height var(--fold-duration) var(--fold-ease);
}
.why-card__fold::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--surface) 0 44%, #d3d3da 47.5%, #fff 51%, #efeff3 60%, var(--surface) 84%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transform-origin: 100% 100%; transform: translate(-100%, -100%) matrix(0, -1, -1, 0, 0, 0);
}
@media (hover: hover) {
  .why-card:hover { border-color: #c9cbd3; }
  .why-card:hover, .why-card:focus-visible { --fold: 12.5rem; --fold-duration: 1150ms; --fold-ease: cubic-bezier(.37, .02, .2, 1); }
  .why-card:hover .why-card__fact, .why-card:focus-visible .why-card__fact { opacity: 1; transform: none; }
  .why-card:hover .why-card__fact:nth-child(1), .why-card:focus-visible .why-card__fact:nth-child(1) { transition-delay: 620ms; }
  .why-card:hover .why-card__fact:nth-child(2), .why-card:focus-visible .why-card__fact:nth-child(2) { transition-delay: 720ms; }
  .why-card:hover .why-card__fact:nth-child(3), .why-card:focus-visible .why-card__fact:nth-child(3) { transition-delay: 820ms; }
}
/* Тач и телефон: уголок декоративный, факты — рядом под текстом, с градиентным контуром */
@media (hover: none), (max-width: 639px) {
  .why-card, .why-card:hover, .why-card:focus-visible { --fold: 5.5rem; min-height: 0; }
  .why-card__facts { position: static; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin: 24px 72px 0 0; }
  .why-card__facts .why-card__fact {
    margin-right: 0; border: 1.5px solid transparent; color: var(--text); opacity: 1; transform: none; transition: none;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(90deg, #ff7a1f, #ff7aa8, #ff7a1f) border-box;
  }
}
@media (max-width: 1023px) {
  .sites-why__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Телефон: лента листается пальцем, справа выглядывает следующая карточка */
@media (max-width: 639px) {
  .sites-why__scroller { margin: 32px -16px 0; padding: 4px 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
  .sites-why__scroller::-webkit-scrollbar { display: none; }
  .sites-why__cards { display: flex; gap: 12px; width: max-content; margin: 0; padding: 0 16px; }
  .why-card { flex: none; width: calc(100vw - 16px - 40px - 12px); padding: 24px; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .why-card__sheet, .why-card__fold, .why-card__fact { transition: none; }
}

/* «Отзывы клиентов» (sites/reviews.php) — карточка как в макете; пока отзыв один, он стоит одной карточкой по ширине текста */
.sites-reviews__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 24px; margin: 48px 0 0; padding: 0; list-style: none; }
.sites-reviews__list--single { grid-template-columns: minmax(0, 46rem); }
.review-card { display: flex; flex-direction: column; gap: 32px; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.review-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 3.5rem; }
.review-card__logo { width: auto; max-width: 70%; height: 2.5rem; object-fit: contain; object-position: left center; }
.review-card__quote { height: 1.5rem; font-size: 5rem; font-weight: 800; line-height: .7; background: linear-gradient(90deg, #ff7a1f 50%, #ff7aa8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.review-card__text { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-muted); }
.review-card__text p + p { margin-top: 12px; }
.review-card__author { display: grid; gap: 2px; margin-top: auto; }
.review-card__name { font-weight: 700; }
.review-card__job { font-size: 14px; line-height: 1.4; color: var(--text-muted); }
@media (max-width: 639px) { .review-card { padding: 24px; gap: 24px; } }

/* Каталог лицензий в раскладке макета: группы карточек, старая цена в подписи плашки, описание лицензии */
.lic-group + .lic-group { margin-top: 64px; }
.lic-group .sites-formats { margin-top: 32px; }
.lic-old { margin-left: 6px; color: var(--text-muted); font-weight: 400; }
.lic-prices-note { margin-top: 32px; font-size: 14px; color: var(--text-muted); }
.lic-text { max-width: 860px; margin: 32px auto 0; }
.lic-text__action { margin-top: 32px; }

/* «Подробнее об услуге»: тексты из админки с картинками старого шаблона — картинки не шире текста и не выше 420px */
.sites-more__body img { display: block; max-width: min(100%, 720px); max-height: 420px; width: auto; height: auto; margin: 24px auto; border-radius: var(--radius-card); object-fit: contain; }