/* Шрифт заголовков из макета. Положите файлы в assets/fonts — до этого используется Marcellus. */
@font-face {
  font-family: "Logam";
  src: url("../fonts/Logam-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@property --ra { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --navy: #00133e;
  --card: #072152;
  --line: #213b6d;
  --gold-solid: #e3c35d;
  --gold-text: #f4d591;
  --display: "Logam", "Marcellus", Georgia, serif;
  --body: "Inter", Arial, sans-serif;
}
:root:lang(ar) {
  --display: "Noto Kufi Arabic", "Logam", "Marcellus", serif;
  --body: "IBM Plex Sans Arabic", "Inter", Arial, sans-serif;
}

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

html { background: var(--navy); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: #fff;
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: none; -webkit-user-drag: none; }
button { font: inherit; color: inherit; }
a { color: inherit; }
p, h1, h2, h3, ul { margin: 0; }

/* ---------- Общие ---------- */
.gold { color: var(--gold-text); }

.h-display {
  font-family: "Logam", serif;
  font-weight: 400;
  text-transform: uppercase;
  /* Запасний колір для дуже старих браузерів */
  color: #DA9A39;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold {
    background-image: linear-gradient(
      90deg,
      #B27400 0%,
      #F4D591 25%,
      #FEF2D1 50%,
      #DA9A39 75%,
      #CD9B3B 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
}

.h-display, .hero__sub, .coll__label, .card__label, .card__title, .card__desc, .steps p {
  text-box: trim-both cap alphabetic;
}
/* У арабского письма есть элементы ниже базовой линии — обрезка по cap/alphabetic срезала бы их (и золотой градиент) */
:lang(ar) :is(.h-display, .hero__sub, .coll__label, .card__label, .card__title, .card__desc, .steps p) { text-box: none; }

/* Арабский: без разрядки и капса — они ломают связность букв */
:lang(ar) .hero__sub, :lang(ar) .coll__label, :lang(ar) .card__label { letter-spacing: 0 !important; }
:lang(ar) .h-display, :lang(ar) .card__title { letter-spacing: 0; }

.lay {
  position: absolute;
  left: calc(var(--x, 0) * 1px);
  top: calc(var(--y, 0) * 1px);
  width: calc(var(--w, 0) * 1px);
  height: calc(var(--h, 0) * 1px);
}
img.lay, img.abs { object-fit: cover; }

.rot > img, .rot > canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--rw) * 1px);
  height: calc(var(--rh) * 1px);
  object-fit: cover;
  transform: translate(-50%, -50%) var(--t, none);
}

[dir="rtl"] .flip-rtl, [dir="rtl"] .coll__arrow img { transform: scaleX(-1); }

/* Волны-разделители: тёмный фон картинки исчезает за счёт lighten */
.divider { mix-blend-mode: lighten; pointer-events: none; }
.divider.flip { transform: scaleY(-1); }
.divider--tail.flip { transform: scale(var(--ts, 1)) scaleY(-1); }
.divider img { object-fit: fill; }
.divider__side { position: absolute; top: .13px; height: 339px; }
.divider__side--l {
  left: 0; width: 546px;
  background: linear-gradient(to right, #020813, rgba(2, 8, 19, 0)), linear-gradient(to right, #020813, rgba(2, 8, 19, 0));
}
.divider__side--r {
  left: 1363px; width: 557px;
  background: linear-gradient(to left, #020813, rgba(2, 8, 19, 0)), linear-gradient(to left, #020813, rgba(2, 8, 19, 0));
}

/* ---------- CTA-кнопка: подсветка при наведении + автоблик ---------- */
.btn-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15.277px;
  text-decoration: none;
  flex: none;
  transition: filter .3s cubic-bezier(.25, .46, .45, .94);
}
.btn-frame > * { position: relative; }
.btn-frame .btn-frame__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.btn-frame .btn-frame__fill { position: absolute; left: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
.btn-frame__txt { font-weight: 600; white-space: pre; }
.btn-frame--lg { width: 340px; height: 72px; }
.btn-frame--lg .btn-frame__txt { font-size: 20px; line-height: 28px; }
.btn-frame--md { width: 333px; height: 56px; }
.btn-frame--md .btn-frame__txt { font-size: 17.823px; line-height: 28px; }
.btn-frame:hover, .btn-frame:focus-visible { filter: brightness(1.2) drop-shadow(0 0 18px rgba(244, 213, 145, .4)); }
.btn-frame:focus-visible { outline: none; }

.btn-frame__shine {
  position: absolute;
  z-index: 1;
  inset: 2px;
  overflow: hidden;
  pointer-events: none;
  /* форма внутренней части кнопки (скошенные углы) */
  clip-path: polygon(3.8% 0, 96.05% 0, 100% 23.1%, 100% 76.9%, 96.35% 100%, 3.8% 100%, 0 76.9%, 0 23.1%);
}
.btn-frame--lg .btn-frame__shine { inset: 6px 6px; }
.btn-frame__shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .5) 50%, transparent 80%);
  animation: shimmer-loop 7s cubic-bezier(.45, .05, .55, .95) infinite;
}
[dir="rtl"] .btn-frame__shine { transform: scaleX(-1); }
@keyframes shimmer-loop {
  0% { left: -100%; opacity: 0; }
  8% { opacity: 1; }
  36% { left: 150%; opacity: 0; }
  100% { left: 150%; opacity: 0; }
}

.btn-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 333px;
  height: 56px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
  transition: background-color .25s;
}

.btn-line::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1px solid #EBC87D;
  border-radius: inherit;
  pointer-events: none;
}

@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .btn-line::before {
    border: 0;
    padding: 1px;

    background: linear-gradient(
      135deg,
      #b27400 0%,
      #f4d591 30%,
      #fef2d1 55%,
      #da9a39 85%,
      #cd9b3b 100%
    );

    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);

    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}
.btn-line:hover { background: rgba(178, 116, 0, .14); border-color: #f4d591; }

/* ---------- Сверкание бриллианта: блик по силуэту + лучи + звёздочка ---------- */
/* Блик по силуэту: осветлённая копия картинки, видимая только в движущейся полосе (маска-градиент) */
.fx-lit {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  object-fit: cover;
  filter: brightness(2.1) saturate(.7);
  -webkit-mask-image: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%);
  mask-image: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: lit-sweep var(--fx-cycle, 8s) linear infinite;
  animation-delay: var(--fx-d, 0s);
}
.fx-lit:not(.lay) { inset: 0; width: 100%; height: 100%; }
@keyframes lit-sweep {
  0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  22%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
/* В арабской версии блик идёт справа налево */
[dir="rtl"] .fx-lit {
  -webkit-mask-image: linear-gradient(75deg, transparent 38%, #000 50%, transparent 62%);
  mask-image: linear-gradient(75deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  animation-name: lit-sweep-rtl;
}
@keyframes lit-sweep-rtl {
  0% { -webkit-mask-position: 0 0; mask-position: 0 0; }
  22%, 100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}


.fx {
  position: absolute;
  z-index: 2;
  left: var(--fx-x);
  top: var(--fx-y);
  width: 0;
  height: 0;
  pointer-events: none;
  transform: scale(var(--fx-s, 1));
}
.fx i {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 38px;
  border-radius: 2px;
  background: linear-gradient(0deg, transparent, #fff, transparent);
  box-shadow: 0 0 6px rgba(255, 236, 180, .9);
  opacity: 0;
  animation: ray-cycle var(--fx-cycle, 8s) linear infinite;
  animation-delay: var(--fx-d, 0s);
  will-change: transform, opacity;
}
.fx i:nth-of-type(1) { --rx: 0px; --ry: -62px; --rot: 0deg; }
.fx i:nth-of-type(2) { --rx: 44px; --ry: -44px; --rot: 45deg; }
.fx i:nth-of-type(3) { --rx: 62px; --ry: 0px; --rot: 90deg; }
.fx i:nth-of-type(4) { --rx: 44px; --ry: 44px; --rot: 135deg; }
.fx i:nth-of-type(5) { --rx: 0px; --ry: 62px; --rot: 180deg; }
.fx i:nth-of-type(6) { --rx: -44px; --ry: 44px; --rot: -135deg; }
.fx i:nth-of-type(7) { --rx: -62px; --ry: 0px; --rot: -90deg; }
.fx i:nth-of-type(8) { --rx: -44px; --ry: -44px; --rot: -45deg; }
@keyframes ray-cycle {
  0%, 25% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot)); }
  30% { opacity: 1; }
  62.5% { opacity: 1; transform: translate(calc(-50% + var(--rx)), calc(-50% + var(--ry))) rotate(var(--rot)); }
  65% { opacity: 0; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot)); }
}
/* мягкое свечение, которое «дышит» постоянно */
.fx b {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 250, 235, .55), rgba(255, 226, 150, .18) 45%, rgba(255, 226, 150, 0));
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(.7);
  opacity: .35;
  animation: fx-breathe 4s ease-in-out infinite;
  animation-delay: var(--fx-d, 0s);
}
@keyframes fx-breathe {
  0%, 100% { opacity: .25; transform: translate(-50%, -50%) scale(.65); }
  50% { opacity: .85; transform: translate(-50%, -50%) scale(1); }
}
/* четырёхлучевая звёздочка в центре */
.fx::before, .fx::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 90px;
  height: 3px;
  border-radius: 3px;
  background: radial-gradient(closest-side, #fff, rgba(255, 244, 214, .7) 40%, rgba(255, 255, 255, 0));
  filter: drop-shadow(0 0 4px #fff);
  opacity: 0;
  animation: glint var(--fx-cycle, 8s) ease-in-out infinite;
  animation-delay: var(--fx-d, 0s);
}
.fx::after { --r: 90deg; }
@keyframes glint {
  0%, 20% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(0); }
  26% { opacity: 1; transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 45deg)) scale(1); }
  34%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 90deg)) scale(0); }
}

/* Полоски-пагинация */
.dots { display: flex; gap: 12px; }
.dots span { width: 48px; height: 3px; border-radius: 2px; background: var(--line); transition: width .4s, background-color .4s; }
.dots span.is-active { width: 80px; border-radius: 3px; background: var(--gold-solid); }

/* Появление при прокрутке */
/* .reveal — появление привязано к скроллу (GSAP ScrollTrigger, как у jawharavip.bet), см. main.js */

/* Секция вне экрана — анимации на паузе (класс ставит JS) */
.is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .btn-frame__shine::before, .fx-lit, .fx i, .fx b, .fx s, .fx::before, .fx::after, .chain__beam, .ring-shine, .chain__lock { animation: none !important; }
}

/* ---------- Навигация (справа; в RTL — слева) ---------- */
.snav {
  position: fixed;
  z-index: 50;
  top: 50%;
  inset-inline-end: 3.125vw;
  width: 23px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-50%) scale(var(--kn, 1));
  transform-origin: 100% 50%;
  transition: opacity .4s;
}
[dir="rtl"] .snav { transform-origin: 0 50%; }
.snav__line { width: 1px; height: 111px; background: linear-gradient(#01143f, #ffe88a); }
.snav__line--b { background: linear-gradient(#ffe88a, #01133e); }
.snav__list { list-style: none; margin: 16.5px 0 20.5px; padding: 0; }
.snav__btn {
  display: grid;
  place-items: center;
  width: 23px;
  height: 45px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.snav__btn i {
  width: 12px;
  height: 12px;
  border: 1px solid #fff;
  border-radius: 50%;
  transition: border-color .25s, transform .25s;
}
.snav__btn:hover i { border-color: var(--gold-solid); transform: scale(1.15); }
.snav__btn.is-active i {
  width: 23px;
  height: 17px;
  border: 0;
  border-radius: 0;
  background: url("../img/icons/logo-symbol.svg") center / contain no-repeat;
  transform: none;
}
.snav__btn:focus-visible { outline: 1px solid var(--gold-solid); outline-offset: 2px; }

/* ================================================================
   ДЕСКТОП (≥1024): экраны-холсты 1920px, масштаб считает JS
   ================================================================ */
@media (min-width: 1024px) {
  .abs {
    position: absolute;
    left: calc(var(--x, 0) * 1px);
    top: calc(var(--y, 0) * 1px);
    width: calc(var(--w, 0) * 1px);
    height: calc(var(--h, 0) * 1px);
  }

  .screen, .flow { --h: 1000; position: relative; overflow: hidden; background: var(--navy); }
  .screen { height: 100vh; height: 100svh; }
  .works { --h: 1300; }
  .footer { --h: 500; }
  .flow, html.no-snap .screen { height: calc(var(--h) * var(--k, 1) * 1px); }

  .canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1920px;
    height: calc(var(--h) * 1px);
    transform: translate(-50%, -50%) scale(var(--k, 1));
    background: var(--navy);
    /* синяя подложка и за краями холста: волны с режимом lighten иначе «видят» пустоту и дают чёрные углы */
    box-shadow: 0 0 0 1500px var(--navy);
    /* обрезаем по ширине макета то, что вылезает за края (например, угол фото с коробками) — по вертикали не трогаем */
    clip-path: inset(-3000px 0);
  }

  html.no-snap .snav { display: none; }

  /* --- 1. Hero --- */
  .hero__img { position: absolute; inset: 0; }
  [dir="rtl"] .hero__img { transform: scaleX(-1); }
  .hero .hero__bg { object-fit: fill; }
  .hero__text {
    position: absolute;
    inset-inline-start: 80px;
    top: 460.5px;
    width: 540px;
    translate: 0 -50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 45px;
    text-align: center;
    z-index: 2;
  }
  .hero__title { font-size: 64px; line-height: 72px; }
  :lang(ar) .hero__title { font-size: 58px; line-height: 84px; }
  .hero__sub { font-size: 20px; line-height: 24px; letter-spacing: 4.8px; text-transform: uppercase; }
  :lang(ar) .hero__sub { font-size: 22px; line-height: 34px; }
  .hero__diamond { pointer-events: none; transform: rotate(36.12deg); }
  .hero__diamond > img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: lighten; }
  [dir="rtl"] .hero .hero__diamond { left: auto; right: 228px; transform: rotate(-36.12deg) scaleX(-1); }
  /* Подсказка скролла: стрелка вниз по центру (статичная — в 1-м блоке анимируется только CTA) */
  .hero__scroll {
    position: absolute;
    z-index: 2;
    left: 960px;
    top: 742px;
    width: 106px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .hero__scroll img { width: 106px; height: auto; }

  /* --- 2. How to build --- */
  .how__inner {
    position: absolute;
    left: 200px;
    top: 60px;
    width: 1520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 134px;
  }
  .how__title { 
  color: #fff!important;width: 852px; font-size: 64px; line-height: 72px; text-align: center; }
  :lang(ar) .how__title { font-size: 56px; line-height: 84px; }
  :lang(ar) .how__inner { gap: 110px; }
  .cards { display: flex; gap: 20px; }
  .cards-dots { display: none; }

  /* --- 3. Collections --- */
  .coll__head { position: absolute; inset-inline-start: 220px; top: 300px; display: flex; flex-direction: column; align-items: flex-start; gap: 60px; }
  .coll__arrow { position: absolute; inset-inline-start: 508px; top: 492.6px; }
  .coll__tabs { position: absolute; inset-inline-start: 654px; top: 61px; width: 1100px; height: 62px; overflow: hidden; }
  .tabs { padding-inline-start: 140px; transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
  .coll__view { position: absolute; inset-inline-start: 654px; top: 185px; width: 1100px; height: 540px; overflow: hidden; }
  .slides { padding-inline-start: 140px; }
  .coll__edge { position: absolute; top: 126px; height: 664px; pointer-events: none; }
  [dir="rtl"] .coll__edge { transform: scaleX(-1); }
  .coll__edge--start {
    inset-inline-start: 654px; width: 144px;
    background: linear-gradient(to right, var(--navy), rgba(0, 19, 62, 0)), linear-gradient(to right, var(--navy), rgba(0, 19, 62, 0));
  }
  .coll__edge--end {
    inset-inline-start: 1618px; width: 140px;
    background: linear-gradient(to left, var(--navy), rgba(0, 19, 62, 0)), linear-gradient(to left, var(--navy), rgba(0, 19, 62, 0));
  }
  .coll__dots-wrap { position: absolute; inset-inline-start: 794px; top: 762px; width: 820px; display: flex; justify-content: center; }

  /* --- 4. How it works --- */
  .works__title { color: #fff; position: absolute; left: 635px; top: 69px; width: 650px; font-size: 64px; line-height: 72px; text-align: center; }
  :lang(ar) .works__title { line-height: 90px; top: 50px; }
  .steps { position: absolute; inset: 0 auto auto 0; width: 1920px; height: 260px; }
  .steps p { position: absolute; top: 218px; translate: -50% 0; font-size: 20px; line-height: 28.263px; white-space: nowrap; }
  .steps p:nth-child(1) { left: 480px; }
  .steps p:nth-child(3) { left: 952.5px; }
  .steps p:nth-child(5) { left: 1438px; }
  .steps img { position: absolute; top: 218.64px; width: 189px; height: 14.73px; }
  .steps img:nth-child(2) { left: 636px; }
  .steps img:nth-child(4) { left: 1081px; }
  [dir="rtl"] .steps p:nth-child(1) { left: 1440px; }
  [dir="rtl"] .steps p:nth-child(3) { left: 967.5px; }
  [dir="rtl"] .steps p:nth-child(5) { left: 482px; }
  [dir="rtl"] .steps img:nth-child(2) { left: 1095px; }
  [dir="rtl"] .steps img:nth-child(4) { left: 650px; }
  .chain { position: absolute; left: 380px; top: 293px; width: 1160px; height: 463px; }
  /* коробки: чуть меньше (85%) и ближе к цепочке, чтобы секция влезла в один экран */
  .works__boxes { position: absolute; inset: 0; transform-origin: 960px 643px; transform: translateY(47px) scale(.85); }
  /* фото выходит на 11px правее затемнений — отрезаем этот край, иначе виден тёмный угол */
  .works__boxes > img:first-child { clip-path: inset(0 11px 0 0); }

  /* --- 5. Final: текст слева, фото справа --- */
  .final__photo { position: absolute; left: 615px; top: 0; width: 1305px; height: 1000px; }
  .final__fade {
    background:
      linear-gradient(to right, var(--navy) 0%, rgba(0, 19, 62, .85) 11%, rgba(0, 19, 62, .35) 19%, rgba(0, 19, 62, 0) 24%, rgba(0, 19, 62, 0) 90%, var(--navy) 100%),
      linear-gradient(to bottom, var(--navy) 0%, rgba(0, 19, 62, 0) 16%, rgba(0, 19, 62, 0) 72%, var(--navy) 100%);
  }
  /* арабское фото шире (1850×850): показываем целиком, без обрезки по бокам, верх и низ уходят в синий */
  :lang(ar) .final__photo { left: 640px; top: 200px; width: 1280px; height: 588px; }
  :lang(ar) .final__text { width: 720px; }
  .final__text { position: absolute; left: 130px; top: 500px; width: 760px; transform: translateY(-50%); z-index: 2; text-align: start; }
  .final__big { font-size: 54px; line-height: 66px; text-wrap: balance; }
  .final__big + .final__big { margin-top: 36px; }
  :lang(ar) .final__big { font-size: 52px; line-height: 84px; }
  .final__q { color: #fff; argin-top: 64px; font-size: 72px; line-height: 72px; }
  :lang(ar) .final__q { line-height: 100px; }
  .final__btns { display: flex; gap: 12px; margin-top: 64px; }

  /* --- Footer --- */
  .footer__brand { position: absolute; inset-inline-start: 130px; top: 44px; width: 300px; z-index: 2; }
  .footer__col { position: absolute; inset-inline-start: calc(var(--x) * 1px); top: 44px; }
  .footer__support { position: absolute; inset-inline-start: 1199px; top: 44px; }
  .footer__follow { position: absolute; inset-inline-start: 1510px; top: 46px; }
  .logos { position: absolute; inset: 0; pointer-events: none; }
  .logos__line { position: absolute; left: 0; top: 434.75px; width: 1920px; height: .5px; }
  .lg {
    position: absolute;
    left: calc(var(--x) * 1px);
    top: calc(var(--y) * 1px);
    width: calc(var(--w) * 1px);
    height: calc(var(--h) * 1px);
    opacity: .35;
  }
}

/* ---------- Компоненты (оба режима) ---------- */

/* Карточка «How to build» */
.card {
  position: relative;
  isolation: isolate;
  flex: none;
  width: 364.72px;
  height: 569.53px;
  padding: 54.763px 29.977px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 29.977px;
  background: var(--card);
  border: 1.095px solid var(--line);
  border-radius: 32.858px;
  transition: border-color .35s;
}
.card:hover { border-color: #3d5a93; }
.card__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: 31.76px; }
.card__photo { filter: blur(1.095px); }
.card .card__tint, .card .card__fade { left: 0; top: 0; width: 100%; height: 100%; }
.card__tint { mix-blend-mode: color; }
.card__fade { background: linear-gradient(to bottom, rgba(7, 33, 82, .7) 31.154%, var(--card) 78.75%); }
.card__num { position: absolute; inset-inline-end: 33.7px; top: 31.76px; width: auto; height: 32.858px; }
.card__pic { position: relative; flex: none; width: 197.146px; height: 197.146px; transition: transform .5s; }
.card__pic > img:first-child:not(.lay) { width: 100%; height: 100%; object-fit: cover; }
.card__pic--clip, .card__pic--car { overflow: hidden; }
.card__pic--car { width: 305px; height: 197px; }
.card:hover .card__pic { transform: translateY(-6px) scale(1.03); }
.card__glow { mix-blend-mode: overlay; }
.card__glow img { position: absolute; }
.card__label { font-size: 13.143px; line-height: 23.982px; letter-spacing: 3.1543px; text-transform: uppercase; white-space: nowrap; }
.card__title { width: 304.766px; font-family: var(--display); font-weight: 400; font-size: 30.667px; line-height: 37.656px; text-align: center; text-transform: uppercase; }
:lang(ar) .card__title { font-size: 28px; line-height: 44px; }
:lang(ar) .card__label { font-size: 15px; }
.card__sep { width: 301.767px; height: 11.99px; flex: none; }
.card__desc { font-size: 12px; line-height: 24px; text-align: center; }
:lang(ar) .card__desc { font-size: 13px; }

/* Коллекции */
.coll__label { font-size: 20px; line-height: 24px; letter-spacing: 4.8px; text-transform: uppercase; }
.coll__title { color: #fff; font-size: 64px; line-height: 72px; white-space: nowrap; max-width: 420px; transition: opacity .3s, translate .3s; }
:lang(ar) .coll__title { line-height: 96px; }
.coll__title.is-out { opacity: 0; translate: 0 12px; }
.coll__arrow { padding: 0; border: 0; background: none; cursor: pointer; }
.coll__view { cursor: grab; touch-action: pan-y; user-select: none; }
.coll__view.is-dragging { cursor: grabbing; }

.tabs { display: flex; gap: 9.538px; width: max-content; }
.tab {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 9.538px;
  height: 62px;
  padding: 0 22.256px;
  border: 1.59px solid var(--line);
  border-radius: 60.41px;
  background: var(--navy);
  font-size: 22.256px;
  line-height: 34.974px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .3s, color .3s, background-color .3s;
}
.tab i {
  flex: none;
  display: block;
  width: calc(var(--iw) * 1px);
  height: calc(var(--ih) * 1px);
  color: var(--gold-solid);
  --ic-detail: var(--navy);
  transition: color .3s;
}
.tab i svg { width: 100%; height: 100%; overflow: visible; }
.tab:hover { border-color: #3d5a93; }
.tab.is-active {
  padding: 0 25.436px;
  border-color: none;
  background:
    linear-gradient(135deg, #b27400 0%, #f4d591 30%, #fef2d1 55%, #da9a39 85%, #cd9b3b 100%) padding-box,
    linear-gradient(135deg, #b27400 0%, #f4d591 30%, #fef2d1 55%, #da9a39 85%, #cd9b3b 100%) border-box;

  box-shadow: inset 3.179px 3.179px 12.718px rgba(255, 238, 204, .8);
  color: var(--navy);
  font-weight: 500;
}

.tab.is-active i { color: var(--navy); --ic-detail: var(--gold-solid); }
.tab:focus-visible { outline: 2px solid var(--gold-solid); outline-offset: 2px; }

.slides { display: flex; gap: 20px; width: max-content; transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.slide {
  position: relative;
  flex: none;
  width: 820px;
  height: 540px;
  overflow: hidden;
  /*border: 3px solid var(--line);*/
  border: none;
  border-radius: 30px;
  background: var(--navy);
}
.slide--narrow { width: 817.36px; }
.slide__fit { position: absolute; inset: 0; background: #000;}
.slide__in { overflow: hidden; background: var(--navy); }
.slide__fade { background: linear-gradient(to bottom, rgba(0, 19, 62, 0), var(--navy)); }
.slide__car-reflect { clip-path: inset(749.055px 0 0 0); }

/* How it works — цепочка */
.chain__fit { position: absolute; left: 0; top: 0; width: 1160px; height: 463px; }
.chain__item {
  position: absolute;
  inset-inline-start: calc(var(--x) * 1px);
  top: 0;
  width: 200px;
  height: 463px;
  --fx-d: calc(var(--i) * 1s);
}
.chain__ring { position: absolute; left: -5px; top: -5px; width: 240px; height: 240px; background: url("../img/works/ring.svg") no-repeat; }
.chain__dia { position: absolute; left: 0; top: 0; width: 200px; height: 200px; object-fit: cover; transition: transform .5s; }
.chain__item:hover .chain__dia { transform: scale(1.06) rotate(-3deg); }
.chain__lock {
  position: absolute;
  left: 85.5px;
  top: 180px;
  width: 29px;
  height: 42px;
  object-fit: cover;
  box-shadow: 0 0 50px rgba(245, 210, 110, .35);
  animation: lock-glow 8s ease-in-out infinite;
  animation-delay: calc(var(--i) * .35s + 1.2s);
}
.chain__open { position: absolute; left: 0; top: 263px; width: 200px; height: 200px; object-fit: cover; }

/* Переливающийся блик по контуру кругов: волна идёт по цепочке слева направо */
.ring-shine {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  padding: 1.6px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from var(--ra), rgba(255, 232, 138, 0) 0deg, rgba(255, 232, 138, 0) 230deg, rgba(255, 232, 138, .55) 300deg, #fff 336deg, rgba(255, 232, 138, .9) 346deg, rgba(255, 232, 138, 0) 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);
  filter: drop-shadow(0 0 5px rgba(255, 220, 130, .8));
  opacity: 0;
  animation: ring-sweep 8s cubic-bezier(.45, .05, .55, .95) infinite;
  animation-delay: calc(var(--i) * .35s);
}
.ring-shine--open { top: 263px; animation-delay: calc(var(--i) * .35s + 1.4s); }
[dir="rtl"] .ring-shine { animation-delay: calc((4 - var(--i)) * .35s); }
[dir="rtl"] .ring-shine--open { animation-delay: calc((4 - var(--i)) * .35s + 1.4s); }
@keyframes ring-sweep {
  0% { --ra: -40deg; opacity: 0; }
  8% { opacity: 1; }
  45% { opacity: 1; }
  55% { --ra: 320deg; opacity: 0; }
  100% { --ra: 320deg; opacity: 0; }
}
@keyframes lock-glow {
  0%, 30%, 100% { box-shadow: 0 0 50px rgba(245, 210, 110, .35); filter: brightness(1); }
  15% { box-shadow: 0 0 34px rgba(255, 226, 140, .85); filter: brightness(1.35); }
}

/* Финальный экран: фото справа, края мягко уходят в фон */
.final__man { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.final__fade { position: absolute; inset: 0; pointer-events: none; }
.final__fx { z-index: 2; --fx-d: 1.2s; }

/* Футер */
.lang { position: relative; }
.lang__current { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; font-size: 16px; line-height: 24px; cursor: pointer; }
.lang__flag { width: 20px; height: 20px; margin: 2px 6px 2px 2px; border-radius: 60px; object-fit: cover; }
.lang__arr { transition: rotate .3s; }
.lang.open .lang__arr { rotate: 180deg; }
.lang__list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  inset-inline-start: -8px;
  display: none;
  min-width: 170px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.lang.open .lang__list { display: block; }
.lang__list a { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 6px; font-size: 16px; line-height: 24px; text-decoration: none; }
.lang__list a:hover { background: rgba(255, 255, 255, .06); }
.footer__copy { margin-top: 16px; font-family: "Saira", sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; }
.footer__legal { width: 285px; margin-top: 8px; font-size: 10px; line-height: 16px; color: rgba(255, 255, 255, .6); }
.footer__coat { margin-top: 16px; width: 110px; height: 110px; object-fit: cover; }
.acc__head { padding: 0; border: 0; background: none; font-weight: 500; font-size: 14px; line-height: 20px; text-align: start; cursor: default; }
.acc__body { list-style: none; padding: 0; margin-top: 17px; display: flex; flex-direction: column; gap: 10px; }
.acc__body a { font-weight: 500; font-size: 14px; line-height: 20px; color: #9d9e9f; text-decoration: none; white-space: nowrap; transition: color .2s; }
.acc__body a:hover { color: #fff; }
.footer__h { font-weight: 500; font-size: 14px; line-height: 20px; }
.footer__h--lg { font-size: 16px; }
.footer__support { display: flex; flex-direction: column; gap: 8px; }
.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 205px;
  height: 36px;
  border: 1px solid #58688f;
  border-radius: 8px;
  font-size: 12px;
  line-height: 18px;
  text-decoration: none;
  transition: border-color .2s;
}
.pill:hover { border-color: var(--gold-solid); }
.socials { display: flex; margin-block-start: 26px; margin-inline-start: -6px; }
.socials a { display: flex; align-items: center; justify-content: center; width: 48px; height: 32px; border-radius: 10px; overflow: visible; transition: opacity .2s; }
.socials a:hover { opacity: .7; }
.socials img { flex: none; }
.socials__v { position: relative; display: block; flex: none; width: 48px; height: 48px; }
.socials__v img { position: absolute; left: 14.5px; top: 14.5px; width: 19px; height: 19px; }
.footer__resp { display: flex; align-items: flex-start; gap: 8px; margin-top: 28px; }
.footer__resp p { font-size: 12px; line-height: 18px; color: rgba(255, 255, 255, .6); }
.footer__bga { margin-block-start: 11px; margin-inline-start: 1px; }
.lg--clip { overflow: hidden; }
.lg--clip img { position: absolute; }

/* ================================================================
   Дополнительные эффекты: призменная искра, разблокировка цепочки, 3D-наклон карточек
   ================================================================ */

/* Призменная искра: изредка вокруг бриллианта проскальзывает радужный отблеск, как у камня на свету */
.fx s {
  position: absolute;
  left: 0;
  top: 0;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 90, 90, 0), rgba(255, 140, 90, .6), rgba(255, 236, 120, .6), rgba(130, 255, 180, .6), rgba(110, 180, 255, .6), rgba(200, 130, 255, .6), rgba(255, 90, 90, 0));
  -webkit-mask: radial-gradient(closest-side, transparent 38%, #000 62%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 38%, #000 62%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.5);
  animation: prism 12s ease-in-out infinite;
  animation-delay: calc(var(--fx-d, 0s) + 2.4s);
  pointer-events: none;
}
@keyframes prism {
  0%, 86%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(0deg); }
  90% { opacity: .5; transform: translate(-50%, -50%) scale(1) rotate(90deg); }
  95% { opacity: 0; transform: translate(-50%, -50%) scale(1.3) rotate(170deg); }
}

/* Разблокировка цепочки «How it works»: при появлении экрана бриллианты по очереди
   открываются — замок отщёлкивается, бриллиант вспыхивает, по линии бежит свет, коллекция проявляется */
.chain__beam {
  position: absolute;
  left: 99.25px;
  top: 224px;
  width: 1.5px;
  height: 39px;
  border-radius: 1px;
  background: linear-gradient(#fff6d0, #e3c35d, rgba(227, 195, 93, 0));
  box-shadow: 0 0 8px rgba(255, 214, 120, .9);
  transform-origin: top;
  transform: scaleY(0);
  opacity: 0;
  pointer-events: none;
}
.js-chain .chain__open { filter: grayscale(.7) brightness(.45); transition: filter .9s ease; }
.js-chain .works.is-unlocked .chain__open {
  filter: none;
  transition-delay: calc(var(--i) * .45s + .6s);
  animation: open-pop .9s ease-out both;
  animation-delay: calc(var(--i) * .45s + .6s);
}
.js-chain .works.is-unlocked .chain__lock {
  animation: lock-open .75s cubic-bezier(.3, 1.4, .5, 1) both;
  animation-delay: calc(var(--i) * .45s);
}
.js-chain .works.is-unlocked .chain__dia {
  animation: dia-flash 1s ease-out both;
  animation-delay: calc(var(--i) * .45s + .15s);
}
.js-chain .works.is-unlocked .chain__beam {
  animation: beam .9s ease-out both;
  animation-delay: calc(var(--i) * .45s + .35s);
}
@keyframes lock-open {
  0% { transform: none; opacity: 1; }
  25% { transform: rotate(-9deg); }
  45% { transform: rotate(7deg); }
  70% { transform: translateY(-6px) scale(1.15); opacity: 1; filter: brightness(1.7); }
  100% { transform: translateY(-16px) scale(.6); opacity: 0; filter: brightness(1.7); }
}
@keyframes dia-flash {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(1.8) drop-shadow(0 0 18px rgba(255, 236, 180, .9)); }
}
@keyframes beam {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@keyframes open-pop {
  0% { transform: scale(.94); }
  60% { transform: scale(1.045); }
  100% { transform: scale(1); }
}

/* 3D-наклон карточек вслед за курсором + мягкий блик по стеклу (только мышь, десктоп) */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .card {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: border-color .35s, transform .7s cubic-bezier(.2, .7, .2, 1);
  }
  .card.is-tilt { transition: border-color .35s, transform .15s linear; }
  .card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 240, 210, .13), rgba(255, 240, 210, 0) 45%);
    opacity: 0;
    transition: opacity .45s;
  }
  .card.is-tilt::after { opacity: 1; }
}

/* ================================================================
   МОБИЛЬНАЯ ВЕРСИЯ (≤1023): обычный поток, 393px — база макета
   --mw = ширина контента (число), считает JS
   ================================================================ */
@media (max-width: 1023px) {
  .snav, .divider, .hero__diamond, .hero__scroll, .coll__edge, .coll__arrow { display: none; }
  .canvas { position: relative; }
  .screen, .flow { position: relative; overflow: hidden; }

  /* Hero */
  .hero .canvas { display: flex; flex-direction: column; padding-top: 40px; }
  .hero__img { order: 2; position: relative; height: calc(var(--mw) * .56px); margin: 8px 0 0; overflow: hidden; }
  [dir="rtl"] .hero__img { transform: scaleX(-1); }
  .hero__img .abs { display: none; }
  .hero__img .hero__bg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 80%; }
  .hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--navy), rgba(0, 19, 62, 0) 30%, rgba(0, 19, 62, 0) 70%, var(--navy)); }
  .hero__text { display: contents; }
  .hero__title { order: 0; width: 260px; margin: 0 auto; font-size: 36px; line-height: 36px; text-align: center; }
  :lang(ar) .hero__title { width: 300px; font-size: 34px; line-height: 52px; }
  .hero__sep { order: 0; width: min(100% - 32px, 360px); height: auto; margin: 20px auto; }
  .hero__sub { order: 1; padding: 0 24px; font-size: 12px; line-height: 18px; letter-spacing: 3px; text-transform: uppercase; text-align: center; }
  :lang(ar) .hero__sub { font-size: 15px; line-height: 26px; }
  .hero__sub br { display: none; }
  .hero__text .btn-frame { order: 3; margin: 0 auto; zoom: .72; }

  /* How to build */
  .how { padding-top: 24px; }
  .how__inner { display: flex; flex-direction: column; align-items: center; gap: 28px; }
  .how__title { color: #fff; padding: 0 16px; font-size: 28px; line-height: 32px; text-align: center; }
  :lang(ar) .how__title { line-height: 44px; }
  .cards {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 0 calc((100vw - var(--mw) * 1px) / 2 + 16px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
  }
  .cards.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
  .cards::-webkit-scrollbar { display: none; }
  .card { zoom: calc((var(--mw) - 117) / 364.72); scroll-snap-align: center; }
  .dots { justify-content: center; gap: 6px; }
  .dots span { width: 20px; }
  .dots span.is-active { width: 40px; }

  /* Collections */
  .coll { padding-top: 56px; }
  .coll .canvas { display: flex; flex-direction: column; align-items: center; }
  .coll__head { display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .coll__label { font-size: 12px; letter-spacing: 4px; }
  :lang(ar) .coll__label { font-size: 15px; }
  .coll__title { font-size: 32px; line-height: 36px; }
  :lang(ar) .coll__title { line-height: 52px; }
  .coll__tabs { width: 100%; margin-top: 28px; overflow-x: auto; scrollbar-width: none; }
  .coll__tabs::-webkit-scrollbar { display: none; }
  .tabs { padding: 0 35px; zoom: .45; } /* 35px × .45 ≈ 16px отступ */
  .coll__view { width: calc(var(--mw) * 1px - 32px); margin-top: 16px; overflow: hidden; }
  .slides { gap: 12px; }
  .slide, .slide--narrow { width: calc(var(--mw) * 1px - 32px); height: auto; border-radius: 16px; border-width: 2px; }
  .slide__fit { position: relative; width: 814px; height: 534px; zoom: calc((var(--mw) - 36) / 814); }
  .coll__dots-wrap { margin-top: 20px; }

  /* How it works */
  .works { padding-top: 64px; }
  /* коробки — фоном под цепочкой, края растворяются в синем */
  .works .canvas { display: flex; flex-direction: column; }
  .works__boxes { order: 9; position: relative; width: 100vw; margin: -24px 0 0; pointer-events: none; }
  .works__boxes > :not(:first-child) { display: none; }
  .works__boxes > img:first-child {
    position: static;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 58%, transparent 96%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 58%, transparent 96%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-composite: intersect;
  }
  .works__title { color: #fff; font-size: 32px; line-height: 36px; text-align: center; }
  :lang(ar) .works__title { line-height: 52px; }
  .steps { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 36px; padding: 0 16px; }
  .steps p { width: 70px; font-size: 11px; line-height: 14px; text-align: center; text-box: none; }
  :lang(ar) .steps p { width: 80px; font-size: 13px; line-height: 20px; }
  .steps img { width: 36px; height: auto; }
  .chain { width: calc(var(--mw) * 1px - 32px); margin: 32px auto 0; }
  .chain__fit { position: relative; zoom: calc((var(--mw) - 32) / 1160); }
  .ring-shine { padding: 4px; }

  /* Final: фото сверху, под ним текст и кнопки */
  .final { padding: 32px 0 40px; }
  .final__photo { position: relative; height: calc(var(--mw) * .86px); }
  .final__man { object-position: 60% 45%; }
  :lang(ar) .final__photo { height: calc(var(--mw) * .62px); }
  :lang(ar) .final__man { object-position: 50% 50%; }
  .final__fade {
    background:
      linear-gradient(to bottom, var(--navy) 0%, rgba(0, 19, 62, .6) 12%, rgba(0, 19, 62, 0) 30%, rgba(0, 19, 62, 0) 62%, var(--navy) 100%),
      linear-gradient(to right, var(--navy) 0%, rgba(0, 19, 62, 0) 10%, rgba(0, 19, 62, 0) 90%, var(--navy) 100%);
  }
  .final__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin-top: -28px; text-align: center; }
  .final__big { padding: 0 24px; font-size: 22px; line-height: 28px; text-box: none; text-wrap: balance; }
  :lang(ar) .final__big { font-size: 24px; line-height: 40px; }
  .final__big + .final__big { margin-top: 12px; }
  .final__q { color: #fff; margin-top: 20px; font-size: 32px; line-height: 36px; }
  :lang(ar) .final__q { line-height: 52px; }
  .final__btns { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; }
  .final__btns .btn-frame { zoom: calc((var(--mw) - 64) / 333); }
  .final__btns .btn-line { width: calc(var(--mw) * 1px - 64px); height: 44px; }

  /* Footer */
  .footer .canvas { display: flex; flex-direction: column; padding: 24px 16px 32px; }
  .footer__brand { display: contents; }
  .lang { order: 0; padding-bottom: 16px; border-bottom: 1px solid rgba(43, 94, 180, .4); }
  .footer__col { order: 1; border-bottom: 1px solid rgba(43, 94, 180, .4); }
  .acc__head { position: relative; width: 100%; padding: 14px 0; cursor: pointer; }
  .acc__head::after { content: ""; position: absolute; inset-inline-end: 4px; top: 50%; width: 8px; height: 5px; margin-top: -2px; background: url("../img/footer/arrow.svg") no-repeat; transition: rotate .3s; }
  .acc.open .acc__head::after { rotate: 180deg; }
  .acc__body { display: none; margin: 0 0 14px; }
  .acc.open .acc__body { display: flex; }
  .footer__support { order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
  .footer__support .footer__h { grid-column: 1 / -1; }
  .pill { width: auto; }
  .footer__follow { order: 3; margin-top: 24px; }
  .footer__follow .footer__h--lg { font-size: 14px; }
  .socials { margin-block-start: 8px; }
  .footer__coat { order: 4; margin-top: 24px; }
  .footer__copy { order: 5; }
  .footer__legal { order: 6; width: auto; }
  .footer__follow .footer__resp, .footer__follow .footer__bga { margin-top: 20px; }
  .logos { order: 8; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 12px; align-items: center; justify-items: center; margin-top: 28px; }
  .logos__line { display: none; }
  .lg { position: relative; width: calc(var(--w) * .9px); height: calc(var(--h) * .9px); opacity: .35; object-fit: contain; }
}