html {
  /* Reserve the scrollbar gutter from the first paint to prevent the header
     (and logo) from shifting when page content finishes loading. */
  scrollbar-gutter: stable;
}

/* Older engines that do not support scrollbar-gutter still need a reserved
   vertical scrollbar so the header never re-centres after the first paint. */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

header a[href="https://app.enc.network/signin"],
header a[href="https://app.enc.network/signup"]{
  border-radius:8px;
  font-size:.875rem;
  font-weight:600;
  line-height:1.25rem;
  transition:background-color .28s cubic-bezier(.2,.7,.2,1),border-color .28s ease,color .28s ease,box-shadow .28s ease,transform .28s cubic-bezier(.2,.7,.2,1);
}
header a[href="https://app.enc.network/signin"]{
  border:1px solid #465fff;
  background:#fff;
  color:#465fff;
}
header a[href="https://app.enc.network/signin"]:hover{
  border-color:#6073ff;
  background:#f4f6ff;
  color:#354be7;
  box-shadow:0 7px 18px -11px rgba(70,95,255,.65);
  transform:translateY(-1px);
}
header a[href="https://app.enc.network/signup"]{
  border:1px solid #465fff;
  background:#465fff;
  color:#fff;
}
header a[href="https://app.enc.network/signup"]:hover{
  border-color:#354be7;
  background:#354be7;
  box-shadow:0 9px 20px -8px rgba(70,95,255,.72);
  transform:translateY(-1px);
}
header a[href="https://app.enc.network/signin"]:active,
header a[href="https://app.enc.network/signup"]:active{
  box-shadow:0 4px 10px -6px rgba(70,95,255,.6);
  transform:translateY(0) scale(.98);
}
header a[href="https://app.enc.network/signin"]:focus-visible,
header a[href="https://app.enc.network/signup"]:focus-visible{
  outline:3px solid rgba(70,95,255,.28);
  outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  header a[href="https://app.enc.network/signin"],
  header a[href="https://app.enc.network/signup"]{transition:none}
}

/* Compact section navigation with a restrained animated squiggle. */
header nav[aria-label="Main navigation"] ul {
  gap: 1.65rem;
}

header nav[aria-label="Main navigation"] a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px 0 8px;
  color: rgba(24, 36, 69, .78);
  text-transform: uppercase;
  letter-spacing: .045em;
  transition: color .28s ease;
}

header nav[aria-label="Mobile navigation"] > ul a {
  text-transform: uppercase;
  letter-spacing: .045em;
}

/* Navigation labels use normal title case rather than all caps. */
header nav[aria-label="Main navigation"] a,
header nav[aria-label="Mobile navigation"] > ul a {
  text-transform: none;
}

/* The home mark is navigation, not a CTA: keep its dimensions stable while
   it receives focus or is pressed. */
header > div:first-child > a[aria-label*="home"],
header > div:first-child > a[aria-label*="home"]:hover,
header > div:first-child > a[aria-label*="home"]:focus,
header > div:first-child > a[aria-label*="home"]:active {
  transform: none !important;
  scale: 1 !important;
  translate: none !important;
}

header > div:first-child > a[aria-label*="home"],
header > div:first-child > a[aria-label*="home"] * {
  animation: none !important;
  transition: none !important;
}

/* Lock the mark's font metrics during the web-font swap.  The header is
   visible before the variable Archivo face finishes loading; explicit
   metrics keep the fallback and final face in the same box and eliminate the
   one-frame logo resize that otherwise reads as a jump on refresh. */
header > div:first-child > a[aria-label*="home"] {
  min-height: 31px;
  line-height: 1;
  transition: opacity .2s ease, filter .2s ease !important;
}

header > div:first-child > a[aria-label*="home"]:hover {
  opacity: .82;
}

header > div:first-child > a[aria-label*="home"]:active {
  opacity: .58;
}

header > div:first-child > a[aria-label*="home"] > span:first-child {
  display: inline-block;
  flex: none;
  white-space: nowrap;
  font-size: 1.9rem !important;
  line-height: .98 !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
  font-synthesis: none;
}

header > div:first-child > a[aria-label*="home"] > span:last-child {
  display: flex;
  flex: none;
  white-space: nowrap;
  font-size: .6rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  font-synthesis: none;
  color: #0d1333 !important;
}

header nav[aria-label="Main navigation"] a::after {
  display: none;
}

/* Keep anchored sections visible below the sticky header when a nav link is
   activated, instead of letting the header cover the first row. */
#sources,
#technologies {
  scroll-margin-top: 76px;
}

header nav[aria-label="Main navigation"] a:hover,
header nav[aria-label="Main navigation"] a[aria-current="page"] {
  color: #465fff;
}

@media (min-width: 1024px) {
  header nav[aria-label="Main navigation"] a:focus-visible {
    color: #465fff;
    outline: 2px solid rgba(70, 95, 255, .22);
    outline-offset: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  header nav[aria-label="Main navigation"] a,
  header nav[aria-label="Main navigation"] a::after {
    transition: none;
  }
}

/* Mobile menu toggle: the SVG follows the supplied MenuToggle path animation,
   so the menu mark morphs continuously instead of swapping two icons. */
@media (max-width: 1023px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  /* Keep the compact control visible even when the desktop auth links are
     removed at tablet/phone widths. */
  header > div:first-child > div:last-child {
    display: flex !important;
    min-width: 40px;
    flex: 0 0 auto;
  }

  #menu-toggle {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 40px;
  }

  /* Auth actions remain available in the expanded menu, so avoid showing a
     second set of buttons beside the toggle on tablet widths. */
  header > div:first-child > div > a[href="https://app.enc.network/signin"],
  header > div:first-child > div > a[href="https://app.enc.network/signup"] {
    display: none !important;
  }

  /* The expanded menu is an overlay anchored to the sticky header. Keeping it
     out of normal flow prevents opening the menu from pushing the Hero and
     changing the page's scroll position. */
  #mobile-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 40;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    box-shadow: 0 14px 28px -20px rgba(18, 25, 75, .45);
  }

  #menu-toggle {
    overflow: hidden;
    transition: background-color .32s ease, border-color .32s ease, box-shadow .32s ease;
  }

  #menu-toggle .menu-toggle-icon {
    display: block;
    width: 20px;
    height: 20px;
    transform-origin: center;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  }

  #menu-toggle .menu-toggle-dash {
    stroke-dasharray: 12 63;
    stroke-dashoffset: 0;
    transition: stroke-dasharray .6s cubic-bezier(.22, .61, .36, 1), stroke-dashoffset .6s cubic-bezier(.22, .61, .36, 1);
  }

  header.menu-open #menu-toggle {
    border-color: rgba(70, 95, 255, .45);
    background: #f4f6ff;
    box-shadow: 0 7px 18px -12px rgba(70, 95, 255, .65);
  }

  header.menu-open #menu-toggle .menu-toggle-icon {
    transform: rotate(-45deg);
  }

  header.menu-open #menu-toggle .menu-toggle-dash {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42px;
  }

  header.menu-open #mobile-menu {
    animation: encMobileMenuIn .34s cubic-bezier(.22, .61, .36, 1) both;
    transform-origin: top center;
  }

  header.menu-open #mobile-menu li {
    animation: encMobileMenuItemIn .32s cubic-bezier(.22, .61, .36, 1) both;
  }

  header.menu-open #mobile-menu li:nth-child(2) { animation-delay: 35ms; }
  header.menu-open #mobile-menu li:nth-child(3) { animation-delay: 70ms; }
  header.menu-open #mobile-menu li:nth-child(4) { animation-delay: 105ms; }

  #mobile-menu > nav > div a {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    transition: background-color .28s cubic-bezier(.2, .7, .2, 1), border-color .28s ease, color .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.2, .7, .2, 1);
  }

  #mobile-menu > nav > div a[href*="/signup"] {
    border: 1px solid #465fff;
    background: #465fff;
    color: #fff;
    box-shadow: 0 7px 18px -11px rgba(70, 95, 255, .7);
  }

  #mobile-menu > nav > div a[href*="/signup"]:hover,
  #mobile-menu > nav > div a[href*="/signup"]:focus-visible {
    border-color: #354be7;
    background: #354be7;
    box-shadow: 0 9px 20px -8px rgba(70, 95, 255, .72);
    transform: translateY(-1px);
  }

  #mobile-menu > nav > div a[href*="/signin"]:hover,
  #mobile-menu > nav > div a[href*="/signin"]:focus-visible {
    background: #f4f6ff;
    color: #354be7;
    box-shadow: 0 7px 18px -11px rgba(70, 95, 255, .65);
    transform: translateY(-1px);
  }

  #mobile-menu > nav > div a:active {
    box-shadow: 0 4px 10px -6px rgba(70, 95, 255, .6);
    transform: translateY(0) scale(.98);
  }
}

@keyframes encMobileMenuIn {
  from { opacity: 0; transform: translateY(-8px) scaleY(.96); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}

@keyframes encMobileMenuItemIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  header.menu-open #mobile-menu,
  header.menu-open #mobile-menu li,
  #menu-toggle .menu-toggle-icon,
  #menu-toggle .menu-toggle-dash,
  #mobile-menu > nav > div a {
    animation: none;
    transition: none !important;
  }
}

/* On phone-width screens Sign Up lives in the expanded menu, keeping the
   compact header focused on the logo and toggle control. */
@media (max-width: 767px) {
  html,
  body {
    /* Keep the page canvas white; the navy tone belongs to the footer and
       CTA section only, so top overscroll never reveals a footer-coloured
       block above the header. */
    background-color: #fff;
  }

  header > div:first-child > div > a[href="https://app.enc.network/signup"] {
    display: none !important;
  }
}


/* Keep inline country flags flush to their rounded containers. */
.geo-flag > svg { width: 100%; height: 100%; display: block; }