/* =====================
   DESIGN TOKENS
   ===================== */
:root {
  --hero-padding: 50px 0 30px;
  --section-gap: 50px;
  --card-padding: 22px 20px;
  --block-padding: 32px 28px;
  --body-font-size: 1rem;
  --body-line-height: 1.75;
  --label-size: 0.8rem;
  --card-radius: 8px;
  --accent: #6699ff;
  --amber: #f5a623;
  --text-muted: #aaa;
  --text-body: #ccc;
  --bg-card: rgba(255,255,255,0.03);
  --border-card: rgba(255,255,255,0.08);
}

/* =====================
   SHARED NAV & FOOTER
   ===================== */

/* Sticky nav wrapper */
#main-nav {position:sticky;top:0;z-index:100;}

/* Menu Bar */
.menu-bar {background:#0a0a0a;border-bottom:1px solid rgba(255,255,255,0.1);}
.mb-inner {display:flex;align-items:center;justify-content:space-between;width:92%;max-width:1600px;margin:0 auto;padding:14px 0;gap:20px;}
.mb-left {display:flex;align-items:center;gap:14px;flex-shrink:0;}
.mb-logo img {height:36px;display:block;}
.mb-face {width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #6699ff;flex-shrink:0;}

/* Nav links with icons */
.mb-nav {display:none;align-items:center;flex:1;justify-content:center;}
@media (min-width:800px){.mb-nav {display:flex;}}
.mb-nav a {display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 0;border-radius:8px;text-decoration:none;transition:background 0.2s;flex:1;max-width:120px;}
.mb-nav a:hover {background:rgba(102,153,255,0.08);}
.mb-nav a.active {background:rgba(102,153,255,0.12);}
.mb-nav a img {width:44px;height:44px;object-fit:contain;border-radius:6px;}
.mb-nav a span {font-size:0.72rem;font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:0.08em;white-space:nowrap;}
.mb-nav a:hover span, .mb-nav a.active span {color:#fff;}

/* Email CTA — outlined style */
.mb-cta {background:transparent;color:#6699ff;padding:10px 20px;border-radius:6px;border:1.5px solid #6699ff;text-decoration:none;font-weight:600;font-size:0.9rem;white-space:nowrap;flex-shrink:0;transition:all 0.2s;}
.mb-cta:hover {background:#6699ff;color:#fff;}

/* =====================
   FOOTER
   ===================== */
.site-footer {background:#111;border-top:1px solid rgba(255,255,255,0.07);padding:60px 0 0;}
.footer-inner {width:92%;max-width:1600px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:40px;padding-bottom:50px;}
@media (min-width:800px){.footer-inner {grid-template-columns:220px 1fr 1fr 1fr 120px;gap:40px;align-items:start;}}
.footer-brand {}
.footer-logo {height:28px;margin-bottom:14px;display:block;}
.footer-tagline {color:#666;font-size:0.85rem;line-height:1.6;margin:0 0 20px;}
.footer-contact {display:flex;flex-direction:column;gap:10px;}
.footer-linkedin {display:inline-flex;align-items:center;gap:8px;color:#6699ff;font-size:0.85rem;font-weight:600;text-decoration:none;}
.footer-linkedin:hover {color:#fff;}
.footer-email {color:#888;font-size:0.85rem;text-decoration:none;}
.footer-email:hover {color:#6699ff;}
.footer-col {display:flex;flex-direction:column;gap:12px;}
.footer-col-title {font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#6699ff;margin-bottom:6px;}
.footer-col a {color:#888;font-size:0.875rem;text-decoration:none;transition:color 0.2s;line-height:1.4;}
.footer-col a:hover {color:#fff;}
.footer-col span.soon {color:#444;font-size:0.875rem;}
.footer-bottom {width:92%;max-width:1600px;margin:0 auto;padding:20px 0;border-top:1px solid rgba(255,255,255,0.05);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;}
.footer-photo {display:flex;align-items:center;justify-content:center;}
.footer-photo img {width:130px;height:130px;border-radius:50%;object-fit:cover;object-position:center top;}
.footer-bottom {width:92%;max-width:1600px;margin:0 auto;padding:20px 0;border-top:1px solid rgba(255,255,255,0.05);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;}
.footer-bottom span {color:#444;font-size:0.78rem;}
.footer-disclaimer {font-style:italic;}