/* ════════════════════════════════════════════════════════════════════
   Shared button system — polished, signature Vantway treatment
   Loaded after each page's inline <style> so it overrides the
   page-local btn-primary / btn-ghost / btn-primary-dark blocks.
   No !important — relies on source-order cascade.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --vw-btn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vw-btn-blue: #2D7DD2;
  --vw-btn-blue-hi: #3F92E6;
  --vw-btn-sky: #A8C8F0;
}

/* ── PRIMARY (small / nav) ──────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #3489DC 0%, #2870C2 100%);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 10px 22px;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(168, 200, 240, 0.32);
  box-shadow:
    0 2px 10px rgba(45, 125, 210, 0.38),
    0 1px 2px rgba(45, 125, 210, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition:
    background 0.30s var(--vw-btn-ease),
    transform 0.25s var(--vw-btn-ease),
    box-shadow 0.35s var(--vw-btn-ease),
    border-color 0.30s var(--vw-btn-ease);
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s var(--vw-btn-ease);
  pointer-events: none;
  z-index: -1;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #3F92E6 0%, #2D7DD2 100%);
  transform: translateY(-1px);
  border-color: rgba(168, 200, 240, 0.55);
  box-shadow:
    0 10px 26px rgba(45, 125, 210, 0.50),
    0 2px 6px rgba(45, 125, 210, 0.25),
    0 0 22px rgba(168, 200, 240, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover::after { transform: translateX(100%); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus-visible {
  outline: 2px solid var(--vw-btn-sky);
  outline-offset: 3px;
}

/* ── PRIMARY DARK (large / hero CTA) ───────────────────────────────── */
.btn-primary-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #3489DC 0%, #2870C2 100%);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(168, 200, 240, 0.32);
  box-shadow:
    0 2px 12px rgba(45, 125, 210, 0.40),
    0 1px 2px rgba(45, 125, 210, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition:
    background 0.30s var(--vw-btn-ease),
    transform 0.25s var(--vw-btn-ease),
    box-shadow 0.35s var(--vw-btn-ease),
    border-color 0.30s var(--vw-btn-ease);
}
.btn-primary-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.75s var(--vw-btn-ease);
  pointer-events: none;
  z-index: -1;
}
.btn-primary-dark:hover {
  background: linear-gradient(180deg, #3F92E6 0%, #2D7DD2 100%);
  transform: translateY(-1px);
  border-color: rgba(168, 200, 240, 0.55);
  box-shadow:
    0 12px 30px rgba(45, 125, 210, 0.50),
    0 4px 10px rgba(45, 125, 210, 0.22),
    0 0 28px rgba(168, 200, 240, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary-dark:hover::after { transform: translateX(100%); }
.btn-primary-dark:active { transform: translateY(0); }
.btn-primary-dark:focus-visible {
  outline: 2px solid var(--vw-btn-sky);
  outline-offset: 3px;
}

/* ── GHOST (secondary) ─────────────────────────────────────────────── */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(168, 200, 240, 0.10) 0%, rgba(45, 125, 210, 0.06) 100%);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 10px 22px;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: 0.01em;
  border: 1px solid rgba(168, 200, 240, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 8px rgba(10, 22, 40, 0.30);
  cursor: pointer;
  transition:
    background 0.30s var(--vw-btn-ease),
    color 0.30s ease,
    border-color 0.30s ease,
    box-shadow 0.30s var(--vw-btn-ease),
    transform 0.25s var(--vw-btn-ease);
}
.btn-ghost:hover {
  background: linear-gradient(180deg, rgba(168, 200, 240, 0.18) 0%, rgba(45, 125, 210, 0.12) 100%);
  color: #fff;
  border-color: rgba(168, 200, 240, 0.55);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 4px 14px rgba(45, 125, 210, 0.30),
    0 0 24px rgba(168, 200, 240, 0.20);
}
.btn-ghost:active { transform: translateY(0); }
.btn-ghost:focus-visible {
  outline: 2px solid rgba(168, 200, 240, 0.65);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-primary-dark,
  .btn-ghost {
    transition: none !important;
  }
  .btn-primary::after,
  .btn-primary-dark::after {
    display: none;
  }
  .btn-primary:hover,
  .btn-primary-dark:hover,
  .btn-ghost:hover {
    transform: none !important;
  }
}

/* ── NAV LOGO (top-left wordmark + icon) ──────────────────────────────
   Hover glow lives on the shapes themselves: drop-shadow on the icon,
   text-shadow on the wordmark. No bounding box, no clip, no sweep —
   the rectangular shimmer was creating visible rounded-rect edges
   around the logo. Applies on every page via the shared nav. */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  position: relative;
}
.nav-logo__icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 0 rgba(45, 125, 210, 0));
  transition: filter 0.40s var(--vw-btn-ease);
}
.nav-logo__word {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow: 0 0 0 rgba(168, 200, 240, 0);
  transition: text-shadow 0.40s var(--vw-btn-ease);
}
.nav-logo:hover .nav-logo__icon {
  filter:
    drop-shadow(0 0 12px rgba(45, 125, 210, 0.55))
    drop-shadow(0 0 24px rgba(168, 200, 240, 0.22));
}
.nav-logo:hover .nav-logo__word {
  text-shadow:
    0 0 18px rgba(168, 200, 240, 0.32),
    0 0 36px rgba(45, 125, 210, 0.15);
}
.nav-logo:focus-visible {
  outline: 2px solid var(--vw-btn-sky);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-logo__icon,
  .nav-logo__word {
    transition: none !important;
  }
}