/* Shared glassmorphism styles for aspirosia.com */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(140% 140% at 30% 20%, #1B2C7A 0%, #0E1548 45%, #070A28 100%);
  color: #F4F7FF;
  min-height: 100%;
  overflow-x: hidden;
  position: relative;
}
/* Aurora-ascent ribbons climbing bottom-left to top-right.
   The .blob-N divs already on every page become the light bands;
   JS on the home page moves them for parallax. */
.blob {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
  border-radius: 999px;
  transform: rotate(-28deg);
  will-change: transform;
}
.blob-1 {
  top: 48%; left: -30%;
  width: 170vw; height: 130px;
  background: linear-gradient(90deg, rgba(46,168,232,0) 0%, rgba(46,168,232,0.45) 50%, rgba(46,168,232,0) 100%);
}
.blob-2 {
  top: 62%; left: -35%;
  width: 180vw; height: 170px;
  background: linear-gradient(90deg, rgba(108,76,220,0) 0%, rgba(108,76,220,0.40) 50%, rgba(108,76,220,0) 100%);
  filter: blur(75px);
}
.blob-3 {
  top: 38%; left: -25%;
  width: 165vw; height: 66px;
  background: linear-gradient(90deg, rgba(240,185,80,0) 0%, rgba(240,185,80,0.40) 50%, rgba(240,185,80,0) 100%);
  filter: blur(38px);
}
/* golden point near the top of the climb */
.blob-3::after {
  content: "";
  position: absolute;
  right: 18%; top: -220px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #FFE9B0;
  box-shadow: 0 0 60px 30px rgba(255,214,120,0.55);
  transform: rotate(28deg);
}

.glass {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

nav.ribbon {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 18px;
}
nav.ribbon a {
  color: rgba(230,236,255,0.70);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 12px;
}
nav.ribbon a:hover { color: #F4F7FF; }
nav.ribbon a.active {
  color: #4FD8FF;
  background: rgba(79,216,255,0.12);
}

.muted { color: rgba(230,236,255,0.70); }
.accent { color: #4FD8FF; }
footer.site {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px 0 30px;
  font-size: 12px;
  color: rgba(230,236,255,0.45);
}