/* Homepage composition. Service pages retain their own split layouts. */
.cosmo-hero.cosmo-centered {
  --copy-color: #bdb7cb;
  background:
    radial-gradient(ellipse at 50% 43%, #6247941a, transparent 58%),
    radial-gradient(ellipse at 52% 86%, #203b6812, transparent 56%),
    #090b15;
}
.cosmo-centered .cosmo-hero-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 760px;
  padding-top: 100px;
  padding-bottom: 124px;
  text-align: center;
}
.cosmo-centered .cosmo-hero-copy { width: 100%; max-width: 980px; }
.cosmo-centered .cosmo-eyebrow { justify-content: center; margin-bottom: 26px; letter-spacing: 2.3px; }
.cosmo-centered h1 { font-size: clamp(76px, 7.3vw, 104px); line-height: 1.03; letter-spacing: -.065em; }
.cosmo-centered h1 > span { background-image: linear-gradient(110deg, #e9ddf4 15%, #d7b8eb 55%, #a5b6e9); }
.cosmo-centered .cosmo-hero-description { --copy-size: 18px; max-width: 580px; margin: 30px auto 0; }
.cosmo-centered .cosmo-hero-actions { flex-direction: row; justify-content: center; align-items: center; gap: 18px 28px; margin: 32px auto 0; }
.cosmo-centered .cosmo-cta { background: #f4f0fa; border-color: #f4f0fa; color: #21182d; box-shadow: 0 5px 28px #08071040; }
.cosmo-centered .cosmo-cta > span { color: #805ba8; }
.cosmo-centered .cosmo-cta:hover { background: #fff; border-color: #fff; box-shadow: 0 6px 32px #aa85cf24; }
.cosmo-centered .cosmo-explore { color: #b7afc5; }

/* The orbital form is an atmosphere behind the message, with its brightest
   edges outside the text and a quieter center for readable copy. */
.cosmo-centered .cosmo-scene {
  position: absolute;
  z-index: 0;
  top: 47%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(1000px, 96vw);
  height: 900px;
  margin: 0;
  aspect-ratio: auto;
  transform: translate(-50%, -50%);
  opacity: .24;
  mask-image: radial-gradient(ellipse at 50% 50%, #0006 0%, #0009 30%, #000 62%, transparent 82%);
}
.cosmo-centered .cosmo-scene::before { display: none; }
.cosmo-centered .cosmo-service-markers, .cosmo-centered .cosmo-scene-caption { display: none; }
.cosmo-centered .cosmo-scene-notes { left: auto; right: 0; bottom: 24px; justify-content: flex-end; }
.cosmo-centered .cosmo-constellations { left: -18%; width: 130%; opacity: .55; mask-image: radial-gradient(ellipse at 52% 47%, #000, #000a 60%, transparent 85%); }
.cosmo-centered .cosmo-floor { opacity: .45; }
.cosmo-centered .cosmo-floor::after { background: radial-gradient(ellipse at 50% 40%, #090b15ed, #090b1580 60%, transparent), linear-gradient(180deg, #090b15 18%, transparent 80%); }

/* Quiet service constellations give the wide desktop composition a frame. */
.cosmo-service-field { position: absolute; z-index: 2; inset: 0 0 86px; overflow: hidden; pointer-events: none; }
.cosmo-service-traces { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .72; }
.cosmo-service-traces path { vector-effect: non-scaling-stroke; }
.cosmo-field-label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(190px, 17vw);
  color: #b7adc5;
  font-size: 11px;
  font-weight: 450;
  letter-spacing: .035em;
  line-height: 1.45;
  text-shadow: 0 1px 12px #090b15;
  white-space: nowrap;
}
.cosmo-field-label::after {
  position: absolute;
  top: 50%;
  width: clamp(48px, 8vw, 116px);
  height: 1px;
  content: '';
  opacity: .75;
}
.cosmo-field-label[data-side='left'] { left: max(34px, calc((100vw - 1280px) / 2 + 18px)); justify-content: flex-end; }
.cosmo-field-label[data-side='left']::after { right: -1px; transform: translateX(100%); background: linear-gradient(90deg, #b184d45c, #8b8bd41c 62%, transparent); }
.cosmo-field-label[data-side='right'] { right: max(34px, calc((100vw - 1280px) / 2 + 18px)); }
.cosmo-field-label[data-side='right']::after { left: -1px; transform: translateX(-100%); background: linear-gradient(90deg, transparent, #8b8bd41c 38%, #b184d45c); }
.cosmo-field-label.is-center { top: 12%; left: 50%; width: max-content; justify-content: center; transform: translateX(-50%); }
.cosmo-field-label.is-center::after { top: calc(100% + 7px); left: 50%; width: 1px; height: 34px; transform: translateX(-50%); background: linear-gradient(180deg, #b184d44d, transparent); }
.cosmo-field-label i {
  position: relative;
  z-index: 1;
  width: 7px;
  height: 7px;
  flex: none;
  border: 1px solid #eedbff;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, #d38df1 42%, #5155dd 78%);
  box-shadow: 0 0 9px #c17cf599, 0 0 20px #705fff38;
}
.cosmo-field-label.is-upper { top: 31%; }
.cosmo-field-label.is-lower { top: 71%; }

@media (min-width: 1600px) {
  .cosmo-centered .cosmo-hero-main { min-height: 800px; }
}
@media (max-width: 1099px) {
  .cosmo-service-field { display: none; }
}
@media (max-width: 980px) {
  .cosmo-centered .cosmo-hero-main { min-height: 720px; padding-top: 86px; padding-bottom: 112px; }
  .cosmo-centered h1 { font-size: clamp(68px, 8.5vw, 88px); }
  .cosmo-centered .cosmo-hero-description { --copy-size: 17px; }
  .cosmo-centered .cosmo-scene { width: 920px; height: 840px; opacity: .21; }
}
@media (max-width: 700px) {
  .cosmo-centered .cosmo-hero-main { min-height: 660px; padding-top: 72px; padding-bottom: 102px; }
  .cosmo-centered .cosmo-hero-copy { max-width: 560px; }
  .cosmo-centered .cosmo-eyebrow { margin-bottom: 24px; font-size: 9px; letter-spacing: 1.6px; }
  .cosmo-centered h1 { font-size: clamp(48px, 12vw, 70px); line-height: 1.07; }
  .cosmo-centered .cosmo-hero-description { --copy-size: 16px; margin-top: 24px; max-width: 410px; }
  .cosmo-centered .cosmo-hero-actions { margin-top: 28px; gap: 12px 22px; }
  .cosmo-centered .cosmo-scene { position: absolute; top: 44%; left: 50%; right: auto; bottom: auto; width: 640px; height: 720px; margin: 0; opacity: .16; }
  .cosmo-centered .cosmo-scene-notes { left: auto; right: 0; bottom: 16px; }
  .cosmo-centered .cosmo-constellations { top: 3%; left: -65%; width: 200%; height: 86%; opacity: .45; }
  .cosmo-centered .cosmo-floor { top: 35%; opacity: .3; }
}