/* Torgs UI — дизайн-система по канону docs/DESIGN_SYSTEM_TORGS.md */

:root {
    --bg: #f6f7fb;
    --surface: #ffffff;
    --surface-2: #fbfbfe;
    --text: #0f1221;
    --muted: #6b7285;
    --line: rgba(15, 18, 33, .08);
    --line-strong: rgba(15, 18, 33, .14);

    --brand: #6d4aff;
    --brand-strong: #5b3cf0;
    --brand-soft: #f1edff;
    --brand-2: #2ec9c0;
    --cta: linear-gradient(90deg, #6d4aff 0%, #7b5cff 45%, #2ec9c0 100%);

    --ok-bg: #e8f7ef;
    --ok-fg: #1c7a4b;
    --warn-bg: #fdf3e2;
    --warn-fg: #96601a;
    --danger-bg: #fdeced;
    --danger-fg: #a52834;
    --info-bg: #ecf1ff;
    --info-fg: #2d4ea8;

    --r-card: 20px;
    --r-card-lg: 24px;
    --r-ctl: 14px;
    --r-pill: 999px;

    --shadow: 0 8px 24px rgba(15, 18, 33, .06);
    --shadow-hover: 0 14px 34px rgba(15, 18, 33, .1);

    --rail-l: 264px;
    --rail-r: 300px;
    --gap: 24px;
    --page: 1440px;

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 44px;

    --measure: 68ch;

    --t: 180ms cubic-bezier(.2, .7, .3, 1);
}

/* ---------- reset ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.tui {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.tui img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* :where даёт нулевую специфичность: сброс не перебивает цвет кнопок и ссылок-компонентов.
   С обычным `.tui a` правило было сильнее, чем `.tui-btn--cta`, и текст кнопок терял белый цвет. */
:where(.tui) :where(a) {
    color: inherit;
    text-decoration: none;
}

:where(.tui) :where(button) {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Атрибут hidden не действует на SVG: спрайт иконок без этого правила
   занимает на странице пустой блок 300x150. */
.tui svg[hidden] {
    display: none;
}

.tui h1,
.tui h2,
.tui h3,
.tui h4,
.tui p,
.tui ul,
.tui ol {
    margin: 0;
}

.tui ul,
.tui ol {
    padding: 0;
    list-style: none;
}

.tui :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 6px;
}

.tui-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- утилиты вместо инлайновых стилей ---------- */

.tui-stack {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.tui-stack--4 {
    gap: var(--s-4);
}

.tui-stack--6 {
    gap: var(--s-6);
}

.tui-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
}

.tui-measure {
    max-width: var(--measure);
}

.tui-note {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.tui-num {
    font-variant-numeric: tabular-nums;
}

.tui-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
    align-items: start;
}

.tui-split--wide-l {
    grid-template-columns: 1.15fr 1fr;
}

/* ---------- layout ---------- */

.tui-wrap {
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 24px;
}

.tui-shell {
    display: grid;
    grid-template-columns: var(--rail-l) minmax(0, 1fr) var(--rail-r);
    gap: 16px;
    max-width: var(--page);
    margin: 0 auto;
    padding: 16px 20px;
    align-items: start;
}

.tui-rail {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tui-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
}

/* ---------- topbar ---------- */

.tui-topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}

.tui-topbar__in {
    max-width: var(--page);
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.tui-topbar__sp {
    margin-left: auto;
}

.tui-topbar a:hover {
    color: var(--text);
}

/* ---------- header ---------- */

.tui-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.tui-header__in {
    max-width: var(--page);
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.tui-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.tui-logo__mark {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--cta);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 16px;
}

.tui-logo__text {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .04em;
}

.tui-nav {
    display: flex;
    gap: 4px;
}

.tui-nav a {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 15px;
    color: var(--muted);
    transition: background var(--t), color var(--t);
}

.tui-nav a:hover,
.tui-nav a.is-current {
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.tui-search {
    margin-left: auto;
    position: relative;
    flex: 0 1 320px;
    min-width: 180px;
}

.tui-search .tui-sug {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    margin-top: 0;
}

.tui-search input {
    width: 100%;
    padding: 9px 56px 9px 38px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-ctl);
    background: var(--surface-2);
    font-size: 14px;
    color: var(--text);
    transition: border-color var(--t), background var(--t);
}

.tui-search input:focus {
    outline: none;
    border-color: var(--brand);
    background: #fff;
}

.tui-search__ico {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.tui-kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 6px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    font-size: 11px;
    color: var(--muted);
    background: #fff;
    pointer-events: none;
}

/* ---------- buttons ---------- */

.tui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--r-ctl);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}

.tui-btn--cta {
    background: var(--cta);
    color: #fff;
    box-shadow: 0 8px 20px rgba(109, 74, 255, .28);
}

.tui-btn--dark {
    background: var(--text);
    color: #fff;
}

.tui-btn--ghost {
    background: var(--surface);
    color: var(--text);
    border-color: var(--line-strong);
}

.tui-btn--quiet {
    background: transparent;
    color: var(--muted);
    border-color: var(--line-strong);
    min-height: 38px;
    padding: 8px 14px;
    font-size: 14px;
}

.tui-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.tui-btn--sm {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 14px;
}

.tui-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-strong);
    font-weight: 600;
    font-size: 14px;
}

.tui-link:hover {
    text-decoration: underline;
}

/* ---------- cards ---------- */

.tui-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    padding: 20px;
}

.tui-card--flat {
    box-shadow: none;
}

.tui-card--pad-lg {
    padding: 24px;
}

.tui-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 13px;
    font-weight: 600;
}

.tui-h1 {
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.14;
    letter-spacing: -.02em;
    font-weight: 700;
}

.tui-h2 {
    font-size: clamp(21px, 2vw, 27px);
    line-height: 1.24;
    letter-spacing: -.01em;
    font-weight: 700;
}

.tui-h3 {
    font-size: 17px;
    font-weight: 650;
    line-height: 1.3;
}

.tui-lead {
    color: var(--muted);
    font-size: 16px;
}

.tui-muted {
    color: var(--muted);
    font-size: 14px;
}

.tui-accent {
    background: var(--cta);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- hero ---------- */

.tui-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 380px at 88% -26%, rgba(46, 201, 192, .2), transparent 62%),
        radial-gradient(900px 340px at 2% -14%, rgba(109, 74, 255, .18), transparent 60%),
        var(--surface);
}

/* Тонкая сетка на фоне — намёк на промышленный контекст без картинок. */
.tui-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(15, 18, 33, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 18, 33, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(720px 320px at 82% 0%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(720px 320px at 82% 0%, #000 0%, transparent 72%);
    pointer-events: none;
}

.tui-hero > *:not(.tui-cover) {
    position: relative;
}

.tui-hero__lead {
    color: var(--muted);
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.55;
    max-width: 62ch;
}

.tui-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
}

.tui-tab {
    padding: 8px 16px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    transition: background var(--t), color var(--t);
}

.tui-tab[aria-selected="true"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(15, 18, 33, .07);
}

.tui-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.tui-field:focus-within {
    border-color: var(--brand);
}

.tui-field__ico {
    padding-left: 10px;
    color: var(--muted);
    flex-shrink: 0;
}

.tui-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 10px 4px;
    font-size: 16px;
    color: var(--text);
}

.tui-field input:focus {
    outline: none;
}

.tui-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tui-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: 13px;
    color: var(--muted);
    transition: border-color var(--t), color var(--t), background var(--t);
}

.tui-pill:hover {
    border-color: var(--brand);
    color: var(--brand-strong);
    background: var(--brand-soft);
}

/* подсказки поиска */

.tui-sug {
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    background: var(--surface);
    box-shadow: var(--shadow);
    max-height: 320px;
    overflow: auto;
}

.tui-sug:empty {
    display: none;
}

.tui-sug__group {
    padding: 10px 14px 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.tui-sug a {
    display: block;
    padding: 9px 14px;
    font-size: 14px;
    border-top: 1px solid var(--line);
}

.tui-sug a:hover {
    background: var(--brand-soft);
}

/* ---------- stats ---------- */

.tui-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.tui-stat {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    background: rgba(255, 255, 255, .72);
}

.tui-stat__v {
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    color: var(--text);
    min-height: 1.15em;
}

.tui-stat__l {
    margin-top: 2px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
}

/* ---------- grids ---------- */

.tui-grid {
    display: grid;
    gap: 16px;
}

.tui-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tui-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- module (карта требований) ---------- */

.tui-mod {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.tui-mod:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.tui-mod__top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}

.tui-chip {
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.tui-chip--ok {
    background: var(--ok-bg);
    color: var(--ok-fg);
}

.tui-chip--warn {
    background: var(--warn-bg);
    color: var(--warn-fg);
}

.tui-chip--danger {
    background: var(--danger-bg);
    color: var(--danger-fg);
}

.tui-chip--info {
    background: var(--info-bg);
    color: var(--info-fg);
}

.tui-mod--static:hover {
    transform: none;
    box-shadow: none;
}

/* ---------- price ---------- */

.tui-price {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow);
    position: relative;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.tui-price:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.tui-price--hot {
    border-color: rgba(109, 74, 255, .4);
}

.tui-price__badge {
    position: absolute;
    top: -11px;
    left: 24px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--cta);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.tui-price__val {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tui-price__term {
    font-size: 13px;
    color: var(--muted);
}

.tui-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: var(--muted);
}

.tui-list li {
    display: flex;
    gap: 9px;
}

.tui-list li::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b3cf0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---------- next step ---------- */

.tui-next {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 26px;
    border-radius: var(--r-card-lg);
    background: linear-gradient(120deg, #2a1d6b 0%, #4b32c3 55%, #1f7c78 100%);
    color: #fff;
}

.tui-next__t {
    flex: 1 1 320px;
}

.tui-next h2 {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.tui-next p {
    color: rgba(255, 255, 255, .78);
    font-size: 15px;
    margin-top: 6px;
}

.tui-next .tui-btn--cta {
    background: #fff;
    color: var(--text);
    box-shadow: none;
}

.tui-next .tui-btn--ghost {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
}

/* ---------- rails ---------- */

.tui-railcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
}

.tui-railcard__t {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin-bottom: 12px;
}

.tui-side a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 12px;
    font-size: 14px;
    color: var(--muted);
    transition: background var(--t), color var(--t);
}

.tui-side a:hover {
    background: var(--bg);
    color: var(--text);
}

.tui-side a.is-active {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
}

.tui-side a.is-current:not(.is-active) {
    background: var(--bg);
    color: var(--text);
    font-weight: 600;
}

.tui-side__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    flex-shrink: 0;
}

.tui-cabinet {
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(150deg, #4b32c3, #6d4aff 60%, #2ec9c0);
    color: #fff;
}

.tui-cabinet__l {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .8;
}

.tui-cabinet__v {
    font-size: 18px;
    font-weight: 700;
    margin: 6px 0 2px;
}

.tui-cabinet__s {
    font-size: 13px;
    opacity: .82;
    margin-bottom: 14px;
}

.tui-cabinet .tui-btn {
    width: 100%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    min-height: 40px;
    font-size: 14px;
}

.tui-tile {
    display: flex;
    gap: 12px;
    padding: 11px;
    border-radius: 14px;
    transition: background var(--t);
}

.tui-tile:hover {
    background: var(--bg);
}

.tui-tile__ico {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.tui-tile__n {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.tui-tile__d {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}

/* ---------- секции и ритм страницы ---------- */

/* Секция = карточка с одинаковым внутренним ритмом.
   Заголовок, тело и подпись не требуют инлайновых отступов. */
.tui-sec {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tui-sec__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}

.tui-sec__title {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    align-items: flex-start;
}

.tui-sec__aside {
    color: var(--muted);
    font-size: 14px;
}

.tui-sub {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Чередование фона даёт ритм: белое — приглушённое — белое. */
.tui-card--tint {
    background:
        linear-gradient(180deg, var(--brand-soft) 0%, rgba(241, 237, 255, 0) 46%),
        var(--surface);
}

.tui-card--dark {
    background: linear-gradient(120deg, #191c33 0%, #241f4d 52%, #14343a 100%);
    border-color: rgba(255, 255, 255, .1);
    color: #fff;
}

.tui-card--dark .tui-muted,
.tui-card--dark .tui-lead,
.tui-card--dark .tui-note {
    color: rgba(255, 255, 255, .72);
}

.tui-card--dark .tui-eyebrow {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.tui-card--dark .tui-btn--cta {
    background: #fff;
    color: var(--text);
    box-shadow: none;
}

.tui-card--dark .tui-btn--ghost {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
}

.tui-card--accent {
    border-color: rgba(109, 74, 255, .32);
    box-shadow: 0 14px 40px rgba(109, 74, 255, .12);
}

/* Полоса цифр на тёмном — акцент для блока результатов. */
.tui-band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-3);
    padding: var(--s-5);
    border-radius: var(--r-card);
    background: linear-gradient(120deg, #191c33 0%, #241f4d 52%, #14343a 100%);
    color: #fff;
}

.tui-band__v {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.tui-band__l {
    font-size: 13px;
    color: rgba(255, 255, 255, .68);
    line-height: 1.4;
}

/* ---------- квиз ---------- */

.tui-quiz {
    max-width: 640px;
}

.tui-quiz__step {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.tui-quiz__bar {
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--line);
    overflow: hidden;
    margin: 10px 0 18px;
}

.tui-quiz__bar i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--cta);
    transition: width var(--t);
}

.tui-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-ctl);
    background: var(--surface);
    font-size: 15px;
    transition: border-color var(--t), background var(--t);
}

.tui-opt:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

/* ---------- формы ---------- */

.tui-in {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-ctl);
    background: var(--surface);
    font-size: 15px;
    color: var(--text);
    transition: border-color var(--t);
}

.tui-in:focus {
    outline: none;
    border-color: var(--brand);
}

.tui-lb {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
}

.tui-check {
    display: flex;
    gap: 10px;
    align-items: start;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
}

.tui-check input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--brand);
    flex-shrink: 0;
}

.tui-check a {
    color: var(--brand-strong);
    text-decoration: underline;
}

/* ---------- FAQ ---------- */

.tui-acc {
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    background: var(--surface);
    overflow: hidden;
}

.tui-acc + .tui-acc {
    margin-top: 10px;
}

.tui-acc summary {
    padding: 15px 18px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.tui-acc summary::-webkit-details-marker {
    display: none;
}

.tui-acc summary::after {
    content: "+";
    color: var(--muted);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
}

.tui-acc[open] summary::after {
    content: "–";
}

.tui-acc__b {
    padding: 0 18px 16px;
    color: var(--muted);
    font-size: 14.5px;
}

/* ---------- кейсы / статьи ---------- */

.tui-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    height: 100%;
    transition: box-shadow var(--t), transform var(--t);
}

.tui-item:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.tui-item__meta {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ---------- footer ---------- */

.tui-foot {
    margin-top: 32px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.tui-foot__in {
    max-width: var(--page);
    margin: 0 auto;
    padding: 36px 24px;
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 28px;
}

.tui-foot h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin-bottom: 12px;
}

.tui-foot li + li {
    margin-top: 7px;
}

.tui-foot a {
    font-size: 14px;
    color: var(--text);
}

.tui-foot a:hover {
    color: var(--brand-strong);
}

.tui-foot__bottom {
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}

.tui-foot__bottom > div {
    max-width: var(--page);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ---------- мобильное меню ---------- */

.tui-burger {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    place-items: center;
}

/* ---------- дорожки по интенту ---------- */

.tui-lane {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 18px 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    overflow: hidden;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.tui-lane::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--lane, var(--brand));
}

.tui-lane:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: var(--line-strong);
}

.tui-lane__hd {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tui-lane__ico {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--brand-soft);
    background: color-mix(in srgb, var(--lane, var(--brand)) 12%, #fff);
    color: var(--lane, var(--brand));
}

.tui-lane__q {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--lane, var(--brand));
}

.tui-lane__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
}

.tui-lane__links a {
    font-size: 12.5px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--bg);
    color: var(--muted);
}

.tui-lane__links a:hover {
    background: var(--brand-soft);
    color: var(--brand-strong);
}

/* ---------- навигатор по разделам ---------- */

.tui-navtile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.tui-navtile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--line-strong);
}

.tui-navtile__c {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-strong);
    letter-spacing: .02em;
}

.tui-navtile__n {
    font-size: 15px;
    font-weight: 650;
}

.tui-navtile__d {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
}

/* ---------- шаги ---------- */

.tui-steps {
    counter-reset: st;
    display: grid;
    gap: 14px;
}

.tui-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.tui-step__n {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
}

/* ---------- таблица сравнения ---------- */

.tui-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
}

.tui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 520px;
}

.tui-table th,
.tui-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.tui-table thead th {
    background: var(--bg);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 700;
}

.tui-table tbody tr:last-child td {
    border-bottom: 0;
}

.tui-table td:first-child {
    color: var(--muted);
}

.tui-table .is-good {
    color: var(--ok-fg);
    font-weight: 600;
}

.tui-table .is-bad {
    color: var(--danger-fg);
}

/* ---------- калькулятор готовности ---------- */

.tui-calc__row {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    background: var(--surface);
    font-size: 14.5px;
    cursor: pointer;
    transition: border-color var(--t), background var(--t);
}

.tui-calc__row:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.tui-calc__row input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--brand);
    flex-shrink: 0;
}

.tui-calc__out {
    padding: 16px 18px;
    border-radius: var(--r-ctl);
    background: var(--bg);
    border: 1px solid var(--line);
}

.tui-calc__next {
    margin-top: 12px;
}

.tui-calc__rec {
    margin: 0 0 10px;
    font-size: 14.5px;
}

.tui-calc__v {
    margin: 10px 0 4px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* ---------- липкая кнопка на мобильных ---------- */

.tui-mcta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
}

.tui-mcta .tui-btn {
    flex: 1;
}

.tui-mcta .tui-btn--ghost {
    flex: 0 0 auto;
}

/* ---------- адаптив ---------- */

@media (max-width: 1439px) {
    /* Портальная навигация длинная — на средних экранах сжимаем, а не ломаем в две строки. */
    .tui-nav a {
        padding: 8px 9px;
        font-size: 14px;
    }
}

@media (max-width: 1279px) {
    .tui-header {
        z-index: 86;
    }

    .tui-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .tui-rail {
        position: static;
    }

    .tui-rail--l {
        order: 2;
    }

    .tui-main {
        order: 1;
    }

    .tui-rail--r {
        order: 3;
    }

    .tui-rail--r .tui-railcard > div {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 4px;
    }

    .tui-nav {
        display: none;
    }

    .tui-burger {
        display: grid;
        margin-left: auto;
        position: relative;
        z-index: 87;
    }

    .tui-nav.is-open {
        display: flex;
        position: fixed;
        z-index: 85;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 88vw);
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 72px 18px 24px;
        background: #fff;
        overflow: auto;
        box-shadow: -12px 0 40px rgba(15, 18, 33, .12);
    }

    .tui-navveil:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 84;
        background: rgba(15, 18, 33, .4);
    }
}

@media (max-width: 1023px) {
    .tui-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tui-foot__in {
        grid-template-columns: repeat(2, 1fr);
    }

    .tui-stats,
    .tui-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tui-split,
    .tui-split--wide-l {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-6);
    }
}

@media (max-width: 767px) {
    .tui-shell {
        padding: 16px;
        gap: 16px;
    }

    .tui-card,
    .tui-price {
        padding: 18px;
    }

    .tui-card--pad-lg {
        padding: 20px;
    }

    .tui-grid--2,
    .tui-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .tui-field {
        flex-wrap: wrap;
    }

    .tui-field .tui-btn {
        width: 100%;
    }

    .tui-search {
        flex-basis: 100%;
        order: 3;
        margin-left: 0;
    }

    .tui-header__in {
        flex-wrap: wrap;
        gap: 12px;
    }

    .tui-burger {
        display: grid;
        margin-left: auto;
    }

    .tui-topbar__in {
        font-size: 12px;
        gap: 12px;
    }

    .tui-hide-sm {
        display: none;
    }

    .tui-foot__in {
        grid-template-columns: minmax(0, 1fr);
        padding: 26px 16px;
    }

    .tui-next {
        padding: 20px;
    }

    .tui-band {
        padding: var(--s-4);
    }

    .tui-sec {
        gap: var(--s-4);
    }

    .tui-mcta {
        display: flex;
    }

    .tui-botfab {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .tui-bot.is-open {
        bottom: calc(76px + env(safe-area-inset-bottom));
        max-height: min(68vh, calc(100vh - 160px));
    }

    .tui-pill,
    .tui-pager a,
    .tui-pager span {
        min-height: 44px;
    }

    body.tui {
        padding-bottom: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tui * {
        animation: none !important;
        transition: none !important;
    }

    .tui-btn:hover,
    .tui-mod:hover,
    .tui-price:hover,
    .tui-item:hover {
        transform: none;
    }
}

/* ---------- каталог: списки шапки и подвала ---------- */

.tui-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--muted);
}

.tui-crumbs a:hover {
    color: var(--brand-strong);
}

.tui-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.tui-navveil {
    display: none;
}

.tui-nav-lock,
.tui-modal-lock {
    overflow: hidden;
}

.tui-kv {
    display: grid;
    gap: 10px;
    margin: 16px 0 24px;
}

.tui-kv > div {
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

.tui-kv dt {
    color: var(--muted);
}

.tui-olist {
    margin: 0 0 16px;
    padding-left: 20px;
}

.tui-olist li + li {
    margin-top: 8px;
}

.tui-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.tui-filters__search {
    grid-column: 1 / -1;
    position: relative;
}

.tui-filters__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.tui-count {
    font-size: 14px;
    color: var(--muted);
}

.tui-count b {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.tui-hit {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    transition: border-color var(--t), box-shadow var(--t);
}

.tui-hit + .tui-hit {
    margin-top: 10px;
}

.tui-hit:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}

.tui-hit__t {
    font-size: 16px;
    font-weight: 650;
    line-height: 1.35;
}

.tui-hit__t:hover {
    color: var(--brand-strong);
}

.tui-hit__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 13px;
    color: var(--muted);
}

.tui-pag,
.tui .styled-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.tui-pag__btn,
.tui-pag a,
.tui .styled-pagination a,
.tui .styled-pagination span,
.tui .styled-pagination .current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    font-size: 14px;
    color: var(--text);
}

.tui-pag a:hover,
.tui .styled-pagination a:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.tui-pag__now,
.tui .styled-pagination .active a,
.tui .styled-pagination .active span,
.tui .styled-pagination .current {
    border-color: transparent;
    background: var(--bg);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.tui-item--media .tui-item__img,
.tui-item__img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
    background: var(--bg);
}

.tui-item__letter {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.tui-item--row {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
}

.tui-table--list td:first-child {
    color: var(--text);
    font-weight: 600;
}

.tui-table--list a:hover {
    color: var(--brand-strong);
}

.tui-prose {
    max-width: 78ch;
    font-size: 15.5px;
    line-height: 1.65;
}

.tui-prose h2,
.tui-prose h3 {
    margin: 1.4em 0 .5em;
    line-height: 1.3;
}

.tui-prose p,
.tui-prose ul,
.tui-prose ol {
    margin: 0 0 1em;
    color: var(--text);
}

.tui-prose a {
    color: var(--brand-strong);
    text-decoration: underline;
}

.tui-prose img {
    border-radius: 16px;
    margin: 12px 0 20px;
}

.tui-prose blockquote {
    margin: 16px 0;
    padding: 16px 18px;
    border-left: 3px solid var(--brand);
    border-radius: 12px;
    background: var(--brand-soft);
}

.tui-map {
    overflow: hidden;
    border-radius: var(--r-card);
    border: 1px solid var(--line);
    min-height: 280px;
}

.tui-map iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
}

.tui-notify {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 80;
    max-width: 400px;
    padding: 14px 18px;
    border-radius: 14px;
    color: #fff;
    font-size: 14px;
    box-shadow: var(--shadow-hover);
}

.tui-notify.success { background: var(--ok-fg); }
.tui-notify.error { background: var(--danger-fg); }

.custom-select-wrapper {
    position: relative;
}

.custom-select-trigger {
    position: relative;
    min-height: 46px;
    padding: 10px 36px 10px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-ctl);
    background: var(--surface);
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 14px;
    color: var(--text);
}

.custom-select-trigger::after {
    content: "";
    position: absolute;
    right: 14px;
    width: 8px;
    height: 8px;
    border-right: 1.6px solid var(--muted);
    border-bottom: 1.6px solid var(--muted);
    transform: rotate(45deg);
    margin-top: -2px;
}

.custom-options {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 240px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    box-shadow: var(--shadow-hover);
}

.custom-option {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
}

.custom-option:hover {
    background: var(--brand-soft);
}

.custom-option.selected {
    background: var(--brand);
    color: #fff;
}

.custom-select-wrapper .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 12px;
    font-weight: 600;
}

.custom-select-wrapper .tag .remove {
    cursor: pointer;
    font-weight: 700;
}

#search-suggestions {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    max-height: 240px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    box-shadow: var(--shadow-hover);
}

#search-suggestions div {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    border-top: 1px solid var(--line);
}

#search-suggestions div:first-child {
    border-top: 0;
}

#search-suggestions div:hover,
#search-suggestions .hover-light:hover {
    background: var(--brand-soft);
}

.tui .okpd2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tui .okpd2-table th,
.tui .okpd2-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.tui .okpd2-table thead th {
    background: var(--bg);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 700;
}

.tui .okpd2-table a:hover {
    color: var(--brand-strong);
}

@media (max-width: 980px) {
    .tui-filters {
        grid-template-columns: 1fr;
    }
}

.tui-pill.is-on {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-weight: 600;
}

.tui-sug__hint {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
}

.tui-calc__row.is-locked {
    opacity: .55;
}

.tui-meter {
    display: inline-flex;
    gap: 3px;
    flex-shrink: 0;
}

.tui-meter i {
    width: 14px;
    height: 8px;
    border-radius: 3px;
    border: 1px solid rgba(15, 18, 33, .18);
    background: transparent;
}

.tui-meter i.is-on {
    background: #2a3a6e;
    border-color: #2a3a6e;
}

.tui-pkggrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.tui-pkg {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    min-height: 100%;
    min-width: 0;
}

.tui-pkg .tui-price__val {
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: -.03em;
}

.tui-pkg .tui-btn {
    margin-top: auto;
}

.tui-pkg--mid {
    background: #e8edf3;
}

.tui-pkg--fast {
    background: #d7e6f5;
}

.tui-pkg--max {
    background: #ff7a18;
    color: #fff;
    border-color: transparent;
}

.tui-pkg--max .tui-h3,
.tui-pkg--max .tui-price__val,
.tui-pkg--max .tui-note,
.tui-pkg--max .tui-muted {
    color: #fff;
}

.tui-pkg--max .tui-meter i {
    border-color: rgba(255, 255, 255, .45);
}

.tui-pkg--max .tui-meter i.is-on {
    background: #1c2744;
    border-color: #1c2744;
}

.tui-pkgrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    line-height: 1.3;
}

.tui-pkgtablewrap {
    overflow-x: auto;
    margin: 0 -8px;
    padding: 0 8px;
}

.tui-pkgtable {
    display: grid;
    grid-template-columns: repeat(5, minmax(220px, 1fr));
    gap: 10px;
    min-width: 1100px;
}

.tui-pkgcol {
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 16px 14px;
    background: var(--surface);
}

.tui-pkgcol__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.tui-pkgcol .tui-pkgrow {
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
}

.tui-pkgcol .tui-btn {
    margin-top: 14px;
    width: 100%;
    justify-content: center;
}

.tui-infograph {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.tui-infograph--col {
    flex-direction: column;
    align-items: flex-start;
}

.tui-infograph--col .tui-infograph__line {
    width: 2px;
    height: 14px;
    margin-left: 9px;
}

.tui-infograph__step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}

.tui-infograph__step i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    background: var(--surface);
    box-shadow: inset 0 0 0 3px var(--surface);
    transition: background .25s, border-color .25s, transform .25s;
}

.tui-infograph__step.is-on i,
.tui-infograph__step.is-last i {
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
    transition: box-shadow .35s ease, background .35s ease;
}

.tui-infograph__step.is-on span {
    color: var(--text);
    font-weight: 600;
}

.tui-infograph__line {
    flex: 1;
    height: 2px;
    min-width: 18px;
    background: linear-gradient(90deg, var(--line-strong), var(--brand-soft));
}

.tui-reveal {
    opacity: 0;
    transform: translateY(12px);
}

.tui-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .45s ease, transform .45s ease;
}

@keyframes tui-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.tui-stat__v.tui-num {
    font-variant-numeric: tabular-nums;
}

.tui-modal-lock {
    overflow: hidden;
}

.tui-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 18, 33, .46);
    pointer-events: none;
}

.tui-modal.is-open {
    display: flex;
    pointer-events: auto;
}

.tui-bot {
    position: fixed;
    right: 18px;
    bottom: 128px;
    z-index: 61;
    width: min(360px, calc(100vw - 24px));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(15, 18, 33, .16);
    overflow: hidden;
    display: none;
    flex-direction: column;
    max-height: min(520px, 70vh);
}

.tui-bot.is-open {
    display: flex;
}

.tui-modal__card {
    position: relative;
    width: min(560px, 100%);
    max-height: min(92vh, 760px);
    overflow: auto;
    background: var(--surface);
    border-radius: 20px 20px 12px 12px;
    padding: 24px 22px 20px;
    box-shadow: 0 24px 60px rgba(15, 18, 33, .22);
    animation: tui-rise .35s ease both;
}

.tui-modal__x {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    background: var(--bg);
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: var(--muted);
}

.tui-botfab {
    position: fixed;
    right: 18px;
    bottom: 148px;
    z-index: 45;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--r-pill);
    background: #1c2744;
    color: #fff;
    box-shadow: 0 10px 28px rgba(28, 39, 68, .28);
    font-size: 13px;
    font-weight: 600;
}

.tui-botfab svg {
    flex-shrink: 0;
}

.tui-bot__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #1c2744;
    color: #fff;
}

.tui-bot__head button {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 20px;
    line-height: 1;
}

.tui-bot__log {
    padding: 12px;
    overflow: auto;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tui-bot__msg {
    max-width: 92%;
    padding: 8px 11px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
}

.tui-bot__msg--bot {
    background: var(--bg);
}

.tui-bot__msg--me {
    align-self: flex-end;
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.tui-bot__links {
    margin: 8px 0 0;
    padding-left: 16px;
}

.tui-bot__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px 8px;
}

.tui-bot__chips button {
    padding: 5px 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: 12px;
}

.tui-bot__form {
    display: flex;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--line);
}

.tui-bot__form input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-ctl);
    padding: 8px 10px;
    font: inherit;
}

@media (max-width: 1180px) {
    .tui-pkggrid,
    .tui-pkggrid--home {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .tui-pkggrid,
    .tui-pkggrid--home {
        grid-template-columns: 1fr;
    }

    .tui-botfab span {
        display: none;
    }

    .tui-modal {
        padding: 0;
    }

    .tui-modal__card {
        width: 100%;
        border-radius: 16px 16px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tui-reveal,
    .tui-reveal.is-in,
    .tui-modal__card,
    .tui-infograph__step i {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* ---------- мобильный каркас ---------- */

.tui-nav-slot {
    display: flex;
    min-width: 0;
}

@media (max-width: 1279px) {
    .tui-header {
        position: sticky;
        top: 0;
        z-index: 220;
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.tui-nav-lock,
    body.tui-modal-lock {
        overflow: hidden;
    }

    .tui-navveil:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 240;
        background: rgba(15, 18, 33, .4);
    }

    .tui-nav.is-open {
        position: fixed;
        z-index: 250;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(320px, 88vw);
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        padding: max(72px, calc(12px + env(safe-area-inset-top))) 16px calc(24px + env(safe-area-inset-bottom));
        background: #fff;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: -12px 0 40px rgba(15, 18, 33, .14);
    }

    .tui-nav.is-open a {
        display: block;
        padding: 14px 12px;
        font-size: 17px;
        min-height: 44px;
    }

    .tui-burger {
        display: grid;
        width: 44px;
        height: 44px;
        min-width: 44px;
        flex-shrink: 0;
        position: relative;
        z-index: 260;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .tui-nav-slot:not(:has(.tui-nav)) {
        display: none;
    }

    .tui-search input,
    .tui-in,
    .tui-bot__form input,
    select.tui-in,
    textarea.tui-in {
        font-size: 16px;
    }

    .tui-modal {
        z-index: 300;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .tui-bot {
        z-index: 230;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    .tui-botfab {
        z-index: 225;
    }

    .tui-mcta {
        z-index: 40;
    }
}

@media (max-width: 767px) {
    html,
    body.tui {
        overflow-x: hidden;
        max-width: 100%;
    }

    .tui-rail {
        display: none;
    }

    .tui-search {
        flex: 1 1 100%;
        min-width: 0;
        order: 3;
        margin-left: 0;
    }

    .tui-kbd {
        display: none;
    }

    .tui-pkgtable {
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .tui-pkgtablewrap {
        margin-left: 0;
        margin-right: 0;
        overflow-x: visible;
    }

    .tui-table {
        min-width: 0;
    }

    .tui-header__in {
        padding: 10px 14px;
        gap: 10px;
    }

    .tui-infograph {
        flex-wrap: wrap;
    }
}

.tui-cover {
    position: relative;
    overflow: hidden;
    background: #16182c;
}

.tui .tui-cover img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    filter: saturate(.78) contrast(1.04);
}

.tui-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(15, 18, 33, .04), rgba(109, 74, 255, .2));
}

.tui-card:has(> .tui-pagehead--cover),
.tui-card:has(> .tui-cover--head),
.tui-card--media,
.tui-hero {
    overflow: hidden;
}

.tui-card > .tui-pagehead--cover,
.tui-card > .tui-cover--head {
    margin: -20px -20px 0;
}

.tui-card--pad-lg > .tui-pagehead--cover,
.tui-card--pad-lg > .tui-cover--head {
    margin: -24px -24px 0;
}

.tui-cover--head {
    height: 76px;
    border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
}

.tui-cover--head::after {
    background:
        linear-gradient(90deg, rgba(246, 247, 251, .18), transparent 42%),
        linear-gradient(180deg, rgba(15, 18, 33, .08), rgba(109, 74, 255, .28));
}

.tui-pagehead--cover {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tui-card > .tui-pagehead--cover .tui-stack {
    padding: 16px 20px 0;
}

.tui-card--pad-lg > .tui-pagehead--cover .tui-stack {
    padding: 16px 24px 0;
}

.tui-card--media {
    position: relative;
    isolation: isolate;
}

.tui-cover--fill {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

.tui-cover--fill::after {
    background:
        linear-gradient(105deg, rgba(16, 18, 40, .94) 0%, rgba(28, 24, 72, .78) 52%, rgba(16, 18, 40, .5) 100%);
}

.tui-card--media > *:not(.tui-cover) {
    position: relative;
    z-index: 1;
}

.tui-hero {
    position: relative;
    isolation: isolate;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.tui-hero.tui-sec {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tui-cover--hero {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44%;
    z-index: 0;
}

.tui-cover--hero::after {
    background:
        linear-gradient(90deg, var(--surface) 0%, rgba(255, 255, 255, .55) 22%, transparent 58%),
        linear-gradient(180deg, rgba(109, 74, 255, .14), rgba(15, 18, 33, .2));
}

.tui-hero__in {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.tui-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    max-width: 62%;
}

.tui-hero .tui-stats {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
}

.tui-pagehead {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tui-plans {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tui-plan {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) minmax(148px, auto);
    gap: 10px 16px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.tui-plan.is-pick {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px rgba(109, 74, 255, .2);
}

.tui .tui-plan__ico {
    width: 40px;
    height: 40px;
    max-width: none;
    object-fit: cover;
    border-radius: 10px;
    background: #fff;
    flex-shrink: 0;
}

.tui-plan__body {
    min-width: 0;
}

.tui-plan__body .tui-h3 {
    margin: 0;
}

.tui-plan__body .tui-muted {
    margin: 4px 0 0;
}

.tui-plan__tag {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.tui-plan__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.tui-plan__price {
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.tui-plan__term {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.tui-plan .tui-btn {
    white-space: nowrap;
}

.tui-plancards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tui-plancard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 20px 28px;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
}

.tui-plancard.is-pick {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px rgba(109, 74, 255, .18);
}

.tui-plancard__main .tui-h3 {
    margin: 0 0 8px;
}

.tui-plancard__main > p {
    margin: 0 0 10px;
}

.tui-plancard__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    margin-top: 12px;
}

.tui-plancard__side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
}

.tui-plancard__side .tui-plan__price {
    font-size: 22px;
}

.tui-plancard__side .tui-btn {
    width: 100%;
    justify-content: center;
}

.tui-list--mute li::before {
    background: #eef0f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7285' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E") center/12px no-repeat;
}

.tui-lp-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 32px;
}

.tui-lp-split .tui-h3 {
    margin-top: 0;
}

.tui-step .tui-h3 {
    margin: 0 0 4px;
}

.tui-cmpwrap {
    overflow-x: auto;
    margin: 0 -4px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.tui-cmp {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.tui-cmp th,
.tui-cmp td {
    padding: 10px 11px;
    border-bottom: 1px solid var(--line);
    text-align: center;
    vertical-align: middle;
    line-height: 1.35;
    white-space: normal;
}

.tui-cmp thead th {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    max-width: 150px;
    vertical-align: bottom;
}

.tui-cmp__sub {
    display: block;
    margin-top: 4px;
    font-weight: 600;
    font-size: 11px;
    color: var(--muted);
}

.tui-cmp th:first-child,
.tui-cmp td:first-child,
.tui-cmp tbody th {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--surface);
    font-weight: 600;
    white-space: normal;
    min-width: 148px;
    max-width: 176px;
    z-index: 1;
}

.tui-cmp .is-pick {
    background: var(--brand-soft);
}

.tui-cmp tbody th.is-pick,
.tui-cmp thead th.is-pick {
    background: var(--brand-soft);
}

.tui-cmp__yes {
    color: #15803d;
    font-weight: 700;
}

.tui-cmp__mid {
    color: var(--brand-strong);
    font-weight: 600;
}

.tui-cmp__low {
    color: var(--muted);
}

.tui-cmp__no {
    color: #9aa0ae;
}

@media (max-width: 980px) {
    .tui-cover--hero {
        position: relative;
        inset: auto;
        width: 100%;
        height: 92px;
    }

    .tui-cover--hero::after {
        background:
            linear-gradient(180deg, transparent 30%, var(--surface) 100%),
            linear-gradient(90deg, rgba(109, 74, 255, .12), rgba(15, 18, 33, .12));
    }

    .tui-hero__copy {
        max-width: none;
    }

    .tui-hero__in {
        padding: 16px 18px 18px;
    }

    .tui-plan {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .tui-plan__cta {
        grid-column: 1 / -1;
        align-items: flex-start;
    }

    .tui-plancard {
        grid-template-columns: minmax(0, 1fr);
    }

    .tui-plancard__cols,
    .tui-lp-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .tui-card > .tui-pagehead--cover,
    .tui-card > .tui-cover--head {
        margin: -18px -18px 0;
    }

    .tui-card--pad-lg > .tui-pagehead--cover,
    .tui-card--pad-lg > .tui-cover--head {
        margin: -20px -20px 0;
    }

    .tui-card > .tui-pagehead--cover .tui-stack {
        padding: 14px 18px 0;
    }

    .tui-card--pad-lg > .tui-pagehead--cover .tui-stack {
        padding: 14px 20px 0;
    }

    .tui-cover--head {
        height: 64px;
    }
}

.tui-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
}

.tui-pager a,
.tui-pager span {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    font-size: 14px;
}

.tui-pager a:hover {
    border-color: var(--brand);
}

.tui-pager .is-on {
    background: var(--brand-soft);
    border-color: var(--brand);
    font-weight: 600;
}

.tui-fold {
    margin-top: 20px;
}

.tui-fold .tui-prose {
    margin-top: 8px;
}