/* HRfreelancer — استایل بر اساس طراحی نهایی hrfreelancer_rect_stats */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Vazirmatn',sans-serif;direction:rtl;background:#fff;color:#1a2a3a;line-height:1.7}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{max-width:1140px;margin:0 auto;padding:0 24px}

/* NAV */
.nav{background:#004680;padding:0 32px;display:flex;align-items:center;gap:14px;height:60px;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,70,128,0.2)}
.nav-logo{color:#fff;font-size:20px;font-weight:700;letter-spacing:-0.5px}
.nav-logo span{color:#8ec8f0}
.nav-links{display:flex;gap:24px;margin-right:auto}
.nav-links a{color:#fff;font-size:13px;opacity:0.85;transition:opacity 0.2s}
.nav-links a:hover,.nav-links a.active{opacity:1}
.nav-actions{display:flex;gap:8px;align-items:center}
.btn-out{color:#fff;font-size:12px;border:1px solid rgba(255,255,255,0.45);padding:6px 16px;border-radius:20px;transition:background 0.2s}
.btn-out:hover{background:rgba(255,255,255,0.12)}
.btn-in{background:#fff;color:#004680;font-size:12px;font-weight:700;padding:6px 17px;border-radius:20px;transition:background 0.2s}
.btn-in:hover{background:#e8f2fb}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}
.nav-hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}

/* HERO */
.hero{background:linear-gradient(to right,#4484ba,#004680);padding:56px 28px 0}
.hero-inner{max-width:760px;margin:0 auto;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,0.14);color:#fff;border:1px solid rgba(255,255,255,0.28);padding:6px 17px;border-radius:100px;font-size:13px;font-weight:500;margin-bottom:26px}
.bdot{width:8px;height:8px;border-radius:50%;background:#7de87d;display:inline-block;box-shadow:0 0 6px #7de87d;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.4}}
.hero-title{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:900;color:#fff;line-height:1.15;letter-spacing:-0.03em;margin-bottom:18px}
.hero-accent{color:#FFC000}
.hero-sub{font-size:15px;color:#fff;opacity:0.85;margin-bottom:30px;line-height:1.9}
.search-wrap{display:flex;align-items:center;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.18);margin-bottom:18px;max-width:600px;margin-right:auto;margin-left:auto}
.search-wrap span,.search-icon{font-size:18px;color:#aaa;padding:0 10px 0 4px}
.search-wrap input{flex:1;border:none;outline:none;padding:14px 14px;font-size:14px;font-family:inherit;color:#444}
.search-wrap button{background:#004680;color:#fff;border:none;padding:14px 26px;font-size:14px;font-weight:700;font-family:inherit;white-space:nowrap;cursor:pointer;transition:background 0.2s}
.search-wrap button:hover{background:#4484ba}
.tags-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}
.tag-lbl{font-size:12px;color:rgba(255,255,255,0.7)}
.pop-tag{font-size:12px;padding:4px 13px;border:1px solid rgba(255,255,255,0.35);color:#fff;border-radius:20px;background:rgba(255,255,255,0.1);transition:background 0.2s}
.pop-tag:hover{background:rgba(255,255,255,0.22)}

/* STATS — مستطیل */
.stats5{display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,0.18);border-top:1px solid rgba(255,255,255,0.15);padding:24px 0;margin:0 -28px}
.s5-item{text-align:center;padding:10px 52px;position:relative}
.s5-item:not(:last-child)::after{content:'';position:absolute;left:0;top:15%;height:70%;width:0.5px;background:rgba(255,255,255,0.28)}
.s5-num{font-size:38px;font-weight:900;line-height:1;letter-spacing:-0.04em}
.s5-main{color:#fff}
.s5-acc{color:#FFC000}
.s5-lbl{font-size:12px;color:rgba(255,255,255,0.72);margin-top:6px;display:block}
.s5-line{width:28px;height:2.5px;background:#FFC000;margin:8px auto 0;border-radius:2px}

/* SECTION SHARED */
.sec-tag{font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:#4484ba;font-weight:700;display:block;margin-bottom:6px}
.sec-title{font-size:clamp(1.4rem,3vw,1.7rem);font-weight:800;letter-spacing:-0.02em;margin-bottom:6px;color:#1a2a3a}
.sec-sub{font-size:13px;color:#7a9ab0;margin-bottom:26px}
.sec-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}
.sec-header.center{flex-direction:column;align-items:center;text-align:center}
.see-all{font-size:13px;color:#4484ba;font-weight:600}

/* CATEGORIES */
.cats-sec{padding:60px 0 50px;background:#fff}
.cats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat-card{background:#f4f8fc;border:1px solid #d8e8f4;border-radius:14px;padding:20px 18px;transition:all 0.2s;display:block}
.cat-card:hover{border-color:#4484ba;transform:translateY(-3px);box-shadow:0 6px 24px rgba(0,70,128,0.1)}
.cat-icon{font-size:26px;margin-bottom:12px;height:38px;display:flex;align-items:center}
.cat-icon svg{width:36px;height:36px}
.cat-name{font-size:14px;font-weight:700;color:#1a2a3a;margin-bottom:6px}
.cat-desc{font-size:12px;color:#7a9ab0;line-height:1.6;margin-bottom:12px}
.cat-count{font-size:12px;padding:3px 11px;background:#fff;color:#4484ba;border-radius:20px;font-weight:600;border:1px solid #4484ba;display:inline-block}

/* FREELANCERS */
.fc-sec{padding:60px 0;background:#f4f8fc}
.fc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fc-card{background:#fff;border:1px solid #d8e8f4;border-radius:14px;padding:20px;transition:all 0.2s}
.fc-card:hover{border-color:#4484ba;box-shadow:0 6px 24px rgba(0,70,128,0.1);transform:translateY(-3px)}
.fc-top{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.fc-av{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;flex-shrink:0;background:linear-gradient(135deg,#4484ba,#004680);overflow:hidden}
.fc-name{font-size:14px;font-weight:700;color:#1a2a3a}
.fc-spec{font-size:12px;color:#4484ba;font-weight:500;margin-top:2px}
.fc-loc{font-size:11px;color:#9ab0c4;margin-top:3px}
.fc-rate-n{font-size:14px;font-weight:700;color:#004680}
.fc-rate-l{font-size:11px;color:#9ab0c4}
.fc-stars{color:#4484ba;font-size:12px}
.badge{font-size:11px;padding:2px 9px;border-radius:20px;font-weight:600;display:inline-block;margin-bottom:10px}
.b-top{background:#e8f2fb;color:#004680;border:1px solid #4484ba}
.b-rise{background:#e8f8e8;color:#1a6a1a;border:1px solid #7dc87d}
.b-ver{background:#fff8e0;color:#7a5500;border:1px solid #f0c040}
.fc-bio{font-size:12px;color:#7a9ab0;line-height:1.7;margin-bottom:12px}
.fc-skills{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.sk{font-size:11px;padding:3px 9px;border:1px solid #d8e8f4;border-radius:20px;color:#7a9ab0;background:#f4f8fc}
.fc-bot{display:flex;align-items:center;justify-content:space-between}
.fc-jobs{font-size:12px;color:#9ab0c4}
.fc-jobs span{color:#004680;font-weight:600}
.btn-inv{font-size:12px;padding:7px 16px;border:1.5px solid #004680;border-radius:20px;color:#004680;background:transparent;cursor:pointer;font-weight:600;transition:all 0.2s;font-family:inherit}
.btn-inv:hover{background:#004680;color:#fff}

/* HOW IT WORKS */
.how-sec{padding:60px 0;background:#fff}
.steps{display:flex;align-items:flex-start;gap:10px}
.step{flex:1;background:#f4f8fc;border:1px solid #d8e8f4;border-radius:14px;padding:28px 22px;text-align:center}
.step-num{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#4484ba,#004680);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;margin:0 auto 14px}
.step h3{font-size:14px;font-weight:700;color:#1a2a3a;margin-bottom:9px}
.step p{font-size:12px;color:#7a9ab0;line-height:1.7}
.step-arrow{font-size:18px;color:#4484ba;margin-top:60px;flex-shrink:0}

/* TESTIMONIALS */
.test-sec{padding:60px 0;background:#f4f8fc}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.test-card{background:#fff;border:1px solid #d8e8f4;border-radius:14px;padding:24px}
.test-card.feat{border-color:#4484ba}
.test-stars{color:#4484ba;font-size:13px;margin-bottom:12px}
.test-card p{font-size:12px;color:#7a9ab0;line-height:1.8;margin-bottom:16px}
.test-author{display:flex;align-items:center;gap:10px}
.t-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;background:linear-gradient(135deg,#4484ba,#004680)}
.t-name{font-size:13px;font-weight:700;color:#1a2a3a;display:block}
.t-co{font-size:11px;color:#9ab0c4}

/* CTA */
.cta-sec{padding:60px 0}
.cta-box{background:linear-gradient(to right,#4484ba,#004680);border-radius:16px;padding:56px 32px;text-align:center}
.cta-box h2{font-size:clamp(1.3rem,3vw,1.9rem);font-weight:800;color:#fff;margin-bottom:12px}
.cta-box p{font-size:13px;color:rgba(255,255,255,0.78);margin-bottom:24px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-w{background:#fff;color:#004680;padding:12px 26px;border-radius:8px;font-weight:700;font-size:14px;transition:background 0.2s}
.btn-w:hover{background:#e8f2fb}
.btn-ow{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.55);padding:12px 26px;border-radius:8px;font-weight:600;font-size:14px;transition:all 0.2s}
.btn-ow:hover{background:rgba(255,255,255,0.12)}

/* FOOTER */
.footer{background:#004680;padding:56px 0 24px}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:36px}
.footer-logo{font-size:20px;font-weight:700;color:#fff;margin-bottom:10px}
.footer-logo span{color:#8ec8f0}
.footer-brand p{font-size:12px;color:rgba(255,255,255,0.5);line-height:1.7;margin-bottom:16px}
.footer-socials{display:flex;gap:14px}
.footer-socials a{font-size:12px;color:rgba(255,255,255,0.5);transition:color 0.2s}
.footer-socials a:hover{color:#8ec8f0}
.footer-group h4{font-size:13px;font-weight:700;color:#fff;margin-bottom:14px}
.footer-group ul{display:flex;flex-direction:column;gap:8px}
.footer-group a{font-size:12px;color:rgba(255,255,255,0.5);transition:color 0.2s}
.footer-group a:hover{color:#8ec8f0}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12);padding-top:20px;text-align:center;font-size:12px;color:rgba(255,255,255,0.35)}

/* PAGE HERO */
.page-hero{background:linear-gradient(to right,#4484ba,#004680);padding:48px 0 40px}
.page-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;color:#fff;margin:8px 0;letter-spacing:-0.02em}
.page-hero p{font-size:14px;color:rgba(255,255,255,0.75)}
.page-hero .sec-tag{color:#FFC000}

/* MAIN LAYOUT */
.main-layout{display:grid;grid-template-columns:240px 1fr}
.sidebar{padding:24px;border-left:1px solid #d8e8f4;background:#fff}
.filter-group{margin-bottom:20px}
.filter-title{font-size:13px;font-weight:700;color:#1a2a3a;margin-bottom:12px}
.filter-sep{height:1px;background:#d8e8f4;margin:18px 0}
.filter-opt{display:flex;align-items:center;gap:8px;font-size:13px;color:#7a9ab0;margin-bottom:8px;cursor:pointer}
.filter-opt input{accent-color:#004680}
.results-area{padding:24px;background:#f4f8fc}
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.results-count{font-size:13px;color:#7a9ab0;font-weight:500}
.sort-select{font-size:13px;border:1px solid #d8e8f4;border-radius:6px;padding:6px 10px;background:#fff;color:#1a2a3a;cursor:pointer;font-family:inherit}
.search-bar-full{background:#f4f8fc;padding:20px 0;border-bottom:1px solid #d8e8f4}

/* FC LIST CARD */
.fc-list-card{background:#fff;border:1px solid #d8e8f4;border-radius:14px;padding:20px;margin-bottom:14px;transition:all 0.2s}
.fc-list-card:hover{border-color:#4484ba;box-shadow:0 4px 20px rgba(0,70,128,0.08)}
.fc-list-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.fc-list-bio{font-size:13px;color:#7a9ab0;line-height:1.7;margin-bottom:12px}
.fc-list-bottom{display:flex;align-items:center;justify-content:space-between}

/* JOB CARD */
.job-card{background:#fff;border:1px solid #d8e8f4;border-radius:14px;padding:22px;margin-bottom:14px;transition:all 0.2s}
.job-card:hover{border-color:#4484ba;box-shadow:0 4px 20px rgba(0,70,128,0.08)}
.job-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.job-title{font-size:15px;font-weight:700;color:#1a2a3a;margin-bottom:4px}
.job-company{font-size:12px;color:#7a9ab0}
.job-budget{font-size:15px;font-weight:700;color:#004680;text-align:left}
.job-budget-lbl{font-size:11px;color:#9ab0c4;text-align:left}
.job-desc{font-size:13px;color:#7a9ab0;line-height:1.7;margin-bottom:14px}
.job-meta{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.job-meta-item{font-size:12px;color:#7a9ab0}
.job-bottom{display:flex;justify-content:space-between;align-items:center}
.job-tags{display:flex;gap:6px;flex-wrap:wrap}
.job-tag{font-size:11px;padding:3px 10px;border:1px solid #d8e8f4;border-radius:20px;color:#7a9ab0;background:#f4f8fc}
.btn-apply{font-size:13px;padding:8px 20px;background:#004680;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-family:inherit;transition:background 0.2s}
.btn-apply:hover{background:#4484ba}
.job-badge-urgent{font-size:11px;padding:2px 8px;border-radius:20px;background:#ffe8e8;color:#c00;border:1px solid #f09090;font-weight:600;margin-right:6px}

/* CONTACT */
.contact-section{padding:60px 0;background:#f4f8fc}
.contact-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:56px;align-items:start}
.contact-info h1{font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:900;letter-spacing:-0.02em;margin:10px 0 14px}
.contact-info>p{font-size:14px;color:#7a9ab0;margin-bottom:28px;line-height:1.8}
.contact-features{display:flex;flex-direction:column;gap:12px}
.cf-item{display:flex;align-items:center;gap:10px;font-size:13px;color:#1a2a3a}
.cf-item span{color:#4484ba;font-weight:700}
.contact-form-wrap{background:#fff;border:1px solid #d8e8f4;border-radius:16px;padding:32px}
.contact-form{display:flex;flex-direction:column;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:13px;font-weight:600;color:#1a2a3a}
.form-group input,.form-group select,.form-group textarea{border:1px solid #d8e8f4;border-radius:8px;padding:11px 14px;font-size:13px;font-family:inherit;color:#1a2a3a;background:#f4f8fc;direction:rtl;outline:none;transition:border-color 0.2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#4484ba;box-shadow:0 0 0 3px rgba(68,132,186,0.12)}
.form-group textarea{resize:vertical;min-height:120px}
.btn-submit{background:linear-gradient(to right,#4484ba,#004680);color:#fff;border:none;padding:14px;border-radius:8px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:opacity 0.2s}
.btn-submit:hover{opacity:0.9}
.form-message{font-size:13px;padding:12px 16px;border-radius:8px;display:none}
.form-message.success{display:block;background:#e8f8e8;color:#1a6a1a;border:1px solid #7dc87d}
.form-message.error{display:block;background:#ffe8e8;color:#c00;border:1px solid #f09090}

/* RESPONSIVE */
@media(max-width:1024px){
  .cats-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:768px){
  .nav{padding:0 16px}
  .nav-links,.nav-actions{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:60px;right:0;left:0;background:#004680;padding:16px;gap:12px}
  .nav-hamburger{display:flex}
  .hero{padding:40px 16px 0}
  .stats5{flex-direction:column;gap:20px;margin:0 -16px}
  .s5-item:not(:last-child)::after{display:none}
  .fc-grid,.test-grid{grid-template-columns:1fr}
  .steps{flex-direction:column}
  .step-arrow{transform:rotate(90deg);margin:0 auto}
  .contact-layout{grid-template-columns:1fr;gap:32px}
  .form-row{grid-template-columns:1fr}
  .main-layout{grid-template-columns:1fr}
  .sidebar{border-left:none;border-bottom:1px solid #d8e8f4}
  .footer-top{grid-template-columns:1fr;gap:24px}
}