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

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: Arial, Helvetica, sans-serif;
    background: #040406;
    color: #ffffff;
    overflow-x: hidden;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 10% 10%, rgba(0, 255, 255, 0.18), transparent 30%),
      radial-gradient(circle at 90% 20%, rgba(255, 77, 166, 0.18), transparent 32%),
      radial-gradient(circle at 50% 95%, rgba(123, 60, 255, 0.2), transparent 34%),
      #040406;
    z-index: -2;
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.45;
    z-index: -1;
  }

  .page {
    width: 92%;
    max-width: 1320px;
    margin: auto;
    padding: 30px 0 90px;
  }

  .back-link {
    color: #7df9ff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    display: inline-block;
    margin-bottom: 28px;
    letter-spacing: 1px;
  }

  .hero {
    min-height: 88vh;
    border-radius: 36px;
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 420px;
    align-items: center;
    gap: 40px;
    padding: 60px;
    border: 1px solid rgba(255,255,255,0.16);
    background:
      linear-gradient(135deg, rgba(0,0,0,0.65), rgba(8,8,18,0.92)),
      url("assets/event-cover.jpg") center/cover no-repeat;
    box-shadow: 0 40px 140px rgba(0,0,0,0.7);
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 25% 35%, rgba(125,249,255,0.22), transparent 35%),
      radial-gradient(circle at 80% 35%, rgba(255,77,166,0.2), transparent 30%);
    pointer-events: none;
  }

  .hero-content {
    position: relative;
    z-index: 2;
  }

  .kicker {
    display: inline-flex;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(125,249,255,0.35);
    color: #7df9ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 25px;
  }

  h1 {
    font-size: clamp(58px, 9vw, 130px);
    line-height: 0.85;
    letter-spacing: -7px;
    text-transform: uppercase;
    margin-bottom: 26px;
  }

  .gradient-text {
    background: linear-gradient(90deg, #ffffff, #7df9ff, #ff4da6, #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero-subtitle {
    max-width: 650px;
    color: #e9eefc;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 32px;
  }

  .hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }

  .btn {
    padding: 15px 24px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    transition: 0.25s ease;
  }

  .btn-primary {
    background: #ffffff;
    color: #050505;
  }

  .btn-secondary {
    color: #ffffff;
    background: rgba(255, 0, 0, 0.08);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(14px);
  }
.hero-reel{
position:relative;
z-index:2;
border-radius:34px;
overflow:hidden;
background:#000;

border:3px solid rgba(9, 145, 207, 0.815);

transition:.4s ease;
}

.hero-reel::before{
content:"";
position:absolute;
inset:-3px;
border-radius:36px;

background:linear-gradient(
  135deg,
  #00f5ff,
  #8b5cf6,
  #ff3cac,
  #00f5ff
);

z-index:-1;

filter:blur(18px);

opacity:.45;

transition:.4s ease;
}

.hero-reel:hover::before{
opacity:1;

filter:blur(28px);
}

.hero-reel:hover{
transform:translateY(-8px);

box-shadow:
0 0 25px rgba(0,245,255,.5),
0 0 60px rgba(0,245,255,.4),
0 0 120px rgba(27, 27, 29, 0.35);
}
  .btn:hover {
    transform: translateY(-4px);
  }

  
  .hero-reel video {
    width: 100%;
    height: 620px;
    object-fit: contain;
    display: block;
    background: #000;
  }

  .hero-badge {
    position: absolute;
    right: 30px;
    bottom: 28px;
    z-index: 4;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(18px);
    border-radius: 22px;
    padding: 18px 22px;
  }

  .hero-badge strong {
    display: block;
    color: #7df9ff;
    font-size: 34px;
    line-height: 1;
  }

  .hero-badge span {
    color: #cbd5e1;
    font-size: 13px;
  }

  section {
    margin-top: 90px;
  }

  .section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
    margin-bottom: 35px;
  }

  .section-head span {
    color: #7df9ff;
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 900;
  }

  .section-head h2 {
    font-size: clamp(42px, 6vw, 76px);
    line-height: 0.92;
    letter-spacing: -4px;
    text-transform: uppercase;
    margin-top: 10px;
  }

  .section-head p {
    max-width: 430px;
    color: #aeb8cc;
    font-size: 16px;
    line-height: 1.6;
  }

  .story-strip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 22px;
  }

  .story-card {
    min-height: 260px;
    border-radius: 30px;
    padding: 28px;
    background:
      radial-gradient(circle at top, rgba(125,249,255,0.15), transparent 45%),
      rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: 0.25s ease;
  }

  .story-card:hover {
    transform: translateY(-8px);
    border-color: rgba(125,249,255,0.45);
  }

  .story-card:nth-child(2) {
    background:
      radial-gradient(circle at top, rgba(255,77,166,0.18), transparent 45%),
      rgba(255,255,255,0.06);
  }

  .story-card:nth-child(3) {
    background:
      radial-gradient(circle at top, rgba(123,60,255,0.22), transparent 45%),
      rgba(255,255,255,0.06);
  }

  .story-card h3 {
    font-size: 28px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .story-card p {
    color: #b7c1d8;
    font-size: 14px;
    line-height: 1.5;
  }

  .quote {
    text-align: center;
    padding: 55px 20px;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }

  .quote h2 {
    font-size: clamp(42px, 7vw, 96px);
    line-height: 0.9;
    letter-spacing: -5px;
    text-transform: uppercase;
    max-width: 1050px;
    margin: auto;
  }

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

  .moment-card{
position:relative;

border-radius:30px;
overflow:hidden;

background:#0b0b12;

border:1px solid rgb(4, 166, 230);

transition:.4s ease;
}
.moment-card::before{
content:"";

position:absolute;

inset:-3px;

border-radius:32px;

background:linear-gradient(
  135deg,
  #00f5ff,
  #8b5cf6,
  #ff3cac,
  #00f5ff
);

z-index:-1;

opacity:.35;

filter:blur(16px);

transition:.4s ease;
}

  .moment-card:nth-child(2),
  .moment-card:nth-child(5),
  .moment-card:nth-child(8) {
    transform: none;
  }

  .moment-card:hover {
    transform: translateY(-10px) rotate(-1deg);
    border-color: rgba(125,249,255,0.55);
    box-shadow: 0 25px 80px rgba(125,249,255,0.14);
  }

  .moment-card:nth-child(2):hover,
  .moment-card:nth-child(5):hover,
  .moment-card:nth-child(8):hover {
    transform: translateY(20px) rotate(1deg);
  }

  .moment-card video {
    width: 100%;
    height: 460px;
    object-fit: cover;
    background: #000;
    display: block;
  }

  .moment-info {
    padding: 18px;
  }

  .moment-info h3 {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
  }
.image-card{
padding:0;
overflow:hidden;
min-height:400px;
position:relative;
}

.image-card::before{
content:"";
position:absolute;
inset:-3px;

border-radius:32px;

background:linear-gradient(
  135deg,
  #00f5ff,
  #8b5cf6,
  #ff3cac,
  #00f5ff
);

filter:blur(18px);

opacity:.35;

z-index:-1;

transition:.4s ease;
}

.image-card:hover::before{
opacity:1;
filter:blur(28px);
}

.image-card img{
width:100%;
height:100%;
object-fit:cover;
display:block;

transition:.5s ease;
}

.image-card:hover img{
transform:scale(1.08);
}
  .moment-info p {
    color: #aeb8cc;
    font-size: 13px;
    margin-top: 4px;
  }

  .impact {
    margin-top: 120px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }

  .impact-card {
    min-height: 180px;
    border-radius: 30px;
    padding: 25px;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035));
    border: 1px solid rgba(255,255,255,0.12);
  }

  .impact-card strong {
    font-size: 58px;
    display: block;
    line-height: 1;
    margin-bottom: 12px;
  }

  .impact-card span {
    color: #aeb8cc;
    font-weight: 800;
  }

  .cta {
    border-radius: 38px;
    padding: 85px 30px;
    text-align: center;
    background:
      radial-gradient(circle at center, rgba(255,77,166,0.2), transparent 45%),
      radial-gradient(circle at 70% 20%, rgba(125,249,255,0.2), transparent 34%),
      #08080d;
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 40px 130px rgba(0,0,0,0.55);
  }

  .cta h2 {
    font-size: clamp(46px, 7vw, 100px);
    line-height: 0.9;
    letter-spacing: -5px;
    text-transform: uppercase;
    margin-bottom: 24px;
  }

  .cta p {
    max-width: 680px;
    margin: 0 auto 32px;
    color: #cbd5e1;
    font-size: 17px;
    line-height: 1.6;
  }
   .moment-card img{
        width:100%;
        height:460px;
        object-fit:cover;
        display:block;
        transition:.5s ease;
      }

      .moment-card:hover img{
        transform:scale(1.05);
      }
          @media (max-width: 1080px) {
    .hero {
      grid-template-columns: 1fr;
    }

    .hero-reel {
      max-width: 420px;
      margin: auto;
    }

    .section-head {
      display: block;
    }

    .section-head p {
      margin-top: 16px;
    }

    .story-strip,
    .moments-grid {
      grid-template-columns: repeat(2, 1fr);
    }

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

  @media (max-width: 680px) {
    .page {
      width: 92%;
    }

    .hero {
      padding: 45px 22px;
      min-height: auto;
    }

    h1 {
      letter-spacing: -3px;
    }

    .hero-subtitle {
      font-size: 16px;
    }

    .hero-reel video {
      height: auto;
      aspect-ratio: 9 / 16;
    }

    .hero-badge {
      position: relative;
      right: auto;
      bottom: auto;
      margin-top: 20px;
    }

    .story-strip,
    .moments-grid,
    .impact {
      grid-template-columns: 1fr;
    }

    .moment-card:nth-child(2),
    .moment-card:nth-child(5),
    .moment-card:nth-child(8) {
      transform: none;
    }

    .moment-card video {
      height: auto;
      aspect-ratio: 9 / 16;
    }

    .quote {
      padding: 45px 8px;
    }
  }





.hero-reel img{
width:100%;
height:620px;
object-fit:cover;
display:block;
border-radius:34px;
transition:.4s ease;
}

.hero-reel:hover img{
transform:scale(1.03);
}