@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Outfit:wght@100..900&display=swap');
:root{
  --bg:#020611;
  --text:#fff;
  --muted:#b8bfd0;
  --cyan:#13f4ff;
  --pink:#ff3bc7;
  --yellow:#baca29;
  --line:rgba(255,255,255,.14);
  --panel:rgba(4,10,24,.74);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Outfit',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* ================= BACKGROUND VIDEO ================= */

.bg-video{
  position:fixed;
  inset:0;
  z-index:-5;
  overflow:hidden;
  background:#020611;
}

.bg-video video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.06);
  filter:brightness(.55) contrast(1.12) saturate(1.2);
}
.bg-video::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 62% 25%, rgba(18,244,255,.10), transparent 30%),
    radial-gradient(circle at 90% 30%, rgba(255,62,200,.12), transparent 32%),
    linear-gradient(to bottom, rgba(2,6,17,.28), rgba(2,6,17,.76));
  z-index:2;
}

.bg-video::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle, transparent 38%, rgba(0,0,0,.72) 100%);
  z-index:3;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:72px 72px;
  opacity:.18;
}

@keyframes cinematicZoom{
  from{transform:scale(1.08)}
  to{transform:scale(1.14)}
}

/* ================= GENERAL ================= */

.container{
  width:min(100% - 70px, 1560px);
  margin:auto;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

/* ================= NAV ================= */
/* ================= MODERN NAVIGATION ================= */

.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:76px;
  z-index:1000;

  border-bottom:1px solid rgba(255,255,255,.09);

  background:
    linear-gradient(
      180deg,
      rgba(2,6,17,.88) 0%,
      rgba(2,6,17,.62) 100%
    );

  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  transition:
    height .35s ease,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

/* subtle light line */

.header::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(217,239,0,.08),
    rgba(217,239,0,.65),
    rgba(183,255,79,.08),
    transparent
  );

  opacity:.55;
  pointer-events:none;
}

/* header after scrolling */

.header.scrolled{
  height:68px;

  background:rgba(2,6,17,.84);

  border-bottom-color:rgba(217,239,0,.14);

  box-shadow:
    0 18px 45px rgba(0,0,0,.24),
    0 1px 0 rgba(255,255,255,.025);
}

/* main navigation wrapper */

.nav{
  position:relative;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:40px;
}

/* ================= LOGO ================= */

.logo{
  position:relative;
  z-index:3;

  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}

.logo img{
  display:block;
  width:auto;
  height:36px;

  transition:
    transform .35s ease,
    filter .35s ease;
}

.logo:hover img{
  transform:translateY(-2px);

  filter:
    drop-shadow(0 0 10px rgba(217,239,0,.22))
    drop-shadow(0 0 24px rgba(183,255,79,.12));
}

/* ================= DESKTOP MENU ================= */

.nav-menu{
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  margin-left:auto;
}

.nav-menu a{
    position: relative;
    height: 100%;
    padding: 0px 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(238, 242, 255, .74);
    font-size: 10px;
    line-height: 1;
    letter-spacing: .15em;
    font-weight: 400;
    text-decoration: none;
    transition: color .3s ease, transform .3s ease, text-shadow .3s ease;
}

/* hover background glow */

.nav-menu a::before{
  content:"";

  position:absolute;
  left:8px;
  right:8px;
  top:50%;

  height:32px;

  border-radius:999px;

  background:linear-gradient(
    135deg,
    rgba(217,239,0,.10),
    rgba(183,255,79,.025)
  );

  border:1px solid rgba(217,239,0,.10);

  opacity:0;
  transform:translateY(-50%) scale(.8);

  transition:
    opacity .3s ease,
    transform .3s ease;
}

/* animated underline */

.nav-menu a::after{
  content:"";

  position:absolute;
  left:50%;
  bottom:0;

  width:0;
  height:1px;

  border-radius:5px;

  background:linear-gradient(
    90deg,
    #d9ef00,
    #b7ff4f
  );

  box-shadow:
    0 0 8px rgba(217,239,0,.75),
    0 0 20px rgba(183,255,79,.35);

  transform:translateX(-50%);

  transition:width .35s cubic-bezier(.2,.8,.2,1);
}

.nav-menu a:hover{
  color:#fff;

  transform:translateY(-1px);

  text-shadow:0 0 14px rgba(217,239,0,.25);
}

.nav-menu a:hover::before{
  opacity:1;
  transform:translateY(-50%) scale(1);
}

.nav-menu a:hover::after{
  width:15px;
}

/* active link */

.nav-menu a.active{
  color:#eaff73;
}

.nav-menu a.active::before{
  opacity:1;
  transform:translateY(-50%) scale(1);

  background:linear-gradient(
    135deg,
    rgba(217,239,0,.13),
    rgba(183,255,79,.035)
  );
}

.nav-menu a.active::after{
  width:4px;
}

/* keeps text above hover background */

.nav-menu a{
  isolation:isolate;
}

.nav-menu a::before{
  z-index:-1;
}

/* ================= MOBILE BUTTON ================= */

.mobile-btn{
  position:relative;
  z-index:1002;

  width:46px;
  height:46px;

  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;

  gap:5px;

  padding:0;

  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;

  background:rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 25px rgba(0,0,0,.16);

  cursor:pointer;

  transition:
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}

.mobile-btn:hover{
  border-color:rgba(217,239,0,.36);

  background:rgba(217,239,0,.075);

  box-shadow:
    0 0 20px rgba(217,239,0,.10),
    inset 0 1px 0 rgba(255,255,255,.08);

  transform:translateY(-1px);
}

.mobile-btn span{
  width:20px;
  height:1.5px;

  display:block;

  border-radius:20px;

  background:#fff;

  transform-origin:center;

  transition:
    transform .35s ease,
    opacity .25s ease,
    width .35s ease,
    background .3s ease;
}

.mobile-btn span:nth-child(2){
  width:14px;
  margin-left:6px;
}

.mobile-btn.active{
  border-color:rgba(217,239,0,.38);
  background:rgba(217,239,0,.09);
}

.mobile-btn.active span{
  background:#d9ef00;
}

.mobile-btn.active span:nth-child(1){
  transform:translateY(6.5px) rotate(45deg);
}

.mobile-btn.active span:nth-child(2){
  width:20px;
  margin-left:0;
  opacity:0;
  transform:scaleX(0);
}

.mobile-btn.active span:nth-child(3){
  transform:translateY(-6.5px) rotate(-45deg);
}

/* ================= RESPONSIVE ================= */

@media(max-width:1100px){

  .nav-menu{
    gap:2px;
  }

  .nav-menu a{
    padding:0 11px;
    font-size:10px;
  }
}

@media(max-width:991px){

  .header{
    height:70px;
  }

  .header.scrolled{
    height:66px;
  }

  .logo img{
    height:33px;
  }

  .mobile-btn{
    display:flex;
  }

  .nav-menu{
    position:fixed;

    top:82px;
    left:18px;
    right:18px;

    height:auto;
    max-height:calc(100vh - 105px);

    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;

    gap:5px;

    margin:0;
    padding:14px;

    overflow-y:auto;

    border:1px solid rgba(255,255,255,.11);
    border-radius:22px;

    background:
      linear-gradient(
        145deg,
        rgba(8,13,29,.97),
        rgba(2,6,17,.94)
      );

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    box-shadow:
      0 30px 80px rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.06);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:
      translateY(-15px)
      scale(.97);

    transform-origin:top center;

    transition:
      opacity .35s ease,
      visibility .35s ease,
      transform .35s cubic-bezier(.2,.8,.2,1);
  }

  .nav-menu::before{
    content:"";

    position:absolute;
    top:0;
    left:50%;

    width:45%;
    height:1px;

    transform:translateX(-50%);

    background:linear-gradient(
      90deg,
      transparent,
      rgba(217,239,0,.8),
      transparent
    );

    box-shadow:0 0 20px rgba(217,239,0,.3);
  }

  .nav-menu.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:
      translateY(0)
      scale(1);
  }

  .nav-menu a{
    width:100%;
    height:52px;

    justify-content:flex-start;

    padding:0 18px;

    border:1px solid transparent;
    border-radius:14px;

    font-size:12px;
    letter-spacing:.13em;

    color:rgba(255,255,255,.78);

    opacity:0;
    transform:translateY(-8px);

    transition:
      opacity .3s ease,
      transform .3s ease,
      color .3s ease,
      background .3s ease,
      border-color .3s ease;
  }

  .nav-menu.open a{
    opacity:1;
    transform:translateY(0);
  }

  .nav-menu.open a:nth-child(1){
    transition-delay:.04s;
  }

  .nav-menu.open a:nth-child(2){
    transition-delay:.07s;
  }

  .nav-menu.open a:nth-child(3){
    transition-delay:.10s;
  }

  .nav-menu.open a:nth-child(4){
    transition-delay:.13s;
  }

  .nav-menu.open a:nth-child(5){
    transition-delay:.16s;
  }

  .nav-menu.open a:nth-child(6){
    transition-delay:.19s;
  }

  .nav-menu.open a:nth-child(7){
    transition-delay:.22s;
  }

  .nav-menu a::before{
    inset:0;
    height:auto;

    border-radius:14px;

    transform:none;

    background:linear-gradient(
      90deg,
      rgba(217,239,0,.10),
      rgba(217,239,0,.015)
    );
  }

  .nav-menu a::after{
    left:0;
    top:50%;
    bottom:auto;

    width:2px;
    height:0;

    transform:translateY(-50%);

    transition:height .3s ease;
  }

  .nav-menu a:hover,
  .nav-menu a.active{
    color:#fff;

    border-color:rgba(217,239,0,.14);

    background:rgba(255,255,255,.025);

    transform:translateX(3px);
  }

  .nav-menu a:hover::before,
  .nav-menu a.active::before{
    opacity:1;
    transform:none;
  }

  .nav-menu a:hover::after,
  .nav-menu a.active::after{
    width:2px;
    height:24px;
  }

  body.menu-open{
    overflow:hidden;
  }

  body.menu-open::after{
    content:"";

    position:fixed;
    inset:0;

    z-index:998;

    background:rgba(0,0,0,.48);

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);

    animation:menuOverlay .3s ease forwards;
  }
}

@media(max-width:576px){

  .nav{
    padding-left:16px;
    padding-right:16px;
  }

  .nav-menu{
    left:12px;
    right:12px;
    top:78px;

    border-radius:18px;
  }

  .nav-menu a{
    height:50px;
  }
}

@keyframes menuOverlay{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

/*=====================================================
 HERO
=====================================================*/

.hero{
  position:relative;
  min-height:650px;
  padding:120px 0 55px;
  overflow:hidden;

  --hero-cyan:#12dcff;
  --hero-teal:#24d39a;
  --hero-lime:#b8ff3c;
  --hero-gold:#baca29;
  --hero-orange:#ff9f2f;
}

.hero-bg-image{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(2,6,17,.48) 0%,
      rgba(2,6,17,.24) 18%,
      rgba(2,6,17,.07) 34%,
      rgba(2,6,17,0) 56%
    ),
    url("../images/global.png");
  background-repeat:no-repeat;
  background-position:right center;
  background-size:min(1600px,92vw) auto;
  opacity:1;
}

.hero-bg-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(2,6,17,0) 0%,
      rgba(2,6,17,0) 72%,
      rgba(2,6,17,.74) 100%
    );
}

.hero-bg-image::after{
  content:"";
  position:absolute;
  right:10%;
  top:45%;
  width:720px;
  height:460px;
  transform:translateY(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 50%, rgba(18,220,255,.12), transparent 58%),
    radial-gradient(circle at 72% 50%, rgba(184,255,60,.12), transparent 62%);
  filter:blur(105px);
  opacity:.8;
  z-index:-1;
}
.hero-bg-speaker{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(
      90deg,
      rgba(2,6,17,.48) 0%,
      rgba(2,6,17,0.04) 0%,
      rgba(2,6,17,.07) 66%,
      rgba(2,6,17,0) 21%
    ),
    url("../images/bg-speaker.png");
  background-repeat:no-repeat;
  background-position:right center;
  background-size:min(1600px,92vw) auto;
  opacity:1;
}

.hero-bg-speaker::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(2,6,17,0) 0%,
      rgba(2,6,17,0) 72%,
      rgba(2,6,17,.74) 100%
    );
}

.hero-bg-speaker::after{
  content:"";
  position:absolute;
  right:10%;
  top:45%;
  width:720px;
  height:460px;
  transform:translateY(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 50%, rgba(18,220,255,.12), transparent 58%),
    radial-gradient(circle at 72% 50%, rgba(184,255,60,.12), transparent 62%);
  filter:blur(105px);
  opacity:.8;
  z-index:-1;
}
.hero .container{
  position:relative;
  z-index:5;
}

.hero-grid{
  display:grid;
  grid-template-columns:560px 1fr;
  align-items:center;
  min-height:530px;
}

.hero-content-new{
  max-width:560px;
}

.eyebrow-new{
  font-size:15px;
  letter-spacing:.42em;
  color:#fff;
  margin-bottom:18px;
  line-height:1.7;
}

.eyebrow-new span{
  display:block;
  background:linear-gradient(90deg,var(--hero-cyan),var(--hero-teal),var(--hero-lime));
  -webkit-background-clip:text;
  color:transparent;
}

.hero-title-new{
  font-size:clamp(54px,6.4vw,92px);
  line-height:.9;
  font-weight:700;
  letter-spacing:.035em;
  margin:0;
  color:#fff;
  text-shadow:
    0 0 35px rgba(255,255,255,.14),
    0 0 50px rgba(255,216,74,.08);
}

.hero-title-new span{
  color:var(--hero-gold);
  text-shadow:0 0 22px rgba(255,216,74,.35);
}

.hero-subtitle-new{
  margin:8px 0 22px;
  font-size:clamp(32px,3.6vw,54px);
  line-height:1;
  font-weight:400;
  letter-spacing:.12em;
  color:#fff;
}

.hero-subtitle-new span{
  background:linear-gradient(
    90deg,
    var(--hero-cyan) 0%,
    var(--hero-teal) 35%,
    var(--hero-lime) 72%,
    var(--hero-gold) 100%
  );
  -webkit-background-clip:text;
  color:transparent;
  font-weight:500;
}

.hero-text-new{
  max-width:520px;
  color:#e4e8ef;
  font-size:16px;
  line-height:1.65;
  margin-bottom:20px;
}

.hero-meta-new{
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
  margin-bottom:20px;
  color:#fff;
  font-size:13px;
  letter-spacing:.12em;
}

.hero-meta-new div{
  display:flex;
  align-items:center;
  gap:9px;
}

.hero-meta-new i{
  color:var(--hero-gold);
  font-size:17px;
}

.hero-meta-new div:nth-child(2) i{
  color:var(--hero-cyan);
}

.hero-countdown{
  display:flex;
  gap:10px;
  margin-bottom:28px;
}

.hero-countdown div{
  width:72px;
  height:68px;
  border:1px solid rgba(184,255,60,.18);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(15,35,35,.66),rgba(5,10,18,.84));
  backdrop-filter:blur(14px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 16px 36px rgba(0,0,0,.24),
    0 0 22px rgba(184,255,60,.06);
}

.hero-countdown strong{
  font-size:25px;
  line-height:1;
  font-weight:600;
  color:#fff;
  text-shadow:0 0 16px rgba(255,216,74,.22);
}

.hero-countdown span{
  margin-top:6px;
  font-size:10px;
  letter-spacing:.18em;
  color:#c8d0aa;
}

/* ACTIONS */
.hero-actions-new{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}

.hero-action-divider{
  width:1px;
  height:42px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.25),transparent);
}

/* GET PASS */
.hero-pass-btn{
  position:relative;
  overflow:hidden;
  height:48px;
  padding:0 28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:linear-gradient(135deg,var(--hero-cyan) 0%,var(--hero-teal) 42%,var(--hero-lime) 100%);
  color:#011018;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  box-shadow:
    0 18px 40px rgba(18,220,255,.16),
    0 0 26px rgba(184,255,60,.18);
  transition:.35s ease;
}

.hero-pass-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transition:.8s ease;
}

.hero-pass-btn:hover{
  transform:translateY(-4px);
  box-shadow:
    0 24px 48px rgba(18,220,255,.22),
    0 0 40px rgba(184,255,60,.24);
}

.hero-pass-btn:hover::before{
  left:140%;
}

.hero-pass-btn i{
  position:relative;
  z-index:2;
  transition:.35s ease;
}

.hero-pass-btn:hover i{
  transform:translateX(7px);
}

/* TRAILER */
.hero-trailer-btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:#fff;
  font-size:13px;
  letter-spacing:.14em;
  transition:.35s ease;
}

.hero-trailer-btn:hover{
  color:var(--hero-lime);
}

.hero-trailer-btn .play-circle,
.hero-trailer-btn span{
  position:relative;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(184,255,60,.58);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--hero-lime);
  overflow:hidden;
  box-shadow:0 0 22px rgba(184,255,60,.16);
  transition:.35s ease;
}

.hero-trailer-btn .play-circle::before,
.hero-trailer-btn span::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:linear-gradient(135deg,var(--hero-cyan),var(--hero-teal),var(--hero-lime));
  opacity:0;
  transition:.35s ease;
}

.hero-trailer-btn .play-circle::after,
.hero-trailer-btn span::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:50%;
  border:1px solid rgba(184,255,60,.4);
  animation:playPulse 2.5s infinite;
}

.hero-trailer-btn i{
  position:relative;
  z-index:2;
  transition:.35s ease;
}

.hero-trailer-btn:hover .play-circle,
.hero-trailer-btn:hover span{
  transform:scale(1.08);
  box-shadow:0 0 28px rgba(18,220,255,.25);
}

.hero-trailer-btn:hover .play-circle::before,
.hero-trailer-btn:hover span::before{
  opacity:1;
}

.hero-trailer-btn:hover i{
  color:#011018;
}

@keyframes playPulse{
  0%{
    transform:scale(.92);
    opacity:.8;
  }

  70%{
    transform:scale(1.38);
    opacity:0;
  }

  100%{
    opacity:0;
  }
}

.hero-right{
  min-height:530px;
}

/*=====================================================
 VIDEO MODAL
=====================================================*/

.video-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(2,6,17,0);
  backdrop-filter:blur(16px);
  opacity:0;
  visibility:hidden;
  transition:.35s ease;
  z-index:9999;
}

.video-modal.show{
  opacity:1;
  visibility:visible;
}

.video-box{
  position:relative;
  width:min(1100px,90vw);
  overflow:hidden;
  border-radius:20px;
  background:#000;
  transform:scale(.92);
  transition:.35s ease;
  box-shadow:0 35px 80px rgba(0,0,0,.55);
}

.video-modal.show .video-box{
  transform:scale(1);
}

.video-box video{
  display:block;
  width:100%;
}

.video-close{
  position:absolute;
  top:16px;
  right:16px;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  cursor:pointer;
  background:rgba(0,0,0,.48);
  backdrop-filter:blur(10px);
  color:#fff;
  font-size:18px;
  z-index:2;
}


/*=====================================================
 RESPONSIVE
=====================================================*/

@media (max-width:1200px){

  .hero{
    min-height:600px;
  }

  .hero-grid{
    grid-template-columns:440px 1fr;
  }

  .hero-bg-image,.hero-bg-speaker{
    background-position:calc(100% + 170px) center;
    background-size:min(1250px,95vw) auto;
  }

}


@media (max-width:991px){

  .hero{
    min-height:760px;
    padding:105px 0 45px;
  }

  .hero-grid{
    grid-template-columns:1fr;
    align-items:start;
    min-height:650px;
  }

  .hero-content{
    max-width:620px;
  }

  .hero-right{
    min-height:300px;
  }

  .hero-bg-image{
    background:
      linear-gradient(
        to bottom,
        rgba(2,6,17,.94) 0%,
        rgba(2,6,17,.78) 34%,
        rgba(2,6,17,.36) 62%,
        rgba(2,6,17,.92) 100%
      ),
      url("../images/global.png");
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:105% auto;
    opacity:.9;
  }
  .hero-bg-speaker{
    background:
      linear-gradient(
        to bottom,
        rgba(2,6,17,.94) 0%,
        rgba(2,6,17,.78) 34%,
        rgba(2,6,17,.36) 62%,
        rgba(2,6,17,.92) 100%
      ),
      url("../images/bg-speaker.png");
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:105% auto;
    opacity:.9;
  }

}


@media (max-width:576px){

  .hero{
    min-height:690px;
    padding:95px 0 35px;
  }

  .hero-grid{
    min-height:590px;
  }

  /* New Hero */

  .hero-title-new{
    font-size:48px;
  }

  .hero-subtitle-new{
    font-size:28px;
    letter-spacing:.08em;
  }

  .eyebrow-new{
    font-size:12px;
    letter-spacing:.28em;
  }

  .hero-meta-new{
    gap:14px;
    font-size:11px;
  }

  .hero-countdown{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
  }

  .hero-countdown div{
    width:auto;
    height:62px;
  }

  .hero-countdown strong{
    font-size:21px;
  }

  .hero-action-divider{
    display:none;
  }

  /* Existing Hero */

  .hero h1{
    font-size:46px;
  }

  .eyebrow{
    font-size:13px;
    letter-spacing:.28em;
  }

  .hero-text{
    font-size:15px;
  }

  .hero-icons{
    gap:18px;
  }

  .hero-icons div{
    width:100%;
  }

  .hero-bg-image,.hero-bg-speaker{
    background-position:center bottom;
    background-size:145% auto;
  }

}
.eyebrow{
  color:#fff;
  letter-spacing:.38em;
  font-size:17px;
  line-height:1.7;
  margin-bottom:18px;
}

.eyebrow span{
  background:linear-gradient(90deg,var(--yellow),var(--pink));
  -webkit-background-clip:text;
  color:transparent;
}

.hero h1{
  font-size:clamp(58px,7vw,96px);
  line-height:.92;
  font-weight:700;
  letter-spacing:.07em;
  margin-bottom:24px;
}

.hero h1 strong{
  display:block;
}

.hero-line{
  width:62px;
  height:3px;
  background:linear-gradient(90deg,var(--yellow),var(--pink));
  margin-bottom:22px;
}

.hero-text{
  max-width:480px;
  color:#d6ddea;
  font-size:17px;
  line-height:1.65;
  margin-bottom:28px;
}

.hero-icons{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
}

.hero-icons div{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  font-weight:500;
}

.hero-icons i{
  color:var(--yellow);
  font-size:31px;
}

.hero-visual{
  position:relative;
  z-index:2;
  width:100%;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.hero-visual img{
  width:100%;
  max-width:980px;
  margin-right:-20px;
  filter:
    drop-shadow(0 40px 80px rgba(0,0,0,.65))
    drop-shadow(0 0 45px rgba(18,244,255,.13));
  animation:heroFloat 7s ease-in-out infinite;
}

.hero-visual::before{
  content:"";
  position:absolute;
  width:680px;
  height:360px;
  right:8%;
  top:50%;
  transform:translateY(-50%);
  background:
    radial-gradient(circle at 40% 45%, rgba(18,244,255,.22), transparent 56%),
    radial-gradient(circle at 80% 50%, rgba(255,62,200,.20), transparent 60%);
  filter:blur(80px);
  z-index:-1;
}

@keyframes heroFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* ================= SECTION TITLE ================= */

.section-heading{
  text-align:center;
  margin:0 auto 16px;
}

.section-heading h2{
  font-size:23px;
  letter-spacing:.32em;
  font-weight:500;
}

.section-heading h2 span{
  color:var(--yellow);
}

.section-heading p{
  color:#d8ddea;
  letter-spacing:.24em;
  font-size:12px;
  margin-top:8px;
}

/* ================= EVENTS ================= */

.events-section{
  position:relative;
  padding:0 0 18px;
}

.events-carousel{
  position:relative;
  padding:0 30px;
}

.events-window{
  overflow:hidden;
}

.events-track{
  display:flex;
  gap:28px;
  transition:transform .55s cubic-bezier(.22,.75,.25,1);
  will-change:transform;
}

/* ================= CARD ================= */

.event-card{
  position:relative;
  isolation:isolate;
  flex:0 0 calc(50% - 14px);
  background:rgba(5,12,25,.75);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  overflow:hidden;
  backdrop-filter:blur(16px);
  color:var(--yellow);
  transition:transform .35s ease, box-shadow .35s ease;
}

.event-card:hover{
  transform:translateY(-6px);
}

.event-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  border-radius:16px;
  padding:1px;
  background:
    conic-gradient(
      from var(--snake-angle),
      transparent 0deg,
      transparent 45deg,
      currentColor 80deg,
      transparent 115deg,
      transparent 180deg,
      currentColor 235deg,
      transparent 280deg,
      transparent 360deg
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.9;
  animation:snakeBorder 4s linear infinite;
}

@property --snake-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}

@keyframes snakeBorder{
  to{
    --snake-angle:360deg;
  }
}

.event-card.cyan{
  border-color:rgba(18,244,255,.45);
  box-shadow:0 0 35px rgba(18,244,255,.13);
}

.event-card.pink{
  color:var(--pink);
  border-color:rgba(255,62,200,.45);
  box-shadow:0 0 35px rgba(255,62,200,.13);
}

/* ================= TOP IMAGE + SHIMMER ================= */

.event-top{
  position:relative;
  min-height:198px;
  padding:28px;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

.event-top::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 18% 55%, rgba(255,170,35,.25), transparent 35%),
    linear-gradient(90deg, rgba(3,7,18,.94), rgba(3,7,18,.55), rgba(3,7,18,.15));
}

.event-top::after{
  content:"";
  position:absolute;
  top:-35%;
  left:-70%;
  width:42%;
  height:170%;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,185,55,0) 20%,
      rgba(255,185,55,.35) 42%,
      rgba(18,244,255,.78) 50%,
      rgba(255,205,80,.35) 58%,
      transparent 82%
    );
  filter:blur(1.2px);
  transform:skewX(-18deg);
  mix-blend-mode:screen;
  animation:imageShimmer 5s ease-in-out infinite;
}

.event-card.pink .event-top::after{
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,62,200,0) 20%,
      rgba(255,62,200,.38) 42%,
      rgba(255,205,80,.68) 50%,
      rgba(255,62,200,.35) 58%,
      transparent 82%
    );
}

@keyframes imageShimmer{
  0%, 35%{
    left:-70%;
    opacity:0;
  }

  48%{
    opacity:1;
  }

  70%, 100%{
    left:125%;
    opacity:0;
  }
}

.event-info{
  position:relative;
  z-index:3;
}

.event-badge{
  display:inline-flex;
  padding:7px 13px;
  border-radius:999px;
  background:rgba(18,244,255,.18);
  color:var(--yellow);
  font-size:11px;
  font-weight:700;
}

.event-card.pink .event-badge{
  background:rgba(255,62,200,.18);
  color:var(--pink);
}

.event-card h3{
  margin-top:17px;
  font-size:34px;
  line-height:1.08;
  font-weight:700;
  color:#fff;
}

.event-card h3 span{
  color:var(--yellow);
}

.event-card.pink h3 span{
  color:var(--pink);
}

.event-meta{
  display:grid;
  gap:9px;
  margin-top:17px;
  font-size:13px;
  letter-spacing:.08em;
  color:#f4f6ff;
}

.event-meta i{
  color:var(--yellow);
  margin-right:7px;
}

.event-card.pink .event-meta i{
  color:var(--pink);
}

/* ================= FEATURES ================= */

.event-features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}

.event-feature{
  min-height:62px;
  padding:14px 15px;
  border-right:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  line-height:1.25;
  color:#fff;
}

.event-feature:last-child{
  border-right:0;
}

.event-feature i{
  font-size:24px;
  color:var(--yellow);
}

.event-card.pink .event-feature i{
  color:var(--pink);
}

/* ================= BOTTOM ================= */

.event-bottom{
  padding:17px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.details-btn{
  position:relative;
  overflow:hidden;
  min-width:180px;
  height:38px;
  border:1px solid var(--yellow);
  color:var(--yellow);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  letter-spacing:.16em;
  font-size:12px;
  font-weight:600;
  transition:.35s ease;
}

.details-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform:translateX(-120%);
  transition:.55s ease;
}

.details-btn:hover::before{
  transform:translateX(120%);
}

.details-btn:hover{
  background:var(--yellow);
  color:#031018;
  box-shadow:0 0 24px rgba(18,244,255,.45);
}

.event-card.pink .details-btn{
  border-color:var(--pink);
  color:var(--pink);
}

.event-card.pink .details-btn:hover{
  background:var(--pink);
  color:#100313;
  box-shadow:0 0 24px rgba(255,62,200,.45);
}

.price{
  text-align:right;
  font-size:11px;
  color:#d7dcec;
  letter-spacing:.08em;
}

.price strong{
  display:block;
  color:var(--yellow);
 font-size: 30px;
    font-weight: 700;
    letter-spacing: .03em;
}

.event-card.pink .price strong{
  color:var(--pink);
}

/* ================= NEW ARROWS ================= */

.carousel-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  border-radius:18px;
  border:1px solid rgba(18,244,255,.55);
  background:
    radial-gradient(circle at 30% 20%, rgba(18,244,255,.20), transparent 42%),
    rgba(3,8,18,.82);
  backdrop-filter:blur(16px);
  color:var(--yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  cursor:pointer;
  z-index:10;
  overflow:hidden;
  transition:.35s ease;
  box-shadow:
    0 0 24px rgba(18,244,255,.22),
    inset 0 0 18px rgba(255,255,255,.05);
}

.carousel-arrow::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
}

.carousel-arrow .arrow-glow{
  position:absolute;
  width:55px;
  height:120px;
  background:linear-gradient(180deg, transparent, currentColor, transparent);
  opacity:.22;
  transform:rotate(35deg) translateY(70px);
  transition:.45s ease;
}

.carousel-arrow i{
  position:relative;
  z-index:2;
  transition:.35s ease;
}

.carousel-arrow:hover{
  transform:translateY(-50%) scale(1.08);
  border-radius:50%;
  background:rgba(3,8,18,.95);
}

.carousel-arrow:hover .arrow-glow{
  transform:rotate(35deg) translateY(-70px);
}

.carousel-arrow:hover i{
  transform:scale(1.12);
}

.carousel-arrow.prev{
  left:-5px;
}

.carousel-arrow.next{
  right:-5px;
  color:var(--pink);
  border-color:rgba(255,62,200,.55);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,62,200,.22), transparent 42%),
    rgba(3,8,18,.82);
  box-shadow:
    0 0 24px rgba(255,62,200,.22),
    inset 0 0 18px rgba(255,255,255,.05);
}

/* ================= DOTS ================= */

.dots{
  display:flex;
  justify-content:center;
  gap:9px;
  margin-top:14px;
}

.dots button{
  width:9px;
  height:9px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.3);
  cursor:pointer;
  transition:.3s ease;
}

.dots button.active{
  width:24px;
  border-radius:999px;
  background:var(--yellow);
  box-shadow:0 0 14px rgba(18,244,255,.6);
}

/* ================= RESPONSIVE ================= */

@media(max-width:1200px){
  .event-card{
    flex:0 0 100%;
  }

  .events-carousel{
    padding:0 54px;
  }
}

@media(max-width:768px){
  .section-heading h2{
    font-size:18px;
    letter-spacing:.18em;
  }

  .section-heading p{
    font-size:10px;
    letter-spacing:.14em;
  }

  .events-carousel{
    padding:0 38px;
  }

  .event-top{
    min-height:230px;
    padding:22px;
  }

  .event-card h3{
    font-size:28px;
  }

  .event-features{
    grid-template-columns:repeat(2,1fr);
  }

  .event-feature{
    min-height:68px;
  }

  .event-bottom{
    align-items:flex-start;
    flex-direction:column;
  }

  .price{
    text-align:left;
  }

  .carousel-arrow{
    width:44px;
    height:44px;
    border-radius:14px;
    font-size:20px;
  }

  .carousel-arrow.prev{
    left:-2px;
  }

  .carousel-arrow.next{
    right:-2px;
  }
}

@media(max-width:480px){
  .events-carousel{
    padding:0 18px;
  }

  .carousel-arrow{
    top:auto;
    bottom:-68px;
  }

  .carousel-arrow.prev{
    left:calc(50% - 58px);
  }

  .carousel-arrow.next{
    right:calc(50% - 58px);
  }

  .dots{
    margin-top:76px;
  }

  .event-top{
    min-height:220px;
  }

  .event-card h3{
    font-size:24px;
  }

  .event-meta{
    font-size:11px;
  }

  .event-features{
    grid-template-columns:1fr;
  }

  .event-feature{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }

  .details-btn{
    width:100%;
  }
}

/* ================= INFO ================= */

.info-area{
  padding:0 0 34px;
  
}

.info-grid{
  display:grid;
  grid-template-columns:1.65fr 1fr;
  gap:18px;
  margin-top:14px;
}

.why-card,
.subscribe-card,
.bottom-bar{
  background:rgba(4,10,22,.76);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  backdrop-filter:blur(16px);
}

.why-card{
  padding:24px 28px;
  display:grid;
  grid-template-columns:1.4fr repeat(4,1fr);
  gap:20px;
}

.why-card h4,
.subscribe-card h4{
  font-size:16px;
  letter-spacing:.16em;
  font-weight:500;
  margin-bottom:10px;
}

.why-card p,
.subscribe-card p{
  color:#bec6d6;
  font-size:13px;
  line-height:1.55;
}

.learn-btn{
  margin-top:17px;
  width:150px;
  height:34px;
  border:1px solid var(--yellow);
  color:var(--yellow);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  letter-spacing:.14em;
}

.stat{
  border-left:1px solid rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
}

.stat i{
  color:var(--yellow);
  font-size:38px;
}

.stat strong{
  color:var(--yellow);
  font-size:32px;
  margin-top:7px;
}

.stat span{
  font-size:12px;
  letter-spacing:.12em;
}

.subscribe-card{
  padding:24px 34px;
  position:relative;
  overflow:hidden;
}

.subscribe-card::after{
  content:"";
  position:absolute;
  right:-45px;
  bottom:-80px;
  width:250px;
  height:250px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(18,244,255,.48), transparent 65%);
  opacity:.8;
}

.subscribe-form{
  margin-top:18px;
  max-width:360px;
  display:flex;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  overflow:hidden;
  position:relative;
  z-index:2;
}

.subscribe-form input{
  flex:1;
  height:46px;
  border:0;
  outline:0;
  background:rgba(255,255,255,.03);
  color:#fff;
  padding:0 16px;
  font-family:inherit;
}

.subscribe-form button{
  width:56px;
  border:0;
  background:linear-gradient(135deg,var(--pink),#864cff);
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

.bottom-bar{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  overflow:hidden;
}

.bar-item{
  min-height:70px;
  padding:18px 36px;
  display:flex;
  align-items:center;
  gap:20px;
  border-right:1px solid rgba(255,255,255,.13);
}

.bar-item i{
  font-size:34px;
  color:var(--yellow);
}

.bar-item:nth-child(2) i,
.bar-item:nth-child(3) i{
  color:var(--yellow);
}

.bar-item h5{
  font-size:15px;
  font-weight:400;
  letter-spacing:.12em;
}

.bar-item p{
  margin-top:5px;
  font-size:12px;
  color:#98a1b5;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1200px){
  .hero-grid{
    grid-template-columns:1fr;
    gap:25px;
  }

  .hero{
    padding-top:115px;
  }

  .hero-visual{
    min-height:auto;
    justify-content:center;
  }

  .hero-visual img{
    margin-right:0;
    max-width:850px;
  }

  .event-card{
    flex-basis:100%;
  }

  .why-card{
    grid-template-columns:1fr 1fr;
  }

  .stat{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.14);
    padding-top:20px;
  }
}

@media(max-width:900px){
  .container{
    width:min(100% - 34px,1560px);
  }

  /* The mobile drawer is fully governed by the max-width:991px block above
     (fixed panel; `.nav-menu.open` toggles opacity/visibility). Hiding it with
     display:none here removed it from layout, so `.open` could never reveal it
     on phones — hide only the desktop pass button. */
  .pass-btn{
    display:none;
  }

  /* Must stay `flex` — the base rule uses flex-direction/gap to space the three
     bars; `block` collapsed them into a single dash. */
  .mobile-btn{
    display:flex;
  }

  .hero h1{
    font-size:58px;
  }

  .hero-visual img{
    max-width:100%;
  }

  .events-carousel{
    padding:0 0 74px;
  }

  .carousel-arrow{
    top:auto;
    bottom:0;
    transform:none;
  }

  .carousel-arrow.prev{
    left:calc(50% - 70px);
  }

  .carousel-arrow.next{
    right:calc(50% - 70px);
  }

  .event-features{
    grid-template-columns:1fr 1fr;
  }

  .info-grid{
    grid-template-columns:1fr;
  }

  .bottom-bar{
    grid-template-columns:1fr;
  }
}

@media(max-width:580px){
  .header{
    height:68px;
  }

  .logo img{
    height:30px;
  }

  .hero{
    padding-top:98px;
  }

  .eyebrow{
    font-size:13px;
  }

  .hero h1{
    font-size:46px;
  }

  .hero-text{
    font-size:15px;
  }

  .hero-icons{
    gap:18px;
  }

  .hero-icons div{
    width:100%;
  }

  .section-heading h2{
    font-size:16px;
    letter-spacing:.18em;
  }

  .section-heading p{
    letter-spacing:.12em;
  }

  .event-top{
    padding:24px;
  }

  .event-card h3{
    font-size:26px;
  }

  .event-features{
    grid-template-columns:1fr;
  }

  .event-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
  }

  .price{
    text-align:left;
  }

  .why-card{
    grid-template-columns:1fr;
  }

  .bar-item{
    padding:18px 22px;
  }
}

/* ================= MINIMAL FOOTER ================= */

.event-footer{
  position:relative;
  padding:18px 0 26px;
  color:#fff;
}

.event-footer-card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr 1fr;
  gap:34px;
  padding:28px;
  border-radius:18px;
  background:
    radial-gradient(circle at 88% 20%, rgba(18,244,255,.13), transparent 34%),
    radial-gradient(circle at 12% 90%, rgba(255,62,200,.10), transparent 32%),
    rgba(5,12,25,.76);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(16px);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}

.event-footer-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(18,244,255,.18), transparent 28%, transparent 72%, rgba(255,62,200,.16));
  opacity:.4;
}

.footer-brand,
.footer-col{
  position:relative;
  z-index:2;
}

.footer-logo{
  display:inline-flex;
  max-width:138px;
  margin-bottom:16px;
}

.footer-logo img{
  max-width:100%;
  height:auto;
  display:block;
}

.footer-brand p{
  max-width:360px;
  margin:0 0 18px;
  color:#c8cedd;
  font-size:13px;
  line-height:1.7;
}

.footer-socials{
  display:flex;
  gap:10px;
}

.footer-socials a{
  width:34px;
  height:34px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  transition:.3s ease;
}

.footer-socials a:hover{
  color:#031018;
  background:var(--yellow);
  border-color:var(--yellow);
  box-shadow:0 0 18px rgba(18,244,255,.45);
  transform:translateY(-3px);
}

.footer-col h5{
  margin:0 0 14px;
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
}

.footer-col a{
  display:block;
  width:max-content;
  max-width:100%;
  margin-bottom:9px;
  color:#c8cedd;
  font-size:13px;
  text-decoration:none;
  transition:.25s ease;
}

.footer-col a:hover{
  color:var(--yellow);
  transform:translateX(4px);
}

.payment-icons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

.payment-icons span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:8px;
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}

.footer-col small{
  display:block;
  max-width:240px;
  color:#9ca6bb;
  font-size:12px;
  line-height:1.6;
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 4px 0;
  color:#aeb7ca;
  font-size:12px;
}

.footer-links{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.footer-links a{
  color:#aeb7ca;
  text-decoration:none;
  transition:.25s ease;
}

.footer-links a:hover{
  color:var(--yellow);
}

.footer-disclaimer{
  margin:10px 4px 0;
  max-width:1100px;
  color:#747f94;
  font-size:11px;
  line-height:1.7;
}

/* ================= RESPONSIVE FOOTER ================= */

@media(max-width:991px){
  .event-footer-card{
    grid-template-columns:1fr 1fr;
  }

  .footer-brand{
    grid-column:1 / -1;
  }
}

@media(max-width:576px){
  .event-footer{
    padding-bottom:22px;
  }

  .event-footer-card{
    grid-template-columns:1fr;
    gap:24px;
    padding:24px;
    border-radius:16px;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-links{
    gap:12px;
  }

  .payment-icons span{
    font-size:9px;
  }
}
 
 /* DETAILS EVENTS */

.ticket-detail-section{
    position: relative;
    padding: 30px 0 90px;
    color: #fff;
    overflow: hidden;
}

.ticket-detail-section::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(2,6,17,.98) 0%,
        rgba(2,6,17,.92) 35%,
        rgba(2,6,17,.75) 65%,
        rgba(2,6,17,.35) 85%,
        transparent 100%
    );
    z-index: 0;
}

.ticket-detail-section > *{
    position: relative;
    z-index: 1;
}
.ticket-layout{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:24px;
  align-items:start;
}

.ticket-shop,
.checkout-cart{
  position:relative;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  background:
    radial-gradient(circle at 20% 0%, rgba(217,239,0,.06), transparent 34%),
    linear-gradient(145deg, rgba(0,18,22,.74), rgba(0,7,12,.92));
  backdrop-filter:blur(18px);
  box-shadow:0 30px 90px rgba(0,0,0,.42);
}

.ticket-shop{
  padding:32px;
}

.ticket-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px;
}

.ticket-kicker{
  display:block;
  margin-bottom:8px;
  color:#baca29;
  font-size: 11px;
    font-weight: 300;
    letter-spacing: .12em;
}

.ticket-section-head h2{
  margin:0;
  font-size:26px;
  line-height:1;
  font-weight:600;
}

.ticket-sale-pill{
     border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50px;
    padding: 11px 17px;
    color: rgba(255, 255, 255, .52);
    font-size: 11px;
    letter-spacing: 0.08em;
}

.ticket-sale-pill strong{
  color:#baca29;
  margin-left:8px;
}

.pass-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.pass-card{
  --pass-color:#baca29;
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:rgba(0,10,15,.78);
  border:1px solid rgba(255,255,255,.12);
  transition:.4s cubic-bezier(.2,.8,.2,1);
}

.pass-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  border:1px solid transparent;
  background:linear-gradient(135deg, color-mix(in srgb, var(--pass-color) 55%, transparent), transparent 42%, rgba(255,255,255,.12)) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.72;
  z-index:2;
}

.pass-card:hover{
  transform:translateY(-10px);
  border-color:rgba(217,239,0,.25);
  box-shadow:0 26px 70px rgba(0,0,0,.45);
}

.pass-card.basic-card{--pass-color:#24e3e8;}
.pass-card.gold-card{--pass-color:#baca29;}
.pass-card.premium-card{--pass-color:#e94db9;}

.pass-banner{
  position:relative;
  height:165px;
  background-size:cover;
  background-position:center;
}

.pass-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.02) 0%, rgba(0,10,15,.15) 58%, rgba(0,10,15,1) 100%),
    linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,0.18));
}

.pass-banner::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:0;
  height:1px;
  border-radius:10px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    var(--pass-color) 18%,
    var(--pass-color) 82%,
    transparent 100%
  );
  box-shadow:0 0 16px color-mix(in srgb, var(--pass-color) 45%, transparent);
}

.popular-badge{
  position:absolute;
  top:16px;
  right:16px;
  z-index:4;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(0,0,0,.46);
  color:#baca29;
  border:1px solid rgba(217,239,0,.35);
  backdrop-filter:blur(8px);
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
}

.pass-body{
  position:relative;
  z-index:3;
  padding:20px 26px 26px;
}

.pass-label{
  display:block;
  margin-bottom:12px;
  color:rgba(255,255,255,.5);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
}

.pass-body p{
  min-height:44px;
  margin:0 0 20px;
  color:rgba(255,255,255,.58);
  font-size:13px;
  line-height:1.5;
}

.pass-price{
  display:flex;
  align-items:flex-start;
  gap:4px;
  margin-bottom:22px;
  color:#fff;
  font-size:46px;
  line-height:1;
  font-weight:700;
}

.pass-price span{
  color:var(--pass-color);
  font-size:19px;
  margin-top:6px;
}

.pass-price small{
  align-self:flex-end;
  margin-bottom:6px;
  color:rgba(255,255,255,.42);
  font-size:11px;
  letter-spacing:.14em;
}

.pass-card ul{
  list-style:none;
  padding:0;
  margin:0 0 28px;
  display:grid;
  gap:13px;
}

.pass-card li{
    display:flex;
    align-items:center;
    gap:12px;
    color:rgba(255,255,255,.78);
    font-size:14px;
    line-height:1.45;font-weight: 300;
}

.pass-card li i{
    width:auto;
    height:auto;
    background:none;
    border:none;
    border-radius:0;
    color:var(--pass-color);
    font-size:18px;
    flex:0 0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:none;
}

.select-pass-btn{
    position:relative;
    overflow:hidden;
    width:100%;
    height:52px;
    border:0;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    cursor:pointer;
    text-decoration:none;
    font-family:"Outfit",sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform:uppercase;
    color:#051317;
    background:linear-gradient(90deg,#22d8f2 0%,#b8ff3c 100%);
    box-shadow:
        0 12px 35px rgba(44,230,220,.18),
        inset 0 1px 0 rgba(255,255,255,.28);
    transition:.35s ease;
}

.select-pass-btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,.55) 50%,
        transparent 70%
    );
    transform:translateX(-170%);
}

.select-pass-btn::after{
    content:"\F138";
    font-family:"bootstrap-icons";
    font-size:16px;
    transition:.35s ease;
}

.select-pass-btn:hover{
    transform:translateY(-3px);
    box-shadow:
    0 18px 45px rgba(217, 239, 0, .28),
    0 0 25px rgba(183, 255, 79, .22);
}

.select-pass-btn:hover::before{
    animation:passShine .8s linear forwards;
}

.select-pass-btn:hover::after{
    transform:translateX(5px);
}

.select-pass-btn:active{
    transform:scale(.98);
}

@keyframes passShine{
    from{
        transform:translateX(-170%);
    }
    to{
        transform:translateX(170%);
    }
}
.basic-card .select-pass-btn{
    background:linear-gradient(90deg,#18dff3,#43ffe0);
}

.gold-card .select-pass-btn{
    background:linear-gradient(90deg,#d7b200,#f6ea4b);
}

.premium-card .select-pass-btn{
    background:linear-gradient(90deg,#e23aa9,#ff71cb);
}
.checkout-cart{
    position:sticky;
    top:100px;
    padding:24px;
    border-radius:26px;
    border:1px solid rgba(255,255,255,.10);
    background:
        radial-gradient(circle at top right,rgba(217,239,0,.05),transparent 35%),
        linear-gradient(180deg,#081418,#03080c);
    font-family:"Outfit",sans-serif;
}

.cart-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
}

.cart-head span{
    display:block;
    color:#baca29;
    font-size:10px;
    font-weight:700;
    letter-spacing:.22em;
    margin-bottom:5px;
}

.cart-head h3{
    margin:0;
    font-size:25px;
    font-weight:600;
}

.cart-count{
    position:relative;
    width:46px;
    height:46px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
}

.cart-count i{
    font-size:22px;
}

.cart-count strong{
    position:absolute;
    top:-6px;
    right:-6px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#baca29;
    color:#051317;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
}

.cart-items{
    display:grid;
    gap:14px;
    margin-bottom:22px;
}

.empty-cart{
    padding:35px 15px;
    border:1px dashed rgba(255,255,255,.10);
    border-radius:18px;
    text-align:center;
}

.empty-cart i{
    font-size:36px;
    color:#baca29;
}

.empty-cart h5{
    margin:15px 0 8px;
    font-size:17px;
}

.empty-cart p{
    margin:0;
    color:rgba(255,255,255,.45);
    font-size:13px;
}

.cart-item{
    display:grid;
    grid-template-columns:74px 1fr;
    gap:14px;
    padding:12px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

.cart-image{
    height:70px;
    border-radius:14px;
    overflow:hidden;
}

.cart-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.cart-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.cart-top h4{
    margin:0;
    font-size:15px;
}

.cart-top span{
    color:rgba(255,255,255,.45);
    font-size:12px;
}

.cart-remove{
    width:30px;
    height:30px;
    border:0;
    border-radius:50%;
    background:transparent;
    color:rgba(255,255,255,.45);
    cursor:pointer;
}

.cart-remove:hover{
    color:#ff4f4f;
}

.cart-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:14px;
}

.cart-qty{
    display:flex;
    align-items:center;
    gap:10px;
}

.cart-qty button{
    width:28px;
    height:28px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    color:#fff;
    cursor:pointer;
}

.cart-price{
    font-size:17px;
    color:#baca29;
}

.cart-discount{
    margin:22px 0;
}

.cart-discount label{
    display:block;
    margin-bottom:10px;
    font-size:12px;
    color:rgba(255,255,255,.55);
}

.promo-input{
    display:flex;
    gap:8px;
}

.promo-input input{
    flex:1;
    height:46px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    color:#fff;
    padding:0 15px;
}

.promo-input button{
    padding:0 18px;
    border:0;
    border-radius:12px;
    background:#baca29;
    font-weight:700;
}

.cart-summary{
    display:grid;
    gap:12px;
    padding:20px 0;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.cart-summary div{
    display:flex;
    justify-content:space-between;
    color:rgba(255,255,255,.58);
}

.summary-total{
    margin-top:10px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.08);
    font-size:18px;
    color:#fff!important;
}

.summary-total strong{
    color:#baca29;
    font-size:28px;
}

.checkout-btn{
    position:relative;
    overflow:hidden;
    width:100%;
    height:56px;
    margin-top:24px;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg,#baca29,#b7ff4f);
    color:#041114;
    font-family:"Outfit",sans-serif;
       font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    cursor:pointer;
    transition:.35s;
}

.checkout-btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
    transform:translateX(-140%);
}

.checkout-btn:hover::before{
    animation:shine .8s linear;
}

.checkout-btn:hover{
    transform:translateY(-3px);
}

.checkout-btn i{
    transition:.35s;
}

.checkout-btn:hover i{
    transform:translateX(5px);
}

.secure-payment{
    margin-top:18px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,.45);
    font-size:12px;
}

.payment-icons{
    margin-top:18px;
    display:flex;
    justify-content:center;
    gap:14px;
    color:rgba(255,255,255,.35);
    font-size:22px;
}

@keyframes shine{
    from{transform:translateX(-140%);}
    to{transform:translateX(140%);}
}

.cart-secure{
  margin:16px 0 0;
  text-align:center;
  color:rgba(255,255,255,.45);
  font-size:12px;
  letter-spacing:.08em;
}
.pass-modal,
.pass-modal *{
  font-family:"Outfit",sans-serif;
}

.pass-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:.35s ease;
}

.pass-modal.active{
  opacity:1;
  visibility:visible;
}

.pass-modal-box{
  width:min(100%,760px);
  min-height:430px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:280px 1fr;
  border-radius:34px;
  background:
    radial-gradient(circle at 85% 10%,rgba(217,239,0,.11),transparent 35%),
    linear-gradient(145deg,rgba(8,24,27,.98),rgba(1,7,12,.98));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 55px 150px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(24px) scale(.96);
  transition:.35s ease;
}

.pass-modal.active .pass-modal-box{
  transform:translateY(0) scale(1);
}

.modal-close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:10;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.32);
  color:#fff;
  backdrop-filter:blur(10px);
  cursor:pointer;
  transition:.3s ease;
}

.modal-close:hover{
  transform:rotate(90deg);
  background:rgba(255,255,255,.09);
}

.modal-pass-preview{
   position: relative;
    min-height: 100%;
    overflow: hidden;

    background-repeat: no-repeat;
    background-position: left center; /* instead of center */
   
}

.modal-pass-preview::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right,rgba(0,0,0,.05),rgba(2,8,12,.95)),
    linear-gradient(to bottom,rgba(0,0,0,.05),rgba(0,0,0,.45));
}

.modal-pass-preview::after{
  content:"";
  position:absolute;
  left:24px;
  top:24px;
  bottom:24px;
  width:2px;
  border-radius:20px;
  background:linear-gradient(to bottom,transparent,#baca29,transparent);
  box-shadow:0 0 22px rgba(217,239,0,.55);
}

.modal-body-wrap{
  position:relative;
  z-index:2;
  padding:42px 42px 34px;
}

.modal-pass-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}

.modal-pass-top span{
  color:#baca29;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
}

.modal-pass-top strong{
  padding:8px 13px;
  border-radius:999px;
  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
}

.pass-modal-box h3{
    margin: 0;
    font-size: 36px;
    line-height: .95;
    font-weight: 600;
}

.modal-small-text{
  max-width:340px;
  margin:14px 0 26px;
  color:rgba(255,255,255,.5);
  font-size:14px;
  line-height:1.55;
}

.modal-info-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:18px;
}

.modal-price-row,
.qty-box{
  min-height:112px;
  padding:20px;
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.1);
}

.modal-price-row span,
.qty-box span{
  display:block;
  margin-bottom:22px;
  color:rgba(255,255,255,.48);
  font-size:12px;
}

.modal-price-row strong{
  color:#fff;
  font-size:32px;
  font-weight:700;
}

.qty-control{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.qty-control button{
     width: 33px;
    height: 33px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 18px;
  cursor:pointer;
  transition:.3s ease;
}

.qty-control button:hover{
  background:#baca29;
  color:#041114;
  border-color:#baca29;
}

.qty-control strong{
  font-size:25px;
  font-weight:700;
}

.modal-total-row{
  min-height:90px;
  padding:22px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
  margin-bottom:22px;
}

.modal-total-row span{
  display:block;
  color:#fff;
  font-size:14px;
  font-weight:600;
  margin-bottom:5px;
}

.modal-total-row small{
  display:block;
  color:rgba(255,255,255,.38);
  font-size:12px;
}

.modal-total-row strong{
  color:#baca29;
  font-size:42px;
  font-weight:700;
  letter-spacing:-.04em;
}
.modal-extra-options{
    margin:18px 0;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.06);
}

.extra-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}

.extra-title span{
    font-size:13px;
    font-weight:600;
    color:#fff;
}

.extra-title small{
    font-size:11px;
    color:rgba(255,255,255,.45);
}

.extra-option{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:10px 14px;
    margin-bottom:10px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
    background:rgba(255,255,255,.02);
    cursor:pointer;
    transition:.25s;
}

.extra-option:hover{
    border-color:rgba(217,239,0,.28);
    background:rgba(217,239,0,.03);
}

.extra-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.extra-left input{
    width:18px;
    height:18px;
    accent-color:#d9ef00;
}

.extra-content strong{
    display:block;
    font-size:13px;
    font-weight:600;
    color:#fff;
}

.extra-content span{
    display:block;
    font-size:11px;
    color:rgba(255,255,255,.5);
}

.extra-right{
    display:flex;
    align-items:center;
    gap:10px;
}

.extra-right strong{
    color:#d9ef00;
    font-size:14px;
    font-weight:700;
}

.extra-info{
    width:28px;
    height:28px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.55);
    transition:.25s;
}

.extra-info:hover{
    color:#d9ef00;
    background:rgba(217,239,0,.12);
}
/* ================= CART EXTRA ================= */

.cart-extra{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:8px 0 12px;
  padding:10px 12px;
  border:1px solid rgba(217,239,0,.08);
  border-radius:12px;
  background:
    linear-gradient(135deg,
      rgba(217,239,0,.05),
      rgba(255,255,255,.015)
    );
}

.cart-extra i{
  width:22px;
  height:22px;
  flex-shrink:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(217,239,0,.08);
  color:#d9ef00;
  font-size:11px;
}

.cart-extra span{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.2;
}

.cart-extra span{
  font-size:13px;
  font-weight:500;
  color:#fff;
}

.cart-extra small{
  display:block;
  margin-top:2px;
  font-size:11px;
  font-weight:400;
  color:rgba(255,255,255,.55);
}

.cart-extra strong{
  color:#d9ef00;
  font-weight:600;
}

@media(max-width:576px){

  .cart-extra{
    padding:8px 10px;
    gap:8px;
  }

  .cart-extra span{
    font-size:12px;
  }

  .cart-extra small{
    font-size:10px;
  }

}

.add-cart-btn{
  position:relative;
  overflow:hidden;
  width:100%;
  height:58px;
  border:0;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:linear-gradient(135deg,#baca29,#a7ff45);
  color:#041114;
 font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:
    0 18px 46px rgba(217,239,0,.2),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition:.35s ease;
}

.add-cart-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-140%);
}

.add-cart-btn:hover{
  transform:translateY(-3px);
  box-shadow:
    0 24px 58px rgba(217,239,0,.28),
    0 0 26px rgba(217,239,0,.16);
}

.add-cart-btn:hover::before{
  animation:addCartShine .8s linear forwards;
}

.add-cart-btn i{
  position:relative;
  z-index:2;
  transition:.35s ease;
}

.add-cart-btn:hover i{
  transform:translateX(6px);
}

@keyframes addCartShine{
  to{
    transform:translateX(140%);
  }
}

@media(max-width:768px){
  .pass-modal-box{
    width:min(100%,520px);
    display:block;
  }

  .modal-pass-preview{
    height:170px;
    min-height:auto;
  }

  .modal-pass-preview::before{
    background:linear-gradient(to bottom,rgba(0,0,0,.02),rgba(2,8,12,.95));
  }

  .modal-pass-preview::after{
    left:24px;
    right:24px;
    top:auto;
    bottom:18px;
    width:auto;
    height:2px;
    background:linear-gradient(90deg,transparent,#baca29,transparent);
  }

  .modal-body-wrap{
    padding:28px 24px 24px;
  }

  .pass-modal-box h3{
    font-size:42px;
  }
}

@media(max-width:520px){
  .modal-info-card{
    grid-template-columns:1fr;
  }

  .modal-total-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .modal-total-row strong{
    font-size:36px;
  }
}

@media(max-width:1200px){
  .ticket-layout{
    grid-template-columns:1fr;
  }

  .checkout-cart{
    position:relative;
    top:auto;
  }
}

@media(max-width:991px){
  .pass-grid{
    grid-template-columns:1fr;
  }

  .pass-banner{
    height:220px;
  }
}

@media(max-width:576px){
  .ticket-detail-section{
    padding:18px 0 60px;
  }

  .ticket-shop,
  .checkout-cart{
    border-radius:22px;
  }

  .ticket-shop{
    padding:22px 16px;
  }

  .ticket-section-head{
    flex-direction:column;
  }

  .ticket-section-head h2{
    font-size:27px;
  }

  .ticket-sale-pill{
    width:100%;
    text-align:center;
  }

  .pass-banner{
    height:170px;
  }

  .pass-body{
    padding:20px;
  }

  .pass-price{
    font-size:40px;
  }

  .pass-modal-box{
    padding:26px 20px;
    border-radius:22px;
  }
}

.cart-fly-icon{
  position:fixed;
  z-index:10000;
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#baca29;
  color:#041114;
  font-size:20px;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%) scale(.6);
  box-shadow:0 16px 40px rgba(217,239,0,.35);
}

.cart-fly-icon.fly{
  animation:cartFly .85s cubic-bezier(.2,.8,.2,1) forwards;
}

.checkout-cart.cart-pulse{
  animation:cartPulse .55s ease;
}

@keyframes cartPulse{
  0%{transform:scale(1);}
  45%{transform:scale(1.025);}
  100%{transform:scale(1);}
}

/* checkout detail */
.checkout-background{
    position: relative;
    overflow: hidden;
    background:
       linear-gradient(
            to bottom,
            rgba(2,8,18,1) 0%,
            rgba(2,8,18,.68) 97%,
            rgba(2,8,18,.70) 89%,
            rgba(2,8,18,.35) 99%,
            rgba(2,8,18,0) 100%
        );
}

.checkout-background::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 20% 15%, rgba(44,230,220,.10), transparent 35%),
        radial-gradient(circle at 85% 25%, rgba(217,239,0,.08), transparent 30%);
}

.final-checkout-section,
.info-area{
    position:relative;
    z-index:1;
    background:transparent;
}
.final-checkout-section{
  display:none;
  position:relative;
  padding:30px 0 90px;
  color:#fff;
}

.final-checkout-section.active{
  display:block;
}

.final-checkout-layout{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:24px;
  align-items:start;
}

.checkout-main,
.checkout-final-summary{
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 80% 0%, rgba(217,239,0,.12), transparent 35%),
    linear-gradient(180deg, rgba(8,24,24,.92), rgba(2,8,13,.96));
  border-radius:28px;
  padding:28px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}

.checkout-panel{
  padding:26px;
  border-radius:24px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.1);
  margin-top:20px;
}

.checkout-panel h2,
.checkout-panel h3,
.checkout-final-summary h3{
  margin:6px 0 22px;
  font-weight:700;
}

.back-to-tickets{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#fff;
  border-radius:999px;
  padding:12px 18px;
  font-weight:700;
  cursor:pointer;
}

.user-readonly-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.user-readonly-grid label,
.wallet-transfer-box label{
  display:block;
  color:rgba(255,255,255,.55);
  font-size:12px;
  margin-bottom:8px;
  font-weight:700;
}

.user-readonly-grid input,
.wallet-copy input{
  width:100%;
  height:52px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:#fff;
  padding:0 16px;
  outline:none;
}

.payment-options{
  display:grid;
  gap:14px;
}

.payment-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:.25s ease;
}

.payment-card input{
  display:none;
}

.payment-card strong{
  display:block;
  font-size:15px;
}

.payment-card span{
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.55);
  font-size:13px;
}

.payment-card b{
  color:#baca29;
}

.payment-card i{
  font-size:24px;
  color:#baca29;
}

.payment-card.active{
  border-color:#baca29;
  box-shadow:0 0 24px rgba(217,239,0,.16);
}

.wallet-transfer-box{
  display:none;
  margin-top:18px;
  padding:18px;
  border-radius:18px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.1);
}

.wallet-transfer-box.active{
  display:block;
}

.wallet-copy{
  display:flex;
  gap:10px;
}

.wallet-copy button{
  border:0;
  border-radius:14px;
  padding:0 22px;
  background:linear-gradient(135deg,#baca29,#b7ff4f);
  color:#000;
  font-weight:900;
}

.wallet-transfer-box small{
  display:block;
  margin-top:10px;
  color:rgba(255,255,255,.45);
}

.final-cart-list{
  display:grid;
  gap:12px;
  margin-bottom:22px;
}

.final-cart-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:15px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.final-cart-item span{
  color:rgba(255,255,255,.55);
  font-size:13px;
}

.final-summary-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.65);
  font-weight:700;
}

.final-summary-line.total{
  color:#fff;
  font-size:20px;
  border-bottom:0;
  margin-top:8px;
}

.final-summary-line.total strong{
  color:#baca29;
  font-size:30px;
}

.confirm-payment-btn{
  width:100%;
  margin-top:20px;
}

@media(max-width:991px){
  .final-checkout-layout{
    grid-template-columns:1fr;
  }

  .checkout-final-summary{
    position:relative;
    top:auto;
  }
}

@media(max-width:576px){
  .checkout-main,
  .checkout-final-summary,
  .checkout-panel{
    padding:20px;
    border-radius:22px;
  }

  .user-readonly-grid{
    grid-template-columns:1fr;
  }

  .wallet-copy{
    flex-direction:column;
  }

  .wallet-copy button{
    height:48px;
  }
}

.wallet-balance-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}

.wallet-balance-box strong{
  display:block;
  font-size:16px;
}

.wallet-balance-box span{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.55);
}

.wallet-balance-box b{
  color:#baca29;
}

.balance-use{
  width:220px;
}

.balance-use label{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,.55);
  margin-bottom:8px;
}

.balance-use input{
    width:100%;
    height:56px;
    padding:0 18px;
    border-radius:16px;
    border:1px solid rgba(217,239,0,.18);
    background:
        linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)),
        rgba(7,12,18,.95);
    color:#fff;
    font-size:16px;
    font-weight:700;
    letter-spacing:.03em;
    outline:none;
    transition:.3s ease;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 30px rgba(0,0,0,.18);
}

.balance-use input::placeholder{
    color:rgba(255,255,255,.35);
}

.balance-use input:hover{
    border-color:rgba(217,239,0,.35);
}

.balance-use input:focus{
    border-color:#baca29;
    background:
        linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03)),
        rgba(10,16,22,.98);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 0 4px rgba(217,239,0,.08),
        0 0 28px rgba(217,239,0,.16);
}

.wallet-pay-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:16px 0;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(217,239,0,.08);
  border:1px solid rgba(217,239,0,.22);
}

.wallet-pay-note span{
  color:rgba(255,255,255,.65);
  font-weight:700;
}

.wallet-pay-note strong{
  color:#baca29;
  font-size:22px;
}

.wallet-transfer-box{
  display:flex;
  gap:22px;
  align-items:center;
}

.qr-box{
  width:150px;
  height:150px;
  flex:0 0 150px;
  border-radius:24px;
  background:#fff;
  padding:12px;
}

.qr-box img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.wallet-address-area{
  flex:1;
}

.payment-success-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px);
  opacity:0;
  visibility:hidden;
  transition:.35s ease;
}

.payment-success-modal.active{
  opacity:1;
  visibility:visible;
}

.payment-success-card{
  width:min(460px, calc(100% - 32px));
  padding:42px;
  border-radius:32px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0%, rgba(217,239,0,.22), transparent 40%),
    linear-gradient(180deg, rgba(13,31,29,.98), rgba(2,8,13,.98));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  transform:translateY(24px) scale(.96);
  transition:.35s ease;
}

.payment-success-modal.active .payment-success-card{
  transform:translateY(0) scale(1);
}

.success-icon{
  width:78px;
  height:78px;
  margin:0 auto 22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#baca29,#b7ff4f);
  color:#000;
  font-size:38px;
  box-shadow:0 0 35px rgba(217,239,0,.35);
}

.payment-success-card span{
  color:#baca29;
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.payment-success-card h3{
  margin:12px 0;
  font-size:26px;
}

.payment-success-card p{
  color:rgba(255,255,255,.62);
  line-height:1.7;
}

.payment-success-card button{
  width:100%;
  height:54px;
  margin-top:22px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#baca29,#b7ff4f);
  color:#000;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

@media(max-width:576px){
  .wallet-balance-box,
  .wallet-transfer-box{
    flex-direction:column;
    align-items:stretch;
  }

  .balance-use{
    width:100%;
  }

  .qr-box{
    margin:auto;
  }
}

.copy-wallet-btn{
    width:54px;
    height:54px;
    flex:0 0 54px;
    border:0;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#baca29,#b7ff4f);
    color:#000;
    font-size:20px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.copy-wallet-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(217,239,0,.28);
}

.copy-wallet-btn.copied{
    background:#1fd67a;
    color:#fff;
}

.success-animation{
    position:relative;
    width:110px;
    height:110px;
    margin:0 auto 28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#baca29,#b7ff4f);
    box-shadow:
        0 0 30px rgba(217,239,0,.5),
        0 0 80px rgba(217,239,0,.25);
    animation:pop .7s cubic-bezier(.2,.9,.2,1);
}

.success-check{
    width:64px;
    height:64px;
    z-index:5;
}

.success-circle{
    fill:none;
    stroke:rgba(0,0,0,.18);
    stroke-width:3;
}

.success-path{
    fill:none;
    stroke:#000;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:38;
    stroke-dashoffset:38;
    animation:draw .7s ease forwards .45s;
}

.ring{
    position:absolute;
    inset:-8px;
    border:2px solid rgba(217,239,0,.55);
    border-radius:50%;
    animation:ring 2s infinite;
}

.ring-2{
    animation-delay:.4s;
}

.particle{
    position:absolute;
    left:50%;
    top:50%;
    width:8px;
    height:8px;
    margin:-4px;
    border-radius:50%;
    background:#baca29;
    opacity:0;
    animation:burst .8s ease-out forwards .65s;
}

.p1{transform:rotate(0deg) translateY(-58px);}
.p2{transform:rotate(45deg) translateY(-58px);}
.p3{transform:rotate(90deg) translateY(-58px);}
.p4{transform:rotate(135deg) translateY(-58px);}
.p5{transform:rotate(180deg) translateY(-58px);}
.p6{transform:rotate(225deg) translateY(-58px);}
.p7{transform:rotate(270deg) translateY(-58px);}
.p8{transform:rotate(315deg) translateY(-58px);}

.success-label{
    display:block;
    margin-bottom:10px;
    color:#baca29;
    font-size:12px;
    font-weight:700;
    letter-spacing:.22em;
}

@keyframes draw{
    to{
        stroke-dashoffset:0;
    }
}

@keyframes pop{
    0%{
        transform:scale(.3);
        opacity:0;
    }
    70%{
        transform:scale(1.12);
    }
    100%{
        transform:scale(1);
        opacity:1;
    }
}

@keyframes ring{
    0%{
        transform:scale(1);
        opacity:.7;
    }
    100%{
        transform:scale(1.45);
        opacity:0;
    }
}

@keyframes burst{
    0%{
        opacity:0;
        scale:.2;
    }
    30%{
        opacity:1;
    }
    100%{
        opacity:0;
        scale:1.8;
    }
}

/* speakers */

.speakers-section{
  position:relative;
  padding:70px 0 100px;
  color:#fff;
  overflow:hidden;
  font-family:"Outfit",sans-serif;
}

.speakers-section::before{
  content:"";
  position:absolute;
  inset:0% -8% auto -8%;
  height:520px;
  background:
    radial-gradient(circle at 50% 55%, rgba(217,239,0,.13), transparent 26%),
    radial-gradient(circle at 30% 45%, rgba(44,230,220,.08), transparent 30%),
    linear-gradient(to bottom, transparent, rgba(0,0,0,.2));
  pointer-events:none;
}
.speakers-filter-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 auto 36px;
  padding:5px;
  width:max-content;
  max-width:100%;
  border-radius:999px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  overflow-x:auto;
  scrollbar-width:none;
}

.speakers-filter-bar::-webkit-scrollbar{
  display:none;
}

.speaker-filter{
  height:34px;
  padding:0 18px;
  border:none;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.55);
  font-family:"Outfit",sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  cursor:pointer;
  transition:.3s ease;
  white-space:nowrap;
}

.speaker-filter:hover{
  color:#fff;
}

.speaker-filter.active{
  background:rgba(217,239,0,.08);
  color:var(--yellow);
  border:1px solid rgba(217,239,0,.35);
  box-shadow:0 0 18px rgba(217,239,0,.12);
}


.speakers-stage{
  position:relative;
  z-index:2;
}

.speakers-window{
  overflow:hidden;
  padding:30px 72px 40px;
}

.speakers-track{
  position:relative;
  min-height:470px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  transition:.45s ease;
}

.speaker-card{
  --speaker-color:var(--yellow);
  position:relative;
  width:250px;
  height:390px;
  flex:0 0 250px;
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb,var(--speaker-color) 30%,transparent), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid color-mix(in srgb,var(--speaker-color) 35%,rgba(255,255,255,.12));
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  transform:scale(.88) rotate(-4deg);
  opacity:.84;
  transition:.45s cubic-bezier(.2,.8,.2,1);
}

.speaker-card.cyan{
  --speaker-color:#19e5f0;
}

.speaker-card.purple{
  --speaker-color:#b95cff;
}

.speaker-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(140deg, color-mix(in srgb,var(--speaker-color) 22%,transparent), transparent 35%),
    linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 34%, transparent 72%);
  z-index:1;
}

.speaker-card::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-28px;
  width:82%;
  height:28px;
  transform:translateX(-50%);
  border-radius:50%;
  background:color-mix(in srgb,var(--speaker-color) 55%,transparent);
  filter:blur(22px);
  opacity:.45;
  z-index:-1;
}

.speaker-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  filter:saturate(1.05) contrast(1.03);
  transition:.45s ease;
}

.speaker-card:hover img{
  transform:scale(1.05);
}

.speaker-icon{
  position:absolute;
  top:18px;
  right:18px;
  z-index:3;
  width:44px;
  height:44px;
  border-radius:13px;
  border:1px solid color-mix(in srgb,var(--speaker-color) 55%,transparent);
  background:rgba(0,0,0,.28);
  color:var(--speaker-color);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  backdrop-filter:blur(10px);
}

.speaker-info{
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  z-index:3;
}

.speaker-badge{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 12px;
  margin-bottom:12px;
  border-radius:999px;
  background:rgba(217,239,0,.1);
  border:1px solid rgba(217,239,0,.35);
  color:var(--yellow);
  font-size:10px;
  font-weight:800;
}

.speaker-info h3{
  margin:0 0 7px;
  font-size:23px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
}

.speaker-info p{
  margin:0 0 5px;
  color:rgba(255,255,255,.76);
  font-size:14px;
}

.speaker-info strong{
  display:block;
  color:var(--speaker-color);
  font-size:14px;
  font-weight:700;
}

.profile-btn{
  position:relative;
  overflow:hidden;
  width:100%;
  height:38px;
  margin:16px 0 12px;
  border-radius:999px;
  border:1px solid rgba(217,239,0,.45);
  background:rgba(0,0,0,.12);
  color:var(--yellow);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  cursor:pointer;
  transition:.35s ease;
}

.profile-btn i{
  margin-left:8px;
  transition:.35s ease;
}

.profile-btn:hover{
  background:var(--yellow);
  color:#041114;
}

.profile-btn:hover i{
  transform:translateX(5px);
}

.speaker-socials{
  height:44px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
  border-radius:12px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.08);
}

.speaker-socials a{
  color:rgba(255,255,255,.8);
  text-decoration:none;
  text-align:center;
  font-size:19px;
  transition:.3s ease;
}

.speaker-socials a:hover{
  color:var(--speaker-color);
}

.speaker-card.active-card{
  width:300px;
  height:450px;
  flex-basis:300px;
  transform:scale(1) rotate(0deg);
  opacity:1;
  z-index:5;
  border-color:rgba(217,239,0,.9);
  box-shadow:
    0 30px 90px rgba(0,0,0,.6),
    0 0 42px rgba(217,239,0,.18);
}

.speaker-card.active-card .speaker-info h3{
  font-size:26px;
}

.side-left-1{
  transform:scale(.92) rotate(-3deg);
}

.side-left-2{
  transform:scale(.86) rotate(-5deg);
}

.side-right-1{
  transform:scale(.92) rotate(3deg);
}

.side-right-2{
  transform:scale(.86) rotate(4deg);
}

.speaker-arrow{
  position:absolute;
  top:50%;
  z-index:5;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  border-radius:50%;
  border:1px solid rgba(217,239,0,.4);
  background:rgba(0,0,0,.25);
  color:var(--yellow);
  font-size:25px;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:.35s ease;
}

.speaker-arrow:hover{
  background:var(--yellow);
  color:#041114;
  box-shadow:0 0 28px rgba(217,239,0,.35);
}

.speaker-prev{
  left:0;
}

.speaker-next{
  right:0;
}

.speaker-dots{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:-15px;
}

.speaker-dots button{
  width:9px;
  height:9px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.18);
  cursor:pointer;
  transition:.3s ease;
}

.speaker-dots button.active{
  width:18px;
  border-radius:999px;
  background:var(--yellow);
  box-shadow:0 0 16px rgba(217,239,0,.8);
}

@media(max-width:1200px){
  .speakers-window{
    padding:30px 60px 40px;
  }

  .speaker-card{
    width:220px;
    height:360px;
    flex-basis:220px;
  }

  .speaker-card.active-card{
    width:270px;
    height:420px;
    flex-basis:270px;
  }
}

@media(max-width:991px){
  .speakers-filter-bar{
    overflow-x:auto;
    max-width:100%;
    justify-content:flex-start;
  }

  .speakers-filter-bar::-webkit-scrollbar{
    display:none;
  }

  .speakers-window{
    padding:20px 50px 35px;
  }

  .speakers-track{
    min-height:430px;
    justify-content:flex-start;
  }

  .speaker-card{
    display:none;
    width:280px;
    height:410px;
    flex-basis:280px;
    transform:none!important;
  }

  .speaker-card.active-card{
    display:block;
    width:100%;
    max-width:330px;
    height:430px;
    flex-basis:100%;
    margin:auto;
  }
}

@media(max-width:576px){
  .speakers-section{
    padding:45px 0 70px;
  }

  .speaker-filter{
    padding:0 16px;
    font-size:12px;
  }

  .speakers-window{
    padding:10px 42px 35px;
  }

  .speaker-card.active-card{
    max-width:100%;
    height:420px;
  }

  .speaker-info h3,
  .speaker-card.active-card .speaker-info h3{
    font-size:23px;
  }

  .speaker-arrow{
    width:44px;
    height:44px;
    font-size:21px;
  }
}
@media(max-width:768px){

  .speakers-filter-bar{
    justify-content:flex-start;
    width:100%;
  }

  .speaker-filter{
    flex:0 0 auto;
    padding:0 16px;
    font-size:10px;
  }

}
.speakers-track{
  overflow:visible;
}

.speaker-card{
  display:none;
}

.speaker-card.active-card,
.speaker-card.side-left-1,
.speaker-card.side-left-2,
.speaker-card.side-right-1,
.speaker-card.side-right-2{
  display:block;
}

/* RECOGNATION */

 
.recognition-stage{
  position:relative;
  padding:55px 0 70px;
  overflow:hidden;
  color:#fff;
}

.recognition-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%,rgba(0,225,255,.08),transparent 30%),
    radial-gradient(circle at 90% 70%,rgba(217,239,0,.07),transparent 32%);
}
.recognition-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(2,8,14,.04),
    rgba(2,8,14,.22)
  );
}

.recognition-stage .container{
  position:relative;
  z-index:1;
}

/* ================= TITLE ================= */

.recognition-title{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:28px;
}

.recognition-title > div:first-child > span{
  display:block;
  margin-bottom:8px;
  color:var(--yellow);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
}

.recognition-title h2{
  margin:0;
  color:#fff;
  font-size:28px;
  font-weight:700;
  letter-spacing:.14em;
}

.recognition-title h2 b{
  color:var(--yellow);
  font-weight:700;
}

.recognition-title p{
     margin: 10px 0 0;
    color: rgba(255, 255, 255, .5);
    font-size: 20px;
    letter-spacing: .06em;
    font-weight: 200;
}

.recognition-controls{
  display:flex;
  gap:10px;
}

.recognition-nav{
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.recognition-nav:hover{
  color:#000;
  border-color:var(--yellow);
  background:var(--yellow);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(217,239,0,.18);
}

/* ================= SLIDER ================= */

.recognition-slider{
  position:relative;
  z-index:2;
}

.recognition-viewport{
  width:100%;
  overflow:hidden;
}

.recognition-list{
  display:flex;
  gap:22px;
  transition:transform .55s cubic-bezier(.2,.75,.2,1);
  will-change:transform;
}

/* ================= CARD ================= */

.qualified-card{
  --rank-color:var(--yellow);
  --rank-rgb:217,239,0;

  position:relative;
  flex:0 0 calc((100% - 66px) / 4);
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:26px;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(var(--rank-rgb),.10),
      transparent 42%
    ),
    rgba(5,14,22,.94);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}
.qualified-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    url("../images/ioco-3d.png") center 46% / 78% auto no-repeat;

  opacity:.3;
  filter:grayscale(1) brightness(1.3);
}

.qualified-card>*{
  position:relative;
  z-index:2;
}
.qualified-card:hover{
  transform:translateY(-8px);
  border-color:rgba(var(--rank-rgb),.55);
  box-shadow:
    0 24px 60px rgba(0,0,0,.38),
    0 0 35px rgba(var(--rank-rgb),.08);
}

/* ================= VISUAL ================= */

.qualified-visual{
  position:relative;
  height:360px;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(var(--rank-rgb),.17),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(var(--rank-rgb),.05),
      rgba(4,13,21,.98)
    );
}

.qualified-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(
      135deg,
      transparent 58%,
      rgba(var(--rank-rgb),.08)
    ),
    linear-gradient(
      to bottom,
      transparent 38%,
      rgba(3,10,17,.10) 58%,
      rgba(3,10,17,.55) 78%,
      rgba(3,10,17,.95) 92%,
      rgba(3,10,17,1) 100%
    );
}
.qualified-visual::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:4;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    var(--rank-color),
    transparent
  );
}

/* ================= RANK BADGE ================= */

.rank-badge{
     position: absolute;
    z-index: 4;
    top: 20px;
    left: 20px;
    height: 38px;
    border: 1px solid rgba(var(--rank-rgb), .25);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 7px 24px rgba(0, 0, 0, .8);
}

.rank-badge img{
  width:auto;
  max-width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  filter:drop-shadow(
    0 6px 12px rgba(var(--rank-rgb),.26)
  );
}

/* ================= PERSON IMAGE ================= */

.qualified-person{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:0;
  width:90%;
  height:94%;
  display:block;
  object-fit:contain;
  object-position:center bottom;
  transform:translateX(-50%);
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.45));
  transition:transform .45s ease;

  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 68%,
    rgba(0,0,0,.92) 77%,
    rgba(0,0,0,.5) 88%,
    transparent 100%
  );

  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 68%,
    rgba(0,0,0,.92) 77%,
    rgba(0,0,0,.5) 88%,
    transparent 100%
  );
}

.qualified-card:hover .qualified-person{
  transform:translateX(-50%) scale(1.035);
}

/* ================= LEVEL ================= */

.qualified-level{
  position:absolute;
  z-index:5;
  left:22px;
  right:22px;
  bottom:20px;
}

.qualified-level small{
  display:block;
  margin-bottom:5px;
  color:rgba(255,255,255,.65);
  font-size:10px;
  font-weight:400;
  letter-spacing:.08em;
}

.qualified-level strong{
  display:block;
  color:var(--rank-color);
  font-size:23px;
  font-weight:300;
  letter-spacing:.04em;
  text-shadow:0 0 20px rgba(var(--rank-rgb),.25);
}

/* ================= INFO ================= */

.qualified-info{
  min-height:92px;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:rgba(3,11,18,.94);
}

.qualified-info h3{
  margin:0;
  color:#fff;
  font-size:16px;
  font-weight:700;
}

.qualified-info span{
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.38);
  font-size:10px;
  letter-spacing:.05em;
}

.qualified-status{
  position:relative;
  isolation:isolate;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px 17px;
  border-radius:999px;
  color:var(--rank-color);
  background:rgba(var(--rank-rgb),.06);
  font-size:13px;
  font-weight:600;
  overflow:hidden;
}

.qualified-status::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-2;
  border-radius:inherit;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 255deg,
      rgba(255,255,255,.15) 285deg,
      #fff 315deg,
      rgba(255,255,255,.25) 340deg,
      transparent 360deg
    );
  animation:statusSnake 2.4s linear infinite;
}

.qualified-status::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:-1;
  border-radius:inherit;
  background:
    linear-gradient(
      180deg,
      rgba(9,18,26,.98),
      rgba(4,12,18,.98)
    );
}

.qualified-status:hover::before{
  animation-duration:1.2s;
}

@keyframes statusSnake{
  to{
    transform:rotate(360deg);
  }
}
.qualified-status{
  box-shadow:
    0 0 12px rgba(255,255,255,.08),
    inset 0 0 12px rgba(255,255,255,.03);
}
.qualified-status i{
  font-size:12px;
}

/* ================= LEVEL COLORS ================= */

.rank-c1{
  --rank-color:#8cff00;
  --rank-rgb:140,255,0;
}

.rank-c2{
  --rank-color:#25b8ff;
  --rank-rgb:37,184,255;
}

.rank-c3{
  --rank-color:#ad5cff;
  --rank-rgb:173,92,255;
}

.rank-c4{
  --rank-color:#ff4545;
  --rank-rgb:255,69,69;
}

.rank-c5{
  --rank-color:#13d88a;
  --rank-rgb:19,216,138;
}

.rank-c6{
  --rank-color:#c8cbd1;
  --rank-rgb:200,203,209;
}

.rank-c7{
  --rank-color:#ffb400;
  --rank-rgb:255,180,0;
}

.rank-c8{
  --rank-color:#ead8a0;
  --rank-rgb:234,216,160;
}

.rank-c9{
  --rank-color:#3d78ff;
  --rank-rgb:61,120,255;
}

.rank-c10{
  --rank-color:#d766ff;
  --rank-rgb:215,102,255;
}

/* ================= PROGRESS ================= */

.recognition-progress{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:24px;
  color:rgba(255,255,255,.5);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
}

.recognition-progress-line{
  position:relative;
  flex:1;
  height:2px;
  overflow:hidden;
  background:rgba(255,255,255,.1);
}

.recognition-progress-line span{
  position:absolute;
  inset:0 auto 0 0;
  width:10%;
  background:linear-gradient(90deg,#20d8ed,var(--yellow));
  transition:width .45s ease;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1199px){
  .qualified-card{
    flex-basis:calc((100% - 44px) / 3);
  }

  .qualified-visual{
    height:345px;
  }
}

@media(max-width:991px){
  .qualified-card{
    flex-basis:calc((100% - 22px) / 2);
  }

  .recognition-title{
    align-items:flex-start;
  }

  .qualified-visual{
    height:360px;
  }
}

@media(max-width:767px){
  .recognition-stage{
    padding:38px 0 50px;
  }

  .recognition-title{
    gap:18px;
    margin-bottom:22px;
  }

  .recognition-title h2{
    font-size:20px;
    letter-spacing:.08em;
  }

  .recognition-title p{
    font-size:10px;
  }

  .recognition-nav{
    width:42px;
    height:42px;
  }

  .rank-badge{
    top:16px;
    left:16px;
    height:38px;
    padding:5px 9px;
  }

  .qualified-level{
    left:18px;
    right:18px;
    bottom:18px;
  }

  .qualified-level strong{
    font-size:21px;
  }
}

@media(max-width:560px){
  .recognition-title{
    display:block;
  }

  .recognition-controls{
    margin-top:18px;
  }

  .qualified-card{
    flex-basis:100%;
  }

  .qualified-visual{
    height:390px;
  }

  .qualified-info{
    padding:17px 18px;
  }
}

@media(max-width:390px){
  .qualified-visual{
    height:350px;
  }

  .qualified-info{
    align-items:flex-start;
    flex-direction:column;
  }

  .qualified-status{
    align-self:flex-start;
  }
}
/* ================= EVENTS PAGE ================= */

.events-page-banner,
.events-list-section,
.events-page-banner *,
.events-list-section *{
  font-family:"Outfit",sans-serif;
}

/* ================= BANNER ================= */

.events-page-banner{
  position:relative;
  min-height:480px;
  padding:150px 0 90px;
  overflow:hidden;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.events-banner-bg{
  position:absolute;
  inset:0;
  background:url("../images/events-banner.png") center / cover no-repeat;
  opacity:.42;
}

.events-banner-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 69% 46%,rgba(217,239,0,.09),transparent 31%),
    linear-gradient(
      90deg,
      rgba(1,7,12,.98) 0%,
      rgba(1,9,13,.9) 45%,
      rgba(1,9,13,.65) 72%,
      rgba(1,7,12,.92) 100%
    ),
    linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,4,8,.22));
}

.events-banner-content{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) 470px;
  gap:60px;
  align-items:center;
}

.events-banner-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
  color:var(--yellow);
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
}

.events-banner-kicker i{
  font-size:18px;
}

.events-banner-copy h1{
  max-width:760px;
  margin:0;
  font-size:clamp(48px,6vw,82px);
  line-height:.95;
  font-weight:800;
  letter-spacing:-.045em;
}

.events-banner-copy h1 span{
  display:block;
  margin-top:10px;
  color:transparent;
  -webkit-text-stroke:1px var(--yellow);
}

.events-banner-copy > p{
  max-width:660px;
  margin:25px 0 0;
  color:rgba(255,255,255,.65);
  font-size:17px;
  line-height:1.65;
}

.events-banner-stats{
  display:flex;
  align-items:center;
  gap:36px;
  margin-top:34px;
}

.events-banner-stats div{
  position:relative;
  padding-right:36px;
}

.events-banner-stats div:not(:last-child)::after{
  content:"";
  position:absolute;
  top:5px;
  right:0;
  width:1px;
  height:40px;
  background:rgba(255,255,255,.12);
}

.events-banner-stats strong{
  display:block;
  color:#fff;
  font-size:28px;
  line-height:1;
  font-weight:700;
}

.events-banner-stats span{
  display:block;
  margin-top:7px;
  color:rgba(255,255,255,.4);
  font-size:10px;
  letter-spacing:.17em;
}

/* ================= ANIMATED MAP ================= */
/*================ MAP =================*/

.events-banner-map{
  position:relative;
  width:470px;
  height:340px;
  margin-left:auto;
  isolation:isolate;
}

.map-grid{
  position:absolute;
  inset:0;
  border-radius:50%;
  opacity:.12;
  background:
    repeating-radial-gradient(circle,
      rgba(255,255,255,.07) 0 1px,
      transparent 1px 28px),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.04) 0 1px,
      transparent 1px 34px),
    repeating-linear-gradient(
      rgba(255,255,255,.04) 0 1px,
      transparent 1px 34px);
  mask:radial-gradient(circle,#000 62%,transparent 100%);
}

.map-rings{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  border:1px solid rgba(217,239,0,.18);
  transform:translate(-50%,-50%);
}

.ring-3{
  width:320px;
  height:320px;
  border-color:rgba(255,255,255,.08);
  animation:ringRotateReverse 22s linear infinite;
}

.map-lines{
  position:absolute;
  inset:0;
}

.line{
  position:absolute;
  left:50%;
  top:50%;
  height:1px;
  transform-origin:left center;
  background:
  linear-gradient(
    90deg,
    rgba(217,239,0,.8),
    rgba(217,239,0,.08),
    transparent);
}

.line-1{
  width:145px;
  transform:rotate(-38deg);
}

.line-2{
  width:165px;
  transform:rotate(18deg);
}

.line-3{
  width:138px;
  transform:rotate(122deg);
}

.line-4{
  width:170px;
  transform:rotate(212deg);
}

.map-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:5;
}

.center-glow{
  position:absolute;
  inset:-45px;
  border-radius:50%;
  background:
  radial-gradient(circle,
  rgba(217,239,0,.22),
  transparent 72%);
  animation:centerGlow 3s ease-in-out infinite;
}

.center-circle{
    position:relative;
    width:125px;
    height:125px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at 35% 30%,rgba(217,239,0,.08),transparent 60%),
        linear-gradient(145deg,#071117,#02080c);
    border:1px solid rgba(217,239,0,.22);
    box-shadow:
        inset 0 0 30px rgba(255,255,255,.03),
        0 0 45px rgba(217,239,0,.18);
    overflow:hidden;
}

.center-circle i{
  color:var(--yellow);
  font-size:46px;
  animation:spinGlobe 14s linear infinite;
}

.center-label{
  margin-top:18px;
  text-align:center;
}

.center-label small{
  display:block;
  color:rgba(255,255,255,.45);
  font-size:10px;
  letter-spacing:.18em;
}

.center-label strong{
  display:block;
  margin-top:2px;
  color:#fff;
  font-size:24px;
  font-weight:700;
}

.map-node{
  position:absolute;
  display:flex;
  align-items:center;
  gap:12px;
}

.node-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:
  0 0 12px var(--yellow),
  0 0 30px rgba(217,239,0,.65);
  animation:nodePulse 2s ease infinite;
}

.node-card{
  min-width:105px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(8,15,18,.82);
  backdrop-filter:blur(14px);
  transition:.35s;
}

.node-card small{
  display:block;
  color:rgba(255,255,255,.42);
  font-size:9px;
  letter-spacing:.18em;
}

.node-card strong{
  display:block;
  margin-top:3px;
  font-size:16px;
  font-weight:600;
}

.map-node:hover .node-card{
  border-color:rgba(217,239,0,.35);
  transform:translateY(-4px);
  box-shadow:0 18px 30px rgba(0,0,0,.35);
}

.europe{
    left: 33px;
    top: 89px;
}

.asia{
  right:0;
  top:78px;
}

.america{
  left:5px;
  bottom:52px;
}

.asia .node-dot{
  animation-delay:.4s;
}

.america .node-dot{
  animation-delay:.8s;
}
.rotating-globe{
    width:92px;
    height:92px;
    object-fit:contain;
    filter:
        drop-shadow(0 0 18px rgba(217,239,0,.35));
    animation:globeRotate 26s linear infinite;
    user-select:none;
    pointer-events:none;
}

.center-circle::before{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:50%;
    border:1px solid rgba(217,239,0,.18);
    animation:ringRotate 14s linear infinite;
}

.center-circle::after{
    content:"";
    position:absolute;
    inset:-28px;
    border-radius:50%;
    border:1px dashed rgba(255,255,255,.10);
    animation:ringRotateReverse 22s linear infinite;
}

@keyframes globeRotate{

    from{
        transform:rotateY(0deg);
    }

    to{
        transform:rotateY(360deg);
    }

}
/*================ ANIMATION =================*/

@keyframes spinGlobe{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}

@keyframes centerGlow{
0%,100%{
transform:scale(.92);
opacity:.45;
}
50%{
transform:scale(1.1);
opacity:1;
}
}

@keyframes ringRotate{
from{
transform:translate(-50%,-50%) rotate(0deg);
}
to{
transform:translate(-50%,-50%) rotate(360deg);
}
}

@keyframes ringRotateReverse{
from{
transform:translate(-50%,-50%) rotate(360deg);
}
to{
transform:translate(-50%,-50%) rotate(0deg);
}
}

@keyframes ringPulse{
0%,100%{
opacity:.5;
transform:translate(-50%,-50%) scale(.96);
}
50%{
opacity:1;
transform:translate(-50%,-50%) scale(1.04);
}
}

@keyframes nodePulse{
0%,100%{
transform:scale(1);
}
50%{
transform:scale(1.5);
}
}

@media(max-width:991px){

.events-banner-map{
margin:40px auto 0;
width:360px;
height:280px;
}

.ring-3{
width:260px;
height:260px;
}

.ring-2{
width:195px;
height:195px;
}

.line{
display:none;
}

.node-card{
padding:10px 12px;
}

.center-circle{
width:90px;
height:90px;
}

.center-circle i{
font-size:38px;
}

}

@media(max-width:576px){

.events-banner-map{
width:100%;
height:250px;
}

.node-card{
display:none;
}

.ring-3{
width:210px;
height:210px;
}

.ring-2{
width:160px;
height:160px;
}

.ring-1{
width:105px;
height:105px;
}

}

/* ================= LIST ================= */

.events-list-section{
  position:relative;
  padding:80px 0 100px;
  color:#fff;
  background:
    radial-gradient(circle at 12% 15%,rgba(44,230,220,.04),transparent 28%),
    radial-gradient(circle at 88% 38%,rgba(217,239,0,.04),transparent 30%),
    rgba(1,6,10,.72);
}

.events-list-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:28px;
}

.events-list-kicker{
  display:block;
  margin-bottom:8px;
  color:var(--yellow);
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
}

.events-list-head h2{
  margin:0;
  font-size:clamp(32px,4vw,48px);
  font-weight:700;
  letter-spacing:-.03em;
}

.event-region-filters{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(12px);
}

.event-region-filter{
  height:38px;
  padding:0 18px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.48);
  font-family:"Outfit",sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:.11em;
  cursor:pointer;
  white-space:nowrap;
  transition:.3s ease;
}

.event-region-filter:hover{
  color:#fff;
}

.event-region-filter.active{
  color:#071014;
  background:var(--yellow);
}

.events-region-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:26px;
}

.region-summary-item{
  padding:15px 18px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
  opacity:.45;
  transition:.3s ease;
}

.region-summary-item.active{
  opacity:1;
  border-color:rgba(217,239,0,.2);
  background:rgba(217,239,0,.045);
}

.region-summary-item span{
  display:block;
  margin-bottom:4px;
  color:rgba(255,255,255,.42);
  font-size:9px;
  letter-spacing:.16em;
}

.region-summary-item strong{
  font-size:15px;
  font-weight:600;
}

.country-events-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.country-event-card{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),
    rgba(2,12,16,.82);
  box-shadow:0 24px 70px rgba(0,0,0,.32);
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    box-shadow .35s ease;
}

.country-event-card.hide-event{
  display:none;
}

.country-event-card.show-event{
  animation:eventCardIn .45s ease both;
}

.country-event-card:hover{
  transform:translateY(-9px);
  border-color:rgba(217,239,0,.28);
  box-shadow:
    0 32px 80px rgba(0,0,0,.45),
    0 0 30px rgba(217,239,0,.06);
}

@keyframes eventCardIn{
  from{
    opacity:0;
    transform:translateY(20px) scale(.98);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.country-event-media{
    position:relative;
    height:240px;
    overflow:hidden;
    background-size:cover;
    background-position:center;
}

.country-event-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:#000;
    opacity:0;
    transition:opacity .4s ease;
    pointer-events:none;
}

.country-event-card:hover .country-event-media::after{
    opacity:.15; /* fade */
}

.country-event-card:hover .country-event-media{
    background-size:110%;
    transition:background-size .55s ease;
}
/* Available (existing) */
.country-event-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

/* Opens Soon */
.country-event-btn.soon{
    color:#111;
    background:linear-gradient(135deg,#ffffff,#ececec,#d9d9d9);
    border:1px solid rgba(255,255,255,.8);
    box-shadow:
        0 10px 30px rgba(255,255,255,.18),
        inset 0 1px 0 rgba(255,255,255,.9);
    cursor:default;
    pointer-events:none;
}

.country-event-btn.soon i{
    font-size:15px;
}

.country-event-btn.soon::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,.9) 50%,
        transparent 80%
    );
    transform:translateX(-120%);
    animation:ticketShine 3s linear infinite;
    border-radius:inherit;
}

@keyframes ticketShine{
    to{
        transform:translateX(120%);
    }
}
.country-event-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.03),
      rgba(1,10,14,.12) 42%,
      rgba(1,10,14,.98)
    ),
    linear-gradient(120deg,rgba(0,10,14,.62),transparent 55%);
}

.country-event-number{
  position:absolute;
  top:18px;
  right:20px;
  color:rgba(255,255,255,.16);
  font-size:46px;
  font-weight:700;
  line-height:1;
}

.country-event-region{
  position:absolute;
  top:18px;
  left:18px;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--yellow);
  border:1px solid rgba(217,239,0,.25);
  background:rgba(0,0,0,.3);
  backdrop-filter:blur(10px);
  font-size:9px;
  font-weight:600;
  letter-spacing:.14em;
}

.country-event-media-copy{
  position:absolute;
  left:22px;
  right:22px;
  bottom:18px;
}

.country-event-media-copy > span{
  display:block;
  margin-bottom:6px;
  color:var(--yellow);
  font-size:10px;
  letter-spacing:.17em;
}

.country-event-media-copy h3{
  margin:0;
  font-size:38px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.025em;
}

.country-event-media-copy p{
  margin:7px 0 0;
  color:rgba(255,255,255,.62);
  font-size:14px;
}

.country-event-content{
  padding:22px;
}

.country-event-date{
  display:flex;
  align-items:center;
  gap:15px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.country-event-date > div{
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:17px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(217,239,0,.2);
  background:rgba(217,239,0,.05);
}

.country-event-date > div strong{
  color:var(--yellow);
  font-size:22px;
  line-height:1;
}

.country-event-date > div span{
  margin-top:4px;
  color:rgba(255,255,255,.5);
  font-size:9px;
  letter-spacing:.12em;
}

.country-event-date p{
  margin:0;
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
}

.country-event-date p small{
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.42);
  font-size:12px;
  font-weight:400;
}

.country-event-details{
  display:grid;
  gap:14px;
  padding:18px 0;
}

.country-event-details > div{
  display:flex;
  align-items:flex-start;
  gap:11px;
}

.country-event-details i{
  margin-top:2px;
  color:var(--yellow);
  font-size:17px;
}

.country-event-details span{
  color:rgba(255,255,255,.76);
  font-size:13px;
}

.country-event-details small{
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.38);
  font-size:11px;
}

.country-event-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
}

.country-event-price span{
  display:block;
  margin-bottom:2px;
  color:rgba(255,255,255,.38);
  font-size:9px;
  letter-spacing:.13em;
}

.country-event-price strong{
  color:#fff;
  font-size:25px;
  font-weight:700;
}

.country-event-btn{
     position: relative;
    overflow: hidden;
    height: 43px;
    padding: 0 22px;
    border-radius: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 29px;
    color: #071014;
    background: linear-gradient(135deg, var(--yellow), #b7ff4f);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .05em;
    transition: .35s ease;
}

.country-event-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.55),
    transparent
  );
  transform:translateX(-140%);
}

.country-event-btn:hover{
  color:#071014;
  transform:translateY(-2px);
  box-shadow:0 15px 35px rgba(217,239,0,.18);
}

.country-event-btn:hover::before{
  animation:eventButtonShine .75s linear;
}

.country-event-btn i{
  transition:.3s ease;
}

.country-event-btn:hover i{
  transform:translate(3px,-3px);
}

@keyframes eventButtonShine{
  to{
    transform:translateX(140%);
  }
}

.events-empty-state{
  display:none;
  padding:80px 20px;
  text-align:center;
  border-radius:26px;
  border:1px dashed rgba(255,255,255,.1);
}

.events-empty-state.active{
  display:block;
}

.events-empty-state i{
  color:var(--yellow);
  font-size:42px;
}

.events-empty-state h3{
  margin:16px 0 7px;
  font-size:24px;
}

.events-empty-state p{
  margin:0;
  color:rgba(255,255,255,.45);
}

/* ================= STATIC PAGINATION ================= */

.events-static-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:42px;
  padding:14px 18px;
}

.events-page-number{
  min-width:76px;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.38);
  font-family:"Outfit",sans-serif;
  font-size:10px;
  font-weight:400;
  letter-spacing:.14em;
  cursor:pointer;
  transition:
    color .3s ease,
    transform .3s ease;
}

.events-page-number span{
  display:block;
  margin-bottom:5px;
  color:rgba(255,255,255,.25);
  font-size:16px;
  font-weight:500;
  letter-spacing:.04em;
  transition:.3s ease;
}

.events-page-number:hover{
  color:#fff;
  transform:translateY(-2px);
}

.events-page-number.active{
  color:var(--yellow);
}

.events-page-number.active span{
  color:var(--yellow);
  text-shadow:0 0 16px rgba(217,239,0,.45);
}

.events-page-line{
  width:45px;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.2),
    transparent
  );
}

/* ================= RESPONSIVE ================= */

@media(max-width:1200px){
  .events-banner-content{
    grid-template-columns:1fr 380px;
  }

  .events-banner-map{
    width:370px;
  }

  .country-events-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:991px){
  .header-pass-btn{
    display:none;
  }

  .events-page-banner{
    min-height:auto;
    padding:130px 0 80px;
  }

  .events-banner-content{
    grid-template-columns:1fr;
  }

  .events-banner-map{
    width:min(100%,480px);
    margin:20px auto 0;
  }

  .events-list-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .event-region-filters{
    width:100%;
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:none;
  }

  .event-region-filters::-webkit-scrollbar{
    display:none;
  }

  .events-region-summary{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:700px){
  .country-events-grid{
    grid-template-columns:1fr;
  }

  .events-banner-stats{
    gap:20px;
  }

  .events-banner-stats div{
    padding-right:20px;
  }

  .country-event-media{
    height:260px;
  }

  .events-static-pagination{
    gap:7px;
    padding:14px 0;
  }

  .events-page-number{
    min-width:57px;
    font-size:8px;
  }

  .events-page-number span{
    font-size:14px;
  }

  .events-page-line{
    width:16px;
  }
}

@media(max-width:576px){
  .events-page-banner{
    padding:115px 0 70px;
  }

  .events-banner-copy h1{
    font-size:45px;
  }

  .events-banner-copy > p{
    font-size:15px;
  }

  .events-banner-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
  }

  .events-banner-stats div{
    padding:0;
  }

  .events-banner-stats div:not(:last-child)::after{
    display:none;
  }

  .events-banner-map{
    height:250px;
    transform:scale(.88);
  }

  .events-list-section{
    padding:60px 0 75px;
  }

  .events-region-summary{
    grid-template-columns:1fr 1fr;
  }

  .country-event-media{
    height:220px;
  }

  .country-event-content{
    padding:18px;
  }

  .country-event-footer{
    align-items:flex-end;
  }

  .country-event-btn{
    padding:0 14px;
  }
}

@media(prefers-reduced-motion:reduce){
  .map-center,
  .map-center::before,
  .map-center i,
  .map-orbit,
  .region-point span{
    animation:none;
  }
}