/* ЗагранВуз: слой движения и «жидкого стекла» поверх styles.css. Подключается на главной и страницах стран.
   Всё здесь — надстройка: без этого файла и без fx.js страница выглядит как раньше и полностью работает.
   Правила бренда: content/brand/brand.md (размытие — только у панелей поверх фото и у шапки, карточек много). */

@property --fx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --fx-r { syntax: '<length>'; inherits: false; initial-value: 150px; }

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --glass-blur: blur(28px) saturate(190%) brightness(1.06);
  /* блик за курсором: радиус растёт при нажатии — стекло «продавливается» */
  --light: radial-gradient(var(--fx-r) circle at var(--mx, 50%) var(--my, -60%), rgba(255, 255, 255, .26), transparent 70%);
  /* кромка стекла: свет падает сверху слева, снизу справа — холодный отсвет */
  --edge: linear-gradient(135deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .1) 26%, rgba(255, 255, 255, .03) 58%, rgba(141, 187, 250, .46) 100%);
}

/* ---------- то, что рисует браузер: выделение, курсор ввода, полосы прокрутки ---------- */
::selection { background: rgba(15, 164, 122, .55); color: #fff; }
html { caret-color: var(--accent-ink); scrollbar-color: rgba(141, 187, 250, .32) var(--bg-deep); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { border-radius: 999px; border: 3px solid var(--bg-deep); background: rgba(141, 187, 250, .32); }
::-webkit-scrollbar-thumb:hover { background: rgba(141, 187, 250, .55); }
a { text-underline-offset: .18em; text-decoration-thickness: .06em; }

/* ---------- живой фон: два слоя света медленно плывут под страницей ---------- */
/* слой маленький (половина экрана) и растянут transform-ом: пятна и так размытые, а видеопамяти уходит в разы меньше */
body::before, body::after {
  content: ''; position: fixed; z-index: -1; left: 50%; top: 50%; width: 64vmax; height: 64vmax; margin: -32vmax 0 0 -32vmax; pointer-events: none;
}
body::before {
  background:
    radial-gradient(34% 30% at 22% 28%, rgba(15, 164, 122, .3), transparent 72%),
    radial-gradient(30% 34% at 78% 66%, rgba(84, 110, 240, .36), transparent 72%);
  animation: fxDriftA 46s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(28% 26% at 74% 22%, rgba(141, 187, 250, .2), transparent 72%),
    radial-gradient(32% 28% at 30% 78%, rgba(15, 164, 122, .2), transparent 72%);
  animation: fxDriftB 62s ease-in-out infinite alternate;
}
@keyframes fxDriftA {
  0%   { transform: translate3d(-9%, -7%, 0) rotate(0deg) scale(2.5); }
  50%  { transform: translate3d(11%, 9%, 0) rotate(8deg) scale(2.8); }
  100% { transform: translate3d(-5%, 14%, 0) rotate(-6deg) scale(2.6); }
}
@keyframes fxDriftB {
  0%   { transform: translate3d(9%, 11%, 0) rotate(0deg) scale(2.65); }
  50%  { transform: translate3d(-11%, -5%, 0) rotate(-7deg) scale(2.55); }
  100% { transform: translate3d(7%, -11%, 0) rotate(6deg) scale(2.85); }
}
@media (max-width: 767px) {
  /* телефон: свет стоит на месте — под ним и так живое фото, а батарея и плавность прокрутки важнее */
  body::before { animation: none; transform: translate3d(-6%, -4%, 0) scale(2.6); }
  body::after { animation: none; transform: translate3d(6%, 8%, 0) scale(2.6); }
}
/* разделы прозрачные: свет фона проходит под карточками */
.sec:not(.countries), .countries, .cta-band { background: none; }
.sec-alt:not(.countries) { background: rgba(14, 17, 48, .5); }
/* стык фото и прозрачного раздела закрывает «занавес»-градиент в соседнем разделе: обычная заливка, едет вместе со страницей.
   Маски на самих фото были красивее на бумаге, но заставляли перерисовывать весь экран каждый кадр. */
.sec, .cta-band, .cp-wrap { position: relative; isolation: isolate; }
.hero + .sec::before, .band + .sec::before, .band + .cta-band::before, .cp-hero + .cp-wrap::before {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 150px; pointer-events: none;
  background: linear-gradient(180deg, var(--bg), rgba(18, 22, 58, 0));
}
.sec:has(+ .band)::after {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none;
  background: linear-gradient(0deg, var(--bg), rgba(18, 22, 58, 0));
}
/* синий тон поверх фото — обычным слоем: режим наложения на весь экран над движущимся фото стоил слишком дорого */
.hero-shade::before, .band-shade::before { mix-blend-mode: normal; background: rgba(26, 30, 96, .16); }

/* ---------- жидкое стекло: кромка-градиент, блик, глубина ---------- */
.glass, .topbar-in { position: relative; }
.glass::after, .topbar-in::after {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glass { border-color: rgba(255, 255, 255, .1); box-shadow: var(--rim), 0 34px 70px -30px rgba(4, 5, 22, .85), 0 10px 22px -14px rgba(4, 5, 22, .6); }
.hero-panel::before { display: none; } /* прежняя светящаяся линия: её заменила кромка */

/* главные предложения: свет один раз обходит кромку, когда блок появляется на экране (бесконечный круг перерисовывал карточку каждый кадр) */
.svc.is-main, .offer, .cp-buy-card { position: relative; }
.svc.is-main::after, .offer::after, .cp-buy-card::after {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--fx-a), rgba(15, 164, 122, .25) 0deg, rgba(141, 187, 250, .95) 40deg, rgba(255, 255, 255, .9) 58deg, rgba(15, 164, 122, .7) 90deg, rgba(15, 164, 122, .25) 150deg, rgba(15, 164, 122, .25) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.svc.is-main.fx-live::after, .offer.fx-live::after, .cp-buy-card.fx-live::after { animation: fxOrbit 3.2s var(--ease-out) .3s 1; }
@keyframes fxOrbit { to { --fx-a: 360deg; } }

/* ---------- шапка: капсула сжимается при прокрутке, бегунок показывает раздел, по нижней кромке — сколько прочитано ---------- */
.topbar-in { transition: background-color .3s, max-width .7s var(--ease-out), box-shadow .4s; }
.topbar.is-solid .topbar-in { box-shadow: var(--rim), 0 22px 44px -18px rgba(4, 5, 22, .9); }
.nav-read {
  position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-ink));
  transform: scaleX(0); transform-origin: left; opacity: .9;
}
.topnav { position: relative; }
.topnav a { position: relative; z-index: 1; }
.topnav a.is-cur { color: var(--text); }
.nav-thumb {
  position: absolute; left: 0; top: 4px; bottom: 4px; width: var(--w, 0); border-radius: 999px; pointer-events: none; opacity: 0;
  background: rgba(255, 255, 255, .13); box-shadow: var(--rim);
  transform: translate3d(var(--x, 0), 0, 0);
  transition: transform .5s var(--spring), width .35s var(--ease-out), opacity .25s;
}
.nav-thumb.is-on { opacity: 1; }
.topnav.has-thumb a:hover { background: none; }
.brand-logo { transition: transform .6s var(--spring); }
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.08); }
@media (min-width: 1100px) {
  .topbar.is-solid .topbar-in { max-width: 1040px; }
}

/* ---------- кнопки: блик проходит по стеклу, стрелка подаётся вперёд, большие тянутся за курсором ---------- */
.btn { position: relative; overflow: hidden; translate: var(--bx, 0px) var(--by, 0px); transition: background-color .25s, border-color .25s, box-shadow .3s, transform .45s var(--spring), translate .5s var(--spring), opacity .25s, --fx-r .5s var(--ease-out); }
.btn:not([disabled]):active { --fx-r: 340px; }
.btn .i { transition: transform .45s var(--spring); }
.btn:not([disabled]):hover .i { transform: translateX(4px); }
.grid-more .btn:not([aria-expanded="true"]):hover .i { transform: translateY(3px); }
.btn-primary::before, .btn-ghost::before {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 46%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34) 48%, rgba(255, 255, 255, .06) 62%, transparent);
  transform: translate3d(-140%, 0, 0) skewX(-18deg);
}
.btn-primary:not([disabled]):hover::before, .btn-ghost:hover::before { animation: fxSheen .95s var(--ease-out); }
/* блик в простое убран: на трёх больших кнопках сразу он крутился бесконечно и отвлекал от текста */
.btn-primary.btn-lg:not([disabled]):hover::before { animation: fxSheen .95s var(--ease-out); }
@keyframes fxSheen { from { transform: translate3d(-140%, 0, 0) skewX(-18deg); } to { transform: translate3d(340%, 0, 0) skewX(-18deg); } }
@keyframes fxSheenIdle {
  0% { transform: translate3d(-140%, 0, 0) skewX(-18deg); }
  16%, 100% { transform: translate3d(340%, 0, 0) skewX(-18deg); }
}
.btn-primary { box-shadow: var(--rim), 0 16px 30px -14px rgba(4, 5, 22, .85), 0 14px 34px -16px rgba(8, 122, 88, .9); }
.btn-primary:not([disabled]):hover { box-shadow: var(--rim), 0 22px 38px -14px rgba(4, 5, 22, .9), 0 20px 44px -14px rgba(15, 164, 122, .85); }
.icon-btn { transition: background-color .2s, opacity .2s, transform .4s var(--spring); }
.icon-btn:not([disabled]):active { transform: scale(.9); }
.svc-link .i, .more-go .i { transition: transform .45s var(--spring); }
.svc-link:hover .i, .more-item:hover .more-go .i { transform: translateX(4px); }
.dot-live { position: relative; }
.dot-live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: fxPing 2.4s var(--ease-out) infinite; }
@keyframes fxPing { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

/* ---------- первый экран: заголовок собирается по словам из размытия, панель «проявляется» как стекло ---------- */
.fx-w { display: inline-block; }
.fx-hero-in h1 .fx-w { animation: fxWord .9s var(--ease-out) backwards; animation-delay: calc(80ms + var(--w, 0) * 55ms); }
@keyframes fxWord { from { opacity: 0; transform: translate3d(0, .55em, 0); filter: blur(6px); } }
.fx-hero-in .eyebrow, .fx-hero-in .cp-crumbs { animation: fxRise .7s var(--ease-out) backwards; }
.fx-hero-in .hero-points, .fx-hero-in .cp-sub { animation: fxRise .8s var(--ease-out) .42s backwards; }
.fx-hero-in .lead { animation: fxRise .8s var(--ease-out) .52s backwards; }
.fx-hero-in .hero-actions, .fx-hero-in .cp-actions { animation: fxRise .8s var(--ease-out) .62s backwards; }
.fx-hero-in .hero-note, .fx-hero-in .hero-meta { animation: fxFade 1s ease .85s backwards; }
.fx-hero-in .cp-stats { animation: fxGlassIn 1.1s var(--ease-out) .5s backwards; }
.hero-panel.fx-in { animation: fxGlassIn 1.1s var(--ease-out) .45s backwards; }
@keyframes fxRise { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@keyframes fxFade { from { opacity: 0; } }
@keyframes fxGlassIn { from { opacity: 0; scale: .94; } }

/* ---------- появление при прокрутке: заголовки выходят из-под маски, фото «проявляются», списки идут по очереди ---------- */
.sec-head.reveal.is-in { animation: none; }
.sec-head.reveal.is-in h2 { animation: fxWipe .95s var(--ease-out) backwards; }
.sec-head.reveal.is-in .sec-sub, .sec-head.reveal.is-in .eyebrow, .sec-head.reveal.is-in .label { animation: fxRise .8s var(--ease-out) .16s backwards; }
@keyframes fxWipe { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate3d(0, .5em, 0); } to { opacity: 1; clip-path: inset(-10% -4% -14% -4%); transform: none; } }
.band-copy.reveal.is-in { animation: none; }
.band-copy.reveal.is-in h2 { animation: fxWipe 1.1s var(--ease-out) backwards; }
.band-copy.reveal.is-in > :not(h2) { animation: fxRise .9s var(--ease-out) .2s backwards; }
.ccard.reveal.is-in .ccard-media img, .ccard.pop .ccard-media img { animation: fxUnveil 1.5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes fxUnveil { from { transform: scale(1.18); } }
.cp-main h2.reveal.is-in { animation: fxWipe .95s var(--ease-out) backwards; }

/* ---------- карточки: наклон за курсором и блик по фото (только мышь), лёгкий подъём остальных ---------- */
.ccard-media::before {
  content: ''; position: absolute; z-index: 1; top: -30%; bottom: -30%; left: 0; width: 38%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22) 50%, transparent);
  transform: translate3d(-160%, 0, 0) skewX(-16deg);
}
.step-card, .how-card, .svc, .par-card, .tl-item, .kpi, .cp-short li, .cp-lock, .more-item {
  transition: transform .5s var(--spring), border-color .3s, box-shadow .4s, background-color .3s;
}
@media (hover: hover) and (pointer: fine) {
  .ccard { transition: transform .5s var(--ease-out), border-color .4s, box-shadow .4s; }
  .ccard:hover {
    transform: perspective(1100px) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg)) translate3d(0, -6px, 0);
    border-color: rgba(255, 255, 255, .28); box-shadow: var(--rim), 0 44px 70px -34px rgba(4, 5, 22, .95);
  }
  .ccard:hover .ccard-media::before { animation: fxSheen 1.1s var(--ease-out); }
  .ccard:hover .ccard-media img { transform: scale(1.07); }
  .step-card:hover, .how-card:hover, .svc:hover, .par-card:hover, .tl-item:hover, .kpi:hover, .cp-short li:hover {
    transform: translate3d(0, -4px, 0); border-color: rgba(255, 255, 255, .24);
    box-shadow: var(--rim), 0 34px 60px -32px rgba(4, 5, 22, .9);
  }
  .cp-table tbody tr { transition: background-color .25s; }
  .cp-table tbody tr:hover { background-color: rgba(255, 255, 255, .05); }
}
.cta-ring { animation: fxRing 16s ease-in-out infinite alternate; }
.cta-ring::after { content: ''; position: absolute; inset: 26px; border-radius: 50%; border: 1px solid rgba(141, 187, 250, .35); }
@keyframes fxRing { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-26px, 22px, 0) scale(1.14); } }

/* ---------- раскрывающиеся блоки: высота едет, текст проявляется ---------- */
details[open] > .acc-body, .cp-lock[open] > ul, .cp-lock[open] > p, .brief[open] > .brief-dl { animation: fxOpen .5s var(--ease-out); }
@keyframes fxOpen { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
@supports (interpolate-size: allow-keywords) {
  .acc, .cp-lock, .brief { interpolate-size: allow-keywords; }
  .acc::details-content, .cp-lock::details-content, .brief::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete;
  }
  .acc[open]::details-content, .cp-lock[open]::details-content, .brief[open]::details-content { block-size: auto; }
}
.acc, .cp-lock { transition: border-color .3s, background-color .3s, transform .5s var(--spring), box-shadow .4s; }
.acc[open], .cp-lock[open] { background-color: rgba(255, 255, 255, .08); }

/* ---------- квиз: экран проявляется, выбранный ответ отзывается, полоса прогресса светится ---------- */
.quiz:not([hidden]) { animation: fxFade .45s ease; }
.quiz:not([hidden]) .quiz-shell { animation: fxSheet .7s var(--ease-out); }
@keyframes fxSheet { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.985); } }
.step-in { animation: fxStep .55s var(--ease-out) both; }
@keyframes fxStep { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
.step-in .opt { animation: fxRise .6s var(--ease-out) backwards; }
.step-in .opt:nth-child(1) { animation-delay: .06s; } .step-in .opt:nth-child(2) { animation-delay: .1s; }
.step-in .opt:nth-child(3) { animation-delay: .14s; } .step-in .opt:nth-child(4) { animation-delay: .18s; }
.step-in .opt:nth-child(5) { animation-delay: .22s; } .step-in .opt:nth-child(n+6) { animation-delay: .26s; }
.opt { position: relative; }
.opt[aria-pressed="true"]::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--accent-hover); animation: fxPick .6s var(--ease-out) forwards;
}
@keyframes fxPick { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.035, 1.22); } }
.opt[aria-pressed="true"] .opt-mark { animation: fxPop .45s var(--spring); }
@keyframes fxPop { 50% { transform: scale(1.25); } }
.prog-bar i { position: relative; overflow: hidden; box-shadow: 0 0 14px rgba(43, 196, 147, .7); }
.prog-bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: fxFlow 2.2s linear infinite; }
@keyframes fxFlow { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(100%, 0, 0); } }
.ribbon { animation: fxRibbon .8s var(--ease-out) .5s backwards; transform-origin: top; }
@keyframes fxRibbon { from { transform: scaleY(0); opacity: 0; } }
.toast { transition: opacity .3s, transform .5s var(--spring); }

/* ---------- фильтр стран и статусы ---------- */
.chip { transition: color .25s, transform .4s var(--spring); }
.chip:active { transform: scale(.94); }
.cp-more-list a .i { transition: transform .45s var(--spring); }
.cp-more-list a:hover .i { transform: translateX(4px); }
.cp-toc a.is-on { box-shadow: var(--rim); }
.cp-rail i { background: linear-gradient(180deg, var(--accent), var(--accent-ink)); }

/* ---------- живой фото-фон: кадр вуза под всей страницей (разметку ставит fx.js) ---------- */
.fx-stage { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: var(--bg); contain: strict; }
/* плывёт один общий слой, а кадры в нём только меняют прозрачность: смена кадра не сбивает движение */
.fx-reel { position: absolute; inset: -5%; transform-origin: 58% 42%; animation: fxStage 50s ease-in-out infinite alternate; }
.fx-shot { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; background: center / cover no-repeat; }
.fx-shot.is-on { opacity: 1; }
@keyframes fxStage { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.4%, -1%, 0); } }
/* «обработка» кадра — затемнение и синий тон одним неподвижным слоем (фильтр на движущемся фото считался каждый кадр) */
.fx-scrim {
  position: absolute; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(8, 10, 34, .6) 100%),
    linear-gradient(180deg, rgba(14, 17, 52, .64), rgba(18, 22, 62, .7));
}
.cp .fx-scrim { background: radial-gradient(120% 90% at 50% 30%, transparent 20%, rgba(8, 10, 34, .5) 100%), rgba(16, 20, 54, .86); }
@media (max-width: 767px) { .fx-reel { animation-duration: 70s; } }
/* со сценой: свет фона тише, карточки — тёмное стекло, текст на фото держит тень */
.has-stage body::before, .has-stage body::after { opacity: .7; }
.has-stage .sec-alt:not(.countries) { background: rgba(12, 15, 44, .4); }
.has-stage .sec-head h2, .has-stage .cp-main h2 { text-shadow: 0 2px 26px rgba(8, 10, 30, .6); }
.has-stage .sec-sub, .has-stage .filter-count, .has-stage .about-ticks li { color: #DDE1F4; text-shadow: 0 1px 14px rgba(8, 10, 30, .75); }
.has-stage .ccard, .has-stage .step-card, .has-stage .how-card, .has-stage .svc, .has-stage .par-card, .has-stage .tl-item,
.has-stage .kpi, .has-stage .acc, .has-stage .cp-short li, .has-stage .cp-lock, .has-stage .cp-toc, .has-stage .cp-table tr, .has-stage .cp-more-list a {
  background-color: rgba(16, 20, 56, .74);
}
.has-stage .svc.is-main { background: radial-gradient(90% 60% at 100% 0%, rgba(15, 164, 122, .26), transparent 70%), rgba(16, 20, 56, .74); }
.has-stage .filter { background-color: rgba(16, 20, 56, .7); }
.has-stage .cp-box { background-color: rgba(30, 38, 96, .78); }
.has-stage .cp-warn { background-color: rgba(52, 44, 40, .8); }
.has-stage .cp-check, .has-stage .cp-parent { background-color: rgba(12, 52, 62, .8); }
.has-stage .footer { background: rgba(10, 12, 38, .82); }
@media (min-width: 1024px) {
  .has-stage .cp-toc, .has-stage .cp-table tr { background-color: transparent; }
  .has-stage .cp-table { background-color: rgba(16, 20, 56, .74); }
}

/* ---------- цена эффектов ----------
   Размытие фона (backdrop-filter) пересчитывается каждый кадр, пока под ним что-то движется, а под страницей теперь всегда плывёт фото.
   Поэтому размывают только шапка и крупные панели .glass; у карточек, меток и кнопок — полупрозрачная заливка без размытия. */
.btn-primary, .ccard-tag, .rank, .hero .eyebrow, .band .eyebrow { -webkit-backdrop-filter: none; backdrop-filter: none; }
.ccard-tag, .rank, .hero .eyebrow, .band .eyebrow { background-color: rgba(14, 17, 48, .66); }
:root { --glass-blur: blur(22px) saturate(180%); }
@media (max-width: 767px) { :root { --glass-blur: blur(16px) saturate(170%); } }
/* появление: только прозрачность и сдвиг — размытие в анимации заставляло растеризовать каждый блок заново */
@keyframes revealUp { from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.985); } to { opacity: 1; transform: none; } }
/* то, что за экраном, браузер не раскладывает и не рисует, пока до него не долистали */
.footer { content-visibility: auto; contain-intrinsic-size: auto 520px; }

/* нет размытия или просили меньше прозрачности: кромка остаётся, панели плотные (правила — в styles.css) */
@media (prefers-reduced-transparency: reduce) {
  .fx-scrim { background: rgba(14, 17, 48, .9); }
  .has-stage .ccard, .has-stage .step-card, .has-stage .how-card, .has-stage .svc, .has-stage .par-card, .has-stage .tl-item, .has-stage .kpi, .has-stage .acc, .has-stage .cp-short li, .has-stage .cp-lock, .has-stage .filter, .has-stage .cp-more-list a, .has-stage .footer { background-color: #1A1F4A; }
  body::before, body::after { display: none; }
}

/* ---------- меньше движения: остаются цвет, кромки и отклик на нажатие; всё, что летает и плывёт, — выключено ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
  .fx-reel { animation: none; }
  .btn { translate: none; }
  .btn-primary::before, .btn-ghost::before, .ccard-media::before, .dot-live::after, .prog-bar i::after, .opt[aria-pressed="true"]::after { display: none; }
  .svc.is-main.fx-live::after, .offer.fx-live::after, .cp-buy-card.fx-live::after, .cta-ring { animation: none; }
  .ccard:hover, .step-card:hover, .how-card:hover, .svc:hover, .par-card:hover, .tl-item:hover, .kpi:hover, .cp-short li:hover { transform: none; }
  .btn:not([disabled]):hover .i, .svc-link:hover .i { transform: none; }
  .nav-thumb { transition: opacity .2s; }
  .acc::details-content, .cp-lock::details-content, .brief::details-content { transition: none; }
}

/* ---------- телефон: появление легче ---------- */
@media (max-width: 767px) {
  /* слова заголовка — без размытия: на телефоне фильтр на каждом слове давал рывки в первую секунду */
  .fx-hero-in h1 .fx-w { animation-name: fxRise; animation-duration: .7s; animation-delay: calc(60ms + var(--w, 0) * 40ms); }
  /* блоки появляются короче и с меньшим сдвигом: при быстрой прокрутке не видно «догоняющих» карточек */
  .reveal.is-in { animation-duration: .45s; animation-delay: calc(var(--i, 0) * 50ms); }
  .ccard.reveal.is-in .ccard-media img, .ccard.pop .ccard-media img { animation-duration: 1s; }
  .sec-head.reveal.is-in h2 { animation-duration: .7s; }
}

/* Карточки страны ведут на её страницу (14.11.2026) */
.is-link[data-page] { cursor: pointer; }
.is-link[data-page] .ccard-name, .is-link[data-page] .rc-name { transition: color .2s; }
.is-link[data-page]:hover .ccard-name, .is-link[data-page]:hover .rc-name { color: var(--accent-ink, #bfe9ff); }
a.more-item { text-decoration: none; }
.rc-page { margin-top: 14px; }