/* Quiet cosmic depth shared by the public showcase pages. */
:root {
  --cosmos-night: #08090c;
  --cosmos-paper: #f3f3f5;
  --cosmos-light:
    linear-gradient(135deg, rgba(249, 248, 252, .5), rgba(243, 246, 250, .62)),
    radial-gradient(circle at 14% 18%, rgba(130, 113, 255, .09), transparent 34%),
    radial-gradient(circle at 88% 72%, rgba(91, 190, 238, .07), transparent 31%),
    url("/assets/brand/cosmos-pearl-20260912.webp") center / cover no-repeat,
    linear-gradient(135deg, #f7f5fb 0%, #f1f4f8 48%, #f6f3f8 100%);
  --cosmos-dark:
    linear-gradient(180deg, #08090c 0%, rgba(8, 9, 12, .46) 23%, rgba(8, 9, 12, .58) 77%, #08090c 100%),
    radial-gradient(circle at 72% 28%, rgba(106, 85, 226, .16), transparent 32%),
    url("/assets/brand/cosmos-night-20260912.webp") center / cover no-repeat,
    #08090c;
}

/* Story: backgrounds stay on the sticky stages, preserving their scroll scene. */
.story-page .manifest {
  background: var(--cosmos-light);
}

.story-page .live .stage {
  background: var(--cosmos-dark);
}

.story-page .live-daylight {
  background: var(--cosmos-light);
}

.story-page .mobile .stage {
  background: var(--cosmos-light);
}

.story-page .invitation {
  background:
    linear-gradient(180deg, #08090c 0%, rgba(8, 9, 12, .54) 34%, rgba(8, 9, 12, .68) 78%, #08090c 100%),
    radial-gradient(circle at 50% 22%, rgba(130, 113, 255, .14), transparent 34%),
    url("/assets/brand/cosmos-night-20260912.webp") center / cover no-repeat,
    var(--cosmos-night);
}

/* Feature chapters: a measured cadence between deep space and pearl light. */
.feature-design .features-hero,
.feature-design .feature-live,
.feature-design .feature-cinema,
.feature-design .feature-arsenal {
  background: var(--cosmos-dark);
}

.feature-design .feature-tv,
.feature-design .feature-profiles,
.feature-design .feature-final {
  background: var(--cosmos-light);
}

/* Premium: the dark field joins hero and benefits; selling details stay light. */
.premium-page .premium-main {
  --premium-cosmos-height: 56.28vw;
  background:
    linear-gradient(180deg, rgba(8, 9, 12, .42) 0%, rgba(8, 9, 12, .7) 34%, #08090c 100%) center top / 100% var(--premium-cosmos-height) no-repeat,
    radial-gradient(circle at 78% 13%, rgba(93, 202, 244, .1), transparent 27%) center top / 100% var(--premium-cosmos-height) no-repeat,
    url("/assets/brand/cosmos-night-20260912.webp") center top / 100% auto no-repeat,
    var(--cosmos-night);
}

.premium-page .public-pricing,
.premium-page .comparison {
  background: var(--cosmos-light);
}

.premium-page .comparison-row,
.premium-page .comparison-labels strong,
.premium-page .comparison-compatibility,
.premium-page .pricing-note {
  color: #595964;
}

/* Download: cosmic entry, followed by a softly luminous demo section. */
.support-download .support-hero {
  background: var(--cosmos-dark);
}

.support-download .start-demo {
  background: var(--cosmos-light) !important;
}

/* Help and FAQ only receive one broad wash behind their opening content. */
.support-help,
.support-faq {
  background:
    radial-gradient(ellipse 72% 520px at 76% 0%, rgba(130, 113, 255, .14), transparent 69%),
    radial-gradient(ellipse 58% 430px at 12% 0%, rgba(91, 190, 238, .08), transparent 72%),
    var(--cosmos-paper);
}

@media (max-width: 700px) {
  .story-page .live .stage,
  .story-page .invitation,
  .feature-design .features-hero,
  .feature-design .feature-live,
  .feature-design .feature-cinema,
  .feature-design .feature-arsenal,
  .support-download .support-hero {
    background:
      linear-gradient(180deg, #08090c 0%, rgba(8, 9, 12, .48) 25%, rgba(8, 9, 12, .62) 78%, #08090c 100%),
      radial-gradient(circle at 70% 24%, rgba(106, 85, 226, .16), transparent 32%),
      url("/assets/brand/cosmos-night-mobile-20260912.webp") center / cover no-repeat,
      var(--cosmos-night);
  }

  .premium-page .premium-main {
    --premium-cosmos-height: 177.68vw;
    background:
      linear-gradient(180deg, rgba(8, 9, 12, .44) 0%, rgba(8, 9, 12, .72) 36%, #08090c 100%) center top / 100% var(--premium-cosmos-height) no-repeat,
      radial-gradient(circle at 74% 18%, rgba(93, 202, 244, .09), transparent 28%) center top / 100% var(--premium-cosmos-height) no-repeat,
      url("/assets/brand/cosmos-night-mobile-20260912.webp") center top / 100% auto no-repeat,
      var(--cosmos-night);
  }

  .support-help,
  .support-faq {
    background:
      radial-gradient(ellipse 110% 410px at 72% 0%, rgba(130, 113, 255, .13), transparent 72%),
      radial-gradient(ellipse 85% 330px at 0% 0%, rgba(91, 190, 238, .07), transparent 74%),
      var(--cosmos-paper);
  }
}