/* ── Hero ── */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;
  padding:120px 24px 96px;
  overflow:visible;
}
.hero-stars{ z-index:0; }
.hero > :not(.hero-stars):not(.hero-copy){
  position:relative;
  z-index:2;
}

/* Туман строго под текстом/кнопками (на всю ширину) */
.hero-copy{
  position:relative;
  z-index:2;
  isolation:isolate;
}
.hero-copy::before,
.hero-copy::after{
  content:'';
  position:absolute;
  left:50%;
  top:calc(50% + clamp(18px, 3vh, 54px));
  transform:translate3d(-50%,-50%,0);
  width:100vw;
  height:clamp(260px, 34vh, 440px);
  inset:auto;
  border-radius:999px;
  filter:blur(22px);
  background:
    radial-gradient(220px 140px at 12% 55%, rgba(248,250,252,.22) 0%, rgba(248,250,252,.10) 45%, rgba(248,250,252,0) 70%),
    radial-gradient(260px 160px at 28% 40%, rgba(224,231,255,.18) 0%, rgba(224,231,255,.08) 46%, rgba(224,231,255,0) 72%),
    radial-gradient(300px 180px at 46% 62%, rgba(255,255,255,.20) 0%, rgba(255,255,255,.09) 45%, rgba(255,255,255,0) 72%),
    radial-gradient(240px 150px at 64% 44%, rgba(199,210,254,.18) 0%, rgba(199,210,254,.08) 46%, rgba(199,210,254,0) 72%),
    radial-gradient(280px 170px at 84% 58%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.10) 45%, rgba(255,255,255,0) 70%);
  background-repeat:repeat-x;
  background-size:70vw 100%;
  background-position:0 0;
  mix-blend-mode:screen;
  opacity:.85;
  animation:fogScrollA 18s linear infinite, fogBreathe 6.6s ease-in-out infinite;
  will-change:transform,opacity;
  pointer-events:none;
  z-index:-1;
}
.hero-copy::after{
  filter:blur(34px);
  opacity:.70;
  background:
    radial-gradient(340px 220px at 18% 56%, rgba(248,250,252,.18) 0%, rgba(248,250,252,.08) 48%, rgba(248,250,252,0) 74%),
    radial-gradient(420px 260px at 44% 42%, rgba(224,231,255,.15) 0%, rgba(224,231,255,.06) 50%, rgba(224,231,255,0) 76%),
    radial-gradient(380px 240px at 72% 60%, rgba(199,210,254,.16) 0%, rgba(199,210,254,.06) 50%, rgba(199,210,254,0) 76%);
  background-repeat:repeat-x;
  background-size:92vw 100%;
  background-position:0 0;
  animation:fogScrollB 28s linear infinite, fogBreathe 8.2s ease-in-out infinite;
}
@keyframes fogScrollA{
  from{ background-position:0 0; }
  to{ background-position:70vw 0; }
}
@keyframes fogScrollB{
  from{ background-position:0 0; }
  to{ background-position:92vw 0; }
}
@keyframes fogBreathe{
  0%,100%{ opacity:.62; }
  45%{ opacity:.92; }
  70%{ opacity:.78; }
}
/* Звёздное небо в верхней части hero */
.hero-stars{
  position:absolute;
  top:0;left:0;right:0;
  height:85vh;
  height:85svh;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.hero-stars-moon{
  position:absolute;
  top:88px;
  right:32px;
  left:auto;
  width:80px;
  height:80px;
  color:#f5f3eb;
  filter:drop-shadow(0 0 24px rgba(255,252,240,1)) drop-shadow(0 0 48px rgba(255,250,235,.85)) drop-shadow(0 0 72px rgba(255,248,230,.5));
}
.hero-stars-moon svg{
  width:100%;
  height:100%;
  display:block;
}
[dir="rtl"] .hero-stars-moon{
  left:32px;
  right:auto;
  transform:scaleX(-1);
}
/* Падающая звезда: изредка пролетает сверху-справа вниз-влево */
.hero-shooting-star{
  position:absolute;
  left:30%;
  top:8%;
  right:auto;
  width:140px;
  height:3px;
  /* Голова впереди по движению (слева), хвост сзади — летит влево за экран */
  background:linear-gradient(to right, #fff 0%, rgba(255,255,255,.65) 28%, rgba(255,255,255,.15) 55%, transparent 100%);
  transform:rotate(-45deg);
  transform-origin:center center;
  opacity:0;
  animation:shootingStarFall 10s ease-in infinite, shootingStarOpacity 10s linear infinite;
  pointer-events:none;
}
.hero-ufo{
  position:relative;
  width:min(364px,64.4vw);
  margin:0 auto 28px;
  z-index:0;
  opacity:.95;
  filter:
    drop-shadow(0 0 18px rgba(34,211,238,.55))
    drop-shadow(0 0 48px rgba(59,130,246,.35));
  pointer-events:none;
}
.hero-ufo{ overflow:visible; }
.hero-ufo svg{display:block;width:100%;height:auto;overflow:visible}
.hero-ufo .ufo-beam,
.cta-ufo .ufo-beam{
  transform-origin:50% 0%;
  animation:ufoBeamPulse 3.6s ease-in-out infinite;
}
.hero-ufo .ufo-rim,
.cta-ufo .ufo-rim{
  animation:ufoRimFlicker 5.2s ease-in-out infinite;
}
@keyframes ufoBeamPulse{
  0%,55%{ opacity:0; transform:scaleY(.92); filter:blur(.2px); }
  62%{ opacity:.85; transform:scaleY(1.02); filter:blur(.6px); }
  78%{ opacity:1; transform:scaleY(1.06); filter:blur(.9px); }
  100%{ opacity:0; transform:scaleY(.92); filter:blur(.2px); }
}
@keyframes ufoRimFlicker{
  0%,100%{ opacity:.85; }
  45%{ opacity:1; }
  60%{ opacity:.92; }
  78%{ opacity:1; }
}
@keyframes shootingStarFall{
  0%, 79%{ transform:rotate(-45deg) translate(0,0); }
  80%{ transform:rotate(-45deg) translate(0,0); }
  100%{ transform:rotate(-45deg) translate(-88vw, 4vh); }
}
@keyframes shootingStarOpacity{
  /* Ровно 2 с видна (80%→100% от 10s), затем скрыта */
  0%, 79%{ opacity:0; }
  80%{ opacity:1; }
  99%{ opacity:1; }
  100%{ opacity:0; }
}
[dir="rtl"] .hero-shooting-star{
  left:auto;
  right:30%;
  background:linear-gradient(to left, #fff 0%, rgba(255,255,255,.65) 28%, rgba(255,255,255,.15) 55%, transparent 100%);
  transform:rotate(45deg);
  animation:shootingStarFallRtl 10s ease-in infinite, shootingStarOpacity 10s linear infinite;
}
@keyframes shootingStarFallRtl{
  0%, 79%{ transform:rotate(45deg) translate(0,0); }
  80%{ transform:rotate(45deg) translate(0,0); }
  100%{ transform:rotate(45deg) translate(88vw, 4vh); }
}
.hero-stars::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:42%;
  background:linear-gradient(to top, rgba(7,9,15,.72), transparent);
  pointer-events:none;
}
.hero-stars .star-layer{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:transparent;
  box-shadow:
    8% 4% 0 0 rgba(255,255,255,1),
    22% 6% 0 0 rgba(255,255,255,.95),
    36% 8% 0 0 rgba(255,255,255,.95),
    50% 5% 0 0 rgba(255,255,255,1),
    64% 7% 0 0 rgba(255,255,255,.95),
    78% 9% 0 0 rgba(255,255,255,1),
    92% 6% 0 0 rgba(255,255,255,.95),
    12% 16% 0 0 rgba(255,255,255,.9),
    28% 18% 0 0 rgba(255,255,255,.85),
    44% 20% 0 0 rgba(255,255,255,.9),
    60% 18% 0 0 rgba(255,255,255,.85),
    76% 16% 0 0 rgba(255,255,255,.9),
    90% 18% 0 0 rgba(255,255,255,.85),
    16% 28% 0 0 rgba(255,255,255,.8),
    32% 30% 0 0 rgba(255,255,255,.8),
    48% 32% 0 0 rgba(255,255,255,.8),
    64% 30% 0 0 rgba(255,255,255,.8),
    80% 28% 0 0 rgba(255,255,255,.8),
    /* дополнительный слой ярких звёзд ближе к верхнему краю */
    5% 2% 0 0 rgba(255,255,255,1),
    20% 3% 0 0 rgba(255,255,255,1),
    35% 2% 0 0 rgba(255,255,255,.95),
    50% 3% 0 0 rgba(255,255,255,1),
    65% 2% 0 0 rgba(255,255,255,.95),
    80% 3% 0 0 rgba(255,255,255,1),
    95% 2% 0 0 rgba(255,255,255,.95);
}
.hero-stars .star-layer--small{
  width:2px;height:2px;
  left:50%;top:50%;
  margin:-1px 0 0 -1px;
  background:transparent;
  box-shadow:
    50vw  -35vh 0 0 rgba(255,255,255,.9),
    30vw  -45vh 0 0 rgba(255,255,255,.85),
    60vw  -20vh 0 0 rgba(255,255,255,.8),
    15vw  -30vh 0 0 rgba(255,255,255,.85),
    70vw  -38vh 0 0 rgba(255,255,255,.8),
    25vw  -12vh 0 0 rgba(255,255,255,.85),
    48vw  -48vh 0 0 rgba(255,255,255,.8),
    5vw   -22vh 0 0 rgba(255,255,255,.85),
    38vw  -28vh 0 0 rgba(255,255,255,.8),
    -20vw -40vh 0 0 rgba(255,255,255,.8),
    -5vw  -32vh 0 0 rgba(255,255,255,.8),
    -35vw -18vh 0 0 rgba(255,255,255,.8),
    -55vw -28vh 0 0 rgba(255,255,255,.8),
    -10vw -18vh 0 0 rgba(255,255,255,.8),
    -30vw -8vh  0 0 rgba(255,255,255,.8),
    -48vw -44vh 0 0 rgba(255,255,255,.8),
    -60vw -16vh 0 0 rgba(255,255,255,.8),
    -42vw -36vh 0 0 rgba(255,255,255,.8),
    /* extra stars higher in the sky */
    10vw  -52vh 0 0 rgba(255,255,255,.9),
    28vw  -58vh 0 0 rgba(255,255,255,.85),
    46vw  -54vh 0 0 rgba(255,255,255,.9),
    64vw  -60vh 0 0 rgba(255,255,255,.85),
    82vw  -56vh 0 0 rgba(255,255,255,.9),
    -8vw  -58vh 0 0 rgba(255,255,255,.85),
    -26vw -52vh 0 0 rgba(255,255,255,.9),
    -44vw -60vh 0 0 rgba(255,255,255,.85);
}
.hero-stars .star-layer--twinkle{
  animation:starTwinkle 4s ease-in-out infinite;
}
.hero-stars .star-layer--twinkle:nth-child(2){animation-delay:1.5s}
.hero-stars .star-layer--twinkle:nth-child(3){animation-delay:3s}
@keyframes starTwinkle{
  0%,100%{opacity:1}
  50%{opacity:.4}
}
.hero > *:not(.hero-stars){position:relative;z-index:1}
.hero::before{
  content:'';position:absolute;inset:0;
  background:none;
  pointer-events:none;
}
.hero-dark-line{
  margin:0 0 10px;
  font-size:28px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.hero-dark-line span{
  background:linear-gradient(135deg,#e0d4ff,#a78bfa,#f472b6);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-ufo-title{
  width:100%;
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.hero-ufo-title h1{position:relative;z-index:1;margin:0 0 20px}
.hero-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 16px;
  border-radius:20px;
  background:rgba(167,139,250,.1);
  border:1px solid rgba(167,139,250,.2);
  font-size:12px;
  font-weight:700;
  color:var(--accent);
  letter-spacing:.04em;
  text-transform:uppercase;
  margin:0 0 18px;
  z-index:1;
}
.hero-badge span{animation:heroBadgeTextPulse 3s ease-in-out infinite}
.hero-badge::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  animation:ctaGlowShimmer 3s ease-in-out infinite;
  z-index:-1;
  pointer-events:none;
}
.hero h1{
  position:relative;
  font-size:clamp(36px,6vw,64px);font-weight:900;
  letter-spacing:-1.5px;line-height:1.1;
  max-width:800px;
  margin-bottom:20px;
}

.grad-hero{
  margin-right:0.25em;
  animation:heroGlowSweep 4s ease-in-out infinite;
}
@keyframes heroGlowSweep{
  0%,60%{
    text-shadow:none;
  }
  66%{
    text-shadow:
      -8px 0 18px rgba(248,250,252,0.7),
      0 0 28px rgba(248,250,252,0.95),
      8px 0 18px rgba(244,114,182,0.9);
  }
  72%{
    text-shadow:
      8px 0 18px rgba(248,250,252,0.6),
      0 0 22px rgba(248,250,252,0.9),
      16px 0 22px rgba(129,140,248,0.8);
  }
  80%,100%{
    text-shadow:none;
  }
}
.hero p{
  position:relative;
  font-size:clamp(16px,2.5vw,20px);color:var(--text-dim);
  max-width:560px;margin:0 auto 36px;
}
.hero-actions{
  position:relative;
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
}

.hero-tags{
  position:relative;
  display:flex;flex-wrap:wrap;gap:20px 24px;justify-content:center;align-items:center;
  margin-top:28px;
  font-size:14px;color:var(--text-dim);font-weight:500;
}
.hero-tags .hero-tag{display:inline-flex;align-items:center;gap:6px}
.hero-tags .lightning{color:var(--amber)}
.hero-tags .lightning svg{
  flex-shrink:0;
  animation:lightningPulseIcon 2.4s ease-in-out infinite;
}
.hero-tags .lightning span[data-i18n="hero.tagLightning"]{
  position:relative;
  padding:0 4px;
  text-shadow:
    0 0 6px rgba(251,191,36,.8),
    0 0 14px rgba(250,204,21,.7);
  animation:lightningPulse 2.4s ease-in-out infinite;
}
@keyframes lightningPulse{
  0%,100%{
    text-shadow:
      0 0 6px rgba(251,191,36,.8),
      0 0 14px rgba(250,204,21,.7);
  }
  40%{
    text-shadow:
      0 0 10px rgba(253,224,71,1),
      0 0 22px rgba(250,204,21,.95),
      0 0 40px rgba(251,191,36,.9);
  }
  70%{
    text-shadow:
      0 0 8px rgba(253,224,71,.9),
      0 0 18px rgba(250,204,21,.85),
      0 0 30px rgba(217,119,6,.7);
  }
}
@keyframes lightningPulseIcon{
  0%,100%{
    filter:drop-shadow(0 0 6px rgba(251,191,36,.8)) drop-shadow(0 0 14px rgba(250,204,21,.7));
  }
  40%{
    filter:drop-shadow(0 0 10px rgba(253,224,71,1)) drop-shadow(0 0 22px rgba(250,204,21,.95)) drop-shadow(0 0 40px rgba(251,191,36,.9));
  }
  70%{
    filter:drop-shadow(0 0 8px rgba(253,224,71,.9)) drop-shadow(0 0 18px rgba(250,204,21,.85)) drop-shadow(0 0 30px rgba(217,119,6,.7));
  }
}
.hero-tags-sep{
  width:1px;height:14px;
  background:linear-gradient(to bottom,transparent,var(--border-accent) 20%,var(--border-accent) 80%,transparent);
  border-radius:1px;
  flex-shrink:0;
}
@media(max-width:640px){
  .hero-tags-sep{display:none}
}
.hero-scroll-down{
  display:block;
  margin-top:32px;
  text-align:center;
  color:var(--text-muted);
  transition:color .2s,transform .2s;
}
.hero-scroll-down:hover{
  color:var(--accent);
  transform:translateY(4px);
}
.hero-scroll-down svg{
  width:28px;
  height:28px;
  animation:heroScrollBounce 2s ease-in-out infinite;
}
@keyframes heroScrollBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}

@keyframes heroBadgeTextPulse{
  0%,100%{
    text-shadow:none;
  }
  33%{
    text-shadow:
      0 0 6px rgba(248,250,252,.9),
      0 0 14px rgba(167,139,250,1);
  }
  66%{
    text-shadow:
      0 0 5px rgba(248,250,252,.8),
      0 0 12px rgba(244,114,182,.9);
  }
}

@media(max-width:640px){
  .hero{padding:100px 16px 60px}
  .hero{min-height:0}
  .hero-stars{height:520px}
  .hero-dark-line{font-size:22px;margin-bottom:6px}
  .hero-badge{margin-bottom:12px}
}