/* ==========================================================================
   to-be.css — ТОНКИЙ СЛОЙ ПОВЕРХ БОЕВОЙ ВЁРСТКИ
   --------------------------------------------------------------------------
   Правило (09_decisions/РЕГЛАМЕНТ.md, «Вёрстку не пишем с нуля»): база —
   боевые landing.css и concept-5.css, они скопированы без единой правки.
   Здесь только то, чего в боевой вёрстке физически нет:

     1) длинный заголовок первого экрана — боевой размер шрифта рассчитан
        на два слова «Iris AI Studio» и наш заголовок не вмещает;
     2) пара «до/после» на месте логотипа-ядра в правой карточке;
     3) отступ у плиточной сетки, когда она стоит отдельной секцией;
     4) починка специфичности для акцентной кнопки «Скачать» в меню и в
        подвале — сам акцент боевой, свой цвет не заводился;
     5) деление карточки поддержки пополам (связь + боевой логотип-ядро) —
        боевой сетки «две половины внутри карточки» не существует;
     6) слой «оживления» (v10, пункты 8-16): подсветка кнопок, подсветка
        под курсором, ритм нижних блоков. Всё собрано из боевых приёмов и
        боевых переменных, нового визуального языка не заводилось.

   Ничего из боевых правил здесь не отменяется, кроме размера h1 и
   минимальной высоты первого экрана — оба отменены осознанно и описаны
   в РАЗБОР_v8.md. Про раздел «Поддержка» — РАЗБОР_v9.md, про оживление —
   РАЗБОР_v10.md.
   ========================================================================== */

/* 1. Заголовок первого экрана -------------------------------------------- */
/* Боевое значение: clamp(4rem, 5.1vw, 6.2rem) под короткое «Iris AI Studio».
   Наш заголовок — девять слов, при боевом размере слово «фотографируется»
   вылезает за карточку. Уменьшено, пропорции и шрифт боевые. */
.irisConceptFiveHome .c4Copy h1 {
  /* v10: ещё на ступень ниже. Владелец 29.09.2026: «вверху много текста».
     Текст не сокращался — уменьшен кегль и подтянут интерлиньяж, чтобы
     блок читался как заголовок, а не как стена. */
  font-size: clamp(2.2rem, 2.9vw, 3.5rem);
  line-height: 1.08;
  margin: 22px 0 22px;
}

/* 2. Акцентная кнопка «Скачать» ------------------------------------------- */
/* Правка владельца 29.09.2026: подсветить «Скачать» в шапке и сделать
   «Скачать» в подвале зелёной. Свой цвет НЕ заводился: взят боевой класс
   .c4Primary (зелёно-бирюзовый градиент, им же покрашены главная кнопка и
   кнопка «Личный кабинет»).
   Зачем правило вообще нужно: боевые .c4Topnav a и .c4FooterLinks a имеют
   специфичность выше, чем .c4Primary, и гасят у ссылки фон, рамку и padding.
   Здесь ВОЗВРАЩАЕТСЯ боевой вид кнопки теми же боевыми переменными,
   в размер соседних элементов меню и подвала. */
.irisConceptFiveHome .c4Topnav a.c4Primary,
.irisConceptFiveHome .c4FooterLinks a.c4Primary {
  min-height: 38px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  color: #021012;
  background: linear-gradient(135deg, var(--c5-green), var(--c5-cyan));
  font-size: 0.94rem;
}

/* 3. Пара «до/после» в правой карточке первого экрана --------------------- */
/* Занимает ту же строку сетки, что боевой логотип-ядро (.c4VisualCore):
   c4StageFrame = grid-template-rows: auto 1fr auto. Рамка и радиус взяты
   у .c4VisualCore, чтобы блок читался как боевой. */
.irisConceptFiveHome .c4StagePair {
  align-self: center;
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--c5-line);
  background: rgba(8, 14, 24, 0.6);
}

.irisConceptFiveHome .c4StagePair img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4. Плиточная сетка как самостоятельная секция --------------------------- */
/* .c4SignalGrid боевая (три в ряд, на узком — одна). Отдельной секции нужен
   только верхний отступ, такой же, как у боевой .featureGrid. */
.irisConceptFiveHome .c4SignalGrid--wide {
  margin-top: 24px;
}

/* 5. Телефон --------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Боевое правило обрезает заголовок до 8ch — это под «Iris AI Studio».
     Нашему заголовку нужна вся ширина карточки. */
  .irisConceptFiveHome .c4Copy h1 {
    max-width: none;
    font-size: 2rem;
  }

  .irisConceptFiveHome .c4StagePair {
    aspect-ratio: 4 / 3;
  }
}

/* 6. Высота первого экрана ------------------------------------------------- */
/* Боевое правило растягивает обе карточки на calc(100vh - 158px): там внутри
   логотип-ядро и три плитки, которые эту высоту заполняют. Нашего содержания
   меньше, и от принудительной высоты внизу карточек оставалась пустота.
   Ширина, колонки и все переносы по ширине экрана остаются боевыми —
   меняется только нижняя граница высоты. */
.irisConceptFiveHome .c4Hero {
  min-height: 0;
}

/* 7. Раздел «Поддержка»: половина связи + половина с логотипом ------------- */
/* Правка владельца 29.09.2026. Карточка поддержки делится ПОПОЛАМ: слева
   связь по центру, справа боевой логотип-ядро .c4VisualCore. Сам логотип
   боевой — здесь только раскладка на две половины и посадка блока в
   карточку, которая уже втрое ниже первого экрана. */
.irisConceptFiveHome .c5SupportSplit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
}

/* «поддержку по центру оставшегося» — по обеим осям центра половины */
.irisConceptFiveHome .c5SupportBody {
  text-align: center;
}

.irisConceptFiveHome .c5SupportBody .c4Actions {
  justify-content: center;
  margin-top: 18px;
}

/* Починка специфичности, как в пункте 2: боевое .featureCard a
   (0,2,1) красит ЛЮБУЮ ссылку внутри карточки в мятный и подчёркивает,
   а .c4Primary (0,2,0) слабее. Возвращаем боевой вид кнопки. */
.irisConceptFiveHome .featureCard a.c4Primary {
  color: #021012;
  text-decoration: none;
}

/* Логотип-ядро в половине карточки. Боевая высота 460px рассчитана на
   карточку первого экрана во весь экран; здесь блок вдвое уже и стоит
   в невысокой карточке. Размеры орбит, стекла и логотипа взяты у боевого
   же правила для узких экранов (concept-5.css:711-739) — свои числа не
   придумывались. */
.irisConceptFiveHome .c5SupportSplit .c4VisualCore {
  min-height: 268px;
}

.irisConceptFiveHome .c5SupportSplit .c4OrbitOne {
  width: 246px;
  height: 246px;
}

.irisConceptFiveHome .c5SupportSplit .c4OrbitTwo {
  width: 196px;
  height: 196px;
}

.irisConceptFiveHome .c5SupportSplit .c4OrbitThree {
  width: 148px;
  height: 148px;
}

.irisConceptFiveHome .c5SupportSplit .c4CoreGlass {
  width: 148px;
  height: 148px;
}

.irisConceptFiveHome .c5SupportSplit .c4CoreLogo {
  width: 124px;
  height: 124px;
}

/* Две половины схлопываются в одну колонку раньше, чем сама боевая сетка
   #contacts (920px): при ширине карточки меньше ~600px половина уже уже
   орбиты 246px, и круг обрезался бы краем блока. */
@media (max-width: 1280px) {
  .irisConceptFiveHome .c5SupportSplit {
    grid-template-columns: 1fr;
  }

  /* сложенные в столбик, блок логотипа не растягивается на всю карточку:
     иначе получается широкая полоса вместо круглых орбит */
  .irisConceptFiveHome .c5SupportSplit .c4VisualCore {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* Телефон: логотип не должен занимать пол-экрана — блок ниже боевого
   узкоэкранного (300px), орбиты те же. */
@media (max-width: 640px) {
  .irisConceptFiveHome .c5SupportSplit .c4VisualCore {
    min-height: 232px;
  }
}

/* ==========================================================================
   v10. ОЖИВЛЕНИЕ ГЛАВНОЙ (пункты 8-16)
   --------------------------------------------------------------------------
   Задача владельца 29.09.2026: «больше подсветку, какие-то эффекты как
   подсветка кнопок, какие-то элементы слежения за мышкой… внизу блоки
   скучные однотипные, разнообразить, не теряя суть».

   Ни одного нового слова на странице не появилось. Новых механизмов тоже:
   всё построено на том, что уже есть в боевой вёрстке —
     • --concept4-pointer-x/y  — координаты курсора, их ставит боевой
       js/index.js (landing.css:1747-1782 использует их для общей ауры);
     • data-tilt-card          — боевой наклон карточки под курсор;
     • data-reveal             — боевое проявление при скролле;
     • --c5-card-topline / --c5-card-glow / --c5-card-hover-* / --c5-step-1..4
                               — боевые токены концепта 5;
     • c4Spin / c4Float / c4AuraPulse — боевые анимации орбит и свечений.
   Своего js не добавлено ни строки.
   ========================================================================== */

/* 8. Общая аура под курсором ---------------------------------------------- */
/* Боевой слой .irisConceptFourHome::before (landing.css:1774-1784) уже следит
   за курсором, но радиус 18% делает пятно почти незаметным. Здесь тот же
   слой с той же переменной, только по формуле боевой первой концепции
   (landing.css:808-809): два круга со смещением друг от друга. */
@media (hover: hover) and (pointer: fine) {
  .irisConceptFiveHome::before {
    background:
      radial-gradient(
        circle 520px at var(--concept4-pointer-x) var(--concept4-pointer-y),
        rgba(54, 216, 255, 0.1),
        transparent 70%
      ),
      radial-gradient(
        circle 720px at calc(var(--concept4-pointer-x) + 150px) calc(var(--concept4-pointer-y) + 90px),
        rgba(138, 53, 255, 0.075),
        transparent 74%
      ),
      radial-gradient(circle at 72% 18%, rgba(160, 91, 255, 0.12), transparent 24%);
  }
}

/* 9. Подсветка, идущая за курсором ПО КАРТОЧКЕ ----------------------------- */
/* Пустой span.c5Spot внутри карточки. Трюк без js: градиент прикреплён к
   окну (background-attachment: fixed), поэтому его центр стоит ровно под
   курсором в координатах окна, а overflow карточки обрезает свечение по её
   краю. Виден только у карточки под курсором.
   На тач-экранах не существует вовсе: курсора там нет, а fixed-фон — самый
   дорогой для перерисовки слой. */
.irisConceptFiveHome .c5Spot {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .irisConceptFiveHome .c5Spot {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 240ms ease;
    background:
      radial-gradient(
        circle 280px at var(--concept4-pointer-x) var(--concept4-pointer-y),
        rgba(72, 232, 213, 0.2),
        rgba(54, 216, 255, 0.07) 44%,
        transparent 72%
      )
      fixed;
  }

  .irisConceptFiveHome .c4Copy:hover > .c5Spot,
  .irisConceptFiveHome .c4StageFrame:hover > .c5Spot,
  .irisConceptFiveHome .c4SignalCard:hover > .c5Spot,
  .irisConceptFiveHome .catalogPanel:hover > .c5Spot,
  .irisConceptFiveHome .featureCard:hover > .c5Spot {
    opacity: 1;
  }
}

/* Содержимое карточек — над подсветкой. Части боевой вёрстки z-index уже
   проставлен (.featureCard h3/p, .c4Copy h1/.c4Lead/.c4Actions), здесь
   добиваются только те узлы, у которых его не было. */
.irisConceptFiveHome .c4Eyebrow,
.irisConceptFiveHome .c4StageTop,
.irisConceptFiveHome .c4StagePair,
.irisConceptFiveHome .c4SignalCard strong,
.irisConceptFiveHome .c4SignalCard span:not(.c5Spot),
.irisConceptFiveHome .catalogPanel .cardList,
.irisConceptFiveHome .c5SupportSplit {
  position: relative;
  z-index: 1;
}

/* 10. Кнопки: подсветка и блик -------------------------------------------- */
/* Цвет кнопки боевой (.c4Primary, градиент --c5-green → --c5-cyan). Добавлено
   только поведение: ореол того же цвета и один короткий блик на наведение. */
.irisConceptFiveHome .c4Primary,
.irisConceptFiveHome .c4Account {
  position: relative;
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 240ms ease,
    filter 240ms ease;
}

.irisConceptFiveHome .c4Primary::after,
.irisConceptFiveHome .c4Account::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -60%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-18deg) translateX(-180%);
}

.irisConceptFiveHome .c4Primary:hover,
.irisConceptFiveHome .c4Account:hover {
  box-shadow:
    0 22px 46px rgba(54, 216, 255, 0.32),
    0 0 0 1px rgba(59, 242, 160, 0.38),
    0 0 42px rgba(59, 242, 160, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  filter: saturate(1.06) brightness(1.04);
}

.irisConceptFiveHome .c4Primary:hover::after,
.irisConceptFiveHome .c4Account:hover::after {
  animation: c5Sheen 760ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

.irisConceptFiveHome .c4Primary:active,
.irisConceptFiveHome .c4Account:active {
  transform: translateY(0);
}

@keyframes c5Sheen {
  from {
    transform: skewX(-18deg) translateX(-180%);
  }

  to {
    transform: skewX(-18deg) translateX(460%);
  }
}

/* Клавиатура: боевого стиля фокуса на главной нет, ссылки-кнопки при табе
   ничем не отмечались. */
.irisConceptFiveHome a:focus-visible {
  outline: 2px solid var(--c5-cyan);
  outline-offset: 3px;
}

/* 11. Меню и подвал -------------------------------------------------------- */
/* Под пунктом меню вырастает градиентная линия — тот же приём, что боевая
   верхняя линия карточек (--c5-card-topline), только короче. */
.irisConceptFiveHome .c4Topnav a:not(.c4Primary) {
  position: relative;
  transition: color 180ms ease;
}

.irisConceptFiveHome .c4Topnav a:not(.c4Primary)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c5-green), var(--c5-cyan));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.irisConceptFiveHome .c4Topnav a:not(.c4Primary):hover::after {
  transform: scaleX(1);
}

.irisConceptFiveHome .c4FooterLinks a:hover {
  box-shadow: 0 0 22px rgba(72, 232, 213, 0.18);
}

/* Ссылки внутри карточек (документы): боевой мятный становится ярче. */
.irisConceptFiveHome .featureCard a:not(.c4Primary) {
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.irisConceptFiveHome .featureCard a:not(.c4Primary):hover {
  color: #eafff6;
  text-decoration-color: var(--c5-green);
}

/* 12. Карточки: линия сверху растёт, угловое свечение разгорается ---------- */
/* Оба элемента боевые (::before — линия --c5-card-topline шириной 72%,
   ::after — пятно --c5-card-glow с непрозрачностью 0.18). Добавлено только
   их поведение при наведении. */
.irisConceptFiveHome .featureCard::before,
.irisConceptFiveHome .catalogPanel::before,
.irisConceptFiveHome .c4SignalCard::before {
  transition: background-size 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.irisConceptFiveHome .featureCard:hover::before,
.irisConceptFiveHome .catalogPanel:hover::before,
.irisConceptFiveHome .c4SignalCard:hover::before {
  background-size: 100% 3px;
}

.irisConceptFiveHome .featureCard::after,
.irisConceptFiveHome .catalogPanel::after,
.irisConceptFiveHome .c4SignalCard::after {
  transition:
    opacity 320ms ease,
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.irisConceptFiveHome .featureCard:hover::after,
.irisConceptFiveHome .catalogPanel:hover::after,
.irisConceptFiveHome .c4SignalCard:hover::after {
  opacity: 0.4;
  transform: scale(1.2);
}

/* 13. Первый экран: фото и наклон под курсор ------------------------------- */
/* Пара «до/после» чуть приближается под курсором. Наклон самой карточки —
   боевой (data-tilt-card стоял в макете и раньше). */
.irisConceptFiveHome .c4StagePair img {
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .irisConceptFiveHome .c4StageFrame:hover .c4StagePair img {
    transform: scale(1.035);
  }
}

/* Логотип-ядро в «Поддержке» получил боевой наклон: те же --tilt-x/--tilt-y,
   которые боевой js ставит любой карточке с data-tilt-card. */
.irisConceptFiveHome #contacts .featureCard {
  perspective: 900px;
}

@media (hover: hover) and (pointer: fine) {
  .irisConceptFiveHome .c5SupportSplit .c4VisualCore {
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 260ms ease;
  }
}

/* 14. Типографика первого экрана ------------------------------------------ */
/* Текст не менялся. Меняется только его подача: ключевая часть заголовка
   покрашена боевым градиентом, первая фраза лида вынесена строкой и
   подсвечена, у абзаца появилась градиентная линия слева. */
.irisConceptFiveHome .c5HeadAccent {
  /* конечная точка вынесена за 100%: до чистого тёмного фиолетового
     градиент не доходит, и последнее слово остаётся контрастным */
  background: linear-gradient(100deg, var(--c5-green) 0%, var(--c5-cyan) 48%, var(--c5-violet) 132%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.irisConceptFiveHome .c4Lead {
  position: relative;
  max-width: 640px;
  padding-left: 18px;
  font-size: 1.2rem;
  line-height: 1.62;
}

.irisConceptFiveHome .c4Lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--c5-green), var(--c5-cyan) 55%, transparent);
}

.irisConceptFiveHome .c5LeadOpen {
  display: block;
  color: var(--c5-text);
  font-weight: 600;
}

.irisConceptFiveHome .c5LeadRest {
  display: block;
  margin-top: 8px;
}

.irisConceptFiveHome .c4Eyebrow {
  box-shadow: var(--c5-pill-shadow), 0 0 26px rgba(59, 242, 160, 0.14);
}

/* 15. Ритм страницы -------------------------------------------------------- */
/* Секции стояли через равные 72px. Разный воздух между ними — самый дешёвый
   способ убрать ощущение «одинаковых блоков подряд». */
.irisConceptFiveHome #start {
  margin-top: 88px;
}

.irisConceptFiveHome #contacts {
  margin-top: 96px;
}

/* Под заголовком секции — короткая градиентная линия. Тот же градиент, что
   у боевой верхней линии карточек. */
.irisConceptFiveHome .sectionBlock > .sectionIntro::after {
  content: "";
  display: block;
  width: 116px;
  height: 3px;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--c5-card-topline);
}

/* Плитки проявляются лесенкой, а не одним махом. Механизм боевой
   (data-reveal), добавлена только задержка. */
.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(2) {
  transition-delay: 60ms;
}

.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(3) {
  transition-delay: 120ms;
}

.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(4) {
  transition-delay: 180ms;
}

.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(5) {
  transition-delay: 240ms;
}

.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(6) {
  transition-delay: 300ms;
}

/* 16. «Что умеет софт»: шесть одинаковых плиток → мозаика ------------------ */
/* Порядок и подписи не тронуты. Меняется только размер и вес: две крупные
   плитки сверху, три средних, широкая полоса снизу. Сетка боевая
   (.c4SignalGrid), здесь у неё шесть колонок вместо трёх. */
.irisConceptFiveHome .c4SignalGrid--wide {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  grid-column: span 2;
  min-height: 132px;
}

.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(1),
.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(2) {
  grid-column: span 3;
  min-height: 158px;
  padding: 24px 24px 22px;
}

.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(1) strong,
.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(2) strong {
  font-size: 1.5rem;
}

/* У двух крупных плиток место занимает СВЕТ, а не выдуманный текст: пятно
   боевого --c5-card-glow крупнее, плюс мягкая заливка в цвет своей верхней
   линии (приём боевого фона .c4VisualCore — несколько радиальных пятен). */
.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(1)::after,
.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(2)::after {
  inset: auto -80px -90px auto;
  width: 300px;
  height: 300px;
  opacity: 0.34;
}

.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(1) {
  background:
    radial-gradient(circle at 80% 22%, rgba(255, 133, 61, 0.16), transparent 52%),
    radial-gradient(circle at 12% 88%, rgba(255, 209, 102, 0.08), transparent 46%),
    rgba(255, 255, 255, 0.035);
}

.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(2) {
  background:
    radial-gradient(circle at 80% 22%, rgba(54, 216, 255, 0.16), transparent 52%),
    radial-gradient(circle at 12% 88%, rgba(52, 120, 255, 0.1), transparent 46%),
    rgba(255, 255, 255, 0.035);
}

/* Последняя плитка — широкая полоса: подпись уходит вправо, строка одна. */
.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(6) {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  grid-column: span 6;
  min-height: 96px;
}

.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(6) strong {
  font-size: 1.3rem;
}

.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(6) span:not(.c5Spot) {
  margin-top: 0;
  text-align: right;
}

/* Своя верхняя линия у каждой плитки — из боевых градиентов шагов
   (--c5-step-1..4), развёрнутых по горизонтали. */
.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(1) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-orange), var(--c5-gold));
}

.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(2) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-cyan), var(--c5-blue));
}

.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(3) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-green), var(--c5-cyan));
}

.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(4) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-red), var(--c5-violet));
}

.irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(5) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-violet), var(--c5-cyan));
}

/* 17. Раздел установки и цены: асимметрия и разные акценты ----------------- */
/* Колонки были ровно пополам при разном объёме содержимого. */
.irisConceptFiveHome #start .pricingLayout {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 16px;
}

.irisConceptFiveHome #start .catalogPanel:nth-child(1) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-orange), var(--c5-gold), var(--c5-violet));
}

.irisConceptFiveHome #start .catalogPanel:nth-child(2) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-green), var(--c5-cyan));
}

/* Цена — единственная цифра на странице, ей и быть акцентом. Слова те же. */
.irisConceptFiveHome #start .catalogPanel:nth-child(2) h3 {
  font-size: 2.05rem;
  background: linear-gradient(110deg, var(--c5-green), var(--c5-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Шаги 01-04 были четырьмя одинаковыми оранжевыми пилюлями. Раскрашены
   боевыми градиентами шагов, как боевые .featureCard:nth-child(1..4). */
.irisConceptFiveHome #start .cardList .catalogCard {
  position: relative;
  overflow: hidden;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.irisConceptFiveHome #start .cardList .catalogCard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c5-step-bg, var(--c5-step-1));
  opacity: 0.85;
  transition: width 220ms ease, opacity 220ms ease;
}

.irisConceptFiveHome #start .cardList .catalogCard:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(72, 232, 213, 0.28);
  transform: translateX(3px);
}

.irisConceptFiveHome #start .cardList .catalogCard:hover::before {
  width: 5px;
  opacity: 1;
}

.irisConceptFiveHome #start .catalogPanel:nth-child(1) .catalogCard:nth-child(1) {
  --c5-step-bg: var(--c5-step-1);
}

.irisConceptFiveHome #start .catalogPanel:nth-child(1) .catalogCard:nth-child(2) {
  --c5-step-bg: var(--c5-step-2);
}

.irisConceptFiveHome #start .catalogPanel:nth-child(1) .catalogCard:nth-child(3) {
  --c5-step-bg: var(--c5-step-3);
}

.irisConceptFiveHome #start .catalogPanel:nth-child(1) .catalogCard:nth-child(4) {
  --c5-step-bg: var(--c5-step-4);
  --c5-step-text: #fff;
}

.irisConceptFiveHome #start .cardList .packPill {
  background: var(--c5-step-bg, var(--c5-step-1));
  color: var(--c5-step-text, #021012);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
}

.irisConceptFiveHome #start .catalogPanel:nth-child(2) .catalogCard {
  --c5-step-bg: var(--c5-step-3);
}

/* 18. Раздел «Поддержка»: разные акценты у двух карточек ------------------- */
.irisConceptFiveHome #contacts .featureCard:nth-child(1) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-green), var(--c5-cyan));
}

.irisConceptFiveHome #contacts .featureCard:nth-child(2) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-violet), var(--c5-blue));
}

/* 19. Средние экраны и телефон -------------------------------------------- */
/* Мозаика складывается раньше, чем боевая сетка: шесть колонок на узком
   экране превращаются в кашу. */
@media (max-width: 1180px) {
  .irisConceptFiveHome .c4SignalGrid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard,
  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(1),
  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(2) {
    grid-column: span 1;
    min-height: 132px;
  }

  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(6) {
    grid-column: span 2;
  }
}

@media (max-width: 920px) {
  /* боевое правило складывает .pricingLayout в одну колонку; наш файл
     подключён позже, поэтому асимметрию надо снять здесь же */
  .irisConceptFiveHome #start .pricingLayout {
    grid-template-columns: 1fr;
  }

  .irisConceptFiveHome .c4SignalGrid--wide {
    grid-template-columns: 1fr;
  }

  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard,
  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(6) {
    grid-column: span 1;
  }
}

/* Телефон: тяжёлого не остаётся вовсе. Подсветки под курсором там нет по
   определению (она в @media hover: fine), крупные плитки схлопнуты, широкая
   полоса снова становится обычной плиткой в столбик. */
@media (max-width: 640px) {
  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard,
  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(1),
  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(2) {
    min-height: 0;
    padding: 18px 18px 16px;
  }

  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(1) strong,
  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(2) strong {
    font-size: 1.14rem;
  }

  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(6) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 0;
  }

  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(6) strong {
    font-size: 1.08rem;
  }

  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(6) span:not(.c5Spot) {
    margin-top: 8px;
    text-align: left;
  }

  /* две крупные плитки на телефоне не «постеры», лишнее свечение убрано */
  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(1)::after,
  .irisConceptFiveHome .c4SignalGrid--wide .c4SignalCard:nth-child(2)::after {
    inset: auto -70px -70px auto;
    width: 180px;
    height: 180px;
    opacity: 0.18;
  }

  .irisConceptFiveHome .c4Lead {
    padding-left: 14px;
    font-size: 1rem;
  }

  .irisConceptFiveHome #start {
    margin-top: 54px;
  }

  .irisConceptFiveHome #contacts {
    margin-top: 60px;
  }

  .irisConceptFiveHome #start .catalogPanel:nth-child(2) h3 {
    font-size: 1.7rem;
  }

  .irisConceptFiveHome .sectionBlock > .sectionIntro::after {
    width: 88px;
    margin-top: 14px;
  }
}

/* 20. Уважение к prefers-reduced-motion ----------------------------------- */
/* Боевые блоки (landing.css:2602, concept-5.css:760) уже гасят анимации и
   переходы через !important. Два следствия надо разобрать руками:
   1) transform: none убил бы scaleX(0) у линии под пунктом меню — линия
      висела бы всегда; переключаем её на непрозрачность;
   2) подсветка под курсором — это движение, её выключаем совсем. */
@media (prefers-reduced-motion: reduce) {
  .irisConceptFiveHome .c5Spot {
    display: none !important;
  }

  .irisConceptFiveHome .c4Topnav a:not(.c4Primary)::after {
    opacity: 0;
  }

  .irisConceptFiveHome .c4Topnav a:not(.c4Primary):hover::after {
    opacity: 1;
  }

  .irisConceptFiveHome::before {
    background:
      radial-gradient(circle at 28% 22%, rgba(54, 216, 255, 0.1), transparent 30%),
      radial-gradient(circle at 72% 18%, rgba(160, 91, 255, 0.12), transparent 24%);
  }
}

/* 18. «Что умеет софт»: кадр с ползунком + плотные плитки ----------------- */
/* Правка владельца 07.10.2026: «много места пустого, а сути мало». Две
   крупные плитки держали 158 px высоты под одно слово, место занимала
   подсветка. Теперь слева кадр «до/после» с ползунком (идея владельца,
   ЛИСТ_РЕШЕНИЙ № 30), справа те же шесть подписей, но плотно.
   Высоту кадру задаёт СОСЕДНЯЯ колонка плиток: картинка раздел не
   растягивает. Слова не менялись ни одного. */
.irisConceptFiveHome .c5FeatureSplit {
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr);
  gap: 10px;
  align-items: stretch;
}

.irisConceptFiveHome .c5SignalGrid--dense {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

.irisConceptFiveHome .c5SignalGrid--dense .c4SignalCard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 86px;
  padding: 14px 16px 13px;
}

.irisConceptFiveHome .c5SignalGrid--dense .c4SignalCard strong {
  font-size: 1.05rem;
}

.irisConceptFiveHome .c5SignalGrid--dense .c4SignalCard span:not(.c5Spot) {
  margin-top: 0;
  font-size: 0.86rem;
}

/* Плиток семь (07.10.2026 добавлена «Фотополоска на 3 фото»): шесть ложатся
   в два столбца ровно, седьмая — во всю ширину, её подпись уходит вправо.
   Раньше во всю ширину шли две последние: при шести плитках иначе оставалась
   дыра рядом с «Галереей». */
.irisConceptFiveHome .c5SignalGrid--dense .c4SignalCard:nth-child(7) {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.irisConceptFiveHome .c5SignalGrid--dense .c4SignalCard:nth-child(7) span:not(.c5Spot) {
  text-align: right;
}

/* Свои верхние линии — те же шесть градиентов, что были у мозаики. */
.irisConceptFiveHome .c5SignalGrid--dense .c4SignalCard:nth-child(1) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-orange), var(--c5-gold));
}
.irisConceptFiveHome .c5SignalGrid--dense .c4SignalCard:nth-child(2) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-cyan), var(--c5-blue));
}
.irisConceptFiveHome .c5SignalGrid--dense .c4SignalCard:nth-child(3) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-green), var(--c5-cyan));
}
.irisConceptFiveHome .c5SignalGrid--dense .c4SignalCard:nth-child(4) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-red), var(--c5-violet));
}
.irisConceptFiveHome .c5SignalGrid--dense .c4SignalCard:nth-child(5) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-blue), var(--c5-violet));
}
.irisConceptFiveHome .c5SignalGrid--dense .c4SignalCard:nth-child(6) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-violet), var(--c5-cyan));
}
.irisConceptFiveHome .c5SignalGrid--dense .c4SignalCard:nth-child(7) {
  --c5-card-topline: linear-gradient(90deg, var(--c5-gold), var(--c5-green));
}

/* Сам кадр с перегородкой. Рамка и радиус — боевые карточные. */
.irisConceptFiveHome .c5Compare {
  position: relative;
  overflow: hidden;
  border-radius: var(--c5-card-radius);
  border: 1px solid var(--c5-card-border);
  background: var(--c5-card-bg);
  box-shadow: var(--c5-shadow);
  min-height: 260px;
}

.irisConceptFiveHome .c5CompareStage {
  position: absolute;
  inset: 0;
  user-select: none;
}

.irisConceptFiveHome .c5CompareStage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* Весь трюк: верхний кадр обрезается по позиции ползунка. */
.irisConceptFiveHome .c5CompareAfter {
  clip-path: inset(0 0 0 var(--c5-split, 50%));
}

.irisConceptFiveHome .c5CompareHandle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--c5-split, 50%);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.irisConceptFiveHome .c5CompareHandle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(10, 18, 30, 0.45);
  backdrop-filter: blur(6px);
}

/* Ползунок прозрачный и во весь кадр: тянуть можно откуда угодно, в том
   числе пальцем. Клавиатуре он тоже доступен — это обычный input. */
.irisConceptFiveHome .c5CompareStage input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.irisConceptFiveHome .c5ComparePill {
  position: absolute;
  top: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #eaf4ff;
  background: rgba(8, 15, 26, 0.6);
  border: 1px solid rgba(173, 214, 255, 0.22);
  backdrop-filter: blur(6px);
}

.irisConceptFiveHome .c5ComparePill--l { left: 12px; }
.irisConceptFiveHome .c5ComparePill--r { right: 12px; }

/* 19. Первый экран: кнопка «Загрузить фото» ------------------------------- */
/* Просьба владельца 07.10.2026. Кнопка боевая (.c4Primary), меню выбора
   источника рисует сама операционка — см. комментарий в index.html. */
.irisConceptFiveHome .c5StageUpload {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.irisConceptFiveHome .c5UploadBtn {
  width: 100%;
  text-align: center;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.irisConceptFiveHome .c5UploadNote {
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(226, 240, 255, 0.55);
}

@media (max-width: 760px) {
  .irisConceptFiveHome .c5FeatureSplit,
  .irisConceptFiveHome .c5SignalGrid--dense {
    grid-template-columns: 1fr;
  }

  .irisConceptFiveHome .c5Compare {
    aspect-ratio: 4 / 5;
  }

  .irisConceptFiveHome .c5SignalGrid--dense .c4SignalCard:nth-child(7) {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-start;
  }

  .irisConceptFiveHome .c5SignalGrid--dense .c4SignalCard:nth-child(7) span:not(.c5Spot) {
    text-align: left;
  }
}

/* ============ РЕЖИМЫ: ПЛИТКА-КНОПКА С ОПИСАНИЕМ ============
   Владелец 09.10.2026: «сделать нажимаемые кнопки с описанием внутри что за
   режимы + пример внутри». Плитка теперь button, под сеткой раскрывается одна
   панель: пара «до/после» и два абзаца — что это и зачем. */

.irisConceptFiveHome .c5ModeCard {
  position: relative;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 1px solid var(--c5-card-border);
  background: var(--c5-card-bg);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.irisConceptFiveHome .c5ModeCard:hover {
  transform: translateY(-2px);
  border-color: rgba(173, 214, 255, 0.4);
}

/* Выбранная плитка подсвечена заметно: человек должен видеть, что именно
   раскрыто, не сверяясь с текстом ниже. */
.irisConceptFiveHome .c5ModeCard[aria-expanded="true"] {
  border-color: rgba(127, 231, 196, 0.75);
  box-shadow: 0 0 0 2px rgba(127, 231, 196, 0.25), 0 14px 30px rgba(6, 12, 22, 0.35);
}

.irisConceptFiveHome .c5ModeHint {
  margin-top: 2px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(226, 240, 255, 0.5);
}

.irisConceptFiveHome .c5ModeCard[aria-expanded="true"] .c5ModeHint {
  color: rgba(127, 231, 196, 0.9);
}

.irisConceptFiveHome .c5ModePanels {
  margin-top: 14px;
}

.irisConceptFiveHome .c5ModePanel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  border-radius: var(--c5-card-radius);
  border: 1px solid var(--c5-card-border);
  background: var(--c5-card-bg);
  box-shadow: var(--c5-shadow);
}

/* ⚠ Без !important атрибут hidden проигрывает display:grid выше: браузерное
   правило [hidden] имеет нулевую специфичность. На этом в кабинете уже
   обжигались — панель осталась бы на экране всегда. */
.irisConceptFiveHome .c5ModePanel[hidden] {
  display: none !important;
}

.irisConceptFiveHome .c5ModeExample {
  display: flex;
  align-items: center;
  gap: 10px;
}

.irisConceptFiveHome .c5ModeExample img {
  width: 0;
  flex: 1 1 0;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.irisConceptFiveHome .c5ModeArrow {
  flex: 0 0 auto;
  font-size: 1.2rem;
  color: rgba(226, 240, 255, 0.55);
}

.irisConceptFiveHome .c5ModeText h3 {
  margin: 0 0 8px;
  font: 700 1.15rem/1.3 "Manrope", system-ui, sans-serif;
  color: #eef6ff;
}

.irisConceptFiveHome .c5ModeText p {
  margin: 0 0 8px;
  font: 400 0.95rem/1.55 "Manrope", system-ui, sans-serif;
  color: rgba(226, 240, 255, 0.76);
}

.irisConceptFiveHome .c5ModeWhy {
  color: rgba(226, 240, 255, 0.55) !important;
  font-size: 0.9rem !important;
}

@media (max-width: 760px) {
  .irisConceptFiveHome .c5ModePanel {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ============ СТОИМОСТЬ ПО РАЗДЕЛАМ ============
   Владелец 09.10.2026: «переписать по разделам — ИИ фото, ИИ видео,
   дополнительные режимы», и к каждой модели пояснение, для чего она. */

.irisConceptFiveHome .c5PriceGroups {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.irisConceptFiveHome .c5PriceGroup {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--c5-card-border);
  background: rgba(255, 255, 255, 0.028);
}

.irisConceptFiveHome .c5PriceGroup h4 {
  margin: 0 0 6px;
  font: 700 1.02rem/1.3 "Manrope", system-ui, sans-serif;
  color: #eef6ff;
}

.irisConceptFiveHome .c5PriceLead {
  margin: 0 0 8px;
  font: 400 0.9rem/1.5 "Manrope", system-ui, sans-serif;
  color: rgba(226, 240, 255, 0.62);
}

.irisConceptFiveHome .c5PriceGroup ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.irisConceptFiveHome .c5PriceGroup li {
  font: 400 0.92rem/1.5 "Manrope", system-ui, sans-serif;
  color: rgba(226, 240, 255, 0.78);
}

.irisConceptFiveHome .c5PriceGroup li strong {
  color: #eef6ff;
}

/* ⚠ Цены намеренно не на странице: они живут в кабинете и меняются. Застывшая
   цифра на сайте начнёт врать молча. */
.irisConceptFiveHome .c5PriceNote {
  margin: 12px 0 0;
  font: 400 0.86rem/1.5 "Manrope", system-ui, sans-serif;
  color: rgba(226, 240, 255, 0.5);
}

/* Подсказка под шагом инструкции: объясняет, зачем шаг, не раздувая заголовок.
   Владелец 09.10.2026: «как поставить и запустить — проработать инструкцию». */
.irisConceptFiveHome .c5StepHint {
  margin: 6px 0 0;
  font: 400 0.88rem/1.5 "Manrope", system-ui, sans-serif;
  color: rgba(226, 240, 255, 0.58);
  flex-basis: 100%;
  order: 3;
}

/* 20. Первый экран: пример обработки на фото посетителя (п. 350, 04.11.2026) */
/* Пара «ваше фото / образ» встаёт на место картинки-примера: две ячейки 2:3
   рядом дают ровно 4:3 — тот же размер карточки, ничего не прыгает. */
.irisConceptFiveHome .c4StagePair { position: relative; }
.irisConceptFiveHome .c4StagePair img[hidden],
.irisConceptFiveHome .c5TryPair[hidden],
.irisConceptFiveHome .c5TryForm[hidden],
.irisConceptFiveHome .c5TryWait[hidden] { display: none; }

.irisConceptFiveHome .c5TryPair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
  height: 100%;
  background: #05090f;
}

.irisConceptFiveHome .c5TryPair--single { grid-template-columns: 1fr; }
.irisConceptFiveHome .c5TryPair--single .c5TryCell:first-child { display: none; }
.irisConceptFiveHome .c5TryPair--single .c5TryCell img { object-fit: contain; }

.irisConceptFiveHome .c5TryCell {
  position: relative;
  overflow: hidden;
  background: rgba(8, 14, 24, 0.85);
}

.irisConceptFiveHome .c5TryCell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: none;
}

.irisConceptFiveHome .c5TryWait {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* сверху место под плашку «Образ …», чтобы текст не залезал под неё */
  padding: 64px 14px 16px;
  text-align: center;
  color: var(--c5-text);
  font-size: 0.86rem;
  line-height: 1.45;
}

.irisConceptFiveHome .c5TrySpinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(173, 214, 255, 0.18);
  border-top-color: var(--c5-cyan);
  animation: c5TrySpin 0.9s linear infinite;
}

@keyframes c5TrySpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .irisConceptFiveHome .c5TrySpinner { animation-duration: 3s; }
}

@media (max-width: 640px) {
  .irisConceptFiveHome .c5TryWait { font-size: 0.78rem; gap: 8px; padding-top: 72px; }
}

.irisConceptFiveHome .c5TryWaitTimer {
  font-variant-numeric: tabular-nums;
  color: rgba(226, 240, 255, 0.55);
}

.irisConceptFiveHome .c5TryForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.irisConceptFiveHome .c5TryRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.irisConceptFiveHome .c5TryRow[hidden] { display: none; }

.irisConceptFiveHome .c5TryChip {
  flex: 1 1 0;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(173, 214, 255, 0.24);
  background: rgba(8, 15, 26, 0.55);
  color: var(--c5-text);
  font: 600 0.9rem/1 "Manrope", system-ui, sans-serif;
  cursor: pointer;
}

.irisConceptFiveHome .c5TryChip[aria-checked="true"] {
  border-color: transparent;
  color: #021012;
  background: linear-gradient(135deg, var(--c5-green), var(--c5-cyan));
}

.irisConceptFiveHome .c5TryChip:focus-visible {
  outline: 2px solid var(--c5-cyan);
  outline-offset: 2px;
}

.irisConceptFiveHome .c5TryConsent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(226, 240, 255, 0.78);
  cursor: pointer;
  border-radius: 12px;
  padding: 6px;
}

.irisConceptFiveHome .c5TryConsent input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--c5-green);
}

.irisConceptFiveHome .c5TryConsent a { color: var(--c5-cyan); }

.irisConceptFiveHome .c5TryConsent--need {
  outline: 1px solid rgba(255, 180, 90, 0.8);
  background: rgba(255, 180, 90, 0.08);
}

.irisConceptFiveHome .c5UploadNote--warn { color: #ffd28a; }
.irisConceptFiveHome .c5UploadNote--ok { color: var(--c5-green); }
.irisConceptFiveHome .c5UploadNote[hidden],
.irisConceptFiveHome .c5UploadBtn[hidden],
.irisConceptFiveHome .c5TryRegister[hidden] { display: none; }

.irisConceptFiveHome .c5TryRegister {
  display: block;
  padding: 12px 16px;
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
  font-size: 0.92rem;
  color: #021012;
  background: linear-gradient(135deg, var(--c5-green), var(--c5-cyan));
  text-decoration: none;
}