/* ============================================================
   ОПС — объединённая страница (Проект / Монтаж / ТО / Аудит)
   Якорная суб-навигация + scroll-spy. Accent: #e07b3c
   ============================================================ */

/* ─── Hero ─── */
.ops-hero {
  position: relative;
  padding: calc(var(--header-height, 68px) + var(--space-14)) 0 var(--space-16);
  background:
    linear-gradient(135deg, rgba(26,10,10,0.80) 0%, rgba(45,21,21,0.72) 40%, rgba(26,21,40,0.78) 80%, rgba(10,22,40,0.84) 100%),
    url('/assets/img/b2b/ops-mon.png') center top / cover no-repeat;
  color: var(--color-white);
  overflow: hidden;
}
.ops-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(255,179,128,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 15% 75%, rgba(255,130,66,0.07) 0%, transparent 55%);
  z-index: 0;
}
.ops-hero > .container { position: relative; z-index: 1; }
.ops-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #ffb380; background: rgba(255,179,128,0.08);
  border: 1px solid rgba(255,179,128,0.3); border-radius: 999px;
  padding: var(--space-2) var(--space-4); margin-bottom: var(--space-5);
}
.ops-hero__title { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.1; font-weight: 800; color: var(--color-white); margin-bottom: var(--space-5); }
.ops-hero__title span { color: #ff9a5a; }
.ops-hero__desc { font-size: var(--font-size-lg); color: rgba(255,255,255,0.7); max-width: 660px; line-height: 1.6; margin-bottom: var(--space-8); }
.ops-hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-10); }
.ops-hero__stat-val { font-size: var(--font-size-2xl); font-weight: 800; color: var(--color-white); }
.ops-hero__stat-lbl { font-size: var(--font-size-sm); color: rgba(255,255,255,0.55); margin-top: 2px; }
@media (max-width: 640px) { .ops-hero__stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }

/* ─── Sticky sub-nav (anchor version + scroll-spy) ─── */
.ops-subnav {
  background: var(--color-white); border-bottom: 1px solid var(--color-gray-100);
  position: sticky; top: var(--header-height, 68px); z-index: 50;
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#site-top.header--hidden ~ main .ops-subnav { top: 0; }
.ops-subnav__inner { display: flex; align-items: center; height: 52px; overflow-x: auto; }
.ops-subnav__label {
  font-size: var(--font-size-xs); font-weight: 700; color: var(--color-gray-400);
  text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0;
  padding-right: var(--space-4); margin-right: var(--space-3);
  border-right: 2px solid var(--color-gray-100);
}
.ops-subnav__links { display: flex; gap: 0; }
.ops-subnav__link {
  display: inline-flex; align-items: center; padding: 0 var(--space-5); height: 52px;
  font-size: var(--font-size-sm); font-weight: 500; color: var(--color-gray-500);
  text-decoration: none; border-bottom: 2px solid transparent; cursor: pointer;
  white-space: nowrap; transition: color 0.2s, border-color 0.2s;
}
.ops-subnav__link:hover { color: var(--color-gray-900); }
.ops-subnav__link--active { color: #e07b3c; border-bottom-color: #e07b3c; font-weight: 600; }
@media (max-width: 480px) {
  .ops-subnav__label { display: none; }
  .ops-subnav__link { padding: 0 var(--space-3); font-size: var(--font-size-xs); }
}

/* ─── Anchored blocks ─── */
.ops-block { scroll-margin-top: 128px; }
.ops-block--tint { background: var(--color-gray-50); }

/* ─── Компактные карточки тарифов ─── */
.ops-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  max-width: 1040px;
  margin: 0 auto;
}
.ops-plans--two { max-width: 720px; }
.ops-plan {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: box-shadow 0.2s, transform 0.2s;
}
.ops-plan:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ops-plan--featured { border-color: #e07b3c; box-shadow: 0 8px 28px rgba(224,123,60,0.10); }
.ops-plan__badge {
  position: absolute; top: calc(-1 * var(--space-3)); left: 50%; transform: translateX(-50%);
  background: #e07b3c; color: #fff;
  font-size: var(--font-size-xs); font-weight: 700;
  padding: 3px 12px; border-radius: 999px; white-space: nowrap;
}
.ops-plan__name { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-gray-900); margin-bottom: var(--space-1); }
.ops-plan__desc { font-size: var(--font-size-sm); color: var(--color-gray-500); line-height: 1.5; margin-bottom: var(--space-4); }
.ops-plan__feats { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.ops-plan__feat {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--font-size-sm); color: var(--color-gray-600); line-height: 1.45;
}
.ops-plan__feat::before {
  content: '';
  position: absolute; left: 0; top: 0.3em;
  width: 12px; height: 12px;
  background: #e07b3c;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 6.5l3 3 6-7' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 6.5l3 3 6-7' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ops-plan__foot {
  margin-top: auto;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-100);
}
.ops-plan__price { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-gray-700); }
.ops-plan .btn { width: 100%; justify-content: center; }
.ops-plan .btn--primary { background: #e07b3c; border-color: #e07b3c; }
.ops-plan .btn--primary:hover { background: #c9662a; border-color: #c9662a; }
.ops-plan .btn--secondary { color: #c9662a; border-color: rgba(224,123,60,0.4); }
.ops-plan .btn--secondary:hover { background: rgba(224,123,60,0.06); border-color: #e07b3c; }

/* ─── Подзаголовок внутри секции ─── */
.ops-subtitle {
  text-align: center;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: var(--space-14) 0 var(--space-2);
}
.ops-subtitle-note {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin: 0 0 var(--space-6);
}
.ops-subtitle + .ops-check-grid,
.ops-subtitle + .ops-steps-row { margin-top: var(--space-6); }

/* ─── Этапы — горизонтальная лента ─── */
.ops-steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  max-width: 1040px;
  margin: 0 auto;
}
@media (max-width: 900px) { .ops-steps-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ops-steps-row { grid-template-columns: 1fr; } }
.ops-step-card {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.ops-block--tint .ops-step-card { background: var(--color-white); }
.ops-step-card__top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.ops-step-card__num {
  width: 30px; height: 30px; border-radius: 50%;
  background: #e07b3c; color: #fff; font-weight: 700; font-size: var(--font-size-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ops-step-card__time {
  font-size: var(--font-size-xs); font-weight: 700; color: #e07b3c;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ops-step-card__title { font-weight: 600; color: var(--color-gray-900); font-size: var(--font-size-sm); margin-bottom: 2px; }
.ops-step-card__desc { font-size: var(--font-size-xs); color: var(--color-gray-500); line-height: 1.5; }

/* ─── «Что входит» — лёгкие чипы ─── */
.ops-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  max-width: 900px;
  margin: 0 auto;
}
.ops-check {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm); font-weight: 500; color: var(--color-gray-800);
}
.ops-check svg { color: #e07b3c; flex-shrink: 0; }
.ops-block:not(.ops-block--tint) .ops-check { background: var(--color-gray-50); }

/* ─── CTA-блоки в палитре страницы (переопределение общих компонентов) ─── */
/* Кнопка-акцент на этой странице — оранжевая, вместо мятной */
.btn--accent {
  background: #e07b3c;
  border-color: #e07b3c;
  color: var(--color-white);
  box-shadow: 0 8px 24px rgba(224, 123, 60, 0.35);
}
.btn--accent:hover {
  background: #c9662a;
  border-color: #c9662a;
  color: var(--color-white);
}

/* Большой CTA — тёмный тёплый градиент как у hero и «Законодательства» */
.cta-dark {
  background: linear-gradient(135deg, #1a0a0a 0%, #2d1515 45%, #1a1528 80%, #0a1628 100%);
}
.cta-dark__eyebrow { color: #ffb380; }

/* Боковая карточка FAQ — та же тёмная тёплая гамма */
.faq-cta-card {
  background: linear-gradient(135deg, #2d1515 0%, #1a1528 60%, #0a1628 100%);
}
.faq-cta-card__icon {
  background: rgba(255, 179, 128, 0.14);
  color: #ffb380;
}
.faq-cta-card .btn--white { color: #c9662a; }
.faq-cta-card .btn--white:hover { background: #fff5ee; }
.faq-cta-card__phone:hover { color: #ffb380; }

/* ─── Legal cards (ТО) — dark section ─── */
.ops-legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); }
.ops-legal-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: var(--space-6); }
.ops-legal-card__tag { font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-3); }
.ops-legal-card__tag--req { color: #ffb380; }
.ops-legal-card__tag--warn { color: #ff8a8a; }
.ops-legal-card__tag--ok { color: #7ee2a8; }
.ops-legal-card__title { font-weight: 700; color: var(--color-white); margin-bottom: var(--space-2); }
.ops-legal-card__text { font-size: var(--font-size-sm); color: rgba(255,255,255,0.65); line-height: 1.6; }