/* ==========================================================================
   Wenti Labs — shared navbar (standalone)
   Mirrors the revamped nav from revamp.css so every page's navbar is identical,
   without pulling in revamp.css's global resets (which would restyle the page).
   Everything here is scoped to .wl-nav / .wl-container / .btn helpers.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

:root {
  --brand: #5e50a0;
  --brand-strong: #4a3f86;
  --brand-soft: #7866cc;
  --brand-tint: #f3f0ff;
  --brand-tint-2: #e7e3fb;
  --brand-ring: rgba(94, 80, 160, 0.35);
  --ink: #14121f;
  --ink-2: #2c2940;
  --muted: #5b5870;
  --line: #e7e6ee;
  --line-strong: #d8d6e4;
  --surface: #ffffff;
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 32px;
  --container: 1200px;
  --gutter: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 18, 31, 0.06), 0 1px 3px rgba(20, 18, 31, 0.04);
  --shadow: 0 8px 24px rgba(20, 18, 31, 0.08);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
}

/* layout helper (scoped name, won't clash with Webflow) */
.wl-nav .wl-container,
.wl-container.wl-nav-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* buttons used inside the nav */
.wl-nav .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1;
  padding: 15px 24px; border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wl-nav .btn:active { transform: translateY(1px); }
.wl-nav .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 18px var(--brand-ring); }
.wl-nav .btn-primary:hover { background: var(--brand-strong); box-shadow: 0 10px 26px var(--brand-ring); }
.wl-nav .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.wl-nav .btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }

/* navigation */
.wl-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(231, 230, 238, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.wl-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--shadow-sm);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wl-nav { background: rgba(255, 255, 255, 0.95); }
}
.wl-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.wl-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); text-decoration: none; }
.wl-brand img { width: 34px; height: 34px; display: block; }
.wl-nav-links { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.wl-nav-links li { margin: 0; }
.wl-nav-links a { font-family: var(--font-body); font-weight: 500; color: var(--ink-2); font-size: 0.98rem; text-decoration: none; transition: color var(--dur) var(--ease); }
.wl-nav-links a:hover, .wl-nav-links a[aria-current="page"] { color: var(--brand); }
.wl-nav-actions { display: flex; align-items: center; gap: var(--space-4); }
.wl-nav-actions .btn { padding: 11px 18px; font-size: 0.95rem; }

.wl-nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong);
  background: #fff; border-radius: 12px; cursor: pointer; position: relative;
}
.wl-nav-toggle span, .wl-nav-toggle span::before, .wl-nav-toggle span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px;
  background: var(--ink); border-radius: 2px; transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.wl-nav-toggle span::before { content: ""; transform: translate(-50%, -7px); }
.wl-nav-toggle span::after { content: ""; transform: translate(-50%, 5px); }

@media (max-width: 720px) {
  .wl-nav-links, .wl-nav-actions .btn-ghost { display: none; }
  .wl-nav-toggle { display: inline-grid; place-items: center; }
  .wl-nav.is-open .wl-nav-links {
    display: flex; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding: var(--space-3);
  }
  .wl-nav.is-open .wl-nav-links a { padding: 14px var(--space-4); border-radius: 10px; }
  .wl-nav.is-open .wl-nav-toggle span { background: transparent; }
  .wl-nav.is-open .wl-nav-toggle span::before { transform: translate(-50%, 0) rotate(45deg); }
  .wl-nav.is-open .wl-nav-toggle span::after { transform: translate(-50%, 0) rotate(-45deg); }
}