.mobile-home{ display:none; }

@media (max-width: 768px){

  .mobile-home{
    display:block;
    padding:14px 14px 90px;
    font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }

  /* ===== HERO CARD ===== */
  .mh-hero{
    background:linear-gradient(135deg,#0f2149,#16305e);
    border-radius:18px;
    padding:20px 18px;
    color:#fff;
    margin-bottom:16px;
    position:relative;
    overflow:hidden;
  }
  .mh-hero::after{
    content:''; position:absolute; top:-40px; right:-40px;
    width:140px; height:140px; border-radius:50%;
    background:rgba(255,255,255,0.06);
  }
  .mh-hero-title{font-size:16.5px; font-weight:800; margin-bottom:3px;}
  .mh-hero-sub{font-size:12px; color:#b9c3dc; margin-bottom:14px;}
  .mh-stats-row{display:flex; gap:10px;}
  .mh-stat{
    flex:1; background:rgba(255,255,255,0.08); border-radius:12px;
    padding:10px 8px; text-align:center;
  }
  .mh-stat b{display:block; font-size:14.5px; font-weight:800;}
  .mh-stat span{font-size:9.5px; color:#b9c3dc;}

  /* ===== QUICK ACCESS SCROLL ===== */
  .mh-section-title{
    font-size:11px; font-weight:800; color:#94a3b8; text-transform:uppercase;
    letter-spacing:0.06em; margin:0 2px 10px;
  }
  .mh-qa-scroll{
    display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; margin-bottom:20px;
    scrollbar-width:none;
  }
  .mh-qa-scroll::-webkit-scrollbar{display:none;}
  .mh-qa-item{
    flex:0 0 auto; width:76px;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    text-decoration:none;
  }
  .mh-qa-icon{
    width:52px; height:52px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(15,33,73,0.08);
  }
  .mh-qa-icon svg{width:24px; height:24px;}
  .mh-qa-item span{font-size:10.5px; font-weight:600; color:#1f2937; text-align:center; line-height:1.2;}

  /* ===== CATEGORY TABS ===== */
  .mh-tabs{
    display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px;
    scrollbar-width:none; position:sticky; top:52px; z-index:50; background:#f4f6fb; padding-top:4px;
  }
  .mh-tabs::-webkit-scrollbar{display:none;}
  .mh-tab{
    flex:0 0 auto; padding:8px 16px; border-radius:20px; font-size:12.5px; font-weight:700;
    background:#fff; color:#64748b; border:1.5px solid #e5e9f2; white-space:nowrap;
  }
  .mh-tab.active{ background:#0f2149; color:#fff; border-color:#0f2149; }

  /* ===== JOB CARD (single active) ===== */
  .mh-job-panel{ display:none; }
  .mh-job-panel.active{ display:block; }
  .mh-job-card-header{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 4px 12px;
  }
  .mh-job-card-header h3{
    font-size:15px; font-weight:800; color:#111827; display:flex; align-items:center; gap:8px;
  }
  .mh-job-card-header h3 svg{width:18px; height:18px;}
  .mh-view-all-link{ font-size:12px; font-weight:700; display:flex; align-items:center; gap:2px; text-decoration:none; }
  .mh-view-all-link svg{width:13px; height:13px;}

  .mh-job-item{
    display:flex; align-items:center; gap:12px;
    background:#fff; border-radius:14px; padding:12px 14px; margin-bottom:10px;
    box-shadow:0 1px 4px rgba(15,33,73,0.05);
    text-decoration:none;
  }
  .mh-job-icon{
    width:40px; height:40px; border-radius:11px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .mh-job-icon svg{width:19px; height:19px;}
  .mh-job-info{flex:1; min-width:0;}
  .mh-job-title{
    font-size:13px; font-weight:700; color:#1f2937;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px;
  }
  .mh-job-meta{display:flex; align-items:center; gap:6px;}
  .mh-job-date{font-size:11px; color:#9aa3b2;}
  .mh-new-tag{
    background:#fde3ec; color:#e02463; font-size:8.5px; font-weight:800;
    padding:2px 5px; border-radius:5px;
  }
  .mh-job-arrow{width:16px; height:16px; color:#cbd2de; flex-shrink:0;}

  .mh-view-all-btn{
    display:block; text-align:center; padding:12px; border-radius:12px;
    font-size:13px; font-weight:700; border:1.5px solid #e5e9f2; margin-top:4px; margin-bottom:24px;
    text-decoration:none;
  }

  /* ===== LATEST UPDATES ===== */
  .mh-updates-card{ background:#fff; border-radius:16px; padding:16px; margin-bottom:20px; box-shadow:0 1px 4px rgba(15,33,73,0.05); }
  .mh-updates-card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .mh-updates-card-head h3{font-size:14px; font-weight:800; color:#111827;}
  .mh-updates-card-head a{font-size:11.5px; font-weight:700; color:#1a56db; text-decoration:none;}
  .mh-update-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid #f0f2f7; gap:8px; }
  .mh-update-row:last-child{border-bottom:none;}
  .mh-update-text{ font-size:12.3px; font-weight:600; color:#374151; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
  .mh-update-date{font-size:10.5px; color:#9aa3b2; flex-shrink:0;}

  /* ===== FAQ ===== */
  .mh-faq-card{ background:#0f2149; border-radius:16px; padding:16px; margin-bottom:20px; }
  .mh-faq-card h3{ color:#fff; font-size:14px; font-weight:800; margin-bottom:12px; }
  .mh-faq-item{ background:rgba(255,255,255,0.06); border-radius:10px; margin-bottom:8px; overflow:hidden; }
  .mh-faq-q{ padding:12px 14px; font-size:12.5px; font-weight:700; color:#fff; display:flex; justify-content:space-between; align-items:center; }
  .mh-faq-q svg{width:15px; height:15px; color:#b9c3dc; transition:transform .2s; flex-shrink:0;}
  .mh-faq-item.open .mh-faq-q svg{transform:rotate(180deg);}
  .mh-faq-a{ max-height:0; overflow:hidden; transition:max-height .25s; font-size:12px; color:#b9c3dc; padding:0 14px; line-height:1.5; }
  .mh-faq-item.open .mh-faq-a{max-height:200px; padding:0 14px 12px;}

  /* ===== CONNECT ===== */
  .mh-connect-title{font-size:14px; font-weight:800; color:#111827; margin-bottom:12px;}
  .mh-connect-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
  .mh-connect-item{
    display:flex; align-items:center; gap:10px; background:#fff; border-radius:12px;
    padding:11px 12px; box-shadow:0 1px 4px rgba(15,33,73,0.05); text-decoration:none;
  }
  .mh-connect-icon{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .mh-connect-icon svg{width:16px; height:16px; color:#fff;}
  .mh-connect-name{font-size:11.5px; font-weight:700; color:#1f2937;}
  .mh-connect-action{font-size:10px; color:#9aa3b2;}
} 