/* ============================================================
   Hero — glassy/translucent LIGHT dashboard variant
   Scoped under .hero-glass; keeps the established light theme,
   adds frosted-glass surfaces with a purple glow bed behind.
   ============================================================ */

/* glow bed behind the glass so the blur has color to catch */
.hero-glass .hero-viswrap::before {
  content: ""; position: absolute; inset: -12% -16% -16% -16%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 52% at 16% 22%, color-mix(in oklab, #9275CF 50%, transparent), transparent 70%),
    radial-gradient(40% 50% at 86% 28%, color-mix(in oklab, #A98FDB 52%, transparent), transparent 70%),
    radial-gradient(48% 58% at 50% 90%, color-mix(in oklab, #6A3FA0 38%, transparent), transparent 72%);
  filter: blur(36px); opacity: .95;
}

/* the window itself: frosted light glass */
.hero-glass .hero-frame {
  background: rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow:
    0 40px 90px -32px rgba(74, 42, 110, .38),
    0 16px 40px -18px rgba(74, 42, 110, .25),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
.hero-glass .hero-frame::after {
  background: linear-gradient(180deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 7%);
}
/* diagonal sheen */
.hero-glass .hero-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 28%, transparent 50%);
}
.hero-glass .hero-frame .frame-bar {
  background: rgba(255, 255, 255, .20);
  border-bottom: 1px solid rgba(108, 77, 150, .10);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hero-glass .frame-url { background: rgba(255, 255, 255, .36); border-color: rgba(255, 255, 255, .8); }

/* dashboard surfaces: translucent layers instead of solid fills */
.hero-glass .hd { background: transparent; }
.hero-glass .hd-side {
  background: rgba(255, 255, 255, .16);
  border-right: 1px solid rgba(108, 77, 150, .10);
}
.hero-glass .hd-nav a.on {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 22px -10px rgba(74, 42, 110, .28), inset 0 1px 0 rgba(255,255,255,.9);
}
.hero-glass .hd-user {
  background: rgba(255, 255, 255, .5);
  border-color: rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.hero-glass .hd-card {
  background: rgba(255, 255, 255, .34);
  border-color: rgba(255, 255, 255, .85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 14px 36px -20px rgba(74, 42, 110, .3);
}
.hero-glass .hd-bar { background: rgba(108, 77, 150, .13); }
.hero-glass .hd-ring .track { stroke: rgba(108, 77, 150, .13); }

/* insight card: translucent purple glass instead of solid gradient */
.hero-glass .hd-insight {
  background: linear-gradient(115deg, rgba(106, 63, 160, .88), rgba(74, 42, 110, .8));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 16px 38px -18px rgba(74, 42, 110, .5);
}

/* pop-ups: frosted light glass */
.hero-glass .hpop {
  background: rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow:
    0 26px 60px -24px rgba(74, 42, 110, .42),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}