.agents-directory { margin: clamp(3.5rem, 9vw, 7rem) 0 clamp(4rem, 10vw, 8rem); }
.agents-directory-header { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem; align-items: end; margin-bottom: 1.8rem; }
.agents-directory-header .eyebrow { color: var(--syn-sea, var(--muted)); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.agents-directory-header h2 { max-width: 31rem; margin: 0; color: var(--text); font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4.2rem); line-height: .98; letter-spacing: -.055em; }
.agents-directory-header p { max-width: 24rem; margin: 0 0 .2rem; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.agents-directory-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; }
.agents-directory-card { display: flex; min-height: 18rem; flex-direction: column; gap: 1rem; padding: 1.15rem; border: 1px solid var(--line); border-radius: 1rem; color: var(--text); background: color-mix(in srgb, var(--surface) 84%, transparent); transition: transform .25s var(--ease-out-gentle), border-color .25s ease, box-shadow .25s ease; }
.agents-directory-card:hover { transform: translateY(-5px); border-color: var(--syn-sea, var(--line-strong)); box-shadow: 0 18px 45px rgba(0,0,0,.08); }
.agents-directory-card-live { border-color: color-mix(in srgb, var(--syn-sea, #2c8f86) 55%, var(--line)); background: color-mix(in srgb, var(--syn-sea, #2c8f86) 8%, var(--surface)); }
.agents-directory-kicker { color: var(--muted); font-family: var(--font-mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.agents-directory-card strong { display: flex; align-items: start; justify-content: space-between; gap: .4rem; margin-top: auto; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.02; letter-spacing: -.04em; }
.agents-directory-card strong span { color: var(--syn-sea, var(--muted)); font-family: var(--font-mono); font-size: .95rem; font-weight: 400; }
.agents-directory-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.agents-coming-soon, .agents-live-status { align-self: flex-start; padding: .32rem .55rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.agents-live-status { border-color: color-mix(in srgb, var(--syn-sea, #2c8f86) 55%, var(--line)); color: var(--syn-sea, var(--muted)); }
@media (max-width: 980px) { .agents-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .agents-directory-header { grid-template-columns: 1fr; gap: 1rem; } .agents-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agents-directory-card { min-height: 15rem; } }
@media (max-width: 480px) { .agents-directory-grid { grid-template-columns: 1fr; } .agents-directory-card { min-height: 13rem; } }
.agents-coming-page { position: relative; min-height: min(70vh, 44rem); display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: clamp(4rem, 12vw, 9rem) 0; }
.agents-coming-page h1 { max-width: 54rem; margin: .75rem 0 1rem; color: var(--text); font-family: var(--font-display); font-size: clamp(3rem, 8vw, 7rem); line-height: .9; letter-spacing: -.065em; }
.agents-coming-page .lead { max-width: 34rem; margin: 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.5; }
.agents-coming-orbit { position: absolute; top: 18%; right: 4%; width: clamp(10rem, 28vw, 24rem); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--syn-sea, #2c8f86) 35%, transparent); border-radius: 50%; opacity: .55; box-shadow: 0 0 0 2.5rem color-mix(in srgb, var(--syn-sea, #2c8f86) 6%, transparent), 0 0 0 6rem color-mix(in srgb, var(--syn-sea, #2c8f86) 3%, transparent); }
.agents-coming-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; }
.agents-coming-pill { padding: .45rem .7rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.agents-back-link { color: var(--syn-sea, var(--text)); font-family: var(--font-mono); font-size: .78rem; }