/* Spyce — creators page (loads after main.css). Dark theme to set creators apart. */

/* ---------- dark tokens ---------- */
body.page-dark{
  color-scheme:dark;
  --bg:#121110; --bg-2:#1A1817; --card:#1C1A19; --card-2:#232120;
  --ink:#F5F5F5; --ink-2:#E4DFDC; --mute:#A39C97; --hair:rgba(255,255,255,.09);
  --shadow-soft:0 1px 0 rgba(255,255,255,.04) inset,0 12px 32px -14px rgba(0,0,0,.6);
  --shadow-lift:0 1px 0 rgba(255,255,255,.06) inset,0 26px 50px -20px rgba(0,0,0,.75);
  --glass:linear-gradient(180deg,rgba(40,37,35,.72),rgba(28,26,25,.6));
  --glass-strong:linear-gradient(180deg,rgba(40,37,35,.9),rgba(28,26,25,.82));
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.07);
  background:var(--bg);color:var(--ink);
}
.page-dark .eyebrow{color:var(--c-300)}
.page-dark .lead{color:var(--mute)}
.page-dark .burger{background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.08)}
.page-dark .burger span{background:var(--ink)}
.page-dark .nav .links a{color:var(--ink-2)}
.page-dark .nav .links a:hover{background:rgba(255,255,255,.07)}
.page-dark .nav .links a[aria-current="page"]{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.page-dark .menu-links a:hover,.page-dark .menu-links a[aria-current="page"]{background:rgba(255,255,255,.08)}
.page-dark .btn-ghost{background:rgba(255,255,255,.06);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.page-dark .btn-ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),var(--shadow-lift)}
.page-dark footer.site-foot{background:#0B0A09;border-top:1px solid rgba(255,255,255,.07)}
.links a[aria-current="page"]{color:var(--ink);font-weight:700}

/* ---------- hero ---------- */
.cr-hero{padding-block:clamp(40px,7vw,96px) clamp(28px,4vw,48px)}
.cr-hero::before{background:radial-gradient(closest-side,rgba(253,97,69,.32),rgba(201,65,42,.12) 50%,transparent 75%)!important}
.cr-hero h1{max-width:18ch}
.cr-hero .lead{max-width:58ch}
.cr-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-size:15px;color:var(--mute)}
.cr-trust li{display:inline-flex;align-items:center;gap:8px}
.cr-trust svg{width:18px;height:18px;color:var(--c-300)}

/* ---------- brief marquee ---------- */
.briefs{margin-inline:calc(50% - 50vw);padding-block:12px 8px;overflow:hidden;position:relative;
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.briefs-label{display:block;text-align:center;font-size:13px;color:var(--mute);margin-bottom:14px}
.track{display:flex;gap:18px;width:max-content;direction:ltr;animation:marquee 60s linear infinite;padding-block:12px 28px}
.briefs:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.brief{direction:rtl;width:260px;flex:none;background:var(--card);border-radius:24px;padding:14px;box-shadow:var(--shadow-soft),inset 0 0 0 1px var(--hair);display:flex;flex-direction:column;gap:12px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.brief:hover{transform:translateY(-4px)}
.b-cover{aspect-ratio:1.45;border-radius:16px;position:relative;overflow:hidden}
.b-cover::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(8,8,8,.06) 0 3px,transparent 3px 9px)}
.b-cover.g1{background:radial-gradient(55% 60% at 70% 30%,#FFC7B5,transparent 70%),linear-gradient(135deg,#FD6145,#8E231C)}
.b-cover.g2{background:radial-gradient(60% 60% at 30% 30%,#FFE7DF,transparent 70%),linear-gradient(160deg,#FFA68E,#E0785F)}
.b-cover.g3{background:radial-gradient(50% 60% at 65% 70%,#C9A89D,transparent 70%),linear-gradient(135deg,#2A1511,#5A3A31)}
.b-cover.g4{background:radial-gradient(55% 55% at 25% 35%,#FFCDBD,transparent 70%),linear-gradient(135deg,#C9412A,#2A1511)}
.b-cover.g5{background:radial-gradient(60% 60% at 70% 65%,#FD6145,transparent 70%),linear-gradient(160deg,#5A3A31,#FFCDBD)}
.b-cover.g6{background:radial-gradient(55% 60% at 35% 65%,#FFA68E,transparent 70%),linear-gradient(135deg,#7A716C,#2B2522)}
.b-head b{display:block;font-size:17px;line-height:1.25}
.b-head span{font-size:14px;color:var(--mute)}
.b-tags{display:flex;flex-wrap:wrap;gap:6px}
.b-tags span{font-size:13px;font-weight:700;color:var(--ink-2);background:rgba(255,255,255,.06);border-radius:999px;padding:4px 10px;box-shadow:inset 0 0 0 1px var(--hair)}
.b-ask{font-size:14px;color:var(--mute);border-top:1px solid var(--hair);padding-top:10px}
.b-ask strong{color:var(--ink-2)}

/* ---------- bento ---------- */
.head h2 span{color:var(--c-text)}
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:860px){.bento{grid-template-columns:1fr}}
.bx{border-radius:var(--r-xl);padding:8px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.7);display:flex;flex-direction:column}
.bx-vis{position:relative;height:clamp(250px,26vw,320px);border-radius:28px;overflow:hidden;isolation:isolate}
.bx-vis::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 120%,rgba(0,0,0,.45),transparent 60%)}
.v1{background:linear-gradient(160deg,#FFB39E 0%,#FD6145 55%,#B2381F 100%)}
.v2{background:linear-gradient(160deg,#5A3A31 0%,#A64B36 55%,#E0785F 100%)}
.v3{background:linear-gradient(160deg,#FFD9CC 0%,#F29A80 50%,#C9412A 100%)}
.v4{background:linear-gradient(160deg,#2A1511 0%,#7A2F22 55%,#FD6145 110%)}
.bx-txt{padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px}
.bx-txt .kicker{align-self:flex-start;font-size:13px;font-weight:700;color:var(--c-300);background:rgba(253,97,69,.12);border-radius:999px;padding:3px 12px}
.bx-txt h3{font-size:clamp(22px,2vw,27px);line-height:1.2}
.bx-txt p{color:var(--mute);font-size:16px;max-width:44ch}

/* floating UI pieces inside the visuals */
.fc{position:absolute;background:rgba(18,17,16,.86);color:var(--ink);border-radius:20px;padding:14px 16px;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 0 1px rgba(255,255,255,.08),0 24px 40px -16px rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.fc small{display:block;font-size:12px;color:var(--mute);margin-bottom:4px}
.fc b{display:block;font-size:16px;line-height:1.25}
.bx:hover .fc{transform:translateY(-4px) rotate(var(--r,0deg))}
.fc-profile{top:14%;right:7%;width:min(250px,58%);transform:rotate(-4deg);--r:-5deg;display:flex;flex-direction:column;gap:8px}
.fc-track{bottom:14%;left:7%;width:min(270px,62%);transform:rotate(3deg);--r:4deg;display:flex;gap:12px;align-items:center}
.fc-track .b-cover{width:58px;flex:none;aspect-ratio:1;border-radius:12px}
.fc-track .b-tags{margin-top:6px}
.fc-match{top:46%;left:50%;translate:-50% -50%;padding:9px 16px;border-radius:999px;background:#fff;color:#141211;font-weight:700;font-size:15px;display:flex;align-items:center;gap:6px}
.fc-match svg{width:18px;height:18px;color:var(--c-500)}
.bx:hover .fc-match{transform:scale(1.05)}
.fc-brief{top:11%;right:8%;width:min(300px,70%);transform:rotate(-2deg);--r:-3deg;display:flex;flex-direction:column;gap:10px}
.fb-head{padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}
.fb-row{display:grid;grid-template-columns:62px 1fr;gap:8px;align-items:baseline}
.fb-row span{font-size:12px;color:var(--c-300)}
.fb-row p{margin:0;font-size:14px;color:var(--ink-2)}
.fc-audio{bottom:10%;left:7%;width:min(250px,60%);transform:rotate(4deg);--r:5deg;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:999px}
.fc-audio .play{width:32px;height:32px;flex:none;border-radius:50%;background:var(--c-500);position:relative}
.fc-audio .play::after{content:"";position:absolute;top:50%;left:50%;translate:-35% -50%;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff}
.wave{flex:1;display:flex;align-items:center;gap:3px;height:28px;direction:ltr}
.wave i{flex:1;border-radius:2px;background:rgba(255,255,255,.75);height:calc(var(--h) * 1%);animation:wv 1.4s ease-in-out infinite alternate}
.wave i:nth-child(3n){animation-delay:-.4s}.wave i:nth-child(4n){animation-delay:-.8s}.wave i:nth-child(5n){animation-delay:-1.1s}
@keyframes wv{to{transform:scaleY(.45)}}
.fc-list{top:50%;left:50%;translate:-50% -50%;width:min(300px,76%);display:flex;flex-direction:column;gap:10px;transform:rotate(-2deg);--r:-1deg}
.fc-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fc-list li{display:flex;align-items:center;gap:10px;font-size:15px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05)}
.fc-list li svg{width:20px;height:20px;flex:none;color:#fff;background:var(--c-500);border-radius:50%;padding:3px}
.fc-btn{align-self:stretch;text-align:center;font-size:14px;font-weight:700;padding:10px;border-radius:999px;background:#fff;color:#141211}
.fc-pay{top:50%;left:50%;translate:-50% -50%;width:min(320px,80%);display:flex;flex-direction:column;gap:14px;transform:rotate(2deg);--r:1deg}
.fc-pay ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fc-pay li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--mute)}
.fc-pay li svg,.fc-pay li i{width:22px;height:22px;flex:none;border-radius:50%}
.fc-pay li.done{color:var(--ink)}
.fc-pay li.done svg{color:#fff;background:var(--c-500);padding:3px}
.fc-pay li.now{color:#fff;font-weight:700}
.fc-pay li.now i{box-shadow:inset 0 0 0 2px var(--c-300);position:relative}
.fc-pay li.now i::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--c-300);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.55);opacity:.5}}
.fc-pay .bar{height:6px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden;direction:ltr}
.fc-pay .bar i{display:block;height:100%;width:78%;border-radius:6px;background:linear-gradient(90deg,var(--c-300),var(--c-500));margin-left:auto;animation:grow 3.2s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes grow{0%{width:40%}70%,100%{width:82%}}

/* ---------- process road ---------- */
.road{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative}
.road::before{content:"";position:absolute;top:22px;right:12%;left:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(253,97,69,.5),transparent)}
.road li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:0 8px}
.road .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--bg);color:var(--c-300);box-shadow:inset 0 0 0 1px rgba(253,97,69,.45);font-variant-numeric:tabular-nums;position:relative;z-index:1}
.road li:first-child .n{background:var(--c-500);color:#fff;box-shadow:var(--glow)}
.road h3{font-size:20px}
.road p{color:var(--mute);font-size:15px;max-width:26ch}
@media (max-width:860px){
  .road{grid-template-columns:1fr;gap:0}
  .road::before{top:22px;bottom:22px;right:21px;left:auto;width:1px;height:auto;background:linear-gradient(180deg,rgba(253,97,69,.5),rgba(253,97,69,.1))}
  .road li{flex-direction:row;align-items:flex-start;text-align:start;gap:16px;padding:0 0 26px}
  .road li>div{display:flex;flex-direction:column;gap:4px}
  .road .n{flex:none}
  .road h3{margin-top:9px}
}

/* ---------- community: the coral moment on a dark page ---------- */
.community{border-radius:var(--r-xl);background:radial-gradient(90% 120% at 85% 10%,#FF8A6E 0%,#FD6145 35%,#B2381F 80%,#7A2418 100%);color:#fff;padding:clamp(40px,7vw,88px) clamp(20px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;position:relative;overflow:hidden;isolation:isolate;box-shadow:0 40px 80px -40px rgba(253,97,69,.5)}
@media (max-width:900px){.community{grid-template-columns:1fr;text-align:center}.community .txt{align-items:center}}
.community .txt{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.community h2{font-size:clamp(34px,4.6vw,60px);line-height:1.06;max-width:12ch}
.community h2 span{color:#2A1511}
.community p{color:rgba(255,255,255,.9);font-size:clamp(18px,1.6vw,20px);max-width:40ch}
.community .eyebrow{color:#fff}
.orbit{position:relative;width:min(380px,100%);aspect-ratio:1;margin-inline:auto}
.ring{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.ring.r2{inset:18%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.core{position:absolute;inset:33%;border-radius:50%;background:rgba(42,21,17,.9);display:grid;place-items:center;text-align:center;font-weight:700;font-size:clamp(15px,1.4vw,18px);line-height:1.2;color:#fff;box-shadow:0 20px 40px -12px rgba(42,21,17,.6)}
.spin{position:absolute;inset:0;animation:rot 48s linear infinite}
.spin i{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:clamp(12px,1.2vw,15px);color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.9);animation:rot 48s linear infinite reverse}
@keyframes rot{to{transform:rotate(360deg)}}
.spin i:nth-child(1){left:50%;top:0;background:#2A1511}
.spin i:nth-child(2){left:85.4%;top:14.6%;background:#7A2418}
.spin i:nth-child(3){left:100%;top:50%;background:#FFCDBD;color:#2A1511}
.spin i:nth-child(4){left:85.4%;top:85.4%;background:#4A2C24}
.spin i:nth-child(5){left:50%;top:100%;background:#C9412A}
.spin i:nth-child(6){left:14.6%;top:85.4%;background:#FFE7DF;color:#2A1511}
.spin i:nth-child(7){left:0;top:50%;background:#2B2522}
.spin i:nth-child(8){left:14.6%;top:14.6%;background:#E0785F}

/* ---------- faq accordion ---------- */
.acc{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:12px}
.acc details{background:var(--card);border-radius:22px;box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .3s,background-color .3s}
.acc details[open]{background:var(--card-2)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 26px;font-weight:700;font-size:clamp(17px,1.4vw,19px)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:focus-visible{outline:3px solid var(--c-300);outline-offset:2px;border-radius:22px}
.acc summary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:rgba(253,97,69,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23FFA68E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.acc details p{padding:0 26px 24px;color:var(--mute);font-size:17px;margin:0}
.page-dark .acc details.is-open summary::after{background-color:rgba(253,97,69,.24)}
.page-dark .acc details[open]:not(.is-open) summary::after{background-color:rgba(253,97,69,.14)}

/* ---------- closing ---------- */
.page-dark .closing{background:radial-gradient(90% 120% at 50% 0%,rgba(253,97,69,.22),rgba(28,26,25,.9) 60%,var(--card) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.page-dark .closing .lead{color:var(--mute)}

@media (prefers-reduced-motion:reduce){.track,.spin,.spin i,.wave i,.fc-pay .bar i,.fc-pay li.now i::after{animation:none}}

@media (max-width:520px){.bx-vis{height:290px}.fc-list{width:84%;gap:8px;padding:12px}.fc-list li{padding:6px 8px;font-size:14px}.fc-brief{width:80%}.fc-profile,.fc-track{width:74%}}

/* ---------- journey: scroll-lit timeline with a live mini-UI per step ---------- */
.head h2#how-h span{color:var(--c-text)}
.journey{position:relative;max-width:1040px;margin-inline:auto;display:flex;flex-direction:column;gap:clamp(28px,4vw,48px);padding-block:8px}
.j-line{position:absolute;top:0;bottom:120px;right:50%;width:2px;translate:50% 0;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.j-line i{position:absolute;inset:0;background:linear-gradient(180deg,var(--c-300),var(--c-500));transform-origin:top;transform:scaleY(var(--p));box-shadow:0 0 18px rgba(253,97,69,.6)}
.j-step{position:relative;display:grid;grid-template-columns:1fr 56px 1fr;align-items:center}
.j-dot{grid-column:2;justify-self:center;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:17px;background:var(--bg);color:var(--mute);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);z-index:1;transition:background-color .45s,color .45s,box-shadow .45s,transform .45s cubic-bezier(.2,.8,.2,1);font-variant-numeric:tabular-nums}
.j-step.is-lit .j-dot{background:var(--c-500);color:#fff;box-shadow:0 0 0 6px rgba(253,97,69,.15),var(--glow);transform:scale(1.06)}
.j-card{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:18px;padding:24px;border-radius:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--hair),var(--shadow-soft);transform:translateY(14px) scale(.98);transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .6s}
/* only the picture dims while a step is waiting; the text always keeps full contrast */
.j-card .j-ui{opacity:.45;filter:saturate(.3);transition:opacity .6s,filter .6s}
.j-step.is-lit .j-card .j-ui{opacity:1;filter:none}
.j-step:nth-of-type(even) .j-card{grid-column:3}
.j-step.is-lit .j-card{transform:none;box-shadow:inset 0 0 0 1px rgba(253,97,69,.28),0 30px 60px -30px rgba(253,97,69,.35)}
.j-txt{display:flex;flex-direction:column;gap:6px}
.j-txt small{font-size:13px;color:var(--c-300)}
.j-txt h3{font-size:clamp(22px,2vw,28px)}
.j-txt p{color:var(--mute);font-size:16px;margin:0}
.j-ui{border-radius:20px;padding:16px;background:linear-gradient(160deg,#2A1511,#1A1210);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);min-height:128px;display:flex;flex-direction:column;justify-content:center;gap:10px}
/* 1 chat */
.ui-chat .msg{max-width:82%;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.35}
.ui-chat .in{align-self:flex-start;background:#2B2826;border-start-start-radius:4px}
.ui-chat .out{align-self:flex-end;background:var(--c-500);color:#fff;border-end-end-radius:4px}
.ui-chat .typing{align-self:flex-start;display:flex;gap:4px;padding:9px 12px;border-radius:14px;background:#2B2826}
.ui-chat .typing i{width:6px;height:6px;border-radius:50%;background:var(--mute);animation:ty 1.2s infinite}
.ui-chat .typing i:nth-child(2){animation-delay:.15s}.ui-chat .typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{50%{transform:translateY(-3px);opacity:.4}}
/* 2 brief */
.ub-top{display:flex;align-items:center;gap:12px}
.ub-top .b-cover{width:52px;aspect-ratio:1;border-radius:12px;flex:none}
.ub-top small{display:block;font-size:12px;color:var(--c-300)}
.ub-top b{font-size:16px}
.ub-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ub-btns span{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:999px;font-size:14px;font-weight:700}
.ub-btns .yes{background:#fff;color:#141211}
.ub-btns .yes svg{width:16px;height:16px;color:var(--c-500)}
.ub-btns .no{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:var(--ink-2)}
/* 3 recording */
.rec-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;direction:ltr}
.rec{display:flex;align-items:center;gap:6px;color:#fff}
.rec i{width:9px;height:9px;border-radius:50%;background:#FF4D3A;animation:blink 1.1s infinite}
@keyframes blink{50%{opacity:.25}}
.tc{color:var(--mute);font-variant-numeric:tabular-nums}
.rec-frame{position:relative;height:74px;border-radius:12px;display:grid;place-items:center;background:radial-gradient(60% 80% at 50% 50%,rgba(253,97,69,.25),transparent 70%)}
.rec-frame b{font-size:15px;color:#fff}
.corner{position:absolute;width:14px;height:14px;border-color:rgba(255,255,255,.7);border-style:solid;border-width:0}
.c1{top:6px;right:6px;border-top-width:2px;border-right-width:2px;border-top-right-radius:4px}
.c2{top:6px;left:6px;border-top-width:2px;border-left-width:2px;border-top-left-radius:4px}
.c3{bottom:6px;right:6px;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:4px}
.c4{bottom:6px;left:6px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:4px}
/* 4 paid */
.ui-paid{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;background:linear-gradient(160deg,#FD6145,#B2381F)}
.paid-ico{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 10px 24px -8px rgba(0,0,0,.4)}
.paid-ico svg{width:28px;height:28px;color:var(--c-500)}
.j-step.is-lit .paid-ico{animation:pop .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.6)}100%{transform:none}}
.ui-paid b{display:block;font-size:18px;color:#fff}
.ui-paid small{font-size:14px;color:rgba(255,255,255,.85)}
.j-end{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding-top:8px}
.j-end p{font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);margin:0}
@media (max-width:860px){
  .j-line{right:23px;translate:0 0;bottom:150px}
  .j-step{grid-template-columns:48px 1fr;gap:14px;align-items:start}
  .j-dot{grid-column:1;margin-top:14px}
  .j-card,.j-step:nth-of-type(even) .j-card{grid-column:2;grid-row:1;padding:18px}
}
@media (prefers-reduced-motion:reduce){.j-card{transform:none}.j-card .j-ui{opacity:1;filter:none}}

/* ---------- realistic mini-UIs ---------- */
.j-ui.ui-wa,.j-ui.ui-doc,.j-ui.ui-cam,.j-ui.ui-bank{padding:0;background:none;box-shadow:none;min-height:0;display:block}
/* 1 · WhatsApp (iOS, dark) */
.ui-wa{border-radius:20px;overflow:hidden;background:#0B0B0B;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;font-family:"Google Sans",system-ui,sans-serif}
.wa-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#1C1C1D;border-bottom:1px solid #2C2C2E}
.wa-back{color:#F2F2F2;font-size:24px;line-height:1;margin-inline-end:2px}
.wa-av{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.wa-av img{width:18px;height:auto}
.wa-who b{display:block;font-size:14px;color:#F2F2F2;font-weight:600}
.wa-who small{font-size:11px;color:#8E8E93}
.wa-body{padding:10px 10px 12px;display:flex;flex-direction:column;gap:5px;
  background:#0B0B0B radial-gradient(circle at 20% 30%,rgba(255,255,255,.035) 1.5px,transparent 2px) 0 0/22px 22px}
.wa-day{align-self:center;font-size:11px;font-weight:600;color:#D1D1D6;background:rgba(40,40,42,.9);padding:2px 10px;border-radius:10px;margin-bottom:4px}
.wb{position:relative;max-width:84%;padding:6px 9px 16px;border-radius:12px;font-size:13.5px;line-height:1.38;color:#E9EDEF}
.wb.out{align-self:flex-end;background:#005C4B;border-end-end-radius:3px}
.wb.in{align-self:flex-start;background:#262628;border-end-start-radius:3px}
.wt{position:absolute;bottom:3px;left:8px;display:flex;align-items:center;gap:3px;font-size:10px;color:rgba(233,237,239,.6);direction:ltr}
.wb.out .wt{color:#9FD3C6}
.tk{width:14px;height:9px;color:#53BDEB}
.wb.link{display:flex;gap:8px;align-items:center;padding:4px 4px 18px;width:84%}
.lk-thumb{width:44px;height:44px;border-radius:8px;flex:none;background:radial-gradient(60% 60% at 30% 30%,#FFC7B5,transparent 70%),linear-gradient(140deg,#FD6145,#5A2A1F)}
.lk-txt b{display:block;font-size:12.5px;color:#E9EDEF}
.lk-txt small{display:block;font-size:11px;color:#A8D9CC;text-align:right}
/* 2 · brief document */
.ui-doc{display:flex!important;flex-direction:column;gap:10px}
.doc{position:relative;background:#F7F3F0;color:#1B1716;border-radius:6px 16px 6px 6px;padding:14px 16px 16px;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 18px 30px -16px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:10px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.doc-fold{position:absolute;top:0;right:0;width:22px;height:22px;background:linear-gradient(45deg,#D9D2CD 50%,transparent 50%);border-radius:0 0 0 5px;box-shadow:-2px 2px 4px rgba(0,0,0,.12)}
.doc-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid #E4DDD8}
.doc-ico{flex:none;width:34px;height:40px;border-radius:5px;background:#C8352F;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:end center;padding-bottom:5px;direction:ltr;letter-spacing:.04em}
.doc-head b{display:block;font-size:14px}
.doc-head small{font-size:11.5px;color:#655C57}
.doc-sec{display:flex;flex-direction:column;gap:5px}
.doc-sec span{font-size:11.5px;font-weight:700;color:#B0361F}
.doc-sec i{display:block;height:6px;border-radius:3px;background:#DAD2CD;width:var(--w)}
.ui-doc .ub-btns span{padding:9px}
/* 3 · short-video camera */
.ui-cam{display:flex!important;justify-content:center;padding:4px 0!important}
.cam{position:relative;width:min(190px,62%);aspect-ratio:9/16;border-radius:22px;overflow:hidden;
  background:radial-gradient(45% 30% at 50% 38%,rgba(255,199,181,.55),transparent 70%),radial-gradient(70% 55% at 50% 85%,rgba(253,97,69,.55),transparent 70%),linear-gradient(170deg,#3A2520,#120C0A);
  box-shadow:0 0 0 5px #0B0A09,0 0 0 6px rgba(255,255,255,.12),0 24px 40px -18px rgba(0,0,0,.8)}
.cam-prog{position:absolute;top:10px;inset-inline:12px;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden;direction:ltr}
.cam-prog i{display:block;height:100%;background:#FF3B5C;animation:camp 6s linear infinite}
@keyframes camp{from{width:0}to{width:100%}}
.cam-sound{position:absolute;top:22px;left:50%;translate:-50% 0;white-space:nowrap;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.4);padding:3px 10px;border-radius:999px}
.cam-tools{position:absolute;top:50px;left:9px;display:flex;flex-direction:column;align-items:center;gap:12px}
.cam-tools i{width:16px;height:16px;border:2px solid #fff;border-radius:5px;opacity:.9}
.cam-tools .t-timer{border-radius:50%}
.cam-tools .t-fx{border-radius:50% 50% 50% 0}
.cam-tools b{font-size:11px;color:#fff}
.cam-bottom{position:absolute;bottom:12px;inset-inline:0;display:flex;flex-direction:column;align-items:center;gap:9px}
.cam-dur{display:flex;gap:10px;font-size:10.5px;color:rgba(255,255,255,.65);font-weight:700}
.cam-dur .on{color:#fff}
.cam-rec{width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 4px rgba(255,255,255,.9);display:grid;place-items:center}
.cam-rec i{width:30px;height:30px;border-radius:50%;background:#FF3B5C;animation:recp 1.6s ease-in-out infinite}
@keyframes recp{50%{transform:scale(.72);border-radius:9px}}
/* 4 · bank transfer confirmation */
.bank{background:#fff;color:#141211;border-radius:18px;padding:14px 16px;box-shadow:0 18px 30px -16px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:10px;font-family:"Google Sans",system-ui,sans-serif}
.bk-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid #EEE9E6}
.bk-ico{width:34px;height:34px;border-radius:10px;background:#F2EEEB;display:grid;place-items:center;flex:none;color:#2B2522}
.bk-ico svg{width:20px;height:20px}
.bk-head b{display:block;font-size:14.5px}
.bk-head small{font-size:12px;color:#7A716C}
.bk-ok{margin-inline-start:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#117A45;background:#E3F5EC;padding:3px 9px;border-radius:999px}
.bk-ok svg{width:13px;height:13px}
.bank dl{margin:0;display:flex;flex-direction:column;gap:7px}
.bank dl div{display:flex;justify-content:space-between;align-items:center;font-size:13.5px}
.bank dt{color:#7A716C}
.bank dd{margin:0;font-weight:700}
.bank dd.blur{filter:blur(4.5px);user-select:none}

/* ---------- who we look for: the coral moment, now with substance ---------- */
.fit{border-radius:var(--r-xl);background:radial-gradient(90% 120% at 85% 0%,#FF8A6E 0%,#FD6145 38%,#B2381F 82%,#7A2418 100%);color:#fff;
  padding:clamp(28px,6vw,80px) clamp(20px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center;box-shadow:0 40px 80px -40px rgba(253,97,69,.5)}
.fit-txt{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.fit .eyebrow{color:#fff}
.fit h2{font-size:clamp(32px,4.4vw,56px);line-height:1.08}
.fit h2 span{color:#2A1511}
.fit-txt>p{margin:0;font-size:clamp(17px,1.5vw,19px);color:rgba(255,255,255,.9)}
.fit-list{list-style:none;margin:4px 0 8px;padding:0;display:flex;flex-direction:column;gap:0;width:100%;counter-reset:f}
.fit-list li{display:flex;flex-direction:column;gap:2px;padding:14px 0 14px;border-top:1px solid rgba(255,255,255,.22);padding-inline-start:40px;position:relative}
.fit-list li:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.fit-list li::before{counter-increment:f;content:counter(f);position:absolute;inset-inline-start:0;top:14px;width:26px;height:26px;border-radius:50%;background:rgba(42,21,17,.85);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}
.fit-list b{font-size:18px}
.fit-list span{font-size:15.5px;color:rgba(255,255,255,.85)}
.btn-light{background:#fff;color:#141211;box-shadow:0 14px 30px -12px rgba(42,21,17,.5)}
.btn-light svg{fill:#141211}
.btn-light:hover{transform:translateY(-2px)}
.fit-vis{display:flex;justify-content:center}
.review{width:min(380px,100%);background:#fff;color:#141211;border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 60px -24px rgba(42,21,17,.6);transform:rotate(-2deg)}
.rv-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid #EEE9E6}
.rv-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#FFA68E,#FD6145);color:#fff;font-weight:700;display:grid;place-items:center;flex:none}
.rv-head b{display:block;font-size:15px;text-align:right}
.rv-head small{font-size:12px;color:#7A716C}
.rv-stat{margin-inline-start:auto;font-size:12px;font-weight:700;color:#117A45;background:#E3F5EC;padding:4px 10px;border-radius:999px;white-space:nowrap}
.review .b-tags span{color:#2B2522;background:#F5F1EE;box-shadow:none}
.review ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.review li{display:flex;align-items:center;gap:10px;font-size:15px;padding:9px 12px;border-radius:12px;background:#FAF7F4}
.review li svg{width:20px;height:20px;flex:none;color:#fff;background:var(--c-500);border-radius:50%;padding:3px}
.rv-note{border-radius:12px;background:#FFF5F1;padding:10px 12px}
.rv-note small{font-size:11.5px;font-weight:700;color:#C9412A}
.rv-note p{margin:2px 0 0;font-size:14px;color:#2B2522}
@media (max-width:900px){
  .fit{grid-template-columns:1fr;padding:32px 20px 32px;gap:0}
  .fit-vis{display:none}
  .fit .btn{width:100%;justify-content:center}
}
#why-h{max-width:none}#why-h span{display:block}
.fit h2{font-size:clamp(32px,4vw,52px)}