/* ===== experts.html style block 1 ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,Arial,sans-serif;background:#070B14;color:#fff}
.experts-page{min-height:100vh;padding:70px 8%;background:radial-gradient(circle at top right,rgba(255,107,53,.16),transparent 35%),linear-gradient(135deg,#070B14,#0D1321)}
.top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:60px}
.logo{font-size:24px;font-weight:900}.logo span{color:#ff6b35}
.back-home{color:#ffb703;text-decoration:none;font-weight:800}
.hero{text-align:center;max-width:850px;margin:0 auto 36px}
.badge{display:inline-flex;gap:8px;align-items:center;padding:9px 18px;border-radius:999px;background:rgba(255,107,53,.12);color:#ff6b35;font-size:13px;font-weight:900;margin-bottom:20px}
.hero h1{font-size:52px;line-height:1.08;margin-bottom:18px}
.hero h1 span{color:#ff6b35}
.hero p{color:#a8b3c7;font-size:18px;line-height:1.7}
.market-controls{margin:36px auto 46px;max-width:1000px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.filter-btn{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);color:#dbeafe;padding:12px 18px;border-radius:999px;font-weight:800;cursor:pointer;transition:.25s}
.filter-btn.active,.filter-btn:hover{background:#ff6b35;color:#fff;border-color:#ff6b35;box-shadow:0 12px 30px rgba(255,107,53,.22)}
.expert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.expert-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:30px;position:relative;overflow:hidden;transition:.35s ease;cursor:pointer}
.expert-card:hover{transform:translateY(-8px);border-color:#ff6b35;box-shadow:0 25px 70px rgba(255,107,53,.18)}
.expert-card:focus-visible{outline:3px solid rgba(255,107,53,.72);outline-offset:4px}
.expert-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,107,53,.12),transparent 55%);opacity:0;transition:.35s}
.expert-card:hover::before{opacity:1}
.expert-card>*{position:relative;z-index:1}
.expert-top{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.avatar{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#ff6b35,#ffb703);display:grid;place-items:center;font-size:28px;box-shadow:0 15px 35px rgba(255,107,53,.35)}
.verify{color:#22c55e;font-weight:900;font-size:14px;margin-bottom:4px}
.expert-status{font-size:12px;color:#22c55e;font-weight:800}
.expert-status.offline{color:#94a3b8}
.expert-card h2{font-size:27px;margin-bottom:12px}
.desc{color:#c7d2e5;line-height:1.65;margin-bottom:22px;min-height:78px}
.expert-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.expert-meta span{padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.07);color:#dbeafe;font-size:12px;font-weight:800}
.info{display:grid;gap:12px;margin-bottom:26px}
.info div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);padding:12px 14px;border-radius:14px;color:#dbeafe}
.info strong{color:#fff}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.open-profile-hint{margin:-6px 0 18px;color:#ff9a5c;font-size:13px;font-weight:900;opacity:.9}
.btn{border:none;text-decoration:none;padding:13px 17px;border-radius:14px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn-primary{background:linear-gradient(135deg,#ff6b35,#ffb703);color:#07111f}
.btn-secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14)}
.btn-hire{background:#22c55e;color:#06130b}
.cta-box{margin-top:70px;padding:42px;border-radius:30px;background:linear-gradient(135deg,#ff6b35,#e55a25);display:flex;justify-content:space-between;align-items:center;gap:20px}
.cta-box h2{font-size:32px}.cta-box p{color:rgba(255,255,255,.85);margin-top:8px}.cta-box a{background:#fff;color:#07111f;padding:15px 24px;border-radius:16px;text-decoration:none;font-weight:900}
@media(max-width:1050px){.expert-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.experts-page{padding:42px 18px}.top-bar{margin-bottom:42px}.hero h1{font-size:34px}.hero p{font-size:15px}.expert-grid{grid-template-columns:1fr}.cta-box{flex-direction:column;align-items:flex-start}}

/* === MOBILE FRIENDLY PASS: EXPERTS MARKETPLACE === */
@media(max-width:900px){
  html,
  body{
    overflow-x:hidden;
  }

  .experts-page{
    padding:34px 18px 72px;
  }

  .experts-page .hero{
    display:block !important;
    min-height:0 !important;
    padding:0 !important;
    text-align:center !important;
    max-width:100%;
    margin:0 auto 26px;
  }

  .experts-page .hero h1{
    font-size:clamp(34px,9vw,48px) !important;
    line-height:1.08 !important;
  }

  .experts-page .hero p{
    max-width:100%;
    font-size:16px;
  }

  .market-controls{
    justify-content:flex-start;
    gap:10px;
    margin:28px -18px 34px;
    padding:0 18px 6px;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .market-controls::-webkit-scrollbar{
    display:none;
  }

  .filter-btn{
    flex:0 0 auto;
    min-height:42px;
    padding:10px 15px;
    font-size:13px;
  }

  .expert-grid{
    grid-template-columns:1fr !important;
    gap:18px;
  }

  .expert-card{
    padding:24px 18px;
    border-radius:24px;
  }

  .expert-top{
    align-items:flex-start;
    gap:13px;
  }

  .avatar{
    width:56px;
    height:56px;
    border-radius:17px;
    font-size:24px;
  }

  .expert-card h2{
    font-size:25px;
  }

  .desc{
    min-height:0;
    font-size:15px;
  }

  .actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .actions .btn{
    justify-content:center;
    min-height:48px;
    padding-inline:12px;
  }

  .cta-box{
    margin-top:42px;
    padding:28px 20px;
    border-radius:24px;
  }

  .cta-box h2{
    font-size:28px;
  }

  .cta-box a{
    width:100%;
    text-align:center;
  }
}

@media(max-width:480px){
  .experts-page{
    padding:28px 14px 72px;
  }

  .market-controls{
    margin-inline:-14px;
    padding-inline:14px;
  }

  .expert-card{
    padding:22px 16px;
  }

  .expert-meta span{
    font-size:11px;
  }

  .actions{
    grid-template-columns:1fr;
  }
}