/* =========================================================
   INDIKOM — сброс, базовая типографика, layout-примитивы
   ========================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: -0.006em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

/* Цифры одинаковой ширины: цены, скорости, телефоны, даты */
.price, .price-hero__value, .tariff__price, .stat__value,
.header__phone, .footer__phone, .mobile-nav__phone,
.tariff__speed, table, time { font-variant-numeric: tabular-nums; }

body.is-locked { overflow: hidden; }

/* Нумерация разделов — её подставляет .section-head__eyebrow */
main { counter-reset: sec; }

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text);
  text-wrap: balance;
}

h4, h5, h6 { letter-spacing: var(--ls-tight); line-height: var(--lh-snug); }
h1, h2 { font-weight: 800; }

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--sp-8) 0;
}

ul, ol { margin: 0 0 var(--sp-3); padding-left: 1.2em; }
li { margin-bottom: 6px; }
li:last-child { margin-bottom: 0; }

blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-6);
  border-left: 4px solid var(--accent);
  background: var(--bg-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-soft);
}

code, pre, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code {
  background: var(--bg-muted);
  padding: .15em .4em;
  border-radius: var(--r-xs);
  font-size: .9em;
}

strong, b { font-weight: 700; }

::selection { background: var(--cta); color: #fff; }

/* =========================================================
   Layout
   ========================================================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* Тонкие направляющие по краям контейнера — каркас страницы виден */
.section::before,
.section::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--hairline);
  pointer-events: none;
  z-index: 0;
}
/* Линии идут по внешней кромке контейнера, а не по кромке текста:
   между направляющей и контентом остаётся поле шириной с gutter. */
.section::before { left:  max(10px, calc((100% - var(--container)) / 2)); }
.section::after  { right: max(10px, calc((100% - var(--container)) / 2)); }
.section > * { position: relative; z-index: 1; }

@media (max-width: 719px) {
  .section::before, .section::after { display: none; }
}

.section--brand::before,
.section--brand::after { background: rgba(255, 255, 255, .13); }

.section--soft { background: var(--bg-soft); }
.section--muted { background: var(--bg-muted); }
.section--tight { padding-block: calc(var(--section-y) * .55); }

.section--brand {
  background: var(--deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='22'%3E%3Ccircle cx='0' cy='400' r='120'/%3E%3Ccircle cx='0' cy='400' r='212'/%3E%3Ccircle cx='0' cy='400' r='304'/%3E%3Ccircle cx='0' cy='400' r='396'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -60px bottom -60px;
  background-size: 560px 560px;
  color: var(--text-invert);
}
.section--brand h1,
.section--brand h2,
.section--brand h3,
.section--brand h4 { color: var(--text-invert); }
.section--brand p { color: var(--text-invert-soft); }

/* Заголовок секции */
.section-head {
  counter-increment: sec;
  display: grid;
  gap: var(--sp-3);
  max-width: none;
  margin-bottom: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--deep);
}
@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    column-gap: var(--sp-10);
    align-items: end;
  }
  .section-head__eyebrow { grid-column: 1 / -1; }
}

/* Центрирование отменяем — страница держится на левом крае */
.section-head--center {
  margin-inline: 0;
  text-align: left;
}

/* Шапка-врезка: только надзаголовок с номером, без сетки и линейки сверху.
   Нужна там, где заголовок живёт в своей колонке — например блок IND-TV. */
.section-head--plain {
  display: block;
  border-top: 0;
  padding-top: 0;
  margin-bottom: var(--sp-4);
}

.section-head__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
/* Номер — только у надзаголовка внутри шапки раздела.
   Отдельно стоящие надзаголовки (например «IND-TV») не нумеруются. */
.section-head .section-head__eyebrow::before {
  content: counter(sec, decimal-leading-zero);
  padding: 2px 7px;
  background: var(--cta);
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
}
.section-head .section-head__eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.section--brand .section-head__eyebrow::after { background: rgba(255,255,255,.22); }
.section--brand .section-head__eyebrow { color: rgba(255,255,255,.75); }

.section-head__title { margin-bottom: var(--sp-2); }
.section-head__text {
  font-size: var(--fs-md);
  color: var(--text-soft);
  margin-bottom: 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--cta);
}
.section--brand .section-head__text { color: var(--text-invert-soft); }

/* Сетка */
.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }

/* Утилиты */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--cta);
  color: var(--cta-text);
  padding: var(--sp-3) var(--sp-6);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--cta-text); }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ---------------------------------------------------------
   Появление при прокрутке
   --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}