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

body{
font-family:'Montserrat',sans-serif;
background:#0d1b2a;
color:white;
overflow-x:hidden;
}

#stars{
position:fixed;
inset:0;
z-index:-1;
}

nav{
position:fixed;
top:20px;
left:40px;
right:40px;

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

padding:15px 25px;

background:rgba(15,25,40,.6);
backdrop-filter:blur(12px);

border-radius:15px;

z-index:100;
}

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

.nav-logo{
width:40px;
height:40px;
}
.nav-title {
  font-size: 1.2rem;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  color: #8ea9db;
}

.back-link{
text-decoration:none;
color:#cdd9ff;
font-weight:600;
}

.hero{
padding-top:180px;
text-align:center;
}

.event-badge{
display:inline-block;

padding:8px 20px;

border:1px solid rgba(255,255,255,.2);

border-radius:50px;

margin-bottom:20px;
}

.hero h1{
font-family:'Cinzel',serif;

font-size:4rem;

background:linear-gradient(
90deg,
#f9e79f,
#8ea9db,
#d4af37
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{
font-size:1.2rem;
margin-top:10px;
color:#cdd9ff;
}

.poster-section{
  display:flex;
  justify-content:center;
  margin:50px auto;
}

.poster-section img{
  width:420px;
  max-width:90vw;
  border-radius:20px;

  box-shadow:
  0 20px 60px rgba(0,0,0,.45);
}

.details-grid{
max-width:1200px;

margin:auto;

padding:20px;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:25px;
}

.detail-card{
background:
rgba(255,255,255,.05);

backdrop-filter:blur(10px);

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

border-radius:20px;

padding:30px;

text-align:center;

transition:.4s;
}

.detail-card:hover{
transform:translateY(-8px);

border-color:#d4af37;
}

.detail-card i{
font-size:2rem;

margin-bottom:15px;

color:#f9e79f;
}

.content-card{
max-width:1100px;

margin:40px auto;

padding:40px;

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

backdrop-filter:blur(12px);

border-radius:25px;

border:
1px solid rgba(255,255,255,.08);
}

.content-card h2{
font-family:'Cinzel',serif;

margin-bottom:20px;

color:#f9e79f;
}

.content-card p,
.content-card li{
line-height:1.9;
color:#d8e0ff;
}

.content-card ol{
padding-left:25px;
}

.criteria-grid{
display:grid;

grid-template-columns:
repeat(auto-fit,minmax(200px,1fr));

gap:20px;

margin-top:25px;
}

.criteria-grid div{
padding:20px;

border-radius:15px;

text-align:center;

background:
rgba(142,169,219,.1);

border:
1px solid rgba(142,169,219,.3);
}

.coordinators{
display:flex;
flex-wrap:wrap;
gap:20px;
}

.coordinator{
flex:1;
min-width:250px;

padding:25px;

border-radius:15px;

background:
rgba(255,255,255,.05);
}

.cta{
padding:80px 20px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;
}

.register-btn,
.secondary-btn{

text-decoration:none;

padding:14px 28px;

border-radius:50px;

font-weight:700;

transition:.3s;
}

.register-btn{
background:#d4af37;
color:#0d1b2a;
}

.register-btn:hover{
transform:translateY(-4px);
}

.secondary-btn{
border:1px solid #8ea9db;
color:#cdd9ff;
}

@media(max-width:768px){

.hero h1{
font-size:2.5rem;
}

nav{
left:15px;
right:15px;
}

.content-card{
padding:25px;
}
nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  .nav-left{
    flex:1;
  }

  .back-link{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    font-size:0.9rem;
  }


}

/* ==========================================
   PREMIUM IGNITE THE INFINITE BACKGROUND
========================================== */

body{
  background:#0d1b2a;
  overflow-x:hidden;
}

/* ==========================
   AURORA BLOBS
========================== */

.aurora-bg{
  position:fixed;
  inset:0;
  z-index:-4;
  overflow:hidden;
  pointer-events:none;
}

.aurora-bg span{
  position:absolute;
  border-radius:50%;
  filter:blur(140px);
  opacity:.22;
}

.aurora-bg span:nth-child(1){
  width:700px;
  height:700px;
  background:#8ea9db;
  top:-200px;
  left:-150px;
  animation: auroraOne 20s ease-in-out infinite;
}

.aurora-bg span:nth-child(2){
  width:800px;
  height:800px;
  background:#d4af37;
  bottom:-300px;
  right:-200px;
  animation: auroraTwo 24s ease-in-out infinite;
}

.aurora-bg span:nth-child(3){
  width:600px;
  height:600px;
  background:#6079b7;
  top:40%;
  left:45%;
  animation: auroraThree 28s ease-in-out infinite;
}

@keyframes auroraOne{
  0%,100%{
    transform:translate(0,0) scale(1);
  }
  50%{
    transform:translate(180px,100px) scale(1.3);
  }
}

@keyframes auroraTwo{
  0%,100%{
    transform:translate(0,0) scale(1);
  }
  50%{
    transform:translate(-200px,-120px) scale(1.25);
  }
}

@keyframes auroraThree{
  0%,100%{
    transform:translate(0,0);
  }
  50%{
    transform:translate(-150px,120px);
  }
}

/* ==========================
   PARTICLE FIELD
========================== */

.particle-layer{
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  opacity:.18;

  background:
    radial-gradient(circle,#d4af37 1px,transparent 1px),
    radial-gradient(circle,#8ea9db 1px,transparent 1px);

  background-size:120px 120px;
  animation: particlesMove 60s linear infinite;
}

@keyframes particlesMove{
  from{
    transform:translateY(0);
  }
  to{
    transform:translateY(-600px);
  }
}

/* ==========================
   COSMIC ENERGY FIELD
========================== */

.energy-lines{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
}

.energy-lines span{
  position:absolute;
  width:1px;
  height:500px;

  background:linear-gradient(
      transparent,
      rgba(212,175,55,.2),
      rgba(142,169,219,.3),
      transparent
  );

  filter:blur(1px);
  transform:rotate(35deg);
}

.energy-lines span:nth-child(1){
  left:10%;
  animation: drift1 18s infinite linear;
}

.energy-lines span:nth-child(2){
  left:30%;
  animation: drift2 24s infinite linear;
}

.energy-lines span:nth-child(3){
  left:55%;
  animation: drift1 20s infinite linear;
}

.energy-lines span:nth-child(4){
  left:80%;
  animation: drift2 28s infinite linear;
}

@keyframes drift1{
  from{
    transform:translateY(120vh) rotate(35deg);
  }
  to{
    transform:translateY(-120vh) rotate(35deg);
  }
}

@keyframes drift2{
  from{
    transform:translateY(-120vh) rotate(35deg);
  }
  to{
    transform:translateY(120vh) rotate(35deg);
  }
}
#waveCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-5;
  pointer-events:none;
  opacity:0.9;
}

body{
  background:#08111f;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-4;

  background:
  radial-gradient(circle at 20% 20%,
  rgba(212,175,55,.12),
  transparent 35%),

  radial-gradient(circle at 80% 70%,
  rgba(142,169,219,.15),
  transparent 40%);

  filter:blur(80px);
}