@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700;9..40,900&family=Space+Mono:wght@400;700&family=Instrument+Serif:ital@0;1&display=swap");

:root{
  --yellow:#FFD600;
  --yellow-soft:#FFF16A;
  --yellow-deep:#E8C200;
  --purple:#7C3AED;
  --purple-deep:#5B21B6;
  --purple-soft:#DDD6FE;
  --cream:#F7F4EA;
  --paper:#FFFCF1;
  --ink:#09090B;
  --ink-2:#111114;
  --grey:#2A2A2E;
  --muted:rgba(9,9,11,.64);
  --line:rgba(9,9,11,.16);
  --white:#FFFFFF;
  --wrap:min(1480px, calc(100% - clamp(1rem,4vw,4.5rem)));
  --head:"Archivo Black", Impact, sans-serif;
  --serif:"Instrument Serif", "Times New Roman", serif;
  --body:"DM Sans", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);max-width:100%;overflow-x:hidden}
body{
  margin:0;
  min-height:100vh;
  width:100%;
  max-width:100%;
  color:var(--ink);
  font-family:var(--body);
  background:
    radial-gradient(circle at 92% 10%,rgba(124,58,237,.09),transparent 26rem),
    radial-gradient(circle at 5% 18%,rgba(255,214,0,.16),transparent 26rem),
    linear-gradient(180deg,var(--paper),var(--cream) 72%,var(--paper)),
    var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(9,9,11,.025) 1px,transparent 1px),
    linear-gradient(rgba(9,9,11,.025) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 62%);
  z-index:-1;
}
::selection{background:var(--yellow);color:var(--ink)}
a{color:inherit;text-decoration:none}
button,select{font:inherit;color:inherit}
button{border:0;background:none;padding:0}
img,svg{display:block;max-width:100%}
h1,h2,h3,p{margin:0}

.wrap{width:var(--wrap);margin-inline:auto}
.site-nav{
  position:sticky;
  top:0;
  z-index:20;
  width:var(--wrap);
  margin:1rem auto 0;
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.72rem .82rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,252,241,.94);
  box-shadow:0 18px 70px rgba(9,9,11,.08);
  backdrop-filter:blur(18px);
}
.brand-lockup{display:flex;align-items:center;gap:.65rem;min-width:0}
.brand-lockup img{width:44px;height:44px;object-fit:contain}
.brand-copy{display:grid;gap:.08rem}
.brand-copy strong{font-family:var(--head);font-size:1.05rem;text-transform:uppercase;line-height:1}
.brand-copy span,.nav-meta,.eyebrow,.tiny-label,.chip,.btn,.select,.section-kicker,.stat-label,.creator-meta,.card-index,.mini-label,.footer{
  font-family:var(--mono);
  letter-spacing:0;
}
.brand-copy span,.nav-meta{font-size:.68rem;color:var(--muted);text-transform:uppercase}
.nav-actions{display:flex;align-items:center;gap:.6rem}
.nav-meta{padding:.48rem .62rem;border:1px solid var(--line);border-radius:999px;background:var(--white)}

.btn{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.75rem 1rem;
  border:1px solid var(--ink);
  border-radius:999px;
  background:var(--ink);
  color:var(--white);
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.btn svg{width:17px;height:17px;fill:currentColor;stroke:currentColor;stroke-width:0}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(9,9,11,.16)}
.btn.secondary{background:var(--white);color:var(--ink)}
.btn.secondary:hover{background:var(--yellow)}
.btn.purple{background:var(--purple);color:var(--white)}
.btn.purple:hover{box-shadow:5px 5px 0 var(--ink)}

.hero{
  width:var(--wrap);
  margin:0 auto;
  padding:clamp(3rem,7vw,6.8rem) 0 clamp(2.4rem,5vw,4rem);
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(330px,.84fr);
  gap:clamp(1.5rem,5vw,5rem);
  align-items:end;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  width:max-content;
  max-width:100%;
  padding:.55rem .72rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.7);
  color:rgba(9,9,11,.72);
  font-size:.66rem;
  text-transform:uppercase;
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--yellow-deep);box-shadow:0 0 0 4px rgba(255,214,0,.22)}
.hero h1{
  max-width:10ch;
  margin-top:1rem;
  font-family:var(--head);
  font-size:7.4rem;
  line-height:.8;
  text-transform:uppercase;
  letter-spacing:0;
}
.hero h1 em{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  color:var(--purple);
  text-transform:lowercase;
}
.hero-copy{
  max-width:50ch;
  margin-top:1.25rem;
  color:rgba(9,9,11,.72);
  font-size:1.22rem;
  line-height:1.55;
  font-weight:700;
}
.hero-panel{
  border:1px solid var(--ink);
  border-radius:8px;
  background:var(--white);
  box-shadow:0 28px 80px rgba(9,9,11,.14);
  overflow:hidden;
}
.hero-panel-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.85rem;
  border-bottom:1px solid var(--ink);
  background:var(--yellow);
}
.chip-row{display:flex;gap:5px}
.chip-row i{width:12px;height:12px;display:block;background:var(--ink)}
.chip-row i:nth-child(1){background:var(--yellow-deep)}
.chip-row i:nth-child(3){background:var(--purple)}
.tiny-label{font-size:.58rem;text-transform:uppercase}
.hero-panel-body{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;padding:.85rem}
.hero-stat{
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:.9rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--cream);
}
.hero-stat strong{font-family:var(--head);font-size:3.2rem;line-height:.86;text-transform:uppercase}
.hero-stat span{margin-top:.8rem;color:var(--muted);font-family:var(--mono);font-size:.62rem;text-transform:uppercase}
.hero-stat.wide{grid-column:1/-1;background:var(--yellow);color:var(--ink)}
.hero-stat.wide span{color:rgba(9,9,11,.62)}
.hero-mark{
  width:72px;
  height:72px;
  margin-left:auto;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(9,9,11,.16));
}

.controls{
  position:sticky;
  top:86px;
  z-index:15;
  width:var(--wrap);
  margin:0 auto 1.2rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  padding:.72rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,252,241,.9);
  backdrop-filter:blur(18px);
}
.filters{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filter{
  min-height:44px;
  padding:.65rem .9rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--ink);
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
}
.filter.is-active{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.sort-wrap{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.sort-wrap label{font-family:var(--mono);font-size:.65rem;text-transform:uppercase;color:var(--muted)}
.select{
  min-height:44px;
  padding:.65rem 2.1rem .65rem .85rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--ink);
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
}

.roster-shell{width:var(--wrap);margin:0 auto;padding:0 0 clamp(4rem,7vw,7rem)}
.roster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.creator-card{
  --accent:var(--yellow);
  position:relative;
  min-height:520px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--ink);
  border-radius:8px;
  background:
    radial-gradient(circle at 86% 10%,color-mix(in srgb,var(--accent),transparent 15%),transparent 9rem),
    linear-gradient(180deg,color-mix(in srgb,var(--accent),#fff 74%) 0 35%,var(--white) 35% 100%);
  box-shadow:0 24px 70px rgba(9,9,11,.13);
  overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.creator-card:hover{transform:translateY(-5px);box-shadow:0 34px 90px rgba(9,9,11,.18)}
.creator-card.is-hidden{display:none}
.creator-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(9,9,11,.08) 1px,transparent 1px);
  background-size:14px 14px;
  mask-image:linear-gradient(180deg,#000,transparent 58%);
  pointer-events:none;
}
.card-index{
  position:absolute;
  z-index:2;
  top:.85rem;
  left:.85rem;
  padding:.34rem .5rem;
  border:1px solid rgba(9,9,11,.2);
  border-radius:999px;
  background:rgba(255,255,255,.7);
  font-size:.58rem;
  font-weight:700;
  text-transform:uppercase;
}
.creator-photo{
  position:relative;
  z-index:1;
  height:225px;
  margin:3.1rem .85rem 0;
  border:1px solid var(--ink);
  border-radius:8px;
  overflow:hidden;
  background:var(--cream);
  box-shadow:0 14px 28px rgba(9,9,11,.18);
}
.creator-photo img{width:100%;height:100%;object-fit:cover}
.creator-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(9,9,11,.32));
}
.creator-body{
  position:relative;
  z-index:1;
  display:flex;
  flex:1;
  flex-direction:column;
  padding:1rem;
}
.creator-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.42rem;
  color:var(--muted);
  font-size:.62rem;
  text-transform:uppercase;
}
.creator-name{
  margin-top:.75rem;
  font-family:var(--head);
  font-size:3rem;
  line-height:.86;
  text-transform:uppercase;
}
.creator-handle{display:block;margin-top:.35rem;color:var(--purple);font-family:var(--mono);font-size:.74rem;font-weight:700}
.creator-tagline{margin-top:.75rem;color:rgba(9,9,11,.68);font-weight:700;line-height:1.45}
.creator-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.45rem;
  margin-top:auto;
  padding-top:1rem;
}
.mini-stat{
  min-height:72px;
  padding:.65rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--cream);
}
.mini-stat strong{display:block;font-family:var(--head);font-size:1.25rem;line-height:.9}
.mini-stat span{display:block;margin-top:.4rem;color:var(--muted);font-family:var(--mono);font-size:.54rem;text-transform:uppercase}
.creator-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.55rem;
  margin-top:1rem;
}

.accent-yellow{--accent:var(--yellow)}
.accent-purple{--accent:var(--purple);color:var(--ink)}
.accent-ink{--accent:var(--ink)}

.media-hero{
  width:var(--wrap);
  margin:0 auto;
  padding:clamp(2.4rem,6vw,5.2rem) 0 1.2rem;
}
.media-sheet{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.38fr);
  gap:clamp(1rem,3vw,3rem);
  align-items:end;
  position:relative;
  border:1px solid var(--ink);
  border-radius:8px;
  padding:clamp(1.1rem,2.4vw,2.2rem);
  background:
    radial-gradient(circle at 88% 18%,rgba(124,58,237,.1),transparent 22rem),
    linear-gradient(135deg,var(--white),rgba(255,252,241,.82));
  overflow:hidden;
  box-shadow:0 34px 110px rgba(9,9,11,.12);
}
.media-sheet::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:7px;
  background:linear-gradient(90deg,var(--yellow) 0 38%,var(--ink) 38% 70%,var(--purple) 70%);
}
.media-intro{position:relative;z-index:1;max-width:820px}
.media-intro h1{
  margin-top:1rem;
  font-family:var(--head);
  font-size:7.2rem;
  line-height:.82;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}
.media-intro h1 em{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  color:var(--purple);
  text-transform:lowercase;
}
.media-intro p{max-width:54ch;margin-top:1rem;color:rgba(9,9,11,.7);font-size:1.12rem;line-height:1.55;font-weight:700}
.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.7rem;
  max-width:720px;
  margin-top:1.4rem;
}
.hero-metrics div{
  padding:.9rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--cream);
}
.hero-metrics strong{display:block;font-family:var(--head);font-size:1.7rem;line-height:.9}
.hero-metrics span{display:block;margin-top:.4rem;color:var(--muted);font-family:var(--mono);font-size:.6rem;text-transform:uppercase}
.media-portrait{
  position:relative;
  z-index:1;
  min-height:430px;
  border:1px solid var(--ink);
  border-radius:8px;
  overflow:hidden;
  background:var(--ink);
}
.media-portrait img{
  width:100%;
  height:100%;
  min-height:430px;
  object-fit:cover;
  filter:saturate(1.08) contrast(1.04);
}
.media-portrait::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 46%,rgba(9,9,11,.62));
}
.media-portrait span{
  position:absolute;
  left:.8rem;
  bottom:.8rem;
  z-index:2;
  padding:.55rem .7rem;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(9,9,11,.62);
  color:var(--white);
  font-family:var(--mono);
  font-size:.62rem;
  text-transform:uppercase;
}
.media-side{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.profile-card,.contact-card,.section-card{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--white);
  box-shadow:0 24px 70px rgba(9,9,11,.1);
}
.profile-card{padding:1rem}
.profile-head{display:flex;gap:.9rem;align-items:center;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.profile-head img{width:76px;height:76px;object-fit:cover;border:1px solid var(--ink);border-radius:8px}
.profile-head strong{display:block;font-family:var(--head);font-size:1.45rem;text-transform:uppercase;line-height:.9}
.profile-head span{display:block;margin-top:.35rem;color:var(--purple);font-family:var(--mono);font-size:.72rem;font-weight:700}
.profile-list{display:grid;gap:.65rem;margin-top:1rem}
.profile-row{display:flex;justify-content:space-between;gap:1rem;padding:.72rem;border:1px solid var(--line);border-radius:8px;background:var(--cream)}
.profile-row span{color:var(--muted);font-family:var(--mono);font-size:.62rem;text-transform:uppercase}
.profile-row strong{font-family:var(--head);font-size:1rem;text-transform:uppercase;text-align:right}
.contact-card{
  padding:1rem;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-soft));
  border-color:rgba(9,9,11,.22);
}
.contact-card h2{font-family:var(--head);font-size:1.6rem;text-transform:uppercase;line-height:.9}
.contact-card p{margin:.65rem 0 1rem;color:rgba(9,9,11,.68);font-weight:700;line-height:1.45}
.contact-actions{display:grid;gap:.55rem}
.contact-actions .btn:first-child{text-transform:none}

.media-content{width:var(--wrap);margin:0 auto;padding:1rem 0 clamp(4rem,7vw,7rem)}
.top-grid{
  display:grid;
  grid-template-columns:minmax(300px,.35fr) minmax(0,1fr);
  gap:1rem;
  align-items:start;
}
.top-grid .section-card{margin-top:0}
.snapshot-card .analytics-grid{grid-template-columns:1fr 1fr 1fr}
.section-card{padding:clamp(1rem,2vw,1.35rem);margin-top:1rem}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--line);
}
.section-head h2{font-family:var(--head);font-size:3rem;line-height:.86;text-transform:uppercase}
.section-kicker{color:var(--purple);font-size:.65rem;text-transform:uppercase}
.analytics-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:1rem;margin-top:1rem}
.metric-panel{padding:1rem;border:1px solid var(--line);border-radius:8px;background:var(--cream)}
.metric-panel h3{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;color:var(--muted)}
.bar-row{display:grid;grid-template-columns:56px 1fr 42px;gap:.7rem;align-items:center;margin-top:.9rem}
.bar-row span{font-family:var(--mono);font-size:.64rem;font-weight:700}
.bar-track{height:10px;background:rgba(9,9,11,.1);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;width:var(--bar);background:linear-gradient(90deg,var(--purple),var(--yellow));border-radius:999px}
.tag-cloud,.location-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.chip{
  padding:.55rem .7rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
}
.location-list{display:grid}
.location-list .chip{display:flex;justify-content:space-between;gap:1rem}
.examples-card{background:linear-gradient(180deg,var(--white),rgba(255,252,241,.82))}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem;align-items:start}
.embed-card{
  position:relative;
  min-width:0;
  padding:.82rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(180deg,var(--cream),var(--white));
  box-shadow:0 18px 52px rgba(9,9,11,.08);
  overflow:hidden;
}
.embed-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  min-height:48px;
  margin-bottom:.7rem;
}
.embed-card-head div{display:grid;gap:.35rem;min-width:0}
.embed-card-head strong{
  display:block;
  font-family:var(--head);
  font-size:1rem;
  line-height:.9;
  text-transform:uppercase;
}
.embed-card-head a{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--ink);
}
.embed-card-head svg{width:17px;height:17px;fill:currentColor}
.embed-card .mini-label{
  color:var(--muted);
  font-size:.62rem;
  font-weight:700;
  text-transform:uppercase;
}
.phone-frame{
  position:relative;
  height:620px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--white);
  overflow:hidden;
}
.phone-frame::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:82px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--white) 82%);
}
.tiktok-embed{
  max-width:100%!important;
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  border-radius:8px!important;
  overflow:hidden!important;
  background:var(--white)!important;
}
.embed-card iframe{width:100%!important;max-width:100%!important;border-radius:8px!important}
.sponsored{display:inline-flex;width:max-content;padding:.38rem .52rem;border:1px solid var(--ink);border-radius:999px;background:var(--yellow);font-family:var(--mono);font-size:.58rem;font-weight:700;text-transform:uppercase}
.bio-grid{display:grid;grid-template-columns:1fr .48fr;gap:1rem;margin-top:1rem}
.bio-copy{padding:1.15rem;border:1px solid var(--line);border-radius:8px;background:var(--cream);font-size:1.08rem;line-height:1.7;font-weight:600;color:rgba(9,9,11,.72)}
.fit-card{padding:1.15rem;border:1px solid var(--ink);border-radius:8px;background:var(--ink);color:var(--white)}
.fit-card h3{font-family:var(--head);font-size:1.55rem;line-height:.9;text-transform:uppercase}
.fit-card p{margin-top:.8rem;color:rgba(255,255,255,.72);line-height:1.55;font-weight:700}
.fit-card .tag-cloud .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--yellow)}

.footer{
  width:var(--wrap);
  margin:0 auto;
  padding:2rem 0 3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  color:var(--muted);
  font-size:.66rem;
  text-transform:uppercase;
}
.footer img{width:34px;height:34px;object-fit:contain}

@media (max-width:1180px){
  .roster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero,.media-sheet,.top-grid{grid-template-columns:1fr}
  .media-portrait,.media-portrait img{min-height:360px}
  .analytics-grid,.bio-grid,.snapshot-card .analytics-grid{grid-template-columns:1fr}
  .hero h1,.media-intro h1{font-size:6.2rem}
}
@media (max-width:820px){
  .site-nav{position:relative;top:auto;margin-top:.65rem}
  .nav-meta{display:none}
  .hero{padding-top:2.6rem}
  .hero h1,.media-intro h1{font-size:4.15rem}
  .hero-stat strong,.section-head h2{font-size:2.25rem}
  .creator-name{font-size:2.65rem}
  .controls{position:relative;top:auto;align-items:flex-start;flex-direction:column}
  .sort-wrap{width:100%;justify-content:space-between}
  .select{min-width:180px}
  .roster-grid,.video-grid{grid-template-columns:1fr}
  .creator-stats{grid-template-columns:1fr 1fr}
  .creator-actions{grid-template-columns:1fr}
  .hero-metrics{grid-template-columns:1fr}
  .media-portrait,.media-portrait img{min-height:330px}
  .phone-frame{height:680px}
  .footer{align-items:flex-start;flex-direction:column}
}
@media (max-width:560px){
  .site-nav{width:calc(100% - 1rem)}
  .brand-copy span{display:none}
  .nav-actions .btn{padding:.72rem .82rem}
  .hero{padding-top:2rem;padding-bottom:1.6rem}
  .hero-panel-body{grid-template-columns:1fr 1fr;gap:.5rem;padding:.55rem}
  .hero-stat{min-height:88px;padding:.72rem}
  .hero-stat.wide{min-height:122px}
  .hero-stat strong{font-size:2rem}
  .media-intro h1{font-size:3.05rem}
  .hero h1{font-size:3.5rem}
  .hero-mark{width:54px;height:54px}
  .hero-copy,.media-intro p{font-size:1rem}
  .creator-photo{height:205px}
  .creator-stats{grid-template-columns:1fr}
  .profile-head{align-items:flex-start;flex-direction:column}
  .section-head{align-items:flex-start;flex-direction:column}
  .media-sheet{padding:1rem}
  .media-portrait,.media-portrait img{min-height:280px}
  .phone-frame{height:620px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* Roster page redesign */
.roster-hero{
  width:var(--wrap);
  margin:0 auto;
  padding:clamp(2.4rem,5vw,4.8rem) 0 1.1rem;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.42fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
}
.roster-hero-copy h1{
  max-width:12ch;
  margin-top:1rem;
  font-family:var(--head);
  font-size:6.8rem;
  line-height:.82;
  text-transform:uppercase;
}
.roster-hero-copy p{
  max-width:58ch;
  margin-top:1rem;
  color:rgba(9,9,11,.68);
  font-size:1.15rem;
  line-height:1.6;
  font-weight:700;
}
.roster-proof{
  position:relative;
  display:grid;
  gap:.65rem;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.72);
  box-shadow:0 24px 80px rgba(9,9,11,.1);
  overflow:hidden;
}
.roster-proof::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  background:linear-gradient(90deg,var(--yellow) 0 42%,var(--ink) 42% 70%,var(--purple) 70%);
}
.roster-proof div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.86rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--cream);
}
.roster-proof span{
  color:var(--muted);
  font-family:var(--mono);
  font-size:.62rem;
  text-transform:uppercase;
}
.roster-proof strong{
  font-family:var(--head);
  font-size:1.25rem;
  line-height:.95;
  text-align:right;
  text-transform:uppercase;
}
.roster-toolbar{
  width:var(--wrap);
  margin:0 auto 1rem;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.roster-toolbar h2{
  margin-top:.25rem;
  font-family:var(--head);
  font-size:2.3rem;
  line-height:.9;
  text-transform:uppercase;
}
.roster-controls{
  display:flex;
  align-items:center;
  gap:.7rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.roster-shell{padding-top:.6rem}
.roster-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.creator-card{
  min-height:auto;
  border:1px solid var(--line);
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,252,241,.82)),
    var(--white);
  box-shadow:0 26px 80px rgba(9,9,11,.1);
  overflow:hidden;
}
.creator-card::before{
  opacity:0;
}
.creator-card::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  background:linear-gradient(90deg,var(--accent),var(--ink) 58%,var(--purple));
}
.creator-card-top{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  gap:.7rem;
  padding:1rem 1rem 0;
}
.card-index{
  position:static;
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:.42rem .56rem;
  border:1px solid var(--line);
  background:var(--cream);
}
.platform-pill{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:.42rem .64rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--ink);
  color:var(--yellow);
  font-family:var(--mono);
  font-size:.58rem;
  font-weight:700;
  text-transform:uppercase;
}
.creator-body{
  padding:1rem;
}
.creator-id-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1rem;
  align-items:center;
  margin-top:.25rem;
}
.creator-avatar{
  position:relative;
  width:112px;
  height:112px;
  display:block;
  border:2px solid var(--ink);
  border-radius:50%;
  background:var(--cream);
  box-shadow:0 18px 34px rgba(9,9,11,.16);
  overflow:hidden;
  flex:0 0 auto;
}
.creator-avatar::after{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:50%;
  pointer-events:none;
}
.creator-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.creator-id-copy{min-width:0}
.creator-meta{
  gap:.34rem;
  font-size:.58rem;
}
.creator-name{
  margin-top:.45rem;
  font-size:2.25rem;
  line-height:.9;
}
.creator-handle{
  margin-top:.25rem;
}
.creator-tagline{
  min-height:68px;
  margin-top:1rem;
  color:rgba(9,9,11,.64);
  font-size:.98rem;
}
.creator-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.95rem;
}
.creator-tags span{
  padding:.42rem .56rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--cream);
  color:rgba(9,9,11,.68);
  font-family:var(--mono);
  font-size:.57rem;
  font-weight:700;
  text-transform:uppercase;
}
.creator-stats{
  margin-top:1rem;
  padding-top:0;
}
.mini-stat{
  min-height:78px;
  background:rgba(255,252,241,.86);
}
.mini-stat strong{
  font-size:1.2rem;
}
.creator-actions{
  margin-top:.9rem;
}

@media (max-width:1180px){
  .roster-hero{grid-template-columns:1fr}
  .roster-hero-copy h1{font-size:5.4rem}
  .roster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .roster-hero{padding-top:2rem}
  .roster-hero-copy h1{font-size:3.35rem}
  .roster-hero-copy p{font-size:1rem}
  .roster-toolbar{align-items:flex-start;flex-direction:column}
  .roster-controls{width:100%;justify-content:flex-start}
  .roster-grid{grid-template-columns:1fr}
  .creator-id-row{grid-template-columns:auto minmax(0,1fr)}
  .creator-avatar{width:96px;height:96px}
}
@media (max-width:560px){
  .roster-hero{padding-top:1.6rem;gap:1rem}
  .roster-hero-copy h1{font-size:2.95rem}
  .roster-hero-copy p{margin-top:.75rem}
  .roster-proof{display:none}
  .roster-toolbar{padding:.75rem 0;margin-bottom:.7rem}
  .roster-toolbar h2{font-size:1.8rem}
  .roster-controls .filters{width:100%}
  .creator-body{padding:.9rem}
  .creator-id-row{gap:.8rem}
  .creator-avatar{width:86px;height:86px}
  .creator-name{font-size:1.9rem}
  .creator-tagline{min-height:auto}
  .creator-stats{grid-template-columns:1fr}
}

/* High-impact roster and compact media-kit pass */
body{
  background:
    radial-gradient(circle at 90% 8%,rgba(124,58,237,.15),transparent 22rem),
    radial-gradient(circle at 15% 12%,rgba(255,214,0,.22),transparent 24rem),
    radial-gradient(circle at 62% 34%,rgba(0,212,255,.08),transparent 18rem),
    linear-gradient(180deg,#fffdf4 0%,#f7f4ea 58%,#fffaf0 100%);
}

.site-nav{
  border-color:rgba(9,9,11,.12);
  box-shadow:0 18px 60px rgba(9,9,11,.09);
}

.roster-hero{
  position:relative;
  padding-top:clamp(2rem,4vw,4rem);
  padding-bottom:.75rem;
}
.roster-hero::before{
  content:"";
  position:absolute;
  left:54%;
  top:18%;
  width:min(560px,42vw);
  aspect-ratio:1;
  background:
    conic-gradient(from 140deg,var(--yellow),#ff3b7f,var(--purple),#00d4ff,var(--yellow));
  filter:blur(34px);
  opacity:.2;
  transform:rotate(-8deg);
  pointer-events:none;
}
.roster-hero-copy{position:relative;z-index:1}
.roster-hero-copy h1{
  max-width:10ch;
  font-size:clamp(3.6rem,8vw,8.9rem);
  line-height:.78;
}
.roster-hero-copy p{
  max-width:38ch;
  margin-top:.9rem;
  font-size:1.05rem;
  line-height:1.5;
}
.roster-proof{
  z-index:1;
  transform:rotate(-1deg);
  background:rgba(255,255,255,.78);
}
.roster-toolbar{
  margin-bottom:.55rem;
  padding:.82rem 0;
}
.roster-toolbar h2{
  font-size:clamp(1.8rem,3.6vw,3rem);
}

.creator-card{
  min-height:0;
  border-color:rgba(9,9,11,.14);
  background:
    radial-gradient(circle at 22% 25%,color-mix(in srgb,var(--accent),transparent 8%) 0 3.2rem,transparent 3.35rem),
    radial-gradient(circle at 83% 12%,color-mix(in srgb,var(--accent-2),transparent 8%) 0 4.7rem,transparent 4.9rem),
    linear-gradient(135deg,color-mix(in srgb,var(--accent),#fff 72%) 0%,rgba(255,255,255,.95) 46%,color-mix(in srgb,var(--accent-2),#fff 80%) 100%);
  box-shadow:0 24px 70px rgba(9,9,11,.11);
}
.creator-card:hover{
  transform:translateY(-7px) rotate(-.45deg);
  box-shadow:0 34px 90px color-mix(in srgb,var(--accent),rgba(9,9,11,.14) 70%);
}
.creator-card::before{
  content:"";
  position:absolute;
  inset:8px;
  opacity:1;
  border:1px solid rgba(255,255,255,.5);
  border-radius:7px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.38) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
}
.creator-card::after{
  height:8px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.creator-card-top{
  padding:1rem 1rem .55rem;
}
.card-index{
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(12px);
}
.platform-pill{
  border-color:rgba(9,9,11,.18);
  background:var(--ink);
  color:var(--white);
  box-shadow:0 8px 0 color-mix(in srgb,var(--accent),transparent 20%);
}
.creator-body{
  padding:0 1rem 1rem;
}
.creator-id-row{
  gap:1.05rem;
  min-height:142px;
}
.creator-avatar{
  width:124px;
  height:124px;
  border:3px solid var(--ink);
  background:var(--white);
  box-shadow:
    0 0 0 8px color-mix(in srgb,var(--accent),transparent 40%),
    0 22px 42px rgba(9,9,11,.18);
}
.creator-avatar::before{
  content:"";
  position:absolute;
  inset:-13px;
  border-radius:50%;
  border:2px solid color-mix(in srgb,var(--accent-2),transparent 10%);
  pointer-events:none;
}
.creator-name{
  margin-top:0;
  font-size:clamp(2rem,3vw,2.7rem);
  text-wrap:balance;
}
.creator-handle{
  color:color-mix(in srgb,var(--accent-2),var(--ink) 20%);
}
.creator-tags{
  min-height:34px;
  margin-top:.8rem;
}
.creator-tags span{
  background:rgba(255,255,255,.68);
  color:var(--ink);
  border-color:rgba(9,9,11,.12);
}
.creator-stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem;
  margin-top:.75rem;
}
.mini-stat{
  min-height:74px;
  border-color:rgba(9,9,11,.13);
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(12px);
}
.mini-stat strong{
  font-size:1.45rem;
}
.creator-actions{
  margin-top:.75rem;
}

.media-sheet{
  background:
    radial-gradient(circle at 78% 8%,color-mix(in srgb,var(--accent-2),transparent 10%),transparent 17rem),
    radial-gradient(circle at 12% 20%,color-mix(in srgb,var(--accent),transparent 2%),transparent 22rem),
    linear-gradient(135deg,#fff,#fff9df);
}
.media-sheet::before{
  height:9px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.media-intro h1{
  max-width:9ch;
}
.media-intro p{
  max-width:42ch;
}
.hero-metrics div{
  background:rgba(255,255,255,.72);
  border-color:rgba(9,9,11,.13);
}
.media-portrait{
  border-radius:999px 999px 8px 8px;
  box-shadow:0 0 0 10px color-mix(in srgb,var(--accent),transparent 50%);
}
.profile-card{
  padding:1rem;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent),#fff 78%),#fff);
  border-color:rgba(9,9,11,.13);
}
.profile-head{
  border-bottom:0;
  padding-bottom:0;
}
.profile-head img{
  width:88px;
  height:88px;
  border-radius:50%;
  border:2px solid var(--ink);
}
.profile-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.9rem;
}
.contact-card{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.contact-card p{
  color:rgba(9,9,11,.72);
}
.snapshot-card .analytics-grid{
  grid-template-columns:1fr 1fr;
}
.snapshot-card .metric-panel:nth-child(3){
  display:none;
}
.metric-panel{
  background:rgba(255,255,255,.68);
}
.bar-fill{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.examples-card{
  background:
    radial-gradient(circle at 12% 10%,color-mix(in srgb,var(--accent),transparent 12%),transparent 15rem),
    linear-gradient(180deg,#fff,#fffaf0);
}
.embed-card{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent),#fff 86%),#fff);
}
.bio-grid{
  grid-template-columns:.7fr 1fr;
}
.bio-copy{
  font-size:1rem;
  line-height:1.55;
}
.fit-card{
  background:linear-gradient(135deg,var(--ink),color-mix(in srgb,var(--accent-2),var(--ink) 58%));
}

@media (max-width:820px){
  .roster-hero::before{left:25%;width:78vw;opacity:.18}
  .creator-id-row{min-height:116px}
  .creator-avatar{width:104px;height:104px}
  .media-portrait{border-radius:8px}
  .snapshot-card .analytics-grid,.bio-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .roster-hero-copy h1{font-size:3.35rem}
  .roster-hero-copy p{max-width:31ch}
  .creator-id-row{gap:.75rem;min-height:96px}
  .creator-avatar{width:88px;height:88px;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent),transparent 45%),0 16px 28px rgba(9,9,11,.16)}
  .creator-card-top{padding:.9rem .9rem .45rem}
  .creator-body{padding:0 .9rem .9rem}
  .creator-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mini-stat{min-height:68px}
  .mini-stat strong{font-size:1.16rem}
  .creator-actions{grid-template-columns:1fr}
  .media-intro h1{font-size:3.35rem}
}

/* Xelo mature color pass */
body{
  background:
    radial-gradient(circle at 88% 8%,rgba(255,214,0,.18),transparent 23rem),
    radial-gradient(circle at 12% 20%,rgba(124,58,237,.06),transparent 24rem),
    linear-gradient(180deg,#fffdf4 0%,#f7f4ea 62%,#fffaf0 100%);
}

.site-nav{
  background:rgba(255,252,241,.94);
  border-color:rgba(9,9,11,.14);
  box-shadow:0 18px 54px rgba(9,9,11,.08);
}

.roster-hero::before{
  left:58%;
  top:16%;
  width:min(520px,38vw);
  background:
    radial-gradient(circle at 32% 42%,rgba(255,214,0,.34),transparent 16rem),
    radial-gradient(circle at 70% 30%,rgba(37,68,255,.08),transparent 15rem);
  filter:blur(20px);
  opacity:1;
  transform:none;
}

.creator-card{
  border-color:rgba(9,9,11,.16);
  background:
    linear-gradient(90deg,var(--accent) 0 7px,transparent 7px),
    linear-gradient(135deg,#fff 0%,#fffdf4 58%,color-mix(in srgb,var(--accent),#fff 88%) 100%);
  box-shadow:0 24px 64px rgba(9,9,11,.1);
}
.creator-card:hover{
  transform:translateY(-5px);
  box-shadow:0 30px 76px rgba(9,9,11,.14);
}
.creator-card::before{
  inset:10px;
  border-color:rgba(9,9,11,.055);
  background:
    linear-gradient(90deg,rgba(9,9,11,.035) 1px,transparent 1px),
    linear-gradient(rgba(9,9,11,.03) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 76%);
}
.creator-card::after{
  height:4px;
  background:linear-gradient(90deg,var(--accent),var(--ink));
}
.platform-pill{
  background:var(--ink);
  color:var(--yellow);
  box-shadow:none;
}
.card-index{
  background:rgba(255,255,255,.8);
}
.creator-avatar{
  border:2px solid var(--ink);
  box-shadow:
    0 0 0 5px color-mix(in srgb,var(--accent),#fff 62%),
    0 18px 34px rgba(9,9,11,.14);
}
.creator-avatar::before{
  display:none;
}
.creator-avatar::after{
  border-color:rgba(255,255,255,.46);
}
.creator-handle{
  color:var(--purple);
}
.creator-tags span,
.mini-stat{
  background:rgba(255,255,255,.74);
  border-color:rgba(9,9,11,.12);
}
.mini-stat{
  backdrop-filter:none;
}
.creator-actions .btn.secondary{
  background:rgba(255,255,255,.9);
}

.media-sheet{
  border-color:rgba(9,9,11,.18);
  background:
    linear-gradient(90deg,var(--accent) 0 8px,transparent 8px),
    radial-gradient(circle at 18% 16%,color-mix(in srgb,var(--accent),transparent 72%),transparent 18rem),
    linear-gradient(135deg,#fff,#fffaf0);
}
.media-sheet::before{
  height:0;
}
.media-portrait{
  box-shadow:0 0 0 8px color-mix(in srgb,var(--accent),#fff 70%);
}
.profile-card{
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent),#fff 88%),#fff);
}
.contact-card{
  background:linear-gradient(135deg,var(--yellow),#fff5a8);
}
.examples-card{
  background:
    linear-gradient(90deg,var(--ink) 0 7px,transparent 7px),
    linear-gradient(180deg,#fff,#fffaf0);
}
.embed-card{
  background:#fffdf7;
}
.bar-fill{
  background:linear-gradient(90deg,var(--accent),var(--ink));
}
.fit-card{
  background:linear-gradient(135deg,var(--ink),#26262b);
}

@media (max-width:560px){
  .creator-avatar{
    box-shadow:0 0 0 4px color-mix(in srgb,var(--accent),#fff 64%),0 14px 26px rgba(9,9,11,.14);
  }
}

/* V15 controlled gaming pop */
body{
  background:
    radial-gradient(circle at 86% 8%,rgba(255,214,0,.24),transparent 22rem),
    radial-gradient(circle at 8% 22%,rgba(124,58,237,.1),transparent 25rem),
    radial-gradient(circle at 58% 36%,rgba(37,68,255,.06),transparent 20rem),
    linear-gradient(180deg,#fffdf4 0%,#f7f4ea 62%,#fffaf0 100%);
}

.roster-hero::before{
  width:min(600px,43vw);
  background:
    radial-gradient(circle at 22% 42%,rgba(255,214,0,.42),transparent 14rem),
    radial-gradient(circle at 70% 26%,rgba(124,58,237,.14),transparent 16rem),
    radial-gradient(circle at 46% 70%,rgba(37,68,255,.08),transparent 15rem);
  filter:blur(22px);
}

.creator-card{
  background:
    linear-gradient(90deg,var(--accent) 0 7px,transparent 7px),
    radial-gradient(circle at 84% 16%,color-mix(in srgb,var(--accent),transparent 72%) 0 4.8rem,transparent 5rem),
    radial-gradient(circle at 16% 96%,color-mix(in srgb,var(--accent-2),transparent 76%) 0 7rem,transparent 7.2rem),
    linear-gradient(135deg,#fff 0%,#fffdf4 58%,color-mix(in srgb,var(--accent),#fff 84%) 100%);
  box-shadow:0 24px 70px rgba(9,9,11,.11);
}
.creator-card::before{
  border-color:rgba(9,9,11,.045);
  background:
    linear-gradient(90deg,rgba(9,9,11,.035) 1px,transparent 1px),
    linear-gradient(rgba(9,9,11,.03) 1px,transparent 1px),
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.65),transparent 5rem);
  background-size:34px 34px,34px 34px,auto;
}
.creator-card::after{
  height:5px;
  background:linear-gradient(90deg,var(--accent),var(--ink) 58%,var(--accent-2));
}
.creator-card:hover{
  transform:translateY(-6px);
  box-shadow:0 32px 82px rgba(9,9,11,.16);
}
.creator-avatar{
  box-shadow:
    0 0 0 5px color-mix(in srgb,var(--accent),#fff 54%),
    0 0 0 9px color-mix(in srgb,var(--accent-2),transparent 74%),
    0 18px 34px rgba(9,9,11,.14);
}
.creator-tags span{
  background:rgba(255,255,255,.82);
}
.mini-stat{
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,252,241,.78));
}
.mini-stat:first-child{
  border-color:color-mix(in srgb,var(--accent),rgba(9,9,11,.16) 55%);
}
.creator-actions .btn.secondary:hover{
  background:var(--yellow);
}

.media-sheet{
  background:
    linear-gradient(90deg,var(--accent) 0 8px,transparent 8px),
    radial-gradient(circle at 16% 22%,color-mix(in srgb,var(--accent),transparent 64%),transparent 18rem),
    radial-gradient(circle at 88% 18%,color-mix(in srgb,var(--accent-2),transparent 70%),transparent 16rem),
    linear-gradient(135deg,#fff,#fffaf0);
}
.media-portrait{
  box-shadow:
    0 0 0 8px color-mix(in srgb,var(--accent),#fff 62%),
    0 24px 60px rgba(9,9,11,.14);
}
.profile-card{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent),transparent 78%),transparent 8rem),
    linear-gradient(160deg,#fff,#fffaf0);
}
.contact-card{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent-2),transparent 62%),transparent 7rem),
    linear-gradient(135deg,var(--yellow),#fff5a8);
}
.metric-panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,252,241,.78));
}
.examples-card{
  background:
    linear-gradient(90deg,var(--ink) 0 7px,transparent 7px),
    radial-gradient(circle at 18% 8%,color-mix(in srgb,var(--accent),transparent 84%),transparent 14rem),
    linear-gradient(180deg,#fff,#fffaf0);
}
.embed-card{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--accent),#fff 93%),#fffdf7);
}

@media (max-width:560px){
  .creator-avatar{
    box-shadow:
      0 0 0 4px color-mix(in srgb,var(--accent),#fff 55%),
      0 0 0 7px color-mix(in srgb,var(--accent-2),transparent 78%),
      0 14px 26px rgba(9,9,11,.14);
  }
}

/* Media kit snapshot balance */
.kit-snapshot{
  padding:clamp(1rem,2vw,1.35rem);
  border:1px solid rgba(9,9,11,.14);
  border-radius:8px;
  background:
    linear-gradient(90deg,var(--accent) 0 7px,transparent 7px),
    linear-gradient(180deg,#fff,#fffdf4);
  box-shadow:0 22px 70px rgba(9,9,11,.08);
}
.kit-snapshot + .section-card{
  margin-top:1rem;
}
.snapshot-bento{
  display:grid;
  grid-template-columns:1fr 1.28fr 1fr 1.05fr;
  gap:1rem;
  margin-top:1rem;
  align-items:stretch;
}
.snapshot-tile{
  min-height:210px;
  height:100%;
  margin:0;
  box-shadow:none;
}
.snapshot-tile.profile-card,
.snapshot-tile.metric-panel,
.snapshot-tile.contact-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:1rem;
  border:1px solid rgba(9,9,11,.12);
  border-radius:8px;
}
.snapshot-tile.profile-card{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent),transparent 78%),transparent 8rem),
    linear-gradient(180deg,#fff,#fffaf0);
}
.snapshot-tile .profile-head{
  border-bottom:0;
  padding-bottom:0;
}
.snapshot-tile .profile-head img{
  width:88px;
  height:88px;
}
.snapshot-tile .profile-tags,
.snapshot-tile .tag-cloud{
  margin-top:1rem;
}
.snapshot-tile.contact-card{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent-2),transparent 62%),transparent 7rem),
    linear-gradient(135deg,var(--yellow),#fff5a8);
}
.snapshot-tile.contact-card h2{
  font-size:1.45rem;
}
.snapshot-tile.contact-card p{
  margin:.7rem 0 1rem;
}
.snapshot-tile.contact-card .contact-actions{
  margin-top:auto;
}
.snapshot-tile.metric-panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,252,241,.8));
}
.snapshot-tile.metric-panel h3{
  margin-bottom:.35rem;
}

@media (max-width:1180px){
  .snapshot-bento{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:720px){
  .snapshot-bento{
    grid-template-columns:1fr;
  }
  .snapshot-tile{
    min-height:auto;
  }
  .snapshot-tile.profile-card{
    gap:1rem;
  }
}

/* V17 creator card personality + scroll reveal */
.reveal-card{
  opacity:0;
  transform:translateY(34px) scale(.985);
  transition:
    opacity .28s var(--ease),
    transform .58s var(--ease) var(--delay),
    box-shadow .24s var(--ease),
    border-color .24s var(--ease);
}
.reveal-card.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.creator-card{
  isolation:isolate;
  min-height:398px;
}
.creator-card:hover{
  transform:translateY(-7px);
}
.creator-card-art{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.creator-card-art span{
  position:absolute;
  display:block;
  border:1px solid color-mix(in srgb,var(--accent),transparent 26%);
  background:color-mix(in srgb,var(--accent),transparent 82%);
}
.creator-card-art span:nth-child(1){
  right:-2.2rem;
  top:2.5rem;
  width:9.5rem;
  height:9.5rem;
  border-radius:999px;
}
.creator-card-art span:nth-child(2){
  left:1rem;
  bottom:-2.4rem;
  width:8.8rem;
  height:8.8rem;
  transform:rotate(8deg);
  border-radius:8px;
  background:color-mix(in srgb,var(--accent-2),transparent 84%);
}
.creator-card-art span:nth-child(3){
  right:1rem;
  bottom:1rem;
  width:3.2rem;
  height:.55rem;
  border-radius:999px;
  background:var(--ink);
  opacity:.12;
}
.creator-card-top,
.creator-body{
  position:relative;
  z-index:1;
}
.creator-signal{
  display:flex;
  align-items:end;
  gap:.28rem;
  height:22px;
  margin-top:.7rem;
}
.creator-signal i{
  display:block;
  width:18px;
  border:1px solid rgba(9,9,11,.16);
  border-radius:999px 999px 4px 4px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
}
.creator-signal i:nth-child(1){height:8px}
.creator-signal i:nth-child(2){height:14px}
.creator-signal i:nth-child(3){height:20px}
.creator-signal i:nth-child(4){height:11px;background:var(--ink)}

.card-variant-0{
  background:
    linear-gradient(90deg,var(--accent) 0 7px,transparent 7px),
    radial-gradient(circle at 85% 18%,color-mix(in srgb,var(--accent),transparent 66%) 0 5.4rem,transparent 5.6rem),
    linear-gradient(135deg,#fff 0%,#fffdf4 54%,color-mix(in srgb,var(--accent-2),#fff 86%) 100%);
}
.card-variant-1{
  background:
    linear-gradient(90deg,var(--accent) 0 7px,transparent 7px),
    linear-gradient(135deg,color-mix(in srgb,var(--accent),#fff 84%) 0%,#fff 34%,#fffdf4 100%);
}
.card-variant-1 .creator-card-art span:nth-child(1){
  right:1rem;
  top:1rem;
  width:7.4rem;
  height:7.4rem;
  border-radius:8px;
  transform:rotate(10deg);
}
.card-variant-1 .creator-card-art span:nth-child(2){
  left:auto;
  right:4.5rem;
  bottom:-3rem;
  width:10rem;
  height:10rem;
  border-radius:999px;
}
.card-variant-1 .creator-avatar{
  box-shadow:
    0 0 0 5px color-mix(in srgb,var(--accent),#fff 58%),
    10px 10px 0 color-mix(in srgb,var(--accent-2),transparent 48%),
    0 18px 34px rgba(9,9,11,.14);
}
.card-variant-2{
  background:
    linear-gradient(90deg,var(--accent) 0 7px,transparent 7px),
    linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--accent),#fff 91%) 58%,#fffdf4 100%);
}
.card-variant-2::before{
  background:
    linear-gradient(120deg,rgba(9,9,11,.04) 25%,transparent 25% 50%,rgba(9,9,11,.04) 50% 75%,transparent 75%),
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.72),transparent 5rem);
  background-size:36px 36px,auto;
}
.card-variant-2 .creator-card-art span:nth-child(1){
  right:-1rem;
  top:auto;
  bottom:4rem;
  width:11rem;
  height:4.2rem;
  border-radius:999px;
  transform:rotate(-14deg);
}
.card-variant-2 .creator-signal i{
  border-radius:3px;
}
.card-midg .platform-pill,
.card-midg .creator-signal i:nth-child(4){
  color:var(--ink);
  background:var(--accent-2);
}
.card-yeetrants .creator-name,
.card-samray .creator-name{
  text-shadow:0 10px 24px color-mix(in srgb,var(--accent),transparent 82%);
}

@media (max-width:820px){
  .creator-card{
    min-height:auto;
  }
}
@media (max-width:560px){
  .reveal-card{
    transform:translateY(22px) scale(.99);
  }
  .creator-card-art span:nth-child(1){
    width:6.6rem;
    height:6.6rem;
  }
  .creator-card-art span:nth-child(2){
    width:6.8rem;
    height:6.8rem;
  }
  .creator-signal{
    height:18px;
    margin-top:.55rem;
  }
  .creator-signal i{
    width:15px;
  }
}

@media (prefers-reduced-motion:reduce){
  .reveal-card,
  .reveal-card.is-visible{
    opacity:1;
    transform:none;
  }
}

/* V19 Xelo color energy pass */
body{
  background:
    radial-gradient(circle at 92% 9%,rgba(255,214,0,.34),transparent 22rem),
    radial-gradient(circle at 76% 27%,rgba(37,68,255,.14),transparent 18rem),
    radial-gradient(circle at 9% 18%,rgba(124,58,237,.13),transparent 26rem),
    radial-gradient(circle at 18% 72%,rgba(163,255,18,.1),transparent 20rem),
    linear-gradient(180deg,#fffdf4 0%,#f5f0e4 57%,#fffaf0 100%);
}

.roster-hero{
  grid-template-columns:minmax(0,1fr) minmax(260px,.46fr);
  align-items:center;
  gap:clamp(1rem,4vw,4rem);
}
.roster-hero::before{
  left:auto;
  right:8%;
  top:10%;
  width:min(560px,42vw);
  background:
    conic-gradient(from 215deg,rgba(255,214,0,.55),rgba(37,68,255,.2),rgba(124,58,237,.22),rgba(255,214,0,.5));
  filter:blur(30px);
  opacity:.78;
}
.roster-brand-panel{
  position:relative;
  z-index:1;
  min-height:clamp(260px,31vw,430px);
  display:grid;
  place-items:center;
  padding:clamp(1rem,2.4vw,2rem);
  border:1px solid rgba(9,9,11,.16);
  border-radius:8px;
  background:
    radial-gradient(circle at 82% 12%,rgba(255,214,0,.62),transparent 8rem),
    radial-gradient(circle at 14% 82%,rgba(124,58,237,.18),transparent 9rem),
    linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,252,241,.68));
  box-shadow:0 34px 110px rgba(9,9,11,.13);
  overflow:hidden;
}
.roster-brand-panel::before,
.roster-brand-panel::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.roster-brand-panel::before{
  inset:12px;
  border:1px solid rgba(9,9,11,.09);
  border-radius:7px;
  background:
    linear-gradient(90deg,rgba(9,9,11,.045) 1px,transparent 1px),
    linear-gradient(rgba(9,9,11,.035) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(135deg,#000,transparent 76%);
}
.roster-brand-panel::after{
  right:-13%;
  bottom:-18%;
  width:58%;
  aspect-ratio:1;
  border:1px solid rgba(9,9,11,.13);
  border-radius:50%;
  background:linear-gradient(135deg,var(--yellow),rgba(255,255,255,.1));
}
.roster-brand-panel img{
  position:relative;
  z-index:1;
  width:min(255px,72%);
  filter:drop-shadow(0 24px 34px rgba(9,9,11,.16));
}
.roster-brand-panel span{
  position:absolute;
  left:1rem;
  bottom:1rem;
  z-index:1;
  padding:.56rem .72rem;
  border:1px solid rgba(9,9,11,.13);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:rgba(9,9,11,.72);
  font-family:var(--mono);
  font-size:.64rem;
  font-weight:700;
  text-transform:uppercase;
}

.creator-card{
  min-height:416px;
  border-color:rgba(9,9,11,.18);
  background:
    linear-gradient(90deg,var(--accent) 0 8px,transparent 8px),
    radial-gradient(circle at 84% 13%,color-mix(in srgb,var(--accent),transparent 56%) 0 5.2rem,transparent 5.35rem),
    radial-gradient(circle at 16% 100%,color-mix(in srgb,var(--accent-2),transparent 66%) 0 8.2rem,transparent 8.4rem),
    linear-gradient(135deg,#fff 0%,#fffaf0 50%,color-mix(in srgb,var(--accent),#fff 82%) 100%);
  box-shadow:0 26px 76px rgba(9,9,11,.12);
}
.creator-card:hover{
  transform:translateY(-8px);
  border-color:rgba(9,9,11,.28);
  box-shadow:
    0 34px 90px rgba(9,9,11,.16),
    0 0 0 7px color-mix(in srgb,var(--accent),transparent 82%);
}
.creator-card::before{
  background:
    linear-gradient(120deg,rgba(9,9,11,.05) 25%,transparent 25% 50%,rgba(9,9,11,.05) 50% 75%,transparent 75%),
    radial-gradient(circle at 78% 16%,rgba(255,255,255,.75),transparent 5rem);
  background-size:34px 34px,auto;
  opacity:.72;
}
.creator-card::after{
  height:7px;
  background:linear-gradient(90deg,var(--accent),var(--ink) 48%,var(--accent-2));
}
.creator-card-art span{
  border-color:color-mix(in srgb,var(--accent),rgba(9,9,11,.18) 32%);
  background:color-mix(in srgb,var(--accent),transparent 72%);
  transition:transform .36s var(--ease), opacity .36s var(--ease);
}
.creator-card:hover .creator-card-art span:nth-child(1){
  transform:translate(-8px,5px) rotate(7deg);
}
.creator-card:hover .creator-card-art span:nth-child(2){
  transform:translate(8px,-7px) rotate(-8deg);
}
.creator-avatar{
  width:132px;
  height:132px;
  border-width:3px;
  box-shadow:
    0 0 0 5px color-mix(in srgb,var(--accent),#fff 50%),
    0 0 0 10px color-mix(in srgb,var(--accent-2),transparent 72%),
    0 20px 40px rgba(9,9,11,.16);
}
.creator-tags span{
  background:rgba(255,255,255,.82);
  box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--accent),transparent 78%);
}
.mini-stat{
  background:
    radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--accent),transparent 76%),transparent 4rem),
    rgba(255,255,255,.82);
}
.mini-stat:first-child{
  background:
    radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--accent-2),transparent 72%),transparent 4rem),
    rgba(255,255,255,.86);
}
.creator-signal i{
  border-color:rgba(9,9,11,.2);
  box-shadow:0 7px 18px color-mix(in srgb,var(--accent),transparent 76%);
}

.card-loupi{
  background:
    linear-gradient(90deg,var(--accent) 0 8px,transparent 8px),
    radial-gradient(circle at 82% 16%,rgba(37,68,255,.2),transparent 7rem),
    linear-gradient(135deg,#fff 0%,#fff7ba 54%,#eef2ff 100%);
}
.card-jovoclan{
  background:
    linear-gradient(90deg,var(--accent) 0 8px,transparent 8px),
    radial-gradient(circle at 20% 98%,rgba(255,214,0,.5),transparent 8rem),
    linear-gradient(135deg,#ffffff 0%,#eef2ff 58%,#fff7bd 100%);
}
.card-yeetrants{
  background:
    linear-gradient(90deg,var(--accent) 0 8px,transparent 8px),
    radial-gradient(circle at 84% 10%,rgba(255,214,0,.5),transparent 7rem),
    linear-gradient(135deg,#fff 0%,#f1eaff 60%,#fff9c6 100%);
}
.card-midg{
  background:
    linear-gradient(90deg,#111114 0 8px,transparent 8px),
    radial-gradient(circle at 86% 14%,rgba(163,255,18,.38),transparent 7rem),
    linear-gradient(135deg,#fff 0%,#f5ffe3 58%,#ececf0 100%);
}
.card-enrico{
  background:
    linear-gradient(90deg,var(--accent) 0 8px,transparent 8px),
    radial-gradient(circle at 84% 12%,rgba(124,58,237,.18),transparent 7rem),
    linear-gradient(135deg,#fff 0%,#fff6ac 56%,#f1eaff 100%);
}
.card-samray{
  background:
    linear-gradient(90deg,var(--accent) 0 8px,transparent 8px),
    radial-gradient(circle at 86% 12%,rgba(255,214,0,.5),transparent 7rem),
    linear-gradient(135deg,#fff 0%,#ede7ff 58%,#fff7be 100%);
}

.media-sheet{
  isolation:isolate;
  overflow:hidden;
  border-color:rgba(9,9,11,.2);
  background:
    radial-gradient(circle at 17% 22%,color-mix(in srgb,var(--accent),transparent 56%),transparent 19rem),
    radial-gradient(circle at 82% 10%,color-mix(in srgb,var(--accent-2),transparent 62%),transparent 17rem),
    linear-gradient(135deg,#fff,#fff7d2 56%,#f7f0ff);
}
.media-sheet::before{
  height:8px;
  background:linear-gradient(90deg,var(--accent),var(--ink) 44%,var(--accent-2));
}
.media-brand-mark{
  position:absolute;
  right:clamp(1rem,3vw,2.4rem);
  top:clamp(1rem,3vw,2.2rem);
  z-index:0;
  width:min(220px,22vw);
  opacity:.06;
  pointer-events:none;
}
.media-intro,
.media-portrait{
  position:relative;
  z-index:1;
}
.hero-metrics div{
  background:
    radial-gradient(circle at 92% 0%,color-mix(in srgb,var(--accent),transparent 72%),transparent 4.5rem),
    rgba(255,255,255,.8);
}
.hero-metrics div:nth-child(2){
  background:
    radial-gradient(circle at 92% 0%,color-mix(in srgb,var(--accent-2),transparent 72%),transparent 4.5rem),
    rgba(255,255,255,.82);
}
.media-portrait{
  box-shadow:
    0 0 0 8px color-mix(in srgb,var(--accent),#fff 56%),
    12px 12px 0 color-mix(in srgb,var(--accent-2),transparent 55%),
    0 26px 68px rgba(9,9,11,.16);
}
.kit-snapshot{
  background:
    linear-gradient(90deg,var(--accent) 0 7px,transparent 7px),
    radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--accent-2),transparent 72%),transparent 14rem),
    linear-gradient(180deg,#fff,#fff8dd);
}
.snapshot-tile.profile-card,
.snapshot-tile.metric-panel,
.snapshot-tile.contact-card,
.embed-card,
.bio-copy,
.fit-card{
  box-shadow:0 16px 46px rgba(9,9,11,.07);
}
.snapshot-tile.profile-card{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent),transparent 62%),transparent 8rem),
    linear-gradient(180deg,#fff,#fffaf0);
}
.snapshot-tile.metric-panel{
  background:
    radial-gradient(circle at 95% 0%,color-mix(in srgb,var(--accent-2),transparent 78%),transparent 6rem),
    linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,252,241,.84));
}
.snapshot-tile.metric-panel:nth-child(3){
  background:
    radial-gradient(circle at 95% 0%,color-mix(in srgb,var(--accent),transparent 78%),transparent 6rem),
    linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,252,241,.84));
}
.snapshot-tile.contact-card{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent-2),transparent 52%),transparent 8rem),
    linear-gradient(135deg,var(--yellow),#fff3a2);
}
.bar-track{
  background:rgba(9,9,11,.1);
  box-shadow:inset 0 0 0 1px rgba(9,9,11,.04);
}
.bar-fill{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.examples-card{
  background:
    linear-gradient(90deg,var(--ink) 0 7px,transparent 7px),
    radial-gradient(circle at 16% 8%,color-mix(in srgb,var(--accent),transparent 68%),transparent 15rem),
    radial-gradient(circle at 92% 20%,color-mix(in srgb,var(--accent-2),transparent 82%),transparent 14rem),
    linear-gradient(180deg,#fff,#fff9e2);
}
.embed-card{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--accent),#fff 88%),#fffdf7);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.embed-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--accent),rgba(9,9,11,.22) 44%);
  box-shadow:0 24px 64px rgba(9,9,11,.11);
}
.fit-card{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent-2),transparent 72%),transparent 8rem),
    linear-gradient(135deg,var(--ink),#202026);
}

@media (max-width:820px){
  .roster-hero{
    grid-template-columns:1fr;
  }
  .roster-brand-panel{
    min-height:230px;
  }
  .roster-brand-panel img{
    width:min(210px,55%);
  }
  .creator-avatar{
    width:110px;
    height:110px;
  }
  .media-brand-mark{
    width:190px;
    opacity:.045;
  }
}
@media (max-width:560px){
  .roster-brand-panel{
    min-height:184px;
  }
  .roster-brand-panel img{
    width:150px;
  }
  .roster-brand-panel span{
    left:.75rem;
    bottom:.75rem;
    font-size:.58rem;
  }
  .creator-card{
    min-height:auto;
  }
  .creator-avatar{
    width:92px;
    height:92px;
    box-shadow:
      0 0 0 4px color-mix(in srgb,var(--accent),#fff 50%),
      0 0 0 7px color-mix(in srgb,var(--accent-2),transparent 74%),
      0 14px 26px rgba(9,9,11,.14);
  }
  .media-brand-mark{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .creator-card:hover .creator-card-art span:nth-child(1),
  .creator-card:hover .creator-card-art span:nth-child(2){
    transform:none;
  }
}

/* V20 centered hero + compact color cards */
.roster-hero{
  display:block;
  max-width:1040px;
  padding-top:clamp(2.5rem,5vw,5rem);
  padding-bottom:clamp(1.4rem,3.4vw,3rem);
  text-align:center;
}
.roster-hero::before{
  left:50%;
  right:auto;
  top:2%;
  width:min(760px,86vw);
  opacity:.78;
  transform:translateX(-50%);
  background:
    radial-gradient(circle at 28% 42%,rgba(255,214,0,.42),transparent 14rem),
    radial-gradient(circle at 72% 28%,rgba(37,68,255,.14),transparent 15rem),
    radial-gradient(circle at 50% 72%,rgba(124,58,237,.16),transparent 17rem);
}
.roster-hero-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.roster-hero-copy h1{
  max-width:11ch;
  margin-top:1rem;
  font-size:clamp(3.7rem,8.6vw,9.4rem);
}
.roster-hero-copy p{
  max-width:36ch;
  margin-inline:auto;
  color:rgba(9,9,11,.7);
}
.roster-brand-panel{
  display:none;
}
.roster-toolbar{
  margin-top:.2rem;
  margin-bottom:.9rem;
}
.roster-grid{
  gap:.85rem;
}

.creator-card{
  min-height:332px;
  border-color:rgba(9,9,11,.16);
  background:
    linear-gradient(90deg,var(--accent) 0 7px,transparent 7px),
    radial-gradient(circle at 86% 12%,color-mix(in srgb,var(--accent),transparent 54%) 0 4.3rem,transparent 4.45rem),
    radial-gradient(circle at 8% 100%,color-mix(in srgb,var(--accent-2),transparent 72%) 0 6.4rem,transparent 6.55rem),
    linear-gradient(135deg,#fff 0%,#fffaf0 60%,color-mix(in srgb,var(--accent),#fff 86%) 100%);
  box-shadow:0 20px 58px rgba(9,9,11,.105);
}
.creator-card:hover{
  transform:translateY(-5px);
  box-shadow:
    0 26px 72px rgba(9,9,11,.14),
    0 0 0 5px color-mix(in srgb,var(--accent),transparent 86%);
}
.creator-card::before{
  inset:10px;
  opacity:.42;
  background:
    linear-gradient(90deg,rgba(9,9,11,.035) 1px,transparent 1px),
    linear-gradient(rgba(9,9,11,.03) 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 68%);
}
.creator-card::after{
  height:5px;
}
.creator-card-art span{
  opacity:.7;
}
.creator-card-art span:nth-child(1){
  right:-1.8rem;
  top:2.2rem;
  width:7.2rem;
  height:7.2rem;
}
.creator-card-art span:nth-child(2){
  left:auto;
  right:3.4rem;
  bottom:-2.8rem;
  width:7.8rem;
  height:7.8rem;
  border-radius:999px;
}
.creator-card-art span:nth-child(3){
  display:none;
}
.creator-card-top{
  padding:.82rem .88rem .35rem;
}
.card-index{
  padding:.28rem .44rem;
  font-size:.54rem;
}
.platform-pill{
  min-height:32px;
  padding:.46rem .6rem;
  font-size:.57rem;
}
.creator-body{
  padding:0 .88rem .88rem;
}
.creator-id-row{
  min-height:96px;
  gap:.82rem;
}
.creator-avatar{
  width:92px;
  height:92px;
  border-width:2px;
  box-shadow:
    0 0 0 4px color-mix(in srgb,var(--accent),#fff 54%),
    0 0 0 7px color-mix(in srgb,var(--accent-2),transparent 76%),
    0 14px 27px rgba(9,9,11,.13);
}
.creator-name{
  font-size:clamp(1.55rem,2.1vw,2.1rem);
  line-height:.88;
}
.creator-handle{
  margin-top:.28rem;
  font-size:.68rem;
}
.creator-tags{
  min-height:28px;
  margin-top:.58rem;
  gap:.35rem;
}
.creator-tags span{
  padding:.42rem .54rem;
  font-size:.56rem;
}
.creator-signal{
  height:16px;
  margin-top:.52rem;
}
.creator-signal i{
  width:14px;
}
.creator-signal i:nth-child(1){height:6px}
.creator-signal i:nth-child(2){height:11px}
.creator-signal i:nth-child(3){height:15px}
.creator-signal i:nth-child(4){height:9px}
.creator-stats{
  gap:.48rem;
  margin-top:.58rem;
}
.mini-stat{
  min-height:58px;
  padding:.55rem;
}
.mini-stat strong{
  font-size:1.08rem;
}
.mini-stat span{
  margin-top:.3rem;
  font-size:.5rem;
}
.creator-actions{
  gap:.48rem;
  margin-top:.65rem;
}
.creator-actions .btn{
  min-height:40px;
  padding:.62rem .7rem;
  font-size:.62rem;
}
.creator-actions .btn svg{
  width:15px;
  height:15px;
}

.card-loupi{
  background:
    linear-gradient(90deg,#FFD600 0 7px,transparent 7px),
    radial-gradient(circle at 87% 13%,rgba(37,68,255,.22),transparent 5.6rem),
    linear-gradient(135deg,#fff 0%,#fff5a9 58%,#eef2ff 100%);
}
.card-jovoclan{
  background:
    linear-gradient(90deg,#2544FF 0 7px,transparent 7px),
    radial-gradient(circle at 87% 12%,rgba(255,214,0,.48),transparent 5.8rem),
    linear-gradient(135deg,#fff 0%,#edf1ff 56%,#fff4a6 100%);
}
.card-yeetrants{
  background:
    linear-gradient(90deg,#7C3AED 0 7px,transparent 7px),
    radial-gradient(circle at 86% 12%,rgba(255,214,0,.5),transparent 5.6rem),
    linear-gradient(135deg,#fff 0%,#efe6ff 58%,#fff6b5 100%);
}
.card-midg{
  background:
    linear-gradient(90deg,#111114 0 7px,transparent 7px),
    radial-gradient(circle at 86% 13%,rgba(163,255,18,.42),transparent 5.6rem),
    linear-gradient(135deg,#fff 0%,#f3ffd7 58%,#f1f1f4 100%);
}
.card-enrico{
  background:
    linear-gradient(90deg,#FFD600 0 7px,transparent 7px),
    radial-gradient(circle at 86% 12%,rgba(124,58,237,.2),transparent 5.6rem),
    linear-gradient(135deg,#fff 0%,#fff3a3 58%,#eee4ff 100%);
}
.card-samray{
  background:
    linear-gradient(90deg,#5B21B6 0 7px,transparent 7px),
    radial-gradient(circle at 86% 12%,rgba(255,214,0,.52),transparent 5.6rem),
    linear-gradient(135deg,#fff 0%,#ece4ff 58%,#fff4a7 100%);
}

@media (max-width:1180px){
  .roster-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:820px){
  .roster-hero{
    padding-top:2.2rem;
  }
  .creator-card{
    min-height:auto;
  }
}
@media (max-width:640px){
  .roster-grid{
    grid-template-columns:1fr;
  }
  .roster-hero-copy h1{
    font-size:3.25rem;
  }
  .creator-id-row{
    min-height:86px;
  }
  .creator-avatar{
    width:82px;
    height:82px;
  }
  .creator-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* V24 backup roster polish: warmer hero, tighter cards */
body.roster-page{
  background:
    radial-gradient(circle at 50% 2%,rgba(255,214,0,.38),transparent 20rem),
    radial-gradient(circle at 88% 12%,rgba(37,68,255,.11),transparent 18rem),
    radial-gradient(circle at 12% 24%,rgba(124,58,237,.1),transparent 22rem),
    linear-gradient(180deg,#fffdf4 0%,#f6f1e4 66%,#fffaf0 100%);
}

body.roster-page .roster-hero{
  position:relative;
  display:block;
  padding-top:clamp(2.5rem,5vw,4.8rem);
  padding-bottom:clamp(1.6rem,3vw,2.7rem);
  overflow:hidden;
}
body.roster-page .roster-hero::before{
  content:"";
  position:absolute;
  left:50%;
  top:4%;
  width:min(860px,76vw);
  height:min(430px,42vw);
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 40%,rgba(255,214,0,.48),transparent 14rem),
    radial-gradient(circle at 72% 35%,rgba(37,68,255,.15),transparent 14rem),
    radial-gradient(circle at 54% 78%,rgba(124,58,237,.17),transparent 15rem);
  filter:blur(12px);
  transform:translateX(-50%);
  pointer-events:none;
}
body.roster-page .hero-xelo-mark{
  position:absolute;
  right:clamp(1rem,5vw,5.5rem);
  top:clamp(1rem,3vw,2.4rem);
  width:min(210px,18vw);
  opacity:.055;
  pointer-events:none;
  filter:drop-shadow(0 22px 34px rgba(9,9,11,.18));
}
body.roster-page .roster-hero-copy{
  position:relative;
  z-index:1;
  max-width:980px;
  margin-inline:auto;
  text-align:center;
}
body.roster-page .roster-hero-copy .eyebrow{
  margin-inline:auto;
  border-color:rgba(9,9,11,.12);
  background:rgba(255,255,255,.72);
  box-shadow:0 16px 44px rgba(9,9,11,.07);
}
body.roster-page .roster-hero-copy h1{
  max-width:10.6ch;
  margin-inline:auto;
  margin-top:.95rem;
  font-size:clamp(4rem,8vw,8.4rem);
  line-height:.78;
  text-wrap:balance;
}
body.roster-page .roster-hero-copy h1::after{
  content:"";
  display:block;
  width:min(760px,78vw);
  height:12px;
  margin:.85rem auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--yellow) 0 42%,var(--purple) 42% 70%,var(--blue,#2544FF) 70% 100%);
  box-shadow:0 16px 34px rgba(9,9,11,.12);
}
body.roster-page .roster-hero-copy p{
  max-width:48ch;
  margin:1rem auto 0;
  color:rgba(9,9,11,.72);
  font-size:1.08rem;
  line-height:1.5;
  font-weight:700;
}
body.roster-page .roster-hero-copy p em{
  display:block;
  margin-bottom:.2rem;
  color:var(--purple);
  font-family:var(--serif);
  font-size:clamp(1.8rem,3.8vw,3rem);
  font-style:italic;
  font-weight:400;
  line-height:1;
}
body.roster-page .hero-tag-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:1.2rem;
}
body.roster-page .hero-tag-row span{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:.58rem .8rem;
  border:1px solid rgba(9,9,11,.15);
  border-radius:999px;
  background:rgba(255,255,255,.76);
  color:rgba(9,9,11,.72);
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:700;
  text-transform:uppercase;
  box-shadow:0 12px 30px rgba(9,9,11,.06);
}
body.roster-page .hero-tag-row span:nth-child(1){
  background:var(--yellow);
  color:var(--ink);
}
body.roster-page .hero-tag-row span:nth-child(2){
  background:var(--ink);
  color:var(--yellow);
}
body.roster-page .hero-tag-row span:nth-child(3){
  background:#fff;
  box-shadow:inset 0 -4px 0 rgba(124,58,237,.28),0 12px 30px rgba(9,9,11,.06);
}
body.roster-page .hero-tag-row span:nth-child(4){
  background:#eef2ff;
  box-shadow:inset 0 -4px 0 rgba(37,68,255,.22),0 12px 30px rgba(9,9,11,.06);
}
body.roster-page .roster-proof{
  display:none;
  position:relative;
  z-index:1;
  gap:.72rem;
  padding:.8rem;
  border:1px solid rgba(9,9,11,.18);
  border-radius:10px;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,214,0,.4),transparent 8rem),
    linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,250,226,.78));
  box-shadow:0 28px 82px rgba(9,9,11,.12);
  transform:rotate(-1deg);
}
body.roster-page .roster-proof::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(9,9,11,.055);
  border-radius:8px;
  background:
    linear-gradient(90deg,rgba(9,9,11,.04) 1px,transparent 1px),
    linear-gradient(rgba(9,9,11,.035) 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:linear-gradient(135deg,#000,transparent 78%);
  pointer-events:none;
}
body.roster-page .roster-proof div{
  position:relative;
  z-index:1;
  min-height:104px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:.95rem;
  border:1px solid rgba(9,9,11,.13);
  border-radius:8px;
  background:rgba(255,255,255,.78);
}
body.roster-page .roster-proof div:nth-child(2){
  background:linear-gradient(135deg,var(--yellow),#fff3a4);
}
body.roster-page .roster-proof span{
  color:rgba(9,9,11,.6);
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:700;
  text-transform:uppercase;
}
body.roster-page .roster-proof strong{
  font-family:var(--head);
  font-size:clamp(1.8rem,3vw,3rem);
  line-height:.86;
  text-transform:uppercase;
}

body.roster-page .roster-toolbar{
  align-items:end;
  margin-top:.4rem;
  margin-bottom:.9rem;
}
body.roster-page .roster-toolbar h2{
  font-size:clamp(2.4rem,4vw,3.5rem);
}
body.roster-page .roster-controls{
  padding:.5rem;
  border:1px solid rgba(9,9,11,.12);
  border-radius:999px;
  background:rgba(255,255,255,.66);
  box-shadow:0 16px 44px rgba(9,9,11,.06);
}

body.roster-page .creator-card{
  min-height:348px;
  border-color:rgba(9,9,11,.17);
  background:
    linear-gradient(90deg,var(--accent) 0 7px,transparent 7px),
    radial-gradient(circle at 87% 14%,color-mix(in srgb,var(--accent),transparent 58%) 0 4.6rem,transparent 4.75rem),
    radial-gradient(circle at 10% 100%,color-mix(in srgb,var(--accent-2),transparent 72%) 0 6.6rem,transparent 6.8rem),
    linear-gradient(135deg,#fff 0%,#fffaf0 58%,color-mix(in srgb,var(--accent),#fff 86%) 100%);
  box-shadow:0 22px 62px rgba(9,9,11,.11);
}
body.roster-page .creator-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 30px 78px rgba(9,9,11,.15),
    0 0 0 5px color-mix(in srgb,var(--accent),transparent 86%);
}
body.roster-page .creator-card::before{
  opacity:.38;
  background:
    linear-gradient(90deg,rgba(9,9,11,.035) 1px,transparent 1px),
    linear-gradient(rgba(9,9,11,.03) 1px,transparent 1px);
  background-size:30px 30px;
}
body.roster-page .creator-card::after{
  height:5px;
  background:linear-gradient(90deg,var(--accent),var(--ink) 50%,var(--accent-2));
}
body.roster-page .creator-card-art span:nth-child(1){
  width:7.4rem;
  height:7.4rem;
}
body.roster-page .creator-card-art span:nth-child(2){
  width:7.2rem;
  height:7.2rem;
}
body.roster-page .creator-card-top{
  padding:.88rem .9rem .38rem;
}
body.roster-page .creator-body{
  padding:0 .9rem .9rem;
}
body.roster-page .creator-id-row{
  min-height:96px;
  gap:.84rem;
}
body.roster-page .creator-avatar{
  width:92px;
  height:92px;
  border-width:2px;
  box-shadow:
    0 0 0 4px color-mix(in srgb,var(--accent),#fff 54%),
    0 0 0 7px color-mix(in srgb,var(--accent-2),transparent 76%),
    0 14px 28px rgba(9,9,11,.14);
}
body.roster-page .creator-name{
  font-size:clamp(1.6rem,2.2vw,2.18rem);
}
body.roster-page .creator-tags{
  margin-top:.6rem;
}
body.roster-page .creator-signal{
  height:16px;
  margin-top:.55rem;
}
body.roster-page .creator-signal i{
  width:14px;
}
body.roster-page .creator-stats{
  margin-top:.6rem;
}
body.roster-page .mini-stat{
  min-height:58px;
  padding:.55rem;
}
body.roster-page .mini-stat strong{
  font-size:1.08rem;
}
body.roster-page .mini-stat span{
  font-size:.5rem;
}
body.roster-page .creator-actions{
  margin-top:.65rem;
}
body.roster-page .creator-actions .btn{
  min-height:40px;
  padding:.62rem .7rem;
  font-size:.62rem;
}
body.roster-page .card-loupi{
  background:
    linear-gradient(90deg,#FFD600 0 7px,transparent 7px),
    radial-gradient(circle at 88% 14%,rgba(37,68,255,.22),transparent 5.8rem),
    linear-gradient(135deg,#fff 0%,#fff6ad 58%,#eef2ff 100%);
}
body.roster-page .card-jovoclan{
  background:
    linear-gradient(90deg,#2544FF 0 7px,transparent 7px),
    radial-gradient(circle at 88% 14%,rgba(255,214,0,.5),transparent 5.8rem),
    linear-gradient(135deg,#fff 0%,#edf1ff 56%,#fff4a6 100%);
}
body.roster-page .card-yeetrants{
  background:
    linear-gradient(90deg,#7C3AED 0 7px,transparent 7px),
    radial-gradient(circle at 88% 14%,rgba(255,214,0,.5),transparent 5.8rem),
    linear-gradient(135deg,#fff 0%,#efe6ff 58%,#fff6b5 100%);
}
body.roster-page .card-midg{
  background:
    linear-gradient(90deg,#111114 0 7px,transparent 7px),
    radial-gradient(circle at 88% 14%,rgba(163,255,18,.42),transparent 5.8rem),
    linear-gradient(135deg,#fff 0%,#f3ffd7 58%,#f1f1f4 100%);
}
body.roster-page .card-enrico{
  background:
    linear-gradient(90deg,#FFD600 0 7px,transparent 7px),
    radial-gradient(circle at 88% 14%,rgba(124,58,237,.22),transparent 5.8rem),
    linear-gradient(135deg,#fff 0%,#fff3a3 58%,#eee4ff 100%);
}
body.roster-page .card-samray{
  background:
    linear-gradient(90deg,#5B21B6 0 7px,transparent 7px),
    radial-gradient(circle at 88% 14%,rgba(255,214,0,.52),transparent 5.8rem),
    linear-gradient(135deg,#fff 0%,#ece4ff 58%,#fff4a7 100%);
}
body.roster-page .card-leafique{
  background:
    linear-gradient(90deg,#FFD600 0 7px,transparent 7px),
    radial-gradient(circle at 88% 14%,rgba(100,181,246,.42),transparent 5.8rem),
    linear-gradient(135deg,#fff 0%,#fff3ad 55%,#e8f5ff 100%);
}
body.roster-page .card-robbehy{
  background:
    linear-gradient(90deg,#2544FF 0 7px,transparent 7px),
    radial-gradient(circle at 88% 14%,rgba(255,214,0,.5),transparent 5.8rem),
    linear-gradient(135deg,#fff 0%,#e8eeff 56%,#fff4a7 100%);
}
body.roster-page .card-teawchai{
  background:
    linear-gradient(90deg,#7C3AED 0 7px,transparent 7px),
    radial-gradient(circle at 88% 14%,rgba(255,214,0,.52),transparent 5.8rem),
    linear-gradient(135deg,#fff 0%,#efe7ff 56%,#fff4a8 100%);
}

.mini-audience-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.45rem;
  margin-top:.9rem;
}
.mini-audience-list span{
  display:grid;
  gap:.18rem;
  padding:.55rem;
  border:1px solid rgba(9,9,11,.12);
  border-radius:8px;
  background:rgba(255,255,255,.68);
  color:rgba(9,9,11,.62);
  font-family:var(--mono);
  font-size:.54rem;
  font-weight:700;
  text-transform:uppercase;
}
.mini-audience-list strong{
  color:var(--ink);
  font-family:var(--head);
  font-size:1rem;
  line-height:.9;
}
.snapshot-tile .bar-row{
  grid-template-columns:minmax(88px,.5fr) 1fr 52px;
}
.phone-frame video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:var(--ink);
}
.phone-frame:has(video)::after{
  display:none;
}
.panel-note{
  margin-top:.9rem;
  color:rgba(9,9,11,.58);
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
}

@media (max-width:900px){
  body.roster-page .roster-hero{
    grid-template-columns:1fr;
  }
  body.roster-page .hero-xelo-mark{
    width:160px;
    opacity:.045;
  }
  body.roster-page .roster-proof{
    transform:none;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:640px){
  body.roster-page .roster-hero-copy h1{
    font-size:3.2rem;
  }
  body.roster-page .roster-proof{
    grid-template-columns:1fr;
  }
  body.roster-page .roster-controls{
    border-radius:18px;
    flex-direction:column;
    align-items:stretch;
  }
  body.roster-page .creator-avatar{
    width:82px;
    height:82px;
  }
}