/* Shared marketing header + footer (home, login, services, our results).
   Every rule is scoped to .site-header / .site-footer so it holds up against
   the page stylesheets (bootstrap on login, services.css, etc). */

.site-header, .site-footer {
  --ink: #0d2148;
  --accent: #5548df;
  --accent-2: #6a63ff;
  --white: #ffffff;
  --shell: 1220px;
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.site-header *, .site-footer * { box-sizing: border-box; }
.site-header a, .site-footer a { color: inherit; text-decoration: none; }
.site-header a:hover, .site-footer a:hover { text-decoration: none; }
.site-header a:focus-visible, .site-footer a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }
.site-header .shell, .site-footer .shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(232,237,246,.9); backdrop-filter: blur(14px); color: var(--ink); }
.site-header .nav-wrap { height: 78px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; }
.site-header .brand, .site-footer .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-family: "Manrope", sans-serif; font-size: 16px; }
.site-header .brand-mark, .site-footer .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; background: linear-gradient(135deg,#16bad8,#25c7e6); font-size: 19px; }
.site-header .main-nav { display: flex; justify-content: center; align-items: center; gap: 30px; }
.site-header .main-nav a, .site-header .login-link { font-size: 14px; font-weight: 600; color: #263756; transition: color .15s ease; }
.site-header .main-nav a:hover, .site-header .login-link:hover { color: var(--accent); }
.site-header .main-nav a.nav-highlight { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: rgba(85, 72, 223, .10); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(85, 72, 223, .25); transition: background .15s ease, color .15s ease; }
.site-header .main-nav a.nav-highlight::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.site-header .main-nav a.nav-highlight:hover { background: var(--accent); color: var(--white); }
.site-header .nav-actions { display: flex; align-items: center; gap: 22px; }
.site-header .button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 8px; font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(135deg,#4439c6,#6657ef); box-shadow: 0 10px 25px rgba(85,72,223,.24); transition: transform .2s ease, box-shadow .2s ease; }
.site-header .button:hover { color: #fff; transform: translateY(-2px); }

.site-footer { padding: 56px 0 70px; background: #0d1a42; color: white; }
.site-footer .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4,1fr); gap: 50px; }
.site-footer .footer-brand { color: white; }
.site-footer p, .site-footer a { color: #b8c3dd; font-size: 13px; line-height: 1.75; margin: 0; transition: color .15s ease; }
.site-footer p { margin: 1em 0; }
.site-footer .footer-brand { color: white; font-size: 16px; }
.site-footer a:hover { color: #ffffff; }
.site-footer h4 { margin: 0 0 16px; font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: -0.035em; color: white; }
.site-footer .footer-grid > div:not(:first-child) { display: flex; flex-direction: column; gap: 11px; }

@media (prefers-reduced-motion: reduce) {
  .site-header .button, .site-header .main-nav a, .site-header .login-link, .site-footer a { transition: none; }
  .site-header .button:hover { transform: none; }
}
@media (max-width: 1050px) {
  .site-header .main-nav { display: none; }
  .site-header .nav-wrap { grid-template-columns: 1fr auto; }
}
@media (max-width: 760px) {
  .site-header .shell, .site-footer .shell { width: min(calc(100% - 30px), var(--shell)); }
  .site-header .nav-actions .login-link { display: none; }
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .site-footer .footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .site-header .brand span:last-child { font-size: 14px; }
  .site-header .button { padding-inline: 14px; }
  .site-footer .footer-grid { grid-template-columns: 1fr; }
}