/* Лайтек-Плюс — СВЕТЛЫЙ вариант оформления (вариант «Б»).
   Подключается ПОСЛЕ styles.css и переопределяет токены: вёрстка и классы те же,
   меняются палитра и первый экран. Референс — светлая воздушная схема с гигантским
   заголовком за крупным стеклянным объектом и стеклянными карточками.
   Контрасты пересчитаны под светлый фон: акценты затемнены, иначе текст нечитаем. */

:root {
  --bg: #E7F0F5;      /* холодный светлый фон */
  --bg-2: #F5F9FB;    /* чередующиеся секции */
  --card: #FFFFFF;    /* карточки */
  --ink: #10222E;     /* 14.09:1 на фоне */
  --ink-2: #3C5566;   /* 6.78:1 */
  --ink-3: #4A6274;   /* 5.53:1 */
  --amber: #8A5200;   /* янтарь ТЕКСТОМ на светлом: 5.53:1. Заливка — --amber-fill */
  --amber-fill: #F5A524;
  --ice: #0A56A3;     /* 6.33:1; белый на нём 7.31:1 */
  --line: #C8DCE6;
  --ok: #146B3A; --err: #A4262C;
  --glass: rgba(255, 255, 255, .55);
  --glass-line: rgba(255, 255, 255, .85);
}

body { background:
  radial-gradient(120% 80% at 50% 0%, #DCEAF2 0%, #E7F0F5 45%, #F3F8FA 100%) fixed; }

/* ---------- шапка ---------- */
.header { background: rgba(231, 240, 245, .82); border-bottom: 1px solid var(--line); }
.logo b { color: var(--amber); }
.nav a { color: var(--ink-2); }
.mobilenav { background: var(--bg); }
.burger span { background: var(--ink); }
.skip { background: var(--ice); color: #fff; }

/* ---------- первый экран ---------- */
.hero { min-height: min(94vh, 880px); padding: var(--s5) 0 var(--s7); }   /* запас снизу: cookie-бар не должен накрывать кнопки */
.hero__in { max-width: 58%; }                                             /* колонка текста заканчивается до объекта */
/* тёмные слои тёмной темы выключены */
.aurora, #waves, .hero__scrim, .hero::after { display: none; }

/* гигантское имя-подложка: тонкая антиква, за объектом, обрезано краями экрана */
.hero__word {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: clamp(64px, 12.5vw, 190px); line-height: .8; white-space: nowrap;
  color: #FFFFFF; opacity: .8; letter-spacing: .02em; z-index: 1; pointer-events: none;
  text-shadow: 0 2px 40px rgba(16, 34, 46, .06);
}

/* крупный стеклянный объект в центре — «звуковая волна» */
.glassform {
  position: absolute; left: 76%; top: 46%; transform: translate(-50%, -50%);
  width: min(42vw, 580px); aspect-ratio: 1 / 1; z-index: 1; pointer-events: none;
}
.glassform img, .glassform canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.glassform canvas { z-index: 2; }
/* картинка — подложка на случай, если WebGL недоступен; живое стекло рисуется поверх */
.glassform { filter: drop-shadow(0 46px 66px rgba(16, 60, 100, .26)); }
/* объект медленно парит и поворачивается — как в ролике-референсе */
.glassform__photo { animation: parit 7s ease-in-out infinite alternate; will-change: transform; }
.glassform canvas { animation: parit 7s ease-in-out infinite alternate; will-change: transform; }
@keyframes parit {
  from { transform: translate3d(-2.5%, -4.5%, 0) rotate(-6deg) scale(.965); }
  to   { transform: translate3d(2.5%, 5%, 0) rotate(7deg) scale(1.09); }
}
/* блик, который медленно проходит по стеклу */
.glassform::after {
  content: ""; position: absolute; inset: 8%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(38% 30% at 30% 28%, rgba(255,255,255,.55), transparent 70%);
  mix-blend-mode: screen; animation: blik 5.5s ease-in-out infinite alternate;
}
@keyframes blik {
  from { transform: translate3d(-16%, -12%, 0) scale(.8); opacity: .35 }
  to   { transform: translate3d(20%, 16%, 0) scale(1.25);  opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
  .glassform__photo, .glassform::after { animation: none; }
}
/* у живого стекла края прозрачные сами по себе — прежняя «растворяющая» плашка
   давала видимый прямоугольник на градиенте страницы, поэтому её нет */

.hero__in { position: relative; z-index: 3; }
.hero h1 {
  font-size: clamp(34px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -.02em;
  mix-blend-mode: normal; font-weight: 400; max-width: 13ch; color: var(--ink);
}
.hero h1 em { color: var(--amber); font-style: normal; font-weight: 500; }
.hero .lead { color: var(--ink-2); max-width: 44ch; }
.eyebrow { color: var(--ice); }

/* кнопки-пилюли: главная синяя со стрелкой, вторая белая */
.btn--main { background: var(--ice); color: #fff; padding-right: 14px; }
.btn--main::after {
  content: "›"; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--ice);
  font-size: 20px; line-height: 1; padding-bottom: 3px;
}
.btn--ghost { background: #fff; border-color: #fff; color: var(--ink); box-shadow: 0 6px 20px -10px rgba(16, 60, 100, .5); }
.btn--ghost:hover { border-color: var(--ice); }

/* стеклянные карточки справа внизу */
/* карточки живут в колонке под кнопками: при absolute они наезжали на заголовок */
.glasses { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 680px; margin-top: var(--s4); }
.glass {
  background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 20px 50px -28px rgba(16, 60, 100, .6);
}
@supports not (backdrop-filter: blur(4px)) { .glass { background: rgba(255, 255, 255, .88) } }
.glass b { color: var(--ink); }
.glass span { color: var(--ink-2); }
.glass--accent { border-color: rgba(245, 165, 36, .75); box-shadow: 0 20px 50px -26px rgba(138, 82, 0, .55); }

/* ---------- содержимое страницы ---------- */
.card { background: #fff; border-color: var(--line); box-shadow: 0 18px 40px -32px rgba(16, 60, 100, .55); }
.card:hover { border-color: var(--ice); }
.card p { color: var(--ink-2); }
.card__more, .cat__price { color: var(--ice); }
.cat__price { color: var(--amber); }
.task__num { color: var(--amber); }
.task li { color: var(--ink-3); }
.task li::before { background: var(--ice); }
.trust div { border-left-color: var(--amber-fill); }
.trust span { color: var(--ink-3); }
.gallery img { background: #DCE8EF; border-color: var(--line); }
.gallery figcaption { color: var(--ink-3); }

.chip span { border-color: var(--line); color: var(--ink-2); background: #fff; }
.chip input:checked + span { border-color: var(--amber); background: rgba(245, 165, 36, .18); color: var(--ink); }
.field input, .field textarea { background: #fff; border-color: var(--line); color: var(--ink); }
.field label, .pick legend { color: var(--ink-3); }
.agree { color: var(--ink-3); }
.agree a { color: var(--ice); }
.agree input { accent-color: var(--ice); }

.contacts dd a:hover { color: var(--ice); }
.footer { background: #DFEAF1; border-top-color: var(--line); color: var(--ink-2); }
.footer__head { color: var(--ink); }
.footer__legal { color: var(--ink-3); border-top-color: var(--line); }
.footer a:hover { color: var(--ice); }
.totop { background: #fff; border-color: var(--line); color: var(--ink); }

.doc a { color: var(--ice); }
.doc th { background: #E3EDF3; }
.doc .btn { color: #fff; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: var(--ice); }

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .hero__in { max-width: 100%; }
  .glassform { width: min(70vw, 520px); left: 78%; opacity: .85; }
}
@media (max-width: 900px) {
  /* на мобильном первый экран — обычный блок: объект под текстом, а не рядом.
     Во flex-контейнере объект вставал слева и выталкивал текст к правому краю. */
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: auto; padding-top: var(--s6); }
  .hero__in { order: 1; }
  .hero__word { top: 30%; font-size: clamp(64px, 24vw, 150px); }
  .glassform { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: 420px; margin: var(--s4) auto 0; order: 2; }
  .glasses { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; font-size: clamp(36px, 9vw, 52px); }
  .hero__in { max-width: none; }
  .hero .lead { max-width: none; }
}


/* иконки и метки в светлой теме */
.glass__pill { background: var(--ice); color: #fff; }
.glass__arrow { color: var(--ink-3); }
.glass:hover .glass__arrow { color: var(--ice); }
.glass__big { color: var(--ink); }


/* вторая кнопка на светлом фоне: белая на белом не читалась — даём рамку и цвет */
.btn--ghost { border-color: var(--ice); color: var(--ice); }
.btn--ghost:hover { background: var(--ice); color: #fff; border-color: var(--ice); }
.hero .btn--ghost { border-color: #fff; color: var(--ink); background: #fff; }
.hero .btn--ghost:hover { border-color: var(--ice); color: var(--ice); background: #fff; }

/* лента брендов в светлой теме */
.tape__line span { background: #fff; border-color: var(--line); color: var(--ink-2); box-shadow: 0 10px 24px -20px rgba(16,60,100,.6); }
.brands__cat { color: var(--ice); }

/* ---------- фото в карточках каталога ---------- */
.cat__img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r1);
  margin-bottom: var(--s3); background: #EDF3F7; border: 1px solid var(--line);
}
.card.cat { padding-top: var(--s3); }

/* ---------- объект первого экрана: ролик ---------- */
.glassform__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block;
  mix-blend-mode: multiply;              /* белый фон ролика уходит, остаётся стекло */
  /* края кадра растворяем, иначе на странице виден прямоугольник видео */
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 92%);
          mask-image: radial-gradient(closest-side, #000 62%, transparent 92%);
}
/* движение уже внутри ролика — покачивание не нужно, оно только рвало композицию */