.glass-panel {
  position: relative;
  overflow: hidden;
  border-radius: 16px;

  /* the actual glass */
  background: rgba(20, 20, 20, 0.35);
  /* tweak tint */
  backdrop-filter: blur(18px) saturate(110%) brightness(105%);
  -webkit-backdrop-filter: blur(18px) saturate(110%) brightness(105%);
}

/* soft “light sweep” like your comp, not Apple chrome */
.glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(255, 255, 255, 0.14), transparent 55%),
    radial-gradient(120% 140% at 80% 100%, rgba(0, 0, 0, 0.25), transparent 55%);
  pointer-events: none;
}

/* optional noise to make it feel like Figma glass */
.glass-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}

.is-scrolled {
  background: rgba(20, 20, 20, 0.10);
  /* tweak tint - increased transparency */
  backdrop-filter: blur(18px) saturate(110%) brightness(105%);
  -webkit-backdrop-filter: blur(18px) saturate(110%) brightness(105%);

  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 5px 15px rgba(0, 0, 0, 0.10),
    /* reduced shadow for less drama */
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* soft “light sweep” like your comp, not Apple chrome */
.is-scrolled::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(255, 255, 255, 0.14), transparent 75%),
    radial-gradient(120% 140% at 80% 100%, rgba(0, 0, 0, 0.25), transparent 75%);
  pointer-events: none;
}

/* optional noise to make it feel like Figma glass */
.is-scrolled::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}

.link-group {}

.underline-link {}

[data-underline-link] {
  text-decoration: none;
  position: relative;
}

[data-underline-link]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

[data-underline-link="alt"]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-underline-link="alt"]::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {

  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }

  [data-hover]:hover [data-underline-link="alt"]::before,
  [data-underline-link="alt"]:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  [data-hover]:hover [data-underline-link="alt"]::after,
  [data-underline-link="alt"]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }
}

/* --- Dynamic Navbar Text Color --- */
.w-nav {
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* When navbar is over a dark section */
.w-nav.nav-dark-mode {
  color: #FFFFFF !important;
  /* Force white text */
}

/* When navbar is over a light section */
.w-nav.nav-light-mode {
  color: #000000 !important;
  /* Force black text */
}

/* Ensure links inherit the color */
.w-nav.nav-dark-mode .nav-link,
.w-nav.nav-dark-mode a,
.w-nav.nav-light-mode .nav-link,
.w-nav.nav-light-mode a {
  color: currentColor;
}

/* Update logo link color */
.w-nav.nav-dark-mode .brand-logo {
  color: #FFFFFF;
}

.w-nav.nav-light-mode .brand-logo {
  color: #000000;
}