/* === THEME / GLOBAL === */
:root{
  --bg:#0e0e10; --bg-2:#14161a; --text:#fff; --muted:#cfd9d7;
  --accent:#00ffcc; --accent-2:#00ffff;
}

html, body { height:100%; overflow-x:hidden; }
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-tap-highlight-color:transparent;
  padding-top: env(safe-area-inset-top);
}
img, svg { max-width:100%; height:auto; }

/* ===============================
   NAVBAR (single-row grid)
   =============================== */
.navbar{
  position:absolute; /* use fixed if you want it sticky */
  top:0; left:0; width:100%;
  z-index:10; background:transparent;
}

.navbar .nav-inner{
  display:grid;
  grid-template-columns: auto 1fr auto; /* left | center | right */
  align-items:center;
  gap:.75rem;
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:.75rem clamp(12px, 4vw, 24px);
}

/* reset old nudges */
.navbar .nav-left,
.navbar .nav-center,
.navbar .nav-right{
  margin:0 !important;
  flex:initial !important;
  width:auto !important;
  min-width:0;
}

.navbar .nav-left{ justify-self:start; display:flex; align-items:center; }
.navbar .nav-center{ justify-self:center; }
.navbar .nav-right{ justify-self:end; display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap; white-space:nowrap; }

/* Logo */
.navbar .logo{
  font-family:'Orbitron',sans-serif;
  font-weight:800; letter-spacing:.5px;
  color:var(--accent); text-decoration:none;
  text-shadow:0 0 10px #00ffcc88;
  font-size: clamp(1.25rem, 2.5vw + 1rem, 1.8rem);
}

/* Buttons */
.navbar .nav-right a{
  padding:.55rem .9rem; border-radius:999px;
  text-decoration:none; font-weight:700; font-size:.95rem;
  transition:.25s all;
}
.navbar .btn{ background:var(--accent); color:#000; }
.navbar .btn-outline{ border:1px solid var(--accent); color:var(--accent); background:transparent; }
.navbar .btn:hover{ box-shadow:0 0 10px #00ffcc88; }
.navbar .btn-outline:hover{ background:#00ffcc11; }

/* Dropdown (tap-friendly; absolute so it doesn't push layout) */
.navbar .dropdown{ position:relative; }
.navbar .dropbtn{
  background:transparent; border:0; color:var(--accent);
  font-weight:700; cursor:pointer; padding:.5rem .75rem; font-size:1.1rem;
}
.navbar .dropdown-content{
  position:absolute; left:0; top:calc(100% + 8px);
  display:none; min-width:200px;
  background:#1a1a1d; border:1px solid #00ffcc22; border-radius:12px;
  padding:.25rem; box-shadow:0 12px 28px rgba(0,0,0,.35); z-index:20;
}
.navbar .dropdown-content a{
  display:block; color:#fff; text-decoration:none; padding:.8rem 1rem; border-radius:8px;
}
.navbar .dropdown-content a:hover{ background:#00ffcc22; }
.navbar .dropdown-content.open{ display:block; }
/* also open on hover for desktop */
@media (hover:hover){ .navbar .dropdown:hover .dropdown-content{ display:block; } }

/* Hide right button group on very narrow screens (avoid wrapping) */
@media (max-width:520px){
  .navbar .nav-right{ display:none; }
  .navbar .logo{ font-size:1.35rem; }
}

/* === NAVBAR TRUE-CENTER FIX === */
.navbar .nav-inner{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); /* equal sides, auto center */
  align-items: center;
  gap: .75rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: .75rem clamp(12px, 4vw, 24px);
}

.navbar .nav-left,
.navbar .nav-center,
.navbar .nav-right{
  margin: 0 !important;
  flex: initial !important;
  width: auto !important;
  min-width: 0;
}

.navbar .nav-left  { justify-self: start; display:flex; align-items:center; }
.navbar .nav-center{ justify-self: center; } /* logo stays perfectly center */
.navbar .nav-right { justify-self: end; display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap; white-space:nowrap; }

/* keep your existing button/dropdown styles */


/* Dropdown (tap friendly) */
.dropdown{ position:relative; }
.dropbtn{
  background:transparent; border:0; color:var(--accent);
  font-weight:700; cursor:pointer; padding:.5rem .75rem; font-size:1.1rem;
}
.dropdown-content{
  position:absolute; left:0; top:calc(100% + 8px);
  display:none; min-width:200px;
  background:#1a1a1d; border:1px solid #00ffcc22; border-radius:12px;
  padding:.25rem; box-shadow:0 12px 28px rgba(0,0,0,.35); z-index:20;
}
.dropdown-content a{
  display:block; color:#fff; text-decoration:none; padding:.8rem 1rem; border-radius:8px;
}
.dropdown-content a:hover{ background:#00ffcc22; }
.dropdown-content.open{ display:block; }
@media (hover:hover){ .dropdown:hover .dropdown-content{ display:block; } }

/* Hide right CTAs on very small phones */
@media (max-width:520px){ .nav-right{ display:none; } }

/* === HERO === */
.about-hero{
  position:relative;
  height:100svh; min-height:520px;
  display:grid; place-items:center;
  text-align:center; overflow:hidden;
  padding-top:3.5rem; /* space under navbar */
  background:#0e0e10;
}

/* Nebula + stars layers */
.about-hero::before{
  content:""; position:absolute; inset:0; z-index:0; filter:saturate(120%);
  background:
    radial-gradient(1200px 800px at 20% 30%, rgba(0,255,204,0.15), transparent 70%),
    radial-gradient(900px 600px at 80% 70%, rgba(0,170,255,0.10), transparent 70%),
    radial-gradient(700px 500px at 50% 50%, rgba(255,0,255,0.08), transparent 70%);
  animation: nebulaShift 20s ease-in-out infinite alternate;
}
.about-hero::after{
  content:""; position:absolute; inset:0; z-index:1; opacity:.6;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60% 70%, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,0.4) 50%, transparent 51%);
  background-repeat: repeat;
  background-size: 180px 180px, 220px 220px, 260px 260px;
  animation: starsDrift 90s linear infinite;
}

.hero-content{ position:relative; z-index:2; padding:0 1rem; max-width:860px; animation: fadeInUp 1s ease-out; }
.glow{
  font-family:'Orbitron',sans-serif;
  font-size: clamp(1.8rem, 5vw + 1rem, 3rem); /* fluid like home/contact */
  line-height:1.1;
  text-shadow:0 0 15px var(--accent), 0 0 30px var(--accent);
  animation: glowPulse 5s ease-in-out infinite;
}
.tagline{
  font-size: clamp(.95rem, 1.5vw + .6rem, 1.15rem);
  color:#ccc; margin-top:1rem;
}

/* === SECTIONS === */
section{ padding: clamp(2.5rem, 4vw + 1rem, 4rem) 1rem; }
.section-wrap{ max-width:1100px; margin:0 auto; }

.section-title{
  font-family:'Orbitron',sans-serif;
  color:var(--accent);
  font-size: clamp(1.4rem, 2.5vw + 1rem, 2.2rem);
  text-align:center; margin:0 0 1.5rem;
  text-shadow:0 0 8px #00ffccaa;
}
.section-text{
  font-size: clamp(.95rem, .6vw + .8rem, 1.1rem);
  line-height:1.7; text-align:center; color:#cfd9d7;
  max-width: 900px; margin: 0 auto;
}

/* === TEAM GRID === */
.team-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0.25rem;
}
.team-card{
  background:#1a1a1d; border:1px solid #00ffcc22; border-radius:16px;
  padding:1.25rem; text-align:center; box-shadow:0 0 10px #00ffcc11;
  transition: transform .3s ease, box-shadow .3s ease;
}
.team-card:hover{ transform: translateY(-6px); box-shadow:0 0 20px #00ffcc55; }
.team-card h3{ margin:.75rem 0 0; font-family:'Orbitron',sans-serif; color:var(--accent); font-size:1.05rem; }
.team-card p{ font-size:.95rem; color:#bbb; margin-top:.4rem; }

/* === TIMELINE === */
.timeline-section .timeline{
  max-width: 900px; margin: 0 auto;
  display:flex; flex-direction:column; gap:1.25rem; margin-top:1.25rem;
}
.timeline-item{
  border-left:3px solid var(--accent); padding-left:1rem; position:relative;
}
.timeline-item::before{
  content:""; position:absolute; left:-9px; top:5px;
  width:16px; height:16px; background:var(--accent); border-radius:50%;
}
.timeline-item .year{
  font-weight:800; color:#00ffee; font-family:'Orbitron',sans-serif;
  display:inline-block; margin-bottom:.25rem;
}

/* === CTA === */
.cta-section{
  text-align:center;
  background: linear-gradient(145deg, #111, #1c1c1f);
  border-top:1px solid #00ffcc22;
}
.cta-section h2{
  font-family:'Orbitron',sans-serif;
  font-size: clamp(1.3rem, 1.4vw + 1rem, 2rem);
  color:var(--accent);
}
.cta-section p{
  color:#aaa; margin: 1rem 0 1.75rem; font-size: clamp(.95rem, .5vw + .7rem, 1rem);
}
.cta-button{
  background:var(--accent); color:#000; padding:.9rem 1.6rem;
  font-size:1rem; font-weight:800; border-radius:30px; text-decoration:none;
  transition: transform .25s, box-shadow .25s;
}
.cta-button:hover{ transform: scale(1.05); box-shadow:0 0 10px #00ffcc88; }
.pulse{ animation:pulse 2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(0,255,204,.6)} 70%{box-shadow:0 0 0 15px rgba(0,255,204,0)} 100%{box-shadow:0 0 0 0 rgba(0,255,204,0)} }

/* === FOOTER === */
.site-footer{
  position:relative; background: radial-gradient(ellipse at top, var(--bg) 0%, var(--bg-2) 100%);
  color:#bbb; padding:3rem 1rem 1.5rem; overflow:hidden; z-index:1; font-size:.95rem;
}
.footer-container{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; max-width:1200px; margin:0 auto; position:relative; z-index:2;
}
.footer-brand,.footer-links,.footer-social{ flex:1; min-width:240px }
.footer-brand h3{ font-family:'Orbitron',sans-serif; color:var(--accent); font-size:1.6rem; margin:0 0 1rem; text-shadow:0 0 12px #00ffcc88 }
.footer-brand p{ color:#aaa; line-height:1.5; font-size:.95rem }
.footer-links h4,.footer-social h4{ color:var(--accent); font-size:1.2rem; margin:0 0 1rem; font-family:'Orbitron',sans-serif; text-shadow:0 0 8px #00ffcc55 }
.footer-links ul{ list-style:none; padding:0; margin:0 }
.footer-links li{ margin-bottom:.6rem }
.footer-links a{ color:#bbb; text-decoration:none; transition: color .3s, text-shadow .3s }
.footer-links a:hover{ color:var(--accent); text-shadow:0 0 6px #00ffcc99 }

.footer-social .social-icons{ display:flex; gap:1rem; flex-wrap:wrap }
.footer-social .social-icons a{
  color:#bbb; font-size:1.4rem; padding:.5rem; border:1px solid #00ffcc33; border-radius:50%;
  transition: all .3s; box-shadow:0 0 8px #00ffcc11; backdrop-filter: blur(2px);
}
.footer-social .social-icons a:hover{ color:var(--accent); background: rgba(0,255,204,0.05); transform: scale(1.15); box-shadow:0 0 12px #00ffcc55 }

.footer-glow{
  content:""; position:absolute; top:-60%; left:-60%; width:220%; height:220%;
  background: radial-gradient(circle at center, rgba(0,255,204,0.03), transparent 80%);
  animation: footerPulse 20s linear infinite; pointer-events:none; z-index:0;
}
@keyframes footerPulse{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

.footer-bottom{
  text-align:center; padding-top:2rem; border-top:1px solid #333; color:#888; font-size:.85rem; margin-top:3rem; z-index:2; position:relative;
}
.neon-text{ color:var(--accent); text-shadow:0 0 5px var(--accent), 0 0 10px var(--accent-2) }

/* === MOTION PREFERENCES === */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}