/* LIFE DM — слой лендинга.
   Подключается после собранного бандла, поэтому всё отсюда перебивает его.
   Имена классов в этом файле через classmap сборки НЕ проходят: безопасно
   использовать только свои lf-* и селекторы по тегам. */

:root{
  --lf-gold:#f2c14e;
  --lf-gold-soft:#f8d071;
  --lf-ink:#1a1408;              /* тёмный текст на золоте */
  --lf-gold-line:rgba(242,193,78,.26);
}

/* ── Лендинг ─────────────────────────────────────────────────────────────── */
.lf-land{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100svh;
  padding:128px 24px 72px;
  text-align:center;
}

/* Тёплое рассеянное свечение вместо холодного синего пятна */
.lf-land__glow{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 46% at 50% 14%, rgba(242,193,78,.16), transparent 62%),
    radial-gradient(ellipse 44% 32% at 50% 100%, rgba(242,193,78,.06), transparent 74%);
}
.lf-land__glow::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:13%;
  width:min(860px,80vw);
  height:1px;
  background:linear-gradient(90deg, transparent, var(--lf-gold-line), transparent);
  transform:translateX(-50%);
}

.lf-land__in{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(920px,100%);
  gap:26px;
}

.lf-land__kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0;
  padding:7px 15px;
  background:rgba(242,193,78,.07);
  border:1px solid var(--lf-gold-line);
  border-radius:999px;
  color:var(--lf-gold);
  font-size:11px;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.lf-land__kicker::before{
  content:'';
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--lf-gold);
}

.lf-land__title{
  margin:0;
  color:#fff;
  font-size:clamp(56px,14vw,132px);
  font-weight:900;
  letter-spacing:-.05em;
  line-height:.88;
  text-transform:uppercase;
}
/* Небольшой воздух между LIFE и DM — разметку не трогаем */
.lf-land__title span{
  margin-left:.14em;
  color:var(--lf-gold);
}

/* Главная кнопка — тёмный текст на золоте, мягкая тёплая тень */
.lf-dc{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  width:100%;
  min-height:88px;
  padding:22px 28px;
  background:var(--lf-gold);
  color:var(--lf-ink);
  border:0;
  border-radius:12px;
  box-shadow:0 14px 38px rgba(242,193,78,.22);
  font-size:clamp(18px,3.4vw,27px);
  font-weight:800;
  letter-spacing:.06em;
  line-height:1;
  text-transform:uppercase;
  text-decoration:none;
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lf-dc:hover{
  background:var(--lf-gold-soft);
  transform:translateY(-2px);
  box-shadow:0 18px 46px rgba(242,193,78,.3);
}
.lf-dc:active{transform:translateY(0)}
.lf-dc svg{
  width:32px;
  height:32px;
  flex:0 0 32px;
  fill:var(--lf-ink);
}

/* Второстепенная — только контур */
.lf-pay{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:14px 30px;
  background:transparent;
  color:#fff;
  border:1px solid var(--lf-gold-line);
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.lf-pay:hover{
  background:rgba(242,193,78,.09);
  border-color:var(--lf-gold);
  color:var(--lf-gold);
}

.lf-nav-pay{margin-left:auto}

@media (max-width:640px){
  .lf-land{padding:110px 16px 52px}
  .lf-land__in{gap:20px}
  .lf-land__kicker{letter-spacing:.2em}
  .lf-dc{min-height:74px;border-radius:10px;letter-spacing:.03em}
  .lf-dc svg{width:26px;height:26px;flex-basis:26px}
}

@media (prefers-reduced-motion:reduce){
  .lf-dc,.lf-pay{transition:none}
  .lf-dc:hover{transform:none}
}