:root{
  --acid:#ADFF00;      /* neon green */
  --acid-ink:#000000;  /* readable text over acid */
  --purple:#5546FF;    /* electric violet */
  --purple-d:#5546FF;  /* deeper violet */
  --ink:#000000;       /* page black */
  --text:#FFFFFF;      /* body text */
  --muted:#FFFFFF;     /* muted text */
  --edge:rgba(255,255,255,.08);
  --wrap:1220px;
}
/* базовый текст, все языки */
body {
  font-family: "Montserrat","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ff-pop);
  color:var(--text);
  background:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  height: var(--h);
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid #0000;
  background: var(--purple);
  color: #000;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: .2s transform, .2s filter;
  width: 460px;
  height: 80px;
  angle: 0 deg;
  opacity: 1;
  gap: 4.62px;
  border-radius: 46.22px;
  padding: 16.64px;
  font-family: Montserrat;
  font-weight: 700;
  font-style: Bold;
  font-size: 38px;
  line-height: 23.55px;
  letter-spacing: 0%;
  text-align: center;
  text-transform: uppercase;
  background: #ADFF00;
  margin: 60px 0px;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn-blue {
 background: #5546FF;
 color: #fff;

}

/* ================= HERO ================= */
.hero{height:650px;position:relative;overflow:hidden;color:var(--acid-ink);background:var(--acid)}
.hero .pad{padding:20px 0px;max-width: 85%;}

.hero-vector-1 {
 position: absolute;
 height: 192px;
 left: 0;
 bottom: 20%;
}
.hero-vector-2 {
  position: absolute;
  width: 136px;
  right: 0;
  top: 0;
}
.hero-vector-3 {
  width: 120px;
  margin-bottom: 40px;
}

.brand-row{display: flex;
  align-items: center;
  justify-content: center;
  text-decoration-thickness: 16px;
  margin: -90px auto;
  position: relative;
  z-index: 2;
  gap: 20px;}
  .brand{display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 14px;
    font-family: Impact;
    font-weight: 400;
    font-style: Regular;
    font-size: 38px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;}
    .btn{position:relative;overflow:hidden}
    .btn-blue{background:var(--purple;);line-height: 0.8;}
    .btn.is-animated{animation:btnPulse 3s ease-in-out infinite}
    @keyframes btnPulse{0%,100%{transform:translateY(0) scale(1);box-shadow:0 12px 24px rgba(85,70,255,.35), inset 0 1px 0 rgba(255,255,255,.4)}50%{transform:translateY(-1px) scale(1.015);box-shadow:0 14px 28px rgba(85,70,255,.5),0 0 0 6px rgba(173,255,0,.18), inset 0 1px 0 rgba(255,255,255,.5)}}
    .btn::after{content:"";position:absolute;top:0;left:-150%;width:150%;height:100%;background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 25%, rgba(255,255,255,0) 50%);transform:skewX(-20deg)}
    .btn:hover::after{animation:sheen .9s ease}
    @keyframes sheen{from{left:-150%}to{left:150%}}
    /* run sheen continuously when .is-animated is present */
    .btn.is-animated::after{animation:sheen 2.6s ease-in-out infinite}
    .brand i{width:22px;height:22px;border-radius:50%;background:#000000;display:inline-block}

    .vip-tag{position:absolute;right:24px;top:28px;font-family:"Caveat",cursive;color:#000000;opacity:.9;font-size:44px;transform:rotate(-6deg)}

    .hero-title{position:relative;text-align: center;}
    .hero-title span{display:block;font-size:clamp(72px,14vw,230px)}

    .hero-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:8px 0 26px}
    .pill{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.12);font-weight:800;color:#000}

    .ticket-inline{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

    /* ================= HIGHLIGHTS ================= */
    .highlights{height: 800px;position:relative;background:#000}
    .highlights .pad{padding: 90px 0;
      max-width: 588px;
      display: flex;
      flex-direction: column;
      gap: 56px;
      position: relative;
      z-index: 1;}
      .highlights-img {
        width: 500px;
        position: absolute;
        right: 0;
      }
      .highlights-vector {
        position: absolute;
        bottom: -95px;
        left: 0px;
        width: 100%;
        height: 1074px;
      }
      .highlights-vector-m {
        display: none;
      }
      .kicker{
        display: block;
        color: var(--muted);
        text-transform: uppercase;
        margin-bottom: 6px;
        font-family: Impact;
        font-weight: 400;
        font-style: Regular;
        font-size: 97px;
        leading-trim: NONE;
        line-height: 110.00000000000001%;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;
        text-transform: uppercase;
      }
      .h1{font-size:clamp(40px,6vw,72px);font-weight:900;letter-spacing:.02em;margin:0 0 12px}
      .h1 strong{color:#fff}
      .copy{color: #FFFFFF;
        display: flex;
        flex-direction: column;
        gap: 32px;}
        .copy p{font-family: "Poppins", "Montserrat", system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
        font-weight: 400;
        margin: auto;
        font-size: 24px;
        line-height: 120%;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;
        text-transform: lowercase;
      }
      .hero-img-astral {
        max-width: 800px;
        margin-left: -60px;
      }
      .hero-logo {
        width: 210px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0px);
        z-index: 99;
      }
      .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:142px;pointer-events:none;background-image:url('./img/vector-black.png');background-repeat:no-repeat;background-position:center bottom;background-size:cover;opacity:1;}
      /* ================= FEATURES STRIP ================= */
      .features{background:var(--purple);position:relative;overflow:hidden}
      .features .pad{padding:54px 0}
      .feat{padding: revert;display:grid;gap:0;overflow:hidden;}
      .feat li{list-style:none;padding:18px 0px;font-size:clamp(20px,3.2vw,34px);font-weight:900;letter-spacing:.02em;text-transform:uppercase;
        font-family: Impact;
        font-weight: 400;
        font-style: Regular;
        font-size: 64px;
        leading-trim: NONE;
        line-height: 100%;
        letter-spacing: 0%;
        vertical-align: middle;
        text-transform: uppercase;
      }
      .feat li+li{border-top:1px solid #fff}
      .strip{margin-top:30px;background:var(--acid);color:#000000;font-weight:900;text-transform:uppercase;letter-spacing:.06em;padding:16px 14px;border-radius:10px;text-align:center;font-size:clamp(20px,3vw,36px)}

      /* ================= FINAL BLOCK ================= */
      .final{position:relative;background:#000}
      .final .pad{padding: 0px 0 5 0px;
        max-width: 600px;}
        .mini-logo{display:inline-flex;align-items:center;gap:10px;margin:6px 0 18px}
        .mini-logo img {
          width: 417px;
        }
        .mini-badge{width:48px;height:32px;border-radius:14px;background:radial-gradient(circle at 30% 30%, #FFFFFF 0%, #FFFFFF 35%, #000000 60%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
        .final p{color: #FFFFFF;
          margin: 8px 0;
          font-family: "Poppins", "Montserrat", system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
          font-weight: 400;
          font-size: 24px;
          line-height: 120%;
          letter-spacing: 0%;
          text-align: center;
          vertical-align: middle;}
          .center{text-align:center}

          /* ================ UTIL ================ */
          .spacer{height:10px}

          /* ================== RESPONSIVE TWEAKS ================== */
          @media (max-width:720px){
            .feat {
              width: 90%;
              margin: 0 auto;
              padding: 0;
            }
            .highlights-vector {
              display: none;

            }
            .highlights-vector-m {
              display: block;
              position: absolute;
              width: 100%;
              bottom: 400px;
              height: 878px;
            }
            .hero {
              height: auto;
            }
            .hero::after {
              background-size: contain;
            }
            .vip-tag{right:16px;top:16px;font-size:36px}
            .hero .pad{padding-bottom:96px}
            .pill{font-size:12px}
          }

          .marquee-block {
            background: #BFFF0C;
            overflow-x: hidden;
          }
          .marquee{position:relative}
          .marquee-track{
            display: flex;
            gap: 64px;
            white-space: nowrap;
            padding: 14px 24px;
            will-change: transform;
            animation: ticker 18s linear infinite;
            font-family: Impact;
            font-weight: 400;
            font-style: Regular;
            font-size: 97px;
            leading-trim: NONE;
            line-height: 110.00000000000001%;
            letter-spacing: 0%;
            text-align: center;
            vertical-align: middle;
            text-transform: uppercase;
            color: #000;
          }
          .marquee-item{font-family:var(--ff-impact);letter-spacing:.06em}
          @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
          .strip:hover .marquee-track{animation-play-state:paused}
          .footer-logo {
            width: 210px;
          }
          .footer-vector-left {
            height: 192px;
            position: absolute;
            left: 0;
            top: 20%;
          }
          .footer-vector-right {
            height: 556px;
            position: absolute;
            right: 0;
            top: 10%;
          }
          .hero-vector-4 {
            display: none;
          }
          @media (max-width: 768px) {
            .hero-logo {
              position: relative;
              width: 120px;
            }
            .kicker {
              font-family: Impact;
              font-weight: 400;
              font-style: Regular;
              font-size: 56px;
              line-height: 110.00000000000001%;
              letter-spacing: 0%;
              text-align: center;
              vertical-align: middle;
              text-transform: uppercase;

            }
            .highlights-img {
              position: relative;
              width: 100%;
              padding-top: 150px;
            }
            .highlights {
              height: auto;
              position: relative;
              background: #000;
              display: flex;
              padding-top: 100px;
              flex-direction: column-reverse;
            }
            .copy p {
              font-family: "Poppins", "Montserrat", system-ui, -apple-system, "Segoe UI",
              Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
              font-weight: 400;
              font-size: 18px;
              line-height: 120%;
              letter-spacing: 0%;
              text-align: center;
              vertical-align: middle;
              text-transform: lowercase;

            }
            .feat li {
              font-family: Impact;
              font-weight: 400;
              font-size: 32px;
              line-height: 100%;
              letter-spacing: 0%;
              vertical-align: middle;
              text-transform: uppercase;

            }
            .marquee-item {
              font-family: Impact;
              font-weight: 400;
              font-style: Regular;
              font-size: 22px;
              line-height: 110.00000000000001%;
              letter-spacing: 0%;
              text-align: center;
              vertical-align: middle;
              text-transform: uppercase;
            }
            .mini-logo img {
              width: 220px;
            }
            .final p {
              font-family: "Poppins", "Montserrat", system-ui, -apple-system, "Segoe UI",
              Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
              font-weight: 400;
              font-size: 18px;
              line-height: 120%;
              letter-spacing: 0%;
              text-align: center;
              vertical-align: middle;
            }
            .btn {
              width: 280px;
              height: 46px;
              font-size: 23px;
              margin: 20px 0;
            }
            .footer-vector-left {
              height: 87px;
              top: 0;
            }
            .footer-vector-right {
              height: 264px;
              bottom: 0;
              top: auto;
              z-index: -1;
            }
            .footer-logo {
              width: 120px;
            }
            .brand-row {
              flex-direction: column;
              margin: -60px auto 20px;
            }
            .brand {
              font-family: Impact;
              font-weight: 400;
              font-style: Regular;
              font-size: 24px;
              line-height: 100%;
              letter-spacing: 0%;
              text-align: center;
              vertical-align: middle;
              text-transform: uppercase;

            }
            .hero-vector-3 {
              width: 102px;
              margin-bottom: 0;
              margin-top: 20px;
            }
            .hero-img-astral {
              max-width: 100%;
              margin-top: 0;
              margin-left: 0;
            }
            .highlights .pad {
              padding: 0;
              max-width: 80%;
            }

            .hero-vector-1 {
              display: none;
            }
            .hero-vector-4 {
              display: block;
              position: absolute;
              bottom: 0;
              left: 0;
              width: 159px;
            }

          }
          @media (min-width: 768px) and (max-width: 1024px) {
            .hero-logo {
              position: relative;
            }
            .btn-blue {
              margin: 0;
            }
            .brand-row {
              flex-direction: column;
              margin: -50px auto;
            }
            .hero {
              padding-bottom: 250px;
              height: auto;
            }
            .highlights {
              height: auto;
              flex-direction: column-reverse;
              display: flex;
            }
            .highlights-img {
              margin: auto;
              position: relative;

            }
            .highlights-vector {
              height: auto;
            }
            .highlights .pad {
              padding: 0;
            }
            .footer-vector-left {
              top: 0;
            }
            .footer-vector-right {
              bottom: 0;
              height: 300px;
              position: absolute;
              right: 0;
              top: inherit;
            }
          }
          @media (min-width: 1025px) and (max-width: 1200px) {
            .hero-logo {
              position: relative;
            }
            .brand-row {
              margin: -50px auto;
            }
            .hero-img-astral {
              max-width: 100%;
              margin-top: -155px;
              margin-left: -30px;
            }
            .btn-blue {
              background: var(--purple);
              line-height: 0.9;
            }
          }
          @media (min-width: 1201px) and (max-width: 1300px) {
            .brand-row {
              max-width: 1000px;
            }
          }
          .gallery-section { position: relative; }
          .gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
          .gallery .g-item { display:block; position:relative; overflow:hidden; border-radius:14px; background:#0e0e10; }
          .gallery .g-item::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
          .gallery img{ width:100%; height:220px; object-fit:cover; display:block; transform:scale(1.001); transition:transform .35s ease; }
          .gallery .g-item:hover img{ transform:scale(1.06); }

          /* Lightbox */
          .lb{ position:fixed; inset:0; background:rgba(0,0,0,.92);
           display:grid; place-items:center; opacity:0; visibility:hidden;
           transition:opacity .2s ease; z-index:9999; }
           .lb.active{ opacity:1; visibility:visible; }
           .lb-track{ position:relative; width:min(96vw,1400px); height:min(92vh,860px); overflow:hidden; }
           .lb-slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform:translateX(100%); transition:transform .25s ease; }
           .lb-slide.active{ transform:translateX(0); }
           .lb-slide.prev{ transform:translateX(-100%); }
           .lb-img{ max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.5); }

           .lb-btn{ position:absolute; z-index:2; background:rgba(255,255,255,.12); color:#fff; border:0;
             width:48px; height:48px; border-radius:999px; display:grid; place-items:center;
             backdrop-filter:saturate(140%) blur(4px); cursor:pointer; }
             .lb-btn:hover{ background:rgba(255,255,255,.2); }
             .lb-close{ top:20px; right:24px; font-size:32px; line-height:1; }
             .lb-prev{ left:20px; top:50%; transform:translateY(-50%); font-size:28px; }
             .lb-next{ right:20px; top:50%; transform:translateY(-50%); font-size:28px; }

             @media (max-width: 640px){
              .gallery img{ height:160px; }
              .lb-btn{ width:44px; height:44px; }
            }
            body.no-scroll{ overflow:hidden; touch-action:none; }
            /* --- Gallery grid --- */
            .gallery-section { position: relative; }
            .gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
            .gallery .g-item { display:block; position:relative; overflow:hidden; border-radius:14px; background:#0e0e10; }
            .gallery .g-item::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
            .gallery img{ width:100%; height:220px; object-fit:cover; display:block; transform:scale(1.001); transition:transform .35s ease; }
            .gallery .g-item:hover img{ transform:scale(1.06); }

            /* --- Lightbox --- */
            .lb{ position:fixed; inset:0; background:rgba(0,0,0,.92);
             display:grid; place-items:center; opacity:0; visibility:hidden;
             transition:opacity .2s ease; z-index:9999; }
             .lb.active{ opacity:1; visibility:visible; }
             .lb-track{ position:relative; width:min(96vw,1400px); height:min(92vh,860px); overflow:hidden; }
             .lb-slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform:translateX(100%); transition:transform .25s ease; }
             .lb-slide.active{ transform:translateX(0); }
             .lb-slide.prev{ transform:translateX(-100%); }
             .lb-img{ max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.5); }

             .lb-btn{ position:absolute; z-index:2; background:rgba(255,255,255,.12); color:#fff; border:0;
               width:48px; height:48px; border-radius:999px; display:grid; place-items:center;
               backdrop-filter:saturate(140%) blur(4px); cursor:pointer; }
               .lb-btn:hover{ background:rgba(255,255,255,.2); }
               .lb-close{ top:20px; right:24px; font-size:32px; line-height:1; }
               .lb-prev{ left:20px; top:50%; transform:translateY(-50%); font-size:28px; }
               .lb-next{ right:20px; top:50%; transform:translateY(-50%); font-size:28px; }

               @media (max-width:640px){
                .gallery img{ height:250px; }
                .lb-btn{ width:44px; height:44px; }
              }
              body.no-scroll{ overflow:hidden; touch-action:none; }

              /* (опционально) Улучшаем производительность длинной ленты превью */
              .gallery .g-item{ content-visibility:auto; contain-intrinsic-size: 220px 100%; }
              /* Плавный скролл для якорей */
              html{scroll-behavior:smooth}

              /* индикатор в hero */
              .hero{position:relative}
              .scroll-indicator{
                position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
                width:56px; height:56px; border-radius:999px; display:grid; place-items:center;
                color:#fff; background:rgba(255,255,255,.12);
                backdrop-filter:saturate(140%) blur(4px);
                box-shadow:0 6px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.14);
                transition:background .25s ease, opacity .25s ease, transform .25s ease;
                z-index:5;
              }
              .scroll-indicator:hover{background:rgba(255,255,255,.2)}
              .scroll-indicator__svg{width:28px; height:28px}

              /* анимация шевронов */
              .scroll-indicator__chev1,
              .scroll-indicator__chev2{ transform-origin:50% 50%; }
              .scroll-indicator__chev1{ animation:chev-bounce 1.2s ease-in-out infinite; }
              .scroll-indicator__chev2{ animation:chev-bounce 1.2s ease-in-out .15s infinite; opacity:.85; }

              @keyframes chev-bounce{
                0%,100%{ transform:translateY(-2px); opacity:.85 }
                50%    { transform:translateY(4px);  opacity:1 }
              }

              /* лёгкий пульс окружности */
              .scroll-indicator::after{
                content:""; position:absolute; inset:0; border-radius:inherit;
                box-shadow:0 0 0 0 rgba(255,255,255,.28);
                animation:ring 1.8s ease-out infinite;
              }
              @keyframes ring{
                0%{ box-shadow:0 0 0 0 rgba(255,255,255,.28); }
                100%{ box-shadow:0 0 0 18px rgba(255,255,255,0); }
              }

              /* скрыть, когда пользователь прокрутил немного */
              .scroll-indicator.hide{opacity:0; pointer-events:none; transform:translate(-50%,8px)}

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

              @media (max-width:640px){
                .scroll-indicator{width:50px;height:50px;bottom:16px}
                .scroll-indicator__svg{width:24px;height:24px}
              }
              @media (prefers-reduced-motion:reduce){
                .scroll-indicator__chev1,.scroll-indicator__chev2,.scroll-indicator::after{animation:none}
              }
              .gallery-pager{display:flex;gap:8px;justify-content:center;align-items:center;margin:18px 0 6px}
              .p-btn{min-width:40px;height:40px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
                background:rgba(255,255,255,.08);color:#fff;font:500 14px/40px Poppins,Montserrat,system-ui,sans-serif;
                text-align:center;cursor:pointer;transition:transform .15s ease,background .2s ease}
                .p-btn:hover{background:rgba(255,255,255,.16)}
                .p-btn[aria-current="page"]{background:#3a7bfd;border-color:transparent;color:#fff;cursor:default}
                .p-btn:disabled{opacity:.5;cursor:not-allowed}
                .p-ellipsis{opacity:.6;padding:0 4px;user-select:none}
                /* Кнопка скачивания поверх превью */
.g-item {
  position: relative;
  display: block;
}
.g-item .g-dl {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.g-item .g-dl:hover { background: rgba(0,0,0,.75); transform: translateY(-1px); }
.g-item .g-dl:active { transform: translateY(0); }
.g-item .g-dl svg { width: 22px; height: 22px; display: block; }
/* Кнопка закрытия уже есть (обычно .lb-close в твоём разметке) */
/* Переносим кнопку скачивания левее крестика, чтобы не перекрывалась */
.lb-dl{
  position:absolute;
  top:12px;
  right:64px;          /* было 12px — сдвигаем на ~1 кнопку влево */
  z-index:5;
}

/* На узких экранах лучше стекировать: крестик сверху, скачать — ниже */
@media (max-width: 480px){
  .lb-dl{
    top:64px;          /* под крестиком */
    right:12px;
  }
}

/* На всякий случай делаем крестик приоритетнее по клику */
.lb-close{ z-index:6; }