/* FreelanceKu V4 • dimensional premium design • all responsive */
:root{--v4-ink:#111e3b;--v4-navy:#081f46;--v4-cyan:#22c5f0;--v4-mint:#10d3ad;--v4-line:rgba(191,218,239,.76);--v4-depth:0 20px 42px rgba(15,51,102,.12),0 4px 9px rgba(16,48,90,.05),inset 0 1px 0 #fff}
body{background:radial-gradient(ellipse at 5% 3%,#e5f9ff 0,transparent 30%),radial-gradient(ellipse at 92% 36%,#e6efff 0,transparent 28%),linear-gradient(180deg,#eff8ff,#f4f8fe 35%,#eaf2fa);color:var(--v4-ink)}
.site-shell{background:transparent}
.container{max-width:1190px}
.hero{min-height:486px;isolation:isolate;background:radial-gradient(circle at 4% 22%,rgba(44,247,234,.2),transparent 25%),radial-gradient(circle at 96% 0%,rgba(38,135,253,.7),transparent 38%),linear-gradient(145deg,#096bb9 0%,#075093 50%,#071f56 100%);box-shadow:0 24px 58px rgba(5,46,107,.19)}
.hero:before{background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.14),transparent 32%),repeating-linear-gradient(120deg,transparent 0 65px,rgba(255,255,255,.017) 66px 67px,transparent 68px 95px)}
.hero:after{width:630px;height:630px;right:-310px;bottom:-340px;border-radius:50%;border:100px solid rgba(91,192,255,.07);filter:none}
.hero-orb.orb-one{width:520px;height:520px;right:-225px;top:-240px;border:70px solid rgba(255,255,255,.08);box-shadow:inset 20px 20px 30px rgba(255,255,255,.08)}
.hero-orb.orb-two{width:400px;height:400px;bottom:-340px;left:-160px;background:linear-gradient(160deg,rgba(55,226,255,.2),transparent);filter:blur(12px)}
.hero-orb.orb-three{right:13%;top:50%;width:180px;height:180px;background:rgba(0,255,208,.13);filter:blur(50px)}
.nav-bar{padding-top:28px;position:relative;z-index:4}
.brand{font-size:26px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.12))}
.brand-mark{background:linear-gradient(145deg,#fff,#d6eeff);box-shadow:0 10px 20px rgba(0,0,0,.18),inset 0 1px 0 #fff;transform:perspective(220px) rotateY(-5deg) rotateX(4deg)}
.icon-button{border-color:rgba(255,255,255,.35);border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.07));box-shadow:0 9px 23px rgba(1,26,65,.18),inset 0 1px 0 rgba(255,255,255,.33);backdrop-filter:blur(12px)}
.hero-body{padding:57px 0 101px}
.hero h1{text-wrap:balance;max-width:750px;font-weight:850;text-shadow:0 6px 23px rgba(3,31,68,.18)}
.hero-description{max-width:630px;color:#def7ff}
.year-pill{background:linear-gradient(115deg,rgba(0,199,158,.25),rgba(5,152,185,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 7px 17px rgba(3,52,90,.13)}
.search-field{border:2px solid rgba(255,255,255,.56);box-shadow:0 17px 0 -9px rgba(1,50,99,.35),0 31px 55px rgba(3,36,81,.29),inset 0 1px 0 #fff;border-radius:25px;transform:translateZ(0)}
.search-btn{border:1px solid rgba(255,255,255,.32);background:linear-gradient(155deg,#22dfbe 0%,#08b58b 48%,#019879 100%);box-shadow:0 14px 20px rgba(0,110,97,.23),inset 0 2px 0 rgba(255,255,255,.29),inset 0 -3px 0 rgba(0,59,47,.1)}
.hero-feature-row{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin-top:23px}
.hero-feature{display:inline-flex;gap:9px;align-items:center;border:1px solid rgba(177,247,255,.21);background:linear-gradient(155deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border-radius:12px;padding:9px 13px;backdrop-filter:blur(9px);color:#e3f9ff;font-size:12px;font-weight:650;box-shadow:inset 0 1px rgba(255,255,255,.18),0 7px 15px rgba(4,40,89,.08)}
.hero-feature strong{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(30,247,205,.2);color:#79ffe1;font-size:11px}
.main-content{margin-top:-55px;z-index:3}
.demo-notice{backdrop-filter:blur(8px)}
.panel,.highlight-panel,.recruiter-panel{border-radius:26px;box-shadow:var(--v4-depth);transition:box-shadow .25s ease}
.panel{border:1px solid rgba(209,226,241,.88);background:linear-gradient(170deg,rgba(255,255,255,.99),rgba(249,251,255,.97));}
.highlight-panel{padding:34px 37px;background:radial-gradient(circle at 87% 20%,rgba(21,128,235,.36),transparent 42%),linear-gradient(135deg,#121a36,#122c52 67%,#123f6c);border:1px solid rgba(115,191,255,.24);box-shadow:0 25px 48px rgba(10,28,73,.2),inset 0 1px 0 rgba(255,255,255,.17)}
.highlight-panel::after{content:"";position:absolute;right:18px;bottom:12px;width:120px;height:120px;border-radius:27px;transform:rotate(-20deg);border:20px solid rgba(58,222,255,.09);box-shadow:10px 10px 30px rgba(2,22,58,.13)}
.vacancy-card{box-shadow:0 22px 48px rgba(13,83,159,.12),inset 0 1px 0 #fff}
.vacancy-icon{transform:perspective(350px) rotateY(-9deg);box-shadow:0 16px 20px rgba(14,92,185,.2)}
.tag{border-radius:11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 7px 15px rgba(26,52,92,.055)}
.details-panel,.other-roles{box-shadow:var(--v4-depth)}
.detail-symbol,.title-icon{background:linear-gradient(155deg,#e6f9ff,#cbe9ff);box-shadow:0 9px 16px rgba(8,129,210,.1),inset 0 1px 0 #fff;border:1px solid rgba(255,255,255,.85)}
.role-option{border-radius:20px;box-shadow:0 15px 23px rgba(8,66,129,.07),inset 0 1px #fff;transition:background .2s,transform .24s,box-shadow .24s}
.role-option:active{transform:translateY(1px) scale(.995)}
.role-option.selected{box-shadow:0 17px 38px rgba(1,130,202,.2),inset 0 1px 0 #fff}
.role-small-icon{transform:perspective(180px) rotateY(-9deg)}
.recruiter-panel{background:radial-gradient(circle at 90% 20%,rgba(35,195,237,.19),transparent 38%),linear-gradient(145deg,#0e1731,#193353);box-shadow:0 24px 41px rgba(9,34,69,.22),inset 0 1px 0 rgba(255,255,255,.16)}
.sticky-bar{z-index:30;backdrop-filter:blur(20px);background:rgba(252,254,255,.94);box-shadow:0 -12px 35px rgba(31,61,107,.065)}
.sticky-whatsapp{border:1px solid rgba(255,255,255,.27);background:linear-gradient(120deg,#46d7bb,#00b28a 58%,#078f78);box-shadow:0 12px 23px rgba(0,156,119,.24),inset 0 2px 0 rgba(255,255,255,.24),inset 0 -4px 0 rgba(0,79,61,.07)}
.btn-blue{background:linear-gradient(145deg,#199fef,#006cb8);box-shadow:0 12px 19px rgba(15,124,210,.2),inset 0 1px 0 rgba(255,255,255,.3)}
/* Promo gallery: premium image posters with info and CTA */
.promo-section,.testimonials-section,.ratings-section{margin-top:26px;padding:30px 30px 32px;overflow:hidden}
.promo-section{position:relative;background:radial-gradient(circle at 100% 0%,rgba(83,185,244,.13),transparent 36%),linear-gradient(160deg,#fff,#f5faff)}
.promo-section-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.promo-section-top .section-title{margin-bottom:7px}
.promo-section-chip{white-space:nowrap;letter-spacing:1px;font-size:10px;font-weight:800;color:#0878be;background:#e6f6ff;padding:9px 13px;border-radius:999px}
.promo-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-top:23px}
.promo-gallery-card{min-width:0;overflow:hidden;border-radius:23px;background:linear-gradient(170deg,#fff,#f0f6fd);border:1px solid #d5e4f0;box-shadow:0 17px 31px rgba(13,66,134,.1),inset 0 1px #fff;transition:transform .28s ease,box-shadow .28s ease}
.promo-gallery-card:hover{transform:translateY(-7px);box-shadow:0 29px 46px rgba(13,66,134,.16)}
.promo-poster{aspect-ratio:960/620;overflow:hidden;background:linear-gradient(120deg,#074d9b,#0cc8bd)}
.promo-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.promo-gallery-card:hover img{transform:scale(1.05)}
.promo-gallery-info{padding:20px}
.promo-mini-tag{display:inline-block;font-size:10px;letter-spacing:1.5px;font-weight:850;color:#047eae}
.promo-gallery-info h3{font-size:19px;letter-spacing:-.5px;margin:8px 0 7px;color:#132541}
.promo-gallery-info p{margin:0;color:#63738a;font-size:13px;line-height:1.7;min-height:44px}
.promo-link-btn{margin-top:15px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 14px;border:0;border-radius:11px;background:linear-gradient(160deg,#dff8ff,#caedff);color:#086ca3;font-size:12px;font-weight:800;box-shadow:0 8px 14px rgba(18,114,188,.12),inset 0 1px #fff}
.promo-link-btn:hover{background:linear-gradient(160deg,#c6f1ff,#acf1df)}
/* Testimonial screenshots with controlled carousel */
.carousel-heading-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:20px 0 10px}
.carousel-hint{font-size:12px;color:#738198;font-weight:650}
.carousel-heading-actions>div{display:flex;gap:9px}
.carousel-arrow{height:39px;width:39px;display:grid;place-items:center;border:1px solid rgba(188,213,234,.85);border-radius:13px;background:linear-gradient(160deg,#fff,#e9f4ff);color:#176ba7;font-size:22px;font-weight:750;box-shadow:0 8px 16px rgba(13,86,161,.1),inset 0 1px #fff}
.carousel-arrow:hover{transform:translateY(-2px);box-shadow:0 14px 23px rgba(13,86,161,.17)}
.testimonials-marquee,.ratings-slider{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;mask-image:none;-webkit-overflow-scrolling:touch;margin-top:12px;padding:8px 3px 24px;overscroll-behavior-inline:contain}
.testimonials-marquee::-webkit-scrollbar,.ratings-slider::-webkit-scrollbar{display:none}
.testimonials-track,.ratings-track{animation:none!important;display:flex;gap:18px;min-width:0;width:max-content;transform:none!important}
.testimonial-card{width:min(340px,80vw);padding:13px;border:1px solid #cbddec;border-radius:25px;box-shadow:0 16px 31px rgba(13,69,131,.1),inset 0 1px #fff;scroll-snap-align:start;transition:transform .25s ease,box-shadow .25s ease}
.testimonial-card:hover{transform:translateY(-3px);box-shadow:0 22px 39px rgba(13,69,131,.14)}
.testimonial-proof{width:100%;padding:0;border:0;background:linear-gradient(130deg,#0b71c3,#08b6b5);border-radius:17px;overflow:hidden;aspect-ratio:3/2;position:relative;display:block;cursor:zoom-in;box-shadow:inset 0 1px rgba(255,255,255,.2)}
.testimonial-proof img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease}
.testimonial-proof:hover img{transform:scale(1.045)}
.proof-badge{position:absolute;bottom:11px;left:11px;padding:7px 10px;border-radius:9px;background:rgba(4,31,69,.78);color:#fff;backdrop-filter:blur(8px);font-size:10px;font-weight:850;letter-spacing:1px}
.testimonial-user{margin:16px 3px 11px}
.testimonial-user img{width:50px;height:50px;flex-basis:50px;border-radius:15px}
.testimonial-user strong{font-size:14px}
.testimonial-user small{font-size:11px}
.testimonial-card .testimonial-stars{margin:0 3px 10px}
.testimonial-card p{margin:0 3px 7px;font-size:13px;line-height:1.7;color:#3f5570}
/* Animated rating carousel */
.ratings-dashboard{position:relative;display:flex;align-items:center;gap:23px;margin-top:22px;padding:22px 27px;border-radius:25px;background:radial-gradient(circle at 100% 0%,rgba(59,218,217,.18),transparent 36%),linear-gradient(135deg,#0c2c58,#116cb1);color:#fff;box-shadow:0 19px 36px rgba(10,72,137,.18),inset 0 1px rgba(255,255,255,.22);overflow:hidden}
.rating-sphere{z-index:1;flex:0 0 134px;height:134px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(circle at 31% 25%,#66ddff,#087fcf 63%,#064384);border:1px solid rgba(255,255,255,.24);box-shadow:0 20px 29px rgba(0,18,45,.27),inset 0 3px 4px rgba(255,255,255,.35),inset 0 -8px 16px rgba(3,23,66,.29);animation:v4-float 5s ease-in-out infinite}
.rating-sphere strong{font-size:42px;line-height:1;font-weight:850;letter-spacing:-2px}
.rating-sphere small{font-size:14px;color:#d4f6ff;margin-top:5px}
.rating-score-content{z-index:1;min-width:0}
.rating-score-content .testimonial-stars{margin-bottom:8px}
.rating-score-content strong{font-size:20px;font-weight:800}
.rating-score-content p{font-size:13px;color:#d5e9f9;line-height:1.7;margin:7px 0 0;max-width:430px}
.rating-decoration{font-size:240px;line-height:1;color:rgba(106,227,240,.08);position:absolute;right:-14px;top:-51px;transform:rotate(-17deg)}
.rating-card-animated{width:min(298px,74vw);min-height:206px;scroll-snap-align:start;border:1px solid #d3e5f3;position:relative;background:linear-gradient(155deg,#fff,#f1f9ff);box-shadow:0 16px 30px rgba(13,69,131,.1),inset 0 1px #fff;transition:transform .25s ease}
.rating-card-animated:hover{transform:translateY(-3px)}
.rating-card-animated .rating-head strong{font-size:15px}
.review-demo-label{font-size:9px;letter-spacing:1.1px;color:#6b7c93;font-weight:800;display:block;margin-bottom:12px}
.rating-card-animated p{font-size:13px;line-height:1.73}
.mini-score{background:linear-gradient(145deg,#dbf7ff,#bff2ec);color:#0b739b;box-shadow:inset 0 1px rgba(255,255,255,.9)}
/* Photo promo popup and proof lightbox */
.v4-dialog-open{overflow:hidden}
.promo-popup-backdrop,.proof-backdrop{position:fixed;z-index:130;inset:0;background:rgba(3,17,43,.73);backdrop-filter:blur(14px);display:grid;place-items:center;padding:18px}
.promo-popup-dialog{width:min(455px,100%);max-height:min(92dvh,790px);overflow-y:auto;border:1px solid rgba(255,255,255,.65);border-radius:28px;background:linear-gradient(155deg,#fff,#f2f9ff);box-shadow:0 40px 85px rgba(0,7,37,.48),inset 0 1px #fff;position:relative;animation:v4-pop .43s cubic-bezier(.21,.86,.27,1.16) both}
.promo-popup-close{position:absolute;right:12px;top:12px;z-index:2;width:39px;height:39px;border:1px solid rgba(255,255,255,.8);border-radius:13px;color:#153650;background:rgba(255,255,255,.9);display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.13)}
.promo-popup-poster{aspect-ratio:960/620;background:#0868af;overflow:hidden}
.promo-popup-poster img{width:100%;height:100%;display:block;object-fit:cover}
.promo-popup-content{padding:23px 25px 26px;text-align:center}
.popup-eyebrow{color:#118cbe;font-size:10px;letter-spacing:1.8px;font-weight:900}
.promo-popup-content h2{font-size:23px;line-height:1.24;letter-spacing:-.7px;margin:10px 0 9px;color:#132546}
.promo-popup-content p{font-size:13px;line-height:1.75;margin:0 0 17px;color:#687c92}
.popup-action{border:0;display:flex;gap:8px;align-items:center;justify-content:center;width:100%;min-height:51px;color:white;font-weight:850;font-size:14px;border-radius:13px;background:linear-gradient(135deg,#24d1b1,#089a79);box-shadow:0 13px 26px rgba(0,151,115,.22),inset 0 1px rgba(255,255,255,.3)}
.popup-later{border:0;background:transparent;color:#64758b;display:inline-block;margin-top:14px;font-size:13px;font-weight:750}
.proof-dialog{position:relative;width:min(720px,100%);max-height:90dvh;display:flex;align-items:center;flex-direction:column;border:1px solid rgba(255,255,255,.4);border-radius:23px;padding:16px;background:#f7fbff;box-shadow:0 24px 70px rgba(0,8,40,.5);overflow:auto}
.proof-dialog img{width:auto;max-width:100%;max-height:75dvh;object-fit:contain;border-radius:13px}
.proof-dialog p{margin:12px 0 0;color:#1c3653;font-size:14px;font-weight:800}
#proof-modal-close{align-self:flex-end;border:0;border-radius:12px;width:38px;height:38px;display:grid;place-items:center;background:#e1effa;font-size:26px;color:#0a456f;margin:0 0 12px}
@keyframes v4-pop{from{opacity:0;transform:translateY(25px) scale(.91)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes v4-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* phone friendly */
@media (max-width:900px){.promo-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:630px){
 .hero{min-height:0}.hero-body{padding:43px 0 91px}.hero h1{font-size:clamp(32px,8vw,44px);letter-spacing:-1.6px}.hero-description{font-size:14px}.hero-feature-row{gap:7px}.hero-feature{font-size:10px;padding:7px 9px;border-radius:10px}.hero-feature strong{width:21px;height:21px;font-size:10px}
 .hero-orb.orb-one{right:-390px}.highlight-panel{padding:25px 23px}.highlight-panel h2{font-size:25px}
 .promo-section,.testimonials-section,.ratings-section{padding:23px 18px 25px;margin-top:20px;border-radius:25px}
 .promo-section-chip{display:none}.promo-gallery{grid-template-columns:1fr;gap:15px}.promo-gallery-card{display:grid;grid-template-columns:40% minmax(0,1fr);border-radius:18px}.promo-poster{aspect-ratio:auto;min-height:166px}.promo-poster img{height:100%;object-fit:cover}.promo-gallery-info{padding:15px 13px}.promo-gallery-info h3{font-size:16px;margin:6px 0}.promo-gallery-info p{font-size:11px;line-height:1.5;min-height:0}.promo-mini-tag{font-size:8px}.promo-link-btn{padding:9px;margin-top:10px;font-size:10px}
 .rating-sphere{height:106px;flex-basis:106px}.rating-sphere strong{font-size:34px}.ratings-dashboard{padding:17px;gap:17px;border-radius:21px}.rating-score-content strong{font-size:15px}.rating-score-content p{font-size:11px}.rating-decoration{font-size:170px}.carousel-hint{font-size:10px}
 .promo-popup-dialog{border-radius:23px}.promo-popup-content{padding:19px 20px 22px}.promo-popup-content h2{font-size:20px}
}
@media (max-width:370px){.hero-feature-row .hero-feature{font-size:9px}.promo-gallery-card{grid-template-columns:38% 1fr}.promo-poster{min-height:175px}.promo-gallery-info p{display:none}.ratings-dashboard{gap:12px}.rating-sphere{height:90px;flex-basis:90px}.rating-sphere strong{font-size:28px}}
@media (prefers-reduced-motion:reduce){.rating-sphere,.promo-popup-dialog{animation:none!important}.promo-gallery-card:hover,.testimonial-card:hover,.rating-card-animated:hover{transform:none!important}.testimonials-marquee,.ratings-slider{scroll-behavior:auto}}