/* =========================================================
   THEME: GLASS  — frosted glassmorphism over a cool sky backdrop
   ========================================================= */
:root {
  --bg: #071019;
  --bg-2: #0b1725;
  --text: #f2f8ff;
  --muted: #b6c7da;
  --accent: #7fe3ff;
  --accent-2: #3f8cff;
  --accent-line: rgba(127, 227, 255, .55);
  --accent-soft: rgba(127, 227, 255, .12);
  --accent-on: #04121c;

  --glow-1: rgba(64, 190, 255, .55);
  --glow-2: rgba(88, 108, 255, .40);
  --glow-3: rgba(0, 240, 210, .25);

  --card-bg: rgba(255, 255, 255, .07);
  --card-brd: rgba(255, 255, 255, .18);
  --pill-bg: rgba(255, 255, 255, .09);
  --blur: 20px;

  --topbar-bg: rgba(180, 225, 255, .10);
  --nav-bg: rgba(190, 230, 255, .12);
  --nav-solid: rgba(9, 18, 30, .82);
  --section-alt: linear-gradient(180deg, transparent, rgba(160, 215, 255, .07), transparent);
  --hero-tint: rgba(5, 16, 30, .70);
  --book-bg: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  --input-bg: rgba(255, 255, 255, .08);
  --tag-bg: rgba(190, 235, 255, .16);
  --footer-bg: linear-gradient(180deg, transparent, rgba(140, 200, 255, .08));
  --btn-on: #04121c;
  --shadow-soft: 0 24px 60px -28px rgba(20, 90, 140, .85);
  --radius: 24px;
}

/* glass gets extra specular edge + inner glow */
.card, .suite, .stat, .attraction, .book {
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(255, 255, 255, .06),
    0 24px 60px -30px rgba(20, 90, 140, .9);
}
.card::after { opacity: .85; }
.nav.scrolled, .topbar { -webkit-backdrop-filter: blur(22px) saturate(180%); }
.nav, .card, .suite, .stat, .attraction, .book { border-color: rgba(255,255,255,.2); }
.hero-veil {
  background:
    radial-gradient(85% 70% at 18% 92%, rgba(6, 20, 38, .74), transparent 70%),
    linear-gradient(to top, #071019 3%, rgba(4, 14, 28, .48) 48%, rgba(4, 14, 28, .18) 100%);
}
.eyebrow, .chip, .media .badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.btn { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: var(--accent-on); }
.brand-mark { -webkit-backdrop-filter: none; }