:root{
  --bg1:#0a0f1e; --bg2:#0b1e2d; --bg3:#052033;
  --accent:#11b7ff; --accent2:#00e0ff;
  --text:#e8f0ff; --muted:#a8b2c7;
  --glass: rgba(255,255,255,0.06);
  --glass-brd: rgba(255,255,255,0.14);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:'Inter',system-ui,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background: radial-gradient(1200px 700px at 10% 10%, #0b2c4a 0%, transparent 60%),
              radial-gradient(900px 500px at 90% 10%, #08253b 0%, transparent 60%),
              linear-gradient(135deg, var(--bg1), var(--bg2) 50%, var(--bg3));
  background-size: 400% 400%;
  animation: bgShift 18s ease-in-out infinite alternate;
  overflow-x:hidden;
}
@keyframes bgShift{0%{background-position: 0% 0%, 100% 0%, 0% 0%}100%{background-position: 100% 100%, 0% 100%, 100% 100%}}
.container{max-width:1200px;margin:0 auto;padding:0 18px}
.site-header{position:sticky; top:0; z-index:50; background:linear-gradient(180deg, rgba(5,10,18,.9), rgba(5,10,18,.6)); backdrop-filter: blur(10px); border-bottom:1px solid var(--glass-brd)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.brand{display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.5px}
.brand img{width:38px; height:38px; border-radius:10px}
.nav-toggle{display:none; background:none; border:1px solid var(--glass-brd); color:var(--text); padding:6px 10px; border-radius:8px}
.nav-list{display:flex; list-style:none; gap:18px; margin:0; padding:0}
.nav-list a{color:var(--text); text-decoration:none; padding:10px 12px; display:block; border-radius:10px}
.nav-list a:hover{background:var(--glass); border:1px solid var(--glass-brd)}
.has-sub{position:relative}
.sub-menu{position:absolute; top:45px; left:0; display:none; flex-direction:column; min-width:220px; background:rgba(5,10,18,.95); border:1px solid var(--glass-brd); border-radius:12px; padding:8px}
.has-sub:hover .sub-menu{display:flex}
/* keep open when moving into submenu */
.has-sub:hover > .sub-menu, .sub-menu:hover{ display:flex }

.hero{padding:48px 0 0}
.carousel{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--glass-brd); box-shadow: 0 20px 50px rgba(0,0,0,.45)}
.carousel img{width:100%; height:520px; object-fit:cover; display:block}
/* FIXED carousel layout */
.carousel .track{ display:flex; transition:transform .6s ease; width:100% }
.carousel .slide{ width:100%; flex-shrink:0; display:block }
.carousel .dots{position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:8px}
.carousel .dot{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer}
.carousel .dot.active{background:var(--accent2)}
.carousel .nav{ position:absolute; top:50%; transform:translateY(-50%); width:100%; display:flex; justify-content:space-between; pointer-events:none }
.carousel .btn{ background:rgba(0,0,0,.45); border:1px solid var(--glass-brd); color:white; padding:10px 14px; border-radius:50%; cursor:pointer; margin:0 10px; pointer-events:auto }

.section{padding:40px 0}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:rgba(255,255,255,.03); border:1px solid var(--glass-brd); border-radius:16px; padding:18px}
.card h3{margin:0 0 8px}
.muted{color:var(--muted)}
.role-section{margin:30px 0; padding:18px; border:1px solid var(--glass-brd); border-radius:18px; background:rgba(255,255,255,.03)}
.members{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.member{background:rgba(255,255,255,.04); border:1px solid var(--glass-brd); border-radius:16px; padding:16px; text-align:center}
.member img{width:96px; height:96px; border-radius:50%; object-fit:cover; border:2px solid var(--glass-brd)}
.badge{display:inline-block; padding:4px 10px; border:1px solid var(--glass-brd); border-radius:999px; margin-bottom:8px; color:var(--accent2)}
.embed-card{padding:18px; border:1px solid var(--glass-brd); border-radius:16px; background:rgba(255,255,255,.03)}
.accordion{border:1px solid var(--glass-brd); border-radius:16px; overflow:hidden}
.accordion details{background:rgba(255,255,255,.02); border-top:1px solid var(--glass-brd)}
.accordion details:first-child{border-top:none}
.accordion summary{cursor:pointer; padding:16px; font-weight:600}
.accordion .content{padding:0 16px 16px}
.site-footer{margin-top:60px; border-top:1px solid var(--glass-brd); background:rgba(5,10,18,.7); backdrop-filter: blur(12px)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:20px 0}
.footer-links a{color:var(--muted); text-decoration:none; margin-left:14px}
.footer-links a:hover{color:var(--text)}
@media (max-width: 900px){
  .cards{grid-template-columns:1fr}
  .members{grid-template-columns:repeat(2,1fr)}
  .nav-toggle{display:inline-block}
  .nav-list{position:absolute; top:64px; right:18px; background:rgba(5,10,18,.98); flex-direction:column; padding:10px; border:1px solid var(--glass-brd); border-radius:14px; display:none}
  .nav.open .nav-list{display:flex}
  .has-sub:hover .sub-menu{position:static}
}