/* ═══════════════════════════════════════════════════════════════════════
   RAGIMOFF · ATLAS — design system v4
   ───────────────────────────────────────────────────────────────────────
   Один файл = один источник стиля. Меняешь токен ниже — меняется весь сайт.

   Язык: клинический атлас. Нумерованные разделы, волосяные линейки-скелет,
   огромная антиква как основной носитель смысла, фигуры людей на разных
   глубинах «пластины».

   Шрифты: Cormorant Garamond (антиква, дисплей)
           IBM Plex Sans (рабочий, интерфейс)
   Montserrat из старой системы сознательно снят — он читался как стартап,
   а не как клиника. Inter запрещён (чёрный список заказчика).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1. ТОКЕНЫ ─────────────────────────────── */

:root {
  /* — ось света — */
  --ink:        #05141f;   /* глубокая синь — база тёмных разделов */
  --ink-2:      #0a2030;
  --ink-3:      #0f2a3c;
  --paper:      #f7f4ef;   /* тёплая бумага — база светлых разделов     */
  --paper-2:    #efeade;
  --paper-3:    #e4dccc;

  /* — металл — */
  --gold:       #c9a961;   /* на тёмном: контраст заведомо высокий */
  --gold-lo:    #a8873f;
  --gold-hi:    #e7d3a1;
  --bronze:     #8a6a34;
  --gold-ink:   #7d5f2c;   /* золото мелким текстом на бумаге — 5.4:1 (AA)  */
  --gold-ink-lg:#9a7838;   /* золото крупным текстом на бумаге — 3.4:1 (AA large) */

  /* — текст — */
  --tx:         #0b1e2a;
  --tx-soft:    #3c5162;
  --tx-mute:    #52636f;
  --tx-on-ink:  #eef4f7;
  --tx-on-ink-soft: rgba(238,244,247,.72);
  --tx-on-ink-mute: rgba(238,244,247,.62);

  /* — линейки — */
  --rule:       rgba(11,30,42,.16);
  --rule-2:     rgba(11,30,42,.08);
  --rule-ink:   rgba(238,244,247,.16);
  --rule-ink-2: rgba(238,244,247,.08);
  --rule-gold:  rgba(201,169,97,.5);

  /* — типографика — */
  --antiqua: "Cormorant Garamond", "Times New Roman", serif;
  --sans:    "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  /* одна строка замены, если владелец захочет вернуть брендовый гротеск:
     --sans: "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif; */

  --fs-plate: clamp(2.9rem, min(11.8vw, 16.8vh), 10.6rem);  /* hero-пластина */
  --fs-h1:    clamp(2.7rem, 7.4vw, 6.4rem);
  --fs-h2:    clamp(2.1rem, 5vw, 4.4rem);
  --fs-h3:    clamp(1.4rem, 2.4vw, 2.1rem);
  --fs-h4:    clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-lead:  clamp(1.02rem, 1.15vw, 1.22rem);
  --fs-body:  1rem;
  --fs-sm:    .875rem;
  --fs-cap:   .72rem;     /* микро-капс, нумерация, метки */

  --lh-plate: .86;
  --lh-title: .98;
  --lh-body:  1.68;
  --ls-cap:   .2em;

  /* — пространство — */
  --gut:   clamp(20px, 4.4vw, 64px);      /* боковые поля                 */
  --sec-y: clamp(84px, 11vw, 190px);      /* вертикальный ритм разделов   */
  --maxw:  1560px;
  --read:  62ch;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* — движение — */
  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-soft: cubic-bezier(.22,.61,.36,1);
  --e-io:   cubic-bezier(.65,.05,.36,1);
  --t-fast: .28s;
  --t-mid:  .55s;
  --t-slow: .9s;

  --r:   3px;             /* радиусы почти прямые — это атлас, не «карточки» */
  --r-lg: 6px;

  --sh: 0 1px 2px rgba(5,20,31,.05), 0 14px 40px -18px rgba(5,20,31,.35);
}

/* ─────────── акцент переключается вместе с разделом ───────────
   На тёмном золото яркое, на бумаге — бронзовое: тот же металл, но
   проходящий по контрасту. Один токен меняет все акценты сразу. */

:root {
  --accent-txt: var(--gold);
  --accent-lg:  var(--gold);
  --lead-txt:   var(--tx-on-ink-soft);
}
.sec--ink, .hero, .mq, .stats, .svc, .vault, .cta, .ft, .sheet, .palette {
  --accent-txt: var(--gold);
  --accent-lg:  var(--gold);
  --lead-txt:   var(--tx-on-ink-soft);
}
.sec--paper, .sec--paper2 {
  --accent-txt: var(--gold-ink);
  --accent-lg:  var(--gold-ink-lg);
  --lead-txt:   var(--tx-soft);
}

/* ─────────────────────────── 2. СБРОС ──────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--tx-on-ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }

::selection { background: var(--gold); color: var(--ink); }

.skip-link {
  position: absolute;
  left: var(--s4); top: -100px;
  z-index: 9500;
  padding: 12px 20px;
  background: var(--gold); color: var(--ink);
  border-radius: var(--r);
  font-size: var(--fs-cap); font-weight: 600;
  letter-spacing: var(--ls-cap); text-transform: uppercase;
  transition: top var(--t-fast) var(--e-out);
}
.skip-link:focus { top: var(--s4); }

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

/* ─────────────────────────── 3. ТИПОГРАФИКА ────────────────────────── */

.disp {
  font-family: var(--antiqua);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: -.015em;
}
.disp em { font-style: italic; }

.cap {
  font-size: var(--fs-cap);
  font-weight: 500;
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  line-height: 1.4;
}

.rule-x { height: 1px; background: var(--rule); border: 0; }
.rule-x--ink { background: var(--rule-ink); }

/* ─────────────────────────── 4. КНОПКИ ─────────────────────────────── */

.btn {
  --bg: transparent; --fg: currentColor; --bd: currentColor;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 52px;
  padding: 0 var(--s6);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out),
              transform var(--t-fast) var(--e-out);
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform var(--t-mid) var(--e-out);
  z-index: -1;
}
.btn:hover { color: var(--ink); border-color: var(--gold); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(1px); }

.btn svg { width: 15px; height: 15px; flex: none; }

.btn--gold { --bg: var(--gold); --fg: var(--ink); --bd: var(--gold); }
.btn--gold::before { background: var(--ink); }
.btn--gold:hover { color: var(--gold); border-color: var(--ink); }

.btn--ink { --fg: var(--ink); --bd: var(--rule); }
.btn--ink:hover { border-color: var(--gold); }

.btn--onink { --fg: var(--tx-on-ink); --bd: var(--rule-ink); }
.btn--onink::before { background: var(--gold); }
.btn--onink:hover { color: var(--ink); border-color: var(--gold); }

/* ссылка-стрелка */
.arrowlink {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-size: var(--fs-cap); font-weight: 600;
  letter-spacing: var(--ls-cap); text-transform: uppercase;
  padding-bottom: 6px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-mid) var(--e-out), color var(--t-fast);
}
.arrowlink svg { width: 16px; height: 16px; transition: transform var(--t-mid) var(--e-out); }
.arrowlink:hover { color: var(--gold); background-size: 0 1px; }
.arrowlink:hover svg { transform: translateX(6px); }

/* ─────────────────────────── 5. КУРСОР ─────────────────────────────── */

.cur { display: none; }

@media (hover: hover) and (pointer: fine) {
  .cur {
    display: block;
    position: fixed; top: 0; left: 0;
    width: 0; height: 0;
    z-index: 9000;
    pointer-events: none;
    mix-blend-mode: difference;
  }
  .cur__ring {
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    transition: width var(--t-mid) var(--e-out),
                height var(--t-mid) var(--e-out),
                margin var(--t-mid) var(--e-out),
                opacity var(--t-fast), border-radius var(--t-mid) var(--e-out);
    will-change: transform;
  }
  .cur__dot {
    position: absolute; top: 0; left: 0;
    width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
    background: #fff; border-radius: 50%;
    will-change: transform;
  }
  .cur__txt {
    font-size: 9px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: #fff; opacity: 0;
    transition: opacity var(--t-fast); white-space: nowrap;
  }

  /* состояния */
  .cur.is-link .cur__ring { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .cur.is-label .cur__ring {
    width: 92px; height: 92px; margin: -46px 0 0 -46px;
    border-radius: 50%;
  }
  .cur.is-label .cur__txt { opacity: 1; }
  .cur.is-label .cur__dot { opacity: 0; }
  .cur.is-down .cur__ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }

  html.has-cur, html.has-cur * { cursor: none !important; }
}

/* ─────────────────────────── 6. ЗЕРНО И РЕЛЬС ──────────────────────── */

.grain {
  position: fixed; inset: 0;
  z-index: 8000;
  pointer-events: none;
  overflow: hidden;   /* зерно шире вьюпорта, но прокрутки не создаёт */
}
.grain::before {
  content: "";
  position: absolute; inset: -50%;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grainShift 8s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-3%,2%); }
  40%  { transform: translate(2%,-3%); }
  60%  { transform: translate(-2%,-2%); }
  80%  { transform: translate(3%,1%); }
  100% { transform: translate(0,0); }
}

.rail {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 7000;
  background: var(--rule-ink-2);
  pointer-events: none;
}
.rail__fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
  transform-origin: 0 50%;
}

/* ─────────────────────────── 7. ШАПКА ──────────────────────────────── */

.hdr {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 6000;
  transition: transform var(--t-mid) var(--e-out),
              background-color var(--t-mid) var(--e-out),
              border-color var(--t-mid) var(--e-out),
              backdrop-filter var(--t-mid);
  border-bottom: 1px solid transparent;
}
.hdr__in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  height: 84px;
  display: flex;
  align-items: center;
  gap: var(--s6);
  transition: height var(--t-mid) var(--e-out);
}
.hdr.is-stuck {
  background: rgba(5,20,31,.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--rule-ink);
}
.hdr.is-stuck .hdr__in { height: 66px; }
.hdr.is-hidden { transform: translateY(-101%); }

/* на светлых разделах шапка переодевается */
.hdr.is-onlight { color: var(--tx); }
.hdr.is-onlight.is-stuck {
  background: rgba(247,244,239,.9);
  border-bottom-color: var(--rule);
}

.hdr__logo { display: flex; flex-direction: column; gap: 1px; flex: none; }
.hdr__mark {
  font-family: var(--antiqua);
  font-size: 1.6rem; font-weight: 600;
  letter-spacing: .01em; line-height: 1;
}
.hdr__mark em { font-style: normal; color: var(--gold); }
.hdr__sub {
  font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; opacity: .55;
}

.hdr__nav { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
.hdr__link {
  position: relative;
  display: flex; align-items: baseline; gap: 6px;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  font-weight: 400;
  opacity: .78;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.hdr__link i {
  font-style: normal;
  font-size: 9px; letter-spacing: .1em;
  color: var(--gold);
  opacity: .85;
  transform: translateY(-4px);
}
.hdr__link::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-mid) var(--e-out);
}
.hdr__link:hover { opacity: 1; }
.hdr__link:hover::after { transform: scaleX(1); }

.hdr__side { display: flex; align-items: center; gap: var(--s4); flex: none; }

.hdr__lang { display: flex; align-items: center; gap: 2px; }
.hdr__lang a {
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  padding: 5px 7px; opacity: .45; border-radius: 2px;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.hdr__lang a:hover { opacity: .9; }
.hdr__lang a.is-on { opacity: 1; color: var(--gold); }

.hdr__ico {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--rule-ink);
  border-radius: 50%;
  transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.hdr.is-onlight .hdr__ico { border-color: var(--rule); }
.hdr__ico:hover { border-color: var(--gold); color: var(--gold); }
.hdr__ico svg { width: 15px; height: 15px; }

.hdr__burger { display: none; }
.hdr__burger span {
  display: block; width: 22px; height: 1.5px;
  background: currentColor; margin: 5px 0;
  transition: transform var(--t-mid) var(--e-out), opacity var(--t-fast);
}
.hdr__burger.is-on span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hdr__burger.is-on span:nth-child(2) { opacity: 0; }
.hdr__burger.is-on span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1100px) {
  .hdr__nav, .hdr__lang { display: none; }
  .hdr__side { margin-left: auto; gap: var(--s3); }
  .hdr__burger { display: block; }
}
@media (max-width: 620px) {
  .hdr__in { height: 74px; gap: var(--s3); }
  .hdr.is-stuck .hdr__in { height: 62px; }
  .hdr__cta { display: none; }
  .hdr__mark { font-size: 1.35rem; }
}

/* ─────────────────────────── 8. МОБИЛЬНОЕ МЕНЮ ─────────────────────── */

.sheet {
  position: fixed; inset: 0;
  z-index: 5900;
  background: var(--ink);
  padding: 110px var(--gut) var(--s8);
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--e-out);
  visibility: hidden;
}
.sheet.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.sheet__nav { display: flex; flex-direction: column; }
.sheet__link {
  display: flex; align-items: baseline; gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule-ink);
  font-family: var(--antiqua);
  font-size: clamp(1.9rem, 8vw, 2.8rem);
  line-height: 1;
  transition: color var(--t-fast), padding-left var(--t-mid) var(--e-out);
}
.sheet__link i {
  font-family: var(--sans); font-style: normal;
  font-size: 10px; letter-spacing: .12em; color: var(--gold);
}
.sheet__link:hover, .sheet__link:focus-visible { color: var(--gold); padding-left: var(--s3); }
.sheet__sub { padding: var(--s5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); }
.sheet__sub a {
  font-size: var(--fs-sm); color: var(--tx-on-ink-soft);
  border-bottom: 1px solid var(--rule-ink); padding-bottom: 3px;
}
.sheet__foot { margin-top: var(--s7); display: flex; flex-direction: column; gap: var(--s4); }
.sheet__langs { display: flex; gap: var(--s4); }
.sheet__langs a { font-size: var(--fs-cap); letter-spacing: var(--ls-cap); opacity: .55; }
.sheet__langs a.is-on { opacity: 1; color: var(--gold); }

/* ─────────────────────────── 9. ОБОЛОЧКА РАЗДЕЛА ───────────────────── */

.sec { position: relative; padding: var(--sec-y) 0; }
.sec--ink   { background: var(--ink);   color: var(--tx-on-ink); }
.sec--paper { background: var(--paper); color: var(--tx); }
.sec--paper2{ background: var(--paper-2); color: var(--tx); }
.sec--tight { padding-top: 0; }

.sec__in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.sec__head { display: grid; gap: var(--s5); margin-bottom: var(--s8); }

.sec__kicker {
  display: flex; align-items: center; gap: var(--s4);
  color: var(--accent-txt);
}
.sec__kicker .n {
  font-family: var(--antiqua);
  font-size: 1.05rem; font-style: italic;
  letter-spacing: .02em;
}
.sec__kicker .t { font-size: var(--fs-cap); font-weight: 600; letter-spacing: var(--ls-cap); text-transform: uppercase; }
.sec__kicker .ln { flex: 1; height: 1px; background: var(--rule-gold); }

.sec__title {
  font-family: var(--antiqua);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: -.02em;
  max-width: 18ch;
  text-wrap: balance;
}
.sec__title em { font-style: italic; color: var(--accent-lg); }

.sec__lead {
  max-width: var(--read);
  color: var(--lead-txt);
  font-size: var(--fs-lead);
}

.sec__head--split {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: var(--s8);
}
@media (max-width: 900px) { .sec__head--split { grid-template-columns: 1fr; gap: var(--s5); } }