/* ============================================================================
   consulting360.css — страница «Сопровождение 360» (/ru/gravity-consulting360).
   GitLab issue #69. Скоуп .gfmb-c360 ПОВЕРХ .gfmb (module-blue.css даёт токены,
   типографику, кнопки, capgrid/capc, lead, tmember, stagec, mcta, reveal).
   ВНИМАНИЕ: .hgrid module-blue НЕ даёт — в нём только .gfmb-seg .chgrid, другой
   класс (grep «hgrid» ловит его подстрокой). Базовое правило .hgrid — здесь.
   Здесь — только компоненты, которых нет в module-blue: орбита в hero, липкая
   чип-навигация со scrollspy, полоса метрик, строки методологии, светлые
   диаграммы (матрица Impact/Effort, HADI-кольцо, «Типичный путь клиента»),
   кейсы с крупными цифрами и двойной CTA. 1rem = 10px.
   ============================================================================ */

/* Якоря: фикс-хедер темы (7rem) + липкая чип-навигация (~5.6rem) + воздух.
   НЕ копировать 13rem из мокапа — там своя шапка 6.4rem (CLAUDE.md, фикс-хедер). */
.gfmb-c360 section[id]{scroll-margin-top:14rem}
/* Демо-якорь — наш стабильный wrapper #c360-demo (см. шаблон): персонализационная
   кампания подменяет секцию contact-form (id меняется на #become) client-side, из-за
   чего #contact-form как цель ссылок пропадает. Оборачиваем в свой div-якорь. */
body.gfmb-page #c360-demo{scroll-margin-top:14rem}

/* module-blue ставит .gfmb{overflow-x:hidden} (клип glow) — но overflow-предок
   ломает position:sticky у чип-навигации. overflow-x:clip клипует так же,
   НЕ создавая scroll-контейнер → sticky работает. */
.gfmb.gfmb-c360{overflow-x:clip}

/* ---------------- Двухколоночная сетка (hero + «Синергия») ---------------- */
/* Базовое правило из мокапа (styles.css). Без него оба .hgrid оставались
   display:block → орбита падала под текст, statcard — под .lead. */
.gfmb-c360 .hgrid{display:grid;grid-template-columns:1fr 1fr;gap:4.6rem;align-items:center;position:relative;z-index:1}
@media(max-width:900px){.gfmb-c360 .hgrid{grid-template-columns:1fr;gap:3.2rem}}

/* ---------------- HERO: сетка текст + орбита ---------------- */
/* padding-top: module-blue даёт calc(7rem + 30px) = 100px — этого мало, верхний узел
   орбиты («Стратегия») почти касается фикс-хедера (зазор ~2px против 36px в мокапе).
   Мокап центрирует hero под 6.4rem sticky-шапкой (align-items:center + 6.4rem воздуха);
   у нас шапка 7rem fixed (перекрывает) → повторяем: 7rem клиренс + 6.4rem воздуха. */
.gfmb-c360 .c360-hero{padding-top:calc(7rem + 64px);padding-bottom:5rem}
.gfmb-c360 .orbit{position:relative;width:min(44rem,90vw);aspect-ratio:1;margin:0 auto}
.gfmb-c360 .orbit__ring{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--line-a);animation:gfc360-spin 60s linear infinite}
.gfmb-c360 .orbit__ring--2{inset:6.6rem;border-color:var(--line);animation-duration:44s;animation-direction:reverse}
.gfmb-c360 .orbit__ring--3{inset:13rem;border:1px solid var(--a-12);animation:none}
@keyframes gfc360-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.gfmb-c360 .orbit__ring{animation:none}}
.gfmb-c360 .orbit__core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.6rem}
.gfmb-c360 .orbit__core b{font-size:1.7rem;letter-spacing:-.02em;color:var(--ink-100)}
.gfmb-c360 .orbit__core span{font-family:var(--mono);font-size:1.05rem;color:var(--accent);letter-spacing:.1em;text-transform:uppercase}
.gfmb-c360 .orbit__core i{width:5.6rem;height:5.6rem;border-radius:50%;background:linear-gradient(140deg,var(--accent),var(--accent-deep));box-shadow:0 10px 30px rgba(var(--accent-rgb),.35);display:flex;align-items:center;justify-content:center;margin-bottom:.6rem;font-style:normal}
.gfmb-c360 .orbit__core i svg{width:2.6rem;height:2.6rem;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gfmb-c360 .orbit__node{position:absolute;top:50%;left:50%;width:9.6rem;margin:-4.8rem 0 0 -4.8rem;transform:translate(var(--x),var(--y));display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}
.gfmb-c360 .orbit__node i{width:4.2rem;height:4.2rem;border-radius:1rem;background:#fff;border:1px solid var(--line-a);box-shadow:0 6px 18px rgba(var(--accent-rgb),.14);display:flex;align-items:center;justify-content:center;color:var(--accent);font-style:normal}
.gfmb-c360 .orbit__node i svg{width:2rem;height:2rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gfmb-c360 .orbit__node span{font-size:1.05rem;font-weight:700;line-height:1.25;color:var(--ink-60);background:rgba(255,255,255,.85);border-radius:.4rem;padding:.15rem .4rem}
@media(max-width:900px){
  .gfmb-c360 .orbit{width:min(34rem,82vw);margin-top:3.6rem} /* верхний узел не лезет под CTA */
  .gfmb-c360 .orbit__ring--2{inset:5.2rem}
  .gfmb-c360 .orbit__ring--3{inset:10.2rem}
  .gfmb-c360 .orbit__node{--sc:.78;transform:translate(calc(var(--x)*var(--sc)),calc(var(--y)*var(--sc)))}
}

/* ---------------- ЛИПКАЯ ЧИП-НАВИГАЦИЯ ---------------- */
/* Хедер темы fixed 7rem → чип-бар липнет ровно под ним. */
.gfmb-c360 .chipnav{position:sticky;top:7rem;z-index:40;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.gfmb-c360 .chipnav__in{display:flex;gap:.8rem;overflow-x:auto;padding:1rem 2.4rem;scrollbar-width:none}
.gfmb-c360 .chipnav__in::-webkit-scrollbar{display:none}
.gfmb-c360 .chipnav a{flex-shrink:0;font-size:1.25rem;font-weight:600;color:var(--ink-60);padding:.6rem 1.2rem;border:1px solid var(--line);border-radius:99rem;background:#fff;white-space:nowrap}
.gfmb-c360 .chipnav a:hover{border-color:var(--line-a);color:var(--accent)}
.gfmb-c360 .chipnav a.act{background:var(--a-08);border-color:var(--accent);color:var(--accent)}

/* ---------------- ПОЛОСА МЕТРИК ---------------- */
.gfmb-c360 .mstrip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-alt)}
.gfmb-c360 .mstrip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.gfmb-c360 .mstrip__c{background:var(--bg-alt);padding:2.4rem 2rem;text-align:center}
.gfmb-c360 .mstrip__v{font-family:var(--mono);font-size:clamp(2.4rem,3.6vw,3.4rem);font-weight:500;letter-spacing:-.03em;color:var(--accent)}
.gfmb-c360 .mstrip__l{font-size:1.2rem;line-height:1.4;color:var(--ink-60);margin-top:.6rem}
@media(max-width:860px){.gfmb-c360 .mstrip__in{grid-template-columns:1fr 1fr}}

/* ---------------- МЕТОДОЛОГИЯ: нумерованные строки ---------------- */
.gfmb-c360 .rows{display:flex;flex-direction:column}
.gfmb-c360 .rowp{display:grid;grid-template-columns:8rem 1fr 1.4fr;gap:2.4rem;padding:2.8rem 0;border-top:1px solid var(--line);align-items:start}
.gfmb-c360 .rowp:last-child{border-bottom:1px solid var(--line)}
@media(max-width:860px){.gfmb-c360 .rowp{grid-template-columns:1fr;gap:1rem;padding:2.2rem 0}}
.gfmb-c360 .rowp__no{font-family:var(--mono);font-size:3.4rem;font-weight:500;color:var(--a-20);line-height:1;-webkit-text-stroke:1px var(--line-a)}
.gfmb-c360 .rowp__t{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--ink-100)}
.gfmb-c360 .rowp__p{font-size:1.4rem;line-height:1.6;color:var(--ink-60)}
.gfmb-c360 .rowp__p+.rowp__p{margin-top:.9rem}

/* ---------------- statcard (×2) ---------------- */
.gfmb-c360 .statcard{border:1px solid var(--line);border-radius:.8rem;background:#fff;padding:3.4rem 2.4rem;text-align:center;box-shadow:0 1px 3px rgba(20,23,40,.05)}
.gfmb-c360 .statcard__v{font-family:var(--mono);font-size:clamp(4.4rem,7vw,6rem);font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--accent)}
.gfmb-c360 .statcard__l{font-size:1.5rem;line-height:1.5;color:var(--ink-60);margin-top:1.2rem}

/* ---------------- Светлый фрейм диаграмм ---------------- */
.gfmb-c360 .figlight{margin-top:2rem;border-radius:.8rem;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 14px 40px rgba(20,23,40,.10)}
.gfmb-c360 .figlight__bar{display:flex;align-items:center;gap:.5rem;padding:.85rem 1.2rem;border-bottom:1px solid var(--line);background:var(--bg-alt)}
.gfmb-c360 .figlight__bar i{width:.8rem;height:.8rem;border-radius:50%}
.gfmb-c360 .figlight__bar i:nth-child(1){background:#FF5F57}
.gfmb-c360 .figlight__bar i:nth-child(2){background:#FEBC2E}
.gfmb-c360 .figlight__bar i:nth-child(3){background:#28C840}
.gfmb-c360 .figlight__cap{margin-left:auto;font-family:var(--mono);font-size:1rem;color:var(--ink-40)}
.gfmb-c360 .figlight__body{padding:2.8rem}
@media(max-width:640px){.gfmb-c360 .figlight__body{padding:1.8rem 1.2rem}}

/* ---------------- Матрица Impact/Effort ---------------- */
.gfmb-c360 .mx{position:relative;height:36rem;margin:1rem 1rem 3.4rem 4.2rem;border-left:2px solid var(--ink-20);border-bottom:2px solid var(--ink-20)}
.gfmb-c360 .mx::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--line)}
.gfmb-c360 .mx::after{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1px dashed var(--line)}
.gfmb-c360 .mx__ylab,.gfmb-c360 .mx__xlab{position:absolute;font-family:var(--mono);font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.gfmb-c360 .mx__ylab{left:-3.4rem;top:50%;transform:rotate(-90deg) translateX(50%);transform-origin:left top}
.gfmb-c360 .mx__xlab{bottom:-2.8rem;left:50%;transform:translateX(-50%)}
.gfmb-c360 .mx__q{position:absolute;font-family:var(--mono);font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40)}
.gfmb-c360 .mx__q--tl{top:.8rem;left:1rem;color:var(--accent)}
.gfmb-c360 .mx__q--tr{top:.8rem;right:1rem}
.gfmb-c360 .mx__q--bl{bottom:.8rem;left:1rem}
.gfmb-c360 .mx__q--br{bottom:.8rem;right:1rem}
.gfmb-c360 .mx__c{position:absolute;transform:translate(-50%,-50%);font-size:1.15rem;font-weight:600;color:var(--ink-100);padding:.55rem 1.1rem;border-radius:.5rem;background:var(--a-08);border:1px solid var(--line-a);white-space:nowrap}
.gfmb-c360 .mx__c--hot{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 6px 16px rgba(var(--accent-rgb),.3)}
.gfmb-c360 .mx__c--dim{background:var(--bg-alt);border-color:var(--line);color:var(--ink-60)}
@media(max-width:720px){.gfmb-c360 .mx{height:30rem}.gfmb-c360 .mx__c{font-size:.95rem;padding:.4rem .7rem}}

/* ---------------- HADI-кольцо ---------------- */
.gfmb-c360 .hadi{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center}
@media(max-width:720px){.gfmb-c360 .hadi{grid-template-columns:1fr;justify-items:center}}
.gfmb-c360 .hadi__ring{width:24rem;height:24rem;flex-shrink:0}
.gfmb-c360 .hadi__ring text{font-family:var(--mono);font-size:2.6rem;font-weight:600;fill:var(--accent)}
.gfmb-c360 .hadi__ring path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.gfmb-c360 .hadi__ring .arr{fill:var(--accent);stroke:none}
.gfmb-c360 .hadi__legend{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%}
@media(max-width:520px){.gfmb-c360 .hadi__legend{grid-template-columns:1fr}}
.gfmb-c360 .hadi__it{display:flex;align-items:center;gap:1.2rem;border:1px solid var(--line);border-radius:.8rem;background:var(--bg-alt);padding:1.2rem 1.4rem}
.gfmb-c360 .hadi__lt{width:3.4rem;height:3.4rem;border-radius:.7rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:1.6rem;font-weight:600;color:#fff;background:linear-gradient(140deg,var(--accent),var(--accent-deep))}
.gfmb-c360 .hadi__it b{display:block;font-size:1.3rem;letter-spacing:-.01em;color:var(--ink-100)}
.gfmb-c360 .hadi__it span{display:block;font-size:1.15rem;color:var(--ink-60)}

/* ---------------- «Типичный путь клиента» (светлый, 1:1 с оригиналом) ---------------- */
.gfmb-c360 .jc{min-width:98rem;--vio:#7B78F0;--vio-deep:#5A57D6}
.gfmb-c360 .jc-scroll{overflow-x:auto}
.gfmb-c360 .jc__miles{position:relative;height:7.4rem;margin-left:6.2rem}
.gfmb-c360 .jc__m{position:absolute;transform:translateX(-50%);text-align:center;width:12.6rem}
.gfmb-c360 .jc__m--first{transform:none;text-align:left}
.gfmb-c360 .jc__m--last{transform:translateX(-100%);text-align:right;width:16rem}
.gfmb-c360 .jc__m b{display:block;font-size:1.45rem;font-weight:700;letter-spacing:-.01em;color:var(--ink-100)}
.gfmb-c360 .jc__m span{display:block;font-size:1.02rem;line-height:1.35;color:var(--ink-60);margin-top:.3rem}
.gfmb-c360 .jc__m i{display:block;width:0;height:0;border:.55rem solid transparent;border-top-color:var(--ink-40);margin:.5rem auto 0}
.gfmb-c360 .jc__m--first i{margin-left:1.4rem}
.gfmb-c360 .jc__m--last i{margin-right:1.4rem;margin-left:auto}
.gfmb-c360 .jc__lane{display:flex;gap:1rem;margin-top:1rem}
.gfmb-c360 .jc__ln{flex-shrink:0;width:5.2rem;border-radius:.8rem;display:flex;align-items:center;justify-content:center}
.gfmb-c360 .jc__ln span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:1.05rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.gfmb-c360 .jc__ln--tech{background:var(--a-12)}
.gfmb-c360 .jc__ln--tech span{color:var(--accent-deep)}
.gfmb-c360 .jc__ln--biz{background:rgba(123,120,240,.14)}
.gfmb-c360 .jc__ln--biz span{color:var(--vio-deep)}
.gfmb-c360 .jc__panel{position:relative;flex:1;border:1px solid var(--line);border-radius:.8rem;background:var(--bg-alt);padding:1.8rem 1.6rem;display:grid;grid-template-columns:repeat(20,1fr)}
.gfmb-c360 .jc__panel::before,.gfmb-c360 .jc__panel::after{content:"";position:absolute;top:0;bottom:0;border-left:1px dashed var(--line)}
.gfmb-c360 .jc__panel::before{left:47%}
.gfmb-c360 .jc__panel::after{left:60%}
.gfmb-c360 .jc__guide{position:absolute;top:0;bottom:0;left:75%;border-left:1px dashed var(--line)}
.gfmb-c360 .jc__it{position:relative;z-index:1;grid-row:1;margin-top:calc(var(--i)*2.4rem);padding-right:1rem;min-width:0}
.gfmb-c360 .jc__bar{height:1.2rem;border-radius:.6rem;background:var(--accent);margin-bottom:.7rem}
.gfmb-c360 .jc__bar--fade{background:linear-gradient(90deg,var(--accent) 70%,var(--a-20))}
.gfmb-c360 .jc__it b{display:block;font-size:1.2rem;font-weight:700;line-height:1.3;color:var(--accent-deep)}
.gfmb-c360 .jc__it span{display:block;font-size:1.05rem;line-height:1.4;color:var(--ink-60);margin-top:.4rem}
.gfmb-c360 .jc--biz .jc__bar{background:var(--vio)}
.gfmb-c360 .jc--biz .jc__bar--fade{background:linear-gradient(90deg,var(--vio) 70%,rgba(123,120,240,.25))}
.gfmb-c360 .jc--biz .jc__it b{color:var(--vio-deep)}
.gfmb-c360 .jc__phases{display:flex;gap:1rem;margin-top:1rem;margin-left:6.2rem}
.gfmb-c360 .jc__ph{border:1px solid var(--line);border-radius:.8rem;background:var(--bg-alt);padding:1.3rem;text-align:center;font-family:var(--mono);font-size:1.15rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60)}

/* ---------------- Команда: сгенерированные аватары ---------------- */
.gfmb-c360 .tmember__ph{background:#DBEAFE}

/* ---------------- Кейсы с крупными цифрами ---------------- */
.gfmb-c360 .bigcases{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
@media(max-width:960px){.gfmb-c360 .bigcases{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.gfmb-c360 .bigcases{grid-template-columns:1fr}}
.gfmb-c360 .bcase{border:1px solid var(--line);border-radius:.8rem;background:#fff;padding:2.4rem;display:flex;flex-direction:column;gap:1.1rem;box-shadow:0 1px 3px rgba(20,23,40,.05);transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s}
.gfmb-c360 .bcase:hover{border-color:var(--line-a);transform:translateY(-3px);box-shadow:0 8px 26px rgba(var(--accent-rgb),.12)}
.gfmb-c360 .bcase__m{font-family:var(--mono);font-size:clamp(3.4rem,5vw,4.6rem);font-weight:500;letter-spacing:-.04em;color:var(--accent);line-height:1}
.gfmb-c360 .bcase__what{font-size:1.35rem;font-weight:600;color:var(--ink-100)}
.gfmb-c360 .bcase__d{font-size:1.25rem;line-height:1.5;color:var(--ink-60);flex:1}
.gfmb-c360 .bcase__f{display:flex;align-items:center;gap:1rem;margin-top:.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
/* Лого клиентов в теме — белые SVG → тёмный силуэт на светлом чипе. */
.gfmb-c360 .bcase__logo{display:flex;align-items:center;justify-content:center;height:3.4rem;min-width:7.6rem;padding:.5rem 1rem;border-radius:.5rem;background:var(--bg-alt);border:1px solid var(--line)}
.gfmb-c360 .bcase__logo img{max-height:2rem;max-width:9rem;width:auto;object-fit:contain;filter:brightness(0) opacity(.78)}
.gfmb-c360 .bcase__logo b{color:var(--ink-100);font-size:1.3rem}
.gfmb-c360 .bcase__vert{margin-left:auto;font-family:var(--mono);font-size:.95rem;padding:.3rem .8rem;border-radius:99rem;background:var(--a-08);color:var(--accent);border:1px solid var(--line-a);white-space:nowrap}

/* ---------------- Этапы: 3 карточки в ряд ---------------- */
.gfmb-c360 .flight{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
@media(max-width:960px){.gfmb-c360 .flight{grid-template-columns:1fr}}

/* ---------------- Двойной CTA ---------------- */
.gfmb-c360 .dualcta{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
@media(max-width:820px){.gfmb-c360 .dualcta{grid-template-columns:1fr}}
.gfmb-c360 .dcta{border:1px solid var(--line);border-radius:.8rem;background:#fff;padding:3rem;display:flex;flex-direction:column;gap:1.2rem;box-shadow:0 1px 3px rgba(20,23,40,.05)}
.gfmb-c360 .dcta--hot{background:linear-gradient(150deg,#0E1017,#1A2030);border-color:transparent;color:#fff}
.gfmb-c360 .dcta--hot .dcta__t{color:#fff}
.gfmb-c360 .dcta--hot .dcta__d{color:rgba(243,243,255,.66)}
.gfmb-c360 .dcta__k{font-family:var(--mono);font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.gfmb-c360 .dcta__t{font-size:2.1rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink-100)}
.gfmb-c360 .dcta__d{font-size:1.4rem;line-height:1.6;color:var(--ink-60);flex:1}
.gfmb-c360 .dcta .btn{align-self:flex-start;margin-top:.6rem}