/* MYTHIX V7 — Cinematic Command homepage */
body.myx-home {
  --mx7-navy: #020817;
  --mx7-panel: rgba(5, 22, 51, .86);
  --mx7-cyan: #24d8ff;
  --mx7-blue: #1878ff;
  --mx7-violet: #8257ff;
  --mx7-lime: #b7ff31;
  --mx7-line: rgba(67, 177, 255, .35);
}

body.myx-home .hero.cinematic-home {
  position: relative;
  min-height: min(930px, calc(100svh - 78px));
  overflow: hidden;
  isolation: isolate;
  color: #f7fbff;
  background: var(--mx7-navy) !important;
  border-bottom: 1px solid rgba(36, 216, 255, .34);
}

body.myx-home .hero.cinematic-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 8, 23, .98) 0%, rgba(2, 8, 23, .91) 26%, rgba(2, 8, 23, .54) 51%, rgba(2, 8, 23, .08) 76%),
    linear-gradient(180deg, rgba(2, 8, 23, .12) 0%, rgba(2, 8, 23, .03) 48%, rgba(2, 8, 23, .95) 93%);
}

body.myx-home .hero.cinematic-home::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 6;
  height: 2px;
  background: linear-gradient(90deg, transparent 4%, var(--mx7-cyan) 28%, var(--mx7-violet) 67%, transparent 96%);
  box-shadow: 0 0 28px rgba(36, 216, 255, .72);
}

body.myx-home .cinematic-hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/assets/mythix-command-hero.webp") 50% 50% / cover no-repeat;
  transform: scale(1.018);
  animation: mx7-cinematic-drift 18s ease-in-out infinite alternate;
  will-change: transform;
}

body.myx-home .hero.cinematic-home .hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .12;
  background-image:
    linear-gradient(rgba(36, 216, 255, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 216, 255, .2) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 76%, transparent 100%);
  animation: mx7-grid-shift 16s linear infinite;
}

body.myx-home .hero.cinematic-home .hero-glow {
  position: absolute;
  inset: 7% 28% auto auto;
  z-index: 1;
  width: 34vw;
  height: 34vw;
  border-radius: 50%;
  opacity: .52;
  filter: blur(70px);
  background: radial-gradient(circle, rgba(36, 216, 255, .34), rgba(130, 87, 255, .19) 42%, transparent 70%);
  animation: mx7-glow-pulse 7s ease-in-out infinite alternate;
}

body.myx-home .hero.cinematic-home .hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  width: min(1500px, calc(100% - 120px));
  min-height: inherit;
  padding: clamp(90px, 10vh, 132px) 0 42px;
}

body.myx-home .cinematic-hero-copy {
  position: relative;
  width: min(640px, 49%);
  padding-left: 6px;
}

body.myx-home .cinematic-hero-copy .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: #d7e8f8;
  font-size: .72rem;
  letter-spacing: .2em;
}

body.myx-home .cinematic-hero-copy .eyebrow i {
  display: block;
  width: 54px;
  height: 6px;
  background:
    linear-gradient(135deg, transparent 0 12%, var(--mx7-cyan) 13% 28%, transparent 29% 36%, var(--mx7-violet) 37% 56%, transparent 57% 64%, var(--mx7-lime) 65% 100%);
  transform: skewX(-28deg);
}

body.myx-home .hero.cinematic-home h1 {
  max-width: none;
  margin: 0;
  color: #f8fbff;
  font-family: Sora, Inter, Arial, sans-serif;
  font-size: clamp(4.9rem, 7.4vw, 8.1rem);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.075em;
  text-transform: uppercase;
  text-shadow: 0 9px 36px rgba(0, 0, 0, .46);
}

body.myx-home .hero.cinematic-home h1 span {
  display: inline-block;
  margin-top: .13em;
  color: var(--mx7-lime);
  letter-spacing: -.085em;
  text-shadow: 0 0 32px rgba(183, 255, 49, .15);
}

body.myx-home .hero.cinematic-home h1 span::after {
  display: block;
  width: 82%;
  height: 3px;
  margin-top: .12em;
  background: linear-gradient(90deg, var(--mx7-lime), var(--mx7-cyan), transparent);
  box-shadow: 0 0 18px rgba(36, 216, 255, .32);
}

body.myx-home .cinematic-hero-copy > p {
  max-width: 620px;
  margin: 24px 0 0;
  color: #b9cbe0;
  font-size: clamp(.95rem, 1.28vw, 1.15rem);
  line-height: 1.65;
}

body.myx-home .cinematic-hero-copy .hero-actions {
  margin-top: 28px;
}

body.myx-home .cinematic-hero-copy .button {
  position: relative;
  min-width: 190px;
  padding-inline: 24px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

body.myx-home .cinematic-hero-copy .button-ghost {
  color: #f5f9ff;
  background: rgba(3, 13, 31, .64);
  border-color: rgba(36, 216, 255, .62);
  box-shadow: inset 0 0 22px rgba(36, 216, 255, .05), 0 0 22px rgba(36, 216, 255, .07);
}

body.myx-home .button-signal {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--mx7-cyan);
  box-shadow: 0 0 13px var(--mx7-cyan);
  animation: mx7-signal 1.45s ease-in-out infinite;
}

body.myx-home .cinematic-index-rail {
  position: absolute;
  left: max(22px, calc((100vw - 1660px) / 2));
  top: 44%;
  z-index: 4;
  display: grid;
  gap: 14px;
  color: var(--mx7-lime);
}

body.myx-home .cinematic-index-rail strong {
  font: 800 .7rem/1 Sora, sans-serif;
  letter-spacing: .12em;
}

body.myx-home .cinematic-index-rail i {
  display: block;
  width: 17px;
  height: 2px;
  background: rgba(36, 216, 255, .45);
}

body.myx-home .cinematic-index-rail i:first-of-type {
  width: 28px;
  background: var(--mx7-lime);
}

body.myx-home .cinematic-side-rail {
  position: absolute;
  right: 19px;
  top: 43%;
  z-index: 4;
  color: #d5e5f7;
  font: 700 .62rem/1 Sora, sans-serif;
  letter-spacing: .28em;
  writing-mode: vertical-rl;
}

body.myx-home .cinematic-side-rail::after {
  content: "";
  display: block;
  width: 1px;
  height: 68px;
  margin: 18px auto 0;
  background: linear-gradient(var(--mx7-lime), transparent);
}

body.myx-home .hero-command-deck {
  display: grid;
  grid-template-columns: .78fr 1.28fr 1.18fr 1.12fr;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin-top: 48px;
}

body.myx-home .command-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 184px;
  padding: 17px 18px 15px;
  overflow: hidden;
  color: #f6fbff;
  text-decoration: none;
  border: 1px solid var(--mx7-line);
  background:
    linear-gradient(145deg, rgba(17, 57, 106, .72), rgba(3, 15, 38, .93) 62%),
    var(--mx7-panel);
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 18px 45px rgba(0, 3, 17, .38);
  backdrop-filter: blur(16px);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

body.myx-home .command-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, var(--mx7-cyan), transparent);
  box-shadow: 0 0 14px rgba(36, 216, 255, .58);
}

body.myx-home a.command-card:hover {
  color: #fff;
  transform: translateY(-7px);
  border-color: rgba(36, 216, 255, .74);
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 26px 58px rgba(0, 10, 38, .58), 0 0 25px rgba(36, 216, 255, .1);
}

body.myx-home .command-card small,
body.myx-home .command-card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #90b3d7;
  font: 700 .62rem/1.2 Sora, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.myx-home .command-card-label i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #ff3c70;
  box-shadow: 0 0 12px #ff3c70;
}

body.myx-home .command-card-label em {
  color: var(--mx7-lime);
  font: inherit;
  letter-spacing: .04em;
}

body.myx-home .command-network {
  justify-content: flex-end;
  background:
    radial-gradient(circle at 20% 12%, rgba(36, 216, 255, .25), transparent 32%),
    linear-gradient(145deg, rgba(15, 51, 98, .82), rgba(3, 14, 36, .95));
}

body.myx-home .command-network .command-icon {
  position: absolute;
  top: 14px;
  left: 16px;
  color: var(--mx7-cyan);
  font-size: 2.1rem;
  line-height: 1;
  text-shadow: 0 0 18px rgba(36, 216, 255, .74);
}

body.myx-home .command-network strong {
  margin-top: 7px;
  color: #fff;
  font: 900 clamp(1.6rem, 2.4vw, 2.65rem)/1 Sora, sans-serif;
  letter-spacing: -.06em;
}

body.myx-home .command-network p,
body.myx-home .command-event p,
body.myx-home .command-intel p,
body.myx-home .command-rankings p {
  margin: 6px 0 0;
  color: #97b2cf;
  font-size: .72rem;
  line-height: 1.38;
}

body.myx-home .command-event-body {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin-top: 14px;
}

body.myx-home .command-event-body img,
body.myx-home .command-event-mark {
  width: 94px;
  height: 70px;
  object-fit: cover;
  border: 1px solid rgba(36, 216, 255, .3);
  background: linear-gradient(145deg, #103769, #07132f);
  clip-path: polygon(0 0, 88% 0, 100% 18%, 100% 100%, 12% 100%, 0 84%);
}

body.myx-home .command-event-mark {
  display: grid;
  place-items: center;
  color: var(--mx7-lime);
  font: 900 1.35rem/1 Sora, sans-serif;
  letter-spacing: -.05em;
}

body.myx-home .command-event-body strong,
body.myx-home .command-intel > strong {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font: 800 .9rem/1.3 Sora, sans-serif;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.myx-home .command-event-body em,
body.myx-home .command-intel > em {
  display: block;
  margin-top: 5px;
  color: var(--mx7-lime);
  font: 700 .64rem/1.2 Inter, sans-serif;
  font-style: normal;
}

body.myx-home .command-link {
  margin-top: auto;
  padding-top: 10px;
  color: #bbd6ef;
  font: 700 .68rem/1.2 Sora, sans-serif;
  border-top: 1px solid rgba(67, 177, 255, .16);
}

body.myx-home .command-intel {
  background:
    radial-gradient(circle at 92% 12%, rgba(130, 87, 255, .23), transparent 30%),
    linear-gradient(145deg, rgba(13, 47, 96, .82), rgba(3, 14, 36, .95));
}

body.myx-home .command-intel > strong {
  margin-top: 16px;
  font-size: 1rem;
}

body.myx-home .command-intel > p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.myx-home .command-rankings {
  gap: 0;
}

body.myx-home .command-rank-row {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 0 7px;
  border-bottom: 1px solid rgba(67, 177, 255, .15);
}

body.myx-home .command-rank-row b {
  color: var(--mx7-lime);
  font: 800 .7rem/1 Sora, sans-serif;
}

body.myx-home .command-rank-row strong {
  overflow: hidden;
  color: #e8f4ff;
  font: 700 .68rem/1.2 Sora, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.myx-home .command-rank-row em {
  color: #9cb9d6;
  font: 700 .62rem/1 Sora, sans-serif;
  font-style: normal;
}

body.myx-home .partner-showcase {
  position: relative;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(8, 30, 64, .96), rgba(4, 16, 38, .98)),
    #041026;
  border-color: rgba(36, 216, 255, .18);
}

@keyframes mx7-cinematic-drift {
  from { transform: scale(1.018) translate3d(0, 0, 0); }
  to { transform: scale(1.07) translate3d(-.8%, -.45%, 0); }
}

@keyframes mx7-grid-shift {
  to { background-position: 0 80px, 80px 0; }
}

@keyframes mx7-glow-pulse {
  from { opacity: .34; transform: scale(.92); }
  to { opacity: .62; transform: scale(1.08); }
}

@keyframes mx7-signal {
  0%, 100% { opacity: .45; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

@media (min-width: 1800px) {
  body.myx-home .hero.cinematic-home .hero-inner {
    width: min(1660px, calc(100% - 170px));
  }

  body.myx-home .cinematic-hero-copy {
    width: min(760px, 48%);
  }

  body.myx-home .hero.cinematic-home h1 {
    font-size: clamp(6.6rem, 7vw, 9.2rem);
  }

  body.myx-home .hero-command-deck {
    margin-top: 62px;
  }
}

@media (max-width: 1180px) {
  body.myx-home .hero.cinematic-home .hero-inner {
    width: min(100% - 72px, 1400px);
  }

  body.myx-home .cinematic-hero-copy {
    width: min(610px, 58%);
  }

  body.myx-home .hero-command-deck {
    grid-template-columns: .8fr 1.2fr 1.1fr;
  }

  body.myx-home .command-rankings {
    display: none;
  }
}

@media (max-width: 820px) {
  body.myx-home .hero.cinematic-home {
    min-height: auto;
  }

  body.myx-home .cinematic-hero-art {
    height: 670px;
    background-position: 67% center;
    animation-duration: 24s;
  }

  body.myx-home .hero.cinematic-home::before {
    background:
      linear-gradient(90deg, rgba(2, 8, 23, .94), rgba(2, 8, 23, .48) 76%, rgba(2, 8, 23, .2)),
      linear-gradient(180deg, rgba(2, 8, 23, .18), rgba(2, 8, 23, .38) 40%, rgba(2, 8, 23, 1) 72%);
  }

  body.myx-home .hero.cinematic-home .hero-inner {
    width: min(100% - 34px, 760px);
    min-height: 0;
    padding: 82px 0 34px;
  }

  body.myx-home .cinematic-hero-copy {
    width: min(550px, 86%);
  }

  body.myx-home .hero.cinematic-home h1 {
    font-size: clamp(4rem, 13vw, 6.1rem);
  }

  body.myx-home .hero-command-deck {
    grid-template-columns: 1fr 1fr;
    margin-top: 76px;
  }

  body.myx-home .command-rankings {
    display: flex;
  }

  body.myx-home .cinematic-index-rail,
  body.myx-home .cinematic-side-rail {
    display: none;
  }
}

@media (max-width: 560px) {
  body.myx-home .cinematic-hero-art {
    height: 620px;
    background-position: 64% center;
    opacity: .86;
  }

  body.myx-home .hero.cinematic-home::before {
    background:
      linear-gradient(90deg, rgba(2, 8, 23, .92), rgba(2, 8, 23, .46) 100%),
      linear-gradient(180deg, rgba(2, 8, 23, .1), rgba(2, 8, 23, .45) 42%, rgba(2, 8, 23, 1) 68%);
  }

  body.myx-home .hero.cinematic-home .hero-inner {
    width: min(100% - 28px, 520px);
    padding-top: 70px;
  }

  body.myx-home .cinematic-hero-copy {
    width: 100%;
  }

  body.myx-home .cinematic-hero-copy .eyebrow {
    font-size: .6rem;
    letter-spacing: .14em;
  }

  body.myx-home .hero.cinematic-home h1 {
    font-size: clamp(3.55rem, 18vw, 5.15rem);
  }

  body.myx-home .cinematic-hero-copy > p {
    max-width: 94%;
    margin-top: 20px;
    font-size: .9rem;
  }

  body.myx-home .cinematic-hero-copy > p br {
    display: none;
  }

  body.myx-home .cinematic-hero-copy .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 260px;
  }

  body.myx-home .cinematic-hero-copy .button {
    width: 100%;
    min-width: 0;
  }

  body.myx-home .hero-command-deck {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 70px;
  }

  body.myx-home .command-card {
    min-height: 150px;
  }

  body.myx-home .command-network {
    min-height: 126px;
  }

  body.myx-home .command-rankings {
    min-height: 186px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.myx-home .cinematic-hero-art,
  body.myx-home .hero.cinematic-home .hero-grid,
  body.myx-home .hero.cinematic-home .hero-glow,
  body.myx-home .button-signal {
    animation: none !important;
  }

  body.myx-home a.command-card {
    transition: none;
  }
}