:root {
  --white:#ffffff;--bg:#f8fafc;--bg-card:#ffffff;--bg-section:#f1f5f9;
  --g900:#05162e;--g800:#0a2547;--g700:#003d80;--g600:#0059b3;--g400:#267fff;--g200:#99c2ff;--g100:#cce0ff;--g50:#f0f5ff;
  --a900:#08162b;--a800:#0d2a54;--a700:#1a4d94;--a600:#2b76e2;--a400:#6aa0f0;--a200:#bad4fa;--a100:#dcedff;--a50:#f2f8ff;
  --t1:#0f172a;--t2:#334155;--tm:#475569;--tl:#94a3b8;
  --bdr:rgba(0, 89, 179, 0.08);--bdrm:rgba(0, 89, 179, 0.18);
  --nav-h:70px;--top-h:0px;--fd:'Oswald',system-ui,sans-serif;--fb:'Inter',system-ui,sans-serif;--fm:'Fira Code',monospace;
  --r:10px;--rl:16px;
}
[data-theme="dark"] {
  --white:#090e16;--bg:#03060a;--bg-card:#090e16;--bg-section:#05090f;
  --t1:#f8fafc;--t2:#cbd5e1;--tm:#94a3b8;--tl:#64748b;
  --bdr:rgba(38, 127, 255, 0.12);--bdrm:rgba(38, 127, 255, 0.24);
  --g900:#d6e6ff;--g800:#adcaff;--g700:#70a4ff;--g600:#3385ff;--g400:#0059b3;--g50:#001b33;
  --a900:#dcedff;--a800:#bad4fa;--a700:#6aa0f0;--a600:#2b76e2;--a400:#1a4d94;--a50:#08162b;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:clamp(13px, 0.85vw + 11px, 16px)}
body{background:var(--bg);color:var(--t1);font-family:var(--fb);font-size:1rem;line-height:1.7;overflow-x:hidden;touch-action:manipulation}
button, input, select, textarea, optgroup, option{font-family:inherit;font-size:1rem}
p, li, label, a, span{font-size:1rem}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--g400);border-radius:4px}
#bioCanvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;opacity:0.4;pointer-events:none}

/* ── TOPBAR ─────────────────────────────────────────── */
.top-bar{display:none!important}

/* ── NAV ─────────────────────────────────────────────── */
nav{position:fixed;top:var(--top-h);left:0;right:0;height:var(--nav-h);display:flex;align-items:center;padding:0 5%;background:rgba(255,255,255,0.95);backdrop-filter:blur(18px);border-bottom:1px solid var(--bdr);z-index:1000;justify-content:space-between;transition:box-shadow 0.3s}
[data-theme="dark"] nav{background:rgba(9,13,22,0.96)}
nav.scrolled{box-shadow:0 2px 24px rgba(60,80,30,0.1)}
.nav-brand{display:flex;align-items:center;gap:13px;text-decoration:none;cursor:pointer}
.nav-logo{width:52px;height:52px;object-fit:contain;flex-shrink:0}
.nav-title strong{font-family:var(--fd);font-size:1.063rem;font-weight:700;color:var(--t1);display:block}
.nav-title span{font-size:0.594rem;color:var(--tm);letter-spacing:2px;text-transform:uppercase}
.nav-links{display:flex;gap:4px;list-style:none;align-items:center}
.nav-links li{position:relative}
.nav-links a,.nav-btn{text-decoration:none;font-size:0.844rem;font-weight:500;color:var(--t2);transition:color 0.2s;padding:8px 14px;border-radius:2px;cursor:pointer;background:none;border:none;font-family:var(--fb);display:flex;align-items:center;gap:4px}
.nav-links a:hover,.nav-btn:hover{color:var(--t1);background:var(--bg-section)}
.nav-links a.active,.nav-btn.active{color:#ffffff!important;background:var(--g600)!important;border-radius:6px!important}
.nav-dropdown-menu{position:absolute;top:100%;left:0;background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);padding:8px;min-width:200px;box-shadow:0 8px 32px rgba(11,31,74,0.12);z-index:200;display:none}
.nav-dropdown-menu::before{content:"";position:absolute;top:-10px;left:0;width:100%;height:10px;background:transparent}
.nav-links li:hover .nav-dropdown-menu,.nav-dropdown-menu:hover{display:block}
.nav-dropdown-menu a{display:block;padding:7px 12px;border-radius:6px;font-size:0.781rem;color:var(--t2);text-decoration:none;transition:all 0.15s}
.nav-dropdown-menu a:hover{background:var(--g50);color:var(--g800)}
.btn-join{background:var(--g800)!important;color:var(--g50)!important;padding:8px 18px!important;border-radius:100px;font-weight:600!important;font-size:0.75rem!important}
.btn-join:hover{background:var(--g900)!important}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;border:none;background:none}
.hamburger span{width:22px;height:2px;background:var(--t1);border-radius:2px;transition:all 0.3s}
/* MOBILE MENU STYLING */
.mobile-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: calc(var(--top-h) + var(--nav-h));
  left: 0;
  right: 0;
  background: var(--bg-card);
  opacity: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bdr);
  padding: 16px 6%;
  z-index: 999;
  gap: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  max-height: calc(100vh - var(--nav-h) - 40px);
  overflow-y: auto;
  transform: translateY(-10px);
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
[data-theme="dark"] .mobile-menu {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.mobile-menu a {
  text-decoration: none;
  font-size:0.938rem;
  font-weight: 500;
  color: var(--t2);
  padding: 12px 0;
  border-bottom: 1px solid var(--bdr);
  display: block;
  cursor: pointer;
  transition: color 0.2s;
}
.mobile-menu a:hover {
  color: var(--g600);
}
.mobile-menu.open {
  opacity: 0.98;
  transform: translateY(0);
  pointer-events: auto;
}

/* HAMBURGER OPEN STATE ANIMATIONS */
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* NAVBAR THEME TOGGLE */
.nav-theme-toggle {
  background: none;
  border: 1px solid var(--bdr);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t1);
  cursor: pointer;
  transition: all 0.2s ease;
}
.nav-theme-toggle:hover {
  background: var(--bg-section);
  border-color: var(--g600);
  color: var(--g600);
  transform: scale(1.05);
}
@media (max-width: 375px) {
  .nav-title strong {
    font-size:0.938rem;
  }
  .nav-title span {
    font-size:0.531rem;
  }
}

/* MOBILE DROPDOWN STYLES */
.mobile-dropdown {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--bdr);
}
.mobile-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  font-size:0.938rem;
  font-weight: 500;
  color: var(--t1);
  cursor: pointer;
  user-select: none;
}
.mobile-dropdown-header .caret-icon {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--tm);
  border-bottom: 2px solid var(--tm);
  transform: rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-right: 8px;
}
.mobile-dropdown.open .mobile-dropdown-header .caret-icon {
  transform: rotate(-135deg);
  border-color: var(--g600);
}
.mobile-dropdown-content {
  display: none;
  flex-direction: column;
  padding-left: 16px;
  background: rgba(0, 89, 179, 0.01);
  border-left: 2px solid var(--bdr);
  margin-bottom: 8px;
  border-radius: 0 0 0 4px;
}
.mobile-dropdown.open .mobile-dropdown-content {
  display: flex;
}
.mobile-dropdown-content a {
  border-bottom: none;
  font-size:0.844rem;
  color: var(--tm);
  padding: 8px 0;
}
.mobile-dropdown-content a:hover {
  color: var(--g600);
}

/* ── CHEVRON ARROW ──────────────────────────────────── */
.caret{display:inline-block;width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:2px;transition:transform 0.2s;position:relative;top:-1px}

/* ── PAGE SYSTEM ─────────────────────────────────────── */
.page{display:none;position:relative;z-index:1;min-height:calc(100vh - var(--top-h) - var(--nav-h));padding-top:calc(var(--top-h) + var(--nav-h))}
.page.active{display:block}

/* ── BREADCRUMB ──────────────────────────────────────── */
.breadcrumb{font-family:var(--fm);font-size:0.688rem;color:var(--tm);padding:14px 5% 0;display:flex;align-items:center;gap:8px;position:relative;z-index:1}
.breadcrumb span{color:var(--g600);cursor:pointer;transition:opacity 0.2s}.breadcrumb span:hover{opacity:0.7}
.breadcrumb .sep{color:var(--tl)}

/* ── SECTION COMMONS ─────────────────────────────────── */
.section{padding:60px 5% 80px}
.slabel{font-family:var(--fm);font-size:0.688rem;color:var(--g700);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.slabel::before{content:'';width:18px;height:1.5px;background:var(--g600)}
.stitle{font-family:var(--fd);font-size:clamp(26px,3.5vw,46px);font-weight:700;line-height:1.15;color:var(--t1);margin-bottom:14px}
.stitle em{font-style:normal;color:inherit}
.ssub{font-size:0.969rem;color:var(--t2);max-width:680px;line-height:1.85;margin-bottom:48px}
.divider{width:100%;height:1px;background:var(--bdr);position:relative;z-index:1}

/* ── FOOTER ──────────────────────────────────────────── */
footer{position:relative;z-index:1;border-top:1px solid var(--bdr);padding:32px 5%;background:var(--g900);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;transition:background 0.3s ease,border-color 0.3s ease}
.fbrand span:first-child{font-family:var(--fd);font-size:1rem;color:var(--white);font-weight:600;display:block;transition:color 0.3s ease}
.fbrand span:last-child{font-size:0.719rem;color:rgba(255,255,255,0.72);transition:color 0.3s ease}
.flinks{display:flex;gap:22px;flex-wrap:wrap}
.flinks a{font-size:0.75rem;color:rgba(255,255,255,0.78);text-decoration:none;transition:color 0.3s ease;cursor:pointer}.flinks a:hover{color:var(--white);text-decoration:underline}
.fright{font-family:var(--fm);font-size:0.656rem;color:rgba(255,255,255,0.7);text-align:right;transition:color 0.3s ease}
.fright span{color:rgba(255,255,255,0.92);transition:color 0.3s ease}
[data-theme="dark"] footer{background:#ffffff;border-top:1px solid #e2e8f0}
[data-theme="dark"] .fbrand span:first-child{color:#090e16}
[data-theme="dark"] .fbrand span:last-child{color:#475569}
[data-theme="dark"] .flinks a{color:#0f172a}[data-theme="dark"] .flinks a:hover{color:#2563eb}
[data-theme="dark"] .fright{color:#475569}
[data-theme="dark"] .fright span{color:#0f172a}


/* ── FADE IN ─────────────────────────────────────────── */
.fade-in{opacity:0;transform:translateY(16px);transition:opacity 0.55s ease,transform 0.55s ease}
.fade-in.visible{opacity:1;transform:none}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media(max-width:1024px){.home-grid,.pi-full{grid-template-columns:1fr}.cards-grid{grid-template-columns:repeat(2,1fr)}.pi-left{flex-direction:row;flex-wrap:wrap;justify-content:center}}
@media(max-width:768px){.team-grid{grid-template-columns:repeat(2,1fr)}.nav-links{display:none}.hamburger{display:flex}.two-col,.contact-grid{grid-template-columns:1fr}.proj-item{grid-template-columns:1fr}footer{flex-direction:column;text-align:center;align-items:center;gap:20px}.flinks{justify-content:center}.fright{text-align:center}}
@media(max-width:480px){.cards-grid,.team-grid{grid-template-columns:1fr}.hero-stats{flex-wrap:wrap;gap:20px}}