/* ===========================================================
   77° — Design tokens
   Violet profond #2A0D4F · Or lumière #D4AF37 · Corail #FF6F61
   Display: Cinzel · Body: Montserrat
=========================================================== */
:root{
  --violet: #2A0D4F;
  --violet-deep: #1B0834;
  --violet-black: #120722;
  --gold: #D4AF37;
  --gold-light: #F0D584;
  --gold-dim: #8A6C24;
  --coral: #FF6F61;
  --cream: #F6F1E7;
  --cream-dim: #E8DFC9;
  --ink: #17101f;

  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body: 'Montserrat', -apple-system, sans-serif;

  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1'%3E%3Cpath d='M-20,30 C30,44 79,59 130,60 C180,60 229,35 280,44 C330,44 379,6 430,12 C480,12 529,3 580,0 C630,0 679,30 730,21 C780,21 829,57 880,51' opacity='0.71'/%3E%3Cpath d='M-20,88 C30,122 79,109 130,117 C180,117 229,69 280,80 C330,80 379,50 430,51 C480,51 529,72 580,62 C630,62 679,111 730,101 C780,101 829,125 880,125' opacity='0.38'/%3E%3Cpath d='M-20,160 C30,179 79,167 130,172 C180,172 229,148 280,152 C330,152 379,142 430,141 C480,141 529,156 580,151 C630,151 679,175 730,171 C780,171 829,178 880,180' opacity='0.39'/%3E%3Cpath d='M-20,218 C30,236 79,193 130,201 C180,201 229,187 280,185 C330,185 379,216 430,206 C480,206 529,247 580,241 C630,241 679,247 730,251 C780,251 829,216 880,226' opacity='0.42'/%3E%3Cpath d='M-20,281 C30,288 79,242 130,248 C180,248 229,252 280,244 C330,244 379,293 430,281 C480,281 529,322 580,318 C630,318 679,306 730,315 C780,315 829,263 880,275' opacity='0.67'/%3E%3Cpath d='M-20,350 C30,358 79,404 130,401 C180,401 229,376 280,389 C330,389 379,319 430,334 C480,334 529,297 580,297 C630,297 679,332 730,318 C780,318 829,388 880,374' opacity='0.82'/%3E%3Cpath d='M-20,415 C30,424 79,438 130,439 C180,439 229,422 280,428 C330,428 379,398 430,404 C480,404 529,393 580,392 C630,392 679,413 730,406 C780,406 829,435 880,430' opacity='0.52'/%3E%3Cpath d='M-20,499 C30,523 79,497 130,504 C180,504 229,476 280,480 C330,480 379,480 430,476 C480,476 529,505 580,497 C630,497 679,523 730,520 C780,520 829,515 880,520' opacity='0.7'/%3E%3Cpath d='M-20,567 C30,574 79,605 130,604 C180,604 229,583 280,593 C330,593 379,544 430,554 C480,554 529,529 580,529 C630,529 679,556 730,546 C780,546 829,595 880,586' opacity='0.38'/%3E%3Cpath d='M-20,629 C30,671 79,646 130,657 C180,657 229,601 280,612 C330,612 379,587 430,586 C480,586 529,619 580,607 C630,607 679,662 730,652 C780,652 829,669 880,672' opacity='0.52'/%3E%3Cpath d='M-20,705 C30,733 79,730 130,736 C180,736 229,694 280,705 C330,705 379,670 430,674 C480,674 529,684 580,676 C630,676 679,720 730,710 C780,710 829,739 880,738' opacity='0.79'/%3E%3Cpath d='M-20,784 C30,810 79,782 130,790 C180,790 229,759 280,764 C330,764 379,763 430,759 C480,759 529,790 580,782 C630,782 679,810 730,807 C780,807 829,802 880,807' opacity='0.64'/%3E%3Cpath d='M-20,870 C30,905 79,903 130,911 C180,911 229,858 280,871 C330,871 379,826 430,830 C480,830 529,841 580,832 C630,832 679,888 730,875 C780,875 829,915 880,912' opacity='0.89'/%3E%3C/g%3E%3C/svg%3E");

  --container: 1180px;
  --gutter: clamp(24px, 6vw, 96px);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--violet);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--font-display); font-weight: 600; margin: 0; }
p{ margin: 0; }
.degree{ font-family: var(--font-display); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- shared bits ---------- */
.eyebrow{
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 18px;
}
.eyebrow--dark{ color: var(--gold-dim); }

.section__head{
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
  padding: 0 var(--gutter);
}
.section__head--left{
  margin: 0 0 56px;
  text-align: left;
  max-width: 620px;
}
.section__title{
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 0.01em;
  color: var(--cream);
}
.section__title--dark{ color: var(--ink); }
.section__lead{
  margin-top: 18px;
  font-size: 16px;
  color: rgba(246,241,231,0.72);
  line-height: 1.7;
}
.section__lead--dark{ color: rgba(23,16,31,0.68); }

.hide-mobile{ display:inline; }
@media (max-width: 640px){ .hide-mobile{ display:none; } }

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 15px 32px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease, color .35s ease;
  white-space: nowrap;
}
.btn--gold{
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-dim));
  color: var(--violet-black);
}
.btn--gold:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(212,175,55,0.35); }
.btn--ghost{
  background: transparent;
  border-color: rgba(246,241,231,0.35);
  color: var(--cream);
}
.btn--ghost:hover{ border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

/* reveal-on-scroll */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.16,.8,.28,1), transform .8s cubic-bezier(.16,.8,.28,1);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ===========================================================
   NAV
=========================================================== */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px var(--gutter);
  transition: background .4s ease, padding .4s ease, backdrop-filter .4s ease;
}
.nav.is-scrolled{
  padding: 14px var(--gutter);
  background: rgba(23,10,44,0.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(212,175,55,0.15);
}
.nav__inner{
  max-width: var(--container);
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.nav__logo-mark{
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--gold-light);
  display: inline-flex;
  align-items: center;
}
.nav__logo-img{ height: 38px; width: auto; display: block; }
.nav__links{
  display:flex;
  align-items:center;
  gap: 36px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav__links a{ color: rgba(246,241,231,0.82); transition: color .25s ease; }
.nav__links a:hover{ color: var(--gold); }
.nav__cta{
  border: 1px solid rgba(212,175,55,0.55);
  padding: 9px 18px;
  border-radius: 2px;
}
.nav__cta:hover{ background: var(--gold); color: var(--violet-black) !important; }

.nav__burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding: 6px;
}
.nav__burger span{ width:22px; height:1.5px; background: var(--cream); transition: transform .3s ease, opacity .3s ease; }

@media (max-width: 860px){
  .nav__links{
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: var(--violet-black);
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    transform: translateX(100%);
    transition: transform .4s ease;
    padding: 40px;
  }
  .nav__links.is-open{ transform: translateX(0); }
  .nav__burger{ display:flex; }
  .nav__burger.is-open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
  .nav__burger.is-open span:nth-child(2){ opacity: 0; }
  .nav__burger.is-open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
}

/* ===========================================================
   HERO
=========================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(212,175,55,0.14), transparent 60%),
    linear-gradient(180deg, var(--violet-deep) 0%, var(--violet) 55%, var(--violet-deep) 100%);
}
.hero__texture{
  position:absolute; inset:0;
  background-image: var(--topo);
  background-size: 900px auto;
  background-repeat: repeat;
  opacity: 0.16;
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero__texture--subtle{ opacity: 0.08; }
.hero__watermark{
  position:absolute;
  bottom: -10vw;
  right: -6vw;
  width: 46vw;
  max-width: 620px;
  opacity: 0.05;
  pointer-events:none;
  user-select:none;
}
.hero__watermark img{ width: 100%; height: auto; display: block; }
.hero__content{ position: relative; z-index: 2; padding: 0 var(--gutter); max-width: 760px; }
.hero__title{ display:flex; flex-direction:column; align-items:center; gap: 14px; margin-bottom: 26px; }
.hero__logo{
  width: clamp(160px, 22vw, 240px);
  height: auto;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.35));
}
.hero__number{
  font-size: clamp(96px, 20vw, 220px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  background: linear-gradient(160deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 12px 40px rgba(212,175,55,0.18));
}
.hero__sub{
  font-family: var(--font-body);
  font-size: clamp(12px, 1.6vw, 15px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(246,241,231,0.72);
  padding-left: 0.42em; /* optical centering with tracking */
}
.hero__headline{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 32px);
  color: var(--cream);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.hero__tagline{
  font-size: clamp(15px, 1.8vw, 17px);
  color: rgba(246,241,231,0.72);
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 0;
}
.hero__actions{ display:flex; gap: 18px; justify-content:center; flex-wrap: wrap; }

.hero__scroll{
  position:absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  z-index:2;
}
.hero__scroll span{
  display:block;
  width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--gold), transparent);
  position: relative;
}
.hero__scroll span::after{
  content:'';
  position:absolute; top:0; left:-2.5px;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--gold);
  animation: scrollDot 2.2s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ transform: translateY(0); opacity: 1; }
  80%{ transform: translateY(40px); opacity: 0; }
  100%{ opacity: 0; }
}

/* ===========================================================
   CREATORS
=========================================================== */
.creators{
  position: relative;
  padding: 110px 0;
  background: var(--violet-deep);
  overflow:hidden;
}
.creators__head{ max-width: var(--container); margin-left:auto; margin-right:auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.creator-row{
  display:flex;
  gap: 20px;
  overflow-x: auto;
  padding: 8px var(--gutter) 20px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  position: relative; z-index: 1;
  justify-content: center;
  max-width: var(--container);
  margin: 0 auto;
}
.creator-row::-webkit-scrollbar{ height: 4px; }
.creator-row::-webkit-scrollbar-thumb{ background: rgba(212,175,55,0.35); border-radius: 4px; }

.creator-card{
  position: relative;
  flex: 0 0 auto;
  width: 210px;
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  border-radius: 50% 50% 10px 10px / 18% 18% 10px 10px;
  display:flex;
  flex-direction:column;
  justify-content: flex-end;
  padding: 28px 22px 24px;
  overflow: hidden;
}
.creator-card--violet{ background: linear-gradient(165deg, #3a1568, var(--violet)); color: var(--gold-light); }
.creator-card--coral{ background: linear-gradient(165deg, #FF8A7E, var(--coral)); color: var(--violet-black); }
.creator-card--gold{ background: linear-gradient(165deg, var(--gold-light), var(--gold)); color: var(--violet-black); }
.creator-card--ink{ background: linear-gradient(165deg, #241536, var(--violet-black)); color: var(--gold-light); }
.creator-card--photo{
  background-size: cover;
  background-position: center;
  color: var(--cream);
  transition: transform .35s ease;
}
.creator-card--photo:hover{ transform: translateY(-4px); }
.creator-card__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(21,8,38,0) 40%, rgba(21,8,38,0.85) 100%);
  pointer-events: none;
}

.creator-card__avatar{
  position:absolute;
  top: 34px; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 46px;
  opacity: 0.35;
}
.creator-card__avatar svg{ width:100%; height:100%; }
.creator-card__tags{
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.creator-card__tags span{
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--cream);
}
.creator-card__info{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.creator-card__add{
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.45);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.35);
  cursor: pointer;
  color: #ffffff !important;
  transition: background .25s ease, transform .25s ease;
}
.creator-card__add:hover{ background: rgba(0,0,0,0.65); transform: scale(1.08); }
.creator-card__info h3{
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.creator-card__stat{
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

@media (max-width: 640px){
  .creator-row{
    flex-direction: column;
    overflow-x: visible;
    align-items: stretch;
    justify-content: flex-start;
  }
  .creator-card{
    width: 100%;
    flex-basis: auto;
  }
}

/* ===========================================================
   EXPERTISE
=========================================================== */
.expertise{
  background: var(--violet-deep);
  padding: 130px 0 110px;
}
.expertise__inner{
  max-width: 640px;
  margin: 0 auto 64px;
  padding: 0 var(--gutter);
  text-align: center;
}
.expertise__title{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.35;
  color: var(--cream);
  letter-spacing: -0.01em;
}

.capabilities{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
}
.capability{ text-align: center; }
.capability__icon{
  display: inline-flex;
  width: 44px; height: 44px;
  color: var(--gold);
  margin-bottom: 18px;
}
.capability__icon svg{ width: 100%; height: 100%; }
.capability h3{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--cream);
  margin-bottom: 8px;
}
.capability p{
  font-size: 13.5px;
  color: rgba(246,241,231,0.62);
  line-height: 1.6;
  max-width: 240px;
  margin: 0 auto;
}
@media (max-width: 860px){ .capabilities{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .capabilities{ grid-template-columns: 1fr; gap: 36px; } }

/* ===========================================================
   DIFFÉRENCIATION
=========================================================== */
.differentiation{
  background: var(--violet-deep);
  padding: 60px 0 130px;
}
.differentiation__inner{
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.differentiation h2{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(26px, 3.8vw, 38px);
  color: var(--cream);
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.differentiation .accent{ color: var(--coral); }
.differentiation p{
  font-size: 16px;
  line-height: 1.75;
  color: rgba(246,241,231,0.72);
}
.differentiation__sub{
  margin-top: 14px;
  color: rgba(246,241,231,0.55) !important;
  font-size: 14.5px !important;
}

/* ===========================================================
   CAMPAGNES
=========================================================== */
.campaigns{
  background: var(--violet-deep);
  padding: 110px 0 130px;
}
.campaigns .section__head--left{ max-width: var(--container); margin-left:auto; margin-right:auto; padding: 0 var(--gutter); margin-bottom: 40px; text-align: center; }
.campaigns__tags{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.campaigns__tags span{
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.35);
  color: var(--cream);
  cursor: default;
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.campaigns__tags span:hover{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--violet-black);
  transform: translateY(-3px);
}

/* ===========================================================
   CONTACT
=========================================================== */
.contact{ padding: 110px 0 120px; background: var(--violet-deep); text-align: center; }
.contact__cta{ display:flex; flex-direction:column; align-items:center; gap: 20px; }
.contact__note{ font-size: 13px; color: rgba(246,241,231,0.5); }
.contact__note a{ color: var(--gold); border-bottom: 1px solid rgba(212,175,55,0.4); }
.contact__note a:hover{ color: var(--gold-light); }

/* ===========================================================
   FOOTER
=========================================================== */
.footer{ background: var(--violet-black); padding: 60px var(--gutter) 26px; }
.footer__inner{
  max-width: var(--container);
  margin: 0 auto;
  display:flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items:center;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(212,175,55,0.15);
}
.footer__brand{ display:flex; align-items:baseline; gap: 16px; flex-wrap: wrap; }
.footer__logo{ display: inline-flex; align-items: center; }
.footer__logo-img{ height: 46px; width: auto; display: block; }
.footer__caption{ font-size: 12px; letter-spacing: 0.05em; color: rgba(246,241,231,0.5); text-transform: uppercase; }
.footer__links{ display:flex; gap: 24px; font-size: 13px; flex-wrap: wrap; }
.footer__links a{ color: rgba(246,241,231,0.7); }
.footer__links a:hover{ color: var(--gold); }
.footer__social{ display:flex; gap: 20px; font-size: 13px; }
.footer__social a{ color: rgba(246,241,231,0.7); }
.footer__social a:hover{ color: var(--gold); }
.footer__bottom{
  max-width: var(--container);
  margin: 0 auto;
  padding-top: 22px;
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246,241,231,0.4);
}
.footer__legal-links a{ color: rgba(246,241,231,0.4); }
.footer__legal-links a:hover{ color: var(--gold); }

/* ===========================================================
   LEGAL PAGES
=========================================================== */
.legal{
  background: var(--violet-deep);
  padding: 160px 0 120px;
  min-height: 100vh;
}
.legal__inner{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.legal__title{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 38px);
  color: var(--cream);
  margin: 10px 0 36px;
}
.legal h2{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  color: var(--gold-light);
  margin: 34px 0 12px;
}
.legal p, .legal li{
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(246,241,231,0.75);
}
.legal ul{ padding-left: 20px; margin: 8px 0; }
.legal li{ margin-bottom: 6px; }
.legal a{ color: var(--gold); border-bottom: 1px solid rgba(212,175,55,0.35); }
.legal a:hover{ color: var(--gold-light); }
.legal__updated{
  margin-top: 44px;
  font-size: 12px !important;
  color: rgba(246,241,231,0.4) !important;
  font-style: italic;
}

/* ===========================================================
   CREATOR MODAL (fiche créateur)
=========================================================== */
.creator-modal{
  position: fixed; inset: 0; z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.creator-modal.is-open{ display: flex; }
.creator-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(18, 7, 34, 0.82);
  backdrop-filter: blur(4px);
}
.creator-modal__panel{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--violet-deep);
  border: 1px solid rgba(212,175,55,0.25);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  animation: modalIn .3s cubic-bezier(.16,.8,.28,1);
}
@keyframes modalIn{
  from{ opacity: 0; transform: translateY(16px) scale(0.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.creator-modal__close{
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.35);
  color: var(--cream);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.creator-modal__photo{
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: var(--violet-black);
  flex-shrink: 0;
}
.creator-modal__body{ padding: 26px 30px 32px; }
.creator-modal__body h3{
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--gold-light);
  margin-bottom: 4px;
}
.creator-modal__handle{
  font-size: 13px;
  color: rgba(246,241,231,0.55);
  margin-bottom: 18px;
}
.creator-modal__stats{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.creator-modal__stats:empty{ display: none; }
.creator-modal__stat-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cream);
  transition: background .25s ease, border-color .25s ease;
}
a.creator-modal__stat-chip{ cursor: pointer; text-decoration: none; }
a.creator-modal__stat-chip:hover{ background: rgba(212,175,55,0.15); border-color: var(--gold); }
.creator-modal__stat-chip svg{ width: 15px; height: 15px; color: var(--gold); }
.creator-modal__bio{
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(246,241,231,0.78);
  margin-bottom: 24px;
}