﻿/* ============================================================
   1win — 1win-Тест1
   Порядок: tokens.css → palette-1win.css → style.css
   Блоки: Шапка 02-logo-nav · Hero 03-center-welcome · Слайдер 04-brand ·
          Преимущества 02-light-row (адаптирован тёмный) ·
          Бонусы 03-cards-row · Подвал 02-line-stack · Модалка 02-bonus-toast
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: var(--lb-font-body);
  color: var(--w-text);
  background: var(--w-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }

.w-sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Фон-слой — cyan + orange vignette */
.page-bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(33, 176, 255, 0.24) 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 105%, rgba(30, 95, 204, 0.18) 0%, transparent 65%),
    linear-gradient(180deg, rgba(15, 22, 32, 0.75) 0%, rgba(15, 22, 32, 0.92) 100%),
    url("../assets/bg/bg.png") center / cover no-repeat;
  pointer-events: none;
  transform: translateZ(0);
}

.page { min-height: 100vh; display: flex; flex-direction: column; }
.page__main { flex: 1; }

.section { padding: 48px 0; }
.section--tight { padding: 32px 0; }
.section--games { padding: 24px 0 40px; }

@media (max-width: 720px) {
  .section { padding: 32px 0; }
  .section--games { padding: 16px 0 24px; }
}

/* ============================================================
   Шапка — 02-logo-nav (dark, cyan hover, orange CTA)
   ============================================================ */
.lb-header-logo {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.lb-header-logo__brand {
  justify-self: start;
  display: flex; align-items: center;
  text-decoration: none;
}
.lb-header-logo__img {
  height: 44px; width: auto;
  object-fit: contain;
}

.lb-header-logo__nav {
  justify-self: center;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 28px;
}

.lb-header-logo__actions {
  justify-self: end;
  display: flex; align-items: center;
}
.lb-header-logo__link {
  font-family: var(--lb-font-body);
  font-size: 14px;
  color: var(--w-text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}
.lb-header-logo__link:hover { color: var(--w-blue-hi); }

.lb-header-logo__btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--w-orange-hi) 0%, var(--w-orange) 55%, var(--w-orange-deep) 100%);
  color: #fff;
  font-family: var(--lb-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(30, 95, 204, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.lb-header-logo__btn:hover { transform: translateY(-1px); filter: brightness(1.10); }

@media (max-width: 760px) {
  .lb-header-logo { flex-direction: column; gap: 14px; }
}

/* ============================================================
   Hero — 03-center-welcome (центр, cyan+orange glow)
   ============================================================ */
.lb-hero-welcome {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 24px 48px;
  text-align: center;
  position: relative;
}

/* Только свечение — компактный радиальный halo под лого */
.lb-hero-welcome__glow {
  position: absolute;
  left: 50%; top: 40px;
  transform: translateX(-50%);
  width: min(320px, 72%);
  height: 160px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(33, 176, 255, 0.32) 0%,
    rgba(33, 176, 255, 0.10) 45%,
    transparent 75%);
  filter: blur(12px);
  pointer-events: none;
  z-index: 0;
}

.lb-hero-welcome__logo {
  position: relative; z-index: 1;
  display: block;
  width: min(240px, 62%);
  height: auto;
  margin: 0 auto 28px;
  animation: wFloat 6s ease-in-out infinite;
}
@keyframes wFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

.lb-hero-welcome__title {
  position: relative; z-index: 1;
  margin: 0 0 16px;
  font-family: var(--lb-font-display);
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--w-text);
}
.lb-hero-welcome__title-dark { display: block; color: var(--w-text); }
.lb-hero-welcome__title-blue {
  display: block;
  color: var(--w-blue);
}

.lb-hero-welcome__text {
  position: relative; z-index: 1;
  margin: 0 auto 28px;
  max-width: 640px;
  font-family: var(--lb-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--w-text-soft);
}

.lb-hero-welcome__buttons {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

.lb-hero-welcome__btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px;
  padding: 0 28px;
  border-radius: 10px;
  font-family: var(--lb-font-body);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.lb-hero-welcome__btn:hover { transform: translateY(-1px); }

.lb-hero-welcome__btn--fill {
  background: linear-gradient(180deg, var(--w-orange-hi) 0%, var(--w-orange) 55%, var(--w-orange-deep) 100%);
  color: #fff;
  border: 2px solid var(--w-orange);
  box-shadow: 0 12px 28px rgba(30, 95, 204, 0.42);
}
.lb-hero-welcome__btn--fill:hover { filter: brightness(1.08); }

.lb-hero-welcome__btn--outline {
  background: transparent;
  color: var(--w-blue-hi);
  border: 2px solid rgba(77, 196, 255, 0.55);
}
.lb-hero-welcome__btn--outline:hover {
  background: rgba(33, 176, 255, 0.10);
  border-color: var(--w-blue);
  color: var(--w-blue);
}

/* ============================================================
   Слайдер — 04-brand (Money слева, Logo в центре, Games справа)
   ============================================================ */
.lb-slider-brand {
  --lb-brand-game: clamp(110px, 13vw, 150px);
  --lb-brand-money: clamp(200px, 24vw, 280px);
  --lb-brand-gap: 18px;
  --lb-brand-speed: 26s;
  position: relative;
  width: 100%;
  min-height: calc(var(--lb-brand-money) + 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lb-slider-brand__side {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 1;
}
.lb-slider-brand__side--left {
  left: 0;
  mask-image: linear-gradient(90deg, #000 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 65%, transparent 100%);
}
.lb-slider-brand__side--right {
  right: 0;
  mask-image: linear-gradient(270deg, #000 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(270deg, #000 65%, transparent 100%);
}

.lb-slider-brand__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: w-brand-scroll var(--lb-brand-speed) linear infinite;
  will-change: transform;
}

.lb-slider-brand__group {
  display: flex;
  align-items: center;
  gap: var(--lb-brand-gap);
  padding: 0 calc(var(--lb-brand-gap) / 2);
  flex-shrink: 0;
}

.lb-slider-brand__money {
  width: calc(var(--lb-brand-game) * 1.35);
  height: var(--lb-brand-money);
  object-fit: contain;
  flex-shrink: 0;
  /* делаем купюры брендового синего 1win (зелёный → cyan-blue) */
  filter: hue-rotate(90deg) saturate(1.4) brightness(1.05)
          drop-shadow(0 12px 28px rgba(33, 176, 255, 0.35));
}

.lb-slider-brand__game {
  width: var(--lb-brand-game);
  height: var(--lb-brand-game);
  border-radius: 20px;
  flex-shrink: 0;
  display: block;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(33, 176, 255, 0.28);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lb-slider-brand__game:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55), 0 0 22px rgba(33, 176, 255, 0.38);
}
.lb-slider-brand__game img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.lb-slider-brand__logo {
  position: relative;
  z-index: 3;
  width: clamp(180px, 24vw, 280px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 14px 34px rgba(33, 176, 255, 0.35));
}

@keyframes w-brand-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .lb-slider-brand__track { animation-duration: 200s; }
}
@media (max-width: 700px) {
  .lb-slider-brand { min-height: 220px; }
}

/* ============================================================
   Преимущества — 02-light-row (адаптирован под тёмную тему)
   ============================================================ */
.lb-adv-light {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.lb-adv-light__title {
  margin: 0;
  text-align: center;
  font-family: var(--lb-font-display);
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lb-adv-light__title-dark { color: var(--w-text); }
.lb-adv-light__title-blue {
  color: var(--w-blue);
}

.lb-adv-light__subtitle {
  margin: 12px 0 36px;
  text-align: center;
  font-family: var(--lb-font-body);
  font-size: 16px;
  color: var(--w-text-soft);
}

.lb-adv-light__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.lb-adv-light__card {
  background: linear-gradient(160deg, var(--w-panel) 0%, var(--w-surface) 55%, #10161F 100%);
  border: 1px solid rgba(33, 176, 255, 0.18);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lb-adv-light__card:hover {
  transform: translateY(-3px);
  border-color: rgba(33, 176, 255, 0.40);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(33, 176, 255, 0.22);
}

.lb-adv-light__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.lb-adv-light__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--w-blue-hi) 0%, var(--w-blue-deep) 100%);
  flex-shrink: 0;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 8px 20px rgba(33, 176, 255, 0.35);
}
.lb-adv-light__icon svg { width: 26px; height: 26px; }

.lb-adv-light__card-title {
  margin: 0;
  font-family: var(--lb-font-display);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--w-blue-hi);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lb-adv-light__card-text {
  margin: 0;
  font-family: var(--lb-font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--w-text);
}

@media (max-width: 900px) { .lb-adv-light__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lb-adv-light__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Бонусы — 03-cards-row (сундуки, 1 активная + 3 locked)
   ============================================================ */
.lb-bonus-cards {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.w-bonus__title {
  margin: 0 0 12px;
  text-align: center;
  font-family: var(--lb-font-display);
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.w-bonus__title-dark { color: var(--w-text); }
.w-bonus__title-blue {
  color: var(--w-blue);
}
.w-bonus__lead {
  margin: 0 auto 32px;
  max-width: 660px;
  text-align: center;
  font-family: var(--lb-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--w-text-soft);
}

.lb-bonus-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.lb-bonus-cards__card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  background: linear-gradient(160deg, var(--w-panel) 0%, var(--w-surface) 55%, #10161F 100%);
  border: 1px solid rgba(33, 176, 255, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
  transition: transform 0.2s ease;
}
.lb-bonus-cards__card:hover { transform: translateY(-3px); }

.lb-bonus-cards__card--active {
  background:
    radial-gradient(400px 260px at 50% 10%, rgba(30, 95, 204, 0.30), transparent 70%),
    linear-gradient(160deg, #0B1A2E 0%, #0B1120 55%, #040A18 100%);
  border-color: rgba(77, 196, 255, 0.55);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 34px rgba(30, 95, 204, 0.32);
}

.lb-bonus-cards__icon {
  width: 90px; height: 90px;
  object-fit: contain;
  margin: 0 auto 18px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
}
.lb-bonus-cards__card--active .lb-bonus-cards__icon {
  filter: drop-shadow(0 12px 24px rgba(30, 95, 204, 0.45));
}

.lb-bonus-cards__value {
  margin: 0 0 6px;
  font-family: var(--lb-font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--w-orange-hi);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lb-bonus-cards__label {
  margin: 0;
  font-family: var(--lb-font-body);
  font-size: 14px;
  color: var(--w-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lb-bonus-cards__locked-title {
  margin: 0;
  font-family: var(--lb-font-display);
  font-size: 18px;
  color: var(--w-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lb-bonus-cards__card--locked .lb-bonus-cards__icon {
  opacity: 0.55;
  filter: grayscale(0.6) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
}
.lb-bonus-cards__blur {
  position: absolute; inset: 0;
  background: rgba(15, 22, 32, 0.12);
  backdrop-filter: blur(0.5px);
  pointer-events: none;
}

.w-bonus__cta-wrap { display: flex; justify-content: center; margin-top: 28px; }
.w-bonus__cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px;
  padding: 0 34px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--w-orange-hi) 0%, var(--w-orange) 55%, var(--w-orange-deep) 100%);
  color: #fff;
  font-family: var(--lb-font-body);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(30, 95, 204, 0.42);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.w-bonus__cta:hover { transform: translateY(-1px); filter: brightness(1.10); }

@media (max-width: 900px) { .lb-bonus-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lb-bonus-cards__grid { grid-template-columns: 1fr; } }

/* ============================================================
   SEO / убедительный текст + FAQ
   ============================================================ */
.w-seo { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.w-seo__title {
  margin: 0 0 24px;
  text-align: center;
  font-family: var(--lb-font-display);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.w-seo__title-dark { color: var(--w-text); }
.w-seo__title-blue {
  color: var(--w-blue);
}
.w-seo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  background: linear-gradient(160deg, var(--w-panel) 0%, var(--w-surface) 55%, #10161F 100%);
  border: 1px solid rgba(33, 176, 255, 0.22);
  border-radius: 28px;
  padding: 34px 34px 30px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
}
.w-seo__col { display: flex; flex-direction: column; gap: 14px; }
.w-seo__h3 {
  margin: 8px 0 0;
  font-family: var(--lb-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--w-blue-hi);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.w-seo__col p {
  margin: 0;
  font-family: var(--lb-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--w-text);
}
.w-seo__col p strong { color: var(--w-blue-hi); font-weight: 600; }
.w-seo__list { margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 8px; }
.w-seo__list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--lb-font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--w-text-soft);
}
.w-seo__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--w-blue-hi) 0%, var(--w-blue-deep) 100%);
  box-shadow: 0 0 10px rgba(33, 176, 255, 0.45);
}
.w-seo__list li strong { color: var(--w-text); font-weight: 600; }
.w-seo__list--num { counter-reset: wstep; }
.w-seo__list--num li::before {
  counter-increment: wstep;
  content: counter(wstep);
  width: 22px; height: 22px;
  top: 2px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--w-orange-hi) 0%, var(--w-orange-deep) 100%);
  color: #fff;
  font-family: var(--lb-font-body);
  font-size: 12px;
  font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(30, 95, 204, 0.42);
}
.w-seo__list--num li { padding-left: 34px; }

.w-seo__note {
  padding: 16px 18px;
  border-left: 3px solid var(--w-orange);
  background: rgba(30, 95, 204, 0.10);
  border-radius: 0 14px 14px 0;
  color: var(--w-text-soft) !important;
  font-style: italic;
}
.w-seo__cta { margin-top: 6px; }
.w-seo__btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px;
  padding: 0 34px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--w-orange-hi) 0%, var(--w-orange) 55%, var(--w-orange-deep) 100%);
  color: #fff;
  font-family: var(--lb-font-body);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(30, 95, 204, 0.42);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.w-seo__btn:hover { transform: translateY(-1px); filter: brightness(1.10); }

/* FAQ */
.w-seo__faq { margin-top: 28px; display: grid; gap: 12px; max-width: 900px; margin-left: auto; margin-right: auto; }
.w-seo__q {
  background: linear-gradient(160deg, var(--w-panel) 0%, var(--w-surface) 100%);
  border: 1px solid rgba(33, 176, 255, 0.22);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
}
.w-seo__q[open] { border-color: rgba(33, 176, 255, 0.55); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42), 0 0 18px rgba(33, 176, 255, 0.20); }
.w-seo__q > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--lb-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--w-text);
  padding: 4px 30px 4px 0;
  position: relative;
}
.w-seo__q > summary::-webkit-details-marker { display: none; }
.w-seo__q > summary::after {
  content: "+";
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  display: grid; place-items: center;
  font-size: 20px; line-height: 1;
  color: var(--w-blue-hi);
  transition: transform 0.2s ease;
}
.w-seo__q[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.w-seo__q p {
  margin: 10px 0 4px;
  font-family: var(--lb-font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--w-text-soft);
}
.w-seo__q p strong { color: var(--w-blue-hi); font-weight: 600; }

@media (max-width: 860px) { .w-seo__grid { grid-template-columns: 1fr; padding: 26px 22px; } }

/* ============================================================
   Подвал — 02-line-stack (три строки)
   ============================================================ */
.lb-footer-line {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 28px;
  text-align: center;
}
.lb-footer-line__disclaimer,
.lb-footer-line__copy {
  margin: 0;
  font-family: var(--lb-font-body);
  font-size: 13px;
  color: var(--w-text-soft);
}
.lb-footer-line__copy { font-size: 12px; opacity: 0.75; }
.lb-footer-line__rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(33, 176, 255, 0.35) 50%, transparent 100%);
  margin: 16px auto;
  max-width: 320px;
}

/* ============================================================
   Toast — 02-bonus-toast (orange gradient)
   ============================================================ */
.lb-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  width: min(360px, calc(100% - 32px));
  border-radius: 18px;
  padding: 16px 44px 16px 18px;
  background:
    radial-gradient(320px 180px at 100% 0%, rgba(255, 255, 255, 0.20), transparent 65%),
    linear-gradient(160deg, var(--w-orange-hi) 0%, var(--w-orange) 55%, var(--w-orange-deep) 100%);
  color: var(--w-bg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 30px rgba(30, 95, 204, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.24);
  display: none;
  align-items: flex-start;
  gap: 12px;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.lb-toast.is-open { display: flex; transform: translateY(0); opacity: 1; }

.lb-toast__body { flex: 1; min-width: 0; }
.lb-toast__title {
  margin: 0 0 4px;
  font-family: var(--lb-font-display);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--w-bg);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
}
.lb-toast__text {
  margin: 0 0 12px;
  font-family: var(--lb-font-body);
  font-size: 13px;
  line-height: 1.45;
  color: #0F1620;
  font-weight: 500;
}
.lb-toast__btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--w-bg);
  color: var(--w-orange-hi);
  font-family: var(--lb-font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.lb-toast__btn:hover { transform: translateY(-1px); filter: brightness(1.15); }

.lb-toast__close {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 22, 32, 0.35);
  color: #FFFFFF;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.lb-toast__close:hover { background: var(--w-bg); }
