/* Shared navigation for the home and technical pages in both languages. */
.topbar{

  position:sticky;top:0;z-index:50;

  background:rgba(243,245,248,.92);backdrop-filter:blur(8px);

  border-bottom:1px solid var(--line);

}

.topbar-in{

  max-width:1080px;margin:0 auto;padding:14px 24px;

  display:flex;align-items:center;gap:24px;flex-wrap:wrap;

}

.brand{

  font-family:var(--font-mono);font-weight:500;font-size:.95rem;

  letter-spacing:.06em;color:var(--ink);text-decoration:none;

  display:flex;align-items:center;gap:10px;

}

.rec-dot{

  width:9px;height:9px;border-radius:50%;background:var(--rec,#E23A2E);

  animation:blink 1.6s steps(1) infinite;

}

.brand-logo{height:34px;width:auto;display:block;mix-blend-mode:multiply}

@keyframes blink{50%{opacity:.25}}

nav.main{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}

nav.main a{

  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.12em;

  text-transform:uppercase;text-decoration:none;color:var(--ink-soft);

  padding:4px 0;border-bottom:2px solid transparent;

}

nav.main a:hover{color:var(--blue);border-bottom-color:var(--blue)}

.nav-cta{

  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em;

  text-transform:uppercase;text-decoration:none;

  background:var(--blue);color:#fff;padding:9px 16px;border-radius:var(--radius);

}

.nav-cta:hover{background:var(--deep)}

.lang{

  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;

  text-decoration:none;color:var(--ink-soft);border:1px solid var(--line);

  border-radius:var(--radius);padding:8px 10px;flex:0 0 auto;

}

.lang:hover{color:var(--blue);border-color:var(--blue)}

.menu-cta{display:none}

.nav-toggle{

  display:none;flex-direction:column;justify-content:center;align-items:center;

  gap:4px;width:44px;height:40px;background:none;border:1px solid var(--line);

  border-radius:var(--radius);cursor:pointer;padding:0;

}

.nav-toggle span{

  display:block;width:18px;height:2px;background:var(--ink);

  border-radius:1px;transition:transform .2s ease,opacity .2s ease;

}

.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}

.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}

.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1060px){

  .topbar{position:sticky}

  .topbar-in{flex-wrap:nowrap;gap:12px;position:relative}

  nav.main{

    position:absolute;top:100%;left:0;right:0;margin:0;

    display:none;flex-direction:column;gap:0;

    background:var(--paper);border-bottom:1px solid var(--line);

    box-shadow:0 14px 28px rgba(22,24,29,.10);padding:6px 0 8px;

  }

  nav.main.open{display:flex}

  nav.main a{

    padding:13px 24px;font-size:.85rem;border-bottom:none;

  }

  nav.main a:hover{color:var(--blue);border-bottom-color:transparent;background:var(--blue-tint)}

  .menu-cta{display:block;color:var(--blue);font-weight:500}

  .nav-cta{margin-left:auto;padding:8px 12px;font-size:.74rem}

  .nav-toggle{display:inline-flex;flex:0 0 auto}

}

@media (max-width:460px){

  .topbar .nav-cta{display:none}

  .lang{margin-left:auto}

}
nav.main a[aria-current="page"],nav.main a[aria-current="location"]{color:var(--blue);border-bottom-color:var(--blue)}
.topbar a:focus-visible,.topbar button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.rec-dot{animation:none}.nav-toggle span{transition:none}}