.audience-section {
  --audience-size: min(clamp(1180px, 123vw, 1720px), calc((100svh - 64px) * 2.4));
  --audience-hub-size: clamp(430px, 46vw, 620px);
  --audience-center-y: -105px;
  position: relative;
  isolation: isolate;
  background: #f8faf7;
  color: #233d2e;
}
.audience-stage { position: relative; min-height: 0; padding-block: 80px 76px; overflow: clip; }
.technology-section[data-technology-scroll] + .audience-section[data-scroll-wheel] { margin-block-start: -38svh; background: transparent; }
.audience-section[data-scroll-wheel] { height: 280svh; }
.audience-section[data-scroll-wheel] .audience-stage { position: sticky; top: var(--site-header-height); height: calc(100svh - var(--site-header-height)); padding: 0; }
.audience-section[data-wheel] .audience-reveal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
}
.audience-section[data-wheel] .audience-reveal[data-visible] { visibility: visible; }
.audience-section[data-wheel] .audience-reveal[data-revealing] {
  inset-block-end: -72px;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
}
.audience-section[data-wheel] .audience-scene {
  position: absolute;
  inset: 0;
}
.audience-section[data-wheel] .audience-reveal[data-revealing] .audience-scene {
  inset-block-end: 72px;
}
.audience-wheel { display: none; }
.audience-section[data-wheel] .audience-wheel {
  display: block;
  position: absolute;
  top: calc(var(--audience-size) * -.5 + var(--audience-center-y));
  left: 50%;
  width: var(--audience-size);
  height: var(--audience-size);
  border: 1px solid #b8d3c1;
  border-radius: 50%;
  background: repeating-conic-gradient(from calc(180deg - var(--audience-sector, 60deg) * .5), #e2f0e5 0deg, #edf5e9 calc(var(--audience-sector, 60deg) * .5), #e2f0e5 calc(var(--audience-sector, 60deg) - .18deg), #c4dcca calc(var(--audience-sector, 60deg) - .18deg), #c4dcca var(--audience-sector, 60deg));
  box-shadow: inset 0 -30px 90px #267c4a10, 0 20px 75px -55px #175b384a;
  translate: -50% 0;
  pointer-events: none;
}
.audience-hub { position: relative; z-index: 2; text-align: center; }
.audience-section[data-wheel] .audience-hub {
  position: absolute;
  width: var(--audience-hub-size);
  height: var(--audience-hub-size);
  top: calc(var(--audience-hub-size) * -.5 + var(--audience-center-y));
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #c0d7c7;
  border-radius: 50%;
  background: #f8faf7;
  box-shadow: 0 15px 65px -45px #2b68453b;
}
.audience-section[data-wheel] .audience-hub-copy { position: absolute; bottom: 36px; left: 0; width: 100%; }
.audience-hub h2 { margin: 0; font-size: clamp(27px, 2.9vw, 43px); font-weight: 550; line-height: 1.14; letter-spacing: -.045em; }
.audience-hub h2 > span { display: flex; align-items: center; justify-content: center; gap: 9px; }
.audience-hub h2 img { width: 36px; height: 36px; }
.audience-hub h2 em { display: block; color: #087a58; font-style: normal; font-size: .56em; letter-spacing: -.025em; margin-top: 7px; }
.audience-card-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 30px; list-style: none; margin: 48px auto 0; padding: 0 32px; max-width: 1180px; }
.audience-card { text-align: center; }
.audience-section:not([data-wheel]) .audience-card:last-child { grid-column: 1 / -1; width: min(100%, 340px); justify-self: center; }
.audience-section[data-wheel] .audience-card-list { display: block; position: absolute; inset: 0; max-width: none; margin: 0; padding: 0; pointer-events: none; }
.audience-section[data-wheel] .audience-card { position: absolute; top: 0; left: 0; width: clamp(178px, 17vw, 234px); }
.audience-icon { display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 17px; border: 1px solid #b5d1be; border-radius: 18px; background: linear-gradient(145deg, #ffffffd9, #dceee1); box-shadow: 0 10px 25px -15px #337a4a35; transition: background-color .35s, border-color .35s, box-shadow .35s; }
.audience-icon svg { width: 29px; height: 29px; fill: none; stroke: #41835c; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.audience-card h3 { position: relative; display: inline-block; margin: 0 0 13px; color: #284e37; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.2; font-weight: 580; letter-spacing: -.035em; }
.audience-card h3::after { content: ""; position: absolute; width: 35px; height: 2px; left: calc(50% - 17.5px); bottom: -7px; background: #087a58; transform: scaleX(0); transition: transform .35s ease; }
.audience-card p { margin: 0; color: #57715e; font-size: 13px; line-height: 1.55; text-wrap: balance; }
.audience-card[aria-current="true"] .audience-icon { border-color: #63b78b; background: #d2eeda; box-shadow: 0 12px 28px -18px #087a5866; }
.audience-card[aria-current="true"] .audience-icon svg { stroke: #087a58; }
.audience-card[aria-current="true"] h3::after { transform: scaleX(1); }
@media (min-width: 1600px) {
  .audience-section { --audience-size: min(clamp(1720px, 123vw, 2400px), calc((100svh - 64px) * 2.4)); --audience-hub-size: 660px; --audience-center-y: -105px; }
}
@media (max-height: 740px) and (min-width: 901px) {
  .audience-section { --audience-size: min(clamp(1100px, 118vw, 1460px), calc((100svh - 64px) * 2.4)); --audience-hub-size: clamp(410px, 43vw, 560px); --audience-center-y: -120px; }
  .audience-icon { width: 57px; height: 57px; margin-bottom: 14px; border-radius: 15px; }
  .audience-icon svg { width: 26px; height: 26px; }
  .audience-card p { font-size: 12px; }
}
@media (max-width: 900px) {
  .audience-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 28px; padding-inline: 28px; }
}
@media (max-width: 560px) {
  .audience-stage { padding: 64px 22px 48px; }
  .audience-hub h2 { font-size: 32px; }
  .audience-hub h2 img { width: 31px; height: 31px; }
  .audience-card-list { grid-template-columns: 1fr; gap: 0; margin-top: 35px; padding: 0; }
  .audience-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 17px; padding-block: 20px; border-top: 1px solid #dce7df; text-align: left; }
  .audience-section:not([data-wheel]) .audience-card:last-child { width: 100%; }
  .audience-icon { grid-row: 1 / span 2; width: 52px; height: 52px; margin: 0; border-radius: 15px; }
  .audience-icon svg { width: 25px; height: 25px; }
  .audience-card h3 { display: block; margin: 2px 0 8px; font-size: 18px; }
  .audience-card h3::after { display: none; }
  .audience-card p { font-size: 12px; line-height: 1.6; text-wrap: initial; }
}
@media (prefers-reduced-motion: reduce) {
  .audience-card h3::after, .audience-icon { transition: none; }
}