/* ═══════════════════════════════════════════════════════════════
   INFINITY CONNECT — Landing v4
   Дизайн-система нижней части лендинга (всё после Hero).
   Префикс ic- , чтобы не конфликтовать с legacy lg-/v3-.
   ═══════════════════════════════════════════════════════════════ */

.ic {
    --ic-ink: #f4efff;
    --ic-ink-2: #cdc0ea;
    --ic-ink-3: #8f83ad;
    --ic-line: rgba(168, 130, 255, .14);
    --ic-line-2: rgba(168, 130, 255, .26);
    --ic-surface: rgba(23, 15, 40, .55);
    --ic-surface-2: rgba(30, 20, 52, .72);
    --ic-violet: #9a4dff;
    --ic-violet-2: #7c3aed;
    --ic-violet-3: #c98bff;
    --ic-radius: 22px;
    --ic-ease: cubic-bezier(.22, 1, .36, 1);

    position: relative;
    isolation: isolate;
}

html[data-theme="light"] .ic {
    --ic-ink: #1d1030;
    --ic-ink-2: #55446f;
    --ic-ink-3: #8171a0;
    --ic-line: rgba(122, 52, 240, .14);
    --ic-line-2: rgba(122, 52, 240, .24);
    --ic-surface: rgba(255, 255, 255, .72);
    --ic-surface-2: rgba(255, 255, 255, .9);
    --ic-violet-3: #7a34f0;
}

/* ── Ритм секций: разные высоты, а не одинаковые блоки ── */
.ic-sec {
    position: relative;
    padding: clamp(72px, 9vw, 132px) 0;
}
.ic-sec--tight { padding: clamp(56px, 6vw, 88px) 0; }
.ic-sec--flush { padding-bottom: clamp(40px, 5vw, 64px); }

.ic-wrap { width: min(1200px, 90%); margin: 0 auto; }

/* Секции не должны раздуваться шире экрана: длинные слова, широкие сетки
   и абсолютные декорации внутри иначе дают горизонтальный скролл. */
.ic, .ic-sec, .ic-wrap { max-width: 100%; min-width: 0; }
.ic-sec { overflow-x: clip; }

/* Тонкая разделительная линия — вместо рамок у каждой карточки */
.ic-rule {
    height: 1px;
    border: 0;
    margin: 0;
    background: linear-gradient(90deg, transparent, var(--ic-line-2), transparent);
}

/* ── Типографика ──
   Заголовки набраны плотнее обычного (отрицательный трекинг) — на крупном
   кегле стандартные пробелы выглядят рыхло. Чем крупнее текст, тем плотнее. */
.ic-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ic-violet-3);
    margin: 0 0 20px;
}
.ic-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: .5;
}

.ic-h2 {
    margin: 0;
    font-size: clamp(34px, 4.6vw, 60px);
    line-height: 1.04;
    letter-spacing: -.035em;
    font-weight: 600;
    color: var(--ic-ink);
    text-wrap: balance;
}
.ic-h2 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--ic-violet-3), var(--ic-violet) 55%, #7f5bff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Жёсткие <br> в заголовках рассчитаны на широкий экран. На телефоне они
   рвут строку в произвольном месте — там перенос отдаём браузеру. */
@media (max-width: 640px) {
    /* content:" " превращает перенос в обычный пробел: слова не слипаются,
       а строка ломается там, где удобно по ширине экрана. */
    .ic-h2 br,
    .ic-cta__title br { content: " "; }

    /* line-height 1.04 плотнее реальной высоты глифов. На десктопе это
       незаметно, но с background-clip:text градиент обрезается ровно по
       строке — у крупных заголовков срезаются верхушки букв. */
    .ic-h2 { font-size: clamp(28px, 8vw, 38px); line-height: 1.16; }
    .ic-cta__title { font-size: clamp(30px, 8.5vw, 40px); line-height: 1.14; }
}

.ic-lead {
    margin: 20px 0 0;
    max-width: 46ch;
    font-size: clamp(16px, 1.35vw, 18px);
    line-height: 1.6;
    letter-spacing: -.005em;
    color: var(--ic-ink-2);
    text-wrap: pretty;
}

/* Цифры в метриках — табличные: колонки не «дёргаются» при смене значений */
.ic-figure,
.ic-app__timer,
.ic-srv__ping,
.ic-stat b {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "kern" 1;
}

/* Шапка секции слева — асимметрия вместо вечного центра */
.ic-head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
    gap: clamp(24px, 5vw, 72px);
    align-items: end;
    margin-bottom: clamp(40px, 5vw, 64px);
}
.ic-head--solo { grid-template-columns: minmax(0, 720px); }
.ic-head__aside {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ic-ink-3);
    max-width: 40ch;
}

/* ── Кнопки ── */
.ic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 26px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .3s var(--ic-ease), box-shadow .3s var(--ic-ease),
                background .3s var(--ic-ease), border-color .3s var(--ic-ease);
}
.ic-btn svg, .ic-btn i { width: 18px; height: 18px; }

.ic-btn--primary {
    background: linear-gradient(135deg, #8b5cf6, #a855f7 60%, #7c3aed);
    color: #fff;
    box-shadow: 0 10px 34px rgba(124, 58, 237, .34), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ic-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 48px rgba(124, 58, 237, .44), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.ic-btn--ghost {
    background: var(--ic-surface);
    border-color: var(--ic-line-2);
    color: var(--ic-ink);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.ic-btn--ghost:hover {
    transform: translateY(-2px);
    border-color: rgba(168, 130, 255, .45);
    background: var(--ic-surface-2);
}
.ic-btn--lg { padding: 17px 34px; font-size: 16px; }

/* ═══════════════════════════════════════════════
   1. ПОЧЕМУ INFINITY CONNECT — bento разных масштабов
   ═══════════════════════════════════════════════ */
.ic-bento {
    display: grid;
    /* minmax(0,1fr), а не 1fr: колонка по умолчанию не уже своего содержимого,
       и длинное слово в плитке распирает сетку за пределы экрана — соседние
       плитки при этом сжимаются в нечитаемые «столбики». */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}
/* Длинные слова («Конфиденциальность») переносим, но только когда они
   действительно не влезают. hyphens отдаёт перенос по слогам, а не по
   произвольной букве — break-word без него режет слово посередине. */
.ic-tile__title,
.ic-tile__text {
    overflow-wrap: break-word;
    hyphens: auto;
}

.ic-tile {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border-radius: var(--ic-radius);
    border: 1px solid var(--ic-line);
    background: var(--ic-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: border-color .45s var(--ic-ease), transform .45s var(--ic-ease);
}
.ic-tile:hover {
    border-color: var(--ic-line-2);
    transform: translateY(-3px);
}

/* ═══ Плитки-ссылки «Почему Infinity Connect» ═══
   Каждая ведёт в свой раздел. Цвет задаётся одной переменной --ic-tile-h
   (оттенок HSL) и подхватывается рамкой, иконкой, свечением и подписью —
   чтобы не дублировать значения в пяти местах. */
a.ic-tile { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.ic-tile { --ic-tile-h: 265; }
.ic-tile--speed   { --ic-tile-h: 265; }
.ic-tile--privacy { --ic-tile-h: 152; }
.ic-tile--bot     { --ic-tile-h: 199; }
.ic-tile--network { --ic-tile-h: 43;  }
.ic-tile--devices { --ic-tile-h: 280; }
.ic-tile--uptime  { --ic-tile-h: 160; }

/* Заливка под курсором: мягкая, из угла — не спорит с текстом */
.ic-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 60% at 50% 0%, hsla(var(--ic-tile-h), 70%, 55%, .16), transparent 70%);
    opacity: 0;
    transition: opacity .45s var(--ic-ease);
    pointer-events: none;
    z-index: 0;
}
.ic-tile:hover::after { opacity: 1; }
.ic-tile > * { position: relative; z-index: 1; }

.ic-tile:hover {
    border-color: hsla(var(--ic-tile-h), 70%, 62%, .5);
    box-shadow: 0 18px 44px -32px hsla(var(--ic-tile-h), 70%, 55%, .8);
}

/* Иконка перекрашивается в цвет плитки */
.ic-tile__icon {
    transition: border-color .35s var(--ic-ease), background .35s var(--ic-ease), color .35s var(--ic-ease);
}
.ic-tile:hover .ic-tile__icon {
    border-color: hsla(var(--ic-tile-h), 70%, 62%, .45);
    background: hsla(var(--ic-tile-h), 70%, 55%, .14);
    color: hsl(var(--ic-tile-h), 75%, 70%);
}

/* Подпись перехода: появляется при наведении, места в потоке не занимает */
.ic-tile__go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: hsl(var(--ic-tile-h), 75%, 70%);
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s var(--ic-ease), transform .35s var(--ic-ease);
}
.ic-tile__go svg { width: 15px; height: 15px; transition: transform .35s var(--ic-ease); }
.ic-tile:hover .ic-tile__go { opacity: 1; transform: translateY(0); }
.ic-tile:hover .ic-tile__go svg { transform: translateX(3px); }

/* Клавиатурная навигация: плитки стали ссылками, фокус должен быть виден */
.ic-tile:focus-visible {
    outline: 2px solid hsl(var(--ic-tile-h), 75%, 65%);
    outline-offset: 3px;
}

/* На тач-устройствах ховера нет — показываем подпись сразу */
@media (hover: none) {
    .ic-tile__go { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ic-tile, .ic-tile::after, .ic-tile__go, .ic-tile__go svg, .ic-tile__icon { transition: none; }
    .ic-tile:hover { transform: none; }
}

/* Мягкое свечение сверху — читается как свет, а не как «стекляшка» */
.ic-tile::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto;
    height: 160px;
    background: radial-gradient(120% 100% at 50% 0%, rgba(154, 77, 255, .16), transparent 70%);
    opacity: 0;
    transition: opacity .5s var(--ic-ease);
    pointer-events: none;
}
.ic-tile:hover::before { opacity: 1; }
.ic-tile > * { position: relative; z-index: 1; }

/* Масштабы плиток */
.ic-tile--hero   { grid-column: span 3; grid-row: span 2; padding: 38px; }
.ic-tile--wide   { grid-column: span 3; }
.ic-tile--half   { grid-column: span 3; }
.ic-tile--third  { grid-column: span 2; }

.ic-tile__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ic-ink-3);
}
.ic-tile__title {
    margin: 14px 0 0;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ic-ink);
}
.ic-tile--hero .ic-tile__title { font-size: clamp(24px, 2.4vw, 30px); }
.ic-tile__text {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ic-ink-3);
    max-width: 34ch;
}

.ic-tile__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    border: 1px solid var(--ic-line-2);
    background: linear-gradient(160deg, rgba(154, 77, 255, .2), rgba(124, 58, 237, .06));
    color: var(--ic-violet-3);
    margin-bottom: 4px;
}
.ic-tile__icon svg, .ic-tile__icon i { width: 20px; height: 20px; }

/* Большая цифра как визуальный якорь */
.ic-figure {
    font-size: clamp(52px, 6vw, 76px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.05em;
    background: linear-gradient(160deg, #fff, var(--ic-violet-3) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .ic-figure {
    background: linear-gradient(160deg, #2b1848, var(--ic-violet));
    -webkit-background-clip: text;
    background-clip: text;
}
.ic-figure sup {
    font-size: .38em;
    vertical-align: super;
    letter-spacing: 0;
}

/* Спидометр-полоса в плитке скорости */
.ic-meter {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.ic-meter__row {
    display: grid;
    grid-template-columns: 62px 1fr;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--ic-ink-3);
}
.ic-meter__bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(168, 130, 255, .12);
    overflow: hidden;
}
.ic-meter__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ic-violet-2), var(--ic-violet-3));
    transform-origin: left;
    animation: icMeter 1.6s var(--ic-ease) both;
}
@keyframes icMeter { from { transform: scaleX(.05); } }

/* Пульсирующий индикатор аптайма */
.ic-pulse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ic-ink-2);
    margin-top: 18px;
}
.ic-pulse::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .5);
    animation: icPulse 2.4s ease-out infinite;
}
@keyframes icPulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .5); }
    70%  { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* Ряд флагов в плитке локаций */
.ic-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 22px;
}
.ic-flags span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--ic-line);
    background: rgba(168, 130, 255, .07);
    font-size: 15px;
}
.ic-flags span:last-child {
    font-size: 11px;
    font-weight: 600;
    color: var(--ic-ink-3);
    width: auto;
    padding: 0 11px;
}

/* ═══════════════════════════════════════════════
   2. ПРИЛОЖЕНИЯ — split с мокапами
   ═══════════════════════════════════════════════ */
/* Правая колонка подогнана под размер скриншота, чтобы он не
   растягивался и не терял чёткость. */
/* ═══ Блок «Приложения» — единая карточка ═══
   Текст и скриншот живут внутри одной подложки: изображение прижато к
   правому краю карточки и растворяется влево, под текст. Раньше блок был
   двумя половинами экрана с пустотой между ними. */
.ic-apps {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: clamp(20px, 2.4vw, 32px);
    border: 1px solid rgba(168, 130, 255, .18);
    /* Заливка карточки: к правому краю уходит в темноту, чтобы скриншот
       садился на неё, а не «лежал» поверх. */
    background:
        radial-gradient(120% 130% at 8% 18%, rgba(154, 77, 255, .22), transparent 58%),
        linear-gradient(100deg, rgba(38, 24, 74, .96) 0%, rgba(22, 14, 44, .96) 52%, rgba(14, 9, 30, .96) 100%);
    box-shadow: 0 34px 80px -50px rgba(120, 60, 220, .7);
    padding: clamp(28px, 4.2vw, 60px);
    /* Обе колонки в одной ячейке: скриншот заходит под текст. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: clamp(320px, 34vw, 440px);
}
.ic-apps > div:first-child,
.ic-apps > .ic-mock { grid-area: 1 / 1; }

.ic-apps > div:first-child {
    position: relative;
    z-index: 3;
    max-width: min(560px, 54%);
}

/* Скриншот прижат к правому краю карточки и выходит за него: край обрезается
   overflow карточки, поэтому окно выглядит продолжающимся за пределы блока. */
.ic-mock {
    position: relative;
    z-index: 1;
    justify-self: end;
    align-self: center;
    width: min(72%, 900px);
    /* Отрицательные отступы «вклеивают» скриншот в карточку: он упирается в
       её край, а не висит с полем вокруг. */
    margin-right: clamp(-90px, -6vw, -40px);
    margin-bottom: clamp(-40px, -3vw, -16px);
    /* Разворот в пространстве: окно стоит под углом к зрителю, как в
       презентациях приложений. Ставим на внешний элемент — парение и наклон
       за курсором висят на .ic-mock__inner и не конфликтуют с этим правилом.
       perspective задан здесь же, иначе rotateY выглядит плоским сжатием. */
    perspective: 1800px;
    transform: translateY(4%) rotateY(-15deg) rotateX(3deg) rotateZ(-1deg);
    transform-origin: 62% 50%;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
/* При наведении окно почти выравнивается к зрителю — «поворачивается» к нему. */
.ic-mock:hover {
    transform: translateY(2%) rotateY(-6deg) rotateX(1deg) rotateZ(0deg);
}

/* Растворение левого края в заливку карточки — переход к тексту без
   видимой границы. Ширина растяжки больше, чем у прежнего варианта:
   короткий градиент читался как обрезанная наклейка. */
.ic-mock__inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: var(--ic-mock-radius);
    background: linear-gradient(
        98deg,
        rgba(24, 15, 48, .98) 0%,
        rgba(24, 15, 48, .82) 14%,
        rgba(24, 15, 48, .35) 30%,
        transparent 52%
    );
}
html[data-theme="light"] .ic-apps {
    border-color: rgba(122, 52, 240, .16);
    background:
        radial-gradient(120% 130% at 8% 18%, rgba(154, 77, 255, .12), transparent 58%),
        linear-gradient(100deg, rgba(246, 242, 255, .98) 0%, rgba(238, 232, 252, .98) 100%);
    box-shadow: 0 34px 80px -54px rgba(120, 60, 220, .45);
}
html[data-theme="light"] .ic-mock__inner::after {
    background: linear-gradient(
        98deg,
        rgba(244, 240, 254, .98) 0%,
        rgba(244, 240, 254, .8) 14%,
        rgba(244, 240, 254, .3) 30%,
        transparent 52%
    );
}

.ic-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 34px 0 32px;
}
.ic-platform {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 17px;
    border-radius: 14px;
    border: 1px solid var(--ic-line);
    background: var(--ic-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--ic-ink-2);
    text-decoration: none;
    transition: all .3s var(--ic-ease);
}
.ic-platform:hover {
    border-color: var(--ic-line-2);
    color: var(--ic-ink);
    transform: translateY(-2px);
}
.ic-platform svg, .ic-platform i { width: 17px; height: 17px; color: var(--ic-violet-3); }

/* ── Мокап приложения: реальный скриншот с вырезанным фоном ── */
.ic-mock {
    --ic-mock-radius: 14px;
    position: relative;
    z-index: 1;
    margin: 0;
    display: block;
}
/* Мягкое свечение под устройствами — заменяет фон, вырезанный из PNG */
/* Свечение держим внутри мокапа: карточка обрезает всё, что выходит за её
   край, и вылезающий ореол давал бы срезанное пятно у границы. */
.ic-mock::before {
    content: "";
    position: absolute;
    inset: 6% 4% 2%;
    background: radial-gradient(58% 52% at 46% 52%, rgba(154, 77, 255, .26), transparent 72%);
    filter: blur(46px);
    z-index: 0;
    pointer-events: none;
}
.ic-mock__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    /* 1066px — исходник 1123px позволяет без потери чёткости на retina. */
    max-width: 1066px;
    height: auto;
    /* Скриншот прямоугольный, с непрозрачным фоном: скругляем углы и даём
       рамку, иначе окно приложения выглядит обрезанным куском. */
    border-radius: var(--ic-mock-radius);
    border: 1px solid rgba(168, 130, 255, .22);
    box-shadow: 0 30px 60px rgba(4, 2, 12, .55);
}
html[data-theme="light"] .ic-mock__img {
    border-color: rgba(122, 52, 240, .18);
    box-shadow: 0 38px 70px rgba(92, 45, 160, .22);
}

/* ═══ Оживление мокапа приложения ═══
   Появление при скролле уже даёт landing_anim.js (правило '.ic-mock' → right).
   Здесь добавляется «жизнь» в покое: лёгкое парение, блик по стеклу и
   отклик на курсор. Всё — на transform/opacity, чтобы не вызывать пересчёт
   раскладки. */

/* Парение: смещение крошечное, иначе выглядит как дёрганье, а не как объём. */
@keyframes ic-mock-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -10px, 0); }
}
.ic-mock__inner {
    position: relative;
    z-index: 1;
    display: block;
    animation: ic-mock-float 7s ease-in-out infinite;
    /* Пауза, пока элемент не появился: иначе к моменту показа он «висит»
       в случайной фазе и въезжает рывком. */
    animation-play-state: paused;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
    transform-style: preserve-3d;
}
.ic-mock.is-in .ic-mock__inner,
html:not(.ic-anim-ready) .ic-mock__inner { animation-play-state: running; }

/* Наклон за курсором отключён: базовый 3D-разворот вращается по той же оси Y,
   и два поворота с разной длительностью складывались в рассогласованное
   движение. Отклик на наведение даёт само выравнивание окна (.ic-mock:hover). */
.ic-mock:hover .ic-mock__inner {
    transform: translate3d(0, -4px, 0);
    transition: transform .35s ease-out;
}

/* Блик: диагональная полоса света по «стеклу» окна.
   Скриншот прямоугольный и непрозрачный, поэтому маска не нужна — достаточно
   обрезать блик теми же скруглёнными углами, что у самого изображения. */
.ic-mock__glare {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    border-radius: var(--ic-mock-radius);
}
.ic-mock__glare::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -70%;
    width: 45%;
    height: 220%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, .07) 42%,
        rgba(255, 255, 255, .16) 50%,
        rgba(255, 255, 255, .07) 58%,
        transparent 100%
    );
    transform: rotate(14deg);
    animation: ic-mock-glare 9s ease-in-out infinite;
    animation-play-state: paused;
}
.ic-mock.is-in .ic-mock__glare::before { animation-play-state: running; }
@keyframes ic-mock-glare {
    0%, 62%  { left: -70%; opacity: 0; }
    66%      { opacity: 1; }
    92%      { left: 130%; opacity: 0; }
    100%     { left: 130%; opacity: 0; }
}

/* Свечение под мокапом слегка «дышит» в такт парению. */
@keyframes ic-mock-glow {
    0%, 100% { opacity: .85; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.04); }
}
.ic-mock::before { animation: ic-mock-glow 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .ic-mock__inner,
    .ic-mock__glare::before,
    .ic-mock::before { animation: none; }
    .ic-mock:hover .ic-mock__inner { transform: none; }
}


/* ═══════════════════════════════════════════════
   3. КАК ЭТО РАБОТАЕТ — горизонтальный таймлайн
   ═══════════════════════════════════════════════ */
/* --ic-steps — число колонок. Линия и импульс считают позицию от него,
   иначе на 3 шагах (страница /download) точка уезжает за последний кружок.
   Центр крайней колонки с учётом gap:
     ширина колонки = (100% - gap×(n-1)) / n, центр = половина от неё. */
.ic-flow {
    --ic-steps: 4;
    --ic-gap: 20px;
    --ic-edge: calc((100% - var(--ic-gap) * (var(--ic-steps) - 1)) / var(--ic-steps) / 2);
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--ic-steps), 1fr);
    gap: var(--ic-gap);
}
.ic-flow--3 { --ic-steps: 3; }

/* Светящаяся линия, соединяющая шаги */
.ic-flow::before {
    content: "";
    position: absolute;
    top: 27px;
    left: var(--ic-edge);
    right: var(--ic-edge);
    height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--ic-violet-2) 12%, var(--ic-violet-3) 50%, var(--ic-violet-2) 88%, transparent);
    opacity: .45;
    z-index: 0;
}
/* Бегущий по линии импульс.
   Прятать его z-index'ом недостаточно: фон кружка полупрозрачный, а свечение
   (box-shadow ~14px) вылезает за края. Поэтому импульс гаснет по времени —
   исчезает, «влетая» в кружок, и проявляется, выходя из него с другой стороны.
   Проценты keyframes = доли пути между шагами, поэтому зависят от их числа. */
.ic-flow::after {
    content: "";
    position: absolute;
    top: 25px;
    left: var(--ic-edge);
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 999px;
    background: #fff;
    /* Свечение компактное: широкий ореол выдавал бы точку раньше, чем она
       дойдёт до обводки кружка, и гасить пришлось бы заранее — с заметным
       отступом от значка. */
    box-shadow: 0 0 8px 1.5px var(--ic-violet-3);
    animation: icTravel4 5s linear infinite;
    z-index: 0;
}

/* 4 шага: кружки ровно на 0 / 33.33 / 66.67 / 100 % пути.
   Полуокно = радиус кружка 27 + радиус точки 2.5 = 29.5px, при пути 915px
   это ±3.2%. Точка гаснет ровно на обводке кружка, а не заранее.
   Широкий ореол свечения при этом не мешает: он убран в .is-near (см. ниже). */
@keyframes icTravel4 {
    0%      { left: var(--ic-edge); opacity: 0; }
    4%      { opacity: 1; }
    30.0%   { opacity: 1; }
    30.1%   { opacity: 0; }   /* гаснет на границе 2-го кружка */
    36.6%   { opacity: 0; }
    36.7%   { opacity: 1; }   /* появляется на другой его границе */
    63.3%   { opacity: 1; }
    63.4%   { opacity: 0; }   /* гаснет на границе 3-го кружка */
    69.9%   { opacity: 0; }
    70.0%   { opacity: 1; }
    96.7%   { opacity: 1; }
    96.8%   { opacity: 0; }   /* гаснет на границе последнего кружка */
    100%    { left: calc(100% - var(--ic-edge)); opacity: 0; }
}

/* 3 шага: кружки на 0 / 50 / 100 % пути. Путь короче (813px), полуокно ±3.6% */
.ic-flow--3::after { animation-name: icTravel3; }
@keyframes icTravel3 {
    0%      { left: var(--ic-edge); opacity: 0; }
    4%      { opacity: 1; }
    46.3%   { opacity: 1; }
    46.4%   { opacity: 0; }   /* гаснет на границе среднего кружка */
    53.6%   { opacity: 0; }
    53.7%   { opacity: 1; }   /* появляется на другой его границе */
    96.3%   { opacity: 1; }
    96.4%   { opacity: 0; }   /* гаснет на границе последнего кружка */
    100%    { left: calc(100% - var(--ic-edge)); opacity: 0; }
}

.ic-step { text-align: center; }
.ic-step__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 22px;
    border-radius: 999px;
    border: 1px solid var(--ic-line-2);
    background: linear-gradient(160deg, rgba(36, 23, 60, .95), rgba(18, 11, 33, .95));
    color: var(--ic-violet-3);
    transition: transform .4s var(--ic-ease), box-shadow .4s var(--ic-ease);
}
html[data-theme="light"] .ic-step__dot {
    background: linear-gradient(160deg, #fff, #f4eeff);
}
.ic-step__dot svg, .ic-step__dot i { width: 21px; height: 21px; }
.ic-step:hover .ic-step__dot {
    transform: translateY(-3px);
    box-shadow: 0 0 34px rgba(154, 77, 255, .38);
}
.ic-step__n {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--ic-ink-3);
}
.ic-step__title {
    margin: 9px 0 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ic-ink);
}
.ic-step__text {
    margin: 7px auto 0;
    max-width: 21ch;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ic-ink-3);
}
.ic-step--done .ic-step__dot {
    border-color: rgba(74, 222, 128, .4);
    color: #4ade80;
    box-shadow: 0 0 30px rgba(74, 222, 128, .2);
}

/* ═══════════════════════════════════════════════
   4. ОТЗЫВЫ — слайдер живых карточек
   ═══════════════════════════════════════════════ */
.ic-reviews {
    display: flex;
    gap: 16px;
    /* min-width:0 обязателен: без него flex-элементы раздвигают трек
       и страница получает горизонтальный скролл на телефонах */
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 4px 20px;
    margin: 0 -4px;
    scrollbar-width: none;
}
.ic-reviews::-webkit-scrollbar { display: none; }

.ic-review {
    scroll-snap-align: start;
    flex: 0 0 min(370px, 82%);
    padding: 26px;
    border-radius: 20px;
    border: 1px solid var(--ic-line);
    background: var(--ic-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: border-color .4s var(--ic-ease), transform .4s var(--ic-ease);
}
.ic-review:hover {
    border-color: var(--ic-line-2);
    transform: translateY(-3px);
}

.ic-review__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.ic-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 999px;
    background: linear-gradient(150deg, var(--ic-violet), var(--ic-violet-2));
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
.ic-review__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ic-ink);
    line-height: 1.3;
}
.ic-review__handle {
    font-size: 12.5px;
    color: var(--ic-ink-3);
}
.ic-review__flag {
    margin-left: auto;
    font-size: 19px;
    line-height: 1;
}
.ic-review__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.62;
    color: var(--ic-ink-2);
}
.ic-review__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--ic-line);
}
.ic-stars {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--ic-violet-3);
}
.ic-review__date {
    margin-left: auto;
    font-size: 12px;
    color: var(--ic-ink-3);
}
.ic-review__tg {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(56, 160, 226, .16);
    color: #4aaee8;
}
.ic-review__tg svg, .ic-review__tg i { width: 12px; height: 12px; }

.ic-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 4px;
}
.ic-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(168, 130, 255, .25);
    cursor: pointer;
    transition: all .3s var(--ic-ease);
}
.ic-dots button.is-on {
    width: 22px;
    background: var(--ic-violet-3);
}

/* ═══════════════════════════════════════════════
   5. FAQ — минималистичный accordion без карточек
   ═══════════════════════════════════════════════ */
.ic-faq { border-top: 1px solid var(--ic-line); }

.ic-q {
    border-bottom: 1px solid var(--ic-line);
}
.ic-q > summary {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px 4px;
    cursor: pointer;
    list-style: none;
    font-size: clamp(16px, 1.6vw, 18.5px);
    font-weight: 500;
    letter-spacing: -.015em;
    color: var(--ic-ink);
    transition: color .3s var(--ic-ease);
}
.ic-q > summary::-webkit-details-marker { display: none; }
.ic-q > summary:hover { color: var(--ic-violet-3); }

.ic-q__sign {
    margin-left: auto;
    flex: none;
    position: relative;
    width: 15px;
    height: 15px;
    opacity: .55;
    transition: opacity .3s var(--ic-ease), transform .35s var(--ic-ease);
}
.ic-q__sign::before,
.ic-q__sign::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .35s var(--ic-ease);
}
.ic-q__sign::after { transform: rotate(90deg); }
.ic-q[open] .ic-q__sign { opacity: 1; color: var(--ic-violet-3); }
.ic-q[open] .ic-q__sign::after { transform: rotate(0deg); }

.ic-q__body {
    padding: 0 60px 28px 4px;
    max-width: 72ch;
    font-size: 15.5px;
    line-height: 1.68;
    color: var(--ic-ink-3);
    animation: icFade .4s var(--ic-ease) both;
}
.ic-q__body p { margin: 0; }
.ic-q__body a { color: var(--ic-violet-3); }
@keyframes icFade { from { opacity: 0; transform: translateY(-6px); } }

/* ═══════════════════════════════════════════════
   6. ФИНАЛЬНЫЙ CTA — главный магнит страницы
   ═══════════════════════════════════════════════ */
.ic-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(60px, 8vw, 108px) clamp(28px, 6vw, 88px);
    border-radius: clamp(26px, 3vw, 38px);
    border: 1px solid var(--ic-line-2);
    background:
        radial-gradient(120% 130% at 12% 0%, rgba(139, 92, 246, .3), transparent 58%),
        radial-gradient(90% 110% at 92% 100%, rgba(109, 40, 217, .34), transparent 60%),
        linear-gradient(150deg, rgba(29, 17, 51, .96), rgba(13, 7, 25, .98));
    isolation: isolate;
}
html[data-theme="light"] .ic-cta {
    background:
        radial-gradient(120% 130% at 12% 0%, rgba(139, 92, 246, .22), transparent 58%),
        radial-gradient(90% 110% at 92% 100%, rgba(154, 77, 255, .18), transparent 60%),
        linear-gradient(150deg, #fff, #f6f0ff);
}

/* ── Графика CTA: каркасный глобус с узлами сети ──
   right:0 (а не отрицательный отступ) — иначе визуальный центр сферы
   уезжает за границу карточки и фигура читается как смещённая. */
.ic-cta__art {
    position: absolute;
    right: clamp(8px, 4%, 56px);
    top: 50%;
    translate: 0 -50%;
    width: min(420px, 40%);
    aspect-ratio: 1;
    pointer-events: none;
    z-index: 0;
}
.ic-cta__globe {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 40px rgba(154, 77, 255, .35));
    animation: icBreathe 7s ease-in-out infinite;
}
@keyframes icBreathe {
    50% { filter: drop-shadow(0 0 62px rgba(154, 77, 255, .5)); }
}

/* Сфера целиком медленно вращается — меридианы «плывут» */
.ic-globe__spin {
    transform-origin: 100px 100px;
    animation: icSpin 44s linear infinite;
}
@keyframes icSpin { to { transform: rotate(360deg); } }

.ic-globe__outline { stroke: rgba(200, 150, 255, .5); }
.ic-globe__grid { stroke: rgba(185, 140, 255, .26); }

/* Узлы: пульсируют вразнобой, чтобы сеть выглядела живой.
   r задаём и здесь тоже — Safari не анимирует SVG-атрибут r через CSS,
   там точки просто останутся статичного размера, но видимыми. */
.ic-globe__node {
    r: 3;
    fill: #d9b4ff;
    animation: icNode 3.2s ease-in-out infinite;
}
/* nth-child, а не nth-of-type: узлы лежат в своей группе, и отсчёт должен
   идти по ней, иначе нумерация сползает на соседние circle сферы. */
.ic-globe__node:nth-child(2) { animation-delay: .5s; }
.ic-globe__node:nth-child(3) { animation-delay: 1s; }
.ic-globe__node:nth-child(4) { animation-delay: 1.6s; }
.ic-globe__node:nth-child(5) { animation-delay: 2.1s; }
.ic-globe__node:nth-child(6) { animation-delay: 2.6s; }
@keyframes icNode {
    0%, 100% { opacity: .45; r: 2.5; }
    50%      { opacity: 1;   r: 4; }
}

html[data-theme="light"] .ic-globe__outline { stroke: rgba(122, 52, 240, .5); }
html[data-theme="light"] .ic-globe__grid { stroke: rgba(122, 52, 240, .24); }
html[data-theme="light"] .ic-globe__node { fill: #7a34f0; }

.ic-cta__body {
    position: relative;
    z-index: 1;
    max-width: 620px;
}
.ic-cta__title {
    margin: 0;
    font-size: clamp(36px, 5.2vw, 68px);
    line-height: 1.02;
    letter-spacing: -.04em;
    font-weight: 600;
    color: var(--ic-ink);
    text-wrap: balance;
}
.ic-cta__sub {
    margin: 22px 0 0;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.6;
    color: var(--ic-ink-2);
    max-width: 42ch;
}
.ic-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 38px;
}
.ic-cta__note {
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--ic-ink-3);
}

/* ═══════════════════════════════════════════════
   7. ФУТЕР
   ═══════════════════════════════════════════════ */
.ic-footer {
    position: relative;
    margin-top: clamp(60px, 8vw, 110px);
    padding: clamp(52px, 6vw, 82px) 0 34px;
    border-top: 1px solid var(--ic-line);
    background: linear-gradient(180deg, transparent, rgba(9, 5, 18, .5));
}
html[data-theme="light"] .ic-footer {
    background: linear-gradient(180deg, transparent, rgba(245, 239, 255, .7));
}

.ic-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 60px);
}

.ic-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ic-ink);
    text-decoration: none;
}
.ic-footer__brand img { height: 30px; width: auto; object-fit: contain; }
.ic-footer__about {
    margin: 18px 0 0;
    max-width: 30ch;
    font-size: 14px;
    line-height: 1.62;
    color: var(--ic-ink-3);
}

.ic-social {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}
.ic-social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    border: 1px solid var(--ic-line);
    color: var(--ic-ink-3);
    transition: all .3s var(--ic-ease);
}
.ic-social a:hover {
    border-color: var(--ic-line-2);
    color: var(--ic-violet-3);
    transform: translateY(-2px);
}
.ic-social svg, .ic-social i { width: 16px; height: 16px; }

.ic-col h4 {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ic-ink-3);
}
.ic-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ic-col a {
    font-size: 14.5px;
    color: var(--ic-ink-2);
    text-decoration: none;
    transition: color .25s var(--ic-ease);
}
.ic-col a:hover { color: var(--ic-violet-3); }

.ic-footer__bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: clamp(44px, 5vw, 66px);
    padding-top: 26px;
    border-top: 1px solid var(--ic-line);
    font-size: 13.5px;
    color: var(--ic-ink-3);
}
.ic-footer__lang { margin-left: auto; }
.ic-footer__lang button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid var(--ic-line);
    background: transparent;
    font: inherit;
    color: var(--ic-ink-2);
    cursor: pointer;
    transition: all .3s var(--ic-ease);
}
.ic-footer__lang button:hover {
    border-color: var(--ic-line-2);
    color: var(--ic-ink);
}

/* ═══════════════════════════════════════════════
   СТРАНИЦА ЗАГРУЗКИ (/download)
   ═══════════════════════════════════════════════ */
.ic-dl-hero { padding-bottom: clamp(28px, 3vw, 40px); }
.ic-dl-title { max-width: 18ch; }
.ic-dl-lead { max-width: 52ch; }

/* Плашка «рекомендуем для вашей системы».
   [hidden] обязателен: display:flex иначе перебивает атрибут и плашка
   показывается с пустой ссылкой, когда релиза для системы нет. */
.ic-suggest[hidden] { display: none; }
.ic-suggest {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 22px;
    border-radius: 18px;
    border: 1px solid var(--ic-line-2);
    background:
        radial-gradient(120% 200% at 0% 0%, rgba(154, 77, 255, .16), transparent 60%),
        var(--ic-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.ic-suggest__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 13px;
    border: 1px solid var(--ic-line-2);
    background: linear-gradient(160deg, rgba(154, 77, 255, .2), rgba(124, 58, 237, .06));
    color: var(--ic-violet-3);
}
.ic-suggest__icon svg, .ic-suggest__icon i { width: 20px; height: 20px; }
.ic-suggest__body { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.ic-suggest__label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ic-ink-3);
}
.ic-suggest__name {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ic-ink);
}

/* Сетка платформ */
.ic-dl-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ic-dl-card {
    /* Фирменный цвет платформы: задаётся ниже через [data-platform]. */
    --dl-a: 154, 77, 255;
    --dl-b: 124, 58, 237;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 24px;
    border-radius: var(--ic-radius);
    border: 1px solid var(--ic-line);
    background: var(--ic-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    transition: border-color .4s var(--ic-ease),
                transform .45s var(--ic-ease),
                box-shadow .45s var(--ic-ease);
}

/* Цветная заливка проявляется при наведении. */
.ic-dl-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(var(--dl-a), .20), transparent 62%),
        linear-gradient(180deg, rgba(var(--dl-a), .07), transparent 60%);
    transition: opacity .45s var(--ic-ease);
}

/* Верхняя световая кромка — «подсветка» края карточки. */
.ic-dl-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    opacity: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--dl-a), .85),
        transparent);
    transition: opacity .45s var(--ic-ease), left .5s var(--ic-ease), right .5s var(--ic-ease);
}

.ic-dl-card:hover {
    border-color: rgba(var(--dl-a), .5);
    transform: translateY(-8px);
    box-shadow: 0 22px 50px rgba(var(--dl-b), .28);
}
.ic-dl-card:hover::before { opacity: 1; }
.ic-dl-card:hover::after { opacity: 1; left: 0; right: 0; }

/* Цвета платформ. */
.ic-dl-card[data-platform="windows"] { --dl-a: 56, 165, 255;  --dl-b: 14, 110, 214; }
.ic-dl-card[data-platform="android"] { --dl-a: 61, 220, 132;  --dl-b: 22, 163, 74; }
.ic-dl-card[data-platform="macos"]   { --dl-a: 186, 156, 255; --dl-b: 124, 58, 237; }
.ic-dl-card[data-platform="ios"]     { --dl-a: 236, 130, 190; --dl-b: 190, 60, 140; }

/* Карточка платформы посетителя — подсвечена в её собственном цвете */
.ic-dl-card.is-current {
    border-color: rgba(var(--dl-a), .55);
    box-shadow: 0 0 0 1px rgba(var(--dl-a), .22), 0 18px 44px rgba(var(--dl-b), .2);
}
.ic-dl-card.is-current::after { opacity: .7; }

/* Платформа без релиза — приглушена, но видна */
.ic-dl-card.is-soon { opacity: .62; }
.ic-dl-card.is-soon:hover { opacity: 1; }

/* Контент поверх цветной заливки ::before. */
.ic-dl-card > * { position: relative; z-index: 1; }

.ic-dl-card__top { display: flex; flex-direction: column; gap: 10px; }
.ic-dl-logo {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 17px;
    border: 1px solid rgba(var(--dl-a), .28);
    background: linear-gradient(160deg, rgba(var(--dl-a), .18), rgba(var(--dl-b), .05));
    color: var(--ic-ink);
    margin-bottom: 4px;
    transition: transform .45s var(--ic-ease),
                border-color .4s var(--ic-ease),
                box-shadow .45s var(--ic-ease),
                color .4s var(--ic-ease);
}
.ic-dl-card:hover .ic-dl-logo {
    transform: translateY(-2px) rotate(-6deg) scale(1.07);
    border-color: rgba(var(--dl-a), .6);
    box-shadow: 0 12px 28px rgba(var(--dl-b), .35);
    color: #fff;
}
/* Мягкое сияние под логотипом. */
.ic-dl-logo::after {
    content: "";
    position: absolute;
    inset: -18%;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(circle, rgba(var(--dl-a), .5), transparent 68%);
    filter: blur(12px);
    transition: opacity .45s var(--ic-ease);
}
.ic-dl-card:hover .ic-dl-logo::after { opacity: 1; }
/* Иконка над сиянием. */
.ic-dl-logo > svg, .ic-dl-logo > i { position: relative; z-index: 1; }
.ic-dl-card__name {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ic-ink);
    transition: color .4s var(--ic-ease);
}
.ic-dl-card:hover .ic-dl-card__name { color: rgb(var(--dl-a)); }
.ic-dl-card__req {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ic-ink-3);
}

.ic-dl-card__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.ic-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--ic-line-2);
    background: rgba(154, 77, 255, .12);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ic-violet-3);
    font-variant-numeric: tabular-nums;
}
.ic-chip--quiet {
    background: transparent;
    border-color: var(--ic-line);
    color: var(--ic-ink-3);
    font-weight: 500;
}
/* Чипы внутри карточки перекрашиваются вместе с ней. */
.ic-dl-card .ic-chip {
    transition: border-color .4s var(--ic-ease), color .4s var(--ic-ease),
                background .4s var(--ic-ease);
}
.ic-dl-card:hover .ic-chip:not(.ic-chip--quiet) {
    border-color: rgba(var(--dl-a), .45);
    background: rgba(var(--dl-a), .16);
    color: rgb(var(--dl-a));
}
.ic-dl-card:hover .ic-chip--quiet { border-color: rgba(var(--dl-a), .3); }

/* «Скоро» — по центру, как заглушка вместо кнопки. */
.ic-dl-card.is-soon > .ic-chip--quiet {
    margin-top: auto;
    align-self: center;
    padding: 7px 16px;
}

/* Кнопка прижата к низу, чтобы карточки выглядели одной высоты */
.ic-dl-card__btn { margin-top: auto; width: 100%; }
.ic-dl-card__hint {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--ic-ink-3);
    text-align: center;
}
.ic-dl-card__alt {
    display: flex;
    justify-content: center;
    gap: 14px;
}
.ic-dl-card__alt a {
    font-size: 12px;
    color: var(--ic-violet-3);
    text-decoration: none;
}
.ic-dl-card__alt a:hover { text-decoration: underline; }

@media (max-width: 1080px) {
    .ic-dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .ic-dl-grid { grid-template-columns: 1fr; }
    .ic-suggest { padding: 16px; }
    .ic-suggest__body { margin-right: 0; }
    .ic-suggest .ic-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════
   АДАПТИВ
   ═══════════════════════════════════════════════ */
@media (max-width: 1080px) {
    .ic-tile--hero { grid-column: span 6; grid-row: span 1; }
    .ic-tile--wide, .ic-tile--half { grid-column: span 3; }
    .ic-tile--third { grid-column: span 2; }
    /* На узких экранах перекрытие не работает: возвращаем обычный поток,
       иначе текст лёг бы прямо на картинку. */
    .ic-apps { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); }
    .ic-apps > div:first-child,
    .ic-apps > .ic-mock { grid-area: auto; }
    .ic-apps > div:first-child { max-width: none; }
    /* Карточка сохраняется, но скриншот встаёт под текстом, а не за ним:
       сбрасываем «вклеивание» в край и растворение. */
    .ic-mock {
        justify-self: center;
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
        transform: none;
    }
    .ic-mock__inner::after { display: none; }
    .ic-footer__top { grid-template-columns: 1fr 1fr; row-gap: 40px; }
}

@media (max-width: 860px) {
    .ic-head { grid-template-columns: 1fr; align-items: start; }
    .ic-head__aside { max-width: none; }
    /* Плитки «third» по 2 колонки из 6 на планшете становятся слишком узкими —
       заголовок в них ломается по слогам. Переходим на сетку из двух колонок:
       hero занимает ряд целиком, остальные встают парами без пустых мест. */
    .ic-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ic-tile--hero { grid-column: span 2; }
    .ic-tile--wide { grid-column: span 2; }
    .ic-tile--half,
    .ic-tile--third { grid-column: span 1; }
    /* Плитка, оставшаяся одна в последнем ряду, растягивается на обе колонки —
       иначе рядом с ней зияет пустая половина. Полагаться на nth-child нельзя:
       hero занимает целый ряд и сбивает чётность, поэтому просто разрешаем
       последней плитке занять остаток ряда. */
    .ic-bento > .ic-tile:last-child { grid-column: span 2; }
    .ic-flow { grid-template-columns: repeat(2, 1fr); row-gap: 42px; }
    .ic-flow::before, .ic-flow::after { display: none; }
    /* На узких экранах глобус уходит в фон под текст, но остаётся справа */
    .ic-cta__art { opacity: .22; right: -12%; width: 62%; }
    .ic-cta__body { max-width: none; }
}

@media (max-width: 640px) {
    .ic-sec { padding: clamp(48px, 12vw, 68px) 0; }
    .ic-sec--tight { padding: clamp(40px, 10vw, 56px) 0; }
    .ic-wrap { width: min(1200px, 100% - 32px); }

    .ic-bento { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ic-tile,
    .ic-tile--hero,
    .ic-tile--wide,
    .ic-tile--half,
    .ic-tile--third { grid-column: span 1; grid-row: auto; padding: 24px; }
    /* Правило про последнюю плитку из блока 860px специфичнее (два класса +
       псевдокласс), поэтому его нужно перекрыть таким же селектором. Иначе
       span 2 в одноколоночной сетке создаёт неявную вторую колонку: плитки
       делят ширину пополам и текст сыплется по одной букве в столбик. */
    .ic-bento > .ic-tile:last-child { grid-column: span 1; }
    /* max-width в ch на узкой колонке оставляет пустую половину плитки */
    .ic-tile__text { max-width: none; }
    /* Крупная цифра со «сноской» (10 Гбит/с) не влезает в 320px-экран */
    .ic-tile--hero .ic-figure { font-size: clamp(40px, 13vw, 60px); }
    .ic-figure sup { font-size: .34em; }
    .ic-meter__row { grid-template-columns: 56px 1fr; gap: 10px; }

    .ic-head { margin-bottom: 32px; }
    .ic-eyebrow { margin-bottom: 14px; }

    .ic-platforms { margin: 24px 0 24px; }
    .ic-btn { padding: 14px 22px; }
    /* Кнопка на всю ширину читается как основное действие блока */
    .ic-apps .ic-btn--primary { width: 100%; }

    .ic-flow { grid-template-columns: 1fr; row-gap: 28px; }
    /* Шаг разворачивается в строку: кружок слева, подпись справа.
       Колонки назначаем явно — иначе номер, заголовок и текст растекаются
       по сетке автоматически и накладываются друг на друга. */
    .ic-step {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 2px;
        align-items: start;
        text-align: left;
    }
    .ic-step__dot { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
    .ic-step__n { grid-column: 2; grid-row: 1; }
    .ic-step__title { grid-column: 2; grid-row: 2; margin: 0; }
    .ic-step__text { grid-column: 2; grid-row: 3; margin: 2px 0 0; max-width: none; }
    .ic-q > summary { padding: 22px 2px; gap: 14px; }
    .ic-q__body { padding: 0 30px 24px 2px; }

    /* Отзывы: карточка почти во всю ширину, «подглядывание» следующей
       подсказывает, что список листается вбок. */
    .ic-review { flex: 0 0 min(370px, 86%); padding: 22px; }
    /* Звёзды + дата + иконка в одну строку на узкой карточке не помещаются */
    .ic-review__foot { flex-wrap: wrap; gap: 8px; }
    .ic-review__text { font-size: 14.5px; }

    .ic-cta { padding: 44px 22px; }
    .ic-cta__actions { margin-top: 28px; }
    .ic-cta__actions .ic-btn { flex: 1 1 100%; }
    .ic-btn--lg { padding: 16px 24px; font-size: 15px; }
    /* Глобус за текстом на телефоне только мешает читать заголовок */
    .ic-cta__art { display: none; }

    .ic-footer__top { grid-template-columns: 1fr; }
    .ic-footer__lang { margin-left: 0; }
}

/* Узкие телефоны: длинные слова в кнопках и заголовках упираются в края */
@media (max-width: 380px) {
    .ic-wrap { width: min(1200px, 100% - 24px); }
    .ic-tile,
    .ic-tile--hero { padding: 20px; }
    .ic-cta { padding: 36px 18px; }
    /* nowrap на кнопке шириной в экран приводит к переполнению */
    .ic-btn { white-space: normal; text-align: center; }
    .ic-step { grid-template-columns: 46px minmax(0, 1fr); column-gap: 13px; }
    .ic-step__dot { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .ic-meter__fill,
    .ic-power,
    .ic-cta__globe,
    .ic-globe__spin,
    .ic-globe__node,
    .ic-flow::after,
    .ic-pulse::before { animation: none; }
    .ic-btn, .ic-tile, .ic-review, .ic-step__dot { transition: none; }
}

/* ═══════════════════════════════════════════════
   АНИМАЦИИ ПОЯВЛЕНИЯ ПРИ СКРОЛЛЕ
   Элементы с [data-ic-anim] скрыты до попадания в вид;
   класс .is-in ставит JS (IntersectionObserver).
   Каскад внутри блока — через --ic-i (индекс элемента).
   ═══════════════════════════════════════════════ */

/* Пока JS не отработал, ничего не скрываем: если он упадёт или
   будет отключён, контент останется видимым. Скрывать разрешает
   только класс на <html>, который ставит сам скрипт. */
.ic-anim-ready [data-ic-anim] {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity .7s cubic-bezier(.22, 1, .36, 1),
        transform .7s cubic-bezier(.22, 1, .36, 1),
        filter .7s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--ic-i, 0) * 70ms);
}

/* Снизу вверх — базовый вариант */
.ic-anim-ready [data-ic-anim="up"]     { transform: translateY(26px); }
/* Появление с масштабом — для крупных карточек и мокапов */
.ic-anim-ready [data-ic-anim="scale"]  { transform: scale(.965) translateY(18px); }
/* Сбоку — для split-секций */
.ic-anim-ready [data-ic-anim="left"]   { transform: translateX(-32px); }
.ic-anim-ready [data-ic-anim="right"]  { transform: translateX(32px); }
/* Заголовки: подъём + лёгкая расфокусировка, читается дороже простого fade */
.ic-anim-ready [data-ic-anim="title"]  { transform: translateY(20px); filter: blur(6px); }
/* Только проявление — для мелких подписей */
.ic-anim-ready [data-ic-anim="fade"]   { transform: none; }

/* Конечное состояние — одно для всех вариантов */
.ic-anim-ready [data-ic-anim].is-in {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Линия таймлайна прочерчивается слева направо */
.ic-anim-ready .ic-flow[data-ic-anim]::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(.22, 1, .36, 1) .15s;
}
.ic-anim-ready .ic-flow[data-ic-anim].is-in::before { transform: scaleX(1); }

/* Бегущий импульс запускаем только когда блок виден,
   иначе он «отматывает» цикл в фоне и появляется в середине пути. */
.ic-anim-ready .ic-flow[data-ic-anim]::after { animation-play-state: paused; }
.ic-anim-ready .ic-flow[data-ic-anim].is-in::after { animation-play-state: running; }

/* Полосы скорости в bento заполняются после появления карточки */
.ic-anim-ready .ic-tile[data-ic-anim] .ic-meter__fill { animation-play-state: paused; }
.ic-anim-ready .ic-tile[data-ic-anim].is-in .ic-meter__fill { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
    .ic-anim-ready [data-ic-anim] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .ic-anim-ready .ic-flow[data-ic-anim]::before { transform: scaleX(1); transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ТАРИФЫ — акцент на дневной оплате
   Дневной тариф выделен отдельным цветом (виолет-градиент) и
   полной шириной; остальные тарифы — спокойной сеткой ниже.
   ═══════════════════════════════════════════════════════════════ */

.ic-plan {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--ic-radius);
    border: 1px solid var(--ic-line);
    background: var(--ic-surface);
    transition: transform .45s var(--ic-ease), border-color .45s var(--ic-ease),
                box-shadow .45s var(--ic-ease);
}
.ic-plan:hover { transform: translateY(-3px); border-color: var(--ic-line-2); }

/* ── Дневной тариф: акцентная карточка ── */
.ic-plan--daily {
    position: relative;
    overflow: hidden;
    margin-bottom: clamp(20px, 3vw, 32px);
    padding: clamp(22px, 3vw, 34px);
    border-color: rgba(168, 130, 255, .42);
    /* Отличается от обычных карточек: заливка вместо прозрачной поверхности */
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(154, 77, 255, .28), transparent 62%),
        linear-gradient(135deg, rgba(124, 58, 237, .22), rgba(30, 20, 52, .86));
    box-shadow: 0 18px 48px -28px rgba(154, 77, 255, .55);
}
.ic-plan--daily:hover {
    border-color: rgba(201, 139, 255, .6);
    box-shadow: 0 24px 60px -26px rgba(154, 77, 255, .7);
}
html[data-theme="light"] .ic-plan--daily {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(154, 77, 255, .16), transparent 62%),
        linear-gradient(135deg, rgba(122, 52, 240, .1), rgba(255, 255, 255, .94));
    border-color: rgba(122, 52, 240, .3);
    box-shadow: 0 18px 44px -30px rgba(122, 52, 240, .4);
}

/* ── Premium: та же форма, что у дневного, но золотая гамма ── */
.ic-plan--premium {
    position: relative;
    overflow: hidden;
    /* Карточка стоит ПОД сеткой сроков, поэтому отступ сверху, а не снизу. */
    margin-top: clamp(20px, 3vw, 32px);
    padding: clamp(22px, 3vw, 34px);
    border-color: rgba(232, 181, 82, .40);
    /* Полноценная заливка, как у дневного тарифа: без неё карточка выглядела
       незаконченной — золотая рамка поверх обычной тёмной поверхности. */
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(232, 181, 82, .20), transparent 62%),
        linear-gradient(135deg, rgba(180, 130, 40, .16), rgba(38, 30, 16, .88));
    box-shadow: 0 18px 48px -28px rgba(232, 181, 82, .45);
}
.ic-plan--premium:hover {
    border-color: rgba(245, 205, 120, .62);
    box-shadow: 0 24px 60px -26px rgba(232, 181, 82, .6);
}
html[data-theme="light"] .ic-plan--premium {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(232, 181, 82, .16), transparent 62%),
        linear-gradient(135deg, rgba(200, 150, 50, .10), rgba(255, 255, 255, .94));
    border-color: rgba(190, 145, 45, .34);
    box-shadow: 0 18px 44px -30px rgba(190, 145, 45, .4);
}
.ic-plan--premium .ic-plan__badge {
    border-color: rgba(245, 205, 120, .5);
    background: rgba(232, 181, 82, .18);
    color: #f0c974;
}
/* Иконка тоже золотая: фиолетовая рамка по умолчанию выбивалась из гаммы. */
.ic-plan--premium .ic-plan__icon {
    border-color: rgba(232, 181, 82, .42);
    background: rgba(232, 181, 82, .12);
    color: #f0c974;
}
.ic-plan--premium .ic-plan__cta { color: #f0c974; }
.ic-plan--premium:hover .ic-plan__cta svg { transform: translateX(4px); }
.ic-plan--premium .ic-plan__amount { color: #f7dda2; }

/* Список преимуществ премиума */
.ic-plan__feats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.ic-plan__feats li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(232, 181, 82, .22);
    background: rgba(232, 181, 82, .07);
    color: var(--ic-ink-2);
    font-size: 13px;
    line-height: 1;
}
.ic-plan__feats svg { width: 15px; height: 15px; color: #f0c974; }

/* Второй срок премиума (3 мес.) — отдельной строкой под ценой */
.ic-plan__alt {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(232, 181, 82, .18);
    color: var(--ic-ink-3);
    font-size: 12.5px;
    white-space: nowrap;
}

.ic-plan__badge {
    border-color: rgba(240, 190, 90, .45);
    background: rgba(240, 190, 90, .14);
    color: #e8b552;
}
.ic-plan--premium .ic-plan__icon { border-color: rgba(240, 190, 90, .35); color: #e8b552; }
.ic-plan--premium .ic-plan__cta { color: #e8b552; }
.ic-plan--premium:hover .ic-plan__cta svg { transform: translateX(4px); }


.ic-plan__badge {
    display: inline-block;
    margin-bottom: 16px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(201, 139, 255, .4);
    background: rgba(154, 77, 255, .16);
    color: var(--ic-violet-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ic-plan__body {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 28px);
}
.ic-plan__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    border: 1px solid var(--ic-line-2);
    background: rgba(154, 77, 255, .14);
    color: var(--ic-violet-3);
}
.ic-plan__icon svg { width: 26px; height: 26px; }
.ic-plan__info { flex: 1 1 auto; min-width: 0; }

.ic-plan__name {
    margin: 0 0 6px;
    font-size: clamp(19px, 2.2vw, 25px);
    font-weight: 650;
    color: var(--ic-ink);
    letter-spacing: -.01em;
}
.ic-plan__note {
    margin: 0;
    max-width: 62ch;
    color: var(--ic-ink-2);
    font-size: 14px;
    line-height: 1.55;
}

.ic-plan__price {
    flex: none;
    text-align: right;
    white-space: nowrap;
}
.ic-plan__amount {
    display: block;
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 700;
    line-height: 1.05;
    color: var(--ic-ink);
    letter-spacing: -.02em;
}
.ic-plan__per {
    display: block;
    margin-top: 2px;
    color: var(--ic-ink-3);
    font-size: 13px;
}

.ic-plan__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: var(--ic-violet-3);
    font-size: 15px;
    font-weight: 600;
}
.ic-plan__cta svg { width: 17px; height: 17px; transition: transform .35s var(--ic-ease); }
.ic-plan--daily:hover .ic-plan__cta svg { transform: translateX(4px); }

/* ── Остальные тарифы: спокойная сетка ── */
.ic-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: clamp(12px, 1.6vw, 18px);
}
.ic-plan--regular {
    position: relative;
    overflow: hidden;
    padding: clamp(18px, 2.2vw, 24px);
    text-align: center;
    /* Колонка с равномерным распределением: название, цена и «₽/день» встают
       на одни и те же строки во всех карточках, даже если у части тарифов
       подписи нет. Без этого сетка визуально «прыгала». */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
/* Мягкое свечение под курсором — «оживляет» карточку, не перетягивая внимание
   с акцентных блоков (дневной и Premium). */
.ic-plan__glow {
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 150%;
    background: radial-gradient(60% 60% at 50% 0%, var(--ic-plan-tint, rgba(154, 77, 255, .28)), transparent 70%);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .45s var(--ic-ease), transform .45s var(--ic-ease);
    pointer-events: none;
}
.ic-plan--regular:hover .ic-plan__glow { opacity: 1; transform: translateY(0); }
.ic-plan--regular > * { position: relative; z-index: 1; }

.ic-plan--regular .ic-plan__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ic-ink-2);
    /* Две строки под название: «12 месяцев» и «Недельный» не должны сдвигать цену. */
    min-height: 2.6em;
    display: flex;
    align-items: center;
    text-align: center;
    transition: color .35s var(--ic-ease);
}
.ic-plan--regular:hover .ic-plan__name { color: var(--ic-ink); }
.ic-plan--regular .ic-plan__price { text-align: center; margin-top: auto; }
.ic-plan--regular .ic-plan__amount {
    font-size: clamp(21px, 2.4vw, 26px);
    transition: transform .35s var(--ic-ease), color .35s var(--ic-ease);
}
.ic-plan--regular:hover .ic-plan__amount {
    transform: scale(1.06);
    color: var(--ic-plan-accent, var(--ic-violet-3));
}
.ic-plan--regular .ic-plan__per {
    margin-top: 4px;
    font-size: 12px;
    /* Резервируем строку и там, где подписи нет, — низ карточек выравнивается. */
    min-height: 1.2em;
}
/* Кнопка-подсказка: появляется только при наведении, не занимая места в потоке. */
.ic-plan__pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--ic-plan-accent, var(--ic-violet-3));
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s var(--ic-ease), transform .35s var(--ic-ease);
}
.ic-plan__pick svg { width: 15px; height: 15px; }
.ic-plan--regular:hover .ic-plan__pick { opacity: 1; transform: translateY(0); }
.ic-plan--regular:hover { border-color: var(--ic-plan-accent, var(--ic-line-2)); }

/* Оттенки по позиции: короткие сроки — холоднее, длинные — теплее. */
.ic-plan--t0 { --ic-plan-tint: rgba(56, 189, 248, .26); --ic-plan-accent: #38bdf8; }
.ic-plan--t1 { --ic-plan-tint: rgba(129, 140, 248, .26); --ic-plan-accent: #818cf8; }
.ic-plan--t2 { --ic-plan-tint: rgba(168, 85, 247, .26); --ic-plan-accent: #a855f7; }
.ic-plan--t3 { --ic-plan-tint: rgba(236, 72, 153, .24); --ic-plan-accent: #ec4899; }
.ic-plan--t4 { --ic-plan-tint: rgba(251, 146, 60, .24); --ic-plan-accent: #fb923c; }

@media (prefers-reduced-motion: reduce) {
    .ic-plan__glow, .ic-plan__pick, .ic-plan--regular .ic-plan__amount { transition: none; }
}

@media (max-width: 700px) {
    /* Цена уходит под описание: в одну строку на узком экране не влезает */
    .ic-plan__body { flex-wrap: wrap; }
    .ic-plan__price { flex: 1 0 100%; text-align: left; }
    .ic-plan__icon { width: 46px; height: 46px; }
    .ic-plan__icon svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .ic-plan, .ic-plan__cta svg { transition: none; }
    .ic-plan:hover { transform: none; }
}

/* --- Кнопка внутри карточки платформы ---
   Наследует цвет своей платформы, чтобы карточка читалась как единое целое. */
.ic-dl-card .ic-dl-card__btn {
    transition: transform .35s var(--ic-ease), box-shadow .35s var(--ic-ease),
                background .35s var(--ic-ease), border-color .35s var(--ic-ease);
}
.ic-dl-card:hover .ic-btn--primary.ic-dl-card__btn {
    background: linear-gradient(135deg, rgb(var(--dl-a)), rgb(var(--dl-b)));
    border-color: rgba(var(--dl-a), .6);
    box-shadow: 0 10px 26px rgba(var(--dl-b), .4);
    transform: translateY(-2px);
}
.ic-dl-card:hover .ic-btn--ghost.ic-dl-card__btn {
    border-color: rgba(var(--dl-a), .5);
    background: rgba(var(--dl-a), .12);
    transform: translateY(-2px);
}

/* Альтернативные сборки (Intel / Apple Silicon) — в цвете платформы. */
.ic-dl-card .ic-dl-card__alt a { transition: color .3s var(--ic-ease); }
.ic-dl-card:hover .ic-dl-card__alt a { color: rgb(var(--dl-a)); }

@media (prefers-reduced-motion: reduce) {
    .ic-dl-card, .ic-dl-card::before, .ic-dl-card::after,
    .ic-dl-logo, .ic-dl-logo::after, .ic-dl-card__name,
    .ic-dl-card .ic-chip, .ic-dl-card .ic-dl-card__btn {
        transition: none !important;
    }
    .ic-dl-card:hover,
    .ic-dl-card:hover .ic-dl-logo,
    .ic-dl-card:hover .ic-dl-card__btn {
        transform: none !important;
    }
}