:root{
  --darker-bg:#0a0a0f;
  --dark-bg:#0e0e17;
  --card-bg:rgba(15,15,25,0.6);
  --border-color:rgba(255,255,255,0.08);
  --text-primary:#e8e8ee;
  --text-secondary:#a8a8b3;
  --primary-cyan:#46e6ff;
  --primary-pink:#ff4dd2;
  --primary-purple:#8a6dff
}
body{background:var(--darker-bg);color:var(--text-primary)}
nav{background:rgba(10,10,15,0.85)}
.section-title{color:#d7f9ff}
.footer{background:rgba(0,0,0,0.65)}
.page-hero{padding:140px 2rem 60px;text-align:center;min-height:40vh;display:flex;align-items:center;justify-content:center}
.page-hero h1{font-size:clamp(2.4rem,6vw,4rem);letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(135deg,var(--primary-cyan),var(--primary-pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 18px rgba(70,230,255,.25))}
.nav-links a.active{color:var(--primary-cyan);text-shadow:0 0 12px var(--primary-cyan)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}
.card{background:var(--card-bg);border:1px solid var(--border-color);padding:2rem}
.card h3{margin-bottom:.5rem;color:var(--text-primary)}
.card p{color:var(--text-secondary)}
.event-meta{display:flex;gap:1rem;flex-wrap:wrap;margin:.6rem 0 1rem}
.event-meta span{font-size:.9rem;color:var(--text-secondary);border:1px solid var(--border-color);padding:.25rem .6rem}
.btn{display:inline-block;padding:1rem 1.6rem;text-decoration:none;text-transform:uppercase;font-weight:800;letter-spacing:.12em;border:2px solid var(--primary-cyan)}
.btn:hover{background:var(--primary-cyan);color:#0a0a0f}
.section{padding:90px 2rem}
.container{max-width:1200px;margin:0 auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border-color);padding:1rem;text-align:left}
.input,textarea{width:100%;padding:1rem;background:rgba(255,255,255,0.02);border:1px solid var(--border-color);color:var(--text-primary)}
.input:focus,textarea:focus{outline:none;border-color:var(--primary-cyan)}
.notice{margin:1rem 0;padding:1rem;border:1px dashed var(--border-color);color:var(--text-secondary)}
.mobile-menu{position:fixed;top:0;right:0;width:80%;max-width:360px;height:100vh;background:#0b1412;transform:translateX(100%);transition:transform .3s ease;z-index:1001;overflow:auto}
.mobile-menu.is-open{transform:translateX(0)}
.mobile-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:1000}
.mobile-menu-overlay.is-open{opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}
/* --- Better mobile hamburger + panel (paste at end of file) --- */

/* Button container */
.mobile-menu-button{
  -webkit-tap-highlight-color: transparent;
  width:52px;height:52px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease
}
@media (hover:hover){
  .mobile-menu-button:hover{box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07)}
}
.mobile-menu-button:active{transform:scale(.96)}

/* Hamburger icon */
.hamburger{position:relative;width:26px;height:18px}
.hamburger span{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#00ffc6,#69ffe3 60%,#ffffff);
  box-shadow:0 0 10px rgba(105,255,227,.45);
  transform-origin:50% 50%;
  transition:transform .28s ease,opacity .18s ease,top .28s ease,background .3s ease
}
.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2){top:8px}
.hamburger span:nth-child(3){top:16px}

/* Morph to "X" when open */
body.menu-open .hamburger span:nth-child(1){top:8px;transform:rotate(45deg)}
body.menu-open .hamburger span:nth-child(2){opacity:0;transform:translateX(-8px)}
body.menu-open .hamburger span:nth-child(3){top:8px;transform:rotate(-45deg)}

/* Mobile panel polish */
.mobile-menu{
  position:fixed;top:0;right:0;height:100dvh;width:86%;max-width:420px;z-index:1001;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);
  background:rgba(4,14,12,.82);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-left:1px solid rgba(105,255,227,.16);
  box-shadow:-24px 0 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  padding-bottom:calc(env(safe-area-inset-bottom) + 16px);
  overflow:auto
}
.mobile-menu.is-open{transform:translateX(0)}

.mobile-menu-header{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 14px) 16px 14px 18px;background:inherit;
  border-bottom:1px solid rgba(255,255,255,.06)
}
.mobile-menu-logo{font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.mobile-menu-close{
  width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .2s ease
}
.mobile-menu-close:active{transform:scale(.94)}

.mobile-menu-cta{display:flex;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-menu-cta .cyber-button{flex:1;text-align:center}

.mobile-menu-nav{padding:10px 10px 18px}
.mobile-menu-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mobile-menu-nav a{
  display:block;width:100%;padding:14px 16px;border-radius:12px;
  font-size:clamp(16px,4vw,18px);font-weight:600;letter-spacing:.02em;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06)
}
@media (hover:hover){
  .mobile-menu-nav a:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
}

.mobile-menu-overlay{
  position:fixed;inset:0;z-index:1000;opacity:0;pointer-events:none;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:opacity .32s ease
}
.mobile-menu-overlay.is-open{opacity:1;pointer-events:auto}

/* Prevent body scroll when menu is open */
body.menu-open{overflow:hidden}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .mobile-menu,.mobile-menu-overlay,.hamburger span{transition:none}
}


nav{position:relative;z-index:100}
.mobile-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .32s ease;z-index:99998}
.mobile-menu-overlay.is-open{opacity:1;pointer-events:auto}
.mobile-menu{position:fixed;top:0;right:0;height:100dvh;width:86%;max-width:420px;background:rgba(4,14,12,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);z-index:99999;overflow:auto}
.mobile-menu.is-open{transform:translateX(0)}
.mobile-menu-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:inherit;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-menu-close{width:44px;height:44px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.06);display:inline-flex;align-items:center;justify-content:center}
.mobile-menu-cta{display:flex;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-menu-cta .cyber-button{flex:1;text-align:center}
.mobile-menu-nav{padding:10px 10px 18px}
.mobile-menu-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mobile-menu-nav a{display:block;width:100%;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-weight:600}
@media (max-width:980px){
  .nav-links{display:none}
  .nav-bottom{display:flex;gap:10px;margin-left:auto}
  .nav-bottom .cyber-button{display:inline-flex}
}