/* ============================================================
   wwu-hero2.css — WorkWithUs opening hero (rebuild)
   One ink colour, one gradient accent, quiet motion.
   ============================================================ */
.whero{--wg:linear-gradient(100deg,#FF9A3C,#E45CA8 34%,#7C6CF5 68%,#3FD0E6);--wink:#F5F5F7;--wsub:#A1A1A8;--wline:rgba(255,255,255,.09);--wfill:rgba(255,255,255,.035);--wbg:#08080C;position:relative;isolation:isolate;overflow:clip;background:var(--wbg);padding-block:clamp(56px,8vh,104px) clamp(40px,6vh,68px);padding-inline:clamp(18px,4vw,48px)}
[data-theme="light"] .whero{--wink:#0C0C10;--wsub:#5A5A63;--wline:rgba(0,0,0,.1);--wfill:rgba(0,0,0,.028);--wbg:#FAF9F7}

/* ---------- background ---------- */
.whero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.whero-bg .orb{position:absolute;display:block;border-radius:50%;filter:blur(110px);will-change:transform}
.whero-bg .o1{inset-block-start:-16%;inset-inline-start:-10%;width:52%;height:66%;background:radial-gradient(circle,rgba(255,154,60,.5),rgba(228,92,168,.34) 45%,transparent 70%);opacity:.5;animation:wDriftA 28s ease-in-out infinite}
.whero-bg .o2{inset-block-end:-22%;inset-inline-end:-12%;width:56%;height:70%;background:radial-gradient(circle,rgba(124,108,245,.46),rgba(63,208,230,.3) 48%,transparent 72%);opacity:.48;animation:wDriftB 32s ease-in-out infinite}
.whero-bg .o3{inset-block-start:22%;inset-inline-start:34%;width:38%;height:48%;background:radial-gradient(circle,rgba(124,108,245,.34),transparent 68%);opacity:.36;animation:wDriftC 26s ease-in-out infinite}
[data-theme="light"] .whero-bg .orb{opacity:.3}
@keyframes wDriftA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4%,5%,0) scale(1.1)}}
@keyframes wDriftB{0%,100%{transform:translate3d(0,0,0) scale(1.04)}50%{transform:translate3d(-5%,-4%,0) scale(1)}}
@keyframes wDriftC{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3%,4%,0) scale(1.14)}}
.whero-scrim{position:absolute;inset:0;background:radial-gradient(64% 52% at 50% 38%,rgba(8,8,12,.82),rgba(8,8,12,.42) 58%,transparent 82%)}
[data-theme="light"] .whero-scrim{background:radial-gradient(64% 52% at 50% 38%,rgba(255,255,255,.88),rgba(255,255,255,.5) 58%,transparent 82%)}
.whero-floor{position:absolute;inset-inline:-30%;inset-block-end:-4%;height:42%;transform:perspective(620px) rotateX(74deg);transform-origin:50% 100%;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:58px 58px;-webkit-mask:linear-gradient(to top,#000,transparent 72%);mask:linear-gradient(to top,#000,transparent 72%);opacity:.5}
[data-theme="light"] .whero-floor{background-image:linear-gradient(rgba(0,0,0,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.1) 1px,transparent 1px)}
.whero-grain{position:absolute;inset:0;width:100%;height:100%;opacity:.038;mix-blend-mode:soft-light}
@media (pointer:fine){.whero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.055),transparent 70%)}}

/* ---------- copy ---------- */
.whero-in{position:relative;z-index:2;max-width:1160px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.whero-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;border:1px solid var(--wline);background:var(--wfill);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-family:var(--font-sans);font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--wsub);white-space:nowrap}
.whero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--wg);flex:none}
@media (max-width:420px){.whero-eyebrow{font-size:10px;letter-spacing:.12em;white-space:normal;text-align:center}}

.whero-h1{margin:clamp(20px,2.6vw,30px) 0 0;font-family:"Inter Tight",-apple-system,BlinkMacSystemFont,var(--font-sans),sans-serif;font-weight:600;font-size:clamp(2.1rem,5.5vw,4.3rem);line-height:1.02;letter-spacing:-.042em;color:var(--wink);max-width:min(24ch,100%);text-wrap:balance}
html[lang="ar"] .whero-h1{font-family:var(--font-ar);letter-spacing:-.01em;line-height:1.24;max-width:min(22ch,100%)}
.whero-h1 em{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.1em;background:linear-gradient(100deg,#FF9A3C,#E45CA8 34%,#7C6CF5 68%,#3FD0E6);-webkit-background-clip:text;background-clip:text;color:transparent}
html[lang="ar"] .whero-h1 em{font-family:var(--font-ar);font-style:normal;font-weight:600;font-size:1em}

.whero-sub{margin:clamp(16px,2vw,22px) 0 0;max-width:54ch;font-size:clamp(.98rem,1.25vw,1.12rem);line-height:1.62;color:var(--wsub);text-wrap:pretty}

/* ---------- CTA ---------- */
.whero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(24px,3vw,34px)}
.wbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding-inline:26px;border-radius:999px;font-family:var(--font-sans);font-size:1rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:transform .24s cubic-bezier(.16,1,.3,1),box-shadow .24s ease,background .24s ease,border-color .24s ease}
html[lang="ar"] .wbtn{font-family:var(--font-ar)}
.wbtn svg{width:17px;height:17px;flex:none}
[dir="rtl"] .wbtn svg{transform:scaleX(-1)}
.whero .wbtn-p,.whero .wbtn-p span{color:#08080C}
.wbtn-p{position:relative;overflow:hidden;background:var(--wg);box-shadow:0 12px 38px rgba(124,108,245,.3)}
.wbtn-p::before{content:"";position:absolute;inset-block:0;inset-inline-start:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);transition:inset-inline-start .62s cubic-bezier(.16,1,.3,1)}
.wbtn-p:hover{color:#08080C;transform:translateY(-2px);box-shadow:0 18px 50px rgba(124,108,245,.42)}
.wbtn-p:hover::before{inset-inline-start:120%}
.wbtn-p>*{position:relative;z-index:1}
.whero .wbtn-g,.whero .wbtn-g span,.whero .wbtn-g:hover{color:var(--wink)}
.wbtn-g{border:1px solid var(--wline);background:var(--wfill);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.wbtn-g:hover{color:var(--wink);transform:translateY(-2px);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)}
[data-theme="light"] .wbtn-g:hover{border-color:rgba(0,0,0,.22);background:rgba(0,0,0,.05)}
.whero-micro{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--wsub);opacity:.86;text-wrap:pretty}

/* ---------- stats rail ---------- */
.whero-stats{display:grid;grid-template-columns:repeat(4,1fr);width:100%;max-width:980px;margin-top:clamp(28px,3.4vw,44px);border:1px solid var(--wline);border-radius:26px;background:var(--wfill);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden}
.whero-stats .ws{padding:clamp(16px,2vw,24px) clamp(10px,1.6vw,20px);text-align:center;border-inline-start:1px solid var(--wline)}
.whero-stats .ws:first-child{border-inline-start:0}
.whero-stats b{direction:ltr;display:flex;align-items:baseline;justify-content:center;gap:1px;flex-wrap:nowrap;white-space:nowrap;font-family:"Inter Tight",var(--font-sans),sans-serif;font-weight:600;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--wink)}
.whero-stats b i{font-style:normal;background:var(--wg);-webkit-background-clip:text;background-clip:text;color:transparent}
.whero-stats b span{display:inline;margin:0;font:inherit;color:inherit;letter-spacing:inherit}
.whero-stats .ws>span{display:block;margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--wsub);text-wrap:pretty}
@media (max-width:720px){.whero-stats{grid-template-columns:repeat(2,1fr)}.whero-stats .ws:nth-child(odd){border-inline-start:0}.whero-stats .ws:nth-child(n+3){border-block-start:1px solid var(--wline)}}

/* ---------- logo marquee ---------- */
.whero-logos{width:100%;margin-top:clamp(26px,3.2vw,40px)}
.wlogos-cap{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--wsub);opacity:.8}
.wlogos-cap b{width:5px;height:5px;border-radius:50%;background:var(--wg)}
.wlogos{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.wlogos-track{display:flex;align-items:center;gap:8px;width:max-content;animation:wMarquee 58s linear infinite}
[dir="rtl"] .wlogos-track{animation-name:wMarqueeRtl}
@keyframes wMarqueeRtl{from{transform:translate3d(0,0,0)}to{transform:translate3d(50%,0,0)}}
.wlogos:hover .wlogos-track{animation-play-state:paused}
@keyframes wMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.wlogos-track .wl{flex:none;height:52px;padding-inline:18px;display:inline-flex;align-items:center;justify-content:center}
.wlogos-track .wl img{height:28px;width:100px;object-fit:contain;filter:brightness(0) invert(1);opacity:.72;transition:opacity .3s ease,transform .3s ease}
[data-theme="light"] .wlogos-track .wl img{filter:brightness(0);opacity:.58}
.wlogos-track .wl:hover img{opacity:1;transform:scale(1.04)}
@media (max-width:640px){.wlogos-track .wl{height:44px;padding-inline:13px}.wlogos-track .wl img{height:20px;width:76px}}

/* ---------- scroll cue ---------- */
.whero-cue{margin-top:clamp(22px,2.6vw,32px);display:inline-flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--wsub);opacity:.62;text-decoration:none}
.whero-cue:hover{color:var(--wink);opacity:1}
.whero-cue i{display:block;width:1px;height:26px;background:linear-gradient(to bottom,currentColor,transparent);animation:wCue 2.4s ease-in-out infinite}
@keyframes wCue{0%,100%{transform:scaleY(.6);opacity:.5}50%{transform:scaleY(1);opacity:1}}

/* ---------- entrance reveal ---------- */
.whero .rv{opacity:0;transform:translateY(22px);filter:blur(6px);animation:wRise .95s cubic-bezier(.16,1,.3,1) forwards}
@keyframes wRise{to{opacity:1;transform:none;filter:blur(0)}}

@media (max-height:900px){
  .whero{padding-block:clamp(36px,5vh,64px) 32px}
  .whero-h1{font-size:clamp(2rem,4.4vw,3.35rem)}
  .whero-stats{margin-top:24px}
  .whero-logos{margin-top:24px}
  .whero-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .whero .rv{opacity:1;transform:none;filter:none;animation:none}
  .whero-bg .orb,.wlogos-track,.whero-cue i{animation:none!important}
  .wbtn,.wbtn-p::before{transition:none}
  .whero::after{display:none}
}