/* ==========================================================================
   ГАЛАКС — design-tokens.css
   Вставляется ОДИН РАЗ, глобально для всего сайта:
   Настройки сайта → Ещё → «Вставить код» → вкладка CSS.
   (Не в отдельные блоки — иначе при правке переменной придётся искать
   все её копии по блокам.)

   Что внутри: CSS-переменные дизайна + классы для типографики, кнопок,
   и оформления декоративных элементов (маршрут hero, таймлайн процесса,
   строки услуг, форма). Классы навешиваются вручную на элементы Zero
   Block через поле «Class» в панели стилей элемента — не создают
   разметку сами, только стилизуют то, что вы уже собрали в интерфейсе.

   Namespace: все классы и переменные с префиксом galax- — не пересекаются
   с системными классами Tilda (.t-*, .tn-*, .t396 и т.п.).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

:root{
  /* ---- Цвет: меняете здесь — меняется по всему сайту ---- */
  --galax-bg:#F5F4F0;
  --galax-surface:#FFFFFF;
  --galax-text:#171717;
  --galax-muted:#666660;
  --galax-accent:#1E4938;
  --galax-accent-ink:#153327;   /* hover-состояние акцента */
  --galax-on-accent:#F5F4F0;    /* текст на зелёном фоне */
  --galax-on-accent-muted:rgba(245,244,240,.64);
  --galax-line:rgba(23,23,23,.15);
  --galax-line-strong:rgba(23,23,23,.28);
  --galax-line-on-accent:rgba(245,244,240,.24);

  /* ---- Форма / радиусы / скорость анимаций ---- */
  --galax-radius:2px;
  --galax-duration-fast:200ms;
  --galax-duration-base:300ms;
  --galax-duration-slow:900ms;
  --galax-ease:cubic-bezier(.16,.8,.24,1);
}

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
/* Отступ, чтобы контент не прятался под фиксированную шапку при переходе по якорю: */
:target{ scroll-margin-top:88px; }

/* ==========================================================================
   ТИПОГРАФИКА
   Навешивайте на текстовые элементы Zero Block через поле «Class».
   Цвет текста при этом всё равно можно менять для конкретного элемента
   стандартной палитрой Tilda — эти классы задают только шрифт/размер/
   межстрочный интервал, не перекрывают цвет через !important.
   ========================================================================== */
.galax-eyebrow{
  font-family:'Manrope',sans-serif;font-weight:500;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--galax-muted);
}
.galax-h1{
  font-family:'Manrope',sans-serif;font-weight:600;letter-spacing:-.02em;
  line-height:.98;color:var(--galax-text);
}
.galax-h2{
  font-family:'Manrope',sans-serif;font-weight:600;letter-spacing:-.015em;
  line-height:1.04;color:var(--galax-text);
}
.galax-h3{
  font-family:'Manrope',sans-serif;font-weight:600;letter-spacing:-.005em;
  line-height:1.22;color:var(--galax-text);
}
.galax-text{
  font-family:'Manrope',sans-serif;font-weight:400;line-height:1.6;color:var(--galax-muted);
}
.galax-num{
  font-family:'Manrope',sans-serif;font-weight:600;color:var(--galax-muted);
  font-variant-numeric:tabular-nums;
}

/* Размеры задавайте через собственную панель Zero Block (Font size,
   отдельно для desktop/tablet/mobile) — ориентируйтесь на диапазоны:
   H1 72–88 / 42–50 (mobile), H2 48–60 / 32–38, H3 24–30 / 22–26,
   текст 17–19 / 16–17, мелкие подписи 12–14. Классы .galax-h1/.galax-h2/
   .galax-h3 не фиксируют font-size намеренно — размер остаётся
   полностью в ваших руках в UI. */

/* ==========================================================================
   КНОПКИ / ССЫЛКИ
   .galax-button        — на элемент «Кнопка» (основной CTA, заливка)
   .galax-button-ghost  — на элемент «Кнопка» со стилем «текстовая ссылка»
                           (используется для «Обсудить задачу →»)
   .galax-arrow          — на текстовый символ «→» / «↗» внутри кнопки/ссылки,
                           если стрелка вынесена отдельным текстовым слоем
   ========================================================================== */
.galax-button{
  transition:background-color var(--galax-duration-base) var(--galax-ease),
             transform var(--galax-duration-fast) var(--galax-ease)!important;
  border-radius:var(--galax-radius)!important;
}
.galax-button:hover{ background-color:var(--galax-accent-ink)!important; }
.galax-button:active{ transform:scale(.98); }

.galax-button-ghost{
  border-bottom:1px solid var(--galax-line-strong)!important;
  transition:border-color var(--galax-duration-base) var(--galax-ease),
             gap var(--galax-duration-base) var(--galax-ease)!important;
}
.galax-button-ghost:hover{ border-color:var(--galax-accent)!important; }

.galax-arrow{ display:inline-block; transition:transform var(--galax-duration-base) var(--galax-ease); }
a:hover > .galax-arrow,
.galax-button:hover .galax-arrow,
.galax-button-ghost:hover .galax-arrow{ transform:translateX(3px); }

/* Ссылки навигации (если стилизуете нативный Menu-элемент Zero Block
   через его же класс, а не через .galax-*) — подчёркивание на hover
   обычно доступно прямо в настройках Menu-элемента, код не нужен. */

/* Схема в hero (маршрут) стилизуется внутри блока 02-hero.html */

/* ==========================================================================
   УСЛУГИ — строка вместо карточки
   .galax-service         — группа одной услуги (вся строка целиком)
   .galax-service-number  — «01»
   .galax-service-title   — заголовок услуги
   .galax-service-text    — описание
   .galax-service-arrow   — символ «↗»
   ========================================================================== */
.galax-service:hover .galax-service-number{ color:var(--galax-accent)!important; }
.galax-service:hover .galax-service-title{ transform:translateX(4px); }
.galax-service:hover .galax-service-arrow{ transform:translate(4px,-4px); color:var(--galax-accent)!important; }
.galax-service-title,.galax-service-arrow{
  transition:transform var(--galax-duration-base) var(--galax-ease),
             color var(--galax-duration-base) var(--galax-ease);
}

/* ==========================================================================
   ПРЕИМУЩЕСТВА
   .galax-advantage        — группа одного пункта
   .galax-advantage-number — «01»
   .galax-advantage-title  — заголовок
   .galax-advantage-text   — описание
   Фон секции (тёмно-зелёный) настраивается нативно — Zero Block →
   настройки блока → «Цвет фона». Цвет текста внутри для этого блока
   тоже проще выставить вручную через палитру Tilda (светлый), без CSS.
   ========================================================================== */
.galax-advantage-number{ opacity:.7; }

/* ==========================================================================
   ПРОЦЕСС — таймлайн
   .galax-process-item   — группа одного этапа
   .galax-process-track  — линия-подложка над этапом
   .galax-process-fill   — линия-заливка (появляется при скролле)
   .galax-process-dot    — точка на линии
   .galax-process-number — «01»
   .galax-process-title  — заголовок этапа
   .galax-process-text   — описание
   ========================================================================== */
.galax-process-track{ background-color:var(--galax-line)!important; }
.galax-process-fill{
  background-color:var(--galax-accent)!important;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--galax-duration-slow) var(--galax-ease);
}
.galax-process-item.is-visible .galax-process-fill{ transform:scaleX(1); }
.galax-process-dot{
  background-color:var(--galax-muted)!important;
  border-radius:50%!important;
  transition:background-color var(--galax-duration-base) var(--galax-ease);
}
.galax-process-item.is-visible .galax-process-dot{ background-color:var(--galax-accent)!important; }

/* На мобильном (вертикальный таймлайн) заливка растёт по высоте —
   если для мобильной раскладки вы поворачиваете track/fill на 90°
   средствами Zero Block (rotate во вкладке Style), transform:scaleX(1)
   всё равно работает корректно вдоль повёрнутой оси. */

/* ==========================================================================
   ФОРМА
   Присвойте классу galax-form САМ БЛОК с нативной формой Tilda
   (поле «Class» в настройках блока формы). Все правила ниже намеренно
   заходят только внутрь .galax-form — не трогают формы на других
   страницах/блоках сайта.
   ========================================================================== */
.galax-form .t-form{ background:transparent; box-shadow:none; padding:0; }
.galax-form .t-input-group{ margin-bottom:34px!important; }
.galax-form .t-input-title{
  font-family:'Manrope',sans-serif!important;font-size:16px!important;
  color:var(--galax-muted)!important;font-weight:400!important;
}
.galax-form .t-input,
.galax-form .t-textarea{
  border:none!important;border-bottom:1px solid var(--galax-line-strong)!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important;
  padding:14px 0 12px!important;font-size:17px!important;font-family:'Manrope',sans-serif!important;
  color:var(--galax-text)!important;transition:border-color var(--galax-duration-base) var(--galax-ease);
}
.galax-form .t-input:focus,
.galax-form .t-textarea:focus{ border-color:var(--galax-text)!important; }
.galax-form .t-submit{
  background-color:var(--galax-accent)!important;border-radius:var(--galax-radius)!important;
  height:56px!important;font-weight:500!important;border:none!important;
  transition:background-color var(--galax-duration-base) var(--galax-ease)!important;
}
.galax-form .t-submit:hover{ background-color:var(--galax-accent-ink)!important; }

/* ==========================================================================
   ОБЩЕЕ: появление при скролле
   Навешивайте data-атрибут через class="... galax-reveal" на крупные
   смысловые группы (не на каждый абзац по отдельности — иначе анимация
   будет «дёрганой»). Приоритетно используйте нативную вкладку
   «Анимация» у элемента/группы в Zero Block (Fade + Move up,
   200–350мс на объект, разница задержки 60–100мс между соседними) —
   она делает то же самое без единой строки кода. Класс ниже — запасной
   вариант, работает вместе с behavior.js, если где-то native-анимации
   недостаточно (например, для координации нескольких вложенных групп).
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  .galax-reveal,.galax-process-fill,.galax-process-dot,
  .galax-service-title,.galax-service-arrow,.galax-button,.galax-button-ghost,.galax-arrow{
    transition-duration:.001ms!important;animation-duration:.001ms!important;
  }
}

/* ==========================================================================
   БАЗОВЫЕ СТИЛИ ДЛЯ HTML-БЛОКОВ (размеры, шрифт, кнопки, секции)
   Нужны, потому что блоки вставлены как готовый HTML, а не собраны из
   элементов Zero Block — размеры и цвета ссылок никто не задаёт вручную.
   Цвета ссылок стоят с !important, чтобы перебить стандартный
   оранжевый цвет ссылок Tilda.
   ========================================================================== */
:root{ --galax-section-y:clamp(80px,11vw,168px); }
body{ background-color:var(--galax-bg); }

.galax-header,.galax-mnav,.galax-hero,.galax-section,.galax-footer{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--galax-text);
  -webkit-font-smoothing:antialiased;
}
.galax-header *,.galax-mnav *,.galax-hero *,.galax-section *,.galax-footer *{ box-sizing:border-box; }
.galax-header a,.galax-mnav a,.galax-hero a,.galax-section a,.galax-footer a{ text-decoration:none; }
:where(.galax-hero,.galax-section,.galax-footer) :where(h1,h2,h3,p){ margin:0; }

/* Размеры текста (desktop → mobile плавно, через clamp) */
.galax-h1{ font-size:clamp(42px,4.3vw,62px); }
.galax-h2{ font-size:clamp(32px,3vw + 20px,58px); }
.galax-h3{ font-size:clamp(20px,1vw + 16px,26px); }
.galax-lead{
  font-family:'Manrope',sans-serif;font-weight:400;color:var(--galax-muted);
  font-size:clamp(16px,.4vw + 15px,19px);line-height:1.55;max-width:560px;
}
.galax-text{ font-size:16px;max-width:480px; }

/* Ссылки-кнопки */
.galax-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Manrope',sans-serif;font-weight:500;font-size:16px;line-height:1.2;
  color:var(--galax-accent)!important;cursor:pointer;
}
.galax-button{
  background-color:var(--galax-accent);color:var(--galax-on-accent)!important;
  padding:17px 26px;justify-content:center;border:none;
}
.galax-button-ghost{
  color:var(--galax-accent)!important;padding-bottom:4px;
  border-bottom:1px solid var(--galax-line-strong);
}
.galax-header-cta{ padding-bottom:3px;border-bottom:1px solid var(--galax-line-strong); }
.galax-header-cta:hover{ border-bottom-color:var(--galax-accent); }

/* Шапка */
.galax-logo{ color:var(--galax-text)!important; }
.galax-navlink{ font-family:'Manrope',sans-serif;color:var(--galax-muted)!important; }
.galax-navlink:hover{ color:var(--galax-text)!important; }
.galax-mnav a{ color:var(--galax-text)!important; }
.galax-mnav a.galax-button{ color:var(--galax-on-accent)!important;border-bottom:none; }

/* Секции */
.galax-section{ padding:var(--galax-section-y) 0; }
.galax-section--accent{ background-color:var(--galax-accent); }
.galax-service{ color:var(--galax-text)!important; }
.galax-footer a{ color:var(--galax-muted)!important; }
.galax-footer a:hover{ color:var(--galax-text)!important; }
.galax-form-note a{ color:inherit!important;text-decoration:underline; }

@media (max-width:640px){
  :root{ --galax-section-y:96px; }
  .galax-h3{ font-size:clamp(20px,1vw + 16px,24px); }
}

/* Общий контейнер контента: 1280px + поля 24px (на мобильном 20px) */
.galax-section-inner{ width:100%;max-width:1328px;margin:0 auto;padding:0 24px; }
@media (max-width:640px){ .galax-section-inner{ padding:0 20px; } }

/* Появление при скролле. Скрытие включается только когда скрипт загрузился
   (класс galax-js на html) — без скрипта контент остаётся видимым. */
.galax-js .galax-reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--galax-ease) var(--galax-delay,0s),transform .8s var(--galax-ease) var(--galax-delay,0s);
}
.galax-js .galax-reveal.is-visible{ opacity:1;transform:none; }
.galax-js .galax-service.galax-reveal{
  transition:opacity .8s var(--galax-ease) var(--galax-delay,0s),transform .8s var(--galax-ease) var(--galax-delay,0s),background-color .3s var(--galax-ease);
}
@media (prefers-reduced-motion: reduce){
  .galax-js .galax-reveal{ opacity:1;transform:none;transition:none; }
}

/* ==========================================================================
   ДИНАМИКА
   ========================================================================== */
/* Ничего не должно вызывать горизонтальный скролл (полноширинные подложки) */
.galax-section,.galax-hero{ overflow-x:clip; }

/* Заголовки: строки поднимаются из-под маски по очереди */
.galax-line{ display:block;overflow:hidden;padding:.06em 0 .12em;margin:-.06em 0 -.12em; }
.galax-line > span{ display:block; }
.galax-js .galax-lines .galax-line > span{
  transform:translateY(110%);
  transition:transform 1s var(--galax-ease) calc(var(--l,0) * .12s + var(--galax-delay,0s));
}
.galax-js .galax-lines.is-visible .galax-line > span{ transform:none; }

/* Преимущества: при наведении на пункт остальные приглушаются */
.galax-advantage > *{ transition:opacity .35s var(--galax-ease); }
.galax-adv-list:hover .galax-advantage > *{ opacity:.45; }
.galax-adv-list:hover .galax-advantage:hover > *{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .galax-js .galax-lines .galax-line > span{ transform:none;transition:none; }
}