:root{
  --navy:#0a1628;
  --navy-2:#0f2038;
  --gold:#d4b43c;
  --gold-light:#e8cf7a;
  --bg:#f7f6f2;
  --card:#ffffff;
  --ink:#0a1628;
  --muted:#6b7280;
  --line:#e7e5df;
  --radius:14px;
}
.wrap{
  max-width:1320px; 
  margin:0 auto; 
  padding:0 32px;
}

  /* ---------- HERO ---------- */
.hero-techers{
  position:relative;
  padding:56px 0 44px;
  background:var(--bg);
  overflow:hidden;
  background-image:
    radial-gradient(circle at 4px 4px, #d8d4c9 1.4px, transparent 1.4px);
  background-size:16px 16px;
  background-position: 0 0, 0 0;
}
.hero::before{ /* fade the dot pattern near edges by overlaying bg color blocks */
  content:"";
}
.corner{
  position:absolute; 
  width:60px; 
  height:60px;
  border-top:2px solid var(--gold); 
  border-right:2px solid var(--gold);
  opacity:.7;
}
  .corner.tl{
    top:15px; 
    right:15px; 
    border-top:2px solid var(--gold); 
    border-right:2px solid var(--gold); 
    border-left:none;
  }
  .corner.br{
    bottom:15px; 
    left:15px; 
    border-bottom:2px solid var(--gold); 
    border-left:2px solid var(--gold);
    border-top:none;
    border-right:none;
  }
  .hero-inner{
    position:relative; 
    text-align:center; 
    z-index:2;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:#fdf9ec; border:1px solid #ecdfae; color:#8a6d1c;
    padding:7px 18px; border-radius:999px; font-size:13px; font-weight:700;
    letter-spacing:.3px;
  }
  .eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold);}
  h1.hero-title{
    font-family:'Cairo', sans-serif;
    font-weight:900;
    font-size:42px;
    margin-top:18px;
    color:var(--navy);
  }
  h1.hero-title span{color:var(--gold);}
  .hero-sub{
    max-width:620px; margin:14px auto 0;
    color:var(--muted); font-size:15.5px;
  }
  .hero-stats{
    display:flex; justify-content:center; gap:14px;
    margin-top:30px; flex-wrap:wrap;
  }
  .stat-pill{
    background:var(--card); border:1px solid var(--line);
    border-radius:12px; padding:12px 22px; text-align:center;
    min-width:120px;
  }
  .stat-pill b{display:block; font-family:'Cairo',sans-serif; font-size:22px; color:var(--navy);}
  .stat-pill span{font-size:12.5px; color:var(--muted);}

  /* ---------- SEARCH / FILTER BAR ---------- */
  .filter-bar{
    background:var(--navy);
    background-image: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
    border-radius:18px;
    padding:26px;
    margin-top:-8px;
    position:relative;
    z-index:5;
    box-shadow:0 20px 40px -18px rgba(10,22,40,.45);
  }
  .filter-bar::after{
    content:"";
    position:absolute; inset:0;
    border-radius:18px;
    border:1px solid rgba(212,180,60,.25);
    pointer-events:none;
  }
  .search-row{
    display:flex; gap:10px; margin-bottom:16px;
  }
  .search-row input{
    flex:1;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    color:#fff;
    border-radius:10px;
    padding:13px 16px;
    font-family:inherit; font-size:14.5px;
    outline:none;
  }
  .search-row input::placeholder{color:#9aa5b5;}
  .search-row input:focus{border-color:var(--gold);}
  .search-row .icon{
    width:44px; display:flex; align-items:center; justify-content:center;
    background:var(--gold); border-radius:10px; color:var(--navy); font-weight:700; font-size:16px;
    flex-shrink:0;
  }
  .filters-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:10px;
  }
  .filters-grid select{
    width:100%;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    color:#e7e9ee;
    border-radius:10px;
    padding:11px 12px;
    font-family:inherit; font-size:13.5px;
    outline:none;
    appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d4b43c' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat;
    background-position:left 12px center;
  }
  .filters-grid select:focus{border-color:var(--gold);}
  .filters-grid option{color:#0a1628;}
  .filter-footer{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:16px; flex-wrap:wrap; gap:10px;
  }
  .result-count{color:#c7cedb; font-size:13.5px;}
  .result-count b{color:var(--gold-light);}
  .clear-btn{
    background:transparent; border:1px solid rgba(212,180,60,.5);
    color:var(--gold-light); padding:8px 18px; border-radius:8px;
    font-family:inherit; font-size:13px; cursor:pointer;
    transition:.2s;
  }
  .clear-btn:hover{background:rgba(212,180,60,.12);}

  /* ---------- GRID ---------- */
  .section-title-row{
    display:flex; align-items:center; gap:12px;
    margin:44px 0 22px;
  }
  .section-title-row .bar{width:4px; height:22px; background:var(--gold); border-radius:2px;}
  .section-title-row h2{font-family:'Cairo',sans-serif; font-size:20px; color:var(--navy); font-weight:800;}

  .grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
    padding-bottom:20px;
  }
  .card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    transition:.25s ease;
    display:flex; flex-direction:column;
  }
  .card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 30px -18px rgba(10,22,40,.28);
    border-color:#e6d9a4;
  }
  .card-top{
    padding:22px 20px 0;
    display:flex; gap:14px; align-items:flex-start;
  }
  .avatar{
    width:66px; height:66px; border-radius:50%;
    background:linear-gradient(135deg, var(--navy), var(--navy-2));
    color:var(--gold-light);
    display:flex; align-items:center; justify-content:center;
    font-family:'Cairo',sans-serif; font-weight:800; font-size:20px;
    border:2px solid var(--gold);
    flex-shrink:0;
  }
  .card-id{flex:1; padding-top:2px;}
  .card-name{font-family:'Cairo',sans-serif; font-weight:800; font-size:16.5px; color:var(--navy);}
  .card-degree{
    display:inline-block; margin-top:6px;
    background:#fdf9ec; color:#8a6d1c; border:1px solid #ecdfae;
    font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px;
  }
  .card-body{padding:16px 20px 6px;}
  .meta-row{
    display:flex; align-items:center; gap:8px;
    font-size:13px; color:var(--muted); margin-bottom:8px;
  }
  .meta-row .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0;}
  .meta-row b{color:#374151; font-weight:600;}
  .card-divider{height:1px; background:var(--line); margin:14px 20px 0;}
  .card-actions{
    display:flex; gap:8px; padding:14px 20px 20px;
  }
  .btn-profile{
    flex:1;
    background:var(--navy);
    color:#fff; border:none;
    padding:10px 12px; border-radius:9px;
    font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:6px;
    transition:.2s;
  }
  .btn-profile:hover{background:#132844;}
  .btn-mail{
    width:42px; border:1px solid var(--line); border-radius:9px;
    background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:var(--navy); transition:.2s;
  }
  .btn-mail:hover{border-color:var(--gold); background:#fdf9ec;}

  .empty-state{
    grid-column:1/-1;
    text-align:center; padding:70px 20px; color:var(--muted);
  }
  .empty-state .ic{font-size:34px; margin-bottom:10px;}
  .empty-state b{display:block; color:var(--navy); font-family:'Cairo',sans-serif; font-size:16px; margin-bottom:4px;}

  .load-more{
    display:flex; justify-content:center; margin:8px 0 60px;
  }
  .load-more button{
    background:#fff; border:1px solid var(--line); color:var(--navy);
    padding:12px 30px; border-radius:10px; font-family:inherit; font-weight:700; font-size:13.5px;
    cursor:pointer; transition:.2s;
  }
  .load-more button:hover{border-color:var(--gold); color:#8a6d1c;}

  @media (max-width:1000px){
    .filters-grid{grid-template-columns:repeat(2,1fr);}
    .grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:640px){
    .wrap{padding:0 16px;}
    h1.hero-title{font-size:30px;}
    .filters-grid{grid-template-columns:1fr;}
    .grid{grid-template-columns:1fr;}
    .search-row{flex-direction:column;}
    .search-row .icon{width:100%; height:42px;}
  }