:root {
  --bg: #00030f;
  --text: #e8f4ff;
  --accent: #3acaff;
  --accent-glow: rgba(58,202,255,0.35);
  --panel: rgba(10,20,37,0.92);
  --overlay: rgba(0,8,20,0.58);
  --nav-height: 4.4rem;
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  height:100%;
  font-family: 'Exo 2', sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

canvas#bg {
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
}

.overlay {
  position:fixed;
  inset:0;
  background:var(--overlay);
  backdrop-filter: blur(2px);
  z-index:-1;
  pointer-events:none;
}

nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  height:var(--nav-height);
  padding:0 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--panel);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(58,202,255,0.18);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
  transition: transform 0.3s ease;
}

.logo-container:hover .logo-icon {
  transform: scale(1.1) rotate(5deg);
}

.logo-text {
  font-family:'Oxanium', sans-serif;
  font-size:1.9rem;
  font-weight:800;
  letter-spacing:3px;
  color:var(--accent);
  text-shadow:0 0 18px var(--accent-glow);
}

nav ul {
  list-style:none;
  display:flex;
  gap:2.8rem;
}

nav a {
  color:var(--text);
  text-decoration:none;
  font-family:'Oxanium', sans-serif;
  font-weight:600;
  font-size:1.1rem;
  position:relative;
  transition:color 0.25s;
}

nav a::after {
  content:'';
  position:absolute;
  bottom:-6px; left:0;
  width:100%; height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform 0.3s;
}

nav a:hover::after,
nav a.active::after { transform:scaleX(1); transform-origin:left; }

nav a:hover,
nav a.active {
  color:var(--accent);
  text-shadow:0 0 14px var(--accent-glow);
}

/* ─── MAIN CONTENT ──────────────────────────────────────────────────── */
.hero-overlay,
.content-overlay {
  position:relative;
  min-height:calc(100vh - var(--nav-height));
  padding-top:calc(var(--nav-height) + 10vh);   /* more space below navbar */
  display:flex;
  align-items:flex-start;
  justify-content:center;
  z-index:2;
}

.hero-content {
  text-align:center;
  max-width:1000px;
  margin-top:6vh;                               /* extra downward shift */
}

h1 {
  font-family:'Oxanium', sans-serif;
  font-size:clamp(4.2rem, 12vw, 10rem);
  font-weight:800;
  line-height:0.88;
  letter-spacing:-3px;
  margin-bottom:1.8rem;
  text-shadow:0 0 60px rgba(0,0,0,0.8), 0 0 120px var(--accent-glow);
}

.hero-lead {
  font-size:clamp(1.5rem, 5vw, 2.3rem);
  opacity:0.94;
  max-width:780px;
  margin:0 auto 3rem;
  text-shadow:0 0 20px rgba(0,0,0,0.7);
}

.status-badge {
  display:inline-block;
  padding:1rem 2.6rem;
  background:rgba(10,40,70,0.7);
  border:1px solid rgba(58,202,255,0.3);
  border-radius:50rem;
  font-family:'Oxanium', sans-serif;
  font-weight:700;
  font-size:1.3rem;
  backdrop-filter:blur(8px);
  text-shadow:0 0 10px var(--accent-glow);
}

/* ─── ABOUT PAGE ────────────────────────────────────────────────────── */
.split-section {
  padding:14vh 5vw 8vh;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:7vw;
  align-items:center;
  max-width:1400px;
  margin:0 auto;
}

.split-img-container {
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.7),
             inset 0 0 0 1px rgba(58,202,255,0.15);
}

.split-img {
  width:100%;
  height:auto;
  display:block;
}

.split-text h2 {
  font-family:'Oxanium', sans-serif;
  font-size:3.8rem;
  margin-bottom:1.8rem;
  color:var(--accent);
  text-shadow:0 0 28px var(--accent-glow);
}

.split-text p {
  font-size:1.25rem;
  line-height:1.7;
  opacity:0.9;
  margin-bottom:2.2rem;
}

/* ─── POPUPS ────────────────────────────────────────────────────────── */
.popup-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,6,18,0.92);
  backdrop-filter:blur(10px);
  display:none;
  place-items:center;
  z-index:9999;
}

.popup-box {
  background:var(--panel);
  border:1px solid rgba(58,202,255,0.22);
  border-radius:18px;
  padding:3rem 2.8rem;
  max-width:480px;
  width:90%;
  text-align:center;
  box-shadow:0 30px 100px rgba(0,0,0,0.9);
}

.popup-box h3 {
  font-family:'Oxanium', sans-serif;
  color:var(--accent);
  font-size:1.9rem;
  margin-bottom:1.4rem;
}

.popup-btn {
  min-width:160px;
  padding:1.1rem 2.6rem;
  margin:0.6rem;
  border:none;
  border-radius:50rem;
  font-family:'Oxanium', sans-serif;
  font-weight:700;
  font-size:1.1rem;
  cursor:pointer;
  transition:all 0.25s;
}

.btn-primary { background:var(--accent); color:#000814; }
.btn-primary:hover { filter:brightness(1.2); transform:translateY(-2px); }
.btn-secondary { background:#1a3a5a; color:var(--text); }
.btn-secondary:hover { background:#254b75; }

/* ─── FOOTER ────────────────────────────────────────────────────────── */
footer {
  position:relative;
  z-index:3;
  text-align:center;
  padding:6rem 1rem 4rem;
  color:rgba(96,136,192,0.7);
  font-size:1rem;
  border-top:1px solid rgba(58,202,255,0.12);
  text-shadow:0 0 8px rgba(58,202,255,0.15);
}

/* Responsive */
@media (max-width:960px) {
  .split-section { grid-template-columns:1fr; gap:5rem; padding:16vh 6vw 8vh; }
  nav { padding:0 6vw; }
  .logo-icon { width: 36px; height: 36px; }
  .logo-text { font-size: 1.6rem; }
  .hero-overlay,
  .content-overlay { padding-top:calc(var(--nav-height) + 12vh); }
  .hero-content { margin-top:8vh; }
  h1 { font-size:clamp(3.5rem,10vw,7rem); }
}