/* ══════════════════════════════════
   RESET, TOKENS & BASE
══════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{overflow-x:hidden;width:100%;max-width:100%;}

:root {
  --blk: #05060A;
  --ink: #111318;
  --wht: #FFFFFF;
  --cream: #F8F9FA;
  --cream2: #F1F3F5;
  --ylw: #F5C518;
  --ylw-lt: #FFE566;
  --ylw-dk: #C49800;
  --red: #DC2020;
  --red-lt: #FF5555;
  --grn: #059669;
  --blu: #2563EB;
  --g1: #F4F4F6;
  --g2: #E2E2E8;
  --g3: #AFAFBF;
  --g4: #6B6B80;
  --fd: 'Playfair Display', Georgia, serif;
  --fb: 'Outfit', system-ui, sans-serif;
  --fn: 'Bebas Neue', sans-serif;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;
  --sh-sm: 0 2px 12px rgba(5,6,10,.04);
  --sh-md: 0 8px 32px rgba(5,6,10,.08);
  --sh-lg: 0 24px 64px rgba(5,6,10,.12);
  --sh-xl: 0 40px 100px rgba(5,6,10,.18);
}

body { font-family: var(--fb); background: var(--blk); color: var(--wht); -webkit-font-smoothing: antialiased; }
svg { display: inline-block; vertical-align: middle; }
.ad-slot { contain: layout size; overflow: hidden; width: 100%; min-height: 90px; }
.ad-slot-lg { min-height: 250px; }

/* ══════════════════════════════════
   NOTICE BAR
══════════════════════════════════ */
.notice-bar {
  background: var(--ylw); color: var(--blk); text-align: center; font-family: var(--fb);
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.2px; padding: 0.6rem 1rem; position: relative; z-index: 100;
}
.notice-bar a { color: var(--blk); text-decoration: underline; font-weight: 800; margin-left: 8px; }

/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
.rx-hero { background: var(--blk); min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.rx-hero::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); }
.hero-wm { position: absolute; font-family: var(--fn); font-size: clamp(300px, 42vw, 600px); line-height: 0.85; color: transparent; -webkit-text-stroke: 1px rgba(245,197,24,.06); right: -2vw; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 1; user-select: none; animation: wmf 12s ease-in-out infinite; }
@keyframes wmf { 0%,100%{transform:translateY(-50%) rotate(-1deg);} 50%{transform:translateY(-52%) rotate(1deg);} }
.hero-slash { position: absolute; width: 2px; height: 140%; background: linear-gradient(180deg, transparent, var(--red) 30%, var(--red) 70%, transparent); top: -20%; left: 42%; transform: rotate(15deg); opacity: 0.2; z-index: 1; pointer-events: none; }
@media(max-width:767px) { .hero-slash { left: 75%; } }

.hero-body { flex: 1; display: flex; align-items: stretch; position: relative; z-index: 2; }
.hero-l { flex: 0 0 100%; display: flex; flex-direction: column; justify-content: center; padding: 4rem 1.5rem 3rem; }
@media(min-width:768px) { .hero-l { flex: 0 0 55%; padding: 5rem 3rem 5rem 6vw; } }
@media(min-width:1200px) { .hero-l { flex: 0 0 52%; padding: 6rem 4rem 6rem 9vw; } }

.h-eb { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.4rem; }
.h-eb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(220,32,32,.25); animation: dot-pulse 2s ease infinite; flex-shrink: 0; }
@keyframes dot-pulse { 0%,100%{box-shadow:0 0 0 3px rgba(220,32,32,.25);} 50%{box-shadow:0 0 0 8px rgba(220,32,32,.07);} }
.h-eb-txt { font-family: var(--fb); font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.6); }

.h-hl { font-family: var(--fd); font-weight: 900; line-height: 0.95; color: var(--wht); margin-bottom: 1.4rem; }
.hl-ghost { display: block; font-size: clamp(2.5rem, 8vw, 6.5rem); font-style: italic; color: rgba(255,255,255,.2); letter-spacing: -1px; }
.hl-main { display: block; font-size: clamp(3rem, 9.5vw, 8rem); color: var(--wht); letter-spacing: -2px; position: relative; }
.hl-main::after { content:''; position:absolute; bottom:-2px; left:0; width:100px; height:5px; background:linear-gradient(90deg,var(--ylw),var(--red)); border-radius:3px; transform:translateY(10px); }
.hl-ghost2 { display: block; font-size: clamp(2.5rem, 8vw, 6.5rem); font-style: italic; color: rgba(255,255,255,.2); letter-spacing: -1px; padding-top: 0.25rem; }

.h-sub { font-size: clamp(0.95rem, 1.7vw, 1.1rem); font-weight: 400; color: rgba(255,255,255,.6); line-height: 1.8; max-width: 500px; margin: 1.5rem 0 2rem; }
.h-sub strong { color: var(--wht); font-weight: 600; }

.h-tog { display: flex; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-pill); padding: 0.35rem; width: fit-content; margin-bottom: 2rem; gap: 0.3rem; }
.h-tog-b { display: flex; align-items: center; gap: 6px; font-family: var(--fb); font-size: 0.85rem; font-weight: 600; padding: 0.5rem 1.2rem; border-radius: var(--r-pill); border: none; background: transparent; color: rgba(255,255,255,.5); cursor: pointer; transition: all .2s; white-space: nowrap; }
.h-tog-b svg { width: 16px; height: 16px; opacity: 0.7; }
.h-tog-b.on { background: var(--ylw); color: var(--blk); font-weight: 700; }
.h-tog-b.on svg { opacity: 1; }
.h-tog-b:not(.on):hover { color: var(--wht); background: rgba(255,255,255,.1); }

.h-pnl { display: none; }
.h-pnl.show { display: block; animation: fsd .3s ease; }
@keyframes fsd { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

.h-srch { display: flex; align-items: center; gap: 0.5rem; background: var(--wht); border-radius: var(--r-md); padding: 0.4rem 0.4rem 0.4rem 1.2rem; max-width: 540px; height: 64px; transition: box-shadow .2s; }
.h-srch:focus-within { box-shadow: 0 0 0 4px rgba(245,197,24,.3); }
.h-srch-inp { flex: 1; border: none; outline: none; font-family: var(--fb); font-size: 1rem; font-weight: 500; color: var(--ink); background: transparent; min-width: 0; }
.h-srch-inp::placeholder { color: var(--g3); font-weight: 400; }
.h-srch-btn { background: var(--blk); color: var(--ylw); font-family: var(--fn); font-size: 1.1rem; letter-spacing: 1px; border: none; border-radius: var(--r-sm); height: 50px; padding: 0 1.5rem; cursor: pointer; flex-shrink: 0; transition: background .2s, transform .2s; display: flex; align-items: center; }
.h-srch-btn:hover { background: var(--red); transform: scale(1.02); color: var(--wht); }

.h-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; max-width: 540px; align-items: center; }
.h-ch { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-pill); padding: 0.35rem 0.8rem; font-size: 0.8rem; font-weight: 500; color: rgba(255,255,255,.7); text-decoration: none; transition: all .2s; white-space: nowrap; }
.h-ch svg { width: 14px; height: 14px; opacity: 0.7; }
.h-ch:hover { background: var(--ylw); color: var(--blk); border-color: var(--ylw); font-weight: 600; }
.h-ch:hover svg { opacity: 1; }

.hire-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.hbtn-p { display: inline-flex; align-items: center; gap: 8px; background: var(--ylw); color: var(--blk); font-family: var(--fn); font-size: 1.2rem; letter-spacing: 1px; border: none; border-radius: var(--r-md); padding: 0.9rem 2.2rem; cursor: pointer; text-decoration: none; box-shadow: 0 8px 24px rgba(245,197,24,.25); transition: transform .2s, box-shadow .2s; }
.hbtn-p svg { width: 20px; height: 20px; }
.hbtn-p:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(245,197,24,.4); color: var(--blk); }
.hbtn-wa { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid rgba(255,255,255,.2); color: var(--wht); font-family: var(--fb); font-weight: 500; font-size: 0.95rem; border-radius: var(--r-md); padding: 0.9rem 1.5rem; text-decoration: none; transition: all .2s; }
.hbtn-wa svg { width: 18px; height: 18px; fill: currentColor; }
.hbtn-wa:hover { border-color: #25D366; color: #25D366; background: rgba(37,211,102,0.05); }
.hire-note { color: rgba(255,255,255,.5); font-size: 0.85rem; font-weight: 400; margin-top: 1rem; }
.hire-note span { color: var(--ylw); font-weight: 600; }

.h-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); max-width: 540px; }
.hsc { flex: 1; min-width: 80px; padding-right: 1.4rem; }
.hsc:not(:last-child) { border-right: 1px solid rgba(255,255,255,.1); margin-right: 1.4rem; }
.hsc-n { font-family: var(--fn); font-size: clamp(2rem, 4vw, 3rem); color: var(--ylw); letter-spacing: 1px; line-height: 1; display: block; }
.hsc-l { font-size: 0.7rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.4); display: block; margin-top: 0.4rem; }

.hero-r { display: none; }
@media(min-width:768px) { .hero-r { display: flex; flex: 1; align-items: center; justify-content: center; padding: 3rem 5vw 3rem 2rem; } }

.prx-card { background: var(--cream); border-radius: var(--r-lg); width: 100%; max-width: 320px; overflow: hidden; box-shadow: var(--sh-xl); position: relative; transform: rotate(2deg); transition: transform .4s; }
.prx-card:hover { transform: rotate(0); }
.prx-hd { background: var(--blk); padding: 1.2rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.prx-logo { font-family: var(--fn); font-size: 1.8rem; letter-spacing: 1px; }
.prx-logo .py { color: var(--ylw); }
.prx-logo .pr { color: var(--red); }
.prx-stamp { font-family: var(--fn); font-size: 0.7rem; letter-spacing: 2px; color: rgba(255,255,255,.4); text-transform: uppercase; }
.prx-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.prx-lbl { font-family: var(--fb); font-size: 0.65rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--g4); margin-bottom: 0.3rem; }
.prx-val { font-family: var(--fd); font-size: 1.1rem; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--g2); padding-bottom: 0.4rem; }
.prx-val.pvy { color: var(--ylw-dk); border-color: var(--ylw); font-style: italic; }
.prx-jobs { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.3rem; }
.prx-job { display: flex; align-items: center; gap: 0.5rem; background: var(--wht); border-radius: var(--r-sm); padding: 0.6rem 0.8rem; border-left: 3px solid var(--ylw); box-shadow: var(--sh-sm); }
.prx-job.pjr { border-left-color: var(--red); }
.prx-job.pjg { border-left-color: var(--grn); }
.pjn { font-weight: 700; font-size: 0.8rem; color: var(--ink); }
.pjl { font-size: 0.7rem; color: var(--g4); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.pjl svg { width: 12px; height: 12px; color: var(--g3); }
.pjt { margin-left: auto; background: var(--grn); color: var(--wht); font-size: 0.6rem; font-weight: 800; padding: 0.2rem 0.5rem; border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0; }
.pjt.ptr { background: var(--red); }
.pjt.pty { background: var(--ylw-dk); }
.prx-ft { background: linear-gradient(135deg, var(--blk), #1A1A1A); padding: 1rem 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
.prx-ft-txt { font-size: 0.7rem; font-weight: 500; color: rgba(255,255,255,.6); line-height: 1.5; }
.prx-ft-badge { margin-left: auto; background: var(--ylw); color: var(--blk); font-family: var(--fn); font-size: 0.85rem; letter-spacing: 0.5px; padding: 0.3rem 0.8rem; border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0; }
.float-b { position: absolute; top: -14px; right: 18px; background: var(--red); color: var(--wht); font-family: var(--fn); font-size: 0.9rem; letter-spacing: 1px; padding: 0.35rem 0.9rem; border-radius: var(--r-pill); box-shadow: 0 4px 16px rgba(220,32,32,.4); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

.rx-ticker { background: var(--ylw); height: 48px; display: flex; align-items: center; overflow: hidden; position: relative; z-index: 10; flex-shrink: 0; border-top: 1px solid rgba(0,0,0,0.1); }
.ticker-t { display: flex; white-space: nowrap; animation: tsc 35s linear infinite; will-change: transform; }
@keyframes tsc { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.ti { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--fn); font-size: 1rem; letter-spacing: 0.5px; color: var(--blk); padding: 0 2.5rem; border-right: 1px solid rgba(5,6,10,.15); }
.ti svg { width: 14px; height: 14px; color: var(--red); }

/* ══════════════════════════════════
   BODY & SHARED
══════════════════════════════════ */
.rx-body { background: var(--cream); }
.sh { margin-bottom: 2.5rem; }
.sh-ey { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--fn); font-size: 1rem; letter-spacing: 2px; color: var(--red); margin-bottom: 0.5rem; }
.sh-ey::before { content: ''; width: 24px; height: 2px; background: var(--red); border-radius: 2px; flex-shrink: 0; }
.sh-tit { font-family: var(--fd); font-weight: 900; font-size: clamp(2rem, 4vw, 3.2rem); color: var(--ink); line-height: 1.1; }
.sh-tit em { font-style: italic; color: var(--red); }
.sh-tit .ty { color: var(--ylw-dk); }
.sh-sub { font-size: 1rem; color: var(--g4); font-weight: 400; margin-top: 0.8rem; line-height: 1.6; max-width: 600px; }

/* ══════════════════════════════════
   QUICK ACTIONS
══════════════════════════════════ */
.qa-sec { padding: 5rem 0 4rem; background: var(--cream); }
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--g2); border: 1px solid var(--g2); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md); }
@media(min-width:768px){.qa-grid{grid-template-columns:repeat(4,1fr);}}
.qac { background: var(--wht); padding: 2.5rem 1.5rem; display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; position: relative; overflow: hidden; transition: background .25s; min-height: 180px; }
.qac:hover { background: var(--ink); }
.qac:hover .qn { color: rgba(255,255,255,.03); }
.qac:hover .qi { color: var(--ylw); transform: scale(1.1); }
.qac:hover .qt { color: var(--wht); }
.qac:hover .qs { color: rgba(255,255,255,.5); }
.qac:hover .qa { color: var(--ylw); opacity: 1; transform: translateX(5px); }
.qn { font-family: var(--fn); font-size: 5rem; line-height: 1; color: rgba(5,6,10,.03); position: absolute; top: 0.5rem; right: 0.8rem; transition: color .25s; pointer-events: none; }
.qi { margin-bottom: 1rem; transition: all .25s; color: var(--red); }
.qi svg { width: 32px; height: 32px; stroke-width: 1.5px; }
.qt { font-family: var(--fd); font-weight: 900; font-size: 1.1rem; color: var(--ink); margin-bottom: 0.4rem; transition: color .25s; position: relative; z-index: 1; }
.qs { font-size: 0.85rem; font-weight: 400; color: var(--g4); transition: color .25s; position: relative; z-index: 1; line-height: 1.5; }
.qa { margin-top: auto; padding-top: 1rem; color: var(--g3); opacity: 0.5; transition: all .25s; }
.qa svg { width: 20px; height: 20px; }

/* ══════════════════════════════════
   QUAL BELT
══════════════════════════════════ */
.qual-belt { background: var(--ink); padding: 3rem 0; overflow: hidden; }
.qb-inner { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; padding: 0 1rem; }
@media(max-width:767px){ .qb-inner{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding:0 1.5rem; scrollbar-width:none;} .qb-inner::-webkit-scrollbar{display:none;} }
.qbc { display: inline-flex; align-items: center; gap: 0.6rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-pill); padding: 0.6rem 1.2rem; font-family: var(--fb); font-weight: 500; font-size: 0.95rem; color: rgba(255,255,255,.7); text-decoration: none; white-space: nowrap; transition: all .2s; flex-shrink: 0; }
.qbc svg { width: 16px; height: 16px; opacity: 0.6; }
.qbc:hover { background: var(--ylw); border-color: var(--ylw); color: var(--blk); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(245,197,24,.2); font-weight: 600; }
.qbc:hover svg { opacity: 1; }
.qbc .qcc { background: rgba(255,255,255,.1); color: rgba(255,255,255,.5); font-family: var(--fn); font-size: 0.8rem; padding: 0.15rem 0.5rem; border-radius: var(--r-pill); transition: all .2s; }
.qbc:hover .qcc { background: rgba(5,6,10,.15); color: var(--blk); }

/* ══════════════════════════════════
   FEATURE SECTION
══════════════════════════════════ */
.feat-sec { background: var(--ink); padding: 6rem 0; position: relative; overflow: hidden; }
.feat-sec::before { content:''; position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(245,197,24,.05),transparent 70%); top:-150px; right:-100px; pointer-events:none; }
.feat-sec::after { content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(220,32,32,.04),transparent 70%); bottom:-100px; left:-50px; pointer-events:none; }

.ft-tabs { display: flex; gap: 0.5rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-pill); padding: 0.35rem; width: fit-content; margin-bottom: 3rem; }
.ft-tab { display: flex; align-items: center; gap: 8px; font-family: var(--fb); font-size: 0.9rem; font-weight: 600; padding: 0.5rem 1.2rem; border-radius: var(--r-pill); border: none; background: transparent; color: rgba(255,255,255,.5); cursor: pointer; transition: all .2s; white-space: nowrap; }
.ft-tab svg { width: 16px; height: 16px; }
.ft-tab.on { background: var(--ylw); color: var(--blk); font-weight: 700; }
.ft-tab:not(.on):hover { color: var(--wht); background: rgba(255,255,255,.1); }

.fp { display: none; }
.fp.show { display: block; animation: fsd .3s ease; }

.fp-hl { font-family: var(--fd); font-weight: 900; font-size: clamp(2rem, 3.5vw, 3.2rem); color: var(--wht); line-height: 1.1; margin-bottom: 1rem; }
.fp-hl em { color: var(--ylw); font-style: italic; }
.fp-hl .fr { color: var(--red-lt); }
.fp-body { color: rgba(255,255,255,.6); font-size: 1.05rem; font-weight: 400; line-height: 1.7; max-width: 600px; margin-bottom: 1.5rem; }
.fp-body strong { color: var(--wht); font-weight: 600; }
.fp-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }
.fp-li { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(5,150,105,.1); border: 1px solid rgba(5,150,105,.25); border-radius: var(--r-pill); padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: 500; color: #6EE7B7; }
.fp-li svg { width: 14px; height: 14px; color: var(--grn); }
.fp-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.fp-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--ylw); color: var(--blk); font-family: var(--fn); font-size: 1.1rem; letter-spacing: 1px; border: none; border-radius: var(--r-md); padding: 1rem 2.2rem; cursor: pointer; text-decoration: none; box-shadow: 0 8px 24px rgba(245,197,24,.2); transition: transform .2s, box-shadow .2s; }
.fp-btn svg { width: 18px; height: 18px; }
.fp-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(245,197,24,.4); color: var(--blk); }
.fp-btn-o { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: 1.5px solid rgba(255,255,255,.2); color: var(--wht); font-family: var(--fb); font-weight: 500; font-size: 0.95rem; border-radius: var(--r-md); padding: 0.9rem 1.5rem; text-decoration: none; transition: all .2s; }
.fp-btn-o svg { width: 16px; height: 16px; }
.fp-btn-o:hover { border-color: var(--ylw); color: var(--ylw); }
.coin-box { background: rgba(255,255,255,.03); border: 1px solid rgba(245,197,24,.3); border-radius: var(--r-lg); padding: 1.8rem; text-align: center; max-width: 260px; }
.cb-lbl { font-size: 0.75rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 6px; }
.cb-lbl svg { width: 16px; height: 16px; color: var(--ylw); }
.cb-val { font-family: var(--fn); font-size: 3.5rem; color: var(--ylw); letter-spacing: 1px; line-height: 1; margin-bottom: 1rem; }
.cb-val span { font-size: 0.9rem; font-family: var(--fb); color: rgba(255,255,255,.4); }

/* ══════════════════════════════════
   JOBS HEAD
══════════════════════════════════ */
.fj-hd { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.8rem; }
.fj-all { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--fn); font-size: 1rem; letter-spacing: 0.5px; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--ylw); padding-bottom: 0.2rem; transition: color .2s; }
.fj-all svg { width: 16px; height: 16px; transition: transform .2s; }
.fj-all:hover { color: var(--red); border-color: var(--red); }
.fj-all:hover svg { transform: translateX(3px); }

/* ══════════════════════════════════
   WHY DIFFERENT
══════════════════════════════════ */
.why-sec { padding: 6rem 0; background: var(--wht); }
.why-grid { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--g2); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-sm); }
@media(min-width:576px){.why-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:992px){.why-grid{grid-template-columns:repeat(3,1fr);}}
.wc { padding: 3rem 2rem; border-bottom: 1px solid var(--g2); position: relative; overflow: hidden; transition: background .25s; }
.wc:hover { background: var(--ink); }
.wc:hover .wcn { color: rgba(255,255,255,.03); }
.wc:hover .wct { color: var(--wht); }
.wc:hover .wcb { color: rgba(255,255,255,.5); }
.wc:hover .wno { color: rgba(255,255,255,.3); }
.wc:hover .wye { color: #6EE7B7; }
@media(min-width:576px){.wc:nth-child(odd){border-right:1px solid var(--g2);}}
@media(min-width:992px){.wc{border-right:1px solid var(--g2)!important;}.wc:nth-child(3n){border-right:0!important;}}
.wcn { font-family: var(--fn); font-size: 6rem; color: rgba(5,6,10,.03); position: absolute; top: -0.5rem; right: 1rem; line-height: 1; pointer-events: none; transition: color .25s; }
.wci { width: 54px; height: 54px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; transition: transform .25s; color: var(--blk); }
.wc:hover .wci { transform: scale(1.1); }
.wci svg { width: 26px; height: 26px; stroke-width: 1.5px; }
.wi-y { background: rgba(245,197,24,.15); color: var(--ylw-dk); }
.wi-r { background: rgba(220,32,32,.1); color: var(--red); }
.wi-g { background: rgba(5,150,105,.15); color: var(--grn); }
.wi-b { background: rgba(37,99,235,.1); color: var(--blu); }
.wct { font-family: var(--fd); font-weight: 900; font-size: 1.2rem; color: var(--ink); margin-bottom: 0.5rem; transition: color .25s; position: relative; z-index: 1; }
.wcb { font-size: 0.9rem; color: var(--g4); line-height: 1.6; font-weight: 400; margin: 0; transition: color .25s; position: relative; z-index: 1; }
.wvs { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 1rem; position: relative; z-index: 1; }
.wno { font-size: 0.8rem; font-weight: 500; color: var(--red); text-decoration: line-through; transition: color .25s; }
.wye { font-size: 0.8rem; font-weight: 600; color: var(--grn); transition: color .25s; display: flex; align-items: center; gap: 4px; }
.wye svg { width: 14px; height: 14px; }

/* ══════════════════════════════════
   STORY — DIAGONAL SPLIT
══════════════════════════════════ */
.story-sec { position: relative; overflow: hidden; background: var(--cream); padding: 6rem 0; }
.story-sec::before { content:''; position:absolute; left:0; top:0; bottom:0; width:45%; background:var(--ink); clip-path:polygon(0 0,100% 0,85% 100%,0 100%); }
@media(max-width:767px){.story-sec::before{display:none;}}
.story-z { position: relative; z-index: 1; }
.s-left { color: var(--wht); padding-right: 2rem; }
@media(max-width:767px){.s-left{color:var(--ink); padding-right: 0; margin-bottom: 3rem; }}
.s-badge { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-pill); padding: 0.4rem 1rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ylw); margin-bottom: 1.5rem; }
.s-badge svg { width: 16px; height: 16px; }
@media(max-width:767px){.s-badge{border-color:rgba(5,6,10,.15); color:var(--ylw-dk);}}
.s-hl { font-family: var(--fd); font-weight: 900; font-size: clamp(2.2rem, 4.5vw, 3.8rem); line-height: 1.1; margin-bottom: 1.5rem; }
.s-hl em { font-style: italic; color: var(--ylw); }
.s-txt { font-size: 1rem; line-height: 1.8; font-weight: 400; color: rgba(255,255,255,.7); margin-bottom: 1rem; }
.s-txt strong { color: var(--wht); font-weight: 600; }
@media(max-width:767px){.s-txt{color:var(--g4);}.s-txt strong{color:var(--ink);}}
.ms-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
@media(min-width:576px){.ms-row{grid-template-columns:repeat(4,1fr);}}
.msc { background: var(--wht); border-radius: var(--r-md); padding: 1.2rem 1rem; text-align: center; box-shadow: var(--sh-sm); position: relative; overflow: hidden; }
.msc::after { content:''; position:absolute; bottom:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--ylw),var(--red)); }
.msn { font-family: var(--fn); font-size: 2.2rem; color: var(--ink); letter-spacing: 1px; line-height: 1; }
.msl { font-size: 0.8rem; color: var(--g4); font-weight: 500; margin-top: 0.4rem; }

/* ══════════════════════════════════
   TESTIMONIALS
══════════════════════════════════ */
.test-sec { background: var(--wht); padding: 6rem 0; }
.t-row { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.t-row::-webkit-scrollbar { display: none; }
@media(min-width:768px){.t-row{overflow:visible; display:grid; grid-template-columns:repeat(3,1fr);}}
.tc { flex: 0 0 85%; scroll-snap-align: start; background: var(--cream); border-radius: var(--r-lg); padding: 2.5rem 2rem; position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s; }
@media(min-width:768px){.tc{flex:none;}}
.tc:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.tc::before { content: '\201C'; font-family: var(--fd); font-size: 8rem; line-height: 1; color: rgba(5,6,10,.05); position: absolute; top: -1rem; left: 1rem; pointer-events: none; }
.tc-stars { color: var(--ylw-dk); font-size: 1rem; margin-bottom: 1.2rem; position: relative; z-index: 1; display: flex; gap: 4px; }
.tc-stars svg { width: 18px; height: 18px; fill: currentColor; }
.tc-body { font-family: var(--fd); font-size: 1.1rem; font-style: italic; color: var(--ink); line-height: 1.7; margin-bottom: 2rem; position: relative; z-index: 1; }
.tc-head { display: flex; align-items: center; gap: 1rem; }
.tc-ava { width: 50px; height: 50px; min-width: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--ylw), var(--red)); display: flex; align-items: center; justify-content: center; color: var(--wht); flex-shrink: 0; }
.tc-ava svg { width: 24px; height: 24px; }
.tc-name { font-family: var(--fd); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.tc-role { font-size: 0.8rem; color: var(--g4); font-weight: 500; margin-top: 0.15rem; }
.tc.ty { border-bottom: 4px solid var(--ylw); }
.tc.tr { border-bottom: 4px solid var(--red); }
.tc.tg { border-bottom: 4px solid var(--grn); }

/* ══════════════════════════════════
   COMMUNITY VOICES
══════════════════════════════════ */
.vc-sec { background: var(--cream); padding: 6rem 0; }
.vc-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media(min-width:576px){.vc-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:992px){.vc-grid{grid-template-columns:repeat(4,1fr);}}
.vcc { background: var(--wht); border-radius: var(--r-lg); padding: 1.8rem; transition: transform .25s, box-shadow .25s; position: relative; overflow: hidden; border: 1px solid var(--g2); }
.vcc:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.vcc::after { content:''; position:absolute; top:0; left:0; right:0; height:4px; }
.vcc:nth-child(4n+1)::after{background:var(--ylw);}
.vcc:nth-child(4n+2)::after{background:var(--red);}
.vcc:nth-child(4n+3)::after{background:var(--grn);}
.vcc:nth-child(4n)::after{background:var(--blu);}
.vca { font-family: var(--fd); font-weight: 700; font-size: 1rem; color: var(--ink); margin-bottom: 0.5rem; }
.vct { font-size: 0.9rem; color: var(--g4); line-height: 1.6; font-style: italic; }
.vcs { margin-top: 0.8rem; color: var(--ylw-dk); display: flex; gap: 2px; }
.vcs svg { width: 14px; height: 14px; fill: currentColor; }

/* ══════════════════════════════════
   CTA SECTION
══════════════════════════════════ */
.cta-sec { background: var(--ink); padding: 7rem 0; position: relative; overflow: hidden; text-align: center; }
.cta-sec::before { content:'GET HIRED'; font-family:var(--fn); font-size:clamp(80px, 16vw, 200px); letter-spacing:5px; color:rgba(255,255,255,.02); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); white-space:nowrap; pointer-events:none; }
.cta-ey { font-family: var(--fn); font-size: 1rem; letter-spacing: 3px; color: var(--red-lt); margin-bottom: 1rem; }
.cta-hl { font-family: var(--fd); font-weight: 900; font-size: clamp(2.5rem, 5vw, 4.5rem); color: var(--wht); line-height: 1.1; margin-bottom: 1rem; position: relative; z-index: 1; }
.cta-hl em { font-style: italic; color: var(--ylw); }
.cta-sub { color: rgba(255,255,255,.6); font-size: 1.1rem; font-weight: 400; max-width: 500px; margin: 0 auto 3rem; line-height: 1.7; position: relative; z-index: 1; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 4rem; position: relative; z-index: 1; }

.cta-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
@media(min-width:576px){.cta-grid{grid-template-columns:1fr 1fr;}}
.ctacard { display: flex; align-items: flex-start; gap: 1rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 1.5rem; text-decoration: none; transition: all .25s; text-align: left; }
.ctacard:hover { background: rgba(255,255,255,.06); border-color: rgba(245,197,24,.3); transform: translateY(-3px); }
.cic { width: 48px; height: 48px; min-width: 48px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cic svg { width: 24px; height: 24px; }
.ci-g { background: rgba(37,211,102,.1); color: #25D366; }
.ci-y { background: rgba(245,197,24,.1); color: var(--ylw); }
.ci-b { background: rgba(37,99,235,.1); color: #60A5FA; }
.ci-r { background: rgba(220,32,32,.1); color: var(--red-lt); }
.cct { font-family: var(--fd); font-weight: 700; font-size: 1.1rem; color: var(--wht); margin-bottom: 0.3rem; }
.ccd { font-size: 0.85rem; color: rgba(255,255,255,.5); font-weight: 400; line-height: 1.6; }
.ccb { font-size: 0.75rem; font-weight: 700; color: #6EE7B7; display: flex; align-items: center; gap: 4px; margin-top: 0.5rem; }
.ccb svg { width: 12px; height: 12px; }

/* ══════════════════════════════════
   MOBILE NAV (APP LIKE)
══════════════════════════════════ */
.mob-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: rgba(17, 19, 24, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,0.1); height: 68px; padding-bottom: env(safe-area-inset-bottom); }
.mob-nav-in { display: flex; height: 100%; }
.mob-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; text-decoration: none; border: none; background: transparent; cursor: pointer; transition: background .2s; position: relative; }
.mob-btn::after { content:''; position:absolute; top:0; left:20%; right:20%; height:3px; border-radius:0 0 4px 4px; opacity:0; transition:opacity .2s; }
.mb-s { border-right: 1px solid rgba(255,255,255,.08); }
.mb-s::after { background: var(--ylw); }
.mb-p::after { background: var(--red); }
.mob-btn.ma::after { opacity: 1; }
.mb-i { height: 22px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); transition: color .2s; }
.mb-i svg { width: 20px; height: 20px; stroke-width: 2px; }
.mob-btn.ma .mb-i, .mob-btn:hover .mb-i { color: var(--wht); }
.mb-s.ma .mb-i, .mb-s:hover .mb-i { color: var(--ylw); }
.mb-p.ma .mb-i, .mb-p:hover .mb-i { color: var(--red-lt); }
.mb-l { font-family: var(--fb); font-weight: 700; font-size: 0.75rem; color: rgba(255,255,255,0.6); transition: color .2s; }
.mob-btn.ma .mb-l { color: var(--wht); }

/* ══════════════════════════════════
   ANIMATIONS
══════════════════════════════════ */
@keyframes rUp { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} }
.ra { opacity: 0; animation: rUp .6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ra1 { animation-delay: 0.05s } .ra2 { animation-delay: 0.15s } .ra3 { animation-delay: 0.25s } .ra4 { animation-delay: 0.35s } .ra5 { animation-delay: 0.45s }

.empty-b { text-align: center; padding: 4rem 2rem; background: var(--wht); border-radius: var(--r-xl); box-shadow: var(--sh-sm); border: 1px solid var(--g2); }
.empty-b svg { width: 48px; height: 48px; color: var(--red); margin-bottom: 1rem; }
.empty-b h4 { font-family: var(--fd); font-size: 1.8rem; font-weight: 900; color: var(--ink); margin-bottom: 0.8rem; }
.empty-b p { color: var(--g4); font-size: 1rem; margin-bottom: 2rem; line-height: 1.6; }

@media(max-width:767px) {
  .mob-nav { display: block; }
  .rx-body .container { padding-bottom: 1.5rem; }
  .qa-sec, .why-sec, .test-sec, .vc-sec, .cta-sec, .feat-sec, .story-sec { padding: 4rem 0; }
  .hero-l { padding-bottom: 5rem; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ticker-t, .hero-wm, .float-b { animation: none; }
}