:root{
  --paper:#F3F0E9;--ink:#0A0A0A;--soft:#E8E3D8;--mute:#5d5a53;
  --lilac:#C7B8FF;--peach:#FFC9A3;--ease:cubic-bezier(.16,1,.3,1);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Archivo",Arial,sans-serif;font-size:17px;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.disp{font-stretch:125%;font-weight:700;letter-spacing:-.02em;line-height:1}

/* nav */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid #0a0a0a14}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font-stretch:125%;font-weight:700;font-size:18px;letter-spacing:.02em}
.brand small{font-size:9px;font-weight:500;letter-spacing:.38em;display:block;margin-bottom:2px}
.links{display:flex;gap:30px;align-items:center;font-size:15px}
.links a:not(.btn){position:relative}
.links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:var(--ink);transition:width .35s var(--ease)}
.links a:not(.btn):hover::after{width:100%}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);border:0;border-radius:99px;padding:14px 26px;font:600 15px/1 "Archivo",sans-serif;cursor:pointer;transition:transform .35s var(--ease),background .3s}
.btn:hover{transform:translateY(-2px) scale(1.03);background:#2b2b2b}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
@media(max-width:760px){.nav{height:auto;min-height:68px;align-items:flex-start;padding-block:12px;gap:10px}.links{gap:12px;flex-wrap:wrap;justify-content:flex-end;font-size:13px}.links a:not(.btn){display:inline-block}}

/* hero */
.hero{position:relative;padding:clamp(64px,11vw,140px) 0 clamp(70px,9vw,120px);overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;pointer-events:none;animation:drift 14s ease-in-out infinite alternate}
.b1{width:46vw;max-width:560px;aspect-ratio:1;background:var(--lilac);right:-6%;top:-6%}
.b2{width:34vw;max-width:420px;aspect-ratio:1;background:var(--peach);right:18%;bottom:-12%;animation-delay:-6s}
@keyframes drift{to{transform:translate(-40px,36px) scale(1.12)}}
.hero .wrap{position:relative}
.pill{display:inline-block;border:1.5px solid var(--ink);border-radius:99px;padding:7px 16px;font-size:14px;font-weight:500;margin-bottom:28px}
h1{font-size:clamp(44px,9.4vw,128px);margin:0 0 28px;max-width:11ch}
h1 .row{display:block;overflow:hidden;padding-bottom:.06em}
h1{--t:4.3s}
.ready h1{--t:0s}
h1 .row i{display:block;font-style:normal;transform:translateY(110%);animation:up 1.2s var(--ease) var(--t) forwards}
h1 .row:nth-child(2) i{animation-delay:calc(var(--t) + .12s)}
h1 .row:nth-child(3) i{animation-delay:calc(var(--t) + .24s)}
@keyframes up{to{transform:none}}
.lead{max-width:48ch;font-size:clamp(17px,2vw,20px);color:#2a2926;margin:0 0 34px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.chips{position:absolute;right:0;bottom:0;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.chip{background:var(--paper);border:1.5px solid var(--ink);border-radius:99px;padding:10px 20px;font-weight:600;font-size:15px;animation:bob 5s ease-in-out infinite alternate}
.chip:nth-child(2){animation-delay:-1.2s;margin-right:34px}
.chip:nth-child(3){animation-delay:-2.4s}
.chip:nth-child(4){animation-delay:-3.6s;margin-right:56px}
@keyframes bob{to{transform:translateY(-10px)}}
@media(max-width:900px){.chips{position:static;flex-direction:row;flex-wrap:wrap;margin-top:44px}.chip,.chip:nth-child(n){margin-right:0}}

/* marquee */
.marq{background:var(--ink);color:var(--paper);overflow:hidden;padding:20px 0;white-space:nowrap}
.track{display:inline-flex;animation:scroll 28s linear infinite}
.marq:hover .track{animation-play-state:paused}
.track span{font-stretch:125%;font-weight:700;font-size:clamp(22px,3.6vw,38px);padding-right:44px}
.track span::after{content:"✦";margin-left:44px;color:var(--lilac)}
@keyframes scroll{to{transform:translateX(-50%)}}

section{padding:clamp(70px,9vw,130px) 0}
h2{font-size:clamp(34px,6vw,78px);margin:0 0 20px;max-width:14ch}
.sub{max-width:52ch;color:var(--mute);margin:0 0 48px}

/* categories */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:290px;padding:26px;border-radius:26px;background:var(--soft);overflow:hidden;transition:transform .5s var(--ease),color .4s}
.card::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .55s var(--ease)}
.card:hover{transform:translateY(-6px);color:var(--paper)}
.card:hover::before{transform:none}
.card>*{position:relative}
.ic{font-size:34px;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink)}
.card h3{font-size:24px;margin:0 0 6px;font-stretch:112%;line-height:1.15}
.card p{margin:0;font-size:15px;opacity:.75}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}.card{min-height:220px}}

/* steps */
.steps{background:var(--ink);color:var(--paper);border-radius:40px;margin:0 12px}
.steps .sub{color:#b9b5aa}
.srow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{border-top:1.5px solid #f3f0e955;padding-top:24px}
.step b{display:block;font-stretch:125%;font-size:clamp(50px,7vw,92px);line-height:1;color:var(--lilac);margin-bottom:18px}
.step h3{font-size:26px;margin:0 0 8px;font-stretch:112%}
.step p{margin:0;color:#c9c5ba;max-width:32ch}
@media(max-width:800px){.srow{grid-template-columns:1fr;gap:34px}}

/* why */
.why{display:block}
.list{list-style:none;margin:0 0 34px;padding:0}
.list li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid #0a0a0a22;font-weight:500}
.list li::before{content:"✦";color:var(--ink);background:var(--lilac);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-size:12px;flex:none}
.orb{aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,var(--lilac),var(--peach),var(--paper),var(--lilac));position:relative;display:grid;place-items:center;animation:spin 24s linear infinite;max-width:440px;width:100%;justify-self:center}
.orb::after{content:"";position:absolute;inset:14%;border-radius:50%;background:var(--paper)}
.orb span{position:relative;z-index:1;animation:spin 24s linear infinite reverse;text-align:center;font-stretch:125%;font-weight:700;font-size:clamp(18px,2.6vw,28px);line-height:1.2}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:860px){.why{grid-template-columns:1fr}}

/* closing */
.end{text-align:center;position:relative;overflow:hidden}
.end h2{margin-inline:auto;max-width:12ch}
.end .sub{margin-inline:auto}
footer{border-top:1px solid #0a0a0a1f;padding:34px 0 40px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:15px;color:var(--mute)}
.foot .links{color:var(--ink)}

/* modal */
dialog{border:0;border-radius:28px;padding:34px;width:min(480px,100% - 28px);background:var(--paper);color:var(--ink);box-shadow:0 30px 80px #0a0a0a40}
dialog::backdrop{background:#0a0a0a80;backdrop-filter:blur(4px)}
dialog h2{font-size:34px;margin:0 0 8px}
dialog p{margin:0 0 22px;color:var(--mute)}
label{display:block;font-weight:600;font-size:14px;margin-bottom:14px}
input,textarea{display:block;width:100%;margin-top:6px;border:1.5px solid #0a0a0a33;border-radius:14px;padding:13px 15px;font:400 16px "Archivo",sans-serif;background:#fff;color:var(--ink)}
input:focus,textarea:focus{outline:2px solid var(--ink);border-color:transparent}
.x{position:absolute;top:16px;right:18px;background:none;border:0;font-size:30px;cursor:pointer;color:var(--ink);line-height:1}
.ok{display:none;margin-top:14px;font-weight:600}
/* intro logo reveal */
body.lock{overflow:hidden}
.intro{position:fixed;inset:0;z-index:100;background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;animation:outro 1s var(--ease) 4.2s forwards}
.intro.out{animation:outro .8s var(--ease) 0s forwards}
@keyframes outro{to{transform:translateY(-101%);visibility:hidden}}
.il{display:flex;flex-direction:column;align-items:center;position:relative}
.iring{position:absolute;left:50%;top:50%;width:70vmin;height:70vmin;margin:-35vmin 0 0 -35vmin;border-radius:50%;border:1px solid var(--ink);opacity:0;transform:scale(.3);animation:ring 2.4s var(--ease) 1s forwards}
.iw{display:flex;overflow:hidden;font-stretch:125%;font-weight:700;font-size:clamp(64px,22vw,200px);line-height:1;padding:.04em .02em .02em;letter-spacing:-.01em}
.iw span{display:inline-block;transform:translateY(115%);animation:up 1.1s var(--ease) forwards}
.iw span:nth-child(1){animation-delay:.9s}.iw span:nth-child(2){animation-delay:1s}.iw span:nth-child(3){animation-delay:1.1s}.iw span:nth-child(4){animation-delay:1.2s}
.isub{font-stretch:125%;font-weight:500;font-size:clamp(11px,3vw,26px);letter-spacing:.1em;margin:0 0 .9em;padding-left:.6em;opacity:0;animation:track 1.8s var(--ease) 1.9s forwards}
.irule{width:0;height:1px;background:var(--ink);margin-top:1.1em;animation:line 1.2s var(--ease) .3s forwards,lineOut .6s ease 2.2s forwards}
.skip{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;font-size:13px;opacity:.5}
@keyframes track{from{opacity:0;letter-spacing:.1em}to{opacity:1;letter-spacing:.62em}}
@keyframes line{to{width:min(60vw,360px)}}
@keyframes lineOut{to{opacity:0}}
@keyframes ring{0%{opacity:0;transform:scale(.3)}25%{opacity:.35}100%{opacity:0;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}}
/* V1 agency positioning */
.hero-services{margin:-14px 0 30px;font-size:14px;font-weight:600;letter-spacing:.04em}.hero-services span{color:var(--mute);padding:0 7px}
.positioning{padding:34px 0;border-top:1px solid #0a0a0a1f;border-bottom:1px solid #0a0a0a1f}
.positioning p{margin:0;font-size:clamp(13px,1.5vw,17px);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.positioning span{color:var(--mute);padding:0 10px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:44px}
.section-head .sub{margin:0}
.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.category{min-height:270px;border-radius:26px;padding:30px;background:var(--soft);display:flex;flex-direction:column;justify-content:space-between}
.category .ic{margin-bottom:28px;font-size:30px}
.category h3{font-size:24px;line-height:1.1;margin:0 0 9px}
.category p{font-size:15px;color:var(--mute);margin:0}
.what-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#0a0a0a24;border:1px solid #0a0a0a24;border-radius:24px;overflow:hidden}
.what-item{background:var(--paper);padding:28px;min-height:190px}
.what-item b{display:block;font-size:20px;margin-bottom:10px}
.what-item p{margin:0;color:var(--mute);font-size:15px}
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{border-top:1.5px solid #f3f0e955;padding-top:24px}
.brands{background:var(--ink);color:var(--paper);border-radius:40px;margin:0 12px}
.brands .sub{color:#b9b5aa}
.brands .step h3{font-size:24px}
.brands .step p{max-width:28ch}
.creators-panel{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faq-list details{border:1px solid #0a0a0a24;border-radius:18px;padding:20px 22px;background:var(--soft)}
.faq-list summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:22px;line-height:1}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{margin:14px 0 0;color:var(--mute);font-size:15px}
.end .cta{justify-content:center}
@media(max-width:980px){.category-grid,.what-grid{grid-template-columns:repeat(2,1fr)}.step-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.section-head{display:block}.section-head .sub{margin-top:16px}.faq-list{grid-template-columns:1fr}}
@media(max-width:560px){.category-grid,.what-grid,.step-grid{grid-template-columns:1fr}.category{min-height:210px}.brands{margin:0 8px;border-radius:26px}.what-item{min-height:0}}
/* auth */
[hidden]{display:none!important}
.authbar{display:flex;align-items:center;gap:22px}
.authbar .btn{padding:11px 20px;font-size:14px}
.authbar button.btn{font-family:"Archivo",sans-serif}
.brands .btn{background:var(--paper);color:var(--ink)}
.brands .btn:hover{background:#fff}
.brands .btn.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--paper)}
.brands .btn.ghost:hover{background:var(--paper);color:var(--ink)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin:38px 0 0}
dialog{max-height:calc(100dvh - 28px);overflow:auto}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--soft);border-radius:99px;padding:4px;margin:0 0 20px}
.tabs button{border:0;background:none;border-radius:99px;padding:11px;font:600 15px "Archivo",sans-serif;color:var(--mute);cursor:pointer;transition:background .3s,color .3s}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--paper)}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.roles label{margin:0;position:relative}
.roles input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.roles span{display:block;text-align:center;padding:12px 10px;border:1.5px solid #0a0a0a33;border-radius:14px;font-weight:600;background:#fff;transition:background .25s,border-color .25s}
.roles small{display:block;font-weight:400;font-size:12px;color:var(--mute)}
.roles input:checked+span{background:var(--lilac);border-color:var(--ink)}
.roles input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
select{display:block;width:100%;margin-top:6px;border:1.5px solid #0a0a0a33;border-radius:14px;padding:13px 15px;font:400 16px "Archivo",sans-serif;background:#fff;color:var(--ink)}
.chk{display:flex!important;gap:10px;align-items:flex-start;font-weight:400;font-size:13px;color:var(--mute)}
.chk input{width:auto;margin:3px 0 0}
.err{color:#b3261e;font-weight:600;font-size:14px;margin:0 0 14px!important}
.err:empty{display:none}
.mini{font-size:14px;margin:14px 0 0!important;text-align:center}
.mini a{text-decoration:underline}
.demo-note{font-size:12.5px!important;background:var(--soft);border-radius:12px;padding:10px 12px;margin:16px 0 0!important}
.badge{display:inline-block;background:var(--lilac);border-radius:99px;padding:4px 14px;font-size:13px;font-weight:600;margin-bottom:14px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0 0 22px;font-size:15px}
.dl dt{color:var(--mute)}
.dl dd{margin:0;font-weight:600;word-break:break-word}
.dash-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:760px){.authbar{gap:12px}.authbar .btn{padding:9px 14px;font-size:13px}}
/* roster */
.roster-tools{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.roster-tools label{flex:1 1 180px;margin:0}
.roster-tools label.grow{flex:2 1 280px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.fchip{border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:99px;padding:8px 16px;font:600 14px "Archivo",sans-serif;cursor:pointer;transition:background .3s,color .3s}
.fchip:hover{background:var(--soft)}
.fchip[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.roster-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:6px 0 18px;color:var(--mute);font-size:15px;min-height:24px}
.roster-meta button{background:none;border:0;text-decoration:underline;font:inherit;cursor:pointer;color:var(--ink);padding:0}
.roster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rcard{background:var(--soft);border-radius:26px;padding:24px;display:flex;flex-direction:column;gap:10px;min-height:240px;transition:transform .5s var(--ease)}
.rcard:hover{transform:translateY(-4px)}
.av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-stretch:125%;font-weight:700;font-size:22px;background:var(--lilac);color:var(--ink);overflow:hidden;margin-bottom:6px}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.rcard:nth-child(3n+2) .av{background:var(--peach)}
.rcard:nth-child(3n) .av{background:var(--paper)}
.rcard h3{margin:0;font-size:21px;font-stretch:112%;line-height:1.15}
.rmeta{margin:0;font-size:14px;color:var(--mute)}
.rbio{margin:0;font-size:14.5px;color:#2a2926}
.rtag{display:inline-block;border:1.5px solid var(--ink);border-radius:99px;padding:3px 12px;font-size:12.5px;font-weight:600;align-self:flex-start}
.ractions{margin-top:auto;padding-top:8px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ractions .btn{padding:11px 18px;font-size:14px}
.ractions a.link{font-size:14px;font-weight:600;text-decoration:underline}
.roster-empty{padding:48px 22px;text-align:center;border:1.5px dashed #0a0a0a40;border-radius:26px}
.roster-empty h3{margin:0 0 8px;font-size:24px}
.roster-empty p{margin:0 0 20px;color:var(--mute)}
.roster-more{text-align:center;margin:30px 0 0}
@media(max-width:980px){.roster-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.roster-grid{grid-template-columns:1fr}.rcard{min-height:0}}
/* booking */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 16px}
.slot{border:1.5px solid #0a0a0a33;background:#fff;border-radius:12px;padding:10px 6px;font:600 14px "Archivo",sans-serif;color:var(--ink);cursor:pointer;transition:background .25s,border-color .25s}
.slot:hover:not(:disabled){border-color:var(--ink)}
.slot[aria-pressed=true]{background:var(--lilac);border-color:var(--ink)}
.slot:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.lbl{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.ok.bad{color:#b3261e}
.hint{font-size:13px!important;color:var(--mute);margin:0 0 14px!important}



.pg{font-size:clamp(34px,6vw,78px);margin:0 0 20px;max-width:14ch}
.end .pg{margin-inline:auto;max-width:12ch}
.links a[aria-current=page]::after{width:100%}
.grp{border:1.5px solid #0a0a0a22;border-radius:18px;padding:16px 18px;margin:0 0 16px;min-width:0}
.grp legend{font-weight:700;padding:0 8px;text-transform:capitalize}
.grp label{text-transform:capitalize}
.item{border-top:1px dashed #0a0a0a33;padding:10px 0}
.bar{display:flex;gap:6px;justify-content:flex-end}
.mini{border:1.5px solid var(--ink);background:none;border-radius:8px;padding:2px 9px;cursor:pointer;font:600 13px Archivo,sans-serif}

/* Mobile fix: stack the creators panel and stop horizontal scroll */
@media(max-width:760px){.creators-panel{grid-template-columns:1fr}.creators-panel>*{min-width:0}.orb{max-width:300px}}
html,body{overflow-x:clip}