/* Shared visual shell for the redesigned pages. */
:root {
  --gold: #F0A202;
  --gold-light: #FFC24B;
  --dark: #071426;
  --dark2: #0B1F35;
  --dark3: #12304F;
  --dark4: #1B4570;
  --text: #DDE7F1;
  --text-muted: #A2B8CC;
  --border: rgba(162,184,204,.22);
  --radius: 8px;
}
.topbar {
  background: #060F1C;
  color: #C0D1E0;
  border-bottom-color: rgba(255,255,255,.1);
}
.topbar a { color: #E8EFF5; }
.topbar-inner, .header-inner { max-width: 1280px; }
.header {
  background: rgba(11,31,53,.97);
  border-bottom-color: rgba(255,255,255,.12);
  box-shadow: 0 8px 32px rgba(6,15,28,.18);
  backdrop-filter: blur(10px);
}
.header-inner { height: 88px; }
.header .logo { flex: 0 0 auto; }
.header .logo-img {
  display: block;
  height: 82px;
  width: auto;
  max-width: none;
  mix-blend-mode: screen;
}
.footer .logo-img, footer .logo-img { height: 72px; mix-blend-mode: screen; }
.header .logo-divider, .header .logo-text { display: none; }
.header nav { display: flex; align-items: center; gap: 1px; }
.header nav a {
  color: #DDE7F1;
  font-size: 11px;
  font-weight: 600;
  padding: 9px 8px;
  letter-spacing: .04em;
  white-space: nowrap;
  border-radius: 6px;
}
.header nav a:hover { color: #FFC24B; background: rgba(240,162,2,.11); }
.header nav a.active { color: #FFC24B; box-shadow: inset 0 -2px #F0A202; }
.header nav .nav-cta {
  margin-left: 8px;
  padding: 10px 14px !important;
  background: #F0A202 !important;
  color: #071426 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.header nav .nav-cta:hover { background: #FFC24B !important; color: #071426 !important; }
.header nav .nav-payment {
  margin-left: 8px;
  padding: 10px 14px !important;
  color: #FFFFFF !important;
  background: #155A88;
  border: 1px solid #65B9E8;
  font-weight: 700 !important;
  box-shadow: 0 0 0 1px rgba(101,185,232,.12) inset;
}
.header nav .nav-payment:hover,
.header nav .nav-payment:focus-visible {
  color: #FFFFFF !important;
  background: #1B75AB;
  border-color: #A5DCFA;
}
.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px;
  color: #fff;
  padding: 9px 13px;
  font: 600 12px 'Inter', Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.page-hero { background: #0B1F35; }
.page-hero-bg {
  background: linear-gradient(90deg,rgba(7,20,38,.91) 0%,rgba(7,20,38,.72) 46%,rgba(7,20,38,.38) 100%),
    url('images/blue-moon-mountain-city-blue.png') center 46% / cover no-repeat;
}
.hero-bg {
  background: linear-gradient(90deg,rgba(7,20,38,.93) 0%,rgba(7,20,38,.78) 44%,rgba(7,20,38,.29) 100%),
    url('images/blue-moon-mountain-city-blue.png') center 47% / cover no-repeat;
}
.hero-scene { display: none !important; }
.page-hero-grid { background-image: linear-gradient(rgba(162,184,204,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(162,184,204,.055) 1px,transparent 1px); }
.page-hero-inner, .content-wrap, .footer-inner { max-width: 1280px; }
.page-title { font-family: 'Inter',Arial,sans-serif; font-weight: 750; letter-spacing: -.04em; }
.content-body p, .page-sub { color: #B8C9D8; }
.footer-credit a { color: #FFC24B; }
@media (max-width: 1100px) {
  .header-inner { height: 76px; }
  .header .logo-img { height: 68px; }
  .menu-toggle { display: inline-flex; }
  .header nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    padding: 14px 24px 24px;
    background: #0B1F35;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 30px rgba(6,15,28,.35);
    flex-direction: column;
    align-items: stretch;
  }
  .header nav.is-open { display: flex; }
  .header nav a { font-size: 13px; padding: 12px; }
  .header nav .nav-cta { margin: 8px 0 0; text-align: center; }
  .header nav .nav-payment { margin: 8px 0 0; text-align: center; }
}
@media (max-width: 680px) {
  .topbar-inner { justify-content: center; text-align: center; }
  .topbar-contact { justify-content: center; gap: 5px 16px; }
  .topbar-inner > span { display: none; }
  .header .logo-img { height: 58px; }
  .footer .logo-img, footer .logo-img { height: 60px; }
}