/* ============================================================
   BT PULSE · landing.css — лендинг (Aurora)
   Герой с ECG-анимацией через кристалл, секции, формы.
   ============================================================ */

/* ---------- Каркас ---------- */
.ld-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.ld-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg-0) 93%, transparent);
  border-bottom: 1px solid var(--border);
}
.ld-head-inner { max-width: 1200px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 16px; }
.ld-head .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.ld-head nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.ld-head nav a { padding: 8px 13px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.ld-head nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
/* Primary-кнопки лендинга: мягкий брендовый градиент, без «кислотности» */
.ld-head .btn-primary, .ld-auth-card .btn-primary, .ld-cta .btn-primary {
  background: linear-gradient(135deg, #6279E6, #8B6FE0);
  color: #fff; font-weight: 600; text-shadow: none;
  box-shadow: 0 4px 18px rgba(110, 116, 224, .28);
}
.ld-head .btn-primary:hover, .ld-auth-card .btn-primary:hover, .ld-cta .btn-primary:hover {
  opacity: .94; box-shadow: 0 6px 22px rgba(110, 116, 224, .34);
}

/* ---------- Герой ---------- */
.ld-hero { padding: 40px 0 30px; text-align: center; position: relative; }
.ld-hero-svg { margin: 0 auto; max-width: 1440px; }
.ld-hero-svg svg { width: 100%; height: auto; display: block; }
.ld-hero h1 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(34px, 5.2vw, 64px); line-height: 1.05; margin: 10px 0 16px;
  background: linear-gradient(100deg, #EEF1F9 20%, #A9C3FF 55%, #C4B5FD 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ld-tag { color: var(--text-2); font-size: clamp(15px, 1.6vw, 18px); max-width: 640px; margin: 0 auto 26px; line-height: 1.6; }
.ld-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.ld-note { color: var(--muted); font-size: 12.5px; margin-top: 14px; }

/* ---------- ECG-анимация через кристалл ----------
   Комета скрыта за пределами пути 0–25% и 75–100% цикла (период dash 200),
   движется 25–75% — синхронно с SMIL-головой (keyPoints/keyTimes). */
@keyframes ldComet { from { stroke-dashoffset: 50; } to { stroke-dashoffset: -150; } }
.ld-comet { stroke-dasharray: 10 190; stroke-dashoffset: 50; animation: ldComet 4.6s linear infinite; }

/* Зажигание узлов при проходе пульса (цикл 4.6s, фазы — delay) */
@keyframes ldNodeIgnite {
  0%, 100% { opacity: .55; transform: scale(1); }
  4% { opacity: 1; transform: scale(2); }
  12% { opacity: .55; transform: scale(1); }
}
.ld-ignite { animation: ldNodeIgnite 4.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }

/* Мерцание фоновых узлов */
@keyframes ldTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.ld-twinkle { animation: ldTwinkle 3.2s ease-in-out infinite; }
.ld-twinkle:nth-of-type(2n) { animation-delay: .7s; }
.ld-twinkle:nth-of-type(3n) { animation-delay: 1.3s; }

/* Дыхание ядра */
@keyframes ldCoreBreath { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
.ld-core-breath { animation: ldCoreBreath 4.6s ease-in-out infinite; }

/* Свечение-ореол кристалла */
@keyframes ldHaloBreath { 0%, 100% { opacity: .25; } 50% { opacity: .5; } }
.ld-halo { animation: ldHaloBreath 4.6s ease-in-out infinite; }

/* Появление героя */
@keyframes ldHeroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ld-hero-in { animation: ldHeroIn .9s cubic-bezier(.2,.7,.3,1) both; }
.ld-hero-in-1 { animation-delay: .15s; }
.ld-hero-in-2 { animation-delay: .3s; }
.ld-hero-in-3 { animation-delay: .45s; }

/* ---------- Секции ---------- */
.ld-sec { padding: 64px 0 24px; scroll-margin-top: 76px; }
.ld-sec-title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -.02em; text-align: center; margin-bottom: 10px; }
.ld-sec-sub { color: var(--muted); text-align: center; max-width: 620px; margin: 0 auto 34px; font-size: 15px; line-height: 1.6; }

.ld-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .ld-features { grid-template-columns: 1fr; } }
.ld-feature {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 22px; transition: transform var(--t-med), border-color var(--t-med);
}
.ld-feature:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.ld-feature .ld-f-ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px;
  background: var(--accent-soft); color: var(--accent);
}
.ld-feature h3 { font-family: var(--font-display); font-size: 16px; margin-bottom: 8px; }
.ld-feature p { color: var(--text-2); font-size: 13.5px; line-height: 1.6; }

/* Шаги */
.ld-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
@media (max-width: 980px) { .ld-steps { grid-template-columns: 1fr; } }
.ld-step { position: relative; padding: 24px 22px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.ld-step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 30px; font-weight: 700;
  background: var(--scheme-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: 10px;
}
.ld-step h3 { font-size: 15px; margin-bottom: 8px; font-family: var(--font-display); }
.ld-step p { color: var(--text-2); font-size: 13.5px; line-height: 1.6; }

/* Аудитория */
.ld-aud { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 980px) { .ld-aud { grid-template-columns: 1fr; } }
.ld-aud-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; }
.ld-aud-card h3 { font-family: var(--font-display); font-size: 15.5px; margin-bottom: 10px; color: var(--accent); }
.ld-aud-card ul { list-style: none; }
.ld-aud-card li { color: var(--text-2); font-size: 13.5px; line-height: 1.55; padding: 5px 0 5px 20px; position: relative; }
.ld-aud-card li::before { content: ''; position: absolute; left: 0; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--scheme-gradient); }

/* Метрики-стрип */
.ld-metrics { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Формы auth */
.ld-auth { padding-bottom: 70px; }
.ld-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 860px; margin: 0 auto; }
@media (max-width: 860px) { .ld-auth-grid { grid-template-columns: 1fr; } }
.ld-auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; }
.ld-auth-card h3 { font-family: var(--font-display); font-size: 18px; margin-bottom: 6px; }
.ld-auth-card .caption { margin-bottom: 16px; }
.ld-auth-card input {
  width: 100%; padding: 12px 14px; border-radius: 12px; margin-bottom: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-ui); font-size: 14px; outline: none;
  transition: border-color var(--t-fast);
}
.ld-auth-card input:focus { border-color: var(--accent); }
.ld-auth-guest { text-align: center; margin-top: 22px; }
.ld-error { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.35); color: var(--bad); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; }

/* Подвал лендинга */
.ld-foot { border-top: 1px solid var(--border); padding: 26px 0 34px; text-align: center; color: var(--muted); font-size: 13px; }

/* Скролл-появление секций */
.ld-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.ld-reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ld-comet, .ld-comet-trail, .ld-ignite, .ld-twinkle, .ld-core-breath, .ld-halo, .ld-hero-in { animation: none !important; }
  .ld-reveal { opacity: 1; transform: none; transition: none; }
}