.concept-city .cstage { background: radial-gradient(ellipse at 66% 55%, #fdfcf9 0%, var(--bg) 60%); }
.ct-tip {
  position: absolute; left: 0; top: 0; z-index: 2; padding: 8px 12px; border-radius: 12px; background: var(--ink); color: #fff;
  font-size: .78rem; pointer-events: none; opacity: 0; transition: opacity .15s; white-space: nowrap;
}
.ct-tip b { display: block; font-size: .85rem; }
.ct-tip span { opacity: .7; }
.ct-tip.hiring span { opacity: 1; color: #9fb0ff; }
.ct-cards { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ct-card {
  position: absolute; left: 0; top: 0; width: 230px; padding: 10px 12px; border-radius: 14px; background: var(--surface);
  border: 1.5px solid var(--accent); box-shadow: 0 20px 40px -20px rgba(47,76,255,.5); opacity: 0; font-size: .78rem;
}
.ct-card span { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.ct-card b { display: block; font-size: .9rem; }
.ct-card p { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 960px) { .ct-card { width: 180px; } }
.ct-client {
  position: absolute; right: max(24px, calc((100vw - 1160px) / 2 + 24px)); top: 50%; z-index: 2; width: 380px; margin-top: -200px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(18,19,21,.4); opacity: 0; pointer-events: none;
}
.cl-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: .78rem; color: var(--ink-3); }
.cl-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.cl-bar span { margin-left: 8px; }
.cl-mail { padding: 16px; }
.cl-from { display: flex; align-items: center; gap: 10px; }
.cl-k { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95rem; }
.cl-from b { display: block; font-size: .9rem; }
.cl-from small { color: var(--ink-3); font-size: .74rem; }
.cl-from em { margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 8px; border-radius: 999px; }
.cl-subj { margin-top: 12px; font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; }
.cl-rows { margin-top: 10px; display: grid; gap: 6px; }
.cl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: center; padding: 9px 11px; border-radius: 11px; background: #f7f8ff; border: 1px solid #e1e6ff; font-size: .78rem; opacity: 0; }
.cl-row b { font-size: .86rem; }
.cl-row span { grid-column: 1; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-row i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.cl-row.more { background: transparent; border-style: dashed; }
.cl-row.more b { color: var(--accent); }
.cl-bill { margin-top: 12px; padding: 11px 13px; border-radius: 12px; background: var(--accent); color: #fff; display: grid; font-size: .75rem; opacity: 0; }
.cl-bill span, .cl-bill small { opacity: .75; }
.cl-bill b { font-size: 1.3rem; letter-spacing: -.02em; }
@media (max-width: 960px) {
  .ct-client { left: 12px; right: 12px; width: auto; top: 76px; margin-top: 0; }
  .cl-bar, .cl-from, .cl-bill { display: none; }
  .cl-mail { padding: 12px; }
  .cl-subj { margin-top: 0; font-size: 1rem; }
  .cl-row { padding: 6px 10px; }
}