.zaza-content-burst {
  --burst-x: 0px;
  --burst-y: 0px;
  position: relative;
  min-height: clamp(58rem, 44vw, 78rem);
  isolation: isolate;
  transform-style: preserve-3d;
}

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

.zaza-content-burst::before {
  inset: 8% -8% -2%;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 35%, rgba(18, 168, 255, 0.16), transparent 38%),
    repeating-radial-gradient(circle at 50% 38%, rgba(97, 212, 255, 0.08) 0 1px, transparent 1px 7rem);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
}

.zaza-content-burst::after {
  left: 50%;
  bottom: 0;
  width: 110%;
  height: 58%;
  z-index: -1;
  opacity: 0.34;
  transform: translateX(-50%) perspective(45rem) rotateX(64deg);
  transform-origin: center bottom;
  background-image:
    linear-gradient(rgba(97, 212, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(97, 212, 255, 0.13) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
}

.zaza-content-burst__source,
.zaza-content-burst__clip {
  --shift-x: 0px;
  --shift-y: 0px;
  transform: translate3d(var(--shift-x), var(--shift-y), 0) rotate(var(--rotation, 0deg));
  transition: transform 180ms ease-out;
  will-change: transform;
}

.zaza-content-burst__source {
  position: absolute;
  top: 3%;
  left: 13%;
  width: 74%;
  aspect-ratio: 16 / 9;
  z-index: 5;
  padding: 0.7rem;
  overflow: hidden;
  border: 1px solid rgba(97, 212, 255, 0.52);
  border-radius: 2rem;
  background: #02060b;
  box-shadow:
    0 3rem 8rem rgba(0, 0, 0, 0.78),
    0 0 5rem rgba(18, 168, 255, 0.18);
}

.zaza-content-burst__source::before {
  content: attr(data-label);
  position: absolute;
  z-index: 3;
  top: 1.6rem;
  left: 1.8rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(97, 212, 255, 0.25);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 5, 10, 0.72);
  backdrop-filter: blur(1rem);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
}

.zaza-content-burst__source img,
.zaza-content-burst__clip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zaza-content-burst__source img {
  border-radius: 1.35rem;
}

.zaza-content-burst__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 6.6rem;
  height: 6.6rem;
  border: 1px solid rgba(97, 212, 255, 0.7);
  border-radius: 1.5rem;
  color: #fff;
  background: rgba(0, 9, 18, 0.72);
  box-shadow: 0 0 3rem rgba(18, 168, 255, 0.38);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(1rem);
}

.zaza-content-burst__play i {
  color: var(--zaza-blue);
  font-size: 3.2rem;
  filter: drop-shadow(0 0 1.2rem rgba(18, 168, 255, 0.8));
}

.zaza-content-burst__timeline {
  position: absolute;
  right: 2.2rem;
  bottom: 1.8rem;
  left: 2.2rem;
  z-index: 3;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.zaza-content-burst__timeline::before {
  content: "";
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: var(--zaza-blue);
  box-shadow: 0 0 1.4rem var(--zaza-blue);
}

.zaza-content-burst__lines {
  position: absolute;
  inset: 25% -4% 4%;
  z-index: 1;
  width: 108%;
  height: 72%;
  overflow: visible;
  pointer-events: none;
}

.zaza-content-burst__lines path {
  fill: none;
  stroke: rgba(38, 181, 255, 0.5);
  stroke-width: 1.6;
  stroke-dasharray: 5 8;
  filter: drop-shadow(0 0 5px rgba(18, 168, 255, 0.8));
  animation: zaza-data-flow 7s linear infinite;
}

.zaza-content-burst__lines circle {
  fill: #6bddff;
  filter: drop-shadow(0 0 5px #12a8ff);
}

.zaza-content-burst__clip {
  position: absolute;
  z-index: 4;
  width: 12.5%;
  aspect-ratio: 9 / 16;
  padding: 0.35rem;
  border: 1px solid rgba(97, 212, 255, 0.46);
  border-radius: 1.2rem;
  background: rgba(1, 6, 12, 0.94);
  box-shadow:
    0 2rem 4rem rgba(0, 0, 0, 0.56),
    0 0 2.2rem rgba(18, 168, 255, 0.12);
}

.zaza-content-burst__clip:nth-of-type(2) { --rotation: -4deg; left: 1%; top: 59%; }
.zaza-content-burst__clip:nth-of-type(3) { --rotation: 2deg; left: 18%; top: 67%; width: 11%; }
.zaza-content-burst__clip:nth-of-type(4) { --rotation: -2deg; left: 35%; top: 56%; width: 13%; }
.zaza-content-burst__clip:nth-of-type(5) { --rotation: 3deg; left: 54%; top: 68%; width: 11.5%; }
.zaza-content-burst__clip:nth-of-type(6) { --rotation: -3deg; left: 70%; top: 57%; width: 13.5%; }
.zaza-content-burst__clip:nth-of-type(7) { --rotation: 4deg; right: 0; top: 65%; width: 11%; }

.zaza-content-burst__clip img {
  border-radius: 0.85rem;
}

.zaza-content-burst__clip:nth-of-type(2) img { object-position: 22% center; }
.zaza-content-burst__clip:nth-of-type(3) img { object-position: 48% center; }
.zaza-content-burst__clip:nth-of-type(4) img { object-position: 72% center; }
.zaza-content-burst__clip:nth-of-type(5) img { object-position: 34% center; }
.zaza-content-burst__clip:nth-of-type(6) img { object-position: 64% center; }
.zaza-content-burst__clip:nth-of-type(7) img { object-position: 84% center; }

.zaza-content-burst__platform {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 5, 10, 0.78);
  box-shadow: 0 0 1.6rem rgba(18, 168, 255, 0.28);
  backdrop-filter: blur(0.8rem);
}

.zaza-content-burst__platform i {
  font-size: 1.6rem;
}

.zaza-content-burst__platform--tiktok { color: #fff; text-shadow: -1px 0 #25f4ee, 1px 0 #fe2c55; }
.zaza-content-burst__platform--youtube { color: #ff3b3b; }
.zaza-content-burst__platform--instagram { color: #ff72c6; }

.zaza-ui-frame--inline {
  max-width: 128rem;
  margin: 4rem auto 6rem;
  transform: none;
}

.zaza-ui-frame::before {
  content: attr(data-label);
}

.zaza-ui-frame--inline figcaption {
  padding: 1.5rem 1rem 0.8rem;
  color: var(--zaza-muted);
  font-size: 1.35rem;
  line-height: 1.5;
}

.zaza-audience {
  position: relative;
  padding: clamp(8rem, 9vw, 14rem) 0;
  overflow: hidden;
  border-bottom: 1px solid var(--zaza-line);
  background: radial-gradient(circle at 84% 20%, rgba(18, 168, 255, 0.12), transparent 34%), #03070c;
}

.zaza-audience__heading {
  display: grid;
  grid-template-columns: minmax(18rem, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(3rem, 6vw, 10rem);
  align-items: end;
  margin-bottom: clamp(4rem, 6vw, 8rem);
}

.zaza-audience__heading .zaza-kicker { margin: 0; }

.zaza-audience__heading h2 {
  max-width: 100rem;
  margin: 0;
  color: var(--zaza-text);
  font-size: clamp(4.4rem, 5.7vw, 8.8rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.zaza-audience__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--zaza-line);
  border-left: 1px solid var(--zaza-line);
}

.zaza-audience-card {
  min-height: 28rem;
  padding: clamp(2.8rem, 3vw, 4.6rem);
  border-right: 1px solid var(--zaza-line);
  border-bottom: 1px solid var(--zaza-line);
  background: rgba(255, 255, 255, 0.012);
  transition: background-color 250ms ease, transform 250ms ease;
}

.zaza-audience-card:hover {
  background: rgba(18, 168, 255, 0.055);
  transform: translateY(-0.6rem);
}

.zaza-audience-card i {
  color: var(--zaza-blue);
  font-size: 3.2rem;
  filter: drop-shadow(0 0 1.4rem rgba(18, 168, 255, 0.45));
}

.zaza-audience-card h3 {
  margin: 6rem 0 1.6rem;
  color: var(--zaza-text);
  font-size: clamp(2.4rem, 2vw, 3.4rem);
  line-height: 1.05;
}

.zaza-audience-card p {
  margin: 0;
  color: var(--zaza-muted);
  font-size: 1.55rem;
  line-height: 1.65;
}
@keyframes zaza-data-flow {
  to { stroke-dashoffset: -130; }
}

@media only screen and (max-width: 1199px) {
  .zaza-content-burst {
    min-height: clamp(62rem, 75vw, 78rem);
  }

  .zaza-audience__heading {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 767px) {
  .zaza-content-burst {
    min-height: 55rem;
  }

  .zaza-content-burst__source {
    top: 2%;
    left: 3%;
    width: 94%;
    border-radius: 1.4rem;
  }

  .zaza-content-burst__source::before {
    top: 1rem;
    left: 1rem;
    font-size: 0.78rem;
  }

  .zaza-content-burst__play {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1.1rem;
  }

  .zaza-content-burst__play i { font-size: 2.4rem; }

  .zaza-content-burst__clip {
    width: 18%;
    border-radius: 0.9rem;
  }

  .zaza-content-burst__clip:nth-of-type(2) { left: 0; top: 48%; width: 18%; }
  .zaza-content-burst__clip:nth-of-type(3) { left: 17%; top: 60%; width: 17%; }
  .zaza-content-burst__clip:nth-of-type(4) { left: 34%; top: 49%; width: 19%; }
  .zaza-content-burst__clip:nth-of-type(5) { left: 52%; top: 61%; width: 17%; }
  .zaza-content-burst__clip:nth-of-type(6) { left: 69%; top: 49%; width: 19%; }
  .zaza-content-burst__clip:nth-of-type(7) { display: none; }

  .zaza-content-burst__lines { inset: 23% -4% 8%; }

  .zaza-content-burst__platform {
    right: 0.45rem;
    bottom: 0.45rem;
    width: 2.3rem;
    height: 2.3rem;
  }

  .zaza-content-burst__platform i { font-size: 1.3rem; }
  .zaza-ui-frame--inline { margin: 3rem auto 4rem; }

  .zaza-audience {
    padding: 7rem 0;
  }

  .zaza-audience__heading h2 {
    font-size: clamp(4.2rem, 14vw, 6.4rem);
  }

  .zaza-audience__grid {
    grid-template-columns: 1fr;
  }

  .zaza-audience-card {
    min-height: 22rem;
  }

  .zaza-audience-card h3 {
    margin-top: 4rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zaza-content-burst__source,
  .zaza-content-burst__clip {
    transform: rotate(var(--rotation, 0deg));
    transition: none;
  }

  .zaza-content-burst__lines path {
    animation: none;
  }
}