.audience-shell { max-width: 1240px; margin: 0 auto; padding: 136px 24px 90px; }
.audience-hero { min-height: 590px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(340px,.8fr); align-items: center; gap: clamp(2rem,6vw,6rem); }
.audience-intro { max-width: 730px; }
.audience-intro h1 { font-size: clamp(3.3rem,6.3vw,6.3rem); line-height: .97; }
.audience-intro h1 em { font-style: normal; color: transparent; background: linear-gradient(105deg,var(--purple-light),var(--purple) 55%,var(--orange)); background-clip: text; -webkit-background-clip: text; }
.audience-lede { max-width: 680px; margin: 1.6rem 0 0; color: var(--muted); font-size: clamp(1rem,1.5vw,1.15rem); line-height: 1.7; }
.audience-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .65rem; }
.audience-signals { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .55rem; }
.audience-signals span { padding: .45rem .65rem; display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font: .66rem var(--mono); }
.audience-signals i { width: 5px; height: 5px; border-radius: 50%; background: var(--purple-light); }
.audience-flow { padding: 1.25rem; border: 1px solid rgba(139,92,246,.3); border-radius: 20px; background: radial-gradient(circle at 100% 0,rgba(139,92,246,.15),transparent 50%),var(--panel); box-shadow: 0 24px 70px rgba(0,0,0,.12); }
.audience-flow-top { padding: .25rem .25rem 1.2rem; display: flex; justify-content: space-between; color: var(--purple-light); font: .61rem var(--mono); letter-spacing: .1em; }
.audience-flow-top span:last-child { color: var(--orange); font-size: 1.1rem; line-height: .7; }
.audience-flow-step { padding: 1rem; display: grid; grid-template-columns: 30px 1fr; gap: .8rem; position: relative; border: 1px solid var(--line); border-radius: 11px; background: var(--black-soft); }
.audience-flow-step + .audience-flow-step { margin-top: .8rem; }
.audience-flow-step + .audience-flow-step::before { content: ''; position: absolute; left: 28px; top: -.8rem; height: .8rem; width: 1px; background: var(--purple); }
.audience-flow-step > span { color: var(--purple-light); font: .62rem var(--mono); }
.audience-flow-step strong { font: 600 .96rem var(--display); }
.audience-flow-step p { margin: .25rem 0 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.audience-flow-end { padding: 1rem .2rem .25rem; display: flex; justify-content: space-between; color: var(--muted); font: .66rem var(--mono); }
.audience-flow-end span { color: var(--orange); }
.audience-section { margin-top: 6rem; padding: 5rem 0; border-top: 1px solid var(--line); }
.audience-section-head { max-width: 820px; }
.audience-section-head h2,.audience-outro h2,.audience-developer-note h2 { font-size: clamp(2.5rem,4.8vw,4.6rem); line-height: 1.03; letter-spacing: -.05em; }
.audience-section-head > p:last-child,.audience-outro p:not(.page-kicker),.audience-developer-note p:not(.page-kicker) { max-width: 680px; color: var(--muted); }
.audience-cards { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .9rem; }
.audience-cards article { min-height: 270px; padding: 1.5rem; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.audience-cards article:nth-child(3n + 1) { border-color: rgba(139,92,246,.35); background: radial-gradient(circle at 10% 0,rgba(139,92,246,.2),transparent 68%),var(--panel); }
.audience-cards article:nth-child(3n + 2) { border-color: rgba(249,115,22,.29); background: linear-gradient(145deg,rgba(249,115,22,.13),transparent 62%),var(--panel); }
.audience-cards article:nth-child(3n) { border-color: rgba(139,92,246,.28); background: radial-gradient(circle at 100% 100%,rgba(139,92,246,.16),transparent 65%),linear-gradient(160deg,rgba(249,115,22,.06),transparent 55%),var(--panel); }
.audience-cards article:nth-child(3n + 2) .audience-card-index { color: var(--orange); }
.audience-card-index { color: var(--purple-light); font: .62rem var(--mono); letter-spacing: .08em; }
.audience-cards h3 { margin-top: 2.7rem; font-size: 1.45rem; line-height: 1.15; }
.audience-cards p { margin: .7rem 0 0; color: var(--muted); font-size: .82rem; }
.audience-developer-note { margin: 0 0 5rem; padding: clamp(1.5rem,4vw,3rem); display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; border: 1px solid rgba(139,92,246,.3); border-radius: 18px; background: var(--panel); }
.audience-developer-note a { color: var(--purple-light); font-size: .87rem; text-decoration: none; }
.audience-developer-note a:hover { color: var(--orange); }
.audience-developer-note pre { margin: 0; padding: 1.25rem; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: #15111f; color: #eee9f7; font: .73rem/1.8 var(--mono); }
.audience-developer-note pre span { color: #bca5ff; }
.audience-outro { padding: 3rem 0; display: flex; align-items: end; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--line); }
.audience-outro > div { max-width: 760px; }
.audience-outro .button { flex: 0 0 auto; }
.audience-related { padding: 1.3rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.5rem; border-top: 1px solid var(--line); }
.audience-related > span { color: var(--muted); font: .65rem var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.audience-related a { color: var(--white); font-size: .78rem; text-decoration: none; }
.audience-related a:hover { color: var(--purple-light); }
.audience-related a span { color: var(--orange); }
@supports (grid-template-rows:subgrid) { .audience-cards article { display: grid; grid-template-rows: subgrid; grid-row: span 3; } }
@media(max-width:960px) { .audience-hero { grid-template-columns: 1fr; } .audience-flow { max-width: 640px; } .audience-developer-note { grid-template-columns: 1fr; } }
@media(max-width:760px) { .audience-shell { padding: 118px 20px 60px; } .audience-hero { min-height: 0; } .audience-intro h1 { font-size: clamp(3.3rem,13vw,5rem); } .audience-section { margin-top: 4rem; padding: 3.5rem 0; } .audience-cards { grid-template-columns: 1fr; } .audience-cards article { min-height: 220px; } .audience-outro { align-items: start; flex-direction: column; } .audience-related { align-items: start; flex-direction: column; } }