/* ============================================================
   LAYOUT — the site chrome: header, navigation, footer.
   ============================================================ */

/* ---------- HEADER / NAV ---------- */

header{
  position:fixed;top:0;left:0;right:0;
  z-index:1000;
  background:rgba(11,18,32,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);
  transition:background 0.3s ease;
}

/* Added by assets/js/nav.js once the page is scrolled */
header.scrolled{background:rgba(11,18,32,0.92);}

nav{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  color:var(--paper);
}

.logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-weight:600;font-size:1.05rem;color:var(--paper);
}
.logo-mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--signal),var(--signal-deep));
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.logo-mark svg{width:18px;height:18px;}
.logo span.dim{color:var(--slate-light);font-weight:400;}

.nav-links{
  display:flex;align-items:center;gap:34px;
  font-size:0.94rem;font-weight:500;
}
.nav-links a{
  position:relative;color:rgba(245,243,238,0.78);
  padding:4px 0;
  transition:color 0.2s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;
  width:0;height:1.5px;background:var(--signal);
  transition:width 0.25s ease;
}
.nav-links a:hover{color:var(--paper);}
.nav-links a:hover::after{width:100%;}

.nav-cta{display:flex;align-items:center;gap:18px;}

/* ---------- MOBILE MENU ---------- */

.hamburger{
  display:none; /* shown under 720px — see responsive.css */
  width:34px;height:34px;
  flex-direction:column;justify-content:center;gap:5px;
}
.hamburger span{
  display:block;height:2px;width:100%;
  background:var(--paper);border-radius:2px;
  transition:transform 0.25s ease, opacity 0.25s ease;
}

.mobile-menu{
  display:none;
  position:fixed;top:70px;left:0;right:0;bottom:0;
  background:var(--ink);
  z-index:999;
  padding:36px var(--gutter);
  flex-direction:column;gap:26px;
  font-size:1.2rem;font-family:var(--font-display);
  color:var(--paper);
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:8px 0;border-bottom:1px solid var(--line-dark);}
.mobile-menu .btn{margin-top:10px;}

/* ---------- FOOTER ---------- */

footer{
  background:var(--ink);
  color:rgba(245,243,238,0.6);
  padding:50px 0 26px;
  border-top:1px solid var(--line-dark);
}
.footer-top{
  display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;
  padding-bottom:40px;border-bottom:1px solid var(--line-dark);
}
.footer-brand p{margin:16px 0 20px;font-size:0.9rem;max-width:280px;}
.footer-col h5{
  color:var(--paper);font-family:var(--font-display);
  font-size:0.92rem;margin-bottom:16px;
}
.footer-col ul li{margin-bottom:11px;font-size:0.88rem;}
.footer-col ul li a:hover{color:var(--signal);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;
  font-size:0.82rem;flex-wrap:wrap;gap:12px;
}