/* ============================================================
   Lyss Studio — CRYSTAL SKIN
   Слой поверх css/style.css: меняет только внешний вид, не трогая
   разметку и расположение блоков. Что делает:
     • палитра уходит в почти белую бумагу с ледяными и перламутровыми
       полутонами, акцент — глубокий холодный индиго;
     • шрифты: тонкая антиква Cormorant Garamond для заголовков и цифр,
       Manrope для интерфейса и текста;
     • стекло становится прозрачнее, с тонкой белой кромкой и мягкой тенью;
     • крупные цветные панели (CTA, итог калькулятора, карточка ТЗ и заказа,
       тариф Advanced) светлеют, текст в них — чернильный;
     • добавляется деликатное зерно и голографические переливы.
   Подключается в index.html сразу после style.css.
   ============================================================ */

/* ---------- 1. Токены ---------- */
:root {
  /* бумага и лёд */
  --lav-50:  #f8fafd;
  --lav-100: #eef3f9;
  --lav-200: #dfe8f3;
  --lav-300: #c3d4e8;
  /* акцент: холодный индиго вместо сиреневого */
  --lav-400: #55628c;
  --lav-500: #3b4666;
  --lav-600: #29314c;

  --ice-100: #f1f7fd;
  --ice-200: #e3eefb;
  --aqua-100: #f2fbfd;
  --aqua-200: #ddf2f8;
  --aqua-300: #b7e5ef;
  --aqua-500: #6cc0d4;
  --pink:     #f2c8dd;

  --ink:      #23262f;
  --ink-soft: #5c6474;
  --ink-dim:  #8d94a3;

  --grad-hero: linear-gradient(140deg, #39425f 0%, #4a5678 55%, #5d6a90 100%);
  --grad-text: linear-gradient(105deg, #3f93c4 0%, #6a62c0 38%, #b5629d 66%, #35a3a6 100%);

  --shadow-sm: 0 18px 40px -34px rgba(38, 58, 92, .5);
  --shadow-md: 0 30px 62px -38px rgba(38, 58, 92, .45);
  --shadow-lg: 0 46px 92px -42px rgba(38, 58, 92, .5);
  --radius:    20px;
  --radius-sm: 14px;

  --font-head: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* стекло: прозрачнее, кромка в один пиксель, тень мягкая и холодная */
  --glass-fill:      rgba(255, 255, 255, .22);
  --glass-fill-flat: rgba(255, 255, 255, .66);
  --glass-spec:  radial-gradient(240px 150px at 12% 4%, rgba(255,255,255,.92), rgba(255,255,255,0) 72%);
  --glass-gloss: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.06) 26%, rgba(255,255,255,.02) 62%, rgba(255,255,255,.3) 100%);
  --glass-blur:  blur(20px) saturate(150%);
  --glass-edge:  rgba(255, 255, 255, .9);
  --glass-rim:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.55),
    inset 0 0 40px rgba(255,255,255,.12);
  --glass-drop-sm: 0 14px 32px -24px rgba(38, 58, 92, .45);
  --glass-drop:    0 30px 62px -38px rgba(38, 58, 92, .42);
  --glass-drop-hi: 0 46px 96px -42px rgba(38, 58, 92, .5);

  /* голография: пастельная плёнка, почти прозрачная */
  --holo: linear-gradient(115deg,
    rgba(206,233,255,.34) 0%,
    rgba(231,220,255,.3) 26%,
    rgba(255,224,240,.26) 50%,
    rgba(216,255,246,.3) 74%,
    rgba(206,233,255,.34) 100%);
}

/* ---------- 2. Бумага, свет, зерно ---------- */
body {
  font-weight: 300;
  background:
    radial-gradient(1100px 620px at 82% -8%, #eaf2fc 0%, transparent 62%),
    radial-gradient(900px 520px at -8% 16%, #eef0fb 0%, transparent 58%),
    radial-gradient(900px 520px at 62% 74%, #fdf0f7 0%, transparent 58%),
    radial-gradient(800px 520px at 12% 92%, #eefafb 0%, transparent 60%),
    linear-gradient(180deg, #fcfdff 0%, #f7f9fd 60%, #f4f8fb 100%);
}
body::before {
  background:
    radial-gradient(42vw 42vw at 14% 10%, rgba(160, 214, 245, .22), transparent 70%),
    radial-gradient(38vw 38vw at 86% 16%, rgba(203, 190, 245, .2), transparent 70%),
    radial-gradient(46vw 46vw at 72% 80%, rgba(255, 214, 236, .16), transparent 72%),
    radial-gradient(40vw 40vw at 22% 88%, rgba(178, 240, 232, .16), transparent 72%);
  filter: blur(6px);
}
/* зерно: снимает «пластик» с градиентов, кликам не мешает */
html::after {
  content: ''; position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .16; mix-blend-mode: multiply;
  background-image: 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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* ---------- 3. Типографика ---------- */
h1, h2, h3, h4, .logo__text { font-weight: 300; letter-spacing: -.012em; line-height: 1.08; }
h3, h4 { font-weight: 400; }
.hero__title { letter-spacing: -.02em; line-height: .98; }
.hero__sub, .section__lead, p { font-weight: 300; }
b, strong { font-weight: 600; }
/* рубрики — тонкая разрядка вместо стеклянной пилюли */
.eyebrow {
  font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: .3em;
  color: var(--ink-dim); background: none; border: none; box-shadow: none; padding: 0; backdrop-filter: none;
}
.section__head :is(h1, h2) { font-size: clamp(32px, 5vw, 56px); }
.section__lead { font-size: 16px; }
/* цифры и цены: антиква нормального начертания, без жира */
.cat__from, .svc__price, .plan__price, .artplan__p, .ptable__sum, .merch-card__price,
.calc__total, .prep__line, .hero__stats b, .tl__num, .ychset__price, .cart__total b,
.order__items em, .chatpro__price, .bn__price { font-weight: 400; }

/* ---------- 4. Кнопки ---------- */
.btn { font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: .01em; }
.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #2f3444 0%, #1e2230 100%);
  box-shadow: 0 20px 38px -24px rgba(26, 31, 45, .85);
}
.btn--primary:hover { box-shadow: 0 26px 48px -26px rgba(26, 31, 45, .9); }
.btn--ghost {
  color: var(--ink);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.62);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-rim), var(--glass-drop-sm);
}

/* ---------- 5. Карточки: белая бумага и волосяная линия ---------- */
.cat__body, .svc, .addcard, .artplan, .review, .tl, .accordion details, .terms__box,
.merch-card, .plan, .about__card, .soon-card, .chatpro, .bn__card, .ychset, .l2d__card {
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.72);
  border: 1px solid rgba(35, 38, 47, .06);
  box-shadow: var(--shadow-sm);
}
.cat__body:hover, .svc:hover, .addcard:hover, .accordion details:hover,
.merch-card:hover, .terms__box:hover { box-shadow: var(--shadow-md); }
.hero__showcase { border: 1px solid rgba(255,255,255,.85); box-shadow: var(--shadow-lg); }

/* ---------- 6. Крупные цветные панели светлеют ---------- */
.cta__box, .calc__sum, .prep__card, .order__card, .plan--pro, .tiers .plan--pro {
  color: var(--ink);
  background: var(--glass-spec), var(--holo), linear-gradient(160deg, rgba(255,255,255,.92), rgba(234,241,250,.86));
  background-size: auto, 240% 240%, auto;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--glass-rim), var(--shadow-md);
}
.cta__box h2, .plan--pro .plan__name, .plan--pro .plan__price { color: var(--ink); }
.tiers .plan--pro .plan__name, .tiers .plan--pro .plan__price, .tiers .plan--pro .checks li { color: var(--ink); }
.tiers .plan--pro .plan__note { color: var(--ink-soft); }
.plan--pro .btn--primary { background: linear-gradient(180deg, #2f3444, #1e2230); color: #fff; }
.cta__box p, .plan--pro .plan__note, .plan--pro .checks li, .calc__sumcap,
.prep__cardhead small, .order__cardhead small, .calc__note, .prep__cardfoot { color: var(--ink-soft); }
.plan--pro .checks li::before { color: var(--lav-500); }
.cta__links .btn--ghost, .calc__actions .btn--ghost {
  color: var(--ink); background: rgba(255,255,255,.66); border-color: var(--glass-edge);
}
.calc__actions .btn--primary { background: linear-gradient(180deg, #2f3444, #1e2230); color: #fff; }
.calc__lines li { border-bottom-color: rgba(35, 38, 47, .1); }
.calc__lines .is-total, .order__total, .prep__cardfoot, .prep__dl dd.is-total, .cart__total {
  border-color: rgba(35, 38, 47, .12);
}
.calc__lines .is-group button { color: var(--ink-soft); border-color: rgba(35, 38, 47, .14); background: rgba(255,255,255,.6); }
.calc__lines .is-group button:hover { background: #fff; color: var(--ink); }
.order__items li { background: rgba(255,255,255,.62); }
.order__items img { background: rgba(255,255,255,.8); }
.prep__dl dd.is-line, .prep__dl dd.is-sub, .order__items small, .calc__lines li small { color: var(--ink-soft); opacity: 1; }
.prep__dl dd.is-missing { color: var(--ink-dim); }
.showcase__btn { background: var(--glass-spec), var(--glass-gloss), rgba(35, 40, 60, .55); }

/* ---------- 7. Мелкие акценты и заливки ---------- */
.toast, .cartbtn__n, .is-incart[data-qty]:not([data-qty=""])::after {
  background: linear-gradient(180deg, #2f3444, #1e2230);
  box-shadow: 0 14px 26px -18px rgba(26, 31, 45, .8);
}
.merch-card__add.is-incart, .pl__add.is-incart, .ptable__add.is-incart,
.wiz__steps li.is-active, .quicknav a.is-active, .chip input:checked + span {
  background: linear-gradient(180deg, #2f3444, #1e2230); color: #fff; border-color: transparent;
}
.tl__num, .about__avatar, .socials__ico, .bannerpro__app-ico { box-shadow: 0 16px 32px -22px rgba(38, 58, 92, .7); }
.ptable thead th { font-family: var(--font-head); font-weight: 400; font-size: 17px; letter-spacing: .02em; }
.status { color: var(--ink); }
.badge { color: var(--ink-soft); border-color: rgba(35, 38, 47, .08); background: rgba(255,255,255,.7); }

/* ---------- 8. Шапка, панели и мелкая пластика ---------- */
.site-header.scrolled { box-shadow: var(--glass-rim), 0 18px 40px -34px rgba(38, 58, 92, .45); }
.nav a { font-size: 13.5px; letter-spacing: .01em; color: var(--ink-soft); }
.nav a:hover, .nav a.is-active { color: var(--ink); }
.quicknav a { font-size: 12.5px; letter-spacing: .02em; }
.cart, .socials, .modal[open] { background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.82); }
.prep__field, .pick__btn { border-color: rgba(35, 38, 47, .12); background: rgba(255,255,255,.86); }
.prep__field:focus { outline-color: var(--lav-400); }
.slider__dots button.is-active { background: var(--lav-500); }
.slider__nav { color: var(--ink); }

/* ---------- 9. Голографические переливы на акцентах ---------- */
.grad, .hero__title .grad { background-image: var(--grad-text); }
.cta__box::after, .prep__card::after { content: none; }
.merch-card__media::after { opacity: .5; }

/* ---------- 10. Читаемость: мелкий текст крупнее и плотнее ---------- */
body { font-size: 17px; }
p, li, dd { font-weight: 350; }
small, .cat__body p, .calc__note, .calc__hint, .cart__note, .cart__txt small,
.merch-card__body p, .tl__body p, .review p, .svc > p, .addcard__hint, .models__ctahint,
.art__note, .merch__note, .ychset__info p, .order__items small, .footer__copy,
.prep__carthint, .wiz__hint, .lform__q legend small { font-weight: 400; }
.section__lead { font-size: 17.5px; }
.cat__body h3 { font-size: 20px; }
.cat__body p { font-size: 14.5px; }
.cat__from { font-size: 15px; }
.merch-card__body p, .svc > p, .review p, .tl__body p { font-size: 15.5px; }
.pricelist span, .checks li, .accordion details p, .faq details p { font-size: 15.5px; }
.calc__note, .calc__hint, .cart__note, .addcard__hint, .prep__carthint, .merch__note { font-size: 13.5px; }
.cart__txt small, .order__items small, .pick__menu li, .slider__count { font-size: 13px; }
.nav a { font-size: 14px; }
.btn { font-size: 14.5px; }
.btn--sm { font-size: 13.5px; }
.footer__copy, .footer__nav a, .socials__txt small { font-size: 13.5px; }
.calc__lines { font-size: 14.5px; }
.prep__dl dd { font-size: 15px; }

/* ---------- 11. Больше жидкого стекла и голографии ---------- */
:root {
  --glass-fill-flat: rgba(255, 255, 255, .6);
  --holo: linear-gradient(115deg,
    rgba(198,230,255,.5) 0%,
    rgba(226,213,255,.46) 24%,
    rgba(255,220,238,.4) 48%,
    rgba(206,255,244,.46) 72%,
    rgba(198,230,255,.5) 100%);
}
/* радужная плёнка на всех крупных поверхностях, медленно переливается при наведении */
.cat__body, .svc, .addcard, .merch-card, .accordion details, .terms__box, .plan,
.review, .about__card, .ychset, .artplan, .soon-card, .chatpro, .bn__card {
  background: var(--glass-spec), var(--holo), var(--glass-gloss), rgba(255,255,255,.66);
  background-size: auto, 280% 280%, auto, auto;
  background-position: 0 0, 0% 50%, 0 0, 0 0;
  transition: background-position 1.8s ease, transform .35s var(--ease-soft), box-shadow .35s;
}
.cat:hover .cat__body, .svc:hover, .addcard:hover, .merch-card:hover, .plan:hover,
.review:hover, .ychset:hover, .artplan:hover, .accordion details[open] {
  background-position: 0 0, 100% 50%, 0 0, 0 0;
}
/* тонкая иридесцентная кромка на стекле интерфейса */
.btn--ghost, .status, .cartbtn, .quicknav, .site-header.scrolled, .cart, .socials,
.modal[open], .calc__sum, .prep__card, .cta__box, .order__card, .toast {
  box-shadow: var(--glass-rim), 0 0 0 1px rgba(184, 212, 244, .4), var(--glass-drop-sm);
}
.btn--primary { box-shadow: 0 0 0 1px rgba(150, 190, 235, .45), 0 20px 38px -24px rgba(26, 31, 45, .85); }
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(178, 220, 248, .7), 0 26px 48px -26px rgba(26, 31, 45, .9); }
.merch-card__media::after, .logos__grid figure { opacity: 1; }

/* ---------- 12. Кристальный аксолотль: чешуйки, блики, переливы ---------- */
/* мелкая чешуя-кристалл по верху страницы, почти неразличимая, но даёт «материал» */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.55) 0 9px, transparent 10px),
    radial-gradient(circle at 0 100%, rgba(206,228,248,.4) 0 9px, transparent 10px),
    radial-gradient(circle at 100% 100%, rgba(231,220,255,.34) 0 9px, transparent 10px);
  background-size: 26px 18px;
  -webkit-mask-image: radial-gradient(125% 85% at 50% 0%, #000 0%, transparent 68%);
  mask-image: radial-gradient(125% 85% at 50% 0%, #000 0%, transparent 68%);
}
/* сияние в hero — кристальный блик вместо сиреневого пятна */
.hero__glow {
  background:
    radial-gradient(circle, rgba(198,232,255,.55), transparent 62%),
    conic-gradient(from 200deg, rgba(226,213,255,.35), rgba(206,255,244,.3), rgba(255,220,238,.32), rgba(226,213,255,.35));
  filter: blur(26px);
  animation: holoGlide 18s ease-in-out infinite alternate;
}
/* рубрики секций — радужная заливка букв */
.eyebrow {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* статус и значки — перламутровая подложка */
.status { background: var(--glass-spec), var(--holo), var(--glass-gloss), rgba(255,255,255,.72); background-size: auto, 260% 260%, auto, auto; }
/* фото в карточках мерча и работ — чуть заметнее радужная плёнка */
.merch-card:hover .merch-card__media::after { opacity: 1; }

/* ---------- 13. Единая типографика ----------
   Антиква Cormorant остаётся только для крупных заголовков: у неё
   старостильные цифры, из-за которых суммы выглядели мелкими и
   разнобойными. Всё остальное — Manrope, цифры наборные и табличные. */
h3, h4, .logo__text, .plan__name, .cat__body h3, .svc h3, .addcard h4,
.merch-card__body h3, .ychset__info h4, .tl__body h4, .chatpro h4, .bn h4,
.soon-card h4, .review b, .faq summary, .accordion summary, .calc__head h3,
.modal h3, .cart__head h3, .prep__cardhead span, .order__cardhead span {
  font-family: var(--font-body); font-weight: 600; letter-spacing: -.005em; line-height: 1.3;
}
h1, h2, .hero__title, .section__head :is(h1, h2) { font-variant-numeric: lining-nums; }

/* цены и числа: крупнее, наборные цифры, без антиквы */
.ptable__sum, .cat__from, .merch-card__price, .calc__total, .plan__price, .svc__price,
.artplan__p, .ychset__price, .chatpro__price, .bn__price, .cart__total b, .cart__sum,
.prep__line, .hero__stats b, .tl__num, .order__items em, .calc__lines b, .pricelist b,
.order__total, .wiz__sum, .cr-total b {
  font-family: var(--font-body); font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.015em;
}
.ptable__sum { font-size: 24px; margin-bottom: 6px; }
.ptable td small { font-size: 13px; font-weight: 400; }
.ptable thead th { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: .04em; }
.ptable td b { font-family: var(--font-body); font-weight: 600; font-size: 16px; }
.cat__from { font-size: 15.5px; font-weight: 600; }
.merch-card__price { font-size: 30px; }
.merch-card__price small { font-weight: 400; font-size: 13.5px; }
.calc__total { font-size: clamp(32px, 4.2vw, 44px); }
.plan__name { font-size: 22px; }
.plan__price, .svc__price { font-size: 22px; }
.svc__price small, .plan__note { font-weight: 400; }
.artplan__p { font-size: 36px; }
.ychset__price { font-size: 24px; }
.cart__total b { font-size: 22px; }
.cart__sum { font-size: 15px; }
.prep__line { font-size: 17px; font-weight: 600; }
.hero__stats b { font-size: 30px; }
.tl__num { font-size: 20px; }
.pricelist b { font-size: 16.5px; }
.pricelist b small { font-family: var(--font-body); font-weight: 400; font-size: 12.5px; }
.calc__sumcap, .eyebrow, .kicker { font-family: var(--font-body); }

/* ---------- 14. Больше жидкого стекла ---------- */
.ptable {
  background: var(--glass-spec), var(--holo), var(--glass-gloss), rgba(255,255,255,.5);
  background-size: auto, 260% 260%, auto, auto;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.ptable td { border-bottom-color: rgba(35, 38, 47, .07); }
.ptable tbody tr:hover td { background: rgba(255, 255, 255, .42); }
.tiers .plan, .tiers .plan--pro, .cat__body, .calc, .calc__sum, .prep__card, .order__card,
.merch-card, .addcard, .svc, .accordion details, .terms__box, .review, .artplan, .ychset {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
/* строки списков подсвечиваются стеклом при наведении */
.checks li, .pricelist li { border-radius: 12px; transition: background .35s var(--ease-soft); }
.checks li:hover, .pricelist li:hover { background: var(--glass-gloss), rgba(255, 255, 255, .5); }
/* мелкие кнопки — тоже стекло */
.ptable__add, .pl__add, .calc__step, .order__remove, .prep__unlink, .slider__nav {
  background: var(--glass-spec), var(--glass-gloss), rgba(255, 255, 255, .72);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-rim), var(--glass-drop-sm);
}
.ptable__add { font-family: var(--font-body); font-weight: 600; font-size: 12.5px; padding: 7px 14px; }

/* ---------- 15. Меньше скруглений, больше прозрачности, другой шрифт ---------- */
:root {
  --font-head: 'Unbounded', 'Onest', system-ui, sans-serif;
  --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius:    12px;
  --radius-sm: 8px;
  /* стекло прозрачнее и глубже размыто */
  --glass-fill:      rgba(255, 255, 255, .16);
  --glass-fill-flat: rgba(255, 255, 255, .42);
  --glass-blur:      blur(26px) saturate(165%);
}
/* заголовки: тонкий геометрический гротеск вместо антиквы */
h1, h2, .hero__title, .section__head :is(h1, h2), .logo__text {
  font-family: var(--font-head); font-weight: 200; letter-spacing: -.03em; line-height: 1.06;
}
.hero__title { font-size: clamp(36px, 5.4vw, 64px); }
.section__head :is(h1, h2) { font-size: clamp(28px, 3.8vw, 46px); }
.logo__text { font-weight: 300; letter-spacing: -.02em; }
h3, h4 { font-family: var(--font-body); font-weight: 600; }

/* меньше скруглений: панели, карточки и медиа */
.cta__box { border-radius: 16px; }
.modal[open], .modal.modal--form[open] { border-radius: 14px; }
.pick__menu, .pick__preview, .pick__btn { border-radius: 10px; }
.cart, .socials { border-radius: 0; }
.merch-card__media, .slider__frame, .hero__showcase, .gallery .zoomframe,
.logos__grid .zoomframe, .addons__gallery figure, .cat, .ychpic, .lessons__pic,
.showcase__frame, .l2d__card, .custom-embed__frame { border-radius: 12px; }
/* пилюли становятся мягкими прямоугольниками, круглые иконки остаются круглыми */
.btn, .badge, .status, .cat__from, .toast, .quicknav, .quicknav a, .nav a,
.chip span, .cr-tag, .calc__opt, .wiz__choice, .cart__note, .lform__chips .chip span,
.ptable__add, .slider__dots button, .cartbtn__n, .is-incart[data-qty]:not([data-qty=""])::after {
  border-radius: 9px;
}
.slider__dots button.is-active { border-radius: 9px; }
.cartbtn, .modal__close, .cart__rm, .totop, .slider__nav, .pl__add, .merch-card__add,
.order__remove, .prep__unlink, .socials__ico, .about__avatar, .tl__num { border-radius: 50%; }
.tl__num, .socials__ico, .about__avatar { border-radius: 12px; }

/* больше прозрачности на поверхностях */
.cat__body, .svc, .addcard, .merch-card, .accordion details, .terms__box, .plan,
.review, .about__card, .ychset, .artplan, .soon-card, .chatpro, .bn__card {
  background: var(--glass-spec), var(--holo), var(--glass-gloss), rgba(255,255,255,.42);
}
.ptable { background: var(--glass-spec), var(--holo), var(--glass-gloss), rgba(255,255,255,.34); }
.cta__box, .calc__sum, .prep__card, .order__card, .plan--pro, .tiers .plan--pro {
  background: var(--glass-spec), var(--holo), linear-gradient(160deg, rgba(255,255,255,.62), rgba(234,241,250,.5));
}
.site-header, .cart, .socials, .modal[open], .quicknav, .pick__menu {
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.62);
}
.btn--ghost { background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.4); }
.prep__field, .pick__btn { background: rgba(255,255,255,.62); }

/* остатки крупных скруглений из базовых стилей */
.svc__icon, .tl__num { border-radius: 12px; }
.hero__showcase { border-radius: 14px; }
.cat__body { border-radius: 12px; }
.logos__grid img { border-radius: 10px; }
.socials-tab { border-radius: 10px 0 0 10px; }
@media (max-width: 560px) { .pick__menu { border-radius: 12px; } }
.mascot__tag, .l2d__tag, .slider__count, .merch-card__tag { border-radius: 9px; }

/* ---------- 16. Изящная антиква в заголовках ----------
   Prata — высококонтрастная журнальная антиква: тонкие соединения,
   выразительные засечки. Цифры и цены остаются в Onest, чтобы суммы
   были крупными и ровными. */
:root { --font-head: 'Prata', 'Times New Roman', serif; }
h1, h2, .hero__title, .section__head :is(h1, h2), .logo__text {
  font-family: var(--font-head); font-weight: 400; letter-spacing: -.01em; line-height: 1.12;
}
.hero__title { font-size: clamp(38px, 5.6vw, 68px); line-height: 1.08; }
.section__head :is(h1, h2) { font-size: clamp(30px, 4vw, 50px); }
.logo__text { font-weight: 400; letter-spacing: .005em; }
.logo__text em { font-style: italic; }
/* подзаголовки и названия карточек — Onest, чтобы антиква не мельчила */
h3, h4 { font-family: var(--font-body); font-weight: 600; letter-spacing: -.005em; }

/* ---------- 17. Типографика как на странице ссылок ----------
   Manrope для всего: крупные заголовки тонким начертанием с плотной
   разрядкой, названия — средним. Мелкие подписи и номера — JetBrains Mono
   капсом с широкой разрядкой. */
:root {
  --font-head: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}
h1, h2, .hero__title, .section__head :is(h1, h2) {
  font-family: var(--font-head); font-weight: 200; letter-spacing: -.04em; line-height: .98;
}
.hero__title { font-size: clamp(42px, 6.2vw, 84px); letter-spacing: -.045em; line-height: .92; }
.section__head :is(h1, h2) { font-size: clamp(30px, 4.2vw, 54px); }
.logo__text { font-family: var(--font-head); font-weight: 300; letter-spacing: -.01em; }
h3, h4, .plan__name, .cat__body h3, .svc h3, .addcard h4, .merch-card__body h3,
.ychset__info h4, .tl__body h4, .accordion summary, .faq summary, .modal h3, .cart__head h3 {
  font-family: var(--font-body); font-weight: 500; letter-spacing: .03em;
}
/* короткие подписи, статусы и номера — моноширинный капс */
.eyebrow, .calc__sumcap, .slider__count, .status, .hero__stats span, .wiz__steps li,
.mascot__tag, .l2d__tag, .footer__copy, .prep__cardhead small, .order__cardhead small,
.merch-card__tag, .cr-kicker {
  font-family: var(--mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: .26em; text-transform: uppercase;
}
.eyebrow { font-size: 10.5px; letter-spacing: .3em; }
.status { font-size: 10.5px; }
.footer__copy { letter-spacing: .18em; }
/* номера и цены-подписи — моноширинный без капса */
.cat__from, .tl__num, .slider__count, .cart__sum, .order__items em, .calc__lines b {
  font-family: var(--mono); font-weight: 400; letter-spacing: .02em; text-transform: none;
}
.cat__from { font-size: 13px; font-weight: 400; }
.tl__num { font-size: 17px; }
/* крупные суммы остаются в Manrope: моноширинный на больших кеглях смотрится тяжело */
.ptable__sum, .merch-card__price, .calc__total, .plan__price, .svc__price, .artplan__p,
.ychset__price, .cart__total b, .prep__line, .hero__stats b, .pricelist b {
  font-family: var(--font-body); font-weight: 600; letter-spacing: -.02em;
}
.hero__stats b { font-weight: 300; font-size: 34px; }

/* ---------- 18. Изящные заголовки: Jost тонкого начертания ----------
   Геометричный гротеск с почти циркульными овалами: на крупном кегле
   в весе 200 он звучит легко и дорого. Текст остаётся в Manrope,
   мелкие подписи — в JetBrains Mono. */
:root { --font-head: 'Jost', 'Manrope', system-ui, sans-serif; }
h1, h2, .hero__title, .section__head :is(h1, h2) {
  font-family: var(--font-head); font-weight: 200;
  letter-spacing: -.012em; line-height: 1.04; color: var(--ink);
}
.hero__title { font-size: clamp(44px, 6.6vw, 92px); letter-spacing: -.02em; line-height: .98; }
.section__head :is(h1, h2) { font-size: clamp(32px, 4.4vw, 58px); }
.logo__text { font-family: var(--font-head); font-weight: 300; letter-spacing: .02em; }
/* названия карточек и блоков — тот же Jost, но плотнее и с лёгкой разрядкой */
h3, h4, .plan__name, .cat__body h3, .svc h3, .addcard h4, .merch-card__body h3,
.ychset__info h4, .tl__body h4, .accordion summary, .faq summary, .modal h3,
.cart__head h3, .chatpro h4, .bn h4, .soon-card h4 {
  font-family: var(--font-head); font-weight: 400; letter-spacing: .015em; line-height: 1.25;
}
.section__lead { line-height: 1.7; }
/* суммы оставляем в Manrope: тонкий Jost на числах теряет плотность */
.ptable__sum, .merch-card__price, .calc__total, .plan__price, .svc__price, .artplan__p,
.ychset__price, .cart__total b, .prep__line, .pricelist b, .hero__stats b {
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 500; letter-spacing: -.015em;
}
.hero__stats b { font-weight: 300; }

/* ---------- 19. Тёплый акцент и новая текстовая гарнитура ----------
   Заголовки, интерфейс и тексты — Jost (один гладкий гротеск,
   антиква с мягкими засечками), мелкие подписи — JetBrains Mono.
   Акцент из холодного индиго переведён в тёплый мокко с шампанским. */
:root {
  --font-body: 'Jost', system-ui, -apple-system, sans-serif;
  --font-text: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* тёплая бумага и песочные полутона */
  --lav-50:  #fbf9f6;
  --lav-100: #f4efe9;
  --lav-200: #e9e0d6;
  --lav-300: #d8c7b4;
  /* акцент: тёплый мокко */
  --lav-400: #a98a6e;
  --lav-500: #7c5f4a;
  --lav-600: #5b4436;
  --ink:      #272320;
  --ink-soft: #675d54;
  --ink-dim:  #9a8f84;
  --grad-hero: linear-gradient(140deg, #4a3a2e 0%, #6a5342 55%, #8a7059 100%);
  --grad-text: linear-gradient(105deg, #c08a5a 0%, #b57c94 40%, #8f7fc0 68%, #55b0ae 100%);
  --shadow-sm: 0 18px 40px -34px rgba(92, 68, 48, .45);
  --shadow-md: 0 30px 62px -38px rgba(92, 68, 48, .42);
  --shadow-lg: 0 46px 92px -42px rgba(92, 68, 48, .45);
  /* радужная плёнка с тёплым смещением */
  --holo: linear-gradient(115deg,
    rgba(255,232,214,.5) 0%,
    rgba(255,220,238,.44) 26%,
    rgba(226,213,255,.4) 50%,
    rgba(206,255,244,.42) 74%,
    rgba(255,232,214,.5) 100%);
}
/* тёплая бумага под всем сайтом */
body {
  background:
    radial-gradient(1100px 620px at 82% -8%, #fdf3ea 0%, transparent 62%),
    radial-gradient(900px 520px at -8% 16%, #f7f0fb 0%, transparent 58%),
    radial-gradient(900px 520px at 62% 74%, #fdeef2 0%, transparent 58%),
    radial-gradient(800px 520px at 12% 92%, #f0fafa 0%, transparent 60%),
    linear-gradient(180deg, #fdfcfa 0%, #faf7f3 60%, #f7f6f4 100%);
}
body::before {
  background:
    radial-gradient(42vw 42vw at 14% 10%, rgba(238, 205, 170, .24), transparent 70%),
    radial-gradient(38vw 38vw at 86% 16%, rgba(214, 196, 240, .2), transparent 70%),
    radial-gradient(46vw 46vw at 72% 80%, rgba(255, 214, 226, .18), transparent 72%),
    radial-gradient(40vw 40vw at 22% 88%, rgba(186, 236, 228, .16), transparent 72%);
}
/* тёмные заливки — тёплый графит вместо синего */
.btn--primary, .calc__actions .btn--primary, .toast, .cartbtn__n,
.is-incart[data-qty]:not([data-qty=""])::after, .merch-card__add.is-incart,
.pl__add.is-incart, .ptable__add.is-incart, .wiz__steps li.is-active,
.quicknav a.is-active, .chip input:checked + span {
  background: linear-gradient(180deg, #3a322c 0%, #29231e 100%); color: #fff;
}
.btn--primary { box-shadow: 0 0 0 1px rgba(214, 186, 156, .5), 0 20px 38px -24px rgba(58, 45, 35, .8); }
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(232, 205, 176, .7), 0 26px 48px -26px rgba(58, 45, 35, .85); }
.btn--ghost, .status, .cartbtn, .quicknav, .site-header.scrolled, .cart, .socials,
.modal[open], .calc__sum, .prep__card, .cta__box, .order__card {
  box-shadow: var(--glass-rim), 0 0 0 1px rgba(226, 205, 182, .45), var(--glass-drop-sm);
}

/* ---------- 20. Тексты: тот же гладкий гротеск, что и в интерфейсе ---------- */
body, p, li, dd, blockquote, .section__lead, .review p, .cat__body p, .svc > p,
.tl__body p, .accordion details p, .faq details p, .merch-card__body p, .ychset__info p,
.prep__dl dd, .terms__grid p, .art__note, .merch__note, .models__ctahint, .addcard__hint {
  font-family: var(--font-text); font-weight: 400; letter-spacing: 0;
}
body { font-size: 17px; line-height: 1.62; }
.section__lead { font-size: 17.5px; }
.review p { font-size: 16.5px; line-height: 1.66; }
b, strong, .review b { font-weight: 500; }
/* интерфейс остаётся геометричным: кнопки, меню, поля, вкладки */
.btn, .nav a, .quicknav a, .prep__field, .pick__btn, .calc__opt, .wiz__choice,
.chip span, .cr-btn, input, select, textarea, button, .cart__txt b, .order__line,
.cat__from, .cart__sum { font-family: var(--font-body); }
.btn { font-weight: 500; letter-spacing: .02em; }

/* суммы: Manrope больше не подключён — держим цены в Jost */
.ptable__sum, .merch-card__price, .calc__total, .plan__price, .svc__price, .artplan__p,
.ychset__price, .cart__total b, .prep__line, .pricelist b, .hero__stats b, .order__items em,
.calc__lines b, .chatpro__price, .bn__price, .order__total {
  font-family: var(--font-body); font-weight: 500; letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.hero__stats b { font-weight: 300; }
.ptable__sum { font-weight: 500; }

/* ---------- 21. Акцент: глубокий фиолетовый ----------
   Не синий и не коричневый: тёмный фиолет для заливок и текста-акцента,
   бумага с лёгким лиловым подтоном, радужная плёнка с фиалковым сдвигом. */
:root {
  --lav-50:  #faf8fd;
  --lav-100: #f2edfa;
  --lav-200: #e4dbf3;
  --lav-300: #c9bbe6;
  --lav-400: #6f5590;
  --lav-500: #4d3a6b;
  --lav-600: #3a2b52;
  --ink:      #241f2e;
  --ink-soft: #5d5570;
  --ink-dim:  #928a9e;
  --grad-hero: linear-gradient(140deg, #3d2f5a 0%, #574480 55%, #6d5a93 100%);
  --grad-text: linear-gradient(105deg, #7a5fb8 0%, #b06fa8 38%, #6f8fd0 68%, #4fb3b0 100%);
  --shadow-sm: 0 18px 40px -34px rgba(74, 52, 110, .5);
  --shadow-md: 0 30px 62px -38px rgba(74, 52, 110, .46);
  --shadow-lg: 0 46px 92px -42px rgba(74, 52, 110, .5);
  --holo: linear-gradient(115deg,
    rgba(230,214,255,.5) 0%,
    rgba(255,220,240,.44) 26%,
    rgba(214,226,255,.4) 50%,
    rgba(214,255,246,.42) 74%,
    rgba(230,214,255,.5) 100%);
}
/* бумага: почти белая с лиловым подтоном */
body {
  background:
    radial-gradient(1100px 620px at 82% -8%, #f6f0fd 0%, transparent 62%),
    radial-gradient(900px 520px at -8% 16%, #f3eefc 0%, transparent 58%),
    radial-gradient(900px 520px at 62% 74%, #fdeef7 0%, transparent 58%),
    radial-gradient(800px 520px at 12% 92%, #eff9fb 0%, transparent 60%),
    linear-gradient(180deg, #fdfcff 0%, #faf8fd 60%, #f7f5fb 100%);
}
body::before {
  background:
    radial-gradient(42vw 42vw at 14% 10%, rgba(196, 174, 240, .24), transparent 70%),
    radial-gradient(38vw 38vw at 86% 16%, rgba(214, 190, 245, .22), transparent 70%),
    radial-gradient(46vw 46vw at 72% 80%, rgba(255, 206, 232, .18), transparent 72%),
    radial-gradient(40vw 40vw at 22% 88%, rgba(186, 230, 240, .16), transparent 72%);
}
/* тёмные заливки — фиолетовый графит */
.btn--primary, .calc__actions .btn--primary, .toast, .cartbtn__n,
.is-incart[data-qty]:not([data-qty=""])::after, .merch-card__add.is-incart,
.pl__add.is-incart, .ptable__add.is-incart, .wiz__steps li.is-active,
.quicknav a.is-active, .chip input:checked + span {
  background: linear-gradient(180deg, #3d2f5c 0%, #2a1f42 100%); color: #fff;
}
.btn--primary { box-shadow: 0 0 0 1px rgba(190, 168, 232, .5), 0 20px 38px -24px rgba(48, 34, 74, .8); }
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(208, 190, 245, .7), 0 26px 48px -26px rgba(48, 34, 74, .85); }
.btn--ghost, .status, .cartbtn, .quicknav, .site-header.scrolled, .cart, .socials,
.modal[open], .calc__sum, .prep__card, .cta__box, .order__card {
  box-shadow: var(--glass-rim), 0 0 0 1px rgba(206, 188, 240, .45), var(--glass-drop-sm);
}
/* чешуя и блик в hero — тоже фиалковые */
body::after {
  background-image:
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.55) 0 9px, transparent 10px),
    radial-gradient(circle at 0 100%, rgba(222,208,248,.4) 0 9px, transparent 10px),
    radial-gradient(circle at 100% 100%, rgba(240,214,246,.34) 0 9px, transparent 10px);
}
.hero__glow {
  background:
    radial-gradient(circle, rgba(214,196,250,.55), transparent 62%),
    conic-gradient(from 200deg, rgba(226,206,255,.35), rgba(214,255,246,.28), rgba(255,214,238,.32), rgba(226,206,255,.35));
}

/* ---------- 22. Дороже: голография только на акцентах, спектр голубой → розовый ----------
   Радужные переливы убраны с рядовых карточек и оставлены на нескольких
   блоках: CTA, тариф Advanced, карточка ТЗ, итог калькулятора, карточка
   заказа, статус и фото мерча. Спектр — от голубого через сиреневый к розовому. */
:root {
  --holo: linear-gradient(115deg,
    rgba(186,222,255,.55) 0%,
    rgba(206,206,252,.5) 30%,
    rgba(232,202,246,.46) 58%,
    rgba(250,202,232,.5) 82%,
    rgba(186,222,255,.55) 100%);
  --grad-text: linear-gradient(105deg, #5aa6dc 0%, #8a7ed2 44%, #c07cbb 74%, #e08fc0 100%);
}
/* рядовые карточки — чистое стекло без плёнки */
.cat__body, .svc, .addcard, .merch-card, .accordion details, .terms__box, .plan,
.review, .about__card, .ychset, .artplan, .soon-card, .chatpro, .bn__card {
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.44);
  border: 1px solid rgba(36, 31, 46, .05);
  box-shadow: var(--shadow-sm);
}
/* при наведении — лёгкий перелив, он же намекает на кристалл */
.cat:hover .cat__body, .svc:hover, .addcard:hover, .merch-card:hover, .plan:hover,
.review:hover, .ychset:hover, .artplan:hover, .accordion details[open] {
  background: var(--glass-spec), var(--holo), var(--glass-gloss), rgba(255,255,255,.5);
  background-size: auto, 260% 260%, auto, auto;
  background-position: 0 0, 100% 50%, 0 0, 0 0;
  box-shadow: var(--shadow-md);
}
/* акцентные блоки переливаются сами, медленно */
.cta__box, .tiers .plan--pro, .prep__card, .calc__sum, .order__card, .status {
  background: var(--glass-spec), var(--holo), linear-gradient(160deg, rgba(255,255,255,.7), rgba(246,242,253,.52));
  background-size: auto, 300% 300%, auto;
  /* перелив — это движение фона, а не самой панели: holoGlide двигал и поворачивал весь блок */
  animation: gradFlow 17s ease-in-out infinite alternate;
}
.merch-card__media::after { background: var(--holo); opacity: .55; }
.ptable thead th { position: relative; }
.hero__showcase { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(206, 214, 248, .5); }

/* ---------- 23. Премиальные детали ---------- */
.section { padding: clamp(88px, 11vh, 152px) 0; }
.section__head { margin-bottom: clamp(34px, 4.6vw, 62px); }
/* тонкая градиентная черта под заголовком раздела */
.section__head::after {
  content: ''; display: block; width: 64px; height: 1px; margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--lav-300), transparent);
}
/* фото живут спокойнее, а на наведении оживают */
.cat__img img, .merch-card__media img, .gallery .zoomframe img, .addons__gallery img {
  filter: saturate(.94) contrast(1.01); transition: filter .7s var(--ease-soft), transform .7s var(--ease-soft);
}
.cat:hover .cat__img img, .merch-card:hover .merch-card__media img,
.gallery .zoomframe:hover img, .addons__gallery figure:hover img { filter: saturate(1.04) contrast(1.02); }
/* линии тоньше, тени глубже и мягче */
hr, .terms__grid div, .pricelist li, .ptable td, .cart__item { border-color: rgba(36, 31, 46, .07); }
.btn { padding: 15px 30px; letter-spacing: .03em; }
.btn--sm { padding: 11px 20px; }
.btn--primary { box-shadow: 0 0 0 1px rgba(190, 168, 232, .45), 0 24px 44px -26px rgba(48, 34, 74, .78); }
.cat, .merch-card, .hero__showcase, .gallery .zoomframe { box-shadow: var(--shadow-md); }
/* крупные заголовки чуть светлее и просторнее */
.section__head :is(h1, h2) { letter-spacing: -.022em; }
.section__lead { max-width: 58ch; margin-inline: auto; }

/* ---------- 24. Движение: сайт оживает ---------- */
@keyframes crShine { from { transform: translateX(-130%) skewX(-14deg); } to { transform: translateX(130%) skewX(-14deg); } }
@keyframes gradFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes tabIn { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes breathe {
  0%, 100% { box-shadow: var(--glass-rim), 0 10px 26px -18px rgba(74, 52, 110, .45); }
  50%      { box-shadow: var(--glass-rim), 0 18px 38px -18px rgba(74, 52, 110, .7); }
}

/* блик пробегает по кнопке при наведении */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 46%; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-130%) skewX(-14deg);
}
.btn:hover::after { opacity: 1; animation: crShine .9s var(--ease-soft); }
.btn:active { transform: translateY(0) scale(.986); }

/* перелив в заголовке течёт сам */
.grad { background-size: 240% 100%; animation: gradFlow 14s ease-in-out infinite alternate; }

/* черта под заголовком раздела прорисовывается при появлении */
.section__head::after { width: 0; transition: width 1.1s var(--ease-soft) .25s; }
.section__head.visible::after { width: 64px; }

/* карточки в сетках появляются по очереди */
.reveal.visible { animation-delay: calc(var(--i, 0) * 70ms); }

/* переключение вкладки — мягкое проявление */
[data-tab].is-entering { animation: tabIn .6s var(--ease-soft); }

/* свет за курсором */
.cursor-glow {
  position: fixed; z-index: 1; left: 0; top: 0; width: 42vmax; height: 42vmax; pointer-events: none; opacity: 0;
  transform: translate3d(calc(var(--mx, 50vw) - 21vmax), calc(var(--my, 50vh) - 21vmax), 0);
  background: radial-gradient(closest-side, rgba(196, 206, 255, .22), transparent 70%);
  transition: opacity .8s ease;
}
.cursor-glow.is-on { opacity: 1; }

/* тонкая полоса прогресса чтения */
.readbar {
  position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 2px; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0); opacity: .85;
  background: linear-gradient(90deg, #8fd0ec, #b9a8ef 48%, #f0a9cd);
}

/* карточки мягко приподнимаются, ярлык дышит */
.cat, .merch-card, .svc, .addcard, .review, .artplan, .tl {
  transition: transform .55s var(--ease-soft), box-shadow .55s var(--ease-soft), background-position 1.6s ease;
}
.cat:hover, .svc:hover, .addcard:hover, .review:hover, .artplan:hover { transform: translateY(-6px); }
.mascot__tag { animation: breathe 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .btn::after, .grad, .mascot__tag, [data-tab].is-entering { animation: none !important; }
  .cursor-glow, .readbar { display: none; }
  .section__head::after { width: 64px; transition: none; }
}

/* ---------- 25. Подписи под заголовками читаемее ---------- */
.prep__label small, .prep__item small, .wiz__choice small, .calc__opt small,
.pricelist b small, .ptable td small, .merch-card__price small, .svc__price small,
.plan__note, .cart__txt small, .order__items small, .lform__q legend small,
.ychset__price small, .artplan small, .cat__body p, .soon-card p {
  font-size: 14.5px; font-weight: 400; color: var(--ink-soft); line-height: 1.5;
}
.prep__label b, .wiz__choice b, .calc__opt b { font-size: 16.5px; }
.checks li { line-height: 1.55; }

/* ---------- 26. Перечни и служебные строки — гротеском ----------
   Полужирная антиква в списках читалась тяжело и по-книжному.
   Антиква остаётся в абзацах и цитатах, перечни идут гротеском. */
.checks li, .pricelist span, .pricelist b, .terms__grid p, .terms__grid b,
.order__items b, .order__items small, .cart__txt b, .cart__txt small, .calc__lines,
.calc__lines li, .wiz__list li, .lform__q legend, .faq summary, .accordion summary,
.prep__label b, .prep__label small, .pick__menu li, .cat__from, .status, .slider__count {
  font-family: var(--font-body);
}
.checks li { font-weight: 400; font-size: 15.5px; letter-spacing: .005em; color: var(--ink); line-height: 1.5; }
.checks li::before { color: var(--lav-300); font-size: 14px; top: 2px; }
.pricelist span { font-weight: 400; }
.faq summary, .accordion summary { font-weight: 500; letter-spacing: .01em; }
.terms__grid p { font-weight: 400; }

/* ---------- 27. Подсветка строк без чётких краёв ----------
   Вместо прямоугольной плашки — мягкое свечение, растворяющееся
   к краям: никакой видимой границы, только свет под текстом. */
.checks li, .pricelist li, .pick__menu li, .cart__item { border-radius: 0; box-shadow: none; }
.checks li:hover, .pricelist li:hover {
  background: radial-gradient(150% 180% at 26% 50%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.4) 42%, rgba(255,255,255,0) 78%);
  box-shadow: none;
}
.pick__menu li:hover, .pick__menu li:focus-visible {
  background: radial-gradient(130% 150% at 50% 45%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 80%);
}
.ptable tbody tr:hover td {
  background: radial-gradient(180% 220% at 50% 50%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 82%);
}
.cart__item:hover {
  background: radial-gradient(150% 180% at 30% 50%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 80%);
}
.accordion details:hover { box-shadow: var(--shadow-sm); }

/* ---------- 28. Воздушные края и приёмы с сайта-визитки ---------- */
:root { --radius: 8px; --radius-sm: 6px; }
.cta__box { border-radius: 10px; }
.modal[open], .modal.modal--form[open] { border-radius: 10px; }
.merch-card__media, .slider__frame, .hero__showcase, .gallery .zoomframe,
.logos__grid .zoomframe, .addons__gallery figure, .cat, .ychpic, .lessons__pic,
.showcase__frame, .l2d__card, .custom-embed__frame, .cat__body { border-radius: 8px; }
.btn, .badge, .status, .cat__from, .toast, .quicknav, .quicknav a, .nav a,
.chip span, .calc__opt, .wiz__choice, .ptable__add, .pick__menu, .pick__btn { border-radius: 6px; }

/* подсветка растворяется до краёв: пятно света заканчивается раньше рамки */
.checks li:hover, .pricelist li:hover {
  background: radial-gradient(86% 115% at 30% 50%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.45) 40%, rgba(255,255,255,0) 68%);
}
.cart__item:hover {
  background: radial-gradient(84% 118% at 32% 50%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 66%);
}
.pick__menu li:hover, .pick__menu li:focus-visible {
  background: radial-gradient(78% 88% at 50% 45%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 70%);
}
.ptable tbody tr:hover td {
  background: radial-gradient(120% 150% at 50% 50%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 72%);
}

/* волосяные линии, растворяющиеся на концах — как разделители в визитке */
.pricelist li, .ptable td, .cart__item, .order__line, .terms__grid div, .prep__item {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(36,31,46,.14) 14%, rgba(36,31,46,.14) 86%, transparent) 1;
}

/* точечная сетка вместо чешуи — фактура визитки */
body::after {
  background-image: radial-gradient(circle, rgba(36,31,46,.075) 1px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(125% 92% at 50% 0%, #000 0%, transparent 74%);
  mask-image: radial-gradient(125% 92% at 50% 0%, #000 0%, transparent 74%);
}

/* нумерация разделов моноширинным, как 01 / 02 на визитке */
body { counter-reset: sec; }
.section__head { counter-increment: sec; }
.section__head .eyebrow::before {
  content: counter(sec, decimal-leading-zero) '  /  '; opacity: .55;
}

/* стрелка у внешних ссылок */
a[target="_blank"]:not(.btn):not(.socials__list a):not(.cat)::after {
  content: '↗'; font-family: var(--mono); font-size: .8em; margin-left: .35em; opacity: .55;
}

/* ---------- 29. Спокойный выбор, чистые линии, плоские кнопки ---------- */
/* прайсы: при наведении фон не появляется, реагируют цена и «плюс» */
.pricelist li:hover { background-color: transparent; }
.pricelist li:hover b { color: var(--lav-600); }
.pricelist li:hover .pl__add { background: rgba(163,140,220,.16); border-color: rgba(163,140,220,.45); color: var(--lav-600); }

/* наведение и выбор — лёгкое сиреневое свечение, без белых прямоугольников */
.checks li:hover, .cart__item:hover {
  background: radial-gradient(72% 105% at 28% 50%, rgba(163,140,220,.14), rgba(163,140,220,0) 72%);
}
.pick__menu li:hover, .pick__menu li:focus-visible {
  background: radial-gradient(70% 86% at 50% 45%, rgba(163,140,220,.16), rgba(163,140,220,0) 74%);
}
.pick__menu li[aria-selected="true"] {
  background: radial-gradient(70% 86% at 50% 45%, rgba(163,140,220,.22), rgba(163,140,220,0) 76%); box-shadow: none;
}
.ptable tbody tr:hover td { background: radial-gradient(60% 130% at 50% 50%, rgba(163,140,220,.1), transparent 76%); }

/* линии-разделители: ровная светлая нить, растворяющаяся к краям */
.pricelist li, .cart__item, .order__line, .prep__item, .terms__grid div {
  border-bottom: none; border-image: none;
  background-image: linear-gradient(90deg, transparent, rgba(36,31,46,.085) 8%, rgba(36,31,46,.085) 92%, transparent);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
}
.pricelist li:last-child, .cart__item:last-child, .prep__item:last-child { background-image: none; }
.ptable td { border-image: none; border-bottom: 1px solid rgba(36,31,46,.06); }

/* таблица цен спокойнее: светлая подложка и мягкая шапка */
.ptable { background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.55); }
.ptable thead th { background: linear-gradient(140deg, #6f6296 0%, #82749f 100%); color: #fff; font-weight: 500; }
.ptable td { background-color: transparent; }

/* маленькие кнопки — плоское жидкое стекло */
.pl__add, .merch-card__add, .ptable__add, .order__remove, .prep__unlink, .cart__rm,
.slider__nav, .calc__step button {
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  color: var(--lav-600);
}
.pl__add:hover, .merch-card__add:hover, .ptable__add:hover, .order__remove:hover,
.prep__unlink:hover, .cart__rm:hover, .slider__nav:hover, .calc__step button:hover {
  background: rgba(255,255,255,.68); color: var(--ink); transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
/* стрелки слайдера держатся по центру через translateY(-50%): «transform: none» выше
   роняло их вниз при наведении, а на телефоне наведение залипает после свайпа */
.slider__nav:hover, .slider__nav:active, .slider__nav:focus { transform: translateY(-50%); }
/* «уже в корзине» — сиреневая заливка вместо чёрной */
.pl__add.is-incart, .merch-card__add.is-incart, .ptable__add.is-incart {
  background: rgba(163,140,220,.22); border-color: rgba(163,140,220,.5); color: var(--lav-600);
}
.is-incart[data-qty]:not([data-qty=""])::after { background: linear-gradient(180deg, #6d5f96, #4d3f72); }

/* арты: боковые края растворяются в фоне */
.gallery {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.gallery .zoomframe:first-child img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
.gallery .zoomframe:last-child img { -webkit-mask-image: linear-gradient(270deg, transparent, #000 22%); mask-image: linear-gradient(270deg, transparent, #000 22%); }

/* прайс и дополнения: при наведении остаётся только линия-разделитель */
.pricelist li:hover {
  background-image: linear-gradient(90deg, transparent, rgba(36,31,46,.085) 8%, rgba(36,31,46,.085) 92%, transparent);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
}
.pricelist li:last-child:hover { background-image: none; }

/* ---------- 30. Каждый арт растворяется краями в фоне ---------- */
.gallery { -webkit-mask-image: none; mask-image: none; }
.gallery .zoomframe {
  box-shadow: none; background: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.gallery .zoomframe img { -webkit-mask-image: none; mask-image: none; }
.gallery .zoomframe:hover { box-shadow: none; }

/* ---------- 31. Кнопки: жидкое стекло, светлое и тёмное ---------- */
.btn {
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.55);
}
/* светлые: прозрачное стекло с белой кромкой */
.btn--ghost, .ptable__add, .cta__links .btn--ghost, .calc__actions .btn--ghost {
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.26) 100%);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(255,255,255,.45),
              0 14px 30px -22px rgba(74,52,110,.45);
}
.btn--ghost:hover, .ptable__add:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.4) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 36px -22px rgba(74,52,110,.5);
}
/* тёмные: дымчатое стекло, подсветка по верхней кромке */
.btn--primary, .calc__actions .btn--primary, .toast, .wiz__steps li.is-active,
.quicknav a.is-active, .chip input:checked + span, .cartbtn__n,
.is-incart[data-qty]:not([data-qty=""])::after {
  background: linear-gradient(180deg, rgba(66,54,100,.86) 0%, rgba(38,29,60,.9) 100%);
  color: #fff; border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.08),
              0 18px 34px -22px rgba(40,28,70,.68);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
.btn--primary:hover, .calc__actions .btn--primary:hover {
  background: linear-gradient(180deg, rgba(76,62,114,.9) 0%, rgba(46,36,74,.93) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 24px 44px -24px rgba(40,28,70,.72);
}
/* шапка таблицы — то же дымчатое стекло */
.ptable thead th {
  background: linear-gradient(180deg, rgba(120,106,160,.82) 0%, rgba(96,84,138,.88) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

/* ---------- 32. Блок «Хочешь сделать заказ?» — меньше и тише ---------- */
.cta { padding: 44px 0 66px; }
.cta__box {
  max-width: 720px; margin: 0 auto; padding: 28px 26px 30px; border-radius: 8px;
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.34);
  border: 1px solid rgba(36,31,46,.05);
  box-shadow: 0 18px 44px -34px rgba(74,52,110,.4);
  animation: none;
}
.cta__box h2 { font-size: clamp(22px, 2.6vw, 32px); }
.cta__box p { font-size: 15px; max-width: 44ch; margin: 10px auto 18px; }
.cta__links { gap: 8px; }
.cta__links .btn { padding: 10px 18px; font-size: 13.5px; }
@media (max-width: 560px) { .cta__box { padding: 22px 18px 24px; } }

/* ---------- 33. Немного милее, но без детскости ----------
   Больше розового в свете и переливах, кристальные маркеры,
   мягкий пружинистый отклик и крошечные искры у рубрик. */
:root {
  --holo: linear-gradient(115deg,
    rgba(198,226,255,.5) 0%,
    rgba(222,206,252,.48) 26%,
    rgba(250,204,232,.5) 54%,
    rgba(255,214,236,.46) 78%,
    rgba(198,226,255,.5) 100%);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}
/* в фоне добавляется розовое свечение */
body::before {
  background:
    radial-gradient(42vw 42vw at 14% 10%, rgba(206, 184, 245, .24), transparent 70%),
    radial-gradient(38vw 38vw at 86% 16%, rgba(255, 206, 232, .24), transparent 70%),
    radial-gradient(46vw 46vw at 72% 80%, rgba(255, 214, 236, .22), transparent 72%),
    radial-gradient(40vw 40vw at 22% 88%, rgba(196, 232, 245, .18), transparent 72%);
}
/* карточки — с едва заметным тёплым подтоном вместо чисто белого */
.cat__body, .svc, .addcard, .merch-card, .accordion details, .terms__box, .plan,
.review, .about__card, .ychset, .artplan, .soon-card, .chatpro, .bn__card {
  background: var(--glass-spec), var(--glass-gloss),
    linear-gradient(160deg, rgba(255,252,255,.5), rgba(250,246,255,.42));
  border-radius: 10px;
}
/* кристальные маркеры вместо снежинок */
.checks li::before { content: '✦'; color: #cbb4e4; font-size: 12px; top: 3px; }
.checks li:hover::before { color: #e2a9cd; }
/* пружинка при наведении */
.cat, .merch-card, .svc, .addcard, .review, .artplan, .tl, .btn, .pl__add, .merch-card__add {
  transition: transform .45s var(--ease-bounce), box-shadow .45s var(--ease-soft), background .35s;
}
.cat:hover, .svc:hover, .addcard:hover, .review:hover, .artplan:hover { transform: translateY(-5px) scale(1.006); }
.merch-card:hover { transform: translateY(-6px) scale(1.004); }
.btn:hover { transform: translateY(-2px) scale(1.012); }
.pl__add:hover, .merch-card__add:hover, .ptable__add:hover { transform: scale(1.08) rotate(-4deg); }
.cartbtn:hover .cartbtn__n { transform: scale(1.14); }
.cartbtn__n { transition: transform .35s var(--ease-bounce); }
/* крошечная искра у рубрики раздела */
.section__head .eyebrow::after { content: ' ✦'; color: #e0b6d6; opacity: .9; }
/* статус — розово-сиреневая точка */
.status i { background: linear-gradient(140deg, #9fd6ee, #e8aad4); box-shadow: 0 0 0 4px rgba(232, 170, 212, .16); }
/* аккуратные округлые миниатюры */
.cart__item img, .order__items img, .pick__thumb { border-radius: 10px; }

/* ---------- 34. Кнопки контактов — один материал ----------
   У Telegram оставалась белая заливка из прежнего тёмного блока,
   поэтому три кнопки выглядели по-разному. Теперь одно стекло,
   а первая выделена только сиреневой кромкой и цветом текста. */
.cta__links .btn, .cta__links .btn--primary, .cta__links .btn--ghost {
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.26) 100%);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 14px 30px -22px rgba(74,52,110,.45);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
}
.cta__links .btn--primary {
  color: var(--lav-600);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 0 0 1px rgba(163,140,220,.38),
              0 14px 30px -22px rgba(74,52,110,.45);
}
.cta__links .btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.42) 100%);
  color: var(--ink);
}
.cta__links .btn--primary:hover { color: var(--lav-600); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(163,140,220,.55), 0 18px 36px -22px rgba(74,52,110,.5); }

/* ---------- 35. Больше воздуха: светлые стеклянные кнопки и выбор ----------
   Тёмные плотные заливки убраны. Главная кнопка, активные вкладки и
   выбранные варианты теперь светлое стекло с сиреневой кромкой и
   мягким свечением. Поверхности стали прозрачнее, тени легче. */

/* главная кнопка — светлое стекло с сиреневым свечением */
.btn--primary, .calc__actions .btn--primary, .cta__links .btn--primary {
  background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(240,234,252,.42) 100%);
  color: var(--lav-600);
  border: 1px solid rgba(163,140,220,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(163,140,220,.18),
              0 16px 34px -24px rgba(110, 86, 168, .5);
}
.btn--primary:hover, .calc__actions .btn--primary:hover, .cta__links .btn--primary:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(240,234,252,.56) 100%);
  color: var(--lav-600);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 0 0 1px rgba(163,140,220,.34),
              0 22px 42px -24px rgba(110, 86, 168, .55);
}

/* активные вкладки, шаги и выбранные варианты — тот же светлый материал */
.quicknav a.is-active, .wiz__steps li.is-active, .chip input:checked + span,
.calc__opt.is-on, .wiz__choice.is-on, .prep__item.is-on, .merch-card__add.is-incart,
.pl__add.is-incart, .ptable__add.is-incart, .pick__menu li[aria-selected="true"] {
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(238,232,252,.5) 100%);
  color: var(--lav-600);
  border-color: rgba(163,140,220,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(163,140,220,.22);
}
.calc__opt.is-on small, .wiz__steps li.is-active { color: var(--ink-soft); }
.wiz__steps li.is-active { color: var(--lav-600); }
.wiz__steps li.is-active::before, .wiz__steps li.is-done::before { background: var(--lav-400); color: #fff; }
.slider__dots button.is-active { background: var(--lav-400); }
.calc__switch input:checked + i { background: var(--lav-400); }

/* всплывашка и счётчик корзины — светлое стекло вместо тёмного */
.toast {
  background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(240,234,252,.7) 100%);
  color: var(--lav-600); border: 1px solid rgba(163,140,220,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 18px 40px -26px rgba(110,86,168,.5);
}
.cartbtn__n, .is-incart[data-qty]:not([data-qty=""])::after {
  background: linear-gradient(180deg, rgba(150,128,206,.92), rgba(120,100,180,.95));
  color: #fff; border: none; box-shadow: 0 6px 14px -8px rgba(110,86,168,.6);
}

/* шапка таблицы цен — светлое стекло с чернильным текстом */
.ptable thead th {
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(238,232,252,.46));
  color: var(--lav-600);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(163,140,220,.25);
}

/* ---------- 36. Ещё воздуха на поверхностях ---------- */
:root {
  --glass-fill-flat: rgba(255, 255, 255, .34);
  --glass-blur: blur(30px) saturate(150%);
  --shadow-sm: 0 16px 36px -34px rgba(74, 52, 110, .38);
  --shadow-md: 0 26px 56px -40px rgba(74, 52, 110, .36);
  --shadow-lg: 0 40px 84px -46px rgba(74, 52, 110, .4);
}
.cat__body, .svc, .addcard, .merch-card, .accordion details, .terms__box, .plan,
.review, .about__card, .ychset, .artplan, .soon-card, .chatpro, .bn__card {
  background: var(--glass-spec), var(--glass-gloss),
    linear-gradient(160deg, rgba(255,253,255,.36), rgba(248,244,255,.28));
  border-color: rgba(36,31,46,.04);
}
.cta__box, .calc__sum, .prep__card, .order__card, .tiers .plan--pro {
  background: var(--glass-spec), var(--holo), linear-gradient(160deg, rgba(255,255,255,.5), rgba(244,240,253,.36));
}
.site-header, .cart, .socials, .modal[open], .quicknav, .pick__menu {
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.5);
}
.ptable { background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.4); }
.prep__field, .pick__btn { background: rgba(255,255,255,.5); border-color: rgba(163,140,220,.28); }

/* ---------- 37. Номера этапов и мелкие плашки — светлое стекло ---------- */
.tl__num, .about__avatar, .socials__ico, .bannerpro__app-ico, .svc__icon {
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(238,232,252,.5) 100%);
  color: var(--lav-600);
  border: 1px solid rgba(163,140,220,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 24px -20px rgba(110,86,168,.45);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
.tl__num { font-family: var(--mono); font-weight: 400; font-size: 15px; letter-spacing: .04em; }
.socials__ico svg, .bannerpro__app-ico svg { color: var(--lav-600); }
/* подложка под значком в карточке без фото — тоже светлая */
.cat__img--art { background: linear-gradient(160deg, rgba(240,235,252,.8), rgba(252,244,250,.7)); }
.cat__ico { color: var(--lav-500); filter: none; }

/* ---------- 38. Заголовки условий, интерактивные плашки, кнопка темы ---------- */
.blockhead { text-align: center; margin-bottom: 20px; }
.blockhead .eyebrow { display: block; margin-bottom: 8px; }
.blockhead h3 { font-size: clamp(22px, 2.6vw, 30px); }
.terms__work h3 { margin-bottom: 0; }

/* плашки надбавок кликабельны: выбор подсвечивается сиреневым стеклом */
.terms__tile {
  display: block; width: 100%; text-align: center; cursor: pointer; font: inherit;
  padding: 20px 16px; border-radius: 10px;
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.34);
  border: 1px solid rgba(36,31,46,.05);
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-bounce), box-shadow .4s, background .35s, border-color .35s;
}
.terms__tile:hover { transform: translateY(-3px); }
.terms__tile.is-on {
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(238,232,252,.5));
  border-color: rgba(163,140,220,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(163,140,220,.25);
}
.terms__tile b {
  display: block; font-family: var(--font-body); font-weight: 500; font-size: 26px;
  color: var(--lav-600); letter-spacing: -.02em;
}
.terms__tile span { font-size: 13.5px; color: var(--ink-soft); }
.terms__example { margin-top: 18px; text-align: center; font-size: 14.5px; color: var(--ink-soft); min-height: 2.6em; }

/* кнопка смены темы — в пару к кнопке корзины */
.themebtn {
  position: relative; flex: none; width: 40px; height: 40px; margin-left: 8px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 16px; line-height: 1; color: var(--lav-600);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.55);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-rim), var(--glass-drop-sm);
  transition: transform .3s var(--ease-bounce), box-shadow .3s;
}
.themebtn:hover { transform: translateY(-2px) rotate(-8deg); }

/* ---------- 39. Тёмная тема ---------- */
html[data-theme="dark"] {
  --ink:      #ece7f6;
  --ink-soft: #b2aac6;
  --ink-dim:  #8b83a2;
  --lav-50:   #1b1727;
  --lav-100:  #221d33;
  --lav-200:  #2d2742;
  --lav-300:  #4a3f6b;
  --lav-400:  #b9a6ee;
  --lav-500:  #c9b8f4;
  --lav-600:  #ded3fb;
  --glass-fill-flat: rgba(255,255,255,.06);
  --glass-spec:  radial-gradient(240px 150px at 12% 4%, rgba(255,255,255,.16), rgba(255,255,255,0) 72%);
  --glass-gloss: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.02) 40%, rgba(255,255,255,.05) 100%);
  --glass-edge:  rgba(255,255,255,.14);
  --glass-rim:   inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.05);
  --shadow-sm: 0 18px 40px -32px rgba(0,0,0,.85);
  --shadow-md: 0 28px 60px -38px rgba(0,0,0,.85);
  --shadow-lg: 0 44px 90px -44px rgba(0,0,0,.9);
  --holo: linear-gradient(115deg, rgba(150,196,255,.2) 0%, rgba(186,164,248,.2) 30%, rgba(242,164,214,.18) 58%, rgba(150,196,255,.2) 100%);
  --grad-text: linear-gradient(105deg, #8fd0ff 0%, #b9a6f2 40%, #f0a9d0 72%, #7fe0d8 100%);
}
html[data-theme="dark"] body {
  color: var(--ink);
  background:
    radial-gradient(1100px 620px at 82% -8%, #241d3a 0%, transparent 62%),
    radial-gradient(900px 520px at -8% 16%, #1d2036 0%, transparent 58%),
    radial-gradient(900px 520px at 62% 74%, #2a1d33 0%, transparent 58%),
    linear-gradient(180deg, #15121e 0%, #171327 60%, #141120 100%);
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(42vw 42vw at 14% 10%, rgba(126, 104, 186, .3), transparent 70%),
    radial-gradient(38vw 38vw at 86% 16%, rgba(168, 106, 150, .22), transparent 70%),
    radial-gradient(46vw 46vw at 72% 80%, rgba(90, 120, 180, .22), transparent 72%);
}
html[data-theme="dark"] body::after { background-image: radial-gradient(circle, rgba(176,162,248,.057) 1px, transparent 1.4px); }

/* поверхности */
html[data-theme="dark"] .cat__body, html[data-theme="dark"] .svc, html[data-theme="dark"] .addcard,
html[data-theme="dark"] .merch-card, html[data-theme="dark"] .accordion details, html[data-theme="dark"] .terms__box,
html[data-theme="dark"] .plan, html[data-theme="dark"] .review, html[data-theme="dark"] .about__card,
html[data-theme="dark"] .ychset, html[data-theme="dark"] .artplan, html[data-theme="dark"] .soon-card,
html[data-theme="dark"] .chatpro, html[data-theme="dark"] .bn__card, html[data-theme="dark"] .terms__tile {
  background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.057);
  border-color: rgba(205,196,255,.13);
}
html[data-theme="dark"] .site-header, html[data-theme="dark"] .cart, html[data-theme="dark"] .socials,
html[data-theme="dark"] .modal[open], html[data-theme="dark"] .quicknav, html[data-theme="dark"] .pick__menu {
  background: var(--glass-spec), var(--glass-gloss), rgba(24,20,36,.72);
  border-color: rgba(205,196,255,.15);
}
html[data-theme="dark"] .cta__box, html[data-theme="dark"] .calc__sum, html[data-theme="dark"] .prep__card,
html[data-theme="dark"] .order__card, html[data-theme="dark"] .tiers .plan--pro, html[data-theme="dark"] .ptable {
  background: var(--glass-spec), var(--holo), linear-gradient(160deg, rgba(176,162,248,.092), rgba(176,162,248,.046));
  border-color: rgba(205,196,255,.15);
}

/* кнопки и выбор */
html[data-theme="dark"] .btn--ghost, html[data-theme="dark"] .ptable__add, html[data-theme="dark"] .pl__add,
html[data-theme="dark"] .merch-card__add, html[data-theme="dark"] .calc__step button, html[data-theme="dark"] .slider__nav,
html[data-theme="dark"] .cart__rm, html[data-theme="dark"] .order__remove, html[data-theme="dark"] .prep__unlink,
html[data-theme="dark"] .themebtn, html[data-theme="dark"] .cartbtn {
  background: linear-gradient(180deg, rgba(176,162,248,.138), rgba(176,162,248,.057));
  color: var(--lav-600); border-color: rgba(205,196,255,.21);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
html[data-theme="dark"] .btn--primary, html[data-theme="dark"] .cta__links .btn--primary,
html[data-theme="dark"] .calc__actions .btn--primary, html[data-theme="dark"] .quicknav a.is-active,
html[data-theme="dark"] .wiz__steps li.is-active, html[data-theme="dark"] .chip input:checked + span,
html[data-theme="dark"] .calc__opt.is-on, html[data-theme="dark"] .wiz__choice.is-on,
html[data-theme="dark"] .prep__item.is-on, html[data-theme="dark"] .terms__tile.is-on,
html[data-theme="dark"] .pick__menu li[aria-selected="true"], html[data-theme="dark"] .toast {
  background: linear-gradient(180deg, rgba(185,166,238,.28), rgba(185,166,238,.16));
  color: #fff; border-color: rgba(185,166,238,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(185,166,238,.25);
}
html[data-theme="dark"] .ptable thead th {
  background: linear-gradient(180deg, rgba(176,162,248,.138), rgba(176,162,248,.057));
  color: var(--lav-600);
}
html[data-theme="dark"] .tl__num, html[data-theme="dark"] .about__avatar, html[data-theme="dark"] .socials__ico,
html[data-theme="dark"] .bannerpro__app-ico, html[data-theme="dark"] .svc__icon {
  background: linear-gradient(180deg, rgba(176,162,248,.138), rgba(176,162,248,.057));
  color: var(--lav-600); border-color: rgba(205,196,255,.21);
}

/* линии, подсветка, поля */
html[data-theme="dark"] .pricelist li, html[data-theme="dark"] .cart__item, html[data-theme="dark"] .order__line,
html[data-theme="dark"] .prep__item {
  background-image: linear-gradient(90deg, transparent, rgba(176,162,248,.138) 8%, rgba(176,162,248,.138) 92%, transparent);
}
html[data-theme="dark"] .checks li:hover, html[data-theme="dark"] .cart__item:hover {
  background: radial-gradient(72% 105% at 28% 50%, rgba(185,166,238,.16), transparent 72%);
}
html[data-theme="dark"] .ptable td { border-bottom-color: rgba(205,196,255,.13); }
html[data-theme="dark"] .prep__field, html[data-theme="dark"] .pick__btn {
  background: rgba(176,162,248,.081); color: var(--ink); border-color: rgba(205,196,255,.21);
}
html[data-theme="dark"] .prep__field::placeholder { color: var(--ink-dim); }
html[data-theme="dark"] .readbar { opacity: .7; }
html[data-theme="dark"] .cursor-glow { background: radial-gradient(closest-side, rgba(150,130,220,.22), transparent 70%); }
html[data-theme="dark"] .cat__img img, html[data-theme="dark"] .merch-card__media img,

/* добор: места, где в базовой вёрстке белый цвет прописан числом */
html[data-theme="dark"] .footer { background: rgba(20, 17, 32, .5); }
html[data-theme="dark"] .svc--featured {
  background: linear-gradient(160deg, rgba(176,162,248,.115), rgba(185,166,238,.12));
  border-color: rgba(185,166,238,.3);
}
html[data-theme="dark"] .plan__badge,
html[data-theme="dark"] .plan--pro .btn--primary,
html[data-theme="dark"] .l2d__hide:hover {
  background: linear-gradient(180deg, rgba(176,162,248,.184), rgba(176,162,248,.081));
  color: var(--lav-600);
}
html[data-theme="dark"] .plan--pro .btn--primary:hover { background: rgba(176,162,248,.23); }
html[data-theme="dark"] .wiz__choice i, html[data-theme="dark"] .prep__item i {
  background: rgba(176,162,248,.092); border-color: rgba(185,166,238,.45);
}
html[data-theme="dark"] .wiz__steps li.is-active::before,
html[data-theme="dark"] .wiz__steps li.is-done::before { color: #241d33; }
html[data-theme="dark"] .pick__thumb { background: rgba(176,162,248,.069); }
html[data-theme="dark"] ::selection { background: rgba(185,166,238,.35); color: #fff; }

/* мелкие плашки и подписи: в тёмной теме стекло вместо белой заливки */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .status,
html[data-theme="dark"] .hero__stats div,
html[data-theme="dark"] .mascot__tag,
html[data-theme="dark"] .l2d__tag,
html[data-theme="dark"] .slider__count,
html[data-theme="dark"] .merch-card__tag,
html[data-theme="dark"] .cat__from,
html[data-theme="dark"] .order__items li,
html[data-theme="dark"] .calc__lines .is-group button,
html[data-theme="dark"] .cta__links .btn--ghost,
html[data-theme="dark"] .calc__actions .btn--ghost {
  background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.081);
  border-color: rgba(205,196,255,.19);
  color: var(--ink);
}
html[data-theme="dark"] .status { background: var(--glass-spec), var(--holo), var(--glass-gloss), rgba(176,162,248,.081); }
html[data-theme="dark"] .hero__stats span, html[data-theme="dark"] .badge { color: var(--ink-soft); }
html[data-theme="dark"] .order__items img { background: rgba(176,162,248,.081); }

/* наведение: чуть светлее, но без белых прямоугольников */
html[data-theme="dark"] .btn--ghost:hover,
html[data-theme="dark"] .cta__links .btn:hover,
html[data-theme="dark"] .pl__add:hover, html[data-theme="dark"] .merch-card__add:hover,
html[data-theme="dark"] .ptable__add:hover, html[data-theme="dark"] .order__remove:hover,
html[data-theme="dark"] .prep__unlink:hover, html[data-theme="dark"] .cart__rm:hover,
html[data-theme="dark"] .slider__nav:hover, html[data-theme="dark"] .calc__step button:hover,
html[data-theme="dark"] .themebtn:hover, html[data-theme="dark"] .cartbtn:hover,
html[data-theme="dark"] .pick__menu li:hover, html[data-theme="dark"] .pick__menu li:focus-visible {
  background: linear-gradient(180deg, rgba(176,162,248,.207), rgba(176,162,248,.103));
  border-color: rgba(205,196,255,.27);
}
html[data-theme="dark"] .btn--primary:hover,
html[data-theme="dark"] .calc__actions .btn--primary:hover,
html[data-theme="dark"] .cta__links .btn--primary:hover {
  background: linear-gradient(180deg, rgba(185,166,238,.36), rgba(185,166,238,.2));
}
html[data-theme="dark"] .ptable tbody tr:hover td { background: rgba(176,162,248,.057); }
html[data-theme="dark"] .btn::after { opacity: .35; }

/* волосяные линии на тёмном — светлые, а не чернильные */
html[data-theme="dark"] .calc__lines li,
html[data-theme="dark"] .calc__lines .is-total, html[data-theme="dark"] .order__total,
html[data-theme="dark"] .prep__cardfoot, html[data-theme="dark"] .prep__dl dd.is-total,
html[data-theme="dark"] .cart__total, html[data-theme="dark"] hr {
  border-color: rgba(205,196,255,.17);
}

/* ---------- 40. Выбор темы и читаемость тёмной ---------- */
.themepick { position: relative; display: inline-flex; margin-left: 8px; }
.themepick .themebtn { margin-left: 0; }
.themepick__menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70; min-width: 196px; padding: 6px;
  display: grid; gap: 2px; border-radius: 12px;
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.86);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-rim), var(--shadow-md);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  animation: themepop .25s var(--ease-bounce) both;
}
@keyframes themepop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.themepick__menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px;
  font: inherit; font-family: var(--font-head); font-size: 14px; font-weight: 400; color: var(--ink);
  background: transparent; cursor: pointer; text-align: left; transition: background .25s, color .25s;
}
.themepick__menu button i { width: 18px; font-style: normal; text-align: center; color: var(--lav-600); }
.themepick__menu button:hover { background: radial-gradient(84% 120% at 30% 50%, rgba(163,140,220,.16), transparent 74%); }
.themepick__menu button[aria-checked="true"] {
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(238,232,252,.52));
  box-shadow: inset 0 0 0 1px rgba(163,140,220,.28);
}
.themepick__menu button[aria-checked="true"]::after { content: '✦'; margin-left: auto; font-size: 11px; color: var(--lav-500); }

/* системные элементы (выпадающие списки, скроллбар) тоже знают про тему */
:root { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] select, html[data-theme="dark"] option,
html[data-theme="dark"] .calc__select, html[data-theme="dark"] .prep__select {
  background-color: #221d33; color: var(--ink); border-color: rgba(205,196,255,.21);
}
html[data-theme="dark"] .themepick__menu {
  background: var(--glass-spec), var(--glass-gloss), rgba(26,22,40,.92);
  border-color: rgba(205,196,255,.17);
}
html[data-theme="dark"] .themepick__menu button[aria-checked="true"] {
  background: linear-gradient(180deg, rgba(185,166,238,.26), rgba(185,166,238,.14));
  box-shadow: inset 0 0 0 1px rgba(185,166,238,.35);
}

/* строки, плашки и карточки, которые в светлой теме белые */
html[data-theme="dark"] .wiz__choice,
html[data-theme="dark"] .prep__item,
html[data-theme="dark"] .calc__opt,
html[data-theme="dark"] .calc__list li,
html[data-theme="dark"] .order__line,
html[data-theme="dark"] .order__items li,
html[data-theme="dark"] .cart__item,
html[data-theme="dark"] .socials__list a,
html[data-theme="dark"] .tl,
html[data-theme="dark"] .acc__i,
html[data-theme="dark"] .chatpro__feats div,
html[data-theme="dark"] .bannerpro__app,
html[data-theme="dark"] .addons__gallery figure,
html[data-theme="dark"] .gallery figcaption,
html[data-theme="dark"] .pv figcaption,
html[data-theme="dark"] .soon-card__tag,
html[data-theme="dark"] .calc__step button:disabled,
html[data-theme="dark"] .socials__close,
html[data-theme="dark"] .modal__close,
html[data-theme="dark"] .l2d__hide {
  background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.069);
  border-color: rgba(205,196,255,.15);
  color: var(--ink);
}
html[data-theme="dark"] .wiz__choice:hover,
html[data-theme="dark"] .prep__item:hover,
html[data-theme="dark"] .calc__opt:hover,
html[data-theme="dark"] .socials__list a:hover,
html[data-theme="dark"] .tl:hover,
html[data-theme="dark"] .chatpro__feats div:hover,
html[data-theme="dark"] .socials__close:hover,
html[data-theme="dark"] .modal__close:hover {
  background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.127);
  border-color: rgba(205,196,255,.21);
}
html[data-theme="dark"] .calc__list li,
html[data-theme="dark"] .order__line,
html[data-theme="dark"] .cart__item,
html[data-theme="dark"] .order__items li { background-image: none; }
html[data-theme="dark"] .addons__gallery figcaption { color: var(--ink-soft); }

/* подписи поверх картинок: тёмная вуаль, иначе светлый текст тонет в арте */
html[data-theme="dark"] .cat__body {
  background: linear-gradient(180deg, rgba(18,15,28,.62) 0%, rgba(18,15,28,.88) 100%);
  border-color: rgba(205,196,255,.13);
}
html[data-theme="dark"] .cat__from {
  background: rgba(18,15,28,.6); border-color: rgba(205,196,255,.21); color: var(--lav-600);
}

/* добор: подписи пресетов баннера, шаг количества и крестик корзины */
html[data-theme="dark"] .bn figcaption,
html[data-theme="dark"] .calc__step,
html[data-theme="dark"] .cart__close,
html[data-theme="dark"] .socials-tab {
  background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.069);
  border-color: rgba(205,196,255,.15);
  color: var(--ink);
}
html[data-theme="dark"] .cart__close:hover, html[data-theme="dark"] .socials-tab:hover {
  background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.138);
}

/* невыбранные «чипы» в форме записи */
html[data-theme="dark"] .chip span {
  background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.069);
  border-color: rgba(205,196,255,.17); color: var(--ink);
}
html[data-theme="dark"] .chip span:hover { background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.127); }

/* подмена темы происходит мгновенно, без переливов */
html.theme-swap *, html.theme-swap *::before, html.theme-swap *::after {
  transition: none !important;
  animation-duration: .001s !important;
}

/* счётчик количества: только кружки, без коробки вокруг них */
.calc__step { background: none; border: 0; box-shadow: none; padding: 0; }
html[data-theme="dark"] .calc__step { background: none; border-color: transparent; box-shadow: none; }
html[data-theme="dark"] .calc__step b { color: var(--ink); }

/* «уже в корзине» в тёмной теме: заметная сиреневая заливка и яркий счётчик */
html[data-theme="dark"] .pl__add.is-incart,
html[data-theme="dark"] .merch-card__add.is-incart,
html[data-theme="dark"] .ptable__add.is-incart,
html[data-theme="dark"] .btn.is-incart {
  background: linear-gradient(180deg, #cdbcf7 0%, #a98ce8 100%);
  border-color: #dccffb;
  color: #201a2e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px rgba(214,200,250,.55), 0 6px 18px -8px rgba(169,140,232,.9);
}
html[data-theme="dark"] .pl__add.is-incart:hover,
html[data-theme="dark"] .merch-card__add.is-incart:hover,
html[data-theme="dark"] .ptable__add.is-incart:hover {
  background: linear-gradient(180deg, #dbcdfb 0%, #b79bf0 100%);
}
html[data-theme="dark"] .is-incart[data-qty]:not([data-qty=""])::after {
  background: linear-gradient(120deg, #d9ccff, #ae92ee);
  color: #221d33;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
html[data-theme="dark"] .cartbtn__n {
  background: linear-gradient(120deg, #d9ccff, #ae92ee); color: #221d33;
}

/* ---------- 41. Телефон: ничего не выезжает за экран ---------- */
/* страховка: даже если что-то вылезло, страницу не таскает вбок */
html, body { overflow-x: clip; }

@media (max-width: 720px) {
  /* grid-элементы по умолчанию не уже своего содержимого и раздувают колонку —
     явный minmax(0,1fr) и min-width:0 держат сетку в ширине экрана */
  .addons__grid { grid-template-columns: minmax(0, 1fr); }
  .addons__grid > *, .addons__gallery, .addons__gallery > *,
  .calc__grid > *, .ychset > *, .chatpro__demo > *, .container > * { min-width: 0; max-width: 100%; }

  /* отступы в виджетах: на телефоне 30px съедали половину строки */
  .addcard { padding: 20px 16px 24px; }
  .chatpro, .bannerpro { padding: 20px 16px; }
  .addons__gallery { gap: 12px; }
  .chatpro__feats { gap: 10px; }
  .chatpro__feats div { padding: 12px 12px; }

  /* строки прайса переносятся: название сверху, цена и плюс — снизу */
  .pricelist li { flex-wrap: wrap; row-gap: 6px; padding-block: 12px; }
  .pricelist li > span { min-width: 0; overflow-wrap: break-word; }
  .pricelist li > b { margin-right: auto; text-align: left; }
  .pl__add { flex: none; }

  /* карточка итога в конструкторах — по ширине экрана, без выезда влево */
  .calc__sum, .wiz__sum, .order__card {
    box-sizing: border-box; width: 100%; max-width: 100%; margin-inline: 0;
  }
  .merch-card__price { flex-wrap: wrap; row-gap: 8px; }
  .accordion summary { min-width: 0; gap: 10px; }
  .accordion summary span { min-width: 0; overflow-wrap: anywhere; }
}

/* таблица цен на телефоне: не полоса с прокруткой, а ровные карточки по центру */
@media (max-width: 640px) {
  .table-wrap { overflow: visible; }
  .ptable { display: block; min-width: 0; width: 100%; border-collapse: separate; }
  .ptable thead { display: none; }
  .ptable tbody, .ptable tr, .ptable td { display: block; width: 100%; }
  .table-wrap .ptable tbody tr {
    margin-bottom: 14px; padding: 16px 14px; border-radius: 12px; text-align: center;
    background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.34);
    border: 1px solid rgba(36,31,46,.06);
    box-shadow: var(--shadow-sm);
  }
  .table-wrap .ptable tbody tr:last-child { margin-bottom: 0; }
  .ptable td { padding: 10px 0; border: 0; text-align: center; }
  .table-wrap .ptable tbody td + td { border-top: 1px solid rgba(36,31,46,.08); }
  .ptable td b { font-size: 18px; }
  .ptable td small { display: block; }
  .ptable tbody td:nth-child(2)::before, .ptable tbody td:nth-child(3)::before {
    display: block; margin-bottom: 4px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .ptable tbody td:nth-child(2)::before { content: 'Base'; }
  .ptable tbody td:nth-child(3)::before { content: 'Advanced'; }
  .ptable__sum { display: block; }
  .ptable__add { display: inline-flex; margin-top: 8px; }
  html[data-theme="dark"] .table-wrap .ptable tbody tr {
    background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.069);
    border-color: rgba(205,196,255,.15);
  }
  html[data-theme="dark"] .table-wrap .ptable tbody td + td { border-top-color: rgba(205,196,255,.15); }
}

/* выпадающее меню-бургер в тёмной теме — только на телефоне:
   на десктопе .nav лежит прямо в шапке, и фон превращался бы в полосу */
@media (max-width: 720px) {
  html[data-theme="dark"] .nav.open {
    background: var(--glass-spec), var(--glass-gloss), rgba(24,20,36,.94);
    border-color: rgba(205,196,255,.17);
  }
  html[data-theme="dark"] .nav.open a { color: var(--ink); }
  html[data-theme="dark"] .nav.open a.is-active { color: var(--lav-600); }
}

/* шаги конструктора: непройденные были светлыми плашками со светлым текстом */
html[data-theme="dark"] .wiz__steps li {
  background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.069);
  border-color: rgba(205,196,255,.15);
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  /* строка конструктора мерча: товар на своей строке, дизайн и счётчик — под ним */
  .order__line { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; align-items: center; }
  .order__line > .calc__select { grid-column: 1 / -1; width: 100%; }
  .order__line > .pick { grid-column: 1 / -1; min-width: 0; }
  .order__line .pick__btn { width: 100%; }
  .order__line > .calc__step { grid-column: 1; justify-self: start; }
  .order__line > .order__remove { grid-column: 2; justify-self: end; }

  /* вопросы: плюс поменьше, строке хватает места */
  .accordion summary { gap: 8px; padding-right: 0; }
  .acc__i { width: 26px; height: 26px; }
}

/* калькулятор коротко подсвечивается, когда на него привели с карточки YCH */
.calc.is-called { animation: calcCalled 1.6s ease; }
@keyframes calcCalled {
  0%   { box-shadow: var(--shadow-md), 0 0 0 0 rgba(163,140,220,.55); }
  35%  { box-shadow: var(--shadow-md), 0 0 0 6px rgba(163,140,220,.22); }
  100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(163,140,220,0); }
}
@media (prefers-reduced-motion: reduce) { .calc.is-called { animation: none; } }

/* кнопка «наверх»: в тёмной теме стрелка была белой на светлом стекле */
html[data-theme="dark"] .totop {
  background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.092);
  border-color: rgba(205,196,255,.21);
  color: var(--lav-600);
}
html[data-theme="dark"] .totop:hover { background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.161); }

/* ---------- 42. Сохранено на потом, референсы, ссылка на проект, «хочу это» ---------- */

/* кнопка-сердечко в шапке — пара к корзине */
.wishbtn {
  position: relative; flex: none; width: 40px; height: 40px; margin-left: 8px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 17px; line-height: 1; color: var(--lav-600);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.55);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-rim), var(--glass-drop-sm);
  transition: transform .3s var(--ease-bounce), box-shadow .3s, color .3s;
}
.wishbtn:hover { transform: translateY(-2px) scale(1.04); }
.wishbtn.has-items { color: #d67aa8; }
.wishbtn__n {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-family: var(--font-head); font-size: 11px; color: #fff;
  background: linear-gradient(120deg, #e79ec2, #c98ae0); box-shadow: 0 4px 10px rgba(200,120,180,.35);
}

/* сердечко рядом с кнопкой добавления */
.wishheart {
  flex: none; width: 34px; height: 34px; margin-left: 8px; border-radius: 50%; cursor: pointer;
  display: inline-grid; place-items: center; font-size: 15px; line-height: 1; vertical-align: middle;
  color: var(--ink-soft); background: transparent; border: 1px solid transparent;
  transition: transform .3s var(--ease-bounce), color .25s, background .25s, border-color .25s;
}
.wishheart:hover { color: #d67aa8; background: radial-gradient(70% 70% at 50% 50%, rgba(226,150,190,.16), transparent 72%); transform: scale(1.12); }
.wishheart.is-on { color: #d67aa8; border-color: rgba(226,150,190,.4); background: radial-gradient(70% 70% at 50% 50%, rgba(226,150,190,.2), transparent 74%); }

/* панель «твой будущий проект» — та же механика, что у корзины */
.wish .cart__total b { color: var(--lav-600); }

/* «хочу это» у виджетов в разработке */
.wantbtn {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 16px; border-radius: 999px; font: inherit; font-family: var(--font-head); font-size: 13.5px;
  color: var(--ink-soft);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.4);
  border: 1px solid var(--glass-edge);
  transition: transform .3s var(--ease-bounce), color .25s, border-color .25s, background .25s;
}
.wantbtn i { font-style: normal; font-size: 15px; color: #d67aa8; }
.wantbtn:hover { transform: translateY(-2px); }
.wantbtn.is-on { color: var(--lav-600); border-color: rgba(226,150,190,.45); background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(250,232,243,.5)); }
.wantbtn__n { font-family: var(--mono); font-size: 12px; opacity: .75; }
.wantbtn__n:empty { display: none; }

/* референсы в форме заказа */
.cart__files { display: grid; gap: 8px; }
.cart__fileshead { font-size: 13.5px; color: var(--ink-soft); }
.cart__fileshead small { display: block; font-size: 12px; color: var(--ink-dim); }
.cart__filebtn {
  display: block; padding: 12px 14px; border-radius: 10px; cursor: pointer; text-align: center;
  font-size: 14px; color: var(--lav-600);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.4);
  border: 1px dashed rgba(163,140,220,.45);
  transition: background .25s, border-color .25s, transform .25s var(--ease-soft);
}
.cart__filebtn:hover { transform: translateY(-2px); border-color: rgba(163,140,220,.7); }
.cart__filelist { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.cart__filelist li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13px;
  background: rgba(255,255,255,.4);
}
.cart__filelist span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart__filelist small { color: var(--ink-dim); font-size: 12px; }

/* сохранить проект по ссылке */
.cart__save { display: grid; gap: 8px; padding: 16px 0 4px; border-top: 1px solid rgba(36,31,46,.07); }
.cart__link { display: flex; gap: 8px; align-items: center; }
.cart__link .prep__field { flex: 1; min-width: 0; font-size: 13px; }

/* тёмная тема */
html[data-theme="dark"] .wishbtn,
html[data-theme="dark"] .wantbtn,
html[data-theme="dark"] .cart__filebtn,
html[data-theme="dark"] .cart__filelist li {
  background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.081);
  border-color: rgba(205,196,255,.19);
  color: var(--ink);
}
html[data-theme="dark"] .cart__filebtn { border-style: dashed; border-color: rgba(185,166,238,.45); color: var(--lav-600); }
html[data-theme="dark"] .wishbtn { color: var(--lav-600); }
html[data-theme="dark"] .wishbtn.has-items, html[data-theme="dark"] .wishheart.is-on, html[data-theme="dark"] .wantbtn i { color: #f0a9d0; }
html[data-theme="dark"] .wantbtn.is-on {
  background: linear-gradient(180deg, rgba(240,169,208,.24), rgba(240,169,208,.12));
  border-color: rgba(240,169,208,.45); color: #fff;
}
html[data-theme="dark"] .cart__save { border-top-color: rgba(205,196,255,.17); }
html[data-theme="dark"] .cart__fileshead small { color: var(--ink-dim); }

@media (max-width: 560px) {
  .cart__link { flex-wrap: wrap; }
  .cart__link .btn { width: 100%; }
}

/* шапка: кнопка «Заказать» и круглые кнопки не сжимаются, меню уступает первым */
.nav__cta, .cartbtn, .themebtn, .wishbtn, .themepick, .burger { flex: none; }
.nav__cta { white-space: nowrap; }
.nav { min-width: 0; }
@media (max-width: 1240px) { .nav { gap: 18px; } }
@media (max-width: 1100px) {
  .nav { gap: 13px; }
  .nav a { font-size: 14px; }
  .header__inner { gap: 14px; }
}
@media (max-width: 900px) { .nav__cta { display: none; } }

/* что дальше после заказа: пять шагов с нумерацией */
.onboard__cap {
  margin: 18px 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-dim);
}
.onboard { list-style: none; counter-reset: step; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.onboard li {
  counter-increment: step; position: relative; padding: 10px 12px 10px 44px; border-radius: 10px;
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.34);
  border: 1px solid rgba(36,31,46,.05);
}
.onboard li::before {
  content: counter(step); position: absolute; left: 12px; top: 11px;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--lav-600);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(238,232,252,.7));
  box-shadow: inset 0 0 0 1px rgba(163,140,220,.3);
}
.onboard b { display: block; font-family: var(--font-head); font-weight: 500; font-size: 14.5px; color: var(--ink); }
.onboard span { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
html[data-theme="dark"] .onboard li {
  background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.069);
  border-color: rgba(205,196,255,.15);
}
html[data-theme="dark"] .onboard li::before {
  background: linear-gradient(180deg, rgba(185,166,238,.34), rgba(185,166,238,.16));
  box-shadow: inset 0 0 0 1px rgba(185,166,238,.4); color: #fff;
}

/* ---------- 43. Правки с телефона ---------- */
/* меню-бургер было почти прозрачным: сквозь него читался текст страницы */
@media (max-width: 720px) {
  .nav {
    background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: var(--glass-rim), 0 26px 60px -30px rgba(40,30,70,.6);
  }
  html[data-theme="dark"] .nav, html[data-theme="dark"] .nav.open {
    background: var(--glass-spec), var(--glass-gloss), rgba(22,18,34,.97);
    border-color: rgba(205,196,255,.19);
    box-shadow: var(--glass-rim), 0 26px 60px -28px rgba(0,0,0,.9);
  }
  html[data-theme="dark"] .nav a, html[data-theme="dark"] .nav.open a { color: var(--ink); }
}

/* счётчик на широких кнопках («Добавить в корзину») уезжал за угол и обрезался —
   на них показываем количество прямо в подписи */
.btn.is-incart[data-qty]:not([data-qty=""])::after,
.calc__cart.is-incart[data-qty]:not([data-qty=""])::after {
  position: static; top: auto; right: auto; display: inline-grid; margin-left: 8px;
  vertical-align: middle; box-shadow: none;
}

/* наведение в тёмной теме: светлые заливки из базовых стилей давали
   светлый текст на светлом фоне */
html[data-theme="dark"] .quicknav a:hover,
html[data-theme="dark"] .about__socials a:hover,
html[data-theme="dark"] .artplan:hover,
html[data-theme="dark"] .calc__lines .is-group button:hover,
html[data-theme="dark"] .prep__unlink:hover,
html[data-theme="dark"] .order__remove:hover,
html[data-theme="dark"] .cart__rm:hover,
html[data-theme="dark"] .modal__close:hover,
html[data-theme="dark"] .socials__close:hover {
  background: linear-gradient(180deg, rgba(176,162,248,.184), rgba(176,162,248,.092));
  color: var(--ink);
  border-color: rgba(205,196,255,.25);
}
html[data-theme="dark"] .quicknav a.is-active:hover {
  background: linear-gradient(180deg, rgba(185,166,238,.36), rgba(185,166,238,.2));
  color: #fff;
}
html[data-theme="dark"] .pricelist li:hover {
  background: radial-gradient(72% 105% at 28% 50%, rgba(185,166,238,.14), transparent 72%);
}

/* переключатель языка в шапке */
.langbtn {
  flex: none; margin-left: 8px; padding: 0 12px; height: 40px; border-radius: 999px;
  display: inline-grid; place-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  color: var(--lav-600); text-decoration: none;
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.5);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop-sm);
  transition: transform .3s var(--ease-bounce), background .25s;
}
.langbtn:hover { transform: translateY(-2px); }
html[data-theme="dark"] .langbtn {
  background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.092);
  border-color: rgba(205,196,255,.21); color: var(--lav-600);
}
@media (max-width: 420px) { .langbtn { padding: 0 9px; font-size: 11px; } }

/* шапка шире остального контента: в узкой колонке меню налезало на «Заказать» */
.site-header .container { max-width: 1480px; }
@media (max-width: 1520px) { .site-header .container { max-width: none; padding-inline: 28px; } }
@media (max-width: 1240px) { .site-header .container { padding-inline: 20px; } }

/* блик, пробегающий по карточке при наведении, шёл поверх подписи и «съедал»
   текст — пускаем его под текстовую панель и делаем мягче в тёмной теме */
.cat__body { z-index: 4; }   /* позиционирование остаётся из базовых стилей: панель прижата к низу карточки */
html[data-theme="dark"] .cat::after {
  background: linear-gradient(115deg, transparent 30%, rgba(176,162,248,.184) 48%, transparent 66%);
}

/* тёмная вуаль под подписью карточки должна держаться и при наведении:
   у .cat:hover .cat__body вес выше, поэтому здесь берём такой же уровень */
html[data-theme="dark"] .cat .cat__body,
html[data-theme="dark"] .cat:hover .cat__body {
  background: linear-gradient(180deg, rgba(18,15,28,.62) 0%, rgba(18,15,28,.88) 100%);
  background-size: auto;
  border-color: rgba(205,196,255,.13);
}
html[data-theme="dark"] .cat .cat__body p { color: var(--ink-soft); }
html[data-theme="dark"] .cat .cat__body h3 { color: var(--ink); }

/* капсула разделов не должна висеть поверх подвала */
.quicknav.is-away { opacity: 0; visibility: hidden; transform: translate(-50%, 16px); transition-delay: 0s, 0s, .3s; }
.totop.is-away { opacity: 0; visibility: hidden; }
.footer { padding-bottom: 96px; }

/* панель управления моделью: фиксирована на экране и переносится мышью,
   поэтому не уезжает при смене размера модели */
.l2d__panel { position: fixed; cursor: grab; touch-action: none; user-select: none; }
.l2d__panel.is-dragging { cursor: grabbing; }
.l2d__panel:hover { opacity: 1; }
.l2d__panel input, .l2d__panel button { cursor: pointer; }

/* сердечко рядом с маленьким «+» в прайсе */
.wishheart--sm { width: 28px; height: 28px; margin-left: 6px; font-size: 13px; align-self: center; }
.pricelist.has-hearts li:not(:has(.pl__add)) > b { margin-right: 78px; }

/* ---------- 44. Доставка мерча ---------- */
.ship {
  margin: 22px 0 0; padding: 18px 18px 16px; border-radius: 12px; min-width: 0;
  border: 1px solid rgba(36,31,46,.07);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.34);
}
.ship legend {
  padding: 0 6px; margin-left: -6px; font-family: var(--font-head); font-weight: 500; font-size: 15px; color: var(--ink);
}
.ship__carriers { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.ship__field { display: grid; gap: 6px; margin-bottom: 12px; }
.ship__field > span { font-size: 13px; color: var(--ink-soft); }
.ship__field .prep__field, .ship__field .calc__select { width: 100%; }
.ship__result { margin: 4px 0 8px; font-size: 15px; color: var(--ink); min-height: 1.5em; }
.ship__result b { font-family: var(--font-body); font-weight: 500; font-size: 18px; color: var(--lav-600); }
.ship__result span { color: var(--ink-soft); }
.ship__note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); }

/* строка доставки в карточке заказа */
.order__ship {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 2px; margin-top: 4px; font-size: 13.5px; color: var(--ink-soft);
  border-top: 1px dashed rgba(36,31,46,.12);
}
.order__ship em { font-style: normal; font-family: var(--font-body); font-weight: 500; color: var(--ink); white-space: nowrap; }

html[data-theme="dark"] .ship {
  background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.057);
  border-color: rgba(205,196,255,.15);
}
html[data-theme="dark"] .order__ship { border-top-color: rgba(205,196,255,.19); }

/* ---------- 45. Телефон: шапка, меню и нижняя лента ---------- */
/* нижняя панель: стеклянная рамка не прокручивается, прокручивается лента внутри —
   так Safari на iPhone уверенно листает её пальцем */
.quicknav { overflow: hidden; padding: 5px; }
.quicknav__track {
  position: relative; display: flex; gap: 2px; max-width: 100%; min-width: 0; flex: 1 1 auto;
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; touch-action: pan-x;
}
.quicknav__track::-webkit-scrollbar { display: none; }
.quicknav__track a { scroll-snap-align: center; }
@media (max-width: 720px) {
  /* мягкое затухание по краям — видно, что лента продолжается */
  .quicknav__track {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
  }
}

/* язык и тема в мобильном меню; на компьютере их нет — там они в шапке */
.nav__tools { display: none; }
@media (max-width: 720px) {
  .header__inner { gap: 10px; }
  .logo { flex: none; white-space: nowrap; margin-right: auto; }
  .site-header .themepick, .site-header .langbtn { display: none; }
  /* в шапке: лайки, корзина и меню — именно в таком порядке */
  .site-header .wishbtn { order: 5; margin-left: 0; }
  .site-header .cartbtn { order: 6; margin-left: 0; }
  .site-header .burger  { order: 7; margin-left: 4px; }

  .nav__tools {
    display: grid; gap: 10px; margin-top: 10px; padding-top: 14px;
    border-top: 1px solid rgba(36,31,46,.08);
  }
  .nav__lang {
    justify-self: start; padding: 8px 14px; border-radius: 999px;
    font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--lav-600);
    background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.5); border: 1px solid var(--glass-edge);
  }
  .nav__themes { display: flex; flex-wrap: wrap; gap: 6px; }
  .nav__themes button {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; cursor: pointer;
    font: inherit; font-family: var(--font-head); font-size: 13.5px; color: var(--ink);
    background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.4); border: 1px solid var(--glass-edge);
  }
  .nav__themes button i { font-style: normal; color: var(--lav-600); }
  .nav__themes button.is-on {
    background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(238,232,252,.52));
    border-color: rgba(163,140,220,.45); box-shadow: inset 0 0 0 1px rgba(163,140,220,.25);
  }
  html[data-theme="dark"] .nav__tools { border-top-color: rgba(205,196,255,.17); }
  html[data-theme="dark"] .nav__lang,
  html[data-theme="dark"] .nav__themes button {
    background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.081);
    border-color: rgba(205,196,255,.19); color: var(--ink);
  }
  html[data-theme="dark"] .nav__themes button.is-on {
    background: linear-gradient(180deg, rgba(185,166,238,.3), rgba(185,166,238,.16));
    border-color: rgba(185,166,238,.5); color: #fff;
  }
}
.ship__parcel { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-dim); }

/* ---------- 46. Тёмная тема: карточка проекта, запасной вариант корзины, плашки ---------- */
/* эти панели в светлой теме полупрозрачно-белые; в тёмной белая подложка
   съедала светлый текст — делаем их тёмным стеклом, как остальные */
html[data-theme="dark"] .prep__project,
html[data-theme="dark"] .cart__fallback {
  background: var(--glass-spec), rgba(176,162,248,.057);
  border-color: rgba(185,166,238,.3);
}
html[data-theme="dark"] .prep__project .prep__hint,
html[data-theme="dark"] .cart__fallback p { color: var(--ink-soft); }
html[data-theme="dark"] .prep__unlink {
  background: rgba(176,162,248,.092); border-color: rgba(205,196,255,.21); color: var(--lav-600);
}
html[data-theme="dark"] .prep__unlink:hover { background: var(--lav-400); color: #1b1727; }
/* «Выгодно»: светлая сиреневая плашка — значит, тёмные буквы */
html[data-theme="dark"] .svc__flag { color: #201a2e; }

/* счётчик «Сохранено на потом»: белая цифра на пастельно-розовом не читалась —
   в светлой теме плашка глубже, в тёмной светлая с тёмной цифрой, как у корзины */
.wishbtn__n { background: linear-gradient(120deg, #c9568a, #9b55c4); }
html[data-theme="dark"] .wishbtn__n { background: linear-gradient(120deg, #f4bfd9, #d7b0f0); color: #2a1830; }
/* розовое сердечко на светлом фоне — чуть темнее, чтобы не терялось */
html:not([data-theme="dark"]) .wishbtn.has-items,
html:not([data-theme="dark"]) .wishheart:hover,
html:not([data-theme="dark"]) .wishheart.is-on,
html:not([data-theme="dark"]) .wantbtn i { color: #c25a92; }

/* ---------- 47. Мастер «Что мне вообще нужно?» (js/quiz.js, js/quiz-config.js) ----------
   Шапка шагов → вопрос из стеклянных карточек → маршрут из капсул,
   которые складываются по одной. Пауза между капсулами — --d
   (routeStepDelay в конфиге), порядковый номер капсулы — --i. */
.qz__card {
  position: relative; max-width: 780px; margin: 0 auto; padding: 28px 30px 26px; border-radius: var(--radius);
  background: var(--glass-spec), var(--holo), var(--glass-gloss), var(--glass-fill-flat);
  background-size: auto, 260% 260%, auto, auto;
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop);
}

/* шапка: 1 · Модель  2 · Исходники  3 · Цель  4 · Маршрут */
.qz__progress { list-style: none; display: flex; gap: 8px; margin: 0 0 24px; padding: 0; }
.qz__progress li { flex: 1; min-width: 0; }
.qz__stepbtn {
  display: flex; align-items: baseline; gap: 2px; width: 100%; padding: 9px 0 0; border: 0; background: none;
  border-top: 3px solid rgba(163,140,220,.2); cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim);
  opacity: .55; transition: color .3s, border-color .3s, opacity .3s, box-shadow .3s;
}
.qz__stepbtn:disabled { cursor: default; }
.qz__stepbtn:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 3px; border-radius: 2px; }
.qz__lbl { overflow: hidden; text-overflow: ellipsis; }
.qz__check { margin-left: 5px; font-size: 10px; color: var(--lav-500); opacity: 0; transition: opacity .3s; }
/* пройденный: мягкое свечение линии и галочка; текущий — насыщенная линия; будущие — приглушены */
.qz__progress li.is-done .qz__stepbtn { opacity: 1; color: var(--ink-soft); border-top-color: var(--lav-300); box-shadow: 0 -4px 10px -6px rgba(163,140,220,.8); }
.qz__progress li.is-done .qz__check { opacity: 1; }
.qz__progress li.is-active .qz__stepbtn { opacity: 1; color: var(--lav-600); border-top-color: var(--lav-600); }

/* смена шага: уходит вверх и тает, новый приходит снизу */
.qz__pane { animation: qzIn .34s cubic-bezier(.2,.7,.3,1) both; }
.qz__pane.is-leaving { animation: qzOut .17s ease both; }
@keyframes qzIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes qzOut { to { opacity: 0; transform: translateY(-4px); } }
.opath__panel:not([hidden]) { animation: qzIn .35s ease both; }

.qz__q { margin: 0; padding: 0; border: 0; min-width: 0; }
.qz__title { display: block; padding: 0; margin: 0 0 16px; font-family: var(--font-head); font-size: clamp(20px, 2.4vw, 25px); line-height: 1.25; color: var(--ink); outline: none; }
.qz__hint { margin: -8px 0 14px; color: var(--ink-soft); font-size: 14px; }

/* ответы — те же стеклянные карточки, что в конструкторе, но спокойнее при наведении */
.qz .wiz__choice { min-height: 56px; transition: transform .25s var(--ease-soft), box-shadow .25s, background .25s, border-color .25s; }
.qz .wiz__choice:hover { transform: translateY(-2px); border-color: rgba(163,140,220,.55); }
.qz .wiz__choice i { transition: border-color .25s, box-shadow .3s cubic-bezier(.3,1.4,.5,1); }
.qz .wiz__choice.is-on { border-color: rgba(163,140,220,.6); box-shadow: var(--glass-rim), 0 0 0 3px rgba(185,166,238,.18), 0 10px 26px -14px rgba(126,92,190,.55); }
.qz .wiz__choice.is-on::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  background-size: 250% 100%; animation: qzShimmer 1.1s ease 1 both;
}
@keyframes qzShimmer { from { background-position: 120% 0; opacity: 1; } to { background-position: -30% 0; opacity: 0; } }
.qz .wiz__choice:focus-within { outline: 2px solid var(--lav-400); outline-offset: 2px; }
.qz__nav { display: flex; margin-top: 16px; }

/* ---- итог ---- */
.qz__cap { margin: 0 0 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--lav-600); }
.qz__rtitle { margin-bottom: 8px; }
.qz__why { margin: 0 0 16px; color: var(--ink-soft); font-size: 15px; line-height: 1.55; max-width: 62ch; }
.qz__sum { display: grid; gap: 4px; margin: 0 0 22px; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(255,255,255,.34); border: 1px solid rgba(255,255,255,.6); font-size: 14px; }
.qz__sum div { display: flex; gap: 8px; flex-wrap: wrap; }
.qz__sum dt { color: var(--ink-dim); min-width: 72px; }
.qz__sum dd { margin: 0; color: var(--ink); font-weight: 600; }

/* маршрут: стеклянные капсулы, между ними — тонкая светящаяся линия */
.qz-route { --gap: 26px; list-style: none; display: flex; align-items: stretch; gap: var(--gap); margin: 0 0 20px; padding: 6px 2px 4px; }
.qz-cap {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 10px; border-radius: 14px; text-align: center;
  font-family: var(--font-head); font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ink);
  --cap-edge: linear-gradient(125deg, rgba(185,166,238,.8), rgba(143,208,255,.65) 50%, rgba(240,169,208,.65));
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.3));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 20px -14px rgba(90,60,160,.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: qzCapIn .5s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--i, 0) * var(--d, 140ms));
}
.qz-cap span { overflow-wrap: anywhere; }
/* линия от предыдущей капсулы: «дорисовывается» перед появлением этой */
.qz-cap + .qz-cap::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: var(--gap); height: 1.5px; margin-top: -1px;
  background: linear-gradient(90deg, rgba(185,166,238,.55), rgba(143,208,255,.55));
  box-shadow: 0 0 6px rgba(185,166,238,.45); transform-origin: left center;
  animation: qzLinkIn .32s ease both; animation-delay: calc(var(--i, 0) * var(--d, 140ms) - var(--d, 140ms) * .55);
}
/* тонкая голографическая кромка — маской, чтобы заливка оставалась стеклом */
.qz-cap::after {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: var(--cap-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@keyframes qzCapIn { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes qzLinkIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* «Готово» — чуть ярче, с искрой и очень слабым переливом */
.qz-cap--done {
  --cap-edge: linear-gradient(125deg, rgba(163,140,220,1), rgba(143,208,255,.9) 50%, rgba(240,169,208,.9));
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(244,238,255,.5));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 3px rgba(185,166,238,.14), 0 10px 24px -12px rgba(126,92,190,.55);
  animation: qzCapIn .5s cubic-bezier(.2,.7,.3,1) both, qzHolo 7s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * var(--d, 140ms)), calc(var(--i, 0) * var(--d, 140ms) + .6s);
}
.qz-cap__spark { width: 16px; height: 16px; flex: none; }
@keyframes qzHolo { 0%, 100% { filter: none; } 50% { filter: hue-rotate(18deg) brightness(1.04); } }

.qz__notes { list-style: none; margin: -6px 0 16px; padding: 0; display: grid; gap: 6px; }
.qz__notes li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.qz__notes li::before { content: "✦"; position: absolute; left: 4px; color: var(--lav-500); }

.qz__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 16px; }
.qz__price span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.qz__price b { font-family: var(--font-head); font-size: 22px; color: var(--ink); }
.qz__price small { color: var(--ink-soft); font-size: 13px; }

/* «можно добавить по желанию» — отдельно от маршрута, ничего не выбрано заранее */
.qz__opt { margin: 0 0 18px; padding-top: 14px; border-top: 1px dashed rgba(163,140,220,.4); }
.qz__optcap { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }
.qz__optcap b { color: var(--ink); font-weight: 600; }
.qz__optcap small { color: var(--ink-dim); font-size: 12.5px; }
.qz__optlist { display: flex; flex-wrap: wrap; gap: 8px; }
.qz__chip { position: relative; cursor: pointer; }
.qz__chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.qz__chip span {
  display: inline-flex; align-items: baseline; gap: 4px; min-height: 36px; padding: 8px 13px; border-radius: 999px;
  font-size: 13.5px; color: var(--ink-soft); background: rgba(255,255,255,.4); border: 1px solid rgba(163,140,220,.3);
  transition: background .2s, border-color .2s, color .2s;
}
.qz__chip i { font-style: normal; color: var(--lav-500); }
.qz__chip b { font-weight: 600; color: var(--ink); }
.qz__chip em { font-style: normal; font-size: 12.5px; color: var(--ink-dim); }
.qz__chip:hover span { border-color: rgba(163,140,220,.6); }
.qz__chip input:checked + span { background: rgba(255,255,255,.78); border-color: var(--lav-400); color: var(--lav-600); }
.qz__chip input:checked + span i { transform: rotate(45deg); display: inline-block; }
.qz__chip input:focus-visible + span { outline: 2px solid var(--lav-400); outline-offset: 2px; }

.qz__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.qz__more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; }
.qz__link {
  padding: 6px 0; min-height: 36px; border: 0; background: none; cursor: pointer;
  font: 600 14px/1.3 var(--font-body); color: var(--lav-600); text-decoration: underline; text-decoration-color: rgba(163,140,220,.45); text-underline-offset: 3px;
}
.qz__link:hover { text-decoration-color: currentColor; }
.qz__link:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; border-radius: 4px; }
.qz__link--small { font-size: 12.5px; font-weight: 500; color: var(--ink-dim); }

/* «что входит» — небольшая стеклянная панель под итогом */
.qz__inc {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: qzIn .3s ease both;
}
.qz__inccap { margin: 0 0 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.qz__incname { margin: 8px 0 4px; }
.qz__incname b { font-family: var(--font-head); font-size: 15px; }
.qz__incname em { font-style: normal; font-size: 13px; color: var(--lav-600); }
.qz__inc ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13.5px; color: var(--ink-soft); }
.qz__inc p { font-size: 14px; color: var(--ink-soft); }
.qz__foot { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-dim); }

html[data-theme="dark"] .qz__sum, html[data-theme="dark"] .qz__inc { background: rgba(176,162,248,.057); border-color: rgba(205,196,255,.17); }
html[data-theme="dark"] .qz-cap {
  color: var(--ink);
  --cap-edge: linear-gradient(125deg, rgba(185,166,238,.65), rgba(143,208,255,.5) 50%, rgba(240,169,208,.5));
  background: linear-gradient(180deg, rgba(176,162,248,.103), rgba(176,162,248,.034));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px -14px rgba(0,0,0,.7);
}
html[data-theme="dark"] .qz-cap--done {
  --cap-edge: linear-gradient(125deg, rgba(210,196,250,.95), rgba(143,208,255,.8) 50%, rgba(240,169,208,.8));
  background: linear-gradient(180deg, rgba(185,166,238,.2), rgba(143,208,255,.07));
}
html[data-theme="dark"] .qz__chip span { background: rgba(176,162,248,.057); border-color: rgba(205,196,255,.21); }
html[data-theme="dark"] .qz__chip input:checked + span { background: rgba(185,166,238,.2); border-color: rgba(185,166,238,.55); color: #fff; }

/* телефон: карточки одной колонкой, шапка компактнее, маршрут — вертикальный */
@media (max-width: 720px) {
  .qz__card { padding: 20px 16px; }
  .qz__progress { gap: 5px; }
  .qz__stepbtn { font-size: 9.5px; letter-spacing: .04em; }
  .qz__actions .btn { flex: 1 1 100%; }
  .qz-route { --gap: 16px; flex-direction: column; align-items: center; }
  .qz-cap { flex: none; width: min(100%, 300px); padding: 10px 14px; font-size: 14px; }
  .qz-cap + .qz-cap::before {
    right: auto; left: 50%; top: auto; bottom: 100%; width: 1.5px; height: var(--gap); margin: 0 0 0 -1px;
    background: linear-gradient(180deg, rgba(185,166,238,.55), rgba(143,208,255,.55)); transform-origin: center top;
    animation-name: qzLinkInY;
  }
  @keyframes qzLinkInY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}
@media (max-width: 380px) {
  /* подписи будущих шагов прячем, текущий шаг — всегда с названием */
  .qz__progress li:not(.is-active) .qz__lbl, .qz__progress li:not(.is-active) .qz__dot { display: none; }
}

/* «уменьшить движение» и статичный маршрут — всё сразу, без перелива и рисования */
.qz-route.is-static .qz-cap, .qz-route.is-static .qz-cap::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .qz__pane, .qz__pane.is-leaving, .qz-cap, .qz-cap::before, .qz-cap--done, .qz .wiz__choice.is-on::after, .qz__inc { animation: none !important; }
  .qz .wiz__choice:hover { transform: none; }
}

/* ---------- 48. Путь заказа ---------- */
.opath-slot { max-width: 1040px; margin: 40px auto 0; }
.terms .opath-slot { margin: 0 auto 28px; }
.opath {
  padding: 26px 28px; border-radius: var(--radius);
  background: var(--glass-spec), var(--holo), var(--glass-gloss), var(--glass-fill-flat);
  background-size: auto, 260% 260%, auto, auto;
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop);
}
.opath__head h3 { margin: 6px 0 6px; font-size: 22px; }
.opath__head p { margin: 0 0 20px; color: var(--ink-soft); font-size: 14.5px; }
.opath__track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
/* линия дорожки и её заливка до выбранного этапа */
.opath__track::before, .opath__track::after {
  content: ""; position: absolute; left: 10%; top: 20px; height: 3px; border-radius: 3px;
}
.opath__track::before { right: 10%; background: rgba(163,140,220,.25); }
.opath__track::after {
  width: calc(80% * var(--opath-p, 0)); background: linear-gradient(90deg, var(--lav-400), #8fd0ff);
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.opath__step {
  position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 5px;
  padding: 0 4px 6px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  font: inherit; text-align: center; color: var(--ink-soft);
}
.opath__step i {
  width: 44px; height: 44px; display: grid; place-items: center; font-style: normal;
  font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--lav-600);
  background: linear-gradient(160deg, #fff, #eee8fb);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  transition: transform .3s var(--ease-bounce, ease), background .3s, color .3s;
}
.opath__step b { font-family: var(--font-head); font-size: 13.5px; line-height: 1.2; color: var(--ink); }
.opath__step small { font-size: 11.5px; color: var(--ink-dim); }
.opath__step:hover i { transform: translateY(-2px) scale(1.06); }
.opath__step.is-done i { background: linear-gradient(160deg, #efe9fd, #d9ccf6); }
.opath__step.is-active i {
  color: #fff; transform: scale(1.12);
  background: linear-gradient(135deg, var(--lav-500), #3f74b3);
}
.opath__step.is-active b { color: var(--lav-600); }
.opath__step:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; }
.opath__panel { margin-top: 18px; }
.opath__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.opath__col { padding: 14px 16px; border-radius: var(--radius-sm); background: rgba(255,255,255,.55); border: 1px solid var(--glass-edge); }
.opath__col h4 { margin: 0 0 6px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.opath__col p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.opath__col--edit { background: linear-gradient(160deg, rgba(185,166,238,.2), rgba(150,196,255,.14)); border-color: rgba(163,140,220,.38); }
.opath__col--edit b { color: var(--lav-600); }
.opath__next {
  margin-top: 14px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--lav-600);
}
.opath__next:hover { text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="dark"] .opath__step i { background: linear-gradient(160deg, rgba(176,162,248,.184), rgba(176,162,248,.069)); }
html[data-theme="dark"] .opath__step.is-done i { background: linear-gradient(160deg, rgba(185,166,238,.4), rgba(185,166,238,.2)); color: #fff; }
html[data-theme="dark"] .opath__step.is-active i { background: linear-gradient(135deg, #cdbcf7, #8fd0ff); color: #1b1727; }
html[data-theme="dark"] .opath__col { background: rgba(176,162,248,.057); border-color: rgba(205,196,255,.17); }
html[data-theme="dark"] .opath__col--edit { background: linear-gradient(160deg, rgba(185,166,238,.16), rgba(143,208,255,.08)); border-color: rgba(185,166,238,.35); }
@media (max-width: 720px) {
  .opath { padding: 20px 16px; }
  .opath__track { grid-template-columns: repeat(5, minmax(76px, 1fr)); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .opath__track::-webkit-scrollbar { display: none; }
  /* лента прокручивается, линия под ней не дотянулась бы — прогресс видно по кристаллам */
  .opath__track::before, .opath__track::after { display: none; }
  .opath__step small { display: none; }
  .opath__step b { font-size: 12px; }
  .opath__cols { grid-template-columns: 1fr; }
}

/* ---------- 49. Плашка «Твой проект» ---------- */
.ppill {
  position: fixed; left: 18px; bottom: 78px; z-index: 47;
  transition: opacity .3s, transform .3s;
}
.ppill.is-away { opacity: 0; transform: translateY(10px); pointer-events: none; }
.ppill__head {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; cursor: pointer;
  font: inherit; text-align: left; color: var(--ink);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.66);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--shadow-sm);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  transition: transform .3s var(--ease-bounce, ease), box-shadow .3s;
}
.ppill__head:hover { transform: translateY(-2px); }
.ppill__head:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 3px; }
/* кристаллик — текстура из assets/decor/ (какая именно — icons в js/decor-config.js) */
.ppill__gem, .fx-gem { display: block; background: var(--decor-gem) center / contain no-repeat; }
.ppill__gem { width: 24px; height: 24px; flex: none; }
.ppill__txt { display: grid; line-height: 1.15; }
.ppill__txt b { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.ppill__sum { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.ppill__body {
  position: absolute; left: 0; bottom: calc(100% + 10px); width: 300px; max-width: calc(100vw - 36px);
  padding: 14px; border-radius: 18px; color: var(--ink);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.9);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--shadow-md);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px) scale(.98); transform-origin: bottom left;
  transition: opacity .22s, transform .22s, visibility .22s;
}
/* мостик над щелью между плашкой и составом — курсор не «проваливается» */
.ppill__body::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.ppill.is-open .ppill__body { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.ppill__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ppill__list li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.ppill__list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppill__list em { font-style: normal; font-weight: 700; color: var(--lav-600); white-space: nowrap; }
.ppill__more { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-dim); }
.ppill__wish { display: block; margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; color: #c25a92; }
.ppill__wish:hover { text-decoration: underline; text-underline-offset: 3px; }
.ppill__open { width: 100%; margin-top: 12px; }
/* позиция прилетела в корзину — плашка откликается, когда иконка долетела */
.ppill.is-bump .ppill__head { animation: fxBump .5s .6s var(--ease-bounce, ease) both; }
html[data-theme="dark"] .ppill__head { background: var(--glass-spec), var(--glass-gloss), rgba(34,29,51,.78); border-color: rgba(205,196,255,.19); }
html[data-theme="dark"] .ppill__body { background: var(--glass-spec), var(--glass-gloss), rgba(27,23,39,.94); border-color: rgba(205,196,255,.19); }
html[data-theme="dark"] .ppill__wish { color: #f0a9d0; }
@media (max-width: 720px) {
  .ppill { left: 10px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .ppill__head { gap: 8px; padding: 6px 12px 6px 8px; }
  .ppill__gem { width: 20px; height: 20px; }
  .ppill__txt b { display: none; }
  .ppill__sum { font-size: 13.5px; }
  .ppill__body { max-width: calc(100vw - 20px); }
}

/* ---------- 50. Словарик: «?» у терминов ---------- */
.gl { white-space: nowrap; }
.gl__q {
  position: relative; top: -.45em; display: inline-grid; place-items: center;
  width: 15px; height: 15px; margin-left: 3px; padding: 0; border-radius: 50%; cursor: help;
  font-family: var(--font-head); font-size: 10px; font-weight: 700; line-height: 1; color: var(--lav-600);
  background: rgba(185,166,238,.2); border: 1px solid rgba(163,140,220,.5);
  transition: background .2s, color .2s, transform .2s;
}
/* палец попадает легко: невидимая зона вокруг значка */
.gl__q::after { content: ""; position: absolute; inset: -9px; }
.gl__q:hover, .gl__q[aria-expanded="true"] { background: var(--lav-500); border-color: var(--lav-500); color: #fff; transform: scale(1.12); }
.gl__q:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; }
html[data-theme="dark"] .gl__q:hover, html[data-theme="dark"] .gl__q[aria-expanded="true"] { color: #1b1727; }
.gl__tip {
  position: fixed; z-index: 90; width: max-content; max-width: min(300px, calc(100vw - 20px));
  padding: 12px 14px; border-radius: 14px; pointer-events: none;
  font-size: 13.5px; line-height: 1.45; color: var(--ink); text-align: left; white-space: normal;
  background: #fbf9ff; border: 1px solid rgba(163,140,220,.35); box-shadow: 0 18px 40px -18px rgba(60,40,110,.45);
  animation: glIn .16s ease both;
}
.gl__tip b { display: block; margin-bottom: 3px; font-family: var(--font-head); font-size: 14px; color: var(--lav-600); }
.gl__tip::after {
  content: ""; position: absolute; left: var(--gl-arrow, 50%); bottom: -7px; width: 12px; height: 12px; margin-left: -6px;
  background: inherit; border: solid rgba(163,140,220,.35); border-width: 0 1px 1px 0; transform: rotate(45deg);
}
.gl__tip.is-below::after { bottom: auto; top: -7px; transform: rotate(225deg); }
@keyframes glIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
html[data-theme="dark"] .gl__tip { background: #241f36; border-color: rgba(185,166,238,.35); box-shadow: 0 18px 40px -16px rgba(0,0,0,.8); }
html[data-theme="dark"] .gl__tip::after { border-color: rgba(185,166,238,.35); }

/* ---------- 51. Микроанимации: полёт в корзину, кристалл, печать ---------- */
.fx-fly {
  position: fixed; left: 0; top: 0; z-index: 95; width: 34px; height: 34px;
  display: grid; place-items: center; pointer-events: none; will-change: transform, opacity;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 12px rgba(110, 80, 190, .45));
}
.fx-gem { width: 100%; height: 100%; }
.fx-fly--pic { width: 46px; height: 46px; border-radius: 12px; overflow: hidden; border: 2px solid #fff; background: #fff; }
.fx-fly--pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-fly--wish { width: 30px; height: 30px; }
.fx-fly--wish .fx-heart { position: absolute; font-style: normal; font-size: 22px; line-height: 1; color: #e0679f; animation: fxHeartOut .36s ease-in both; }
.fx-fly--wish .fx-gem { animation: fxGemIn .36s .12s var(--ease-bounce, ease) both; }
@keyframes fxHeartOut {
  0% { transform: scale(1); opacity: 1; }
  55% { transform: scale(1.35) rotate(-10deg); opacity: 1; }
  100% { transform: scale(.2) rotate(45deg); opacity: 0; }
}
@keyframes fxGemIn { from { transform: scale(0) rotate(-70deg); opacity: 0; } to { transform: none; opacity: 1; } }
.fx-bump { animation: fxBump .5s var(--ease-bounce, ease) both; }
@keyframes fxBump { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }

/* ссылка на проект: две кристальные створки смыкаются, вспышка — и она «запечатана» */
.cart__link { position: relative; }
.fx-seal { position: absolute; inset: -5px; z-index: 2; pointer-events: none; overflow: hidden; border-radius: 12px; }
.fx-seal__l, .fx-seal__r {
  position: absolute; top: 0; bottom: 0; width: 52%;
  background:
    repeating-linear-gradient(62deg, rgba(255,255,255,.4) 0 1px, transparent 1px 22px),
    linear-gradient(115deg, rgba(255,255,255,.92) 0%, rgba(214,200,250,.95) 32%, rgba(170,210,255,.95) 64%, rgba(240,190,225,.95) 100%);
}
.fx-seal__l { left: 0; clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%); animation: fxSealL 1.2s cubic-bezier(.6, 0, .3, 1) both; }
.fx-seal__r { right: 0; clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); animation: fxSealR 1.2s cubic-bezier(.6, 0, .3, 1) both; }
.fx-seal__flash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0));
  animation: fxSealFlash 1.2s ease both;
}
@keyframes fxSealL { 0% { transform: translateX(-105%); } 38%, 62% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes fxSealR { 0% { transform: translateX(105%); } 38%, 62% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes fxSealFlash { 0%, 36% { opacity: 0; transform: scale(.5); } 48% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.25); } }
.fx-seal-badge { display: none; }
.cart__link.is-sealing .fx-seal-badge, .cart__link.is-sealed .fx-seal-badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 10px 7px 8px; border-radius: 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #2a2140;
  background: linear-gradient(135deg, #f7f4ff, #cdbcf7 45%, #a9d8ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 4px 12px rgba(120,90,200,.3);
  animation: fxBadgeIn .5s .7s var(--ease-bounce, ease) both;
}
.fx-seal-badge::before {
  content: ""; width: 14px; height: 14px;
  background: var(--decor-seal) center / contain no-repeat;
}
@keyframes fxBadgeIn { from { transform: scale(.3) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.cart__link.is-sealed .prep__field {
  border-color: rgba(163,140,220,.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 0 0 3px rgba(185,166,238,.2);
}
@media (prefers-reduced-motion: reduce) {
  .qz__pane.is-active, .opath__panel:not([hidden]), .gl__tip, .fx-bump, .ppill.is-bump .ppill__head,
  .cart__link.is-sealing .fx-seal-badge, .cart__link.is-sealed .fx-seal-badge { animation: none; }
  .opath__track::after { transition: none; }
}

/* ---------- 52. Отзывы: лента с прокруткой вбок ---------- */
.reviews__carousel { position: relative; }
.reviews__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* запас сверху и снизу: карточка приподнимается при наведении и отбрасывает тень */
  padding: 14px 4px 28px; margin: -14px -4px -12px;
  scrollbar-width: none; cursor: grab;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; border-radius: 18px; }
.reviews__track.is-drag { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.reviews__track.is-drag .review { pointer-events: none; }
.reviews__track .review { scroll-snap-align: start; margin: 0; min-width: 0; }
/* длинный отзыв из ВК — первые строки, целиком по ссылке */
.review--vk p { white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden; }
.review footer a { font-size: 12.5px; font-weight: 500; color: var(--ink-dim); text-decoration: none; }
.review footer a:hover { color: var(--lav-600); text-decoration: underline; text-underline-offset: 3px; }
.reviews__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.reviews__btn {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 18px; line-height: 1; color: var(--lav-600);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.55);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--shadow-sm);
  transition: transform .25s var(--ease-bounce, ease), opacity .25s;
}
.reviews__btn:hover:not(:disabled) { transform: translateY(-2px); }
.reviews__btn:disabled { opacity: .35; cursor: default; }
.reviews__btn:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 3px; }
.reviews__bar { position: relative; width: min(240px, 40vw); height: 4px; border-radius: 4px; overflow: hidden; background: rgba(163,140,220,.22); }
.reviews__bar i {
  position: absolute; top: 0; bottom: 0; left: var(--l, 0%); width: var(--w, 30%); border-radius: 4px;
  background: linear-gradient(90deg, var(--lav-400), #8fd0ff);
}
html[data-theme="dark"] .reviews__btn { background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.081); border-color: rgba(205,196,255,.19); }
html[data-theme="dark"] .reviews__bar { background: rgba(176,162,248,.138); }
@media (max-width: 1024px) {
  .reviews__track { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 720px) {
  .reviews__track { grid-auto-columns: 86%; gap: 14px; cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews__track { scroll-behavior: auto; }
}

/* ---------- 53. Помощник-аксолотль (js/helper.js, js/helper-config.js) ---------- */
/* картинки — только готовые спрайты из assets/helper; CSS лишь двигает, масштабирует и прячет их */
.helper {
  --hs: 160px;                 /* размер маскота */
  --helper-beside: 440px;      /* ширина открытой панели справа */
  position: fixed; right: 18px; bottom: calc(124px + env(safe-area-inset-bottom, 0px));
  z-index: 49; width: var(--hs); height: var(--hs);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease, right .35s ease, bottom .35s ease;
}
.helper.is-entering { opacity: 0; transform: translateY(18px); }
/* открыта корзина или «на потом» — садимся рядом с панелью, поверх затемнения */
.helper.is-beside { right: calc(var(--helper-beside) + 16px); bottom: 24px; z-index: 61; }
/* окно, мобильное меню, клавиатура — уходим совсем */
.helper.is-away { opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity .3s ease, transform .3s ease, visibility 0s .3s; }
/* под маскотом кнопка, ссылка или поле — становимся почти прозрачными и пропускаем клики */
.helper.is-dodge { opacity: .16; }
.helper.is-dodge .helper__body, .helper.is-dodge .helper__hide { pointer-events: none; }

.helper__body {
  position: absolute; inset: 0; display: block; padding: 0; border: 0; border-radius: 40%;
  background: none; cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.helper__body:focus-visible { outline: 2px solid var(--lav-400); outline-offset: -8px; }
.helper__float { display: block; width: 100%; height: 100%; }
.helper__img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 10px 18px rgba(110, 80, 190, .28));
  transform-origin: 50% 85%;
}
html[data-theme="dark"] .helper__img { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55)); }

/* крестик «скрыть»: виден при наведении и фокусе, на сенсорных экранах — всегда */
.helper__hide {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer; pointer-events: auto;
  font: 600 13px/1 var(--font-head); color: var(--ink-soft);
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .2s ease;
}
.helper__hide::after { content: ""; position: absolute; inset: -9px; }
.helper:hover .helper__hide, .helper:focus-within .helper__hide { opacity: 1; }
.helper__hide:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; }
@media (hover: none) { .helper__hide { opacity: .8; } }
html[data-theme="dark"] .helper__hide { background: rgba(34,29,51,.6); border-color: rgba(205,196,255,.23); color: var(--ink); }

/* ---- реплика: жидкое стекло с голографическим краем ---- */
.helper__bubble {
  position: absolute; right: calc(100% - 14px); bottom: 52%;
  width: max-content; max-width: 280px; padding: 12px 16px 12px 14px; border-radius: 20px;
  pointer-events: auto; color: var(--ink); font-size: 14px; line-height: 1.45;
  /* стекло: сквозь него видно страницу, но плотности хватает, чтобы текст
     читался и над светлой картинкой, и над тёмной */
  background: rgba(255,255,255,.52); text-shadow: 0 1px 0 rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 16px 36px -18px rgba(60, 40, 110, .45), inset 0 1px 0 rgba(255,255,255,.5);
  opacity: 0; transform: translateY(6px) scale(.97); transform-origin: 100% 100%;
  transition: opacity .28s ease, transform .28s ease;
}
.helper__bubble::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(185,166,238,.85), rgba(143,208,255,.7) 45%, rgba(240,169,208,.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.helper__bubble.is-in { opacity: 1; transform: none; }
/* переносы строк из реплик (
) — как в тексте */
.helper__text { margin: 0; padding-right: 10px; white-space: pre-line; }
.helper__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.helper__btn {
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: 600 12.5px/1.2 var(--font-head); color: var(--lav-600);
  background: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  transition: background .2s ease, transform .2s ease;
}
.helper__btn:hover { background: rgba(255,255,255,.5); transform: translateY(-1px); }
.helper__btn:focus-visible, .helper__x:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; }
.helper__x {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; background: none;
  font: 600 13px/1 var(--font-head); color: var(--ink-dim);
}
.helper__x::after { content: ""; position: absolute; inset: -8px; }
.helper__x:hover { color: var(--lav-600); }
/* маленькая реакция («поймала ✦») — без крестика и компактнее */
.helper__bubble--toast { padding: 8px 14px; border-radius: 16px; font-weight: 600; font-size: 13.5px; }
.helper__bubble--toast .helper__x, .helper__bubble--toast .helper__actions { display: none; }
.helper__bubble--toast .helper__text { padding-right: 0; }
/* меню из пяти пунктов — столбиком */
.helper__bubble--menu .helper__actions { flex-direction: column; align-items: stretch; }
.helper__bubble--menu .helper__btn { text-align: left; }
html[data-theme="dark"] .helper__bubble { background: rgba(30,24,48,.62); text-shadow: 0 1px 2px rgba(0,0,0,.55); box-shadow: 0 16px 40px -16px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.14); }
html[data-theme="dark"] .helper__btn { background: rgba(176,162,248,.092); border-color: rgba(205,196,255,.25); color: var(--lav-600); }
html[data-theme="dark"] .helper__btn:hover { background: rgba(176,162,248,.207); }

/* подсветка элемента, на который показывает помощник — обычным для сайта кольцом фокуса */
.helper-spot { outline: 2px solid rgba(163,140,220,.9); outline-offset: 4px; border-radius: 12px; animation: helperSpot 2.6s ease both; }
@keyframes helperSpot {
  0% { outline-color: rgba(163,140,220,0); }
  15%, 70% { outline-color: rgba(163,140,220,.95); }
  100% { outline-color: rgba(163,140,220,0); }
}

/* ---- движения по состояниям: только transform и opacity, без растягивания ---- */
.helper[data-state="idle"] .helper__float { animation: helperFloat 5.2s ease-in-out infinite; }
.helper[data-state="idle"] .helper__img { animation: helperBreath 4.6s ease-in-out infinite; }
.helper.is-play[data-state="peek"] .helper__img { animation: helperPeek .7s cubic-bezier(.2, .7, .3, 1) both; }
.helper.is-play[data-state="point-left"] .helper__img { animation: helperNudgeLeft .9s ease-in-out 2; }
.helper.is-play[data-state="point-up"] .helper__img { animation: helperBobUp .9s ease-in-out 2; }
.helper.is-play[data-state="wake"] .helper__img { animation: helperWake 1.3s cubic-bezier(.25, .7, .3, 1) both; }
.helper.is-play[data-state="happy"] .helper__img { animation: helperBounce .7s cubic-bezier(.3, 1.4, .5, 1) 1; }
.helper[data-state="confused"] .helper__img { transform: rotate(-4deg); transition: transform .35s ease; }
.helper[data-state="sleep"] .helper__img { animation: helperSleep 6.5s ease-in-out infinite; }
.helper.is-play[data-state="sparkle"] .helper__img { animation: helperSparkle .9s ease-in-out 1; }
.helper.is-play[data-state="celebrate"] .helper__img { animation: helperCelebrate .75s cubic-bezier(.3, 1.4, .5, 1) 2; }
.helper.is-play[data-state="heart"] .helper__img { animation: helperSway 1.1s ease-in-out 1; }
/* sleep — почти неподвижно: без анимаций */

@keyframes helperFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes helperBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }
/* сон почти неподвижен; просыпается медленно */
@keyframes helperSleep { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.006); } }
@keyframes helperWake { from { opacity: .85; transform: translateY(4px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes helperSway { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-3deg); } 70% { transform: rotate(3deg); } }
@keyframes helperPeek { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes helperNudgeLeft { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@keyframes helperBobUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes helperBounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 70% { transform: translateY(-1px); } }
@keyframes helperSparkle { 0%, 100% { transform: scale(1); } 35% { transform: scale(.98); } 70% { transform: scale(1.02); } }
@keyframes helperCelebrate { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-10px) scale(1.02); } 75% { transform: translateY(-2px); } }
@keyframes helperPulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.05); } }

/* ---- телефон: меньше, над нижней панелью, реплика над маскотом ---- */
@media (max-width: 720px) {
  .helper { --hs: 96px; right: 6px; bottom: calc(106px + env(safe-area-inset-bottom, 0px)); }
  .helper__bubble {
    right: 4px; bottom: calc(100% + 2px); max-width: min(280px, calc(100vw - 32px));
    transform-origin: 90% 100%; font-size: 13.5px;
  }
  .helper__hide { top: 0; right: 0; width: 20px; height: 20px; font-size: 12px; }
}

/* ---- «уменьшить движение»: никаких парений и подпрыгиваний, только прозрачность ---- */
@media (prefers-reduced-motion: reduce) {
  .helper, .helper.is-away { transition: opacity .3s ease, visibility 0s .3s; }
  .helper.is-entering, .helper.is-away { transform: none; }
  .helper .helper__float, .helper .helper__img { animation: none !important; transform: none !important; }
  .helper__bubble { transform: none; transition: opacity .25s ease; }
  .helper-spot { animation: none; }
}
@media print { .helper { display: none !important; } }

/* кнопка «вернуть помощника»: там же, где он сидел, — выглядывающий аксолотль из peek.webp */
.helper-back {
  position: fixed; right: 18px; bottom: calc(124px + env(safe-area-inset-bottom, 0px)); z-index: 49;
  width: 58px; height: 58px; padding: 4px; border-radius: 50%; cursor: pointer;
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.5);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--shadow-sm);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: opacity .35s ease, transform .35s ease;
}
.helper-back img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.helper-back:hover { transform: translateY(-2px) scale(1.05); }
.helper-back:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 3px; }
.helper-back.is-entering { opacity: 0; transform: translateY(10px); }
html[data-theme="dark"] .helper-back { background: var(--glass-spec), var(--glass-gloss), rgba(34,29,51,.7); border-color: rgba(205,196,255,.21); }
@media (max-width: 720px) {
  .helper-back { right: 8px; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .helper-back, .helper-back.is-entering { transform: none; }
  .helper-back:hover { transform: none; }
}
@media print { .helper-back { display: none !important; } }

/* ---------- 54. Live2D «Пример работы»: подпись, пока модель грузится ---------- */
/* сам блок до готовности прозрачный — на время загрузки показываем его,
   но прячем холст и панель: видна только подпись на месте кнопки */
.l2d__loading { display: none; }
.l2d__canvas { transition: opacity .6s ease; }
.l2d.is-loading, .l2d.is-failed { opacity: 1; }
.l2d.is-loading .l2d__canvas, .l2d.is-failed .l2d__canvas { opacity: 0; }
.l2d.is-loading .l2d__panel, .l2d.is-failed .l2d__panel { display: none; }
/* по центру места, где появится модель, — не у кнопки: там нижняя панель, «Твой проект» и помощник */
.l2d.is-loading .l2d__loading, .l2d.is-failed .l2d__loading {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
  width: max-content; max-width: min(270px, 90%);
  display: inline-flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 20px;
  font-family: var(--font-head); font-weight: 600; font-size: 13.5px; line-height: 1.2; color: var(--lav-600);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.58);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--shadow-sm);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  animation: l2dLoadIn .35s ease both;
}
.l2d__spin {
  flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
  border: 2px solid rgba(163,140,220,.28); border-top-color: var(--lav-500);
  animation: l2dSpin .8s linear infinite;
}
.l2d__txt { display: grid; gap: 4px; min-width: 0; }
.l2d__txt small { font-family: var(--font-body, inherit); font-weight: 500; font-size: 12px; color: var(--ink-soft); }
.l2d__st, .l2d__loading-fail { display: none; }
.l2d[data-stage="libs"] .l2d__st--libs, .l2d[data-stage="model"] .l2d__st--model { display: block; }
/* полоска: библиотеки заполняют её по шагам, модель — плавно до конца */
.l2d__bar { display: block; height: 3px; margin-top: 6px; border-radius: 3px; overflow: hidden; background: rgba(163,140,220,.22); }
.l2d__bar i {
  display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%;
  transform: scaleX(var(--l2d-p, .05)); transition: transform .45s ease;
  background: linear-gradient(90deg, var(--lav-400), #8fd0ff);
}
.l2d[data-stage="model"] .l2d__bar i { transition-duration: 7s; transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
.l2d.is-failed .l2d__st, .l2d.is-failed .l2d__txt small, .l2d.is-failed .l2d__bar, .l2d.is-failed .l2d__spin { display: none; }
.l2d.is-failed .l2d__loading-fail { display: block; }
html[data-theme="dark"] .l2d__loading { background: var(--glass-spec), var(--glass-gloss), rgba(34,29,51,.72); border-color: rgba(205,196,255,.19); }
@keyframes l2dSpin { to { transform: rotate(360deg); } }
@keyframes l2dLoadIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* ---------- 55. Что можно сделать за мой бюджет ---------- */
.bdg__card {
  max-width: 1040px; margin: 0 auto; padding: 28px 30px 24px; border-radius: var(--radius);
  background: var(--glass-spec), var(--holo), var(--glass-gloss), var(--glass-fill-flat);
  background-size: auto, 260% 260%, auto, auto;
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop);
}
.bdg__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.bdg__label { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.bdg__value { font-family: var(--font-head); font-weight: 700; font-size: clamp(28px, 4vw, 40px); line-height: 1; color: var(--lav-600); font-variant-numeric: tabular-nums; }
/* ползунок: заливка до значения — через --bdg-p */
.bdg__range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: none; cursor: pointer;
  --bdg-p: 31.6%;
}
.bdg__range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 8px;
  background: linear-gradient(90deg, var(--lav-400), #8fd0ff) 0 / var(--bdg-p) 100% no-repeat, rgba(163,140,220,.22);
}
.bdg__range::-moz-range-track { height: 8px; border-radius: 8px; background: rgba(163,140,220,.22); }
.bdg__range::-moz-range-progress { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--lav-400), #8fd0ff); }
.bdg__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%;
  background: linear-gradient(135deg, #fff, #e9e1fb); border: 2px solid var(--lav-400);
  box-shadow: 0 6px 16px -6px rgba(90,60,160,.55);
}
.bdg__range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #fff, #e9e1fb); border: 2px solid var(--lav-400);
  box-shadow: 0 6px 16px -6px rgba(90,60,160,.55);
}
.bdg__range:focus-visible { outline: none; }
.bdg__range:focus-visible::-webkit-slider-thumb { outline: 3px solid rgba(163,140,220,.5); outline-offset: 2px; }
.bdg__range:focus-visible::-moz-range-thumb { outline: 3px solid rgba(163,140,220,.5); outline-offset: 2px; }
.bdg__scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.bdg__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 20px; }
.bdg__chips button {
  padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); background: rgba(255,255,255,.45); border: 1px solid var(--glass-edge);
  transition: background .2s, color .2s, border-color .2s;
}
.bdg__chips button:hover { color: var(--lav-600); border-color: rgba(163,140,220,.5); }
.bdg__chips button.is-on { color: var(--lav-600); background: rgba(185,166,238,.22); border-color: rgba(163,140,220,.6); }
.bdg__chips button:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; }
.bdg__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.bdg__opt {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.55); border: 1px solid var(--glass-edge);
  animation: bdgIn .3s ease both;
}
@keyframes bdgIn { from { opacity: .4; } to { opacity: 1; } }
.bdg__opt header { display: grid; gap: 2px; }
.bdg__opt header b { font-family: var(--font-head); font-size: 16px; }
.bdg__opt header small { font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; }
.bdg__opt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.bdg__opt li { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.bdg__opt li span { min-width: 0; }
.bdg__opt li em { font-style: normal; white-space: nowrap; color: var(--ink-soft); }
.bdg__sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 10px; border-top: 1px dashed rgba(163,140,220,.45); }
.bdg__sum span { font-size: 13px; color: var(--ink-soft); }
.bdg__sum b { font-family: var(--font-head); font-size: 19px; color: var(--lav-600); }
.bdg__left { margin: -4px 0 0; font-size: 12px; color: var(--ink-dim); text-align: right; }
.bdg__acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bdg__more { font-family: var(--font-head); font-weight: 600; font-size: 13px; color: var(--lav-600); }
.bdg__next { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; color: var(--ink-soft); background: rgba(185,166,238,.12); border: 1px dashed rgba(163,140,220,.45); }
.bdg__foot { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-dim); }
html[data-theme="dark"] .bdg__opt { background: rgba(176,162,248,.057); border-color: rgba(205,196,255,.17); }
html[data-theme="dark"] .bdg__chips button { background: rgba(176,162,248,.069); border-color: rgba(205,196,255,.19); }
html[data-theme="dark"] .bdg__chips button.is-on { background: rgba(185,166,238,.2); border-color: rgba(185,166,238,.5); color: #fff; }
html[data-theme="dark"] .bdg__range::-webkit-slider-thumb { background: linear-gradient(135deg, #cdbcf7, #8fd0ff); border-color: #ece7f6; }
html[data-theme="dark"] .bdg__range::-moz-range-thumb { background: linear-gradient(135deg, #cdbcf7, #8fd0ff); border-color: #ece7f6; }
@media (max-width: 720px) {
  .bdg__card { padding: 20px 16px; }
  .bdg__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .bdg__opt { animation: none; } }

/* ---------- 56. Служебное: текст только для экранных дикторов ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 57. Поиск по услугам (js/search.js) ---------- */
.srchbtn svg { display: block; }
html.srch-open { overflow: hidden; }
.srch { position: fixed; inset: 0; z-index: 75; }
.srch__backdrop { position: absolute; inset: 0; background: rgba(30, 22, 48, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.srch__panel {
  position: absolute; left: 50%; top: 11vh; transform: translateX(-50%);
  width: min(640px, calc(100vw - 24px)); max-height: 76vh; display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border-radius: 22px; color: var(--ink);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.9);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), 0 30px 70px -30px rgba(40, 25, 80, .55);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  animation: srchIn .22s ease both;
}
@keyframes srchIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.srch__bar { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px 10px; border-bottom: 1px solid rgba(163,140,220,.25); color: var(--lav-600); }
.srch__input {
  flex: 1; min-width: 0; padding: 8px 0; border: 0; background: none; outline: none;
  font: inherit; font-family: var(--font-head); font-size: 19px; color: var(--ink);
}
.srch__input::placeholder { color: var(--ink-dim); }
.srch__input::-webkit-search-cancel-button { display: none; }
.srch__close {
  flex: none; padding: 4px 9px; border-radius: 8px; cursor: pointer; font: inherit; font-family: var(--mono); font-size: 11px;
  color: var(--ink-soft); background: rgba(163,140,220,.14); border: 1px solid rgba(163,140,220,.3);
}
.srch__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-dim); }
.srch__chips button, .spr__btn--sm {
  padding: 5px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--lav-600); background: rgba(185,166,238,.14); border: 1px solid rgba(163,140,220,.35);
}
.srch.has-query .srch__chips { display: none; }
.srch__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 4px; }
.srch__list:empty { display: none; }
.srch__item {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 14px; color: var(--ink); text-decoration: none;
}
.srch__txt { display: grid; gap: 2px; min-width: 0; }
.srch__txt b { font-family: var(--font-head); font-size: 15px; }
.srch__txt small { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch__item em { font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--lav-600); white-space: nowrap; }
.srch__item i { font-style: normal; color: var(--ink-dim); transition: transform .2s; }
.srch__list [aria-selected="true"] .srch__item { background: rgba(185,166,238,.18); }
.srch__list [aria-selected="true"] .srch__item i { transform: translateX(3px); color: var(--lav-600); }
.srch__empty { margin: 4px 6px; font-size: 14px; color: var(--ink-soft); }
.srch__empty a { color: var(--lav-600); }
.srch__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid rgba(163,140,220,.2); font-size: 12px; color: var(--ink-dim); }
.srch .spr__out { margin: 0; }
html[data-theme="dark"] .srch__backdrop { background: rgba(0,0,0,.45); }
html[data-theme="dark"] .srch__panel { background: var(--glass-spec), var(--glass-gloss), rgba(30,25,45,.94); border-color: rgba(205,196,255,.19); }
@media (max-width: 720px) {
  .srch__panel { top: 10px; width: calc(100vw - 16px); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  .srch__txt small { white-space: normal; }
  .srch__item { grid-template-columns: 1fr auto; }
  .srch__item i { display: none; }
}

/* ---------- 58. «Продолжить проект» на первом экране ---------- */
.hero__continue {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 9px 16px 9px 10px;
  border-radius: 999px; cursor: pointer; font: inherit; text-align: left; color: var(--ink);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.62);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--shadow-sm);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .3s var(--ease-bounce, ease);
}
.hero__continue:hover { transform: translateY(-2px); }
.hero__continue:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 3px; }
.hero__continue-gem { width: 24px; height: 24px; flex: none; background: var(--decor-gem) center / contain no-repeat; }
.hero__continue-txt { display: grid; line-height: 1.2; }
.hero__continue-txt b { font-size: 13.5px; font-weight: 600; }
.hero__continue-sum { font-size: 12.5px; color: var(--ink-soft); }
.hero__continue-go { font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--lav-600); white-space: nowrap; }
html[data-theme="dark"] .hero__continue { background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.081); border-color: rgba(205,196,255,.19); }

/* ---------- 59. Режим «новичок / знаю, что мне нужно» (js/mode.js) ---------- */
.modepick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 18px; font-size: 13px; }
.modepick__cap { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin-right: 2px; }
.modepick button, .nav__modes button, .footer__mode button {
  padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink-soft);
  background: rgba(255,255,255,.4); border: 1px solid var(--glass-edge); transition: background .2s, color .2s, border-color .2s;
}
.modepick button.is-on, .nav__modes button.is-on, .footer__mode button.is-on {
  color: var(--lav-600); background: rgba(185,166,238,.22); border-color: rgba(163,140,220,.6);
}
.modepick button:focus-visible, .nav__modes button:focus-visible, .footer__mode button:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; }
.footer__mode { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-dim); }
.footer__mode button { padding: 4px 10px; font-size: 12px; }
.nav__modes { display: none; }
@media (max-width: 720px) {
  .nav__modes { display: flex; flex-wrap: wrap; gap: 6px; }
  .nav__modes button { font-size: 13.5px; }
}
html[data-theme="dark"] .modepick button, html[data-theme="dark"] .nav__modes button, html[data-theme="dark"] .footer__mode button { background: rgba(176,162,248,.069); border-color: rgba(205,196,255,.19); }

/* подсказка «Зачем режимы?»: над переключателем при наведении или фокусе,
   на телефоне — на пару секунд после нажатия (класс is-tip от js/mode.js) */
.modepick, .footer__mode, .nav__modes { position: relative; }
.modetip {
  position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 30;
  width: max-content; max-width: min(330px, calc(100vw - 32px)); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px; border-radius: 16px;
  font: 400 12.5px/1.45 var(--font-body, inherit); color: var(--ink-dim); text-align: left;
  text-transform: none; letter-spacing: 0;
  background: rgba(255,255,255,.9); border: 1px solid rgba(185,166,238,.45);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 16px 36px -18px rgba(60, 40, 110, .45);
  opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
.modetip::after {
  content: ""; position: absolute; left: 22px; top: 100%; width: 10px; height: 10px; margin-top: -5px;
  background: inherit; border: inherit; border-width: 0 1px 1px 0; transform: rotate(45deg);
}
.modetip__t { font: 600 12.5px/1.2 var(--font-head); color: var(--ink); }
.modetip__row { padding-left: 10px; border-left: 2px solid transparent; transition: color .2s ease, border-color .2s ease; }
.modetip__row b { font-weight: 600; color: inherit; }
.modetip[data-hl="novice"] [data-for="novice"], .modetip[data-hl="pro"] [data-for="pro"] { color: var(--ink); border-left-color: var(--lav-400); }
.modetip small { font-size: 11.5px; opacity: .8; }
@media (hover: hover) and (pointer: fine) {
  .modepick:hover .modetip, .footer__mode:hover .modetip { opacity: 1; visibility: visible; transform: none; transition-delay: .15s, .15s, 0s; }
}
.modepick:has(:focus-visible) .modetip, .footer__mode:has(:focus-visible) .modetip, .nav__modes:has(:focus-visible) .modetip,
.is-tip > .modetip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* в меню телефона всплывашку может обрезать край панели — там подсказка встаёт строкой под кнопками */
.nav__modes .modetip { position: static; flex-basis: 100%; width: auto; max-width: 100%; box-sizing: border-box; display: none; margin-top: 4px; }
.nav__modes .modetip::after { display: none; }
.nav__modes.is-tip .modetip, .nav__modes:has(:focus-visible) .modetip { display: flex; }
html[data-theme="dark"] .modetip { background: rgba(30,24,48,.92); border-color: rgba(185,166,238,.35); box-shadow: 0 16px 40px -16px rgba(0,0,0,.75); }
@media (prefers-reduced-motion: reduce) { .modetip { transform: none !important; transition: opacity .2s ease, visibility 0s .2s; } }
html[data-theme="dark"] .modepick button.is-on, html[data-theme="dark"] .nav__modes button.is-on, html[data-theme="dark"] .footer__mode button.is-on { background: rgba(185,166,238,.22); border-color: rgba(185,166,238,.55); color: #fff; }
/* «знаю, что мне нужно» — чистый интерфейс: без «?» у терминов и без подсказок */
html[data-mode="pro"] .gl__q,
html[data-mode="pro"] .qz__hint,
html[data-mode="pro"] .qz__foot,
html[data-mode="pro"] .calc__hint,
html[data-mode="pro"] .addcard__hint,
html[data-mode="pro"] .models__ctahint,
html[data-mode="pro"] .opath__head p,
html[data-mode="pro"] .bdg__foot,
html[data-mode="pro"] .terms__foot,
html[data-mode="pro"] [data-novice] { display: none !important; }

/* ---------- 60. «✦ удиви меня» (js/playful.js) ---------- */
.spr { margin: 10px 0 4px; }
.spr__btn {
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font: inherit; font-family: var(--font-head); font-weight: 600; font-size: 14px;
  color: var(--lav-600); background: linear-gradient(120deg, rgba(185,166,238,.2), rgba(143,208,255,.16), rgba(240,169,208,.18));
  border: 1px solid rgba(163,140,220,.45); transition: transform .3s var(--ease-bounce, ease);
}
.spr__btn:hover { transform: translateY(-2px) rotate(-1deg); }
.spr__btn:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; }
.spr__out { max-width: 520px; margin: 10px auto 6px; text-align: left; }
.spr__card {
  padding: 14px 16px; border-radius: 18px; animation: sprIn .35s var(--ease-bounce, ease) both;
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.7); border: 1px solid rgba(163,140,220,.4);
  box-shadow: var(--glass-rim), var(--shadow-sm);
}
@keyframes sprIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.spr__line { margin: 0 0 6px; font-family: var(--font-head); font-size: 16px; font-weight: 600; color: var(--ink); }
.spr__meta { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); }
.spr__meta em { font-style: normal; font-weight: 700; color: var(--lav-600); }
.spr__acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spr__again { padding: 4px 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--lav-600); }
.spr__again:hover { text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="dark"] .spr__card { background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.081); border-color: rgba(185,166,238,.35); }

/* ---------- 61. Дебют-планер (js/playful.js) ---------- */
.debut__card {
  max-width: 760px; margin: 0 auto; padding: 22px 24px; border-radius: var(--radius);
  background: var(--glass-spec), var(--holo), var(--glass-gloss), var(--glass-fill-flat);
  background-size: auto, 260% 260%, auto, auto;
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop);
}
.debut__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.debut__item {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px;
  padding: 6px 10px 6px 6px; border-radius: 16px; background: rgba(255,255,255,.45); border: 1px solid var(--glass-edge);
  transition: background .25s, border-color .25s;
}
.debut__item.is-open { background: rgba(255,255,255,.7); }
.debut__mark {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  font: inherit; font-size: 17px; font-weight: 700; color: var(--ink-dim);
  background: rgba(255,255,255,.7); border: 1.5px solid rgba(163,140,220,.4);
  transition: background .25s, color .25s, transform .3s var(--ease-bounce, ease);
}
.debut__mark:hover { transform: scale(1.08); }
.debut__item.is-have .debut__mark { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--lav-500), #6aa9e6); }
.debut__head {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 4px; border: 0; background: none;
  cursor: pointer; font: inherit; text-align: left; color: var(--ink);
}
.debut__head b { font-family: var(--font-head); font-size: 16px; }
.debut__head small { font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.debut__head i { font-style: normal; font-size: 18px; color: var(--lav-600); transition: transform .25s; }
.debut__item.is-open .debut__head i { transform: rotate(45deg); }
.debut__item.is-have .debut__head small { color: var(--lav-600); }
.debut__mark:focus-visible, .debut__head:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; }
.debut__info { grid-column: 2; padding: 0 4px 10px; font-size: 14px; line-height: 1.5; animation: qzIn .3s ease both; }
.debut__info p { margin: 0 0 6px; color: var(--ink); }
.debut__need { color: var(--ink-soft) !important; }
.debut__link { font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--lav-600); }
.debut__summary { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink); background: linear-gradient(160deg, rgba(185,166,238,.18), rgba(150,196,255,.12)); border: 1px solid rgba(163,140,220,.35); }
html[data-theme="dark"] .debut__item { background: rgba(176,162,248,.057); border-color: rgba(205,196,255,.17); }
html[data-theme="dark"] .debut__item.is-open { background: rgba(176,162,248,.092); }
html[data-theme="dark"] .debut__mark { background: rgba(176,162,248,.092); border-color: rgba(185,166,238,.4); }
html[data-theme="dark"] .debut__item.is-have .debut__mark { background: linear-gradient(135deg, #cdbcf7, #8fd0ff); color: #1b1727; }
html[data-theme="dark"] .debut__summary { background: linear-gradient(160deg, rgba(185,166,238,.14), rgba(143,208,255,.08)); border-color: rgba(185,166,238,.3); }
@media (max-width: 720px) { .debut__card { padding: 16px 12px; } .debut__head small { display: none; } }

/* ---------- 62. Секрет аксолотля: «аксолотлевая» тема ---------- */
/* включается пятью быстрыми нажатиями на помощника (js/helper.js) — розовее и мягче */
html.theme-axolotl {
  --lav-50: #fff7fb; --lav-100: #fdeef6; --lav-200: #f8dcea; --lav-300: #efbdd6;
  --lav-400: #c9679b; --lav-500: #a8487d; --lav-600: #86305f;
}
html[data-theme="dark"].theme-axolotl {
  --lav-50: #22161f; --lav-100: #2b1b27; --lav-200: #3a2433; --lav-300: #6b3b57;
  --lav-400: #f0a6cb; --lav-500: #f6bcd8; --lav-600: #fcd6e8;
}
html.theme-axolotl:not([data-theme="dark"]) body { background-color: #fff5fa; }

/* ---------- 63. Шапка на средних экранах ----------
   Кнопок в шапке стало больше (поиск), поэтому: до 1180 px всё чуть плотнее,
   до 1100 px прячем «Заказать» (есть корзина и блок контактов), а 721–1000 px —
   меню-бургер, как на телефоне (правила ниже повторяют телефонные из @media 720). */
@media (max-width: 1180px) {
  .header__inner { gap: 10px; }
  .nav { gap: 12px; }
  .nav a { font-size: 13.5px; }
  .site-header .wishbtn, .site-header .cartbtn, .site-header .themebtn { width: 36px; height: 36px; margin-left: 0; }
}
@media (max-width: 1100px) { .nav__cta { display: none; } }
@media (min-width: 721px) and (max-width: 1000px) {
  .nav { display: none; position: fixed; top: 64px; right: 16px; left: 16px; flex-direction: column; gap: 8px; background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.30); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); border-radius: 18px; padding: 16px; box-shadow: var(--glass-rim), var(--glass-drop); margin-left: 0; }
  .nav.open { display: flex; animation: navDrop .28s ease; }
  .nav__cta { display: none; }
  .burger { display: flex; }
  html[data-theme="dark"] .nav.open { background: var(--glass-spec), var(--glass-gloss), rgba(24,20,36,.94); border-color: rgba(205,196,255,.17); }
  html[data-theme="dark"] .nav.open a { color: var(--ink); }
  html[data-theme="dark"] .nav.open a.is-active { color: var(--lav-600); }
  .nav { background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.94); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: var(--glass-rim), 0 26px 60px -30px rgba(40,30,70,.6); }
  html[data-theme="dark"] .nav, html[data-theme="dark"] .nav.open { background: var(--glass-spec), var(--glass-gloss), rgba(22,18,34,.97); border-color: rgba(205,196,255,.19); box-shadow: var(--glass-rim), 0 26px 60px -28px rgba(0,0,0,.9); }
  html[data-theme="dark"] .nav a, html[data-theme="dark"] .nav.open a { color: var(--ink); }
  .header__inner { gap: 10px; }
  .logo { flex: none; white-space: nowrap; margin-right: auto; }
  .site-header .themepick, .site-header .langbtn { display: none; }
  .site-header .wishbtn { order: 5; margin-left: 0; }
  .site-header .cartbtn { order: 6; margin-left: 0; }
  .site-header .burger { order: 7; margin-left: 4px; }
  .nav__tools { display: grid; gap: 10px; margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(36,31,46,.08); }
  .nav__lang { justify-self: start; padding: 8px 14px; border-radius: 999px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--lav-600); background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.5); border: 1px solid var(--glass-edge); }
  .nav__themes { display: flex; flex-wrap: wrap; gap: 6px; }
  .nav__themes button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-family: var(--font-head); font-size: 13.5px; color: var(--ink); background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.4); border: 1px solid var(--glass-edge); }
  .nav__themes button i { font-style: normal; color: var(--lav-600); }
  .nav__themes button.is-on { background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(238,232,252,.52)); border-color: rgba(163,140,220,.45); box-shadow: inset 0 0 0 1px rgba(163,140,220,.25); }
  html[data-theme="dark"] .nav__tools { border-top-color: rgba(205,196,255,.17); }
  html[data-theme="dark"] .nav__lang, html[data-theme="dark"] .nav__themes button { background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.081); border-color: rgba(205,196,255,.19); color: var(--ink); }
  html[data-theme="dark"] .nav__themes button.is-on { background: linear-gradient(180deg, rgba(185,166,238,.3), rgba(185,166,238,.16)); border-color: rgba(185,166,238,.5); color: #fff; }
  .nav__modes { display: flex; flex-wrap: wrap; gap: 6px; }
  .nav__modes button { font-size: 13.5px; }
}
@keyframes navDrop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* ---------- 64. Живой декор: пузыри, кристаллы, искры (js/decor.js, js/particles.js) ----------
   Только готовые картинки из assets/decor/. Конфиг — js/decor-config.js.
   .dc-plane--under — под содержимым секции (z-index 1 против 2 у .container),
   .dc-plane--over — над ним, но элементы встают только в свободные места;
   клики проходят насквозь, кроме лопаемых пузырей (.dc--pop).
   Вложенные слои, чтобы transform не спорили между собой:
   .dc — место, появление и прозрачность; .dc__par — параллакс от курсора;
   .dc__push — отстранение, тяга к карточке, толчок от лопания; .dc__wob —
   вздрагивание и лопание (Web Animations); .dc__move — пресет движения;
   .dc__img — «дыхание», размытие и перелив. */
:root {
  /* запасные адреса кристалликов интерфейса; js/decor.js ставит их из конфига */
  --decor-gem: url("../assets/decor/crystals/crystal-04.webp");
  --decor-seal: url("../assets/decor/sparkles/sparkle-02.webp");
}
.dc-plane { position: absolute; inset: 0; pointer-events: none; overflow: hidden; contain: layout paint; }
.dc-plane--under { z-index: 1; }
.dc-plane--over { z-index: 3; }
.dc {
  position: absolute; display: block;
  opacity: 0; transform: translate(-50%, calc(-50% + 12px));
  transition: opacity var(--rd, 900ms) ease var(--rdel, 0ms), transform var(--rd, 900ms) cubic-bezier(.2, .7, .2, 1) var(--rdel, 0ms);
}
.dc-plane.is-in .dc:not(.is-new) { opacity: calc(var(--o, .3) * var(--decor-theme, 1)); transform: translate(-50%, -50%); }
/* пока открыта реплика маскота, декор рядом с ней уступает */
.dc.is-yield { opacity: .08 !important; pointer-events: none !important; }
.dc__par, .dc__push, .dc__wob, .dc__move { display: block; width: 100%; height: 100%; }
.dc__par {
  transform: translate3d(calc(var(--decor-dx, 0) * var(--par, 0) * -1px), calc(var(--decor-dy, 0) * var(--par, 0) * -1px), 0);
  transition: transform 1.3s cubic-bezier(.2, .7, .2, 1);
}
.dc__push { transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform .9s cubic-bezier(.22, .8, .3, 1); }
.dc__wob { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.dc__img {
  display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none;
  animation: dcBreath 12s ease-in-out infinite;
}
.dc__img.has-blur { filter: blur(var(--blur, 0px)); }
.dc__img.is-shimmer { animation: dcBreath 12s ease-in-out infinite, dcShimmer 1.7s ease-in-out 1; }

/* пресеты движения: у каждого элемента свои --amp, --dir, --rot, --rs, длительность и задержка */
.dc__move { will-change: transform; animation: dcFloat 16s ease-in-out infinite; }
.dc__move.dc--drift { animation-name: dcDrift; }
.dc__move.dc--sway { animation-name: dcSway; }
.dc__move.dc--orbit { animation-name: dcOrbit; animation-timing-function: linear; }
.dc__move.dc--crystal { animation-name: dcCrystal; }
.dc-plane:not(.is-live) .dc__move, .dc-plane:not(.is-live) .dc__img { animation-play-state: paused; }

@keyframes dcFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
  50% { transform: translate3d(0, calc(var(--amp, 10px) * -1), 0) rotate(calc(var(--rot, 0deg) + var(--rs, 3deg))); }
}
@keyframes dcDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
  50% { transform: translate3d(calc(var(--amp, 16px) * var(--dir, 1)), calc(var(--amp, 16px) * -.6), 0) rotate(calc(var(--rot, 0deg) + var(--rs, 3deg))); }
}
@keyframes dcSway {
  0%, 100% { transform: translate3d(calc(var(--amp, 10px) * -.5 * var(--dir, 1)), 0, 0) rotate(calc(var(--rot, 0deg) - var(--rs, 3deg) * .5)); }
  50% { transform: translate3d(calc(var(--amp, 10px) * .5 * var(--dir, 1)), -3px, 0) rotate(calc(var(--rot, 0deg) + var(--rs, 3deg) * .5)); }
}
@keyframes dcOrbit {
  0%   { transform: translate3d(var(--amp, 8px), 0, 0) rotate(var(--rot, 0deg)); }
  25%  { transform: translate3d(0, var(--amp, 8px), 0) rotate(calc(var(--rot, 0deg) + var(--rs, 3deg) * .5)); }
  50%  { transform: translate3d(calc(var(--amp, 8px) * -1), 0, 0) rotate(calc(var(--rot, 0deg) + var(--rs, 3deg))); }
  75%  { transform: translate3d(0, calc(var(--amp, 8px) * -1), 0) rotate(calc(var(--rot, 0deg) + var(--rs, 3deg) * .5)); }
  100% { transform: translate3d(var(--amp, 8px), 0, 0) rotate(var(--rot, 0deg)); }
}
/* кристаллы почти неподвижны: пара пикселей и пара градусов */
@keyframes dcCrystal {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
  50% { transform: translate3d(0, calc(var(--amp, 3px) * -1), 0) rotate(calc(var(--rot, 0deg) + var(--rs, 2deg))); }
}
@keyframes dcBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(var(--breath, 1.025)); } }
/* перелив — пастельный сдвиг оттенка, без белой полосы */
@keyframes dcShimmer {
  0%, 100% { filter: blur(var(--blur, 0px)); }
  50% { filter: blur(var(--blur, 0px)) hue-rotate(26deg) saturate(1.22) brightness(1.07); }
}

/* лопаемый пузырь: без игровой подсветки — чуть крупнее, чуть светлее, лёгкий поворот */
.dc--pop { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dc--pop .dc__img { transition: filter .5s ease; }
@media (hover: hover) {
  .dc--pop:hover .dc__wob { transform: scale(1.03) rotate(2deg); }
  .dc--pop:hover .dc__img { filter: drop-shadow(0 0 10px rgba(214, 196, 255, .5)) brightness(1.05) hue-rotate(10deg); }
}
.dc.is-popping { pointer-events: none; }

/* мерцающие искры фоном: фиксированный слой под секциями */
.dc-sky { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; contain: strict; }
.dc-spark { position: absolute; left: 0; top: 0; transform: translate3d(var(--x, -99px), var(--y, -99px), 0) translate(-50%, -50%); }
.dc-spark img { display: block; width: 100%; height: 100%; opacity: 0; }
.dc-spark img.is-on { animation: dcTwinkle 3s ease-in-out 1 both; }
@keyframes dcTwinkle {
  0%   { opacity: 0; transform: scale(.7) rotate(0deg); }
  40%  { opacity: calc(var(--so, .6) * var(--decor-theme, 1)); transform: scale(1.1) rotate(8deg); }
  65%  { opacity: calc(var(--so, .6) * .72 * var(--decor-theme, 1)); transform: scale(1) rotate(12deg); }
  100% { opacity: 0; transform: scale(.8) rotate(18deg); }
}

/* искры, свечение, редкие находки, след за курсором (js/particles.js) */
.lp { position: fixed; inset: 0; z-index: 57; pointer-events: none; overflow: hidden; contain: strict; }
.lp--top { z-index: 63; }
.lp__p, .lp__glow { position: absolute; left: 0; top: 0; display: block; will-change: transform, opacity; user-select: none; }
.lp__glow {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 232, 255, .75), rgba(214, 196, 255, .34) 38%, rgba(190, 222, 255, .12) 60%, rgba(255, 255, 255, 0) 72%);
}

@media (prefers-reduced-motion: reduce) {
  .dc { transition: none; opacity: calc(var(--o, .3) * var(--decor-theme, 1)); transform: translate(-50%, -50%); }
  .dc__par, .dc__push, .dc__wob { transform: none !important; transition: none; }
  .dc__move, .dc__img { animation: none !important; }
  .dc--pop { pointer-events: none; cursor: default; }
}

/* ---------- 65. «Собрать арт» и подбор формата (js/art-builder.js, js/art-config.js) ----------
   Вопросы — те же стеклянные карточки .wiz__choice; сводка справа (на телефоне — под
   вопросами, не липкая); подбор формата — чипы и стеклянная карточка с ответом. */
.artb {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: 22px; align-items: start;
  max-width: 1040px; margin: 0 auto; padding: 26px 28px; border-radius: var(--radius);
  background: var(--glass-spec), var(--holo), var(--glass-gloss), var(--glass-fill-flat);
  background-size: auto, 260% 260%, auto, auto;
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop);
}
.artb__steps { list-style: none; display: flex; gap: 6px; margin: 0 0 20px; padding: 0; }
.artb__steps li { flex: 1; min-width: 0; }
/* подписи у восьми шагов не помещаются — у неактивных только номер */
.artb__steps li.is-active { flex: 3.2; }
.artb__steps li:not(.is-active) .artb__lbl { display: none; }
.artb__stepbtn {
  display: flex; align-items: baseline; gap: 5px; width: 100%; padding: 8px 0 0; border: 0; background: none;
  border-top: 3px solid rgba(163,140,220,.2); cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim);
  opacity: .55; transition: color .3s, border-color .3s, opacity .3s;
}
.artb__stepbtn:disabled { cursor: default; }
.artb__stepbtn:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 3px; }
.artb__lbl { overflow: hidden; text-overflow: ellipsis; }
.artb__steps li.is-done .artb__stepbtn { opacity: 1; color: var(--ink-soft); border-top-color: var(--lav-300); box-shadow: 0 -4px 10px -6px rgba(163,140,220,.8); }
.artb__steps li.is-active .artb__stepbtn { opacity: 1; color: var(--lav-600); border-top-color: var(--lav-600); }
.artb__pane { animation: qzIn .32s cubic-bezier(.2,.7,.3,1) both; }
.artb__q { margin: 0; padding: 0; border: 0; min-width: 0; }
.artb__title { display: block; padding: 0; margin: 0 0 14px; font-family: var(--font-head); font-size: clamp(19px, 2.2vw, 23px); color: var(--ink); outline: none; }
.artb__choices--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.artb .wiz__choice { min-height: 52px; }
.artb .wiz__choice:hover { transform: translateY(-2px); border-color: rgba(163,140,220,.55); }
.artb .wiz__choice.is-on { border-color: rgba(163,140,220,.6); box-shadow: var(--glass-rim), 0 0 0 3px rgba(185,166,238,.18), 0 10px 26px -14px rgba(126,92,190,.55); }
.artb__often {
  justify-self: start; margin-top: 3px; padding: 2px 8px; border-radius: 999px; font-style: normal;
  font-size: 11px; font-weight: 600; color: var(--lav-600); background: rgba(185,166,238,.18); border: 1px solid rgba(185,166,238,.4);
}
.artb__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; }
.artb__link { font-size: 14px; font-weight: 600; color: var(--lav-600); text-decoration: underline; text-decoration-color: rgba(163,140,220,.45); text-underline-offset: 3px; }

/* живая сводка */
.artb__sum {
  position: sticky; top: 96px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.46); border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.artb__sumtitle { margin: 0 0 10px; font-family: var(--font-head); font-size: 18px; color: var(--ink); }
.artb__sumempty { margin: 0; font-size: 13.5px; color: var(--ink-dim); }
.artb__sumlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14px; color: var(--ink); }
.artb__sumlist li { position: relative; padding-left: 16px; }
.artb__sumlist li::before { content: "✦"; position: absolute; left: 0; font-size: 10px; top: 3px; color: var(--lav-500); }
.artb__price { display: grid; gap: 2px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(163,140,220,.45); }
.artb__price span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.artb__price b { font-family: var(--font-head); font-size: 24px; color: var(--ink); }
.artb__note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }

/* итог: маленькое ТЗ */
.artb__lead { margin: -6px 0 14px; color: var(--ink-soft); font-size: 14.5px; }
.artb__brief { display: grid; gap: 6px; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.65); font-size: 14px; }
.artb__brief div { display: flex; gap: 10px; flex-wrap: wrap; }
.artb__brief dt { min-width: 150px; color: var(--ink-dim); }
.artb__brief dd { margin: 0; font-weight: 600; color: var(--ink); }
.artb__actions, .artb__card { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.artb__actions { margin: 16px 0 10px; }

/* подбор формата */
.artf { max-width: 1040px; margin: 26px auto 0; padding: 22px 26px; border-radius: var(--radius); background: rgba(255,255,255,.36); border: 1px solid rgba(255,255,255,.6); }
.artf__title { margin: 0 0 4px; font-family: var(--font-head); font-size: 20px; color: var(--ink); }
.artf__lead { margin: 0 0 14px; font-size: 14px; color: var(--ink-soft); }
.artf__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.artf__chip { position: relative; cursor: pointer; }
.artf__chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.artf__chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; font-size: 14px;
  color: var(--ink-soft); background: rgba(255,255,255,.5); border: 1px solid rgba(163,140,220,.3); transition: background .2s, border-color .2s, color .2s;
}
.artf__chip:hover span { border-color: rgba(163,140,220,.6); }
.artf__chip input:checked + span { background: rgba(255,255,255,.85); border-color: var(--lav-400); color: var(--lav-600); }
.artf__chip input:focus-visible + span { outline: 2px solid var(--lav-400); outline-offset: 2px; }
.artf__out:empty { display: none; }
.artf__card { margin-top: 16px; padding: 16px 18px; border-radius: var(--radius-sm); background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.75); animation: qzIn .3s ease both; }
.artf__name { margin: 0 0 8px; font-family: var(--font-head); font-size: 18px; color: var(--ink); }
.artf__dl { display: grid; gap: 5px; margin: 0 0 10px; font-size: 14px; }
.artf__dl div { display: flex; gap: 10px; flex-wrap: wrap; }
.artf__dl dt { min-width: 110px; color: var(--ink-dim); }
.artf__dl dd { margin: 0; color: var(--ink); font-weight: 600; flex: 1 1 200px; }
.artf__note { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

html[data-theme="dark"] .artb__sum, html[data-theme="dark"] .artb__brief, html[data-theme="dark"] .artf, html[data-theme="dark"] .artf__card { background: rgba(176,162,248,.057); border-color: rgba(205,196,255,.17); }
html[data-theme="dark"] .artf__chip span { background: rgba(176,162,248,.057); border-color: rgba(205,196,255,.21); }
html[data-theme="dark"] .artf__chip input:checked + span { background: rgba(185,166,238,.2); border-color: rgba(185,166,238,.55); color: #fff; }

@media (max-width: 860px) {
  .artb { grid-template-columns: 1fr; padding: 20px 16px; }
  .artb__sum { position: static; }
  .artb__choices--two { grid-template-columns: 1fr; }
  .artb__steps { gap: 3px; }
  .artb__stepbtn { font-size: 9.5px; }
  .artb__steps li:not(.is-active) .artb__lbl { display: none; }
  .artf { padding: 18px 16px; }
  .artb__brief dt { min-width: 0; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .artb__pane, .artf__card { animation: none !important; } }

/* кнопки карточки проекта (js/project-card.js) */
.lpc__btn { white-space: nowrap; }

/* ---------- 66. «На потом» для конкретных дизайнов мерча (js/wishlist.js, js/merch-order.js) ---------- */
.merch-card__acts { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; align-self: center; }
.merch-card__acts .merch-card__add { margin-left: 0; }
.merch-card__wish { margin-left: 0; width: 44px; height: 44px; font-size: 19px; }
.merch-card.is-focus { animation: merchFocus 2.2s ease both; }
@keyframes merchFocus { 0%, 100% { box-shadow: var(--glass-rim), var(--glass-drop); } 25%, 60% { box-shadow: var(--glass-rim), 0 0 0 3px rgba(185,166,238,.5), 0 18px 40px -18px rgba(126,92,190,.6); } }
.wish__open {
  display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
.wish__open:hover b { color: var(--lav-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(163,140,220,.5); }
.wish__open:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .merch-card.is-focus { animation: none; } }

/* ---------- 67. «Рассчитать обучение» и сводка анкеты (js/learn.js, js/lesson-form.js) ----------
   Калькулятор — стеклянная карточка в разделе «Обучение»: слева вопросы (те же
   чипы, что в анкете), справа итог. Сводка анкеты — спокойный блок перед кнопкой. */
.lplan {
  max-width: 1040px; margin: 34px auto 0; padding: 24px 28px; border-radius: var(--radius);
  background: var(--glass-spec), var(--glass-gloss), var(--glass-fill-flat);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop);
}
.lplan__title { margin: 0 0 4px; font-family: var(--font-head); font-size: clamp(20px, 2.3vw, 24px); color: var(--ink); }
.lplan__lead { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-soft); }
.lplan__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(230px, 1fr); gap: 24px; align-items: start; }
.lplan__form { display: grid; gap: 16px; }
.lplan__q .lform__chips .chip span { min-height: 40px; }
.lplan__out {
  display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.72);
}
.lplan__nums { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.lplan__num { display: grid; }
.lplan__num b { font-family: var(--font-head); font-size: 30px; line-height: 1.1; color: var(--lav-600); }
.lplan__num span { font-size: 13px; color: var(--ink-soft); }
.lplan__price { display: grid; gap: 2px; padding-top: 10px; border-top: 1px dashed rgba(163,140,220,.45); }
.lplan__price span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.lplan__price b { font-family: var(--font-head); font-size: 26px; color: var(--ink); }
.lplan__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.lplan__actions, .lplan__card { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.lform__extra { display: grid; gap: 18px; }
.lform__sum {
  padding: 14px 16px; border-radius: 12px; font-size: 14px;
  background: rgba(255,255,255,.45); border: 1px solid rgba(163,140,220,.3);
}
.lform__sumtitle { margin: 0 0 8px; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); }
.lform__sum dl { display: grid; gap: 4px; margin: 0; }
.lform__sum dl div { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.lform__sum dt { min-width: 84px; color: var(--ink-dim); }
.lform__sum dd { margin: 0; flex: 1 1 200px; font-weight: 600; color: var(--ink); }
.modal .lform__sumnote { max-width: none; margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); text-align: left; }

html[data-theme="dark"] .lplan__out, html[data-theme="dark"] .lform__sum { background: rgba(176,162,248,.057); border-color: rgba(205,196,255,.17); }

@media (max-width: 860px) {
  .lplan { padding: 20px 16px; }
  .lplan__grid { grid-template-columns: 1fr; }
}

/* ---------- 68. Поиск: группы, вопросы с ответом на месте, действия (js/search.js) ---------- */
.srch__group {
  padding: 8px 10px 2px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim);
}
.srch__group:first-child { padding-top: 2px; }
button.srch__item { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.srch__item--act { grid-template-columns: auto 1fr auto; }
.srch__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 15px; background: rgba(185,166,238,.14); }
.srch__item--q { grid-template-columns: 1fr auto; }
.srch__item--q i { font-size: 16px; transition: transform .2s; }
.srch__list .is-open > .srch__item--q i, .srch__list [aria-selected="true"].is-open > .srch__item--q i { transform: rotate(45deg); }
.srch__ans { margin: 2px 10px 8px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.5); border: 1px solid rgba(163,140,220,.22); font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.srch__ans p { margin: 0 0 6px; }
.srch__more { font-weight: 600; color: var(--lav-600); text-decoration: underline; text-decoration-color: rgba(163,140,220,.45); text-underline-offset: 3px; }
.srch__empty p { margin: 0 0 8px; }
.srch__ask {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--lav-600);
  background: rgba(255,255,255,.6); border: 1px solid rgba(163,140,220,.4);
}
.srch__ask::before { content: "✦"; font-size: 11px; }
.srch__ask:hover { border-color: var(--lav-400); }
.srch__ask:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; }
html[data-theme="dark"] .srch__ans { background: rgba(176,162,248,.057); border-color: rgba(205,196,255,.17); }
html[data-theme="dark"] .srch__ask { background: rgba(176,162,248,.069); border-color: rgba(205,196,255,.23); color: #e6dcff; }
html[data-theme="dark"] .srch__ico { background: rgba(185,166,238,.18); }
@media (max-width: 720px) {
  .srch__item--act { grid-template-columns: auto 1fr; }
  .srch__item--q { grid-template-columns: 1fr auto; }
  .srch__item--q i { display: block; }
}

/* ---------- 69. Оплата в корзине: предоплата, остаток, «обсудить частями» (js/cart.js) ---------- */
.cart__pay { margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.42); border: 1px solid rgba(163,140,220,.28); font-size: 13.5px; }
.cart__paycap { margin: 0 0 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.cart__pay dl { display: grid; gap: 4px; margin: 0; }
.cart__pay dl div { display: flex; justify-content: space-between; gap: 12px; }
.cart__pay dt { color: var(--ink-soft); }
.cart__pay dd { margin: 0; font-weight: 700; color: var(--ink); white-space: nowrap; }
.cart__pay .is-dep dd { color: var(--lav-600); }
.cart__payparts { margin: 10px 0 0; color: var(--ink-soft); }
.cart__paybtn {
  display: inline-flex; align-items: center; min-height: 32px; padding: 3px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--lav-600); background: rgba(255,255,255,.65); border: 1px solid rgba(163,140,220,.45);
}
.cart__paybtn[aria-pressed="true"] { color: var(--ink-soft); background: transparent; }
.cart__paybtn:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; }
.cart__paynote { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-dim); }
html[data-theme="dark"] .cart__pay { background: rgba(176,162,248,.057); border-color: rgba(205,196,255,.17); }
html[data-theme="dark"] .cart__paybtn { background: rgba(176,162,248,.081); border-color: rgba(205,196,255,.25); color: #e6dcff; }

/* ---------- 70. Кнопки общей карточки проекта рядом с другими действиями ---------- */
.lpc { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lpc[hidden] { display: none; }
.wiz__card { display: flex; margin-top: 12px; }
.wiz__card:empty, .cart__card:empty { display: none; }
.cart__card { display: flex; margin: 10px 0 4px; }

/* ---------- 71. Точки навигации по странице (js/pagedots.js) ----------
   Слева по центру: точка на блок, текущий — вытянутая сияющая капсула.
   Подпись выезжает справа при наведении и фокусе. */
.pdots { position: fixed; left: 14px; top: 50%; z-index: 45; transform: translateY(-50%); }
.pdots ol { list-style: none; margin: 0; padding: 6px 0; display: grid; gap: 2px; }
.pdots__a {
  position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  text-decoration: none; color: var(--ink); outline: none;
}
.pdots__dot {
  display: block; width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.55); border: 1px solid rgba(163,140,220,.55);
  box-shadow: 0 2px 6px -2px rgba(126,92,190,.35);
  transition: height .35s var(--ease-soft, ease), background .3s, border-color .3s, box-shadow .3s, transform .25s;
}
.pdots__a:hover .pdots__dot { transform: scale(1.3); border-color: var(--lav-500); }
.pdots__a[aria-current] .pdots__dot {
  height: 20px; border-color: transparent;
  background: linear-gradient(180deg, #c9b6f5, #e7a6cf 55%, #a9d8f0);
  box-shadow: 0 0 0 3px rgba(185,166,238,.2), 0 0 12px rgba(200,160,235,.65);
}
.pdots__a:focus-visible .pdots__dot { box-shadow: 0 0 0 3px var(--lav-400); }
.pdots__label {
  position: absolute; left: 30px; top: 50%; transform: translate(-6px, -50%); white-space: nowrap; pointer-events: none;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.82);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), 0 8px 20px -10px rgba(90,60,150,.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .2s, transform .2s;
}
.pdots__a:hover .pdots__label, .pdots__a:focus-visible .pdots__label { opacity: 1; transform: translate(0, -50%); }
html[data-theme="dark"] .pdots__dot { background: rgba(176,162,248,.161); border-color: rgba(255,255,255,.32); }
html[data-theme="dark"] .pdots__label { background: var(--glass-spec), var(--glass-gloss), rgba(30,25,45,.92); border-color: rgba(205,196,255,.19); color: #f1ebff; }
/* поля у страницы узкие (меньше ~40px) — точки прижимаются к самому краю,
   чтобы не лезть на карточки; на телефоне ещё и мельче */
@media (max-width: 1239px) {
  .pdots { left: 0; }
  .pdots__a { width: 22px; }
  .pdots__label { left: 24px; }
}
@media (max-width: 720px) {
  .pdots__a { width: 18px; height: 24px; }
  .pdots__dot { width: 6px; height: 6px; }
  .pdots__a[aria-current] .pdots__dot { height: 16px; }
}
@media (hover: none) { .pdots__label { display: none; } }
@media (prefers-reduced-motion: reduce) { .pdots__dot, .pdots__label { transition: none; } }
@media print { .pdots { display: none; } }

/* ---------- 72. Фото к отзывам, листы шоукейсов и их просмотр (js/reviews.js, js/photo.js) ---------- */
.review__pics { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.review__pic {
  width: 64px; height: 64px; padding: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in;
  background: rgba(255,255,255,.4); border: 1px solid var(--glass-edge); box-shadow: 0 6px 14px -8px rgba(90,60,150,.45);
}
.review__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.review__pic:hover img { transform: scale(1.07); }
.review__pic:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; }
.pbox {
  position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content;   /* по центру экрана */
  padding: 0; border: 0; background: transparent; overflow: visible; max-width: min(92vw, 1100px); max-height: 92vh;
}
.pbox::backdrop { background: rgba(30,22,48,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pbox__img { display: block; max-width: min(92vw, 1100px); max-height: 86vh; border-radius: 18px; box-shadow: 0 26px 60px -20px rgba(0,0,0,.65); }
.pbox__close {
  position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.9); border: 1px solid var(--glass-edge);
}
.pbox__close:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; }
html[data-theme="dark"] .review__pic { background: rgba(176,162,248,.069); }
html[data-theme="dark"] .pbox__close { background: rgba(40,33,58,.95); color: #f1ebff; border-color: rgba(205,196,255,.23); }
@media (max-width: 720px) { .pbox__close { top: 8px; right: 8px; } .review__pic { width: 56px; height: 56px; } }
@media (prefers-reduced-motion: reduce) { .review__pic img { transition: none; } }

/* ---------- 73. Шлифовка: блик без резкого края, тёмная тема, список товаров ---------- */
/* Блик по панели проходит при наведении. На высоких панелях (баннер с кастомайзером)
   полоса упиралась в край слоя — снизу получалась резкая вертикальная граница.
   Края слоя растворяются, полоса гаснет плавно. */
.chatpro::after, .pv__screen::after, .bn__body::after {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%);
}

/* «Почти готово: собираю модель…» — на тёмной теме тёмное стекло и светлый текст
   (прежнее правило перебивалось более точным светлым) */
html[data-theme="dark"] .l2d.is-loading .l2d__loading, html[data-theme="dark"] .l2d.is-failed .l2d__loading {
  color: #ece4ff; border-color: rgba(205,196,255,.19);
  background: var(--glass-spec), var(--glass-gloss), rgba(34,29,51,.86);
}
html[data-theme="dark"] .l2d__txt small { color: rgba(236,228,255,.72); }
html[data-theme="dark"] .l2d__bar { background: rgba(176,162,248,.138); }

/* большое фото дизайна рядом с меню — на тёмной теме тоже тёмное стекло */
html[data-theme="dark"] .pick__preview {
  background: var(--glass-spec), var(--glass-gloss), rgba(34,29,51,.95); border-color: rgba(205,196,255,.19);
}
html[data-theme="dark"] .pick__preview img { background: rgba(176,162,248,.057); }
html[data-theme="dark"] .pick__preview b { color: #e6dcff; }

/* полоса прокрутки в меню — тонкая лавандовая вместо системной со стрелками */
.pick__menu { scrollbar-width: thin; scrollbar-color: rgba(163,140,220,.55) transparent; }
.pick__menu::-webkit-scrollbar { width: 8px; }
.pick__menu::-webkit-scrollbar-track { background: transparent; }
.pick__menu::-webkit-scrollbar-thumb { background: rgba(163,140,220,.5); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

/* выбор товара в заказе мерча — то же меню, что у дизайнов, только списком */
.pick--type { min-width: 0; }
.pick--type .pick__btn { width: 100%; min-width: 0; padding-right: 12px; }
.pick--type .pick__btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pick--type .pick__btn em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--lav-600); white-space: nowrap; }
.pick__menu--list { grid-template-columns: 1fr; width: min(380px, 88vw); gap: 2px; padding: 6px; }
.pick__menu--list li {
  grid-template-columns: 40px minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: 12px;
  padding: 6px 12px 6px 6px; text-align: left;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink);
}
.pick__menu--list img { width: 40px; height: 40px; border-radius: 8px; }
.pick__menu--list em { font-style: normal; font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: var(--lav-600); white-space: nowrap; }
.pick__menu--list li:focus-visible { box-shadow: inset 0 0 0 2px var(--lav-400); }
html[data-theme="dark"] .pick__menu--list li { color: #ece4ff; }
html[data-theme="dark"] .pick--type .pick__btn em, html[data-theme="dark"] .pick__menu--list em { color: #d8c8ff; }
@media (max-width: 560px) {
  .pick__menu.pick__menu--list { grid-template-columns: 1fr; }
  .pick__menu--list img { width: 40px; height: 40px; }
}
/* меню выбора лежит поверх текста — плотнее и с размытием, чтобы под ним ничего не читалось */
.pick__menu {
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-theme="dark"] .pick__menu { background: var(--glass-spec), var(--glass-gloss), rgba(28,23,42,.94); }
/* строка заказа мерча: товар — во всю ширину, под ним дизайн, количество и «убрать» */
@media (min-width: 721px) {
  .order__line { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 10px; }
  .order__line > .pick--type { grid-column: 1 / -1; }
  .order__line > .pick:not(.pick--type) { min-width: 0; }
}

/* ---------- 74. Примеры рига и допов в движении (js/rigex.js) ----------
   Ролики без звука начинают играть, когда доезжают до экрана; клик ставит паузу. */
.rigex { max-width: 980px; margin: 36px auto 0; text-align: center; }
.rigex--addons { margin-top: 28px; }
.rigex__title { font-size: 22px; margin-bottom: 6px; }
.rigex__lead { color: var(--ink-soft); font-size: 15px; margin-bottom: 18px; }
.rigex__part + .rigex__part { margin-top: 22px; }
.rigex__name {
  margin-bottom: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-dim);
}
.rigex__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rigex__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rigex__item { display: grid; gap: 8px; margin: 0; }
.rigex__v {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; cursor: pointer;
  border-radius: var(--radius-sm); background: var(--lav-50);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop-sm);
  transition: opacity .25s;
}
.rigex__item figcaption { display: grid; gap: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.rigex__item figcaption b { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: var(--ink); }
.rigex__item.is-paused .rigex__v { opacity: .72; }
html[data-theme="dark"] .rigex__v { background: rgba(176,162,248,.069); border-color: rgba(205,196,255,.17); }
@media (max-width: 720px) {
  .rigex__grid, .rigex__grid--three { grid-template-columns: 1fr; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .rigex__v { cursor: default; } }

/* ---------- 75. Примеры работ по категориям на странице артов ---------- */
.artgal { margin-top: 26px; }
.artgal + .artgal { margin-top: 34px; }
.artgal__name {
  margin-bottom: 12px; text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim);
}
.artgal__hint { margin: -6px 0 14px; text-align: center; font-size: 13.5px; color: var(--ink-soft); }
/* несколько рядов: боковые кадры не растворяем, иначе «съедает» углы сетки */
.gallery--rows .zoomframe:first-child img, .gallery--rows .zoomframe:last-child img,
.gallery--sheets .zoomframe:first-child img, .gallery--sheets .zoomframe:last-child img {
  -webkit-mask-image: none; mask-image: none;
}
.gallery--sheets { grid-template-columns: repeat(3, 1fr); }
/* лист виден целиком, без обрезки: это разбор образа, а не кадр */
.gallery--sheets .zoomframe { padding: 0; border: 0; background: rgba(255,255,255,.55); cursor: zoom-in; }
.gallery--sheets .zoomframe img { aspect-ratio: 3 / 4; object-fit: contain; background: rgba(255,255,255,.6); }
html[data-theme="dark"] .gallery--sheets .zoomframe, html[data-theme="dark"] .gallery--sheets .zoomframe img { background: rgba(176,162,248,.069); }
.gallery--sheets .zoomframe:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 3px; }
@media (max-width: 720px) { .gallery--sheets { grid-template-columns: 1fr; } }

/* ---------- 76. Правила работы и оплаты (вкладка «Вопросы», #rules) ----------
   Карточки главных условий, акцент «14 дней», вопросы по группам — общий .accordion.
   .acc__body — ответ из нескольких абзацев и списков; годится для любого аккордеона. */
.rules__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1000px; margin: 0 auto; }
.rules__card {
  position: relative; display: grid; align-content: start; gap: 4px; padding: 20px 18px 18px; border-radius: var(--radius);
  background: var(--glass-spec), var(--glass-gloss), var(--glass-fill-flat);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.rules__card:hover { transform: translateY(-3px); box-shadow: var(--glass-rim), var(--glass-drop); }
.rules__label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.rules__num {
  font-family: var(--font-head); font-weight: 600; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.05;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rules__hint {
  justify-self: start; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--lav-600);
  background: rgba(185,166,238,.16); border: 1px solid rgba(185,166,238,.4);
}
.rules__card p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.rules__card--rig::after {
  content: "✦"; position: absolute; top: 14px; right: 16px; font-size: 13px; color: var(--lav-400); opacity: .8;
}
.rules__note { max-width: 720px; margin: 16px auto 0; text-align: center; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

.rules__groups { display: grid; gap: 36px; max-width: 780px; margin: 38px auto 0; }
.rules__gname {
  margin: 0 0 14px; text-align: center; font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim);
}

/* акцент: 14 дней на техническую проверку рига */
.rules__support {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; margin: 0 0 16px;
  padding: 22px 24px; border-radius: var(--radius);
  background: var(--glass-spec), var(--holo), var(--glass-gloss), var(--glass-fill-flat);
  background-size: auto, 260% 260%, auto, auto;
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop);
}
.rules__supnum { display: grid; justify-items: center; min-width: 92px; margin: 0; }
.rules__supnum b {
  font-family: var(--font-head); font-weight: 600; font-size: 68px; line-height: .9;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rules__supnum span { margin-top: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--lav-600); }
.rules__suptext h4 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; }
.rules__suptext p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.rules__suptext p:last-child { margin-bottom: 0; }

/* ответ из нескольких абзацев и списков */
.acc__body { padding: 0 0 20px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.accordion .acc__body p { padding: 0; margin: 0 0 10px; }
.acc__body > :last-child { margin-bottom: 0; }
.acc__body ul { display: grid; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; }
.acc__body li { position: relative; padding-left: 20px; }
.acc__body li::before { content: "✦"; position: absolute; left: 2px; top: .15em; font-size: 10px; color: var(--lav-400); }

/* пример оплаты: суммы и маленькая дорожка 25% → 50% → 100% */
.payex { display: grid; margin: 4px 0 16px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(163,140,220,.28); }
.payex div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 9px 14px; background: rgba(255,255,255,.42); }
.payex dt { flex: 1 1 180px; }
.payex div + div { border-top: 1px solid rgba(163,140,220,.18); }
.payex dt { color: var(--ink-soft); }
.payex dd { margin: 0; font-weight: 700; color: var(--ink); white-space: nowrap; }
.payex .is-mid { background: rgba(185,166,238,.14); }
.payex .is-total dd { color: var(--lav-600); }
.paysteps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.paysteps::before {
  content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 16px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--lav-300), var(--lav-500));
}
.paysteps li { position: relative; display: grid; justify-items: center; gap: 5px; text-align: center; }
.paysteps b {
  display: grid; place-items: center; min-width: 54px; height: 32px; padding: 0 10px; border-radius: 999px;
  font-family: var(--font-head); font-size: 14px; color: var(--lav-600);
  background: #fff; border: 1px solid rgba(163,140,220,.45); box-shadow: 0 4px 10px -6px rgba(126,92,190,.5);
}
.paysteps li:last-child b { color: #fff; border-color: transparent; background: linear-gradient(120deg, var(--lav-500), var(--lav-400)); }
.paysteps span { font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); }

/* мягкое появление ответа во всех аккордеонах сайта */
@media (prefers-reduced-motion: no-preference) {
  .accordion details[open] > :not(summary) { animation: accIn .28s ease both; }
}
@keyframes accIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

html[data-theme="dark"] .payex div { background: rgba(176,162,248,.046); }
html[data-theme="dark"] .payex, html[data-theme="dark"] .payex div + div { border-color: rgba(205,196,255,.15); }
html[data-theme="dark"] .payex .is-mid { background: rgba(185,166,238,.12); }
html[data-theme="dark"] .paysteps b { background: rgba(40,33,58,.95); color: #e6dcff; border-color: rgba(205,196,255,.23); }
html[data-theme="dark"] .paysteps li:last-child b { color: #fff; border-color: transparent; background: linear-gradient(120deg, var(--lav-500), var(--lav-400)); }
html[data-theme="dark"] .rules__hint { color: #e6dcff; background: rgba(185,166,238,.14); }
html[data-theme="dark"] .rules__supnum span { color: #d8c8ff; }

@media (max-width: 900px) { .rules__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .accordion summary { min-height: 52px; font-size: 16px; }
  .rules__support { grid-template-columns: 1fr; gap: 10px; padding: 20px 18px; text-align: center; }
  .rules__supnum { grid-auto-flow: column; align-items: baseline; justify-content: center; gap: 8px; }
  .rules__supnum b { font-size: 56px; }
  .rules__suptext { text-align: left; }
  .rules__suptext h4 { text-align: center; }
}
@media (max-width: 380px) {
  .rules__cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .rules__card { transition: none; } .rules__card:hover { transform: none; } }

/* ---------- 77. /live2d: «Что я получу в финале» ---------- */
.deliver { max-width: 860px; margin: 34px auto 0; text-align: center; }
.deliver__title { margin-bottom: 14px; font-size: 22px; }
.deliver__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.deliver__list li {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 16px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  background: var(--glass-spec), var(--glass-gloss), var(--glass-fill-flat);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop-sm);
}
.deliver__list li::before { content: "✦"; font-size: 10px; color: var(--lav-400); }
.deliver__note { margin: 14px auto 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.deliver__note a { font-weight: 600; color: var(--lav-600); white-space: nowrap; }
html[data-theme="dark"] .deliver__note a { color: #d8c8ff; }

/* ---------- 78. Кастомайзеры на /widgets: запуск при подъезде к экрану или по кнопке ---------- */
.custom-embed__start {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  min-height: 48px; padding: 12px 22px; border-radius: 999px; cursor: pointer;
  font: inherit; font-family: var(--font-head); font-weight: 600; font-size: 15px; color: #fff;
  background: linear-gradient(120deg, var(--lav-500), var(--lav-400));
  border: 1px solid rgba(255,255,255,.3); box-shadow: 0 12px 30px -12px rgba(126,92,190,.7);
}
.custom-embed__start:hover { filter: brightness(1.06); }
.custom-embed__start:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.custom-embed__wait {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: none;
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.8);
}
.custom-embed__frame.is-loading .custom-embed__start,
.custom-embed__frame.is-ready .custom-embed__start,
.custom-embed__frame.is-ready .custom-embed__wait { display: none; }
.custom-embed__frame.is-loading .custom-embed__wait { display: block; }

/* ---------- 79. Английские страницы: заказ рига, модель под ключ, статьи /en/guides ----------
   Секции с data-lang-only="en" сервер оставляет только на английской версии (server.js,
   stripLangOnly). Правило ниже прячет их, если сайт открыт без сервера (файлом с диска). */
html:not([data-lang="en"]) [data-lang-only="en"], html[data-lang="en"] [data-lang-only="ru"] { display: none !important; }

/* строка ссылок под вступлением раздела */
.lead-links { margin: 12px auto 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.lead-links a, .land a:not(.btn):not(.guide-card):not(.land__fig), .prose a {
  color: var(--lav-600); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(142,105,212,.35);
  text-underline-offset: 3px; transition: text-decoration-color .2s;
}
.lead-links a:hover, .land a:not(.btn):not(.guide-card):not(.land__fig):hover, .prose a:hover { text-decoration-color: currentColor; }
html[data-theme="dark"] .lead-links a, html[data-theme="dark"] .land a:not(.btn):not(.guide-card):not(.land__fig),
html[data-theme="dark"] .prose a { color: #d8c8ff; }

.land__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.land__block { max-width: 920px; margin: 0 auto 56px; }
.land__block > p, .land__final > p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 14px; }
.land__h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 16px; text-align: center; }
.land__block > .land__h2 { text-align: left; }
.land__note { font-size: 14px !important; margin-top: 14px !important; }
.land__more { font-size: 15px !important; }

/* две карточки рядом: Base / Advanced, арт / риг */
.land__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 6px 0 18px; }
.land__card, .land__steps li, .guide-card {
  position: relative; padding: 20px 20px 18px; border-radius: var(--radius);
  background: var(--glass-spec), var(--glass-gloss), var(--glass-fill-flat);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop-sm);
}
.land__card h3 { font-size: 20px; margin: 0 0 4px; }
.land__card p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.land__card .checks { margin-top: 12px; }
.land__card--pro h3 { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* список «что прислать» */
.land__list { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.land__list li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.land__list li::before { content: '✦'; position: absolute; left: 4px; top: 1px; font-size: 12px; color: var(--lav-400); }
.land__list b { color: var(--ink); }

/* шаги работы */
.land__steps { counter-reset: lp; list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.land__steps li { counter-increment: lp; display: grid; gap: 4px; padding-left: 64px; }
.land__steps li::before {
  content: counter(lp); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, var(--lav-500), var(--lav-400));
}
.land__steps b { font-family: var(--font-head); font-size: 17px; color: var(--ink); }
.land__steps span { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* картинки-примеры: кадры рига, листы-шоукейсы */
.land__figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 8px 0 14px; }
.land__fig {
  display: block; padding: 0; border: 0; font: inherit; text-align: left; cursor: pointer; background: none;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .3s, transform .3s;
}
.land__fig:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.land__fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.land__figs--sheets .land__fig img { aspect-ratio: 3 / 4; object-fit: contain; background: rgba(255,255,255,.6); }
html[data-theme="dark"] .land__figs--sheets .land__fig img { background: rgba(176,162,248,.069); }
.land__fig span { display: block; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--ink-soft); background: var(--glass-fill-flat); }
.land__fig:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 3px; }

/* финальный призыв */
.land__final { max-width: 760px; margin: 0 auto; text-align: center; }
.land__final .land__cta { margin: 18px 0 16px; }
.land__links { font-size: 14px !important; }

/* таблица цен внутри статьи — без кнопок */
.ptable--plain td { vertical-align: middle; }

/* список статей */
.guides__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 auto 56px; max-width: 1060px; }
.guide-card { display: grid; align-content: start; gap: 10px; color: inherit; transition: transform .3s, box-shadow .3s; }
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--glass-rim), var(--glass-drop); }
.guide-card h2 { font-size: 20px; line-height: 1.25; margin: 0; }
.guide-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.guide-card__tag { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--lav-600);
  background: rgba(185,166,238,.16); border: 1px solid rgba(185,166,238,.4); }
.guide-card__go { font-weight: 700; font-size: 14px; color: var(--lav-600); }
html[data-theme="dark"] .guide-card__tag, html[data-theme="dark"] .guide-card__go { color: #d8c8ff; }

/* статья */
.guide__back { display: inline-block; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.guide__back:hover { color: var(--lav-600); }
.guide__meta { margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
.prose { max-width: 72ch; margin: 0 auto 56px; font-size: 17px; line-height: 1.7; color: var(--ink); }
.prose h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 14px; }
.prose ul:not(.checks), .prose ol { margin: 0 0 16px; padding-left: 1.3em; }
.prose ul:not(.checks) li, .prose ol li { margin: 6px 0; }
.prose ul:not(.checks) li::marker { color: var(--lav-400); }
.prose .table-wrap { margin: 8px 0 16px; }

.footer__guides a { font-size: 14px; }

@media (max-width: 760px) {
  .land__cols, .land__figs, .guides__grid { grid-template-columns: 1fr; }
  .land__block { margin-bottom: 44px; }
  .land__steps li { padding-left: 58px; }
  .prose { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-card, .land__fig { transition: none; }
  .guide-card:hover, .land__fig:hover { transform: none; }
}

/* подписи к шоукейсам в портфолио (/art): название, тип работы, кто что делал, что на листе */
.gallery--sheets .artgal__fig { margin: 0; display: grid; gap: 10px; align-content: start; }
.artgal__cap { display: grid; gap: 3px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.artgal__cap b { font-family: var(--font-head); font-size: 16px; color: var(--ink); }
.artgal__cap span { font-weight: 700; font-size: 13px; color: var(--lav-600); }
html[data-theme="dark"] .artgal__cap span { color: #d8c8ff; }

/* ---------- 80. Плашка про cookies (#cookieBar, логика — js/metrika.js) ----------
   Над нижней капсулой разделов, под корзиной и окнами (у них z-index 58+) */
.cookiebar {
  position: fixed; left: 50%; bottom: 78px; z-index: 55; width: min(460px, calc(100vw - 24px));
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 16px;
  padding: 12px 12px 12px 20px; border-radius: var(--radius);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.9);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--shadow-lg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  opacity: 0; transform: translate(-50%, 12px); transition: opacity .3s, transform .3s var(--ease-soft);
}
.cookiebar.is-on { opacity: 1; transform: translate(-50%, 0); }
.cookiebar__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.cookiebar__btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cookiebar__btns .btn { min-height: 40px; }
html[data-theme="dark"] .cookiebar { background: var(--glass-spec), var(--glass-gloss), rgba(30, 25, 46, .92); }
@media (max-width: 560px) {
  .cookiebar { bottom: 70px; padding: 10px 10px 10px 16px; }
}
@media (max-width: 340px) {
  .cookiebar { grid-template-columns: 1fr; }
  .cookiebar__btns .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .cookiebar { transition: none; } }

/* ---------- 81. Корзина: «Когда с тобой связаться?» (#cartReach) и «Когда хочешь начать работу?» (#cartStart) ----------
   Два отдельных стеклянных блока формы, логика — js/schedule.js. Варианты — настоящие радиокнопки
   (input type="radio"); выбранный отмечен точкой, рамкой и жирным текстом, а не только цветом */
.sched {
  min-width: 0; margin: 4px 0 2px; padding: 14px 14px 12px; border-radius: 14px;
  border: 1px solid rgba(163,140,220,.32);
  background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.42);
  box-shadow: var(--glass-rim), var(--glass-drop-sm);
  transition: border-color .25s, box-shadow .25s;
}
.sched > * + * { margin-top: 10px; }
.sched__title {
  float: left; width: 100%; padding: 0; margin: 0 0 4px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink);
}
.sched__title + * { clear: both; margin-top: 0; }
.sched__sub { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.sched__opts { display: grid; gap: 6px; }
.sched__opts--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sched__opt--wide { grid-column: 1 / -1; }
.sched__opt > span { display: grid; gap: 1px; line-height: 1.25; min-width: 0; }
.sched__opt small { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); letter-spacing: .01em; }
.sched__hint { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.sched + .sched { margin-top: 2px; }
.cart__form .sched__opt {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px;
  border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink);
  background: rgba(255,255,255,.5); border: 1px solid rgba(163,140,220,.28);
  transition: border-color .2s, background .2s, transform .2s var(--ease-soft), box-shadow .2s;
}
.cart__form .sched__opt:hover { border-color: rgba(163,140,220,.6); transform: translateY(-1px); }
.cart__form .sched__opt.is-on {
  font-weight: 800; border-color: var(--lav-400);
  background: linear-gradient(120deg, rgba(185,166,238,.22), rgba(159,184,240,.16)), rgba(255,255,255,.6);
  box-shadow: 0 6px 18px -12px rgba(126,92,190,.6);
}
.sched__opt input {
  -webkit-appearance: none; appearance: none; flex: none; display: grid; place-items: center;
  width: 18px; height: 18px; margin: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--lav-300); background: #fff; transition: border-color .2s;
}
.sched__opt input::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lav-500);
  transform: scale(0); transition: transform .2s var(--ease-soft);
}
.sched__opt input:checked { border-color: var(--lav-500); }
.sched__opt input:checked::before { transform: scale(1); }
.sched__opt input:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 3px; }
.sched [hidden] { display: none !important; }
/* стрелка у списков: свой значок вместо системного, сам список — обычный select */
.cart__form .sched select.prep__field {
  -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238e69d4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 12px 8px;
}
.sched input[type="date"], .sched input[type="time"] { min-height: 42px; cursor: pointer; }
.sched input[type="date"]::-webkit-calendar-picker-indicator,
.sched input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; transition: opacity .2s; }
.sched input[type="date"]::-webkit-calendar-picker-indicator:hover,
.sched input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.sched .prep__field[aria-invalid="true"] { border-color: rgba(210,74,106,.65); }
.sched__tz { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.sched__tz b { color: var(--ink); font-weight: 700; }
.cart__form .sched__check {
  display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.sched__check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--lav-500); cursor: pointer; }
.sched__error { font-size: 13px; font-weight: 700; color: #d24a6a; }
.sched.is-error { border-color: rgba(210,74,106,.55); box-shadow: var(--glass-rim), 0 0 0 3px rgba(210,74,106,.12); }
.sched__note, .info-note {
  padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft);
  background: rgba(185,166,238,.12); border: 1px solid rgba(185,166,238,.25);
}
.sched__note a, .info-note a { color: var(--lav-600); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
html[data-theme="dark"] .sched { background: var(--glass-spec), var(--glass-gloss), rgba(176,162,248,.057); border-color: rgba(185,166,238,.24); }
html[data-theme="dark"] .cart__form .sched__opt { background: rgba(176,162,248,.057); border-color: rgba(205,196,255,.19); }
html[data-theme="dark"] .cart__form .sched__opt.is-on { background: linear-gradient(120deg, rgba(185,166,238,.24), rgba(159,184,240,.14)), rgba(176,162,248,.069); border-color: rgba(185,166,238,.7); }
html[data-theme="dark"] .sched__opt input { background: rgba(176,162,248,.092); border-color: rgba(185,166,238,.55); }
html[data-theme="dark"] .sched__opt input::before { background: #d8c8ff; }
html[data-theme="dark"] .sched__opt input:checked { border-color: #d8c8ff; }
html[data-theme="dark"] .sched__note, html[data-theme="dark"] .info-note { background: rgba(185,166,238,.08); border-color: rgba(185,166,238,.18); }
html[data-theme="dark"] .sched__note a, html[data-theme="dark"] .info-note a { color: #d8c8ff; }
html[data-theme="dark"] .sched__error { color: #ff8fa8; }
@media (max-width: 340px) { .sched__opts--two { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .cart__form .sched__opt, .sched__opt input::before { transition: none; }
  .cart__form .sched__opt:hover { transform: none; }
}

/* ---------- 82. Очередь LyssBoard на главной (#lyssboard, логика — js/lyssboard.js) ---------- */
.lboard__card {
  max-width: 860px; margin: 0 auto; padding: 18px 20px 20px; border-radius: var(--radius);
  background: var(--glass-spec), var(--holo), var(--glass-gloss), var(--glass-fill-flat);
  background-size: auto, 260% 260%, auto, auto;
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop);
}
.lboard__updated { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); }
.lboard__updated::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: #5fcf97; box-shadow: 0 0 0 4px rgba(95,207,151,.18);
}
.lboard__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lqcard {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  min-height: 58px; padding: 10px 12px; border-radius: 16px;
  background: rgba(255,255,255,.5); border: 1px solid var(--glass-edge);
}
.lqcard__pos { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--lav-600); min-width: 2.4em; }
.lqcard__main { display: grid; gap: 2px; min-width: 0; }
.lqcard__name {
  font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lqcard__type, .lqcard__start { font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; }
.lqcard__start { color: var(--lav-600); }
.lqcard__status {
  display: inline-flex; align-items: center; gap: 6px; max-width: 13em; padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink);
  background: rgba(255,255,255,.7); border: 1px solid var(--glass-edge);
}
.lqcard__status i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--lav-500)); }
.lboard__state { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); text-align: center; }
.lboard__card.is-error .lboard__state { color: var(--ink); }
.lboard__actions { display: flex; justify-content: flex-end; margin-top: 14px; }
/* пока очередь грузится — три пустые карточки */
.lqcard--skel i, .lqcard--skel span {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(185,166,238,.16), rgba(185,166,238,.36), rgba(185,166,238,.16));
  background-size: 200% 100%; animation: lqSkel 1.4s ease-in-out infinite;
}
.lqcard--skel i { width: 2.4em; }
.lqcard--skel span { grid-column: 2 / 4; width: 70%; }
@keyframes lqSkel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
html[data-theme="dark"] .lqcard { background: rgba(176,162,248,.057); border-color: rgba(205,196,255,.17); }
html[data-theme="dark"] .lqcard__status { background: rgba(176,162,248,.092); border-color: rgba(205,196,255,.19); }
html[data-theme="dark"] .lqcard__pos, html[data-theme="dark"] .lqcard__start { color: #cdbcf7; }
@media (max-width: 720px) {
  .lboard__card { padding: 14px 12px 16px; }
  .lboard__list { grid-template-columns: 1fr; }
  .lqcard { grid-template-columns: auto minmax(0, 1fr); }
  .lqcard__status { grid-column: 2; justify-self: start; max-width: 100%; }
  .lboard__actions { justify-content: stretch; }
  .lboard__open { flex: 1; justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .lqcard--skel i, .lqcard--skel span { animation: none; } }
/* маленькая строка «✦ Отслеживание заказа через LyssBoard» в шапке крупных услуг */
.lb-note { margin: 14px 0 0; }
.lb-note a {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--lav-600); text-decoration: none;
  background: rgba(185,166,238,.14); border: 1px solid rgba(185,166,238,.32); transition: background .2s;
}
.lb-note a:hover { background: rgba(185,166,238,.26); }
.lb-note a:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 2px; }
html[data-theme="dark"] .lb-note a { color: #d8c8ff; background: rgba(185,166,238,.1); border-color: rgba(185,166,238,.26); }

/* ---------- 83. Корзина после отправки: «✓ Заявка отправлена» и «Что дальше?» (#cartDone) ---------- */
.cart__done .done__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.done__check {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6fd3a2, #3fb37f); box-shadow: 0 6px 16px rgba(63,179,127,.32);
}
.cart__done .done__id { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; }
.nextsteps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; }
.nextsteps li { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding-bottom: 12px; }
.nextsteps li:last-child { padding-bottom: 0; }
/* линия между шагами — снизу от номера до следующего */
.nextsteps li:not(:last-child)::before {
  content: ''; position: absolute; left: 18px; top: 30px; bottom: 2px; width: 2px; border-radius: 2px;
  background: linear-gradient(rgba(163,140,220,.45), rgba(163,140,220,.12));
}
.nextsteps__n {
  display: grid; place-items: center; height: 28px; border-radius: 9px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--lav-600);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(238,232,252,.7));
  box-shadow: inset 0 0 0 1px rgba(163,140,220,.3);
}
.nextsteps b { display: block; padding-top: 3px; font-family: var(--font-head); font-weight: 500; font-size: 14.5px; color: var(--ink); }
.cart__done .nextsteps span:not(.nextsteps__n) { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.nextsteps__lb .nextsteps__n { color: #fff; background: linear-gradient(135deg, var(--lav-500), #6aa9e6); box-shadow: none; }
.done__ctx {
  margin: 0 0 14px; padding: 10px 12px; display: grid; gap: 10px; border-radius: 14px;
  background: rgba(185,166,238,.12); border: 1px solid rgba(185,166,238,.25);
}
.done__ctx dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.done__ctx dd { margin: 0; }
.done__ctx .done__val { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.done__ctx .done__hint { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
html[data-theme="dark"] .nextsteps__n {
  color: #fff; background: linear-gradient(180deg, rgba(185,166,238,.34), rgba(185,166,238,.16));
  box-shadow: inset 0 0 0 1px rgba(185,166,238,.4);
}
html[data-theme="dark"] .nextsteps__lb .nextsteps__n { background: linear-gradient(135deg, #9b7fe6, #5c9ad8); box-shadow: none; }
html[data-theme="dark"] .done__ctx { background: rgba(185,166,238,.08); border-color: rgba(185,166,238,.18); }

/* ---------- 84. Корзина: загрузка по месяцам из LyssBoard (#startAvail, js/schedule.js) ---------- */
.sched__avail {
  display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-soft);
  background: rgba(106,169,230,.1); border: 1px solid rgba(106,169,230,.28);
}
.sched__avail:empty { display: none; }
.sched__avail-next { font-weight: 700; color: var(--ink); }
html[data-theme="dark"] .sched__avail { background: rgba(143,208,255,.07); border-color: rgba(143,208,255,.2); }

/* ---------- 85. Заметка «ⓘ …» у цены (.info-note): вид — как у пояснения про бронь в корзине (раздел 81) ----------
   Сейчас: арт модели — по готовому дизайну, концепт — отдельно (/live2d, /vtuber-model) */
.info-note { max-width: 760px; margin: 14px auto 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.land__block .info-note { max-width: none; }
/* на /live2d под заметкой тарифы: карточка Advanced приподнята и наклонена — оставляем ей место */
#models .info-note { margin-bottom: 44px; }

/* ---------- 86. LYSS Academy: /academy, промоблок на главной, блок на /live2d ----------
   Карточки — те же стеклянные .land__card, что на посадочных страницах (раздел 79), вопросы —
   общий .accordion (раздел 76), статус курса — общая плашка .status. Своё здесь — сетки,
   цепочка тем «PSD → … → VTube Studio», схема «Понять → … → Проверить» и уровни подписки.
   Ссылки, статус и уровни — js/academy-config.js, логика — js/academy.js */

/* статус курса: та же плашка, что «Заказы открыты», но не ссылка */
.acad-status { margin: 0; max-width: 100%; line-height: 1.6; text-align: left; cursor: default; }
.acad-status:hover { transform: none; }
.acad-status i { flex: none; }
.section__head .acad-status { margin-top: 18px; }
.acad__intro { max-width: 62ch; margin: 14px auto 0; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }

/* значок-эмодзи в стеклянном кружке */
.acad__ico {
  flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  font-size: 20px; line-height: 1;
  background: var(--glass-spec), var(--glass-gloss), var(--glass-fill-flat);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim);
}

/* «Что уже есть» */
.acad__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 6px 0 14px; }
.acad-card { display: grid; align-content: start; gap: 8px; }
.acad-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 19px; }
.acad-card p { margin: 0; }
.acad__tag {
  padding: 2px 9px; border-radius: 999px; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--lav-600);
  background: rgba(185,166,238,.16); border: 1px solid rgba(185,166,238,.4);
}
html[data-theme="dark"] .acad__tag { color: #d8c8ff; }

/* цепочка тем: PSD → ArtMesh → … → VTube Studio */
.acad-chain { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 0; margin: 18px 0; padding: 0; list-style: none; }
.acad-chain li { display: inline-flex; align-items: center; }
.acad-chain li span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 13px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap;
  background: var(--glass-spec), var(--glass-gloss), var(--glass-fill-flat);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop-sm);
}
.acad-chain li:not(:last-child)::after { content: "→"; margin: 0 6px; font-size: 14px; color: var(--lav-400); }
.acad-chain li:last-child span { background: var(--glass-spec), var(--holo), var(--glass-gloss), var(--glass-fill-flat); background-size: auto, 260% 260%, auto, auto; }

/* программа: номер модуля в заголовке аккордеона */
.acad-mods summary { justify-content: flex-start; }
.acad-mods summary .acc__i { margin-left: auto; }
.acad-mod__n { flex: none; min-width: 2.2em; font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: .12em; color: var(--lav-400); }

/* «Понять → Посмотреть → Повторить → Проверить» */
.acad-flow { counter-reset: af; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 6px 0 14px; padding: 0; list-style: none; }
.acad-flow li {
  counter-increment: af; position: relative; display: grid; align-content: start; gap: 6px; padding: 18px 18px 16px;
  border-radius: var(--radius); background: var(--glass-spec), var(--glass-gloss), var(--glass-fill-flat);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop-sm);
}
.acad-flow li::before {
  content: counter(af); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, var(--lav-500), var(--lav-400));
}
.acad-flow li:not(:last-child)::after {
  content: "→"; position: absolute; top: 50%; right: -17px; transform: translateY(-50%);
  font-size: 15px; color: var(--lav-400);
}
.acad-flow b { font-family: var(--font-head); font-size: 18px; color: var(--ink); }
.acad-flow span { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* уровни подписки: число колонок — по числу карточек (ставит js/academy.js) */
.acad-tiers { display: grid; grid-template-columns: repeat(var(--acad-tiers, 3), minmax(0, 1fr)); gap: 16px; margin: 6px 0 14px; }
.acad-tier { display: flex; flex-direction: column; gap: 10px; }
.acad-tier__head { display: flex; align-items: center; gap: 10px; }
.acad-tier__head h3 { margin: 0; font-size: 19px; line-height: 1.25; }
.acad-tier__price { margin: 0 !important; font-size: 14px !important; color: var(--ink-soft); }
.acad-tier__price b { font-family: var(--font-head); font-size: 24px; font-weight: 600; color: var(--ink); }
.acad-tier__text { margin: 0 !important; }
.acad-tier__go { align-self: flex-start; margin-top: auto; }
.acad-tiers__rules { text-align: center; font-size: 14px !important; }

/* учебная модель */
.acad-model { padding: 26px 28px 24px; }
.acad-model .land__h2 { text-align: left; margin-bottom: 10px; }
.acad-model p { font-size: 16px; }
.acad-model .land__cta { justify-content: flex-start; margin-top: 18px; }

/* на странице «Обучение» личные занятия идут сразу под LYSS Academy — без второго большого отступа */
.section.academy + .section.lessons { padding-top: 0; }

/* промоблок на главной: компактная стеклянная карточка между каталогом и очередью */
.section.acadpromo, .section.acadl2d { padding-top: 0; }
.section.acadpromo { padding-bottom: 0; }
.acadpromo__card {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: center;
  max-width: 1040px; margin: 0 auto; padding: 30px 32px; border-radius: var(--radius);
  background: var(--glass-spec), var(--glass-gloss), var(--glass-fill-flat);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-drop-sm);
}
.acadpromo__text h2 { margin: 10px 0 8px; font-size: clamp(24px, 2.8vw, 32px); }
.acadpromo__text > p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.acadpromo__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; }
.acadpromo__list li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.acadpromo__list li::before { content: "✦"; position: absolute; left: 2px; top: .1em; font-size: 10px; color: var(--lav-400); }
.acadpromo__side { display: grid; justify-items: center; gap: 16px; text-align: center; }
.acadpromo__cta { display: grid; justify-items: center; gap: 10px; }

/* блок на /live2d: как «Что я получу в финале» — по центру, без отдельной плашки */
.acadl2d__box { max-width: 900px; margin: 0 auto; text-align: center; }
.acadl2d__box h2 { margin: 10px 0 12px; font-size: clamp(24px, 2.8vw, 32px); }
.acadl2d__box > p { max-width: 68ch; margin: 0 auto; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.acadl2d__box .land__cta { margin-top: 20px; }

@media (max-width: 960px) {
  .acad-tiers { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 900px) {
  .acad__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acad-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acad-flow li:not(:last-child)::after { display: none; }
}
@media (max-width: 820px) {
  .acadpromo__card { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; }
  .acadpromo__side { justify-items: start; text-align: left; }
  .acadpromo__cta { justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; }
}
@media (max-width: 560px) {
  .acad__grid, .acad-flow, .acadpromo__list { grid-template-columns: 1fr; }
  /* на телефоне карточка «Что уже есть» ниже: значок слева, текст справа */
  .acad-card { grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 16px; }
  .acad-card .acad__ico { grid-row: span 2; }
  .acad-card h3 { margin: 0; font-size: 18px; }
  .acadpromo__cta { grid-auto-flow: row; }
  .acad-model { padding: 22px 18px 20px; }
  .acad-chain li span { min-height: 32px; padding: 5px 11px; font-size: 13px; }
  .acad-chain li:not(:last-child)::after { margin: 0 5px; }
}

/* ============================================================
   87–96. LYSS UI — визуальное обновление (единая система)
   Слой поверх всех прежних разделов: не меняет разметку и логику,
   приводит вид к одной системе. Что здесь:
     87  токены и единые правила: шаг 4 px, три ступени скруглений,
         четыре уровня материала, шкала шрифта, движение, фокус;
     88  первый экран: композиция вместо плоской картинки;
     89  каталог услуг: сетка с ритмом и свой мотив у каждого направления;
     90  калькулятор: карточки выбора, шаги, итог как смета;
     91  режим «Новичок / Знаю, что нужно» — заметный переключатель;
     92  LYSS Academy: тонкий суббренд с сеткой Cubism;
     93  отзывы: главный отзыв, компактные карточки, теги работ;
     94  формы, корзина, пустые состояния, экран «заявка отправлена»;
     95  фирменные детали: разделитель-кристалл, маркеры, мотивы;
     96  телефон: отдельные правила, а не просто сжатый компьютер.
   Мотивы — assets/brand/*.svg (маски: цвет задаёт CSS, тема не мешает).
   ============================================================ */

/* ---------- 87. Токены и единые правила ---------- */
:root {
  /* шаг сетки — 4 px */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  /* скругления — три ступени и таблетка; вложенный элемент на ступень мельче */
  --r-ctl: 8px;       /* кнопки, поля, варианты выбора */
  --r-card: 12px;     /* карточки и плитки */
  --r-panel: 18px;    /* панели, окна, итоговые блоки */
  --r-pill: 999px;    /* статусы, чипы, теги */

  /* шрифт: Display / H1 / H2 / H3 / текст / подпись / интерфейс / служебное */
  --fs-display: clamp(44px, 6.2vw, 86px);
  --fs-h1: clamp(34px, 4.4vw, 58px);
  --fs-h2: clamp(28px, 3.2vw, 42px);
  --fs-h3: 20px;
  --fs-lead: 18px;
  --fs-body: 16.5px;
  --fs-ui: 14.5px;
  --fs-small: 13.5px;
  --fs-micro: 11px;

  /* движение: быстрый отклик, мягкое появление, очень медленный фон */
  --ease-out: cubic-bezier(.22, .8, .3, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 520ms;
  --lift: -3px;       /* на сколько приподнимается карточка при наведении */

  /* материалы: 0 — фон страницы; 1 — лёгкая плёнка (чипы, подписи);
     2 — карточка; 3 — панель и окно; кристалл — редкий акцент */
  --mat-1: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34));
  --mat-2: var(--glass-spec), var(--glass-gloss), var(--glass-fill-flat);
  --mat-3: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.84);
  --mat-crystal: var(--glass-spec), var(--holo), linear-gradient(160deg, rgba(255,255,255,.74), rgba(246,242,253,.56));
  --mat-edge: rgba(255,255,255,.9);
  --mat-edge-soft: rgba(255,255,255,.62);
  --mat-shadow-1: 0 8px 18px -14px rgba(38, 58, 92, .5);
  --mat-shadow-2: var(--glass-rim), var(--glass-drop-sm);
  --mat-shadow-3: var(--glass-rim), var(--glass-drop);
  --blur-2: blur(12px) saturate(140%);
  --blur-3: blur(22px) saturate(150%);

  /* у каждого направления свой оттенок: общий характер, разный акцент */
  --svc-live2d: #8a78e6;
  --svc-art: #e0709f;
  --svc-stream: #4fb3d4;
  --svc-merch: #ee9f62;
  --svc-academy: #5f8fe0;
  --svc-calc: #9a90dc;
}
html[data-theme="dark"] {
  --mat-1: linear-gradient(180deg, rgba(176,162,248,.086), rgba(176,162,248,.04));
  --mat-3: var(--glass-spec), var(--glass-gloss), rgba(34, 30, 52, .78);
  --mat-crystal: var(--glass-spec), var(--holo), linear-gradient(160deg, rgba(176,162,248,.115), rgba(176,162,248,.046));
  --mat-edge: rgba(205,196,255,.21);
  --mat-edge-soft: rgba(205,196,255,.15);
  --mat-shadow-1: 0 8px 18px -14px rgba(0, 0, 0, .7);
  --svc-live2d: #a897f2;
  --svc-art: #f08fb6;
  --svc-stream: #6cc6e2;
  --svc-merch: #f4b583;
  --svc-academy: #86a9f2;
  --svc-calc: #b5acea;
}

/* скругления: три ступени вместо шести разных значений */
.btn, .prep__field, .pick__btn, .calc__opt, .wiz__choice, .sched__opt, .lform__chips .chip span { border-radius: var(--r-ctl); }
.cat, .svc, .addcard, .plan, .artplan, .ychset, .review, .land__card, .land__steps li, .guide-card, .qz__card, .bdg__card,
.lboard__card, .acadpromo__card, .acad-flow li, .tl, .merch-card, .terms__box, .hero__stats div, .opath, .info-note,
.sched, .calc, .artb, .lplan, .lqcard, .accordion details, .acad-tier, .tiers .plan, .wnav__card, .wpack { border-radius: var(--r-card); }
.cta__box, .calc__sum, .prep__card, .order__card, .wiz, .modal, .srch__panel, .cookiebar, .toast, .tiers .plan--pro, .wplus, .purchase__card, .account__card { border-radius: var(--r-panel); }
.cat__body { border-radius: var(--r-ctl) var(--r-ctl) var(--r-card) var(--r-card); }
.status, .badge, .cat__from, .deliver__list li, .acad-chain li span, .wpack__items li, .wplus__list li, .wnav__packs, .wpack__tag, .purchase__test { border-radius: var(--r-pill); }
.quicknav { border-radius: var(--r-card); }
.quicknav a { border-radius: var(--r-ctl); }

/* одна толщина линии у всего стекла */
.accordion details, .badge { border-width: 1px; }

/* размытие — только там, где под элементом реально что-то проезжает или видна картинка:
   кнопки и отзывы лежат на ровном фоне, их размытие ничего не давало, но стоило кадров прокрутки */
.btn, .btn--primary, .btn--ghost, .btn--sm, .review, .pdots__label, .socials__ico {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.cat__body { -webkit-backdrop-filter: var(--blur-2); backdrop-filter: var(--blur-2); }

/* цены и суммы: цифры одной ширины, чтобы столбцы не прыгали */
.ptable__sum, .cat__from, .svc__price, .plan__price, .calc__total, .cart__total b, .cart__sum, .pricelist b, .merch-card__price,
.artplan__p, .prep__line, .calc__lines b, .order__total, .hero__stats b, .lboard__num, .acad-tier__price b {
  font-variant-numeric: tabular-nums lining-nums;
}

/* заголовки: чуть плотнее штрих (200 на светлом фоне читался хуже) и один межстрочный */
h1, h2, .section__head :is(h1, h2) { font-weight: 300; line-height: 1.08; }
.section__head :is(h1, h2) { font-size: var(--fs-h2); }
.section__head h1 { font-size: var(--fs-h1); }
h3 { font-size: var(--fs-h3); }
.section__lead { font-size: var(--fs-lead); line-height: 1.6; }
.land__block > p, .land__final > p, .faq p, .prose p { font-size: var(--fs-body); }

/* единый фокус: один контур на всё, с нулевой специфичностью — прежние правила его не ломают */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--lav-400); outline-offset: 3px;
}
:where(.btn, .prep__field, .wiz__choice, .calc__opt):focus-visible { outline-offset: 2px; }

/* наведение: у всех карточек один подъём и одно время */
.cat, .svc, .addcard, .plan, .artplan, .ychset, .review, .land__card, .guide-card, .merch-card, .acad-tier, .btn {
  transition-timing-function: var(--ease-out);
}
.cat:hover, .svc:hover, .addcard:hover, .artplan:hover, .ychset:hover, .review:hover, .merch-card:hover, .guide-card:hover, .wnav__card:hover, .wpack:hover {
  transform: translateY(var(--lift));
}
.btn--primary:hover, .btn--ghost:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: var(--dur-fast); }

/* кто просил поменьше движения — не получает ни перелива, ни дрейфа */
@media (prefers-reduced-motion: reduce) {
  .cat, .svc, .addcard, .plan, .review, .btn { transition-duration: .01ms !important; }
  .cat:hover, .svc:hover, .review:hover, .btn:hover { transform: none; }
  .cta__box, .tiers .plan--pro, .prep__card, .calc__sum, .order__card, .status, .hero__glow { animation: none !important; }
}

/* перенос строк: заголовки — ровными строками без одинокого слова, текст — без висячих хвостов */
h1, h2, h3, .hero__title, .section__lead, .cat__body h3 { text-wrap: balance; }
p, li, .review p, .acc__body { text-wrap: pretty; }

/* ---------- 88. Первый экран: композиция ----------
   Витрина с листом шоукейса теперь не плоская картинка: за ней стеклянная плита с поворотом,
   на углах кристаллы-грани, снизу — подпись, заходящая на край. Перелив только у фона,
   сами блоки не двигаются. */
.hero__title { font-size: var(--fs-display); font-weight: 300; letter-spacing: -.03em; line-height: .96; }
.hero__sub { font-size: var(--fs-lead); line-height: 1.6; max-width: 34em; }
.hero__inner { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: var(--sp-6); }
.hero__actions { gap: var(--sp-3); align-items: center; }
.hero__actions .btn--primary { min-height: 52px; padding-inline: 28px; font-size: 15px; }
.hero__actions .btn--ghost { background: transparent; box-shadow: none; border-color: var(--mat-edge-soft); }
html[data-theme] .hero__actions .btn--ghost:hover { background: var(--mat-1); }

.hero__art { display: block; position: relative; min-height: 0; padding: 30px 6px 46px 26px; isolation: isolate; }
.hero__art::before {          /* стеклянная плита за витриной */
  content: ''; position: absolute; z-index: -1; inset: 8px 0 22px 10px; border-radius: var(--r-panel);
  background: var(--mat-crystal); border: 1px solid var(--mat-edge-soft);
  transform: rotate(-3.4deg); box-shadow: var(--mat-shadow-2);
}
.hero__art::after {           /* кристалл-грань на углу плиты; блик самой витрины (.hero__showcase::after) не трогаем */
  content: ''; position: absolute; z-index: 3; width: 50px; height: 50px; left: 2px; top: 6px; pointer-events: none;
  background: var(--grad-text);
  -webkit-mask: url("../assets/brand/shard.svg") center / contain no-repeat; mask: url("../assets/brand/shard.svg") center / contain no-repeat;
  filter: drop-shadow(0 8px 12px rgba(80, 70, 150, .35));
  animation: ui-bob 9s ease-in-out infinite;
}
.hero__showcase { position: relative; z-index: 1; border-radius: var(--r-card); }
.hero__showcase img { border-radius: inherit; display: block; width: 100%; height: auto; }
@keyframes ui-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(5deg); } }

.mascot__tag {
  position: absolute; z-index: 3; left: 38px; bottom: 22px; margin: 0; padding: 7px 14px 7px 12px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mat-3); border: 1px solid var(--mat-edge); border-radius: var(--r-pill); box-shadow: var(--mat-shadow-2);
  font-size: 12px; letter-spacing: .14em;
}
.mascot__tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(140deg, #9fd6ee, #e8aad4); box-shadow: 0 0 0 4px rgba(232, 170, 212, .2); }

/* показатели — одна полоса из трёх ячеек, а не три отдельные плитки */
html[data-theme] .hero__stats {
  display: grid; grid-template-columns: repeat(3, auto); gap: 0; width: fit-content; max-width: 100%; margin-top: var(--sp-6);
  background: var(--mat-1); border: 1px solid var(--mat-edge-soft); border-radius: var(--r-card);
}
html[data-theme] .hero__stats > div {
  position: relative; padding: 14px 24px; background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme] .hero__stats > div + div::before {
  content: ''; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px;
  background: linear-gradient(transparent, var(--lav-300), transparent);
}
.hero__stats b { font-size: 28px; line-height: 1.1; }
.hero__stats span { margin-top: 2px; }

/* ---------- 89. Каталог услуг: ритм и мотивы ----------
   Три колонки: Live2D — двойная, «Расчёт стоимости» — полоса на всю ширину внизу, остальные —
   обычные. У каждого направления свой
   оттенок (--svc), свой мотив в углу и один «фирменный» большой угол: форма одна, характер разный. */
.catalog__grid {
  --cat-h: clamp(300px, 31vw, 360px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, var(--cat-h)) 200px;
  grid-auto-rows: var(--cat-h); gap: var(--sp-4); counter-reset: svc;
}
.cat {
  --svc: var(--svc-calc);
  flex: none; aspect-ratio: auto; height: 100%; counter-increment: svc;
}
.catalog__grid > .cat:nth-child(1) { grid-column: span 2; }
.catalog__grid > .cat:nth-child(9) { grid-column: 1 / -1; }
/* у широких карточек текстовая панель не растягивается на всю ширину — остаётся место для картинки */
.catalog__grid > .cat:nth-child(1) .cat__body, .catalog__grid > .cat:nth-child(9) .cat__body { right: auto; width: min(420px, calc(100% - 24px)); }

.cat[href$="/live2d"]  { --svc: var(--svc-live2d); --motif: url("../assets/brand/motif-mesh.svg"); border-top-right-radius: 44px; }
.cat[href$="#ych"]     { --svc: var(--svc-art);    --motif: url("../assets/brand/motif-spark.svg"); border-bottom-left-radius: 44px; }
.cat[href$="/art"]     { --svc: var(--svc-art);    --motif: url("../assets/brand/motif-spark.svg"); border-bottom-left-radius: 44px; }
.cat[href$="/widgets"], .cat[href$="#chat"], .cat[href$="#banner"] {
  --svc: var(--svc-stream); --motif: url("../assets/brand/motif-ripple.svg"); border-bottom-right-radius: 44px;
}
.cat[href$="/merch"]   { --svc: var(--svc-merch);  --motif: url("../assets/brand/motif-stitch.svg"); border-top-left-radius: 44px; }
.cat[href*="learn"], .cat[href*="academy"] {
  --svc: var(--svc-academy); --motif: url("../assets/brand/motif-grid.svg"); border-top-right-radius: 44px; border-bottom-left-radius: 44px;
}
.cat[href$="/calc"]    { --svc: var(--svc-calc);   --motif: url("../assets/brand/motif-grid.svg"); }

.cat__img::before {           /* номер услуги */
  content: counter(svc, decimal-leading-zero); position: absolute; z-index: 2; left: 14px; top: 14px;
  padding: 4px 9px; border-radius: var(--r-pill); font: 400 11px/1.3 var(--mono); letter-spacing: .2em; color: var(--ink);
  background: rgba(255,255,255,.74); border: 1px solid var(--mat-edge);
}
.cat::before {                /* круглая «шайба» под мотив */
  content: ''; position: absolute; z-index: 2; right: 16px; top: 14px; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.78); border: 1px solid var(--mat-edge); box-shadow: var(--mat-shadow-1);
}
.cat__img::after {            /* сам мотив: цвет — оттенок направления (блик .cat::after остаётся прежним) */
  content: ''; position: absolute; z-index: 3; right: 24px; top: 22px; width: 26px; height: 26px;
  background: var(--svc);
  -webkit-mask: var(--motif, none) center / contain no-repeat; mask: var(--motif, none) center / contain no-repeat;
  transition: transform var(--dur) var(--ease-out);
}
.cat:hover .cat__img::after { transform: rotate(8deg) scale(1.1); }
.cat[href$="/live2d"]::before, .cat[href*="learn"]::before, .cat[href*="academy"]::before { right: 24px; }
.cat[href$="/live2d"] .cat__img::after, .cat[href*="learn"] .cat__img::after, .cat[href*="academy"] .cat__img::after { right: 32px; }

.cat__body { padding: 14px 18px 16px 22px; background: var(--glass-spec), var(--glass-gloss), rgba(255,255,255,.66); }
.cat__body::before {          /* цветная кромка слева */
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--svc);
}
.cat__body h3 { font-size: 18px; }
html[data-theme] .cat__from {
  color: var(--ink); font-weight: 600;
  background: color-mix(in srgb, var(--svc) 20%, rgba(255,255,255,.5));
  border-color: color-mix(in srgb, var(--svc) 55%, transparent);
}
html[data-theme="dark"] .cat__body { background: var(--glass-spec), var(--glass-gloss), rgba(30, 26, 46, .72); }
html[data-theme="dark"] .cat__img::before, html[data-theme="dark"] .cat::before { background: rgba(30, 26, 46, .72); color: var(--ink); }
.cat:hover { box-shadow: var(--glass-drop-hi), 0 20px 50px -28px var(--svc); }

@media (max-width: 900px) {
  .catalog__grid { --cat-h: clamp(280px, 44vw, 340px); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: var(--cat-h); }
  .catalog__grid > .cat:nth-child(9) { grid-column: auto; }
}
@media (max-width: 620px) {
  .catalog__grid { grid-template-columns: 1fr; grid-auto-rows: 290px; }
  .catalog__grid > .cat:nth-child(n) { grid-column: auto; }
  .catalog__grid > .cat:nth-child(1) .cat__body { width: auto; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__art::after { animation: none; }
}

/* ---------- 88b. Свет за первым экраном: мягче и меньше ----------
   Огромный сплошной диск за витриной читался как серо-сиреневое пятно, особенно в тёмной теме */
.hero__glow { width: 600px; height: 600px; top: -120px; right: -60px; opacity: .62; }
html[data-theme="dark"] .hero__glow { opacity: .34; }

/* ---------- 90. Калькулятор: конфигуратор и смета ----------
   Шаги — сегментированная полоса прогресса; варианты — карточки с понятным выбранным состоянием;
   итог справа — смета: название, строки с выноской до цены, крупная сумма. Блок не двигается. */
html[data-theme] .wiz__steps {
  display: flex; flex-wrap: nowrap; gap: 2px; width: fit-content; max-width: 100%; margin: 0 0 var(--sp-5); padding: 4px;
  list-style: none; overflow-x: auto; scrollbar-width: none;
  background: var(--mat-1); border: 1px solid var(--mat-edge-soft); border-radius: var(--r-pill);
}
.wiz__steps::-webkit-scrollbar { display: none; }
html[data-theme] .wiz__steps li {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px;
  background: transparent; border: 0; box-shadow: none; border-radius: var(--r-pill); color: var(--ink-soft);
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: background var(--dur) var(--ease-out), color var(--dur);
}
html[data-theme] .wiz__steps li.is-active { color: #fff; background: linear-gradient(120deg, var(--lav-500), var(--lav-400)); box-shadow: 0 8px 18px -12px rgba(60, 50, 120, .7); }
html[data-theme] .wiz__steps li.is-done { color: var(--ink); }

.wiz__choices { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-3); }
html[data-theme] .wiz__choice {
  min-height: 78px; padding: 14px 16px; border-radius: var(--r-card); align-items: flex-start; gap: 14px;
  background: var(--mat-2); border: 1px solid var(--mat-edge); box-shadow: var(--mat-shadow-1);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur), background var(--dur);
}
html[data-theme] .wiz__choice:hover { transform: translateY(var(--lift)); box-shadow: var(--mat-shadow-3); }
html[data-theme] .wiz__choice.is-on {
  border-color: var(--lav-400); background: var(--mat-crystal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lav-400) 22%, transparent), var(--mat-shadow-2);
}
.wiz__choice b { font-size: 16px; font-weight: 500; }
.wiz__choice small { font-weight: 400; line-height: 1.4; }
.wiz__q { font-weight: 400; font-size: 22px; }
.wiz__nav { padding-top: var(--sp-4); border-top: 1px dashed var(--mat-edge-soft); margin-top: var(--sp-5); }

/* смета */
html[data-theme] .wiz__sum {
  padding: 20px 20px 18px; border-radius: var(--r-panel);
  background: var(--mat-crystal); border: 1px solid var(--mat-edge); box-shadow: var(--mat-shadow-3);
}
.wiz__sum .calc__sumcap {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); padding-bottom: var(--sp-3);
  border-bottom: 1px dashed color-mix(in srgb, var(--lav-400) 35%, transparent);
}
.wiz__title { font-size: 20px; font-weight: 500; line-height: 1.25; }
.wiz__sum .calc__lines { margin-top: var(--sp-3); }
.wiz__sum .calc__lines li { display: flex; align-items: baseline; gap: 0; padding: 7px 0; border-bottom: 0; }
.wiz__sum .calc__lines li > span { order: 0; min-width: 0; }
.wiz__sum .calc__lines li::after {          /* выноска: название ····· цена */
  content: ''; order: 1; flex: 1 1 18px; min-width: 18px; margin: 0 8px; align-self: flex-end; transform: translateY(-5px);
  border-bottom: 1px dotted color-mix(in srgb, var(--ink-dim) 70%, transparent);
}
.wiz__sum .calc__lines li > b { order: 2; white-space: nowrap; font-weight: 500; }
.wiz__sum .calc__lines li.is-group, .wiz__sum .calc__lines li.is-empty { border-bottom: 0; }
.wiz__sum .calc__lines li.is-group::after, .wiz__sum .calc__lines li.is-empty::after { display: none; }
.wiz__sum .calc__lines li.is-sub { color: var(--ink-soft); }
.wiz__sum .calc__lines small { display: block; font-size: 12.5px; color: var(--ink-soft); }
.wiz__sum .wiz__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid color-mix(in srgb, var(--lav-400) 35%, transparent);
  font-size: clamp(30px, 3.4vw, 40px); font-weight: 300; line-height: 1.1;
}
.wiz__sum .wiz__total::before { content: 'Итого'; font: 400 var(--fs-micro) var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
html[data-lang="en"] .wiz__sum .wiz__total::before { content: 'Total'; }
.wiz__sum .wiz__total[hidden] { display: none; }
.wiz__sum .calc__note { margin-top: var(--sp-3); font-size: var(--fs-small); }

/* ---------- 91. Режим «Новичок / Знаю, что нужно» ----------
   Переключатель — сегментированная полоса с подписью, что сейчас включено. В режиме «Знаю, что нужно»
   интерфейс плотнее: короче отступы между разделами; пояснения прятались и раньше (раздел 59). */
.modepick {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-5);
}
.modepick__cap { display: none; }
html[data-theme] .modepick button {
  min-height: 36px; padding: 7px 14px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 500;
  background: transparent; border: 1px solid transparent; color: var(--ink-soft); box-shadow: none;
  transition: background var(--dur) var(--ease-out), color var(--dur), border-color var(--dur);
}
html[data-theme] .modepick button.is-on {
  color: var(--ink); background: var(--mat-crystal); border-color: color-mix(in srgb, var(--lav-400) 55%, transparent);
  box-shadow: var(--mat-shadow-1);
}
html[data-theme] .modepick button:not(.is-on):hover { color: var(--ink); background: var(--mat-1); }
.modepick {
  width: fit-content; max-width: 100%; padding: 4px; gap: 2px;
  background: var(--mat-1); border: 1px solid var(--mat-edge-soft); border-radius: var(--r-pill);
}
.modepick::after {
  content: ""; position: absolute; left: 4px; top: calc(100% + 8px); font-size: 12.5px; color: var(--ink-soft); white-space: nowrap;
}
.modepick { position: relative; margin-bottom: var(--sp-6); }
html[data-mode="novice"] .modepick::after { content: 'Подсказки и пояснения включены — объясняю термины по ходу'; }
html[data-mode="pro"] .modepick::after { content: 'Только цены и настройки — пояснения скрыты'; }
html[data-lang="en"][data-mode="novice"] .modepick::after { content: 'Hints and explanations are on — I explain terms as we go'; }
html[data-lang="en"][data-mode="pro"] .modepick::after { content: 'Just prices and settings — explanations are hidden'; }

html[data-mode="pro"] .section:not(.acadpromo):not(.acadl2d) { padding-block: clamp(64px, 8.4vh, 112px); }
html[data-mode="pro"] .section__head { margin-bottom: clamp(26px, 3.4vw, 44px); }

/* ---------- 92. LYSS Academy: суббренд ----------
   Те же материалы и формы, но свой знак — сетка Cubism: тонкая сетка с узлами за заголовком,
   узлы-вершины в цепочке тем, номера модулей как параметры. Оттенок — --svc-academy. */
#academy, #academyPromo { --acad: var(--svc-academy); }
#academy .section__head { position: relative; isolation: isolate; padding-top: var(--sp-6); }
#academy .section__head::before {
  content: ''; position: absolute; z-index: -1; inset: -8px -6vw 0;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--acad) 55%, transparent) 1.4px, transparent 1.8px),
    linear-gradient(to right, color-mix(in srgb, var(--acad) 14%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--acad) 14%, transparent) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px, 36px 36px; background-position: 18px 18px, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 78% at 50% 42%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 78% at 50% 42%, #000 0%, transparent 100%);
}
#academy .eyebrow::before, .acadpromo__text .eyebrow::before {
  content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px;
  background: var(--acad);
  -webkit-mask: url("../assets/brand/motif-grid.svg") center / contain no-repeat; mask: url("../assets/brand/motif-grid.svg") center / contain no-repeat;
}
.acadpromo__card { border-left: 3px solid var(--acad); position: relative; overflow: hidden; }
.acadpromo__card::before {
  content: ''; position: absolute; right: -20px; top: -20px; width: 240px; height: 240px; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--acad) 50%, transparent) 1.4px, transparent 1.8px),
    linear-gradient(to right, color-mix(in srgb, var(--acad) 13%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--acad) 13%, transparent) 1px, transparent 1px);
  background-size: 30px 30px; background-position: 15px 15px, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent);
}
.acadpromo__card > * { position: relative; }

/* цепочка тем: вершины сетки, соединённые линиями (вместо стрелок) */
.acad-chain { gap: 10px 0; }
.acad-chain li:not(:last-child)::after {
  content: ''; width: 18px; height: 1px; margin: 0 2px; background: color-mix(in srgb, var(--acad) 60%, transparent);
}
.acad-chain li span { padding-left: 11px; gap: 8px; }
.acad-chain li span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--acad);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acad) 22%, transparent);
}

/* модули: номер как параметр */
.acad-mod__n {
  padding: 3px 8px; border-radius: 6px; font-size: 12px; color: var(--acad);
  background: color-mix(in srgb, var(--acad) 12%, transparent); border: 1px solid color-mix(in srgb, var(--acad) 38%, transparent);
}
.acad-mods details[open] { border-left: 3px solid var(--acad); }
.acad-flow li::before { background: linear-gradient(135deg, var(--acad), color-mix(in srgb, var(--acad) 55%, #fff)); }
.acad-tier__go { border-color: color-mix(in srgb, var(--acad) 45%, transparent); }
#academy .acad-card .acad__ico { border-color: color-mix(in srgb, var(--acad) 30%, var(--mat-edge)); }

/* ---------- 93. Отзывы: главный, компактные, теги ----------
   Лента та же (стрелки, свайп, перетаскивание). Первая карточка — «главный отзыв» на две колонки,
   остальные короче: текст обрезается (js/reviews.js добавляет «Читать полностью»), у каждой — теги работ. */
.reviews__track { grid-auto-columns: calc((100% - 2 * var(--sp-5)) / 3); gap: var(--sp-5); align-items: start; }
html[data-theme] .review {
  display: flex; flex-direction: column; gap: var(--sp-3); padding: 22px 22px 18px;
  border: 1px solid var(--mat-edge); border-radius: var(--r-card);
  background: var(--mat-2); box-shadow: var(--mat-shadow-2);
}
.review::before {
  position: static; display: block; height: 26px; margin: 0; font-size: 56px; line-height: .9;
  font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--lav-300);
  content: '\201C';
}
.review p {
  padding-top: 0; font-size: 15.5px; line-height: 1.62; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden;
}
.review--vk p { -webkit-line-clamp: 7; }
.review.is-open p { -webkit-line-clamp: unset; display: block; }
.review__more {
  align-self: flex-start; margin: -4px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 var(--fs-small) var(--font-body); color: var(--lav-600); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--lav-400) 40%, transparent);
}
html[data-theme="dark"] .review__more { color: #d8c8ff; }
.review__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.review__tag {
  padding: 3px 9px; border-radius: var(--r-pill); font: 400 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--mat-1); border: 1px solid var(--mat-edge-soft);
}
.review footer {
  margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--mat-edge-soft);
  font-size: var(--fs-ui); color: var(--ink);
}
.review__pics { margin: 0; }

.review.is-featured {
  grid-column: span 2; padding: 30px 32px 24px; background: var(--mat-crystal); box-shadow: var(--mat-shadow-3);
}
.review.is-featured::before { height: 40px; font-size: 84px; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.review.is-featured p { font-size: 19px; line-height: 1.58; font-weight: 300; -webkit-line-clamp: 8; }
.review.is-featured footer { font-size: 16px; }

@media (max-width: 1024px) {
  .reviews__track { grid-auto-columns: calc((100% - var(--sp-5)) / 2); }
  .review.is-featured { grid-column: span 1; padding: 22px 22px 18px; }
  .review.is-featured p { font-size: 16px; font-weight: 400; }
  .review.is-featured::before { height: 26px; font-size: 56px; background: none; -webkit-text-fill-color: currentColor; }
}
@media (max-width: 720px) {
  .reviews__track { grid-auto-columns: 88%; gap: var(--sp-3); }
}

/* ---------- 94. Формы, корзина, окна, пустые состояния ---------- */
html[data-theme] .prep__field {
  min-height: 46px; padding: 11px 14px; border-radius: var(--r-ctl); font-size: 15px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
textarea.prep__field { min-height: 96px; line-height: 1.5; }
.prep__field:focus, .prep__field:focus-visible {
  outline: none; border-color: var(--lav-400); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lav-400) 24%, transparent);
}
.prep__field:user-invalid { border-color: #d24a6a; box-shadow: 0 0 0 3px rgba(210, 74, 106, .14); }
.cart__form label > span:first-child, .lform__label { font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); }

.cart__filelist { display: grid; gap: 6px; margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.cart__filelist li {
  display: flex; align-items: center; gap: var(--sp-3); padding: 8px 12px; border-radius: var(--r-ctl);
  background: var(--mat-1); border: 1px solid var(--mat-edge-soft); font-size: var(--fs-small);
}
.cart__filelist li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart__filelist small { color: var(--ink-soft); white-space: nowrap; }
.cart__filebtn { border-radius: var(--r-ctl); border-style: dashed; }

html[data-theme] .cart, html[data-theme] .socials { background: var(--mat-3); -webkit-backdrop-filter: var(--blur-3); backdrop-filter: var(--blur-3); }
html[data-theme] .modal { border: 1px solid var(--mat-edge); box-shadow: var(--mat-shadow-3); }
.cart__item { border-radius: var(--r-card); }

/* пустые состояния: кристалл с пузырьками и пара спокойных слов */
.cart__empty, .srch__empty, .lboard__state:not(:empty) {
  display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-5); text-align: center; color: var(--ink-soft);
}
.cart__empty::before, .srch__empty::before {
  content: ''; width: 84px; height: 84px; opacity: .85;
  background: var(--grad-text);
  -webkit-mask: url("../assets/brand/empty-crystal.svg") center / contain no-repeat; mask: url("../assets/brand/empty-crystal.svg") center / contain no-repeat;
}
.cart__empty[hidden], .srch__empty[hidden] { display: none; }

/* «Заявка отправлена» */
.done__head { display: flex; align-items: center; gap: var(--sp-3); font-size: 22px; font-weight: 400; }
.done__check {
  flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  font-size: 20px; color: #23262f; background: linear-gradient(140deg, #bfe4f3, #f0bddb);
  box-shadow: 0 0 0 6px rgba(159, 214, 238, .26), 0 0 0 12px rgba(232, 170, 212, .12);
}
.nextsteps li { border-radius: var(--r-card); }

/* ---------- 95. Фирменные детали ----------
   Разделитель-кристалл под заголовком раздела, маркер-грань в списках. Цвет — из темы. */
.section__head::after, .section__head.visible::after { transition: width 1.1s var(--ease-out) .25s; }
.section__head.visible::after {
  width: 150px; height: 12px; margin-top: 20px;
  background: linear-gradient(90deg, transparent, var(--lav-300) 22%, var(--lav-400) 50%, var(--lav-300) 78%, transparent);
  -webkit-mask: url("../assets/brand/divider.svg") center / 100% 100% no-repeat; mask: url("../assets/brand/divider.svg") center / 100% 100% no-repeat;
}
.land__list li::before, .acc__body li::before, .acadpromo__list li::before, .checks li::before {
  content: ''; width: 10px; height: 12px; font-size: 0; background: var(--lav-400); opacity: .85;
  -webkit-mask: url("../assets/brand/shard.svg") center / contain no-repeat; mask: url("../assets/brand/shard.svg") center / contain no-repeat;
}
.land__list li::before { top: .5em; left: 5px; }
.acc__body li::before { top: .35em; }
.acadpromo__list li::before { top: .3em; }

/* тарифы Base / Advanced: у Advanced — кристальный материал, не только другой цвет */
.tiers .plan--pro { background: var(--mat-crystal); border-color: var(--mat-edge); box-shadow: var(--mat-shadow-3); }

/* ---------- 96. Телефон ----------
   Не «сжатый компьютер»: короче отступы, показатели в одну строку-полосу, карточки ниже,
   крупные зоны нажатия, ничего не обрезается. */
@media (max-width: 760px) {
  .section:not(.acadpromo):not(.acadl2d) { padding-block: clamp(52px, 9vw, 68px); }
  html[data-mode="pro"] .section:not(.acadpromo):not(.acadl2d) { padding-block: clamp(44px, 8vw, 58px); }
  .section__head { margin-bottom: var(--sp-6); }
  .section__head :is(h1, h2) { font-size: clamp(27px, 7.6vw, 34px); }

  .hero { padding-top: 104px; padding-bottom: 56px; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero__title { font-size: clamp(42px, 13vw, 58px); }
  .hero__sub { font-size: 16.5px; margin: var(--sp-4) 0 var(--sp-5); }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero__art { padding: 18px 4px 40px 12px; }
  .hero__art::before { inset: 4px 0 24px 4px; transform: rotate(-2.4deg); }
  .hero__art::after { width: 38px; height: 38px; left: -2px; top: 0; }
  .mascot__tag { left: 18px; bottom: 16px; }
  html[data-theme] .hero__stats { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-theme] .hero__stats > div { padding: 12px 10px; text-align: center; align-items: center; }
  .hero__stats b { font-size: 20px; }
  .hero__stats span { font-size: 11px; }
  .modepick { margin-bottom: var(--sp-7); }
  .modepick::after { white-space: normal; max-width: 92vw; }

  .cat__body { padding: 12px 14px 14px 18px; }
  .cat__body p { font-size: 13.5px; }
  .wiz__choices { grid-template-columns: 1fr; }
  html[data-theme] .wiz__choice { min-height: 68px; }
  html[data-theme] .wiz__sum { padding: 18px 16px 16px; }
  .review p, .review--vk p { -webkit-line-clamp: 8; }
  #academy .section__head::before { inset: -8px -4vw 0; }
  .acadpromo__card { border-left-width: 0; border-top: 3px solid var(--acad); }
}
@media (max-width: 380px) {
  .hero__actions .btn { flex-basis: 100%; }
  .acad-chain li span { padding-inline: 9px; }
}

/* шаги калькулятора на телефоне: подпись только у текущего шага, у остальных — номер или галочка */
@media (max-width: 560px) {
  html[data-theme] .wiz__steps li:not(.is-active) { font-size: 0; gap: 0; padding: 8px; }
  html[data-theme] .wiz__steps li:not(.is-active)::before { font-size: 11px; }
}

/* ---------- 97. Графика и живость: свет, материал, микровзаимодействия ----------
   Второй проход LYSS UI. Уровни декора: HERO — подробно (первый экран, итог, главный отзыв);
   MEDIUM — карточки услуг и тарифы; LOW — формы, таблицы, техническое: только линия-разделитель.
   Знаки лежат в assets/brand/ (полноцветные: crystal, bubble, pearl-chain, sparkle, caustics, empty-crystal;
   маски: shard, divider, gill, water-line, motif-*, ico-*). Логика света и параллакса — js/lyss-fx.js. */
:root {
  --decor-hero: 1;
  --decor-mid: .7;
  --decor-low: .4;
}

/* свет под курсором: один элемент, лежит поверх карточки под указателем и повторяет её форму */
.ui-light {
  position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; opacity: 0; will-change: transform;
  background: radial-gradient(180px circle at var(--lx, 50%) var(--ly, 50%), rgba(255,255,255,.34), rgba(255,255,255,0) 70%);
  transition: opacity var(--dur) var(--ease-out);
}
.ui-light.is-on { opacity: 1; }
html[data-theme="dark"] .ui-light {
  background: radial-gradient(200px circle at var(--lx, 50%) var(--ly, 50%), rgba(196,178,255,.2), rgba(196,178,255,0) 70%);
}

/* ---- первый экран: глубина ---- */
.hero__art::before {          /* плита: стекло + медленный водный свет */
  background: url("../assets/brand/caustics.svg") 0 0 / 240px 240px, var(--mat-crystal);
  background-blend-mode: soft-light, normal;
  animation: ui-water 70s linear infinite;
  translate: calc(var(--px, 0) * -5px) calc(var(--py, 0) * -4px);
  transition: translate .8s var(--ease-out);
}
@keyframes ui-water { to { background-position: 240px 240px, 0 0; } }
.hero__showcase { translate: calc(var(--px, 0) * 2px) calc(var(--py, 0) * 1.5px); transition: translate .8s var(--ease-out); }
.hero__art::after { translate: calc(var(--px, 0) * 7px) calc(var(--py, 0) * 5px); background: url("../assets/brand/crystal.svg") center / contain no-repeat; -webkit-mask: none; mask: none; width: 44px; height: 58px; left: -2px; top: -6px; }
.hero__glow { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 8px); transition: translate 1.2s var(--ease-out); }
.hero__text::after {          /* цепочка жемчуга под показателями */
  content: ''; display: block; width: 240px; max-width: 70%; height: 14px; margin-top: var(--sp-5); opacity: calc(.9 * var(--decor-hero));
  background: url("../assets/brand/pearl-chain.svg") 0 50% / auto 14px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent); mask-image: linear-gradient(90deg, #000 40%, transparent);
}
.hero__art { --hero-bubble: url("../assets/brand/bubble.svg"); }
.hero__showcase::before {     /* пузырь, наполовину над краем витрины */
  content: ''; position: absolute; z-index: 2; width: 34px; height: 34px; right: 14px; top: -14px; pointer-events: none;
  background: var(--hero-bubble) center / contain no-repeat; animation: ui-bob 12s ease-in-out -3s infinite;
}

/* ---- главная кнопка: «кристальный» блик раз в несколько секунд — только у ключевых CTA ---- */
.hero__actions .btn--primary::before, .cta__box .btn--primary::before, .wiz__continue::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-140%) skewX(-16deg);
  animation: ui-glint 7s ease-in-out 2s infinite;
}
@keyframes ui-glint { 0%, 70% { opacity: 0; transform: translateX(-140%) skewX(-16deg); } 74% { opacity: 1; } 92%, 100% { opacity: 0; transform: translateX(340%) skewX(-16deg); } }

/* кнопка в ожидании отправки — свой бегущий блик вместо «просто серой» */
#cartSend:disabled, #lessonSend:disabled { opacity: 1; cursor: progress; pointer-events: none; }
#cartSend:disabled::before, #lessonSend:disabled::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.5), transparent 80%);
  background-size: 220% 100%; animation: ui-load 1.1s linear infinite;
}
@keyframes ui-load { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ---- карточки услуг: свет по краю и «дыхание» знака ---- */
.cat__img::after { transition: transform var(--dur) var(--ease-out), filter var(--dur); }
.cat:hover .cat__img::after { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--svc) 70%, transparent)); }
.cat:hover::before { box-shadow: 0 0 0 5px color-mix(in srgb, var(--svc) 22%, transparent), var(--mat-shadow-1); transition: box-shadow var(--dur); }
.cat::before { transition: box-shadow var(--dur) var(--ease-out); }

/* технические мотивы направлений (деликатно, как фон заголовка) */
#models .section__head, #art .section__head { position: relative; isolation: isolate; }
#models .section__head::before {   /* Live2D: фрагмент сетки ArtMesh с вершинами */
  content: ''; position: absolute; z-index: -1; right: -4vw; top: -12px; width: 320px; height: 220px; pointer-events: none;
  opacity: calc(.5 * var(--decor-mid)); background: var(--svc-live2d);
  -webkit-mask: url("../assets/brand/motif-mesh.svg") center / contain no-repeat, linear-gradient(#000, transparent); mask: url("../assets/brand/motif-mesh.svg") center / contain no-repeat;
}
#art .section__head::before {      /* Арт: листы слоёв, сложенные веером */
  content: ''; position: absolute; z-index: -1; left: 4vw; top: 6px; width: 74px; height: 96px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--svc-art) 55%, transparent); border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--svc-art) 8%, transparent);
  box-shadow: 14px 10px 0 -1px color-mix(in srgb, var(--svc-art) 10%, transparent), 14px 10px 0 0 color-mix(in srgb, var(--svc-art) 40%, transparent),
              28px 20px 0 -1px color-mix(in srgb, var(--svc-art) 7%, transparent), 28px 20px 0 0 color-mix(in srgb, var(--svc-art) 28%, transparent);
  transform: rotate(-6deg); opacity: calc(.9 * var(--decor-mid));
}

/* ---- Base и Advanced: плотность детализации ---- */
.tiers .plan__name { display: flex; align-items: center; gap: var(--sp-3); }
.tiers .plan__name::after {
  content: ''; width: 58px; height: 16px; --fill: 33.3%;
  background: linear-gradient(90deg, var(--lav-400) 0 var(--fill), color-mix(in srgb, var(--lav-400) 22%, transparent) var(--fill) 100%);
  -webkit-mask: url("../assets/brand/shard.svg") 0 50% / 19px 16px repeat-x; mask: url("../assets/brand/shard.svg") 0 50% / 19px 16px repeat-x;
}
.tiers .plan--pro .plan__name::after { --fill: 100%; }

/* ---- угловые кристаллы у главных блоков ---- */
.tiers .plan--pro::after, .wiz__sum::after, .review.is-featured::after, .acad-tier[data-tier="student"]::after {
  content: ''; position: absolute; width: 30px; height: 40px; right: -9px; top: -13px; pointer-events: none; z-index: 2;
  background: url("../assets/brand/crystal.svg") center / contain no-repeat; transform: rotate(14deg);
  filter: drop-shadow(0 6px 8px rgba(80, 70, 150, .28)); opacity: calc(var(--decor-hero) * .95);
}
.wiz__sum, .tiers .plan--pro, .review.is-featured, .acad-tier { position: relative; }
.wiz__sum { position: sticky; }

/* ---- иконки-контейнеры: свои иконки Academy вместо эмодзи ---- */
.acad__ico {
  position: relative; width: 44px; height: 44px; border-radius: var(--r-card);
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.95), rgba(255,255,255,.25) 62%), var(--glass-fill-flat);
  border: 1px solid var(--mat-edge); box-shadow: var(--mat-shadow-1), inset 0 -6px 12px -8px color-mix(in srgb, var(--acad, var(--lav-400)) 40%, transparent);
}
.acad__ico[data-i]::before {
  content: ''; width: 22px; height: 22px; background: var(--acad, var(--lav-500));
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.acad__ico[data-i="cheats"] { --ico: url("../assets/brand/ico-cheats.svg"); }
.acad__ico[data-i="checklist"] { --ico: url("../assets/brand/ico-checklist.svg"); }
.acad__ico[data-i="book"] { --ico: url("../assets/brand/ico-book.svg"); }
.acad__ico[data-i="search"] { --ico: url("../assets/brand/ico-search.svg"); }
.acad__ico[data-i="palette"] { --ico: url("../assets/brand/ico-palette.svg"); }
.acad__ico[data-i="puzzle"] { --ico: url("../assets/brand/ico-puzzle.svg"); }
html[data-theme="dark"] .acad__ico { background: radial-gradient(circle at 30% 22%, rgba(176,162,248,.207), rgba(176,162,248,.046) 62%), var(--glass-fill-flat); }
.acad-card:hover .acad__ico { transform: translateY(-1px); }
.acad__ico { transition: transform var(--dur) var(--ease-out); }

/* ---- Academy: параметр, который можно подвигать ---- */
.acad-demo {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--sp-6); align-items: center;
  padding: var(--sp-5); border-radius: var(--r-panel); background: var(--mat-2); border: 1px solid var(--mat-edge); box-shadow: var(--mat-shadow-2);
  --a: 0; --abs: 0;
}
.acad-demo__svg { width: 100%; height: auto; display: block; overflow: visible; }
.acd-face { fill: color-mix(in srgb, var(--acad) 8%, #fff); stroke: color-mix(in srgb, var(--acad) 55%, transparent); stroke-width: 1.4; }
html[data-theme="dark"] .acd-face { fill: color-mix(in srgb, var(--acad) 14%, #1b1730); }
.acd-mesh { stroke: color-mix(in srgb, var(--acad) 42%, transparent); stroke-width: 1; fill: none; }
.acd-node { fill: var(--acad); }
.acd-eye { fill: var(--ink); }
.acd-feat { stroke: var(--ink); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.acd-hair { fill: color-mix(in srgb, var(--acad) 30%, transparent); stroke: color-mix(in srgb, var(--acad) 60%, transparent); stroke-width: 1.2; }
.acd-axis { stroke: color-mix(in srgb, var(--ink-dim) 70%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.acd-head { transform: translateX(calc(var(--a) * .5px)); transition: transform .12s linear; }
.acd-feat-g { transform: translateX(calc(var(--a) * 1.1px)) scaleX(calc(1 - var(--abs) * .0035)); transform-origin: 120px 100px; transition: transform .12s linear; }
.acd-hair-g { transform: translateX(calc(var(--a) * -.35px)); transition: transform .12s linear; }
.acad-demo__ctl { display: grid; gap: var(--sp-3); }
.acad-demo__ctl label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-small); color: var(--ink-soft); }
.acad-demo__ctl label b { font: 400 12px var(--mono); letter-spacing: .08em; color: var(--acad); }
.acad-demo__ctl output { font: 400 13px var(--mono); color: var(--ink); min-width: 3.4em; text-align: right; }
.acad-demo__ctl input[type="range"] { width: 100%; accent-color: var(--acad); }
.acad-demo__ctl p { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); }
@media (max-width: 640px) { .acad-demo { grid-template-columns: 1fr; padding: var(--sp-4); } .acad-demo__svg { max-width: 220px; margin: 0 auto; } }

/* ---- цена: короткая смена значения вместо мгновенной замены ---- */
.is-tick { animation: ui-tick .42s var(--ease-out); }
@keyframes ui-tick { 0% { opacity: .25; transform: translateY(7px); } 100% { opacity: 1; transform: none; } }

/* ---- пустые состояния: полноцветный кристалл и помощник ---- */
.cart__empty::before, .srch__empty::before {
  width: 96px; height: 96px; opacity: 1; background: url("../assets/brand/empty-crystal.svg") center / contain no-repeat;
  -webkit-mask: none; mask: none; filter: drop-shadow(0 10px 14px rgba(110, 100, 190, .22));
}
.wish .cart__empty::before { background-image: url("../assets/helper/sleep.webp"); }
.srch__empty::before { background-image: url("../assets/helper/confused.webp"); }

/* ---- «Заявка отправлена»: короткая вспышка кристалла ---- */
.cart__done:not([hidden]) .done__check { animation: ui-pop .6s var(--ease-out) both; }
.cart__done:not([hidden]) .done__head::after {
  content: ''; width: 26px; height: 26px; margin-left: auto; background: url("../assets/brand/sparkle.svg") center / contain no-repeat;
  animation: ui-flash 1.1s ease-out both;
}
@keyframes ui-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ui-flash { 0% { transform: scale(.2) rotate(-30deg); opacity: 0; } 35% { transform: scale(1.2) rotate(0); opacity: 1; } 100% { transform: scale(1) rotate(20deg); opacity: 0; } }

/* ---- поля: заполнено / верно ---- */
.prep__field:not(:placeholder-shown):valid:not(:focus) { border-color: color-mix(in srgb, #4fb89a 55%, transparent); }
.prep__field:disabled { opacity: .55; cursor: not-allowed; }

/* ---- подсказки: короткие пояснения термина по нажатию и наведению ---- */
.tip { position: relative; cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.tip[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 20; width: max-content; max-width: min(260px, 70vw);
  padding: 8px 12px; border-radius: var(--r-ctl); background: var(--mat-3); border: 1px solid var(--mat-edge); box-shadow: var(--mat-shadow-3);
  font: 400 13px/1.45 var(--font-body); color: var(--ink); text-align: left; white-space: normal;
  opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.tip:hover::after, .tip:focus::after, .tip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* смена темы мгновенная: переходов «всех свойств» нет (меняются только переменные) */

/* ---- связки между большими секциями на главной: линия-вода и кристалл ---- */
.section.catalog::before, .section.lboard::before, .section.reviews::before, .section.acadpromo::before {
  content: ''; position: absolute; left: 50%; top: 0; z-index: 1; width: min(560px, 72%); height: 12px; transform: translateX(-50%); pointer-events: none;
  opacity: calc(.7 * var(--decor-mid)); background: linear-gradient(90deg, transparent, var(--lav-300) 25%, var(--lav-400) 50%, var(--lav-300) 75%, transparent);
  -webkit-mask: url("../assets/brand/water-line.svg") 0 50% / 48px 12px repeat-x; mask: url("../assets/brand/water-line.svg") 0 50% / 48px 12px repeat-x;
}

/* ---- окно просмотра: плавное открытие, подпись, листание ---- */
.pbox[open] { animation: ui-open .28s var(--ease-out); }
.pbox[open]::backdrop { animation: ui-fade .28s ease; background: radial-gradient(circle at 50% 40%, rgba(70, 56, 120, .55), rgba(20, 15, 38, .78)); }
.pbox__img { transition: opacity .18s ease; }
.pbox__img.is-swap { opacity: 0; }
.pbox__cap { margin: 12px auto 0; max-width: min(92vw, 720px); text-align: center; font-size: var(--fs-small); color: rgba(255,255,255,.88); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.pbox__nav {
  position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--mat-edge); background: var(--mat-3); color: var(--ink); font-size: 20px; box-shadow: var(--mat-shadow-2);
  transition: transform var(--dur-fast) var(--ease-out);
}
.pbox__nav:hover { transform: scale(1.06); }
.pbox__nav--prev { left: 10px; } .pbox__nav--next { right: 10px; }
.pbox__nav[hidden] { display: none; }
@keyframes ui-open { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- без скриптов и без анимации контент виден ---- */
@media (scripting: none) { .reveal { opacity: 1 !important; animation: none !important; } }

/* ---- уважение к «меньше движения» и телефон ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__art::before, .hero__showcase::before, .hero__actions .btn--primary::before, .cta__box .btn--primary::before,
  .wiz__continue::before, .is-tick, .cart__done .done__check, .cart__done .done__head::after, .pbox[open], .pbox[open]::backdrop { animation: none !important; }
  .ui-light { display: none; }
  .hero__art::before, .hero__showcase, .hero__art::after, .hero__glow { translate: none; transition: none; }
}
@media (hover: none), (max-width: 760px) {
  .ui-light { display: none; }
  .hero__art::before, .hero__showcase, .hero__art::after, .hero__glow { translate: none; }
  .hero__showcase::before { display: none; }
  .tip[data-tip]::after { left: 0; transform: translate(0, 4px); }
  .tip:hover::after, .tip:focus::after { transform: translate(0, 0); }
}

.tip--q {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; border-radius: 50%; vertical-align: 1px;
  font: 600 12px/1 var(--font-body); color: var(--lav-600); text-decoration: none; cursor: help;
  background: var(--mat-1); border: 1px solid var(--mat-edge);
}
html[data-theme="dark"] .tip--q { color: #d8c8ff; }

/* ---------- 98. Материал LYSS: Liquid Glass + голографический край ----------
   Стекло здесь — не «белый + blur», а стопка слоёв: кривое отражение сверху, световое пятно,
   вторичный блик внизу, перламутровый уголок и внутренняя тень, а по краю — тонкая переливчатая
   кромка (градиент под прозрачной рамкой: border-box). Голография: лаванда ↔ циан ↔ жемчуг ↔
   нежно-розовый ↔ светло-голубой, насыщенность ограничена; активнее — на краях и в уголках,
   под текстом — спокойно.
   Пять уровней: Clear (чистое) · Frosted (матовое) · Milky (молочное, жемчужное) ·
   Crystal (грани и свет) · Deep (тёмная тема — те же уровни, но глубокая вода).
   Движение края — только на десктопе и без «меньше движения» (js/lyss-fx.js ставит --hx/--hy). */
@property --hx { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --hy { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
:root {
  --holo-lav: #d6c6fb; --holo-cyan: #b4e4f3; --holo-pearl: #ffffff; --holo-pink: #fcd3e8; --holo-sky: #cfe0ff;
  --holo-edge: linear-gradient(125deg, var(--holo-lav) 0%, var(--holo-cyan) 22%, var(--holo-pearl) 42%, var(--holo-pink) 62%, var(--holo-sky) 82%, var(--holo-lav) 100%);
  --holo-edge-soft: linear-gradient(125deg, rgba(255,255,255,.95) 0%, rgba(214,198,251,.8) 26%, rgba(255,255,255,.92) 48%, rgba(180,228,243,.8) 72%, rgba(255,255,255,.95) 100%);
  --holo-sheen: linear-gradient(115deg, rgba(180,228,243,.30), rgba(214,198,251,.26) 34%, rgba(255,255,255,.1) 52%, rgba(252,211,232,.24) 72%, rgba(207,224,255,.30));

  --g-none: linear-gradient(transparent, transparent);
  --g-spec:  radial-gradient(180px 100px at 10% 0%, rgba(255,255,255,.85), rgba(255,255,255,0) 72%);
  --g-curve: radial-gradient(150% 70% at 50% -34%, rgba(255,255,255,.7), rgba(255,255,255,0) 62%);
  --g-glint: radial-gradient(140px 100px at 100% 100%, rgba(207,225,255,.5), rgba(207,225,255,0) 72%);
  --g-iris:  radial-gradient(120px 90px at 100% 0%, rgba(214,198,251,.42), rgba(214,198,251,0) 72%);
  --g-facet: repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 28px, rgba(255,255,255,.2) 28px 29px);
  --g-inner:
    inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 -12px 20px -16px rgba(120,130,210,.4), inset 0 12px 22px -18px rgba(255,255,255,.9);
  --g-drop: 0 16px 34px -26px rgba(38,58,92,.5);
}
html[data-theme="dark"] {
  /* глубокая вода: фиолет, циан, синий, серебро и чуть контролируемого маджента */
  --holo-lav: #5a45b0; --holo-cyan: #3aa6c4; --holo-pearl: #cdd5ea; --holo-pink: #9c3f8a; --holo-sky: #4a68d6;
  --holo-edge-soft: linear-gradient(125deg, rgba(205,213,234,.55) 0%, rgba(90,69,176,.7) 28%, rgba(205,213,234,.5) 50%, rgba(58,166,196,.65) 74%, rgba(205,213,234,.55) 100%);
  --holo-sheen: linear-gradient(115deg, rgba(58,166,196,.18), rgba(90,69,176,.22) 36%, rgba(205,213,234,.06) 52%, rgba(156,63,138,.16) 72%, rgba(74,104,214,.2));
  --g-spec: radial-gradient(180px 100px at 10% 0%, rgba(214,200,255,.22), rgba(214,200,255,0) 72%);
  --g-curve: radial-gradient(150% 70% at 50% -34%, rgba(214,200,255,.16), rgba(214,200,255,0) 62%);
  --g-glint: radial-gradient(140px 100px at 100% 100%, rgba(58,166,196,.22), rgba(58,166,196,0) 72%);
  --g-iris: radial-gradient(120px 90px at 100% 0%, rgba(120,90,220,.26), rgba(120,90,220,0) 72%);
  --g-facet: repeating-linear-gradient(115deg, rgba(176,162,248,0) 0 28px, rgba(190,175,255,.1) 28px 29px);
  --g-inner: inset 0 1px 0 rgba(176,162,248,.23), inset 0 0 0 1px rgba(176,162,248,.057),
    inset 0 -12px 20px -16px rgba(0,0,0,.5), inset 0 14px 22px -18px rgba(190,170,255,.2);
  --g-drop: 0 18px 36px -24px rgba(0,0,0,.7);
}

/* ---- уровни: только переменные ---- */
html:root[data-theme] :is(.status, .badge, .cat__from, .review__tag, .deliver__list li, .info-note, .sched__note, .acad__tag, .modepick, .wiz__steps, .hero__stats, .wpack__items li, .wplus__list li, .wnav__packs, .purchase__test) {
  /* Clear — чистое, почти без заливки */
  --g-l1: var(--g-spec); --g-l2: var(--g-curve); --g-l3: var(--g-none); --g-l4: var(--g-none); --g-l5: var(--g-none);
  --g-base: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)); --g-edge: var(--holo-edge-soft);
}
html:root[data-theme] :is(.cat__body, .svc, .addcard, .plan:not(.plan--pro), .artplan, .ychset, .land__card, .land__steps li, .tl, .qz__card,
  .bdg__card, .lboard__card, .acad-tier, .acad-flow li, .wiz__choice:not(.is-on), .guide-card, .terms__box, .acadpromo__card, .opath, .acad-demo,
  .wnav__card, .wpack:not(.wpack--best):not(.wpack--hit), .purchase__card, .account__card) {
  /* Frosted — матовое: рассеянный фон, мягкий внутренний свет, уголок с перламутром */
  --g-l1: var(--g-spec); --g-l2: var(--g-curve); --g-l3: var(--g-iris); --g-l4: var(--g-glint); --g-l5: var(--g-none);
  --g-base: linear-gradient(rgba(255,255,255,.64), rgba(255,255,255,.64)); --g-edge: var(--holo-edge-soft);
}
html:root[data-theme] :is(.review:not(.is-featured), .accordion details, .faq details) {
  /* Milky — молочное, жемчужное: больше заливки, потому что здесь длинный текст */
  --g-l1: var(--g-spec); --g-l2: var(--g-curve); --g-l3: var(--g-none); --g-l4: var(--g-glint); --g-l5: var(--g-none);
  --g-base: linear-gradient(165deg, rgba(255,255,255,.9), rgba(246,240,255,.84) 55%, rgba(236,246,255,.86)); --g-edge: var(--holo-edge);
}
html:root[data-theme] :is(.tiers .plan--pro, .wiz__sum, .cta__box, .review.is-featured, .wiz__choice.is-on, .btn--primary, .wpack--best, .wpack--hit, .wplus) {
  /* Crystal — грани, перелив, свет: редкий акцент */
  --g-l1: var(--g-spec); --g-l2: var(--g-curve); --g-l3: var(--holo-sheen); --g-l4: var(--g-iris); --g-l5: var(--g-facet);
  --g-base: linear-gradient(rgba(255,255,255,.52), rgba(255,255,255,.4)); --g-edge: var(--holo-edge);
}
html[data-theme="dark"]:root :is(.status, .badge, .cat__from, .review__tag, .deliver__list li, .info-note, .sched__note, .acad__tag, .modepick, .wiz__steps, .hero__stats, .wpack__items li, .wplus__list li, .wnav__packs, .purchase__test) {
  --g-base: linear-gradient(rgba(176,162,248,.057), rgba(176,162,248,.057));
}
html[data-theme="dark"]:root :is(.cat__body, .svc, .addcard, .plan:not(.plan--pro), .artplan, .ychset, .land__card, .land__steps li, .tl, .qz__card,
  .bdg__card, .lboard__card, .acad-tier, .acad-flow li, .wiz__choice:not(.is-on), .guide-card, .terms__box, .acadpromo__card, .opath, .acad-demo,
  .wnav__card, .wpack:not(.wpack--best):not(.wpack--hit), .purchase__card, .account__card) {
  --g-base: linear-gradient(rgba(28,24,46,.64), rgba(28,24,46,.64));
}
html[data-theme="dark"]:root :is(.review:not(.is-featured), .accordion details, .faq details) {
  --g-base: linear-gradient(165deg, rgba(50,44,80,.8), rgba(34,30,58,.74));
}
html[data-theme="dark"]:root :is(.tiers .plan--pro, .wiz__sum, .cta__box, .review.is-featured, .wiz__choice.is-on, .btn--primary, .wpack--best, .wpack--hit, .wplus) {
  --g-base: linear-gradient(rgba(44,38,76,.62), rgba(30,26,54,.56));
}
/* у конкретных блоков — свой нижний слой: вода в итоге */
html:root[data-theme] .wiz__sum { --g-l5: url("../assets/brand/caustics.svg"); }

/* ---- применение: один набор правил на все уровни ---- */
html:root[data-theme] :is(
  .status, .badge, .cat__from, .review__tag, .deliver__list li, .info-note, .sched__note, .acad__tag, .modepick, .wiz__steps, .hero__stats, .wpack__items li, .wplus__list li, .wnav__packs, .purchase__test,
  .cat__body, .svc, .addcard, .plan, .artplan, .ychset, .land__card, .land__steps li, .tl, .qz__card, .bdg__card, .lboard__card, .acad-tier,
  .acad-flow li, .wiz__choice, .guide-card, .terms__box, .acadpromo__card, .opath, .acad-demo, .wnav__card, .wpack, .purchase__card, .account__card,
  .review, .accordion details, .faq details,
  .wiz__sum, .cta__box, .btn--primary, .wplus) {
  border: 1px solid transparent;
  background-image: var(--g-l1), var(--g-l2), var(--g-l3), var(--g-l4), var(--g-l5), var(--g-base), var(--g-edge);
  background-size: auto, auto, auto, auto, auto, auto, 240% 240%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, var(--hx) var(--hy);
  background-origin: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat, repeat;
  background-color: transparent;
  box-shadow: var(--g-inner), var(--g-drop);
  transition: background-position .7s var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur);
}
/* кнопка: свой цветной низ */
html:root[data-theme] .btn--primary { box-shadow: var(--g-inner), 0 12px 24px -14px rgba(110, 86, 168, .6); }
html:root[data-theme] .btn--primary:hover { box-shadow: var(--g-inner), 0 16px 30px -14px rgba(110, 86, 168, .7); }
/* выбранный вариант калькулятора: кромка ярче, свет по контуру */
html:root[data-theme] .wiz__choice.is-on { box-shadow: var(--g-inner), 0 0 0 3px color-mix(in srgb, var(--lav-400) 18%, transparent), var(--g-drop); }
/* акцентные панели прежде «переливались» движением фона целиком — теперь движется только кромка */
/* акцентные плашки по-прежнему «плавают» (holoGlide из базовых стилей, как в прежних версиях) — и поверх этого перетекает кромка */
html:root[data-theme] :is(.cta__box, .tiers .plan--pro, .prep__card, .calc__sum, .order__card, .status) {
  animation: holoGlide 17s ease-in-out infinite alternate, ui-edge 22s ease-in-out infinite alternate;
}
/* на телефоне размах мягче: узкая плашка не должна уезжать за край экрана */
@media (max-width: 760px) {
  html:root[data-theme] :is(.cta__box, .tiers .plan--pro, .prep__card, .calc__sum, .order__card, .status) {
    animation: ui-float 17s ease-in-out infinite alternate, ui-edge 22s ease-in-out infinite alternate;
  }
}
@keyframes ui-float {
  from { transform: translate3d(-2.5%, -3px, 0) rotate(-.8deg); }
  to   { transform: translate3d(2.5%, 3px, 0) rotate(.8deg); }
}
@keyframes ui-edge {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0% 40%; }
  to   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 100% 60%; }
}
/* плита за витриной: то же стекло, но с водным светом */
.hero__art::before {
  border: 1px solid transparent;
  background-image: url("../assets/brand/caustics.svg"), var(--g-spec), var(--g-curve), var(--holo-sheen), linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.3)), var(--holo-edge);
  background-size: 240px 240px, auto, auto, auto, auto, 240% 240%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 40% 50%;
  background-origin: padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-color: transparent; background-blend-mode: normal;
  box-shadow: var(--g-inner), var(--mat-shadow-2);
  animation: ui-water2 70s linear infinite;
}
html[data-theme="dark"] .hero__art::before {
  background-image: url("../assets/brand/caustics.svg"), var(--g-spec), var(--g-curve), var(--holo-sheen), linear-gradient(rgba(44,38,76,.55), rgba(30,26,54,.5)), var(--holo-edge);
}
@keyframes ui-water2 { to { background-position: 240px 240px, 0 0, 0 0, 0 0, 0 0, 40% 50%; } }

/* текст читается: у мелких чипов и подписей заливка плотнее, чем у «чистого» стекла */
html:root[data-theme] :is(.review__tag, .acad__tag, .cat__from) { --g-base: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)); }
html[data-theme="dark"]:root :is(.review__tag, .acad__tag, .cat__from) { --g-base: linear-gradient(rgba(176,162,248,.092), rgba(176,162,248,.092)); }

/* «меньше движения» и экономия: кромка статична */
@media (prefers-reduced-motion: reduce) {
  html:root[data-theme] :is(.cta__box, .tiers .plan--pro, .prep__card, .calc__sum, .order__card, .status), .hero__art::before { animation: none !important; }
}

/* ---------- 99. Арт-дирекшн, проход 3 ----------
   Очередь как мини-продукт, путь заказа, палитра поиска, рамка Live2D-примера, мотивы Stream/Merch,
   отклик карточек, переход между режимами, состояния ошибок. Материалы — из раздела 98. */

/* ---- первый экран: уровни глубины по указателю (фон 2 px · окружение 3 px · витрина 2 px · кристалл 5 px) ---- */
@property --wt { syntax: '<length>'; inherits: false; initial-value: 0px; }
.hero__glow { translate: calc(var(--px, 0) * 2px) calc(var(--py, 0) * 2px); }
.hero__art::before {
  --wt: 0px;
  translate: calc(var(--px, 0) * -3px) calc(var(--py, 0) * -2px);
  background-position:
    calc(var(--wt) + var(--px, 0) * -14px) calc(var(--wt) + var(--py, 0) * -10px),
    0 0, 0 0, calc(var(--px, 0) * 10px) 0, 0 0,
    calc(40% + var(--px, 0) * 18%) calc(50% + var(--py, 0) * 14%);
  animation: ui-water3 70s linear infinite;
  transition: translate .8s var(--ease-out), background-position .8s var(--ease-out);
}
@keyframes ui-water3 { to { --wt: 240px; } }
.hero__showcase { translate: calc(var(--px, 0) * 2px) calc(var(--py, 0) * 1.5px); }
.hero__art::after { translate: calc(var(--px, 0) * 5px) calc(var(--py, 0) * 4px); }
.hero__showcase::before { translate: calc(var(--px, 0) * 4px) calc(var(--py, 0) * 3px); transition: translate .8s var(--ease-out); }

/* ---- карточки услуг: стрелка-действие и вторичный знак при наведении ---- */
.cat__body::after {
  content: '→'; position: absolute; right: 14px; bottom: 14px; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; font-size: 15px; line-height: 1; color: var(--ink);
  background: color-mix(in srgb, var(--svc) 22%, rgba(255,255,255,.7)); border: 1px solid color-mix(in srgb, var(--svc) 50%, transparent);
  opacity: 0; transform: translateX(-8px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.cat:hover .cat__body::after, .cat:focus-visible .cat__body::after { opacity: 1; transform: none; }
@media (hover: none) { .cat__body::after { opacity: .85; transform: none; } }  /* на касании стрелка видна всегда */
.cat__from { transition: transform var(--dur) var(--ease-out); }
.cat:hover .cat__from { transform: translateX(2px); }

/* ---- Stream Design и Merch: свои фрагменты заголовка ---- */
#addons .section__head, #merch .section__head { position: relative; isolation: isolate; }
#addons .section__head::before {      /* Stream: стеклянные строки оверлея, как фрагмент чата */
  content: ''; position: absolute; z-index: -1; right: 3vw; top: 6px; width: 150px; height: 84px; pointer-events: none;
  opacity: calc(.85 * var(--decor-mid)); border-radius: var(--r-ctl);
  background:
    linear-gradient(var(--svc-stream), var(--svc-stream)) 12px 14px / 60px 6px no-repeat,
    linear-gradient(color-mix(in srgb, var(--svc-stream) 55%, transparent), transparent) 12px 30px / 108px 5px no-repeat,
    linear-gradient(color-mix(in srgb, var(--svc-stream) 55%, transparent), transparent) 12px 44px / 84px 5px no-repeat,
    linear-gradient(color-mix(in srgb, var(--svc-stream) 40%, transparent), transparent) 12px 58px / 96px 5px no-repeat,
    var(--mat-1);
  border: 1px solid var(--mat-edge-soft); transform: rotate(4deg);
}
#merch .section__head::before {       /* Merch: бирка товара на нитке */
  content: ''; position: absolute; z-index: -1; left: 4vw; top: 0; width: 66px; height: 92px; pointer-events: none;
  opacity: calc(.9 * var(--decor-mid)); transform: rotate(-9deg); border-radius: 10px;
  background:
    radial-gradient(circle at 50% 14px, rgba(255,255,255,.95) 0 4.5px, transparent 5px),
    linear-gradient(color-mix(in srgb, var(--svc-merch) 55%, transparent) 0 0) 16px 52px / 34px 3px no-repeat,
    linear-gradient(color-mix(in srgb, var(--svc-merch) 40%, transparent) 0 0) 16px 62px / 26px 3px no-repeat,
    color-mix(in srgb, var(--svc-merch) 14%, rgba(255,255,255,.55));
  border: 1px solid color-mix(in srgb, var(--svc-merch) 50%, transparent);
}

/* ---- LyssBoard: окно маленькой рабочей системы ---- */
.lboard__card { position: relative; padding-top: 52px; }
.lboard__card::before {
  content: 'LyssBoard · очередь'; position: absolute; left: 0; right: 0; top: 0; height: 38px; padding: 0 16px 0 66px;
  display: flex; align-items: center; font: 400 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--mat-edge-soft); border-radius: var(--r-card) var(--r-card) 0 0;
  background:
    radial-gradient(circle at 18px 19px, #f08fb6 0 4px, transparent 4.5px), radial-gradient(circle at 34px 19px, #f4c97e 0 4px, transparent 4.5px),
    radial-gradient(circle at 50px 19px, #7fd3b4 0 4px, transparent 4.5px), var(--mat-1);
}
html[data-lang="en"] .lboard__card::before { content: 'LyssBoard · queue'; }
.lqcard__pos {
  display: inline-grid; place-items: center; min-width: 2.7em; height: 2em; padding: 0 .5em; border-radius: var(--r-ctl);
  font: 400 12.5px var(--mono); letter-spacing: .06em; color: var(--ink);
  background: var(--mat-1); border: 1px solid var(--mat-edge-soft);
}
.lqcard:first-child { box-shadow: inset 3px 0 0 var(--lav-400), var(--g-inner), var(--g-drop); }
.lqcard:first-child .lqcard__pos { background: linear-gradient(135deg, var(--lav-500), var(--svc-academy)); color: #fff; border-color: transparent; }
.lqcard__status i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--lav-500)) 24%, transparent); }

/* ---- путь заказа после отправки: кристальная трасса ---- */
.nextsteps__n {
  width: 30px; height: 32px; border-radius: 0; color: var(--ink); box-shadow: none; justify-self: center;
  clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%);
  background: var(--holo-edge); background-size: 240% 240%;
  position: relative;
}
.nextsteps__n::before {   /* внутренняя грань: чтобы цифра стояла на светлой подложке */
  content: ''; position: absolute; inset: 2px; z-index: -1;
  clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%); background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,236,255,.88));
}
html[data-theme="dark"] .nextsteps__n::before { background: linear-gradient(180deg, rgba(60,52,98,.95), rgba(34,30,58,.95)); }
.nextsteps__n { z-index: 0; isolation: isolate; }
.nextsteps__lb .nextsteps__n { color: #fff; }
.nextsteps__lb .nextsteps__n::before { background: linear-gradient(135deg, var(--lav-500), var(--svc-academy)); }
.nextsteps li:not(:last-child)::before {
  left: 18px; width: 2px;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--lav-400) 60%, transparent) 0 5px, transparent 5px 10px);
}
.cart__done:not([hidden]) .nextsteps li { animation: ui-step .5s var(--ease-out) both; }
.cart__done:not([hidden]) .nextsteps li:nth-child(2) { animation-delay: .12s; }
.cart__done:not([hidden]) .nextsteps li:nth-child(3) { animation-delay: .24s; }
.cart__done:not([hidden]) .nextsteps li:nth-child(4) { animation-delay: .36s; }
@keyframes ui-step { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- поиск: командная палитра ---- */
html:root[data-theme] .srch__panel {
  border: 1px solid transparent; border-radius: var(--r-panel);
  background-image: var(--g-spec), var(--g-curve), var(--g-iris), linear-gradient(rgba(255,255,255,.86), rgba(252,250,255,.82)), var(--holo-edge);
  background-size: auto, auto, auto, auto, 240% 240%; background-origin: padding-box, padding-box, padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, padding-box, padding-box, border-box; background-color: transparent;
  box-shadow: var(--g-inner), 0 40px 90px -40px rgba(38, 30, 80, .55);
  -webkit-backdrop-filter: var(--blur-3); backdrop-filter: var(--blur-3);
  animation: ui-open .24s var(--ease-out);
}
html[data-theme="dark"]:root .srch__panel {
  background-image: var(--g-spec), var(--g-curve), var(--g-iris), linear-gradient(rgba(30,26,52,.9), rgba(22,18,40,.88)), var(--holo-edge);
}
.srch__input { font-size: 17px; }
.srch__group { font: 400 10.5px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); }
.srch__list [aria-selected="true"] .srch__item {
  background: linear-gradient(90deg, color-mix(in srgb, var(--lav-400) 18%, transparent), transparent 80%);
  box-shadow: inset 3px 0 0 var(--lav-400);
}
.srch__keys { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.srch__keys > span { display: inline-flex; align-items: center; gap: 4px; }
.srch__keys kbd {
  min-width: 22px; padding: 2px 6px; border-radius: 6px; text-align: center; font: 400 11px var(--mono); color: var(--ink-soft);
  background: var(--mat-1); border: 1px solid var(--mat-edge-soft); box-shadow: 0 1px 0 var(--mat-edge-soft);
}
@media (hover: none) { .srch__keys { display: none; } }
.srch__ask::before {      /* «спросить аксолотля» — с лицом аксолотля */
  content: ''; display: inline-block; width: 26px; height: 26px; margin-right: 8px; vertical-align: -8px;
  background: url("../assets/helper/idle.webp") center / contain no-repeat;
}

/* ---- Live2D-пример: рамка-витрина ---- */
.l2d__panel {
  padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid var(--mat-edge);
  background: var(--g-spec), var(--mat-3); -webkit-backdrop-filter: var(--blur-2); backdrop-filter: var(--blur-2); box-shadow: var(--g-inner), var(--g-drop);
}
.l2d__cap { font: 400 10.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.l2d__show { box-shadow: var(--g-inner), 0 12px 24px -14px rgba(110, 86, 168, .6); }
.l2d__spin { background: url("../assets/brand/bubble.svg") center / contain no-repeat; border: 0; animation: ui-spin 2.4s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.l2d.is-loading .l2d__loading, .l2d.is-failed .l2d__loading {
  border: 1px solid var(--mat-edge); background: var(--g-spec), var(--mat-3); box-shadow: var(--g-inner), var(--g-drop);
  -webkit-backdrop-filter: var(--blur-2); backdrop-filter: var(--blur-2);
}

/* ---- отзывы: компактный автор ---- */
.review footer { display: flex; align-items: center; gap: 10px; }
.review__ava {
  flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font: 500 13px var(--font-head); color: var(--ink);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), rgba(255,255,255,.3) 70%), var(--holo-edge); background-size: auto, 220% 220%;
  border: 1px solid var(--mat-edge);
}

/* ---- микровзаимодействия: ошибка и режим ---- */
.cart__status.is-error, .sched__error:not([hidden]), .lform__status.is-error { animation: ui-nudge .38s var(--ease-out); }
@keyframes ui-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }
html.mode-switching .container > * { animation: ui-mode .42s var(--ease-out); }
@keyframes ui-mode { from { opacity: .55; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero__art::before, .srch__panel, .l2d__spin, .cart__done .nextsteps li, .cart__status.is-error, .sched__error, html.mode-switching .container > * { animation: none !important; }
  .cat__body::after { transition: none; }
}
@media (max-width: 760px) {
  #addons .section__head::before, #merch .section__head::before { opacity: .45; }
  .lboard__card { padding-top: 48px; }
}

/* ---------- 100. Редактура: плотность, иерархия, цельность ----------
   Проход без новых функций. Три уровня громкости: PRIMARY — первый экран, ключевая услуга, итог;
   SECONDARY — каталог, тарифы, отзывы; UTILITY — прайсы, формы, FAQ, правила: тише,
   без перламутровых уголков и переливчатой кромки — просто чистое стекло. */

/* ---- UTILITY: спокойный материал для рабочих блоков ---- */
html:root[data-theme] :is(.rules, .terms, .faq, .prep, .bdg, .debut, .lessons) :is(.accordion details, .terms__box, .bdg__card, .tl, .land__card, .opath, .svc, .acad-tier) {
  --g-l3: var(--g-none); --g-l4: var(--g-none);
  --g-edge: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.6));
}
html[data-theme="dark"]:root :is(.rules, .terms, .faq, .prep, .bdg, .debut, .lessons) :is(.accordion details, .terms__box, .bdg__card, .tl, .land__card, .opath, .svc, .acad-tier) {
  --g-edge: linear-gradient(rgba(205,196,255,.19), rgba(205,196,255,.13));
}
.rules, .terms, .faq { --decor-mid: .35; }

/* ---- Шапка: навигация · утилиты · главное действие ---- */
.langbtn { position: relative; margin-left: 10px; }
.langbtn::before {
  content: ''; position: absolute; left: -9px; top: 18%; bottom: 18%; width: 1px; pointer-events: none;
  background: linear-gradient(transparent, var(--lav-300), transparent);
}
.site-header .searchbtn, .site-header .wishbtn, .site-header .themebtn, .site-header .langbtn { opacity: .92; }
.site-header .nav__cta { box-shadow: var(--g-inner), 0 10px 22px -14px rgba(110, 86, 168, .6); }

/* ---- режим: два способа ходить по сайту ---- */
.ico-sprout { --ico: url("../assets/brand/ico-sprout.svg"); }
html:root[data-theme] :is(.modepick, .nav__modes) button::before {
  content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -3px;
  background: currentColor; opacity: .85;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
html:root[data-theme] :is(.modepick, .nav__modes) button[data-mode-opt="novice"]::before { -webkit-mask-image: url("../assets/brand/ico-sprout.svg"); mask-image: url("../assets/brand/ico-sprout.svg"); }
html:root[data-theme] :is(.modepick, .nav__modes) button[data-mode-opt="pro"]::before { -webkit-mask-image: url("../assets/brand/shard.svg"); mask-image: url("../assets/brand/shard.svg"); }
html:root[data-theme] :is(.modepick, .nav__modes) button.is-on::before { color: var(--lav-500); opacity: 1; }

/* ---- /calc: четыре этапа как один инструмент ---- */
#budget .section__head::before, #project .section__head::before, #debut .section__head::before, #prep .prep__head::before {
  display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: var(--r-pill);
  font: 400 10.5px/1.5 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--mat-1); border: 1px solid var(--mat-edge-soft);
}
#budget .section__head::before { content: 'Этап 1 · найти направление'; }
#project .section__head::before { content: 'Этап 2 · собрать'; }
#debut .section__head::before { content: 'Этап 3 · уточнить'; }
#prep .prep__head::before { content: 'Этап 4 · итог и ТЗ'; }
html[data-lang="en"] #budget .section__head::before { content: 'Step 1 · find a direction'; }
html[data-lang="en"] #project .section__head::before { content: 'Step 2 · build'; }
html[data-lang="en"] #debut .section__head::before { content: 'Step 3 · refine'; }
html[data-lang="en"] #prep .prep__head::before { content: 'Step 4 · summary and brief'; }

/* дебют-планер: «дорожка» — линия проходит между карточками и соединяет отметки */
.debut__list { position: relative; }
.debut__list::before {
  content: ''; position: absolute; left: 24px; top: 28px; bottom: 28px; width: 2px; border-radius: 2px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--lav-400) 55%, transparent) 0 5px, transparent 5px 9px);
}
.debut__item { position: relative; z-index: 1; }

/* готовность ТЗ: десять делений вместо сплошной полосы — видно, сколько собрано (маска на всей шкале) */
.prep__meter {
  height: 10px; position: relative; overflow: hidden; border-radius: 3px;
  background: color-mix(in srgb, var(--lav-400) 18%, transparent);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%);
}
.prep__meter > i { display: block; height: 100%; background: var(--holo-edge); background-size: 300% 100%; border-radius: 0; }

/* ---- /live2d: Base — сдержанно, Advanced — богаче ---- */
.tiers .plan { position: relative; overflow: hidden; }
.tiers .plan::before {
  content: ''; position: absolute; right: -6px; top: -6px; width: 150px; height: 110px; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--svc-live2d) 55%, transparent) 1.2px, transparent 1.6px);
  background-size: 30px 30px; opacity: .55;
  -webkit-mask-image: radial-gradient(closest-side at 80% 20%, #000, transparent); mask-image: radial-gradient(closest-side at 80% 20%, #000, transparent);
}
.tiers .plan--pro::before {   /* Advanced: плотнее сетка, добавляются линии и вершины */
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--svc-live2d) 70%, transparent) 1.4px, transparent 1.9px),
    linear-gradient(to right, color-mix(in srgb, var(--svc-live2d) 22%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--svc-live2d) 22%, transparent) 1px, transparent 1px);
  background-size: 15px 15px; opacity: .8; width: 190px; height: 140px;
}
.tiers .plan > * { position: relative; }

/* ---- /widgets: кастомайзер в рамке продукта ---- */
.custom-embed__frame { position: relative; border-radius: var(--r-card); }
.custom-embed__frame::before {
  content: 'Живой редактор · меняй настройки'; position: absolute; z-index: 3; left: 12px; top: 10px; padding: 4px 10px; pointer-events: none;
  font: 400 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  border-radius: var(--r-pill); background: var(--mat-3); border: 1px solid var(--mat-edge); box-shadow: var(--mat-shadow-1);
  opacity: .92;
}
html[data-lang="en"] .custom-embed__frame::before { content: 'Live editor · change the settings'; }
.custom-embed__frame.is-ready::before { opacity: 0; transition: opacity .6s ease .8s; }
html:root[data-theme] .custom-embed__frame { border: 1px solid transparent; background-image: var(--g-none), var(--holo-edge); background-origin: padding-box, border-box; background-clip: padding-box, border-box; background-size: auto, 240% 240%; }
.custom-embed__start { background: var(--mat-3); color: var(--ink); border: 1px solid var(--mat-edge); box-shadow: var(--g-inner), 0 14px 28px -16px rgba(110, 86, 168, .6); }
.custom-embed__wait { color: var(--ink-soft); padding: 8px 14px; border-radius: var(--r-pill); background: var(--mat-3); border: 1px solid var(--mat-edge); }
.custom-embed__frame.is-loading .custom-embed__wait::before {
  content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px;
  background: url("../assets/brand/bubble.svg") center / contain no-repeat; animation: ui-spin 2.4s linear infinite;
}
.custom-embed__note { font-size: var(--fs-small); color: var(--ink-soft); }

/* ---- /academy: главы и график параметра ---- */
#academy { counter-reset: ch; }
#academy .land__block > .land__h2::before {
  counter-increment: ch; content: counter(ch, decimal-leading-zero);
  display: inline-block; margin-right: 12px; padding: 2px 8px; border-radius: 6px; vertical-align: .18em;
  font: 400 12px/1.4 var(--mono); letter-spacing: .12em; color: var(--acad);
  background: color-mix(in srgb, var(--acad) 12%, transparent); border: 1px solid color-mix(in srgb, var(--acad) 38%, transparent);
}
.acad-graph { width: 100%; height: auto; display: block; margin-top: var(--sp-2); overflow: visible; }
.acg-curve { fill: none; stroke: var(--acad); stroke-width: 2; stroke-linejoin: round; }
.acg-key { fill: var(--mat-3); stroke: var(--acad); stroke-width: 1.6; }
.acg-dot { fill: var(--acad); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--acad) 50%, transparent)); transition: cx .08s linear, cy .08s linear; }
.acg-drop { stroke: color-mix(in srgb, var(--acad) 55%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.acg-text { font: 400 8.5px var(--mono); letter-spacing: .08em; fill: var(--ink-soft); }

/* ---------- 101. Движение: токены, глубина, отклик ----------
   Правило прохода: эффект остаётся, только если он подчёркивает материал, помогает понять интерфейс,
   делает действие приятнее или создаёт характер — и не надоест на сотый визит. Поэтому здесь нет
   бесконечно плавающих деталей: движение — это ответ на действие, редкий блик или живое демо.
   Времена: FAST 140 мс · UI 220 мс · PANEL 320 мс · AMBIENT 14 с (только у ключевых блоков).
   Фоновое (блики) ставится на паузу, пока блок вне экрана (.is-offscreen — js/lyss-fx.js),
   при «меньше движения» не запускается. */
:root {
  --m-fast: 140ms; --m-ui: 220ms; --m-panel: 320ms; --m-ambient: 14s;
  --m-ease: var(--ease-out); --m-io: cubic-bezier(.65, 0, .35, 1);
}
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }

/* ---- первый экран: стеклянная панель между слоями (персонаж и интерфейс — в одном пространстве) ---- */
.hero__pane {
  position: absolute; z-index: 3; left: 4px; bottom: 96px; width: 50px; height: 98px; pointer-events: none;
  border-radius: 26px 26px 14px 14px; border: 1px solid transparent;
  background-image: radial-gradient(40px 60px at 18% 8%, rgba(255,255,255,.75), rgba(255,255,255,0)), var(--holo-sheen),
                    linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.06)), var(--holo-edge);
  background-size: auto, auto, auto, 260% 260%; background-origin: padding-box, padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, padding-box, border-box;
  background-position: 0 0, 0 0, 0 0, calc(30% + var(--px, 0) * 40%) calc(50% + var(--py, 0) * 30%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -10px 18px -12px rgba(120,130,210,.4), 0 14px 26px -18px rgba(38,58,92,.5);
  -webkit-backdrop-filter: blur(3px) saturate(130%); backdrop-filter: blur(3px) saturate(130%);
  translate: calc(var(--px, 0) * 6px) calc(var(--py, 0) * 4px);
  transition: translate .8s var(--m-ease), background-position .8s var(--m-ease);
}

/* ---- блик по грани кристалла: один за раз, редко (js/lyss-fx.js выбирает кто) ---- */
@keyframes ui-gem-glint {
  0%, 100% { filter: drop-shadow(0 6px 8px rgba(80,70,150,.28)) brightness(1); }
  40% { filter: drop-shadow(0 0 12px rgba(255,255,255,.95)) brightness(1.55) saturate(1.2); }
}
.hero__art.is-glint::after, :is(.tiers .plan--pro, .wiz__sum, .review.is-featured, .acad-tier).is-glint::after { animation: ui-gem-glint 1.1s var(--m-io); }

/* ---- раскрытия: изображение — маской, техническое — по узлам (один раз) ---- */
.reveal.visible :is(.land__fig, .ychpic, .slider__frame, .merch-card__media) { animation: ui-mask .75s var(--m-ease) both; }
@keyframes ui-mask { from { clip-path: inset(0 0 100% 0 round 14px); opacity: .4; } to { clip-path: inset(0 0 0 0 round 14px); opacity: 1; } }
.reveal.visible .acad-chain li { animation: ui-node .45s var(--m-ease) both; }
.reveal.visible .acad-chain li:nth-child(2) { animation-delay: .06s; } .reveal.visible .acad-chain li:nth-child(3) { animation-delay: .12s; }
.reveal.visible .acad-chain li:nth-child(4) { animation-delay: .18s; } .reveal.visible .acad-chain li:nth-child(5) { animation-delay: .24s; }
.reveal.visible .acad-chain li:nth-child(6) { animation-delay: .30s; } .reveal.visible .acad-chain li:nth-child(7) { animation-delay: .36s; }
.reveal.visible .acad-chain li:nth-child(8) { animation-delay: .42s; } .reveal.visible .acad-chain li:nth-child(9) { animation-delay: .48s; }
@keyframes ui-node { from { opacity: 0; transform: translateY(6px) scale(.94); } to { opacity: 1; transform: none; } }

/* ---- карточки услуг: свой «мир» направления на наведении (только пока курсор на карточке) ---- */
.cat__img::after, .cat::before { transition: transform var(--m-ui) var(--m-ease), box-shadow var(--m-ui) var(--m-ease), filter var(--m-ui); }
.cat[href$="/live2d"]:hover::before { box-shadow: 0 0 0 5px color-mix(in srgb, var(--svc) 22%, transparent), 0 0 0 11px color-mix(in srgb, var(--svc) 10%, transparent); }
.cat[href$="/live2d"]:hover .cat__img::after { transform: scale(1.3); }
.cat[href$="/art"]:hover::before, .cat[href$="#ych"]:hover::before {
  box-shadow: 4px 4px 0 -1px rgba(255,255,255,.85), 4px 4px 0 0 color-mix(in srgb, var(--svc) 50%, transparent), 8px 8px 0 -1px rgba(255,255,255,.7), 8px 8px 0 0 color-mix(in srgb, var(--svc) 30%, transparent);
}
.cat[href$="/widgets"]:hover::before, .cat[href$="#chat"]:hover::before, .cat[href$="#banner"]:hover::before { animation: ui-ripple 1.3s var(--m-io) 2; }
@keyframes ui-ripple { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--svc) 35%, transparent); } 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--svc) 0%, transparent); } }
.cat[href$="/merch"]:hover::before { outline: 2px dashed color-mix(in srgb, var(--svc) 65%, transparent); outline-offset: 3px; }
.cat[href$="/merch"]:hover .cat__img img { filter: brightness(1.06) saturate(1.12); }
.cat[href*="learn"]:hover .cat__img::after, .cat[href*="academy"]:hover .cat__img::after { transform: rotate(90deg) scale(1.15); }

/* ---- путь новичка: Идея → Арт → Нарезка → Риг → Готово (виден только в режиме «Новичок») ---- */
.guide-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.guide-path li {
  display: inline-flex; align-items: center; font: 400 11px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim);
  transition: color var(--m-ui) var(--m-ease);
}
.guide-path li::before {
  content: ''; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent;
  transition: background var(--m-ui), box-shadow var(--m-ui), transform var(--m-ui) var(--m-ease);
}
.guide-path li:not(:last-child)::after { content: ''; width: 22px; height: 1px; margin: 0 10px; background: color-mix(in srgb, var(--lav-400) 40%, transparent); }
.guide-path li.is-done { color: var(--ink-soft); }
.guide-path li.is-done::before { background: var(--lav-400); border-color: var(--lav-400); }
.guide-path li.is-now { color: var(--ink); }
.guide-path li.is-now::before { background: var(--holo-edge); border-color: var(--lav-500); transform: scale(1.25); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lav-400) 22%, transparent); }

/* ---- режим: акцентная линия под переключателем отвечает на выбор ---- */
.modepick::before {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -3px; height: 2px; border-radius: 2px; opacity: .8;
  background: linear-gradient(90deg, var(--lav-400), var(--svc-stream)); transform-origin: left; transform: scaleX(.35);
  transition: transform var(--m-panel) var(--m-io);
}
html[data-mode="pro"] .modepick::before { transform: scaleX(1); }
html.mode-switching .guide-path { animation: ui-mode var(--m-panel) var(--m-ease); }

/* ---- отзывы: у главного — тонкая голографическая линия цитаты (статичная) ---- */
.review.is-featured p { position: relative; padding-left: 16px; }
.review.is-featured p::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--holo-edge); background-size: 100% 300%; }

/* ---- заказ отправлен: короткая «церемония» — кольца и цветение, один раз ---- */
.done__check { position: relative; }
.cart__done:not([hidden]) .done__check::before, .cart__done:not([hidden]) .done__check::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--lav-400) 60%, #fff);
  animation: ui-ring 1.6s var(--m-ease) both;
}
.cart__done:not([hidden]) .done__check::after { animation-delay: .35s; }
@keyframes ui-ring { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
.cart__done:not([hidden]) .done__head { position: relative; }
.cart__done:not([hidden]) .done__head::before {
  content: ''; position: absolute; left: -10px; top: -22px; width: 130px; height: 90px; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(214,198,251,.5), rgba(180,228,243,.25) 55%, transparent);
  animation: ui-bloom 1.4s var(--m-ease) both;
}
@keyframes ui-bloom { 0% { opacity: 0; transform: scale(.4); } 45% { opacity: 1; } 100% { opacity: .55; transform: scale(1); } }

/* ---- большая CTA-плашка: тихий водный свет (статичный) ---- */
html:root[data-theme] .cta__box { --g-l5: url("../assets/brand/caustics.svg"); }

/* ---- /academy: движение как свойство диаграммы; маятник качается по запросу, а не по кругу ---- */
.acd-feat-g { transform: translate(calc(var(--a) * 1.1px), calc(var(--ay, 0) * .9px)) scaleX(calc(1 - var(--abs) * .0035)) scaleY(calc(1 - var(--aby, 0) * .0035)); }
.acad-demo--phys { margin-top: var(--sp-4); }
.acp-anchor { fill: var(--acad); }
.acp-strand { transform-origin: 120px 16px; }
.acp-strand.is-swing { animation: ui-pendulum calc(5.6s - var(--k, 5) * .38s) ease-out 1 both; }
.acp-line { fill: none; stroke: color-mix(in srgb, var(--acad) 70%, transparent); stroke-width: 3; stroke-linecap: round; }
.acp-tip { fill: color-mix(in srgb, var(--acad) 25%, #fff); stroke: var(--acad); stroke-width: 1.6; }
@keyframes ui-pendulum {
  0% { transform: rotate(0deg); } 10% { transform: rotate(17deg); } 24% { transform: rotate(-12deg); } 38% { transform: rotate(8deg); }
  52% { transform: rotate(-5deg); } 66% { transform: rotate(2.5deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); }
}

/* ---- виджеты: живое превью чата (пауза вне экрана) ---- */
.pvmsg.is-new { animation: ui-msg .45s var(--m-ease) both; }
.pvmsg.is-out { animation: ui-msg-out .3s var(--m-io) both; }
@keyframes ui-msg { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ui-msg-out { to { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* ---- поиск: полоса выбора течёт плавнее ---- */
.srch__item { transition: background var(--m-ui) var(--m-ease), box-shadow var(--m-ui) var(--m-ease); }

/* ---- «меньше движения» и телефон ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__pane { display: none; }
  .is-glint::after, .acp-strand.is-swing, .pvmsg.is-new, .pvmsg.is-out,
  .cart__done .done__check::before, .cart__done .done__check::after, .cart__done .done__head::before,
  .cat[href$="/widgets"]:hover::before, .reveal.visible :is(.land__fig, .ychpic, .slider__frame, .merch-card__media), .reveal.visible .acad-chain li { animation: none !important; }
}
@media (max-width: 760px) { .hero__pane { display: none; } }

/* график параметра: не шире схемы рядом — иначе он перетягивает внимание на себя */
.acad-graph { max-width: 300px; }
.acad-demo__ctl input[type="range"] { max-width: 420px; }

/* ---------- 102. Шапка-кластер, корзина этапами, режимы ---------- */

/* ---- шапка: меню заметно, утилиты — одной стеклянной капсулой ----
   [режим] | [язык · тема] | [поиск · избранное · корзина] */
.nav a { color: var(--ink); font-weight: 600; font-size: 15px; }
.nav a:hover { color: var(--lav-600); }
.hutil {
  display: inline-flex; align-items: center; gap: 2px; flex: none; margin-left: 10px; padding: 4px;
  border-radius: var(--r-pill); background: var(--mat-1); border: 1px solid var(--mat-edge-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.hutil :is(.langbtn, .wishbtn, .themebtn, .cartbtn) {
  width: 36px; height: 36px; min-width: 36px; margin: 0; padding: 0; display: inline-grid; place-items: center; position: relative;
  background: transparent; border: 1px solid transparent; box-shadow: none; border-radius: 50%;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hutil .langbtn { width: auto; min-width: 36px; padding: 0 9px; border-radius: var(--r-pill); font-size: 11.5px; letter-spacing: .08em; }
.hutil .themepick { margin: 0; display: inline-flex; }
.hutil :is(.langbtn, .wishbtn, .themebtn, .cartbtn):hover { background: var(--mat-1); border-color: var(--mat-edge-soft); transform: none; box-shadow: none; }
.hutil svg { width: 19px; height: 19px; }
/* группы разделены тонкой чертой */
.hutil__mode, .hutil .langbtn, .hutil .themepick, .hutil .srchbtn { position: relative; }
.hutil .langbtn::before, .hutil .srchbtn::before {
  content: ''; position: absolute; left: -2px; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(transparent, var(--lav-300), transparent);
}
.hutil__mode { display: inline-flex; gap: 2px; margin-right: 2px; }
.hutil__mode button {
  width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--ink-soft);
  transition: background var(--m-ui) var(--m-ease), color var(--m-ui), border-color var(--m-ui);
}
.hutil__mode button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hutil__mode button::before {
  content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.hutil__mode button[data-mode-opt="novice"]::before { -webkit-mask-image: url("../assets/brand/ico-sprout.svg"); mask-image: url("../assets/brand/ico-sprout.svg"); }
.hutil__mode button[data-mode-opt="pro"]::before { -webkit-mask-image: url("../assets/brand/shard.svg"); mask-image: url("../assets/brand/shard.svg"); }
.hutil__mode button.is-on { color: var(--lav-600); background: var(--mat-crystal); border-color: color-mix(in srgb, var(--lav-400) 50%, transparent); }
html[data-theme="dark"] .hutil__mode button.is-on { color: #e4dbff; }
.hutil .wishbtn__n, .hutil .cartbtn__n { top: -3px; right: -3px; }
@media (max-width: 1100px) { .hutil__mode { display: none; } }  /* режим остаётся в меню и на первом экране */
@media (max-width: 720px) {
  .site-header .hutil { order: 5; margin-left: 0; padding: 3px; }
  .site-header .hutil :is(.themepick, .langbtn) { display: none; }
  .site-header .burger { order: 7; }
}

/* ---- корзина: этапы ---- */
.cstepper {
  display: flex; gap: 2px; margin: 0 0 var(--sp-4); padding: 4px; list-style: none; border-radius: var(--r-pill);
  background: var(--mat-1); border: 1px solid var(--mat-edge-soft);
}
.cstepper li {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 4px;
  border-radius: var(--r-pill); font-size: 12.5px; color: var(--ink-dim); transition: background var(--m-ui) var(--m-ease), color var(--m-ui);
}
.cstepper li[hidden] { display: none; }
.cstepper li span {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none;
  font: 400 11px var(--mono); border: 1px solid currentColor;
}
.cstepper li b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cstepper li.is-done { color: var(--ink-soft); cursor: pointer; }
.cstepper li.is-done span { background: var(--lav-400); border-color: var(--lav-400); color: #fff; }
.cstepper li.is-current { color: #fff; background: linear-gradient(120deg, var(--lav-500), var(--lav-400)); }
.cstepper li.is-current span { border-color: rgba(255,255,255,.7); }
@media (max-width: 420px) { .cstepper li:not(.is-current) b { display: none; } }

.cstep { display: none; }
.cstep.is-current { display: grid; gap: var(--sp-3); animation: ui-step-in var(--m-panel) var(--m-ease); }
@keyframes ui-step-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.cnav { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.cnav .cnav__next { margin-left: auto; }
.cstep__err { margin: 0; font-size: var(--fs-small); font-weight: 600; color: #d24a6a; }
.crecap {
  display: grid; grid-template-columns: auto 1fr; gap: 6px var(--sp-4); margin: 0 0 var(--sp-2); padding: var(--sp-4);
  border-radius: var(--r-card); background: var(--mat-1); border: 1px solid var(--mat-edge-soft); font-size: var(--fs-small);
}
.crecap:empty { display: none; }
.crecap dt { color: var(--ink-soft); }
.crecap dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* ---- режим как разгрузка интерфейса ---- */
/* Новичок: маршрут и меньше технических опций; опытный: быстрые ссылки и плотнее */
html[data-mode="novice"] [data-tech], html[data-mode="novice"] [data-pro] { display: none !important; }
.guide-path { padding: 10px 14px; border-radius: var(--r-card); background: var(--mat-1); border: 1px solid var(--mat-edge-soft); width: fit-content; max-width: 100%; }
.quick-links { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-5) 0 0; }
.quick-links a {
  padding: 6px 12px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: var(--mat-1); border: 1px solid var(--mat-edge-soft); transition: background var(--m-ui) var(--m-ease), transform var(--m-ui) var(--m-ease);
}
.quick-links a:hover { background: var(--mat-crystal); transform: translateY(-1px); }
html[data-mode="pro"] .section__lead { font-size: 15.5px; line-height: 1.55; max-width: 58ch; }
html[data-mode="pro"] .catalog__grid { --cat-h: clamp(250px, 24vw, 300px); gap: var(--sp-3); }
html[data-mode="pro"] .hero__sub { font-size: 16.5px; }
html[data-mode="pro"] .hero__stats { margin-top: var(--sp-4); }
html[data-mode="novice"] .hero__sub { font-size: var(--fs-lead); }

@media (prefers-reduced-motion: reduce) { .cstep.is-current { animation: none; } }

/* ---- режим: одна точка управления — шапка; в первом экране только статус ---- */
.modenow {
  display: flex; align-items: flex-start; gap: 8px; max-width: 46ch; margin: var(--sp-5) 0 0;
  font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft);
}
.modenow::before {
  content: ''; flex: none; width: 16px; height: 16px; margin-top: 2px; background: var(--lav-400);
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
html[data-mode="novice"] .modenow::before { -webkit-mask-image: url("../assets/brand/ico-sprout.svg"); mask-image: url("../assets/brand/ico-sprout.svg"); }
html[data-mode="pro"] .modenow::before { -webkit-mask-image: url("../assets/brand/shard.svg"); mask-image: url("../assets/brand/shard.svg"); }
html.mode-switching .modenow { animation: ui-mode var(--m-panel) var(--m-ease); }

/* всплывашка режима у кластера шапки — вниз и вправо */
.hutil__mode { position: relative; }
.hutil__mode .modetip { bottom: auto; top: calc(100% + 14px); left: auto; right: -6px; }
.hutil__mode .modetip::after { top: -5px; margin-top: 0; left: auto; right: 24px; border-width: 1px 0 0 1px; }
@media (hover: hover) and (pointer: fine) { .hutil__mode:hover .modetip { opacity: 1; visibility: visible; transform: none; transition-delay: .15s, .15s, 0s; } }
.hutil__mode:has(:focus-visible) .modetip, .hutil__mode.is-tip .modetip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* режим виден в шапке с 721 px; на телефоне он в меню */
@media (max-width: 1100px) { .hutil__mode { display: inline-flex; } }
@media (max-width: 720px) { .hutil__mode { display: none; } }
@media (max-width: 960px) { .hutil .langbtn::before, .hutil .srchbtn::before { display: none; } }

/* ---- LyssBoard: «очередь временно недоступна» вместо голой ошибки ---- */
.lboard__off {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-card); background: var(--mat-1); border: 1px solid var(--mat-edge-soft);
}
.lboard__off[hidden] { display: none; }
.lboard__off-ico { width: 56px; height: 56px; background: url("../assets/brand/empty-crystal.svg") center / contain no-repeat; filter: drop-shadow(0 8px 10px rgba(110,100,190,.2)); }
.lboard__off-txt b { display: block; font-weight: 500; font-size: 16px; color: var(--ink); }
.lboard__off-txt p { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.lboard__card.is-error .lboard__state:empty { display: none; }
@media (max-width: 640px) {
  .lboard__off { grid-template-columns: auto minmax(0, 1fr); }
  .lboard__off .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ---- шапка на средней ширине: меню не наезжает на «Заказать» и кластер ---- */
@media (max-width: 1360px) {
  .header__inner { gap: 14px; }
  .nav { gap: 16px; }
  .nav a { font-size: 14.5px; }
  .hutil { margin-left: 0; }
}
@media (max-width: 1180px) {
  .nav { gap: 12px; }
  .nav a { font-size: 13.5px; }
}
@media (max-width: 1220px) { .nav__cta { display: none; } }   /* «Заказать» — есть корзина, блок контактов и нижняя капсула */

/* ---- конструктор: один следующий вопрос, без серых недоступных полей ---- */
.wiz__pane[data-stage="1"] .wiz__q--sub, .wiz__pane[data-stage="1"] .wiz__q--sub ~ * { display: none; }
.wiz__pane[data-stage="2"] .wiz__q--sub, .wiz__pane[data-stage="2"] .wiz__q--sub ~ * { animation: ui-step-in var(--m-panel) var(--m-ease); }
.wiz:has(.wiz__pane.is-active[data-stage="1"]) .wiz__next { display: none; }
.wiz:has(.wiz__pane.is-active[data-stage="1"]) .wiz__nav { justify-content: flex-start; }
.calc__list:not(.is-open) .is-rest { display: none; }
.calc__list.is-open .is-rest { animation: ui-step-in var(--m-panel) var(--m-ease); }
.calc__more {
  margin: var(--sp-3) 0 0; padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer; font: 500 var(--fs-small) var(--font-body); color: var(--ink);
  background: var(--mat-1); border: 1px dashed color-mix(in srgb, var(--lav-400) 55%, transparent);
  transition: background var(--m-ui) var(--m-ease), border-color var(--m-ui);
}
.calc__more:hover { background: var(--mat-crystal); border-style: solid; }
@media (prefers-reduced-motion: reduce) { .calc__list.is-open .is-rest, .wiz__pane[data-stage="2"] * { animation: none !important; } }

/* ---------- 103. Виджеты LYSS: обзор, новые блоки, паки, персональная настройка ---------- */

/* ---- обзор: шесть карточек-ссылок ---- */
.wnav { margin-top: 56px; }
.wnav__head { text-align: center; max-width: 720px; margin: 0 auto var(--sp-6); }
.wnav__head h2 { font-size: clamp(26px, 3.2vw, 34px); margin: 10px 0 12px; }
.wnav__head p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.wnav__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); }
.wnav__card {
  position: relative; display: grid; gap: 6px; align-content: start; padding: var(--sp-4);
  color: var(--ink); text-decoration: none;   /* материал, кромка и подъём — из системы (уровень Frosted) */
}
.wnav__card b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.wnav__card small { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.wnav__card em { margin-top: 4px; font: 600 15px var(--font-head); font-style: normal; color: var(--lav-600); }
.wnav__ico {
  width: 30px; height: 30px; margin-bottom: 4px; background: linear-gradient(135deg, var(--lav-500), #7fc8e0);
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.wnav__card[data-w="chat"] .wnav__ico { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5.5h16v10H9l-5 4z'/><path d='M8 9.5h8M8 12.5h5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5.5h16v10H9l-5 4z'/><path d='M8 9.5h8M8 12.5h5'/></svg>"); }
.wnav__card[data-w="banner"] .wnav__ico { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='8' width='19' height='8' rx='4'/><circle cx='7' cy='12' r='1.6'/><path d='M11 12h7'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='8' width='19' height='8' rx='4'/><circle cx='7' cy='12' r='1.6'/><path d='M11 12h7'/></svg>"); }
.wnav__card[data-w="overlay"] .wnav__ico { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4.5' width='18' height='15' rx='3'/><rect x='6.5' y='8' width='11' height='8' rx='1.5'/><path d='M3 8h2M19 16h2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4.5' width='18' height='15' rx='3'/><rect x='6.5' y='8' width='11' height='8' rx='1.5'/><path d='M3 8h2M19 16h2'/></svg>"); }
.wnav__card[data-w="donate"] .wnav__ico { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='10' width='19' height='6.5' rx='3.25'/><path d='M2.5 13.25h11'/><path d='M12 7V4.5M16.5 7.5 18 5.8M7.5 7.5 6 5.8'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='10' width='19' height='6.5' rx='3.25'/><path d='M2.5 13.25h11'/><path d='M12 7V4.5M16.5 7.5 18 5.8M7.5 7.5 6 5.8'/></svg>"); }
.wnav__card[data-w="transition"] .wnav__ico { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='5' width='9' height='14' rx='2'/><path d='M14 5h5.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H14'/><path d='M9 12h9M15 9l3 3-3 3'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='5' width='9' height='14' rx='2'/><path d='M14 5h5.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H14'/><path d='M9 12h9M15 9l3 3-3 3'/></svg>"); }
.wnav__card[data-w="roulette"] .wnav__ico { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12.5' r='8'/><path d='M12 4.5v8l5.6 5.6M12 12.5 6.4 18.1M12 12.5l7.9-1.4'/><path d='M12 2.5v2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12.5' r='8'/><path d='M12 4.5v8l5.6 5.6M12 12.5 6.4 18.1M12 12.5l7.9-1.4'/><path d='M12 2.5v2'/></svg>"); }
.wnav__packs {
  display: table; margin: var(--sp-5) auto 0; padding: 9px 18px; font-weight: 600; font-size: 14px;
  color: var(--ink); text-decoration: none;   /* уровень Clear, как у плашек-статусов */
  transition: transform var(--m-ui) var(--m-ease);
}
.wnav__packs:hover { transform: translateY(-2px); }

/* у новых виджетов по шесть особенностей — три колонки, как у баннера */
.wpro .chatpro__feats { grid-template-columns: repeat(3, 1fr); }

/* ---- паки ---- */
.wpacks { margin-top: 56px; }
.wpacks__head { text-align: center; max-width: 680px; margin: 0 auto var(--sp-6); }
.wpacks__head h3 { font-size: 30px; margin: 10px 0 12px; }
.wpacks__head p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.wpacks__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.wpack {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5);
}
.wpack h5 { margin: 0; font: 600 21px var(--font-head); color: var(--ink); }
.wpack__sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.wpack__items { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wpack__items li { padding: 4px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.wpack__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: auto; padding-top: var(--sp-2); }
.wpack__price s { font-size: 14px; color: var(--ink-dim); }
.wpack__price b { font: 700 28px var(--font-head); color: var(--lav-600); line-height: 1.1; }
.wpack__price em { flex-basis: 100%; font-style: normal; font-size: 13px; font-weight: 600; color: #2f9a7a; }
html[data-theme="dark"] .wpack__price em { color: #8fe0c2; }
.wpack .btn { align-self: flex-start; }
.wpack__tag {
  position: absolute; top: -11px; right: var(--sp-4); padding: 4px 11px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #fff; background: linear-gradient(120deg, var(--lav-500), #e486b4);
}

/* ---- персональная настройка ---- */
.wplus {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-5);
  margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6);
}
.wplus__ico { width: 64px; height: 64px; background: url("../assets/brand/crystal.svg") center / contain no-repeat; filter: drop-shadow(0 8px 12px rgba(110,100,190,.22)); }
.wplus__txt h3 { margin: 6px 0 8px; font-size: 22px; }
.wplus__txt p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; max-width: 68ch; }
.wplus__list { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.wplus__list li { padding: 3px 10px; font-size: 12.5px; font-weight: 600; }
.wplus__buy { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }
.wplus__buy .chatpro__price { font-size: 28px; white-space: nowrap; }

@media (max-width: 1180px) {
  .wnav__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 940px) {
  .wpacks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpro .chatpro__feats { grid-template-columns: repeat(2, 1fr); }
  .wplus { grid-template-columns: auto minmax(0, 1fr); }
  .wplus__buy { grid-column: 1 / -1; justify-items: start; text-align: left; }
}
@media (max-width: 560px) {
  .wnav__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpacks__grid { grid-template-columns: 1fr; }
  .wpro .chatpro__feats { grid-template-columns: 1fr; }
  .wplus { grid-template-columns: 1fr; padding: var(--sp-5); }
  .wplus__ico { width: 48px; height: 48px; }
}

/* ---- заголовок «Оформление на заказ» над прайсом, галереей и логотипами ---- */
.wcustom { text-align: center; max-width: 720px; margin: 72px auto 28px; }
.wcustom h2 { font-size: var(--fs-h2); margin: 10px 0 12px; }
.wcustom p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }

/* ---------- 104. Юридические документы (/offer, /privacy, /delivery, /refund) и ссылки в подвале ---------- */
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.footer__legal a { font-size: 12.5px; color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; transition: color var(--m-ui); }
.footer__legal a:hover { color: var(--lav-600); }

.legal__bar { position: sticky; top: 0; z-index: 20; padding: 10px 0; background: rgba(246,240,253,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--mat-edge-soft); }
html[data-theme="dark"] .legal__bar { background: rgba(21,18,30,.86); }
.legal__barin { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.legal { padding: var(--sp-7, 56px) 0 var(--sp-7, 56px); }
.legal__wrap { max-width: 860px; }
.legal__head { margin-bottom: var(--sp-5); }
.legal__head h1 { font-size: var(--fs-h1); margin: 10px 0 12px; }
.legal__sub { margin: 0 0 6px; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.5; }
.legal__date { margin: 0; font: 400 13px var(--mono); letter-spacing: .04em; color: var(--ink-dim); }
.legal__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sp-5) 0; }
.legal__tabs a {
  padding: 7px 14px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none;
  background: var(--mat-1); border: 1px solid var(--mat-edge-soft); transition: background var(--m-ui) var(--m-ease), transform var(--m-ui) var(--m-ease);
}
.legal__tabs a:hover { background: var(--mat-crystal); transform: translateY(-1px); }
.legal__tabs a[aria-current="page"] { background: var(--mat-crystal); border-color: color-mix(in srgb, var(--lav-400) 55%, transparent); color: var(--lav-600); }
html[data-theme="dark"] .legal__tabs a[aria-current="page"] { color: #e4dbff; }

.legal__toc { margin-bottom: var(--sp-6); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-card); background: var(--mat-1); border: 1px solid var(--mat-edge-soft); }
.legal__toc summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.legal__toc ol { margin: var(--sp-3) 0 4px; padding-left: 1.4em; columns: 2; column-gap: var(--sp-6); font-size: var(--fs-small); line-height: 1.7; }
.legal__toc a { color: var(--ink-soft); text-decoration: none; }
.legal__toc a:hover { color: var(--lav-600); text-decoration: underline; }

.legal__body h2 { margin: var(--sp-7, 48px) 0 var(--sp-3); font-size: 22px; font-weight: 500; line-height: 1.25; scroll-margin-top: 80px; }
.legal__body h2:first-child { margin-top: 0; }
.legal__p { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 0 var(--sp-2); margin: 0 0 var(--sp-3); line-height: 1.65; color: var(--ink); font-size: 15.5px; }
.legal__p--plain { display: block; margin-bottom: 6px; }
.legal__n { font: 400 13px var(--mono); color: var(--ink-dim); padding-top: .25em; }
.legal__p a, .legal__body li a { color: var(--lav-600); overflow-wrap: anywhere; }
html[data-theme="dark"] .legal__p a, html[data-theme="dark"] .legal__body li a { color: #cdbcff; }
.legal__body ul { margin: 0 0 var(--sp-3) calc(3.4em + var(--sp-2)); padding-left: 1.2em; display: grid; gap: 4px; line-height: 1.6; font-size: 15.5px; }
.legal__body li::marker { color: var(--lav-400); }
.legal__foot { padding: var(--sp-6) 0 var(--sp-7, 48px); border-top: 1px solid var(--mat-edge-soft); }
.legal__foot .legal__tabs { margin-top: 0; }
@media (max-width: 640px) {
  .legal__p { grid-template-columns: 1fr; }
  .legal__n { padding: 0; }
  .legal__body ul { margin-left: 0; }
  .legal__toc ol { columns: 1; }
}

/* ---------- 105. Возврат после оплаты (/purchase/success, /purchase/fail) ---------- */
/* материал карточки и плашки — из системы уровней (Frosted / Clear), здесь только раскладка */
/* отступ под фиксированную шапку: id — чтобы перебить общие отступы .section (в т. ч. режим «pro») */
#purchase.section { padding-top: clamp(120px, 16vh, 168px); }
.purchase__card { max-width: 620px; margin: 0 auto; padding: var(--sp-6) var(--sp-6) var(--sp-5); text-align: center; }
.purchase__test { display: inline-block; margin: 0 0 var(--sp-4); padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.purchase__title { margin: 0 0 var(--sp-3); font-size: var(--fs-h2); font-weight: 300; line-height: 1.1; }
.purchase__card--pending .purchase__title::after { content: ''; display: inline-block; width: .5em; }
.purchase__text { margin: 0 auto var(--sp-5); max-width: 46ch; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }
.purchase__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px var(--sp-4); max-width: 420px; margin: var(--sp-4) auto var(--sp-4); text-align: left; }
.purchase__facts dt { color: var(--ink-soft); font-size: 14px; }
.purchase__facts dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums lining-nums; }
.purchase__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
@media (max-width: 560px) {
  .purchase__card { padding: var(--sp-5) var(--sp-4); }
  .purchase__actions .btn { flex: 1 1 100%; }
}
/* ---------- 106. Магазин: окно покупки, «Уже куплено», кабинет /my ---------- */
/* окно — общий .modal--form; карточка кабинета — Frosted из системы уровней; здесь только раскладка */
.buy .lform { display: grid; gap: var(--sp-3); }
.buy__check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); cursor: pointer; }
.buy__check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--lav-500); }
.buy__check a, .buy .lform__sumnote a, .account__card a:not(.btn):not(.account__tab) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.buy__check i, .buy .lform__label i { color: var(--lav-500); font-style: normal; }
.buy .btn--primary { justify-self: stretch; }
.buy__status:empty { display: none; }
/* «Купить» и «В корзину» одним рядом на месте старой кнопки (js/shop.js) */
.shop__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.chatpro__buy .shop__actions { flex-basis: 100%; }
.wpack .shop__actions { justify-content: flex-start; }
.wpack .shop__actions .btn { align-self: auto; }

#account.section { padding-top: clamp(120px, 16vh, 168px); }
.account__card { max-width: 720px; margin: 0 auto; padding: var(--sp-6) var(--sp-6) var(--sp-5); }
.account__title { margin: 0 0 var(--sp-4); font-size: var(--fs-h2); font-weight: 300; line-height: 1.1; text-align: center; }
.account__h2 { margin: var(--sp-5) 0 var(--sp-3); font-size: 18px; font-weight: 600; }
.account__text, .account__note { margin: 0 0 var(--sp-4); color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }
.account__note { padding: 10px 14px; border-radius: 12px; background: rgba(139, 108, 242, .1); color: var(--ink); }
.account__form { display: grid; gap: var(--sp-3); max-width: 420px; margin: 0 auto; }
.account__field { display: grid; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.account__status:empty { display: none; }
.account__status { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.account__who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-3); color: var(--ink-soft); overflow-wrap: anywhere; }
.account__who b { color: var(--ink); }
.account__logout { border: 0; background: none; padding: 4px 0; color: var(--ink-soft); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.account__items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.account__item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .42); border: 1px solid rgba(139, 108, 242, .14); }
html[data-theme="dark"] .account__item { background: rgba(176,162,248,.057); border-color: rgba(205,196,255,.13); }
.account__item > span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.account__item small { color: var(--ink-soft); font-size: 13px; }
.account__dl { margin: 0; flex: none; }
.account__orders { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.account__orders li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); color: var(--ink-soft); }
.account__orders li span:last-child { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
/* вкладки кабинета «Покупки / Заказы / Уроки» — те же пилюли, что у переключателей сайта */
.account__tabs { display: flex; gap: 6px; margin: 0 0 var(--sp-4); padding: 4px; border-radius: 999px; background: rgba(139, 108, 242, .08); }
html[data-theme="dark"] .account__tabs { background: rgba(176,162,248,.057); }
.account__tab { flex: 1 1 0; padding: 9px 12px; border-radius: 999px; text-align: center; font-weight: 600; font-size: 14.5px; color: var(--ink-soft); text-decoration: none; }
.account__tab.is-current { background: var(--lav-500); color: #fff; }
.account__tab:not(.is-current):hover { color: var(--ink); background: rgba(139, 108, 242, .1); }
.account__acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.account__hint { margin: var(--sp-3) 0 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }
.account__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.account__order { display: grid; gap: 10px; padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .42); border: 1px solid rgba(139, 108, 242, .14); overflow-wrap: anywhere; }
html[data-theme="dark"] .account__order { background: rgba(176,162,248,.057); border-color: rgba(205,196,255,.13); }
.account__order > * { margin: 0; }
.account__order .account__hint { margin: 0; }
.account__ohead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.account__ohead small { color: var(--ink-soft); font-size: 13px; }
.account__status-line { font-size: 14.5px; color: var(--ink); }
.account__pubnote { padding: 10px 12px; border-radius: 10px; background: rgba(139, 108, 242, .07); color: var(--ink); }
.account__stages { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; counter-reset: st; }
.account__stages li { padding: 4px 10px; border-radius: 999px; font-size: 13px; color: var(--ink-soft); border: 1px solid rgba(139, 108, 242, .18); }
.account__stages li small { font-size: 11.5px; }
.account__stages li[data-state="completed"] { color: #2f9a7a; border-color: rgba(47, 154, 122, .35); }
.account__stages li[data-state="active"] { color: var(--ink); background: rgba(139, 108, 242, .12); }
html[data-theme="dark"] .account__stages li[data-state="completed"] { color: #8fe0c2; }
.account__sum { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.account__sum div { display: grid; gap: 2px; }
.account__sum dt { color: var(--ink-soft); font-size: 13px; }
.account__sum dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.account__orders--pay li span:nth-child(2) { font-size: 13px; }
.account__files { display: grid; gap: 6px; justify-items: start; }
/* строка чека — под оплатой, во всю ширину строки списка */
.account__orders li span.account__receipt { grid-column: 1 / -1; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--ink-soft); font-variant-numeric: normal; }
.account__orders li span.account__receipt[data-receipt-state="issued"] { color: #2f9a7a; font-weight: 600; }
html[data-theme="dark"] .account__orders li span.account__receipt[data-receipt-state="issued"] { color: #8fe0c2; }
.account__receipt a { margin-left: 4px; }
.account__receipts li { row-gap: 2px; }
.account__h3 { margin: 4px 0 0; font-size: 14px; font-weight: 600; }
.account__files b { font-size: 14px; }
@media (max-width: 560px) {
  .account__card { padding: var(--sp-5) var(--sp-4); }
  .account__item { flex-wrap: wrap; }
  .account__item .btn, .account__dl { flex: 1 1 100%; }
  .account__dl .btn { width: 100%; }
  .account__acts { width: 100%; }
  .account__acts .btn, .account__order .account__dl .btn { flex: 1 1 100%; width: 100%; }
  .account__tab { padding: 8px 6px; font-size: 13.5px; }
  .account__orders li { grid-template-columns: minmax(0, 1fr) auto; }
  .account__orders li span:nth-child(2) { grid-column: 1; grid-row: 2; }
  .shop__actions .btn { flex: 1 1 100%; }
}

/* ============================================================
   ЖИДКОЕ СТЕКЛО (единый блок, заменяет прежние «проходы»)
   Один набор материалов для светлой и тёмной темы. Тема — атрибут data-theme на <html>
   (js/theme.js, стартовая установка без вспышки — скрипт в <head>), поэтому всё ниже
   меняется само, в том числе открытые панели и декоративные слои. Переходов «всех свойств»
   при смене темы нет.

   Три уровня поверхностей:
     1. фон            — три больших мягких пятна (.lg-blobs), только transform; без размытия слоя;
     2. карточки       — устойчивые читаемые плиты, БЕЗ backdrop-filter (длинный текст, цены, таблицы);
     3. стекло         — шапка, корзина, диалоги, меню: размытие 20–24 px и тонкая кромка;
                         без поддержки backdrop-filter — плотная заливка (@supports ниже).
   ============================================================ */

/* ---------- материалы: светлая тема (молочный фон, лаванда, небо, нежно-розовый) ---------- */
:root {
  --lg-b1: 190, 168, 248;  --lg-a1: .40;     /* пятно 1: лаванда */
  --lg-b2: 150, 206, 246;  --lg-a2: .34;     /* пятно 2: небо */
  --lg-b3: 248, 176, 214;  --lg-a3: .28;     /* пятно 3: розовый */

  --lg-card:        rgba(255, 255, 255, .78);          /* устойчивая карточка */
  --lg-card-edge:   rgba(150, 140, 225, .22);
  --lg-glass:       rgba(255, 255, 255, .56);          /* выразительное стекло */
  --lg-panel:       rgba(255, 255, 255, .84);          /* панели с формами и длинным текстом: корзина, диалоги, поиск */
  --lg-glass-solid: rgba(250, 247, 255, .97);          /* то же без blur: плотнее */
  --lg-glass-edge:  rgba(255, 255, 255, .88);
  --lg-glass-blur:  blur(22px) saturate(165%);
  --lg-shadow:      70, 80, 150;                       /* rgb тени */
  --lg-glint:       255, 255, 255;  --lg-glint-a: .40; /* блик за курсором */
  --lg-scrim:       rgba(58, 47, 87, .38);             /* затемнение под диалогом */
  --ink-dim: #6f6580;                                    /* самый бледный текст: ≥ 4,5:1 на худшем участке фона */             /* затемнение под диалогом */
  --lg-field:       linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.82));
  --lg-field-edge:  rgba(150, 140, 225, .34);
  --lg-thumb:       linear-gradient(180deg, rgba(255,255,255,.98), rgba(238,232,253,.78));
  --lg-thumb-edge:  rgba(150, 130, 230, .42);
  --lg-thumb-glow:  0 6px 16px -8px rgba(110, 90, 200, .55);
  --lg-spectral:    linear-gradient(90deg, #8fd0ff 0%, #b9a6f2 38%, #f0a9d0 70%, #7fe0d8 100%);   /* спектральный акцент */
  --lg-track:       rgba(150, 140, 225, .22);
  --lg-knob:        linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,232,253,.7));

  /* блики и кромка стекла (общие токены сайта) */
  --glass-spec:  radial-gradient(130% 55% at 20% -10%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.5) 38%, rgba(255,255,255,0) 70%);
  --glass-gloss: linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.32) 9%, rgba(255,255,255,.04) 24%, rgba(255,255,255,0) 58%, rgba(255,255,255,.2) 86%, rgba(255,255,255,.48) 100%);
  --glass-blur:  var(--lg-glass-blur);
  --glass-rim:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1.5px 0 rgba(255,255,255,.6),
    inset 1px 0 0 rgba(255,255,255,.5),
    inset -1px 0 0 rgba(255,255,255,.36),
    inset 0 12px 20px -14px rgba(255,255,255,.9),
    inset 0 0 44px rgba(255,255,255,.14);
  --glass-drop-sm: 0 14px 30px -20px rgba(var(--lg-shadow), .5), 0 0 0 1px rgba(150, 140, 225, .2);
  --glass-drop:    0 30px 60px -34px rgba(var(--lg-shadow), .5), 0 0 0 1px rgba(150, 140, 225, .2);
  --glass-drop-hi: 0 46px 90px -38px rgba(var(--lg-shadow), .55), 0 0 0 1px rgba(150, 140, 225, .26);
  --g-spec:  radial-gradient(200px 110px at 12% 0%, rgba(255,255,255,1), rgba(255,255,255,0) 74%);
  --g-curve: radial-gradient(150% 60% at 50% -30%, rgba(255,255,255,.92), rgba(255,255,255,0) 64%);
  --g-inner:
    inset 0 1.5px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.4),
    inset 0 -14px 22px -16px rgba(120,130,210,.32), inset 0 16px 24px -16px rgba(255,255,255,1),
    inset 0 -2px 0 rgba(255,255,255,.5);
  --g-drop: 0 16px 32px -22px rgba(var(--lg-shadow), .55), 0 0 0 1px rgba(150, 140, 225, .2);
}

/* ---------- материалы: тёмная тема (чернильный фон с фиолетовым, приглушённые переливы) ----------
   Не инверсия светлой: свой набор. Пятна фона тусклые, кромка мягкая, без неонового ореола. */
html[data-theme="dark"] {
  --lg-b1: 118, 98, 208;   --lg-a1: .28;
  --lg-b2: 70, 118, 192;   --lg-a2: .20;
  --lg-b3: 138, 78, 148;   --lg-a3: .15;

  --lg-card:        rgba(40, 33, 68, .74);
  --lg-card-edge:   rgba(205, 196, 255, .15);
  --lg-glass:       rgba(30, 25, 52, .62);
  --lg-panel:       rgba(30, 25, 52, .86);
  --lg-glass-solid: rgba(28, 23, 48, .97);
  --lg-glass-edge:  rgba(215, 208, 255, .24);
  --lg-glass-blur:  blur(22px) saturate(150%);
  --lg-shadow:      0, 0, 0;
  --lg-glint:       196, 178, 255;  --lg-glint-a: .16;
  --lg-scrim:       rgba(8, 6, 20, .64);
  --ink-dim: #a39cb8;
  --lg-field:       linear-gradient(180deg, rgba(10,8,24,.3), rgba(150,136,230,.07));
  --lg-field-edge:  rgba(205, 196, 255, .24);
  --lg-thumb:       linear-gradient(180deg, rgba(176,162,248,.34), rgba(130,120,225,.18));
  --lg-thumb-edge:  rgba(205, 196, 255, .34);
  --lg-thumb-glow:  0 6px 16px -8px rgba(0, 0, 0, .7);
  --lg-spectral:    linear-gradient(90deg, #6fb4ee 0%, #a38ff0 38%, #e68fc0 70%, #6fd0c8 100%);
  --lg-track:       rgba(10, 8, 24, .5);
  --lg-knob:        linear-gradient(180deg, rgba(236,232,255,.82), rgba(176,162,248,.5));

  --glass-spec:  radial-gradient(130% 55% at 20% -10%, rgba(226,220,255,.3) 0%, rgba(206,198,255,.12) 40%, rgba(206,198,255,0) 70%);
  --glass-gloss: linear-gradient(180deg, rgba(226,220,255,.24) 0%, rgba(206,198,255,.1) 9%, rgba(176,162,248,.02) 26%, rgba(176,162,248,0) 58%, rgba(150,136,230,.06) 88%, rgba(200,190,255,.12) 100%);
  --glass-edge:  rgba(215, 208, 255, .22);
  --glass-tint:  rgba(150, 136, 230, .075);
  --glass-fill-flat: rgba(150, 136, 230, .08);
  --glass-rim:
    inset 0 1.5px 0 rgba(236,232,255,.34),
    inset 0 -1px 0 rgba(200,190,255,.16),
    inset 1px 0 0 rgba(215,208,255,.14),
    inset -1px 0 0 rgba(215,208,255,.1),
    inset 0 12px 20px -14px rgba(226,220,255,.26),
    inset 0 0 30px -12px rgba(150,130,255,.3);
  --glass-drop-sm: 0 14px 32px -24px rgba(0, 0, 0, .7);
  --glass-drop:    0 30px 62px -38px rgba(0, 0, 0, .75);
  --glass-drop-hi: 0 46px 96px -42px rgba(0, 0, 0, .8);
  --g-spec:  radial-gradient(200px 110px at 12% 0%, rgba(226,220,255,.32), rgba(226,220,255,0) 74%);
  --g-curve: radial-gradient(150% 60% at 50% -30%, rgba(226,220,255,.22), rgba(226,220,255,0) 64%);
  --g-inner:
    inset 0 1.5px 0 rgba(240,236,255,.4), inset 0 0 0 1px rgba(205,196,255,.1),
    inset 0 -14px 22px -16px rgba(0,0,0,.45), inset 0 16px 24px -16px rgba(206,198,255,.3);
  --g-drop: 0 18px 36px -24px rgba(0, 0, 0, .7);
}

/* ---------- 1. ФОН: три пятна, плавный дрейф с несовпадающими циклами ----------
   Только transform; градиент «растворяется» сам, поэтому filter: blur не нужен. Крутится туда-обратно
   (alternate), общего перезапуска нет. Разметка — <div class="lg-blobs"> в начале <body>. */
.lg-blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.lg-blobs i {
  position: absolute; display: block; border-radius: 50%; pointer-events: none; will-change: transform;
  backface-visibility: hidden;
}
.lg-blobs i:nth-child(1) {
  left: -18vmax; top: -22vmax; width: 66vmax; height: 56vmax;
  background: radial-gradient(closest-side, rgba(var(--lg-b1), var(--lg-a1)), rgba(var(--lg-b1), 0));
  animation: lg-drift-a 71s ease-in-out -11s infinite alternate;
}
.lg-blobs i:nth-child(2) {
  right: -24vmax; top: 6vmax; width: 58vmax; height: 64vmax;
  background: radial-gradient(closest-side, rgba(var(--lg-b2), var(--lg-a2)), rgba(var(--lg-b2), 0));
  animation: lg-drift-b 89s ease-in-out -33s infinite alternate;
}
.lg-blobs i:nth-child(3) {
  left: 10vmax; bottom: -28vmax; width: 70vmax; height: 54vmax;
  background: radial-gradient(closest-side, rgba(var(--lg-b3), var(--lg-a3)), rgba(var(--lg-b3), 0));
  animation: lg-drift-c 103s ease-in-out -57s infinite alternate;
}
@keyframes lg-drift-a { 0% { transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg); } 50% { transform: translate3d(9vmax, 6vmax, 0) scale(1.12, .9) rotate(14deg); } 100% { transform: translate3d(-4vmax, 12vmax, 0) scale(.94, 1.1) rotate(-8deg); } }
@keyframes lg-drift-b { 0% { transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg); } 50% { transform: translate3d(-10vmax, 8vmax, 0) scale(.9, 1.12) rotate(-12deg); } 100% { transform: translate3d(5vmax, -6vmax, 0) scale(1.1, .94) rotate(9deg); } }
@keyframes lg-drift-c { 0% { transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg); } 50% { transform: translate3d(12vmax, -7vmax, 0) scale(1.1, .92) rotate(10deg); } 100% { transform: translate3d(-7vmax, -3vmax, 0) scale(.92, 1.08) rotate(-13deg); } }
html.lg-paused .lg-blobs i { animation-play-state: paused; }   /* скрытая вкладка: не тратим кадры */
/* телефон и touch: два пятна, циклы длиннее */
@media (max-width: 760px), (pointer: coarse) {
  .lg-blobs i:nth-child(3) { display: none; }
  .lg-blobs i:nth-child(1) { animation-duration: 110s; }
  .lg-blobs i:nth-child(2) { animation-duration: 140s; }
}

/* ---------- 2. КАРТОЧКИ: устойчивые, читаемые, без размытия ----------
   Переопределяются только значения --g-base существующей системы слоёв: поверхность плотнее,
   чтобы текст не зависел от движения фона. */
html:root:not([data-theme="dark"]) :is(.cat__body, .svc, .addcard, .plan:not(.plan--pro), .artplan, .ychset, .land__card, .land__steps li, .tl, .qz__card,
  .bdg__card, .lboard__card, .acad-tier, .acad-flow li, .wiz__choice:not(.is-on), .guide-card, .terms__box, .acadpromo__card, .opath, .acad-demo,
  .wnav__card, .wpack:not(.wpack--best):not(.wpack--hit), .purchase__card, .account__card) {
  --g-base: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.74));
}
html[data-theme="dark"]:root :is(.status, .badge, .cat__from, .review__tag, .deliver__list li, .info-note, .sched__note, .acad__tag, .modepick, .wiz__steps, .hero__stats, .wpack__items li, .wplus__list li, .wnav__packs, .purchase__test) {
  --g-base: linear-gradient(rgba(176,162,248,.12), rgba(130,120,225,.05));
}
html[data-theme="dark"]:root :is(.cat__body, .svc, .addcard, .plan:not(.plan--pro), .artplan, .ychset, .land__card, .land__steps li, .tl, .qz__card,
  .bdg__card, .lboard__card, .acad-tier, .acad-flow li, .wiz__choice:not(.is-on), .guide-card, .terms__box, .acadpromo__card, .opath, .acad-demo,
  .wnav__card, .wpack:not(.wpack--best):not(.wpack--hit), .purchase__card, .account__card) {
  --g-base: linear-gradient(165deg, rgba(52,44,88,.66), rgba(32,27,56,.7));
}
html[data-theme="dark"]:root :is(.review:not(.is-featured), .accordion details, .faq details) {
  --g-base: linear-gradient(165deg, rgba(58,50,96,.7), rgba(34,30,60,.68));
}
html[data-theme="dark"] .cat__body, html[data-theme="dark"] .svc, html[data-theme="dark"] .addcard,
html[data-theme="dark"] .merch-card, html[data-theme="dark"] .accordion details, html[data-theme="dark"] .terms__box,
html[data-theme="dark"] .plan, html[data-theme="dark"] .review, html[data-theme="dark"] .about__card,
html[data-theme="dark"] .ychset, html[data-theme="dark"] .artplan, html[data-theme="dark"] .soon-card,
html[data-theme="dark"] .chatpro, html[data-theme="dark"] .bn__card, html[data-theme="dark"] .terms__tile {
  background: var(--glass-spec), var(--glass-gloss), var(--glass-tint);
  border-color: var(--glass-edge);
}
html[data-theme="dark"] .cta__box, html[data-theme="dark"] .calc__sum, html[data-theme="dark"] .prep__card,
html[data-theme="dark"] .order__card, html[data-theme="dark"] .tiers .plan--pro, html[data-theme="dark"] .ptable {
  background: var(--glass-spec), var(--holo), linear-gradient(160deg, rgba(190,180,255,.09), rgba(150,136,230,.04));
  border-color: var(--glass-edge);
}

/* ---------- 3. СТЕКЛО: шапка, корзина, диалоги, меню ---------- */
html:root[data-theme] :is(.cart, .socials, .modal[open], .quicknav, .pick__menu, .themepick__menu, .srch__panel, .cookiebar, .toast) {
  background: var(--glass-spec), var(--glass-gloss), var(--lg-glass);
  border-color: var(--lg-glass-edge);
  -webkit-backdrop-filter: var(--lg-glass-blur); backdrop-filter: var(--lg-glass-blur);
}
/* панели с формами и длинным текстом — плотнее шапки: текст не зависит от того, что за ними */
html:root[data-theme] :is(.cart, .modal[open], .srch__panel) { background: var(--glass-spec), var(--glass-gloss), var(--lg-panel); }
/* без backdrop-filter (старые браузеры, экономия): плотная заливка, читаемость не страдает */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:root[data-theme] :is(.cart, .socials, .modal[open], .quicknav, .pick__menu, .themepick__menu, .srch__panel, .cookiebar, .toast) {
    background: var(--glass-spec), var(--lg-glass-solid);
  }
  .cart-backdrop, .modal::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* затемнение под корзиной и диалогами: своё для каждой темы, размытие небольшое */
html:root[data-theme] .cart-backdrop { background: var(--lg-scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html:root[data-theme] .modal::backdrop { background: var(--lg-scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* корзина: короткий плавный выезд — небольшое смещение и появление, содержимое не искажается */
html:root[data-theme] .cart {
  transform: translate3d(34px, 0, 0); opacity: 0; visibility: hidden;
  transition: transform .3s var(--ease-out, cubic-bezier(.2, .7, .2, 1)), opacity .22s ease, visibility 0s .3s;
}
html:root[data-theme] .cart.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }

/* ---------- поля ввода: «впадина» в стекле, обе темы ---------- */
html:root[data-theme] :is(.prep__field, .pick__btn) {
  background: var(--lg-field); border-color: var(--lg-field-edge);
  box-shadow: inset 0 2px 6px -3px rgba(var(--lg-shadow), .32), inset 0 -1px 0 rgba(255, 255, 255, .06);
}
html:root[data-theme] .prep__field:focus { outline: none; border-color: var(--lav-400); box-shadow: inset 0 2px 6px -3px rgba(var(--lg-shadow), .32), 0 0 0 3px rgba(150, 130, 230, .28); }
html:root[data-theme] .prep__field[aria-invalid="true"], html:root[data-theme] .prep__field.is-error { border-color: #d24a6a; box-shadow: 0 0 0 3px rgba(210, 74, 106, .2); }

/* ---------- 4. КУРСОР: блик на нескольких крупных поверхностях (js/lyss-fx.js) ---------- */
.ui-light {
  background: radial-gradient(190px circle at var(--lx, 50%) var(--ly, 50%), rgba(var(--lg-glint), var(--lg-glint-a)), rgba(var(--lg-glint), 0) 70%);
}
html[data-theme="dark"] .ui-light { background: radial-gradient(200px circle at var(--lx, 50%) var(--ly, 50%), rgba(var(--lg-glint), var(--lg-glint-a)), rgba(var(--lg-glint), 0) 70%); }

/* ---------- 5. КНОПКИ: упругость без смещения от курсора ---------- */
html:root[data-theme] .btn {
  transition: transform .3s cubic-bezier(.34, 1.45, .64, 1), box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
html:root[data-theme] .btn:active:not(:disabled):not([aria-disabled="true"]):not(.is-loading) {
  transform: scale(.965); transition-duration: .08s; transition-timing-function: ease-out;
}
/* основная кнопка заметнее второстепенной в обеих темах: плотная заливка + цветная тень; вторичная — стекло */
html:root[data-theme] .btn--primary { box-shadow: var(--g-inner), 0 12px 26px -14px rgba(110, 86, 190, .75); }
html:root[data-theme] .btn--ghost { box-shadow: var(--glass-rim), 0 6px 14px -12px rgba(var(--lg-shadow), .4); }
html[data-theme="dark"] .btn--primary { color: #fbf9ff; }
/* светлая тема: основная кнопка — лавандовая заливка, второстепенная остаётся прозрачным стеклом (контраст подписи ≥ 7:1) */
html:root:not([data-theme="dark"]) .btn.btn--primary { --g-base: linear-gradient(rgba(178,154,246,.66), rgba(146,124,230,.54)); color: #2b1d4d; border-color: rgba(120,98,214,.5); }
html:root:not([data-theme="dark"]) .btn.btn--primary:hover { --g-base: linear-gradient(rgba(186,164,248,.74), rgba(156,134,236,.6)); }

/* disabled: заметно и без анимации — бледнее, без тени, курсор «нельзя» */
html:root[data-theme] .btn:disabled, html:root[data-theme] .btn[aria-disabled="true"] {
  opacity: .5; filter: saturate(.55); cursor: not-allowed; box-shadow: none; transform: none;
}
html:root[data-theme] .btn:disabled::after, html:root[data-theme] .btn[aria-disabled="true"]::after { display: none; }
/* loading: кольцо перед подписью, клики не проходят; без анимации остаётся статичное кольцо */
html:root[data-theme] .btn.is-loading, html:root[data-theme] .btn[aria-busy="true"] { cursor: progress; pointer-events: none; opacity: .82; }
html:root[data-theme] .btn.is-loading:not(.is-incart)::before, html:root[data-theme] .btn[aria-busy="true"]:not(.is-incart)::before {
  content: ''; display: inline-block; width: .95em; height: .95em; margin-right: .55em; vertical-align: -.12em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lg-spin .8s linear infinite;
}
@keyframes lg-spin { to { transform: rotate(360deg); } }
/* клавиатурный фокус виден в обеих темах */
:focus-visible { outline: 2px solid var(--lav-400); outline-offset: 3px; }
.btn:focus-visible, .nav a:focus-visible, .quicknav a:focus-visible { box-shadow: 0 0 0 4px rgba(150, 130, 230, .34); }

/* ---------- 6. СЕГМЕНТИРОВАННЫЕ ПЕРЕКЛЮЧАТЕЛИ: одна стеклянная «капля» (js/liquid-fx.js) ---------- */
.lg-seg { position: relative; isolation: isolate; }
.lg-seg > .lg-thumb {
  position: absolute; left: 0; top: 0; z-index: -1; width: var(--tw, 0px); height: var(--th, 0px);
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); border-radius: inherit;
  background: var(--lg-thumb); border: 1px solid var(--lg-thumb-edge); box-shadow: var(--lg-thumb-glow), var(--glass-rim);
  pointer-events: none; opacity: 0;
}
.lg-seg.lg-ready > .lg-thumb { opacity: 1; transition: transform .38s cubic-bezier(.3, 1.2, .4, 1), width .3s cubic-bezier(.3, 1.2, .4, 1), height .3s ease, opacity .2s ease; }
.lg-seg.lg-ready.lg-nomove > .lg-thumb { transition: none; }
/* подписи неподвижны, фон пунктов убран — его заменяет капля; выбор различим и без неё: цвет и насыщенность подписи */
html:root[data-theme] .lg-seg > :is(button, a):not(.nav__cta) { background: transparent; box-shadow: none; border-color: transparent; position: relative; }
html:root[data-theme] .lg-seg > :is(button, a):not(.nav__cta):not(.is-on):not(.is-active) { color: var(--ink-soft); }
html:root[data-theme] .lg-seg > :is(button, a):not(.nav__cta):is(.is-on, .is-active) { color: var(--ink); font-weight: 700; }
html:root[data-theme] .lg-seg > :is(button, a):not(.nav__cta):not(.is-on):not(.is-active):hover { color: var(--ink); background: rgba(150, 130, 230, .12); }
html:root[data-theme] .lg-seg > :is(button, a):not(.nav__cta):focus-visible { outline: 2px solid var(--lav-400); outline-offset: 1px; }

/* ---------- прочее, что работало раньше (оставлено) ---------- */
html { scroll-padding-top: 92px; }
a, button, summary, label, .btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (pointer: coarse) {
  .prep__field, .pick__btn, input, select, textarea { font-size: 16px; }   /* iOS не приближает страницу при вводе */
  .wishheart { width: 44px; height: 44px; }
  .pl__add, .wishheart--sm { width: 40px; height: 40px; }
  .wishheart--sm { margin-left: 8px; font-size: 15px; }
  .pricelist li:not(:has(.pl__add)) > b { margin-right: 56px; }
  .pricelist.has-hearts li:not(:has(.pl__add)) > b { margin-right: 104px; }
  .ptable__add { min-height: 40px; align-items: center; padding: 8px 14px; }
  .site-header .burger { justify-content: center; padding: 12px 9px; margin: -12px -9px -12px -5px; }   /* область нажатия ~44×43 */
}
@media (max-width: 760px) {
  html.has-cookiebar .helper, html.has-cookiebar .socials-tab { opacity: 0; visibility: hidden; pointer-events: none; }   /* пока висит плашка cookie */
  .pdots { display: none; }
}
@media (max-width: 420px) {
  .site-header .container { gap: 8px; padding-left: 14px; padding-right: 14px; }   /* шапка не вылезает за экран */
}
.cart__empty-text { font-family: var(--font-head); font-size: 17px; color: var(--ink); }
.cart__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.cart__empty-actions .btn { min-height: 44px; }

/* ---------- декоративные слои ничего не перехватывают, вёрстка не прыгает ---------- */
.sfx-progress {
  position: fixed; left: 0; top: 0; z-index: 70; width: 100%; height: 3px; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #8fd0ff, #b9a6f2 45%, #f0a9d0 80%, #7fe0d8);
  box-shadow: 0 0 10px rgba(150, 130, 230, .55);
}
/* карточки идут волной (десктоп), без поворотов: текст остаётся ровным */
@media (min-width: 1000px) {
  .catalog__grid { align-items: flex-start; }
  .catalog__grid > .cat:nth-child(3n + 2) { margin-top: 48px; }
  .catalog__grid > .cat:nth-child(3n) { margin-top: 20px; }
  .merch__grid { align-items: flex-start; }
  .merch__grid > *:nth-child(4n + 2) { margin-top: 30px; }
  .merch__grid > *:nth-child(4n + 4) { margin-top: 14px; }
  .reviews__grid { align-items: start; }
  .reviews__grid > *:nth-child(3n + 2) { margin-top: 34px; }
  .reviews__grid > *:nth-child(3n) { margin-top: 12px; }
}
/* появление карточек с разных сторон — только transform и opacity */
@keyframes sfx-from-left  { from { opacity: 0; transform: translate3d(-28px, 12px, 0); } }
@keyframes sfx-from-right { from { opacity: 0; transform: translate3d(28px, 12px, 0); } }
@keyframes sfx-pop        { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.96); } }
@media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
  :is(.catalog__grid > .cat, .merch__grid > .merch-card, .reviews__grid > *, .services__grid > *, .pricing__grid > *).reveal.visible:nth-child(3n + 1) { animation-name: sfx-from-left; }
  :is(.catalog__grid > .cat, .merch__grid > .merch-card, .reviews__grid > *, .services__grid > *, .pricing__grid > *).reveal.visible:nth-child(3n) { animation-name: sfx-from-right; }
  :is(.catalog__grid > .cat, .merch__grid > .merch-card, .reviews__grid > *, .services__grid > *, .pricing__grid > *).reveal.visible:nth-child(3n + 2) { animation-name: sfx-pop; }
}
/* переход между страницами (View Transitions): только opacity и небольшое смещение, шапка на месте */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: sfx-header; }
  ::view-transition-old(root) { animation: sfx-page-out .2s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: sfx-page-in .4s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes sfx-page-out { to { opacity: 0; } }
@keyframes sfx-page-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- reduced motion: течение, упругость и движение подложки выключены; состояния остаются ---------- */
@media (prefers-reduced-motion: reduce) {
  .lg-blobs i { animation: none !important; }
  .lg-seg.lg-ready > .lg-thumb { transition: none; }
  html:root[data-theme] .btn, html:root[data-theme] .btn:active:not(:disabled) { transition: box-shadow .01s, background-color .01s; transform: none; }
  html:root[data-theme] .cart { transition: opacity .01s, visibility 0s; transform: none; }
  html:root[data-theme] .btn.is-loading::before, html:root[data-theme] .btn[aria-busy="true"]::before { animation: none; }
}

/* ============================================================
   Стекло v2 (по макету): направленный свет кромки, стеклянные ручки слайдера и тумблеров,
   спектральный акцент, «линза» на первом экране, «капля» быстрой навигации.
   Только переменные и компоненты, которые уже есть на сайте; текст и клики не двигаются.
   ============================================================ */
:root {
  /* свет падает сверху слева: яркая кромка там, мягкая тень толщины — снизу справа */
  --glass-rim:
    inset 2px 2px 3px -2px rgba(255,255,255,1),
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset -2px -3px 5px -3px rgba(150,140,225,.34),
    inset 0 -1.5px 0 rgba(255,255,255,.5),
    inset 0 12px 20px -14px rgba(255,255,255,.9),
    inset 0 0 44px rgba(255,255,255,.14);
}
html[data-theme="dark"] {
  --glass-rim:
    inset 2px 2px 3px -2px rgba(236,232,255,.5),
    inset 0 1.5px 0 rgba(236,232,255,.34),
    inset -2px -3px 5px -3px rgba(0,0,0,.45),
    inset 0 -1px 0 rgba(200,190,255,.14),
    inset 0 12px 20px -14px rgba(226,220,255,.26),
    inset 0 0 30px -12px rgba(150,130,255,.3);
}

/* ---------- бегунок бюджета и остальные ползунки: спектральный трек и стеклянная ручка ---------- */
html:root[data-theme] .bdg__range::-webkit-slider-runnable-track {
  height: 10px; border-radius: 999px;
  background: var(--lg-spectral) 0 / var(--bdg-p) 100% no-repeat, var(--lg-track);
  box-shadow: inset 0 2px 4px -1px rgba(var(--lg-shadow), .4);
}
html:root[data-theme] .bdg__range::-moz-range-track { height: 10px; border-radius: 999px; background: var(--lg-track); box-shadow: inset 0 2px 4px -1px rgba(var(--lg-shadow), .4); }
html:root[data-theme] .bdg__range::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--lg-spectral); }
html:root[data-theme] .bdg__range::-webkit-slider-thumb {
  width: 32px; height: 32px; margin-top: -11px; border-radius: 50%; border: 1px solid var(--lg-thumb-edge);
  background: var(--lg-knob);
  box-shadow: inset 3px 4px 7px rgba(255,255,255,.8), inset -3px -4px 8px rgba(110,90,200,.22), 0 10px 16px -6px rgba(var(--lg-shadow), .55);
}
html:root[data-theme] .bdg__range::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--lg-thumb-edge);
  background: var(--lg-knob);
  box-shadow: inset 3px 4px 7px rgba(255,255,255,.8), inset -3px -4px 8px rgba(110,90,200,.22), 0 10px 16px -6px rgba(var(--lg-shadow), .55);
}
html[data-theme="dark"] .bdg__range::-webkit-slider-thumb { background: var(--lg-knob); border-color: var(--lg-thumb-edge); }
html[data-theme="dark"] .bdg__range::-moz-range-thumb { background: var(--lg-knob); border-color: var(--lg-thumb-edge); }

/* ---------- тумблеры калькулятора: стеклянная ручка, включённый — спектральный ---------- */
html:root[data-theme] .calc__switch i { background: var(--lg-track); box-shadow: inset 0 2px 5px rgba(var(--lg-shadow), .3); }
html:root[data-theme] .calc__switch i::after {
  background: var(--lg-knob);
  box-shadow: inset 2px 3px 5px rgba(255,255,255,.9), 0 6px 10px -3px rgba(var(--lg-shadow), .55);
}
html:root[data-theme] .calc__switch input:checked + i { background: var(--lg-spectral); }
html:root[data-theme] .calc__switch input:focus-visible + i { outline: 2px solid var(--lav-400); outline-offset: 2px; }

/* ---------- «линза» на первом экране: стекло слегка усиливает и «преломляет» то, что под ним ---------- */
.lg-lens {
  position: absolute; z-index: 4; right: 9%; top: 9%; width: clamp(64px, 8vw, 120px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  -webkit-backdrop-filter: blur(1.5px) saturate(190%) brightness(1.12) contrast(1.06); backdrop-filter: blur(1.5px) saturate(190%) brightness(1.12) contrast(1.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 6px 8px 18px rgba(255,255,255,.5), inset -8px -10px 22px rgba(110,90,200,.26), 0 18px 30px -12px rgba(60,50,120,.5);
}
.lg-lens::after {
  content: ''; position: absolute; left: 24%; top: 16%; width: 30%; height: 13%; border-radius: 50%; transform: rotate(-30deg);
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0));
}
html[data-theme="dark"] .lg-lens {
  box-shadow: inset 0 0 0 1px rgba(215,208,255,.4), inset 6px 8px 18px rgba(226,220,255,.28), inset -8px -10px 22px rgba(0,0,0,.4), 0 18px 30px -12px rgba(0,0,0,.6);
}
html[data-theme="dark"] .lg-lens::after { background: radial-gradient(closest-side, rgba(236,232,255,.7), rgba(236,232,255,0)); }
@media (max-width: 760px) { .lg-lens { right: 6%; top: 6%; } }

/* ---------- быстрая навигация: «капля» вместо заливки активного пункта ---------- */
html:root[data-theme] .quicknav__track.lg-seg > a.is-active { color: var(--ink); font-weight: 700; }

/* ============================================================
   ШАПКА: парящая стеклянная капсула (вместо полноширинной полосы)
   .site-header — прозрачная невидимая обёртка на всю ширину, сама капсула — .header__inner.
   Стекло и кромка нарисованы на её псевдоэлементах: backdrop-filter на самой капсуле сделал бы её
   «родителем» для position: fixed у меню-панели на телефоне и сломал бы её положение.
   ============================================================ */
:root {
  --lg-edge-conic: conic-gradient(from 210deg, rgba(255,255,255,1), rgba(190,168,248,.42) 24%, rgba(255,255,255,.82) 46%, rgba(150,206,246,.46) 70%, rgba(255,255,255,1));
  --lg-hdr: rgba(255, 255, 255, .5);           /* стекло шапки у верха страницы */
  --lg-hdr-scrolled: rgba(255, 255, 255, .74); /* после прокрутки плотнее: под ней едет контент */
}
html[data-theme="dark"] {
  --lg-edge-conic: conic-gradient(from 210deg, rgba(236,232,255,.6), rgba(150,130,255,.12) 24%, rgba(215,208,255,.4) 46%, rgba(100,160,230,.14) 70%, rgba(236,232,255,.6));
  --lg-hdr: rgba(30, 25, 52, .5);
  --lg-hdr-scrolled: rgba(28, 23, 48, .78);
}

html:root[data-theme] .site-header,
html:root[data-theme] .site-header.scrolled {
  background: none; border: 0; box-shadow: none; padding: 14px 0; pointer-events: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html:root[data-theme] .site-header.scrolled { padding: 8px 0; }
html:root[data-theme] .site-header .header__inner {
  position: relative; z-index: 0; box-sizing: border-box; pointer-events: auto;
  max-width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 8px 12px 8px 22px; gap: 16px; border-radius: 999px;
}
/* стекло */
html:root[data-theme] .site-header .header__inner::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--glass-spec), var(--glass-gloss), var(--lg-hdr);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--glass-rim), var(--glass-drop-sm);
  transition: background .3s ease, box-shadow .3s ease;
}
html:root[data-theme] .site-header.scrolled .header__inner::after {
  background: var(--glass-spec), var(--glass-gloss), var(--lg-hdr-scrolled);
  box-shadow: var(--glass-rim), var(--glass-drop);
}
/* световая кромка: яркая сверху слева, мягкая снизу справа; заливку не красит */
html:root[data-theme] .site-header .header__inner::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--lg-edge-conic);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* без backdrop-filter — плотная заливка */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:root[data-theme] .site-header .header__inner::after,
  html:root[data-theme] .site-header.scrolled .header__inner::after { background: var(--glass-spec), var(--lg-glass-solid); }
}

/* меню на компьютере: ссылки-капсулы, активная — стеклянная «капля» (js/liquid-fx.js), подчёркивание не нужно */
@media (min-width: 1001px) {
  html:root[data-theme] .nav { gap: 2px; }
  html:root[data-theme] .nav a:not(.nav__cta) { padding: 9px 15px; border-radius: 999px; }
  html:root[data-theme] .nav.lg-seg a::after { display: none; }
}
@media (max-width: 1000px) {
  .nav.lg-seg > .lg-thumb { display: none; }   /* на телефоне меню — выпадающая панель, капля там не нужна */
}

/* кластер утилит внутри капсулы: без второй «таблетки» поверх, только лёгкая подложка кнопок */
html:root[data-theme] .site-header .hutil { background: none; border-color: transparent; box-shadow: none; }

@media (max-width: 720px) {
  html:root[data-theme] .site-header { padding: 10px 0; }
  html:root[data-theme] .site-header.scrolled { padding: 6px 0; }
  html:root[data-theme] .site-header .header__inner { max-width: calc(100% - 20px); padding: 6px 8px 6px 16px; gap: 8px; }
}

/* ============================================================
   ШАПКА НА КОМПЬЮТЕРЕ: «острова» из стекла вместо одной полосы
   логотип · меню (капля + подсветка за курсором) · утилиты · яркая кнопка; между ними воздух.
   На телефоне и в бургер-режиме (≤ 1000 px) остаётся одна капсула выше.
   ============================================================ */
@property --nx { syntax: '<length>'; inherits: false; initial-value: -300px; }
@media (min-width: 1001px) {
  html:root[data-theme] .site-header .header__inner { max-width: min(1400px, calc(100% - 40px)); padding: 0; gap: 12px; border-radius: 0; }
  html:root[data-theme] .site-header .header__inner::before,
  html:root[data-theme] .site-header .header__inner::after { display: none; }

  /* общий материал островов */
  html:root[data-theme] .site-header :is(.logo, .nav, .hutil) {
    position: relative; z-index: 0; margin: 0; border-radius: 999px;
    background: var(--glass-spec), var(--glass-gloss), var(--lg-hdr);
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: var(--glass-rim), var(--glass-drop-sm);
    transition: background .3s ease, box-shadow .3s ease;
  }
  html:root[data-theme] .site-header.scrolled :is(.logo, .nav, .hutil) {
    background: var(--glass-spec), var(--glass-gloss), var(--lg-hdr-scrolled);
    box-shadow: var(--glass-rim), var(--glass-drop);
  }
  /* световая кромка каждого острова */
  html:root[data-theme] .site-header :is(.logo, .nav, .hutil)::before {
    content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: var(--lg-edge-conic);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  }

  /* логотип: сердце в стеклянном шарике */
  html:root[data-theme] .site-header .logo { padding: 7px 20px 7px 8px; gap: 10px; }
  html:root[data-theme] .site-header .logo__mark {
    width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 17px;
    background: var(--lg-thumb); box-shadow: var(--glass-rim), 0 8px 16px -8px rgba(var(--lg-shadow), .5);
  }

  /* меню: центральный остров; подсветка идёт за курсором (js/liquid-fx.js задаёт --nx), активный — капля со спектральным штрихом */
  html:root[data-theme] .site-header .nav {
    margin: 0 auto; padding: 5px; gap: 2px; transition: --nx .25s ease-out, background .3s ease, box-shadow .3s ease;
    background:
      radial-gradient(150px circle at var(--nx) 50%, rgba(var(--lg-glint), .5), rgba(var(--lg-glint), 0) 70%),
      var(--glass-spec), var(--glass-gloss), var(--lg-hdr);
  }
  html:root[data-theme] .site-header.scrolled .nav {
    background:
      radial-gradient(150px circle at var(--nx) 50%, rgba(var(--lg-glint), .5), rgba(var(--lg-glint), 0) 70%),
      var(--glass-spec), var(--glass-gloss), var(--lg-hdr-scrolled);
  }
  html:root[data-theme] .nav a:not(.nav__cta) { padding: 10px 17px; font-size: 14px; font-weight: 500; letter-spacing: .01em; }
  html:root[data-theme] .nav.lg-seg > .lg-thumb { box-shadow: var(--lg-thumb-glow), var(--glass-rim), 0 0 24px -6px rgba(150,130,255,.6); }
  html:root[data-theme] .nav.lg-seg > .lg-thumb::after {
    content: ''; position: absolute; left: 28%; right: 28%; bottom: 4px; height: 2px; border-radius: 2px; background: var(--lg-spectral); opacity: .95;
  }

  /* утилиты: остров с кнопками-кругами */
  html:root[data-theme] .site-header .hutil { padding: 5px; gap: 3px; background: var(--glass-spec), var(--glass-gloss), var(--lg-hdr); border-color: transparent; }

  /* «Заказать»: плотнее и с цветным свечением */
  html:root[data-theme] .site-header .nav__cta { padding: 13px 28px; font-weight: 700; letter-spacing: .02em; box-shadow: var(--g-inner), 0 16px 32px -14px rgba(110,86,190,.95), 0 0 26px -8px rgba(150,130,255,.55); }
}

/* ---------- шапка: чтобы ничего не обрезалось и не ломалось ---------- */
/* бургер-панель на телефоне и планшете осталась fixed: класс lg-seg задавал ей position: relative */
@media (max-width: 1000px) {
  html:root[data-theme] .nav.lg-seg { position: fixed; isolation: auto; }
}
/* меню-остров сжимается вместе с окном: отступы и кегль зависят от ширины, «Заказать» уходит раньше */
@media (min-width: 1001px) {
  html:root[data-theme] .nav a:not(.nav__cta) {
    padding: 10px clamp(6px, calc(1.6vw - 11px), 14px);
    font-size: clamp(12.5px, calc(.5vw + 7.5px), 14px);
    white-space: nowrap;
  }
  html:root[data-theme] .site-header .nav { flex: 0 1 auto; min-width: 0; }
  html:root[data-theme] .site-header .logo { flex: none; }
  html:root[data-theme] .site-header .hutil { flex: none; }
}
@media (min-width: 1001px) and (max-width: 1300px) {
  html:root[data-theme] .site-header .nav__cta { display: none; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  html:root[data-theme] .site-header .logo { padding-right: 14px; }
  html:root[data-theme] .site-header .logo__text { font-size: 19px; }
  html:root[data-theme] .site-header .header__inner { gap: 8px; max-width: calc(100% - 24px); }
}

/* ============================================================
   РАДИУСЫ: одна шкала для всего сайта (аудит: у карточек было 8, 10, 12 и 18 px вперемешку,
   у кнопок 8 px рядом со стеклянными «таблетками»). Вложенный элемент — на ступень мельче родителя.
     12 px  — мелкие значки и номера       16 px  — поля, варианты выбора, строки внутри карточек
     24 px  — карточки и плитки            32 px  — плиты и панели (калькулятор, виджеты, окна)
     999 px — кнопки, чипы, меню, статусы
   ============================================================ */
:root {
  --r-xs: 12px; --r-ctl: 16px; --r-card: 24px; --r-panel: 32px; --r-pill: 999px;
  --radius: 24px; --radius-sm: 16px;
}

/* кнопки — «таблетки», как острова шапки и капли переключателей */
html:root .btn, html:root .btn--sm { border-radius: var(--r-pill); }

/* поля и варианты выбора */
html:root :is(.prep__field, .pick__btn, .calc__opt, .wiz__choice, .sched__opt, .lform__chips .chip span, .prep__item, .bdg__opt, .opath__col, .lplan__out,
  .order__line, .bannerpro__app, .debut__item, .debut__summary) { border-radius: var(--r-ctl); }

/* мелкие значки и номера */
html:root :is(.acad__ico, .tl__num, .svc__icon, .review__pic, .bannerpro__app-ico, .pick__thumb, .acad-mod__n) { border-radius: var(--r-xs); }

/* карточки и плитки */
html:root :is(.cat, .review, .land__card, .wnav__card, .wpack, .merch-card, .tl, .terms__tile, .rules__card, .rules__support, .debut__card, .prep__box,
  .accordion details, .faq details, .custom-embed__frame, .svc, .addcard, .artplan, .ychset, .hero__stats, .lqcard, .land__steps li) { border-radius: var(--r-card); }
html:root .cat__body { border-radius: var(--r-ctl) var(--r-ctl) var(--r-card) var(--r-card); }
html:root .merch-card__media { border-radius: var(--r-card) var(--r-card) 0 0; }
html:root .logos__grid figure { border-radius: var(--r-card); }

/* плиты и панели */
html:root :is(.chatpro, .calc__sum, .acad-demo, .wplus, .wiz, .cta__box, .prep__card, .order__card, .tiers .plan--pro, .modal[open], .srch__panel, .acadpromo__card, .lboard__card) { border-radius: var(--r-panel); }

/* быстрая навигация и боковая вкладка соцсетей */
html:root :is(.quicknav, .quicknav__track, .slider__count) { border-radius: var(--r-pill); }
html:root .socials-tab { border-radius: var(--r-ctl) 0 0 var(--r-ctl); }

/* ============================================================
   ДИЗАЙН v3 — «голографический хрусталь»
   Аудит дал три задачи: убрать повтор (внизу на компьютере дублировалась навигация), вычистить «грязь»
   в тёмной теме и сделать переливы розовый → голубой не случайной кромкой, а языком сайта.
   Всё ниже — токены и небольшие правила поверх прежних слоёв; разметка, тексты и клики не меняются.
   ============================================================ */

/* ---------- 1. Голографическая палитра: розовый → сирень → голубой → мята ----------
   Те же цвета, что и раньше, но заметнее: кромка и блики карточек берут их отсюда. */
:root {
  --holo-pink: #f6b3da; --holo-lav: #cdb8fb; --holo-sky: #a9cdff; --holo-cyan: #a6e6ee; --holo-pearl: #ffffff;
  --holo-edge: linear-gradient(125deg, #f6b3da 0%, #cdb8fb 20%, #fff 34%, #a9cdff 52%, #a6e6ee 68%, #ecb9ef 86%, #f6b3da 100%);
  --holo-edge-soft: linear-gradient(125deg, rgba(246,179,218,.92) 0%, rgba(205,184,251,.9) 22%, rgba(255,255,255,.96) 38%, rgba(169,205,255,.9) 58%, rgba(166,230,238,.86) 76%, rgba(246,179,218,.92) 100%);
  --holo-sheen: linear-gradient(115deg, rgba(166,230,238,.30), rgba(205,184,251,.28) 32%, rgba(255,255,255,.1) 50%, rgba(246,179,218,.3) 70%, rgba(169,205,255,.32));
  --holo-line: linear-gradient(90deg, transparent, #f4a8d4 18%, #c3adf8 40%, #94c6ff 62%, #8fe6ea 82%, transparent);
  --holo-glow: 0 0 0 1px rgba(205,184,251,.3), 0 10px 30px -14px rgba(244,168,212,.55), 0 10px 30px -14px rgba(148,198,255,.5);
  /* фон: розовое и голубое пятна чуть заметнее */
  --lg-a2: .38;
  --lg-a3: .34;
}
html[data-theme="dark"] {
  --holo-pink: #e98ac8; --holo-lav: #8f78f0; --holo-sky: #5ea4f4; --holo-cyan: #54c8e0; --holo-pearl: #b9a8ff;
  --holo-edge: linear-gradient(125deg, #e98ac8 0%, #8f78f0 22%, #b9a8ff 36%, #5ea4f4 54%, #54c8e0 70%, #d27ae6 88%, #e98ac8 100%);
  /* вместо серебристого жемчуга (он давал серую дымку) — цветная кромка: розовый, фиолетовый, синий, бирюзовый */
  --holo-edge-soft: linear-gradient(125deg, rgba(233,138,200,.62) 0%, rgba(143,120,240,.66) 24%, rgba(94,164,244,.56) 50%, rgba(84,200,224,.52) 72%, rgba(233,138,200,.62) 100%);
  --holo-sheen: linear-gradient(115deg, rgba(84,200,224,.16), rgba(143,120,240,.2) 34%, rgba(185,168,255,.05) 52%, rgba(233,138,200,.18) 72%, rgba(94,164,244,.2));
  --holo-line: linear-gradient(90deg, transparent, #e98ac8 18%, #8f78f0 40%, #5ea4f4 62%, #54c8e0 82%, transparent);
  --holo-glow: 0 0 0 1px rgba(143,120,240,.3), 0 12px 34px -16px rgba(233,138,200,.4), 0 12px 34px -16px rgba(94,164,244,.4);
  --lg-b2: 80, 140, 230;   --lg-a2: .24;
  --lg-b3: 196, 96, 176;   --lg-a3: .17;

  /* белёсые блики — главная причина «грязи» на тёмном: делаем их вдвое слабее и цветными */
  --glass-spec:  radial-gradient(130% 55% at 20% -10%, rgba(196,182,255,.15) 0%, rgba(176,162,248,.05) 42%, rgba(176,162,248,0) 70%);
  --glass-gloss: linear-gradient(180deg, rgba(206,194,255,.13) 0%, rgba(176,162,248,.05) 10%, rgba(176,162,248,0) 40%, rgba(150,136,230,0) 70%, rgba(150,136,230,.035) 100%);
  --g-spec:  radial-gradient(180px 100px at 10% 0%, rgba(190,176,255,.14), rgba(190,176,255,0) 72%);
  --g-curve: radial-gradient(150% 70% at 50% -34%, rgba(190,176,255,.09), rgba(190,176,255,0) 62%);
  --g-inner: inset 0 1px 0 rgba(196,182,255,.22), inset 0 0 0 1px rgba(150,130,255,.07),
    inset 0 -12px 20px -16px rgba(0,0,0,.5), inset 0 14px 22px -18px rgba(170,150,255,.12);
  --glass-edge: rgba(170, 150, 255, .28);
  --lg-glass-edge: rgba(170, 150, 255, .3);
  --lg-card-edge: rgba(170, 150, 255, .2);
  --glass-rim:
    inset 2px 2px 3px -2px rgba(214,204,255,.38),
    inset 0 1.5px 0 rgba(214,204,255,.26),
    inset -2px -3px 5px -3px rgba(0,0,0,.45),
    inset 0 -1px 0 rgba(170,150,255,.12),
    inset 0 12px 20px -14px rgba(196,182,255,.16),
    inset 0 0 30px -12px rgba(150,130,255,.3);
  --ink-soft: #bdb5da;
}

/* карточки тёмной темы: глубокий индиго вместо серо-фиолетового, цвет живёт и под кромкой */
html[data-theme="dark"]:root :is(.cat__body, .svc, .addcard, .plan:not(.plan--pro), .artplan, .ychset, .land__card, .land__steps li, .tl, .qz__card,
  .bdg__card, .lboard__card, .acad-tier, .acad-flow li, .wiz__choice:not(.is-on), .guide-card, .terms__box, .acadpromo__card, .opath, .acad-demo,
  .wnav__card, .wpack:not(.wpack--best):not(.wpack--hit), .purchase__card, .account__card) {
  --g-base: linear-gradient(165deg, rgba(48,38,96,.7), rgba(26,21,62,.76));
}
html[data-theme="dark"]:root :is(.review:not(.is-featured), .accordion details, .faq details) {
  --g-base: linear-gradient(165deg, rgba(54,42,104,.74), rgba(30,24,68,.74));
}
html[data-theme="dark"]:root :is(.tiers .plan--pro, .wiz__sum, .cta__box, .review.is-featured, .wiz__choice.is-on, .btn--primary, .wpack--best, .wpack--hit, .wplus) {
  --g-base: linear-gradient(rgba(52,40,104,.6), rgba(30,24,70,.54));
}
html[data-theme="dark"]:root :is(.status, .badge, .cat__from, .review__tag, .deliver__list li, .info-note, .sched__note, .acad__tag, .modepick, .wiz__steps, .hero__stats, .wpack__items li, .wplus__list li, .wnav__packs, .purchase__test) {
  --g-base: linear-gradient(rgba(150,128,250,.12), rgba(110,100,230,.05));
}
html[data-theme="dark"]:root :is(.review__tag, .acad__tag, .cat__from) { --g-base: linear-gradient(rgba(150,128,250,.16), rgba(120,108,235,.1)); }

/* ---------- 2. Голографические акценты ---------- */
/* разделитель под заголовком раздела: переливающаяся линия вместо одноцветной */
.section__head.visible::after { background: var(--holo-line); }
/* ползунок прочтения и спектральный штрих — тот же ряд цветов */
.sfx-progress { background: linear-gradient(90deg, #f4a8d4, #c3adf8 35%, #94c6ff 65%, #8fe6ea); }
/* выделение текста */
::selection { background: rgba(190, 160, 250, .36); color: inherit; }
/* выбранная карточка и активный вариант — яркая кромка и мягкое цветное свечение */
html:root[data-theme] .wiz__choice.is-on { box-shadow: var(--g-inner), var(--holo-glow); }
html:root[data-theme] :is(.tiers .plan--pro, .cta__box, .review.is-featured, .wpack--best, .wpack--hit) { box-shadow: var(--g-inner), var(--holo-glow); }
/* основная кнопка: перелив внутри заливки, на наведении сдвигается */
html:root[data-theme] .btn--primary { --g-l3: var(--holo-sheen); }
html[data-theme="dark"]:root .btn--primary { border-color: rgba(185, 168, 255, .5); }
/* «ghost»-кнопки: тонкая холодная кромка, без серого */
html[data-theme="dark"]:root .btn--ghost { border-color: rgba(170, 150, 255, .34); }

/* ---------- 3. Компьютер: нижняя навигация убрана ----------
   Шапка на компьютере уже несёт все те же разделы, поэтому нижняя капсула только дублировала её.
   На планшете и телефоне (шапка — бургер, ≤ 1000 px) капсула остаётся. */
@media (min-width: 1001px) {
  .quicknav { display: none !important; }
  .cookiebar { bottom: 24px; }
  .footer { padding-bottom: 72px; }
}

/* ---------- 4. Живая модель не закрывает половину экрана ---------- */
@media (min-width: 1024px) {
  .l2d { width: calc(clamp(300px, 30vw, 520px) * var(--l2d-scale)); height: calc(clamp(380px, 36vw, 600px) * var(--l2d-scale)); }
}

/* мелкие плашки и чипы: кромка едва заметна, чтобы цвет не просвечивал сквозь прозрачную заливку */
html[data-theme="dark"]:root {
  --holo-edge-faint: linear-gradient(125deg, rgba(233,138,200,.2) 0%, rgba(143,120,240,.24) 24%, rgba(94,164,244,.2) 50%, rgba(84,200,224,.18) 72%, rgba(233,138,200,.2) 100%);
}
html[data-theme="dark"]:root :is(.status, .badge, .cat__from, .review__tag, .deliver__list li, .info-note, .sched__note, .acad__tag, .modepick, .wiz__steps, .hero__stats, .wpack__items li, .wplus__list li, .wnav__packs, .purchase__test) {
  --g-edge: var(--holo-edge-faint); border-color: rgba(170, 150, 255, .3);
}

/* ============================================================
   ДИЗАЙН v3, часть 2 — кромка шапки, блики, остатки серо-белого
   ============================================================ */

/* кромка островов шапки: розовый → сирень → голубой вместо серебристого кольца */
:root {
  --lg-edge-conic: conic-gradient(from 210deg, rgba(255,255,255,1), rgba(246,179,218,.62) 16%, rgba(205,184,251,.55) 32%, rgba(255,255,255,.92) 47%, rgba(169,205,255,.66) 64%, rgba(166,230,238,.55) 80%, rgba(255,255,255,1));
}
html[data-theme="dark"] {
  --lg-edge-conic: conic-gradient(from 210deg, rgba(233,138,200,.58), rgba(143,120,240,.34) 20%, rgba(190,178,255,.46) 38%, rgba(94,164,244,.46) 60%, rgba(84,200,224,.4) 78%, rgba(233,138,200,.58));
}

/* блик по кнопке: переливается розовым и голубым, а не белой полосой */
.btn::after,
.hero__actions .btn--primary::before, .cta__box .btn--primary::before, .wiz__continue::before {
  background: linear-gradient(105deg, transparent, rgba(255,206,236,.6) 36%, rgba(190,220,255,.66) 64%, transparent);
}
html[data-theme="dark"] .btn::after,
html[data-theme="dark"] .hero__actions .btn--primary::before, html[data-theme="dark"] .cta__box .btn--primary::before, html[data-theme="dark"] .wiz__continue::before {
  background: linear-gradient(105deg, transparent, rgba(240,150,210,.5) 36%, rgba(130,190,255,.5) 64%, transparent);
}

/* тёмная тема: остатки нейтрального белого */
html[data-theme="dark"] .merch-card .slider__dots { background: rgba(28, 22, 60, .6); border-color: rgba(170, 150, 255, .28); }
html[data-theme="dark"] .cta__glow { background: radial-gradient(600px 300px at 50% -20%, rgba(190,160,255,.22), rgba(233,138,200,.08) 42%, transparent 64%); }
html[data-theme="dark"] .review__ava { background: radial-gradient(circle at 30% 25%, rgba(214,204,255,.7), rgba(214,204,255,.08) 70%), var(--holo-edge); background-size: auto, 220% 220%; }
html[data-theme="dark"] .pdots__dot { background: rgba(150,128,250,.2); border-color: rgba(170,150,255,.5); }
html[data-theme="dark"] .pdots__label { background: var(--glass-spec), var(--glass-gloss), rgba(30,24,64,.92); border-color: rgba(170,150,255,.3); }
html[data-theme="dark"] .hero__showcase { border-color: rgba(190,176,255,.5); }

/* на наведение карточки получают розово-голубое свечение по контуру */
@media (hover: hover) {
  html:root[data-theme] :is(.cat, .svc, .addcard, .land__card, .wnav__card, .merch-card, .review:not(.is-featured), .artplan, .ychset, .acad-tier, .guide-card):hover {
    box-shadow: var(--g-inner), var(--holo-glow);
  }
}

/* телефон: плашка под заголовком не переносит последнюю звёздочку на вторую строку */
@media (max-width: 480px) {
  .hero .badge { font-size: 12px; padding-left: 12px; padding-right: 12px; letter-spacing: 0; }
}

/* ============================================================
   ДИЗАЙН v3, часть 3 — подвал свободен
   ============================================================ */
/* у подвала живая модель мягко уходит (класс ставит js/main.js вместе с «наверх»): ссылки внизу не закрыты */
html .l2d.is-away:not(.is-off) { opacity: 0; }

/* ============================================================
   ДИЗАЙН v3, часть 4 — телефон
   ============================================================ */
/* плашка с цифрами на первом экране: «8 направлений» больше не рвётся на две строки */
@media (max-width: 480px) {
  .hero__stats { grid-template-columns: .8fr 1.5fr .8fr; }
  .hero__stats b { font-size: 18px; white-space: nowrap; }
}

/* ============================================================
   ДИЗАЙН v3, часть 5 — смена разделов без полос и резких краёв
   Было: под первым экраном лежала белая подложка (осталась от светлой темы) — в тёмной она давала серую полосу
   с жёстким нижним краем; между разделами то линия-«вода», то ничего; подвал начинался жёсткой линией.
   Стало: никаких полос. Каждый раздел начинается мягким светом сверху (оттенки по кругу: розовый → голубой → сирень → мята),
   а фон страницы по ходу прокрутки переливается в тот же оттенок (js/liquid-fx.js ставит html[data-sec]).
   ============================================================ */

/* 1. подложка под первым экраном больше не нужна: стык с квизом даёт свет раздела */
.hero__wave { display: none; }

/* 2. мягкий свет в начале раздела вместо линий; у разделов с прежней «водяной» линией она заменяется тем же */
:root { --ft: 255, 255, 255; --sw-pink: 244, 168, 212; --sw-blue: 150, 200, 255; --sw-lilac: 190, 168, 248; --sw-aqua: 140, 226, 232; --swa: .22; }
html[data-theme="dark"] { --ft: 20, 17, 32; --sw-pink: 233, 138, 200; --sw-blue: 94, 164, 244; --sw-lilac: 143, 120, 240; --sw-aqua: 84, 200, 224; --swa: .17; }
html body > section ~ section.section.section::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: -1; width: auto; height: clamp(240px, 38vh, 380px);
  transform: none; opacity: 1; pointer-events: none; -webkit-mask: none; mask: none;   /* маска прежней «водяной» линии у четырёх разделов главной не нужна */
  background: radial-gradient(closest-side, rgba(var(--sw), var(--swa)), rgba(var(--sw), 0));
}
html body > section ~ section.section:nth-of-type(4n + 2) { --sw: var(--sw-pink); }
html body > section ~ section.section:nth-of-type(4n + 3) { --sw: var(--sw-blue); }
html body > section ~ section.section:nth-of-type(4n + 4) { --sw: var(--sw-lilac); }
html body > section ~ section.section:nth-of-type(4n + 5) { --sw: var(--sw-aqua); --swa: calc(var(--swa) * .8); }

/* 3. фон перетекает вместе со страницей: у каждого раздела свой акцент среди трёх пятен (лаванда · небо · розовый) */
.lg-blobs { --k1: 1; --k2: 1; --k3: 1; }
html[data-sec="1"] .lg-blobs { --k1: .8;  --k2: .85; --k3: 1.6; }    /* розовый */
html[data-sec="2"] .lg-blobs { --k1: .85; --k2: 1.6;  --k3: .75; }   /* голубой */
html[data-sec="3"] .lg-blobs { --k1: 1.4; --k2: .7;   --k3: 1.25; }  /* сирень с розовым */
/* градиент нарисован один раз на максимальной силе, а «сколько» меняет opacity — это работает на видеокарте без перерисовки */
.lg-blobs i:nth-child(1) { background: radial-gradient(closest-side, rgba(var(--lg-b1), calc(var(--lg-a1) * 1.6)), rgba(var(--lg-b1), 0)); opacity: calc(var(--k1) / 1.6); transition: opacity 1.8s ease; }
.lg-blobs i:nth-child(2) { background: radial-gradient(closest-side, rgba(var(--lg-b2), calc(var(--lg-a2) * 1.6)), rgba(var(--lg-b2), 0)); opacity: calc(var(--k2) / 1.6); transition: opacity 1.8s ease; }
.lg-blobs i:nth-child(3) { background: radial-gradient(closest-side, rgba(var(--lg-b3), calc(var(--lg-a3) * 1.6)), rgba(var(--lg-b3), 0)); opacity: calc(var(--k3) / 1.6); transition: opacity 1.8s ease; }

/* 4. заголовок раздела «проявляется»: поднимается и резко фокусируется, остальное идёт за ним */
@keyframes sfx-head-in { from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(8px); } }
@media (prefers-reduced-motion: no-preference) {
  .section__head.reveal.visible { animation: sfx-head-in .95s var(--ease-out, cubic-bezier(.2, .7, .2, 1)) backwards; }
}

/* 5. подвал: без жёсткой линии — плавно проявляется из страницы, сверху тонкая переливающаяся кромка */
html:root[data-theme] .footer {
  border-top: 0; box-shadow: none; background: linear-gradient(180deg, rgba(var(--ft), 0) 0, rgba(var(--ft), .55) 110px);
}
.footer::before { content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: var(--holo-line); opacity: .85; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .lg-blobs i { transition: none !important; } }

/* ============================================================
   ДИЗАЙН v3, часть 6 — переходы между страницами и разделами (js/page-fx.js)
   • ссылка между страницами и далёкий якорь внутри страницы — «рябь»: новый вид проявляется мягким кругом
     из точки нажатия, с радужным оттенком, который гаснет к концу, а прежний чуть отъезжает вглубь и размывается;
   • «назад/вперёд» и переход без клика — страница уезжает и приезжает по порядку меню;
   • по прибытии заголовок раздела на миг вспыхивает розово-голубым.
   Классы на <html> ставит скрипт и снимает сам; без поддержки View Transitions и при «меньше движения» — как раньше.
   ============================================================ */
@property --vt-r { syntax: '<length>'; inherits: true; initial-value: 0px; }

/* пока идёт переход, содержимое первого экрана уже на месте; те, что успели показаться, остаются без «подъёма» */
html.vt-arrive .reveal:not(.hero__art), .reveal.vt-instant { opacity: 1 !important; animation: none !important; }

@media (prefers-reduced-motion: no-preference) {
  /* рябь */
  html.vt-ripple::view-transition-old(root) {
    mix-blend-mode: normal;
    animation: vt-old-depth calc(1s * var(--vt-slow, 1)) cubic-bezier(.4, 0, .2, 1) both;
  }
  html.vt-ripple::view-transition-new(root) {
    mix-blend-mode: normal;
    -webkit-mask-image: radial-gradient(circle at var(--vt-cx, 50%) var(--vt-cy, 30%), #000 calc(var(--vt-r) - 180px), transparent var(--vt-r));
    mask-image: radial-gradient(circle at var(--vt-cx, 50%) var(--vt-cy, 30%), #000 calc(var(--vt-r) - 180px), transparent var(--vt-r));
    animation: vt-ripple calc(1s * var(--vt-slow, 1)) cubic-bezier(.45, .05, .25, 1) both;
  }
  @keyframes vt-ripple {
    from { --vt-r: 0px;    filter: hue-rotate(-40deg) saturate(1.7) brightness(1.15); }
    to   { --vt-r: 2600px; filter: hue-rotate(0deg) saturate(1) brightness(1); }
  }
  @keyframes vt-old-depth { to { transform: scale(.975); filter: blur(5px); } }

  /* направление: вперёд по меню — слева направо, назад — обратно */
  html.vt-fwd  { --vt-dx: 1; }
  html.vt-back { --vt-dx: -1; }
  html:is(.vt-fwd, .vt-back)::view-transition-old(root) {
    mix-blend-mode: normal;
    animation: vt-slide-out calc(.42s * var(--vt-slow, 1)) cubic-bezier(.4, 0, 1, 1) both;
  }
  html:is(.vt-fwd, .vt-back)::view-transition-new(root) {
    mix-blend-mode: normal;
    animation: vt-slide-in calc(.75s * var(--vt-slow, 1)) cubic-bezier(.2, .7, .2, 1) both;
  }
  @keyframes vt-slide-out { to { opacity: 0; transform: translate3d(calc(var(--vt-dx, 1) * -56px), 0, 0) scale(.985); filter: blur(8px); } }
  @keyframes vt-slide-in  { from { opacity: 0; transform: translate3d(calc(var(--vt-dx, 1) * 72px), 0, 0) scale(1.01); filter: blur(10px); } }

  /* по прибытии заголовок раздела вспыхивает */
  @keyframes sfx-glint {
    0%   { text-shadow: 0 0 0 rgba(var(--sw-pink), 0), 0 0 0 rgba(var(--sw-blue), 0); }
    38%  { text-shadow: 0 0 26px rgba(var(--sw-pink), .8), 0 0 54px rgba(var(--sw-blue), .6); }
    100% { text-shadow: 0 0 0 rgba(var(--sw-pink), 0), 0 0 0 rgba(var(--sw-blue), 0); }
  }
  .is-arrived { animation: sfx-glint 1.6s ease-out both; }
}

/* ДИЗАЙН v3, часть 7 (свет раздела плывёт с прокруткой) убран: давал нагрузку при прокрутке, а заметен был слабо. */

/* ============================================================
   ДИЗАЙН v3, часть 8 — появление элементов
   Было: всё поднималось одинаково — на 20 px и из прозрачности. Стало: у каждого вида элементов свой выход, общий язык —
   «фокус»: объект проявляется из лёгкого размытия, а переливающаяся кромка карточки пробегает по контуру.
     • первый экран: бейдж, заголовок по словам, текст, кнопки, плашка — каскадом; плита с витриной разворачивается в перспективе;
     • карточки каталога, мерча и отзывов влетают с разных сторон с небольшим наклоном (кромка при этом переливается);
     • крупные блоки только поднимаются и проявляются (без размытия: под ним они тяжёлые и мутные);
     • подпись раздела «собирается» из разреженных букв, списки выходят строка за строкой, кнопки в призыве «выскакивают».
   Всё — transform, opacity и filter при появлении; ступени задержки — через sibling-index() там, где браузер его знает.
   «Меньше движения» — без этого блока: остаётся прежнее спокойное проявление.
   ============================================================ */
@keyframes riseIn { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.988); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* ---- первый экран ---- */
  .hero__text.reveal.visible { animation: none; }
  .hero__text.reveal.visible > :not(.hero__title) { animation: enter-up .95s cubic-bezier(.2, .75, .2, 1) backwards; }
  .hero__title .w { display: inline-block; animation: enter-word 1.1s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(.26s + var(--wi, 0) * .15s); }
  .hero__art.reveal.visible { animation: enter-plate 1.4s cubic-bezier(.2, .75, .2, 1) .22s backwards; }
  @keyframes enter-up    { from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(4px); } }
  @keyframes enter-word  { from { opacity: 0; transform: translate3d(0, .5em, 0) scale(.96); filter: blur(6px); } }
  @keyframes enter-plate { from { opacity: 0; transform: perspective(1600px) translate3d(70px, 36px, 0) rotateY(-16deg) rotateX(7deg) scale(.9); } }
  @supports (animation-delay: calc(sibling-index() * 1ms)) {
    .hero__text.reveal.visible > :not(.hero__title) { animation-delay: calc(90ms + (sibling-index() - 1) * 85ms); }
  }

  /* ---- карточки: влёт с разных сторон, фокус и бегущая по контуру кромка (--hx) ---- */
  @keyframes sfx-from-left  { from { opacity: 0; transform: translate3d(-40px, 22px, 0) rotate(-1.4deg) scale(.96); } }
  @keyframes sfx-from-right { from { opacity: 0; transform: translate3d(40px, 22px, 0) rotate(1.4deg) scale(.96); } }
  @keyframes sfx-pop        { from { opacity: 0; transform: translate3d(0, 34px, 0) scale(.94); } }
  /* остальные небольшие карточки и плиты — то же «проявление из фокуса» без бокового влёта */
  .qz__card.reveal.visible, .acadpromo__card.reveal.visible, .lboard__card.reveal.visible,
  .bdg__card.reveal.visible, .debut__card.reveal.visible, .addcard.reveal.visible, .land__block.reveal.visible {
    animation: enter-glass 1s cubic-bezier(.2, .75, .2, 1) backwards;
  }
  @keyframes enter-glass { from { opacity: 0; transform: translate3d(0, 32px, 0) scale(.97); } }

  /* ---- подпись раздела собирается из разреженных букв ---- */
  .section__head.reveal.visible .eyebrow { animation: enter-track 1.3s cubic-bezier(.2, .7, .2, 1) .1s backwards; }
  @keyframes enter-track { from { letter-spacing: .7em; opacity: 0; } }

  /* ---- списки выходят строка за строкой ---- */
  .reveal.visible :is(.deliver__list, .checks, .land__list, .wplus__list, .wpack__items) > li { animation: enter-row .7s cubic-bezier(.2, .75, .2, 1) backwards; animation-delay: .12s; }
  @keyframes enter-row { from { opacity: 0; transform: translate3d(-18px, 0, 0); } }
  @supports (animation-delay: calc(sibling-index() * 1ms)) {
    .reveal.visible :is(.deliver__list, .checks, .land__list, .wplus__list, .wpack__items) > li { animation-delay: calc(.12s + min(sibling-index(), 8) * 60ms); }
  }

  /* ---- кнопки в призыве выскакивают одна за другой ---- */
  .cta__box.reveal.visible .cta__links > .btn { animation: enter-pop .75s cubic-bezier(.34, 1.4, .64, 1) backwards; animation-delay: .45s; }
  @keyframes enter-pop { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.8); } }
  @supports (animation-delay: calc(sibling-index() * 1ms)) {
    .cta__box.reveal.visible .cta__links > .btn { animation-delay: calc(.4s + sibling-index() * 90ms); }
  }
}

/* ============================================================
   ДИЗАЙН v3, часть 9 — нарисованные пузыри (js/decor.js, js/particles.js)
   Раньше пузыри были готовыми картинками. Теперь это «мыльные» пузыри, нарисованные градиентами:
   прозрачная середина, переливающаяся розово-голубая плёнка по краю, блик сверху слева и отсвет снизу.
   Лопаются кольцом, дымкой и брызгами капель (.lp__ring, .lp__mist, .lp__drop — их запускает burst()).
   Цвета берутся из --s1…--s4 (rgb), их ставит скрипт: у каждого пузыря свой порядок оттенков.
   ============================================================ */
.sb { display: block; border-radius: 50%; background: center / 100% 100% no-repeat; }
.dc__img.sb { animation: none; }
/* размытие крупных пузырей слоя back убрано: пузырь и так почти прозрачен, а блюр на нём — лишняя нагрузка при каждом кадре */
.dc__img.sb.has-blur { filter: none; }

/* лопание: кольцо плёнки, дымка и брызги */
.lp__ring, .lp__mist, .lp__drop { position: absolute; left: 0; top: 0; display: block; border-radius: 50%; will-change: transform, opacity; pointer-events: none; }
.lp__ring {
  --s1: 246, 179, 218; --s2: 169, 205, 255; --s3: 166, 230, 238; --s4: 205, 184, 251;
  box-sizing: border-box; border: 1.5px solid rgba(255, 255, 255, .92);
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 58%, rgba(var(--s1), .22) 100%);
  box-shadow: 0 0 12px rgba(var(--s2), .55), inset 0 0 10px rgba(var(--s4), .45);
}
.lp__mist {
  --s1: 246, 179, 218; --s2: 169, 205, 255;
  background: radial-gradient(circle, rgba(var(--s1), .26), rgba(var(--s4), .14) 40%, rgba(var(--s2), .08) 60%, rgba(var(--s2), 0) 74%);
}
.lp__drop {
  --s1: 246, 179, 218; --s2: 169, 205, 255;
  background: radial-gradient(circle at 32% 28%, #fff 0 16%, rgba(var(--s2), .62) 46%, rgba(var(--s1), .3) 100%);
  box-shadow: 0 0 5px rgba(var(--s2), .55);
}
/* пузырь за курсором и после клика — поверх страницы, без картинки */
.lp__p.sb { position: absolute; left: 0; top: 0; }

/* ============================================================
   ДИЗАЙН v3, часть 10 — проверка по правилам ui-ux-pro-max
   Доступность (контраст, фокус, размер текста и целей нажатия), свои иконки вместо эмодзи,
   ссылка «перейти к содержимому», переключатель анимаций, строка доверия у призыва.
   ============================================================ */

/* ---------- 1. Контраст радужного текста в светлой теме ----------
   Было: розово-голубая пастель на молочном фоне давала 2–3 : 1. Теперь крупный текст ≥ 3 : 1, мелкий (рубрики) ≥ 4,5 : 1;
   в тёмной теме переливы и так яркие — без изменений. */
html:not([data-theme="dark"]) {
  --grad-text:    linear-gradient(105deg, #3f86c8 0%, #7358c8 40%, #b24a9e 74%, #cf5f9d 100%);
  --grad-text-sm: linear-gradient(105deg, #2766a8 0%, #5546b8 38%, #9b3590 72%, #1b7480 100%);
}
html[data-theme="dark"] { --grad-text-sm: var(--grad-text); }
.eyebrow { background-image: var(--grad-text-sm, var(--grad-text)); }

/* ---------- 2. Размер текста: не меньше 12 px ---------- */
.eyebrow { font-size: 12px; letter-spacing: .26em; }
.review__tag, .acad__tag, .footer__copy, .footer__copy span, .artgal__name { font-size: max(12px, .8em); }
.langbtn { font-size: 12.5px; }
small, .opath__col h4, .prep__hint { font-size: max(12px, .83em); }
.footer__copy, #year { font-size: 12px; }

/* ---------- 3. Цели нажатия: не меньше 24 × 24 px ---------- */
/* точки слайдера: кнопка 24 × 24, сама точка рисуется внутри */
.slider__dots { gap: 0; }
.slider__dots button { position: relative; width: 24px; height: 24px; background: transparent !important; transition: none; }
.slider__dots button::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 999px; transform: translate(-50%, -50%);
  background: var(--lav-200); transition: width .3s, background .3s;
}
.slider__dots button:hover::before { background: var(--lav-300); }
.slider__dots button.is-active::before { width: 22px; background: var(--lav-500); }
html[data-theme="dark"] .slider__dots button::before { background: rgba(170, 150, 255, .3); }
html[data-theme="dark"] .slider__dots button:hover::before { background: rgba(190, 172, 255, .5); }
html[data-theme="dark"] .slider__dots button.is-active::before { background: var(--lav-400); }
/* ссылки подвала и «подробнее» в калькуляторе */
.footer__nav a, .footer__legal a, .bdg__more { display: inline-flex; align-items: center; min-height: 28px; }
.review__pic, .bdg__label { cursor: pointer; }

/* ---------- 4. Фокус с клавиатуры: ≥ 3 : 1 на любом фоне ---------- */
:root { --focus: #6a4bc2; }
html[data-theme="dark"] { --focus: #d2c4ff; }
html:root :focus-visible { outline-color: var(--focus); }

/* ---------- 5. Ссылка «перейти к содержимому» ---------- */
.skip-link {
  position: fixed; left: 16px; top: -64px; z-index: 200; padding: 12px 20px; border-radius: 999px;
  font: 600 14px var(--font-head); color: var(--ink); text-decoration: none;
  background: var(--glass-spec), var(--glass-gloss), var(--lg-glass-solid, #fff);
  border: 1px solid var(--lg-glass-edge, rgba(150, 130, 230, .4)); box-shadow: var(--glass-rim), var(--glass-drop);
  transition: top .25s cubic-bezier(.2, .7, .2, 1);
}
.skip-link:focus, .skip-link:focus-visible { top: 14px; }
#content { display: block; height: 0; }
#content:focus { outline: none; }

/* ---------- 6. Свои иконки вместо эмодзи: линия 2 px, скруглённые концы, как у поиска и корзины ---------- */
:root {
  --i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4s-7.6-4.6-9.3-9.6C1.5 7.3 3.6 4.2 7 4.2c2 0 3.6 1.1 5 3 1.4-1.9 3-3 5-3 3.4 0 5.5 3.1 4.3 6.6-1.7 5-9.3 9.6-9.3 9.6z'/%3E%3C/svg%3E");
  --i-heart-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4s-7.6-4.6-9.3-9.6C1.5 7.3 3.6 4.2 7 4.2c2 0 3.6 1.1 5 3 1.4-1.9 3-3 5-3 3.4 0 5.5 3.1 4.3 6.6-1.7 5-9.3 9.6-9.3 9.6z'/%3E%3C/svg%3E");
  --i-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.3M12 19.2v2.3M2.5 12h2.3M19.2 12h2.3M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6'/%3E%3C/svg%3E");
  --i-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2 14.6A8.4 8.4 0 0 1 9.4 3.8a8.4 8.4 0 1 0 10.8 10.8z'/%3E%3C/svg%3E");
  --i-half: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 3.5v17' /%3E%3Cpath d='M12 3.5a8.5 8.5 0 0 1 0 17z' fill='black'/%3E%3C/svg%3E");
  --i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v10.5H10l-4.5 3.8V16H4z'/%3E%3C/svg%3E");
  --i-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --i-clip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5l-8 8a5 5 0 0 1-7-7l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7l-8.3 8.3a1.7 1.7 0 0 1-2.4-2.4L15 8'/%3E%3C/svg%3E");
}
.ico, .wishheart::before, .wishbtn > span[aria-hidden="true"]::before, .themebtn > span::before {
  display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor;
  -webkit-mask: var(--ico, none) center / contain no-repeat; mask: var(--ico, none) center / contain no-repeat;
}
.ico { vertical-align: -.14em; }
.ico--heart { --ico: var(--i-heart); } .ico--heart-fill { --ico: var(--i-heart-fill); }
.ico--sun { --ico: var(--i-sun); } .ico--moon { --ico: var(--i-moon); } .ico--half { --ico: var(--i-half); }
.ico--chat { --ico: var(--i-chat); } .ico--cal { --ico: var(--i-cal); } .ico--clip { --ico: var(--i-clip); }
/* логотип: белое сердце в стеклянном шарике */
html:root[data-theme] .logo .logo__mark { font-size: 0; }
.logo__mark .ico { width: 17px; height: 17px; background: linear-gradient(180deg, #fff, #e6dbff); vertical-align: 0; }
html[data-theme="dark"] .logo__mark .ico { background: linear-gradient(180deg, #fff, #cfc3ff); }
/* в светлой теме белое сердце сливалось бы с шариком: даём ему перелив сирень → розовый */
html:not([data-theme="dark"]) .logo__mark .ico { background: linear-gradient(135deg, #a98df0, #e98fc4); }
.mascot__tag .ico { color: #f0a9d0; vertical-align: -.12em; }
/* переключатель темы: иконка по выбранному режиму (theme.js ставит aria-checked в меню) */
.nav__themes i.ico, .themepick__menu i.ico { width: 1.05em; height: 1.05em; vertical-align: -.16em; margin-right: 2px; }
.themebtn > span, .wishbtn > span[aria-hidden="true"], .wishheart { font-size: 0 !important; }
.themebtn > span::before { width: 18px; height: 18px; --ico: var(--i-half); }
.themepick:has([data-theme-opt="light"][aria-checked="true"]) .themebtn > span::before { --ico: var(--i-sun); }
.themepick:has([data-theme-opt="dark"][aria-checked="true"]) .themebtn > span::before { --ico: var(--i-moon); }
/* сердечки «на потом»: контур, а у выбранного — заливка */
.wishheart::before, .wishbtn > span[aria-hidden="true"]::before { content: ''; width: 17px; height: 17px; --ico: var(--i-heart); }
.wishheart--sm::before { width: 15px; height: 15px; }
.wishheart.is-on::before, .wishbtn.has-items > span[aria-hidden="true"]::before { --ico: var(--i-heart-fill); }
@media (pointer: coarse) { .wishheart::before { width: 20px; height: 20px; } .wishheart--sm::before { width: 18px; height: 18px; } }
.themebtn > span::before { content: ''; }

/* ---------- 7. Строка доверия у призыва «Хочешь сделать заказ?» (факты уже есть на сайте: ответ за сутки, цена до старта, предоплата) ---------- */
.cta__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.cta__facts li {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 11px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.2;
  color: var(--ink); background: var(--glass-spec), var(--glass-gloss), var(--glass-tint, rgba(255,255,255,.4));
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim);
}
.cta__facts li::before { content: ''; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--lg-spectral, linear-gradient(135deg, #f0a9d0, #8fd0ff)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.cta__facts li { position: relative; }
.cta__facts li::after { content: ''; position: absolute; left: 11px; top: 50%; width: 8px; height: 4px; margin-top: -3.5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(.9); border-radius: 1px; }

/* ---------- 8. Переключатель «Анимации: полные / спокойные» (js/page-fx.js, localStorage lyss-motion) ----------
   «Спокойные» = без пузырей, плавающих пятен, ряби переходов и анимаций появления; доступно всем, а не только тем, у кого включено «меньше движения». */
html[data-motion="calm"] *, html[data-motion="calm"] *::before, html[data-motion="calm"] *::after {
  animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html[data-motion="calm"] .dc-plane, html[data-motion="calm"] .dc-sky, html[data-motion="calm"] .lp, html[data-motion="calm"] .lg-blobs i,
html[data-motion="calm"] .cursor-glow, html[data-motion="calm"] .sfx-progress { display: none !important; }
html[data-motion="calm"] .reveal { opacity: 1 !important; }
.footer__mode--motion { margin-top: 10px; }

/* ============================================================
   ДИЗАЙН v3, часть 11 — добор по проверке ui-ux-pro-max: остатки мелкого текста и зоны нажатия
   ============================================================ */
/* мелкие подписи, у которых свой размер ниже 12 px (рубрики и чипы моноширинным, номера шагов, подписи цен и пакетов) */
html:root :is(.opath__step small, .langbtn, .slider__count, .hero__stats span, .qz__lbl, .qz__num, .qz__check, .artb__lbl, .artb__num, .wiz__steps li,
  .rigex__name, .rules__label, .rules__gname, .status, .acad-status span, .calc__sumcap, .lplan__price span, .order__cardhead small, .wpack__tag, .review__tag) {
  font-size: 12px;
}
/* активная точка слайдера шире (сама «таблетка» 22 px рисуется внутри) */
.slider__dots button.is-active { width: 34px; }

/* телефон и планшет: зона нажатия шапки и шагов — не меньше 44 px, вид не меняется */
@media (pointer: coarse) {
  :is(.wishbtn, .cartbtn, .themebtn, .srchbtn, .burger) { position: relative; }
  :is(.wishbtn, .cartbtn, .themebtn, .srchbtn)::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
  :is(.qz__stepbtn, .artb__stepbtn) { padding-block: 9px; margin-block: -9px; }
}

/* номера модулей обучения в светлой теме: голубой потемнее (было 2,9 : 1, нужно 4,5 : 1) */
html:not([data-theme="dark"]) .acad-mod__n { color: #3a68b8; }

/* ============================================================
   ДИЗАЙН v3, часть 12 — жидкое стекло по правилам ui-ux-pro-max (стили Liquid Glass и Glassmorphism)
   Что требует плагин и что здесь сделано:
     • стекло — для навигации и управления, а содержимое лежит на отдельном слое: карточки с текстом остаются плотными;
     • размытие 10–20 px: меньше радиус — дешевле каждый кадр прокрутки (было до 24 px, на девяти карточках каталога — ещё и на каждой);
     • на стекле с текстом заливка плотнее, чтобы контраст 4,5 : 1 держался на любом фоне под ним (худший случай — белое или чёрное);
     • обязательный запасной вариант: «уменьшить прозрачность» в системе или переключатель «Стекло: прозрачное / плотное» в подвале —
       непрозрачные поверхности без размытия (reduced-transparency fallback).
   ============================================================ */

/* 1. Бюджет размытия */
html:root[data-theme] { --blur-2: blur(9px) saturate(130%); --blur-3: blur(16px) saturate(150%); --lg-glass-blur: blur(16px) saturate(150%); }
html:root[data-theme] .site-header :is(.logo, .nav, .hutil), html:root[data-theme] .site-header .header__inner::after {
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}

/* 2. Плотность стекла там, где на нём текст: проверено на худшем фоне (белый и чёрный под стеклом) */
html:root:not([data-theme="dark"]) { --lg-glass: rgba(255, 255, 255, .66); }
html:root[data-theme="dark"] { --lg-glass: rgba(30, 25, 52, .74); }

/* 3. Непрозрачный вариант: системное «уменьшить прозрачность» или выбор в подвале (js/page-fx.js ставит html[data-glass="solid"]) */
html:root[data-theme="light"], html:root:not([data-theme="dark"]) { --solid: #f6f2fd; --solid-2: #ffffff; }
html:root[data-theme="dark"] { --solid: #1c1730; --solid-2: #251f40; }
html[data-glass="solid"] {
  --lg-glass: var(--solid); --lg-panel: var(--solid); --lg-glass-solid: var(--solid); --lg-hdr: var(--solid); --lg-hdr-scrolled: var(--solid);
  --glass-tint: var(--solid-2); --lg-card: var(--solid-2);
}
html[data-glass="solid"] *, html[data-glass="solid"] *::before, html[data-glass="solid"] *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-glass="solid"]:root[data-theme] :is(
  .status, .badge, .cat__from, .review__tag, .deliver__list li, .info-note, .sched__note, .acad__tag, .modepick, .wiz__steps, .hero__stats, .wpack__items li, .wplus__list li, .wnav__packs, .purchase__test,
  .cat__body, .svc, .addcard, .plan, .artplan, .ychset, .land__card, .land__steps li, .tl, .qz__card, .bdg__card, .lboard__card, .acad-tier,
  .acad-flow li, .wiz__choice, .guide-card, .terms__box, .acadpromo__card, .opath, .acad-demo, .wnav__card, .wpack, .purchase__card, .account__card,
  .review, .accordion details, .faq details, .wiz__sum, .cta__box, .wplus, .merch-card, .chatpro, .calc__sum, .prep__card, .order__card) { background-color: var(--solid-2); }
html[data-glass="solid"]:root[data-theme] :is(.ppill__head, .totop, .socials-tab, .modetip, .slider__count, .l2d__panel, .hero__continue, .cookiebar, .toast, .quicknav) { background-color: var(--solid) !important; }

/* 4. Переключатель в подвале рядом с «Анимации» */
.footer__mode--extra { margin-top: 10px; }

/* ============================================================
   ДИЗАЙН v3, часть 13 — больше прозрачности у жидкого стекла (просьба владелицы)
   Заливки стекла (шапка, меню, нижняя капсула, панели, плашки, кнопки) прозрачнее; чтобы текст на нём остался читаемым,
   размытие фона слегка гасит (тёмная тема) или осветляет (светлая) то, что лежит под стеклом, — прозрачность видна, а контраст держится.
   Кому мешает — «Стекло: плотное» в подвале (непрозрачный вариант не менялся).
   ============================================================ */
html:root:not([data-theme="dark"]) {
  --lg-glass: rgba(255, 255, 255, .42);
  --lg-hdr: rgba(255, 255, 255, .3);
  --lg-hdr-scrolled: rgba(255, 255, 255, .46);
  --lg-panel: rgba(255, 255, 255, .7);
  --lg-glass-blur: blur(18px) saturate(165%) brightness(1.08);
}
html:root[data-theme="dark"] {
  --lg-glass: rgba(30, 25, 52, .46);
  --lg-hdr: rgba(30, 25, 52, .3);
  --lg-hdr-scrolled: rgba(28, 23, 48, .5);
  --lg-panel: rgba(30, 25, 52, .74);
  --lg-glass-blur: blur(18px) saturate(165%) brightness(.8);
}
html:root:not([data-theme="dark"]) .site-header :is(.logo, .nav, .hutil), html:root:not([data-theme="dark"]) .site-header .header__inner::after {
  -webkit-backdrop-filter: blur(20px) saturate(175%) brightness(1.1); backdrop-filter: blur(20px) saturate(175%) brightness(1.1);
}
html:root[data-theme="dark"] .site-header :is(.logo, .nav, .hutil), html:root[data-theme="dark"] .site-header .header__inner::after {
  -webkit-backdrop-filter: blur(20px) saturate(175%) brightness(.78); backdrop-filter: blur(20px) saturate(175%) brightness(.78);
}
/* непрозрачный вариант не должен «просвечивать»: значения переопределяют новые заливки */
html[data-glass="solid"]:root[data-theme] {
  --lg-glass: var(--solid); --lg-panel: var(--solid); --lg-glass-solid: var(--solid); --lg-hdr: var(--solid); --lg-hdr-scrolled: var(--solid);
  --glass-tint: var(--solid-2); --lg-card: var(--solid-2); --lg-glass-blur: none;
}

/* ============================================================
   ДИЗАЙН v3, часть 14 — плашка с цифрами на первом экране не ломает строки
   «8 направлений» и «3 года» рвались на две строки и вылезали за плашку, когда колонка текста уже ~470 px.
   Теперь цифры не переносятся, кегль и отступы подстраиваются под ширину окна, колонки по содержимому.
   ============================================================ */
@media (min-width: 481px) {
  .hero__stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; max-width: 100%; }
  .hero__stats > div { min-width: 0; padding-inline: clamp(10px, 1.5vw, 20px); }
  .hero__stats b { white-space: nowrap; font-size: clamp(18px, 2.1vw, 28px); }
}

/* ============================================================
   ДИЗАЙН v3, часть 15 — переход между страницами без фризов
   Рябь (маска на весь снимок страницы, перерисовка каждый кадр) и размытие/оттенок всей страницы нагружали главный поток,
   а анимации появления внутри новой страницы шли параллельно — элементы возникали рывками и неравномерно.
   Теперь переход — только прозрачность и лёгкий подъём (видеокарта, без перерисовки), а пока он идёт, внутренние
   анимации появления на странице выключены: всё проявляется одним движением.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html:is(.vt-ripple, .vt-fwd, .vt-back)::view-transition-old(root) {
    mix-blend-mode: normal; animation: vt-fade-out calc(.22s * var(--vt-slow, 1)) ease-out both;
  }
  html:is(.vt-ripple, .vt-fwd, .vt-back)::view-transition-new(root) {
    mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; filter: none;
    animation: vt-fade-in calc(.38s * var(--vt-slow, 1)) cubic-bezier(.2, .7, .2, 1) both;
  }
  @keyframes vt-fade-out { to { opacity: 0; } }
  @keyframes vt-fade-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
  html.vt-arrive *, html.vt-arrive *::before, html.vt-arrive *::after { animation-delay: 0s !important; }
  html.vt-arrive :is(.hero__text > *, .hero__title .w, .hero__art, .section__head, .section__head .eyebrow, .reveal, .reveal *) { animation: none !important; }
}

/* Оптимизация: подписи карточек каталога без размытия фона (девять backdrop-filter на экране) — плотная заливка уже даёт читаемость */
html:root[data-theme] .cat__body { -webkit-backdrop-filter: none; backdrop-filter: none; }
html:root[data-theme="dark"] .cat__body { background: linear-gradient(180deg, rgba(18,15,28,.78) 0%, rgba(18,15,28,.92) 100%); }
html:root:not([data-theme="dark"]) .cat__body { background-color: rgba(255,255,255,.82); }
/* бесконечные анимации и переходы курсора не нужны, пока вкладка скрыта или блок вне экрана */
html.lg-paused *, html.lg-paused *::before, html.lg-paused *::after { animation-play-state: paused !important; }

/* ============================================================
   Загрузка страницы: единое появление вместо каскада
   Каскад на первом экране, заголовок по словам, влёт карточек с разных сторон, строки списков и «выскакивающие» кнопки шли с разными
   задержками и накладывались на загрузку картинок, шрифтов и скриптов — элементы появлялись неравномерно. Теперь все блоки
   проявляются одинаково: прозрачность и небольшой подъём, без ступеней задержки.
   ============================================================ */
.hero__text.reveal.visible { animation: riseIn .7s var(--ease-soft, ease-out) backwards; }
.hero__text.reveal.visible > *, .hero__title .w, .section__head.reveal.visible .eyebrow,
.reveal.visible :is(.deliver__list, .checks, .land__list, .wplus__list, .wpack__items) > li,
.cta__box.reveal.visible .cta__links > .btn { animation: none !important; }
.hero__art.reveal.visible { animation: riseIn .7s var(--ease-soft, ease-out) backwards; }
:is(.catalog__grid > .cat, .merch__grid > .merch-card, .reviews__grid > *, .services__grid > *, .pricing__grid > *).reveal.visible { animation: riseIn .7s var(--ease-soft, ease-out) backwards !important; animation-delay: 0s !important; }
.reveal.visible { animation-delay: 0s; }
@keyframes riseIn { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }

/* Допы с «арт + риг»: рядом с общей «+» две маленькие кнопки — только арт или только риг отдельной позицией в корзину */
.pl__split { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.pl__part {
  min-height: 28px; padding: 4px 11px; border-radius: 999px; cursor: pointer; font: 600 12px var(--font-body); color: var(--lav-600);
  background: var(--glass-spec), var(--glass-gloss), var(--glass-tint, rgba(255,255,255,.4)); border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim);
  transition: transform .2s var(--ease-soft, ease), color .2s, background .2s;
}
.pl__part:hover { transform: translateY(-1px); color: var(--ink); }
.pl__part.is-incart { color: var(--ink); border-color: var(--lav-400); background: linear-gradient(120deg, rgba(178,154,246,.28), rgba(150,206,246,.22)); }
.pl__part.is-incart::after { content: ' ✓'; }
html[data-theme="dark"] .pl__part { color: #d8c8ff; }
@media (pointer: coarse) { .pl__part { min-height: 40px; padding-inline: 14px; } }

/* параллакс декора: сдвигается целиком слой (js/decor.js), а не каждый пузырь через переменные */
.dc-plane { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.dc__par { transform: none !important; transition: none !important; }
.ptable .pl__split { justify-content: flex-start; margin: 4px 0 8px; }

/* лопание и след: без теней и постоянных слоёв — частицы живут доли секунды, а тени размывались на каждом кадре */
.lp__ring, .lp__mist, .lp__drop { will-change: auto; }
.lp__ring { box-shadow: none; }
.lp__drop { box-shadow: none; }
/* без параллакса: слои декора неподвижны (см. js/decor.js) */
.dc-plane { transition: none; will-change: auto; transform: none; }

/* ============================================================
   ДИЗАЙН v4, часть 1 — референсы: Reflect, Liquid Glass (Framer), liquid-glass-eta, галерея Liquid Glass Design
   Показательный экран: шапка и первый экран главной, обе темы.
   Что взято и как переложено на бренд Lyss:
     • Reflect — воздух между блоками, спокойная иерархия, плашки-«пилюли» с лиловой внутренней подсветкой,
       горизонт-свечение под витриной (в тёмной теме), тонкие линии вместо плотных рамок;
     • Liquid Glass (Framer) — мягкие текучие волны с тонкой светящейся кромкой, стеклянные кнопки;
     • liquid-glass-eta — объём стекла: тонкая световая кромка по диагонали (блик сверху слева и снизу справа),
       внутренняя тень, а в Chromium ещё и преломление фона (js/glass-refract.js; в Safari и Firefox — без него, остальное то же);
     • Liquid Glass Design — пастельные полупрозрачные панели в светлой теме, плотнее там, где много текста.
   Выразительное стекло — только у шапки, кнопок и плавающих плашек; панели с текстом плотные.
   ============================================================ */

html:root[data-theme] {
  --v4-glow: 164, 143, 255;
  --v4-rim-a: rgba(255, 255, 255, .95);
  --v4-rim-b: rgba(255, 255, 255, .16);
}
html:root:not([data-theme="dark"]) {
  --v4-rim-a: rgba(255, 255, 255, .98);
  --v4-rim-b: rgba(176, 150, 240, .18);
  --v4-pill: rgba(255, 255, 255, .5);
  --v4-pill-line: rgba(139, 111, 240, .24);
  --v4-pill-glow: rgba(164, 143, 255, .16);
  --hf-1: #9d82ee; --hf-2: #ec86bf; --hf-3: #6fc3dc; --hf-fill: #bda8f5;
}
html:root[data-theme="dark"] {
  --v4-rim-a: rgba(255, 255, 255, .55);
  --v4-rim-b: rgba(164, 143, 255, .12);
  --v4-pill: rgba(24, 14, 56, .38);
  --v4-pill-line: rgba(255, 255, 255, .14);
  --v4-pill-glow: rgba(164, 143, 255, .2);
  --hf-1: #8d76ff; --hf-2: #e07cc6; --hf-3: #6db5ff; --hf-fill: #5b3fd0;
}

/* ---------- 1. Текучие волны на первом экране ---------- */
.hero__flow {
  position: absolute; left: -6%; top: 0; width: 112%; height: 100%; z-index: 0; pointer-events: none; overflow: visible;
  -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent);
  animation: hfDrift 26s ease-in-out infinite alternate;
}
.hero__flow path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero__flow .hf { stroke: url(#hfLine); stroke-width: 1.6; opacity: .9; }
.hero__flow .hf--2 { opacity: .55; }
.hero__flow .hf--3 { opacity: .34; }
.hero__flow .hf--glow { stroke-width: 8; opacity: .32; filter: blur(7px); }
.hero__flow .hf-fill { fill: url(#hfFill); stroke: none; opacity: .7; }
.hero__flow .hf-horizon { stroke: url(#hfHorizon); stroke-width: 1.2; opacity: 0; }
html:root[data-theme="dark"] .hero__flow .hf { opacity: 1; }
html:root[data-theme="dark"] .hero__flow .hf--glow { opacity: .5; }
html:root[data-theme="dark"] .hero__flow .hf-fill { opacity: .3; }
html:root[data-theme="dark"] .hero__flow .hf-horizon { opacity: .9; }
@keyframes hfDrift { from { transform: translate3d(-1.2%, 0, 0); } to { transform: translate3d(1.2%, -10px, 0); } }
html[data-motion="calm"] .hero__flow { animation: none; }
@media (prefers-reduced-motion: reduce) { .hero__flow { animation: none; } }
.hero__inner { position: relative; z-index: 2; }

/* Горизонт-свечение под витриной: тёмная тема, как у Reflect */
html:root[data-theme="dark"] .hero::after {
  content: ''; position: absolute; left: 50%; bottom: 8%; width: 140%; height: 220px; translate: -50% 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--v4-glow), .34), rgba(var(--v4-glow), .1) 55%, transparent 75%);
  filter: blur(14px); opacity: .85;
}

/* ---------- 2. Кромка стекла: тонкий световой край по диагонали (шапка) ---------- */
html:root[data-theme] .site-header :is(.logo, .hutil)::after,
html:root[data-theme] .site-header .nav::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(145deg, var(--v4-rim-a), var(--v4-rim-b) 30%, transparent 52%, var(--v4-rim-b) 74%, var(--v4-rim-a));
  -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);
}
html:root[data-theme] .site-header :is(.logo, .hutil) { position: relative; }
@media (min-width: 1001px) { html:root[data-theme] .site-header .nav { position: relative; } }
@media (max-width: 1000px) { html:root[data-theme] .site-header .nav::after { display: none; } }
/* внутренний объём: свет сверху, мягкая тень снизу */
html:root:not([data-theme="dark"]) .site-header :is(.logo, .nav, .hutil) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -10px 18px -10px rgba(164, 143, 255, .22), 0 14px 30px -20px rgba(92, 70, 170, .4);
}
html:root[data-theme="dark"] .site-header :is(.logo, .nav, .hutil) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -10px 18px -10px rgba(var(--v4-glow), .3), 0 16px 32px -18px rgba(3, 0, 20, .8);
}

/* ---------- 3. Плашки-«пилюли»: прозрачная заливка и лиловое свечение внутри (Reflect) ---------- */
html:root[data-theme] .hero__tags :is(.badge, .status) {
  background: var(--v4-pill); border: 1px solid var(--v4-pill-line);
  box-shadow: inset 0 -7px 11px var(--v4-pill-glow), inset 0 1px 0 rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(8px) saturate(150%); backdrop-filter: blur(8px) saturate(150%);
  font-size: 13px; letter-spacing: .04em;
}
.hero__tags { gap: 10px; margin-bottom: 22px; }

/* ---------- 4. Типографика и воздух первого экрана ---------- */
.hero__title { margin-bottom: 22px; letter-spacing: -.035em; }
.hero__sub { color: var(--ink-2, var(--ink)); opacity: .86; max-width: 31em; }
.hero__actions { margin-top: 30px; gap: 14px; }
.hero .modenow, .hero .quick-links, .hero .guide-path { font-size: 13px; opacity: .78; }
.hero .modenow { margin-top: 22px; }

/* ---------- 5. Кнопки первого экрана: жидкое стекло ---------- */
html:root[data-theme] .hero__actions .btn { min-height: 52px; padding-inline: 26px; border-radius: 999px; font-weight: 600; }
html:root[data-theme] .hero__actions .btn--primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 56%),
    linear-gradient(135deg, #a894f8, #8a70ee 52%, #b88ae8);
  border: 1px solid rgba(255, 255, 255, .5); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -10px 18px -8px rgba(255, 255, 255, .36), inset 0 0 0 1px rgba(110, 80, 220, .25), 0 16px 32px -14px rgba(112, 82, 230, .72);
}
html:root[data-theme] .hero__actions .btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -10px 18px -8px rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(110, 80, 220, .25), 0 22px 40px -14px rgba(112, 82, 230, .85); }
html:root:not([data-theme="dark"]) .hero__actions .btn--ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .38)); border: 1px solid rgba(255, 255, 255, .85); color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, inset 0 -9px 16px -9px rgba(164, 143, 255, .28), 0 12px 26px -16px rgba(92, 70, 170, .45);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
}
html:root[data-theme="dark"] .hero__actions .btn--ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .2); color: #f3efff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -9px 16px -9px rgba(var(--v4-glow), .4), 0 14px 28px -16px rgba(3, 0, 20, .9);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
}

/* ---------- 6. Плашка с цифрами и блок «продолжить»: плотнее — на них текст ---------- */
html:root:not([data-theme="dark"]) .hero__stats { background: rgba(250, 246, 255, .8); border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff, 0 18px 36px -24px rgba(92, 70, 170, .4); }
html:root[data-theme="dark"] .hero__stats { background: rgba(22, 14, 50, .74); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 36px -24px rgba(3, 0, 20, .9); }

/* ---------- 7. Преломление фона (Chromium): js/glass-refract.js ставит html.has-refract и --refract у элементов ---------- */
html.has-refract:not([data-glass="solid"]):not([data-motion="calm"]) :is(.site-header .nav, .site-header .hutil, .site-header .logo, .hero__actions .btn--ghost)[style*="--refract"] {
  -webkit-backdrop-filter: var(--refract) blur(10px) saturate(170%); backdrop-filter: var(--refract) blur(10px) saturate(170%);
}

/* ---------- 8. Свет под витриной и глубина фона: тёмная — индиго и горизонт (Reflect), светлая — пастельный перелив ---------- */
/* глубина тёмного первого экрана — отдельным слоем, который гаснет к низу: без резкой границы со следующим разделом */
html:root[data-theme="dark"] .hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 78% 62%, rgba(68, 38, 168, .42), transparent 70%), linear-gradient(180deg, rgba(5, 2, 22, .45), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent 98%); mask-image: linear-gradient(#000 55%, transparent 98%);
}
html:root[data-theme="dark"] .hero__art {
  background: radial-gradient(72% 34% at 50% 100%, rgba(var(--v4-glow), .5), transparent 72%), linear-gradient(90deg, transparent, rgba(var(--v4-glow), .75) 50%, transparent) 0 100% / 100% 1px no-repeat;
}
html:root:not([data-theme="dark"]) .hero__art {
  background: radial-gradient(70% 32% at 50% 100%, rgba(244, 168, 210, .42), rgba(190, 170, 250, .22) 55%, transparent 74%);
}

/* ============================================================
   ДИЗАЙН v4, часть 2 — тот же язык на всех страницах (владелица одобрила направление по первому экрану)
     • стеклянные кнопки и плашки — везде, не только на первом экране;
     • у каждого раздела после первого — тонкая светящаяся волна у начала (как на первом экране);
     • тёмная тема: индиго вместо серо-фиолетового, горизонт у витрин;
     • карточки с текстом — плотные, стекло остаётся у шапки, кнопок и плавающих плашек.
   ============================================================ */

/* ---------- 1. Кнопки: жидкое стекло по всему сайту ---------- */
html:root[data-theme] .btn:is(.btn--primary, .btn--ghost):not(.btn--sm) { min-height: 48px; padding-inline: 24px; font-weight: 600; }
html:root[data-theme] .btn--primary:not(.hero__actions .btn) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 56%),
    linear-gradient(135deg, #a894f8, #8a70ee 52%, #b88ae8);
  border: 1px solid rgba(255, 255, 255, .5); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -10px 18px -8px rgba(255, 255, 255, .36), inset 0 0 0 1px rgba(110, 80, 220, .25), 0 14px 28px -14px rgba(112, 82, 230, .7);
}
html:root[data-theme] .btn--primary:not(.hero__actions .btn):hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -10px 18px -8px rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(110, 80, 220, .25), 0 20px 36px -14px rgba(112, 82, 230, .85); }
html:root:not([data-theme="dark"]) .btn--ghost:not(.hero__actions .btn) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .4)); border: 1px solid rgba(255, 255, 255, .85); color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, inset 0 -9px 16px -9px rgba(164, 143, 255, .28), 0 10px 22px -16px rgba(92, 70, 170, .45);
}
html:root[data-theme="dark"] .btn--ghost:not(.hero__actions .btn) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .2); color: #f3efff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -9px 16px -9px rgba(var(--v4-glow), .4), 0 12px 24px -16px rgba(3, 0, 20, .9);
}

/* ---------- 2. Волна в начале каждого раздела после первого ---------- */
html body > section ~ section.section.section::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: 150px; pointer-events: none; opacity: .75;
  background: var(--v4-wave) center top / 1440px 150px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
html:root:not([data-theme="dark"]) {
  --v4-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236fc3dc'/%3E%3Cstop offset='.5' stop-color='%23ec86bf'/%3E%3Cstop offset='1' stop-color='%239d82ee'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 62 C240 10 420 118 720 62 S1200 6 1440 62' fill='none' stroke='url(%23g)' stroke-width='1.4' opacity='.8'/%3E%3Cpath d='M0 84 C260 36 440 138 740 84 S1220 30 1440 84' fill='none' stroke='url(%23g)' stroke-width='1.2' opacity='.4'/%3E%3C/svg%3E");
}
html:root[data-theme="dark"] {
  --v4-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236db5ff'/%3E%3Cstop offset='.5' stop-color='%23e07cc6'/%3E%3Cstop offset='1' stop-color='%238d76ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 62 C240 10 420 118 720 62 S1200 6 1440 62' fill='none' stroke='url(%23g)' stroke-width='1.4' opacity='.9'/%3E%3Cpath d='M0 84 C260 36 440 138 740 84 S1220 30 1440 84' fill='none' stroke='url(%23g)' stroke-width='1.2' opacity='.45'/%3E%3C/svg%3E");
}
@media (max-width: 760px) { html body > section ~ section.section.section::after { height: 90px; background-size: 900px 90px; } }
html[data-motion="calm"] body > section ~ section.section.section::after { opacity: .5; }

/* ---------- 3. Тёмная тема: индиго и фиолетовый горизонт ---------- */
html[data-theme="dark"] {
  --lg-b1: 112, 86, 240;   --lg-a1: .3;
  --lg-b2: 70, 112, 226;   --lg-a2: .2;
  --lg-b3: 170, 84, 190;   --lg-a3: .14;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(1100px 620px at 82% -8%, #2a1f55 0%, transparent 62%),
    radial-gradient(900px 520px at -8% 16%, #1a1f4a 0%, transparent 58%),
    radial-gradient(900px 520px at 62% 74%, #2c1b4a 0%, transparent 58%),
    linear-gradient(180deg, #0a0620 0%, #0d0828 60%, #090620 100%);
}

/* ---------- 4. Плашки-«пилюли» на всех страницах ---------- */
html:root[data-theme] :is(.badge, .status, .cat__from, .review__tag, .acad__tag) {
  box-shadow: inset 0 -7px 11px var(--v4-pill-glow), inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* ---------- 5. Воздух у заголовков разделов (Reflect) ---------- */
.section__head { margin-bottom: clamp(36px, 5vw, 56px); }
.section__lead { max-width: 38em; opacity: .88; }

/* таблица цен — много текста: в тёмной теме подложка плотнее и глубже по цвету */
html:root[data-theme="dark"] .ptable { background-color: rgba(18, 12, 48, .62); }

/* ============================================================
   ДИЗАЙН v5, часть 1 — Pearlescent Glass: минимализм, три поверхности, один перламутровый акцент
   Вместо россыпи декора — три уровня материала (токены --surf-*):
     1. страница — спокойный фон: светлая — жемчужно-белая с холодным оттенком, тёмная — графит с лёгким фиолетовым;
     2. плотные панели — всё, где текст, формы, цены и данные: почти непрозрачные, без размытия, с тонкой линией;
     3. выразительное стекло — только шапка, кнопки-значки, плавающие плашки и диалоги.
   Перламутр — один: рамка витрины на первом экране, переливается за курсором (--px/--py из js/lyss-fx.js).
   Референсы: glasso (бенто-панели, мелкая типографика, крупные скругления), Reflect (глубина тёмной темы, тонкие границы),
   Aether на Framer (один переливающийся объект за героем; он там на WebGL, у нас — CSS-рамка без библиотек).
   Токены собраны в LYSS_DESIGN_TOKENS.md.
   ============================================================ */

/* ---------- 1. Токены ---------- */
html:root:not([data-theme="dark"]) {
  --surf-page: #f6f6fb;
  --surf-panel: rgba(255, 255, 255, .9);
  --surf-panel-solid: #ffffff;
  --surf-line: rgba(54, 46, 104, .11);
  --surf-line-strong: rgba(54, 46, 104, .2);
  --surf-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(40, 32, 90, .05), 0 16px 34px -24px rgba(48, 38, 110, .3);
  --pearl-a: #f5a9d3; --pearl-b: #ab96f6; --pearl-c: #8fc6f4; --pearl-d: #a3e2cb;
  --lg-a1: .2; --lg-a2: .15; --lg-a3: .12;
}
html:root[data-theme="dark"] {
  --surf-page: #0f0e16;
  --surf-panel: rgba(25, 22, 38, .92);
  --surf-panel-solid: #191626;
  --surf-line: rgba(196, 184, 255, .14);
  --surf-line-strong: rgba(196, 184, 255, .26);
  --surf-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 36px -24px rgba(0, 0, 0, .75);
  --pearl-a: #e9a6d2; --pearl-b: #9a86f5; --pearl-c: #7fb4f0; --pearl-d: #82d6c0;
  --lg-b1: 104, 84, 196;  --lg-a1: .2;
  --lg-b2: 70, 100, 190;  --lg-a2: .13;
  --lg-b3: 150, 92, 172;  --lg-a3: .09;
}
html:root:not([data-theme="dark"]) body {
  background:
    radial-gradient(1000px 560px at 84% -10%, rgba(214, 204, 255, .45), transparent 62%),
    radial-gradient(800px 480px at -6% 20%, rgba(196, 226, 255, .38), transparent 60%),
    linear-gradient(180deg, #f8f8fc 0%, #f4f3fa 60%, #f6f5fb 100%);
}
html:root[data-theme="dark"] body {
  background:
    radial-gradient(1000px 560px at 84% -10%, rgba(88, 66, 170, .34), transparent 62%),
    radial-gradient(800px 480px at -6% 22%, rgba(54, 70, 150, .22), transparent 60%),
    linear-gradient(180deg, #0f0e16 0%, #12101b 60%, #0e0d15 100%);
}
html:root:not([data-theme="dark"]) { --ink: #22232d; --ink-soft: #565a6a; }

/* ---------- 2. Плотные панели: текст, формы, цены, данные ---------- */
html:root[data-theme] :is(
  .cat__body, .svc, .addcard, .plan, .artplan, .ychset, .land__card, .land__steps li, .tl, .qz__card, .bdg__card, .lboard__card,
  .acad-tier, .acad-flow li, .guide-card, .terms__box, .acadpromo__card, .wnav__card, .wpack, .purchase__card, .account__card, .review,
  .accordion details, .faq details, .merch-card, .chatpro, .prep__card, .order__card, .ptable, .wplus
) {
  background: var(--surf-panel); border: 1px solid var(--surf-line); box-shadow: var(--surf-shadow);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html:root[data-theme] :is(.cat__body, .svc, .addcard, .plan, .artplan, .merch-card, .review, .land__card, .wnav__card, .wpack):hover {
  border-color: var(--surf-line-strong);
}
html:root[data-theme] :is(.plan--pro, .review.is-featured) { border-color: rgba(var(--v4-glow), .5); }
/* заливка на сырой странице вместо цветных «голографических» слоёв у крупных блоков */
html:root[data-theme] :is(.ptable, .cat__body) { background-image: none; }

/* ---------- 3. Первый экран: тише ---------- */
/* плашки — обычные контуры, без свечения и размытия */
html:root[data-theme] .hero__tags :is(.badge, .status) {
  background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--surf-line-strong); font-size: 12.5px; letter-spacing: .05em;
}
/* без постоянной «пробегающей» вспышки на главной кнопке — блик остаётся только при наведении */
.hero__actions .btn--primary::before { animation: none; }
/* лишние украшения у витрины: кристалл-грань и линза. Перламутр — один, рамка (ниже) */
.hero__art::after, .lg-lens { display: none; }
/* волны: одна главная и одна тонкая, без размытого свечения */
.hero__flow .hf--glow, .hero__flow .hf--3 { display: none; }
.hero__flow .hf { opacity: .7; }
html:root[data-theme="dark"] .hero__flow .hf { opacity: .8; }
/* свет под витриной тише */
html:root[data-theme="dark"] .hero__art { background: radial-gradient(72% 30% at 50% 100%, rgba(var(--v4-glow), .3), transparent 72%); }
html:root:not([data-theme="dark"]) .hero__art { background: radial-gradient(70% 28% at 50% 100%, rgba(205, 189, 255, .3), transparent 74%); }
html body > section ~ section.section.section::after { opacity: .45; }

/* ---------- 4. Единственный перламутровый акцент: рамка витрины ---------- */
.hero__showcase::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 3px; pointer-events: none; z-index: 2; animation: none; transform: none;
  background: conic-gradient(from calc(200deg + var(--px, 0) * 70deg + var(--py, 0) * 40deg) at 50% 50%, var(--pearl-a), var(--pearl-b), var(--pearl-c), var(--pearl-d), var(--pearl-a));
  -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);
  opacity: .9;
}
html:root[data-theme="dark"] .hero__showcase::after { opacity: .75; }
html[data-glass="solid"] .hero__showcase::after { opacity: 1; }

/* ---------- 5. Модель-маскот не лежит поверх текста: после первого экрана уходит за содержимое ---------- */
.l2d { transition: opacity .6s ease; }
html.is-past-hero .l2d:not(.is-off) { z-index: 1; }
html.is-past-hero .l2d.is-ready:not(.is-off) { opacity: .6; }

/* ---------- 6. Единая геометрия: карточки каталога, мерча и отзывов — ровными рядами, без «волны» смещений ---------- */
@media (min-width: 1000px) {
  .catalog__grid, .merch__grid, .reviews__grid { align-items: stretch; }
  .catalog__grid > .cat:nth-child(n), .merch__grid > *:nth-child(n), .reviews__grid > *:nth-child(n) { margin-top: 0; }
}

/* ============================================================
   ДИЗАЙН v5, часть 3 — переходы между страницами как в LyssBoard (public/assets/css/base.css, vt.js)
   Старая страница уходит с лёгким размытием и сжатием, новая выплывает с противоположной стороны; шапка стоит на месте,
   а активный пункт меню плавно перетекает. Направление — по порядку меню (js/page-fx.js): вперёд — слева направо, назад — обратно.
   Внутри перехода содержимое первого экрана уже на месте (html.vt-arrive), чтобы появление не шло рывками.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html:is(.vt-fwd, .vt-back) { --vt-dx: 1; }
  html.vt-back { --vt-dx: -1; }
  html:is(.vt-fwd, .vt-back)::view-transition-old(root) {
    mix-blend-mode: normal; animation: vt-board-out calc(.32s * var(--vt-slow, 1)) ease both;
  }
  html:is(.vt-fwd, .vt-back)::view-transition-new(root) {
    mix-blend-mode: normal; animation: vt-board-in calc(.5s * var(--vt-slow, 1)) cubic-bezier(.22, .61, .36, 1) both;
  }
  @keyframes vt-board-out { to { opacity: 0; transform: translate3d(calc(var(--vt-dx, 1) * -36px), 0, 0) scale(.985); filter: blur(6px); } }
  @keyframes vt-board-in  { from { opacity: 0; transform: translate3d(calc(var(--vt-dx, 1) * 44px), 0, 0) scale(.985); filter: blur(8px); } }
  ::view-transition-group(sfx-header) { animation-duration: .45s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
}

/* ---------- заголовки разделов появляются так же, как всё остальное: без размытия, тем же подъёмом ---------- */
.section__head.reveal.visible { animation: riseIn .7s var(--ease-soft, ease-out) backwards; }
.section__head.reveal.visible .eyebrow { animation: none; }

/* ============================================================
   ДИЗАЙН v5, часть 4 — приёмы тёмной темы в светлой, переложенные на жемчуг
   В тёмной: глубина первого экрана (индиго-свет), горизонт-свечение под витриной, светящаяся линия горизонта.
   В светлой то же самое, но светом, а не тьмой: жемчужно-лавандовая дымка, розово-голубая полоса под витриной, тонкая линия горизонта.
   ============================================================ */
html:root:not([data-theme="dark"]) .hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 78% 62%, rgba(196, 182, 255, .34), transparent 70%), radial-gradient(60% 50% at 12% 30%, rgba(190, 226, 255, .3), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent 98%); mask-image: linear-gradient(#000 55%, transparent 98%);
}
html:root:not([data-theme="dark"]) .hero::after {
  content: ''; position: absolute; left: 50%; bottom: 8%; width: 140%; height: 220px; translate: -50% 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(190, 170, 250, .36), rgba(244, 168, 210, .14) 55%, transparent 75%);
  filter: blur(14px); opacity: .8;
}
html:root:not([data-theme="dark"]) .hero__flow .hf-horizon { opacity: .55; }
html:root:not([data-theme="dark"]) .hero__flow .hf { opacity: .8; }
/* плавающие плашки и «+ арт / + риг» в светлой — с тем же внутренним свечением, что в тёмной */
html:root:not([data-theme="dark"]) :is(.pl__part, .ptable .pl__part) { box-shadow: inset 0 -6px 10px -6px rgba(164, 143, 255, .3), inset 0 1px 0 #fff; }

/* ============================================================
   ДИЗАЙН v5, часть 5 — запасной вход страницы (js/page-fx.js, fallbackEnter)
   Если браузер пропустил переход между страницами, разделы страницы выезжают сбоку — прозрачность и сдвиг, без размытия,
   чтобы не перерисовывать всю страницу; шапка и плавающие элементы не двигаются.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.fx-enter, html.fx-enter body { overflow-x: clip; }
  html.fx-fwd  { --fx-dx: 44px; }
  html.fx-back { --fx-dx: -44px; }
  html.fx-enter body > :is(section, footer) { animation: fx-slide-in .5s cubic-bezier(.22, .61, .36, 1) both; }
  @keyframes fx-slide-in { from { opacity: 0; transform: translate3d(var(--fx-dx, 44px), 0, 0); } }
}

/* ============================================================
   ДИЗАЙН v5, часть 6 — переходы без лагов
   Размытие и сжатие снимка всей страницы (как в LyssBoard) перерисовывают весь экран каждый кадр и на многих компьютерах дают рывки.
   Оставлены только прозрачность и сдвиг — их считает видеокарта без перерисовки; движение то же, по порядку меню, без «мыла».
   Шапка не участвует в переходе: она замирает на месте, без собственной анимации.
   ============================================================ */
@keyframes vt-board-out { to { opacity: 0; transform: translate3d(calc(var(--vt-dx, 1) * -28px), 0, 0); } }
@keyframes vt-board-in  { from { opacity: 0; transform: translate3d(calc(var(--vt-dx, 1) * 36px), 0, 0); } }
@media (prefers-reduced-motion: no-preference) {
  html:is(.vt-fwd, .vt-back)::view-transition-old(root) { animation-duration: calc(.22s * var(--vt-slow, 1)); }
  html:is(.vt-fwd, .vt-back)::view-transition-new(root) { animation-duration: calc(.4s * var(--vt-slow, 1)); }
  ::view-transition-group(sfx-header) { animation-duration: 0s; }
  ::view-transition-old(sfx-header), ::view-transition-new(sfx-header) { animation: none; }
}

/* шапка во время перехода: снимок старой шапки не остаётся под новой (шапка стеклянная — сквозь неё был виден прежний пункт меню) */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(sfx-header) { display: none; }
  ::view-transition-new(sfx-header) { animation: none; opacity: 1; }
}

/* ============================================================
   ДИЗАЙН v5, часть 7 — каталог на главной: восемь карточек (чат и баннер объединены в «Кастомные виджеты для стримов»)
   Сетка 3 × 3: первая карточка в две колонки, остальные по одной — без пустых мест и без широкой нижней полосы.
   У объединённой карточки в картинке рядом два примера (чат и баннер).
   ============================================================ */
@media (min-width: 901px) { .catalog__grid { grid-template-rows: repeat(3, var(--cat-h)); } }
.cat--duo .cat__img { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.cat--duo .cat__img img { width: 100%; height: 100%; object-fit: cover; min-width: 0; }

/* семь карточек: ряд 1 — «Live2D» в две колонки и YCH; ряд 2 — три по одной; ряд 3 — «Мерч» и «Расчёт стоимости» в две колонки
   («Обучение ригингу» из каталога убрано: ниже на странице есть своя плашка) */
@media (min-width: 901px) { .catalog__grid > .cat:last-child { grid-column: span 2; } .catalog__grid > .cat:last-child .cat__body { right: auto; width: min(420px, calc(100% - 24px)); } }