:root{
  --bg: #08090C;
  --surface: #0f1114;
  --cy: #00E5FF;
  --violet: #7A2DFF;
  --muted: #A9A9A9;
  --white: #F2F5F7;
  --radius: 12px;
  --gap: 14px;
  --glass: rgba(255,255,255,0.04);
  --glow-cy: 0 8px 30px rgba(0,229,255,0.12);
  --glow-vi: 0 8px 30px rgba(122,45,255,0.12);
  font-synthesis: none;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  background: linear-gradient(180deg, var(--bg) 0%, #0b0c10 100%);
  color: var(--white);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* Utilities */
.section{ padding: 18px 16px; }
.section-title{ font-weight:700; margin:6px 0 10px; font-size:18px; font-family: Montserrat, sans-serif; }
.muted{ color: var(--muted); font-size:14px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:10px; font-weight:600; text-decoration:none;
  color:var(--white); font-size:14px; border:1px solid transparent;
}
.btn-primary{
  background: linear-gradient(90deg, var(--cy), var(--violet));
  box-shadow: var(--glow-cy);
  color: #061017;
}
.btn-ghost{
  background: transparent; border:1px solid rgba(255,255,255,0.06);
  color: var(--white);
}

/* Focus states for accessibility */
a:focus, button:focus, .input:focus {
  outline: 3px solid rgba(0,229,255,0.12);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- Header / Navbar ---------- */
/* (solid black navbar; mobile hamburger controlled with aria attrs) */
.navbar {
  width:100%; position:fixed; top:0; left:0; z-index:999;
  background:#000; padding:12px 20px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

/* brand */
.navbar .brand { display:flex; align-items:center; gap:10px; }
.navbar img.logo { width:42px; height:auto; }

/* desktop nav */
.navbar .nav-links { display:flex; gap:20px; }
.navbar .nav-links a {
  color:var(--white); font-size:15px; text-decoration:none; font-weight:500; letter-spacing:0.4px;
}

/* hamburger */
.menu-button {
  background: transparent; border: none; color: var(--white); font-size:26px; cursor:pointer;
  display: none; /* visible on mobile via media query below */
  width:44px; height:44px; align-items:center; justify-content:center; border-radius:10px;
  border:1px solid rgba(255,255,255,0.03); /* subtle affordance */
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:380px; border-bottom:1px solid rgba(255,255,255,0.02);
  overflow:hidden; display:flex; align-items:flex-end;
}
.hero-bg{
  position:absolute; inset:0;
  background-image: url('venue-hero.jpg');
  background-position:center; background-size:cover; filter:brightness(.45);
  transform: scale(1.05);
  will-change: transform;
}
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; display:block; }

.hero-inner{
  position:relative; z-index:4; padding:22px 16px; max-width:980px; margin:0 auto;
  color:var(--white); display:flex; flex-direction:column; gap:10px;
}
.hero-top{ display:flex; align-items:center; gap:12px; }
.hero-logo img{ width:56px; height:56px; border-radius:999px; box-shadow: 0 8px 30px rgba(0,229,255,0.10); }
.brand-name-hero{ font-family:Montserrat, sans-serif; font-weight:800; font-size:13px; }
.brand-sub-hero{ font-size:12px; color:var(--muted); }

.hero-title{
  font-family: Montserrat, sans-serif; font-size:30px; line-height:1; margin:0; color:var(--white);
}
.hero-title .glow{ color:var(--cy); text-shadow:0 10px 30px rgba(0,229,255,0.10), 0 2px 6px rgba(122,45,255,0.04); }

.hero-tag{ color:var(--muted); max-width:640px; margin-top:6px; font-size:14px; }

/* gradient sweep */
.gradient-sweep{
  position:absolute; left:-20%; top:0; width:140%; height:100%; z-index:3; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,229,255,0.06) 28%, rgba(122,45,255,0.05) 48%, rgba(0,0,0,0) 85%);
  transform:translateX(-30%); filter:blur(18px); opacity:0.9; animation: sweep 9s linear infinite;
}
@keyframes sweep{ 0%{transform:translateX(-30%)} 50%{transform:translateX(30%)} 100%{transform:translateX(-30%)} }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .gradient-sweep { animation: none; opacity: 0.6; }
  .hero-canvas { display:none; }
}

/* ---------- Cards / Slider / Gallery ---------- */
.cards{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; padding:8px 0; }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,0.02);
}
.neon-card{ position:relative; overflow:hidden; }
.neon-card.cyan::after, .neon-card.violet::after {
  content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none;
}
.neon-card.cyan::after { box-shadow:0 0 36px rgba(0,229,255,0.08) inset; }
.neon-card.violet::after{ box-shadow:0 0 36px rgba(122,45,255,0.06) inset; }

.card-head{ font-weight:700; margin-bottom:6px; font-family: Montserrat, sans-serif; }
.card-text{ color:var(--muted); font-size:14px; }
.card-meta{ margin-top:10px; color:var(--muted); font-size:13px; }
.card-btn{ display:inline-block; margin-top:12px; padding:8px 12px; border-radius:8px; background:rgba(255,255,255,0.02); color:var(--white); text-decoration:none; }

/* slider */
.slider{ display:flex; gap:12px; overflow:auto; padding-bottom:6px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.slide{
  min-width:220px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:12px; border-radius:10px; scroll-snap-align:start; border:1px solid rgba(255,255,255,0.02);
}
.slide-date{ font-weight:800; color:var(--cy); font-family: Montserrat; font-size:16px; }
.slide-title{ font-weight:700; margin-top:6px; }
.slide-meta{ color:var(--muted); font-size:13px; margin-top:6px; }
.slide-cta{ display:inline-block; margin-top:10px; padding:8px 12px; border-radius:8px; background:linear-gradient(90deg,var(--cy),var(--violet)); color:#061017; text-decoration:none; }

/* gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:8px; }
.gallery-item{ border:0; background:transparent; padding:0; border-radius:10px; overflow:hidden; }
.gallery-item img{
  width:100%; height:140px; object-fit:cover; border-radius:10px; display:block;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.gallery-item:hover img{ transform: scale(1.06); box-shadow: 0 24px 60px rgba(0,0,0,0.6); }

/* forms */
.about-section .muted{ max-width:680px; }
.booking-card{ padding:12px; }
.form-grid{ display:grid; gap:10px; }
.input{ padding:12px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:var(--white); }
.form-actions{ display:flex; gap:8px; align-items:center; }

/* footer */
.site-footer{ margin-top:22px; background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); padding:16px; border-top:1px solid rgba(255,255,255,0.02); }
.footer-inner{ display:flex; gap:18px; align-items:center; justify-content:space-between; }
.footer-col{ min-width:120px; }
.socials{ display:flex; gap:8px; }
.social{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; background:linear-gradient(90deg,var(--cy),var(--violet)); color:#061017; text-decoration:none; font-weight:700; }

/* lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,0.85); display:none; align-items:center; justify-content:center; z-index:120; padding:18px; }
.lightbox img{ max-width:100%; max-height:80vh; border-radius:10px; }
.lightbox-close{ position:fixed; top:18px; right:18px; background:transparent; border:0; color:var(--white); font-size:20px; }

/* ---------- Responsive ---------- */
@media (min-width:720px){
  .hero{ min-height:520px; }
  .hero-title{ font-size:58px; }
  .cards{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid{ grid-template-columns: repeat(4,1fr); }
  .hero-inner{ align-items:flex-start; padding-left:40px; }
  .menu-button{ display:none; }         /* hide hamburger on desktop */
  #mobileNav{ display:none !important; } /* ensure mobile nav hidden on desktop */
}

@media (max-width:719px){
  .cards{ grid-template-columns: 1fr; }
  .footer-inner{ flex-direction:column; gap:10px; align-items:flex-start; }

  /* hide desktop nav links on mobile (CSS-only fallback) */
  .navbar .nav-links { display: none; }

  /* show hamburger on mobile */
  .menu-button { display:inline-flex; }

  /* mobile nav panel — controlled by aria-hidden attribute from JS */
  #mobileNav{
    position: fixed; left:0; right:0; top:64px; z-index:995;
    background: linear-gradient(180deg, rgba(8,9,12,0.98), rgba(8,9,12,0.96));
    padding: 12px 16px; gap:12px; flex-direction:column; align-items:flex-start;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6); border-bottom: 1px solid rgba(255,255,255,0.03);
    display: flex;                  /* remain in flow for assistive tech */
    opacity: 0; transform: translateY(-8px);
    pointer-events: none;
    transition: transform 220ms ease, opacity 220ms ease;
  }

  /* when JS sets aria-hidden="false" the nav becomes visible (no inline style needed) */
  #mobileNav[aria-hidden="false"]{
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }

  #mobileNav a, #mobileNav .nav-cta {
    color: var(--white); text-decoration:none; width:100%; padding:10px 12px; border-radius:8px; display:inline-block;
  }
  #mobileNav .nav-cta { background: linear-gradient(90deg, var(--cy), var(--violet)); color:#061017; font-weight:700; }
}

/* ensure mobile nav respects reduced motion users */
@media (prefers-reduced-motion: reduce){
  #mobileNav, #mobileNav[aria-hidden="false"] { transition: none; transform: none; opacity: 1; pointer-events: auto; }
}