/* Restrained surfaces: graphite evidence, coastal teal and a warm film atmosphere. */
#software,
.audience-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Software stays on a flat architectural field; the real preview outlines provide structure. */
#software {
  background: var(--ground);
}

#software > .container {
  position: relative;
}

#software .section-heading p {
  color: var(--ink);
}

#software .software-preview {
  background: var(--panel);
  border-color: var(--line);
}

/* Coastal teal rises into graphite with a quiet slate highlight. */
.audience-panel[aria-labelledby="content-creator-title"] {
  background: #171919;
  border-color: rgb(139 167 180 / .28);
}

.audience-panel[aria-labelledby="content-creator-title"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12%;
  pointer-events: none;
  background:
    linear-gradient(130deg, rgb(11 13 13 / .52), transparent 72%),
    radial-gradient(ellipse 70% 90% at 108% 8%, rgb(139 167 180 / .26), transparent 74%),
    radial-gradient(ellipse 112% 96% at 2% 102%, #254C49 16%, rgb(37 76 73 / .55) 48%, transparent 84%),
    #171919;
  animation: showcase-coast 48s ease-in-out infinite alternate paused;
}

/* A warm film field pairs a soft cream shoulder with red in the lower edge. */
.audience-panel[aria-labelledby="ad-creator-title"] {
  background: #242727;
  border-color: rgb(229 214 189 / .22);
}

.audience-panel[aria-labelledby="ad-creator-title"]::before,
.audience-panel[aria-labelledby="ad-creator-title"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.audience-panel[aria-labelledby="ad-creator-title"]::before {
  z-index: -2;
  background:
    linear-gradient(105deg, rgb(11 13 13 / .64), rgb(11 13 13 / .14) 74%, transparent),
    radial-gradient(ellipse 100% 94% at 108% -12%, rgb(229 214 189 / .3), rgb(229 214 189 / .06) 42%, transparent 75%),
    radial-gradient(ellipse 110% 96% at 108% 112%, #BC3026 3%, rgb(232 66 50 / .48) 31%, transparent 75%),
    #242727;
}

.audience-panel[aria-labelledby="ad-creator-title"]::after {
  z-index: -1;
  background-image: var(--atmosphere-grain, none);
  background-size: 180px 180px;
  opacity: .025;
}

.audience-copy,
.audience-media {
  position: relative;
}

.audience-copy h3,
.audience-copy p {
  color: #FFFCF7;
}

/* Each action belongs to its card; hover and focus reveal the navigation's glass. */
.audience-panel[aria-labelledby="content-creator-title"] .audience-cta {
  background: #254C49;
  color: #FFFFFF;
  border-color: rgb(198 221 245 / .28);
}
.audience-panel[aria-labelledby="ad-creator-title"] .audience-cta {
  background: #BC3026;
  color: #FFFFFF;
  border-color: rgb(255 220 208 / .28);
}
.audience-panel .audience-cta {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1);
}
.audience-panel .audience-cta .button-arrow {
  background: rgb(255 255 255 / .15);
  color: #FFFFFF;
  border-color: rgb(255 255 255 / .12);
}
.audience-panel[aria-labelledby]:hover .audience-cta,
.audience-panel[aria-labelledby]:focus-visible .audience-cta {
  background: rgb(67 73 75 / .86);
  color: #FFFFFF;
  border-color: rgb(255 255 255 / .2);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 3px 12px rgb(17 19 23 / .06);
}

.audience-media {
  background: var(--panel);
  border-color: rgb(242 244 245 / .24);
}

.audience-panel[aria-labelledby="ad-creator-title"] .audience-media {
  border-color: rgb(229 214 189 / .3);
}

.audience-panel[aria-labelledby="content-creator-title"][data-atmosphere-running="true"]::before {
  animation-play-state: running;
  will-change: transform;
}

@keyframes showcase-coast {
  from { transform: translate3d(-1%, 1%, 0); }
  to { transform: translate3d(2%, -1%, 0); }
}

@media (hover: hover) and (min-width: 768px) {
  .audience-pair:has(.audience-panel:hover) .audience-panel:not(:hover),
  .audience-pair:has(.audience-panel:focus-visible) .audience-panel:not(:focus-visible) {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .audience-panel[aria-labelledby="content-creator-title"]::before {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/* Product theme reservations are distinct from the light marketing ground. */
#software .mobile-preview{background:#111317;border-color:#252A30;color:#B8C1CA;color-scheme:dark}
#software .mobile-preview .placeholder-copy{color:#B8C1CA}
#software .mobile-preview .placeholder-copy strong{color:#F2F4F5}