/* ============================================================
   NAV, FOOTER, GENERIC SECTION LAYOUT
   ============================================================ */

.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 501;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px 1px rgba(138, 245, 255, 0.5);
  transform-origin: left;
}

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding-top: var(--safe-top);
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}

.site-nav.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-6);
  transition: margin var(--dur-med) var(--ease-out);
}

.site-nav.is-solid .container {
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-3);
}

/* Brand and language switcher float as two independent capsules rather
   than sharing one bar — each gets its own glass pill once scrolled. */
.brand,
.lang-toggle {
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  transition: background var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}

.site-nav.is-solid .brand,
.site-nav.is-solid .lang-toggle {
  background: rgba(7, 7, 11, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: var(--line-strong);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.65);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1.1em;
}
.brand span {
  position: relative;
  top: -0.05em;
}
.brand::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  /* Scoped back to the original accent blue — --accent itself was changed
     site-wide, but this dot specifically should stay as it was. */
  background: #5b6cff;
  box-shadow: 0 0 12px 2px rgba(91,108,255,0.8);
  flex: none;
  animation: brand-breathe 2.6s var(--ease-in-out) infinite;
}
@keyframes brand-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.65; }
}

.nav-actions { display: flex; align-items: center; gap: var(--sp-4); }
.nav-actions .btn-primary { font-size: 0.9rem; }

.lang-toggle {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}
.lang-toggle button {
  padding: 0.4em 0.85em;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang-toggle button:hover { color: var(--ink); }
.lang-toggle button.is-active {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Section rhythm */
.section { position: relative; padding-block: var(--sp-32); }
.section-head { max-width: 640px; margin-bottom: var(--sp-16); }
.section-head .eyebrow { display: block; margin-bottom: var(--sp-3); }
.section-head h2 { margin-top: var(--sp-3); }
.section-head p { margin-top: var(--sp-4); color: var(--ink-dim); font-size: var(--fs-body); }

footer.site-footer {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-12);
  color: var(--ink-faint);
  font-size: var(--fs-small);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  align-items: center;
  justify-content: space-between;
}
.footer-links { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.footer-links a:hover { color: var(--ink-dim); }

/* Route rail (dots indicating scroll progress through hero journey) */
.route-rail {
  position: fixed;
  right: max(var(--sp-8), var(--safe-right));
  top: 50%;
  transform: translateY(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
}
.route-rail.is-visible { opacity: 1; }
.route-rail .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.route-rail .dot.is-active { background: var(--accent-2); transform: scale(1.6); }

@media (max-width: 860px) {
  .route-rail { display: none; }
}