/* Дизайн-токени. Джерело — Figma, файл jnQi5OiCBnfR3kcJUuIjUt.
   Міняти значення тільки тут. Ніде більше не писати кольори й розміри числами. */

:root {
  /* --- Колір --- */
  --c-accent: #3381ff;
  --c-accent-hover: #1f6deb;                       /* синя кнопка на наведенні */
  --c-accent-soft: rgba(51, 129, 255, 0.06);       /* фон другорядної кнопки */
  --c-accent-soft-hover: rgba(51, 129, 255, 0.12); /* та сама кнопка на наведенні */
  --c-text: #878b91;
  --c-text-muted: rgba(135, 139, 145, 0.6);
  --c-on-accent: #ffffff;

  --c-bg: #ffffff;
  --c-surface: #f7f7f7;   /* світла плашка */
  --c-surface-2: #e8eaed; /* фон навігаційних пігулок */
  --c-card-hover: #ededed; /* картки сервісів на наведенні: #e8eaed на великій плашці затемний */
  --c-placeholder: #d9d9d9;
  --c-carousel: #f2f2f4;  /* фон рамки каруселі */
  --c-dot: #ffffff;                    /* активна крапка горталки */
  --c-dot-idle: rgb(255 255 255 / 60%); /* ще не показаний кадр */
  --c-seg-track: rgb(255 255 255 / 35%); /* сегменти на ролику сервісів: ще не пройдене */

  /* Кола під головами. Значення взяті з самих відеофайлів (191 і 233),
     щоб на краях при зменшенні не підмішувався чужий тон. */
  --c-head-mykyta: #bfbfbf;
  --c-head-olena: #e9e9e9;

  /* --- Темний кейс ---
     Колір фону дав Микита. Решта тонів дзеркалить світлу тему: текст такої ж
     помітності на своєму тлі, плашки трохи світліші за фон. Кола під головами
     не чіпаємо — їхні значення взяті з самих відеофайлів. */
}

/* Сірий кейс: фон — той самий світло-сірий, що в смузі за блоками в Carnexy.
   Для кейсів, де багато білих кадрів: на білому фоні вони зливаються й
   втрачають межі. */
:root { --c-band: #eeeeee; }
body.case--grey {
  --c-bg: var(--c-band);
  --c-surface-2: #e0e2e5; /* пігулки меню: на сірому фоні стандартні #e8eaed зникали */
  --c-carousel: #e2e2e2;  /* рамка каруселі на пару тонів темніша за фон, інакше зливалась */
}

body.case--dark {
  --c-bg: #0a0a0a;
  --c-text: #adacac;                       /* заголовки — колір зі старого сайту */
  --c-text-muted: rgba(173, 172, 172, 0.6); /* бодітекст — той самий колір на 60% */
  --c-surface: #262627; /* картки імпакту — колір із макета */
  --c-surface-2: #1f1f1f;
  --c-placeholder: #1f1f1f;
}

:root {
  /* --- Типографіка --- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking: -0.02em; /* −2% наскрізно */

  --fs-body: 1rem;      /* 16px — однаково на десктопі й мобільному */
  --fs-title: 1.875rem; /* 30px — великі заголовки, однаково скрізь */
  --fs-lead: 1.25rem;   /* 20px — текст героя й підписи кейсів на головній */

  --lh-tight: 1.2;  /* заголовки, кнопки */
  --lh-body: 1.3;   /* абзаци */
  --lh-loose: 2.2;  /* списки з широким кроком */

  /* --- Сітка --- */
  --page-max: 1512px;
  --gutter: 24px;
  --margin: 120px;
  --cols: 12;

  /* --- Вертикальний ритм --- */
  /* курсор над половиною горталки: біле коло зі стрілкою */
  --cursor-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='19' fill='%23ffffff' fill-opacity='.9'/%3E%3Cpath d='M23 13l-7 7 7 7' fill='none' stroke='%23878b91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 20 20, w-resize;
  --cursor-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='19' fill='%23ffffff' fill-opacity='.9'/%3E%3Cpath d='M17 13l7 7-7 7' fill='none' stroke='%23878b91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 20 20, e-resize;
  --dot-size: 8px;        /* крапки горталки */
  --dot-gap: 8px;
  --dot-bottom: 18px;
  --section-gap: 96px;     /* між блоками кейсу */
  --section-gap-lg: 196px; /* між секціями головної */

  /* --- Форма --- */
  --radius: 6px;
  --radius-pill: 500px;

  /* --- Кнопки --- */
  --btn-h: 48px;
  --btn-pad-x: 22px;
  --btn-fs: 1.25rem; /* 20px */
  --btn-min-w: 152px; /* CTA у макеті фіксовані 152; навігаційні пігулки — по контенту */

  /* Висота хедера: падінг 48 згори + кнопка 48 */
  --header-h: 96px;

  /* --- Шари --- */
  --z-header: 100;
  --z-bar: 200;
  --z-popup: 300;

  /* --- Рух --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 240ms;
  --dur-slow: 400ms; /* виїзд хедера */
}

@media (max-width: 1023px) {
  :root {
    --gutter: 16px;
    --margin: 16px;
    --cols: 4;


    --btn-h: 44px;
    --btn-pad-x: 20px;
    --fs-lead: 1rem;      /* 16px */
    --card-peek: 40px;    /* ширина картки в стрічці = рядок мінус це: наступна визирає справа */
    --btn-fs: 1rem;
    --btn-min-w: 122px;
    --header-h: 59px; /* падінг 16 згори + голови 43 */
  }
}

/* Планшет вертикально (700–1023, від iPad mini): мобільна розкладка в одну колонку, але
   з ширшими полями — на 16 текст і медіа липли б до країв великого екрана */
@media (min-width: 700px) and (max-width: 1023px) {
  :root { --margin: 40px; }
}


/* Горизонтальний планшет і малі ноутбуки (1024–1279): розкладка десктопна,
   але поля з макета 1512 (120) лишали контенту замало місця */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --margin: 48px; }
}

/* Ноутбуки 1024–1439: у хедері чотири пункти меню й голови по центру —
   з десктопними кнопками меню налазило на голови. Там кнопки хедера
   компактні, як на мобільному. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .header {
    --btn-h: 44px;
    --btn-pad-x: 18px;
    --btn-fs: 1rem;
    --btn-min-w: 122px;
  }
}