/* =========================================================================
   PROSONIT — site chrome (sticky top nav + skip link)
   Lives inside .pro2-site, so it inherits the locked design tokens
   (--pro2-*). Kept deliberately small; the routes own everything else.
   ========================================================================= */

.pro2-skip {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: .65rem 1.1rem;
  background: var(--pro2-signal-deep, #008ECB);
  color: #fff;
  font-family: var(--pro2-font-display, system-ui), sans-serif;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: transform .18s var(--pro2-ease, ease);
}
.pro2-skip:focus { transform: translate(-50%, 0); }

/* ---- sticky bar ---------------------------------------------------------- */
.pro2-chrome {
  position: sticky;
  top: 0;
  z-index: 120;
  background: color-mix(in srgb, var(--pro2-bg, #070A12) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--pro2-border, rgba(140,170,220,.12));
  transition: background .25s var(--pro2-ease, ease), border-color .25s var(--pro2-ease, ease);
}
.pro2-chrome.is-scrolled {
  background: color-mix(in srgb, var(--pro2-bg, #070A12) 92%, transparent);
  border-bottom-color: var(--pro2-border-strong, rgba(140,170,220,.22));
  box-shadow: 0 12px 30px -22px rgba(0,0,0,.9);
}

.pro2-chrome-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  height: 70px;
}

/* ---- brand --------------------------------------------------------------- */
.pro2-chrome-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex: 0 0 auto;
  border-radius: 6px;
  text-decoration: none;
}
.pro2-chrome-logo {
  height: 32px;
  width: auto;
  display: block;
  opacity: .95;
  transition: opacity .2s var(--pro2-ease, ease);
}
.pro2-chrome-wordmark {
  font-family: var(--pro2-font-display, system-ui), sans-serif;
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: .015em;
  line-height: 1;
  color: var(--pro2-text, #EEF3FB);
}
.pro2-chrome-brand:hover .pro2-chrome-logo { opacity: 1; }
.pro2-chrome-brand:hover .pro2-chrome-wordmark { color: var(--pro2-signal-bright, #4FB8EE); }

/* ---- desktop nav --------------------------------------------------------- */
.pro2-chrome-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.1rem);
  margin-left: auto;
  margin-right: clamp(1rem, 2.4vw, 2.1rem);
}
.pro2-chrome-link {
  position: relative;
  color: var(--pro2-dim, #AEBBD0);
  font-family: var(--pro2-font-display, system-ui), sans-serif;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  padding: .35rem 0;
  transition: color .18s var(--pro2-ease, ease);
}
.pro2-chrome-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--pro2-signal, #18A0E0);
  transition: transform .22s var(--pro2-ease, ease);
}
.pro2-chrome-link:hover,
.pro2-chrome-link:focus-visible { color: var(--pro2-text, #EEF3FB); }
.pro2-chrome-link:hover::after,
.pro2-chrome-link:focus-visible::after,
.pro2-chrome-link[aria-current="page"]::after { transform: scaleX(1); }
.pro2-chrome-link[aria-current="page"] { color: var(--pro2-text, #EEF3FB); }

/* ---- actions ------------------------------------------------------------- */
.pro2-chrome-actions { display: flex; align-items: center; gap: .65rem; flex: 0 0 auto; }
.pro2-chrome-cta {
  padding: .52rem .95rem !important;
  font-size: .85rem !important;
}

/* ---- burger (mobile only) ------------------------------------------------ */
.pro2-chrome-burger {
  display: none;
  width: 42px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--pro2-border-strong, rgba(140,170,220,.22));
  border-radius: 8px;
  background: var(--pro2-panel, #0D1322);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.pro2-chrome-burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--pro2-text, #EEF3FB);
  transition: transform .2s var(--pro2-ease, ease), opacity .2s var(--pro2-ease, ease);
}
.pro2-chrome-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.pro2-chrome-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ---- mobile sheet -------------------------------------------------------- */
.pro2-chrome-sheet {
  border-bottom: 1px solid var(--pro2-border, rgba(140,170,220,.12));
  background: color-mix(in srgb, var(--pro2-bg-2, #0A0E1A) 96%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.pro2-chrome-sheet[hidden] { display: none; }
.pro2-chrome-sheet-nav {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-width: var(--pro2-maxw, 1200px);
  margin: 0 auto;
  padding: .75rem var(--pro2-gutter, 1.5rem) 1.1rem;
}
.pro2-chrome-sheet-link {
  display: block;
  color: var(--pro2-text, #EEF3FB);
  font-family: var(--pro2-font-display, system-ui), sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  padding: .7rem .25rem;
  border-bottom: 1px solid var(--pro2-border, rgba(140,170,220,.10));
}
.pro2-chrome-sheet-link:last-of-type { border-bottom: 0; }
.pro2-chrome-sheet-cta { margin-top: .75rem; text-align: center; justify-content: center; }

@media (max-width: 880px) {
  .pro2-chrome-nav { display: none; }
  .pro2-chrome-cta { display: none !important; }
  .pro2-chrome-burger { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .pro2-skip, .pro2-chrome, .pro2-chrome-link::after, .pro2-chrome-burger span { transition: none; }
}