/* СИГМАКОД — базовые стили и компоненты 1.0.
   Подключать после tokens.css. Все значения — из токенов; своих цветов и размеров здесь нет.
   Префикс классов .sc-. Модификаторы: .sc-block--variant. Состояния: .is-active, [aria-*]. */

/* ── Шрифты ─────────────────────────────────────────────── */
@font-face{font-family:Oswald;src:url('fonts/oswald-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url('fonts/manrope-variable.ttf') format('truetype');font-weight:200 800;font-display:swap}

/* ── База ───────────────────────────────────────────────── */
.sc-base{
  background:var(--sc-bg);color:var(--sc-text);
  font-family:var(--sc-font-family-text);font-size:var(--sc-typography-body-size);line-height:var(--sc-typography-body-line);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-kerning:normal;hanging-punctuation:first;
}
.sc-base :is(b,strong){font-weight:var(--sc-font-weight-semibold)}
.sc-base ::selection{background:var(--sc-selection);color:var(--sc-text)}
.sc-base :focus-visible{outline:var(--sc-border-width-strong) solid var(--sc-focus);outline-offset:4px}

/* ── Набор: пять кеглей (xl 144 · l 72 · m 40 · s 18 · xs 14), семь ролей ── */
.sc-display,.sc-display-s{font-family:var(--sc-font-family-display);font-weight:var(--sc-font-weight-display);line-height:1;margin:0;text-transform:uppercase;font-variant-numeric:lining-nums}
.sc-display{font-size:var(--sc-typography-display-size);letter-spacing:var(--sc-typography-display-tracking)}
.sc-display-s{font-size:var(--sc-typography-display-s-size);letter-spacing:var(--sc-typography-display-s-tracking)}
/* Красная черта под главной цифрой: треть ширины одной цифры, толщина — от кегля */
.sc-display--accent{position:relative;display:inline-block;padding-bottom:.12em}
.sc-display--accent::after{content:"";position:absolute;left:0;bottom:0;width:.23em;height:var(--sc-border-width-accent);background:var(--sc-red)}
.sc-heading{font-family:var(--sc-font-family-text);font-weight:var(--sc-typography-heading-weight);font-size:var(--sc-typography-heading-size);line-height:var(--sc-typography-heading-line);letter-spacing:var(--sc-typography-heading-tracking);margin:0;text-wrap:balance}
.sc-body{font-size:var(--sc-typography-body-size);line-height:var(--sc-typography-body-line);margin:0;max-width:var(--sc-layout-measure);text-wrap:pretty}
.sc-body-strong{font-size:var(--sc-typography-body-strong-size);line-height:var(--sc-typography-body-strong-line);letter-spacing:var(--sc-typography-body-strong-tracking);font-weight:var(--sc-font-weight-semibold);margin:0}
.sc-small{font-size:var(--sc-typography-small-size);line-height:var(--sc-typography-small-line);margin:0}
.sc-label{font-size:var(--sc-typography-label-size);line-height:var(--sc-typography-label-line);letter-spacing:var(--sc-typography-label-tracking);font-weight:var(--sc-font-weight-semibold);text-transform:uppercase;margin:0}
.sc-secondary{color:var(--sc-text-secondary)}
.sc-tertiary{color:var(--sc-text-tertiary)}
.sc-accent{color:var(--sc-text-accent)}
.sc-tnum{font-variant-numeric:tabular-nums}

/* ── Сетка ──────────────────────────────────────────────── */
.sc-container{width:calc(100% - 2 * var(--sc-layout-margin));max-width:var(--sc-layout-max-width);margin-inline:auto}
.sc-grid{display:grid;grid-template-columns:repeat(var(--sc-layout-columns-mobile),minmax(0,1fr));column-gap:var(--sc-layout-gutter-mobile);row-gap:var(--sc-space-8)}
@media(min-width:700px){.sc-grid{grid-template-columns:repeat(var(--sc-layout-columns-tablet),minmax(0,1fr));column-gap:var(--sc-layout-gutter-tablet)}}
@media(min-width:1100px){.sc-grid{grid-template-columns:repeat(var(--sc-layout-columns-desktop),minmax(0,1fr));column-gap:var(--sc-layout-gutter-desktop)}}
.sc-section{padding-block:var(--sc-layout-section-y);border-top:var(--sc-border-width-hairline) solid var(--sc-border)}
/* Швейцарский приём: узкая левая колонка с названием секции, справа содержание */
.sc-rail{display:grid;gap:var(--sc-space-6)}
@media(min-width:1100px){.sc-rail{grid-template-columns:3fr 9fr;column-gap:var(--sc-layout-gutter-desktop)}}
.sc-rule{border:0;border-top:var(--sc-border-width-hairline) solid var(--sc-border);margin:0}

/* ── Иконки ─────────────────────────────────────────────── */
.sc-icon{width:var(--sc-dimension-icon-l);height:var(--sc-dimension-icon-l);flex:none;display:block}
.sc-icon--m{width:var(--sc-dimension-icon-m);height:var(--sc-dimension-icon-m)}
.sc-icon--s{width:var(--sc-dimension-icon-s);height:var(--sc-dimension-icon-s)}
a .sc-icon,button .sc-icon{transition:translate var(--sc-motion-duration-base) var(--sc-motion-easing-out)}
@media(hover:hover) and (pointer:fine){a:hover .sc-icon--arrow,button:hover .sc-icon--arrow{translate:var(--sc-motion-arrow-shift) 0}}
a:focus-visible .sc-icon--arrow,button:focus-visible .sc-icon--arrow{translate:var(--sc-motion-arrow-shift) 0}

/* ── Ссылка ─────────────────────────────────────────────── */
.sc-link{display:inline-flex;align-items:center;gap:var(--sc-space-3);color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;min-height:var(--sc-dimension-control-s)}
.sc-link:hover{text-decoration-thickness:2px}
.sc-link--accent{color:var(--sc-text-accent)}
.sc-link--plain{text-decoration:none}
.sc-link--plain:hover{text-decoration:underline;text-underline-offset:.3em}

/* ── Кнопка ─────────────────────────────────────────────── */
.sc-button{
  display:inline-flex;align-items:center;justify-content:space-between;gap:var(--sc-space-4);
  min-height:var(--sc-dimension-control-m);padding:0 var(--sc-space-6);
  font:var(--sc-font-weight-regular) var(--sc-size-s)/1.2 var(--sc-font-family-text);
  color:var(--sc-on-action);background:var(--sc-action);border:var(--sc-border-width-hairline) solid transparent;border-radius:var(--sc-radius-none);
  text-decoration:none;text-align:left;cursor:pointer;white-space:nowrap;
  transition:background-color var(--sc-motion-duration-fast) ease-out,color var(--sc-motion-duration-fast) ease-out,border-color var(--sc-motion-duration-fast) ease-out;
}
.sc-button:hover{background:var(--sc-action-hover)}
.sc-button:active{background:var(--sc-action-hover)}
.sc-button:focus-visible{outline:var(--sc-border-width-strong) solid var(--sc-focus);outline-offset:3px}
.sc-button--secondary{background:transparent;color:var(--sc-text);border-color:var(--sc-border-strong)}
.sc-button--secondary:hover{background:var(--sc-text);color:var(--sc-text-inverse)}
/* На цветном фоне (красном, мятном, голубом, фото): бумажная кнопка */
.sc-button--on-color{background:var(--sc-paper);color:var(--sc-text)}
.sc-button--on-color:hover{background:var(--sc-highlight-soft)}
.sc-button--s{min-height:var(--sc-dimension-control-s);padding:0 var(--sc-space-4)}
.sc-button--l{min-height:var(--sc-dimension-control-l);padding:0 var(--sc-space-8)}
.sc-button--block{display:flex;width:100%}
.sc-button:disabled,.sc-button[aria-disabled="true"]{background:var(--sc-color-neutral-100);color:var(--sc-text-disabled);border-color:transparent;cursor:not-allowed}
.sc-button:disabled .sc-icon,.sc-button[aria-disabled="true"] .sc-icon{translate:none}

/* Надпись у кнопки: «Ни к чему не обязывает» */
.sc-button-note{display:block;margin-top:var(--sc-space-3);font-size:var(--sc-size-xs);line-height:var(--sc-typography-small-line);color:var(--sc-text-secondary);max-width:40ch}

/* ── Поля и форма ───────────────────────────────────────── */
.sc-field{display:grid;gap:var(--sc-space-2)}
.sc-field__label{font-size:var(--sc-size-xs);line-height:1.3;color:var(--sc-text)}
.sc-field__input{
  width:100%;min-height:var(--sc-dimension-control-m);padding:0 var(--sc-space-4);
  font:400 var(--sc-typography-body-size)/1.2 var(--sc-font-family-text);color:var(--sc-text);
  background:var(--sc-surface);border:var(--sc-border-width-hairline) solid var(--sc-border);border-radius:var(--sc-radius-none);
  transition:border-color var(--sc-motion-duration-fast) ease-out;
}
.sc-field__input::placeholder{color:var(--sc-text-disabled)}
.sc-field__input:hover{border-color:var(--sc-color-neutral-400)}
.sc-field__input:focus{outline:none;border-color:var(--sc-border-strong);box-shadow:inset 0 0 0 1px var(--sc-border-strong)}
.sc-field__hint{font-size:var(--sc-size-xs);line-height:var(--sc-typography-small-line);color:var(--sc-text-tertiary)}
.sc-field.is-invalid .sc-field__input{border-color:var(--sc-color-status-error);box-shadow:inset 0 0 0 1px var(--sc-color-status-error)}
.sc-field.is-invalid .sc-field__hint{color:var(--sc-color-status-error)}

/* Выбор из нескольких: способ связи. Выбранное — мятным. */
.sc-choice{display:flex;flex-wrap:wrap;border:0;padding:0;margin:0;gap:0}
.sc-choice legend{font-size:var(--sc-size-xs);margin-bottom:var(--sc-space-2);padding:0}
.sc-choice label{position:relative;display:inline-flex;align-items:center;min-height:var(--sc-dimension-control-s);padding:0 var(--sc-space-4);border:var(--sc-border-width-hairline) solid var(--sc-border);margin-left:-1px;cursor:pointer;background:var(--sc-surface);font-size:var(--sc-size-s)}
.sc-choice label:first-of-type{margin-left:0}
.sc-choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sc-choice label:has(input:checked){background:var(--sc-highlight);border-color:var(--sc-border-strong);z-index:1}
.sc-choice label:has(input:focus-visible){outline:var(--sc-border-width-strong) solid var(--sc-focus);outline-offset:2px;z-index:2}

.sc-check{display:flex;gap:var(--sc-space-3);align-items:flex-start;font-size:var(--sc-size-xs);line-height:var(--sc-typography-small-line);color:var(--sc-text-tertiary);cursor:pointer}
.sc-check input{appearance:none;flex:none;width:18px;height:18px;margin:0;border:var(--sc-border-width-hairline) solid var(--sc-color-neutral-400);background:var(--sc-surface);border-radius:0;display:grid;place-content:center;cursor:pointer}
.sc-check input:checked{background:var(--sc-text);border-color:var(--sc-text)}
.sc-check input:checked::after{content:"";width:8px;height:8px;background:var(--sc-paper)}

.sc-form{display:grid;gap:var(--sc-space-5);max-width:520px}
.sc-form--panel{padding:var(--sc-space-8);background:var(--sc-info-surface)}
.sc-form--panel .sc-field__input,.sc-form--panel .sc-choice label{border-color:var(--sc-text)}
.sc-form--panel .sc-check,.sc-form--panel .sc-field__hint,.sc-form--panel .sc-button-note{color:var(--sc-text)}

/* ── Метка и примечания ─────────────────────────────────── */
.sc-source{display:block;font-size:var(--sc-size-xs);line-height:var(--sc-typography-small-line);color:var(--sc-text-tertiary);margin-top:var(--sc-space-2)}
.sc-source a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.sc-note{display:inline-flex;align-items:center;gap:var(--sc-space-2);font-size:var(--sc-size-xs)}
.sc-note::before{content:"";width:.6em;height:.6em;background:currentColor}

/* ── Показатель: цифра, что она значит, источник ─────────── */
.sc-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sc-space-6);margin:0}
.sc-metric{padding-left:var(--sc-space-6);border-left:var(--sc-border-width-hairline) solid var(--sc-border)}
.sc-metric:first-child{padding-left:0;border-left:0}
.sc-metric dt,.sc-metric__value{font:700 var(--sc-size-l)/1 var(--sc-font-family-display);letter-spacing:0;font-variant-numeric:lining-nums}
.sc-metric dd{margin:var(--sc-space-2) 0 0;font-size:var(--sc-size-s);line-height:var(--sc-typography-body-strong-line);color:var(--sc-text-secondary)}
.sc-metric dd+dd{margin-top:var(--sc-space-1)}

/* ── Строки: услуги, этапы, список со стрелкой ─────────── */
.sc-rows{list-style:none;margin:0;padding:0;border-top:var(--sc-border-width-hairline) solid var(--sc-border)}
.sc-row{display:grid;align-items:center;gap:var(--sc-space-1) var(--sc-space-6);padding:var(--sc-space-5) var(--sc-space-4);border-bottom:var(--sc-border-width-hairline) solid var(--sc-border);color:inherit;text-decoration:none;transition:background-color var(--sc-motion-duration-fast) ease-out}
.sc-row__index{font-size:var(--sc-size-m);line-height:1;letter-spacing:var(--sc-typography-heading-tracking);color:var(--sc-text-tertiary);font-variant-numeric:tabular-nums;min-width:2ch}
.sc-row__title{font-size:var(--sc-size-m);line-height:var(--sc-typography-heading-line);letter-spacing:var(--sc-typography-heading-tracking)}
.sc-row__meta{font-size:var(--sc-size-xs);line-height:var(--sc-typography-small-line);color:var(--sc-text-secondary)}
/* Раскладка зависит от ширины списка, а не окна: в узкой колонке описание уходит под заголовок */
.sc-rows{container-type:inline-size}
.sc-row{grid-template-columns:3rem minmax(0,1fr) auto}
.sc-row__meta{grid-column:2;grid-row:2}
.sc-row>.sc-icon,.sc-row>span:last-child:empty{grid-column:3;grid-row:1/3}
@container (min-width:900px){
  .sc-row{grid-template-columns:4rem minmax(0,1fr) minmax(12rem,16rem) auto}
  .sc-row__meta{grid-column:3;grid-row:1}
  .sc-row>.sc-icon,.sc-row>span:last-child:empty{grid-column:4;grid-row:1}
}
a.sc-row:hover{background:var(--sc-highlight-soft)}
.sc-row.is-active{background:var(--sc-highlight)}

/* Раскрывающаяся строка */
.sc-disclosure{border-bottom:var(--sc-border-width-hairline) solid var(--sc-border)}
.sc-disclosure summary{display:flex;align-items:center;gap:var(--sc-space-6);padding:var(--sc-space-5) 0;cursor:pointer;list-style:none}
.sc-disclosure summary::-webkit-details-marker{display:none}
.sc-disclosure summary::after{content:"";margin-left:auto;width:18px;height:18px;flex:none;background:linear-gradient(currentColor 0 0) center/100% 1.5px no-repeat,linear-gradient(currentColor 0 0) center/1.5px 100% no-repeat;transition:rotate var(--sc-motion-duration-base) var(--sc-motion-easing-out)}
.sc-disclosure[open] summary::after{rotate:45deg}
.sc-disclosure__body{padding:0 0 var(--sc-space-6) calc(4rem + var(--sc-space-6));max-width:calc(var(--sc-layout-measure) + 4rem)}

/* ── Карточка кейса ─────────────────────────────────────── */
.sc-case{position:relative;display:grid;gap:var(--sc-space-4);color:inherit;text-decoration:none}
.sc-case__visual{position:relative;aspect-ratio:6/5;overflow:hidden;background:var(--sc-color-neutral-900);color:var(--sc-text-inverse)}
.sc-case__visual>.sc-label{position:absolute;left:var(--sc-space-6);top:var(--sc-space-6);z-index:2}
.sc-case__visual>.sc-note{position:absolute;left:var(--sc-space-6);bottom:var(--sc-space-5);z-index:2;opacity:.75}
.sc-case__body{display:grid;grid-template-columns:1fr auto;gap:var(--sc-space-1) var(--sc-space-4);align-items:start}
.sc-case__title{grid-column:1;font-weight:var(--sc-font-weight-semibold);font-size:var(--sc-size-s);line-height:var(--sc-typography-body-strong-line);letter-spacing:var(--sc-typography-body-strong-tracking);margin:0}
.sc-case__text{grid-column:1;font-size:var(--sc-size-s);color:var(--sc-text-secondary);margin:0}
.sc-case__body .sc-icon{grid-column:2;grid-row:1}
.sc-case:hover .sc-case__title{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}

/* ── Таблица: сравнения, тарифы, состав работ ──────────── */
.sc-table-wrap{overflow-x:auto;border-top:var(--sc-border-width-hairline) solid var(--sc-border-strong)}
.sc-table{width:100%;border-collapse:collapse;font-size:var(--sc-size-xs);line-height:var(--sc-typography-small-line)}
.sc-table th{text-align:left;font-weight:var(--sc-font-weight-regular);color:var(--sc-text-tertiary);padding:var(--sc-space-3) var(--sc-space-4) var(--sc-space-3) 0;border-bottom:var(--sc-border-width-hairline) solid var(--sc-border);vertical-align:bottom}
.sc-table td{padding:var(--sc-space-4) var(--sc-space-4) var(--sc-space-4) 0;border-bottom:var(--sc-border-width-hairline) solid var(--sc-border);vertical-align:top}
.sc-table td:first-child{font-weight:var(--sc-font-weight-semibold)}

/* ── Цитата-обязательство: мятная черта слева ─────────── */
.sc-quote{margin:0;padding-left:var(--sc-space-6);border-left:var(--sc-space-1) solid var(--sc-mint);font-size:var(--sc-size-m);line-height:var(--sc-typography-heading-line);letter-spacing:var(--sc-typography-heading-tracking);max-width:30ch}

/* ── Шапка ──────────────────────────────────────────────── */
.sc-header{display:flex;align-items:center;gap:var(--sc-space-8);min-height:72px}
.sc-header__logo{display:block;height:18px;flex:none;color:var(--sc-text)}
.sc-header__logo img,.sc-header__logo svg{height:100%;width:auto;display:block}
.sc-header__nav{display:flex;gap:var(--sc-space-8);margin-left:auto;font-size:var(--sc-size-s);white-space:nowrap}
.sc-header__nav a{color:inherit;text-decoration:none}
.sc-header__nav a:hover,.sc-header__nav a[aria-current]{text-decoration:underline;text-underline-offset:.35em}
.sc-header__cta{padding-left:var(--sc-space-8);border-left:var(--sc-border-width-hairline) solid var(--sc-border);white-space:nowrap}
/* Меню помещается только от 1100 px; уже — кнопка «Меню» (на лендинге: details.mobile-menu) */
@media(max-width:1099px){.sc-header__nav{display:none}.sc-header__cta{margin-left:auto;padding-left:0;border:0}}

/* ── Виджет мессенджеров: круглая кнопка внизу справа ───── */
.sc-widget{position:fixed;right:var(--sc-space-6);bottom:var(--sc-space-6);z-index:var(--sc-z-widget);display:flex;flex-direction:column-reverse;align-items:flex-end;gap:var(--sc-space-2)}
.sc-widget--static{position:relative;right:auto;bottom:auto}
.sc-widget__toggle{width:56px;height:56px;border-radius:var(--sc-radius-full);border:var(--sc-border-width-hairline) solid var(--sc-border);background:color-mix(in srgb,var(--sc-paper) 88%,transparent);backdrop-filter:blur(8px);box-shadow:var(--sc-shadow-overlay);display:grid;place-items:center;cursor:pointer;color:var(--sc-text)}
.sc-widget__toggle .sc-icon{width:24px;height:24px}
.sc-widget__list{display:flex;flex-direction:column;gap:var(--sc-space-2);opacity:0;translate:0 8px;pointer-events:none;visibility:hidden;transition:opacity var(--sc-motion-duration-base) var(--sc-motion-easing-out),translate var(--sc-motion-duration-base) var(--sc-motion-easing-out),visibility 0s linear var(--sc-motion-duration-base)}
.sc-widget:is(:hover,:focus-within,.is-open) .sc-widget__list{opacity:1;translate:0 0;pointer-events:auto;visibility:visible;transition-delay:0s}
.sc-widget__list a{display:flex;align-items:center;justify-content:space-between;gap:var(--sc-space-4);min-width:176px;min-height:var(--sc-dimension-control-s);padding:0 var(--sc-space-4);background:var(--sc-surface);border:var(--sc-border-width-hairline) solid var(--sc-border);box-shadow:var(--sc-shadow-overlay);color:var(--sc-text);text-decoration:none;font-size:var(--sc-size-s)}
.sc-widget__list a:hover{background:var(--sc-highlight-soft)}

/* ── Геометрия: косые плоскости ───────────────────────────
   Плоскость — прямоугольник, повёрнутый вокруг левого верхнего угла:
   --along  −27°: пологий край, поднимается вправо (красный на лендинге);
   --steep  −63°: крутой край, поднимается вправо (мятный и голубой).
   Поворот, а не clip-path: углы остаются точными при любом формате носителя. */
.sc-geo{position:relative;overflow:hidden;isolation:isolate}
.sc-geo__plane{position:absolute;width:var(--w,120%);height:var(--h,60%);left:var(--x,0%);top:var(--y,0%);rotate:var(--r,-27deg);transform-origin:0 0;z-index:-1}
.sc-geo__plane--red{background:var(--sc-red)}
.sc-geo__plane--mint{background:var(--sc-mint)}
.sc-geo__plane--blue{background:var(--sc-blue)}
.sc-geo__plane--ink{background:var(--sc-ink)}
.sc-geo__plane--along{--r:-27deg}
.sc-geo__plane--steep{--r:-63deg}

/* ── Анимация: ничего не дёргается ──────────────────────── */
@media(prefers-reduced-motion:reduce){
  .sc-base *,.sc-base *::before,.sc-base *::after{transition-duration:1ms!important;animation:none!important;translate:none!important}
}