@charset "utf-8";
/* =========================================================
 * INCO · Redesign pilot — только главная (body.inco-rd).
 * Слой поверх main.css. Ничего не переопределяет глобально:
 * остальные 65 страниц продолжают жить на прежнем визуале,
 * поэтому пилот можно сравнивать с ними по метрикам.
 *
 * Источник: Figma «INCO — Redesign Concept 2026».
 * Кегли взяты из таблицы адаптива на борде Foundations.
 * ========================================================= */

/* --- 1. Ритм секций ------------------------------------- */
/* Было padding:96px 0 без единого мобильного оверрайда —
   около 1500px пустоты на страницу при ширине 390. */
.inco-rd .inco-modern .inco-section{padding:clamp(48px,8vw,96px) 0;}

/* --- 2. Герой ------------------------------------------- */
.inco-rd .inco-modern .inco-hero{background:#07090D;border-bottom:0;}
/* Точечная сетка и оранжевое свечение уступают место плоскому
   чёрному: в концепте работает типографика, а не фон. */
.inco-rd .inco-modern .inco-hero::before,
.inco-rd .inco-modern .inco-hero::after{display:none;}

.inco-rd .inco-modern .inco-hero .inco-wrap{
  padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(56px,7vw,88px);}

.inco-rd .inco-modern .inco-hero .inco-eyebrow{
  font-family:var(--font-mono);font-size:.75rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--inco-orange-500);}

.inco-rd .inco-modern .inco-hero h1{
  font-size:clamp(34px,5vw,72px);line-height:.96;letter-spacing:-.02em;
  text-transform:uppercase;font-weight:600;max-width:20ch;
  margin-top:var(--sp-6);}
.inco-rd .inco-modern .inco-hero h1 .inco-rd-accent{color:var(--inco-orange-500);}

.inco-rd .inco-modern .inco-hero__lead{
  color:var(--ink-300);font-size:1.125rem;max-width:56ch;}

/* --- 3. Уровни as-a-Service: из пилюль в правый рельс ---- */
/* main.css рисует их скруглёнными «таблетками» в строку (r-pill,
   border, uppercase). В концепте это вертикальный список с
   волосяными линейками — гасим оформление таблетки целиком. */
.inco-rd .inco-modern .inco-pills{
  display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;
  margin:var(--sp-8) 0 var(--sp-8);padding:0;list-style:none;}
.inco-rd .inco-modern .inco-pills li{
  border:0;border-top:1px solid #1B212B;border-radius:0;background:none;
  padding:var(--sp-4) 0;margin:0;
  font-family:var(--font-display);font-weight:500;font-size:1.05rem;
  letter-spacing:.01em;text-transform:none;color:var(--ink-300);}
.inco-rd .inco-modern .inco-pills b{
  color:#fff;font-weight:600;font-size:1.15rem;letter-spacing:-.01em;}

@media (min-width:960px){
  .inco-rd .inco-modern .inco-hero .inco-wrap{
    display:grid;grid-template-columns:minmax(0,1fr) 380px;
    column-gap:var(--sp-16);align-items:start;}
  .inco-rd .inco-modern .inco-hero .inco-eyebrow,
  .inco-rd .inco-modern .inco-hero h1,
  .inco-rd .inco-modern .inco-hero__lead{grid-column:1;}
  /* Рельс прижат к низу левой колонки — так первый экран
     остаётся плотным, а CTA не уезжает под сгиб. */
  .inco-rd .inco-modern .inco-hero .inco-pills{
    grid-column:2;grid-row:1 / span 4;align-self:end;margin-top:0;}
  .inco-rd .inco-modern .inco-hero .inco-wrap > p:last-of-type{grid-column:1;}
}

/* --- 4. Нумерация секций -------------------------------- */
/* Номер — генерируемое содержимое в span ВНЕ заголовка:
   если бы он попал внутрь h2, все заголовки главной
   начинались бы с цифры, включая выдачу. */
.inco-rd .inco-modern{counter-reset:inco-sec;}
.inco-rd .inco-modern .inco-head__label::before{
  counter-increment:inco-sec;
  content:counter(inco-sec,decimal-leading-zero) " — ";
  color:var(--ink-300);}
.inco-rd .inco-modern .inco-head__label{
  font-family:var(--font-mono);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;}

/* --- 5. Заголовки секций -------------------------------- */
.inco-rd .inco-modern .inco-sec-title{
  font-size:clamp(30px,3.33vw,48px);line-height:1.08;letter-spacing:-.015em;}
.inco-rd .inco-modern .inco-sec-intro{max-width:62ch;}

/* --- 6. Карточки: волосяная линия вместо тени ----------- */
.inco-rd .inco-modern .inco-card{
  border-radius:2px;box-shadow:none;border:1px solid var(--ink-100);}
.inco-rd .inco-modern .inco-card:hover{
  box-shadow:none;border-color:var(--inco-orange-500);transform:none;}
.inco-rd .inco-modern .inco-btn{border-radius:2px;}

/* --- 7. Полоса цифр ------------------------------------- */
.inco-rd .inco-modern .inco-stats{background:var(--ink-900);}
.inco-rd .inco-modern .inco-stats .inco-stat__num{color:var(--inco-orange-500);}

/* --- 8. Футер: тёмный вместо оранжевого ----------------- */
/* Оранжевый футер спорил с оранжевым CTA-баннером прямо над ним:
   два акцента подряд гасили друг друга.

   ВАЖНО про специфичность. В main.css ссылки подвала заданы как
   .inco-modern .inco-footer a:not(.inco-btn):not(.inco-badge) —
   это (0,4,1), потому что каждый :not() считается за класс.
   Селектор .inco-rd .inco-modern .inco-footer a даёт всего (0,3,1)
   и проигрывает: ссылки оставались ink-900 на почти чёрном,
   контраст 1.09:1. Поэтому здесь повторяется та же форма записи. */
.inco-rd .inco-modern .inco-footer{background:#07090D;color:var(--ink-300);}
.inco-rd .inco-modern .inco-footer,
.inco-rd .inco-modern .inco-footer p,
.inco-rd .inco-modern .inco-footer nav,
.inco-rd .inco-modern .inco-footer nav a,
.inco-rd .inco-modern .inco-footer__contacts,
.inco-rd .inco-modern .inco-footer__contacts a{color:var(--ink-300);}
.inco-rd .inco-modern .inco-footer a:not(.inco-btn):not(.inco-badge),
.inco-rd .inco-modern .inco-footer a:not(.inco-btn):not(.inco-badge):visited{
  color:var(--ink-300);}
.inco-rd .inco-modern .inco-footer a:not(.inco-btn):not(.inco-badge):hover{
  color:var(--inco-orange-300);text-decoration:underline;}
.inco-rd .inco-modern .inco-footer__brand{color:#fff;}
/* #5A6678 на #07090D даёт 3.42:1 — ниже нормы 4.5 для мелкого текста.
   #8A97A8 даёт 6.7:1. */
.inco-rd .inco-modern .inco-footer__tagline{color:#8A97A8;}
.inco-rd .inco-modern .inco-footer__col-head{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8A97A8;}
.inco-rd .inco-modern .inco-footer__legal{
  border-top:1px solid #1B212B;color:#8A97A8;}

/* Кольцо фокуса на тёмном футере: тёмная линия там не видна,
   поэтому ореол становится основным индикатором. */
.inco-rd .inco-modern .inco-footer :focus-visible{
  outline-color:var(--focus-halo);
  box-shadow:0 0 0 6px var(--focus);}

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