/* ========== DMEX Media Business Hub ==========
 * Brand SSOT: Navy #19233F / Primary #6471F6 / Cyan #98FFFF
 * Not a Product Detail clone — infrastructure + ops + production hub
 */

.md-page {
  --md-navy: #19233F;
  --md-primary: #6471F6;
  --md-cyan: #98FFFF;
  --md-muted: #A7B0C8;
  --md-body: #C7D0E8;
  --md-line: rgba(255, 255, 255, 0.12);
  --md-soft: #F4F6FB;
  --md-ink: #1A2238;
  color: #fff;
  background: var(--md-navy);
}

.md-page .v2-section {
  padding: 8.8rem 0;
  background: transparent;
  color: inherit;
}

.md-page .v2-lead,
.md-page .md-lead {
  color: var(--md-body);
}

.md-page .v2-kicker {
  color: var(--md-cyan);
}

.md-page .v2-title {
  color: #fff;
  word-break: keep-all;
}

.md-lead {
  margin-top: 1.6rem;
  max-width: 64rem;
  color: var(--md-body);
  word-break: keep-all;
}

.md-page .md-section--soft {
  background: #121A31;
}

.md-section__cta {
  margin-top: 3.6rem;
}

.md-section[id] {
  scroll-margin-top: 16rem;
}

/* ----- Hero ----- */
.md-hero {
  position: relative;
  margin-top: -15.2rem;
  padding: 18rem 0 5.6rem;
  overflow: hidden;
  background:
    radial-gradient(60rem 40rem at 85% 10%, rgba(100, 113, 246, 0.22), transparent 60%),
    radial-gradient(48rem 32rem at 10% 80%, rgba(152, 255, 255, 0.08), transparent 55%),
    linear-gradient(165deg, #141C34 0%, #19233F 55%, #10182C 100%);
}

.md-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 4.8rem;
  align-items: center;
}

.md-hero__copy .dmex-hero__title {
  max-width: 58rem;
}

.md-hero__copy .dmex-hero__sub {
  max-width: 52rem;
}

.md-hero__stage {
  min-width: 0;
}

.md-cap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  padding: 1.6rem;
  border-radius: 2rem;
  border: 1px solid rgba(100, 113, 246, 0.28);
  background: rgba(8, 12, 28, 0.55);
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.28);
}

.md-cap__node {
  display: grid;
  gap: 0.6rem;
  padding: 2rem 1.8rem;
  border-radius: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.md-cap__node span {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--md-cyan);
}

.md-cap__node em {
  font-style: normal;
  font-size: 1.7rem;
  font-weight: 800;
  color: #fff;
}

.md-cap__node.is-active {
  border-color: rgba(100, 113, 246, 0.55);
  background: rgba(100, 113, 246, 0.14);
  transform: translateY(-2px);
}

.md-cap__note {
  grid-column: 1 / -1;
  margin: 0.4rem 0 0;
  text-align: center;
  font-size: 1.25rem;
  color: var(--md-muted);
}

/* ----- Quick Nav ----- */
.md-qnav {
  position: sticky;
  top: 9.2rem;
  z-index: 10;
  border-bottom: 1px solid var(--md-line);
  background: rgba(25, 35, 63, 0.92);
  backdrop-filter: blur(10px);
}

.md-qnav__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 1rem 0;
}

.md-qnav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.4rem;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  font-size: 1.35rem;
  font-weight: 800;
  color: #D5DBEC;
  text-decoration: none;
  text-align: center;
  word-break: keep-all;
  transition: background 0.2s ease, color 0.2s ease;
}

.md-qnav a:hover,
.md-qnav a.is-active {
  color: #fff;
  background: rgba(100, 113, 246, 0.22);
}

/* ----- Shared signature strip (Streaming) ----- */
.md-sig {
  list-style: none;
  margin: 4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
}

.md-sig li {
  display: grid;
  gap: 0.7rem;
  padding: 2rem 1.6rem;
  border-top: 2px solid rgba(152, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.03);
}

.md-sig em {
  font-style: normal;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--md-cyan);
}

.md-sig strong {
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
}

.md-sig span {
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--md-body);
  word-break: keep-all;
}

/* ----- Streaming visual: File → Processing → Player ----- */
.md-stream__viz {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 0.9fr 1fr 1.2fr;
  gap: 1.4rem;
  align-items: stretch;
}

.md-stream__rail,
.md-stream__core,
.md-stream__player {
  border-radius: 1.6rem;
  border: 1px solid rgba(100, 113, 246, 0.24);
  background: rgba(8, 12, 28, 0.55);
  box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.18);
}

.md-stream__rail {
  display: grid;
  gap: 0.8rem;
  padding: 1.6rem;
  align-content: start;
}

.md-stream__file {
  padding: 1.1rem 1.2rem;
  border-radius: 0.9rem;
  font-size: 1.35rem;
  color: var(--md-muted);
  background: rgba(255, 255, 255, 0.04);
}

.md-stream__file.is-on {
  color: #fff;
  background: rgba(100, 113, 246, 0.2);
  border: 1px solid rgba(100, 113, 246, 0.35);
}

.md-stream__core {
  display: grid;
  place-content: center;
  gap: 1.2rem;
  text-align: center;
  padding: 2.4rem;
}

.md-stream__state {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--md-cyan);
}

.md-stream__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.45rem;
  height: 4.8rem;
}

.md-stream__bars i {
  display: block;
  width: 0.7rem;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--md-cyan), var(--md-primary));
  animation: mdBar 1.2s ease-in-out infinite;
}

.md-stream__bars i:nth-child(2) { height: 70%; animation-delay: 0.1s; }
.md-stream__bars i:nth-child(3) { height: 100%; animation-delay: 0.2s; }
.md-stream__bars i:nth-child(4) { height: 55%; animation-delay: 0.3s; }
.md-stream__bars i:nth-child(5) { height: 80%; animation-delay: 0.4s; }

@keyframes mdBar {
  0%, 100% { transform: scaleY(0.55); opacity: 0.6; }
  50% { transform: scaleY(1); opacity: 1; }
}

.md-stream__meta {
  margin: 0;
  font-size: 1.35rem;
  color: var(--md-muted);
}

.md-stream__player {
  padding: 1.4rem;
}

.md-stream__screen {
  display: grid;
  place-content: center;
  gap: 0.6rem;
  min-height: 18rem;
  border-radius: 1.2rem;
  background:
    linear-gradient(160deg, rgba(100, 113, 246, 0.18), transparent 50%),
    #0B1020;
  text-align: center;
}

.md-stream__live-dot {
  width: 0.8rem;
  height: 0.8rem;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--md-cyan);
  box-shadow: 0 0 0 0.4rem rgba(152, 255, 255, 0.15);
}

.md-stream__screen strong {
  font-size: 1.7rem;
}

.md-stream__screen p {
  margin: 0;
  font-size: 1.4rem;
  color: var(--md-muted);
}

.md-stream__controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  margin-top: 1.2rem;
}

.md-stream__controls span {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--md-primary);
  clip-path: polygon(35% 20%, 80% 50%, 35% 80%);
}

.md-stream__controls em {
  display: block;
  height: 0.4rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--md-primary) 35%, rgba(255, 255, 255, 0.15) 35%);
}

.md-stream__controls small {
  font-size: 1.25rem;
  color: var(--md-muted);
}

/* ----- CDN: Origin → Hub → Users ----- */
.md-cdn__values {
  list-style: none;
  margin: 3.2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.md-cdn__values li {
  padding: 1rem 1.6rem;
  border-radius: 999px;
  border: 1px solid rgba(152, 255, 255, 0.28);
  font-size: 1.5rem;
  font-weight: 700;
  color: #E8EDF8;
  word-break: keep-all;
}

.md-cdn__diagram {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr auto 1.1fr auto 1.3fr;
  gap: 1.2rem;
  align-items: center;
  padding: 2.4rem;
  border-radius: 2rem;
  border: 1px solid rgba(100, 113, 246, 0.24);
  background: rgba(8, 12, 28, 0.45);
}

.md-cdn__origin,
.md-cdn__hub {
  display: grid;
  gap: 0.6rem;
  padding: 2.2rem 2rem;
  border-radius: 1.4rem;
  text-align: center;
}

.md-cdn__origin {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.md-cdn__hub {
  border: 1px solid rgba(100, 113, 246, 0.45);
  background: rgba(100, 113, 246, 0.16);
}

.md-cdn__origin strong,
.md-cdn__hub strong {
  font-size: 1.55rem;
}

.md-cdn__origin span,
.md-cdn__hub span {
  font-size: 1.35rem;
  color: var(--md-muted);
}

.md-cdn__arrow {
  width: 3.2rem;
  height: 0.2rem;
  background: linear-gradient(90deg, transparent, var(--md-cyan), transparent);
  position: relative;
}

.md-cdn__arrow::after {
  content: "";
  position: absolute;
  right: -0.2rem;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--md-cyan);
  border-top: 2px solid var(--md-cyan);
  transform: translateY(-50%) rotate(45deg);
}

.md-cdn__users {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.md-cdn__users li {
  display: grid;
  place-items: center;
  min-height: 5.6rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ----- Live: operational timeline ----- */
.md-live__timeline {
  list-style: none;
  margin: 4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--md-line);
}

.md-live__timeline li {
  position: relative;
  display: grid;
  gap: 0.8rem;
  padding: 2.4rem 1.6rem 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.md-live__timeline li:last-child {
  border-right: none;
}

.md-live__timeline li::before {
  content: "";
  position: absolute;
  top: -0.55rem;
  left: 1.6rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--md-cyan);
  box-shadow: 0 0 0 0.45rem rgba(152, 255, 255, 0.12);
}

.md-live__timeline strong {
  font-size: 1.55rem;
  font-weight: 800;
}

.md-live__timeline span {
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--md-body);
  word-break: keep-all;
}

.md-live__ops {
  margin-top: 3.6rem;
}

.md-live__monitor {
  padding: 2.4rem;
  border-radius: 1.8rem;
  border: 1px solid rgba(100, 113, 246, 0.28);
  background:
    linear-gradient(180deg, rgba(100, 113, 246, 0.12), transparent 40%),
    rgba(8, 12, 28, 0.65);
  box-shadow: 0 1.6rem 3.2rem rgba(0, 0, 0, 0.2);
}

.md-live__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.6rem;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
}

.md-live__badge i {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: #FF5A5A;
  animation: mdPulse 1.4s ease-in-out infinite;
}

@keyframes mdPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

.md-live__meters {
  display: flex;
  align-items: flex-end;
  gap: 0.8rem;
  height: 10rem;
  padding: 1.2rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.28);
}

.md-live__meters span {
  flex: 1;
  height: var(--h);
  border-radius: 0.5rem 0.5rem 0.2rem 0.2rem;
  background: linear-gradient(180deg, var(--md-cyan), var(--md-primary));
  opacity: 0.9;
}

.md-live__status {
  margin: 1.4rem 0 0;
  font-size: 1.45rem;
  color: var(--md-muted);
}

.md-live__uses {
  margin-top: 3.2rem;
}

.md-live__uses-label,
.md-prod__fields-label {
  margin: 0 0 1.2rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--md-cyan);
}

.md-live__uses ul,
.md-prod__fields ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.md-live__uses li,
.md-prod__fields li {
  padding: 1rem 1.5rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.5rem;
  color: #E8EDF8;
  word-break: keep-all;
}

/* ----- Video Production: camera + process ----- */
.md-prod__layout {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.4rem;
  align-items: start;
}

.md-prod__frame {
  margin: 0;
  padding: 1.6rem;
  border-radius: 2rem;
  border: 1px solid rgba(100, 113, 246, 0.28);
  background: rgba(8, 12, 28, 0.55);
  box-shadow: 0 1.6rem 3.2rem rgba(0, 0, 0, 0.22);
}

.md-prod__camera {
  position: relative;
  display: grid;
  gap: 1.2rem;
}

.md-prod__rec {
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.md-prod__rec i {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #FF4D4D;
  animation: mdPulse 1.2s ease-in-out infinite;
}

.md-prod__viewfinder {
  display: grid;
  gap: 0.5rem;
  place-content: end start;
  min-height: 26rem;
  padding: 2rem;
  border-radius: 1.4rem;
  background:
    linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.55)),
    radial-gradient(circle at 30% 30%, rgba(100, 113, 246, 0.25), transparent 45%),
    #0A0F1C;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.md-prod__viewfinder p {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--md-cyan);
}

.md-prod__viewfinder strong {
  font-size: 2.2rem;
}

.md-prod__viewfinder small {
  font-size: 1.3rem;
  color: var(--md-muted);
}

.md-prod__shots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.md-prod__shots li {
  padding: 0.9rem 1.1rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  color: var(--md-muted);
  background: rgba(255, 255, 255, 0.03);
}

.md-prod__shots li.is-on {
  color: #fff;
  background: rgba(100, 113, 246, 0.18);
  border: 1px solid rgba(100, 113, 246, 0.35);
}

.md-prod__timeline {
  display: grid;
  grid-template-columns: auto repeat(5, 1fr);
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.28);
}

.md-prod__timeline span {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--md-cyan);
}

.md-prod__timeline em {
  display: block;
  height: 1.2rem;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.12);
  font-style: normal;
}

.md-prod__timeline em.is-active {
  background: linear-gradient(90deg, var(--md-primary), var(--md-cyan));
}

.md-prod__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.md-prod__steps li {
  display: grid;
  gap: 0.45rem;
  padding: 1.6rem 1.8rem;
  border-left: 3px solid rgba(152, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.03);
}

.md-prod__steps strong {
  font-size: 1.55rem;
  font-weight: 800;
}

.md-prod__steps span {
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--md-body);
  word-break: keep-all;
}

.md-prod__fields {
  margin-top: 2.4rem;
}

/* ----- Integrated ----- */
.md-integ__viz {
  margin-top: 4rem;
  display: grid;
  gap: 2rem;
}

.md-integ__stack,
.md-integ__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.2rem;
  padding: 2.4rem;
  border-radius: 1.8rem;
  border: 1px solid rgba(100, 113, 246, 0.25);
  background: rgba(8, 12, 28, 0.5);
}

.md-integ__stack span,
.md-integ__flow strong {
  padding: 1.1rem 1.6rem;
  border-radius: 999px;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(100, 113, 246, 0.16);
  border: 1px solid rgba(100, 113, 246, 0.35);
}

.md-integ__stack em,
.md-integ__flow em {
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--md-cyan);
}

.md-integ__flow em {
  width: 2.4rem;
  height: 0.2rem;
  background: var(--md-cyan);
  padding: 0;
  border: 0;
}

/* ----- Final CTA ----- */
.md-page .md-biz {
  padding: 9.6rem 0 10.4rem;
  background:
    radial-gradient(50rem 28rem at 50% 0%, rgba(100, 113, 246, 0.2), transparent 60%),
    #10182C;
  text-align: center;
}

.md-biz__inner {
  max-width: 72rem;
  margin: 0 auto;
}

.md-biz .md-lead {
  margin-left: auto;
  margin-right: auto;
}

.md-biz__cta {
  justify-content: center;
  margin-top: 2.8rem;
}

/* ----- Reveal ----- */
.md-page [data-reveal] {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.md-page [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .md-page [data-reveal],
  .md-stream__bars i,
  .md-live__badge i,
  .md-prod__rec i,
  .md-cap__node {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ----- Desktop polish ----- */
@media (min-width: 1025px) {
  .md-page .md-lead,
  .md-page .dmex-hero__sub {
    font-size: 1.85rem;
    line-height: 1.65;
  }
}

/* ----- Tablet ----- */
@media (max-width: 1024px) {
  .md-hero__grid,
  .md-prod__layout,
  .md-stream__viz {
    grid-template-columns: 1fr;
  }

  .md-sig,
  .md-live__timeline {
    grid-template-columns: 1fr 1fr;
  }

  .md-cdn__diagram {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .md-cdn__arrow {
    width: 0.2rem;
    height: 2.4rem;
    margin: 0 auto;
  }

  .md-cdn__arrow::after {
    right: 50%;
    top: auto;
    bottom: -0.2rem;
    transform: translateX(50%) rotate(135deg);
  }

  .md-qnav__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1024px) {
  .md-hero {
    margin-top: -7.2rem;
    padding: 10.8rem 0 4.8rem;
  }

  .md-qnav {
    top: 7.2rem;
  }

  .md-section[id] {
    scroll-margin-top: 14rem;
  }
}

/* ----- Mobile 390 ----- */
@media (max-width: 768px) {
  .md-hero {
    margin-top: -7.2rem;
    padding: 10.8rem 0 3.6rem;
  }

  .md-page .v2-section {
    padding: 6.4rem 0;
  }

  .md-page .md-lead,
  .md-page .dmex-hero__sub {
    font-size: 1.6rem;
    line-height: 1.6;
  }

  .md-sig,
  .md-live__timeline,
  .md-cdn__users {
    grid-template-columns: 1fr;
  }

  .md-live__timeline li {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 2rem;
  }

  .md-live__timeline li:last-child {
    border-bottom: none;
  }

  .md-live__uses li,
  .md-prod__fields li,
  .md-cdn__values li {
    font-size: 1.5rem;
  }

  .md-qnav a {
    min-height: 4.8rem;
    font-size: 1.3rem;
  }

  .md-cap {
    gap: 0.8rem;
    padding: 1.2rem;
  }

  .md-cap__node {
    padding: 1.4rem 1.2rem;
  }

  .md-prod__viewfinder {
    min-height: 20rem;
  }

  .md-integ__stack,
  .md-integ__flow {
    padding: 1.8rem 1.4rem;
  }

  .md-section[id] {
    scroll-margin-top: 12rem;
  }
}