/* Лайтек-Плюс — люксовый слой, этап 1 (13.09.2026). Подключается последним.
   Референс BLUEBIRD: первый экран — сцена-карточка, гигантская антиква за объектом,
   тонкий гротеск, синяя пилюля со стрелкой в белом круге, стеклянные карточки поверх объекта.
   Стекло с размытием фона — только у «парящего» слоя: шапка и карточки первого экрана.
   Карточки ниже — матовые без размытия: так их легче читать и дешевле рисовать на телефоне. */

:root {
  --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --ground: #E4EDF3;
  --ink: #0F2230; --ink-2: #3A5364; --ink-3: #4B6273;
  --blue: #0A56A3; --blue-hi: #1D6FD6;          /* белый текст: 7,31:1 и 4,88:1 */
  --stage-r: clamp(24px, 3vw, 40px);
  --stage-pad: clamp(18px, 4vw, 64px);
  --r-card: 26px;
  --glass-fill: linear-gradient(140deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .18));
  --glass-line: rgba(255, 255, 255, .66);
  --glass-shadow: 0 30px 60px -34px rgba(18, 58, 96, .55);
  --card-shadow: 0 24px 50px -38px rgba(18, 58, 96, .55);
}

body { font-family: var(--font); background: var(--ground); color: var(--ink); }
b, strong { font-weight: 600; }
h1, h2, h3 { font-family: var(--font); }

/* ---------- типографика разделов: тонкий крупный гротеск ---------- */
.sec__head h2, .split h2, .cta h2, .phero h1 { font-weight: 300; letter-spacing: -.04em; }
.bezel__core h3, .steps h3 { font-weight: 500; letter-spacing: -.02em; }
.menu__link { font-weight: 300; letter-spacing: -.035em; }
.tag {
  text-transform: none; letter-spacing: .01em; font-size: 13px; padding: 7px 14px 7px 12px;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(15, 34, 48, .08); color: var(--ink-2);
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
/* размеры текста: на большом мониторе заголовки не разрастаются */
.sec__head { gap: 14px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.sec__head h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.06; }
.sec__head p { font-size: clamp(15px, 1.1vw, 17px); }
.split h2 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.06; }
.phero h1 { font-size: clamp(34px, 4.4vw, 64px); }
.phero .lead { font-size: clamp(15px, 1.2vw, 18px); }
.cta h2 { font-size: clamp(24px, 2.6vw, 36px); }
.steps h3 { font-size: 18px; }
.menu__link { font-size: clamp(24px, 4.6vw, 36px); }
.sec--tint { background: linear-gradient(180deg, rgba(206, 222, 233, .5), rgba(228, 237, 243, 0)); }

/* ---------- кнопки ---------- */
.btn { font-family: var(--font); font-weight: 500; font-size: 15px; min-height: 50px; gap: 14px; border-radius: 999px; }
.btn--main {
  padding: 0 8px 0 26px; border: 0; color: #fff;
  background: linear-gradient(135deg, var(--blue-hi), var(--blue) 75%);
  box-shadow: 0 18px 34px -18px rgba(10, 86, 163, .85), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn--main .btn__ico { margin-right: 0; width: 36px; height: 36px; background: #fff; color: var(--blue); }
.btn--white {
  padding: 0 26px; background: #fff; color: var(--ink); border: 1px solid #fff;
  box-shadow: 0 14px 30px -20px rgba(18, 58, 96, .6);
}
.btn--white:hover { color: var(--blue); }
.btn--white .btn__ico { margin-right: -18px; width: 36px; height: 36px; background: var(--blue); color: #fff; }
.btn--small { min-height: 46px; font-size: 14px; }
.btn--white.btn--small { padding: 0 24px 0 18px; }

/* ---------- шапка-остров: прозрачнее, активный пункт — контурная пилюля ---------- */
.nav-island {
  background: rgba(255, 255, 255, .4); border-color: rgba(255, 255, 255, .72);
  box-shadow: 0 20px 44px -32px rgba(18, 58, 96, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.nav-island.is-scrolled { background: rgba(255, 255, 255, .8); }
.nav-island__links a { color: var(--ink-2); }
.nav-island__links a[aria-current="page"] { background: transparent; box-shadow: inset 0 0 0 1px rgba(15, 34, 48, .2); color: var(--ink); }

/* ======================================================================
   ПЕРВЫЙ ЭКРАН ГЛАВНОЙ — СЦЕНА
   ====================================================================== */
.stage {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 10px; border-radius: var(--stage-r);
  min-height: calc(100vh - 20px); min-height: min(calc(100svh - 20px), 1040px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-content: end; align-items: end;
  padding: calc(var(--island-h) + 40px) var(--stage-pad) clamp(22px, 3.2vw, 48px);
  background:
    radial-gradient(55% 60% at 0% 100%, rgba(84, 120, 148, .24), transparent 70%),
    radial-gradient(55% 65% at 100% 100%, rgba(86, 122, 152, .34), transparent 70%),
    radial-gradient(85% 75% at 55% 36%, #F6FAFC 0%, #E3EDF4 42%, #C4D6E3 100%);
}

/* слой с объектом: слово-подложка, кольца, отсвет на «полу» */
.stage__visual { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.stage__word {
  position: absolute; left: 0; right: 0; top: clamp(96px, 13vh, 150px); margin: 0; text-align: center;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; white-space: nowrap;
  font-size: clamp(88px, 19vw, 300px); line-height: .82; letter-spacing: -.005em;
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98) 18%, rgba(255, 255, 255, .5) 62%, rgba(255, 255, 255, 0) 96%);
  -webkit-background-clip: text; background-clip: text;
}
.rings { position: absolute; left: 60%; top: 45%; width: min(84svh, 52vw, 800px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); }
.rings__move { position: absolute; inset: 0; }
.rings__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity .6s var(--ease-out);
  /* низ объекта растворяется, как у референса: карточки ложатся на мягкий край, а не на обрез */
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 97%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 97%);
}
.rings.is-live .rings__canvas { opacity: 1; }
.stage__floor {
  position: absolute; left: 55%; bottom: 7%; width: min(56vw, 760px); height: 140px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(10, 86, 163, .2), transparent 70%);
}

/* вихрь светящихся нитей — зацикленное видео под словом и маховиком */
.stage__vihr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* компьютер: ролик выше сцены, чтобы пустой центр вихря совпал с центром маховика (41% высоты) */
@media (min-width: 1101px) { .stage__vihr { top: -18%; bottom: auto; height: 118%; } }
/* телефон и планшет: ролик занимает только верх сцены — края растворяются в фон, без прямоугольной рамки */
@media (max-width: 1100px) {
  .stage__vihr { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 70%, transparent 100%); }
}

/* текст — слева внизу */
.stage__text { grid-column: 1 / span 5; position: relative; z-index: 2; }
.stage__eyebrow { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 16px; font-size: 13px; color: var(--ink-2); }
.stage__eyebrow span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 14px 3px 0; border-radius: 50%; background: var(--blue); }
.stage h1 { font-weight: 300; font-size: clamp(34px, 3.5vw, 56px); line-height: 1; letter-spacing: -.045em; color: var(--ink); max-width: none; }
.stage__indent { display: block; padding-left: 1.3em; }
.stage h1 .mute { color: var(--ink-3); }
.stage__lead { margin-top: 18px; max-width: 42ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.stage__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* правая колонка: плашка доверия и стеклянные карточки */
.stage__side { grid-column: 7 / -1; position: relative; z-index: 2; display: grid; justify-items: end; gap: 16px; }
.trust {
  display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .3); border: 1px solid var(--glass-line); color: var(--ink); font-size: 12.5px;
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  transition: background .4s var(--ease);
}
.trust:hover { background: rgba(255, 255, 255, .6); }
.trust__icons { display: flex; }
.trust__icons i {
  display: grid; place-items: center; width: 30px; height: 30px; margin-left: -8px; border-radius: 50%;
  background: linear-gradient(150deg, #FFFFFF, #D9E7F1); border: 2px solid rgba(255, 255, 255, .95); color: var(--blue);
  box-shadow: 0 6px 14px -8px rgba(18, 58, 96, .6);
}
.trust__icons i:first-child { margin-left: 0; }
.trust__icons svg { width: 14px; height: 14px; }
.trust b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.trust > span:last-child { white-space: nowrap; }
.trust b { display: inline; }   /* в styles.css у .trust b остался display: block от одностраничника */

.gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; width: 100%; max-width: 540px; padding-top: 38px; }
.gcard {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 148px; padding: 14px; border-radius: 18px;
  color: var(--ink);
  background: linear-gradient(150deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .12) 55%, rgba(255, 255, 255, .22) 100%);
  border: 1px solid rgba(255, 255, 255, .58);
  box-shadow: 0 26px 50px -30px rgba(18, 58, 96, .5), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -20px 34px -24px rgba(29, 111, 214, .22);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.gcard:hover {
  transform: translateY(-4px); border-color: rgba(255, 255, 255, .88);
  box-shadow: 0 36px 64px -32px rgba(18, 58, 96, .58), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -20px 34px -24px rgba(29, 111, 214, .3);
}
.gcard b { margin-top: auto; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.gcard__text { margin-top: 5px; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); }
.gcard__arrow {
  position: absolute; top: 10px; right: 10px; z-index: 4; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .85); font-size: 11px; color: var(--ink);
  transition: transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.gcard:hover .gcard__arrow { transform: translate(2px, -2px); background: var(--blue); border-color: transparent; color: #fff; }
.gcard__pill {
  align-self: flex-start; margin: auto 0 6px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px;
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .9); color: var(--ink-2);
}
.gcard__pill + b { margin-top: 0; }
.gcard .gicon { width: 36px; height: 36px; filter: drop-shadow(0 8px 10px rgba(10, 60, 110, .3)); }

/* матовая карточка с «ушком», в котором лежит стеклянный шар */
.gcard--frost { background: linear-gradient(165deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .34)); border-top-left-radius: 0; }
.gcard__tab {
  position: absolute; left: -1px; top: -37px; width: 70px; height: 38px;
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .58); border-bottom: 0; border-radius: 18px 18px 0 0;
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
.gcard__tab::after {
  content: ""; position: absolute; left: 100%; bottom: -1px; width: 18px; height: 18px;
  background: radial-gradient(circle at 100% 0, transparent 17.5px, rgba(255, 255, 255, .7) 18px);
}
.orb {
  position: absolute; left: 50%; top: -11px; width: 44px; height: 44px; transform: translateX(-50%); border-radius: 50%;
  background:
    radial-gradient(34% 28% at 33% 27%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 62%),
    radial-gradient(75% 75% at 64% 72%, #093A7E 0%, #1D6FD6 44%, #7DBEF1 78%, #D8EDFA 100%);
  box-shadow: 0 16px 22px -10px rgba(10, 70, 150, .55), inset -5px -7px 14px rgba(4, 30, 80, .32);
}

/* карточка с цифрой */
.gcard .gcard__num { margin: 20px 0 auto; font-size: clamp(32px, 2.6vw, 42px); font-weight: 200; line-height: .9; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }

/* мягкое появление первого экрана — CSS-анимацией на первом кадре, без мигания и без JS */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes cardin { from { opacity: 0; transform: translateY(30px) scale(.95); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes wordin { from { opacity: 0; transform: translateY(50px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.stage__word { animation: wordin 1.6s var(--ease-out) 2.3s both; }
.stage__text > *, .stage__side > .trust { animation: rise 1s var(--ease-out) both; }
.gcards > .gcard { animation: cardin 1.1s var(--ease-out) both; }
.stage__text > :nth-child(1) { animation-delay: .15s; }
.stage__text > :nth-child(2) { animation-delay: .23s; }
.stage__text > :nth-child(3) { animation-delay: .31s; }
.stage__text > :nth-child(4) { animation-delay: .39s; }
.stage__side > .trust { animation-delay: 2.8s; }
.gcards > .gcard:nth-child(1) { animation-delay: 2.95s; }
.gcards > .gcard:nth-child(2) { animation-delay: 3.05s; }
.gcards > .gcard:nth-child(3) { animation-delay: 3.15s; }

/* ======================================================================
   КАРТОЧКИ СОДЕРЖИМОГО — ПРОЗРАЧНОЕ СТЕКЛО, СТРЕЛКА В КРУГЕ КАК У РЕФЕРЕНСА
   Размытие фона под ними — только на компьютере: на телефоне в прокручиваемом слое оно тормозит
   ====================================================================== */
/* цветные световые пятна под разделами — стеклу нужно что-то преломлять */
.sec { position: relative; isolation: isolate; }
.sec::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 8% 28%, rgba(29, 111, 214, .2), transparent 70%),
    radial-gradient(34% 42% at 94% 76%, rgba(245, 165, 36, .13), transparent 70%),
    radial-gradient(30% 40% at 55% 55%, rgba(150, 200, 245, .22), transparent 70%);
}
.sec:nth-of-type(2n)::before {
  background:
    radial-gradient(36% 44% at 92% 22%, rgba(29, 111, 214, .2), transparent 70%),
    radial-gradient(30% 40% at 6% 82%, rgba(120, 170, 220, .26), transparent 70%),
    radial-gradient(28% 36% at 45% 40%, rgba(245, 165, 36, .1), transparent 70%);
}

.bento { gap: 14px; }
.bezel {
  position: relative; padding: 6px; border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 30px 60px -42px rgba(18, 58, 96, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.bezel__core {
  position: relative; border-radius: 18px; padding: clamp(18px, 2vw, 26px);
  background: linear-gradient(160deg, rgba(255, 255, 255, .54), rgba(255, 255, 255, .16));
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -22px 36px -26px rgba(29, 111, 214, .2);
}
.bezel__core h3 { font-size: clamp(16px, 1.3vw, 19px); }
.bezel__core p { font-size: 14px; }
.bezel__media { margin: calc(-1 * clamp(18px, 2vw, 26px)) calc(-1 * clamp(18px, 2vw, 26px)) 18px; border-radius: 17px 17px 0 0; }
.bezel__media img { aspect-ratio: 16 / 9; }
a.bezel:hover .bezel__core { transform: translateY(-3px); }
a.bezel .bezel__core::after {
  content: "↗"; position: absolute; top: 12px; right: 12px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-size: 13px; color: var(--ink); background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .9);
  transition: transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
a.bezel:hover .bezel__core::after { transform: translate(2px, -2px); background: var(--blue); color: #fff; }
a.bezel .bezel__core > h3:first-child { padding-right: 44px; }
.bezel__more { font-weight: 500; }

/* ---------- каталог: ровная сетка одинаковых стеклянных карточек ---------- */
.catgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.catgrid .bezel__core { display: flex; flex-direction: column; padding: 12px 12px 18px; }
.catgrid .bezel__media { margin: 0 0 14px; border-radius: 13px; aspect-ratio: 4 / 3; overflow: hidden; background: #E3EDF4; }
.catgrid .bezel__media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.catgrid h3 { padding: 0 6px; font-size: 15.5px; line-height: 1.25; letter-spacing: -.015em; }
.catgrid p { margin-top: 6px; padding: 0 6px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.ccard__icon {
  display: grid; place-items: center;
  background: radial-gradient(90% 90% at 28% 18%, rgba(255, 255, 255, .95), rgba(214, 232, 246, .7) 55%, rgba(176, 206, 232, .55));
  border: 1px solid rgba(255, 255, 255, .85);
}
.ccard__icon svg { width: 30%; height: auto; color: var(--blue); }
a.bezel.ccard .bezel__core::after { top: 20px; right: 20px; width: 30px; height: 30px; font-size: 12px; }

/* ---------- цифры доверия ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; min-height: 200px; padding: 22px;
  border-radius: 24px; color: var(--ink);
  background: linear-gradient(155deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .14));
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 30px 60px -42px rgba(18, 58, 96, .5), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -22px 36px -26px rgba(29, 111, 214, .2);
  transition: transform .6s var(--ease);
}
.stat:hover { transform: translateY(-3px); }
.stat__num { margin-bottom: auto; font-size: clamp(44px, 4vw, 64px); font-weight: 200; line-height: .88; letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.stat__num--word { font-size: clamp(28px, 2.3vw, 36px); font-weight: 300; letter-spacing: -.045em; }
.stat p { font-size: 14px; color: var(--ink-2); }
.stat--accent {
  background: linear-gradient(150deg, rgba(29, 111, 214, .92), rgba(10, 86, 163, .86) 72%); border-color: rgba(255, 255, 255, .35); color: #fff;
  box-shadow: 0 30px 60px -34px rgba(10, 86, 163, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.stat--accent p { color: #fff; }
a.stat--accent::after {
  content: "↗"; position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: var(--blue); font-size: 13px; transition: transform .5s var(--ease);
}
a.stat--accent:hover::after { transform: translate(2px, -2px); }

@media (hover: hover) and (min-width: 1101px) {
  .bezel__core, .stat { -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
}

/* ---------- свет на стекле: блик идёт за курсором, по кромке пробегает отражение ----------
   Слой .shine добавляет anim.js в каждую карточку; координаты курсора — в --mx и --my */
.shine {
  position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0;
  background:
    radial-gradient(110px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%),
    radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(160, 208, 255, .42), rgba(160, 208, 255, .1) 45%, transparent 70%);
  transition: opacity .5s var(--ease);
}
.shine::before {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95) 50%, transparent);
  transform: translateX(-130%) skewX(-14deg);
}
.shine::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 0%), #fff, rgba(200, 230, 255, .6) 35%, rgba(255, 255, 255, 0) 70%);
  -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);
}
@media (hover: hover) {
  .gcard:hover .shine, .bezel:hover .shine, .stat:hover .shine { opacity: 1; }
  .gcard:hover .shine::before, .bezel:hover .shine::before, .stat:hover .shine::before { transform: translateX(360%) skewX(-14deg); transition: transform 1.1s var(--ease-out); }
  /* под бликом карточка чуть светлее и с голубым ореолом — как стекло, поймавшее свет */
  .bezel:hover, .stat:hover { box-shadow: 0 34px 70px -40px rgba(18, 58, 96, .6), 0 0 0 1px rgba(255, 255, 255, .9), 0 0 40px -10px rgba(120, 180, 255, .45); }
  .gcard:hover { box-shadow: 0 36px 64px -32px rgba(18, 58, 96, .58), 0 0 40px -10px rgba(120, 180, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .9); }
}

/* содержимое карточек — над слоем света */
.bezel__core > :not(.shine), .stat > :not(.shine), .gcard > b, .gcard > .gcard__text, .gcard > .gcard__pill, .gcard > .gicon { position: relative; z-index: 2; }
a.bezel .bezel__core::after, a.stat--accent::after { z-index: 3; }

/* ---------- появление карточек: из размытия, по очереди, по стеклу пробегает свет ---------- */
@keyframes flash { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sweep { from { transform: translateX(-130%) skewX(-14deg); } to { transform: translateX(360%) skewX(-14deg); } }
.has-anim .bezel[data-reveal], .has-anim .stat[data-reveal] {
  opacity: 0; transform: translateY(36px) scale(.965); filter: blur(10px);
  transition: opacity .9s var(--ease-out), transform 1.2s var(--ease-out), filter 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.has-anim .bezel[data-reveal].is-in, .has-anim .stat[data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.is-in .shine { animation: flash 1.5s var(--ease-out) calc(var(--i, 0) * 90ms + .35s); }
.is-in .shine::before { animation: sweep 1.5s var(--ease-out) calc(var(--i, 0) * 90ms + .35s); }
.gcards > .gcard > .shine, .gcards > .gcard > .shine::before { animation-duration: 1.5s; animation-timing-function: var(--ease-out); }
.gcards > .gcard > .shine { animation-name: flash; }
.gcards > .gcard > .shine::before { animation-name: sweep; }
.gcards > .gcard:nth-child(1) > .shine, .gcards > .gcard:nth-child(1) > .shine::before { animation-delay: 3.35s; }
.gcards > .gcard:nth-child(2) > .shine, .gcards > .gcard:nth-child(2) > .shine::before { animation-delay: 3.45s; }
.gcards > .gcard:nth-child(3) > .shine, .gcards > .gcard:nth-child(3) > .shine::before { animation-delay: 3.55s; }

/* ======================================================================
   АДАПТИВ
   ====================================================================== */
@media (max-width: 1100px) {
  /* планшет и телефон: объект сверху, текст ложится на растворённый низ колец, карточки ниже.
     Раньше объект стоял обычным блоком под текстом и «уезжал» вниз экрана — теперь он всегда в первом экране */
  .stage { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-top: calc(var(--island-h) + 22px); }
  .stage__visual { position: relative; inset: auto; height: clamp(320px, 56svh, 640px); margin: 0 calc(-1 * var(--stage-pad)); }
  .stage__word { top: 6%; font-size: clamp(68px, 20.5vw, 230px); }
  .rings { left: 50%; top: 50%; width: min(100vw, 56svh, 640px); }
  .stage__floor { left: 50%; bottom: 0; width: 90%; }
  .stage__text { margin-top: -8svh; }
  .stage__side { justify-items: stretch; margin-top: 30px; }
  .trust { justify-self: start; }
  .gcards { max-width: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .stage { margin: 8px; }
  .stage__visual { height: clamp(280px, 48svh, 460px); }
  .rings { width: min(100vw, 48svh); }
  .stage__text { margin-top: -6svh; }
  .stage h1 { font-size: clamp(30px, 8.6vw, 42px); }
  .stage__indent { padding-left: .8em; }
  .stage__lead { font-size: 15.5px; }
  .stage__actions .btn { flex: 1 1 auto; justify-content: space-between; }
  .stage__actions .btn--white { justify-content: center; }
  /* карточки листаются вбок; размытие фона на телефоне снято — в прокручиваемом слое оно дорогое */
  .gcards {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; scrollbar-width: none;
    margin: 0 calc(-1 * var(--stage-pad)); padding: 40px var(--stage-pad) 8px; scroll-padding: 0 var(--stage-pad);
  }
  .gcards::-webkit-scrollbar { display: none; }
  .gcard { flex: 0 0 52%; scroll-snap-align: start; min-height: 140px; -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(150deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .34)); }
  .gcard__tab { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .has-anim .bezel[data-reveal], .has-anim .stat[data-reveal] { filter: none; }
  .stats { gap: 12px; }
  .stat { min-height: 150px; padding: 16px; }
  .catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .catgrid .bezel__core { padding: 7px 7px 12px; }
  .catgrid .bezel__media { margin-bottom: 10px; border-radius: 11px; }
  .catgrid h3 { font-size: 13.5px; padding: 0 4px; }
  .catgrid p { display: none; }
  a.bezel.ccard .bezel__core::after { top: 13px; right: 13px; width: 26px; height: 26px; font-size: 10px; }
  .stat--accent { grid-column: 1 / -1; min-height: 150px; }
}

/* ---------- доступность ---------- */
@media (prefers-reduced-transparency: reduce) {
  .gcard, .gcard__tab, .trust, .nav-island, .bezel__core, .stat { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .95); }
}
@media (prefers-contrast: more) {
  .gcard, .trust, .bezel__core, .stat { background: #fff; border-color: rgba(15, 34, 48, .4); }
  .stage__word { opacity: .5; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gcard, .trust { background: rgba(255, 255, 255, .9); }
}
@media (prefers-reduced-motion: reduce) {
  .stage__word, .stage__text > *, .stage__side > .trust, .gcards > .gcard { animation: none; }
  .rings__canvas { transition: none; transform: none; filter: none; }
  .gcard, .gcard__arrow, a.bezel .bezel__core::after, .stat { transition: none; }
  .shine, .shine::before { animation: none !important; transition: none !important; }
  .gcards > .gcard { animation: none; }
}


/* ======================================================================
   13.09.2026: фигура по центру и меньше; подвал; компоненты внутренних страниц
   ====================================================================== */
.rings { left: 50%; top: 41%; width: min(62svh, 40vw, 600px); }
.stage__floor { left: 50%; width: min(40vw, 560px); }

/* ---------- подвал ---------- */
.footer { background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(206, 223, 235, .7)); border-top: 1px solid rgba(255, 255, 255, .85); }
.footer__head { font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.footer__call {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 16px; padding: 0 22px;
  border-radius: 999px; background: #fff; color: var(--ink); font-size: 17px; font-weight: 500; box-shadow: var(--card-shadow);
}
.footer__call:hover { color: var(--blue); }
.footer__addr { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.footer li a { display: flex; align-items: center; min-height: 40px; padding: 0; line-height: 1.35; }

/* ---------- карточка с формой ---------- */
.formcard .bezel__core { padding: clamp(20px, 3.4vw, 44px); }
.formcard h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 300; letter-spacing: -.035em; line-height: 1.08; }
.formcard .lead { margin: 10px 0 26px; max-width: 60ch; font-size: 15px; }
.formcard fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.formcard legend { margin-bottom: 10px; font-size: 13px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ink); }

/* ---------- списки и контакты ---------- */
.checks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.checks li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.infolist { margin: 0; }
.infolist dt { margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.infolist dt:first-child { margin-top: 0; }
.infolist dd { margin: 4px 0 0; font-size: 18px; line-height: 1.45; color: var(--ink); }
.infolist dd a:hover { color: var(--blue); }
.brandcard ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.brandcard li { padding: 7px 12px; border-radius: 999px; font-size: 14px; color: var(--ink); background: rgba(255, 255, 255, .72); border: 1px solid rgba(15, 34, 48, .08); }
.brandcard .brandcard__count { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.anchors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.anchors a {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; font-size: 14px; color: var(--ink);
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .9); transition: background .3s var(--ease), color .3s var(--ease);
}
.anchors a:hover { background: var(--blue); color: #fff; }
.sol { scroll-margin-top: calc(var(--island-h) + 32px); }
.sol + .sol { padding-top: 0; }
.bezel__core .btn { margin-top: 20px; }
.pagelinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

@media (max-width: 1100px) {
  .rings { left: 50%; top: 50%; width: min(82vw, 46svh, 520px); }
  .stage__floor { left: 50%; width: 80%; }
}
@media (max-width: 768px) {
  .rings { width: min(84vw, 42svh); }
  .footer { padding: 44px 0 108px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .footer__cols > div:first-child, .footer__cols > div:last-child { grid-column: 1 / -1; }
  .footer__call { display: flex; width: 100%; }
  .footer li a { min-height: 44px; font-size: 14px; }
  .footer__legal { margin-top: 24px; font-size: 12px; line-height: 1.6; }
  .infolist dd { font-size: 16px; }
  .brandcard li { font-size: 13px; padding: 6px 10px; }
}