:root {
  color-scheme: dark;
  --page: #101313;
  --panel: #143336;
  --line: #eaceb5;
  --cream: #fae6cc;
  --cream-deep: #e1c5aa;
  --ink: #111;
  --muted: #999;
  --max: 750px;
}

* { box-sizing: border-box; }
html { background: #090a0a; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: #fff;
  background: #090a0a;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  padding-bottom: calc(2.4rem + env(safe-area-inset-bottom));
}
button { font: inherit; }
img { display: block; max-width: 100%; border: 0; }
.shell { width: 100%; max-width: var(--max); min-height: 100vh; margin: 0 auto; overflow: hidden; background: var(--panel); box-shadow: 0 0 48px rgba(0,0,0,.4); }

.hero { position: relative; background: #143336; }
.hero-grid { position: relative; width: 100%; }
.hero-grid img { width: 100%; height: auto; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,51,54,.08), rgba(20,51,54,.22)); pointer-events: none; }
.brand-mark {
  position: absolute;
  top: 9%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: clamp(22px, 6vw, 48px);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.brand-icon { width: clamp(56px, 13vw, 110px); height: clamp(56px, 13vw, 110px); border-radius: 22%; overflow: hidden; background: transparent url("/assets/reference/logo.png") center/cover no-repeat; font-size: 0; }
.brand-mark > span:last-child { display: none; }
.hero-copy { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; }
.eyebrow, .hero p, .adult-badge { display: none; }
.hero h1 { margin: 0; color: #fff; font-size: clamp(22px, 6vw, 48px); line-height: 1.08; font-weight: 700; letter-spacing: .01em; text-shadow: 0 2px 10px rgba(0,0,0,.24); }

.portrait-strip {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 120px;
  margin-top: 0;
  overflow: hidden;
  background: transparent;
}
.portrait-track {
  display: flex;
  width: max-content;
  height: 120px;
  animation: portrait-marquee 24s linear infinite;
  will-change: transform;
}
.portrait-set { display: flex; flex: 0 0 auto; }
.portrait-strip img { flex: 0 0 80px; width: 80px; height: 120px; object-fit: cover; margin-right: 1px; }

.status-panel {
  display: none;
  margin: 14px 6.5%;
  padding: 10px 14px;
  align-items: center;
  gap: 10px;
  color: #333;
  background: rgba(255,255,255,.94);
  border-radius: 15px;
}
.status-panel:not([hidden]) { display: flex; }
.status-panel strong { display: block; font-size: 14px; }
.status-panel p { margin: 3px 0 0; color: #777; line-height: 1.35; }
.loader { flex: 0 0 auto; width: 21px; height: 21px; border: 2px solid #d6d6d6; border-top-color: #875e44; border-radius: 50%; animation: spin .8s linear infinite; }
.status-panel.success .loader, .status-panel.error .loader { display: none; }

.agent-card {
  display: none;
  margin: 0 6.5% 12px;
  padding: 11px 13px;
  align-items: center;
  gap: 11px;
  color: #333;
  background: #fff;
  border-radius: 15px;
}
.agent-card:not([hidden]) { display: grid; grid-template-columns: auto 1fr auto; }
.agent-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #2481cc; font-weight: 700; }
.agent-kicker { color: #875e44; font-size: 10px; font-weight: 700; }
.agent-card h2 { margin: 2px 0; font-size: 15px; }
.agent-card p { margin: 0; color: #777; font-size: 11px; }
.online-dot { color: #278a49; font-size: 10px; white-space: nowrap; }

.profiles { padding: 0 8% 24px; background-image: url("/assets/reference/bg.png"); background-position: top center; background-repeat: no-repeat; background-size: 100% auto; }
.profile-card { display: flex; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.profile-card > img { flex: 0 0 122px; width: 122px; height: 162px; border: 1px solid #eed3ba; border-radius: 20px 20px 20px 8px; object-fit: cover; }
.profile-content { min-width: 0; flex: 1; }
.profile-heading { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.profile-heading > span { position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; color: #875e44; background: linear-gradient(to bottom, var(--cream-deep), var(--cream)); border-radius: 8px 8px 8px 0; font-size: 12px; white-space: nowrap; }
.profile-heading > span::before { content: ""; width: 17px; height: 17px; background: url("/assets/reference/v.png") center/contain no-repeat; }
.profile-heading h2 { margin: 0; color: #fff; font-size: 13px; line-height: 1.3; font-weight: 700; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.tags span { display: inline-block; padding: 3px 6px; color: #333; background: #fae7ce; border-radius: 4px; font-size: 11px; }
.meta { margin: 5px 0; color: #999; line-height: 1.25; }
.card-cta, #mainContactButton, .more { position: relative; overflow: hidden; border: 0; color: var(--ink); background: linear-gradient(to bottom, var(--cream-deep), var(--cream)); cursor: pointer; font-weight: 700; text-decoration: none; transition: filter .18s ease, transform .18s ease; }
.card-cta { display: block; width: 100%; padding: 6px 5px; border-radius: 999px; font-size: 12px; text-align: center; }
.card-cta:hover, #mainContactButton:hover, .more:hover { filter: brightness(1.04); transform: translateY(-1px); }
.card-cta:focus-visible, #mainContactButton:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.trust { display: none; }
.card-cta::after, #mainContactButton::after, .more::after { content: ""; position: absolute; z-index: 1; top: -35%; bottom: -35%; left: 0; width: 34%; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.14) 28%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.14) 72%, transparent 100%); transform: translateX(-210%) skewX(-18deg); animation: button-shine 2.8s ease-in-out infinite; pointer-events: none; }
.more { display: block; width: 60%; margin: 12px auto 24px; padding: 10px 8px; border-radius: 999px; font-size: 14px; }

.sticky-cta {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: var(--max);
  min-height: 2.4rem;
  padding: 0 10px calc(env(safe-area-inset-bottom) + 5px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: #141414;
}
.sticky-brand { min-width: 0; display: flex; align-items: center; gap: 8px; flex: 1; }
.reference-logo { width: 1.066rem; height: 1.066rem; border-radius: .233rem; object-fit: cover; flex: 0 0 auto; }
.sticky-brand strong, .sticky-brand small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-brand strong { color: #f0d9a9; font-size: 15px; line-height: 1.2; }
.sticky-brand small { margin-top: 2px; color: #fff; font-size: 10px; line-height: 1.25; }
#mainContactButton { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; min-height: 1rem; max-width: 44%; padding: 7px 10px; border-radius: 999px; font-size: 11px; white-space: normal; text-align: center; animation: flash 1.4s infinite; }
#mainContactButton img { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; }
#mainContactButton:disabled { cursor: wait; opacity: .72; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flash { 0%, 50%, 100% { transform: scale(.98); } 25%, 75% { transform: scale(1); } }
@keyframes button-shine {
  0%, 18% { transform: translateX(-210%) skewX(-18deg); }
  58%, 100% { transform: translateX(390%) skewX(-18deg); }
}
@keyframes portrait-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (min-width: 750px) {
  .profile-card > img { flex-basis: 142px; width: 142px; height: 190px; }
  .profile-heading h2 { font-size: 18px; }
  .tags span, .meta { font-size: 14px; }
  .card-cta { font-size: 16px; padding: 9px; }
  #mainContactButton { min-width: 220px; font-size: 16px; }
}
@media (max-width: 420px) {
  .sticky-brand small { display: none; }
  .sticky-brand strong { max-width: 115px; }
  .profile-card { gap: 18px; }
  .profile-card > img { flex-basis: 122px; width: 122px; height: 162px; }
  .profile-heading h2 { font-size: 14px; line-height: 1.25; }
  .tags span { font-size: 10px; }
  .meta { font-size: 12px; }
  .card-cta { font-size: 12px; padding: 8px 6px; }
  .more { width: 62%; font-size: 14px; }
  .hero-copy { left: 6px; right: 6px; bottom: 7%; }
  .hero h1 { font-size: clamp(16px, 5.3vw, 22px); letter-spacing: -.035em; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}