/* ============================================================
   GLASS — additive layer over site.css
   Inspired by Apple Liquid Glass (iOS 26 / macOS Tahoe)
   Targeted application: nav, hero panel, stats strip, cards.
   ============================================================ */

/* ---------- NAV: glass bar that floats over hero ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  background: rgba(6, 31, 92, 0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),  /* top rim highlight */
    0 8px 32px rgba(0,0,0,0.20);            /* soft float */
  z-index: 50;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.nav.scrolled {
  background: rgba(6, 31, 92, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 4px 20px rgba(0,0,0,0.30);
}
/* push body down so fixed nav doesn't cover content */
body { padding-top: 70px; }
.tbar { position: relative; z-index: 49; }

/* nav CTA gets a subtle glass treatment too */
.nav-cta {
  background: linear-gradient(180deg, #ee2f6a 0%, #d01a50 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 2px 8px rgba(232,33,90,0.40),
    0 6px 18px rgba(232,33,90,0.25);
  border: 1px solid rgba(255,255,255,0.18);
}
.nav-cta:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    0 3px 14px rgba(232,33,90,0.55),
    0 8px 24px rgba(232,33,90,0.35);
  transform: translateY(-1px);
}

/* ---------- HERO: stronger overlay + glass info card ---------- */
.hero-photo {
  /* lighter overlay since the new photo has its own baked-in gradient */
  background-image:
    linear-gradient(95deg,
      rgba(6,31,92,0.55) 0%,
      rgba(6,31,92,0.35) 30%,
      rgba(14,63,160,0.18) 55%,
      rgba(14,63,160,0.08) 80%,
      rgba(14,63,160,0.05) 100%),
    url('../img/hero-mixed.jpg');
}

/* ---------- HERO TEXT CARD: cleaner, less blur ---------- */
.hero-photo-inner {
  padding: 36px 40px 40px;
  background: rgba(6,31,92,0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 30px 80px rgba(0,0,0,0.40);
  max-width: 660px;
}

/* Sub-text crisp on the glass backdrop */
.hero-photo .h-sub {
  text-shadow: none;
  color: rgba(255,255,255,0.92);
  font-weight: 400;
}

/* ---------- HERO STATS STRIP: stronger glass on photo ---------- */
.hero-stats-strip {
  background: rgba(6, 31, 92, 0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 20px 60px rgba(0,0,0,0.30);
  border-radius: 16px;
  padding: 28px 0;
}
.hss-v { text-shadow: 0 1px 2px rgba(0,0,0,0.20); }
.hss-l { color: rgba(255,255,255,0.78); }

/* ---------- TRUST BAR ---------- */
.tbar {
  background: rgba(14,63,160,0.65);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ---------- CARDS ON SOLID SECTIONS: solid panels, NOT blur ---------- */
/* Glass-on-solid-color is muddy. Use clean solid + rim highlight instead. */
.price-card,
.aud,
.feat,
.tc {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 8px 24px rgba(0,0,0,0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.price-card:hover,
.aud:hover,
.feat:hover,
.tc:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 14px 38px rgba(0,0,0,0.26);
}

/* ---------- BUTTONS: subtle glass shine on primary ---------- */
.btn-primary {
  background: linear-gradient(180deg, #ee2f6a 0%, #d01a50 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 4px 14px rgba(232,33,90,0.40),
    0 10px 32px rgba(232,33,90,0.20);
  border: 1px solid rgba(255,255,255,0.18);
}
.btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    0 6px 20px rgba(232,33,90,0.55),
    0 14px 40px rgba(232,33,90,0.30);
  transform: translateY(-2px);
}
.btn-secondary {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 4px 14px rgba(0,0,0,0.15);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.32);
}

/* ---------- DASHBOARD MOCK: glass ---------- */
.dash-mock {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),
    0 30px 80px rgba(0,0,0,0.25);
}

/* ---------- ACCESSIBILITY: respect reduced transparency / motion ---------- */
@supports not (backdrop-filter: blur(1px)) {
  .nav { background: rgba(6,31,92,0.96); }
  .tbar { background: rgba(14,63,160,0.95); }
  .hero-stats-strip { background: rgba(6,31,92,0.92); }
  .hero-photo-inner { background: rgba(6,31,92,0.85); }
  .price-card, .aud, .feat, .tc { background: rgba(255,255,255,0.10); }
}

@media (prefers-reduced-motion: reduce) {
  .price-card, .aud, .feat, .btn-primary, .nav-cta { transition: none; }
}