/* Public white navbar shared by anonymous pages (landing, card activation).
   Rules mirror the Navbar section of css/landing_v2.css so every public
   surface renders the identical bar; the tokens below are the subset those
   rules need. Keep the two in sync when the brand tokens change. */

@font-face {
  font-family: 'Gotham'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/gotham-400.3ae97c80fba3.woff2") format('woff2');
}
@font-face {
  font-family: 'Gotham'; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/gotham-700.107632a9e6c9.woff2") format('woff2');
}
@font-face {
  font-family: 'Gotham'; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/gotham-black.1604f56333f1.woff2") format('woff2');
}

:root {
  --font-brand: 'Gotham', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --teal:      #247088;
  --teal-700:  #1a5568;
  --teal-600:  #1f6178;
  --teal-100:  #d7e8ef;
  --teal-50:   #eef5f8;

  --surface:   #FFFFFF;
  --ink-2:     #43616D;
  --line:      #DCE8ED;
  --line-2:    #C6D9E1;

  --sh-2: 0 10px 24px -14px rgba(16,51,63,.22);
}

/* ---------- Navbar ---------- */
.navbar-custom {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: .9rem 0;
  position: sticky; top: 0; z-index: 100;
  font-family: var(--font-brand);
}
.navbar-custom.scrolled { box-shadow: var(--sh-2); }
.navbar-custom .navbar-brand img { height: 34px; }
.nav-auth-link {
  color: var(--ink-2) !important; font-weight: 700; padding: .55rem 1rem !important;
  border: 1px solid transparent; border-radius: 7px; transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.nav-auth-link:hover { color: var(--teal) !important; background: var(--teal-50); border-color: var(--teal-100); }
.nav-auth-link-primary {
  background: var(--teal) !important; border-color: var(--teal) !important; color: #fff !important;
  box-shadow: 0 8px 18px -10px rgba(36,112,136,.5);
}
.nav-auth-link-primary:hover { background: var(--teal-700) !important; border-color: var(--teal-700) !important; color: #fff !important; }