/* AXION Liquid Glass System - Apple Liquid Glass 2025 adapted for navy/gold institutional */
:root {
  --glass-blur: blur(22px) saturate(1.45);
  --glass-blur-strong: blur(28px) saturate(1.6);
  --glass-bg: rgba(11, 33, 58, 0.34);
  --glass-bg-strong: rgba(11, 33, 58, 0.52);
  --glass-bg-nav: rgba(4, 18, 37, 0.42);
  --glass-border: rgba(255,255,255,0.10);
  --glass-border-gold: rgba(201,154,46,0.38);
  --glass-highlight: rgba(255,255,255,0.14);
  --glass-inner: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(201,154,46,0.14);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.06) inset;
  --glass-shadow-lg: 0 16px 48px rgba(0,0,0,0.52), 0 1px 0 rgba(255,255,255,0.08) inset;
}

/* Liquid glass chrome base */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inner);
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.04) 18%, transparent 52%);
  pointer-events: none;
}
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(135deg, rgba(201,154,46,0.32), transparent 36%, transparent 64%, rgba(255,255,255,0.08)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.9;
}

/* Override institutional cards -> liquid glass */
.card.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-gold);
  box-shadow: var(--glass-shadow), var(--glass-inner);
  border-radius: 18px;
}
.card.glass-card.ghost {
  background: rgba(11,33,58,0.22);
  backdrop-filter: var(--glass-blur-strong);
}
.card.glass-card::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.05) 22%, transparent 58%);
}

/* Navbar liquid */
.navbar.glass-nav {
  background: var(--glass-bg-nav);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.10);
}
.navbar.glass-nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,154,46,0.45) 30%, rgba(201,154,46,0.45) 70%, transparent);
}

/* Hero liquid refraction */
.hero-media.glass-hero {
  background: rgba(11,33,58,0.28);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--glass-shadow-lg);
  border-radius: 20px;
}
.hero-media.glass-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,0.10), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,0.08), transparent 40%);
  pointer-events: none;
  z-index: 1;
}
.hero-media.glass-hero img { filter: saturate(1.05) contrast(1.02); }

/* Pills and stats liquid */
.pillar.glass-pill {
  background: rgba(11,33,58,0.36);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(201,154,46,0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 12px rgba(0,0,0,0.22);
}
.stat.glass-stat {
  background: rgba(11,33,58,0.32);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px 14px;
  border-radius: 14px;
}

/* Chart liquid */
.chart.glass-chart {
  background: rgba(11,33,58,0.30);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--glass-shadow);
}
.bar {
  box-shadow: 0 4px 16px rgba(201,154,46,0.28), inset 0 1px 0 rgba(255,255,255,0.32);
  backdrop-filter: blur(6px);
}
.bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 45%);
}

/* Office and hub liquid */
.hub-card.glass-card img, .office-card.glass-card { filter: saturate(1.03); }

/* Liquid highlight orbs (decorative refraction hints) */
.liquid-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), rgba(201,154,46,0.14) 28%, transparent 68%);
  filter: blur(0.5px);
  pointer-events: none;
  opacity: 0.55;
}

/* Motion: liquid glass subtle flow */
@media (prefers-reduced-motion: no-preference) {
  .glass-card, .glass-hero { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease, border-color 0.4s ease; }
  .glass-card:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.16); border-color: rgba(201,154,46,0.52); }
}

/* Ensure legibility on glass */
.glass-card .fine, .glass-card p { text-shadow: 0 1px 8px rgba(0,0,0,0.32); }

/* Footer glass */
.footer.glass-footer {
  background: rgba(4,18,37,0.48);
  backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255,255,255,0.07);
}