:root {
    --shadow: rgba(71, 52, 28, 0.08);
    --shadow-soft: rgba(10, 11, 30, 0.07) 1px 1px 3px 0px;
    --modal-shadow: rgba(10, 11, 30, 0.13) 4px 4px 17px 0px;
    --placeholder: rgba(0,0,0,0.2);
    --green: #00e8ab;
    --green-solid: #00b887;
    --green-dark: #3b3c4b;
    --green-soft: #40eec0;
    --accent-yellow: #FFC94A;
    --accent-orange: #FF8A3D;
    --accent-blue: #4AA3FF;
    --border-strong: rgba(0,0,0,0.6);
    --border-color: rgba(0,0,0,0.2);
    --border-soft: rgba(0,0,0,0.1);
    --border-light: rgba(0,0,0,0.07);

    --border-strong: var(--slate-600);
    --border-color: var(--slate-300);
    --border-soft: var(--slate-200);
    --border-light: var(--slate-100);

    --error: #EF5B5B;
    --warning: #FFC94A;
    --card: #FFFFFF;
    --app-border: 1px rgba(0,0,0,0.3) solid;
    --disabled: rgba(0,0,0,0.06);
    --disabled-text: rgba(0,0,0,0.2);
    --brick-rig: rgba(0,0,0,0.08);
    --progress-bar: rgba(0,0,0,0.05);
    --transparent: rgba(0,0,0,0.05);
    --transparent-intense: rgba(255, 255, 255, 0.9);

    /* custom app colors */
    --bg: #ffffff;
    --bg-second: var(--slate-100);
    --bg-third: var(--slate-200);
    --bg-fourth: var(--slate-300);
    --card: #ffffff;
    --card-soft: var(--slate-50);
    --chip-bg: #ffffff;
    --chip-text: var(--slate-600);
    --header: linear-gradient(90deg, #f8fafc, #fff);

    --fill-color: #334155;
    --fill-soft: #475569;
    --fill-pink: #ec4899;


    --title: var(--slate-900);
    --text-strong: var(--slate-800);
    --text: var(--slate-700);
    --text-color: var(--slate-700);
    --text-soft: var(--slate-500);
    --text-light: var(--slate-400);
    --fill-strong: var(--slate-800);
    --fill-color: var(--slate-600);
    --fill-soft: var(--slate-500);
    --fill-light: var(--slate-300);

    --primary-button-soft: #f1f5f9;
    --border: #e2e8f0;
    --border-selected: #4AA3FF;
    --border-bg: #fff;

    --primary-button: var(--slate-800);
    --primary-button-text: #FFFFFF;

}
/* #263129 elevated card or popups */
.dark {
    --darkest: var(--zinc-900);
    --dark: var(--zinc-800);

    --placeholder: rgba(255, 255, 255, 0.2);
    --bg: var(--darkest);
    --card: var(--dark);
    --card-soft: var(--zinc-700);

    --chip-bg: var(--dark);
    --chip-text: var(--zinc-200);
    --header: var(--darkest);
    --bg-second: var(--dark);
    --bg-third: var(--zinc-700);
    --bg-fourth: var(--zinc-600);

    --title: #FFFFFF;
    --text: var(--zinc-300);
    --text-strong: var(--zinc-50);
    --text-color: var(--zinc-300);
    --text-soft: var(--zinc-400);
    --text-light: var(--zinc-600);

    --fill-color: var(--zinc-200);
    --fill-soft: var(--zinc-400);
    --fill-light: var(--zinc-600);
    --fill-strong: var(--zinc-50);

    --primary-button: #24C47A;
    --primary-button-text: #FFFFFF;
    --primary-button-soft: #163C2A;

    --border: var(--zinc-600);
    --border-strong: var(--zinc-300);
    --border-color: var(--zinc-600);
    --border-soft: var(--zinc-700);
    --border-light: var(--dark);
    --shadow: rgba(0, 0, 0, 0.35);
    --app-border: 1px rgba(255,255,255,0.08) solid;
    --disabled: rgba(255,255,255,0.089);
    --brick-rig: rgba(255, 255, 255, 0.09);
    --progress-bar: rgba(255,255,255,0.089);
    --transparent: rgba(255,255,255,0.09);
    --disabled-text: rgba(255,255,255,0.4);
    --transparent-intense: rgba(255, 255, 255, 0.1);
    --border-bg: var(--darkest);

    --primary-button: #FFFFFF;
    --primary-button-text: var(--zinc-700);
}

.placeholder, .placeholder svg {
  fill: var(--placeholder);
  stroke: var(--placeholder);
  color: var(--placeholder);
}

.app-border {
    border: var(--app-border);
}
.transparent { background: var(--transparent); }
.transparent-intense { background-color: var(--transparent-intense); }
.background { background-color: var(--bg); }
.bg-second, .hover\:bg-second:hover { background-color: var(--bg-second); }
.bg-third, .hover\:bg-third:hover { background-color: var(--bg-third); }
.bg-fourth, .hover\:bg-fourth:hover { background-color: var(--bg-fourth); }
.bg-card { background: var(--card); }
.bg-card-soft { background: var(--card-soft); }
.bg-header { background: var(--header); }
.bg-chip { background: var(--chip-bg); color: var(--chip-text); }
.bg-dark { background: #1e293b; }

.bg-white { background-color: #fff; }
.hover\:text-white:hover, .text-white { color: #fff; }
.subtitle-color { color: var(--title); }
.text-strong, .hover\:text-strong:hover { color: var(--text-strong); }
.text-color, .hover\:text-color:hover { color: var(--text); }
.text-soft, .hover\:text-soft:hover { color: var(--text-soft); }
.text-light, .hover\:text-light:hover { color: var(--text-light); }
.text-dark { color: var(--dark); }
.text-white-transparent { color: rgba(255, 255, 255, 0.1); }
.text-white-transparent\/2 { color: rgba(255, 255, 255, 0.2); }
.text-white-transparent\/3 { color: rgba(255, 255, 255, 0.3); }
.text-white-transparent\/4 { color: rgba(255, 255, 255, 0.4); }
.text-white-transparent\/5 { color: rgba(255, 255, 255, 0.5); }
.text-white-transparent\/6 { color: rgba(255, 255, 255, 0.6); }

.text-dark-transparent { color: rgba(0,0,0, 0.1); }
.text-dark-transparent\/2 { color: rgba(0,0,0, 0.2); }
.text-dark-transparent\/3 { color: rgba(0,0,0, 0.3); }
.text-dark-transparent\/4 { color: rgba(0,0,0, 0.4); }
.text-dark-transparent\/5 { color: rgba(0,0,0, 0.5); }
.text-dark-transparent\/6 { color: rgba(0,0,0, 0.6); }

.fill-white, .fill-white svg { fill: #fff; }
.fill-soft, .fill-soft svg { fill: var(--fill-soft); }
.fill-color, .fill-color svg { fill: var(--fill-color); }
.fill-indigo, .fill-indigo svg { fill: var(--indigo-500); }
.bg-dark-transparent { background: rgba(0,0,0,0.05); }

.hover\:border-strong:hover, .border-strong { border-color: var(--border-strong); }
.hover\:border-color:hover, .border-color { border-color: var(--border-color); }
.hover\:border-soft:hover, .border-soft { border-color: var(--border-soft); }
.border-dark { border-color: var(--dark); }
.border-light { border-color: var(--border-light); }
.border-bg { border-color: var(--border-bg); }
.border-app { border-color: var(--border); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.modal-shadow { box-shadow: var(--modal-shadow); }
.text-transparent { color: transparent; }
.soft-blur {
    position: relative;
    isolation: isolate; /* evita que el blur escape */
    overflow: hidden;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.08);
}
/* "blobs" con blur */
.soft-blur::before,
.soft-blur::after{
  content: "";
  position: absolute;
  inset: -40%; /* se sale para que el blur no corte */
  z-index: -1;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.75;
  transform: translateZ(0); /* mejora rendimiento */
}
/* Blob principal: verde-lima */
.soft-blur::before{
  background:
    radial-gradient(300px 220px at 15% 20%, rgba(126,241,198,0.7), transparent 65%),
    radial-gradient(280px 220px at 80% 25%, rgba(185,167,255,0.65), transparent 70%);
}
/* Blob secundario: lavanda suave */
.soft-blur::after{
  opacity: 0.55;
  filter: blur(90px);
  background:
    radial-gradient(260px 200px at 85% 80%, rgba(215,200,255,0.7), transparent 65%),
    radial-gradient(260px 200px at 10% 75%, rgba(186,247,200,0.6), transparent 65%);
}
.blurred-surface{
  position: relative;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.blurred-surface::before{
  content:"";
  position:absolute;
  inset:-60px;
  z-index:-1;
  filter: blur(50px);
  opacity: 0.9;
  background:
    radial-gradient(220px 180px at 15% 20%, rgba(126,241,198,0.55), transparent 65%),
    radial-gradient(220px 180px at 85% 25%, rgba(185,167,255,0.55), transparent 70%);
}
.blurry {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    border-radius: 20px;
    text-align: center;
}
.border-selected { border-color: var(--slate-600); }
.bg-selected { 
  background-color: var(--slate-800);
  color: #fff;
}
.dark .border-selected {
  border-color: var(--gray-100);
}
.chip-selected {
  background: var(--slate-800);
  color: #fff;
}
.dark .bg-selected,
.dark .chip-selected {
  background: #fff;
  color: var(--zinc-700);
}
.mask-top {
    -webkit-mask-image: linear-gradient(to top, black 70%, transparent 100%);
    mask-image: linear-gradient(to top, black 70%, transparent 100%);
}
.mask-bottom {
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}
.mask-right-fixed {
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, black 90%, transparent 100% );
}
.mask-left {
    -webkit-mask-image: linear-gradient(to left, black 90%, transparent 100%);
    mask-image: linear-gradient(to left, black 90%, transparent 100% );
}
@media screen and (min-width: 1080px) {
    .mask-right {
        -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
        mask-image: linear-gradient(to right, black 90%, transparent 100% );
    }
}
:root {
    --color-lite: #59a15b;
    --blur-color: #9D82DD
}
.glass-card::before,
.glass-card::after {
    content: "";
    position: absolute;
    left: 50%;
    pointer-events: none;
    z-index: -1;
}

/* concentrated glow */
.glass-card::before {
    width: 120%;
    height: 75%;
    bottom: -48%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(126, 101, 205, 0.7) 0%,
        rgba(105, 82, 175, 0.35) 5%,
        transparent 75%
    );
    filter: blur(18px);
}

/* very soft surrounding haze */
.glass-card::after {
    width: 120%;
    height: 80%;
    bottom: -58%;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse,
        rgba(105, 82, 175, 0.28),
        transparent 70%
    );
    filter: blur(35px);
}
.green::before {
    background: radial-gradient(
        ellipse,
        rgba(55, 145, 118, 0.7) 0%,
        rgba(45, 115, 94, 0.35) 45%,
        transparent 75%
    );
}

.green::after {
    background: radial-gradient(
        ellipse,
        rgba(45, 120, 98, 0.25),
        transparent 70%
    );
}

.avatarx {
    width: 84px;
    height: 84px;
}

.thumbnail.thumbnail-lg {
  width: 120px;
  height: 120px;
}

.thumbnail svg,
.avatarx svg {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.avatar-border {
    fill: none;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 3;
}
.avatar-bg {
  fill: url(#avatarGradient);
}

/*
.screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.screen::before {
    content: "";
    position: absolute;
    width: 140%;
    height: 55%;
    top: -22%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse at center,
        rgba(155, 190, 165, 0.45) 0%,
        rgba(95, 130, 110, 0.22) 30%,
        rgba(45, 70, 55, 0.10) 50%,
        transparent 72%
    );
    filter: blur(45px);
    pointer-events: none;
}*/

.screen {
  /*position: relative;
  min-height: 100vh;*/
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      ellipse at 28% 4%,
      rgba(97, 120, 91, .15),
      transparent 48%
    ),

    radial-gradient(
      ellipse at 55% 0%,
      rgba(141, 158, 132, .25),
      transparent 50%
    ),

    radial-gradient(
      ellipse at 92% 17%,
      rgba(55, 84, 65, .17),
      transparent 47%
    ),

    radial-gradient(
      ellipse at 10% 40%,
      rgba(28, 57, 45, .11),
      transparent 50%
    ),

    linear-gradient(
      180deg,
      #18221a 0%,
      #111a14 33%,
      #0a110d 63%,
      #050806 100%
    );
}

.screen::before {
  content: "";
  position: absolute;
  z-index: -2;

  width: 120%;
  height: 65%;

  top: -20%;
  left: -10%;

  background:
    radial-gradient(
      ellipse at 48% 20%,
      rgba(139, 158, 129, 0.30) 0%,
      rgba(102, 125, 96, 0.18) 30%,
      rgba(67, 88, 66, 0.08) 55%,
      transparent 76%
    );

  filter: blur(80px);
  opacity: 0.85;
  animation: ambientGlow 8s ease-in-out infinite alternate;
}

.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      transparent 30%,
      rgba(0, 0, 0, 0.10) 55%,
      rgba(0, 0, 0, 0.50) 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 45%,
      rgba(0, 0, 0, 0.22) 70%,
      rgba(0, 0, 0, 0.60) 100%
    );
}

.gem-area {
  position: relative;
  width: 300px;
  height: 300px;

  display: grid;
  place-items: center;

  margin-inline: auto;
}

.gem-area::before {
  content: "";
  position: absolute;

  width: 230px;
  height: 230px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(95, 255, 225, 0.55) 0%,
    rgba(52, 226, 211, 0.34) 30%,
    rgba(29, 169, 166, 0.18) 52%,
    transparent 72%
  );

  filter: blur(32px);
  z-index: -1;
}

.gem-glow {
  position: absolute;

  width: 340px;
  height: 250px;

  border-radius: 50%;

  background: radial-gradient(
    ellipse,
    rgba(17, 180, 185, 0.24) 0%,
    rgba(10, 112, 127, 0.14) 42%,
    transparent 72%
  );

  filter: blur(55px);

  z-index: -2;
}

.gem-area::before {
  content: "";
  position: absolute;

  width: 190px;
  height: 190px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(121, 255, 230, 0.65) 0%,
    rgba(64, 234, 216, 0.35) 32%,
    rgba(27, 167, 169, 0.12) 58%,
    transparent 75%
  );

  filter: blur(25px);
  z-index: -1;
}

.gem {
  position: relative;
  z-index: 1;

  width: 180px;
  height: auto;

  filter:
    drop-shadow(0 0 12px rgba(121, 255, 231, 0.24))
    drop-shadow(0 15px 18px rgba(0, 0, 0, 0.55));
}

.object-wrapper {
    position: relative;
    display: inline-block;
}

.object-wrapper::before {
    content: "";
    position: absolute;
    width: 160%;
    height: 130%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse,
        rgba(85, 230, 220, 0.35) 0%,
        rgba(60, 180, 175, 0.20) 35%,
        rgba(30, 120, 125, 0.08) 55%,
        transparent 75%
    );
    filter: blur(25px);
    z-index: -1;
}

:root {
  --rgb-black: 0, 0, 0, 0;
  --rgb-bg: 24, 24, 27;
}

.screen-green {
  /*position: relative;
  min-height: 100vh;*/
  overflow: hidden;
  isolation: isolate;
  background: #020405;
  background: var(--bg);
}

.screen-green::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 50% 22%,
      rgba(24, 98, 84, 0.34) 0%,
      rgba(18, 78, 82, 0.28) 22%,
      rgba(12, 56, 86, 0.24) 38%,
      rgba(6, 28, 42, 0.18) 52%,
      rgba(var(--rgb-bg)) 72%
    );

  filter: blur(55px);
  transform: scale(1.08);
  opacity: 0.75;
}

.screen-green::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      transparent 30%,
      rgba(var(--rgb-bg), 0.18) 62%,
      rgba(var(--rgb-bg), 0.72) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(var(--rgb-bg), 0.08) 0%,
      rgba(var(--rgb-bg), 0.12) 35%,
      rgba(var(--rgb-bg), 0.35) 70%,
      rgba(var(--rgb-bg), 0.82) 100%
    );

  
}

.gem-wrap {
  position: relative;
  /*width: 280px;
  height: 320px;*/
  /*margin: 140px auto 0;*/
  display: grid;
  place-items: center;
}

.gem-wrap::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  z-index: -1;

  background: radial-gradient(
    circle,
    rgba(84, 224, 220, 0.48) 0%,
    rgba(52, 180, 200, 0.34) 28%,
    rgba(29, 116, 165, 0.22) 48%,
    rgba(15, 67, 109, 0.12) 62%,
    transparent 76%
  );

  filter: blur(28px);
}

.gem-wrap::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 260px;
  border-radius: 50%;
  z-index: -2;

  background: radial-gradient(
    ellipse,
    rgba(19, 122, 117, 0.22) 0%,
    rgba(15, 87, 125, 0.16) 38%,
    rgba(7, 34, 62, 0.10) 56%,
    transparent 74%
  );

  filter: blur(55px);
}

.icon {
  position: relative;
}
.icon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border-radius: 4rem;
  z-index: -1;
  background-color: var(--color-lite);
  filter: blur(20px);
  opacity: .5;
}
.icon.orange:after {
    background-color: orange;
}
.icon.lime:after {
    background-color: var(--lime-300);
}

.streak-screen {
    /*position: relative;
    min-height: 100vh;*/
    overflow: hidden;
    background: #050506;
    isolation: isolate;
}


/* Large soft orange cone */
.streak-screen::before {
    content: "";
    position: absolute;

    /*
     * Put the origin ABOVE the screen.
     * This prevents a visible flat line at the top.
     */
    top: -180px;
    left: 50%;

    width: 650px;
    height: 600px;

    transform: translateX(-50%);

    background:
        conic-gradient(
            from 160deg at 50% 0%,

            transparent 0deg,
            transparent 14deg,

            rgba(120, 55, 15, 0.12) 24deg,
            rgba(200, 95, 20, 0.34) 40deg,
            rgba(255, 145, 30, 0.43) 55deg,

            rgba(200, 90, 20, 0.30) 70deg,
            rgba(100, 40, 10, 0.10) 85deg,

            transparent 100deg,
            transparent 360deg
        );

    /*
     * Much stronger blur than before.
     */
    filter: blur(70px);

    opacity: 0.9;

    pointer-events: none;
    z-index: -2;
}

.streak-screen::after {
    content: "";
    position: absolute;

    top: -80px;
    left: 50%;

    width: 360px;
    height: 430px;

    transform: translateX(-50%);

    background:
        conic-gradient(
            from 165deg at 50% 0%,

            transparent 0deg,
            transparent 20deg,

            rgba(255, 180, 35, 0.08) 28deg,
            rgba(255, 175, 30, 0.30) 42deg,
            rgba(255, 200, 65, 0.42) 54deg,

            rgba(255, 155, 25, 0.26) 67deg,
            rgba(210, 90, 15, 0.08) 78deg,

            transparent 90deg,
            transparent 360deg
        );

    filter: blur(55px);

    opacity: 0.8;

    pointer-events: none;
    z-index: -1;
}

:root{
  /* tune these */
  --solid-bg: #f7f7fb;            /* bottom solid color */
  --blob-yellow: rgba(255, 232, 144, 0.85);
  --blob-blue:   rgba(194, 222, 255, 0.85);
  --blob-gray:   rgba(230, 230, 235, 0.9);
}
/* new colors*/
.blend-effect {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}
.blend-effect {
    background: rgba(45, 89, 98, 0.3); /* subtle translucent white */
    color: #1a1a1a;
}
.dark .blend-effect {
    background: rgba(45, 89, 98, 0.3);
}
/* container with the solid background */
.hero-bg{
  position: relative;
  background: var(--solid-bg);
  min-height: 100%;               /* adjust as needed */
  overflow: hidden;               /* hide ::before overflow */
}

/* the misty gradient layer */
.hero-bg::before{
  content: "";
  position: absolute;
  inset: -10% -10% 0 -10%;        /* bleed a bit outside for softness */
  /* soft blobs: tweak positions/sizes to taste */
  background:
     radial-gradient( 40% 55% at 20% 30%, var(--blob-blue),  transparent 60%),
     radial-gradient( 48% 60% at 70% 25%, var(--blob-gray),  transparent 62%),
     radial-gradient( 55% 55% at 65% 65%, var(--blob-yellow),transparent 60%);

  /* slight blur to make them extra soft */
  filter: blur(26px);

  /* fade the gradient layer into the solid bg at the bottom */
  /* mask means: fully visible at top → fully transparent at bottom */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  /* optional: ease the top edges too */
  /* -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%),
                         radial-gradient(120% 100% at 50% -10%, #000 60%, transparent 80%); */
}
/* optional: dark mode variant */
.dark {
    --solid-bg: var(--bg);
    --blob-yellow: rgba(251, 224, 130, 0.35);
    --blob-blue:   rgba(154, 199, 255, 0.30);
    --blob-gray:   rgba(170, 178, 190, 0.28);
}
.dark .hero-bg{ border: 1px solid rgba(255,255,255,0.06); }
@media (prefers-color-scheme: dark){
  :root{
    --solid-bg: var(--bg);
    --blob-yellow: rgba(251, 224, 130, 0.35);
    --blob-blue:   rgba(154, 199, 255, 0.30);
    --blob-gray:   rgba(170, 178, 190, 0.28);
  }
  .hero-bg{ border: 1px solid rgba(255,255,255,0.06); }
}


.glow-background {
  /*position: relative;*/
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      ellipse at center,
      transparent 20%,
      rgba(0,0,0,.15) 55%,
      rgba(0,0,0,.8) 100%
    ),
    #050508;
}

/* Purple + blue atmospheric glow */
.glow-background::before {
  content: "";
  position: absolute;
  z-index: -1;

  width: 750px;
  height: 500px;

  top: -180px;
  left: 50%;
  transform: translateX(-50%);

  background:
    radial-gradient(
      circle at 30% 45%,
      rgba(104, 55, 200, 0.7) 0%,
      rgba(82, 46, 170, 0.4) 30%,
      transparent 65%
    ),
    radial-gradient(
      circle at 72% 40%,
      rgba(20, 91, 200, 0.75) 0%,
      rgba(15, 72, 160, 0.4) 32%,
      transparent 68%
    );

  filter: blur(65px);
  opacity: 0.9;
  animation: ambientGlow 8s ease-in-out infinite alternate;
}

/* Extra soft central glow */
.glow-background::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 500px;
  height: 300px;

  top: 80px;
  left: 50%;
  transform: translateX(-50%);

  background: radial-gradient(
    ellipse,
    rgba(87, 76, 210, 0.26) 0%,
    rgba(49, 59, 160, 0.12) 45%,
    transparent 72%
  );

  filter: blur(45px);
}

@keyframes ambientGlow {
  from {
    transform: translateX(-50%) scale(1);
    opacity: .8;
  }

  to {
    transform: translateX(-50%) scale(1.08);
    opacity: 1;
  }
}