: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: 850px;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: -140px 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: 100%;
        margin-top: -95px;
        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: 80px 0 120px;
        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;
            }
            .footer-logo {
              width: 120px;
            }
            .brand-row {
              flex-direction: column;
              margin: 0;
            }
            .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;
}
}