/* ============================================================
   chrome.css — shared site header + footer styling
   Used site-wide via chrome.js (locale-aware injection).
   Scope: ONLY the header (.site-header / .nav-*) and footer (.footer).
   Deliberately self-contained: tokens are scoped to .site-header and
   .footer so this file can sit on top of the imported case pages'
   Tailwind bundles WITHOUT a global :root / * / body reset that would
   shift their body layout.
   Source of truth: index.html header (line 208) + footer + style.css.
   ============================================================ */

/* ---- Scoped design tokens (do NOT pollute :root of imported pages) ---- */
.site-header,
.footer {
  --bg: #08080c;
  --bg-soft: #0c0c14;
  --fg: #ecedf5;
  --fg-soft: rgba(236, 237, 245, 0.62);
  --fg-mute: rgba(236, 237, 245, 0.55);

  --ink-1: rgba(255, 255, 255, 0.04);
  --ink-2: rgba(255, 255, 255, 0.08);
  --ink-3: rgba(255, 255, 255, 0.12);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  --accent: #5b6cff;
  --accent-soft: #8c98ff;
  --accent-deep: #2a3aff;
  --accent-glow: rgba(91, 108, 255, 0.55);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --font-display: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}

/* ============================================================
   HEADER  (verbatim from style.css, nav block)
   ============================================================ */
.site-header { position: relative; z-index: 110; }
.nav-shell {
  position: fixed;
  top: 22px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 110;
  width: min(92%, 1040px);
  transition: filter 400ms var(--ease-out);
}
.nav-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 10px 22px 10px 116px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 24px 60px -24px rgba(0, 0, 0, 0.6);
  transition: border-color 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}
/* Glass lives on a pseudo, NOT on .nav-pill itself: an element with
   backdrop-filter becomes a "backdrop root" that isolates descendants, which
   killed the dropdown's own blur (it's nested inside the pill). */
.nav-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(20, 22, 40, 0.40), rgba(10, 12, 22, 0.30));
  backdrop-filter: blur(24px) saturate(180%) brightness(0.6);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(0.6);
  transition: background 600ms var(--ease-out);
}

/* ---- Light-theme variant ---- */
.nav-shell.is-light .nav-pill {
  border-color: rgba(20, 23, 43, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 0 rgba(20, 23, 43, 0.04),
    0 24px 60px -28px rgba(20, 30, 80, 0.18);
}
.nav-shell.is-light .nav-pill::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.44));
  backdrop-filter: blur(24px) saturate(180%) brightness(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.18);
}

/* ---- Brand: absolute-left, overflows pill on the left ---- */
.nav-pill__brand {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  line-height: 0;
  z-index: 2;
  transition: opacity 600ms var(--ease-out);
}
.nav-pill__brand:hover { opacity: 0.9; }
.nav-pill__brand-logo {
  height: 28px;
  width: auto;
  display: block;
  max-width: 120px;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 0 0 transparent);
  transition: filter 500ms var(--ease-out);
}
.nav-pill__brand:hover .nav-pill__brand-logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(255, 255, 255, 0.4));
}
.nav-shell.is-light .nav-pill__brand-logo {
  filter: brightness(0);
}
.nav-shell.is-light .nav-pill__brand:hover .nav-pill__brand-logo {
  filter: brightness(0) drop-shadow(0 0 12px rgba(91, 108, 255, 0.35));
}

/* ---- Desktop nav ---- */
.nav-pill__desktop {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  color: rgba(236, 237, 245, 0.82);
  text-decoration: none;
  transition: color 400ms var(--ease-out), background 400ms var(--ease-out);
}
.nav-links a:hover { color: var(--fg); background: var(--ink-2); }
.nav-shell.is-light .nav-links a { color: rgba(20, 23, 43, 0.62); }
.nav-shell.is-light .nav-links a:hover { color: #14172b; background: rgba(20, 23, 43, 0.06); }

/* ---- Dropdown trigger (Services) ---- */
.nav-links__item--has-menu { position: relative; }
.nav-links__trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}
.nav-links__chev {
  transition: transform 320ms var(--ease-out);
  opacity: 0.85;
}
.nav-links__item--has-menu:hover .nav-links__chev,
.nav-links__item--has-menu:focus-within .nav-links__chev {
  transform: rotate(180deg);
  opacity: 1;
}

/* ---- Mega-menu (4 cards 2x2) ---- */
.nav-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  margin-top: 14px;
  width: min(560px, 92vw);
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(20, 22, 40, 0.42), rgba(10, 12, 22, 0.32));
  backdrop-filter: blur(30px) saturate(180%) brightness(0.62);
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(0.62);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 60px -20px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out),
    visibility 0s linear 280ms;
  z-index: 5;
}
/* hover-bridge: invisible strip between trigger and panel */
.nav-mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}
.nav-links__item--has-menu:hover .nav-mega,
.nav-links__item--has-menu:focus-within .nav-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out),
    visibility 0s;
}
.nav-shell.is-light .nav-mega {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(244, 245, 248, 0.46));
  backdrop-filter: blur(30px) saturate(180%) brightness(1.16);
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.16);
  border-color: rgba(20, 23, 43, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 24px 60px -20px rgba(20, 30, 80, 0.18);
}

/* Card */
.nav-mega__card {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "num arrow"
    "title arrow"
    "desc desc";
  column-gap: 10px;
  row-gap: 4px;
  padding: 14px 14px 13px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  color: var(--fg) !important;
  text-decoration: none;
  transition: background 260ms var(--ease-out), border-color 260ms var(--ease-out),
    transform 260ms var(--ease-out);
  position: relative;
  overflow: hidden;
}
.nav-mega__card:hover {
  background: rgba(91, 108, 255, 0.08) !important;
  border-color: rgba(91, 108, 255, 0.35);
  transform: translateY(-1px);
}
.nav-shell.is-light .nav-mega__card {
  background: rgba(20, 23, 43, 0.03);
  border-color: rgba(20, 23, 43, 0.08);
  color: #14172b !important;
}
.nav-shell.is-light .nav-mega__card:hover {
  background: rgba(91, 108, 255, 0.07) !important;
  border-color: rgba(91, 108, 255, 0.35);
}
.nav-mega__num {
  grid-area: num;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.nav-mega__title {
  grid-area: title;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.nav-mega__desc {
  grid-area: desc;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-soft);
  margin-top: 2px;
}
.nav-shell.is-light .nav-mega__desc { color: rgba(20, 23, 43, 0.6); }
/* Arrow icon is hidden site-wide (removed from buttons as an AI-tell). */
.nav-mega__arrow { display: none; }

/* Mobile: dropdown hidden, trigger behaves as a plain link to #solutions */
@media (max-width: 880px) {
  .nav-mega { display: none; }
  .nav-links__chev { display: none; }
}

/* ---- Language switcher ---- */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
}
.lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(236, 237, 245, 0.82);
  text-decoration: none;
  transition: color 300ms var(--ease-out), background 300ms var(--ease-out);
}
.lang-link:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.lang-link.is-active {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 4px 14px -4px var(--accent-glow);
}
.nav-shell.is-light .lang-switcher {
  background: rgba(20, 23, 43, 0.04);
  border-color: rgba(20, 23, 43, 0.08);
}
.nav-shell.is-light .lang-link { color: rgba(20, 23, 43, 0.6); }
.nav-shell.is-light .lang-link:hover { color: #14172b; background: rgba(20, 23, 43, 0.06); }
.nav-shell.is-light .lang-link.is-active { color: #fff; background: var(--accent); }

.lang-switcher--mobile { display: none; }

/* ---- Hamburger (mobile only) ---- */
.nav-pill__burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--fg);
  align-items: center;
  justify-content: center;
  margin-left: auto;
  cursor: pointer;
  transition: background 300ms var(--ease-out);
}
.nav-pill__burger:hover { background: rgba(255, 255, 255, 0.06); }
.nav-pill__burger-bars {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 12px;
}
.nav-pill__burger-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 300ms var(--ease-out), opacity 200ms var(--ease-out), top 300ms var(--ease-out);
}
.nav-pill__burger-bars span:nth-child(1) { top: 0; }
.nav-pill__burger-bars span:nth-child(2) { top: 5px; }
.nav-pill__burger-bars span:nth-child(3) { top: 10px; }
.nav-pill__burger[aria-expanded="true"] .nav-pill__burger-bars span:nth-child(1) {
  top: 5px; transform: rotate(45deg);
}
.nav-pill__burger[aria-expanded="true"] .nav-pill__burger-bars span:nth-child(2) { opacity: 0; }
.nav-pill__burger[aria-expanded="true"] .nav-pill__burger-bars span:nth-child(3) {
  top: 5px; transform: rotate(-45deg);
}
.nav-shell.is-light .nav-pill__burger { color: #14172b; border-color: rgba(20, 23, 43, 0.12); }

/* ---- Mobile menu overlay ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 80px 24px;
  background: rgba(8, 8, 12, 0.94);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms var(--ease-out), visibility 0s;
}
.mobile-menu__link {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  transition: color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.mobile-menu__link:hover { color: var(--accent-soft); transform: translateY(-1px); }
.mobile-menu__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.mobile-menu__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.mobile-menu__sublink {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.mobile-menu__sublink:hover { color: var(--accent-soft); }
.mobile-menu__sublink.is-current { color: var(--accent); pointer-events: none; }
body.is-locked { overflow: hidden; }

/* ---- Header responsive ---- */
@media (max-width: 880px) {
  .nav-shell { top: 14px; }
  .nav-pill {
    padding: 6px 14px 6px 6px;
    gap: 8px;
    justify-content: flex-start;
  }
  .nav-pill__brand {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    order: 2;
  }
  .nav-pill__brand-logo { height: 24px; max-width: 88px; }
  .nav-pill__desktop { display: none; }
  .nav-pill__burger { display: inline-flex; order: 1; margin-left: 0; }
  .lang-switcher--mobile { display: inline-flex; order: 3; margin-left: auto; }
  .lang-switcher--mobile .lang-link { min-width: 26px; padding: 3px 7px; font-size: 10px; }
}

/* ============================================================
   FOOTER  (normal-flow block — the homepage curtain-reveal is a
   homepage-only flourish that depends on main/.footer-spacer that
   imported pages don't have; a static footer is correct + consistent.)
   ============================================================ */
.footer {
  position: relative;
  background: #08080c;
  padding: 80px 32px 36px;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  isolation: isolate;
  color: var(--fg);
  font-family: var(--font-display);
}

/* ---- Background layers ---- */
.footer__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.footer__halo {
  position: absolute;
  left: 50%;
  bottom: -20%;
  width: 110%;
  aspect-ratio: 1.6 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(91, 108, 255, 0.18) 0%, transparent 60%);
}
.footer__logo-bg {
  position: absolute;
  left: 50%;
  top: 92%;
  width: clamp(640px, 95%, 1400px);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  filter: brightness(0) invert(1);
  opacity: 0.22;
}

/* ---- Inner content ---- */
.footer__inner {
  position: relative;
  z-index: 2;
  width: min(1320px, 100%);
  margin: 0 auto;
}
.footer__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  margin-bottom: 110px;
}
.footer__lede {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--fg-soft);
  max-width: 360px;
}
.footer__heading {
  margin: 0 0 24px;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}
.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__links a {
  display: inline-block;
  font-size: 0.9375rem;
  color: var(--fg-soft);
  text-decoration: none;
  transition: color 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.footer__links a:hover {
  color: var(--accent-soft);
  transform: translateX(2px);
}

/* ---- Socials ---- */
.footer__socials {
  display: grid;
  grid-template-columns: repeat(5, 44px);
  gap: 10px;
  margin-bottom: 32px;
}
.footer__social {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.02);
  transition:
    color 300ms cubic-bezier(0.23, 1, 0.32, 1),
    border-color 300ms cubic-bezier(0.23, 1, 0.32, 1),
    background 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.footer__social svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.footer__social:hover {
  color: #fff;
  border-color: rgba(91, 108, 255, 0.55);
  background: rgba(91, 108, 255, 0.1);
  transform: translateY(-2px);
}
.footer__email {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-decoration: none;
  transition: color 300ms cubic-bezier(0.23, 1, 0.32, 1);
  display: inline-block;
}
.footer__email:hover { color: var(--accent-soft); }

/* ---- Footer responsive ---- */
@media (max-width: 880px) {
  .footer { padding: 64px 24px 28px; }
  .footer__columns {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 80px;
  }
  .footer__logo-bg { width: clamp(280px, 95%, 480px); top: 88%; }
}

/* Interactive chrome should never get text-selected on tap. */
.nav-pill__burger, .nav-pill__brand, .nav-links__trigger, .nav-mega__card,
.mobile-menu__link, .mobile-menu__sublink, .mobile-menu__label,
.lang-link {
  -webkit-user-select: none;
  user-select: none;
}