/* ============================================================================
   GREAT DECISIONS AI - FZCO · сайт компании
   Фирменный стиль снят с официального бланка
   (../company-profile/inbox/gdai-letterhead.pdf, замеры в brand/BRAND.md).

   Четыре правила, которые не пересматриваем:

   • ЛИНИЙ НЕТ. Ни разделителей между секциями, ни подчёркиваний под
     заголовками, ни рамок вокруг карточек, ни сетки в таблицах. Ритм держат
     воздух и типографика. На бланке ровно так же: подвал отбит от письма
     33.5 мм пустоты, разделительной линии над ним нет (BRAND.md §1).
     Единственное подчёркивание на странице - у ссылок, и это
     text-decoration, а не бордюр: ссылка обязана выглядеть ссылкой.
     Ещё есть outline у :focus-visible - он нужен для клавиатуры.
   • МОНОХРОМ. Максимальная хроматичность бланка по всему листу = 0.
     Палитра ровно из трёх значений: #000, #666, #fff. Иерархия строится
     размером, весом и воздухом. ГРАДИЕНТОВ В ЭТОМ ФАЙЛЕ БЫТЬ НЕ ДОЛЖНО:
     иридесцентный акцент, который стоял тут раньше, принадлежит бренду
     продукта Linsa, а не компании.
   • Никаких сетевых запросов: шрифты и картинки только из assets/.
   • system-ui и -apple-system в font-stack запрещены: только Inter и Onder.

   Как читать файл:
     1) ШРИФТЫ   - Onder (заголовки) и Inter (всё остальное).
     2) ТОКЕНЫ   - цвет, типографика, отступы.
     3) БАЗА     - сброс, контейнер, секции, общие классы.
     4) ДВИЖЕНИЕ - фон первого экрана и появление блоков.
     5) БЛОКИ    - шапка, первый экран, деятельность, инженерия, продукт,
                   контакты, реквизиты (company-details.html), подвал.
     6) АДАПТИВ  - 1080 / 900 / 700 / 430.
     7) ПЕЧАТЬ   - страница реквизитов должна читаться на бумаге.
   ============================================================================ */

/* ============================================================================
   1) ШРИФТЫ
   ============================================================================ */

/* --- Onder: заголовки и только они -------------------------------------------
   Собран из ~/Library/Fonts/ONDER-REGULAR.TTF: подмножество латиницы, цифр
   и знаков препинания, woff2, 6 КБ. У шрифта РОВНО ОДНО начертание: ни жирного,
   ни светлого не существует, и синтетические имитации (font-weight:700 по
   одному файлу) запрещены, браузер обводит контур и портит форму.
   Все веса объявлены как 400.

   Метрики нестандартные: upm 1000, но высота прописных 1173 единицы, то есть
   1.173em вместо привычных ~0.7em. Отсюда два следствия:
     • при одинаковом font-size Onder выглядит примерно в 1.6 раза крупнее
       Inter, поэтому кегли заголовков здесь заведомо «мелкие» на вид;
     • интерлиньяж меньше ~1.25 приводит к НАЛОЖЕНИЮ строк, проверено рендером.
   ascent/descent-override выравнивают строчный бокс вокруг прописных: без них
   каприз метрик (ascent 1215, descent 200) сажает текст в верх строки. */
@font-face{
  font-family:'Onder';
  src:url('assets/Onder-Regular-latin.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:block;          /* не swap: подменный шрифт вдвое уже, скачок вёрстки виден */
  ascent-override:118%;
  descent-override:2%;
  line-gap-override:0%;
}

/* --- Inter: основной текст, подписи и реквизиты ---------------------------- */
@font-face{
  font-family:'Inter';
  src:url('assets/InterVariable-latin.woff2') format('woff2-variations'),
      url('assets/InterVariable-latin.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

/* ============================================================================
   2) ТОКЕНЫ
   ============================================================================ */
:root{
  /* Цвет. Ровно три значения бланка. Серый #666 - это математически 40 %
     чёрного (102/255), снят пипеткой с адресных строк подвала бланка.
     Четвёртого цвета в системе нет. */
  --ink:   #000000;   /* заголовки, значения реквизитов, основной текст */
  --ink-2: #666666;   /* лейблы, подписи, сноски, второстепенные строки */
  --paper: #FFFFFF;   /* фон */

  /* Типографическая лестница.
     Onder: две ступени, обе крупные заголовки, ничего мельче им не набирается.
     Inter: от лида до лейбла. */
  --t-display: 72px;   /* первый экран, Onder. Это ПОТОЛОК, см. .display */
  --t-title:   30px;   /* заголовок секции, Onder. Тоже потолок */
  --t-act:     30px;   /* строка вида деятельности, Inter */
  --t-item:    19px;   /* заголовок пункта, Inter */
  --t-lead:    20px;   /* лид-абзац, Inter */
  --t-body:    16px;   /* основной текст, Inter */
  --t-cell:    16px;   /* значение реквизита, Inter */
  --t-label:   11px;   /* лейблы и надзаголовки, Inter, всегда UPPERCASE */

  /* Интерлиньяж. --lh-onder подобран вручную: прописные Onder занимают
     1.173em, поэтому всё, что меньше ~1.25, кладёт строку на строку. 1.38
     даёт просвет примерно в 17 % кегля, ровно тот, что замерен между строками
     логотипа на бланке (BRAND.md §2). */
  --lh-onder: 1.38;
  --lh-body:  1.62;

  /* Отступы. Раз линеек нет, весь ритм страницы держится на этой шкале:
     --sp-8 отбивает секции друг от друга, --sp-7 отделяет группы внутри. */
  --sp-1: 6px;  --sp-2: 12px;  --sp-3: 20px;  --sp-4: 32px;
  --sp-5: 52px; --sp-6: 80px;  --sp-7: 104px; --sp-8: 136px;

  --wrap:  1120px;   /* ширина контента */
  --gutter:  48px;   /* боковые поля */
}

/* ============================================================================
   3) БАЗА
   ============================================================================ */
*{margin:0;padding:0;box-sizing:border-box;}

html{
  background:var(--paper);
  scroll-behavior:smooth;      /* мягкая прокрутка по якорям, выключается ниже */
  /* overflow-x:hidden здесь СОЗНАТЕЛЬНО НЕТ, и возвращать его нельзя.
     Это правило не чинит переполнение, а прячет его: контент, вылезший
     за правый край, остаётся обрезанным, зато scrollWidth == clientWidth,
     и любая автопроверка на горизонтальную прокрутку начинает врать.
     Проверяется скриптом tools/qa-render.py по getBoundingClientRect. */
}

body{
  font-family:'Inter';
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv05" 1;   /* прямая строчная l */
}

img,canvas{max-width:100%;display:block;}
ol,ul{list-style:none;}
strong{font-weight:600;color:var(--ink);}

/* Ссылки. Единственное подчёркивание на странице: у ссылки должна быть
   видимая аффорданс-метка, иначе почта и телефон читаются как простой текст.
   Отбито от базовой линии, чтобы не резать нижние выносные. */
a{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:var(--ink-2);
  transition:text-decoration-color .2s ease;
}
a:hover,a:focus-visible{text-decoration-color:var(--ink);}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}

/* Секция. Раньше здесь стояла волосяная линия сверху: убрана, секции
   разделены только воздухом. Отступ крупный намеренно, это и есть ритм. */
.section{padding:var(--sp-8) 0;}
/* Секция, идущая сразу за титулом страницы: свой верхний отступ ей не нужен,
   его уже дал титул. Иначе между ними набегает 270px пустоты. */
.section--flush{padding-top:0;}

/* --- Заголовки ------------------------------------------------------------
   Onder набирается только здесь. Прописные задаются стилем, а не в разметке:
   в HTML фразы написаны обычным регистром и остаются читаемыми для поиска,
   скрин-ридера и того, кто будет править текст.
   letter-spacing слегка отрицательный: у Onder боковые поля по 0.1em с каждой
   стороны, и на крупном кегле набор без поджатия выглядит рыхлым. */
.display,.h2{
  font-family:'Onder';
  font-weight:400;             /* другого начертания у шрифта нет */
  text-transform:uppercase;
  color:var(--ink);
  line-height:var(--lh-onder);
  letter-spacing:-.012em;
  word-spacing:-.06em;         /* пробел у Onder широкий, между словами зияет */
}

/* Кегль Onder считается от ширины колонки, а не переключается брейкпоинтами.
   Причина в самом шрифте: он очень широкий. Замеры canvas.measureText по
   подключённому файлу, с поправкой на letter-spacing и word-spacing:
     SOFTWARE      14.76em     WHAT WE DO    17.51em
     WE DESIGN     14.35em     HOW WE BUILD  19.54em
     AND BUILD     13.83em     PRODUCT       12.41em
     COMPANY       13.33em     CONTACT       12.34em
   Формула: min(потолок, доступная_ширина / --div), где --div - ширина самой
   длинной строки блока плюс запас ~2.5 %.
     15.1 - первый экран (строка SOFTWARE),
     20.0 - заголовки секций (строка HOW WE BUILD),
     13.7 - заголовок страницы реквизитов (слово COMPANY, фраза переносится).
   12px вычитаются на полосу прокрутки: 100vw её включает, clientWidth - нет.
   ⚠ Поменяется текст заголовков - пересчитать --div через tools/measure.html,
   иначе на узком экране появится горизонтальная прокрутка. */
.display{
  --div:15.1;
  font-size:min(var(--t-display), calc((100vw - 2 * var(--gutter) - 12px) / var(--div)));
}
.display--page{--div:13.7;font-size:min(56px, calc((100vw - 2 * var(--gutter) - 12px) / var(--div)));}
.h2{
  --div:20.0;
  font-size:min(var(--t-title), calc((100vw - 2 * var(--gutter) - 12px) / var(--div)));
  margin-bottom:var(--sp-5);
}

/* --- Текстовые классы ----------------------------------------------------- */
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink);max-width:34em;}
/* Подзаголовок под .h2. Отрицательный верхний отступ съедает margin-bottom
   заголовка и ставит абзац под него на 20px, иначе между ними зияет полный
   шаг секции. Оба значения берутся из --sp-5, врозь их менять нельзя. */
.sub{
  font-size:var(--t-body);line-height:1.55;color:var(--ink-2);max-width:36em;
  margin-top:calc(var(--sp-3) - var(--sp-5));margin-bottom:var(--sp-5);
}
.note{font-size:13.5px;line-height:1.65;color:var(--ink-2);max-width:56em;}
.meta{
  font-size:var(--t-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);
}

/* --- Логотип --------------------------------------------------------------
   Вектор, чёрный, прозрачный фон. Пропорция 3.41 : 1: задаём ВЫСОТУ, ширину
   оставляем auto. Не растягивать, не перекрашивать, не класть на подложку. */
.logo{height:52px;width:auto;}
/* Подвал: вдвое мельче шапки было бы 26px, но на такой высоте трёхстрочный
   логотип уже не читается, строка всего 7px. Компромисс 36px: явно подчинён
   шапке и при этом остаётся логотипом, а не пятном. */
.logo--sm{height:36px;}
a.logo-link{text-decoration:none;display:inline-block;}

/* ============================================================================
   4) ДВИЖЕНИЕ
   Два эффекта, оба выключаются при prefers-reduced-motion: мягкая прокрутка
   и появление блоков. Фон первого экрана в этом режиме рисует один кадр
   и останавливается, см. site.js.
   ============================================================================ */

/* Появление блоков. Класс rv-on ставит JS и только если движение разрешено:
   без JS и при reduce весь контент виден сразу, ничего не прячется. */
html.rv-on [data-rv]{opacity:0;transform:translateY(14px);}
html.rv-on [data-rv].rv-in{
  opacity:1;transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  html.rv-on [data-rv]{opacity:1;transform:none;transition:none;}
}

/* ============================================================================
   5) БЛОКИ
   ============================================================================ */

/* --- Шапка ----------------------------------------------------------------
   Повторяет верх бланка: логотип слева, вторая строка справа. Не липкая:
   бланк не ездит за читателем. Поле вокруг логотипа = половина его высоты
   (правило с бланка, BRAND.md §4): при 52px это 26px, взято с запасом. */
.mast{padding:var(--sp-5) 0 var(--sp-4);}
.mast__in{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);}
.mast__loc{text-align:right;padding-bottom:4px;}

/* --- Первый экран ---------------------------------------------------------
   Заголовок в три строки флаговым столбиком, той же композицией, какой набран
   логотип на бланке (GREAT / DECISIONS / AI). Ширины строк подобраны так,
   чтобы столбик стоял ровным блоком: 14.35 / 13.83 / 14.76em.
   Текст здесь НЕ прячется под data-rv: первый экран должен читаться сразу,
   без ожидания анимации. */
.hero{position:relative;padding:var(--sp-6) 0 var(--sp-8);}
/* Титул второй страницы: холста под ним нет, и следом сразу идут реквизиты,
   поэтому нижний отступ короче. */
.hero--page{padding-bottom:var(--sp-7);}
/* Холст лежит под текстом и растянут на всю секцию. Ни абсолютных размеров,
   ни соотношения сторон: JS сам меряет секцию и ставит буфер по devicePixelRatio. */
.hero__bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.hero__in{position:relative;z-index:1;}
.hero__lead{
  font-size:var(--t-lead);line-height:1.5;color:var(--ink);
  max-width:33em;margin-top:var(--sp-5);
}
.hero__cta{display:inline-block;margin-top:var(--sp-4);font-weight:500;}

/* --- Виды деятельности ----------------------------------------------------
   Ровно три строки. Раньше это была таблица с линейками сверху и снизу
   у каждой строки: линейки убраны, строки разведены воздухом.
   Номер второстепенный, поэтому мелкий и серый; название крупное и чёрное. */
.acts{display:grid;gap:var(--sp-4);}
.acts__i{
  display:grid;grid-template-columns:minmax(0,58px) minmax(0,1fr);
  align-items:baseline;gap:var(--sp-3);
}
.acts__n{
  font-size:var(--t-label);font-weight:600;letter-spacing:.14em;
  color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.acts__t{font-size:var(--t-act);font-weight:500;letter-spacing:-.02em;line-height:1.25;}
.acts__note{margin-top:var(--sp-6);}

/* --- Инженерия ------------------------------------------------------------
   Четыре пункта в две колонки. Ни рамок, ни подложек: пункт держится
   заголовком и воздухом вокруг. */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6) var(--sp-6);}
.item__t{font-size:var(--t-item);font-weight:500;letter-spacing:-.015em;line-height:1.3;}
.item__d{margin-top:var(--sp-2);color:var(--ink-2);max-width:32em;}

/* --- Продукт --------------------------------------------------------------
   Один абзац и один кадр. Раньше вокруг кадра стояла волосяная рамка:
   убрана. Скриншот тёмный, его собственный край и есть граница. */
.frame{margin-top:var(--sp-6);}
.frame img{width:100%;height:auto;}
.frame__cap{margin-top:var(--sp-3);font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:52em;}

/* --- Пары «ключ - значение» -----------------------------------------------
   Контакты на главной и все реквизиты на company-details.html. Раньше это
   была таблица с волосяной линейкой под каждой строкой; линеек нет, поле
   собрано в столбик: лейбл сверху мелким серым, значение под ним.
   Такой блок читается без сетки и не рассыпается на узком экране. */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-6);}
.fields--one{grid-template-columns:minmax(0,1fr);max-width:40em;}
.f__k{
  font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);
}
.f__v{font-size:var(--t-cell);font-weight:500;line-height:1.45;margin-top:var(--sp-1);
      overflow-wrap:break-word;font-variant-numeric:tabular-nums;}
.f__n{font-size:12.5px;font-weight:400;line-height:1.5;color:var(--ink-2);margin-top:5px;}
/* Контакты крупнее реквизитов: это то, ради чего сюда пишут. */
.fields--contact .f__v{font-size:var(--t-lead);}

/* --- Группы реквизитов ----------------------------------------------------
   Раньше у надзаголовка группы стояла сплошная чёрная линия снизу. Убрана:
   группы разделены воздухом в --sp-7, надзаголовок держится разрядкой. */
.group + .group{margin-top:var(--sp-7);}
.group__cap{
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);margin-bottom:var(--sp-4);
}
.src{margin-top:var(--sp-7);}

/* --- Подвал ---------------------------------------------------------------
   Раньше подвал отбивался сплошной чёрной линией: убрана. На бланке от письма
   до подвала 33.5 мм пустоты и никакой линии (BRAND.md §4), здесь так же.
   Логотип вдвое мельче шапочного: на бланке название компании в подвале
   ровно вдвое ниже логотипа в шапке (BRAND.md §5). */
.ftr{padding:var(--sp-7) 0 var(--sp-6);}
.ftr__in{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;}
.ftr__id{max-width:34em;}
.ftr__id .logo--sm{margin-bottom:var(--sp-3);}
.ftr__legal{font-size:12.5px;line-height:1.7;color:var(--ink-2);}
/* Единственная строка реквизитов, оставленная на главной: номер лицензии,
   орган выдачи, срок действия. Всё остальное живёт на company-details.html. */
.ftr__lic{flex:0 0 auto;text-align:right;line-height:2.1;}
.ftr__link{margin-top:var(--sp-2);font-size:12.5px;letter-spacing:0;text-transform:none;
           font-weight:400;color:var(--ink);}

/* ============================================================================
   6) АДАПТИВ
   Четыре брейкпоинта: 1080 / 900 / 700 / 430. Фиксированные треки заданы как
   minmax(0,Npx), а не Npx: при нехватке места они сжимаются, а не выталкивают
   контент за край экрана. Кегли Onder брейкпоинты не переключают, они
   считаются от ширины колонки (см. .display / .h2).
   ============================================================================ */
@media (max-width:1080px){
  :root{--gutter:36px;--sp-7:88px;--sp-8:112px;}
}

@media (max-width:900px){
  :root{--t-act:25px;--t-lead:19px;--sp-6:64px;--sp-7:76px;--sp-8:96px;}
  .logo{height:44px;}
  /* Колонки остаются, но межколонник ужимается: две колонки реквизитов
     держатся до 700px, ниже поле шириной 300px уже рвёт адрес. */
  .fields{gap:var(--sp-5) var(--sp-4);}
  .grid2{gap:var(--sp-5);}
}

@media (max-width:700px){
  :root{
    --gutter:24px;--sp-5:38px;--sp-6:52px;--sp-7:60px;--sp-8:72px;
    --t-act:21px;--t-item:18px;--t-lead:18px;--t-body:15.5px;--t-cell:15.5px;
  }
  .logo{height:38px;}
  .mast{padding:var(--sp-4) 0 var(--sp-3);}
  .mast__in{flex-direction:column;align-items:flex-start;gap:10px;}
  .mast__loc{text-align:left;padding-bottom:0;}
  .grid2,.fields{grid-template-columns:minmax(0,1fr);}
  .fields{gap:var(--sp-4);}
  .acts__i{grid-template-columns:minmax(0,1fr);gap:4px;}
  /* Декоративный перенос внутри адреса. На широком экране он разбивает адрес
     на осмысленные строки, на узком вредит: строка и так переносится сама,
     а принудительный разрыв оставляет висеть хвост вроде «Oasis,». */
  .br-wide{display:none;}
  .ftr__in{flex-direction:column;}
  .ftr__lic{text-align:left;}
}

@media (max-width:430px){
  :root{--gutter:20px;}
  .logo{height:32px;}
}

/* ============================================================================
   7) ПЕЧАТЬ
   Комплаенс-офицер печатает страницу реквизитов на офисном принтере. Страница
   и так чёрно-белая, поэтому печатная ветка почти пустая: гасим фон первого
   экрана и анимацию, прижимаем поля, запрещаем рвать группы посередине.
   ============================================================================ */
@media print{
  :root{--gutter:12px;--sp-6:32px;--sp-7:40px;--sp-8:44px;}
  html,body{background:#fff;color:#000;}
  .hero__bg{display:none;}
  html.rv-on [data-rv]{opacity:1;transform:none;transition:none;}
  .section{padding:22pt 0;}
  .hero{padding:16pt 0 22pt;}
  .group,.frame{break-inside:avoid;page-break-inside:avoid;}
  .display,.h2,.group__cap{page-break-after:avoid;break-after:avoid;}
  .f__k,.f__n,.note,.ftr__legal,.frame__cap,.item__d{color:#333;}
  a{text-decoration:none;}
}