/* ============================================================
   ITEZIA — Layout
   Starfield · Navbar · Footer
   ============================================================ */

/* ──────────────────────── STAR FIELD CANVAS ────────────────── */
.starfield-canvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  opacity: .9;
}

/* ──────────────────────── NAVBAR ───────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  height: var(--nav-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease;
}
.navbar.scrolled {
  background: rgba(3,3,3,.92);
  border-color: rgba(192,150,60,.1);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}

.nav-inner {
  max-width: var(--max-w); margin: 0 auto; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s8); gap: var(--s6);
}

/* brand */
.nav-brand      { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.nav-logo-img   { height: 44px; width: auto; object-fit: contain; }
.nav-brand-name { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.025em; color: var(--t1); }

/* center links */
.nav-center { display: flex; align-items: center; gap: var(--s2); flex: 1; justify-content: center; }
.nav-link {
  padding: 7px 13px; border-radius: var(--r1);
  font-size: var(--fs-sm); font-weight: 500; color: var(--t3);
  transition: color var(--t1s), background var(--t1s); cursor: pointer; position: relative;
}
.nav-link:hover  { color: var(--t1); background: var(--b-dim); }
.nav-link.active { color: var(--t1); }

.nav-link--3d       { color: var(--brand-l); }
.nav-link--3d:hover { color: var(--t1); background: rgba(192,150,60,.08); }
.nav-link.active::after {
  content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 1px; background: var(--brand); border-radius: var(--rfull);
}

/* right side */
.nav-end { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }

.search-pill {
  display: flex; align-items: center; gap: var(--s2);
  padding: 8px 14px; background: rgba(14,14,40,.5); border: 1px solid var(--b-1);
  border-radius: var(--r2); color: var(--t4); font-size: var(--fs-xs);
  cursor: pointer; transition: all var(--t1s); min-width: 180px;
}
.search-pill:hover              { border-color: var(--b-2); color: var(--t3); background: var(--surface); }
.search-pill span:first-of-type { flex: 1; }
.search-pill .kbd               { margin-left: auto; }

.nav-burger      { display: none; flex-direction: column; gap: 4px; padding: var(--s2); }
.nav-burger span { display: block; height: 2px; width: 20px; background: var(--t2); border-radius: var(--rfull); transition: all var(--t1s); }

/* mobile nav */
.mobile-nav {
  display: none; flex-direction: column; gap: 2px;
  padding: var(--s4) var(--s6) var(--s6);
  background: rgba(4,4,28,.95); border-top: 1px solid var(--b-1);
  backdrop-filter: blur(20px);
}
.mobile-nav .nav-link { padding: 10px 12px; border-radius: var(--r2); }

/* ──────────────────────── MAIN WRAPPER ─────────────────────── */
.main-content { min-height: 100vh; }

/* ──────────────────────── FOOTER ──────────────────────────── */
footer {
  background: rgba(2,2,2,.97); border-top: 1px solid rgba(192,150,60,.1);
  padding: var(--s20) 0 var(--s10); backdrop-filter: blur(20px);
}
.footer-grid        { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s16); margin-bottom: var(--s16); }
.footer-desc        { font-size: var(--fs-sm); color: var(--t3); line-height: 1.8; max-width: 280px; margin: var(--s5) 0 var(--s6); }
.footer-social      { display: flex; gap: var(--s3); }
.footer-col-title   { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t4); margin-bottom: var(--s5); }
.footer-links       { display: flex; flex-direction: column; gap: var(--s4); }
.footer-link        { font-size: var(--fs-sm); color: var(--t3); transition: color var(--t1s); }
.footer-link:hover  { color: var(--t1); }
.footer-bottom      { padding-top: var(--s8); border-top: 1px solid var(--b-dim); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s4); }
.footer-copy        { font-size: var(--fs-xs); color: var(--t4); }
.footer-bottom-links { display: flex; gap: var(--s5); }


/* ──────────────────────── LIGHT MODE ──────────────────────── */
body.light .navbar.scrolled   { background: rgba(244,242,238,.94); border-color: rgba(160,120,40,.2); }
body.light .starfield-canvas  { opacity: .04; }
body.light .hero-nebula       { opacity: .3; }
body.light .launch-nebula     { opacity: .2; }
body.light .prod-page-nebula  { opacity: .25; }
body.light .s-launch          { background: linear-gradient(180deg, var(--deep) 0%, var(--void) 100%); }
body.light .vision-num        { -webkit-text-fill-color: var(--t4); }
body.light .eco3d-hud         { color: var(--t2); }