.nav__dropdown {
  position: relative;
}

/* Dropdown panel */
.header .nav .nav__dropdown .dropdown__menu {
  position: absolute;
  top: 100%;              /* ✅ no gap */
  left: 50%;
  transform: translate(-50%, 10px);

  min-width: 220px;
  padding: 10px 0;
  margin-top: 8px;        /* visual spacing, NOT a hover gap */

  background: rgba(20, 20, 20, 0.92);
  border: 1px solid rgba(122, 122, 122, 0.35);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10000;

  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

/* ✅ Invisible bridge so you can move mouse from link to dropdown */
.header .nav .nav__dropdown .dropdown__menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;     /* bridge height */
  height: 10px;
}

/* Show dropdown ONLY when hovering the Events <a>, and keep open when hovering dropdown */
.header .nav .nav__dropdown .dropdown__toggle:hover + .dropdown__menu,
.header .nav .nav__dropdown .dropdown__menu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Dropdown links match header menu items */
.header .nav .nav__dropdown .dropdown__menu a {
  display: block;
  padding: 12px 18px;
  font-size: var(--txt-base);
  font-weight: 500;
  color: var(--clr-white);
  text-decoration: none;
  white-space: nowrap;
}

.header .nav .nav__dropdown .dropdown__menu a:hover {
  color: var(--clr-lblack);
  background: transparent;
}

:root{
  --bg:#0b0d10;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --border:rgba(255,255,255,.14);
  --shadow:0 18px 55px rgba(0,0,0,.55);
  --accent:#7c5cff;
  --accent2:#00d4ff;
  --success:#2ee59d;

  --radius:18px;
  --radius2:26px;
  --max:1180px;

  --h1:clamp(2rem,4.2vw,4rem);
  --h2:clamp(1.55rem,2.4vw,2.2rem);
  --p:clamp(.98rem,1.2vw,1.05rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(124,92,255,.25), transparent 55%),
    radial-gradient(900px 700px at 90% 10%, rgba(0,212,255,.18), transparent 50%),
    radial-gradient(1000px 900px at 50% 120%, rgba(46,229,157,.12), transparent 45%),
    var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 clamp(14px, 2vw, 22px);
}

/* Header */
.topbar{
  position:sticky;top:0;z-index:9999;
  backdrop-filter:blur(16px);
  background:rgba(11,13,16,.65);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  gap:12px;
}
.brand{display:flex;align-items:center;gap:12px;min-width:200px}
.logo{
  width:42px;height:42px;border-radius:12px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 55%),
             linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 12px 30px rgba(124,92,255,.24);
  border:1px solid rgba(255,255,255,.14);
}
.brandText{display:flex;flex-direction:column;line-height:1.1}
.brandText strong{font-size:.98rem;letter-spacing:.4px}
.brandText small{font-size:.82rem;color:var(--muted)}

.navcta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:#fff;font-weight:650;font-size:.95rem;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border .15s ease;
}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.09)}
.btn.primary{
  border-color:rgba(124,92,255,.45);
  background:linear-gradient(135deg, rgba(124,92,255,.92), rgba(0,212,255,.50));
  box-shadow:0 18px 50px rgba(124,92,255,.22);
}
.btn.ghost{background:transparent}
.btn.full{width:100%}

/* Sections */
.section{padding:clamp(28px, 5vw, 46px) 0}
.sectionHead{display:flex;gap:14px;align-items:flex-end;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap}
.sectionHead h2{margin:0;font-size:var(--h2);letter-spacing:-.3px}
.sectionHead p{margin:0;color:var(--muted);max-width:80ch;font-size:var(--p);line-height:1.55}

.card{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  box-shadow:0 18px 55px rgba(0,0,0,.22);
  overflow:hidden;
}
.cardPad{padding:18px}
.muted{color:var(--muted);line-height:1.55}
.bullets{margin:12px 0 0;padding-left:18px;color:var(--muted);line-height:1.55}
.bullets li{margin:7px 0}

/* HERO */
.hero{padding:clamp(24px, 5vw, 44px) 0 18px}
.heroGrid{display:grid;grid-template-columns:1.12fr .88fr;gap:18px;align-items:stretch}

.heroCard{
  border-radius:var(--radius2);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.heroCard::before{
  content:"";position:absolute;inset:-2px;
  background:
    radial-gradient(650px 280px at 30% 10%, rgba(124,92,255,.35), transparent 60%),
    radial-gradient(520px 300px at 90% 20%, rgba(0,212,255,.22), transparent 60%),
    radial-gradient(560px 350px at 50% 110%, rgba(46,229,157,.18), transparent 60%);
  pointer-events:none;
}
.heroContent{position:relative;padding:clamp(16px, 2.2vw, 28px)}
.pillRow{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.pill{
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  font-size:.9rem;color:rgba(255,255,255,.88);
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(46,229,157,.12)}
h1{font-size:var(--h1);line-height:1.06;margin:0 0 12px;letter-spacing:-.5px}
.lead{font-size:var(--p);color:var(--muted);line-height:1.55;margin:0 0 18px;max-width:62ch}
.ctaRow{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

.statsRow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.stat{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:16px;padding:14px;
}
.stat strong{display:block;font-size:1.2rem}
.stat span{color:var(--muted);font-size:.92rem}

/* HERO Media Collage */
.heroMedia{padding:16px}
.heroMediaGrid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.mediaTile{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
}
.mediaTile img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio: 4/3;
}
.mediaTile.tall img{aspect-ratio: 3/4}
.mediaTile.wide{grid-column:1 / -1}
.mediaTile.wide img{aspect-ratio: 16/9}

.heroMediaCaption{margin-top:12px}
.heroMediaCaption h3{margin:0 0 6px}
.heroMediaCaption p{margin:0;color:var(--muted);line-height:1.5}

/* General grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* Image rows */
.imgRow{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin-top:12px;
}
.imgRow.two{grid-template-columns:1fr 1fr}
.imgRow img{
  width:100%;
  aspect-ratio: 4/3;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
}

/* Experience image strip */
.imageStrip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  margin: 12px 0 0;
}
.imageStrip img{
  width:100%;
  aspect-ratio: 4/3;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.tile{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:16px;
  padding:14px;
  text-align:center;
}
.mt{margin-top:18px}

/* Venue gallery */
.venueGrid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:12px;
}
.venueTile{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
}
.venueTile img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio: 4/3;
}
.venueTile.big{grid-column:1 / 8}
.venueTile.big img{aspect-ratio: 16/10}
.venueTile:nth-child(2){grid-column:8 / 13}
.venueTile:nth-child(3){grid-column:8 / 13}
.venueTile.wide{grid-column:1 / 8}
.venueTile.wide img{aspect-ratio: 16/9}

/* Sponsorship tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tier{
  padding:18px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
}
.tier.popular{
  border-color:rgba(124,92,255,.45);
  box-shadow:0 24px 70px rgba(124,92,255,.14);
}
.tierTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.tier h3{margin:0;font-size:1.15rem}
.tag{
  display:inline-flex;
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  font-size:.85rem;
  white-space:nowrap;
}
.tier ul{margin:12px 0 0;padding-left:18px;color:var(--muted);line-height:1.5}
.tier li{margin:7px 0}

/* Sponsor strip */
.sponsorStrip{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:18px;
  padding:14px;
  margin-bottom:14px;
}
.sponsorLabel{display:block;color:var(--muted);font-size:.92rem;margin-bottom:10px}
.sponsorLogos{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
}
.sponsorLogos img{
  height:28px;
  opacity:.9;
  filter:grayscale(1);
}

/* Forms */
form{display:grid;gap:12px}
.formGrid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{font-size:.9rem;color:rgba(255,255,255,.85);display:block;margin-bottom:6px;font-weight:650}
input,select,textarea{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(12,14,18,.65);
  color:#fff;
  outline:none;
}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color:rgba(124,92,255,.55);
  box-shadow:0 0 0 4px rgba(124,92,255,.15);
}
.formActions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:6px}
.mini{font-size:.9rem;color:var(--muted)}
.tinyNote{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:16px;
  padding:12px;
  color:var(--muted);
  font-size:.92rem;
}

/* Contact */
.contactGrid{display:grid;gap:12px;margin-top:12px}
.contactItem{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:16px;
  padding:12px;
}
.contactLabel{display:block;color:var(--muted);font-size:.9rem;margin-bottom:4px}
.contactValue{font-weight:700}
.singleImg{
  margin-top:12px;
  width:100%;
  aspect-ratio: 16/9;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
}

/* Footer */
.footer{padding:22px 0 10px;border-top:1px solid rgba(255,255,255,.08);margin-top:18px}
.footerRow{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.small{color:var(--muted);font-size:.92rem}

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

/* Tablets */
@media (max-width: 980px){
  .heroGrid{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:1fr}
  .imageStrip{grid-template-columns:repeat(2,1fr)}
  .imgRow{grid-template-columns:repeat(2,1fr)}
  .imgRow.two{grid-template-columns:1fr 1fr}
  .venueGrid{grid-template-columns:repeat(6,1fr)}
  .venueTile.big{grid-column:1/7}
  .venueTile:nth-child(2){grid-column:1/4}
  .venueTile:nth-child(3){grid-column:4/7}
  .venueTile.wide{grid-column:1/7}
}

/* Mobile */
@media (max-width: 640px){
  .navcta{gap:8px}
  .btn{width:100%}
  .heroMedia{padding:14px}
  .heroMediaGrid{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .statsRow{grid-template-columns:1fr}
  .formGrid2{grid-template-columns:1fr}
  .imageStrip{grid-template-columns:1fr}
  .imgRow{grid-template-columns:1fr}
  .imgRow.two{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
}