/* Вариант 3 · «Горизонт»: круговой язык — засечки по дуге. Поверх landing-v1.css (раскладка общих блоков, адаптив).
   Канон тот же; капс — только у служебных меток (.meta): подписи графики, мета выпуска. */

.meta { display: block; font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.tk { fill: none; }
.tk.w { stroke: var(--text-primary); } .tk.d { stroke: var(--base-800); } .tk.h { stroke: var(--accent-primary); }
[data-theme="light"] .tk.d { stroke: var(--base-300); }
.sec.hot .tk.w { stroke: var(--base-950); } .sec.hot .tk.h { stroke: var(--base-50); }
.rings { display: block; width: 100%; height: auto; }
.rg-c { fill: var(--text-primary); }

/* ── первый экран: полукруг из пяти дуг ───────────────────────────── */
.hz { padding-bottom: 0; overflow: hidden; }
.hz-hd { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 56px; align-items: end; }
.hz h1 { max-width: none; }
.hz-line { font-size: 28px; line-height: 36px; color: var(--base-300); padding-bottom: 10px; }
.hz-fig { margin: 40px 0 0; }
.horizon { display: block; width: 100%; height: auto; }
/* слой события лежит точно поверх каркаса; его рамка начинается на высоте числа — оттуда и срабатывает вход */
.hz-crop { position: relative; }
.hz-ev { position: absolute; left: 0; right: 0; bottom: 0; top: 44%; pointer-events: none; }
.hz-ev .horizon { position: absolute; left: 0; bottom: 0; }
.hz-n { font-size: 260px; fill: var(--text-primary); }
.hz-c { font: 400 13px var(--font-base); letter-spacing: .08em; text-transform: uppercase; fill: var(--accent-primary); }
.rn { font-size: 30px; fill: var(--base-400); }
.hz-leg { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-top: 20px; padding-bottom: 56px; }
.hz-leg .cap { text-align: right; max-width: 460px; }
@media (max-width: 1100px) { .hz-hd { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } .hz-line { max-width: 520px; } .hz-leg { flex-direction: column; gap: 12px; } .hz-leg .cap { text-align: left; } }
@media (max-width: 700px) {
  .hz-crop { overflow: hidden; } .horizon { width: 176%; margin-left: -38%; }
  .rn, .hz-c { display: none; } .hz-line { font-size: 22px; line-height: 30px; }
}

/* ── что проверили: дуги по именам ────────────────────────────────── */
.hz-check .mk-list { margin-top: 40px; } .hz-check .cap { margin-top: 8px; }
.arcs { list-style: none; display: grid; row-gap: 20px; }
.arcs li { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 16px; align-items: center; font-size: 24px; line-height: 32px; }
.arcs .fig { font-size: var(--fig-s); }
.arcs li.h .fig { color: var(--accent-fine); }
@media (max-width: 1100px) { .hz-check .two { grid-template-columns: minmax(0, 1fr); row-gap: 48px; } }
@media (max-width: 700px) { .arcs li { grid-template-columns: 96px minmax(0, 1fr); font-size: 18px; line-height: 26px; } }

/* ── находка: кольцо на горячей плоскости ─────────────────────────── */
.hz-find { padding: 96px 0; }
.hz-find .two { align-items: center; column-gap: 56px; }
.hz-find figure .rings { max-width: 560px; }
.hz-find .rg-c { font-size: 190px; fill: var(--base-950); }
.hz-find .cap { color: var(--brand-900); margin-top: 20px; }
.hz-find .prose { margin-top: 28px; }
@media (max-width: 1100px) { .hz-find .two { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } }

/* ── рецепт: девять колец и правки ────────────────────────────────── */
.grid9 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 40px; margin-top: var(--air); }
.grid9 a { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 24px; align-items: center; }
.grid9 .rg-c { font-size: 64px; }
.grid9 .n { display: block; font-size: 56px; color: var(--base-600); }
.grid9 .t { display: block; font-size: 22px; line-height: 28px; font-weight: 500; margin-top: 8px; }
.grid9 .meta { margin-top: 10px; }
@media (hover: hover) { .grid9 a:hover .t { text-decoration: underline; text-underline-offset: 4px; } }
@media (max-width: 1100px) { .grid9 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid9 { grid-template-columns: minmax(0, 1fr); gap: 32px; } .grid9 a { grid-template-columns: 120px minmax(0, 1fr); column-gap: 16px; } .grid9 .n { font-size: 40px; } .grid9 .t { font-size: 18px; line-height: 24px; } }

.hfx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; row-gap: 64px; align-items: start; margin-top: 192px; scroll-margin-top: 40px; }
.hfx.flip .hfx-l { grid-column: 2; grid-row: 1; } .hfx.flip .hfx-r { grid-column: 1; grid-row: 1; }
.hfx p.hfx-v { font-size: clamp(96px, 13.4vw, 196px); margin-top: 36px; white-space: nowrap; }
.hfx-v .h { color: var(--accent-primary); }
.hfx h3 { margin-top: 36px; }
.hfx-why { margin-top: 28px; } .hfx-why .cap { margin-top: 20px; }
.hfx-r { margin: 0; }
.hfx-r .rings { max-width: 520px; margin: 0 auto; }
.hfx .rg-c { font-size: 124px; }
.rkey { list-style: none; display: grid; row-gap: 8px; margin: 28px auto 0; max-width: 520px; font-size: 18px; line-height: 24px; }
.rkey li { display: grid; grid-template-columns: 12px auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.rkey i { width: 12px; height: 12px; border-radius: 3px; background: var(--accent-primary); align-self: center; }
.rkey b { font-weight: 500; white-space: nowrap; } .rkey span { color: var(--text-secondary); }
.hfx-r .cap { max-width: 520px; margin: 14px auto 0; }
.hfx .fx-how { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 1100px) {
  .hfx { grid-template-columns: minmax(0, 1fr); margin-top: 128px; row-gap: 48px; } .hfx-r .rings, .rkey, .hfx-r .cap { margin-left: 0; }
  .hfx.flip .hfx-l, .hfx.flip .hfx-r { grid-column: auto; grid-row: auto; }
}
@media (max-width: 700px) { .hfx { margin-top: 96px; } .hfx p.hfx-v { margin-top: 24px; } .hfx h3 { margin-top: 24px; } }

/* ── как выглядит хорошо: одно кольцо на 37 отчётов ───────────────── */
.gd { align-items: center; column-gap: 56px; }
.gd-ring .rings { max-width: 520px; } .gd .rg-c { font-size: 150px; }
.gd-list li { grid-template-columns: 110px minmax(0, 1fr); align-items: center; }
.gd-list small { display: block; font-size: 18px; line-height: 24px; color: var(--text-secondary); }
.gd-list li.h .fig { color: var(--accent-fine); } .gd-list li.d .fig { color: var(--base-400); }
.gd .cap { margin-top: 40px; }
@media (max-width: 1100px) { .gd { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } }
@media (max-width: 700px) { .gd-list li { grid-template-columns: 72px minmax(0, 1fr); } .gd-list small { font-size: 16px; line-height: 22px; } }