/* ==========================================================================
   MEDICI — чёрный, золото, масло
   ========================================================================== */
:root {
  /* тёмные «залы» — лазурит */
  --ink: #13213f;
  --ink-2: #172a4f;
  --ink-3: #1d3260;
  --ink-4: #24396b;
  --line: rgba(212, 175, 98, 0.18);
  --line-2: rgba(212, 175, 98, 0.34);
  --gold: #d4af62;
  --gold-hi: #f0d79a;
  --gold-lo: #8c6a2c;
  --on-gold: #1a1408;
  --ivory: #f3ead8;
  --text: #ece4d2;
  --text-2: #b9c1d6;
  --text-3: #8a95b3;
  --sky: #9fc4dc;
  --emerald: #4fb38a;
  --amber: #d9a441;
  --vermilion: #d0644a;

  --c-buy: #6fd3a3;
  --c-consider: #d4af62;
  --c-hold: #aeb8cf;
  --c-risk: #e07a5f;

  --f-display: 'Forum', 'Times New Roman', serif;
  --f-ui: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --radius: 2px;
  --r-card: 22px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

/* светлые «страницы» — фреска: пергамент и небо. Те же переменные, другие значения —
   все компоненты внутри перекрашиваются сами */
.is-light {
  --ink: #f6ecdf;
  --ink-2: #efe1cf;
  --ink-3: #e8d6c0;
  --ink-4: #dfcab0;
  --line: rgba(122, 85, 32, 0.18);
  --line-2: rgba(122, 85, 32, 0.34);
  --gold: #a77a32;
  --gold-hi: #8a6424;
  --gold-lo: #c9a86a;
  --ivory: #2a221c;
  --text: #2f2620;
  --text-2: #5e4f43;
  --text-3: #8a7a6b;
  --c-buy: #1d7a52;
  --c-consider: #a77a32;
  --c-hold: #6b5b4e;
  --c-risk: #b5402a;
  color-scheme: light;
  background: var(--ink);
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* место под полосу прокрутки зарезервировано всегда: когда прокрутку блокирует заставка или досье, страница не сужается и не дёргается */
html { scrollbar-gutter: stable; }
body.is-loading { overflow: hidden; }
body.modal-open { overflow: hidden; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--gold); color: var(--on-gold); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
em, i { font-style: normal; }
code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .9em; color: var(--gold-hi); background: rgba(212,175,98,.08); padding: 1px 6px; border: 1px solid var(--line); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- Типографика ---------- */
.h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 4.8vw, 72px);
  line-height: 1.06;
  letter-spacing: 0;
  margin: 0 0 24px;
  color: var(--ivory);
}
.h2 em, .h3 em, .finale__title em, .gold { color: var(--gold); font-weight: 400; }
.h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3vw, 42px); margin: 0 0 28px; color: var(--ivory); }
.lead { font-size: clamp(16px, 1.25vw, 19px); color: var(--text-2); max-width: 620px; margin: 0 0 32px; line-height: 1.7; }
.muted { color: var(--text-3); }
.eyebrow {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--f-display); font-size: 14px; letter-spacing: .26em; text-transform: uppercase; font-weight: 400;
  color: var(--gold); margin: 0 0 22px;
}
/* римский меандр вместо черты */
.eyebrow .line { flex: none; width: 60px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M0 11H20M16 11V1H5V8H12V4.5H8.5' fill='none' stroke='%23d4af62' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x left center / 20px 12px; opacity: .9; }
.is-light .eyebrow .line { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M0 11H20M16 11V1H5V8H12V4.5H8.5' fill='none' stroke='%23a77a32' stroke-width='1.2'/%3E%3C/svg%3E"); }
/* шапка секции: заголовок слева, пояснение справа; снизу — «воздух» до содержимого */
.section-head { margin: 0 0 clamp(34px, 3.4vw, 54px); }
.section-head--row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46ch); align-items: end; column-gap: clamp(32px, 5vw, 96px); row-gap: 18px; }
.section-head--row .h2 { margin-bottom: 0; }
.section-head--row .lead { margin: 0; max-width: 46ch; padding-bottom: .35em; }
.section-head .eyebrow { margin-bottom: 18px; }
@media (max-width: 1100px) {
  .section-head--row { grid-template-columns: minmax(0, 1fr); }
}
.eyebrow--center { justify-content: center; }
.eyebrow--center .line:last-child { transform: scaleX(-1); }

/* ---------- Кнопки ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  height: 54px; padding: 0 28px;
  font-size: 15.5px; font-weight: 500; letter-spacing: 0;
  border-radius: 999px; overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
  white-space: nowrap;
}
.btn i { font-style: normal; font-size: 16px; transition: transform .5s var(--ease); }
.btn:hover i { transform: translateX(5px); }
.btn--gold {
  color: var(--on-gold);
  background: linear-gradient(115deg, #b98d3c 0%, #f1d595 38%, #c9a052 62%, #f3dca4 100%);
  background-size: 220% 100%;
  box-shadow: 0 10px 40px -12px rgba(212,175,98,.55), inset 0 1px 0 rgba(255,255,255,.35);
  animation: sheen 6s linear infinite;
}
.btn--gold::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ink); transform: translateY(101%); transition: transform .6s var(--ease);
}
.btn--gold:hover { color: var(--gold-hi); }
.btn--gold:hover::after { transform: translateY(0); }
@keyframes sheen { to { background-position: -220% 0; } }
.btn--ghost { color: var(--ivory); border: 1px solid var(--line-2); backdrop-filter: blur(6px); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-hi); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 14px; }
.btn:disabled { opacity: .3; pointer-events: none; }
.linklike { text-align: left; color: var(--ivory); border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.linklike:hover { color: var(--gold-hi); border-color: var(--gold); }

/* ---------- Зерно плёнки ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- Курсор ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
  width: 0; height: 0; opacity: 0; transition: opacity .3s;
}
.cursor.is-on { opacity: 1; }
.cursor span {
  position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--gold); transition: transform .4s var(--ease), background .4s, border-color .4s;
  mix-blend-mode: difference;
}
.cursor.is-link span { transform: scale(2.1); background: rgba(212,175,98,.12); border-color: var(--gold-hi); }
@media (pointer: fine) { body.is-loaded, body.is-loaded a, body.is-loaded button { cursor: none; } body.is-loaded input, body.is-loaded select { cursor: auto; } }

/* ---------- Прелоадер ---------- */
.loader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; }
.loader__curtain { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--ink); z-index: 0; }
.loader__curtain--l { left: 0; background: linear-gradient(90deg, #0d1730 60%, #172a4f); }
.loader__curtain--r { right: 0; background: linear-gradient(-90deg, #0d1730 60%, #172a4f); }
.loader__inner { position: relative; z-index: 1; text-align: center; }
.loader__seal { width: 96px; height: 96px; margin: 0 auto 26px; display: block; }
.seal-ring { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 360; }
.seal-ring--thin { stroke-width: .5; opacity: .5; }
.seal-m { fill: none; stroke: var(--gold-hi); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 200; }
.loader__word { font-family: var(--f-display); font-size: clamp(21px, 5.6vw, 44px); letter-spacing: .5em; padding-left: .5em; color: var(--ivory); font-weight: 300; white-space: nowrap; }
.loader__word span:nth-child(-n+2) { margin-right: -.32em; } /* «К-» плотнее, как одно целое */
.loader__word span { display: inline-block; will-change: transform, opacity; }
.loader__motto { font-family: var(--f-display); color: var(--gold); font-size: 17px; margin-top: 6px; }
.loader__count { margin-top: 40px; font-size: 11px; letter-spacing: .3em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.loader__count span::after { content: '%'; }

/* ---------- Бегущая строка (вариант Б) ---------- */
.tape { display: flex; background: #0d1730; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); position: relative; z-index: 60; }
.tape__lbl { flex: none; display: flex; align-items: center; gap: 8px; padding: 9px 16px; color: var(--ivory); border-right: 1px solid var(--line); white-space: nowrap; }
.tape__lbl i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.tape__lbl.is-live i { background: var(--c-buy); box-shadow: 0 0 0 4px rgba(111, 211, 163, .2); animation: livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 7px rgba(111, 211, 163, 0); } }
.tape__view { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tape__track { display: inline-flex; gap: 32px; padding: 9px 0; white-space: nowrap; animation: tape 90s linear infinite; }
.tape__view:hover .tape__track { animation-play-state: paused; }
@keyframes tape { to { transform: translateX(-50%); } }
.tk { display: inline-flex; gap: 8px; color: inherit; font-variant-numeric: tabular-nums; }
.tk b { color: var(--ivory); font-weight: 600; }
.tk .up { color: var(--c-buy); } .tk .dn { color: var(--c-risk); }

/* ---------- Навигация: плавающая «пилюля» (вариант Б) ---------- */
.nav { position: sticky; top: 12px; z-index: 100; display: flex; justify-content: center; padding: 0 var(--pad); margin-top: 12px; pointer-events: none; }
.nav__pill { pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 16px; border-radius: 999px;
  background: rgba(19, 33, 63, .78); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--line-2); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); max-width: 100%; }
.nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 18px; letter-spacing: .32em; color: var(--ivory); margin-right: 10px; white-space: nowrap; }
.nav__seal { width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; }
.nav__seal circle { stroke-width: 2; }
.nav__logo .brand-k, .footer__brand .brand-k { letter-spacing: .1em; } /* «К-» плотнее, как одно целое */
.nav__links { display: flex; gap: 2px; }
.nav__links a { padding: 8px 13px; border-radius: 999px; font-size: 14.5px; color: var(--text-2); white-space: nowrap; transition: background .2s, color .2s; }
.nav__links a:hover { background: rgba(243, 234, 216, .08); color: var(--ivory); }
.nav__cta { margin-left: 6px; height: 42px; }
@media (max-width: 1180px) { .nav__links { display: none; } }
@media (max-width: 560px) { .nav__pill { width: 100%; justify-content: space-between; } .nav__logo span { letter-spacing: .2em; } .nav__cta { padding: 0 14px; } }
.nav__cta-short { display: none; }
/* узкий телефон: длинное «К-ИНВЕСТИЦИИ» + полная кнопка не помещаются в «пилюлю» — кнопку сокращаем */
@media (max-width: 420px) { .nav__cta-full { display: none; } .nav__cta-short { display: inline; } .nav__logo { font-size: 16px; } }

/* ==========================================================================
   ГЛАВНЫЙ ЭКРАН — «плитки» (вариант Б), в большой плитке живая картина (наш шейдер)
   ========================================================================== */
.hero { padding: 22px 0 clamp(40px, 6vw, 80px); }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.b { position: relative; border-radius: var(--r-card); overflow: hidden; }
.b-art { grid-column: span 8; grid-row: span 2; min-height: min(78vh, 720px); display: flex; align-items: flex-end; background: #0a1226; }
.hero__gl, .hero__fallback, .hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__gl { opacity: 0; transition: opacity 1s; }
.hero__gl.is-ready { opacity: 1; }
.hero__fallback { display: none; background-size: cover; background-position: 60% 50%; filter: saturate(1.05) brightness(.8); animation: kenburns 30s ease-in-out infinite alternate; }
.hero__fallback.is-on { display: block; }
@keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.18) translate(-2%, 1%); } }
.hero__dust { pointer-events: none; }
.b-art::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(12deg, rgba(13,23,48,.96) 8%, rgba(13,23,48,.62) 42%, rgba(13,23,48,0) 72%); }
.b-art__in { position: relative; z-index: 1; padding: clamp(24px, 3.4vw, 48px); display: grid; gap: 20px; max-width: 720px; }
.b-art__in .eyebrow { margin: 0; }
.b-art h1 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 5.6vw, 84px); line-height: 1; color: var(--ivory); }
.b-art .lead { margin: 0; color: #d6dcea; max-width: 56ch; }
.b-art__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.b-art__cap { position: absolute; z-index: 1; right: 20px; top: 18px; font-family: var(--f-display); font-size: 13px; color: rgba(243, 234, 216, .65); }

.b-idx { grid-column: span 4; background: linear-gradient(160deg, var(--ink-4), var(--ink-2)); border: 1px solid var(--line-2); padding: 22px; display: grid; gap: 16px; align-content: start; }
.idx-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--text-2); }
.idx-dots { display: flex; gap: 5px; }
.idx-dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(243, 234, 216, .22); transition: width .3s var(--ease), background .3s; }
.idx-dots button[aria-current="true"] { width: 22px; border-radius: 4px; background: var(--gold); }
.idx-main { display: flex; gap: 18px; align-items: center; }
.idx-name { font-family: var(--f-display); font-size: 24px; color: var(--ivory); line-height: 1.15; }
.idx-name small { display: block; font-family: var(--f-ui); font-size: 13.5px; color: var(--gold); margin-top: 3px; }
.tier { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 10px; border-radius: 999px; background: rgba(243, 234, 216, .08); margin-top: 10px; }
.tier i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.idx-chart svg { width: 100%; height: 64px; display: block; }
.idx-chart .ln { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.idx-chart p { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-3); margin: 2px 0 0; }
.b-idx .btn { justify-self: stretch; justify-content: center; }

.gauge { position: relative; width: 118px; height: 118px; flex: none; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 9; }
.gauge .v { transition: stroke-dashoffset 1.2s var(--ease), stroke .4s; }
.gauge b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-weight: 400; font-size: 40px; color: var(--ivory); }

/* светлая плитка «фреска»: лидеры роста и снижения */
.b-mov { grid-column: span 4; background: linear-gradient(180deg, #dcebf4, #f6ecdf 55%); color: #2a221c; padding: 22px; display: grid; gap: 12px; align-content: start; }
.mov-h { display: flex; justify-content: space-between; align-items: baseline; }
.mov-h b { font-family: var(--f-display); font-weight: 400; font-size: 21px; }
.mov-h span { font-size: 12.5px; color: #8a7a6b; }
.mov-list { display: grid; gap: 2px; }
.mov { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; margin: 0 -10px; border-radius: 12px; text-align: left; color: #2a221c; transition: background .2s; }
.mov:hover { background: rgba(42, 34, 28, .06); }
.mov small { display: block; font-size: 12.5px; color: #8a7a6b; }
.mov .n { text-align: right; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.mov .n i { display: block; font-size: 12.5px; }
.mov .n i.up { color: #1d7a52; } .mov .n i.dn { color: #b5402a; }
.mov .badge { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; padding: 0; font-size: 9.5px; letter-spacing: .02em; font-weight: 600; color: #f6ecdf; background: #13213f; border: 0; }

.b-stats { grid-column: span 12; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(243, 234, 216, .04); border: 1px solid var(--line); }
.b-stats div { padding: 20px; text-align: center; }
.b-stats div + div { border-left: 1px solid var(--line); }
.b-stats b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, 3.6vw, 52px); line-height: 1; color: var(--gold-hi); }
.b-stats span { font-size: 14px; color: var(--text-2); }
@media (max-width: 1000px) { .b-art { grid-column: span 12; min-height: 560px; } .b-idx, .b-mov { grid-column: span 6; } }
@media (max-width: 640px) {
  .b-idx, .b-mov { grid-column: span 12; }
  .b-art { min-height: 620px; }
  .b-stats { grid-template-columns: repeat(2, 1fr); }
  .b-stats div:nth-child(3) { border-left: 0; }
  .b-stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ==========================================================================
   МАНИФЕСТ
   ========================================================================== */
.manifesto { padding: clamp(80px, 12vw, 180px) 0; position: relative; }
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; margin-bottom: clamp(70px, 9vw, 140px); }
.marquee__track { display: flex; gap: 48px; width: max-content; animation: marquee 38s linear infinite; align-items: center; }
.marquee span { font-family: var(--f-display); font-size: clamp(40px, 6vw, 88px); font-weight: 300; color: transparent; -webkit-text-stroke: 1px rgba(212,175,98,.55); line-height: 1; }
.marquee b { color: var(--gold); font-size: 22px; font-weight: 400; }
@keyframes marquee { to { transform: translateX(-50%); } }
.manifesto__text { font-family: var(--f-display); font-weight: 300; font-size: clamp(28px, 3.6vw, 56px); line-height: 1.22; color: var(--ivory); max-width: 1180px; margin: 0; }
.manifesto__text .w { display: inline; }

/* ==========================================================================
   РАМКИ КАРТИН
   ========================================================================== */
.frame { position: relative; margin: 0; overflow: hidden; background: var(--ink-3); border-radius: var(--r-card); }
.frame::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(212,175,98,.35), inset 0 0 0 10px rgba(13,23,48,.55), inset 0 0 0 11px rgba(212,175,98,.25), inset 0 0 120px rgba(0,0,0,.6); }
.frame__img { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: saturate(1) contrast(1.04) brightness(1.06); }
.frame figcaption { position: absolute; left: 22px; bottom: 18px; z-index: 2; font-family: var(--f-display); font-size: 14px; color: var(--ivory); text-shadow: 0 1px 12px rgba(0,0,0,.9); }
.frame--tall { aspect-ratio: 4 / 5; }
.frame--wide { aspect-ratio: 16 / 13; }

/* ==========================================================================
   К-ИНДЕКС — кольцо (вариант А) на светлой «странице»; панель кольца — тёмный лазурит
   ========================================================================== */
.method-sec { padding: clamp(80px, 10vw, 150px) 0; }
.method { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 3.4vw, 48px); align-items: stretch; }
.method > * { min-width: 0; }
.method__art { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; min-height: 560px; box-shadow: 0 30px 60px -30px rgba(42, 34, 28, .45); }
.method__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.method__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,23,48,.92), rgba(13,23,48,0) 48%); }
.method__quote { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; display: grid; gap: 8px; }
.method__quote p { margin: 0; font-family: var(--f-display); font-size: clamp(21px, 2vw, 27px); line-height: 1.25; color: #f3ead8; }
.method__quote span { font-family: var(--f-display); font-size: 13px; color: rgba(243, 234, 216, .65); }
/* панель кольца остаётся тёмной — сбрасываем светлые переменные обратно на лазурит */
.method__panel { --ivory: #f3ead8; --text: #ece4d2; --text-2: #b9c1d6; --text-3: #8a95b3; --gold: #d4af62; --gold-hi: #f0d79a; --line: rgba(212,175,98,.18); --line-2: rgba(212,175,98,.34);
  background: linear-gradient(160deg, #1d3260, #13213f); color: var(--text); border-radius: var(--r-card); padding: clamp(18px, 2.6vw, 32px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
  box-shadow: 0 30px 60px -30px rgba(19, 33, 63, .6); }
.picker { display: flex; gap: 10px; align-items: center; }
.picker select { flex: 1; min-width: 0; border-radius: 999px; padding: 11px 40px 11px 16px; background-color: rgba(0, 0, 0, .22); color: #fff; border-color: var(--line-2); }
.picker select option { color: #2a221c; background: #fff; }
.picker button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(243, 234, 216, .06); color: #fff; flex: none; font-size: 16px; transition: border-color .2s; }
.picker button:hover { border-color: var(--gold); }
.ringwrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3vw, 36px); align-items: center; }
.kring { position: relative; width: min(280px, 70vw); aspect-ratio: 1; }
.kring svg { width: 100%; height: 100%; overflow: visible; }
.kring .seg-track { fill: none; stroke: rgba(243, 234, 216, .09); stroke-width: 22; }
.kring .seg { fill: none; stroke-width: 22; transition: stroke-dasharray 1s var(--ease), stroke .4s, opacity .25s; cursor: pointer; }
.kring .seg.dim { opacity: .25; }
.kring__c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.kring__c b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(60px, 7vw, 84px); line-height: .9; color: #fff; }
.kring__c span { font-size: 13px; color: var(--text-2); }
.tierpill { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; margin-top: 10px; background: rgba(243, 234, 216, .08); }
.tierpill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kring__info { display: grid; gap: 10px; align-content: center; min-height: 130px; }
.kring__tk { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.kring__info h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 26px; color: #fff; line-height: 1.15; }
.kring__info p { margin: 0; color: var(--text-2); font-size: 15px; }
.kring__open { justify-self: start; color: var(--gold); font-size: 14px; }
.kring__open:hover { color: var(--gold-hi); }
.mlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mi { background: rgba(0, 0, 0, .18); border: 1px solid rgba(243, 234, 216, .08); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; text-align: left; color: var(--text); transition: border-color .2s, background .2s; }
.mi:hover, .mi.on { border-color: var(--gold); background: rgba(212, 175, 98, .08); }
.mi small { font-size: 12px; color: var(--text-3); display: flex; justify-content: space-between; gap: 6px; }
.mi strong { font-weight: 500; font-size: 14px; display: flex; justify-content: space-between; gap: 6px; font-variant-numeric: tabular-nums; }
.kscale { display: grid; gap: 8px; }
.kscale__bar { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #e07a5f 0%, #e0a35a 45%, #d4af62 62%, #6fd3a3 85%); }
.kscale__mark { position: absolute; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid #13213f; box-shadow: 0 0 0 2px #fff; transform: translateX(-50%); transition: left 1s var(--ease); left: 0; }
.kscale__lbl { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); }
.method__note { margin: 0; font-size: 13.5px; color: var(--text-3); }
.method__note b { color: var(--text-2); font-weight: 500; }
.metrics9__title { margin: clamp(60px, 8vw, 110px) 0 28px; }
@media (max-width: 1000px) { .method { grid-template-columns: 1fr; } .method__art { min-height: 400px; } }
@media (max-width: 640px) { .ringwrap { grid-template-columns: minmax(0, 1fr); justify-items: center; } .mlist { grid-template-columns: repeat(2, 1fr); } .kring__info { text-align: center; } .kring__open { justify-self: center; } .kscale__lbl span:nth-child(2) { display: none; } }

.metrics9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.m9 { background: var(--ink); padding: 32px 30px 30px; position: relative; transition: background .5s; }
.m9:hover { background: var(--ink-2); }
.m9__n { position: absolute; right: 24px; top: 22px; font-family: var(--f-display); color: var(--gold-lo); font-size: 22px; }
.m9 h4 { font-family: var(--f-display); font-weight: 500; font-size: 30px; margin: 0; color: var(--gold-hi); }
.m9__name { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3) !important; margin: 4px 0 14px !important; }
.m9 p { color: var(--text-2); margin: 0 0 18px; font-size: 15px; }
.m9__ex { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.stars { display: inline-flex; gap: 4px; }
.stars i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--gold-lo); }
.stars i.on { background: var(--gold); border-color: var(--gold); }
@media (max-width: 980px) {
  .kindex__grid { grid-template-columns: 1fr; }
  .kindex__art { max-width: 520px; }
  .metrics9 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .metrics9 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   СЕКТОРА — раскрывающиеся «залы» (вариант А)
   ========================================================================== */
.sectors { padding: clamp(80px, 10vw, 150px) 0; background: var(--ink-2); }

.acc { display: flex; gap: 10px; height: 520px; }
.panel { --mx: 0; --my: 0; position: relative; flex: 1; min-width: 0; border-radius: var(--r-card); overflow: hidden; background: #0a1226; text-align: left; transition: flex .7s cubic-bezier(.6, 0, .2, 1), box-shadow .6s var(--ease); isolation: isolate; }
/* картина всегда шириной с раскрытый зал и по центру: узкий зал показывает её середину, при раскрытии она открывается, как занавес */
.panel__media { position: absolute; top: 0; bottom: 0; left: 50%; width: max(100%, var(--open-w, 100%)); transform: translate3d(calc(-50% + var(--mx) * -18px), calc(var(--my) * -12px), 0); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.panel__media img { position: absolute; top: -4%; left: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; filter: brightness(.66) saturate(.85); transform: scale(1.06); transition: filter 1.1s var(--ease), transform 1.6s var(--ease); }
.panel::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(13,23,48,.95), rgba(13,23,48,.1) 58%); }
.panel::before { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(212, 175, 98, 0); transition: box-shadow .9s var(--ease); }
.panel:not(.on):hover .panel__media img { filter: brightness(.82) saturate(.95); }
.panel.on { flex: 5; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.panel.on::before { box-shadow: inset 0 0 0 1px rgba(212, 175, 98, .45); }
.panel.on .panel__media img { filter: brightness(.98) saturate(1); transform: scale(1); animation: hall-breathe 16s ease-in-out .9s infinite alternate; }
@keyframes hall-breathe { from { transform: scale(1); } to { transform: scale(1.07) translate3d(-1.2%, -1%, 0); } }
/* блик света пробегает по картине при раскрытии */
.panel__sheen { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 233, 180, .2) 48%, transparent 60%); transform: translateX(-120%); }
.panel.on .panel__sheen { animation: hall-sheen 1.4s cubic-bezier(.3, 0, .2, 1) .2s 1 both; }
@keyframes hall-sheen { to { transform: translateX(120%); } }
.panel__v { position: absolute; left: 50%; bottom: 22px; z-index: 3; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font-family: var(--f-display); color: #f3ead8; font-size: 19px; white-space: nowrap; transition: opacity .3s .2s, transform .5s var(--ease); }
.panel:not(.on):hover .panel__v { transform: translateX(-50%) translateY(-6px) rotate(180deg); }
.panel.on .panel__v { opacity: 0; transition-delay: 0s; }
.panel__body { position: absolute; left: 0; bottom: 0; z-index: 3; padding: 26px; display: grid; gap: 10px; color: var(--text); width: var(--open-w, 100%); max-width: 100%; }
/* содержимое появляется по очереди, когда зал уже почти раскрылся */
.panel__body > * { opacity: 0; transform: translateY(18px); transition: opacity .25s, transform .3s; }
.panel.on .panel__body > * { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.panel.on .panel__body > :nth-child(1) { transition-delay: .22s; }
.panel.on .panel__body > :nth-child(2) { transition-delay: .28s; }
.panel.on .panel__body > :nth-child(3) { transition-delay: .34s; }
.panel.on .panel__body > :nth-child(4) { transition-delay: .4s; }
.panel.on .panel__body > :nth-child(5) { transition-delay: .46s; }
.panel__go i { display: inline-block; font-style: normal; transition: transform .4s var(--ease); }
.panel.on:hover .panel__go { color: var(--gold-hi); }
.panel.on:hover .panel__go i { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  .panel, .panel__media, .panel__media img, .panel__body > * { transition: none !important; animation: none !important; }
  .panel__sheen { display: none; }
}
.panel__kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.panel__body h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 34px; color: #f3ead8; line-height: 1.05; }
.panel__stats { display: flex; gap: 22px; font-size: 13px; color: var(--text-2); }
.panel__stats b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 30px; color: var(--gold-hi); line-height: 1.1; }
.panel__tk { display: flex; flex-wrap: wrap; gap: 6px; }
.panel__tk span { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(243, 234, 216, .12); letter-spacing: .04em; }
.panel__go { justify-self: start; font-size: 14px; color: var(--gold); transition: color .3s; }
@media (max-width: 860px) {
  .acc { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .panel, .panel.on { flex: 0 0 78%; height: 440px; scroll-snap-align: start; }
  .panel__v { display: none; }
  .panel__body { width: 100%; }
  .panel__body > *, .panel:not(.on) .panel__body > * { opacity: 1; transform: none; }
  .panel__media { width: 100%; }
  .panel .panel__media img { filter: brightness(.72); }
  .panel__stats { gap: 16px; }
}

/* ---------- Точки статусов ---------- */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; margin-right: 8px; vertical-align: middle; }
.dot--buy { background: var(--c-buy); box-shadow: 0 0 10px var(--c-buy); }
.dot--consider { background: var(--c-consider); }
.dot--hold { background: var(--c-hold); }
.dot--risk { background: var(--c-risk); }
.dot--g-good { background: var(--c-buy); }
.dot--g-ok { background: var(--c-consider); }
.dot--g-bad { background: var(--c-risk); }
.dot--g-na { background: transparent; border: 1px solid var(--text-3); }

/* ==========================================================================
   ГАЛЕРЕЯ КОМПАНИЙ
   ========================================================================== */
.gallery { padding: clamp(80px, 10vw, 150px) 0; }
.is-light .card { box-shadow: 0 18px 40px -28px rgba(42, 34, 28, .5); }
.is-light .card:hover { background: linear-gradient(170deg, rgba(167,122,50,.12), transparent 50%), var(--ink-2); }
.headtools { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
@media (max-width: 1100px) { .headtools { align-items: flex-start; } }
/* переключатель вида: «пилюля» с лазуритовым бегунком */
.vswitch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line-2); box-shadow: inset 0 1px 3px rgba(42, 34, 28, .08); }
.vswitch__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: linear-gradient(160deg, #24396b, #13213f); box-shadow: 0 8px 18px -8px rgba(19, 33, 63, .6), inset 0 0 0 1px rgba(212, 175, 98, .4); transition: transform .55s cubic-bezier(.65, 0, .25, 1); }
.vswitch[data-view="table"] .vswitch__thumb { transform: translateX(100%); }
.vswitch button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 22px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--text-2); transition: color .4s; }
.vswitch button:hover { color: var(--ivory); }
.vswitch button[aria-selected="true"] { color: #f0d79a; }
.vswitch svg { width: 15px; height: 15px; fill: currentColor; }
.sortbox { display: flex; align-items: center; gap: 12px; }
.sortbox label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
select {
  appearance: none; -webkit-appearance: none; background: var(--ink-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d4af62'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--ivory); border: 1px solid var(--line-2); padding: 12px 40px 12px 16px; font: inherit; font-size: 14px; border-radius: var(--radius);
}
.filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; padding: 9px 16px; font-size: 13px; color: var(--text-2);
  border: 1px solid var(--line); border-radius: 40px; transition: .35s var(--ease);
}
.chip:hover { border-color: var(--line-2); color: var(--ivory); }
.chip.is-on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 600; }
.is-light .chip.is-on { color: #fff8ec; }
.chip.is-on .dot { box-shadow: 0 0 0 2px rgba(13,23,48,.4); }
.chip sup { font-size: 10px; margin-left: 6px; opacity: .6; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.cards[hidden], .gview[hidden] { display: none; }
/* таблица компаний (вариант А) в палитре «Лазурит + фреска» */
.gtable { background: #fbf6ee; border: 1px solid var(--line); border-radius: var(--r-card); overflow: auto; max-height: 780px; box-shadow: 0 30px 60px -40px rgba(42, 34, 28, .35); }
/* бегунок прокрутки таблицы: золотая «пилюля» на пергаменте, при наведении — лазурит; начинается под шапкой */
.gtable::-webkit-scrollbar { width: 12px; height: 12px; }
.gtable::-webkit-scrollbar-track { margin: 48px 0 10px; background: rgba(122, 85, 32, .06); border-radius: 999px; border: 3px solid #fbf6ee; }
.gtable::-webkit-scrollbar-track:horizontal { margin: 0 14px; }
.gtable::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d9bb7c, #a77a32); border-radius: 999px; border: 3px solid #fbf6ee; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.gtable::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(90deg, #d9bb7c, #a77a32); }
.gtable::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #2c4a86, #13213f); }
.gtable::-webkit-scrollbar-corner { background: transparent; }
@supports (-moz-appearance: none) { .gtable { scrollbar-width: thin; scrollbar-color: #b8925a rgba(122, 85, 32, .08); } }
.gtable table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1060px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.gtable th, .gtable td { padding: 13px 16px; text-align: right; white-space: nowrap; border-bottom: 1px solid rgba(122, 85, 32, .1); color: var(--text); }
.gtable thead th { position: sticky; top: 0; z-index: 2; background: #f3e8d8; border-bottom-color: rgba(122, 85, 32, .2); }
.gtable th button { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--text-3); transition: color .25s; }
.gtable th button i { font-style: normal; letter-spacing: 0; }
.gtable th button:hover, .gtable th button.on { color: var(--gold); }
.gtable th:first-child, .gtable td:first-child { text-align: left; position: sticky; left: 0; z-index: 1; background: #fbf6ee; }
.gtable thead th:first-child { z-index: 3; background: #f3e8d8; }
.gtable tbody tr { cursor: pointer; }
.gtable tbody tr:hover td { background: #f5ecdf; }
.gtable tbody tr:last-child td { border-bottom: 0; }
.gtable td small { display: block; font-size: 12.5px; }
.gtable td small.up { color: var(--c-buy); } .gtable td small.dn { color: var(--c-risk); }
.gt-co { display: flex; align-items: center; gap: 12px; }
.gt-co b { display: block; font-weight: 600; color: var(--ivory); }
.gt-co small { color: var(--text-3); }
.gt-tk { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: #f0d79a; background: linear-gradient(160deg, #24396b, #13213f); box-shadow: inset 0 0 0 1px rgba(212, 175, 98, .3); }
.gt-k { display: inline-flex; align-items: center; gap: 10px; }
.gt-k svg { width: 26px; height: 26px; }
.gt-k b { font-weight: 600; min-width: 2ch; text-align: left; }
.gt-spark { display: block; margin-left: auto; }
.gtable .neg { color: var(--c-risk); }
.gtable .na { color: var(--text-3); }
.gt-add { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--gold); font-size: 18px; line-height: 1; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.gt-add:hover { transform: scale(1.08); border-color: var(--gold); }
.gt-add[aria-pressed="true"] { background: #13213f; border-color: #13213f; color: #f0d79a; font-size: 15px; }
.gnote { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 14px 2px 0; font-size: 13px; color: var(--text-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card {
  position: relative; text-align: left; padding: 24px 24px 20px; border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(170deg, rgba(212,175,98,.05), transparent 40%), var(--ink-2);
  display: flex; flex-direction: column; gap: 20px; transition: transform .6s var(--ease), border-color .5s, background .5s; overflow: hidden;
}
.card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c); opacity: .9; }
.card--buy { --c: var(--c-buy); } .card--consider { --c: var(--c-consider); } .card--hold { --c: var(--c-hold); } .card--risk { --c: var(--c-risk); }
.card:hover { transform: translateY(-4px); border-color: var(--line-2); background: linear-gradient(170deg, rgba(212,175,98,.1), transparent 50%), var(--ink-3); }
.card__top { display: flex; justify-content: space-between; gap: 12px; }
.card__top > div { min-width: 0; }
.card__name.card__name--long { font-size: 24px; }
.card__top > .ring { flex: none; }
.card__ticker { font-size: 11px; letter-spacing: .26em; color: var(--gold); font-weight: 600; }
.card__name { font-family: var(--f-display); font-size: 30px; font-weight: 400; line-height: 1.05; margin: 6px 0 6px; color: var(--ivory); }
.card__sector { font-size: 12.5px; color: var(--text-3); }
.card__minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mini { background: var(--ink-2); padding: 10px 10px 9px; }
.mini span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini b { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; position: relative; padding-left: 12px; }
.mini b::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--text-3); }
.mini--good b::before { background: var(--c-buy); } .mini--ok b::before { background: var(--c-consider); } .mini--bad b::before { background: var(--c-risk); }
.mini--na b::before { background: transparent; border: 1px solid var(--text-3); }
.card__foot { display: flex; justify-content: space-between; align-items: center; }
.card__more { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); transition: color .3s, transform .5s var(--ease); }
.card:hover .card__more { color: var(--gold-hi); transform: translateX(4px); }
.badge { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; border-radius: 30px; border: 1px solid; }
.badge--buy { color: var(--c-buy); border-color: rgba(92,196,151,.4); background: rgba(92,196,151,.08); }
.badge--consider { color: var(--gold-hi); border-color: rgba(212,175,98,.4); background: rgba(212,175,98,.08); }
.badge--hold { color: var(--ivory); border-color: rgba(169,162,147,.4); background: rgba(169,162,147,.08); }
.badge--risk { color: #f19a83; border-color: rgba(216,102,75,.45); background: rgba(216,102,75,.08); }
.empty { color: var(--text-3); font-family: var(--f-display); font-size: 22px; padding: 40px 0; }

/* Кольцо К-индекса */
.ring { flex: none; transform: rotate(-90deg); overflow: visible; }
.ring__track { fill: none; stroke: rgba(212,175,98,.12); stroke-width: 5; }
.ring__val { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease) .1s; filter: drop-shadow(0 0 6px rgba(212,175,98,.45)); }
.ring.is-in .ring__val { stroke-dashoffset: var(--v); }
.card--buy .ring__val { stroke: var(--c-buy); filter: drop-shadow(0 0 6px rgba(92,196,151,.45)); }
.card--risk .ring__val { stroke: var(--c-risk); filter: none; }
.card--hold .ring__val { stroke: var(--c-hold); filter: none; }
.ring__num { transform: rotate(90deg); transform-origin: 50px 50px; text-anchor: middle; dominant-baseline: central; fill: var(--ivory); font-family: var(--f-display); font-size: 32px; }

/* ==========================================================================
   ДОСЬЕ
   ========================================================================== */
.dossier { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.dossier__backdrop { position: absolute; inset: 0; background: rgba(8,14,30,.72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .6s var(--ease); }
.dossier__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(920px, 100%); overflow-y: auto; overscroll-behavior: contain;
  background: var(--ink); border-left: 1px solid var(--line-2); transform: translateX(102%); transition: transform .8s var(--ease);
  scrollbar-width: thin; scrollbar-color: var(--gold-lo) transparent;
}
.dossier.is-open { pointer-events: auto; }
.dossier.is-open .dossier__backdrop { opacity: 1; }
.dossier.is-open .dossier__panel { transform: none; }
.dossier__close { position: absolute; top: 18px; right: 18px; z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(13,23,48,.6); backdrop-filter: blur(6px); color: var(--ivory); font-size: 14px; transition: .4s var(--ease); }
.dossier__close:hover { border-color: var(--gold); color: var(--gold-hi); transform: rotate(90deg); }

.dz-head { position: relative; min-height: 360px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 90px clamp(20px, 4vw, 48px) 36px; overflow: hidden; }
.dz-head__art { position: absolute; inset: 0; background-size: cover; filter: sepia(.2) brightness(.68) contrast(1.06); animation: kenburns 24s ease-in-out infinite alternate; }
.dz-head__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,23,48,.15) 0%, rgba(13,23,48,.2) 35%, rgba(13,23,48,.85) 75%, rgba(13,23,48,.97) 100%); }
.dz-head__body, .dz-head__ring { position: relative; z-index: 1; }
.dz-head h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(44px, 6vw, 76px); line-height: 1; margin: 0 0 18px; color: var(--ivory); }
.dz-head .eyebrow { margin-bottom: 14px; }
.dz-head__row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.ticker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .2em; color: var(--gold-hi); border: 1px dashed var(--gold-lo); padding: 6px 12px; font-size: 13px; transition: .3s; }
.ticker span { font-size: 10px; letter-spacing: .14em; color: var(--text-3); font-weight: 500; text-transform: uppercase; }
.ticker:hover { border-color: var(--gold); background: rgba(212,175,98,.08); }
.ticker.is-copied span { color: var(--c-buy); }
.dz-price { font-size: 13px; color: var(--text-2); }
.dz-price b { color: var(--ivory); font-weight: 600; }
.dz-head__ring { text-align: center; }
.dz-head__ring span { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.ring--big .ring__num { font-size: 34px; }
.dossier .ring__val { stroke: var(--gold); }

.dz-sec { padding: 36px clamp(20px, 4vw, 48px); border-top: 1px solid var(--line); }
.dz-title { font-family: var(--f-display); font-size: 30px; font-weight: 400; margin: 0 0 24px; color: var(--ivory); }
.dz-verdict__sum { font-family: var(--f-display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; color: var(--ivory); margin: 0 0 28px; font-weight: 400; }
.dz-verdict__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 30px; }
.dz-verdict h5 { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); margin: 0 0 12px; font-weight: 600; }
.pros, .cons { list-style: none; margin: 0; padding: 0; }
.pros li, .cons li { position: relative; padding: 7px 0 7px 26px; border-bottom: 1px solid rgba(212,175,98,.07); color: var(--text); }
.pros li::before, .cons li::before { position: absolute; left: 0; top: 7px; font-weight: 700; }
.pros li::before { content: '+'; color: var(--c-buy); }
.cons li::before { content: '−'; color: var(--c-risk); }
.dz-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dz-split > div { background: var(--ink-2); padding: 16px 18px; }
.dz-split span { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.dz-split b { display: block; font-family: var(--f-display); font-size: 36px; font-weight: 400; color: var(--gold-hi); line-height: 1.15; }
.dz-split b em { font-size: 18px; color: var(--text-3); font-style: normal; }
.dz-split b.small { font-size: 20px; line-height: 1.3; padding: 6px 0 4px; }
.dz-split small { font-size: 12px; color: var(--text-3); }

.dz-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dzm { border: 1px solid var(--line); padding: 16px 16px 14px; background: var(--ink-2); position: relative; }
.dzm::after { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--g); opacity: .8; }
.dzm--good { --g: var(--c-buy); } .dzm--ok { --g: var(--c-consider); } .dzm--bad { --g: var(--c-risk); } .dzm--na { --g: transparent; }
.dzm__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dzm__top span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.dzm__top b { font-family: var(--f-display); font-size: 26px; font-weight: 500; color: var(--ivory); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dzm__note { margin: 6px 0 8px; font-size: 13.5px; color: var(--text); display: flex; align-items: center; }
.dzm__plain { margin: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.legend-line { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; color: var(--text-3); margin: 16px 0 0; }
.legend-line span { display: flex; align-items: center; }

.dz-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dz-charts figure { margin: 0; border: 1px solid var(--line); background: var(--ink-2); padding: 16px 14px 8px; }
.dz-charts figcaption { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); margin-bottom: 4px; }
.dz-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; background: radial-gradient(circle at 0% 50%, rgba(212,175,98,.1), transparent 60%); }
.dz-cta h4 { font-family: var(--f-display); font-size: 28px; font-weight: 400; margin: 0 0 6px; }
.dz-cta p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.dz-cta b { color: var(--gold-hi); letter-spacing: .1em; }
.dz-disclaimer { padding: 0 clamp(20px, 4vw, 48px) 36px; margin: 0; font-size: 12px; color: var(--text-3); }
@media (max-width: 760px) {
  .dz-head { flex-direction: column; align-items: flex-start; min-height: 0; }
  .dz-head__ring { align-self: flex-start; display: flex; align-items: center; gap: 14px; }
  .dz-head__ring .ring { width: 96px; height: 96px; }
  .dz-verdict__cols, .dz-charts { grid-template-columns: 1fr; }
  .dz-metrics { grid-template-columns: 1fr 1fr; }
  .dz-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 460px) { .dz-metrics { grid-template-columns: 1fr; } }

/* Графики */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart__base { stroke: rgba(212,175,98,.25); stroke-width: 1; }
.chart__bar { fill: rgba(212,175,98,.55); transform: scaleY(0); animation: grow .9s var(--ease) forwards; transition: fill .25s; }
.chart__bar.is-last { fill: var(--gold); }
.chart__bar.is-neg { fill: rgba(216,102,75,.75); }
.chart__bar.is-hover { fill: var(--gold-hi); }
.chart__bar.is-neg.is-hover { fill: #f19a83; }
@keyframes grow { to { transform: scaleY(1); } }
.chart__x { fill: var(--text-3); font-size: 10px; text-anchor: middle; font-family: var(--f-ui); }
.chart__val { fill: var(--ivory); font-size: 11px; font-weight: 600; text-anchor: middle; font-family: var(--f-ui); }
.chart__hit { fill: transparent; }
.chart__line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__line.is-drawn { transition: stroke-dashoffset 1.6s var(--ease); stroke-dashoffset: 0 !important; }
.chart__dot { fill: var(--gold-hi); stroke: var(--ink-2); stroke-width: 2; }
.chart__dot--hover, .chart__cross { opacity: 0; transition: opacity .2s; }
.chart__cross { stroke: rgba(240,215,154,.5); stroke-width: 1; stroke-dasharray: 2 3; }
.chart.is-hover .chart__dot--hover, .chart.is-hover .chart__cross { opacity: 1; }

.tooltip {
  position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: rgba(19,33,63,.96); border: 1px solid var(--line-2); padding: 8px 12px; font-size: 13px; color: var(--ivory); white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.tooltip b { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.tooltip.is-on { opacity: 1; }

/* ==========================================================================
   СРАВНЕНИЕ — «паутинка» (вариант Б)
   ========================================================================== */
.compare { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 10vw, 150px) 0; background: var(--ink); }
.compare > .container { position: relative; z-index: 1; }
/* фон-картина: город — дальний слой, солнце — ближний, вуаль держит читаемость */
.cbg { position: absolute; inset: 0; z-index: 0; pointer-events: none; --mx: 0; --my: 0; }
.cbg__city { position: absolute; left: -3%; right: -3%; top: -10%; bottom: -10%; background: url("../img/compare.jpg?v=2") 66% 58% / cover no-repeat; opacity: .58; will-change: transform;
  translate: calc(var(--mx) * -14px) calc(var(--my) * -10px); transition: translate 1.2s cubic-bezier(.2, .7, .2, 1); }
/* «прошлое»: та же картина в сепии поверх цветной; граница --edge плывёт при прокрутке, справа остаётся сепия */
.cbg__past { position: absolute; inset: 0; background: inherit; filter: grayscale(1) sepia(.8) contrast(1.06) brightness(.92); --edge: 58%;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--edge) - 14%), #000 calc(var(--edge) + 14%)); mask-image: linear-gradient(90deg, transparent calc(var(--edge) - 14%), #000 calc(var(--edge) + 14%)); }
.cbg__sun { position: absolute; width: 70vmax; height: 70vmax; right: -22vmax; top: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 200, 120, .4), rgba(240, 160, 70, .15) 45%, transparent 72%); mix-blend-mode: screen; will-change: transform;
  translate: calc(var(--mx) * -34px) calc(var(--my) * -22px); transition: translate 1.2s cubic-bezier(.2, .7, .2, 1); animation: cbg-sun 9s ease-in-out infinite alternate; }
@keyframes cbg-sun { from { opacity: .75; } to { opacity: 1; } }
.cbg__veil { position: absolute; inset: 0; background:
  linear-gradient(180deg, var(--ink) 0%, rgba(19, 33, 63, .3) 16%, rgba(19, 33, 63, .12) 42%, rgba(19, 33, 63, .5) 80%, var(--ink) 100%),
  linear-gradient(90deg, rgba(19, 33, 63, .55) 0%, transparent 30%, transparent 70%, rgba(19, 33, 63, .35) 100%); }
@media (max-width: 760px) {
  .cbg__city { background-image: url("../img/compare-1024.jpg?v=2"); background-position: 30% 62%; opacity: .55; }
}
.cpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.cpick label { display: grid; gap: 8px; font-size: 15.5px; font-weight: 500; letter-spacing: .02em; color: var(--text); }
.cpick label i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.cpick select { width: 100%; border-radius: 14px; padding: 12px 38px 12px 14px; background-color: rgba(19, 33, 63, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; border-color: var(--line-2); font-size: 15px; }
.cpick select option { color: #2a221c; background: #fff; }
.cmpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmpgrid > * { min-width: 0; }
.radar, .ctable { border-radius: var(--r-card); background: rgba(19, 33, 63, .62); border: 1px solid rgba(212, 175, 98, .18); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .7); }
.radar { padding: clamp(18px, 2.6vw, 30px); display: grid; gap: 12px; }
.radar svg { width: 100%; max-width: 470px; margin: 0 auto; display: block; overflow: visible; }
.radar .poly { transition: all .9s var(--ease); }
.leg { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; color: var(--text-2); justify-content: center; }
.leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.ctable { padding: clamp(12px, 2vw, 22px); overflow-x: auto; }
.ctable table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 420px; }
.ctable th, .ctable td { padding: 11px 10px; text-align: right; border-bottom: 1px solid rgba(243, 234, 216, .07); font-variant-numeric: tabular-nums; }
.ctable th { font-weight: 500; font-size: 14px; }
.ctable__open { font-weight: 500; }
.ctable__open:hover { text-decoration: underline; text-underline-offset: 3px; }
.ctable th:first-child, .ctable td:first-child { text-align: left; color: var(--text-2); font-weight: 400; }
.ctable tr:last-child td { border-bottom: 0; }
.ctable td { color: var(--text-2); }
.ctable td.best { color: #fff; font-weight: 600; }
.ctable__note { font-size: 13px; color: var(--text-3); padding: 12px 10px 4px; margin: 0; }
.cmp-empty { grid-column: 1 / -1; padding: 40px; border-radius: var(--r-card); border: 1px dashed var(--line-2); text-align: center; color: var(--text-2); }
@media (max-width: 900px) { .cmpgrid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .cpick { grid-template-columns: 1fr; } }

/* ==========================================================================
   КАК КУПИТЬ
   ========================================================================== */
.how { padding: clamp(90px, 11vw, 160px) 0; background: var(--ink); }
/* синие акценты: номера шагов, линия пути, тикеры */
.how .step__n { background: radial-gradient(circle at 35% 30%, #2c4a86, #13213f 75%); border-color: rgba(212, 175, 98, .8); color: #f0d79a; box-shadow: 0 10px 24px -10px rgba(19, 33, 63, .6); }
.how .steps::after { background: linear-gradient(#2c4a86, #a77a32 70%); box-shadow: 0 0 10px rgba(44, 74, 134, .45); }
.how code { background: #1b2c52; color: #f0d79a; border-color: transparent; border-radius: 6px; padding: 2px 7px; }
.how__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.how__side { position: sticky; top: 100px; }
.how__art { margin: 10px 0 24px; }
/* картина целиком, без рамок и обрезки */
/* картина целиком в «музейной» раме: золотая линия — светлое паспарту — вторая золотая линия */
.how__frame { position: relative; display: block; padding: 12px; border: 1px solid rgba(212, 175, 98, .75); background: linear-gradient(135deg, #24396b, #13213f 55%, #1d3260);
  box-shadow: 0 1px 2px rgba(42, 34, 28, .08), 0 10px 22px -12px rgba(42, 34, 28, .25), 0 26px 48px -28px rgba(42, 34, 28, .28); }
.how__frame::after { content: ''; position: absolute; inset: 11px; border: 1px solid rgba(240, 215, 154, .55); box-shadow: inset 0 0 70px rgba(5, 10, 25, .45); pointer-events: none; }
.how__art img { display: block; width: 100%; height: auto; }
.how__art figcaption { margin-top: 16px; font-family: var(--f-display); font-size: 14px; letter-spacing: .08em; color: var(--text-3); }
.how__quote { font-family: var(--f-display); font-size: 22px; color: var(--text-2); margin: 0; max-width: 460px; }
.steps { --line: 0; list-style: none; margin: 0; padding: 0 0 0 0; position: relative; }
.steps::before { content: ''; position: absolute; z-index: 0; left: 27px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.steps::after { content: ''; position: absolute; z-index: 0; left: 27px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--gold-hi), var(--gold)); transform-origin: top; transform: scaleY(var(--line)); box-shadow: 0 0 10px var(--gold); }
.step { position: relative; z-index: 1; display: grid; grid-template-columns: 56px 1fr; gap: 26px; padding: 0 0 46px; }
.step__n { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--gold); background: var(--ink-2); display: grid; place-items: center; font-family: var(--f-display); font-size: 21px; color: var(--gold-hi); }
.step h4 { font-family: var(--f-display); font-weight: 400; font-size: 31px; margin: 8px 0 10px; color: var(--ivory); }
.step p { margin: 0; color: var(--text-2); }
.step b { color: var(--ivory); font-weight: 600; }
.mistakes { margin-top: clamp(60px, 8vw, 110px); padding-top: clamp(50px, 6vw, 80px); border-top: 1px solid var(--line); }
.mistakes__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.mistake { border: 1px solid var(--line); padding: 24px 20px; background: var(--ink); }
.mistake span { display: block; font-family: var(--f-display); font-size: 36px; color: var(--c-risk); line-height: 1; margin-bottom: 14px; }
.mistake p { margin: 0; font-size: 14.5px; color: var(--text-2); }
.mistake b { color: var(--ivory); font-weight: 600; display: block; margin-bottom: 4px; }
@media (max-width: 1100px) { .mistakes__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .how__grid { grid-template-columns: 1fr; } .how__side { position: static; } }
@media (max-width: 560px) { .mistakes__grid { grid-template-columns: 1fr; } .step { grid-template-columns: 44px 1fr; gap: 18px; } .step__n { width: 44px; height: 44px; font-size: 17px; } .steps::before, .steps::after { left: 21px; } .step h4 { font-size: 26px; margin-top: 2px; } }

/* ==========================================================================
   СЛОВАРЬ
   ========================================================================== */
.glossary { padding: clamp(90px, 11vw, 160px) 0; }
.search input {
  width: min(420px, 90vw); background: transparent; border: 0; border-bottom: 1px solid var(--line-2); color: var(--ivory);
  font: inherit; font-size: 17px; padding: 14px 4px; outline: none; transition: border-color .3s;
}
.search input:focus { border-color: var(--gold); }
.search input::placeholder { color: var(--text-3); }
.glossary .chips { margin-bottom: 30px; }
.gloss { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; border-top: 1px solid var(--line); }
.gloss__item { border-bottom: 1px solid var(--line); }
.gloss__head { width: 100%; display: grid; grid-template-columns: minmax(110px, auto) 1fr auto 20px; gap: 18px; align-items: center; text-align: left; padding: 20px 4px; }
.gloss__abbr { font-family: var(--f-display); font-size: 25px; color: var(--gold-hi); font-weight: 500; line-height: 1.1; }
.gloss__name { color: var(--text-2); font-size: 14.5px; }
.gloss__plus { position: relative; width: 14px; height: 14px; }
.gloss__plus::before, .gloss__plus::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--gold); transition: transform .5s var(--ease); }
.gloss__plus::after { transform: rotate(90deg); }
.gloss__item.is-open .gloss__plus::after { transform: rotate(0); }
.gloss__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.gloss__body > div { overflow: hidden; }
.gloss__item.is-open .gloss__body { grid-template-rows: 1fr; }
.gloss__what { margin: 0 4px 12px; color: var(--ivory); }
.gloss__formula { margin: 0 4px 14px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--gold); background: rgba(212,175,98,.06); border-left: 2px solid var(--gold-lo); padding: 8px 12px; }
.gloss__pm { padding: 0 4px 22px; }
.gloss__pm p { margin: 0 0 6px; font-size: 14px; color: var(--text-2); }
.gloss__pm b { color: var(--text); font-weight: 600; }
@media (max-width: 900px) { .gloss { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .gloss__head { grid-template-columns: 1fr 20px; gap: 4px 12px; } .gloss__head .stars { display: none; } .gloss__name { grid-column: 1; } .gloss__plus { grid-row: 1; grid-column: 2; } }

/* ==========================================================================
   ФИНАЛ И ПОДВАЛ
   ========================================================================== */
/* Финальная картина — на весь экран; сверху античный меандр; низ растворяется в тексте */
.finale { position: relative; text-align: center; overflow: hidden; padding-bottom: clamp(80px, 9vw, 130px); }
.finale__art { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.finale__bg { position: absolute; inset: 0; background-size: cover; background-position: 50% 0; transform-origin: 50% 0; filter: saturate(.95) contrast(1.03); }
.finale__art::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,23,48,.25) 0%, rgba(13,23,48,0) 4%, rgba(13,23,48,0) 66%, rgba(13,23,48,.7) 82%, var(--ink) 96%),
              linear-gradient(90deg, rgba(13,23,48,.5) 0%, transparent 10%, transparent 90%, rgba(13,23,48,.5) 100%); }

/* греческий меандр — отдельной лентой над картиной, ничего на ней не перекрывает */
.finale__meander {
  position: relative; z-index: 2; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' viewBox='0 0 24 16'%3E%3Cpath d='M0 14.5H24M20 14.5V1.5H6V10.5H14V5.5H10' fill='none' stroke='%23d4af62' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x center / 24px 16px, linear-gradient(180deg, #0d1730, rgba(13,23,48,.88));
  border-top: 1px solid rgba(212,175,98,.55); border-bottom: 1px solid rgba(212,175,98,.55);
  box-shadow: 0 1px 0 rgba(13,23,48,.8), 0 2px 0 rgba(212,175,98,.25);
}
.finale__inner { position: relative; z-index: 3; margin-top: clamp(-150px, -8vw, -40px); }
@media (max-width: 760px) {
  .finale__art { aspect-ratio: 4 / 5; }
  .finale__art::after { background: linear-gradient(180deg, rgba(13,23,48,.25) 0%, rgba(13,23,48,0) 4%, rgba(13,23,48,0) 66%, rgba(13,23,48,.7) 82%, var(--ink) 96%); }
  .finale__meander { height: 20px; background-size: 20px 13px, auto; }
  .finale__inner { margin-top: -60px; }
}
.finale__title { font-family: var(--f-display); font-weight: 300; font-size: clamp(38px, 5.4vw, 82px); line-height: 1.08; color: var(--ivory); max-width: 1100px; margin: 0 auto 46px; }
.footer { border-top: 1px solid var(--line); padding: 50px 0 60px; }
.footer__inner { display: grid; grid-template-columns: auto 1fr; gap: 14px 50px; align-items: start; }
.footer__brand { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); letter-spacing: .38em; font-size: 20px; grid-row: span 2; }
.footer__legal { margin: 0; font-size: 13px; color: var(--text-3); max-width: 900px; }
.footer__art { margin: 0; font-size: 12px; color: var(--text-3); opacity: .7; }
@media (max-width: 700px) { .footer__inner { grid-template-columns: 1fr; } .footer__brand { grid-row: auto; } }

/* ---------- Уменьшенное движение ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .grain { display: none; }
  .chart__bar { transform: none; }
}