/* Общая обвязка страниц сайта: главная (index.html), /plans (plans/index.html)
   и /showcases (showcases/index.html).
   Всё, что не покрывают токены ДС: сброс, поведение шапки/навигации, доступность,
   появление блоков при скролле, таблицы цен, стена цитат. */

html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);min-height:100dvh;-webkit-tap-highlight-color:rgba(39,66,216,.15);touch-action:manipulation}

/* Секции — цели ссылок из шапки: не заезжают под липкий хедер */
section[id]{scroll-margin-top:80px}

/* ===== Навигация ===== */
/* Основная навигация схлопывается на узких экранах — её заменяет бургер */
@media (max-width: 1000px){ .x-sitenav{display:none !important} }

/* Бургер — зеркало правила выше: виден ровно там, где скрыта основная навигация */
.x-burger{ display:none }
@media (max-width: 1000px){ .x-burger{ display:inline-flex } }

/* Мобильная панель разделов. Раскрывается по grid-template-rows: 0fr → 1fr,
   поэтому анимируется реальная высота содержимого без её измерения в JS. */
.x-mobilenav{ display:none }
@media (max-width: 1000px){
  .x-mobilenav{
    display:grid; grid-template-rows:0fr;
    transition: grid-template-rows var(--dur-base) var(--ease-standard);
  }
  .x-mobilenav[data-open="true"]{ grid-template-rows:1fr }
  .x-mobilenav > div{ overflow:hidden; min-height:0 }
}

.x-navlink:hover{ color: var(--text-primary) }
/* Текстовые ссылки и кнопки-ссылки: минимальная тач-цель 24px */
.x-navlink,.x-linkbtn{ min-height:24px; display:inline-flex; align-items:center }

/* Видимый фокус для всего интерактива. blue-500 читается и на paper (5.1:1),
   и на ink-панелях (4.1:1) — одно правило вместо двух. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--blue-500); outline-offset:2px; border-radius:8px;
}

/* Ссылка «к содержимому» — видна только при фокусе с клавиатуры */
.x-skip{ position:absolute; left:-9999px; top:0; z-index:100 }
.x-skip:focus{ left:12px; top:12px; padding:10px 16px; background:var(--blue-600); color:#fff;
               border-radius:8px; font-family:var(--font-sans); font-size:14px; text-decoration:none }

/* ===== Сетки ===== */
/* Two-up grids (cases, team) collapse to one column on narrow screens */
.x-grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px){ .x-grid-2{ grid-template-columns: minmax(0, 1fr); } }

/* Three-up grid (роли) — 3 в ряд, 2 на планшете, 1 на телефоне */
.x-grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px){ .x-grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .x-grid-3{ grid-template-columns: minmax(0, 1fr); } }

/* ===== Появление блоков при скролле ===== */
/* Класс js-reveal ставит React (useReveal) в useLayoutEffect и только если
   анимации уместны. Без JS и при prefers-reduced-motion контент виден сразу —
   поэтому скрывающее правило живёт под .js-reveal, а не само по себе. */
.js-reveal .x-reveal{ opacity:0; transform:translateY(14px) }
.js-reveal .x-reveal.is-in{
  opacity:1; transform:none;
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
/* Полосы 70/20/10: растут от левого края */
.js-reveal .x-growx{ transform:scaleX(0); transform-origin:left center }
.js-reveal .x-growx.is-in{
  transform:scaleX(1);
  transition: transform 760ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Медленный дрейф градиентного пятна в hero */
@keyframes x-drift{
  0%,100%{ transform: translate3d(0,0,0) scale(1.06) }
  50%    { transform: translate3d(-2.5%,1.5%,0) scale(1.14) }
}
.x-wash{ animation: x-drift 38s var(--ease-standard) infinite; will-change: transform }

/* Аккордеон FAQ — та же схема 0fr → 1fr */
.x-collapse{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition: grid-template-rows var(--dur-slow) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard);
}
.x-collapse[data-open="true"]{ grid-template-rows:1fr; opacity:1 }
.x-collapse > div{ overflow:hidden; min-height:0 }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
                        transition-duration:.01ms !important }
}

/* ===== Числа ===== */
/* Моноширинные цифры там, где числа сравнивают глазами: цены и проценты */
.x-num,table.x-price td:not(:first-child){ font-variant-numeric: tabular-nums }

/* ===== Таблицы цен (/plans) ===== */
.x-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-lg) }
table.x-price{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--white); border:1px solid var(--sand-200);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);
}
table.x-price th{
  background:var(--ink-900); color:var(--paper); text-align:left;
  font-family:var(--font-sans); font-size:14px; font-weight:600; line-height:1.35; padding:17px 22px;
}
table.x-price th .sub{
  display:block; margin-top:3px;
  font-family:var(--font-mono); font-size:11.5px; font-weight:400; letter-spacing:.06em; color:#a8a59c;
}
table.x-price td{ padding:18px 22px; font-size:14.5px; color:var(--stone-700); border-top:1px solid var(--sand-200) }
table.x-price td:not(:first-child){ white-space:nowrap; font-family:var(--font-mono); font-size:14px; color:var(--ink-900) }
table.x-price tbody tr:first-child td{ border-top:none }
table.x-price tr.total td{ background:var(--blue-050); font-weight:600; color:var(--ink-900); border-top:1px solid var(--blue-100) }
table.x-price tr.total td:not(:first-child){ color:var(--blue-700); font-weight:500 }
@media (max-width: 760px){
  table.x-price{ min-width:560px }
  table.x-price th,table.x-price td{ padding:12px 14px; font-size:13px }
}

/* ===== Стена цитат (/showcases) ===== */
/* Многоколоночная раскладка: цитаты разной длины ложатся без дыр,
   break-inside у blockquote не даёт разрезать реплику между колонками. */
.x-quotewall{ columns:2; column-gap:clamp(24px, 4vw, 44px) }
@media (max-width: 760px){ .x-quotewall{ columns:1 } }