/* ==========================================================================
   ASSET POOLS LLC - LIQUID GLASS & APPLE IPHONE GLASS DESIGN SYSTEM
   Ultra-luxury iOS-inspired glassmorphism, iridescent specular highlights,
   squircle glass icons, and fluid water caustic animations.
   ========================================================================== */

:root {
  --glass-bg-base: rgba(10, 25, 47, 0.65);
  --glass-bg-subtle: rgba(15, 32, 67, 0.45);
  --glass-bg-elevated: rgba(20, 42, 85, 0.78);
  --glass-bg-white: rgba(255, 255, 255, 0.08);

  --glass-border-light: rgba(255, 255, 255, 0.22);
  --glass-border-subtle: rgba(255, 255, 255, 0.10);
  --glass-border-glow: rgba(0, 210, 255, 0.45);
  --glass-border-gold: rgba(212, 175, 55, 0.5);
  --glass-border-edge: rgba(255, 255, 255, 0.32);

  --glass-blur-sm: blur(12px);
  --glass-blur-md: blur(22px);
  --glass-blur-lg: blur(36px);
  --glass-blur-xl: blur(48px);

  --glass-shadow-soft:
    0 10px 30px -10px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--glass-border-subtle),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  --glass-shadow-elevated:
    0 24px 60px -18px rgba(2, 12, 27, 0.8),
    0 0 40px rgba(0, 210, 255, 0.22),
    0 0 0 1px var(--glass-border-light),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35);
  --glass-shadow-glow:
    0 0 45px rgba(0, 210, 255, 0.4),
    0 24px 50px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --glass-shadow-gold:
    0 24px 60px -18px rgba(120, 80, 0, 0.6),
    0 0 40px rgba(212, 175, 55, 0.22),
    0 0 0 1px var(--glass-border-gold),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Base Glass Container */
.glass-panel {
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(10, 25, 47, 0.6) 40%,
      rgba(8, 20, 42, 0.72) 100%);
  backdrop-filter: var(--glass-blur-md) saturate(190%);
  -webkit-backdrop-filter: var(--glass-blur-md) saturate(190%);
  border: 1px solid var(--glass-border-subtle);
  border-top: 1px solid var(--glass-border-edge);
  box-shadow: var(--glass-shadow-soft);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  border-radius: 24px 24px 40% 40%;
}

.glass-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.06) 35%,
    rgba(0, 210, 255, 0.18) 65%,
    rgba(255, 255, 255, 0.1) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}

.glass-panel > * { position: relative; z-index: 1; }

.glass-panel:hover {
  border-color: var(--glass-border-glow);
  border-top-color: rgba(255, 255, 255, 0.55);
  box-shadow: var(--glass-shadow-elevated);
  transform: translateY(-5px);
}

.glass-panel:hover::after {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.1) 30%,
    rgba(0, 210, 255, 0.5) 60%,
    rgba(255, 255, 255, 0.25) 100%);
  opacity: 1;
}

/* Elevated Heavy Glass */
.glass-panel-elevated {
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(20, 42, 85, 0.75) 45%,
      rgba(10, 25, 55, 0.9) 100%);
  backdrop-filter: var(--glass-blur-lg) saturate(220%);
  -webkit-backdrop-filter: var(--glass-blur-lg) saturate(220%);
  border: 1px solid var(--glass-border-light);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: var(--glass-shadow-elevated);
  border-radius: 28px;
}

.glass-panel-elevated::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.05) 55%,
    rgba(255, 255, 255, 0) 100%);
  border-radius: 28px 28px 45% 45%;
  pointer-events: none;
}

/* Gold Accent Glass Variant */
.glass-panel-gold {
  background:
    linear-gradient(145deg,
      rgba(255, 245, 210, 0.08) 0%,
      rgba(30, 20, 5, 0.7) 40%,
      rgba(20, 14, 4, 0.82) 100%);
  backdrop-filter: var(--glass-blur-md) saturate(190%);
  -webkit-backdrop-filter: var(--glass-blur-md) saturate(190%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-top: 1px solid rgba(255, 230, 170, 0.35);
  box-shadow: var(--glass-shadow-gold);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 240, 180, 0.55) 0%,
    rgba(255, 220, 140, 0.08) 35%,
    rgba(212, 175, 55, 0.4) 65%,
    rgba(255, 230, 170, 0.18) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glass-panel-gold > * { position: relative; z-index: 1; }

.glass-panel-gold:hover {
  transform: translateY(-5px);
  border-top-color: rgba(255, 245, 200, 0.55);
  box-shadow:
    0 30px 70px -20px rgba(120, 80, 0, 0.7),
    0 0 50px rgba(212, 175, 55, 0.28),
    0 0 0 1px rgba(212, 175, 55, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35);
}

/* Glass Pill & Badges */
.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e2e8f0;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.glass-pill-gold {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.35);
  color: #ffd977;
}

.glass-pill-cyan {
  background: rgba(0, 210, 255, 0.12);
  border-color: rgba(0, 210, 255, 0.35);
  color: #38bdf8;
}

.glass-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 210, 255, 0.25);
  border-color: rgba(0, 210, 255, 0.5);
}

/* iPhone Glass Icon Container (Squircle) */
.ios-glass-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px; /* Apple squircle radius ratio */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ios-glass-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 18px 18px 40% 40%;
  pointer-events: none;
}

.ios-glass-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 60%, rgba(0, 210, 255, 0.4) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Icon Variations */
.ios-icon-blue {
  background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%);
  color: #ffffff;
}

.ios-icon-gold {
  background: linear-gradient(135deg, #e65c00 0%, #f9d423 100%);
  color: #ffffff;
}

.ios-icon-teal {
  background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
  color: #ffffff;
}

.ios-icon-navy {
  background: linear-gradient(135deg, #09203f 0%, #537895 100%);
  color: #ffffff;
}

.ios-icon-violet {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
}

.ios-icon-cyan {
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
  color: #ffffff;
}

.ios-glass-icon i,
.ios-glass-icon svg {
  font-size: 1.55rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
  z-index: 2;
  transition: transform 0.3s ease;
}

.ios-glass-card:hover .ios-glass-icon {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 16px 30px -4px rgba(0, 210, 255, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.ios-glass-card:hover .ios-glass-icon i,
.ios-glass-card:hover .ios-glass-icon svg {
  transform: scale(1.1);
}

/* iOS Glass Card */
.ios-glass-card {
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(16, 37, 72, 0.72) 35%,
      rgba(8, 20, 44, 0.88) 100%);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 26px;
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 18px 40px -12px rgba(0, 5, 20, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35);
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ios-glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 58%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%);
  border-radius: 26px 26px 45% 45%;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.4s ease;
}

.ios-glass-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 80% 8%, rgba(0, 210, 255, 0.16) 0%, transparent 55%),
    radial-gradient(circle at 10% 95%, rgba(197, 155, 39, 0.08) 0%, transparent 40%);
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 0.4s ease, transform 0.6s ease;
}

.ios-glass-card > * { position: relative; z-index: 2; }

.ios-glass-card:hover {
  transform: translateY(-7px);
  border-color: rgba(0, 210, 255, 0.5);
  border-top-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(0, 210, 255, 0.25),
    0 0 0 1px rgba(0, 210, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4);
}

.ios-glass-card:hover::before { opacity: 1; }
.ios-glass-card:hover::after {
  opacity: 1;
  transform: scale(1.03);
}

/* Gold Accent iOS Card */
.ios-glass-card-gold {
  background:
    linear-gradient(145deg,
      rgba(255, 245, 210, 0.08) 0%,
      rgba(35, 25, 8, 0.75) 35%,
      rgba(18, 13, 4, 0.9) 100%);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-top: 1px solid rgba(255, 230, 170, 0.38);
  box-shadow:
    0 18px 40px -12px rgba(60, 40, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35);
}

/* Glass Buttons with Specular Glow */
.btn-glass-primary {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.04) 45%,
      rgba(0, 0, 0, 0.08) 100%),
    linear-gradient(135deg, #0088ff 0%, #0066cc 45%, #004d99 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  padding: 14px 30px;
  border-radius: 100px;
  font-weight: 700;
  font-size: clamp(0.85rem, 0.95vw, 0.95rem);
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow:
    0 10px 28px -4px rgba(0, 90, 220, 0.55),
    0 0 0 1px rgba(0, 136, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.btn-glass-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%);
  transform: skewX(-22deg);
  transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-glass-primary::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 52%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0) 100%);
  border-radius: 100px 100px 50% 50%;
  pointer-events: none;
}

.btn-glass-primary > * { position: relative; z-index: 1; }

.btn-glass-primary:hover {
  transform: translateY(-2.5px) scale(1.02);
  box-shadow:
    0 16px 36px -4px rgba(0, 110, 255, 0.7),
    0 0 30px rgba(0, 210, 255, 0.5),
    0 0 0 1px rgba(0, 210, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.65);
  border-top-color: rgba(255, 255, 255, 0.8);
}

.btn-glass-primary:hover::before { left: 150%; }

.btn-glass-primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 5px rgba(0, 210, 255, 0.7),
    0 14px 32px -4px rgba(0, 110, 255, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-glass-gold {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.06) 45%,
      rgba(80, 50, 0, 0.12) 100%),
    linear-gradient(135deg, #e5be44 0%, #c59b27 45%, #9c7a18 100%);
  color: #1a1200;
  font-weight: 800;
  border: 1px solid rgba(255, 240, 180, 0.55);
  border-top: 1px solid rgba(255, 250, 220, 0.8);
  box-shadow:
    0 10px 28px -4px rgba(197, 155, 39, 0.55),
    0 0 0 1px rgba(212, 175, 55, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 0 rgba(80, 50, 0, 0.22);
}

.btn-glass-gold::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%);
  transform: skewX(-22deg);
  transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-glass-gold::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 55%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 100%);
  border-radius: 100px 100px 50% 50%;
  pointer-events: none;
}

.btn-glass-gold > * { position: relative; z-index: 1; }

.btn-glass-gold:hover {
  color: #120c00;
  transform: translateY(-2.5px) scale(1.02);
  box-shadow:
    0 16px 36px -4px rgba(212, 175, 55, 0.7),
    0 0 30px rgba(212, 175, 55, 0.5),
    0 0 0 1px rgba(255, 220, 130, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(80, 50, 0, 0.22);
  border-top-color: rgba(255, 252, 235, 0.9);
}

.btn-glass-gold:hover::before { left: 150%; }

.btn-glass-secondary {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(0, 0, 0, 0.1) 100%),
    rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.38);
  padding: 14px 30px;
  border-radius: 100px;
  font-weight: 700;
  font-size: clamp(0.85rem, 0.95vw, 0.95rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn-glass-secondary::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 50%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0) 100%);
  border-radius: 100px 100px 50% 50%;
  pointer-events: none;
}

.btn-glass-secondary > * { position: relative; z-index: 1; }

.btn-glass-secondary:hover {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(0, 0, 0, 0.12) 100%),
    rgba(255, 255, 255, 0.14);
  border-color: rgba(0, 210, 255, 0.55);
  border-top-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
  transform: translateY(-2.5px);
  box-shadow:
    0 12px 30px rgba(0, 210, 255, 0.28),
    0 0 0 1px rgba(0, 210, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* Floating Glass Dock */
.glass-dock {
  background: rgba(8, 20, 42, 0.78);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 100px;
  padding: 8px 14px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 210, 255, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1050;
}

.glass-dock-item {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 1.15rem;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
  cursor: pointer;
}

.glass-dock-item:hover {
  transform: scale(1.22) translateY(-4px);
  background: #0099ff;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 20px rgba(0, 153, 255, 0.5);
  color: #fff;
}

.glass-dock-item.dock-whatsapp:hover {
  background: #25d366;
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.5);
}

.glass-dock-item.dock-gold:hover {
  background: #d4af37;
  box-shadow: 0 10px 20px rgba(212, 175, 55, 0.5);
}

/* Shimmer Animation */
@keyframes glassShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.animate-shimmer {
  position: relative;
  overflow: hidden;
}

.animate-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  animation: glassShimmer 4s infinite linear;
  pointer-events: none;
}

/* Water Caustics Glow Effect */
.water-caustics-bg {
  position: relative;
}

.water-caustics-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(0, 210, 255, 0.14) 0%, transparent 45%),
              radial-gradient(circle at 75% 65%, rgba(0, 102, 204, 0.16) 0%, transparent 50%),
              radial-gradient(circle at 50% 90%, rgba(212, 175, 55, 0.08) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   PREMIUM FAQ ACCORDION — GLASS CARD DESIGN
   Accordion container, question row, answer with height animation,
   chevron rotation, number badge, reduced-motion safe.
   ========================================================================== */

.premium-faq {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.premium-faq-item {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,254,255,1) 100%);
  border: 1px solid rgba(15, 41, 66, 0.08);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 8px 26px -14px rgba(0, 80, 200, 0.15),
    0 0 0 1px rgba(0, 136, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition:
    border-color 0.32s ease,
    box-shadow 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-faq-item::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 10%,
    rgba(0, 210, 255, 0.28) 50%,
    transparent 90%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.premium-faq-item:hover,
.premium-faq-item.open {
  border-color: rgba(0, 136, 255, 0.22);
  box-shadow:
    0 20px 54px -24px rgba(0, 80, 200, 0.26),
    0 0 0 1px rgba(0, 136, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.premium-faq-item:hover { transform: translateY(-2px); }
.premium-faq-item:hover::before,
.premium-faq-item.open::before { opacity: 1; }

.premium-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.45;
  color: #0a2540;
  letter-spacing: -0.005em;
  transition:
    color 0.2s ease,
    background 0.25s ease;
  position: relative;
  outline: none;
}

.premium-faq-q:hover {
  color: #0066cc;
  background: rgba(0, 136, 255, 0.025);
}
.premium-faq-q:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.5), inset 0 0 0 1px rgba(0, 136, 255, 0.25);
  border-radius: 20px;
}

.premium-faq-num {
  flex: 0 0 auto;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ecf7ff 0%, #d9edff 100%);
  color: #0066cc;
  border: 1px solid rgba(0, 136, 255, 0.12);
  position: relative;
  overflow: hidden;
}

.premium-faq-num::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0) 55%);
  pointer-events: none;
}

.premium-faq-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #0088ff;
  background: rgba(0, 136, 255, 0.06);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.25s ease,
    background 0.25s ease;
}

.premium-faq-item.open .premium-faq-icon {
  transform: rotate(180deg);
  color: #ffffff;
  background: linear-gradient(135deg, #0088ff 0%, #00d2ff 100%);
  box-shadow: 0 6px 18px rgba(0, 136, 255, 0.38);
}