/* Basalt Social — одностраничник. Один шрифт (Archivo, ось ширины): узкий начертанием — как базальтовые
   столбы — для заголовков и цифр, обычной ширины для текста. Шрифт лежит локально намеренно:
   Google Fonts с CDN в Германии — известный повод для претензий по GDPR. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin.woff2) format('woff2');
}

:root {
  --stone:   #E7E5E0;  /* светлый фон: пемза */
  --paper:   #F1F0EC;
  --basalt:  #26282C;  /* тёмный базальт */
  --graphite:#3A3D42;
  --ash:     #67665F;  /* тёплый серый для вторичного текста */
  --olivine: #5F6B2E;  /* оливин — зелёный минерал в базальте; единственный акцент */

  --bg: var(--stone);
  --text: var(--basalt);
  --muted: var(--ash);
  --rule: #C9C6BF;
  --accent: var(--olivine);
  --panel-bg: var(--basalt);
  --panel-text: #E9E6DF;
  --panel-muted: #A7A49C;
  --panel-rule: #4A4D52;
  --panel-accent: #B3BF77;

  /* грани столбов */
  --col-left: #3A3D42;
  --col-mid: #4A4D53;
  --col-right: #2E3135;
  --col-top: #6B6E73;
  --col-top-accent: var(--olivine);
  --col-base: var(--basalt);

  --measure: 34em;
  --gutter: clamp(16px, 4vw, 48px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #222428;
    --text: #E6E3DC;
    --muted: #9E9B93;
    --rule: #3C3F44;
    --accent: #A9B56B;
    --panel-bg: #2C2F33;
    --panel-text: #ECE9E2;
    --panel-muted: #A3A098;
    --panel-rule: #474A4F;
    --panel-accent: #B8C47C;
    --col-left: #3D4045;
    --col-mid: #4C4F55;
    --col-right: #33363A;
    --col-top: #6E7176;
    --col-top-accent: #A9B56B;
    --col-base: #E6E3DC;
  }
}
:root[data-theme="dark"] {
  --bg: #222428;
  --text: #E6E3DC;
  --muted: #9E9B93;
  --rule: #3C3F44;
  --accent: #A9B56B;
  --panel-bg: #2C2F33;
  --panel-text: #ECE9E2;
  --panel-muted: #A3A098;
  --panel-rule: #474A4F;
  --panel-accent: #B8C47C;
  --col-left: #3D4045;
  --col-mid: #4C4F55;
  --col-right: #33363A;
  --col-top: #6E7176;
  --col-top-accent: #A9B56B;
  --col-base: #E6E3DC;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 100%;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

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

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--bg); padding: 8px 12px; z-index: 10; }

/* Шапка */
.top { border-bottom: 1px solid var(--rule); }
.top__row { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.wordmark {
  font-stretch: 62%;
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.005em;
  text-decoration: none;
}
.nav { display: flex; gap: 22px; margin-left: auto; font-size: 0.9375rem; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--text); }
.theme {
  font: inherit;
  font-size: 0.875rem;
  color: var(--muted);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
}
.theme:hover { color: var(--text); border-color: var(--muted); }

/* Первый экран: имя узким начертанием, справа — базальтовые столбы */
.hero { border-bottom: 1px solid var(--rule); overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 32px clamp(32px, 5vw, 80px);
  align-items: end;
  min-height: min(78vh, 720px);
  padding-top: clamp(56px, 10vh, 120px);
}
.hero__text { padding-bottom: clamp(40px, 8vh, 88px); }
.hero__name {
  font-stretch: 62%;
  font-weight: 700;
  font-size: clamp(4rem, 12.5vw, 10.5rem);
  line-height: 0.86;
  letter-spacing: -0.012em;
}
.hero__lede {
  margin-top: 32px;
  max-width: 26em;
  font-size: clamp(1.1875rem, 1.8vw, 1.5rem);
  line-height: 1.38;
}
.hero__meta { margin-top: 24px; color: var(--muted); font-size: 0.9375rem; }
.hero__art { align-self: end; }
.hero__art svg { display: block; width: 100%; height: auto; }

.col-l { fill: var(--col-left); }
.col-m { fill: var(--col-mid); }
.col-r { fill: var(--col-right); }
.col-t { fill: var(--col-top); }
.col-t--accent { fill: var(--col-top-accent); }

/* Единственное движение на странице: столбы поднимаются при загрузке */
@media (prefers-reduced-motion: no-preference) {
  .col { animation: rise 1100ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
  @keyframes rise { from { transform: translateY(380px); } to { transform: translateY(0); } }
}

/* Обычный раздел: заголовок слева, содержимое справа */
.block { border-bottom: 1px solid var(--rule); padding: clamp(64px, 10vw, 128px) 0; }
.block__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 32px clamp(32px, 5vw, 80px);
}
.block__h {
  font-stretch: 62%;
  font-weight: 650;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 0.98;
  letter-spacing: -0.005em;
}

/* Услуги: четыре пары «название — что входит» */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(24px, 4vw, 56px); }
.service { border-top: 1px solid var(--text); padding-top: 16px; }
.service dt { font-weight: 600; font-size: 1.1875rem; }
.service dd { margin-top: 8px; color: var(--muted); max-width: 22em; }

/* Шаги — настоящая последовательность, поэтому с номерами */
.steps { counter-reset: step; display: grid; gap: 0; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 4px 16px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  font-stretch: 62%;
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--accent);
}
.steps h3 { font-size: 1.1875rem; font-weight: 600; }
.steps p { color: var(--muted); max-width: var(--measure); }

/* Кейс — тёмная плита базальта */
.case { background: var(--panel-bg); color: var(--panel-text); padding: clamp(72px, 11vw, 144px) 0; }
.case a { text-decoration-color: var(--panel-accent); }
.case :focus-visible { outline-color: var(--panel-accent); }
.case__head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 5vw, 80px); align-items: end; }
.case__h {
  font-stretch: 62%;
  font-weight: 700;
  font-size: clamp(2.75rem, 6.4vw, 5.5rem);
  line-height: 0.92;
}
.case__intro { max-width: var(--measure); font-size: 1.1875rem; line-height: 1.45; color: var(--panel-text); }

.figures {
  margin-top: clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--panel-rule);
}
.figure { padding: 24px clamp(16px, 2.4vw, 32px) 0 0; display: flex; flex-direction: column; }
.figure + .figure { padding-left: clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--panel-rule); }
.figure dt { order: 2; margin-top: 8px; font-weight: 600; font-size: 1.0625rem; }
.figure__num {
  order: 1;
  font-stretch: 62%;
  font-weight: 600;
  font-size: clamp(3.5rem, 8.4vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.figure__note { order: 3; margin-top: 4px; color: var(--panel-muted); font-size: 0.875rem; }

.case__products {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 16px clamp(32px, 5vw, 80px);
}
.case__products h3 { font-size: 1.1875rem; font-weight: 600; }
.case__products ul { display: grid; gap: 8px; color: var(--panel-muted); }
.case__products strong { color: var(--panel-text); font-weight: 600; }
.case__link { grid-column: 2; margin-top: 8px; }

/* Отрасли */
.industries { margin-top: 0; }
.industries li {
  padding: 14px 0 14px 32px;
  border-top: 1px solid var(--rule);
  position: relative;
  font-size: 1.375rem;
}
.industries li:last-child { border-bottom: 1px solid var(--rule); }
.industries li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(14px + 0.78em);
  width: 16px;
  height: 2px;
  background: var(--accent);
}

/* Основатель */
.founder__name {
  font-stretch: 62%;
  font-weight: 650;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.05;
}
.founder__role { margin-top: 12px; color: var(--muted); }
.founder__bio { margin-top: 24px; max-width: var(--measure); }

/* Команда: названия фирм текстом, не логотипами */
.block--last { border-bottom: 0; }
.background__lede { font-size: 1.1875rem; }
.firms { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 48px; }
.firms li {
  font-stretch: 75%;
  font-weight: 650;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1;
  color: var(--muted);
}

/* Контакт */
.block--contact { border-bottom: 0; }
.contact__lede { font-size: 1.1875rem; }
.contact__mail { margin-top: 16px; font-stretch: 75%; font-weight: 600; font-size: clamp(1.375rem, 3vw, 2rem); overflow-wrap: anywhere; }
.placeholder { background: color-mix(in srgb, var(--accent) 18%, transparent); padding: 0 6px; }

/* Подвал */
.foot { border-top: 1px solid var(--rule); padding: 28px 0 40px; color: var(--muted); font-size: 0.875rem; }
.foot__row { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.foot__row span:last-child { margin-left: auto; }

/* Узкие экраны */
@media (max-width: 860px) {
  .nav { display: none; }
  .theme { margin-left: auto; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 8px; padding-top: 56px; }
  .hero__text { padding-bottom: 24px; }
  .hero__art { margin: 0 calc(var(--gutter) * -1); }
  .block__grid, .case__head, .case__products { grid-template-columns: minmax(0, 1fr); }
  .case__link { grid-column: 1; }
  .services { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figure, .figure + .figure { padding: 24px 0; border-left: 0; }
  .figure + .figure { border-top: 1px solid var(--panel-rule); }
  .steps li { grid-template-columns: 3rem minmax(0, 1fr); }
  .foot__row span:last-child { margin-left: 0; }
}