/* ==========================================================================
   СИБУР Цифровой — дизайн-токены
   Источники: макет «Лендинг СЦ» (Figma, 1520×8199) + «СИБУР Цифровой. Гайд по стилю»
   Менять значения только здесь.
   ========================================================================== */

:root {
  /* --- Основные цвета (гайд, раздел 3) --- */
  --c-spruce: #01313b;          /* тёмно-еловый, основной фон */
  --c-spruce-deep: #00323c;     /* подложка секций и карточек в макете */
  --c-lime: #f4ffee;            /* пастельно-лаймовый, основной текст на тёмном */

  /* --- Дополнительные цвета --- */
  --c-teal: #008c96;            /* тёмно-бирюзовый */
  --c-mint: #77e2c4;            /* светло-бирюзовый, акцент */
  --c-line: #3393a1;            /* обводка линейной графики */

  /* --- Служебные --- */
  --c-white: #ffffff;
  --c-neutral-8: #4e5969;       /* текст выпадающего списка */
  --c-neutral-2: #f2f3f5;       /* граница выпадающего списка */

  /* --- Прозрачности текста --- */
  --t-lime-75: rgba(244, 255, 238, 0.75);
  --t-lime-60: rgba(244, 255, 238, 0.6);
  --t-lime-40: rgba(244, 255, 238, 0.4);
  --t-white-80: rgba(255, 255, 255, 0.8);
  --t-white-60: rgba(255, 255, 255, 0.6);
  --t-white-30: rgba(255, 255, 255, 0.3);
  --t-spruce-40: rgba(1, 49, 59, 0.4);
  --t-spruce-30: rgba(0, 50, 60, 0.3);

  /* --- Шрифты --- */
  --f-display: 'ONY Track', 'Arial Black', sans-serif;   /* заголовки */
  --f-text: 'Roboto', 'Helvetica Neue', Arial, sans-serif; /* текст */
  --f-numeric: 'Bebas Neue', 'ONY Track', sans-serif;     /* крупные числа */
  --f-currency: 'Orbitron', 'Roboto', sans-serif;       /* знак ₽: в ONY Track его нет */

  /* --- Сетка --- */
  --canvas: 95rem;             /* ширина макета */
  --container: 90rem;          /* контентная область */
  --gutter: 2.5rem;               /* поле слева и справа */
  --col-gap: 1.25rem;              /* зазор в сетке карточек 3×467 */

  /* --- Радиусы (макет) --- */
  --r-card: 1.125rem;
  --r-panel: 0.75rem;
  --r-photo: 0.5rem;
  --r-btn: 0.25rem;
  --r-outline: 1.25rem;            /* линейная графика */
  --r-social: 0.3125rem;

  /* --- Тайминги анимаций --- */
  --dur-fast: 0.25s;
  --dur-base: 0.45s;
  --dur-slow: 0.9s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Слои --- */
  --z-bg: 0;
  --z-content: 1;
  --z-header: 50;
}

/* ==========================================================================
   Фирменный градиент «каскад» — точная копия заливки Diamond из макета.
   Гайд 6.1: светло-бирюзовый → тёмно-бирюзовый → тёмно-еловый, inner shadow.
   ========================================================================== */
.gradient-cascade {
  position: relative;
  background-color: var(--c-spruce);
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 832 546' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><g transform='matrix(104 0 0 682.5 1081.6 273)' opacity='1'><rect height='7.6' width='69.6' fill='url(%23grad)' id='quad' shape-rendering='crispEdges'/><use href='%23quad' transform='scale(1 -1)'/><use href='%23quad' transform='scale(-1 1)'/><use href='%23quad' transform='scale(-1 -1)'/></g><defs><linearGradient id='grad' gradientUnits='userSpaceOnUse' x2='5' y2='5'><stop stop-color='rgba(119,226,196,1)' offset='0'/><stop stop-color='rgba(89,205,185,1)' offset='0.125'/><stop stop-color='rgba(60,183,173,1)' offset='0.25'/><stop stop-color='rgba(30,162,162,1)' offset='0.375'/><stop stop-color='rgba(15,151,156,1)' offset='0.4375'/><stop stop-color='rgba(0,140,150,1)' offset='0.5'/><stop stop-color='rgba(1,95,105,1)' offset='0.75'/><stop stop-color='rgba(1,72,82,1)' offset='0.875'/><stop stop-color='rgba(1,49,59,1)' offset='1'/></linearGradient></defs></svg>");
  background-size: 100% 100%;
}

.gradient-cascade::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0.5rem 2rem 0 var(--c-mint);
  pointer-events: none;
}