/* Плавающий фон первого экрана: светлый верх и волна синий → розовый → красный.
   Слои: появление (подъём снизу), параллакс при прокрутке, один плавный дрейф. Картинок нет — только градиенты. */
.bg-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-parallax,.bg-enter,.bg-ambient{position:absolute;inset:0}
.bg-enter{opacity:0}
.bg-enter-on{animation:bg-enter 1.6s cubic-bezier(.215,.61,.355,1) both}
.bg-ambient{will-change:transform;animation:bg-ambient 40s steps(100,jump-none) 0s 1 both}
.bg-art{position:absolute;inset:-12% -35%;
  background:
    radial-gradient(34% 14% at 50% 74%,rgba(160,190,255,.95),transparent 72%),
    radial-gradient(50% 20% at 14% 50%,#3f72ff,transparent 76%),
    radial-gradient(50% 20% at 86% 50%,#3f72ff,transparent 76%),
    radial-gradient(42% 18% at 50% 63%,#4f7cff,transparent 76%),
    radial-gradient(48% 19% at 20% 70%,#ff6fd8,transparent 76%),
    radial-gradient(48% 19% at 80% 70%,#ff6fd8,transparent 76%),
    radial-gradient(60% 17% at 50% 82%,#ff4f9a,transparent 76%),
    radial-gradient(80% 22% at 50% 96%,#ff2d55,transparent 78%);
  filter:blur(22px) saturate(1.15)}
@keyframes bg-enter{0%{opacity:0;transform:translateY(50vh)}100%{opacity:1;transform:none}}
@keyframes bg-ambient{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(2.4%,-1.6%) scale(1.09)}
  50%{transform:translate(-1.2%,2%) scale(1.12)}
  75%{transform:translate(-2.8%,-.8%) scale(1.06)}}
@supports (animation-timeline:scroll(root)){
  .bg-parallax{animation:bg-parallax linear both;animation-timeline:scroll(root);animation-range:0 1800px}
  @keyframes bg-parallax{to{transform:translate3d(0,360px,0)}}
}

/* Первый экран: один экран по центру */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:#fcfbf8;color:#14141c;display:flex;justify-content:center;text-align:center;padding:clamp(150px,27svh,280px) 20px 90px}
.hero-in{position:relative;z-index:2;max-width:860px;width:100%}
.hero-pill{display:inline-block;margin:0 0 18px;padding:6px 14px;border-radius:999px;font-size:14px;color:#3b3d52;background:rgba(255,255,255,.7);border:1px solid rgba(20,20,28,.08)}
.hero-h1{margin:0 0 16px;font-size:clamp(32px,5vw,60px);line-height:1.06;font-weight:800;letter-spacing:-.035em}
.hero-lede{margin:0 auto 26px;max-width:620px;font-size:clamp(16px,1.6vw,19px);line-height:1.5;color:#4a4c60}
.hero-card{margin:0 auto;max-width:720px;padding:26px 32px 22px;border-radius:26px;background:#fff;box-shadow:0 10px 40px rgba(60,70,160,.16),0 1px 2px rgba(20,20,28,.06)}
.hero-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:6px;}
.hero-note{margin:12px 0 0;font-size:14px;color:#5c5e72}

/* Появление: проявление с лёгким размытием, по очереди. Состояние после анимации не удерживаем (fill backwards),
   иначе остаточный filter/transform делает элемент контейнером для выпадающего меню. */
@keyframes hero-in{from{opacity:0;filter:blur(6px);transform:translateY(10px)}}
@keyframes nav-in{from{opacity:0;transform:translateY(-6px)}}
.hero [data-in],.hw{animation:hero-in .9s cubic-bezier(.22,.8,.2,1) backwards;animation-delay:calc(var(--d,0)*90ms + 120ms)}
.hw{display:inline-block;animation-delay:calc(var(--i,0)*45ms + 260ms)}
.site-nav-in>*{animation:nav-in .7s cubic-bezier(.22,.8,.2,1) backwards;animation-delay:calc(var(--d,0)*70ms + 80ms)}
.site-nav-in>:nth-child(1){--d:0}.site-nav-in>:nth-child(2){--d:1}.site-nav-in>:nth-child(3){--d:2}.site-nav-in>:nth-child(4){--d:3}
@media (prefers-reduced-motion:reduce){
  .bg-enter-on,.bg-ambient,.bg-parallax{animation:none}.bg-enter{opacity:1}
  .hero [data-in],.hw,.site-nav-in>*{animation:none}
}
@media (max-width:700px){.hero{padding-top:130px}.hero-card{padding:14px}}

/* Уточнения первого экрана и меню */
.site-links,.nav-dd{position:static}
.hero-h1{font-size:clamp(30px,4.2vw,52px);font-weight:700;letter-spacing:-.03em}
.hero-actions .btn,.hero-actions .btn-ghost{margin-left:0}

/* Промо новичку — крупно в карточке первого экрана */
.hero-gift{margin:20px auto 0;display:inline-block;line-height:1.35;text-align:center;padding:12px 26px;border-radius:999px;font-size:clamp(15px,1.5vw,18px);color:#fff;background:linear-gradient(135deg,#f59e0b,#ec4899 55%,#8b5cf6);box-shadow:0 10px 30px rgba(236,72,153,.28);white-space:nowrap}
.hero-gift b{font-weight:800}

.hero-note{margin:14px auto 0;max-width:600px;line-height:1.5;}
@media (max-width:760px){.hero-gift{white-space:normal;padding:10px 18px}}
.hero-actions .btn{min-height:50px;padding:0 28px;font-size:16px;border-radius:14px}