/* ==========================================================================
   AI Coworkers page — hero "Product · AI Coworkers".
   Page opener / focal point → dark (near-black) band so the blue gradient
   #0036fa→#4e87fc reads loud. Signature visual is a COWORKERS DIRECTORY
   panel: named, team-owned agents with access-scope chips. Broken symmetry —
   the top entry is an expanded card carrying a provenance line, the rest are
   compact rows of uneven height.
   ========================================================================== */

.pg-cwhero { position: relative; background-color: #0a0c11; padding: 120px 0 112px; overflow: hidden; }

.pg-cwhero__glow { position: absolute; top: -10%; right: -6%; width: 720px; height: 720px; background: radial-gradient(closest-side, rgba(0, 54, 250, 0.30), rgba(0, 54, 250, 0.05) 55%, transparent 72%); filter: blur(6px); pointer-events: none; z-index: 0; }

.pg-cwhero__inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 80px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; }

.pg-cwhero__kicker { position: relative; padding-left: 21px; font-family: "Cabin", sans-serif; font-weight: 500; font-size: 14px; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: #d9dfef; }
.pg-cwhero__kicker::before, .pg-cwhero__kicker::after { content: ""; position: absolute; left: 0; width: 15px; height: 4px; border-radius: 1px; }
.pg-cwhero__kicker::before { top: calc(50% - 4px); background: linear-gradient(to right, #0036fa, #c0e2f9); }
.pg-cwhero__kicker::after { top: 50%; width: 14px; background: linear-gradient(to right, #c0e2f9, #0036fa); }

.pg-cwhero__title { font-family: "Merriweather", serif; font-weight: 300; font-size: 52px; line-height: 1.14; color: #ffffff; margin-top: 22px; text-wrap: balance; }
.pg-cwhero__subtitle { font-family: "Cabin", sans-serif; font-weight: 400; font-size: 16px; line-height: 26px; color: #97a1ba; max-width: 560px; margin-top: 22px; }

.pg-cwhero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.pg-cwhero__btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: 10px; font-family: "Cabin", sans-serif; font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease; }
.pg-cwhero__btn--solid { color: #fff; background-image: linear-gradient(90deg, #0036fa, #4e87fc); box-shadow: 0 12px 28px rgba(0, 54, 250, 0.4); }
.pg-cwhero__btn--solid:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(0, 54, 250, 0.52); }
.pg-cwhero__btn--ghost { color: #eef1f8; background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.18); }
.pg-cwhero__btn--ghost:hover { border-color: #4e87fc; color: #fff; background-color: rgba(78, 135, 252, 0.12); }

.pg-cwhero__roster { position: relative; background: linear-gradient(180deg, #10131b, #0d1017); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 22px 22px 24px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 54, 250, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.04); }

.pg-cwhero__roster-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 6px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.pg-cwhero__roster-title { font-family: "Cabin", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #cfd6e8; }
.pg-cwhero__roster-count { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #7f8bab; }

.pg-cwhero__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-cwhero__name { font-family: "Cabin", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; color: #f2f5fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-cwhero__role { font-family: "Cabin", sans-serif; font-weight: 400; font-size: 13px; line-height: 16px; color: #8b93ab; }

.pg-cwhero__avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background-image: linear-gradient(135deg, #0036fa, #4e87fc); color: #fff; font-family: "Cabin", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.02em; box-shadow: 0 8px 18px -8px rgba(0, 54, 250, 0.7); }
.pg-cwhero__avatar--sm { width: 34px; height: 34px; border-radius: 9px; font-size: 12px; background-image: none; background-color: rgba(78, 135, 252, 0.14); color: #9db4f7; box-shadow: none; }

.pg-cwhero__card { position: relative; margin-top: 16px; border-radius: 14px; padding: 18px 18px 16px 20px; background: linear-gradient(180deg, #161b28, #12151d) padding-box; border: 1px solid rgba(78, 135, 252, 0.28); box-shadow: 0 24px 48px -30px rgba(0, 54, 250, 0.6); overflow: hidden; }
.pg-cwhero__card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-image: linear-gradient(180deg, #0036fa, #4e87fc); }

.pg-cwhero__card-top { display: flex; align-items: center; gap: 13px; }
.pg-cwhero__owner { margin-left: auto; flex: 0 0 auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background-color: rgba(0, 54, 250, 0.16); border: 1px solid rgba(78, 135, 252, 0.32); background-image: linear-gradient(90deg, #6f9dff, #c0d4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

.pg-cwhero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.pg-cwhero__chip { font-family: "Cabin", sans-serif; font-weight: 500; font-size: 12px; line-height: 1; padding: 7px 11px; border-radius: 999px; color: #bcccf6; background-color: rgba(0, 54, 250, 0.14); border: 1px solid rgba(78, 135, 252, 0.22); }

.pg-cwhero__prov { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, 0.1); font-family: "Cabin", sans-serif; font-size: 13px; line-height: 18px; color: #97a1ba; }
.pg-cwhero__prov-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; background-image: linear-gradient(135deg, #0036fa, #4e87fc); box-shadow: 0 0 0 4px rgba(0, 54, 250, 0.14); }

.pg-cwhero__row { display: flex; align-items: center; gap: 13px; padding: 15px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: background-color 0.3s ease, padding-left 0.3s ease; border-radius: 8px; }
.pg-cwhero__row:last-child { border-bottom: none; }
.pg-cwhero__row:hover { background-color: rgba(78, 135, 252, 0.06); padding-left: 12px; }

.pg-cwhero__owner-sm { margin-left: auto; flex: 0 0 auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: #6f7a99; }
.pg-cwhero__row--muted { opacity: 0.72; }

.pg-cwhero__copy, .pg-cwhero__roster-head, .pg-cwhero__card, .pg-cwhero__row { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.pg-cwhero__copy.is-in, .pg-cwhero__roster-head.is-in, .pg-cwhero__card.is-in, .pg-cwhero__row.is-in { opacity: 1; transform: none; }

.pg-cwhero__roster-head.is-in { transition-delay: 0.06s; }
.pg-cwhero__card.is-in { transition-delay: 0.16s; }
.pg-cwhero__row.is-in:nth-of-type(1) { transition-delay: 0.26s; }
.pg-cwhero__roster .pg-cwhero__row.is-in:nth-of-type(3) { transition-delay: 0.34s; }
.pg-cwhero__roster .pg-cwhero__row.is-in:nth-of-type(4) { transition-delay: 0.42s; }
.pg-cwhero__row:nth-of-type(2).is-in { transition-delay: 0.26s; }
.pg-cwhero__row:nth-of-type(3).is-in { transition-delay: 0.34s; }
.pg-cwhero__row:nth-of-type(4).is-in { transition-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
  .pg-cwhero__copy, .pg-cwhero__roster-head, .pg-cwhero__card, .pg-cwhero__row { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1040px) {
  .pg-cwhero { padding: 88px 0 80px; }
  .pg-cwhero__inner { grid-template-columns: 1fr; gap: 44px; padding: 0 24px; }
  .pg-cwhero__title { font-size: 42px; }
  .pg-cwhero__glow { width: 460px; height: 460px; top: 20%; }
}
@media (max-width: 600px) {
  .pg-cwhero__title { font-size: 33px; }
  .pg-cwhero__owner { display: none; }
  .pg-cwhero__roster { padding: 18px 16px 20px; }
}