.audience-dialog {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(69, 211, 232, 0.52);
  background:
    radial-gradient(circle at 92% 0%, rgba(28, 191, 218, 0.2), transparent 38%),
    linear-gradient(145deg, #071824 0%, #0b2638 58%, #081b29 100%);
  box-shadow:
    0 30px 110px rgba(0, 7, 15, 0.72),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.audience-dialog::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, #00b8cc, #58d9f4 62%, #1689c8);
}

.audience-dialog::backdrop {
  background: rgba(1, 10, 18, 0.82);
  backdrop-filter: blur(8px) saturate(0.8);
}

.audience-dialog .eyebrow {
  color: #61dff0;
}

.audience-logo {
  display: block;
  width: clamp(210px, 36vw, 270px);
  height: auto;
  margin: 0 52px 27px 0;
  object-fit: contain;
}

.audience-dialog h2 {
  color: #fff;
  text-wrap: balance;
}

.audience-dialog #audience-description {
  color: #c4d5dd;
}

.audience-dialog .welcome-grid {
  gap: 16px;
}

.audience-dialog .welcome-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(130, 180, 200, 0.46);
  background: linear-gradient(155deg, rgba(19, 55, 75, 0.96), rgba(8, 29, 43, 0.98));
  box-shadow: 0 14px 36px rgba(0, 8, 15, 0.22);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.audience-dialog .welcome-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #5de3f1, #109cc2);
  opacity: 0.86;
}

.audience-dialog .welcome-card:nth-child(2)::before {
  background: linear-gradient(180deg, #50d9f6, #397fd3);
}

.audience-dialog .welcome-card:hover,
.audience-dialog .welcome-card:focus-visible,
.audience-dialog .welcome-card.is-preferred {
  transform: translateY(-4px);
  border-color: #5be0f0;
  background: linear-gradient(155deg, rgba(24, 72, 94, 0.98), rgba(9, 34, 50, 0.99));
  box-shadow: 0 20px 44px rgba(0, 10, 20, 0.34), 0 0 26px rgba(0, 184, 204, 0.1);
  outline: none;
}

.audience-dialog .welcome-tag {
  color: #6be3f1;
}

.audience-dialog .welcome-card h3 {
  color: #fff;
  text-wrap: balance;
}

.audience-dialog .welcome-card p {
  color: #c5d7df;
}

.audience-dialog .welcome-card strong {
  color: #70e5f2;
}

.audience-close {
  border: 1px solid rgba(142, 190, 207, 0.32);
  background: rgba(5, 21, 31, 0.56);
  color: #e7f7fa;
}

.audience-close:hover,
.audience-close:focus-visible {
  border-color: #54d8e9;
  background: rgba(22, 62, 78, 0.9);
  outline: none;
}

.audience-hint {
  color: #a9c2cd;
}

@media (max-width: 600px) {
  .audience-logo {
    width: 210px;
    margin-bottom: 22px;
  }

  .audience-dialog .welcome-grid {
    gap: 13px;
  }

  .audience-dialog .welcome-card:hover,
  .audience-dialog .welcome-card:focus-visible,
  .audience-dialog .welcome-card.is-preferred {
    transform: translateY(-2px);
  }
}

.audience-bar { flex-wrap: wrap; gap: 8px 16px; }
.audience-choose { background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 5px 0; text-decoration: underline; text-underline-offset: 3px; }
.audience-choose:focus-visible { outline: 2px solid #69d7e6; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .audience-dialog .welcome-card {
    transition: none;
  }
}