/* ═══════════════════════════════════════════════════
   layout.css — shared header + footer for all sub-pages
   Mirrors the main index.html header (on-dark style)
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --sl-bg   : #07061A;
  --sl-bg2  : #0D0A24;
  --sl-bg3  : #130F35;
  --sl-gold : #F3B430;
  --sl-cyan : #46D2FF;
  --sl-ind6 : #3A309A;
  --sl-ind5 : #4F44C4;
  --sl-cyan-glow: rgba(70,210,255,.55);
  --sl-border: rgba(255,255,255,.08);
  --sl-pad  : clamp(16px,6vw,80px);
}

/* ── HEADER ────────────────────────────────────── */
.sl-header{
  position:fixed;top:0;left:0;right:0;
  z-index:400;height:64px;
  display:flex;align-items:center;
  padding:0 var(--sl-pad);
  background:rgba(7,6,22,.92);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--sl-border);
  transition:background .3s;
}
.sl-header-inner{
  max-width:1280px;width:100%;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

/* logo — dark variant always shown (light bg reversed not needed on dark header) */
.sl-brand{display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none}
.sl-brand .sl-logo-d{height:36px;display:block}
.sl-brand .sl-logo-l{height:36px;display:none}

/* nav links — exactly matching .header.on-dark .nav>a */
.sl-nav{display:flex;gap:2px;align-items:center;flex:1;min-width:0}
.sl-nav a{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:14.5px;
  font-weight:500;
  color:rgba(255,255,255,.86);
  text-decoration:none;
  padding:9px 12px;
  border-radius:7px;
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px;
  transition:color .2s,background .2s;
}
.sl-nav a svg{opacity:.6;flex-shrink:0}
.sl-nav a:hover,.sl-nav a.sl-active{
  background:rgba(255,255,255,.10);
  color:#fff;
}
.sl-nav a:hover svg,.sl-nav a.sl-active svg{opacity:1}

/* CTA — matches main page .btn-talk (indigo gradient + cyan glow) */
.sl-header-cta{flex-shrink:0}
.sl-btn-talk{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:.88rem;font-weight:700;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 22px;border-radius:8px;
  background:linear-gradient(120deg,var(--sl-ind6),var(--sl-ind5));
  color:#fff !important;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 12px 30px -12px var(--sl-cyan-glow);
  transition:transform .15s,box-shadow .2s;
}
.sl-btn-talk:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 16px 40px -12px var(--sl-cyan-glow);
  text-decoration:none;
}
.sl-btn-talk svg{flex-shrink:0}

/* hamburger — hidden on desktop */
.sl-burger{
  display:none;
  background:none;border:1px solid rgba(255,255,255,.15);color:#fff;
  width:38px;height:38px;border-radius:7px;
  cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;
}

/* ── MOBILE DRAWER ─────────────────────────────── */
.sl-drawer{
  display:none;position:fixed;
  top:64px;left:0;right:0;
  background:#0D0A24;border-bottom:1px solid var(--sl-border);
  z-index:399;padding:16px var(--sl-pad) 20px;
  flex-direction:column;gap:4px;
}
.sl-drawer.sl-open{display:flex}
.sl-drawer a{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:.95rem;color:rgba(255,255,255,.7);
  text-decoration:none;padding:10px 14px;
  border-radius:8px;transition:background .2s,color .2s;
}
.sl-drawer a:hover,.sl-drawer a.sl-active{background:rgba(255,255,255,.07);color:#fff}
.sl-drawer .sl-cta-m{
  margin-top:8px;text-align:center;
  background:linear-gradient(120deg,var(--sl-ind6),var(--sl-ind5));
  color:#fff !important;font-weight:700;border-radius:8px;padding:12px;
}

/* ── FOOTER ────────────────────────────────────── */
.sl-footer{
  background:var(--sl-bg3);
  border-top:1px solid var(--sl-border);
  padding:56px var(--sl-pad) 32px;
}
.sl-footer-grid{
  max-width:1280px;margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:40px;margin-bottom:48px;
}
.sl-footer-brand img{height:30px;display:block;margin-bottom:16px}
.sl-footer-brand p{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:.85rem;color:rgba(255,255,255,.4);line-height:1.7;max-width:240px;margin-bottom:16px;
}
.sl-footer-brand address{
  font-style:normal;font-size:.8rem;color:rgba(255,255,255,.28);line-height:1.75;
}
.sl-footer-brand address .gold{color:var(--sl-gold)}
.sl-footer-col h5{
  font-family:'JetBrains Mono',monospace;font-size:.66rem;
  letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.28);margin-bottom:16px;
}
.sl-footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.sl-footer-col ul li a{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:.85rem;color:rgba(255,255,255,.48);text-decoration:none;
  transition:color .2s;
}
.sl-footer-col ul li a:hover{color:#fff}

.sl-footer-bottom{
  max-width:1280px;margin:0 auto;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.sl-footer-bottom span{
  font-family:'Hanken Grotesk',sans-serif;font-size:.78rem;color:rgba(255,255,255,.22);
}
.sl-footer-bottom-links{display:flex;gap:20px}
.sl-footer-bottom-links a{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:.78rem;color:rgba(255,255,255,.3);text-decoration:none;transition:color .2s;
}
.sl-footer-bottom-links a:hover{color:rgba(255,255,255,.6)}

/* ── body offset for fixed 64px header */
body.sl-page{padding-top:64px}

/* ── RESPONSIVE ──────────────────────────────────── */
@media(max-width:1240px){
  .sl-header-inner{gap:16px}
  .sl-nav a{font-size:13px;padding:8px 9px}
  .sl-nav a svg{width:9px;height:9px}
}
@media(max-width:1040px){
  .sl-nav{display:none}
  .sl-btn-talk{display:none}
  .sl-burger{display:flex}
}
@media(max-width:900px){
  .sl-footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:680px){
  .sl-footer-grid{grid-template-columns:1fr;gap:28px}
  .sl-footer-brand p,.sl-footer-brand address{max-width:100%}
}