:root {
  --coral: #6D5EF8;
  --ink: #0e0e10;
  --muted: #6d6c77;
  --line: #e8e8e8;
  --content: 1200px;
  font-family: "Montserrat", Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  scroll-behavior: smooth;
}
* { box-sizing: border-box }
body { margin: 0; min-width: 320px; }
button, input { font: inherit }
button { cursor: pointer }
a { color: inherit; text-decoration: none }
img { display: block }
[hidden] { display: none !important }
.site-header { background: #fff; border-bottom: 1px solid #e9e9e9; width: 100%; z-index: 100; position: sticky; top: 0 }
.header-content { height: 78px; max-width: var(--content); margin: 0 auto; padding: 0 0; display: flex; align-items: center; gap: 28px }
.brand { display: flex; align-items: center; width: 195px; flex: 0 0 195px }
.brand img { width: 120px; height: auto; max-height: 50px; object-fit: contain }
.main-nav { display: flex; margin-left: auto; align-items: center; gap: 46px }
.nav-link { font-size: 12px; letter-spacing: .07em; color: #777481; font-weight: 500; white-space: nowrap; transition: color .2s }
.nav-link:hover, .nav-link.active { color: var(--coral) }
.create-link { padding: 16px 26px; border-radius: 5px; background: var(--coral); color: white; font-weight: 600; font-size: 12px; letter-spacing: .03em; white-space: nowrap; transition: background .2s,transform .2s }
.create-link:hover { background: #5948DC; transform: translateY(-1px) }
.header-actions { display: flex; gap: 10px }
.search-icon-btn { height: 46px; width: 46px; border: 1px solid var(--line); border-radius: 5px; color: #868686; background: #f9f9f9; display: flex; align-items: center; justify-content: center }
.search-icon-btn svg { width: 24px; height: 24px }
.search-icon-btn:hover { color: var(--coral) }
.menu-btn { display: none }
.main-content { max-width: var(--content); margin: 0 auto; padding: 36px 0 65px; scroll-margin-top: 84px }
.directory-intro { position: relative; }
.section-heading { display: flex; align-items: center; gap: 17px; justify-content: center; position: relative; z-index: 2 }
.section-heading h1 { font-size: 31px; line-height: 1.18; margin: 0; font-weight: 900; font-style: italic; letter-spacing: -.04em; white-space: nowrap; padding: 0 3px }
.heading-rule { display: block; height: 4px; background: var(--coral); flex: 1 1 20px; transform: translateY(-1px) }
.category-frame { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 24px 0 25px; padding: 0 48px; }
.category-frame::before, .category-frame::after { content: ""; position: absolute; background: var(--coral); width: 4px; top: -37px; height: 60px }
.category-frame::before { left: 0 }.category-frame::after { right: 0 }
.category-card { background: #fbfbfb; border: 1px solid #e5e5e5; border-radius: 5px; min-height: 141px; padding: 18px 12px 14px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 12px; transition: border .2s, transform .2s, box-shadow .2s; overflow: hidden }
.category-card:hover,.category-card[aria-pressed="true"] { border-color: var(--coral); box-shadow: 0 5px 18px #6D5EF816; transform: translateY(-2px) }
.avatars { display:flex; justify-content:center; padding:0 12px }
.avatars img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; background: #ddd; margin-left:-8px }
.avatars img:first-child { margin-left:0 }
.category-name { font-size:19px; line-height:1; font-weight:900; font-style:italic; letter-spacing:-.045em; white-space:nowrap }
.directory-results { padding: 0 47px }
.search-panel { display:flex; align-items:center; gap:16px; padding: 12px 0 24px }
.search-panel label { position:absolute; clip:rect(0,0,0,0); width:1px;height:1px;overflow:hidden }
.search-input-wrap { height: 50px; display:flex; align-items:center; gap: 12px; border: 1px solid #dedede; border-radius: 4px; padding:0 16px; flex:1 }
.search-input-wrap:focus-within { outline:2px solid #6D5EF845; border-color:var(--coral) }
.search-input-wrap svg { width:20px;height:20px;color:#888;flex-shrink:0 }
.search-input-wrap input { border:0; outline:0; width:100%; height:100%; font-size:14px; color:#222; background:transparent }
#clear-filters { background:none; border:0; color:#6656EF; font-size:12px; font-weight:700; white-space:nowrap }
.results-meta { font-size:12px; color:#838383; margin:-2px 0 15px; min-height: 0; font-weight:500; display:none }
.results-meta.visible { display:block }
.profile-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:24px }
.profile-card { position:relative; overflow:hidden; border-radius:5px; aspect-ratio: 260 / 323; isolation:isolate; background:#e7e7e8; border:0; padding:0; width:100%; display:block; text-align:center }
.profile-card img { width:100%;height:100%;object-fit:cover; object-position:center 27%; transform:scale(1); transition:transform .35s ease; }
.profile-card:hover img { transform:scale(1.055) }
.profile-card::after { content:""; position:absolute; inset:41% 0 0; background:linear-gradient(180deg,transparent 15%,rgba(0,0,0,.05) 33%,rgba(0,0,0,.67) 100%); pointer-events:none }
.profile-details { position:absolute; z-index:2; bottom:14px;left:6px;right:6px; color:white; text-shadow:0 2px 6px #0007 }
.profile-name { font-weight:800;font-size:22px;line-height:1.12;letter-spacing:-.04em;display:block }
.profile-handle { color:#ddd;opacity:.9;font-size:16px;font-style:italic;line-height:1.35;display:block; font-weight:500; letter-spacing:-.035em; margin-top:2px;overflow-wrap:anywhere }
.profile-card:hover .profile-name { text-decoration: underline; text-decoration-thickness:1px; text-underline-offset:3px }
.profile-card:focus-visible, .category-card:focus-visible,.search-icon-btn:focus-visible { outline:3px solid #ff9c91; outline-offset:3px }
.load-area { display:flex;justify-content:center;margin:42px 0 15px }
.load-button { padding:14px 27px; border:2px solid var(--coral);border-radius:5px;color:var(--coral);background:white;font-size:12px;font-weight:800;letter-spacing:.05em }
.load-button:hover {background:var(--coral);color:white}
.empty-message {text-align:center;padding:45px 12px;font-size:16px;color:var(--muted)}
.empty-message button {border:0;color:var(--coral);background:none;text-decoration:underline;font-weight:700}
.site-footer { border-top:1px solid var(--line);background:#fafafa;padding:38px 20px;color:#555 }
.footer-inner {display:flex;flex-direction:column;gap:7px;max-width:1110px;margin:auto;font-size:12px}
.footer-inner strong {color:#222;font-size:15px}
.footer-inner a {text-decoration:underline;color:var(--coral)}
.footer-inner small {font-size:11px;color:#888}
.profile-dialog { border:0;padding:0;width:min(850px,calc(100vw - 28px));max-height:calc(100vh - 30px);border-radius:9px;box-shadow:0 25px 90px #0004;overflow:visible }
.profile-dialog::backdrop {background:#0009;backdrop-filter:blur(4px)}
.close-dialog { position:absolute;z-index:2;right:-12px;top:-12px;width:38px;height:38px;background:var(--coral);border:none;border-radius:50%;font-size:28px;line-height:1;color:#fff }
.dialog-layout {display:grid;grid-template-columns:42% 58%;min-height:420px;overflow:hidden;border-radius:9px}
.dialog-image {width:100%;height:100%;object-fit:cover;min-height:420px;background:#ddd}
.dialog-details {padding:60px 37px 30px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.dialog-kicker {font-size:11px;color:var(--coral);font-weight:800;letter-spacing:.14em;margin-bottom:16px}
.dialog-details h2 {font-size:36px;line-height:1.08;margin:0 0 10px;letter-spacing:-.045em;font-weight:900}
.dialog-handle {font-size:18px;color:#888;margin:0 0 33px}
.dialog-desc {font-size:13px;line-height:1.7;color:#666;margin:0 0 25px}
.dialog-actions {display:flex;gap:10px;flex-wrap:wrap}
.dialog-actions a {padding:13px 16px;border-radius:4px;border:1px solid var(--coral);background:var(--coral);color:#fff;font-size:12px;font-weight:700}
.dialog-actions a.secondary {background:white;color:var(--coral)}
@media (max-width:1270px) {
 .header-content {padding:0 24px}
 .main-content {padding-left:24px;padding-right:24px}
 .main-nav {gap:26px}
 .category-frame {padding-left:35px;padding-right:35px}
 .directory-results {padding:0 35px}
}
@media (max-width:980px) {
 .header-content {height:70px}
 .brand {width:145px;flex-basis:145px}
 .main-nav {gap:17px}
 .nav-link {font-size:11px}
 .create-link {padding:13px 15px;font-size:10px}
 .category-frame {gap:12px;padding-left:20px;padding-right:20px}
 .category-name {font-size:15px}
 .avatars img {height:55px;width:55px}
 .profile-grid {gap:15px;grid-template-columns:repeat(3,minmax(0,1fr))}
 .directory-results {padding:0 20px}
 .profile-name {font-size:19px}
 .profile-handle {font-size:14px}
}
@media (max-width:720px) {
 .site-header {position:sticky}
 .header-content {height:70px;padding:0 17px}
 .brand {width:135px;flex:0 0 135px}
 .brand img {width:110px}
 .header-actions {margin-left:auto}
 .menu-btn {width:42px;height:42px;border:1px solid #e7e7e7;background:#fafafa;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
 .menu-btn span {width:19px;height:2px;background:#777}
 .main-nav {display:none;position:absolute;top:70px;left:0;right:0;margin:0;padding:17px;background:white;box-shadow:0 10px 18px #0002;flex-direction:column;align-items:stretch;gap:0}
 .main-nav.open {display:flex}
 .main-nav a {font-size:13px;padding:14px 12px}
 .main-nav .create-link {margin:8px 0;text-align:center;color:white;font-size:12px}
 .main-content {padding:30px 13px 50px}
 .section-heading h1 {font-size:23px}
 .section-heading {gap:8px}
 .heading-rule {height:3px}
 .category-frame {margin:20px 0 20px;gap:9px;padding:0 11px}
 .category-frame::before,.category-frame::after {width:3px;top:-25px;height:40px}
 .category-card {padding:11px 5px;min-height:109px;gap:9px}
 .category-name {font-size:12px;white-space:normal}
 .avatars img {width:40px;height:40px;border-width:2px;margin-left:-8px}
 .directory-results {padding:0 0}
 .profile-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
 .profile-name {font-size:17px}
 .profile-handle {font-size:12px}
 .profile-details {bottom:11px;left:5px;right:5px}
 .search-panel {gap:8px}
 .search-panel #clear-filters {font-size:11px}
 .dialog-layout {grid-template-columns:1fr}
 .dialog-image {height:260px;min-height:0}
 .dialog-details {padding:24px}
 .dialog-details h2 {font-size:26px}
 .dialog-handle {margin-bottom:15px}
}
@media (max-width:390px) {
 .section-heading h1 {font-size:19px}
 .category-name {font-size:10px}
 .avatars img {width:34px;height:34px}
 .profile-name {font-size:15px}
}
.marketplace-cross-sell{display:flex;justify-content:space-between;gap:15px;align-items:center;background:#F6F4FF;border-left:4px solid #6D5EF8;padding:19px 29px;margin:0 47px 26px}.marketplace-cross-sell b{font-size:12px;letter-spacing:.07em}.marketplace-cross-sell p{font-size:12px;color:#7b7274;margin:6px 0 0}.marketplace-cross-sell>div:last-child{display:flex;gap:10px;flex-wrap:wrap}.marketplace-cross-sell a{font-size:11px;font-weight:800;background:white;border:1px solid #6D5EF8;color:#6554E9;padding:11px;border-radius:3px;white-space:nowrap}@media(max-width:900px){.marketplace-cross-sell{margin:0 20px 20px;flex-wrap:wrap}}@media(max-width:720px){.marketplace-cross-sell{padding:15px;margin:0 0 16px}.marketplace-cross-sell a{padding:9px 7px;font-size:10px}}