:root{
  --primary:#00f0ff;
  --accent:#ff00aa;
  --bg-dark:#0a0e17;
  --bg-darker:#05070f;
  --text:#e0f7ff;
  --gray:#a0c0d0;
  --glow:0 0 25px rgba(0,240,255,.6);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg-darker);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit}
#three-canvas{position:fixed;inset:0;z-index:-2;pointer-events:none}
nav{
  position:fixed;top:0;left:0;right:0;
  background:rgba(10,14,23,.75);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  z-index:1000;
  padding:1rem 6%;
  display:flex;justify-content:space-between;align-items:center;
  transition:all .35s ease;
}
nav.scrolled{padding:.75rem 6%;box-shadow:0 8px 35px rgba(0,240,255,.18)}
.logo{
  font-size:1.6rem;font-weight:900;letter-spacing:1px;text-decoration:none;
  background:linear-gradient(90deg,var(--primary),var(--accent),var(--primary));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav-links{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{
  text-decoration:none;font-weight:650;position:relative;opacity:.95;
  transition:.25s;
}
.nav-links a:hover{color:var(--primary);text-shadow:var(--glow)}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-7px;width:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  transition:width .35s cubic-bezier(.22,.61,.36,1)
}
.nav-links a:hover::after,..nav-links a.active::after{width:100%}

.container{max-width:1200px;margin:0 auto}
section{padding:7.5rem 6% 6rem;position:relative;z-index:2}
.hero{
  min-height:92vh;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.hero h1{
  font-size:clamp(2.6rem,6vw,4.6rem);
  margin-bottom:1rem;
  background:linear-gradient(90deg,var(--primary),var(--accent),#7d00ff,var(--primary));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:300% auto;animation:shine 8s linear infinite;
  text-shadow:var(--glow);
}
@keyframes shine{to{background-position:300% center}}
.hero p{font-size:clamp(1.05rem,2.2vw,1.55rem);color:var(--gray);max-width:900px;margin:0 auto 2rem}
.btn{
  display:inline-flex;gap:.6rem;align-items:center;justify-content:center;
  padding:1rem 2.2rem;border-radius:999px;
  border:2px solid var(--primary);
  color:var(--primary);text-decoration:none;font-weight:800;
  transition:all .35s cubic-bezier(.23,1,.32,1);
  position:relative;overflow:hidden;
}
.btn:hover{background:var(--primary);color:#000;transform:translateY(-6px);box-shadow:var(--glow),0 25px 60px rgba(0,240,255,.35)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
.card{
  background:rgba(20,30,50,.35);
  border:1px solid rgba(0,240,255,.2);
  border-radius:18px;
  padding:1.7rem;
  backdrop-filter:blur(12px);
  transition:all .35s ease;
}
.card:hover{transform:translateY(-10px);border-color:var(--primary);box-shadow:var(--glow),0 30px 70px rgba(0,240,255,.18)}
.card h3{margin:.6rem 0 .35rem;font-size:1.15rem;color:var(--primary)}
.card p{color:rgba(224,247,255,.92)}
h2{
  text-align:center;
  font-size:clamp(2rem,4vw,3.2rem);
  color:var(--primary);
  text-shadow:var(--glow);
  margin-bottom:2.2rem;
}
h2::after{
  content:"";display:block;margin:1rem auto 0;
  width:160px;height:4px;border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--primary),var(--accent),transparent);
}

.table-wrap{overflow:auto;border-radius:16px;border:1px solid rgba(0,240,255,.18);background:rgba(20,30,50,.25)}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{padding:.9rem 1rem;border-bottom:1px solid rgba(0,240,255,.16);text-align:left}
th{background:rgba(0,240,255,.08);color:var(--primary)}
tr:hover{background:rgba(0,240,255,.05)}
.small{font-size:.95rem;color:var(--gray)}

.video-grid iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.news-card img{width:100%;border-radius:14px;box-shadow:var(--glow)}
.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.25rem .65rem;border-radius:999px;
  border:1px solid rgba(0,240,255,.25);
  background:rgba(0,240,255,.06);
  color:var(--gray);font-size:.85rem;
}
footer{
  text-align:center;padding:3.5rem 6%;
  background:linear-gradient(to top,#000,var(--bg-darker));
  color:var(--gray);border-top:1px solid rgba(0,240,255,.12);
}
.page-hero{padding-top:6.5rem}
.canvas-wrap{
  width:min(980px,92vw);
  margin:1.5rem auto 0;
  border-radius:18px;
  border:1px solid rgba(0,240,255,.18);
  background:rgba(20,30,50,.25);
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.canvas-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 1.2rem;border-bottom:1px solid rgba(0,240,255,.12)
}
.canvas-head strong{color:var(--primary)}
.canvas-content{height:520px}
.canvas-content canvas{display:block;width:100%;height:100%}
@media (max-width:860px){
  .nav-links{gap:1rem}
}
.social-links{display:flex;gap:.9rem;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:1rem}
.social-links a{
  width:44px;height:44px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(0,240,255,.22);
  background:rgba(0,240,255,.06);
  color:var(--text);text-decoration:none;
  transition:all .25s ease;
}
.social-links a:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--glow);color:var(--primary)}
.source-box{
  margin-top:1rem;padding:1rem 1.1rem;border-radius:14px;
  border:1px dashed rgba(0,240,255,.22);
  background:rgba(0,0,0,.18);
}
.source-box strong{color:var(--primary)}
.embed{
  width:100%;height:520px;border:0;border-radius:14px;
  background:rgba(0,0,0,.22);
  box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.note{color:var(--gray);font-size:.92rem}

/* === Mobile Responsive Nav (added) === */
/* iOS safe-area support */
nav{
  padding-top: calc(1rem + env(safe-area-inset-top));
  padding-bottom: 1rem;
}

/* Hamburger button (injected by app.js) */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid rgba(0,240,255,.22);
  background:rgba(0,240,255,.06);
  color:var(--text);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}
.nav-toggle:active{transform:scale(.98)}
.nav-toggle span{font-size:1.35rem;line-height:1}

/* Mobile layout */
@media (max-width: 860px){
  nav{
    padding-left:4%;
    padding-right:4%;
  }
  .logo{font-size:1.25rem}
  .nav-toggle{display:inline-flex}
  .nav-links{
    position:absolute;
    left:0; right:0; top:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:.2rem;
    padding:0 4%;
    background:rgba(10,14,23,.92);
    border-bottom:1px solid rgba(0,240,255,.12);
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease, padding .35s ease;
  }
  nav.nav-open .nav-links{
    max-height:70vh;
    padding:.75rem 4% 1rem;
  }
  .nav-links a{
    width:100%;
    padding:.65rem .2rem;
  }
  /* underline doesn't need to float on mobile */
  .nav-links a::after{bottom:0}
  section{padding:6.6rem 4% 4.5rem}
  .page-hero{padding-top:6.2rem}
  .btn{padding:.85rem 1.4rem}
  .canvas-content{height:min(520px,62vh)}
  table{min-width:620px}
}

@media (max-width: 480px){
  section{padding:6.3rem 4% 4.2rem}
  .hero{min-height:88vh}
  .btn{width:100%}
  table{min-width:560px}
}