/* Global box-sizing lives in tokens.css; keep local reset for header subtree hygiene */
body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--text-main);
  font-family: var(--font-main);
}

/* scroll lock handled in tokens.css + header.js */

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 1px solid var(--header-border);
  transition:
    background-color var(--motion-base),
    border-color var(--motion-base),
    color var(--motion-base);
}

.header.is-scrolled {
  background: var(--header-bg);
}

.header[data-state="menu"],
.header.is-menu-open {
  background: var(--header-panel-bg-solid);
  border-bottom-color: var(--header-panel-border);
}

.header__container {
  width: 100%;
  height: var(--header-height-desktop);
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 32px;
}

.header__left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.header__logo-circle {
  position: relative;
  width: var(--header-avatar-size);
  height: var(--header-avatar-size);
  flex: 0 0 var(--header-avatar-size);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.header__logo-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--header-avatar-border);
  pointer-events: none;
}

.header__logo-circle::before {
  transition: border-color .2s ease;
}

.header__logo-circle:hover::before {
  border-color: var(--header-text);
}

.header__logo-circle-inner {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--header-avatar-bg);
  overflow: hidden;
}

.header__logo-circle img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.06);
  transform-origin: center top;
}

.header__brand {
  margin-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  color: var(--header-text);
  text-decoration: none;
}

.header__brand:visited,
.header__brand:hover,
.header__brand:active,
.header__brand:focus {
  color: var(--header-text);
  text-decoration: none;
}

.header__title {
  color: var(--header-text);
  font-size: var(--fs-header-title);
  font-weight: 500;
  line-height: var(--lh-menu);
  letter-spacing: var(--letter-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header__subtitle {
  color: var(--header-muted);
  font-size: var(--fs-header-subtitle);
  font-weight: 400;
  line-height: var(--lh-menu);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header__center {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  padding-left: 24px;
  padding-right: 18px;
}

.header__nav {
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.header__link {
  position: relative;
}

.header__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}

.header__library::after {
  right: 43px;
}

.header__link:hover::after,
.header__link.is-active::after {
  transform: scaleX(1);
}

.header__link {
  margin-right: 30px;
  color: var(--header-text);
  text-decoration: none;
  font-size: var(--fs-header-nav);
  font-weight: 400;
  line-height: var(--lh-menu);
  letter-spacing: var(--letter-text);
  transition:
    color var(--motion-fast),
    opacity var(--motion-fast);
}

.header__link:visited,
.header__link:hover,
.header__link:active,
.header__link:focus {
  text-decoration: none;
}

.header__link:hover {
  color: var(--header-text);
}

.header__nav > .header__link[data-i18n="blog"] {
  margin-right: 0;
}

.header__divider {
  width: 1px;
  height: 22px;
  flex: 0 0 auto;
  background: var(--header-divider);
}

.header__nav > .header__divider {
  margin-left: 15px;
  margin-right: 15px;
}

.header__library {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 0;
}

.header__badge {
  width: 37px;
  height: 19px;
  border-radius: var(--radius-sm);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--badge-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-header-badge);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.header__right {
  display: flex;
  justify-content: flex-end;
}

.header__right-group {
  display: flex;
  align-items: center;
}

.header__right-group > .header__divider {
  margin-right: 15px;
}

.header__search,
.header__theme {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--header-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity var(--motion-fast);
}

.header__search {
  margin: 0 20px 0 0;
}

.header__theme {
  margin: 0 15px 0 0;
  position: relative;
}

.header__search:hover,
.header__theme:hover,
.header__lang-toggle:hover {
  opacity: .65;
}

.header__lang {
  position: relative;
}

.header__lang-icon {
  display: block;
  width: 20px;
  height: 20px;
  color: var(--header-text);
}

.header__lang-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header__lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 52px;
  padding: 6px;
  border: 1px solid var(--header-border);
  border-radius: var(--radius-md);
  background: var(--header-bg-solid, var(--bg));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
  z-index: 40;
}

.header__lang-menu[hidden] {
  display: none;
}

.header__lang-option {
  min-width: 40px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--header-text);
  font-size: var(--fs-header-lang);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  opacity: .55;
  transition: opacity var(--motion-fast), background var(--motion-fast);
}

.header__lang-option:hover,
.header__lang-option.is-active {
  opacity: 1;
}

.header__lang-option.is-active {
  background: color-mix(in srgb, var(--header-text) 8%, transparent);
}

.header__search img,
.header__adaptive-search img {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

.header__theme-icon {
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  margin: auto;
  color: var(--header-text);
}

.header__theme-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header__theme-icon,
.header__panel-theme-icon {
  transition:
    opacity .3s ease,
    transform .5s var(--ease-spring),
    filter var(--motion-fast) !important;
}

.header__theme-icon--sun,
.header__panel-theme-icon--sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.header__theme-icon--moon,
.header__panel-theme-icon--moon {
  opacity: 0;
  transform: rotate(-90deg) scale(.5);
}

html[data-theme="light"] .header__theme-icon--sun,
html[data-theme="light"] .header__panel-theme-icon--sun {
  opacity: 0;
  transform: rotate(90deg) scale(.5);
}

html[data-theme="light"] .header__theme-icon--moon,
html[data-theme="light"] .header__panel-theme-icon--moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.header__lang-toggle {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--header-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity var(--motion-fast);
}

.header__cta {
  min-width: 156px;
  height: 36px;
  padding: 0 16px 0 18px;
  margin-right: 15px;
  border-radius: var(--radius-md);
  background: var(--header-cta-bg);
  background-origin: border-box;
  border: 1px solid var(--header-cta-border);
  box-shadow: var(--green-button-shadow);
  color: var(--header-cta-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none !important;
  font-size: var(--fs-header-cta);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--letter-button);
  transition:
    background var(--motion-fast),
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s var(--ease-out),
    opacity var(--motion-fast);
}

.header__cta-tg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header__cta:active,
.header__panel-cta:active {
  transform: scale(.97);
}

.header__cta:visited,
.header__cta:hover,
.header__cta:active,
.header__cta:focus {
  color: var(--header-cta-text);
  text-decoration: none !important;
}

.header__cta:hover {
  background: var(--header-cta-bg-hover);
  border-color: var(--header-cta-border-hover);
}

.header__adaptive-controls,
.header__panel {
  display: none;
}

.header[data-scheme="dark"] .header__search img,
.header[data-scheme="dark"] .header__adaptive-search img,
.header[data-scheme="dark"] .header__burger-icon {
  filter: brightness(0) invert(1) !important;
}

.header[data-scheme="light"] .header__search img,
.header[data-scheme="light"] .header__adaptive-search img,
.header[data-scheme="light"] .header__burger-icon {
  filter: none !important;
}

.header__theme-icon,
.header__search img,
.header__adaptive-search img,
.header__burger-icon {
  transition:
    filter var(--motion-fast),
    opacity var(--motion-fast),
    transform var(--motion-fast);
}

@media (max-width: 1359px) {
  .header__container {
    height: var(--header-height-tablet);
    padding-left: var(--site-gutter-tablet);
    padding-right: var(--site-gutter-tablet);
    grid-template-columns: 1fr auto;
    column-gap: 12px;
  }

  .header__center,
  .header__right {
    display: none;
  }

  .header__adaptive-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--header-action-gap);
  }

  .header__adaptive-search,
  .header__burger {
    width: var(--header-action-size);
    height: var(--header-action-size);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--header-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .header__adaptive-search img {
    width: var(--header-action-size);
    height: var(--header-action-size);
  }

  .header__burger {
    position: relative;
  }

  .header__burger-icon {
    position: absolute;
    inset: 0;
    width: var(--header-action-size);
    height: var(--header-action-size);
    margin: auto;
  }

  .header__burger-icon {
    transition:
      opacity .25s ease,
      transform .45s var(--ease-spring),
      filter var(--motion-fast) !important;
  }

  .header__burger-icon--close {
    opacity: 0;
    transform: rotate(-90deg) scale(.6);
  }

  .header__burger.is-open .header__burger-icon--burger {
    opacity: 0;
    transform: rotate(90deg) scale(.6);
  }

  .header__burger.is-open .header__burger-icon--close {
    opacity: 1;
    transform: none;
  }

  .header__panel {
    display: block;
    position: fixed;
    top: calc(var(--header-height-tablet) + env(safe-area-inset-top, 0px));
    left: 0;
    width: 100%;
    height: calc(100svh - var(--header-height-tablet) - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - var(--header-height-tablet) - env(safe-area-inset-top, 0px));
    background: var(--header-panel-bg-solid);
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition:
      opacity .28s ease,
      visibility 0s linear .28s;
  }

  .header__panel.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .28s ease;
  }

  .header__panel-link,
  .header__panel-lang,
  .header__panel-bottom {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity .2s ease,
      transform .2s ease;
  }

  .header__panel.active .header__panel-link,
  .header__panel.active .header__panel-lang,
  .header__panel.active .header__panel-bottom {
    opacity: 1;
    transform: none;
    transition:
      opacity .5s var(--ease-out),
      transform .5s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 35ms + 60ms);
  }

  .header__panel-link:nth-child(1) { --i: 0; }
  .header__panel-link:nth-child(2) { --i: 1; }
  .header__panel-link:nth-child(3) { --i: 2; }
  .header__panel-link:nth-child(4) { --i: 3; }
  .header__panel-link:nth-child(5) { --i: 4; }
  .header__panel-link:nth-child(6) { --i: 5; }
  .header__panel-link:nth-child(7) { --i: 6; }
  #mobileThemeToggle { --i: 7; }
  #mobileLanguagePicker { --i: 8; }
  .header__panel-bottom { --i: 9; }

  .header__panel-link.is-active .header__panel-label {
    font-weight: 500;
  }

  .header__panel-badge {
    justify-self: end;
  }

  .header__panel-sheet {
    width: 100%;
    height: 100%;
    background: var(--header-panel-bg-solid);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .header__panel-divider {
    width: 100%;
    height: 1px;
    min-height: 1px;
    background: var(--header-panel-border);
    flex-shrink: 0;
  }

  .header__panel-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Hit targets go edge-to-edge; visual inset is on the rows themselves */
    padding-left: 0;
    padding-right: 0;
  }

  .header__panel-divider--middle {
    margin-top: 12px;
    margin-left: var(--site-gutter-tablet);
    margin-right: var(--site-gutter-tablet);
    width: auto;
  }

  .header__panel-nav {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
  }

  .header__panel-link,
  .header__panel-lang {
    width: 100%;
    min-height: 56px;
    padding: 0 var(--site-gutter-tablet);
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    column-gap: 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--header-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .header__panel-link:visited,
  .header__panel-link:hover,
  .header__panel-link:active,
  .header__panel-link:focus {
    color: var(--header-text);
    text-decoration: none;
  }

  .header__panel-link:hover .header__panel-label,
  .header__panel-lang:hover .header__panel-lang-text {
    opacity: .72;
  }

  .header__panel-icon,
  .header__panel-theme-icons {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--header-text);
  }

  /* Same stroke language as services — no boxes; glyphs from icons.js */
  .header__panel-icon svg,
  .header__panel-theme-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .header__panel-label,
  .header__panel-lang-text {
    color: var(--header-text);
    font-size: var(--fs-mobile-menu-item);
    font-weight: 400;
    line-height: var(--lh-menu);
  }

  .header__panel-theme-icons {
    position: relative;
  }

  .header__panel-theme-icon {
    position: absolute;
    inset: 0;
    margin: auto;
  }

  .header__panel-lang--picker {
    cursor: default;
  }

  .header__panel-lang-codes {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-self: end;
  }

  .header__panel-lang-code {
    min-width: 34px;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--header-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    opacity: .45;
    transition: opacity var(--motion-fast), background var(--motion-fast);
  }

  .header__panel-lang-code:hover,
  .header__panel-lang-code.is-active {
    opacity: 1;
  }

  .header__panel-lang-code.is-active {
    background: color-mix(in srgb, var(--header-text) 8%, transparent);
  }

  .header__panel-bottom {
    position: sticky;
    bottom: 0;
    width: 100%;
    padding: 20px var(--site-gutter-tablet) calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--header-panel-bg-solid);
    flex-shrink: 0;
  }

  .header__panel-cta {
    width: 100%;
    min-height: 52px;
    border-radius: var(--radius-lg);
    background: var(--header-panel-cta-bg);
    background-origin: border-box;
    border: 1px solid var(--header-panel-cta-border);
    box-shadow: var(--green-button-shadow);
    color: var(--header-panel-cta-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none !important;
    font-size: var(--fs-mobile-menu-cta);
    font-weight: 500;
    line-height: 1;
    transition:
      background var(--motion-fast),
      border-color var(--motion-fast),
      color var(--motion-fast),
      opacity var(--motion-fast);
  }

  .header__panel-cta .header__cta-tg {
    width: 17px;
    height: 17px;
  }

  .header__panel-cta:visited,
  .header__panel-cta:hover,
  .header__panel-cta:active,
  .header__panel-cta:focus {
    color: var(--header-panel-cta-text);
    text-decoration: none !important;
  }

  .header__panel-cta:hover {
    background: var(--header-panel-cta-bg-hover);
    border-color: var(--header-panel-cta-border-hover);
  }
}

@media (max-width: 767px) {
  .header__container {
    height: var(--header-height-mobile);
    padding-left: var(--site-gutter-mobile);
    padding-right: var(--site-gutter-mobile);
  }

  .header__logo-circle {
    width: var(--header-avatar-size-mobile);
    height: var(--header-avatar-size-mobile);
    flex-basis: var(--header-avatar-size-mobile);
  }

  .header__brand {
    margin-left: 12px;
  }

  .header__title {
    font-size: var(--fs-mobile-brand-title);
  }

  .header__subtitle {
    font-size: var(--fs-mobile-brand-subtitle);
  }

  /* action size / gap come from tokens (--header-action-*) */

  .header__panel {
    top: calc(var(--header-height-mobile) + env(safe-area-inset-top, 0px));
    height: calc(100svh - var(--header-height-mobile) - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - var(--header-height-mobile) - env(safe-area-inset-top, 0px));
  }

  .header__panel-link,
  .header__panel-lang {
    padding-left: var(--site-gutter-mobile);
    padding-right: var(--site-gutter-mobile);
  }

  .header__panel-bottom {
    padding-left: var(--site-gutter-mobile);
    padding-right: var(--site-gutter-mobile);
  }

  .header__panel-divider--middle {
    margin-left: var(--site-gutter-mobile);
    margin-right: var(--site-gutter-mobile);
    width: auto;
  }
}

@media (max-width: 390px) {
  .header__container {
    padding-left: var(--site-gutter-mobile-sm);
    padding-right: var(--site-gutter-mobile-sm);
  }

  .header__panel-link,
  .header__panel-lang {
    padding-left: var(--site-gutter-mobile-sm);
    padding-right: var(--site-gutter-mobile-sm);
  }

  .header__panel-bottom {
    padding-left: var(--site-gutter-mobile-sm);
    padding-right: var(--site-gutter-mobile-sm);
  }

  .header__panel-divider--middle {
    margin-left: var(--site-gutter-mobile-sm);
    margin-right: var(--site-gutter-mobile-sm);
  }
}

@media (max-width: 360px) {
  .header__title {
    font-size: 15px;
  }

  .header__subtitle {
    font-size: 10px;
  }

  .header__brand {
    margin-left: 10px;
  }
}