/* ==========================================================================
   LEX SITE COMPANY — luxe layer
   Підключається ПІСЛЯ live/styles.css і лише перекриває вигляд.
   Нічого в app.js / styles.css міняти не треба. Щоб прибрати — видаліть
   один рядок <link ... luxe.css> в index.html.
   ========================================================================== */

:root {
  --lx-gold: #d8b873;
  --lx-gold-soft: rgba(216, 184, 115, 0.55);
  --lx-gold-line: rgba(216, 184, 115, 0.22);
  --lx-ink: #07070a;
  --lx-ivory: #f6f1e7;
  --lx-serif: "Cormorant Garamond", "Playfair Display", "Times New Roman", Georgia, serif;
  --lx-sans: "Hanken Grotesk", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lx-ease: cubic-bezier(0.22, 0.8, 0.2, 1);
}

html { scroll-behavior: auto; }
body { font-family: var(--lx-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(216, 184, 115, 0.35); color: #fff; }

/* ---------- Загальна атмосфера: віньєтка + тонке зерно ------------------- */
/* Віньєтка лежить між відео (z-0) і текстом (z-20): темніші краї, світліший центр */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(7, 7, 10, 0) 0%, rgba(7, 7, 10, 0.55) 70%, rgba(7, 7, 10, 0.85) 100%),
    linear-gradient(180deg, rgba(7, 7, 10, 0.55) 0%, rgba(7, 7, 10, 0) 22%, rgba(7, 7, 10, 0) 78%, rgba(7, 7, 10, 0.6) 100%);
}
/* Кіноплівкове зерно поверх усього (дуже слабке, дає «дорогу» фактуру) */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Шапка ----------------------------------------------------------- */
header.fixed {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
  background: linear-gradient(180deg, rgba(7, 7, 10, 0.72), rgba(7, 7, 10, 0));
}
header.fixed > button {
  font-family: var(--lx-sans);
  font-weight: 300;
  letter-spacing: 0.42em !important;
  color: var(--lx-ivory) !important;
}
header.fixed > button:hover { color: var(--lx-gold) !important; }

/* Скляні кнопки TikTok / мова */
header.fixed a[aria-label^="TikTok"],
header.fixed .relative > button {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  transition: border-color 0.35s var(--lx-ease), background 0.35s var(--lx-ease), color 0.35s;
}
header.fixed a[aria-label^="TikTok"]:hover,
header.fixed .relative > button:hover {
  background: rgba(216, 184, 115, 0.1) !important;
  border-color: var(--lx-gold-soft) !important;
}

/* Головна кнопка «Замовити сайт» — шампанське золото замість голого білого */
header.fixed button.rounded-full,
.fixed button.rounded-full.bg-white {
  background: linear-gradient(135deg, #f3e2b3 0%, #d8b873 48%, #b98f45 100%) !important;
  border: 1px solid rgba(255, 244, 214, 0.7) !important;
  color: #17120a !important;
  letter-spacing: 0.06em;
  box-shadow: 0 10px 30px -10px rgba(216, 184, 115, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  transition: transform 0.35s var(--lx-ease), box-shadow 0.35s var(--lx-ease), filter 0.35s !important;
}
header.fixed button.rounded-full:hover,
.fixed button.rounded-full.bg-white:hover {
  filter: brightness(1.06);
  box-shadow: 0 16px 38px -10px rgba(216, 184, 115, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}
header.fixed button.rounded-full svg { fill: #17120a !important; color: #17120a !important; }

/* Випадаючий список мов */
header.fixed .relative > div.absolute {
  background: rgba(12, 12, 15, 0.92) !important;
  border: 1px solid var(--lx-gold-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8) !important;
}

/* ---------- Заголовки всіх екранів ------------------------------------------ */
.fixed.inset-0.z-20 h1,
.fixed.inset-0.z-20 h2 {
  font-family: var(--lx-serif) !important;
  font-weight: 300 !important;
  color: var(--lx-ivory) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.04 !important;
  text-shadow: 0 6px 50px rgba(0, 0, 0, 0.55);
}
.fixed.inset-0.z-20 h1 { font-size: clamp(32px, 4.5vw, 64px) !important; max-width: 14em; margin-inline: auto; }
.fixed.inset-0.z-20 h2 { font-size: clamp(40px, 5.6vw, 82px) !important; }

/* золота «лінія-орнамент» під заголовком */
.fixed.inset-0.z-20 h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, var(--lx-gold), transparent);
}

/* Підзаголовки */
.fixed.inset-0.z-20 h1 + p,
.fixed.inset-0.z-20 h2 + p {
  font-family: var(--lx-sans) !important;
  font-weight: 300 !important;
  color: rgba(246, 241, 231, 0.78) !important;
  letter-spacing: 0.01em;
  line-height: 1.65 !important;
}
.fixed.inset-0.z-20 h2 + p {
  margin-top: 18px !important;
  max-width: 640px !important;
  font-size: clamp(13px, 1.15vw, 15.5px) !important;
}

/* Затемнення екрана під текстом: рівніше й глибше, щоб текст читався на яскравому лобі */
.fixed.inset-0.z-20[style*="rgba(10,10,10"],
.fixed.inset-0.z-20[style*="rgba(10, 10, 10"] {
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(7, 7, 10, 0.5) 0%, rgba(7, 7, 10, 0.82) 100%) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* ---------- Кнопка EXPLORE на першому екрані -------------------------------- */
.fixed.inset-0.z-20 button.group.rounded-full {
  background: transparent !important;
  color: var(--lx-ivory) !important;
  border: 1px solid var(--lx-gold-soft) !important;
  letter-spacing: 0.28em;
  font-weight: 400;
  transition: background 0.4s var(--lx-ease), color 0.4s, border-color 0.4s, transform 0.4s var(--lx-ease) !important;
}
.fixed.inset-0.z-20 button.group.rounded-full:hover {
  background: rgba(216, 184, 115, 0.14) !important;
  border-color: var(--lx-gold) !important;
  color: #fff !important;
}

/* Підказка «scroll» внизу першого екрана: золото замість синього */
.fixed.inset-0.z-20 .text-sky-400,
.fixed.inset-0.z-20 .text-sky-300,
.fixed.inset-0.z-20 .text-sky-500 { color: var(--lx-gold) !important; }

/* ---------- «Що ми робимо» / «Чому обирають нас» — список послуг ---------- */
.sv-list {
  counter-reset: lx;
  max-width: 900px !important;
  margin: clamp(26px, 5vh, 48px) auto 0 !important;
  border-top: 1px solid var(--lx-gold-line);
}

.sv-item {
  counter-increment: lx;
  position: relative;
  padding: clamp(12px, 1.9vh, 20px) clamp(10px, 1.6vw, 22px) !important;
  padding-left: clamp(10px, 1.6vw, 22px) !important; /* прибрали «стрибок» вправо */
  border-bottom: 1px solid var(--lx-gold-line);
  border-radius: 0;
  transition: background 0.5s var(--lx-ease) !important;
}
/* золота риска зліва, що виїжджає при активному пункті */
.sv-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--lx-gold), transparent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.6s var(--lx-ease);
}
.sv-item:is(:hover, :focus-within)::before,
.sv-list:not(:hover):not(:focus-within) .sv-item:first-child::before { transform: scaleY(1); }
.sv-item:is(:hover, :focus-within),
.sv-list:not(:hover):not(:focus-within) .sv-item:first-child {
  background: linear-gradient(90deg, rgba(216, 184, 115, 0.1), rgba(216, 184, 115, 0) 75%);
}
.sv-item:focus-visible { outline: 1px solid var(--lx-gold-soft); outline-offset: -1px; }

.sv-row { align-items: baseline !important; gap: clamp(14px, 2vw, 28px) !important; }

/* «1.» → «01» (нумерація з CSS, текст у <sup> ховаємо) */
.sv-num {
  font-size: 0 !important;
  margin-top: 0 !important;
  min-width: 2.2em;
  vertical-align: baseline;
}
.sv-num::before {
  content: counter(lx, decimal-leading-zero);
  font-family: var(--lx-sans);
  font-size: clamp(11px, 0.95vw, 13px);
  letter-spacing: 0.24em;
  font-weight: 400;
  color: var(--lx-gold-soft);
  transition: color 0.4s;
}
.sv-item:is(:hover, :focus-within) .sv-num::before,
.sv-list:not(:hover):not(:focus-within) .sv-item:first-child .sv-num::before { color: var(--lx-gold); }

/* Назви послуг: елегантний serif замість «кричущих» капсів */
.sv-title {
  font-family: var(--lx-serif) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: clamp(24px, min(3.5vw, 5.4vh), 46px) !important;
  line-height: 1.08 !important;
  color: rgba(246, 241, 231, 0.55) !important;
  text-shadow: none !important;
  transition: color 0.45s var(--lx-ease), transform 0.6s var(--lx-ease) !important;
}
.sv-item:is(:hover, :focus-within) .sv-title,
.sv-list:not(:hover):not(:focus-within) .sv-item:first-child .sv-title {
  color: #fff !important;
  transform: translateX(6px);
}

/* Розкритий опис */
.sv-body > div { margin-left: calc(2.2em + clamp(14px, 2vw, 28px)) !important; max-width: 640px !important; }
.sv-lead {
  margin: 12px 0 4px !important;
  color: var(--lx-gold) !important;
  font-family: var(--lx-sans);
  font-weight: 400;
  font-size: clamp(13px, 1.2vw, 15.5px) !important;
  letter-spacing: 0.01em;
  text-shadow: none !important;
}
.sv-text { color: rgba(246, 241, 231, 0.72) !important; line-height: 1.65 !important; text-shadow: none !important; }
/* на високих екранах є місце — показуємо повний опис, це додає довіри */
@media (min-height: 860px) { .sv-text { display: block !important; margin-top: 6px !important; } }

/* ---------- Адаптив / доступність -------------------------------------------- */
@media (max-width: 640px) {
  header.fixed { padding-left: 16px !important; padding-right: 16px !important; }
  header.fixed > button { letter-spacing: 0.16em !important; font-size: 10px !important; overflow: visible; }
  header.fixed a[aria-label^="TikTok"] { display: none !important; } /* TikTok лишається в меню/футері; на телефоні місце важливіше для кнопки замовлення */
  header.fixed .relative > button > span:first-child { display: none; } /* прапорець */
  .sv-title { font-size: clamp(21px, 6.4vw, 28px) !important; }
  .sv-body > div { margin-left: 0 !important; }
  .fixed.inset-0.z-20 h2::after { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  .sv-item, .sv-item::before, .sv-title { transition: none !important; }
}


/* ==========================================================================
   v2 — картки, іконки, пакети, кнопки (прибирає «синій неон», додає золото)
   ========================================================================== */

/* Підзаголовок: центр (раніше max-width без auto зсував його вліво) + рівні рядки */
.fixed.inset-0.z-20 h2 + p { margin-inline: auto !important; text-wrap: balance; }

/* Екран трохи темніший і з легким матовим склом — фон-відео не заважає тексту */
.fixed.inset-0.z-20[style*="rgba(10,10,10"] {
  background: radial-gradient(75% 65% at 50% 45%, rgba(7,7,10,.66) 0%, rgba(7,7,10,.88) 100%) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* ---------- Картки: димчасте скло з тонкою золотою лінією ---------- */
.fixed.inset-0.z-20 .hw-card {
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(20,20,24,.62) 0%, rgba(10,10,13,.72) 100%);
  border: 1px solid var(--lx-gold-line);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  padding: clamp(18px, 2.2vw, 28px);
  transition: border-color .5s var(--lx-ease), background .5s var(--lx-ease), transform .6s var(--lx-ease), box-shadow .6s var(--lx-ease);
}
.fixed.inset-0.z-20 .hw-card::before { display: none; }          /* глянцевий відблиск */
.fixed.inset-0.z-20 .hw-card::after {                             /* синя пляма → золота нитка зверху */
  inset: 0 0 auto 0; right: auto; bottom: auto; width: 100%; height: 1px; filter: none;
  background: linear-gradient(90deg, transparent, var(--lx-gold-soft) 50%, transparent);
  opacity: .55; transition: opacity .5s;
}
.fixed.inset-0.z-20 .hw-card:hover {
  transform: translateY(-3px);
  border-color: var(--lx-gold-soft);
  background: linear-gradient(180deg, rgba(26,24,20,.7) 0%, rgba(12,11,10,.78) 100%);
  box-shadow: 0 36px 70px -34px rgba(0,0,0,.95), 0 0 40px -18px rgba(216,184,115,.5), inset 0 1px 0 rgba(216,184,115,.18);
}
.fixed.inset-0.z-20 .hw-card:hover::after { opacity: 1; }

/* Текст у картках */
.hw-t {
  font-family: var(--lx-serif); font-weight: 500; letter-spacing: 0; line-height: 1.12;
  font-size: clamp(21px, 2vw, 27px); margin: 8px 0 8px; color: var(--lx-ivory); text-shadow: none;
}
.wy-card .hw-t { font-size: clamp(19px, 1.8vw, 24px); }
.hw-d {
  font-family: var(--lx-sans); font-weight: 300; line-height: 1.62;
  font-size: clamp(13px, 1.2vw, 14.5px); color: rgba(246,241,231,.76); text-shadow: none;
}
.wy-card .hw-d { font-size: clamp(12.5px, 1.1vw, 13.5px); line-height: 1.6; }
.hw-tag { color: var(--lx-gold); font-weight: 400; letter-spacing: .3em; }
/* номери лишаємо тільки там, де є послідовність («Як це працює»); у «Чому ми» і «Пакетах» — прибираємо */
.wy-card .hw-tag, .wp-card .hw-tag { display: none; }

/* Іконки: замість різнокольорових «app-іконок» — єдине шампанське золото */
.hw-ic {
  width: clamp(40px, 4.4vw, 54px); height: clamp(40px, 4.4vw, 54px);
  filter: grayscale(1) sepia(.9) saturate(2.4) hue-rotate(-6deg) brightness(1.02) drop-shadow(0 8px 14px rgba(216,184,115,.28));
}

/* ---------- Пакети: головний екран про гроші ---------- */
.wp-card { padding: clamp(22px, 2.6vw, 34px); }
.wp-card .hw-t { font-size: clamp(24px, 2.4vw, 32px); margin-top: 0; }
.wp-price {
  display: flex; align-items: baseline; gap: .35em;
  margin-top: clamp(14px, 2vh, 22px); padding-top: clamp(12px, 1.8vh, 18px);
  border-top: 1px solid var(--lx-gold-line);
  font-family: var(--lx-serif); font-weight: 300; line-height: 1;
  font-size: clamp(36px, 3.6vw, 50px); letter-spacing: -.01em; color: var(--lx-ivory); text-shadow: none;
}
.wp-from { font-family: var(--lx-sans); font-size: 13px; font-weight: 400; letter-spacing: .08em; color: var(--lx-gold); }
/* середній пакет — тихий акцент (магазин): золота рамка і легкий підйом */
.wp-card:nth-child(2) {
  border-color: var(--lx-gold-soft) !important;
  box-shadow: 0 40px 80px -40px rgba(216,184,115,.4), inset 0 1px 0 rgba(216,184,115,.22) !important;
}
@media (min-width: 900px) { .wp-card:nth-child(2) { transform: translateY(-8px); } }
/* дубль підпису «ціну узгоджуємо в чаті» вже є в підзаголовку */
.wp-grid + p { display: none; }
.wp-grid + p + p { color: rgba(246,241,231,.5) !important; margin-top: 16px !important; }

/* Вибір валюти: зручніші цілі для дотику, золотий активний стан */
.wp-cur { gap: 8px; margin-top: 24px; }
.wp-cb {
  min-height: 36px; padding: 8px 16px; font-size: 12.5px; letter-spacing: .1em;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.16); color: rgba(246,241,231,.8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.wp-cb:hover { border-color: var(--lx-gold-soft); color: #fff; }
.wp-cb.is-on { background: linear-gradient(135deg, #f3e2b3, #d8b873 55%, #b98f45); border-color: rgba(255,244,214,.7); color: #17120a; }
.wp-cb:focus-visible { outline: 1px solid var(--lx-gold); outline-offset: 3px; }

/* ---------- Єдина золота кнопка «Замовити сайт» на всіх екранах ---------- */
.fixed.inset-0.z-20 a[href^="./order.html"] {
  background: linear-gradient(135deg, #f3e2b3 0%, #d8b873 48%, #b98f45 100%) !important;
  color: #17120a !important;
  border: 1px solid rgba(255,244,214,.7);
  font-weight: 500 !important; font-size: 13px !important; letter-spacing: .16em !important; text-transform: uppercase;
  padding: 16px 38px !important;
  box-shadow: 0 14px 36px -12px rgba(216,184,115,.6), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .4s var(--lx-ease), box-shadow .4s var(--lx-ease), filter .4s;
}
.fixed.inset-0.z-20 a[href^="./order.html"]:hover {
  transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 20px 44px -12px rgba(216,184,115,.8), inset 0 1px 0 rgba(255,255,255,.65);
}
.fixed.inset-0.z-20 a[href^="./order.html"]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Дрібні посилання під кнопкою (відгуки / політика) */
.fixed.inset-0.z-20 a[href*="reviews"], .fixed.inset-0.z-20 a[href*="privacy"] {
  color: rgba(246,241,231,.62); text-underline-offset: 4px; transition: color .3s;
}
.fixed.inset-0.z-20 a[href*="reviews"]:hover, .fixed.inset-0.z-20 a[href*="privacy"]:hover { color: var(--lx-gold); }

@media (max-width: 640px) {
  .fixed.inset-0.z-20 .hw-card { padding: 16px 18px; }
  .wp-card:nth-child(2) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fixed.inset-0.z-20 .hw-card, .fixed.inset-0.z-20 a[href^="./order.html"] { transition: none; }
  .fixed.inset-0.z-20 .hw-card:hover, .wp-card:nth-child(2) { transform: none; }
}


/* ==========================================================================
   v3 — Галерея робіт: розмите тепле лобі з відео замість чорного фону
   (кадр 130: мармур і золоті люстри; змінити кадр = змінити номер у url нижче)
   ========================================================================== */
.wg-sheet {
  background: #0b0a08 !important;
  box-shadow: 0 -30px 80px rgba(0,0,0,.65) !important;
}
.wg-sheet::before {
  content: ""; position: absolute; inset: -70px; z-index: 0; height: auto; opacity: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(8,7,6,0) 40%, rgba(8,7,6,.62) 100%),
    linear-gradient(180deg, rgba(8,7,6,.5) 0%, rgba(8,7,6,.12) 38%, rgba(8,7,6,.22) 65%, rgba(8,7,6,.6) 100%),
    url("./public/frames/frame_0130.webp") center / cover no-repeat;
  filter: blur(26px) brightness(.78) saturate(1.2);
}
/* верх «аркуша»: золота лінія + затемнення під логотипом і кнопками */
.wg-sheet::after {
  height: 130px !important;
  background:
    linear-gradient(90deg, transparent, #d8b873 50%, transparent) top / 100% 1px no-repeat,
    linear-gradient(#0b0a08 22%, rgba(11,10,8,0)) !important;
}

/* Скріншоти проєктів: охайні кути, золота ниточка, глибока тінь і тепле сяйво */
.wg-img {
  border-radius: 8px !important;
  background: #14130f !important;
  box-sizing: border-box;
  border: 1px solid rgba(216,184,115,.28);
  box-shadow:
    0 34px 70px -28px rgba(0,0,0,.95),
    0 0 60px -20px rgba(216,184,115,.35),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
@media (max-width: 640px) { .wg-img { border-radius: 6px !important; } }


/* ===== LEX logo in header: golden shimmer ===== */
.lex-logo{
  position:relative; flex:none; display:inline-block;
  width:40px; height:40px; border-radius:10px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(212,175,90,.55), 0 0 14px rgba(212,175,90,.28);
  animation:lexGlow 3.2s ease-in-out infinite;
}
.lex-logo img{
  display:block; width:100%; height:100%; object-fit:cover;
  animation:lexTone 6s ease-in-out infinite;
}
/* sweeping light streak */
.lex-logo::after{
  content:""; position:absolute; inset:-30% -60%;
  background:linear-gradient(115deg, transparent 38%, rgba(255,236,170,.0) 42%,
             rgba(255,244,200,.85) 50%, rgba(255,236,170,.0) 58%, transparent 62%);
  transform:translateX(-80%) ;
  mix-blend-mode:screen;
  animation:lexSweep 3.6s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;
}
/* tiny twinkles */
.lex-logo::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,245,210,.9) 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 74% 68%, rgba(255,245,210,.9) 0 1.2px, transparent 2.5px);
  animation:lexTwinkle 2.4s ease-in-out infinite;
}
.lex-brand:hover .lex-logo{ animation-duration:1.6s; }
@keyframes lexSweep{
  0%{transform:translateX(-80%)}
  55%,100%{transform:translateX(80%)}
}
@keyframes lexGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(212,175,90,.45), 0 0 10px rgba(212,175,90,.20)}
  50%{box-shadow:0 0 0 1px rgba(240,208,120,.85), 0 0 22px rgba(240,208,120,.50)}
}
@keyframes lexTone{
  0%,100%{filter:brightness(1) saturate(1)}
  50%{filter:brightness(1.18) saturate(1.2)}
}
@keyframes lexTwinkle{
  0%,100%{opacity:0} 40%{opacity:1} 70%{opacity:.15}
}
@media (max-width:640px){ .lex-logo{width:34px;height:34px;border-radius:9px} }
@media (prefers-reduced-motion:reduce){
  .lex-logo,.lex-logo img,.lex-logo::after,.lex-logo::before{animation:none}
}