/* =====================================================
   SITE CHROME — shared nav, mobile menu, and footer.
   Edit this once; both pages update.
   HTML markup is injected by /website/scripts/chrome.js.
   ===================================================== */

/* NAV */
#nav{position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(13,19,31,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color var(--dur), background var(--dur);}
#nav.scrolled{border-bottom-color:var(--hairline); background:rgba(13,19,31,.85)}
.nav-inner{max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  height:66px; display:flex; align-items:center; justify-content:space-between; gap:var(--s5)}
.nav-logo{display:flex; align-items:center; gap:var(--s3); text-decoration:none}
.logo-badge{width:36px; height:36px; flex-shrink:0; object-fit:contain;
  filter:drop-shadow(0 4px 14px rgba(81,92,246,.45))}
.nav-wordmark{font-weight:700; font-size:1.02rem; letter-spacing:.01em; color:var(--text-1)}
.nav-wordmark span{color:var(--accent-soft)}
.nav-links{display:flex; align-items:center; gap:var(--s6); list-style:none; padding:0; margin:0}
.nav-links a{font-size:.9rem; font-weight:500; color:var(--text-2); text-decoration:none; transition:color var(--dur-fast); position:relative}
.nav-links a::after{content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--accent); transition:width var(--dur) var(--ease)}
.nav-links a:hover, .nav-links a.active{color:var(--text-1)}
.nav-links a:hover::after, .nav-links a.active::after{width:100%}
.nav-right{display:flex; align-items:center; gap:var(--s4)}
.nav-cta{background:var(--accent); color:#fff; font-weight:600; font-size:.9rem; padding:11px 20px;
  border-radius:var(--radius-pill); border:none; cursor:pointer; text-decoration:none; transition:all var(--dur) var(--ease); white-space:nowrap}
.nav-cta:hover{box-shadow:var(--glow-indigo); transform:translateY(-1px)}
.nav-hamburger{display:none; background:none; border:none; cursor:pointer; padding:10px; margin:-10px; color:var(--text-1)}

/* MOBILE MENU */
.mobile-menu{display:none; position:fixed; inset:66px 0 0; background:var(--ink-800); z-index:99;
  padding:var(--s7) var(--gutter); flex-direction:column; gap:var(--s2)}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:1.5rem; font-weight:600; color:var(--text-1); text-decoration:none; padding:var(--s4) 0; border-bottom:1px solid var(--hairline)}
.mobile-menu .mm-cta{color:var(--accent-soft)}

/* FOOTER */
footer{padding:var(--s9) 0 var(--s7); border-top:1px solid var(--hairline); position:relative; z-index:1}
.footer-grid{display:grid; grid-template-columns:1fr auto; gap:var(--s7); align-items:center; margin-bottom:var(--s7)}
.footer-brand{font-size:var(--step-1); font-weight:700; color:var(--text-1); margin-bottom:6px}
.footer-brand span{color:var(--accent-soft)}
.footer-tagline{font-size:.9rem; color:var(--text-3)}
.footer-right{display:flex; flex-direction:column; align-items:flex-end; gap:var(--s4)}
.footer-ecosystem{display:flex; gap:var(--s5); flex-wrap:wrap; justify-content:flex-end}
.footer-ecosystem a{font-size:.68rem; font-weight:500; text-transform:uppercase; letter-spacing:.1em; color:var(--text-3); text-decoration:none; transition:color var(--dur) var(--ease)}
.footer-ecosystem a:hover{color:var(--text-1)}
.footer-socials{display:flex; gap:var(--s3); align-items:center}
.social-link{width:42px; height:42px; border-radius:50%; border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; color:var(--text-2); transition:all var(--dur-fast); text-decoration:none}
.social-link:hover{border-color:var(--accent-soft); color:var(--text-1); transform:translateY(-2px)}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:var(--s6); border-top:1px solid var(--hairline); flex-wrap:wrap; gap:var(--s4)}
.footer-copy{font-size:.82rem; color:var(--text-3); text-decoration:none}

/* RESPONSIVE */
@media (max-width:920px){
  .footer-right{align-items:center}
  .footer-ecosystem{justify-content:center}
  footer .footer-grid > div{text-align:center}
}
@media (max-width:680px){
  .nav-links,.nav-cta{display:none}
  .nav-hamburger{display:flex}
  .footer-grid{grid-template-columns:1fr; gap:var(--s5)}
  .footer-bottom{flex-direction:column; align-items:center; text-align:center}
}