/* ══════════════════════════════════════════════════════════════════════════
   UNIVERSAL SHELL STYLES: Productive IT

   Loaded ONLY by the hand-authored homepage (which ships styles.css instead
   of page.css). Colours come from the logo palette only: lime #84b340,
   brand blue #465493, blue-soft #7c89c4 on the deep ink ground.
   It renders the shared header/footer markup from shell.mjs with the same
   geometry as the generated pages, so the site has one consistent
   header and footer everywhere.
   ══════════════════════════════════════════════════════════════════════════ */

.topbar{
  position:sticky;top:0;z-index:40;height:82px;
  display:flex;align-items:center;
  background:rgba(14,18,32,.9);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.topbar>.wrap{
  width:min(1180px,calc(100% - 48px));margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.topbar .brand img,
footer .brand img{width:31px;height:31px;border-radius:8px}

.main-nav{
  display:flex;gap:25px;text-transform:uppercase;
  color:#b9c1d4;font:10px var(--mono);letter-spacing:.08em;
}
.main-nav a{padding:6px 0;transition:.2s}
.main-nav a:hover{color:var(--lime)}
.main-nav a.active{color:var(--lime);border-bottom:1px solid var(--lime)}
.mobile-menu a.active{color:var(--lime);border-left:2px solid var(--lime);padding-left:12px}

.nav-cta{
  font:10px var(--mono);text-transform:uppercase;letter-spacing:.1em;
  border-bottom:1px solid var(--lime);padding-bottom:7px;white-space:nowrap;
}
.nav-cta span{color:var(--lime);margin-left:10px}

.menu{
  display:none;background:none;border:0;color:var(--paper);
  font-size:22px;line-height:1;cursor:pointer;padding:6px;
}

footer{border-top:1px solid var(--line);padding:45px 0 25px}
footer>.wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}
.footer-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:30px;color:var(--muted);
  font:10px var(--mono);text-transform:uppercase;
}
.footer-row>div{max-width:520px}
.footer-links{display:flex;flex-wrap:wrap;gap:20px}
.footer-links a{transition:.2s}
.footer-links a:hover{color:var(--lime)}

.social-row{display:flex;gap:12px;align-items:center}
.social-row a{
  display:grid;place-items:center;width:30px;height:30px;
  border:1px solid var(--line);color:var(--muted);transition:.25s;
}
.social-row a:hover{color:var(--lime);border-color:rgba(132,179,64,.5)}

@media(max-width:850px){
  .main-nav,.nav-cta{display:none}
  .menu{display:block}
  .footer-row{display:grid;gap:22px}
}