/* V2 — Glass (Liquid Glass inspired) */
/* Updated to work with DESIGN_CHARTER.md colors */

:root {
  --card: rgba(255, 255, 255, 0.075);
  --card-strong: rgba(255, 255, 255, 0.1);
  --border: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.24);
}

/* Body background is handled by .app-background in base.css */
/* Do NOT override body background here */

.site-header {
  background: rgba(5, 5, 20, 0.4);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

.card,
.panel,
.stat,
.hero__mockup,
.faq details {
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.card::before,
.panel::before,
.hero__mockup::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.15), rgba(255, 255, 255, 0.02), rgba(168, 85, 247, 0.12));
  opacity: 0.5;
  pointer-events: none;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  border-radius: inherit;
}

.button--primary {
  box-shadow: 0 18px 42px rgba(0, 217, 255, 0.2);
}

.story {
  display: block;
}