*{margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif}
body{background: linear-gradient(180deg, #0b1d3a, #1e5aa8); color: white; scroll-behavior: smooth}
/* HEADER */
header{position: fixed; top: 0; width: 100%; padding: 15px 40px; display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); z-index: 1000}
@media (max-width: 768px){
    header{padding: 10px 20px}
}
/* бургер */
.burger{display: none; flex-direction: column; gap: 5px; cursor: pointer; z-index: 1001}
.burger span{width: 25px; height: 3px; background: white; border-radius: 5px; transition: 0.3s}
/* мобільне меню */
.mobile-menu{position: fixed; inset: 0; background: rgba(5, 10, 20, 0.98); backdrop-filter: blur(25px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 35px; transform: translateY(-100%); opacity: 0; pointer-events: none; transition: 0.5s ease; z-index: 999}
.mobile-menu.active{opacity: 1; pointer-events: auto}
.mobile-menu::before{content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(255,0,150,0.2), transparent 70%)}
/* пункти */
.mobile-menu a{font-size: 28px; font-weight: 600; letter-spacing: 2px; color: white; text-decoration: none; position: relative; transition: 0.3s; opacity: 0; transform: translateY(20px)}
.mobile-menu.active a{animation: menuItem 0.6s forwards}
.mobile-menu.active a:nth-child(1){animation-delay: 0.1s}
.mobile-menu.active a:nth-child(2){animation-delay: 0.2s}
.mobile-menu.active a:nth-child(3){animation-delay: 0.3s}
.mobile-menu.active a:nth-child(4){animation-delay: 0.4s}
.mobile-menu.active a:nth-child(5){animation-delay: 0.5s}
.mobile-menu.active a:nth-child(6){animation-delay: 0.6s}
@keyframes menuItem{
    to{opacity: 1; transform: translateY(0)}
}
.no-scroll{overflow: hidden}
/* ефект underline */
.mobile-menu a::after{content: ""; position: absolute; left: 0; bottom: -5px; width: 0%; height: 2px; background: linear-gradient(90deg, #ff4fd8, #00c8ff); transition: 0.3s}
.mobile-menu a:hover::after{width: 100%}
.mobile-menu a:hover{transform: scale(1.1)}
/* активний стан */
.burger.active span:nth-child(1){transform: rotate(45deg) translateY(8px)}
.burger.active span:nth-child(2){opacity: 0}
.burger.active span:nth-child(3){transform: rotate(-45deg) translateY(-8px)}
/* активний стан */
.mobile-menu.active{transform: translateY(0)}
/* бургер завжди видно */
.burger{display: flex; flex-direction: column; gap: 5px; cursor: pointer; z-index: 1001}
/* трохи більший для десктопу */
.burger span{width: 30px; height: 3px; background: white; border-radius: 5px; transition: 0.3s}
/* лого */
.logo{height: 50px}
@media (max-width: 768px){
    .logo{display: none}
}
/* SOCIAL */
.socials a{margin-left: 15px; color: white; text-decoration: none}
.socials{display: flex; gap: 15px}
.social{width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4facfe, #00f2fe); transition: 0.3s; animation: pulseGlow 2.5s infinite}
.social svg{width: 22px; height: 22px; fill: white}
.social:hover{transform: translateY(-5px) scale(1.1); box-shadow: 0 0 20px rgba(255,255,255,0.5)}
/* Instagram */
.ig{background: radial-gradient(circle at 30% 30%, #feda75, #d62976, #962fbf); animation: pulseIG 2.5s infinite}
@keyframes pulseIG{
    0%{box-shadow: 0 0 0px #d62976}
    50%{box-shadow: 0 0 20px #d62976}
    100%{box-shadow: 0 0 0px #d62976}
}
/* Telegram */
.tg{background: #229ED9; animation: pulseTG 2.5s infinite; animation-delay: 0.5s}
@keyframes pulseTG{
    0%{box-shadow: 0 0 0px #229ED9}
    50%{box-shadow: 0 0 20px #229ED9}
    100%{box-shadow: 0 0 0px #229ED9}
}
/* TikTok */
.tt{background: #000; animation: pulseTT 2.5s infinite; animation-delay: 1s}
@keyframes pulseTT{
    0%{box-shadow: 0 0 0px #00f2ea}
    50%{box-shadow: 0 0 20px #00f2ea}
    100%{box-shadow: 0 0 0px #00f2ea}
}
.tg svg{width: 35px; height: 35px; transform: translate(-1px, 3px)}
.tt svg{width: 45px; height: 45px}
/* базова анімація */
@keyframes pulseGlow{
    0%{box-shadow: 0 0 0px rgba(255,255,255,0.4)}
    50%{box-shadow: 0 0 20px rgba(255,255,255,0.8)}
    100%{box-shadow: 0 0 0px rgba(255,255,255,0.4)}
}

/* HERO */
.hero{height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 20px; position: relative; overflow: hidden}
.hero::before{content: ""; position: absolute; top: -20%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,0,150,0.5), transparent 70%); filter: blur(80px); animation: moveGradient 8s infinite alternate ease-in-out}
.hero::after{content: ""; position: absolute; bottom: -20%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(0,200,255,0.5), transparent 70%); filter: blur(80px); animation: moveGradient 10s infinite alternate ease-in-out}
.hero-btn{display: inline-block; margin-bottom: 30px; padding: 16px 40px; font-size: 16px; font-weight: 600; letter-spacing: 1px; text-decoration: none; color: white; border-radius: 50px; background: linear-gradient(90deg, #ff4fd8, #00c8ff); position: relative; overflow: hidden; transition: 0.3s; animation: pulseBtn 2s infinite; overflow: hidden}
.hero-btn::before{content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #ff4fd8, #00c8ff); filter: blur(20px); opacity: 0.6; z-index: -1; border-radius: inherit}
.hero-btn:hover{transform: translateY(-3px) scale(1.05); box-shadow: 0 0 30px rgba(255,255,255,0.4)}
@keyframes pulseBtn{
    0%{transform: scale(1)}
    50%{transform: scale(1.05)}
    100%{transform: scale(1)}
}
/* анімація градієнта */
@keyframes moveGradient{
    0%{transform: translate(0, 0)}
    100%{transform: translate(50px, -50px)}
}
.hero-content{position: relative; z-index: 2; animation: fadeUp 1s ease}
.hero-logo{width: 500px; max-width: 95%; margin-bottom: 30px}
.hero-nav{display: flex; gap: 15px; justify-content: center; flex-wrap: wrap}
.hero-nav span{padding: 10px 20px; border-radius: 30px; font-size: 14px; letter-spacing: 1px; font-weight: 500; color: white; cursor: default; border: 1px solid transparent; background: linear-gradient(#0b1d3a, #0b1d3a) padding-box, linear-gradient(90deg, #ff4fd8, #00c8ff) border-box; box-shadow: 0 0 15px rgba(255,255,255,0.15); transition: 0.3s}
.hero-nav span{animation: softGlow 3s infinite alternate}
@keyframes softGlow{
    from{box-shadow: 0 0 10px rgba(255,255,255,0.1)}
    to{box-shadow: 0 0 20px rgba(255,255,255,0.25)}
}
.hero-nav span:nth-child(1){animation-delay: 0.2s}
.hero-nav span:nth-child(2){animation-delay: 0.3s}
.hero-nav span:nth-child(3){animation-delay: 0.4s}
.hero-nav span:nth-child(4){animation-delay: 0.5s}
.hero-nav span:nth-child(5){animation-delay: 0.6s}
@keyframes navFade{
    to{opacity: 1; transform: translateY(0)}
}

/* ABOUT */
.section{padding: 100px 40px}
.about{display: flex; gap: 60px; align-items: center; padding: 120px 40px}
.about img{width: 50%; border-radius: 25px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); transition: 0.5s}
.about img:hover{transform: scale(1.03)}
.about-text{width: 50%; max-width: 600px}
.about-text h2{font-size: 42px; margin-bottom: 25px; font-weight: 800; letter-spacing: 1px; background: linear-gradient(90deg, #ffffff, #8fd3ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent}
.about-text p{font-size: 18px; line-height: 1.7; margin-bottom: 15px; color: rgba(255,255,255,0.85); transition: 0.3s}
.about-text p:last-child{font-size: 20px; font-weight: 600; color: #ffffff; text-shadow: 0 0 10px rgba(255,255,255,0.5)}
.about-text p:hover{color: #ffffff; transform: translateX(5px)}
@media (max-width: 768px){
    .about{flex-direction: column; text-align: center}
    .about img, .about-text{width: 100%}
    .about-text h2{font-size: 32px}
    .about-text p{font-size: 16px}
}

/* POSTERS */
.section-title{text-align: center; font-size: 48px; font-weight: 900; letter-spacing: 3px; margin-bottom: 50px; position: relative; background: linear-gradient(90deg, #ffffff, #8fd3ff, #ff4fd8); -webkit-background-clip: text; -webkit-text-fill-color: transparent}
.section-title::after{position: absolute; left: 50%; transform: translateX(-50%); top: 0; z-index: -1; color: rgba(255,255,255,0.1); filter: blur(10px)}
.section-title::before{content: ""; position: absolute; width: 120px; height: 2px; background: linear-gradient(90deg, transparent, #ff4fd8, transparent); bottom: -10px; left: 50%; transform: translateX(-50%)}
@media (max-width: 768px){
    .section-title{font-size: 32px; letter-spacing: 2px}
}
.posters{display: flex; gap: 20px; margin-top: 40px}
.poster{flex: 1; text-align: center}
.poster img{width: 100%; border-radius: 20px; transition: 0.3s}
.poster img:hover{transform: scale(1.05)}
.btn{display: inline-block; margin-top: 15px; padding: 12px 25px; background: #ff4fd8; border-radius: 30px; text-decoration: none; color: white; transition: 0.3s}
.btn:hover{box-shadow: 0 0 20px #ff4fd8}
@media (max-width: 768px) {
  .posters{flex-direction: column}
}
.btn{position: relative; display: inline-block}
.btn .price{position: absolute; top: -10px; right: -10px; background: linear-gradient(90deg, #ff4fd8, #00c8ff); color: white; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 20px; box-shadow: 0 0 10px rgba(255,255,255,0.3)}

.afisha-bottom{text-align: center; margin-top: 40px}
.btn-big{display: inline-block; padding: 20px 50px; font-size: 18px; font-weight: 700; letter-spacing: 1px; color: white; text-decoration: none; border-radius: 60px; background: linear-gradient(90deg, #ff4fd8, #00c8ff); position: relative; overflow: hidden; transition: 0.3s}
.btn-big::before{content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #ff4fd8, #00c8ff); filter: blur(25px); opacity: 0.7; z-index: -1}
.btn-big:hover{transform: translateY(-5px) scale(1.05); box-shadow: 0 0 40px rgba(255,255,255,0.4)}
@keyframes pulseBig{
    0%{transform: scale(1)}
    50%{transform: scale(1.03)}
    100%{transform: scale(1)}
}
.btn-big{animation: pulseBig 2.5s infinite}
.btn-big{position: relative; display: inline-block; padding: 22px 60px; font-size: 20px; font-weight: 700; letter-spacing: 1px; color: white; text-decoration: none; border-radius: 60px; background: linear-gradient(90deg, #ff4fd8, #00c8ff); overflow: visible}
.big-price{display: block; font-size: 16px; font-weight: 500; margin-top: 5px; opacity: 0.9}
.super-badge{position: absolute; top: -12px; right: -15px; background: linear-gradient(90deg, #ff7a00, #ff0000); color: white; font-size: 11px;  font-weight: 700; padding: 6px 12px; border-radius: 20px; box-shadow: 0 0 15px rgba(255,100,0,0.6)}
.super-badge{animation: badgePulse 1.5s infinite}
@keyframes badgePulse{
    0%{transform: scale(1)}
    50%{transform: scale(1.1)}
    100%{transform: scale(1)}
}

.ticket-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:25px; margin-top:45px}
.ticket-card{display:flex; flex-direction:column;
 justify-content:center; align-items:center; padding:35px 20px; border-radius:25px; text-decoration:none; color:#fff; background:rgba(255,255,255,.08); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.15); transition:.35s}
.ticket-card:hover{transform:translateY(-8px) scale(1.03); background:linear-gradient(135deg, #ff4fd8, #00c8ff); box-shadow: 0 0 30px rgba(255,255,255,.2)}
.ticket-title{font-size:24px; font-weight:700; margin-bottom:8px}
.ticket-subtitle{opacity:.8; margin-bottom:15px}
.ticket-price{
    font-size:34px;
    font-weight:900;
}
.gift-ticket{

    margin-top:35px;

    text-align:center;

    font-size:26px;

    font-weight:700;

    color:#fff;

}

.gift-ticket span{

    display:block;

    margin-top:10px;

    font-size:34px;

    background:linear-gradient(
        90deg,
        #ffe600,
        #ff7a00
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:giftPulse 1.5s infinite;

}

@keyframes giftPulse{

    50%{

        transform:scale(1.05);

    }

}
@media(max-width:768px){

    .ticket-grid{

        grid-template-columns:1fr;

    }

    .gift-ticket{

        font-size:20px;

    }

    .gift-ticket span{

        font-size:26px;

    }

}








/* PARTNERS */
.partners{padding: 120px 0; overflow: hidden}
.partner-link{display:block; position:relative; overflow:hidden; border-radius:20px; transition:.4s}
.partner-link img{position:relative; z-index:1;  height:120px; width:auto; margin:0 60px; border-radius:20px; transition:.4s}
.partner-link:active{transform:translateY(-5px) scale(1.15)}
.1partner-link:hover{transform:translateY(-10px)}
.partner-link:hover img{transform:scale(1.08); filter:brightness(1.15); box-shadow: 0 0 25px rgba(255,79,216,.5), 0 0 50px rgba(0,200,255,.4)}
.partner-link::before{content:""; position:absolute; inset:0; border-radius:20px; padding:2px; z-index:2; background:linear-gradient(90deg, #ff4fd8, #00c8ff, #7cff00, #ff4fd8); background-size:300% 300%; opacity:0; transition:.4s; animation:partnerGlow 4s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.partner-link:hover::before{opacity: 1}
@keyframes partnerGlow{
    0%{background-position:0% 50%}
    100%{background-position:100% 50%}
}
@media (max-width:768px){
    .partner-link img{height:80px; margin:0 25px}
}



.partnersSwiper{
    margin-top:40px;
    overflow:visible;

}

.partnersSwiper .swiper-wrapper{
    align-items:center;
    transition-timing-function:linear !important;
}

.partnersSwiper .swiper-slide{
    width:auto !important;
    display:flex;
    justify-content:center;
    align-items:center;
}

.partner-link{
    display:block;
}

.partner-link img{
    height:120px;
    width:auto;
    border-radius:20px;
}

@media(max-width:768px){

    .partner-link img{

        height:80px;

    }

}


.partnersSwiper{
    margin-top: 40px;
    overflow: hidden; /* ОБОВ'ЯЗКОВО */
    padding: 20px 0;
}

.partnersSwiper .swiper-wrapper{
    align-items: center;
}

.partnersSwiper .swiper-slide{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}



/* Results */
.results{padding: 120px 40px}
.results-content{display: flex; gap: 60px; align-items: flex-start}
.results-text{width: 50%; max-width: 600px}
.results-text p{font-size: 18px; line-height: 1.7; margin-bottom: 15px; color: rgba(255,255,255,0.85)}
.results-text ul{margin: 15px 0 25px; padding-left: 20px}
.results-text li{margin-bottom: 10px; font-size: 18px}
.results-text .final{font-size: 22px; font-weight: 700; color: white; text-shadow: 0 0 10px rgba(255,255,255,0.5)}
.results-gallery{width: 50%; display: grid; grid-template-columns: 1fr 1fr; gap: 15px}
.results-gallery img{width: 100%; border-radius: 15px; transition: 0.4s; object-fit: cover}
.results-gallery img:hover{transform: scale(1.05)}
@media (max-width: 768px){
    .results-content{flex-direction: column}
    .results-text, .results-gallery{width: 100%}
    .results-gallery{grid-template-columns: 1fr}
}
.results-gallery img{height: 250px; object-fit: cover}

/* rules */
.rules-box{max-width: 800px; margin: 0 auto; text-align: center}
.rules-preview p{font-size: 18px; color: rgba(255,255,255,0.8)}
/* кнопка */
.rules-toggle{margin-top: 20px; padding: 12px 30px; border-radius: 30px; border: none; cursor: pointer; font-size: 14px; background: linear-gradient(90deg, #ff4fd8, #00c8ff); color: white; transition: 0.3s}
.rules-toggle:hover{transform: scale(1.05); box-shadow: 0 0 20px rgba(255,255,255,0.4)}
.rules-content{max-height: 0; overflow: hidden; transition: 0.5s ease; text-align: left; margin-top: 20px}
.rules-content.active{max-height: 2000px}
.rules-content p{margin-bottom: 10px; line-height: 1.6}
.rules-content ul{margin-bottom: 15px; padding-left: 20px}

/* contacts */
.contacts{padding: 120px 20px; text-align: center}
.contacts-wrapper{display: flex; justify-content: center; gap: 40px; margin-top: 50px; flex-wrap: wrap}
.contact-card{width: 250px; padding: 30px 20px; border-radius: 20px; background: rgba(255,255,255,0.05); backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.1); transition: 0.4s; position: relative; overflow: hidden}
.contact-card::before{content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent); opacity: 0; transition: 0.4s}
.contact-card:hover{transform: translateY(-10px) scale(1.03); box-shadow: 0 0 30px rgba(255,255,255,0.2)}
.contact-card:hover::before{opacity: 1}
.contact-icon{font-size: 40px; margin-bottom: 15px}
.contact-card h3{margin-bottom: 10px; font-size: 18px; letter-spacing: 1px}
.contact-card a{color: white; text-decoration: none; font-size: 16px; opacity: 0.8; transition: 0.3s}
.contact-card a:hover{opacity: 1; text-shadow: 0 0 10px rgba(255,255,255,0.6)}
@media (max-width: 768px){
    .contacts-wrapper{flex-direction: column; align-items: center}
}
.contact-card:nth-child(3):hover{background: linear-gradient(135deg, #feda75, #d62976, #962fbf); color: white}

/* FOOTER */
footer{display: flex; justify-content: space-between; padding: 40px; background: #000}
@keyframes scroll{
    from{transform: translateX(0)}
    to{transform: translateX(-50%)}
}
@keyframes fadeIn{
    from{opacity: 0}
    to{opacity: 1}
}

/* 404 PAGE */
.error-page{min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 30% 30%, #1a2a6c, #0b1d3a 70%); color: white; padding: 20px}
.error-content{max-width: 600px}
.error-code{font-size: 120px; font-weight: 900; margin-bottom: 20px; background: linear-gradient(90deg, #ff4fd8, #00c8ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: glow404 2s infinite alternate}
.error-page h2{font-size: 28px; margin-bottom: 15px}
.error-page p{opacity: 0.8; margin-bottom: 30px; line-height: 1.6}
.btn-error{display: inline-block; padding: 15px 40px; font-weight: 600; letter-spacing: 1px; text-decoration: none; color: white; border-radius: 50px; background: linear-gradient(90deg, #ff4fd8, #00c8ff); position: relative; overflow: hidden; transition: 0.3s}
.btn-error:hover{transform: translateY(-5px) scale(1.05); box-shadow: 0 0 30px rgba(255,255,255,0.3)}
@keyframes glow404{
    from{text-shadow: 0 0 10px rgba(255,255,255,0.2)}
    to{text-shadow: 0 0 30px rgba(255,255,255,0.6)}
}
.error-page::before{content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 40%, rgba(255,0,150,0.2), transparent 60%), radial-gradient(circle at 30% 70%, rgba(0,200,255,0.2), transparent 60%)}

.btn.disabled{
    background:#555;
    color:#ddd;
    cursor:default;
    pointer-events:none;
    opacity:.8;
    box-shadow:none;
}