/* =====================================================
   /o-kompanii/ — H2-секции под About-hero (TASK-NNN, 2026-05-12)
   Hero переиспользует .atm-band + .about-d2 из about.css.
   Здесь — только .ok-* стили для секций под hero.
   Использует плоские токены из tokens.css.
   ===================================================== */

/* Hero-override: на /o-kompanii/ убираем negative margin-top
   (на главной он подтягивает atm-band под предыдущий блок,
   здесь atm-band — первая секция, отступ не нужен) */
.atm-band--ok{ margin-top:0 }

/* ============ OK-PAGE wrapper ============ */
.ok-page{
  padding:clamp(48px, 6vw, 96px) 0 clamp(64px, 8vw, 120px);
  background:var(--paper);
}
.ok-page .container{
  max-width:1280px; margin:0 auto;
  padding-inline:clamp(20px, 4vw, 40px);
}

/* ============ OK-SECTION (общий каркас) ============ */
.ok-section{ margin-bottom:clamp(48px, 6vw, 96px) }
.ok-section:last-child{ margin-bottom:0 }

.ok-section__head{
  display:grid; grid-template-columns:auto 1fr; column-gap:clamp(16px,2vw,28px);
  align-items:start; row-gap:14px;
  max-width:880px; margin:0 0 clamp(28px, 3.5vw, 48px);
}
.ok-section__num{
  font-family:var(--font-mono); font-size:var(--fs-sm);
  color:var(--brand-700); letter-spacing:.12em;
  padding-top:.6em; min-width:2.5em;
}
.ok-section__title{
  grid-column:2; margin:0;
  font-family:var(--font-display, var(--font-sans));
  font-weight:800; line-height:1.05;
  font-size:clamp(28px, 4vw, 48px);
  color:var(--ink);
  letter-spacing:-.01em;
}
.ok-section__lead{
  grid-column:2; margin:0;
  font-size:clamp(16px, 1.4vw, 19px); line-height:1.55;
  color:var(--ink-muted);
}

/* ============ 01. Что мы поставляем — категории ============ */
.ok-cats{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(14px, 1.6vw, 22px);
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}
.ok-cats li{ margin:0 }
.ok-cats a{
  display:flex; flex-direction:column; gap:6px;
  padding:clamp(20px, 2.4vw, 28px);
  border:1px solid color-mix(in oklch, var(--brand) 12%, transparent);
  border-radius:clamp(16px, 1.6vw, 20px);
  background:var(--surface);
  color:var(--ink); text-decoration:none;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.ok-cats a:hover{
  transform:translateY(-2px);
  border-color:color-mix(in oklch, var(--brand) 30%, transparent);
  background:color-mix(in oklch, var(--surface) 92%, var(--brand) 8%);
}
.ok-cats a b{
  font-size:clamp(17px, 1.5vw, 20px); font-weight:700;
  color:var(--brand-800, var(--brand));
}
.ok-cats a span{
  font-size:14.5px; line-height:1.5;
  color:var(--ink-muted);
}

/* ============ 02. Как мы работаем — 5 шагов ============ */
.ok-steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(12px, 1.4vw, 18px);
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  counter-reset:ok-step;
}
.ok-steps li{
  position:relative;
  padding:clamp(22px, 2.4vw, 28px);
  background:linear-gradient(180deg,
    color-mix(in oklch, var(--brand) 4%, var(--surface)),
    var(--surface));
  border:1px solid color-mix(in oklch, var(--brand) 10%, transparent);
  border-radius:clamp(16px, 1.6vw, 20px);
  display:flex; flex-direction:column; gap:10px;
}
.ok-steps__num{
  font-family:var(--font-mono); font-size:var(--fs-sm);
  color:var(--brand-700); letter-spacing:.12em;
  opacity:.7;
}
.ok-steps li b{
  font-size:clamp(18px, 1.6vw, 22px); font-weight:800;
  color:var(--ink);
}
.ok-steps__txt{
  font-size:14.5px; line-height:1.55;
  color:var(--ink-muted);
}

/* ============ 03. Сервис и гарантии — 4 колонки ============ */
.ok-service{
  display:grid; gap:clamp(14px, 1.6vw, 22px);
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.ok-service__col{
  padding:clamp(20px, 2.2vw, 26px);
  border-left:3px solid var(--accent);
  background:color-mix(in oklch, var(--accent) 4%, var(--surface));
}
.ok-service__col b{
  display:block; margin-bottom:8px;
  font-size:clamp(16px, 1.4vw, 19px); font-weight:700;
  color:var(--ink);
}
.ok-service__col p{
  margin:0; font-size:14.5px; line-height:1.55;
  color:var(--ink-muted);
}

/* ============ 04. Бренды-партнёры ============ */
.ok-brands{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(12px, 1.4vw, 18px);
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}
.ok-brands a{
  display:flex; flex-direction:column; gap:4px;
  padding:clamp(18px, 2vw, 24px);
  background:var(--surface);
  border:1px solid color-mix(in oklch, var(--brand) 10%, transparent);
  border-radius:clamp(14px, 1.4vw, 18px);
  color:var(--ink); text-decoration:none;
  transition:transform .25s ease, border-color .25s ease;
}
.ok-brands a:hover{
  transform:translateY(-2px);
  border-color:color-mix(in oklch, var(--brand) 30%, transparent);
}
.ok-brands a b{
  font-size:clamp(17px, 1.5vw, 20px); font-weight:800;
  color:var(--brand-800, var(--brand));
}
.ok-brands a span{
  font-size:13.5px; line-height:1.5;
  color:var(--ink-muted);
}
.ok-brands__more{
  background:linear-gradient(135deg,
    color-mix(in oklch, var(--brand) 8%, var(--surface)),
    var(--surface)) !important;
  border-style:dashed !important;
}

/* ============ Адаптация mobile ============ */
@media (max-width:767px){
  .ok-section__head{ grid-template-columns:1fr; row-gap:6px }
  .ok-section__num{ padding-top:0 }
  .ok-section__title{ grid-column:1; font-size:26px }
  .ok-section__lead{ grid-column:1; font-size:15.5px }
  .ok-cats,
  .ok-steps,
  .ok-service,
  .ok-brands{ grid-template-columns:1fr }
}