/* ============================================================
   Тонус · Направление А — «Инженерный формуляр»
   ДНК 03-inzhenernyy-formulyar · brutal-grid · mono-accent · cold
   Все токены — Phase A манифеста. Контраст посчитан численно.
   ============================================================ */

:root {
  /* --- Палитра (60/30/10, «из мира клиента») --- */
  --bg:            #F2F4F7;   /* холодный near-white — свет лаборатории на фото гранулята */
  --surface:       #E4E8EE;   /* панель-формуляр — чуть темнее, холодный светло-серый */
  --text:          #14161A;   /* холодный почти-чёрный, не #000 */
  --text-secondary:#5B626D;   /* средний холодный серый (AA: 5.58:1 на bg) */
  --ink-mono:      #3A3F47;   /* графит для моно-разметки/номеров */
  --accent:        #DA1F2A;   /* фирменный красный Тонуса — ТОЛЬКО CTA и один тип метки */
  --accent-ink:    #FFFFFF;   /* текст на красном */
  --grid-line:     #CBD2D9;   /* hairline-сетка, 0.5px */
  --grid-line-soft:#DCE1E7;   /* внутренние деления формуляра */

  /* --- Типографика --- */
  --f-display: "Unbounded", system-ui, sans-serif;
  --f-body:    "IBM Plex Sans", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --f-logo:    "Geist", var(--f-body);

  /* Шкала ×1.25 (major second) от 16px */
  --t-xs:   0.8rem;    /* 12.8px — моно-микроподписи */
  --t-sm:   0.875rem;  /* 14px  — моно-метки */
  --t-base: 1rem;      /* 16px  — body */
  --t-md:   1.25rem;   /* 20px  — лид */
  --t-lg:   1.5625rem; /* 25px  */
  --t-xl:   1.953rem;  /* 31.25px */
  --t-2xl:  2.441rem;  /* 39px  */
  --t-3xl:  3.052rem;  /* 48.8px — H2 */

  /* --- 8pt-сетка --- */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 40px; --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px;

  --maxw: 1600px;
  --gutter: 24px;
  --hairline: 0.5px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

/* --- Моно-метка секции «01 —» --- */
.mono-label {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mono);
  font-weight: 500;
}
.mono-label--accent { color: var(--accent); }

.mono-micro {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* --- Оболочка / выравнивающая сетка --- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Видимая 12-колоночная hairline-сетка как фон секций */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}

/* ============================================================
   ХЕДЕР / ШТАМП ЧЕРТЕЖА
   ============================================================ */
.site-header {
  border-bottom: var(--hairline) solid var(--grid-line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 64px;
}
.logo {
  font-family: var(--f-logo);
  font-weight: 700;
  font-size: var(--t-md);
  color: var(--accent);
  letter-spacing: -0.01em;
}
.header-meta {
  display: none;
  gap: var(--s-3);
}
.nav {
  display: none;
  gap: var(--s-3);
}
.nav a {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.nav a:hover { color: var(--text); }

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--f-mono);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 16px 24px;
  border: var(--hairline) solid transparent;
  cursor: pointer;
  transition: background-color .12s linear, color .12s linear;
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover { background: #C31824; }
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--ink-mono);
}
.btn--ghost:hover { background: var(--surface); }

/* ============================================================
   HERO — 01
   ============================================================ */
.hero {
  border-bottom: var(--hairline) solid var(--grid-line);
  padding-block: var(--s-6) var(--s-8);
}
.hero .grid12 { row-gap: var(--s-5); }

.hero-head { grid-column: 1 / -1; }
.hero-head .mono-label { display: block; margin-bottom: var(--s-3); }

.hero-title {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
  font-size: clamp(2.5rem, 8.5vw, 5.75rem);
  max-width: 15ch;
}
.hero-lead {
  grid-column: 1 / -1;
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--text);
  max-width: 62ch;
  margin: 0 0 var(--s-4);
}
.hero-cta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Формуляр с 8 цифрами */
.hero-formular {
  grid-column: 1 / -1;
  background: var(--surface);
}
.formular-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--hairline) solid var(--grid-line);
}
.formular-head .title {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.metric {
  padding: var(--s-3);
  border-bottom: var(--hairline) solid var(--grid-line-soft);
  border-right: var(--hairline) solid var(--grid-line-soft);
}
.metric:nth-child(2n) { border-right: 0; }
.metric:nth-last-child(-n+2) { border-bottom: 0; }
.metric .idx {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  display: block;
  margin-bottom: var(--s-1);
}
.metric .value {
  font-family: var(--f-mono);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  display: block;
  margin-bottom: var(--s-1);
}
.metric .unit { font-size: 0.55em; color: var(--text-secondary); }
.metric .caption {
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--text-secondary);
}

/* Компактный фото-блок гранулята */
.hero-figure {
  grid-column: 1 / -1;
  margin: 0;
}
.hero-figure img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
}
.hero-figure figcaption {
  margin-top: var(--s-1);
  padding: 4px 0;
  border-top: var(--hairline) solid var(--grid-line);
}

/* ============================================================
   КАТЕГОРИИ — 02
   ============================================================ */
.categories { padding-block: var(--s-8); }
.section-head {
  border-bottom: var(--hairline) solid var(--grid-line);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-5);
}
.section-head .mono-label { display: block; margin-bottom: var(--s-2); }
.section-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, var(--t-3xl));
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 20ch;
}
.section-sub {
  margin: var(--s-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--t-base);
  max-width: 60ch;
}

/* Жёсткий грид формуляра, hairline-разметка */
.cat-grid {
  border-top: var(--hairline) solid var(--grid-line);
  display: grid;
  grid-template-columns: 1fr;
}
.cat-cell {
  border-bottom: var(--hairline) solid var(--grid-line);
  padding: var(--s-3);
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  min-height: 96px;
}
.cat-cell .idx {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  color: var(--accent);        /* красный — единственный «тип метки» с акцентом */
  font-weight: 600;
  flex: 0 0 auto;
  width: 2.5ch;
}
.cat-cell .body { flex: 1; }
.cat-cell .name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-md);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.cat-cell .desc {
  font-size: var(--t-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* Фото-ячейка сборки контейнера */
.cat-figure {
  margin: 0;
  border-bottom: var(--hairline) solid var(--grid-line);
  background: var(--surface);
}
.cat-figure img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  filter: saturate(0.94);
}
.cat-figure figcaption {
  padding: var(--s-2) var(--s-3);
  border-top: var(--hairline) solid var(--grid-line);
}

/* ============================================================
   МОУШН — дочерчивание hairline при входе секции (≤240мс)
   ============================================================ */
.reveal-line {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .24s ease-out;
}
.reveal-line.is-in { transform: scaleX(1); }

.reveal-up {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease-out, transform .2s ease-out;
}
.reveal-up.is-in { opacity: 1; transform: translateY(0); }
.reveal-up.d1 { transition-delay: .06s; }
.reveal-up.d2 { transition-delay: .12s; }

/* ============================================================
   АДАПТИВ — mobile-first → 768 → 1440
   ============================================================ */
@media (min-width: 768px) {
  :root { --gutter: 32px; }
  .header-meta { display: flex; }
  .nav { display: flex; }

  .hero-head   { grid-column: 1 / 8; }
  .hero-lead   { grid-column: 1 / 8; }
  .hero-cta    { grid-column: 1 / 8; }
  .hero-formular { grid-column: 8 / -1; grid-row: 1 / 4; }
  .hero-figure { grid-column: 1 / 8; }

  .metrics { grid-template-columns: repeat(2, 1fr); }

  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-cell { border-right: var(--hairline) solid var(--grid-line); }
  .cat-cell:nth-child(3n) { border-right: 0; }
  .cat-figure {
    grid-column: span 3;
    grid-row: span 1;
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
  .cat-figure img { min-height: 300px; }
}

@media (min-width: 1200px) {
  .hero-title { font-size: clamp(4rem, 6vw, 6.5rem); }
  .hero-head   { grid-column: 1 / 8; }
  .hero-formular { grid-column: 9 / -1; grid-row: 1 / 4; }
  .hero-figure { grid-column: 1 / 5; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal-line { transform: scaleX(1); }
  .reveal-up { opacity: 1; transform: none; }
}