:root {
  --ink: #020817;
  --ink-soft: #06132d;
  --ink-card: rgba(7, 23, 55, .64);
  --white: #f7fbff;
  --muted: #8da6c8;
  --cyan: #36e6ff;
  --blue: #3b7cff;
  --violet: #8758ff;
  --pink: #ff3fa4;
  --orange: #ff9d3c;
  --line: rgba(126, 186, 255, .2);
  --max: 1440px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 77% 18%, rgba(40, 118, 255, .15), transparent 30%),
    radial-gradient(circle at 12% 50%, rgba(135, 52, 255, .11), transparent 32%),
    var(--ink);
  color: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.site-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.grid-field {
  position: absolute;
  inset: 0 0 auto;
  height: 115vh;
  z-index: -3;
  opacity: .22;
  background-image:
    linear-gradient(rgba(86, 158, 255, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 158, 255, .1) 1px, transparent 1px);
  background-size: 82px 82px;
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.aurora {
  position: absolute;
  z-index: -4;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  filter: blur(140px);
  opacity: .18;
  pointer-events: none;
}

.aurora-one {
  top: -22rem;
  right: -12rem;
  background: #167cff;
}

.aurora-two {
  top: 38rem;
  left: -25rem;
  background: #b62fff;
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 18px;
  left: 50%;
  width: min(calc(100% - 40px), 1370px);
  min-height: 76px;
  padding: 11px 13px 11px 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  transform: translateX(-50%);
  border: 1px solid rgba(129, 188, 255, .18);
  border-radius: 24px;
  background: rgba(2, 10, 27, .67);
  backdrop-filter: blur(26px);
  box-shadow:
    0 24px 90px rgba(0, 0, 0, .34),
    inset 0 1px rgba(255, 255, 255, .045);
}

.brand img {
  width: auto;
  height: 48px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 35px;
}

.desktop-nav a {
  color: #93a8c5;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: color .25s ease;
}

.desktop-nav a:hover {
  color: #fff;
}

.nav-cta {
  justify-self: end;
  min-height: 50px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(72, 211, 255, .34);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(35, 119, 255, .27), rgba(152, 59, 255, .17));
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nav-cta i,
.button i {
  font-style: normal;
  color: var(--cyan);
}

.hero {
  position: relative;
  width: min(calc(100% - 48px), var(--max));
  min-height: 100svh;
  margin: 0 auto;
  padding: 150px 0 95px;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: 28px;
}

.hero-copy {
  position: relative;
  z-index: 12;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  color: #89cdef;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.eyebrow-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(54, 230, 255, .85);
}

.eyebrow-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(54, 230, 255, .3);
  border-radius: inherit;
}

.hero h1 {
  margin: 0;
  font-size: clamp(5.2rem, 8.2vw, 9.1rem);
  line-height: .78;
  letter-spacing: -.075em;
  text-wrap: balance;
}

.hero-line {
  display: block;
}

.gradient-text {
  width: max-content;
  padding-right: .08em;
  background:
    linear-gradient(96deg, #30eaff 0%, #4e9dff 23%, #7b63ff 45%, #d64eff 67%, #ff4a9e 83%, #ffad45 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 34px rgba(114, 74, 255, .19));
}

.hero-lead {
  max-width: 640px;
  margin: 34px 0 0;
  color: #9cafca;
  font-size: clamp(1rem, 1.3vw, 1.22rem);
  line-height: 1.72;
}

.hero-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.button {
  min-height: 58px;
  padding: 0 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border-radius: 17px;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.button:hover {
  transform: translateY(-3px);
}

.button-primary {
  background: linear-gradient(120deg, #158eff, #6458ff 49%, #dd3fbb);
  box-shadow: 0 18px 55px rgba(72, 79, 255, .3);
}

.button-primary:hover {
  box-shadow: 0 23px 70px rgba(72, 79, 255, .42);
}

.button-ghost {
  border: 1px solid rgba(123, 185, 255, .22);
  background: rgba(8, 28, 64, .46);
  color: #b0c4df;
}

.button-ghost:hover {
  border-color: rgba(72, 220, 255, .4);
}

.hero-microcopy {
  margin-top: 27px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #667f9f;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .035em;
}

.micro-divider {
  width: 27px;
  height: 1px;
  background: rgba(117, 169, 232, .3);
}

.hero-visual {
  position: relative;
  min-height: 730px;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.hero-image-wrap {
  position: relative;
  z-index: 8;
  width: min(110%, 900px);
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-image {
  width: 100%;
  filter:
    saturate(1.08)
    contrast(1.025)
    drop-shadow(0 55px 80px rgba(0, 0, 0, .54));
  animation: hero-float 7s ease-in-out infinite;
}

.visual-halo {
  position: absolute;
  z-index: 1;
  width: 83%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(44, 216, 255, .24), rgba(64, 91, 255, .14) 34%, rgba(166, 55, 255, .09) 52%, transparent 70%);
  filter: blur(28px);
}

.orbit {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
}

.orbit-one {
  width: 490px;
  height: 490px;
  border: 1px solid rgba(74, 212, 255, .24);
  animation: orbit-spin 24s linear infinite;
}

.orbit-two {
  width: 650px;
  height: 650px;
  border: 1px dashed rgba(116, 106, 255, .24);
  animation: orbit-spin-reverse 34s linear infinite;
}

.orbit-three {
  width: 770px;
  height: 420px;
  border: 1px solid rgba(255, 76, 175, .13);
  transform: rotate(-18deg);
}

.energy {
  position: absolute;
  z-index: 4;
  border-radius: 50%;
  filter: blur(1px);
}

.energy-one {
  top: 19%;
  right: 13%;
  width: 12px;
  height: 12px;
  background: #46ecff;
  box-shadow: 0 0 32px 8px rgba(70, 236, 255, .38);
  animation: pulse 2.8s ease-in-out infinite;
}

.energy-two {
  bottom: 24%;
  left: 9%;
  width: 8px;
  height: 8px;
  background: #a653ff;
  box-shadow: 0 0 28px 8px rgba(166, 83, 255, .4);
  animation: pulse 3.4s ease-in-out infinite .5s;
}

.energy-three {
  top: 33%;
  left: 12%;
  width: 6px;
  height: 6px;
  background: #ff4d9d;
  box-shadow: 0 0 26px 7px rgba(255, 77, 157, .36);
  animation: pulse 3s ease-in-out infinite 1s;
}

.floating-card {
  position: absolute;
  z-index: 15;
  padding: 14px 17px;
  border: 1px solid rgba(108, 192, 255, .22);
  border-radius: 15px;
  background: rgba(3, 16, 40, .73);
  backdrop-filter: blur(18px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, .34);
}

.floating-card strong,
.floating-card small {
  display: block;
}

.floating-card strong {
  color: #eef9ff;
  font-size: .72rem;
  letter-spacing: .08em;
}

.floating-card small {
  margin-top: 4px;
  color: #6f8bad;
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .11em;
}

.floating-card-left {
  top: 23%;
  left: 1%;
  display: flex;
  align-items: center;
  gap: 11px;
}

.floating-card-right {
  right: 0;
  bottom: 22%;
}

.card-signal {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3cff9a;
  box-shadow: 0 0 18px rgba(60, 255, 154, .7);
}

.scroll-indicator {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  transform: translateX(-50%);
  color: #607895;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .2em;
}

.scroll-indicator i {
  position: relative;
  width: 23px;
  height: 39px;
  border: 1px solid rgba(124, 182, 248, .28);
  border-radius: 16px;
}

.scroll-indicator i::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 7px;
  border-radius: 3px;
  background: var(--cyan);
  transform: translateX(-50%);
  animation: scroll-dot 1.8s ease-in-out infinite;
}

.power-rail {
  position: relative;
  overflow: hidden;
  border-block: 1px solid rgba(107, 170, 255, .13);
  background:
    linear-gradient(90deg, rgba(31, 86, 255, .11), rgba(141, 61, 255, .1), rgba(255, 59, 161, .075));
}

.power-track {
  width: max-content;
  padding: 23px 0;
  display: flex;
  align-items: center;
  gap: 30px;
  color: #c7d8ed;
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: marquee 27s linear infinite;
}

.power-track b {
  color: #52ddff;
  font-size: .7rem;
}

.mission-preview {
  position: relative;
  width: min(calc(100% - 48px), var(--max));
  min-height: 760px;
  margin: 0 auto;
  padding: 150px 0 135px;
  display: grid;
  grid-template-columns: .45fr 1.25fr .7fr;
  gap: 48px;
  align-items: center;
}

.mission-glow {
  position: absolute;
  z-index: -1;
  top: 18%;
  left: 30%;
  width: 520px;
  height: 420px;
  border-radius: 50%;
  background: rgba(51, 93, 255, .1);
  filter: blur(110px);
}

.mission-label {
  align-self: start;
  padding-top: 22px;
}

.mission-label span {
  color: #44dfff;
  font-size: .68rem;
  font-weight: 900;
}

.mission-label p {
  max-width: 180px;
  color: #657f9f;
  font-size: .65rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: .13em;
}

.mission-statement > p {
  margin: 0 0 16px;
  color: #80a4cd;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.mission-statement h2 {
  margin: 0;
  font-size: clamp(4.3rem, 7.3vw, 8rem);
  line-height: .88;
  letter-spacing: -.065em;
}

.mission-statement h2 span {
  display: block;
  background: linear-gradient(90deg, #3ce7ff, #6b74ff 42%, #c54fff 73%, #ff529a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mission-belief {
  align-self: end;
  padding-bottom: 30px;
}

.belief-line {
  display: block;
  width: 52px;
  height: 1px;
  margin-bottom: 20px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

.mission-belief p {
  color: #91a7c4;
  font-size: .95rem;
  line-height: 1.75;
}

.mission-belief a {
  display: inline-flex;
  gap: 9px;
  margin-top: 12px;
  color: #d8e8fb;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mission-belief a span {
  color: var(--cyan);
}

.next-stage {
  width: min(calc(100% - 48px), var(--max));
  min-height: 330px;
  margin: 0 auto;
  padding: 80px 0;
  border-top: 1px solid rgba(107, 170, 255, .12);
}

.next-stage span {
  color: #6d89aa;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.next-stage h2 {
  max-width: 900px;
  margin: 15px 0 0;
  font-size: clamp(3rem, 6vw, 6.4rem);
  line-height: .95;
  letter-spacing: -.055em;
}

.anchor-target {
  height: 1px;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .85s cubic-bezier(.2,.7,.2,1),
    transform .85s cubic-bezier(.2,.7,.2,1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes hero-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-.3deg);
  }
  50% {
    transform: translate3d(0, -14px, 0) rotate(.35deg);
  }
}

@keyframes orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbit-spin-reverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: .45;
    transform: scale(.75);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes scroll-dot {
  0%, 100% {
    opacity: .3;
    transform: translate(-50%, 0);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, 12px);
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-35%);
  }
}

@media (max-width: 1080px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .desktop-nav {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 155px;
  }

  .hero-copy {
    max-width: 820px;
  }

  .hero-visual {
    min-height: 650px;
  }

  .mission-preview {
    grid-template-columns: 1fr 2fr;
  }

  .mission-belief {
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  .site-header {
    top: 10px;
    width: calc(100% - 20px);
    min-height: 66px;
    padding: 9px 10px 9px 14px;
    border-radius: 18px;
  }

  .brand img {
    height: 36px;
  }

  .nav-cta {
    min-height: 44px;
    padding: 0 12px;
    font-size: .58rem;
  }

  .nav-cta i {
    display: none;
  }

  .hero {
    width: calc(100% - 28px);
    padding-top: 125px;
    padding-bottom: 85px;
  }

  .hero h1 {
    font-size: clamp(4.2rem, 20vw, 6.3rem);
  }

  .hero-lead {
    font-size: .98rem;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .hero-microcopy {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .micro-divider {
    display: none;
  }

  .hero-visual {
    min-height: 440px;
    margin-top: 18px;
  }

  .hero-image-wrap {
    width: 115%;
  }

  .orbit-one {
    width: 300px;
    height: 300px;
  }

  .orbit-two {
    width: 390px;
    height: 390px;
  }

  .orbit-three {
    width: 440px;
    height: 250px;
  }

  .floating-card {
    transform: scale(.76);
  }

  .floating-card-left {
    left: -32px;
  }

  .floating-card-right {
    right: -35px;
  }

  .scroll-indicator {
    bottom: 14px;
  }

  .mission-preview {
    width: calc(100% - 28px);
    min-height: auto;
    padding: 105px 0;
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .mission-label,
  .mission-belief {
    grid-column: auto;
  }

  .mission-statement h2 {
    font-size: clamp(4rem, 18vw, 6rem);
  }

  .mission-belief {
    padding-bottom: 0;
  }

  .next-stage {
    width: calc(100% - 28px);
  }
}


.talent-universe {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 95px 0 150px;
}

.talent-intro {
  padding: 55px 0 65px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 70px;
  align-items: end;
}

.talent-sequence {
  color: #65dcff;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.talent-intro h2 {
  margin: 17px 0 0;
  font-size: clamp(4rem, 7vw, 7.7rem);
  line-height: .86;
  letter-spacing: -.065em;
}

.talent-intro h2 span {
  display: block;
  background: linear-gradient(90deg, #37e9ff, #657cff 40%, #c34eff 72%, #ff519c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.talent-intro > p {
  max-width: 510px;
  margin: 0 0 10px;
  color: #91a8c6;
  font-size: 1rem;
  line-height: 1.75;
}

.talent-mosaic {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  grid-template-rows: 530px 530px 620px;
  gap: 18px;
}

.talent-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(119, 183, 255, .16);
  border-radius: 34px;
  background: rgba(5, 18, 44, .76);
  isolation: isolate;
  transition:
    transform .45s cubic-bezier(.2,.7,.2,1),
    border-color .45s ease,
    box-shadow .45s ease;
}

.talent-panel:hover {
  z-index: 10;
  transform: translateY(-7px);
  border-color: rgba(85, 215, 255, .42);
  box-shadow: 0 35px 90px rgba(0, 0, 0, .32);
}

.panel-music {
  grid-row: 1 / span 2;
  background:
    radial-gradient(circle at 72% 64%, rgba(32, 178, 255, .2), transparent 35%),
    radial-gradient(circle at 16% 14%, rgba(119, 61, 255, .2), transparent 32%),
    #06152f;
}

.panel-dance {
  background:
    radial-gradient(circle at 76% 45%, rgba(255, 64, 168, .18), transparent 36%),
    linear-gradient(145deg, #091837, #041027);
}

.panel-art {
  background:
    radial-gradient(circle at 82% 42%, rgba(255, 146, 46, .16), transparent 35%),
    radial-gradient(circle at 62% 70%, rgba(212, 54, 255, .14), transparent 33%),
    #071630;
}

.panel-performance {
  grid-column: 1;
  background:
    radial-gradient(circle at 65% 40%, rgba(53, 222, 255, .15), transparent 34%),
    linear-gradient(135deg, #06172f, #081126);
}

.panel-originals {
  grid-column: 2;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: stretch;
  background:
    radial-gradient(circle at 75% 12%, rgba(146, 66, 255, .19), transparent 33%),
    radial-gradient(circle at 95% 90%, rgba(255, 55, 153, .12), transparent 30%),
    #06142e;
}

.panel-copy {
  position: relative;
  z-index: 8;
  width: 63%;
  padding: 34px;
}

.panel-number {
  color: #51ddff;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.panel-label {
  margin: 10px 0 18px;
  color: #7994b7;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .2em;
}

.panel-copy h3 {
  margin: 0;
  font-size: clamp(2.7rem, 4vw, 4.9rem);
  line-height: .89;
  letter-spacing: -.055em;
}

.panel-detail {
  margin-top: 19px;
  color: #7890af;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
}

.talent-panel > img {
  position: absolute;
  z-index: 3;
  object-fit: contain;
  filter:
    saturate(.9)
    contrast(1.06)
    drop-shadow(0 34px 55px rgba(0, 0, 0, .4));
  transition:
    transform .6s cubic-bezier(.2,.7,.2,1),
    filter .6s ease;
}

.talent-panel:hover > img {
  transform: scale(1.035) translateY(-5px);
  filter:
    saturate(1.04)
    contrast(1.08)
    drop-shadow(0 42px 65px rgba(0, 0, 0, .48));
}

.panel-music > img {
  right: -12%;
  bottom: -2%;
  width: 96%;
  height: 83%;
  mix-blend-mode: screen;
}

.panel-dance > img {
  right: -5%;
  bottom: -9%;
  width: 69%;
  height: 92%;
  mix-blend-mode: screen;
}

.panel-art > img {
  right: -5%;
  bottom: -10%;
  width: 65%;
  height: 83%;
}

.panel-performance > img {
  right: -4%;
  bottom: -9%;
  width: 62%;
  height: 95%;
}

.panel-aura {
  position: absolute;
  z-index: 1;
  right: -5%;
  bottom: 8%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(40, 217, 255, .2), rgba(93, 70, 255, .1) 40%, transparent 70%);
  filter: blur(25px);
}

.art-burst {
  position: absolute;
  z-index: 1;
  right: 5%;
  bottom: 8%;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(
      from 40deg,
      rgba(255, 81, 158, .18),
      rgba(255, 164, 54, .2),
      rgba(62, 225, 255, .16),
      rgba(139, 75, 255, .19),
      rgba(255, 81, 158, .18)
    );
  filter: blur(28px);
}

.panel-stroke {
  position: absolute;
  z-index: 9;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, .035);
  border-radius: 24px;
  pointer-events: none;
}

.originals-image {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

.originals-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 45%, #06142e 100%),
    linear-gradient(0deg, rgba(6, 20, 46, .45), transparent 50%);
}

.originals-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.14);
}

.originals-copy {
  position: relative;
  z-index: 4;
  padding: 48px 38px 42px 18px;
  align-self: center;
}

.originals-copy h3 {
  margin: 12px 0 20px;
  font-size: clamp(2.8rem, 4.2vw, 5rem);
  line-height: .9;
  letter-spacing: -.055em;
}

.originals-copy h3 span {
  background: linear-gradient(90deg, #4ae8ff, #8a67ff, #ff4ea2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.originals-copy > p:last-child {
  color: #8fa5c2;
  line-height: 1.7;
}

.talent-power {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1fr auto 3fr auto 1fr;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.talent-power > p {
  margin: 0;
  color: #718eaf;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .17em;
}

.talent-power h2 {
  margin: 0;
  font-size: clamp(2.4rem, 4.7vw, 5.2rem);
  line-height: .95;
  letter-spacing: -.045em;
}

.talent-power h2 span {
  background: linear-gradient(90deg, #42e8ff, #7770ff, #e84cb6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.talent-power-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 212, 255, .32));
}

.talent-power-line:last-child {
  background: linear-gradient(90deg, rgba(79, 212, 255, .32), transparent);
}

.proof-transition {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 115px 0 145px;
  display: grid;
  grid-template-columns: .2fr 1.1fr .7fr;
  gap: 50px;
  align-items: end;
  border-top: 1px solid rgba(105, 168, 244, .12);
}

.proof-index {
  align-self: start;
  color: rgba(255,255,255,.1);
  font-size: 4rem;
  font-weight: 900;
}

.proof-transition span {
  color: #5edfff;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.proof-transition h2 {
  max-width: 820px;
  margin: 15px 0 0;
  font-size: clamp(3.7rem, 6.3vw, 6.8rem);
  line-height: .9;
  letter-spacing: -.06em;
}

.proof-transition > p {
  margin: 0 0 8px;
  color: #8fa5c2;
  line-height: 1.75;
}

@media (max-width: 1080px) {
  .talent-intro {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .talent-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 650px 480px 580px;
  }

  .panel-music {
    grid-row: auto;
    grid-column: 1 / -1;
  }

  .panel-performance {
    grid-column: 1;
  }

  .panel-originals {
    grid-column: 1 / -1;
  }

  .proof-transition {
    grid-template-columns: .2fr 1fr;
  }

  .proof-transition > p {
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  .talent-universe {
    width: calc(100% - 28px);
    padding: 70px 0 105px;
  }

  .talent-intro {
    padding-bottom: 42px;
  }

  .talent-intro h2 {
    font-size: clamp(4rem, 18vw, 6rem);
  }

  .talent-mosaic {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .talent-panel,
  .panel-music,
  .panel-performance,
  .panel-originals {
    grid-column: auto;
    grid-row: auto;
    min-height: 570px;
  }

  .panel-copy {
    width: 88%;
    padding: 28px;
  }

  .panel-music > img {
    width: 118%;
    right: -29%;
  }

  .panel-dance > img,
  .panel-art > img,
  .panel-performance > img {
    width: 88%;
    height: 70%;
    right: -14%;
  }

  .panel-originals {
    display: block;
  }

  .originals-image {
    position: absolute;
    inset: 0;
  }

  .originals-image::after {
    background:
      linear-gradient(0deg, #06142e 18%, rgba(6,20,46,.78) 50%, rgba(6,20,46,.18) 100%);
  }

  .originals-copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px;
  }

  .talent-power {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .talent-power-line {
    width: 100%;
  }

  .proof-transition {
    width: calc(100% - 28px);
    padding: 85px 0 110px;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .proof-transition > p {
    grid-column: auto;
  }
}


.platform-experience {
  position: relative;
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 80px 0 170px;
}

.experience-heading {
  padding: 30px 0 65px;
  display: grid;
  grid-template-columns: 1.2fr .7fr;
  gap: 70px;
  align-items: end;
}

.experience-index {
  color: #58e2ff;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.experience-heading h2 {
  margin: 17px 0 0;
  font-size: clamp(4rem, 7vw, 7.6rem);
  line-height: .87;
  letter-spacing: -.065em;
}

.experience-heading h2 span {
  display: block;
  background: linear-gradient(90deg, #36e8ff, #6e72ff 42%, #d64dff 73%, #ff4e9d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.experience-heading > p {
  margin: 0 0 10px;
  color: #91a7c4;
  font-size: 1rem;
  line-height: 1.75;
}

.experience-stage {
  position: relative;
  min-height: 920px;
  overflow: hidden;
  border: 1px solid rgba(112, 182, 255, .18);
  border-radius: 42px;
  background:
    radial-gradient(circle at 19% 28%, rgba(42, 183, 255, .16), transparent 28%),
    radial-gradient(circle at 84% 72%, rgba(192, 57, 255, .14), transparent 28%),
    linear-gradient(145deg, rgba(7, 27, 63, .92), rgba(3, 11, 29, .96));
  box-shadow:
    inset 0 1px rgba(255,255,255,.04),
    0 50px 120px rgba(0,0,0,.25);
  isolation: isolate;
}

.experience-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .23;
  background-image:
    linear-gradient(rgba(84, 158, 255, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84, 158, 255, .1) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
}

.experience-light {
  position: absolute;
  z-index: -1;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .2;
}

.experience-light-a {
  top: 8%;
  left: 28%;
  background: #1dcfff;
}

.experience-light-b {
  right: 8%;
  bottom: 4%;
  background: #b541ff;
}

.experience-talent {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 45px 60px rgba(0,0,0,.42));
}

.experience-dj {
  width: 340px;
  left: -80px;
  bottom: -22px;
  transform: rotate(-4deg);
}

.experience-sport {
  width: 330px;
  right: -72px;
  top: 52px;
  transform: rotate(4deg);
}

.profile-demo {
  position: absolute;
  z-index: 8;
  top: 82px;
  left: 50%;
  width: min(620px, 52%);
  min-height: 735px;
  padding: 26px;
  transform: translateX(-50%) rotateX(1deg) rotateY(-3deg);
  border: 1px solid rgba(130, 196, 255, .25);
  border-radius: 34px;
  background:
    linear-gradient(150deg, rgba(11, 39, 85, .88), rgba(4, 16, 39, .94));
  backdrop-filter: blur(24px);
  box-shadow:
    0 55px 120px rgba(0,0,0,.46),
    inset 0 1px rgba(255,255,255,.06);
}

.profile-demo-top {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7996b9;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .15em;
}

.profile-demo-presence {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #39ff88;
  box-shadow: 0 0 16px rgba(57,255,136,.65);
}

.profile-demo-menu {
  margin-left: auto;
  color: #9db2cd;
  letter-spacing: .12em;
}

.profile-demo-identity {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 19px;
}

.profile-demo-avatar {
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 2px solid rgba(72, 226, 255, .52);
  border-radius: 50%;
  background: #071b3d;
  box-shadow: 0 0 35px rgba(48, 189, 255, .18);
}

.profile-demo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-demo-category {
  color: #54ddff;
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .15em;
}

.profile-demo-identity h3 {
  margin: 5px 0 2px;
  font-size: 2rem;
  letter-spacing: -.035em;
}

.profile-demo-identity p {
  margin: 0;
  color: #7892b2;
  font-size: .8rem;
}

.profile-demo-why {
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid rgba(114, 177, 255, .12);
  border-radius: 18px;
  background: rgba(4, 18, 43, .52);
}

.profile-demo-why span {
  color: #758fad;
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.profile-demo-why p {
  margin: 7px 0 0;
  color: #b0c2d8;
  font-size: .82rem;
  line-height: 1.55;
}

.profile-demo-media {
  margin-top: 17px;
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 12px;
}

.demo-media-card {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  border: 1px solid rgba(111, 185, 255, .14);
  border-radius: 21px;
}

.demo-media-primary {
  background:
    radial-gradient(circle at 65% 30%, rgba(57, 225, 255, .24), transparent 27%),
    radial-gradient(circle at 30% 78%, rgba(130, 67, 255, .3), transparent 34%),
    linear-gradient(145deg, #102c60, #07142f);
}

.demo-media-primary::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -25px;
  bottom: -50px;
  border: 1px solid rgba(91, 224, 255, .3);
  border-radius: 50%;
  box-shadow:
    0 0 0 25px rgba(88, 99, 255, .07),
    0 0 0 52px rgba(202, 65, 255, .045);
}

.demo-media-type {
  position: absolute;
  top: 15px;
  left: 16px;
  color: #8eadd0;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.demo-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(2,11,28,.58);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: .8rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}

.demo-duration {
  position: absolute;
  right: 13px;
  bottom: 12px;
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(1,8,20,.7);
  color: #afc1d7;
  font-size: .55rem;
}

.demo-media-secondary {
  padding: 15px;
  background:
    linear-gradient(145deg, rgba(255,71,164,.18), rgba(83,74,255,.16)),
    #091934;
}

.demo-media-secondary > span {
  color: #8ea5c1;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.demo-media-flare {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 110px;
  height: 110px;
  transform: translate(-50%, -50%) rotate(24deg);
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(54,229,255,.28), rgba(132,71,255,.34), rgba(255,69,160,.28));
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.profile-demo-actions {
  margin-top: 17px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.profile-demo-actions div {
  min-height: 77px;
  padding: 13px;
  border: 1px solid rgba(112, 178, 255, .12);
  border-radius: 15px;
  background: rgba(4, 17, 40, .5);
}

.profile-demo-actions strong,
.profile-demo-actions span {
  display: block;
}

.profile-demo-actions strong {
  color: #dcecff;
  font-size: .55rem;
  letter-spacing: .1em;
}

.profile-demo-actions span {
  margin-top: 7px;
  color: #66809f;
  font-size: .55rem;
  line-height: 1.35;
}

.rating-demo {
  position: absolute;
  z-index: 12;
  right: 6%;
  bottom: 70px;
  width: 270px;
  padding: 22px;
  border: 1px solid rgba(255, 86, 180, .26);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,65,169,.18), transparent 34%),
    rgba(5, 17, 42, .88);
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}

.rating-demo-head {
  display: flex;
  justify-content: space-between;
  color: #7894b5;
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.rating-demo-head strong {
  color: #ff61b4;
}

.rating-value {
  margin-top: 15px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.rating-value span {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #43eaff, #816aff, #ff4ba6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rating-value small {
  color: #6983a4;
}

.rating-track {
  position: relative;
  height: 6px;
  margin-top: 15px;
  border-radius: 20px;
  background: #102344;
}

.rating-track i {
  position: absolute;
  inset: 0 20% 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #2be7ff, #7468ff, #ff4ca7);
}

.rating-track b {
  position: absolute;
  left: 80%;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%);
  border: 3px solid #fff;
  border-radius: 50%;
  background: #d54dff;
  box-shadow: 0 0 20px rgba(213,77,255,.7);
}

.rating-labels {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  color: #536c8c;
  font-size: .43rem;
  font-weight: 900;
}

.rating-demo > p {
  margin: 17px 0 0;
  color: #8299b7;
  font-size: .7rem;
  line-height: 1.55;
}

.signal-card {
  position: absolute;
  z-index: 13;
  min-height: 82px;
  padding: 15px 17px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(105, 197, 255, .2);
  border-radius: 18px;
  background: rgba(3, 16, 39, .84);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 65px rgba(0,0,0,.35);
}

.signal-card strong,
.signal-card small {
  display: block;
}

.signal-card strong {
  font-size: .6rem;
  letter-spacing: .11em;
}

.signal-card small {
  max-width: 180px;
  margin-top: 5px;
  color: #7089a8;
  font-size: .55rem;
  line-height: 1.35;
}

.signal-discovery {
  left: 6%;
  top: 100px;
}

.signal-icon {
  color: #48e7ff;
  font-size: 1.4rem;
}

.signal-social {
  left: 7%;
  bottom: 92px;
}

.signal-pulse {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #42ff99;
  box-shadow: 0 0 20px rgba(66,255,153,.7);
}

.experience-pillars {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.experience-pillar {
  position: relative;
  min-height: 345px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 28px;
  background:
    linear-gradient(#071832, #071832) padding-box,
    linear-gradient(145deg, rgba(54,230,255,.55), rgba(107,82,255,.13), rgba(255,67,166,.35)) border-box;
}

.experience-pillar:nth-child(2) {
  background:
    linear-gradient(#071832, #071832) padding-box,
    linear-gradient(145deg, rgba(255,70,169,.5), rgba(134,75,255,.18), rgba(255,164,61,.4)) border-box;
}

.experience-pillar:nth-child(3) {
  background:
    linear-gradient(#071832, #071832) padding-box,
    linear-gradient(145deg, rgba(71,255,173,.4), rgba(50,205,255,.2), rgba(117,76,255,.5)) border-box;
}

.experience-pillar > span {
  position: absolute;
  top: 24px;
  right: 25px;
  color: rgba(255,255,255,.09);
  font-size: 2.4rem;
  font-weight: 900;
}

.pillar-icon {
  width: 47px;
  height: 47px;
  margin-bottom: auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(79, 216, 255, .22);
  border-radius: 14px;
  background: rgba(18, 55, 100, .38);
  color: #55e3ff;
  font-size: 1.2rem;
}

.experience-pillar h3 {
  margin: 45px 0 10px;
  font-size: 1.55rem;
  line-height: 1.05;
}

.experience-pillar p {
  margin: 0;
  color: #8098b7;
  font-size: .85rem;
  line-height: 1.6;
}

.experience-manifesto {
  padding: 140px 0 20px;
  text-align: center;
}

.experience-manifesto > span {
  color: #6c88aa;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .2em;
}

.experience-manifesto h2 {
  max-width: 1050px;
  margin: 20px auto 0;
  font-size: clamp(3.6rem, 6.4vw, 7rem);
  line-height: .9;
  letter-spacing: -.06em;
}

.experience-manifesto strong {
  display: block;
  font-weight: inherit;
  background: linear-gradient(90deg, #3ce8ff, #746cff 42%, #d74cff 70%, #ff529c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 1080px) {
  .experience-heading {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .experience-stage {
    min-height: 1050px;
  }

  .profile-demo {
    width: min(650px, 72%);
  }

  .experience-dj {
    width: 280px;
  }

  .experience-sport {
    width: 270px;
  }

  .signal-discovery {
    top: auto;
    bottom: 90px;
  }

  .rating-demo {
    right: 4%;
  }

  .experience-pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .platform-experience {
    width: calc(100% - 28px);
    padding: 55px 0 110px;
  }

  .experience-heading h2 {
    font-size: clamp(4rem, 18vw, 6rem);
  }

  .experience-stage {
    min-height: 1010px;
    border-radius: 30px;
  }

  .experience-talent {
    opacity: .42;
  }

  .experience-dj {
    width: 220px;
    left: -80px;
    bottom: 0;
  }

  .experience-sport {
    width: 210px;
    right: -80px;
    top: 20px;
  }

  .profile-demo {
    top: 50px;
    width: calc(100% - 30px);
    min-height: auto;
    padding: 18px;
    transform: translateX(-50%);
  }

  .profile-demo-avatar {
    width: 75px;
    height: 75px;
  }

  .profile-demo-identity h3 {
    font-size: 1.55rem;
  }

  .profile-demo-media {
    grid-template-columns: 1fr;
  }

  .demo-media-secondary {
    display: none;
  }

  .profile-demo-actions {
    grid-template-columns: 1fr;
  }

  .profile-demo-actions div {
    min-height: 58px;
  }

  .rating-demo {
    left: 50%;
    right: auto;
    bottom: 35px;
    width: calc(100% - 46px);
    transform: translateX(-50%);
  }

  .signal-card {
    display: none;
  }

  .experience-pillars {
    grid-template-columns: 1fr;
  }

  .experience-pillar {
    min-height: 280px;
  }

  .experience-manifesto {
    padding-top: 100px;
  }
}


.global-stage {
  position: relative;
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 70px 0 170px;
}

.global-copy {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.15fr .65fr;
  gap: 70px;
  align-items: end;
}

.global-index {
  grid-column: 1 / -1;
  color: #54e2ff;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.global-kicker {
  grid-column: 1 / -1;
  margin: 0 0 -45px;
  color: #6f89a9;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.global-copy h2 {
  margin: 0;
  font-size: clamp(4.5rem, 8vw, 9rem);
  line-height: .82;
  letter-spacing: -.07em;
}

.global-copy h2 strong {
  display: block;
  font-weight: inherit;
  background:
    linear-gradient(90deg, #35e9ff 0%, #607dff 38%, #b750ff 68%, #ff4d9f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.global-intro {
  margin: 0 0 10px;
  color: #8ea6c4;
  line-height: 1.8;
}

.planet-stage {
  position: relative;
  min-height: 1000px;
  margin-top: 70px;
  overflow: hidden;
  border: 1px solid rgba(87, 190, 255, .15);
  border-radius: 48px;
  background:
    radial-gradient(circle at 50% 47%, rgba(0, 173, 255, .14), transparent 27%),
    radial-gradient(circle at 50% 52%, rgba(49, 68, 255, .1), transparent 43%),
    linear-gradient(180deg, #03112a 0%, #020918 72%, #050b1d 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.04),
    0 55px 130px rgba(0,0,0,.28);
  isolation: isolate;
}

.planet-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image:
    radial-gradient(circle, rgba(98, 219, 255, .75) 0 1px, transparent 1.6px);
  background-size: 47px 47px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
}

.planet-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 90px;
  width: 620px;
  height: 80px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(29, 169, 255, .16);
  filter: blur(45px);
}

.planet-atmosphere {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 670px;
  height: 670px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 47%, rgba(36, 202, 255, .09) 58%, transparent 72%);
  filter: blur(9px);
  animation: atmospherePulse 5s ease-in-out infinite;
}

.planet-halo {
  position: absolute;
  left: 50%;
  top: 47%;
  border: 1px solid rgba(61, 198, 255, .1);
  border-radius: 50%;
}

.planet-halo-one {
  width: 760px;
  height: 760px;
  transform: translate(-50%, -50%);
}

.planet-halo-two {
  width: 890px;
  height: 890px;
  transform: translate(-50%, -50%);
  border-color: rgba(132, 77, 255, .08);
}

.digital-earth {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 46%;
  width: 560px;
  height: 560px;
  transform: translate(-50%, -50%);
  perspective: 900px;
}

.earth-aura {
  position: absolute;
  inset: -55px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(26, 202, 255, .2), rgba(46, 92, 255, .08) 47%, transparent 70%);
  filter: blur(28px);
  animation: earthAura 4.5s ease-in-out infinite;
}

.earth-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(86, 221, 255, .52);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(93, 228, 255, .2), transparent 21%),
    radial-gradient(circle at 61% 65%, rgba(68, 90, 255, .18), transparent 35%),
    radial-gradient(circle at 50% 50%, #082858 0%, #051b40 48%, #020b20 78%);
  box-shadow:
    inset -45px -30px 90px rgba(0,0,0,.55),
    inset 20px 8px 70px rgba(59,211,255,.12),
    0 0 35px rgba(31,201,255,.24),
    0 0 110px rgba(32,113,255,.16);
  animation: earthFloat 7s ease-in-out infinite;
}

.earth-surface {
  position: absolute;
  inset: 0;
  opacity: .7;
  border-radius: 50%;
  background-image:
    radial-gradient(circle, rgba(94, 231, 255, .95) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(92, 126, 255, .55) 0 1px, transparent 1.4px);
  background-size: 17px 17px, 29px 29px;
  background-position: 0 0, 8px 13px;
  mask-image: radial-gradient(circle, #000 0 63%, transparent 75%);
  animation: earthDataShift 16s linear infinite;
}

.earth-latitude,
.earth-longitude {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(62, 213, 255, .24);
  border-radius: 50%;
}

.earth-latitude {
  width: 90%;
  height: 24%;
  transform: translate(-50%, -50%);
}

.lat-one {
  top: 23%;
  width: 73%;
  height: 16%;
}

.lat-two {
  top: 36%;
  width: 88%;
  height: 20%;
}

.lat-three {
  top: 50%;
  width: 97%;
  height: 24%;
}

.lat-four {
  top: 64%;
  width: 88%;
  height: 20%;
}

.lat-five {
  top: 77%;
  width: 73%;
  height: 16%;
}

.earth-longitude {
  width: 36%;
  height: 96%;
  transform: translate(-50%, -50%);
}

.lon-one {
  width: 28%;
}

.lon-two {
  width: 54%;
}

.lon-three {
  width: 75%;
}

.lon-four {
  width: 94%;
}

.earth-node {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid #d7fbff;
  border-radius: 50%;
  background: #41ddff;
  box-shadow:
    0 0 8px #41ddff,
    0 0 20px rgba(65,221,255,.85);
  animation: nodePulse 2.4s ease-in-out infinite;
}

.node-one { left: 29%; top: 25%; }
.node-two { left: 61%; top: 20%; animation-delay: -.4s; }
.node-three { left: 72%; top: 39%; animation-delay: -.8s; }
.node-four { left: 43%; top: 47%; animation-delay: -1.2s; }
.node-five { left: 23%; top: 57%; animation-delay: -1.6s; }
.node-six { left: 63%; top: 68%; animation-delay: -.7s; }
.node-seven { left: 46%; top: 78%; animation-delay: -1.8s; }
.node-eight { left: 80%; top: 58%; animation-delay: -1s; }

.earth-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(80, 220, 255, .22);
  border-radius: 50%;
  transform-style: preserve-3d;
}

.orbit-one {
  width: 680px;
  height: 255px;
  margin: -127px 0 0 -340px;
  transform: rotate(-14deg);
  animation: orbitSpin 13s linear infinite;
}

.orbit-two {
  width: 690px;
  height: 300px;
  margin: -150px 0 0 -345px;
  transform: rotate(62deg);
  border-color: rgba(116, 91, 255, .22);
  animation: orbitSpinReverse 17s linear infinite;
}

.orbit-three {
  width: 635px;
  height: 180px;
  margin: -90px 0 0 -317px;
  transform: rotate(28deg);
  border-color: rgba(255, 74, 172, .16);
  animation: orbitSpin 21s linear infinite;
}

.earth-orbit i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7beaff;
  box-shadow: 0 0 18px rgba(70,223,255,.9);
}

.earth-orbit i:nth-child(1) {
  left: 8%;
  top: 40%;
}

.earth-orbit i:nth-child(2) {
  right: 12%;
  top: 25%;
  background: #a86cff;
  box-shadow: 0 0 18px rgba(168,108,255,.9);
}

.earth-orbit i:nth-child(3) {
  left: 48%;
  bottom: -4px;
  background: #ff64b4;
  box-shadow: 0 0 18px rgba(255,100,180,.9);
}

.global-talent {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 35px 55px rgba(0,0,0,.55));
}

.global-model {
  left: -55px;
  bottom: -20px;
  width: 340px;
  opacity: .74;
}

.global-poet {
  right: -55px;
  bottom: -30px;
  width: 330px;
  opacity: .7;
}

.planet-message {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: 78px;
  width: min(640px, 68%);
  transform: translateX(-50%);
  text-align: center;
}

.planet-message span {
  color: #6d8cac;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .2em;
}

.planet-message-line {
  width: 1px;
  height: 35px;
  margin: 13px auto;
  background: linear-gradient(#43ddff, transparent);
}

.planet-message strong {
  display: block;
  font-size: clamp(1.7rem, 3vw, 3.2rem);
  letter-spacing: -.035em;
  background: linear-gradient(90deg, #4be9ff, #8580ff, #ff5ab0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.global-signal {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #7897b8;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.global-signal i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #55e7ff;
  box-shadow: 0 0 14px rgba(85,231,255,.9);
  animation: nodePulse 2s ease-in-out infinite;
}

.signal-one { left: 18%; top: 22%; }
.signal-two { left: 13%; top: 51%; }
.signal-three { right: 16%; top: 27%; }
.signal-four { right: 12%; top: 50%; }
.signal-five { right: 21%; top: 70%; }

.global-belief {
  padding: 160px 0 130px;
  text-align: center;
}

.global-belief > span {
  color: #6e8cab;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .2em;
}

.global-belief h2 {
  margin: 18px auto 25px;
  font-size: clamp(4.2rem, 8vw, 9rem);
  line-height: .83;
  letter-spacing: -.07em;
}

.global-belief h2 strong {
  display: block;
  font-weight: inherit;
  background: linear-gradient(90deg, #3beaff, #6976ff 38%, #d14dff 68%, #ff4d9d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.global-belief p {
  max-width: 700px;
  margin: 0 auto;
  color: #8da4c1;
  font-size: 1rem;
  line-height: 1.8;
}

.global-statement {
  position: relative;
  min-height: 580px;
  padding: 110px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(98, 193, 255, .16);
  border-radius: 42px;
  background:
    radial-gradient(circle at 82% 48%, rgba(70, 61, 255, .22), transparent 29%),
    radial-gradient(circle at 13% 35%, rgba(21, 203, 255, .13), transparent 27%),
    linear-gradient(135deg, #061731, #030b1d);
}

.global-statement p {
  position: relative;
  z-index: 2;
  margin: 0 0 17px;
  color: #5edfff;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .2em;
}

.global-statement h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(4.5rem, 9vw, 9.5rem);
  line-height: .82;
  letter-spacing: -.07em;
}

.global-statement h2 span {
  background: linear-gradient(90deg, #49e8ff, #7775ff, #df4eff, #ff529b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.global-statement-orbit {
  position: absolute;
  right: -70px;
  top: 50%;
  width: 520px;
  height: 520px;
  transform: translateY(-50%);
  border: 1px solid rgba(83, 217, 255, .18);
  border-radius: 50%;
  box-shadow:
    0 0 0 55px rgba(83,217,255,.025),
    0 0 0 110px rgba(126,79,255,.02);
}

.global-statement-orbit::before,
.global-statement-orbit::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(131, 87, 255, .18);
  border-radius: 50%;
}

.global-statement-orbit::after {
  inset: 31%;
  border-color: rgba(255, 80, 174, .18);
}

@keyframes earthFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

@keyframes earthAura {
  0%, 100% { opacity: .55; transform: scale(.97); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes atmospherePulse {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.96); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes earthDataShift {
  from { background-position: 0 0, 8px 13px; }
  to { background-position: 68px 17px, -50px 42px; }
}

@keyframes nodePulse {
  0%, 100% { opacity: .45; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1.45); }
}

@keyframes orbitSpin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

@keyframes orbitSpinReverse {
  from { rotate: 360deg; }
  to { rotate: 0deg; }
}

@media (max-width: 1080px) {
  .global-copy {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .global-kicker {
    margin-bottom: 0;
  }

  .planet-stage {
    min-height: 900px;
  }

  .digital-earth {
    width: 500px;
    height: 500px;
  }

  .orbit-one,
  .orbit-two,
  .orbit-three {
    scale: .88;
  }

  .global-model,
  .global-poet {
    width: 260px;
    opacity: .52;
  }
}

@media (max-width: 720px) {
  .global-stage {
    width: calc(100% - 28px);
    padding: 40px 0 110px;
  }

  .global-copy h2 {
    font-size: clamp(4rem, 18vw, 6.4rem);
  }

  .planet-stage {
    min-height: 760px;
    margin-top: 50px;
    border-radius: 30px;
  }

  .digital-earth {
    top: 42%;
    width: 310px;
    height: 310px;
  }

  .planet-atmosphere {
    top: 42%;
    width: 390px;
    height: 390px;
  }

  .planet-halo-one {
    top: 42%;
    width: 430px;
    height: 430px;
  }

  .planet-halo-two {
    top: 42%;
    width: 510px;
    height: 510px;
  }

  .orbit-one,
  .orbit-two,
  .orbit-three {
    scale: .52;
  }

  .global-talent {
    opacity: .24;
  }

  .global-model {
    width: 200px;
    left: -80px;
  }

  .global-poet {
    width: 190px;
    right: -75px;
  }

  .global-signal {
    display: none;
  }

  .planet-message {
    width: calc(100% - 30px);
    bottom: 65px;
  }

  .global-belief {
    padding: 110px 0 90px;
  }

  .global-belief h2 {
    font-size: clamp(4rem, 18vw, 6.5rem);
  }

  .global-statement {
    min-height: 500px;
    padding: 70px 26px;
    border-radius: 30px;
  }

  .global-statement h2 {
    font-size: clamp(4rem, 17vw, 6rem);
  }

  .global-statement-orbit {
    right: -280px;
    opacity: .65;
  }
}


.download-stage {
  position: relative;
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 40px 0 90px;
}

.download-shell {
  position: relative;
  min-height: 850px;
  overflow: hidden;
  border: 1px solid rgba(111, 193, 255, .2);
  border-radius: 48px;
  background:
    radial-gradient(circle at 23% 36%, rgba(31, 211, 255, .2), transparent 28%),
    radial-gradient(circle at 76% 72%, rgba(217, 56, 255, .19), transparent 31%),
    radial-gradient(circle at 51% 20%, rgba(74, 77, 255, .15), transparent 30%),
    linear-gradient(145deg, #061a3b, #030a1c 68%, #08071c);
  box-shadow:
    inset 0 1px rgba(255,255,255,.05),
    0 60px 150px rgba(0,0,0,.34);
  isolation: isolate;
}

.download-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .17;
  background-image:
    linear-gradient(rgba(81, 181, 255, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(81, 181, 255, .13) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
}

.download-energy {
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(100px);
  animation: downloadGlow 6s ease-in-out infinite;
}

.download-energy-one {
  left: 9%;
  top: 15%;
  background: rgba(32, 210, 255, .25);
}

.download-energy-two {
  right: 8%;
  bottom: 6%;
  background: rgba(220, 55, 255, .22);
  animation-delay: -3s;
}

.download-ring {
  position: absolute;
  z-index: 0;
  border: 1px solid rgba(79, 216, 255, .12);
  border-radius: 50%;
  pointer-events: none;
}

.download-ring-one {
  right: -110px;
  top: -160px;
  width: 600px;
  height: 600px;
  box-shadow:
    0 0 0 55px rgba(66, 205, 255, .018),
    0 0 0 110px rgba(116, 80, 255, .016);
}

.download-ring-two {
  left: -170px;
  bottom: -230px;
  width: 570px;
  height: 570px;
  border-color: rgba(255, 78, 177, .12);
}

.download-copy {
  position: relative;
  z-index: 10;
  width: min(720px, 64%);
  padding: 90px 0 75px 8%;
}

.download-index {
  color: #59e3ff;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .19em;
}

.download-copy h2 {
  margin: 23px 0 25px;
  font-size: clamp(5rem, 9vw, 10rem);
  line-height: .78;
  letter-spacing: -.075em;
}

.download-copy h2 strong {
  display: block;
  font-weight: inherit;
  background: linear-gradient(90deg, #38eaff, #6c76ff 39%, #d94eff 69%, #ff4d9e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.download-lead {
  max-width: 540px;
  margin: 0;
  color: #9ab0ca;
  font-size: 1.05rem;
  line-height: 1.75;
}

.download-challenge {
  margin-top: 45px;
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.download-challenge span {
  color: #7691b0;
}

.download-challenge strong {
  color: #fff;
}

.store-intro {
  margin-top: 52px;
  color: #6684a6;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.store-badges {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.store-badge {
  position: relative;
  min-width: 220px;
  height: 70px;
  padding: 9px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 13px;
  background: #020202;
  box-shadow:
    0 14px 35px rgba(0,0,0,.3),
    inset 0 1px rgba(255,255,255,.08);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.store-badge:hover {
  transform: translateY(-3px);
  border-color: rgba(103, 221, 255, .7);
  box-shadow:
    0 18px 45px rgba(0,0,0,.4),
    0 0 30px rgba(61, 201, 255, .08);
}

.store-copy {
  display: flex;
  flex-direction: column;
}

.store-copy small {
  color: #fff;
  font-size: .64rem;
  line-height: 1;
}

.store-copy strong {
  margin-top: 4px;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}

.apple-mark {
  position: relative;
  width: 39px;
  height: 45px;
  flex: 0 0 39px;
}

.apple-body {
  position: absolute;
  left: 5px;
  bottom: 2px;
  width: 31px;
  height: 34px;
  border-radius: 48% 48% 45% 45% / 56% 56% 44% 44%;
  background: #fff;
}

.apple-body::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 8px;
  width: 14px;
  height: 15px;
  border-radius: 50%;
  background: #020202;
}

.apple-leaf {
  position: absolute;
  left: 21px;
  top: 0;
  width: 12px;
  height: 17px;
  border-radius: 90% 10% 80% 20%;
  background: #fff;
  transform: rotate(36deg);
}

.play-mark {
  position: relative;
  width: 42px;
  height: 45px;
  flex: 0 0 42px;
  overflow: hidden;
  clip-path: polygon(4% 0, 100% 50%, 4% 100%);
}

.play-mark i {
  position: absolute;
  inset: 0;
}

.play-green {
  background: #35c66b;
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}

.play-blue {
  background: #4285f4;
  clip-path: polygon(0 0, 100% 50%, 50% 50%);
}

.play-red {
  background: #ea4335;
  clip-path: polygon(50% 50%, 100% 50%, 0 100%);
}

.play-yellow {
  z-index: 2;
  background: #fbbc04;
  clip-path: polygon(50% 50%, 100% 50%, 76% 63%);
}

.store-note {
  max-width: 500px;
  margin: 13px 0 0;
  color: #536f90;
  font-size: .6rem;
  line-height: 1.5;
}

.download-talent {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 42px 65px rgba(0,0,0,.48));
}

.download-actor {
  right: -55px;
  bottom: -30px;
  width: 400px;
}

.download-artist {
  right: 190px;
  bottom: -70px;
  width: 300px;
  opacity: .48;
  transform: rotate(-5deg);
}

.download-side-message {
  position: absolute;
  z-index: 8;
  right: 5%;
  top: 82px;
  text-align: right;
}

.download-side-message > span {
  color: #627f9f;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.download-side-message p {
  margin: 9px 0 0;
  color: rgba(255,255,255,.13);
  font-size: clamp(2rem, 3.2vw, 3.8rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.045em;
}

.download-side-message strong {
  color: rgba(83, 225, 255, .38);
}

.closing-manifesto {
  padding: 140px 0 120px;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 880px) 1fr;
  gap: 35px;
  align-items: center;
  text-align: center;
}

.closing-manifesto > p {
  grid-column: 2;
  margin: 0;
  color: #6885a5;
  font-size: .68rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.closing-manifesto h2 {
  grid-column: 2;
  margin: 13px 0 0;
  font-size: clamp(4rem, 7vw, 7.8rem);
  line-height: .86;
  letter-spacing: -.065em;
}

.closing-manifesto h2 strong {
  display: block;
  font-weight: inherit;
  background: linear-gradient(90deg, #40e9ff, #7572ff, #d94eff, #ff529f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.closing-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(71, 213, 255, .28));
}

.closing-rule:last-child {
  background: linear-gradient(90deg, rgba(71, 213, 255, .28), transparent);
}

.site-footer {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 42px 0 34px;
  border-top: 1px solid rgba(101, 169, 247, .13);
}

.footer-main {
  min-height: 130px;
  display: grid;
  grid-template-columns: .7fr 1fr 1.3fr;
  gap: 40px;
  align-items: center;
}

.footer-brand {
  display: inline-flex;
  width: fit-content;
}

.footer-brand img {
  width: 88px;
  height: auto;
  object-fit: contain;
}

.footer-statement span,
.footer-statement strong {
  display: block;
}

.footer-statement span {
  color: #557493;
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .17em;
}

.footer-statement strong {
  margin-top: 7px;
  font-size: 1.1rem;
}

.footer-nav {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 23px;
}

.footer-nav a {
  color: #758eac;
  font-size: .67rem;
  font-weight: 800;
  text-decoration: none;
  transition: color .25s ease;
}

.footer-nav a:hover {
  color: #5ee5ff;
}

.footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  border-top: 1px solid rgba(102, 170, 248, .08);
  color: #415d7c;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .13em;
}

@keyframes downloadGlow {
  0%, 100% {
    opacity: .55;
    transform: scale(.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@media (max-width: 1080px) {
  .download-copy {
    width: 72%;
  }

  .download-actor {
    width: 330px;
    right: -80px;
  }

  .download-artist {
    width: 250px;
    right: 120px;
    opacity: .34;
  }

  .download-side-message {
    display: none;
  }

  .footer-main {
    grid-template-columns: .5fr 1fr;
  }

  .footer-nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .download-stage {
    width: calc(100% - 28px);
    padding-top: 20px;
  }

  .download-shell {
    min-height: 900px;
    border-radius: 30px;
  }

  .download-copy {
    width: 100%;
    padding: 65px 24px 300px;
  }

  .download-copy h2 {
    font-size: clamp(4.5rem, 20vw, 7rem);
  }

  .store-badges {
    flex-direction: column;
    align-items: flex-start;
  }

  .store-badge {
    width: 220px;
  }

  .download-actor {
    width: 270px;
    right: -45px;
    bottom: -25px;
  }

  .download-artist {
    width: 210px;
    left: -55px;
    right: auto;
    bottom: -30px;
    opacity: .35;
  }

  .closing-manifesto {
    padding: 100px 0 90px;
    grid-template-columns: 1fr;
  }

  .closing-manifesto > p,
  .closing-manifesto h2 {
    grid-column: 1;
  }

  .closing-rule {
    width: 100%;
  }

  .site-footer {
    width: calc(100% - 28px);
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .footer-nav {
    grid-column: auto;
    gap: 16px 21px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================
   FSZ VISUAL REFINEMENT — INTEGRATED WORLD PASS
   ========================================================== */

/* HERO — turn MainHero into environmental artwork, not a card */
.hero {
  grid-template-columns: .82fr 1.18fr;
  overflow: visible;
}

.hero-visual {
  min-height: 790px;
  overflow: visible;
}

.hero-image-wrap {
  width: min(142%, 1120px);
  margin-right: -15%;
  isolation: isolate;
}

.hero-image-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 2% 3% 6%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 38%, rgba(44,225,255,.22), transparent 32%),
    radial-gradient(circle at 68% 55%, rgba(125,72,255,.24), transparent 36%),
    radial-gradient(circle at 48% 72%, rgba(255,67,171,.12), transparent 34%);
  filter: blur(55px);
  transform: scale(1.08);
}

.hero-image {
  width: 100%;
  opacity: .96;
  filter:
    saturate(1.2)
    contrast(1.08)
    brightness(.94)
    drop-shadow(0 60px 95px rgba(0,0,0,.34));
  -webkit-mask-image:
    radial-gradient(ellipse 78% 74% at 52% 48%, #000 48%, rgba(0,0,0,.94) 62%, transparent 88%);
  mask-image:
    radial-gradient(ellipse 78% 74% at 52% 48%, #000 48%, rgba(0,0,0,.94) 62%, transparent 88%);
  animation: hero-refined-drift 10s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes hero-refined-drift {
  0%, 100% { transform: translate3d(0,0,0) scale(1.015); }
  50% { transform: translate3d(0,-7px,0) scale(1.025); }
}

/* TALENT ART — remove pasted-white-card feeling */
.talent-panel {
  background:
    radial-gradient(circle at 72% 30%, rgba(68,214,255,.12), transparent 34%),
    radial-gradient(circle at 30% 76%, rgba(133,69,255,.12), transparent 38%),
    linear-gradient(145deg, rgba(7,28,61,.96), rgba(3,11,29,.98));
}

.talent-panel > img[src*="illustration-of-a-rapper"],
.talent-panel > img[src*="street-dance-girl"] {
  filter:
    invert(1)
    grayscale(1)
    contrast(1.42)
    brightness(1.22)
    sepia(.08)
    hue-rotate(155deg)
    drop-shadow(0 32px 60px rgba(42,215,255,.28));
  mix-blend-mode: screen;
  opacity: .88;
  -webkit-mask-image: radial-gradient(ellipse 72% 82% at 50% 52%, #000 54%, transparent 94%);
  mask-image: radial-gradient(ellipse 72% 82% at 50% 52%, #000 54%, transparent 94%);
}

.talent-panel > img[src*="PainterEasel"],
.talent-panel > img[src*="black-and-white"],
.talent-panel > img[src*="stylized-black-white"] {
  filter:
    saturate(.72)
    contrast(1.18)
    brightness(.9)
    drop-shadow(0 38px 60px rgba(0,0,0,.44));
  -webkit-mask-image: radial-gradient(ellipse 80% 88% at 50% 52%, #000 57%, transparent 96%);
  mask-image: radial-gradient(ellipse 80% 88% at 50% 52%, #000 57%, transparent 96%);
}

/* YOUR STAGE — recognizable performance surface */
.demo-media-primary {
  background:
    linear-gradient(180deg, transparent 58%, rgba(2,8,22,.9) 100%),
    radial-gradient(ellipse at 50% 110%, rgba(255,63,174,.36), transparent 45%),
    radial-gradient(circle at 74% 26%, rgba(50,221,255,.26), transparent 24%),
    linear-gradient(145deg, #112f67, #07132e);
}

.demo-media-primary::before {
  content: "▶";
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 47%;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 50%;
  background: rgba(3,14,36,.52);
  color: #fff;
  font-size: 1.15rem;
  padding-left: 4px;
  box-shadow:
    0 0 0 8px rgba(70,218,255,.06),
    0 0 38px rgba(61,217,255,.24);
  backdrop-filter: blur(8px);
}

.demo-media-primary::after {
  content: "LIVE PERFORMANCE  ·  02:18        ▂▅▃▇▄▆▂▅▇▃▆▅▂▇";
  position: absolute;
  z-index: 6;
  left: 17px;
  right: 17px;
  bottom: 15px;
  padding-top: 11px;
  border-top: 2px solid rgba(72,225,255,.55);
  color: #9eeeff;
  font-size: .46rem;
  font-weight: 900;
  letter-spacing: .09em;
  white-space: nowrap;
  overflow: hidden;
}

.demo-media-secondary {
  background:
    radial-gradient(circle at 50% 40%, rgba(255,83,183,.25), transparent 28%),
    linear-gradient(145deg, rgba(255,71,164,.15), rgba(83,74,255,.17)),
    #091934;
}

.demo-media-flare {
  width: 125px;
  height: 150px;
  top: 53%;
  border-radius: 50% 50% 22px 22px;
  transform: translate(-50%,-50%);
  background:
    radial-gradient(circle at 50% 27%, rgba(255,255,255,.85) 0 8%, transparent 9%),
    linear-gradient(90deg, transparent 44%, rgba(75,228,255,.8) 45% 55%, transparent 56%) 50% 72% / 70% 3px no-repeat,
    linear-gradient(135deg, rgba(54,229,255,.34), rgba(132,71,255,.42), rgba(255,69,160,.32));
  box-shadow:
    0 22px 55px rgba(0,0,0,.32),
    0 0 38px rgba(104,88,255,.22);
}

/* 01–04 — actual miniature product demonstrations */
.experience-pillar {
  min-height: 390px;
  padding-top: 205px;
  justify-content: flex-end;
}

.experience-pillar .pillar-icon {
  position: absolute;
  z-index: 4;
  left: 27px;
  top: 27px;
  margin: 0;
}

.experience-pillar::before,
.experience-pillar::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* 01: performance proof */
.experience-pillar:nth-child(1)::before {
  left: 26px;
  right: 26px;
  top: 94px;
  height: 78px;
  border: 1px solid rgba(74,221,255,.22);
  border-radius: 16px;
  background:
    linear-gradient(90deg,
      transparent 0 4%,
      rgba(67,226,255,.9) 4% 6%,
      transparent 6% 10%,
      rgba(98,113,255,.9) 10% 13%,
      transparent 13% 17%,
      rgba(211,70,255,.85) 17% 20%,
      transparent 20% 26%,
      rgba(71,228,255,.75) 26% 29%,
      transparent 29% 35%,
      rgba(255,74,174,.9) 35% 38%,
      transparent 38% 44%,
      rgba(77,219,255,.85) 44% 48%,
      transparent 48% 55%,
      rgba(122,87,255,.85) 55% 59%,
      transparent 59% 66%,
      rgba(255,79,173,.78) 66% 69%,
      transparent 69% 76%,
      rgba(76,229,255,.9) 76% 80%,
      transparent 80% 100%);
  box-shadow: inset 0 0 35px rgba(47,205,255,.05);
}

.experience-pillar:nth-child(1)::after {
  content: "00:42   PERFORMANCE PROOF   ● REC";
  left: 38px;
  top: 146px;
  color: #7feaff;
  font-size: .46rem;
  font-weight: 900;
  letter-spacing: .08em;
}

/* 02: rating meter */
.experience-pillar:nth-child(2)::before {
  left: 28px;
  right: 28px;
  top: 116px;
  height: 8px;
  border-radius: 20px;
  background:
    linear-gradient(90deg, #31e7ff 0%, #746cff 48%, #ff4da8 82%, #172744 82%);
  box-shadow: 0 0 24px rgba(215,76,255,.2);
}

.experience-pillar:nth-child(2)::after {
  content: "TALENT RATING    8.2 / 10";
  left: 28px;
  top: 143px;
  color: #ff78bd;
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .11em;
}

/* 03: discovery network */
.experience-pillar:nth-child(3)::before {
  width: 132px;
  height: 132px;
  left: 50%;
  top: 78px;
  transform: translateX(-50%);
  border: 1px solid rgba(71,235,190,.24);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #63ffd0 0 4px, transparent 5px),
    radial-gradient(circle at 23% 30%, #55e5ff 0 3px, transparent 4px),
    radial-gradient(circle at 76% 25%, #8d73ff 0 3px, transparent 4px),
    radial-gradient(circle at 79% 72%, #ff62b0 0 3px, transparent 4px),
    radial-gradient(circle at 25% 76%, #50e8ff 0 3px, transparent 4px),
    radial-gradient(circle, transparent 0 33%, rgba(82,223,255,.18) 34% 35%, transparent 36% 58%, rgba(129,93,255,.16) 59% 60%, transparent 61%);
  box-shadow: 0 0 40px rgba(62,225,209,.08);
}

.experience-pillar:nth-child(3)::after {
  content: "DISCOVERY SIGNAL  •  LIVE";
  left: 50%;
  top: 219px;
  transform: translateX(-50%);
  color: #67f0d1;
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .1em;
  white-space: nowrap;
}

/* 04: momentum / audience */
.experience-pillar:nth-child(4)::before {
  left: 30px;
  right: 30px;
  top: 93px;
  height: 102px;
  background:
    linear-gradient(135deg, transparent 0 12%, rgba(67,224,255,.8) 12.5% 14%, transparent 14.5% 27%, rgba(111,106,255,.85) 27.5% 29%, transparent 29.5% 43%, rgba(202,71,255,.9) 43.5% 45%, transparent 45.5% 60%, rgba(255,76,167,.9) 60.5% 62%, transparent 62.5%),
    linear-gradient(180deg, transparent 0 82%, rgba(102,166,255,.15) 83% 84%, transparent 85%);
  clip-path: polygon(0 76%, 17% 67%, 34% 70%, 50% 45%, 66% 51%, 82% 25%, 100% 8%, 100% 100%, 0 100%);
  background-color: rgba(64,196,255,.08);
}

.experience-pillar:nth-child(4)::after {
  content: "AUDIENCE MOMENTUM   ↗ +38%";
  left: 30px;
  top: 207px;
  color: #ff6fb8;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .1em;
}

/* EARTH — continent silhouettes make geography unmistakable */
.earth-continents {
  position: absolute;
  z-index: 3;
  inset: 7%;
  border-radius: 50%;
  overflow: hidden;
  filter: drop-shadow(0 0 9px rgba(68,230,255,.3));
  animation: continent-drift 18s ease-in-out infinite;
}

.earth-continent {
  position: absolute;
  display: block;
  background:
    linear-gradient(135deg, rgba(87,238,255,.34), rgba(75,109,255,.17));
  border: 1px solid rgba(117,239,255,.72);
  box-shadow:
    inset 0 0 18px rgba(66,221,255,.12),
    0 0 14px rgba(55,213,255,.12);
}

.continent-na {
  left: 9%;
  top: 19%;
  width: 33%;
  height: 28%;
  clip-path: polygon(3% 20%,20% 4%,42% 8%,55% 19%,78% 16%,96% 31%,84% 45%,70% 48%,62% 66%,48% 61%,37% 78%,26% 66%,19% 47%,6% 40%);
}

.continent-sa {
  left: 34%;
  top: 48%;
  width: 18%;
  height: 36%;
  clip-path: polygon(18% 0,72% 8%,91% 25%,76% 45%,67% 63%,48% 81%,36% 100%,20% 80%,25% 60%,8% 39%);
}

.continent-eu {
  left: 49%;
  top: 26%;
  width: 19%;
  height: 14%;
  clip-path: polygon(0 38%,17% 10%,40% 20%,53% 2%,70% 19%,96% 17%,82% 47%,58% 53%,46% 81%,20% 70%);
}

.continent-af {
  left: 49%;
  top: 39%;
  width: 24%;
  height: 35%;
  clip-path: polygon(15% 0,72% 3%,95% 24%,81% 50%,66% 70%,51% 100%,32% 84%,25% 59%,4% 34%);
}

.continent-as {
  left: 63%;
  top: 20%;
  width: 34%;
  height: 33%;
  clip-path: polygon(0 24%,20% 5%,45% 12%,62% 1%,82% 17%,100% 36%,88% 54%,67% 52%,55% 72%,37% 60%,21% 74%,10% 51%);
}

.continent-au {
  left: 73%;
  top: 65%;
  width: 19%;
  height: 16%;
  clip-path: polygon(9% 31%,30% 7%,67% 11%,96% 38%,82% 76%,55% 92%,22% 77%,0 54%);
}

@keyframes continent-drift {
  0%,100% { transform: translateX(0); opacity: .88; }
  50% { transform: translateX(5px); opacity: 1; }
}

.earth-surface {
  z-index: 4;
  opacity: .38;
  mix-blend-mode: screen;
}

.earth-latitude,
.earth-longitude {
  z-index: 5;
}

.earth-node {
  z-index: 8;
}

/* Final circle motif is a SIGNAL, explicitly not another Earth */
.global-statement-orbit {
  border-style: dashed;
  border-color: rgba(83,217,255,.24);
  background:
    radial-gradient(circle at center, rgba(67,224,255,.12) 0 2%, transparent 3% 18%, rgba(103,89,255,.05) 19% 20%, transparent 21%);
  animation: signal-rotate 18s linear infinite;
}

.global-statement-orbit::before {
  content: "GLOBAL TALENT SIGNAL";
  inset: 17%;
  display: grid;
  place-items: center;
  border-style: solid;
  color: rgba(104,230,255,.42);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .2em;
  transform: rotate(-12deg);
}

.global-statement-orbit::after {
  inset: 35%;
  border: 1px solid rgba(255,80,174,.28);
  background:
    radial-gradient(circle, #ff62b4 0 5px, transparent 6px),
    conic-gradient(from 20deg, transparent, rgba(82,226,255,.14), transparent 35%);
  box-shadow: 0 0 45px rgba(218,72,255,.1);
}

@keyframes signal-rotate {
  to { transform: translateY(-50%) rotate(360deg); }
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-image-wrap {
    width: min(122%, 980px);
    margin-right: 0;
  }

  .experience-pillar {
    min-height: 360px;
  }
}

@media (max-width: 720px) {
  .hero-image-wrap {
    width: 128%;
    margin-left: -14%;
  }

  .hero-image {
    -webkit-mask-image: radial-gradient(ellipse 75% 76% at 52% 50%, #000 45%, transparent 88%);
    mask-image: radial-gradient(ellipse 75% 76% at 52% 50%, #000 45%, transparent 88%);
  }

  .experience-pillar {
    min-height: 340px;
    padding-top: 190px;
  }

  .earth-continents {
    inset: 6%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image,
  .earth-continents,
  .global-statement-orbit {
    animation: none !important;
  }
}



/* ==========================================================
   FSZ HERO V3 — FULL-BLEED BRAND EXPERIENCE
   ========================================================== */

.hero-v2 {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: #020817;
}

.hero-banner-media {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
}

.hero-banner-image {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  object-position: 58% 48%;
  opacity: .94;
  mix-blend-mode: screen;
  filter: saturate(1.2) contrast(1.12) brightness(.88);
  -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);
  mask-image: linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);
  animation: fsz-hero-breathe 15s ease-in-out infinite;
}

.hero-banner-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(1,7,20,.98) 0%,
      rgba(2,9,25,.88) 23%,
      rgba(2,9,25,.58) 43%,
      rgba(2,8,22,.18) 66%,
      rgba(2,8,22,.20) 82%,
      rgba(2,8,22,.62) 100%),
    linear-gradient(180deg,
      rgba(2,8,22,.30) 0%,
      transparent 22%,
      transparent 65%,
      rgba(2,8,22,.42) 82%,
      #020817 100%);
}

.hero-banner-grid {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: .12;
  background-image:
    linear-gradient(rgba(76,184,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(76,184,255,.16) 1px,transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(circle at 65% 48%,#000,transparent 72%);
  mask-image: radial-gradient(circle at 65% 48%,#000,transparent 72%);
}

.hero-banner-glow {
  position: absolute;
  z-index: 4;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.hero-banner-glow-a {
  width: 42vw;
  height: 42vw;
  right: 4%;
  top: 8%;
  background: rgba(38,213,255,.13);
}

.hero-banner-glow-b {
  width: 34vw;
  height: 34vw;
  right: 20%;
  bottom: -8%;
  background: rgba(198,56,255,.12);
}

.hero-v2-content {
  position: relative;
  z-index: 10;
  width: min(calc(100% - 96px), 1500px);
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(125px,15vh,175px) 0 95px;
  display: flex;
  align-items: center;
}

.hero-logo-feature {
  position: absolute;
  top: clamp(105px,12vh,135px);
  left: 0;
  display: flex;
  align-items: center;
  gap: 23px;
}

.hero-logo-feature img {
  width: clamp(285px,25vw,430px);
  max-height: 105px;
  object-fit: contain;
  object-position: left center;
  filter:
    drop-shadow(0 8px 24px rgba(41,215,255,.2))
    drop-shadow(0 0 45px rgba(89,84,255,.08));
}

.hero-logo-feature span {
  max-width: 150px;
  padding-left: 21px;
  border-left: 1px solid rgba(87,225,255,.38);
  color: #77dff5;
  font-size: .56rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .16em;
}

.hero-v2-copy {
  width: min(720px,54vw);
  padding-top: 105px;
}

.hero-v2-eyebrow {
  margin-bottom: 20px;
}

.hero-v2 h1 {
  margin: 0;
  font-size: clamp(5.6rem,8.8vw,10rem);
  line-height: .76;
  letter-spacing: -.075em;
  text-shadow: 0 22px 60px rgba(0,0,0,.48);
}

.hero-v2 h1 span,
.hero-v2 h1 strong {
  display: block;
}

.hero-v2 h1 strong {
  font-weight: inherit;
  background: linear-gradient(90deg,#42e9ff,#6b77ff 42%,#d64dff 72%,#ff529e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 28px rgba(102,92,255,.16));
}

.hero-v2 .hero-lead {
  max-width: 620px;
  margin-top: 30px;
  color: #a3b5cb;
}

.hero-v2-side-note {
  position: absolute;
  right: 0;
  bottom: 14%;
  display: grid;
  grid-template-columns: auto 80px auto;
  align-items: center;
  gap: 16px;
  transform: rotate(-90deg) translateX(100%);
  transform-origin: right bottom;
  color: rgba(130,207,236,.72);
}

.hero-v2-side-note > span {
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .15em;
}

.hero-v2-side-note i {
  height: 1px;
  background: linear-gradient(90deg,rgba(76,224,255,.8),transparent);
}

.hero-v2-side-note strong {
  font-size: .58rem;
  line-height: 1.35;
  letter-spacing: .15em;
}

.hero-v2-scroll {
  z-index: 14;
}

@keyframes fsz-hero-breathe {
  0%,100% { transform: scale(1.015) translate3d(0,0,0); }
  50% { transform: scale(1.055) translate3d(-1%,-.5%,0); }
}

/* ==========================================================
   FSZ THREE.JS DIGITAL EARTH
   ========================================================== */

.webgl-earth {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(720px,52vw);
  height: min(720px,52vw);
  transform: translate(-50%,-50%);
  z-index: 4;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(20,147,215,.10),transparent 61%);
  filter: drop-shadow(0 45px 90px rgba(0,0,0,.4));
}

.earth-canvas {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  overflow: visible;
  cursor: grab;
}

.earth-canvas:active {
  cursor: grabbing;
}

.earth-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.earth-tech-ring {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(72,220,255,.15);
  border-radius: 50%;
  pointer-events: none;
}

.earth-tech-ring-a {
  width: 108%;
  height: 36%;
  transform: translate(-50%,-50%) rotate(-12deg);
  border-left-color: rgba(255,76,177,.34);
  border-right-color: rgba(80,229,255,.36);
  animation: fsz-ring-a 12s linear infinite;
}

.earth-tech-ring-b {
  width: 118%;
  height: 53%;
  transform: translate(-50%,-50%) rotate(67deg);
  border-top-color: rgba(111,89,255,.4);
  animation: fsz-ring-b 17s linear infinite reverse;
}

.earth-axis-label {
  position: absolute;
  z-index: 8;
  color: rgba(96,228,255,.55);
  font-size: .49rem;
  font-weight: 900;
  letter-spacing: .18em;
  pointer-events: none;
}

.earth-axis-label-a {
  left: 4%;
  top: 16%;
}

.earth-axis-label-b {
  right: 4%;
  bottom: 15%;
  color: rgba(255,98,185,.5);
}

.earth-fallback {
  position: absolute;
  inset: 22%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(87,229,255,.35);
  border-radius: 50%;
  color: #62e9ff;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-align: center;
}

@keyframes fsz-ring-a {
  to { transform: translate(-50%,-50%) rotate(348deg); }
}

@keyframes fsz-ring-b {
  to { transform: translate(-50%,-50%) rotate(427deg); }
}

@media (max-width: 1100px) {
  .hero-v2 {
    min-height: 960px;
  }

  .hero-v2-content {
    width: min(calc(100% - 56px),1500px);
    min-height: 960px;
    align-items: flex-start;
    padding-top: 245px;
  }

  .hero-logo-feature {
    top: 125px;
  }

  .hero-v2-copy {
    width: min(720px,82vw);
    padding-top: 60px;
  }

  .hero-banner-image {
    object-position: 62% center;
    opacity: .75;
  }

  .hero-v2-side-note {
    display: none;
  }

  .webgl-earth {
    width: min(680px,70vw);
    height: min(680px,70vw);
  }
}

@media (max-width: 720px) {
  .hero-v2 {
    min-height: 900px;
  }

  .hero-v2-content {
    width: calc(100% - 34px);
    min-height: 900px;
    padding-top: 235px;
  }

  .hero-logo-feature {
    top: 105px;
    left: 0;
    right: 0;
    display: block;
  }

  .hero-logo-feature img {
    width: min(330px,85vw);
  }

  .hero-logo-feature span {
    display: block;
    max-width: none;
    margin-top: 10px;
    padding: 0;
    border: 0;
  }

  .hero-v2-copy {
    width: 100%;
    padding-top: 35px;
  }

  .hero-v2 h1 {
    font-size: clamp(4.6rem,21vw,7rem);
  }

  .hero-banner-image {
    inset: 8% -48% -4% -18%;
    width: 166%;
    height: 96%;
    opacity: .62;
    object-position: 62% center;
  }

  .hero-banner-shade {
    background:
      linear-gradient(180deg,rgba(2,8,22,.55),rgba(2,8,22,.18) 32%,rgba(2,8,22,.64) 74%,#020817),
      linear-gradient(90deg,rgba(2,8,22,.9),rgba(2,8,22,.25));
  }

  .webgl-earth {
    width: min(590px,96vw);
    height: min(590px,96vw);
  }

  .earth-axis-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner-image,
  .earth-tech-ring {
    animation: none !important;
  }
}



/* ==========================================================
   FSZ CINEMATIC BODY V1
   ========================================================== */

.brand-transition {
  position: relative;
  min-height: 28rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.35rem;
  overflow: hidden;
  padding: 5rem 5vw 6rem;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(27, 204, 255, 0.13), transparent 28%),
    radial-gradient(circle at 62% 54%, rgba(131, 64, 255, 0.12), transparent 34%),
    #020713;
}

.brand-transition-aura {
  position: absolute;
  z-index: -1;
  width: min(60rem, 80vw);
  aspect-ratio: 3 / 1;
  border-radius: 50%;
  background:
    linear-gradient(90deg, rgba(35, 207, 255, 0.18), rgba(145, 61, 255, 0.14));
  filter: blur(80px);
}

.brand-transition-logo {
  display: block;
  width: min(60rem, 84vw);
  max-height: 15rem;
  object-fit: contain;
  mix-blend-mode: screen;
  filter:
    contrast(1.42)
    saturate(1.15)
    drop-shadow(0 0 2.5rem rgba(47, 202, 255, 0.18));
}

.brand-transition-rule {
  width: min(38rem, 62vw);
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(67, 221, 255, 0.78),
      rgba(185, 73, 255, 0.58),
      transparent
    );
}

.brand-transition p {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.3em;
  color: rgba(200, 232, 255, 0.58);
}

.cinematic-break {
  position: relative;
  width: 100%;
  min-height: clamp(42rem, 86vh, 64rem);
  overflow: hidden;
  isolation: isolate;
  background: #020713;
}

.cinematic-media {
  position: absolute;
  inset: -12% 0;
  z-index: -5;
  will-change: transform;
  transform:
    translate3d(
      0,
      var(--parallax-y, 0px),
      0
    )
    scale(1.1);
}

.cinematic-media img {
  width: 100%;
  height: 124%;
  object-fit: cover;
  object-position: center;
  filter:
    saturate(1.28)
    contrast(1.13)
    brightness(0.7);
}

.cinematic-break::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(
      90deg,
      rgba(2, 7, 19, 0.97) 0%,
      rgba(2, 7, 19, 0.64) 30%,
      rgba(2, 7, 19, 0.1) 66%,
      rgba(2, 7, 19, 0.42) 100%
    ),
    linear-gradient(
      180deg,
      #020713 0%,
      transparent 18%,
      transparent 76%,
      #020713 100%
    );
}

.cinematic-break::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 70% 42%,
      rgba(32, 211, 255, 0.25),
      transparent 27%
    ),
    radial-gradient(
      circle at 34% 66%,
      rgba(126, 58, 255, 0.23),
      transparent 32%
    );
  mix-blend-mode: screen;
}

.cinematic-color {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.6;
  mix-blend-mode: color;
  pointer-events: none;
}

.cinematic-color-cyan {
  background:
    linear-gradient(
      115deg,
      rgba(0, 154, 255, 0.28),
      transparent 42%
    );
}

.cinematic-color-violet {
  background:
    linear-gradient(
      285deg,
      rgba(170, 36, 255, 0.24),
      transparent 48%
    );
}

.cinematic-color-fire {
  background:
    radial-gradient(
      circle at 66% 50%,
      rgba(255, 67, 19, 0.42),
      transparent 36%
    ),
    linear-gradient(
      110deg,
      rgba(111, 27, 255, 0.25),
      transparent 46%
    );
}

.cinematic-color-ice {
  background:
    radial-gradient(
      circle at 48% 30%,
      rgba(188, 241, 255, 0.22),
      transparent 34%
    ),
    linear-gradient(
      300deg,
      rgba(0, 176, 255, 0.27),
      transparent 46%
    );
}

.cinematic-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.16;
  background-image:
    linear-gradient(
      rgba(255,255,255,0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.035) 1px,
      transparent 1px
    );
  background-size: 42px 42px;
  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 20%,
      black 78%,
      transparent
    );
}

.cinematic-copy {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: min(49rem, 80vw);
  transform: translateY(-50%);
}

.cinematic-copy-left {
  left:
    max(
      6vw,
      calc((100vw - 1500px) / 2)
    );
}

.cinematic-copy-right {
  right:
    max(
      6vw,
      calc((100vw - 1500px) / 2)
    );
  text-align: right;
}

.cinematic-copy > span {
  display: inline-block;
  margin-bottom: 1.45rem;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.26em;
  color: #72e8ff;
}

.cinematic-copy h2 {
  margin: 0;
  font-size:
    clamp(
      4rem,
      8vw,
      9rem
    );
  line-height: 0.83;
  letter-spacing: -0.065em;
  text-transform: uppercase;
  color: #f3faff;
  text-shadow:
    0 1rem 5rem
    rgba(0, 0, 0, 0.52);
}

.cinematic-copy h2 strong {
  color: transparent;
  background:
    linear-gradient(
      110deg,
      #37e8ff 5%,
      #5e92ff 48%,
      #d94dff 90%
    );
  -webkit-background-clip: text;
  background-clip: text;
}

.cinematic-backlight
.cinematic-copy
h2 strong {
  background-image:
    linear-gradient(
      110deg,
      #ffd06a,
      #ff5c45 44%,
      #bd55ff 92%
    );
}

.cinematic-copy p {
  width: min(34rem, 100%);
  margin: 2rem 0 0;
  font-size:
    clamp(
      1rem,
      1.5vw,
      1.24rem
    );
  line-height: 1.7;
  color:
    rgba(
      226,
      240,
      255,
      0.76
    );
}

.cinematic-copy-right p {
  margin-left: auto;
}

.cinematic-number {
  position: absolute;
  z-index: 3;
  right: 3vw;
  bottom: 2.5rem;
  font-size:
    clamp(
      4rem,
      9vw,
      9rem
    );
  line-height: 1;
  color:
    rgba(
      128,
      220,
      255,
      0.07
    );
  -webkit-text-stroke:
    1px
    rgba(
      128,
      220,
      255,
      0.18
    );
}

.webgl-earth {
  width:
    min(
      74rem,
      80vw
    );
  height:
    min(
      74rem,
      80vw
    );
  max-height: 80vh;
  min-height: 38rem;
}

.earth-canvas {
  filter:
    drop-shadow(
      0 0 2.5rem
      rgba(31, 202, 255, 0.16)
    )
    drop-shadow(
      0 0 7rem
      rgba(82, 61, 255, 0.12)
    );
}

.earth-canvas canvas {
  width: 100% !important;
  height: 100% !important;
}

.earth-canvas.earth-ready {
  animation:
    fsz-real-earth-arrive
    1.4s
    cubic-bezier(.2,.8,.2,1)
    both;
}

@keyframes fsz-real-earth-arrive {
  from {
    opacity: 0;
    transform: scale(0.94);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 820px) {
  .brand-transition {
    min-height: 22rem;
    padding: 4rem 6vw;
  }

  .brand-transition-logo {
    width: min(42rem, 92vw);
  }

  .brand-transition p {
    text-align: center;
    line-height: 1.7;
  }

  .cinematic-break {
    min-height: 39rem;
  }

  .cinematic-copy,
  .cinematic-copy-left,
  .cinematic-copy-right {
    left: 7vw;
    right: auto;
    width: 86vw;
    text-align: left;
  }

  .cinematic-copy h2 {
    font-size:
      clamp(
        3.5rem,
        16vw,
        6rem
      );
  }

  .cinematic-copy-right p {
    margin-left: 0;
  }

  .cinematic-break::before {
    background:
      linear-gradient(
        90deg,
        rgba(2,7,19,.92),
        rgba(2,7,19,.18)
      ),
      linear-gradient(
        180deg,
        #020713,
        transparent 16%,
        transparent 70%,
        #020713
      );
  }

  .webgl-earth {
    width: 100vw;
    height: 100vw;
    min-height: 29rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-media {
    transform: none !important;
  }

  .earth-canvas.earth-ready {
    animation: none;
  }
}


/* ==========================================================
   FSZ AMCHARTS EARTH V1
   ========================================================== */

.webgl-earth {
  width: min(68rem, 76vw);
  height: min(68rem, 76vw);
  min-height: 38rem;
  max-height: 76vh;
  aspect-ratio: 1;
}

.earth-canvas.amcharts-earth {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  overflow: visible;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.965);
  transition:
    opacity 900ms ease,
    transform 1200ms cubic-bezier(.2,.8,.2,1);
  filter:
    drop-shadow(
      0 0 2.4rem
      rgba(42, 204, 255, 0.22)
    )
    drop-shadow(
      0 0 7rem
      rgba(79, 62, 255, 0.18)
    );
}

.earth-canvas.amcharts-earth.earth-ready {
  opacity: 1;
  transform: scale(1);
}

.earth-canvas.amcharts-earth > div,
.earth-canvas.amcharts-earth svg {
  width: 100% !important;
  height: 100% !important;
}

.earth-canvas.amcharts-earth svg {
  overflow: visible;
}

.earth-canvas.amcharts-earth::before {
  content: "";
  position: absolute;
  inset: 5%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(58, 217, 255, 0.18),
      transparent 32%
    ),
    radial-gradient(
      circle at 65% 72%,
      rgba(125, 69, 255, 0.2),
      transparent 39%
    );
  filter: blur(34px);
  pointer-events: none;
}

.earth-tech-ring {
  opacity: 0.22;
  pointer-events: none;
}

.earth-tech-ring-a {
  inset: 2%;
}

.earth-tech-ring-b {
  inset: 9%;
}

.earth-axis-label {
  z-index: 5;
}

.earth-canvas.earth-error::after {
  content: "GLOBAL TALENT · WORLDWIDE";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.24em;
  color: rgba(108, 225, 255, 0.72);
}

@media (max-width: 820px) {
  .webgl-earth {
    width: 100vw;
    height: 100vw;
    min-height: 29rem;
  }

  .earth-canvas.amcharts-earth {
    inset: 2%;
    width: 96%;
    height: 96%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .earth-canvas.amcharts-earth {
    transition: none;
  }
}


/* ==========================================================
   FSZ GLOBAL STATEMENT MAP V1
   Approved primary globe remains isolated and unchanged.
   ========================================================== */

.global-statement {
  isolation: isolate;
  overflow: hidden;
}

.global-statement > p,
.global-statement > h2 {
  position: relative;
  z-index: 4;
}

.global-statement-map-shell {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -8%;
  width: min(52vw, 58rem);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.94;
}

.global-statement-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.04);
  filter:
    saturate(1.2)
    contrast(1.08)
    drop-shadow(0 0 2.5rem rgba(60, 210, 255, 0.2))
    drop-shadow(0 0 6rem rgba(111, 65, 255, 0.22));
  mix-blend-mode: screen;
  transition:
    opacity 900ms ease,
    transform 1400ms cubic-bezier(.2,.8,.2,1);
}

.global-statement-map.is-ready {
  opacity: 0.78;
  transform: scale(1);
}

.global-statement-map-glow {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 38% 34%,
      rgba(62, 219, 255, 0.2),
      transparent 34%
    ),
    radial-gradient(
      circle at 65% 64%,
      rgba(160, 58, 255, 0.24),
      transparent 48%
    ),
    radial-gradient(
      circle,
      rgba(255, 60, 186, 0.08),
      transparent 67%
    );
  filter: blur(28px);
}

.global-statement-map-vignette {
  position: absolute;
  z-index: 3;
  inset: -2%;
  background:
    linear-gradient(
      90deg,
      #041225 0%,
      rgba(4, 18, 37, 0.88) 8%,
      rgba(4, 18, 37, 0.28) 31%,
      transparent 53%
    ),
    radial-gradient(
      circle at 50% 50%,
      transparent 48%,
      rgba(4, 11, 29, 0.28) 69%,
      rgba(4, 11, 29, 0.88) 100%
    );
  pointer-events: none;
}

.global-statement-map > div,
.global-statement-map svg {
  width: 100% !important;
  height: 100% !important;
}

.global-statement-map svg {
  overflow: visible;
}

@media (max-width: 900px) {
  .global-statement-map-shell {
    right: -34%;
    width: 86vw;
    opacity: 0.66;
  }

  .global-statement-map-vignette {
    background:
      linear-gradient(
        90deg,
        #041225 0%,
        rgba(4, 18, 37, 0.76) 18%,
        transparent 62%
      ),
      radial-gradient(
        circle,
        transparent 42%,
        rgba(4, 11, 29, 0.72) 100%
      );
  }
}

@media (max-width: 620px) {
  .global-statement-map-shell {
    top: 64%;
    right: -52%;
    width: 118vw;
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-statement-map {
    transition: none;
  }
}

/* FSZ CROWDSURF COMPOSITION V3 — FULL BOTTOM VISIBLE */
.cinematic-confetti .cinematic-media img {
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
  top: auto;
  bottom: 0;
}


/* FSZ MOTION TRIO V2 */
.talent-trio-experience {
  --trio-pointer-x: 0px;
  --trio-pointer-y: 0px;
  --trio-scroll-y: 0px;
  position: relative;
  min-height: clamp(720px, 70vw, 1040px);
  margin: clamp(48px, 6vw, 96px) 0 clamp(72px, 7vw, 120px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(48, 207, 255, 0.24);
  border-radius: clamp(30px, 3vw, 52px);
  background:
    radial-gradient(circle at 28% 48%, rgba(0, 206, 255, 0.13), transparent 31%),
    radial-gradient(circle at 72% 48%, rgba(150, 57, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(5, 25, 53, 0.86), rgba(2, 11, 31, 0.98));
  box-shadow:
    inset 0 0 120px rgba(27, 172, 255, 0.055),
    0 40px 100px rgba(0, 0, 0, 0.30);
}

.talent-trio-experience::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 11, 31, 0.88) 0%, transparent 16%, transparent 84%, rgba(2, 11, 31, 0.88) 100%),
    linear-gradient(180deg, rgba(2, 11, 31, 0.32) 0%, transparent 19%, transparent 73%, rgba(2, 11, 31, 0.86) 100%);
}

.talent-trio-experience::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -17%;
  height: 44%;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(42, 211, 255, 0.20), rgba(99, 54, 255, 0.10) 42%, transparent 72%);
  filter: blur(28px);
  transform: perspective(700px) rotateX(67deg);
}

.talent-trio-image-wrap {
  position: absolute;
  inset: 2% 4% 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  transform:
    translate3d(
      var(--trio-pointer-x),
      calc(var(--trio-pointer-y) + var(--trio-scroll-y)),
      0
    );
  transition: transform 150ms ease-out;
  will-change: transform;
  pointer-events: none;
}

.talent-trio-image {
  display: block;
  width: min(92%, 1160px);
  height: min(96%, 1000px);
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 38px 46px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 22px rgba(39, 211, 255, 0.13))
    drop-shadow(0 0 42px rgba(117, 65, 255, 0.09));
}

.talent-trio-light {
  position: absolute;
  z-index: 2;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.40;
  will-change: transform;
}

.talent-trio-light-cyan {
  left: -8%;
  top: 4%;
  background: radial-gradient(circle, rgba(0, 217, 255, 0.58), rgba(0, 112, 255, 0.12) 48%, transparent 72%);
  transform: translate3d(
    calc(var(--trio-pointer-x) * -0.28),
    calc((var(--trio-pointer-y) + var(--trio-scroll-y)) * -0.20),
    0
  );
}

.talent-trio-light-violet {
  right: -7%;
  bottom: -8%;
  background: radial-gradient(circle, rgba(177, 56, 255, 0.55), rgba(77, 53, 255, 0.11) 48%, transparent 72%);
  transform: translate3d(
    calc(var(--trio-pointer-x) * 0.24),
    calc((var(--trio-pointer-y) + var(--trio-scroll-y)) * 0.18),
    0
  );
}

.talent-trio-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.talent-trio-ring-outer {
  width: min(76vw, 1120px);
  border: 1px solid rgba(48, 211, 255, 0.12);
  box-shadow:
    0 0 70px rgba(26, 190, 255, 0.055),
    inset 0 0 70px rgba(26, 190, 255, 0.035);
  transform: translate(-50%, -50%) rotate(-13deg);
}

.talent-trio-ring-inner {
  width: min(58vw, 830px);
  border: 1px solid rgba(167, 70, 255, 0.11);
  transform: translate(-50%, -50%) rotate(18deg);
}

.talent-trio-stage-glow {
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: 5%;
  height: 16%;
  z-index: 3;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(63, 218, 255, 0.20), rgba(116, 63, 255, 0.09) 45%, transparent 74%);
  filter: blur(20px);
}

@media (max-width: 900px) {
  .talent-trio-experience {
    min-height: clamp(560px, 115vw, 820px);
  }

  .talent-trio-image-wrap {
    inset: 2% -8% 0;
  }

  .talent-trio-image {
    width: min(108%, 900px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .talent-trio-image-wrap,
  .talent-trio-light {
    transform: none;
    transition: none;
  }
}


/* FSZ TRIO ARTISTIC BLEND V3 — EDGELESS MOTION EXPOSURE */
.talent-trio-experience {
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 29% 48%, rgba(0, 213, 255, 0.18) 0%, rgba(0, 122, 255, 0.075) 28%, transparent 57%),
    radial-gradient(ellipse at 72% 46%, rgba(146, 57, 255, 0.19) 0%, rgba(90, 45, 212, 0.075) 31%, transparent 59%),
    radial-gradient(ellipse at 51% 58%, rgba(21, 95, 180, 0.13) 0%, transparent 53%),
    transparent;
  box-shadow: none;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.58) 7%,
      #000 18%,
      #000 76%,
      rgba(0, 0, 0, 0.74) 88%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.58) 7%,
      #000 18%,
      #000 76%,
      rgba(0, 0, 0, 0.74) 88%,
      transparent 100%
    );
}

.talent-trio-experience::before {
  z-index: 6;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(2, 11, 31, 0.18) 65%, rgba(2, 11, 31, 0.76) 100%),
    linear-gradient(
      90deg,
      rgba(2, 11, 31, 0.92) 0%,
      rgba(2, 11, 31, 0.34) 9%,
      transparent 24%,
      transparent 76%,
      rgba(2, 11, 31, 0.34) 91%,
      rgba(2, 11, 31, 0.92) 100%
    );
  mix-blend-mode: normal;
}

.talent-trio-experience::after {
  left: 5%;
  right: 5%;
  bottom: -14%;
  height: 49%;
  z-index: 2;
  background:
    radial-gradient(
      ellipse at center,
      rgba(35, 222, 255, 0.24) 0%,
      rgba(57, 112, 255, 0.13) 28%,
      rgba(133, 54, 255, 0.09) 47%,
      transparent 72%
    );
  filter: blur(38px);
}

.talent-trio-image-wrap::before,
.talent-trio-image-wrap::after {
  content: "";
  position: absolute;
  inset: 3% 4%;
  z-index: -1;
  pointer-events: none;
  background-image: url("/assets/talents/TrioOfBreakdancers.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.12;
  mix-blend-mode: screen;
  filter: blur(8px) saturate(1.45);
}

.talent-trio-image-wrap::before {
  transform: translate3d(-24px, 7px, 0) scale(1.008);
  filter:
    blur(9px)
    saturate(1.65)
    hue-rotate(160deg);
  opacity: 0.115;
}

.talent-trio-image-wrap::after {
  transform: translate3d(27px, -6px, 0) scale(0.996);
  filter:
    blur(11px)
    saturate(1.55)
    hue-rotate(245deg);
  opacity: 0.095;
}

.talent-trio-image {
  position: relative;
  z-index: 2;
  filter:
    saturate(1.04)
    contrast(1.025)
    drop-shadow(0 30px 44px rgba(0, 0, 0, 0.38))
    drop-shadow(-15px 2px 28px rgba(0, 214, 255, 0.13))
    drop-shadow(16px 4px 30px rgba(143, 62, 255, 0.13));
  -webkit-mask-image:
    radial-gradient(
      ellipse 72% 78% at 50% 49%,
      #000 0%,
      #000 70%,
      rgba(0, 0, 0, 0.93) 78%,
      rgba(0, 0, 0, 0.60) 89%,
      transparent 100%
    );
  mask-image:
    radial-gradient(
      ellipse 72% 78% at 50% 49%,
      #000 0%,
      #000 70%,
      rgba(0, 0, 0, 0.93) 78%,
      rgba(0, 0, 0, 0.60) 89%,
      transparent 100%
    );
}

.talent-trio-light {
  opacity: 0.52;
  filter: blur(112px);
  mix-blend-mode: screen;
}

.talent-trio-light-cyan {
  left: -13%;
  top: 3%;
  background:
    radial-gradient(
      circle,
      rgba(0, 225, 255, 0.50) 0%,
      rgba(0, 145, 255, 0.18) 36%,
      transparent 70%
    );
}

.talent-trio-light-violet {
  right: -12%;
  bottom: -6%;
  background:
    radial-gradient(
      circle,
      rgba(173, 61, 255, 0.48) 0%,
      rgba(100, 51, 255, 0.17) 37%,
      transparent 70%
    );
}

.talent-trio-ring {
  opacity: 0.42;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, transparent 3%, #000 30%, #000 70%, transparent 97%);
  mask-image: linear-gradient(to bottom, transparent 3%, #000 30%, #000 70%, transparent 97%);
}

.talent-trio-ring-outer {
  border-color: rgba(42, 213, 255, 0.14);
  box-shadow:
    0 0 90px rgba(25, 194, 255, 0.075),
    inset 0 0 90px rgba(25, 194, 255, 0.04);
}

.talent-trio-ring-inner {
  border-color: rgba(170, 65, 255, 0.13);
}

.talent-trio-stage-glow {
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 25%;
  opacity: 0.82;
  mix-blend-mode: screen;
  background:
    radial-gradient(
      ellipse at center,
      rgba(43, 224, 255, 0.23) 0%,
      rgba(72, 112, 255, 0.12) 32%,
      rgba(150, 57, 255, 0.08) 51%,
      transparent 76%
    );
  filter: blur(32px);
}

@media (max-width: 900px) {
  .talent-trio-experience {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 11%, #000 82%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 11%, #000 82%, transparent 100%);
  }

  .talent-trio-image-wrap::before {
    transform: translate3d(-14px, 5px, 0) scale(1.006);
  }

  .talent-trio-image-wrap::after {
    transform: translate3d(15px, -4px, 0) scale(0.997);
  }
}

@media (prefers-reduced-motion: reduce) {
  .talent-trio-image-wrap::before,
  .talent-trio-image-wrap::after {
    transform: none;
  }
}


/* FSZ TRIO HARD-LIGHT IMAGE BLEND V4 — COLOR THROUGH SUBJECT */
.talent-trio-image-wrap {
  isolation: auto;
}

.talent-trio-image {
  mix-blend-mode: hard-light;
  opacity: 0.88;
  filter:
    saturate(1.16)
    contrast(1.08)
    brightness(1.02)
    drop-shadow(0 30px 44px rgba(0, 0, 0, 0.30))
    drop-shadow(-16px 2px 32px rgba(0, 221, 255, 0.17))
    drop-shadow(18px 4px 34px rgba(156, 58, 255, 0.16));
}

.talent-trio-image-wrap::before {
  opacity: 0.18;
  mix-blend-mode: screen;
}

.talent-trio-image-wrap::after {
  opacity: 0.15;
  mix-blend-mode: color-dodge;
}

.talent-trio-light-cyan {
  opacity: 0.64;
}

.talent-trio-light-violet {
  opacity: 0.62;
}

.talent-trio-stage-glow {
  opacity: 0.94;
  mix-blend-mode: screen;
}


/* FSZ TRIO EARTH-STYLE INTEGRATED BLEND V5 */
.talent-trio-experience {
  background:
    radial-gradient(ellipse at 24% 43%, rgba(0, 206, 255, 0.28) 0%, rgba(0, 139, 255, 0.14) 25%, transparent 55%),
    radial-gradient(ellipse at 76% 44%, rgba(156, 57, 255, 0.31) 0%, rgba(103, 54, 255, 0.15) 27%, transparent 57%),
    radial-gradient(ellipse at 50% 58%, rgba(46, 94, 213, 0.18) 0%, transparent 58%),
    transparent;
}

.talent-trio-image {
  opacity: 0.66;
  mix-blend-mode: luminosity;
  filter:
    saturate(0.72)
    contrast(1.16)
    brightness(1.06)
    drop-shadow(0 26px 42px rgba(0, 0, 0, 0.22))
    drop-shadow(-12px 0 25px rgba(0, 221, 255, 0.18))
    drop-shadow(14px 0 27px rgba(157, 61, 255, 0.17));
}

.talent-trio-image-wrap::before {
  inset: 3% 4%;
  opacity: 0.30;
  mix-blend-mode: screen;
  filter:
    grayscale(0.35)
    saturate(1.8)
    contrast(1.14)
    brightness(1.08)
    hue-rotate(150deg)
    blur(2.5px);
  transform: translate3d(-8px, 2px, 0) scale(1.003);
}

.talent-trio-image-wrap::after {
  inset: 3% 4%;
  opacity: 0.20;
  mix-blend-mode: color-dodge;
  filter:
    grayscale(0.58)
    saturate(1.65)
    contrast(1.20)
    brightness(0.92)
    hue-rotate(232deg)
    blur(4px);
  transform: translate3d(9px, -2px, 0) scale(0.999);
}

.talent-trio-light-cyan {
  width: 72%;
  left: -12%;
  top: -1%;
  opacity: 0.78;
  mix-blend-mode: screen;
  filter: blur(105px);
}

.talent-trio-light-violet {
  width: 72%;
  right: -12%;
  bottom: -7%;
  opacity: 0.76;
  mix-blend-mode: screen;
  filter: blur(105px);
}

.talent-trio-stage-glow {
  left: 4%;
  right: 4%;
  bottom: -2%;
  height: 36%;
  opacity: 1;
  mix-blend-mode: screen;
  background:
    radial-gradient(
      ellipse at center,
      rgba(21, 220, 255, 0.31) 0%,
      rgba(58, 119, 255, 0.18) 30%,
      rgba(151, 57, 255, 0.14) 52%,
      transparent 76%
    );
  filter: blur(42px);
}

.talent-trio-experience::before {
  background:
    radial-gradient(
      ellipse at 50% 49%,
      transparent 30%,
      rgba(3, 15, 38, 0.06) 57%,
      rgba(2, 11, 31, 0.70) 100%
    ),
    linear-gradient(
      90deg,
      rgba(2, 11, 31, 0.96) 0%,
      rgba(2, 11, 31, 0.40) 8%,
      transparent 23%,
      transparent 77%,
      rgba(2, 11, 31, 0.40) 92%,
      rgba(2, 11, 31, 0.96) 100%
    );
}

.talent-trio-ring {
  opacity: 0.25;
}

@media (max-width: 900px) {
  .talent-trio-image {
    opacity: 0.70;
  }

  .talent-trio-image-wrap::before {
    transform: translate3d(-5px, 1px, 0) scale(1.002);
  }

  .talent-trio-image-wrap::after {
    transform: translate3d(6px, -1px, 0) scale(0.999);
  }
}


/* FSZ TRIO OVERLAY BLEND V6 — ORIGINAL COLOR + ENVIRONMENT */
.talent-trio-image {
  opacity: 0.82;
  mix-blend-mode: overlay;
  filter:
    saturate(1.12)
    contrast(1.08)
    brightness(1.08)
    drop-shadow(0 26px 42px rgba(0, 0, 0, 0.20))
    drop-shadow(-12px 0 25px rgba(0, 221, 255, 0.16))
    drop-shadow(14px 0 27px rgba(157, 61, 255, 0.15));
}

.talent-trio-image-wrap::before {
  opacity: 0.20;
  mix-blend-mode: screen;
  filter:
    saturate(1.45)
    contrast(1.08)
    brightness(1.04)
    hue-rotate(150deg)
    blur(3px);
}

.talent-trio-image-wrap::after {
  opacity: 0.11;
  mix-blend-mode: color-dodge;
  filter:
    saturate(1.35)
    contrast(1.10)
    brightness(0.94)
    hue-rotate(232deg)
    blur(4px);
}

.talent-trio-light-cyan {
  opacity: 0.68;
}

.talent-trio-light-violet {
  opacity: 0.68;
}


/* FSZ TRIO DUAL-EXPOSURE V7 — BOTTOM LUMINOSITY / TOP SOFT-LIGHT */

/* Bottom exposure: actual transparent Trio PNG */
.talent-trio-image {
  position: relative;
  z-index: 2;
  opacity: 0.88;
  mix-blend-mode: luminosity;
  filter:
    saturate(1)
    contrast(1.10)
    brightness(1.04)
    drop-shadow(0 28px 42px rgba(0, 0, 0, 0.22));
}

/* Top exposure: exact same PNG, exact same position and scale */
.talent-trio-image-wrap::before {
  content: "";
  position: absolute;
  inset: 2% 4% 0;
  z-index: 3;
  pointer-events: none;
  background-image: url("/assets/talents/TrioOfBreakdancers.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.82;
  mix-blend-mode: soft-light;
  filter:
    saturate(1.08)
    contrast(1.10)
    brightness(1.04);
  transform: none;
}

/* Disable the previous third exposure so the composite is exactly two layers */
.talent-trio-image-wrap::after {
  content: none;
  display: none;
  opacity: 0;
}

/* Let the same FSZ atmosphere provide the color beneath both exposures */
.talent-trio-light-cyan {
  opacity: 0.74;
}

.talent-trio-light-violet {
  opacity: 0.74;
}

.talent-trio-stage-glow {
  opacity: 0.92;
  mix-blend-mode: screen;
}

@media (max-width: 900px) {
  .talent-trio-image {
    opacity: 0.88;
  }

  .talent-trio-image-wrap::before {
    inset: 2% -8% 0;
    opacity: 0.82;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .talent-trio-image-wrap::before {
    transform: none;
  }
}


/* FSZ TRIO TRUE TWO-IMAGE COMPOSITE V8
   Exact stack:
   bottom real PNG = luminosity
   top real PNG = soft-light
*/

.talent-trio-image-wrap {
  display: grid;
  place-items: center;
  isolation: auto;
}

.talent-trio-image {
  grid-area: 1 / 1;
  position: relative;
  width: min(92%, 1160px);
  height: min(96%, 1000px);
  object-fit: contain;
  object-position: center;
  -webkit-mask-image: none;
  mask-image: none;
  transform: none;
}

/* Bottom image — first copy */
.talent-trio-image-bottom {
  z-index: 2;
  opacity: 1;
  mix-blend-mode: luminosity;
  filter: none;
}

/* Top image — second identical copy */
.talent-trio-image-top {
  z-index: 3;
  opacity: 1;
  mix-blend-mode: soft-light;
  filter: none;
  pointer-events: none;
}

/* Kill every previous synthetic image copy. */
.talent-trio-image-wrap::before,
.talent-trio-image-wrap::after {
  content: none;
  display: none;
  background-image: none;
  opacity: 0;
  filter: none;
  transform: none;
}

/* Preserve the established FSZ cyan/violet environment beneath the stack. */
.talent-trio-light-cyan {
  opacity: 0.74;
}

.talent-trio-light-violet {
  opacity: 0.74;
}

.talent-trio-stage-glow {
  opacity: 0.92;
  mix-blend-mode: screen;
}

@media (max-width: 900px) {
  .talent-trio-image {
    width: min(108%, 1160px);
    height: min(96%, 1000px);
  }

  .talent-trio-image-bottom,
  .talent-trio-image-top {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .talent-trio-image-bottom,
  .talent-trio-image-top {
    transform: none;
  }
}


/* FSZ TRIO ISOLATED ART COMPOSITOR V9
   Controlled internal blend stack:
   color field -> luminosity PNG -> soft-light PNG
*/

.talent-trio-experience {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Remove the old V3 page-edge darkening from the artwork area. */
.talent-trio-experience::before {
  background: none;
}

/* The artwork becomes its own Photoshop-like compositing group. */
.talent-trio-image-wrap {
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: visible;
}

/* Internal cyan/violet color plate.
   This is what the two dancer layers blend AGAINST. */
.talent-trio-image-wrap::before {
  content: "";
  display: block;
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  width: min(92%, 1160px);
  height: min(96%, 1000px);
  pointer-events: none;
  background:
    radial-gradient(
      circle at 28% 43%,
      rgba(0, 204, 255, 0.98) 0%,
      rgba(0, 126, 255, 0.88) 31%,
      rgba(23, 67, 182, 0.72) 55%,
      transparent 76%
    ),
    radial-gradient(
      circle at 73% 43%,
      rgba(192, 55, 255, 0.96) 0%,
      rgba(116, 48, 255, 0.88) 33%,
      rgba(51, 48, 177, 0.72) 57%,
      transparent 77%
    ),
    linear-gradient(
      135deg,
      rgba(0, 156, 226, 0.82),
      rgba(50, 77, 203, 0.86) 48%,
      rgba(124, 48, 217, 0.84)
    );
  border-radius: 50%;
  filter: blur(44px);
  opacity: 0.92;
  transform: scale(0.88);
}

/* No synthetic third dancer exposure. */
.talent-trio-image-wrap::after {
  content: none;
  display: none;
}

/* Both real PNGs occupy exactly the same compositing plane. */
.talent-trio-image {
  grid-area: 1 / 1;
  position: relative;
  width: min(92%, 1160px);
  height: min(96%, 1000px);
  object-fit: contain;
  object-position: center;
  -webkit-mask-image: none;
  mask-image: none;
  filter: none;
  transform: none;
}

/* Photoshop-style bottom layer. */
.talent-trio-image-bottom {
  z-index: 2;
  opacity: 1;
  mix-blend-mode: luminosity;
  filter: none;
}

/* Photoshop-style top layer. */
.talent-trio-image-top {
  z-index: 3;
  opacity: 1;
  mix-blend-mode: soft-light;
  filter: none;
}

/* Existing environmental light stays behind the isolated artwork. */
.talent-trio-light-cyan {
  opacity: 0.58;
}

.talent-trio-light-violet {
  opacity: 0.58;
}

.talent-trio-stage-glow {
  opacity: 0.72;
  mix-blend-mode: screen;
}

@media (max-width: 900px) {
  .talent-trio-image-wrap::before,
  .talent-trio-image {
    width: min(108%, 1160px);
    height: min(96%, 1000px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .talent-trio-image-bottom,
  .talent-trio-image-top {
    transform: none;
  }
}


/* ============================================================
   FSZ WORLD FLAGS FULL WIDTH HERO V1
   ============================================================ */

.mission-preview {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: clamp(680px, 48vw, 920px);
  margin: 0;
  padding: clamp(64px, 6vw, 110px) clamp(32px, 5vw, 96px);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(170px, 0.55fr) minmax(220px, 0.55fr) minmax(520px, 1.6fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(32px, 4vw, 86px);
  align-items: center;
  background:
    linear-gradient(
      90deg,
      rgba(3, 14, 39, 0.10) 0%,
      rgba(3, 14, 39, 0.02) 48%,
      rgba(3, 14, 39, 0.16) 72%,
      rgba(3, 14, 39, 0.52) 100%
    ),
    url("/assets/WorldFlags3.png") center center / cover no-repeat;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.mission-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(2, 10, 31, 0.12) 0%,
      transparent 18%,
      transparent 78%,
      rgba(2, 10, 31, 0.26) 100%
    );
}

.mission-glow {
  opacity: 0;
  pointer-events: none;
}

.mission-label {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  margin-top: clamp(30px, 5vw, 86px);
  max-width: 190px;
}

.mission-statement {
  position: relative;
  z-index: 3;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  width: min(100%, 720px);
  margin: 0;
  padding: clamp(28px, 3vw, 48px) clamp(22px, 3vw, 46px);
  text-align: left;
  background:
    linear-gradient(
      90deg,
      rgba(3, 14, 39, 0.02),
      rgba(3, 14, 39, 0.16) 45%,
      rgba(3, 14, 39, 0.42) 100%
    );
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.mission-statement > p {
  margin: 0 0 clamp(14px, 1.3vw, 22px);
  color: #74dfff;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.mission-statement h2 {
  margin: 0;
  font-size: clamp(64px, 6.2vw, 118px);
  line-height: 0.88;
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.mission-statement h2 span {
  display: block;
}

.mission-belief {
  position: relative;
  z-index: 3;
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  width: min(100%, 620px);
  margin: 0;
  padding: clamp(20px, 2vw, 32px) clamp(22px, 3vw, 46px);
  background:
    linear-gradient(
      90deg,
      rgba(3, 14, 39, 0.02),
      rgba(3, 14, 39, 0.20) 48%,
      rgba(3, 14, 39, 0.48) 100%
    );
}

.mission-belief .belief-line {
  opacity: 0.95;
}

.mission-belief > p {
  max-width: 560px;
}

.mission-belief > a {
  position: relative;
  z-index: 2;
}

@media (min-width: 1500px) {
  .mission-preview {
    min-height: min(54vw, 960px);
    background-position: center center;
  }

  .mission-statement {
    width: min(100%, 780px);
  }
}

@media (max-width: 1100px) {
  .mission-preview {
    min-height: 760px;
    grid-template-columns: minmax(130px, 0.4fr) minmax(80px, 0.2fr) minmax(470px, 1.35fr);
    padding-left: clamp(24px, 4vw, 54px);
    padding-right: clamp(24px, 4vw, 54px);
    background-position: 46% center;
  }

  .mission-statement h2 {
    font-size: clamp(60px, 8vw, 92px);
  }
}

@media (max-width: 760px) {
  .mission-preview {
    min-height: 760px;
    padding: 38px 22px 46px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    background-position: 38% center;
  }

  .mission-preview::before {
    background:
      linear-gradient(
        180deg,
        rgba(2, 10, 31, 0.18) 0%,
        rgba(2, 10, 31, 0.02) 28%,
        rgba(2, 10, 31, 0.20) 58%,
        rgba(2, 10, 31, 0.76) 100%
      );
  }

  .mission-label {
    align-self: flex-start;
    margin: 0;
  }

  .mission-statement {
    align-self: flex-end;
    width: min(94%, 560px);
    margin: auto 0 0;
    padding: 24px 18px;
    background:
      linear-gradient(
        90deg,
        rgba(3, 14, 39, 0.04),
        rgba(3, 14, 39, 0.48)
      );
  }

  .mission-statement h2 {
    font-size: clamp(52px, 14vw, 82px);
  }

  .mission-belief {
    align-self: flex-end;
    width: min(94%, 560px);
    padding: 20px 18px 0;
    background:
      linear-gradient(
        90deg,
        rgba(3, 14, 39, 0.04),
        rgba(3, 14, 39, 0.54)
      );
  }
}

/* FSZ SINGER EXPERIENCE HERO V1 */

.singer-experience-stage {
  position: relative;
  width: 100%;
  min-height: clamp(720px, 62vw, 1120px);
  margin-top: clamp(64px, 7vw, 128px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(72, 216, 255, 0.16);
  border-radius: clamp(28px, 3vw, 52px);
  background:
    radial-gradient(circle at 76% 48%, rgba(97, 55, 255, 0.28), transparent 31%),
    radial-gradient(circle at 66% 64%, rgba(255, 41, 177, 0.17), transparent 30%),
    radial-gradient(circle at 24% 42%, rgba(0, 215, 255, 0.14), transparent 31%),
    linear-gradient(122deg, #06142d 0%, #07132d 43%, #0d0a2d 70%, #180a32 100%);
  box-shadow:
    inset 0 0 120px rgba(19, 117, 255, 0.07),
    0 36px 110px rgba(0, 0, 0, 0.25);
}

.singer-experience-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(67, 219, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 219, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 67% 50%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 67% 50%, #000 0%, transparent 72%);
}

.singer-experience-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 15, 39, 0.35) 0%, transparent 26%, transparent 77%, rgba(6, 9, 32, 0.16) 100%),
    linear-gradient(0deg, rgba(4, 12, 31, 0.46) 0%, transparent 18%);
}

.singer-energy {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(18px);
  mix-blend-mode: screen;
  animation: singerEnergyFloat 8s ease-in-out infinite alternate;
}

.singer-energy-cyan {
  width: 58%;
  aspect-ratio: 1;
  right: 26%;
  top: 4%;
  background: radial-gradient(circle, rgba(0, 224, 255, 0.66) 0%, rgba(0, 142, 255, 0.23) 34%, transparent 70%);
}

.singer-energy-violet {
  width: 61%;
  aspect-ratio: 1;
  right: -3%;
  top: 1%;
  background: radial-gradient(circle, rgba(110, 65, 255, 0.66) 0%, rgba(95, 43, 255, 0.22) 37%, transparent 71%);
  animation-delay: -2.5s;
}

.singer-energy-magenta {
  width: 46%;
  aspect-ratio: 1;
  right: 4%;
  bottom: -22%;
  background: radial-gradient(circle, rgba(255, 35, 184, 0.58) 0%, rgba(209, 42, 255, 0.18) 39%, transparent 72%);
  animation-delay: -5s;
}

.singer-burst {
  position: absolute;
  z-index: 2;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: screen;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(69, 225, 255, 0.36) 0deg 0.7deg,
      transparent 0.7deg 8deg
    );
  -webkit-mask-image: radial-gradient(circle, transparent 0 14%, #000 22%, transparent 69%);
  mask-image: radial-gradient(circle, transparent 0 14%, #000 22%, transparent 69%);
  animation: singerBurstRotate 42s linear infinite;
}

.singer-burst-a {
  right: 6%;
  top: 4%;
}

.singer-burst-b {
  right: 19%;
  bottom: -22%;
  opacity: 0.23;
  transform: scale(0.74);
  animation-direction: reverse;
}

.singer-sparkles {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.singer-sparkles span {
  position: absolute;
  color: #dffbff;
  text-shadow:
    0 0 8px #fff,
    0 0 18px #45ddff,
    0 0 34px #8c58ff;
  animation: singerSparkle 2.8s ease-in-out infinite;
}

.singer-sparkles span:nth-child(1) { left: 45%; top: 16%; font-size: 30px; }
.singer-sparkles span:nth-child(2) { left: 58%; top: 10%; font-size: 18px; animation-delay: -.7s; }
.singer-sparkles span:nth-child(3) { right: 8%; top: 29%; font-size: 25px; animation-delay: -1.3s; }
.singer-sparkles span:nth-child(4) { left: 52%; bottom: 16%; font-size: 16px; animation-delay: -2s; }
.singer-sparkles span:nth-child(5) { right: 27%; bottom: 9%; font-size: 29px; animation-delay: -.35s; }
.singer-sparkles span:nth-child(6) { left: 38%; top: 47%; font-size: 15px; animation-delay: -1.7s; }
.singer-sparkles span:nth-child(7) { right: 4%; bottom: 39%; font-size: 18px; animation-delay: -2.4s; }
.singer-sparkles span:nth-child(8) { left: 66%; top: 39%; font-size: 12px; animation-delay: -1s; }

.singer-rating-zone {
  position: absolute;
  left: clamp(40px, 5.2vw, 108px);
  top: 50%;
  z-index: 10;
  width: min(35%, 560px);
  transform: translateY(-50%);
}

.singer-rating-kicker {
  display: block;
  margin: 0 0 18px;
  color: #48e5ff;
  font-size: clamp(10px, 0.78vw, 14px);
  font-weight: 900;
  letter-spacing: 0.25em;
}

.singer-rating-card {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 3.1vw, 54px);
  border: 1px solid rgba(85, 220, 255, 0.24);
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(7, 30, 68, 0.86), rgba(11, 13, 45, 0.83)),
    radial-gradient(circle at 100% 0%, rgba(206, 52, 255, 0.18), transparent 45%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 28px 80px rgba(0, 0, 0, 0.24),
    0 0 70px rgba(35, 177, 255, 0.08);
  backdrop-filter: blur(18px);
}

.singer-rating-card::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -80px;
  top: -100px;
  border-radius: 50%;
  background: rgba(220, 45, 255, 0.22);
  filter: blur(44px);
  pointer-events: none;
}

.singer-rating-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #91a9cc;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.singer-rating-head strong {
  color: #ff4cc8;
}

.singer-rating-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 24px 0 16px;
}

.singer-rating-score strong {
  font-size: clamp(74px, 7vw, 126px);
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: -0.07em;
  background: linear-gradient(135deg, #43e5ff 4%, #6376ff 45%, #e54aff 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(93, 102, 255, 0.22));
}

.singer-rating-score span {
  color: #8197ba;
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 700;
}

.singer-rating-track {
  position: relative;
  height: 8px;
  margin-top: 18px;
  border-radius: 999px;
  background: rgba(39, 91, 143, 0.32);
}

.singer-rating-track span {
  position: absolute;
  inset: 0 18% 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #43e7ff, #6b7cff 55%, #ed46d0);
  box-shadow: 0 0 22px rgba(77, 207, 255, 0.34);
}

.singer-rating-track i {
  position: absolute;
  left: 82%;
  top: 50%;
  width: 23px;
  height: 23px;
  border: 4px solid white;
  border-radius: 50%;
  background: #d843dd;
  box-shadow: 0 0 22px rgba(218, 66, 255, 0.75);
  transform: translate(-50%, -50%);
}

.singer-rating-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
  color: #667fa6;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.singer-rating-card h3 {
  margin: clamp(32px, 3vw, 48px) 0 18px;
  color: #f7fbff;
  font-size: clamp(42px, 4.2vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.singer-rating-card h3 span {
  background: linear-gradient(90deg, #45e5ff, #6779ff 48%, #ec49ce);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.singer-rating-card > p {
  max-width: 430px;
  margin: 0;
  color: #8fa7c8;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.7;
}

.singer-rating-signal {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 4px 12px;
  align-items: center;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(78, 202, 255, 0.13);
}

.singer-rating-signal > span {
  grid-row: 1 / 3;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #36ff9d;
  box-shadow: 0 0 15px rgba(54, 255, 157, 0.82);
}

.singer-rating-signal strong {
  color: #d9faff;
  font-size: 10px;
  letter-spacing: 0.16em;
}

.singer-rating-signal small {
  color: #557399;
  font-size: 9px;
  letter-spacing: 0.12em;
}

.singer-art-zone {
  position: absolute;
  z-index: 5;
  right: -1%;
  top: 1%;
  width: 69%;
  height: 99%;
  pointer-events: none;
}

.singer-halo {
  position: absolute;
  width: 76%;
  aspect-ratio: 1;
  left: 15%;
  top: 7%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(43, 211, 255, 0.28) 0%, rgba(91, 91, 255, 0.21) 35%, rgba(216, 45, 255, 0.12) 53%, transparent 70%);
  filter: blur(8px);
  mix-blend-mode: screen;
}

.singer-rings {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  left: 20%;
  top: 11%;
  border: 1px solid rgba(74, 221, 255, 0.19);
  border-radius: 50%;
  box-shadow:
    0 0 0 55px rgba(98, 78, 255, 0.045),
    0 0 0 112px rgba(219, 59, 255, 0.026);
  animation: singerRingPulse 5s ease-in-out infinite;
}

.singer-vector-art {
  position: absolute;
  z-index: 5;
  right: -2%;
  bottom: -2%;
  width: min(92%, 1080px);
  height: 98%;
  object-fit: contain;
  object-position: right bottom;
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.3))
    drop-shadow(0 0 20px rgba(53, 220, 255, 0.42))
    drop-shadow(0 0 48px rgba(119, 70, 255, 0.36))
    drop-shadow(0 0 90px rgba(222, 46, 255, 0.18));
  animation: singerArtFloat 6s ease-in-out infinite alternate;
}

.singer-art-caption {
  position: absolute;
  z-index: 6;
  right: clamp(32px, 5vw, 88px);
  bottom: clamp(28px, 4vw, 68px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  opacity: 0.78;
}

.singer-art-caption span {
  color: #50e5ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.35em;
}

.singer-art-caption strong {
  margin-top: 4px;
  color: rgba(244, 249, 255, 0.9);
  font-size: clamp(18px, 1.7vw, 30px);
  letter-spacing: 0.08em;
}

@keyframes singerEnergyFloat {
  from { transform: translate3d(-2%, -1%, 0) scale(0.96); opacity: 0.72; }
  to { transform: translate3d(3%, 2%, 0) scale(1.06); opacity: 1; }
}

@keyframes singerBurstRotate {
  to { transform: rotate(360deg); }
}

@keyframes singerSparkle {
  0%, 100% { opacity: 0.18; transform: scale(0.65) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.18) rotate(22deg); }
}

@keyframes singerArtFloat {
  from { transform: translate3d(0, 7px, 0) scale(0.995); }
  to { transform: translate3d(-8px, -8px, 0) scale(1.012); }
}

@keyframes singerRingPulse {
  0%, 100% { opacity: 0.36; transform: scale(0.97); }
  50% { opacity: 0.76; transform: scale(1.03); }
}

@media (max-width: 1100px) {
  .singer-experience-stage {
    min-height: 900px;
  }

  .singer-rating-zone {
    left: 5%;
    width: 42%;
  }

  .singer-art-zone {
    right: -8%;
    width: 72%;
  }
}

@media (max-width: 760px) {
  .singer-experience-stage {
    min-height: 1120px;
    border-radius: 28px;
  }

  .singer-rating-zone {
    left: 6%;
    right: 6%;
    top: 5%;
    width: auto;
    transform: none;
  }

  .singer-rating-card {
    padding: 28px;
  }

  .singer-art-zone {
    right: -12%;
    top: auto;
    bottom: 0;
    width: 112%;
    height: 57%;
  }

  .singer-vector-art {
    width: 100%;
    height: 100%;
  }

  .singer-art-caption {
    right: 8%;
    bottom: 5%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .singer-energy,
  .singer-burst,
  .singer-sparkles span,
  .singer-vector-art,
  .singer-rings {
    animation: none;
  }
}

/* FSZ WORDMARK SIMPLE EQ V2 */

.brand-transition-logo,
.brand-transition-rule,
.brand-transition > p {
  position: relative;
  z-index: 5;
}

.brand-transition-logo {
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
}

.brand-soundscape {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.5;
}

.brand-soundbar {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 78%;
  display: flex;
  align-items: flex-end;
  gap: clamp(2px, 0.16vw, 5px);
  padding: 0 clamp(3px, 0.35vw, 8px);
}

.brand-soundbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    #27e9ff 0%,
    #318eff 28%,
    #775cff 55%,
    #c34dff 76%,
    #ff3cae 100%
  );
  box-shadow:
    0 0 8px rgba(56, 220, 255, 0.75),
    0 0 18px rgba(115, 83, 255, 0.46);
}

.brand-soundbar > i {
  --eq-height: 50%;
  --eq-low: 0.18;
  --eq-mid: 0.62;
  --eq-duration: 1.15s;
  --eq-delay: 0s;
  flex: 1 1 0;
  min-width: 2px;
  height: var(--eq-height);
  border-radius: 3px 3px 0 0;
  transform: scaleY(var(--eq-low));
  transform-origin: center bottom;
  opacity: 0.72;
  background: linear-gradient(
    180deg,
    #ff48c8 0%,
    #9a5cff 34%,
    #557cff 66%,
    #35eaff 100%
  );
  box-shadow:
    0 0 5px rgba(75, 220, 255, 0.42),
    0 0 10px rgba(130, 78, 255, 0.24);
  animation: brandEqRise var(--eq-duration) cubic-bezier(.45,.05,.55,.95) var(--eq-delay) infinite alternate;
}

.brand-soundbar > i:nth-child(8n+1) {
  --eq-height: 34%;
  --eq-low: 0.12;
  --eq-mid: 0.48;
  --eq-duration: 0.84s;
  --eq-delay: -0.23s;
}

.brand-soundbar > i:nth-child(8n+2) {
  --eq-height: 55%;
  --eq-low: 0.19;
  --eq-mid: 0.71;
  --eq-duration: 1.08s;
  --eq-delay: -0.71s;
}

.brand-soundbar > i:nth-child(8n+3) {
  --eq-height: 73%;
  --eq-low: 0.14;
  --eq-mid: 0.53;
  --eq-duration: 0.93s;
  --eq-delay: -0.44s;
}

.brand-soundbar > i:nth-child(8n+4) {
  --eq-height: 45%;
  --eq-low: 0.22;
  --eq-mid: 0.82;
  --eq-duration: 1.31s;
  --eq-delay: -0.89s;
}

.brand-soundbar > i:nth-child(8n+5) {
  --eq-height: 84%;
  --eq-low: 0.1;
  --eq-mid: 0.64;
  --eq-duration: 1.17s;
  --eq-delay: -0.36s;
}

.brand-soundbar > i:nth-child(8n+6) {
  --eq-height: 61%;
  --eq-low: 0.16;
  --eq-mid: 0.76;
  --eq-duration: 0.78s;
  --eq-delay: -0.61s;
}

.brand-soundbar > i:nth-child(8n+7) {
  --eq-height: 39%;
  --eq-low: 0.25;
  --eq-mid: 0.58;
  --eq-duration: 1.42s;
  --eq-delay: -1.04s;
}

.brand-soundbar > i:nth-child(8n) {
  --eq-height: 68%;
  --eq-low: 0.13;
  --eq-mid: 0.88;
  --eq-duration: 1.02s;
  --eq-delay: -0.52s;
}

.brand-soundbar > i:nth-child(13n+3),
.brand-soundbar > i:nth-child(17n+6) {
  --eq-height: 96%;
}

.brand-soundbar > i:nth-child(-n+24) {
  background: linear-gradient(180deg, #5c9cff, #35eaff);
}

.brand-soundbar > i:nth-child(n+25):nth-child(-n+48) {
  background: linear-gradient(180deg, #7568ff, #3bcaff);
}

.brand-soundbar > i:nth-child(n+49):nth-child(-n+72) {
  background: linear-gradient(180deg, #c150ff, #686eff);
}

.brand-soundbar > i:nth-child(n+73) {
  background: linear-gradient(180deg, #ff42b7, #a454ff);
}

.brand-sound-particles {
  position: absolute;
  z-index: 3;
  inset: 0;
}

.brand-sound-particles > i {
  position: absolute;
  bottom: 8%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  color: #66eaff;
  background: currentColor;
  opacity: 0;
  box-shadow: 0 0 8px currentColor;
  animation: brandDotFade 3.4s ease-in-out infinite;
}

.brand-sound-particles > i:nth-child(3n+1) {
  color: #54eaff;
}

.brand-sound-particles > i:nth-child(3n+2) {
  color: #8866ff;
}

.brand-sound-particles > i:nth-child(3n) {
  color: #f34bc3;
}

.brand-sound-particles > i:nth-child(1) { left: 3%; bottom: 18%; animation-delay: -0.2s; }
.brand-sound-particles > i:nth-child(2) { left: 7%; bottom: 34%; animation-delay: -1.7s; }
.brand-sound-particles > i:nth-child(3) { left: 11%; bottom: 12%; animation-delay: -2.8s; }
.brand-sound-particles > i:nth-child(4) { left: 15%; bottom: 43%; animation-delay: -0.9s; }
.brand-sound-particles > i:nth-child(5) { left: 19%; bottom: 26%; animation-delay: -2.1s; }
.brand-sound-particles > i:nth-child(6) { left: 23%; bottom: 52%; animation-delay: -1.3s; }
.brand-sound-particles > i:nth-child(7) { left: 27%; bottom: 16%; animation-delay: -3s; }
.brand-sound-particles > i:nth-child(8) { left: 31%; bottom: 39%; animation-delay: -0.5s; }
.brand-sound-particles > i:nth-child(9) { left: 35%; bottom: 22%; animation-delay: -2.5s; }
.brand-sound-particles > i:nth-child(10) { left: 39%; bottom: 48%; animation-delay: -1.1s; }
.brand-sound-particles > i:nth-child(11) { left: 43%; bottom: 14%; animation-delay: -2.9s; }
.brand-sound-particles > i:nth-child(12) { left: 47%; bottom: 31%; animation-delay: -0.7s; }
.brand-sound-particles > i:nth-child(13) { left: 51%; bottom: 55%; animation-delay: -2s; }
.brand-sound-particles > i:nth-child(14) { left: 55%; bottom: 19%; animation-delay: -1.5s; }
.brand-sound-particles > i:nth-child(15) { left: 59%; bottom: 42%; animation-delay: -3.2s; }
.brand-sound-particles > i:nth-child(16) { left: 63%; bottom: 25%; animation-delay: -0.3s; }
.brand-sound-particles > i:nth-child(17) { left: 67%; bottom: 50%; animation-delay: -2.4s; }
.brand-sound-particles > i:nth-child(18) { left: 71%; bottom: 13%; animation-delay: -1s; }
.brand-sound-particles > i:nth-child(19) { left: 75%; bottom: 37%; animation-delay: -2.7s; }
.brand-sound-particles > i:nth-child(20) { left: 79%; bottom: 21%; animation-delay: -0.6s; }
.brand-sound-particles > i:nth-child(21) { left: 83%; bottom: 46%; animation-delay: -1.9s; }
.brand-sound-particles > i:nth-child(22) { left: 87%; bottom: 17%; animation-delay: -3.1s; }
.brand-sound-particles > i:nth-child(23) { left: 91%; bottom: 33%; animation-delay: -1.2s; }
.brand-sound-particles > i:nth-child(24) { left: 95%; bottom: 54%; animation-delay: -2.3s; }
.brand-sound-particles > i:nth-child(25) { left: 5%; bottom: 59%; animation-delay: -1.6s; }
.brand-sound-particles > i:nth-child(26) { left: 29%; bottom: 63%; animation-delay: -2.6s; }
.brand-sound-particles > i:nth-child(27) { left: 45%; bottom: 68%; animation-delay: -0.8s; }
.brand-sound-particles > i:nth-child(28) { left: 61%; bottom: 61%; animation-delay: -3.3s; }
.brand-sound-particles > i:nth-child(29) { left: 77%; bottom: 66%; animation-delay: -1.4s; }
.brand-sound-particles > i:nth-child(30) { left: 93%; bottom: 62%; animation-delay: -2.2s; }


/* FSZ EQ IRREGULAR RHYTHM V3 */

.brand-soundbar > i:nth-child(24n+1)  { --eq-duration: .73s; --eq-delay: -2.31s; --eq-mid: .34; }
.brand-soundbar > i:nth-child(24n+2)  { --eq-duration: 1.47s; --eq-delay: -.19s; --eq-mid: .81; }
.brand-soundbar > i:nth-child(24n+3)  { --eq-duration: .91s; --eq-delay: -1.73s; --eq-mid: .46; }
.brand-soundbar > i:nth-child(24n+4)  { --eq-duration: 1.82s; --eq-delay: -.84s; --eq-mid: .69; }
.brand-soundbar > i:nth-child(24n+5)  { --eq-duration: .64s; --eq-delay: -3.17s; --eq-mid: .27; }
.brand-soundbar > i:nth-child(24n+6)  { --eq-duration: 1.29s; --eq-delay: -1.11s; --eq-mid: .88; }
.brand-soundbar > i:nth-child(24n+7)  { --eq-duration: 2.03s; --eq-delay: -.37s; --eq-mid: .52; }
.brand-soundbar > i:nth-child(24n+8)  { --eq-duration: .86s; --eq-delay: -2.62s; --eq-mid: .73; }
.brand-soundbar > i:nth-child(24n+9)  { --eq-duration: 1.61s; --eq-delay: -1.48s; --eq-mid: .39; }
.brand-soundbar > i:nth-child(24n+10) { --eq-duration: .69s; --eq-delay: -.58s; --eq-mid: .92; }
.brand-soundbar > i:nth-child(24n+11) { --eq-duration: 1.16s; --eq-delay: -2.87s; --eq-mid: .43; }
.brand-soundbar > i:nth-child(24n+12) { --eq-duration: 1.94s; --eq-delay: -1.29s; --eq-mid: .76; }
.brand-soundbar > i:nth-child(24n+13) { --eq-duration: .79s; --eq-delay: -.08s; --eq-mid: .31; }
.brand-soundbar > i:nth-child(24n+14) { --eq-duration: 1.38s; --eq-delay: -2.14s; --eq-mid: .85; }
.brand-soundbar > i:nth-child(24n+15) { --eq-duration: .58s; --eq-delay: -1.02s; --eq-mid: .56; }
.brand-soundbar > i:nth-child(24n+16) { --eq-duration: 1.73s; --eq-delay: -3.41s; --eq-mid: .37; }
.brand-soundbar > i:nth-child(24n+17) { --eq-duration: 1.04s; --eq-delay: -.46s; --eq-mid: .79; }
.brand-soundbar > i:nth-child(24n+18) { --eq-duration: 2.17s; --eq-delay: -1.91s; --eq-mid: .48; }
.brand-soundbar > i:nth-child(24n+19) { --eq-duration: .67s; --eq-delay: -2.49s; --eq-mid: .95; }
.brand-soundbar > i:nth-child(24n+20) { --eq-duration: 1.52s; --eq-delay: -.71s; --eq-mid: .41; }
.brand-soundbar > i:nth-child(24n+21) { --eq-duration: .96s; --eq-delay: -3.03s; --eq-mid: .67; }
.brand-soundbar > i:nth-child(24n+22) { --eq-duration: 1.87s; --eq-delay: -1.36s; --eq-mid: .29; }
.brand-soundbar > i:nth-child(24n+23) { --eq-duration: .76s; --eq-delay: -.27s; --eq-mid: .83; }
.brand-soundbar > i:nth-child(24n)   { --eq-duration: 1.23s; --eq-delay: -2.76s; --eq-mid: .51; }

@keyframes brandEqRise {
  0% {
    transform: scaleY(var(--eq-low));
    opacity: 0.5;
  }

  52% {
    transform: scaleY(var(--eq-mid));
    opacity: 0.74;
  }

  100% {
    transform: scaleY(1);
    opacity: 0.9;
  }
}

@keyframes brandDotFade {
  0%, 100% {
    opacity: 0;
    transform: scale(0.35);
  }

  42% {
    opacity: 0.18;
  }

  58% {
    opacity: 0.9;
    transform: scale(1.2);
  }

  76% {
    opacity: 0.24;
  }
}

@media (max-width: 820px) {
  .brand-soundbar {
    height: 68%;
    gap: 2px;
  }

  .brand-soundbar > i {
    min-width: 1px;
  }

  .brand-sound-particles > i:nth-child(n+19) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-soundbar > i,
  .brand-sound-particles > i {
    animation: none;
  }

  .brand-soundbar > i {
    transform: scaleY(0.42);
    opacity: 0.62;
  }

  .brand-sound-particles {
    display: none;
  }
}

/* FSZ DOWNLOAD STAR V1 */
.download-star-feature {
  position: relative;
  width: clamp(720px, 62vw, 1100px);
  max-width: calc(100vw - 12vw);
  margin: 38px 0 34px;
  position: relative;
  left: -80px;
  isolation: isolate;
}

.download-star-feature img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 10px rgba(255, 46, 209, .72))
    drop-shadow(0 0 26px rgba(216, 47, 255, .52))
    drop-shadow(0 0 58px rgba(155, 50, 255, .34));
  animation: fszDownloadStarPulse 3.8s ease-in-out infinite;
}

.download-star-aura {
  position: absolute;
  z-index: 1;
  inset: 50% auto auto 50%;
  width: 145%;
  aspect-ratio: 1.8 / 1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 35, 211, .34) 0%, rgba(174, 47, 255, .18) 38%, transparent 72%);
  filter: blur(24px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: fszDownloadStarAura 3.8s ease-in-out infinite;
}

@keyframes fszDownloadStarPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(255,46,209,.62)) drop-shadow(0 0 26px rgba(216,47,255,.42)) drop-shadow(0 0 54px rgba(155,50,255,.28));
  }
  50% {
    transform: scale(1.035);
    filter: drop-shadow(0 0 15px rgba(255,46,209,.9)) drop-shadow(0 0 38px rgba(216,47,255,.66)) drop-shadow(0 0 76px rgba(155,50,255,.42));
  }
}

@keyframes fszDownloadStarAura {
  0%, 100% { opacity: .62; transform: translate(-50%, -50%) scale(.94); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

@media (max-width: 720px) {
  .download-star-feature {
    width: min(92vw, 720px);
    max-width: none;
    margin: 28px 0 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .download-star-feature img,
  .download-star-aura {
    animation: none;
  }
}


/* FSZ DOWNLOAD DUNKER V1 */
.download-dunker {
  position: absolute;
  z-index: 3;
  right: clamp(110px, 9vw, 190px);
  top: 50%;
  width: clamp(500px, 37vw, 760px);
  height: min(92%, 900px);
  transform: translate(60px, calc(-47% + 100px));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.download-dunker::before {
  content: "";
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(226, 63, 255, 0.24) 0%,
      rgba(146, 76, 255, 0.13) 34%,
      rgba(61, 207, 255, 0.05) 58%,
      transparent 74%
    );
  filter: blur(24px);
  opacity: 0.9;
  animation: downloadDunkerAura 4.8s ease-in-out infinite;
}

.download-dunker img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 24px rgba(222, 64, 255, 0.34))
    drop-shadow(0 0 54px rgba(125, 83, 255, 0.20));
  animation: downloadDunkerFloat 5.5s ease-in-out infinite;
}

@keyframes downloadDunkerFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes downloadDunkerAura {
  0%, 100% {
    transform: scale(0.94);
    opacity: 0.62;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.92;
  }
}

@media (max-width: 1100px) {
  .download-dunker {
    right: -2vw;
    width: min(48vw, 620px);
    height: 76%;
    transform: translateY(-43%);
  }
}

@media (max-width: 760px) {
  .download-dunker {
    position: relative;
    right: auto;
    top: auto;
    width: min(94vw, 560px);
    height: 560px;
    margin: 2rem auto 0;
    transform: none;
  }

  .download-dunker img {
    height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .download-dunker,
  .download-dunker img,
  .download-dunker::before {
    animation: none;
  }
}

/* FSZ GLOBAL SKATEBOARDER — RIGHT-SIDE TALENT ACCENT */
.global-skateboarder {
  position: absolute;
  width: clamp(280px, 24vw, 430px);
  right: 4.5vw;
  bottom: 190px;
  z-index: 4;
  pointer-events: none;
}

.global-skateboarder img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 24px rgba(193, 66, 255, 0.26));
}

@media (max-width: 900px) {
  .global-skateboarder {
    position: relative;
    width: min(64vw, 340px);
    right: auto;
    bottom: auto;
    margin: 36px 0 26px auto;
  }
}

/* FSZ GLOBAL BELIEF GUITARIST V1 */
.global-belief {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.global-belief-guitarist {
  position: absolute;
  z-index: 1;
  left: clamp(-105px, -4.5vw, -48px);
  top: 50%;
  height: calc(100% - 28px);
  width: auto;
  max-width: 43vw;
  object-fit: contain;
  object-position: left center;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  filter:
    drop-shadow(0 0 16px rgba(59, 234, 255, .14))
    drop-shadow(0 0 30px rgba(209, 77, 255, .12));
}

.global-belief > span,
.global-belief > h2,
.global-belief > p {
  position: relative;
  z-index: 2;
}

@media (max-width: 1180px) {
  .global-belief-guitarist {
    left: -100px;
    height: 90%;
    max-width: 42vw;
    opacity: .82;
  }
}

@media (max-width: 760px) {
  .global-belief-guitarist {
    left: 50%;
    top: 52%;
    height: 82%;
    max-width: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* FSZ GLOBAL BELIEF COMPOSITION SHIFT V1 */
@media (min-width: 1181px) {
  .global-belief-guitarist {
    left: -15px;
  }

  .global-belief > span,
  .global-belief > h2,
  .global-belief > p {
    transform: translateX(90px);
  }
}


/* FSZ FOOTER JUGGLER + ENLARGED BRAND V1 */
.site-footer {
  overflow: visible;
}

.footer-main {
  position: relative;
  min-height: 500px;
  overflow: visible;
  align-items: center;
}

.footer-brand {
  position: relative;
  z-index: 3;
  justify-self: start;
  align-self: center;
  width: clamp(430px, 31vw, 650px);
  margin: 0;
}

.footer-brand img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.footer-juggler {
  position: absolute;
  z-index: 2;
  left: clamp(310px, 23vw, 500px);
  top: 50%;
  width: clamp(270px, 21vw, 410px);
  height: calc(100% - 28px);
  transform: translateY(-50%);
  pointer-events: none;
}

.footer-juggler img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.footer-nav {
  position: relative;
  z-index: 4;
  margin-left: auto;
}

@media (max-width: 1100px) {
  .footer-main {
    min-height: 440px;
  }

  .footer-brand {
    width: clamp(330px, 42vw, 500px);
  }

  .footer-juggler {
    left: clamp(250px, 31vw, 380px);
    width: clamp(230px, 28vw, 330px);
    height: calc(100% - 24px);
  }
}

@media (max-width: 760px) {
  .footer-main {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    overflow: visible;
  }

  .footer-brand {
    width: min(88vw, 500px);
    align-self: flex-start;
  }

  .footer-juggler {
    position: relative;
    left: auto;
    top: auto;
    width: min(70vw, 340px);
    height: auto;
    aspect-ratio: 1006 / 1563;
    transform: none;
    align-self: flex-start;
  }

  .footer-nav {
    margin-left: 0;
  }
}


/* FSZ FOOTER NAV RIGHT ALIGN V1 */
@media (min-width: 761px) {
  .footer-nav {
    position: absolute;
    z-index: 4;
    right: 0;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    justify-content: flex-end;
    text-align: right;
  }
}


/* FSZ BREAKDANCER OUTLINE OVERLAY V1 */
.talent-trio-image-outline {
  z-index: 8;
  pointer-events: none;
  transform: translate(10px, 8px);
  opacity: 0.9;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 14px rgba(104, 111, 255, 0.28));
}

@media (max-width: 760px) {
  .talent-trio-image-outline {
    transform: translate(5px, 4px);
  }
}


/* FSZ BREAKDANCER OUTLINE ONLY TEST V1 */
.talent-trio-image-bottom,
.talent-trio-image-top {
  opacity: 0 !important;
}

.talent-trio-image-outline {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.48))
    drop-shadow(0 0 16px rgba(105, 118, 255, 0.24));
}

/* Hide realistic Trio echoes rendered by the existing pseudo layers. */
.talent-trio-image-wrap::before,
.talent-trio-image-wrap::after {
  opacity: 0 !important;
}


/* FSZ PLATFORM BMX VISUAL V2 — FLOATING CENTER ART */
.proof-transition {
  position: relative;
  overflow: visible;
}

.proof-bmx-visual {
  position: absolute;
  top: 50%;
  left: calc(61% + 35px);
  width: clamp(275px, 25vw, 450px);
  height: min(72%, 650px);
  transform: translate(-50%, calc(-50% - 120px));
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.proof-bmx-visual::before {
  content: "";
  position: absolute;
  inset: 12% -24%;
  background:
    radial-gradient(circle at 48% 42%, rgba(54, 220, 255, .16), transparent 42%),
    radial-gradient(circle at 58% 60%, rgba(143, 78, 255, .14), transparent 48%);
  filter: blur(28px);
  opacity: .85;
  pointer-events: none;
}

.proof-bmx-visual img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.22))
    drop-shadow(0 0 24px rgba(70,159,255,.14));
}

@media (max-width: 1100px) {
  .proof-bmx-visual {
    left: 60%;
    width: clamp(190px, 20vw, 280px);
    height: min(64%, 540px);
  }
}

@media (max-width: 820px) {
  .proof-bmx-visual {
    position: relative;
    top: auto;
    left: auto;
    width: min(70vw, 320px);
    height: min(112vw, 540px);
    margin: 40px auto;
    transform: none;
    justify-self: center;
  }
}
\n\n\n

/* FSZ EXPERIENCE — SIMPLE 40 / 30 / 30 */
@media (min-width: 821px) {
  #experience .experience-heading {
    display: grid;
    grid-template-columns: 40% 30% 30%;
    gap: 0;
    column-gap: 0;
    row-gap: 0;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    overflow: visible;
  }

  #experience .experience-heading > div:first-child {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  #experience .experience-model-walk {
    grid-column: 2;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: 520px;
    max-width: none;
    max-height: 520px;
    margin: 0;
    padding: 0;
    transform: none;
    justify-self: stretch;
    align-self: center;
    overflow: visible;
    pointer-events: none;
    z-index: 3;
  }

  #experience .experience-model-walk::before {
    content: "";
    position: absolute;
    inset: 10% 12%;
    background:
      radial-gradient(circle at 48% 42%, rgba(54, 220, 255, .14), transparent 42%),
      radial-gradient(circle at 58% 60%, rgba(143, 78, 255, .14), transparent 48%);
    filter: blur(28px);
    opacity: .82;
    pointer-events: none;
  }

  #experience .experience-model-walk img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter:
      drop-shadow(0 0 8px rgba(255,255,255,.22))
      drop-shadow(0 0 24px rgba(70,159,255,.14));
  }

  #experience .experience-heading > p {
    grid-column: 3;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    justify-self: stretch;
    align-self: center;
  }
}

@media (max-width: 820px) {
  #experience .experience-heading {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  #experience .experience-heading > div:first-child,
  #experience .experience-model-walk,
  #experience .experience-heading > p {
    grid-column: 1;
  }

  #experience .experience-model-walk {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(58vw, 240px);
    height: min(108vw, 500px);
    max-width: none;
    max-height: none;
    margin: 18px auto;
    padding: 0;
    transform: none;
    justify-self: center;
  }

  #experience .experience-model-walk img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* FSZ EXPERIENCE — FINAL COMPACT MODEL */
@media (min-width: 821px) {
  #experience .experience-model-walk {
    grid-column: 2;
    position: relative;
    width: 220px;
    height: auto;
    max-width: 220px;
    max-height: none;
    margin: 0;
    padding: 0;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    justify-self: center;
    align-self: center;
    overflow: visible;
  }

  #experience .experience-model-walk img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
  }
}

/* FSZ EXPERIENCE — PARAGRAPH + MODEL ALIGNMENT */
@media (min-width: 821px) {
  #experience > .experience-heading {
    grid-template-columns: 40% 30% 30%;
    gap: 0;
    column-gap: 0;
    padding-left: 0;
    padding-right: 0;
  }

  #experience > .experience-heading > .experience-model-walk {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    margin: 0;
  }

  #experience > .experience-heading > p {
    grid-column: 3;
    grid-row: 1;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    justify-self: stretch;
    align-self: center;
    white-space: normal;
  }
}

/* FSZ EXPERIENCE MODEL — 30% LARGER + 40PX RIGHT */
@media (min-width: 821px) {
  #experience > .experience-heading > .experience-model-walk {
    width: 286px;
    max-width: 286px;
    height: auto;
    transform: translateX(40px);
  }

  #experience > .experience-heading > .experience-model-walk img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
}

/* FSZ EXPERIENCE — HEIGHT REDUCTION */
#experience.platform-experience {
  padding-top: 30px;
  padding-bottom: 120px;
}

/* FSZ BRAND TRANSITION — EXACT 210PX */
.brand-transition {
  height: 210px;
  min-height: 210px;
  max-height: 210px;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

@media (max-width: 820px) {
  .brand-transition {
    height: 210px;
    min-height: 210px;
    max-height: 210px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* FSZ BRAND WORDMARK — DOWN 40PX */
.brand-transition > .brand-transition-logo {
  transform: translateY(40px);
}

/* FSZ EXPERIENCE MODEL — BLUE PURPLE BURST */
@media (min-width: 821px) {
  #experience > .experience-heading > .experience-model-walk::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 8% -55% 4% -55%;
    pointer-events: none;
    opacity: 1;
    background:
      radial-gradient(
        ellipse at 46% 48%,
        rgba(44, 179, 255, .42) 0%,
        rgba(49, 126, 255, .30) 22%,
        rgba(73, 81, 255, .19) 40%,
        transparent 64%
      ),
      radial-gradient(
        ellipse at 58% 52%,
        rgba(164, 57, 255, .34) 0%,
        rgba(127, 55, 255, .23) 31%,
        rgba(88, 39, 190, .12) 52%,
        transparent 72%
      );
    filter: blur(30px);
    transform: scale(1.08);
  }

  #experience > .experience-heading > .experience-model-walk img {
    position: relative;
    z-index: 1;
  }
}

/* FSZ EXPERIENCE MODEL — APPROVED BURST MOBILE */
@media (max-width: 820px) {
  #experience > .experience-heading > .experience-model-walk::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 8% -55% 4% -55%;
    pointer-events: none;
    opacity: 1;
    background:
      radial-gradient(
        ellipse at 46% 48%,
        rgba(44, 179, 255, .42) 0%,
        rgba(49, 126, 255, .30) 22%,
        rgba(73, 81, 255, .19) 40%,
        transparent 64%
      ),
      radial-gradient(
        ellipse at 58% 52%,
        rgba(164, 57, 255, .34) 0%,
        rgba(127, 55, 255, .23) 31%,
        rgba(88, 39, 190, .12) 52%,
        transparent 72%
      );
    filter: blur(30px);
    transform: scale(1.08);
  }

  #experience > .experience-heading > .experience-model-walk img {
    position: relative;
    z-index: 1;
  }
}



/* FSZ GLOBAL TALENT ART — APPROVED RESPONSIVE GLOWS */

/* Guitarist — pink / violet atmospheric burst.
   Uses the existing global-belief container because the guitarist itself is an IMG. */
.global-belief::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: clamp(-90px, 2vw, 40px);
  top: 50%;
  width: clamp(430px, 38vw, 680px);
  height: min(88%, 720px);
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .82;
  background:
    radial-gradient(
      ellipse at 43% 48%,
      rgba(255, 61, 174, .24) 0%,
      rgba(220, 55, 255, .18) 25%,
      rgba(145, 60, 255, .11) 45%,
      transparent 70%
    ),
    radial-gradient(
      ellipse at 52% 53%,
      rgba(124, 69, 255, .17) 0%,
      rgba(96, 50, 210, .10) 42%,
      transparent 72%
    );
  filter: blur(32px);
}

.global-belief-guitarist {
  z-index: 1;
}

/* Skateboarder — green / teal atmospheric burst. */
.global-skateboarder::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -24% -30% -28% -30%;
  pointer-events: none;
  opacity: .82;
  background:
    radial-gradient(
      ellipse at 52% 48%,
      rgba(54, 255, 174, .25) 0%,
      rgba(32, 220, 173, .18) 25%,
      rgba(28, 171, 182, .11) 46%,
      transparent 70%
    ),
    radial-gradient(
      ellipse at 56% 54%,
      rgba(42, 209, 255, .15) 0%,
      rgba(36, 142, 190, .09) 42%,
      transparent 72%
    );
  filter: blur(30px);
  transform: scale(1.04);
}

.global-skateboarder img {
  position: relative;
  z-index: 1;
}

/* Mobile — retain both glows while tightening their spread. */
@media (max-width: 760px) {
  .global-belief::before {
    left: -150px;
    top: 52%;
    width: 470px;
    height: 76%;
    opacity: .70;
    filter: blur(27px);
  }

  .global-skateboarder::before {
    inset: -18% -24% -22% -24%;
    opacity: .74;
    filter: blur(26px);
    transform: scale(1.02);
  }
}
/* FSZ GUITARIST — TABLET RIGHT SHIFT ONLY */
@media (min-width: 761px) and (max-width: 1100px) {
  .global-belief-guitarist {
    transform: translate(140px, -50%);
  }
}


/* FSZ TALENT UNIVERSE — ACADEMY WINNER FINAL */
@media (min-width: 821px) {
  #discover .talent-intro {
    display: grid;
    grid-template-columns: 40% 20% 40%;
    column-gap: 0;
    align-items: center;
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  #discover .talent-intro > div:first-child {
    grid-column: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  #discover .talent-academy-winner {
    grid-column: 2;
    position: relative;
    width: 100%;
    height: clamp(390px, 34vw, 610px);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
  }

  #discover .talent-academy-winner::before {
    content: "";
    position: absolute;
    width: 130%;
    height: 82%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(circle at 44% 44%, rgba(71, 157, 255, .13), transparent 48%),
      radial-gradient(circle at 58% 58%, rgba(151, 75, 255, .12), transparent 52%);
    filter: blur(28px);
    pointer-events: none;
  }

  #discover .talent-academy-winner img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 1;
    filter: drop-shadow(0 0 18px rgba(95, 141, 255, .12));
  }

  #discover .talent-intro > p {
    grid-column: 3;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 820px) {
  #discover .talent-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    width: 100%;
  }

  #discover .talent-intro > div:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  #discover .talent-academy-winner {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    width: min(72vw, 320px);
    height: min(108vw, 480px);
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    pointer-events: none;
  }

  #discover .talent-academy-winner::before {
    content: "";
    position: absolute;
    width: 140%;
    height: 82%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(circle at 44% 44%, rgba(71, 157, 255, .12), transparent 48%),
      radial-gradient(circle at 58% 58%, rgba(151, 75, 255, .11), transparent 52%);
    filter: blur(24px);
    pointer-events: none;
  }

  #discover .talent-academy-winner img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 1;
  }

  #discover .talent-intro > p {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    max-width: none;
    margin: 0;
  }
}


/* FSZ TALENT UNIVERSE — TOP HEIGHT + AWARD OVERLAP */
@media (min-width: 821px) {
  #discover.talent-universe {
    position: relative;
    overflow: visible;
    margin-top: -260px;
    z-index: 3;
  }

  #discover .talent-intro {
    position: relative;
    overflow: visible;
  }

  #discover .talent-academy-winner {
    overflow: visible;
  }
}


/* FSZ FINAL LEGAL FOOTER ROW */
.site-footer {
  padding-bottom: 0;
}

.footer-legal {
  box-sizing: border-box;
  width: 100vw;
  margin-top: 28px;
  margin-left: calc(50% - 50vw);
  padding: 20px max(24px, calc((100vw - var(--max)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: #000;
  border-top: 1px solid #168cff;
  color: #79cfff;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.footer-legal-links a {
  color: #79cfff;
  text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: #b7efff;
  text-shadow: 0 0 12px rgba(73, 203, 255, .32);
}

.footer-copyright {
  color: #679fc8;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
  }

  .footer-legal-links {
    gap: 10px 18px;
  }

  .footer-copyright {
    white-space: normal;
    line-height: 1.5;
  }
}

/* FSZ BASIC INFORMATION PAGES */
.legal-page {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 18% 5%, rgba(38,122,255,.10), transparent 30%),
    #020713;
  color: #f5f8ff;
  font-family: Arial, Helvetica, sans-serif;
}

.legal-page-shell {
  width: min(calc(100% - 48px), 1080px);
  margin: 0 auto;
  padding: 34px 0 80px;
}

.legal-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(66,161,255,.25);
}

.legal-page-logo {
  width: 74px;
  height: auto;
}

.legal-page-home {
  color: #79cfff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

.legal-page-content {
  max-width: 850px;
  padding: 72px 0 40px;
}

.legal-page-kicker {
  display: block;
  margin-bottom: 18px;
  color: #55dfff;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.legal-page-content h1 {
  margin: 0 0 18px;
  font-size: clamp(3rem,7vw,6.5rem);
  line-height: .92;
  letter-spacing: -.055em;
}

.legal-page-updated {
  margin: 0 0 46px;
  color: #6f8dab;
  font-size: .78rem;
}

.legal-page-content h2 {
  margin: 38px 0 12px;
  font-size: 1.15rem;
}

.legal-page-content p,
.legal-page-content li {
  color: #91a9c4;
  font-size: .98rem;
  line-height: 1.8;
}

.legal-page-content a {
  color: #79cfff;
}

.legal-page-footer {
  padding-top: 24px;
  border-top: 1px solid rgba(66,161,255,.18);
  color: #587795;
  font-size: .7rem;
}

@media (max-width: 620px) {
  .legal-page-shell {
    width: calc(100% - 32px);
    padding-top: 22px;
  }

  .legal-page-content {
    padding-top: 52px;
  }
}


/* FSZ OFFICIAL APP STORE BADGE */
.store-badge-apple-official {
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.store-badge-apple-official .official-app-store-badge {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* FSZ CINEMATIC INDOOR — COVER TEST */
.cinematic-indoor .cinematic-media {
  inset: 0;
  transform:
    translate3d(
      0,
      var(--parallax-y, 0px),
      0
    );
}

.cinematic-indoor .cinematic-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* FSZ CINEMATIC BACKLIGHT — COVER TEST */
.cinematic-backlight .cinematic-media {
  inset: 0;
  transform:
    translate3d(
      0,
      var(--parallax-y, 0px),
      0
    );
}

.cinematic-backlight .cinematic-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* FSZ WORDMARK LETTER GLOW V4 */
.brand-transition-logo-glow {
  z-index: 4 !important;
  pointer-events: none;
  opacity: .78;
  filter:
    brightness(0)
    saturate(100%)
    invert(28%)
    sepia(96%)
    saturate(7472%)
    hue-rotate(300deg)
    brightness(116%)
    contrast(113%)
    blur(7px)
    drop-shadow(0 0 8px rgba(255, 38, 190, .95))
    drop-shadow(0 0 18px rgba(255, 38, 190, .72))
    drop-shadow(0 0 30px rgba(210, 40, 255, .46));
}

.brand-transition > .brand-transition-logo-glow {
  transform: translateY(40px) scale(1.015);
}

.brand-transition-aura {
  display: none;
}



/* FSZ WORDMARK PIXEL REGISTRATION V4.3 */

/*
  Both images occupy the identical grid cell.
  Glow stays in normal grid geometry.
  Front logo is overlaid onto that exact geometry.
*/

.brand-transition > .brand-transition-logo-glow,
.brand-transition > .brand-transition-logo:not(.brand-transition-logo-glow) {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  width: min(60rem, 84vw);
  max-height: 15rem;
  margin: 0;
}

.brand-transition > .brand-transition-logo-glow {
  position: relative;
  z-index: 4 !important;
  transform: translateY(40px) scale(1.015);
}

.brand-transition > .brand-transition-logo:not(.brand-transition-logo-glow) {
  position: relative;
  z-index: 5;
  transform: translateY(40px);
}



/* FSZ WORDMARK MULTI-LAYER GLOW V5 */

/* All three glow silhouettes share the approved V4.3 geometry. */
.brand-transition > .brand-transition-logo-glow-purple,
.brand-transition > .brand-transition-logo-glow-white {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  position: relative;
  width: min(60rem, 84vw);
  max-height: 15rem;
  margin: 0;
  pointer-events: none;
}

/* Deep outer purple pulse. */
.brand-transition > .brand-transition-logo-glow-purple {
  z-index: 3;
  opacity: .38;
  transform: translateY(40px) scale(1.025);
  filter:
    brightness(0)
    saturate(100%)
    invert(23%)
    sepia(93%)
    saturate(6128%)
    hue-rotate(265deg)
    brightness(112%)
    contrast(119%)
    blur(12px)
    drop-shadow(0 0 15px rgba(139, 55, 255, .76))
    drop-shadow(0 0 30px rgba(116, 39, 255, .58))
    drop-shadow(0 0 46px rgba(90, 32, 255, .32));
  animation: fszPurpleGlowPulse 4.6s ease-in-out infinite;
}

/* Tight white/pale-pink energy immediately beneath red artwork. */
.brand-transition > .brand-transition-logo-glow-white {
  z-index: 4;
  opacity: .24;
  transform: translateY(40px) scale(1.004);
  filter:
    brightness(0)
    invert(1)
    blur(3px)
    drop-shadow(0 0 4px rgba(255, 255, 255, .92))
    drop-shadow(0 0 9px rgba(255, 222, 250, .78))
    drop-shadow(0 0 15px rgba(255, 133, 226, .48));
  animation: fszWhiteGlowPulse 3.7s ease-in-out infinite;
}

/* Keep the approved magenta layer above purple and below white/front art. */
.brand-transition > .brand-transition-logo-glow {
  z-index: 3 !important;
}

/* Front red wordmark always remains highest and motionless. */
.brand-transition > .brand-transition-logo:not(.brand-transition-logo-glow):not(.brand-transition-logo-glow-purple):not(.brand-transition-logo-glow-white) {
  z-index: 6;
}

@keyframes fszPurpleGlowPulse {
  0%, 100% {
    opacity: .24;
    filter:
      brightness(0)
      saturate(100%)
      invert(23%)
      sepia(93%)
      saturate(6128%)
      hue-rotate(265deg)
      brightness(112%)
      contrast(119%)
      blur(12px)
      drop-shadow(0 0 12px rgba(139, 55, 255, .58))
      drop-shadow(0 0 24px rgba(116, 39, 255, .42))
      drop-shadow(0 0 38px rgba(90, 32, 255, .24));
  }

  50% {
    opacity: .52;
    filter:
      brightness(0)
      saturate(100%)
      invert(23%)
      sepia(93%)
      saturate(6128%)
      hue-rotate(265deg)
      brightness(124%)
      contrast(119%)
      blur(13px)
      drop-shadow(0 0 18px rgba(154, 72, 255, .88))
      drop-shadow(0 0 36px rgba(125, 47, 255, .68))
      drop-shadow(0 0 54px rgba(100, 39, 255, .40));
  }
}

@keyframes fszWhiteGlowPulse {
  0%, 100% {
    opacity: .12;
  }

  48% {
    opacity: .34;
  }

  62% {
    opacity: .27;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-transition > .brand-transition-logo-glow-purple,
  .brand-transition > .brand-transition-logo-glow-white {
    animation: none;
  }

  .brand-transition > .brand-transition-logo-glow-purple {
    opacity: .34;
  }

  .brand-transition > .brand-transition-logo-glow-white {
    opacity: .20;
  }
}