/* ═══════════════════════════════════════════════════════════
   JVG Recruitment Solutions — styles.css
   ═══════════════════════════════════════════════════════════ */

/* ─── CSS VARIABLES ─── */
:root {
    --navy:       #0B1F4B;
    --navy-mid:   #152E6E;
    --blue:       #1A56C4;
    --blue-light: #2E6FE6;
    --gold:       #C89B3C;
    --gold-lt:    #E8B84B;
    --charcoal:   #1C2333;
    --grey-dk:    #374151;
    --grey-mid:   #6B7280;
    --grey-lt:    #F3F6FA;
    --white:      #FFFFFF;
    --border:     #E2E8F0;
    --red:        #DC2626;
    --red-lt:     #FEE2E2;
    --green:      #065F46;
    --green-lt:   #D1FAE5;
    --shadow:     0 4px 24px rgba(11,31,75,.10);
    --shadow-lg:  0 16px 56px rgba(11,31,75,.16);
    --r-sm:  8px;
    --r:     14px;
    --r-lg:  20px;
    --r-xl:  24px;
    --ease:  all .25s ease;
  }
  
  /* ─── RESET ─── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html  { scroll-behavior: smooth; }
  body  { font-family: 'DM Sans', sans-serif; color: var(--charcoal); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
  a     { text-decoration: none; color: inherit; }
  ul    { list-style: none; }
  img   { max-width: 100%; display: block; }
  button { font-family: 'DM Sans', sans-serif; cursor: pointer; border: none; background: none; }
  
  /* ─── KEYFRAMES ─── */
  @keyframes fadeUp   { from { opacity:0; transform:translateY(28px);  } to { opacity:1; transform:translateY(0);    } }
  @keyframes pulse    { 0%,100% { opacity:1; transform:scale(1);   } 50% { opacity:.5; transform:scale(.8); } }
  @keyframes slideDown{ from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0);    } }
  @keyframes float    { 0%,100% { transform:translateY(0);  } 50% { transform:translateY(-8px); } }
  @keyframes spin     { to { transform:rotate(360deg); } }
  
  /* ─── SHARED ELEMENTS ─── */
  .section-label {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--blue); margin-bottom: 14px;
  }
  .section-label::before { content:''; display:block; width:28px; height:2px; background:currentColor; flex-shrink:0; }
  .section-label.center::before { display:none; }
  .section-title { font-family:'Playfair Display',serif; font-size:clamp(1.9rem,3.5vw,2.9rem); font-weight:800; color:var(--navy); line-height:1.15; margin-bottom:16px; }
  .section-title em { font-style:normal; color:var(--blue); }
  .section-desc  { font-size:17px; color:var(--grey-mid); line-height:1.75; max-width:600px; }
  .section-header { margin-bottom:56px; }
  .section-header.center { text-align:center; }
  .section-header.center .section-desc { margin:0 auto; }
  
  section { padding:96px 5%; }
  
  /* Buttons */
  .btn-primary {
    display:inline-flex; align-items:center; gap:8px;
    background:linear-gradient(135deg,var(--gold),var(--gold-lt));
    color:var(--navy); font-weight:700; font-size:15px;
    padding:13px 28px; border-radius:var(--r-sm); border:none; cursor:pointer;
    transition:var(--ease); box-shadow:0 4px 20px rgba(200,155,60,.3); text-decoration:none;
  }
  .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(200,155,60,.45); }
  
  .btn-secondary {
    display:inline-flex; align-items:center; gap:8px;
    background:transparent; color:var(--white); font-weight:600; font-size:15px;
    padding:12px 28px; border-radius:var(--r-sm); border:1.5px solid rgba(255,255,255,.3);
    cursor:pointer; transition:var(--ease); text-decoration:none;
  }
  .btn-secondary:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.65); transform:translateY(-2px); }
  
  .btn-outline-navy {
    display:inline-flex; align-items:center; gap:8px;
    background:transparent; color:var(--navy); font-weight:600; font-size:14px;
    padding:10px 22px; border-radius:var(--r-sm); border:1.5px solid var(--border);
    cursor:pointer; transition:var(--ease);
  }
  .btn-outline-navy:hover { border-color:var(--blue); color:var(--blue); }
  
  /* Reveal */
  .reveal { opacity:0; transform:translateY(26px); transition:opacity .65s ease,transform .65s ease; }
  .reveal.visible { opacity:1; transform:translateY(0); }
  .reveal-d1 { transition-delay:.1s; }
  .reveal-d2 { transition-delay:.2s; }
  .reveal-d3 { transition-delay:.3s; }
  
  /* ═══════════════════════════════════════════
     NAVBAR
     ═══════════════════════════════════════════ */
  .navbar {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background:rgba(11,31,75,.97); backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.06);
    height:72px; display:flex; align-items:center;
    padding:0 5%; justify-content:space-between;
    transition:background .3s,box-shadow .3s;
  }
  .navbar.scrolled { background:rgba(11,31,75,1); box-shadow:0 4px 28px rgba(0,0,0,.25); }
  
  .nav-logo { display:flex; align-items:center; gap:12px; }
  .nav-logo-icon {
    width:42px; height:42px;
    background:linear-gradient(135deg,var(--gold),var(--gold-lt));
    border-radius:9px; display:flex; align-items:center; justify-content:center;
    font-family:'Playfair Display',serif; font-weight:800; font-size:15px; color:var(--navy);
  }
  .nav-logo-name { font-family:'Playfair Display',serif; font-size:16px; font-weight:700; color:var(--white); display:block; line-height:1.1; }
  .nav-logo-sub  { font-size:10px; color:var(--gold-lt); letter-spacing:.1em; text-transform:uppercase; display:block; }
  
  .nav-links { display:flex; align-items:center; gap:4px; }
  .nav-links a { color:rgba(255,255,255,.75); font-size:14px; font-weight:500; padding:7px 14px; border-radius:6px; transition:var(--ease); }
  .nav-links a:hover { color:var(--white); background:rgba(255,255,255,.08); }
  .nav-links .nav-cta { background:linear-gradient(135deg,var(--gold),var(--gold-lt)); color:var(--navy); font-weight:700; padding:8px 18px; }
  .nav-links .nav-cta:hover { opacity:.9; transform:translateY(-1px); }
  
  .hamburger { display:none; flex-direction:column; gap:5px; padding:6px; }
  .hamburger span { display:block; width:24px; height:2px; background:var(--white); border-radius:2px; transition:var(--ease); }
  
  .mobile-menu {
    display:none; position:fixed; top:72px; left:0; right:0;
    background:var(--navy); z-index:999; padding:18px 5% 26px;
    border-bottom:1px solid rgba(255,255,255,.08);
    flex-direction:column; gap:4px; animation:slideDown .25s ease;
  }
  .mobile-menu.open { display:flex; }
  .mobile-menu a { color:rgba(255,255,255,.8); font-size:16px; font-weight:500; padding:12px 16px; border-radius:8px; transition:background .2s; }
  .mobile-menu a:hover { background:rgba(255,255,255,.08); }
  .mobile-menu .m-cta { background:linear-gradient(135deg,var(--gold),var(--gold-lt)); color:var(--navy)!important; font-weight:700!important; text-align:center; margin-top:8px; border-radius:8px; }
  
  /* ═══════════════════════════════════════════
     HERO
     ═══════════════════════════════════════════ */
  .hero {
    min-height:100vh;
    background:linear-gradient(140deg,var(--navy) 0%,var(--navy-mid) 50%,#1A3A7A 100%);
    position:relative; overflow:hidden;
    display:flex; align-items:center; padding:100px 5% 70px;
  }
  .hero-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
  .hc { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.05); }
  .hc1 { width:640px; height:640px; top:-220px; right:-120px; }
  .hc2 { width:420px; height:420px; bottom:-120px; right:180px; border-color:rgba(200,155,60,.1); }
  .hc3 { width:200px; height:200px; top:35%; left:-60px; border-color:rgba(46,111,230,.15); }
  .hdots { position:absolute; width:320px; height:320px; top:8%; right:4%; background-image:radial-gradient(circle,rgba(255,255,255,.09) 1.5px,transparent 1.5px); background-size:26px 26px; }
  .hero-glow { position:absolute; width:600px; height:600px; background:radial-gradient(circle,rgba(46,111,230,.12) 0%,transparent 70%); top:50%; left:40%; transform:translate(-50%,-50%); }
  
  .hero-content { max-width:780px; position:relative; z-index:2; animation:fadeUp .9s ease both; }
  .hero-badge { display:inline-flex; align-items:center; gap:9px; background:rgba(200,155,60,.14); border:1px solid rgba(200,155,60,.32); color:var(--gold-lt); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:7px 16px; border-radius:50px; margin-bottom:26px; }
  .hero-badge-dot { width:7px; height:7px; background:var(--gold-lt); border-radius:50%; animation:pulse 2s infinite; flex-shrink:0; }
  .hero-title { font-family:'Playfair Display',serif; font-size:clamp(2.3rem,5.5vw,4rem); font-weight:800; line-height:1.12; color:var(--white); margin-bottom:24px; }
  .hero-title em { font-style:normal; background:linear-gradient(90deg,var(--gold),var(--gold-lt)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
  .hero-sub { font-size:18px; color:rgba(255,255,255,.68); line-height:1.7; max-width:580px; margin-bottom:42px; }
  .hero-btns { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:58px; }
  .hero-stats { display:flex; gap:44px; flex-wrap:wrap; padding-top:32px; border-top:1px solid rgba(255,255,255,.1); }
  .hero-stat-num { font-family:'Playfair Display',serif; font-size:2.1rem; font-weight:800; color:var(--gold-lt); line-height:1; }
  .hero-stat-label { font-size:12px; color:rgba(255,255,255,.48); margin-top:5px; }
  
  /* ═══════════════════════════════════════════
     ABOUT
     ═══════════════════════════════════════════ */
  .about-section { background:var(--grey-lt); }
  .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
  .about-visual {
    position:relative; height:490px; border-radius:var(--r-xl);
    background:linear-gradient(145deg,var(--navy),var(--blue));
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:20px; box-shadow:var(--shadow-lg); overflow:visible;
    animation:float 6s ease-in-out infinite;
  }
  .about-visual-icon { font-size:88px; line-height:1; }
  .about-visual-text { color:rgba(255,255,255,.65); font-size:15px; text-align:center; padding:0 40px; line-height:1.65; }
  .about-stat-row { display:flex; gap:14px; }
  .about-stat-pill { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:var(--r); padding:16px 22px; text-align:center; }
  .about-stat-pill strong { display:block; font-family:'Playfair Display',serif; font-size:2rem; font-weight:800; color:var(--gold-lt); }
  .about-stat-pill span { font-size:12px; color:rgba(255,255,255,.55); }
  .about-float { position:absolute; top:28px; right:-26px; background:var(--white); border-radius:var(--r); padding:13px 18px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--navy); white-space:nowrap; z-index:2; }
  .about-features { display:flex; flex-direction:column; gap:22px; margin:32px 0 34px; }
  .about-feature { display:flex; gap:18px; align-items:flex-start; }
  .about-feature-icon { width:48px; height:48px; border-radius:12px; flex-shrink:0; background:linear-gradient(135deg,rgba(26,86,196,.12),rgba(26,86,196,.04)); display:flex; align-items:center; justify-content:center; font-size:22px; }
  .about-feature h4 { font-size:16px; font-weight:700; color:var(--navy); margin-bottom:4px; }
  .about-feature p  { font-size:14px; color:var(--grey-mid); line-height:1.65; }
  
  /* ═══════════════════════════════════════════
     SERVICES
     ═══════════════════════════════════════════ */
  .services-section { background:var(--white); }
  .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  .service-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:38px 34px; position:relative; overflow:hidden; transition:transform .3s ease,border-color .3s,box-shadow .3s; }
  .service-card::before { content:''; position:absolute; inset:0; background:linear-gradient(145deg,var(--navy),var(--blue-light)); opacity:0; transition:opacity .35s ease; z-index:0; }
  .service-card:hover::before { opacity:1; }
  .service-card:hover { border-color:transparent; transform:translateY(-8px); box-shadow:var(--shadow-lg); }
  .service-card > * { position:relative; z-index:1; }
  .service-num { position:absolute; top:18px; right:22px; font-family:'Playfair Display',serif; font-size:58px; font-weight:800; color:rgba(11,31,75,.05); line-height:1; z-index:1; transition:color .3s; pointer-events:none; }
  .service-card:hover .service-num { color:rgba(255,255,255,.06); }
  .service-icon-wrap { width:60px; height:60px; border-radius:14px; background:linear-gradient(135deg,rgba(26,86,196,.1),rgba(26,86,196,.04)); display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:22px; transition:background .3s; }
  .service-card:hover .service-icon-wrap { background:rgba(255,255,255,.14); }
  .service-card h3 { font-family:'Playfair Display',serif; font-size:1.28rem; font-weight:700; color:var(--navy); margin-bottom:12px; transition:color .3s; }
  .service-card:hover h3 { color:var(--white); }
  .service-card p  { font-size:14px; color:var(--grey-mid); line-height:1.72; margin-bottom:20px; transition:color .3s; }
  .service-card:hover p { color:rgba(255,255,255,.75); }
  .service-list { display:flex; flex-direction:column; gap:8px; }
  .service-list li { font-size:13px; color:var(--grey-dk); font-weight:500; display:flex; align-items:center; gap:8px; transition:color .3s; }
  .service-list li::before { content:'✓'; color:var(--blue); font-weight:800; flex-shrink:0; transition:color .3s; }
  .service-card:hover .service-list li { color:rgba(255,255,255,.8); }
  .service-card:hover .service-list li::before { color:var(--gold-lt); }
  
  /* ═══════════════════════════════════════════
     HOW IT WORKS
     ═══════════════════════════════════════════ */
  .how-section { background:var(--navy); overflow:hidden; position:relative; }
  .how-grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; }
  .how-inner { position:relative; z-index:1; }
  .how-section .section-label { color:var(--gold-lt); }
  .how-section .section-title { color:var(--white); }
  .how-section .section-title em { color:var(--gold-lt); }
  .how-section .section-desc { color:rgba(255,255,255,.55); }
  .how-tabs { display:flex; gap:10px; margin-bottom:50px; }
  .how-tab { padding:10px 26px; border-radius:var(--r-sm); border:1.5px solid rgba(255,255,255,.15); color:rgba(255,255,255,.6); font-weight:600; font-size:14px; cursor:pointer; transition:var(--ease); background:transparent; }
  .how-tab:hover { border-color:rgba(255,255,255,.4); color:var(--white); }
  .how-tab.active { background:linear-gradient(135deg,var(--gold),var(--gold-lt)); color:var(--navy); border-color:transparent; }
  .how-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
  .how-step { text-align:center; }
  .how-bubble { width:78px; height:78px; border-radius:50%; background:rgba(255,255,255,.06); border:2px solid rgba(200,155,60,.3); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; position:relative; transition:border-color .3s; }
  .how-bubble:hover { border-color:var(--gold); }
  .how-num { font-family:'Playfair Display',serif; font-size:1.55rem; font-weight:800; color:var(--gold-lt); }
  .how-emoji { font-size:20px; position:absolute; bottom:-5px; right:-5px; }
  .how-step h4 { font-size:15px; font-weight:700; color:var(--white); margin-bottom:10px; }
  .how-step p  { font-size:13px; color:rgba(255,255,255,.48); line-height:1.65; }
  
  /* ═══════════════════════════════════════════
     JOBS (PUBLIC VIEW)
     ═══════════════════════════════════════════ */
  .jobs-section { background:var(--grey-lt); }
  .jobs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .job-card { background:var(--white); border-radius:var(--r); border:1.5px solid var(--border); padding:26px 28px; transition:var(--ease); display:flex; flex-direction:column; gap:14px; }
  .job-card:hover { border-color:var(--blue); box-shadow:0 8px 36px rgba(26,86,196,.13); transform:translateY(-4px); }
  .job-card-top { display:flex; justify-content:space-between; align-items:flex-start; }
  .job-icon { width:48px; height:48px; border-radius:11px; background:linear-gradient(135deg,var(--blue),var(--navy)); display:flex; align-items:center; justify-content:center; font-size:20px; color:white; flex-shrink:0; }
  .job-badge { font-size:10px; font-weight:800; padding:4px 11px; border-radius:50px; letter-spacing:.06em; text-transform:uppercase; }
  .job-badge.full-time { background:rgba(26,86,196,.1);   color:var(--blue);  }
  .job-badge.contract  { background:rgba(200,155,60,.14); color:#8B6A20;       }
  .job-badge.remote    { background:rgba(16,185,129,.1);  color:#065F46;       }
  .job-badge.part-time { background:rgba(139,92,246,.1);  color:#5B21B6;       }
  .job-title  { font-size:17px; font-weight:700; color:var(--navy); }
  .job-meta   { display:flex; flex-wrap:wrap; gap:10px; }
  .job-meta-item { font-size:13px; color:var(--grey-mid); }
  .job-salary { font-size:15px; font-weight:700; color:var(--blue); }
  .job-desc-text { font-size:13px; color:var(--grey-mid); line-height:1.6; }
  .job-apply-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--navy); color:white; font-size:13px; font-weight:700; padding:11px 22px; border-radius:var(--r-sm); border:none; cursor:pointer; transition:var(--ease); }
  .job-apply-btn:hover { background:var(--blue); transform:translateX(3px); }
  .jobs-empty { text-align:center; padding:64px 20px; color:var(--grey-mid); font-size:16px; grid-column:1/-1; }
  .jobs-empty-icon { font-size:52px; margin-bottom:16px; }
  .jobs-footer { text-align:center; margin-top:52px; display:flex; flex-direction:column; align-items:center; gap:18px; }
  .jobs-footer p { font-size:15px; color:var(--grey-mid); }
  .jobs-footer-btns { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
  .fb-btn { display:inline-flex; align-items:center; gap:9px; background:#1877F2; color:white; font-size:14px; font-weight:600; padding:12px 24px; border-radius:var(--r-sm); transition:var(--ease); border:none; cursor:pointer; }
  .fb-btn:hover { background:#0d65d9; transform:translateY(-2px); box-shadow:0 6px 20px rgba(24,119,242,.35); }
  
  /* ═══════════════════════════════════════════
     ADMIN PANEL
     ═══════════════════════════════════════════ */
  .admin-overlay {
    position:fixed; inset:0; background:rgba(11,31,75,.65);
    backdrop-filter:blur(6px); z-index:2000;
    display:flex; align-items:flex-start; justify-content:center;
    padding:24px 16px; overflow-y:auto;
  }
  .admin-panel {
    background:var(--white); border-radius:var(--r-xl);
    width:100%; max-width:960px;
    box-shadow:0 32px 80px rgba(0,0,0,.35);
    overflow:hidden; animation:fadeUp .35s ease;
  }
  
  /* Admin header */
  .admin-header {
    background:linear-gradient(135deg,var(--navy),var(--blue));
    padding:22px 32px; display:flex; align-items:center; justify-content:space-between;
  }
  .admin-header h2 { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:var(--white); }
  .admin-header p  { font-size:13px; color:rgba(255,255,255,.6); margin-top:2px; }
  .admin-close-btn {
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.12); border:none; cursor:pointer;
    color:white; font-size:18px; display:flex; align-items:center; justify-content:center;
    transition:background .2s; flex-shrink:0;
  }
  .admin-close-btn:hover { background:rgba(255,255,255,.25); }
  
  /* Admin login */
  .admin-login { padding:48px 40px; }
  .admin-login h3 { font-family:'Playfair Display',serif; font-size:1.5rem; color:var(--navy); margin-bottom:6px; }
  .admin-login p  { font-size:14px; color:var(--grey-mid); margin-bottom:32px; }
  .admin-login-form { max-width:380px; display:flex; flex-direction:column; gap:16px; }
  .admin-login-error { background:var(--red-lt); color:var(--red); padding:10px 16px; border-radius:8px; font-size:14px; font-weight:500; }
  .admin-login-hint  { font-size:12px; color:var(--grey-mid); background:var(--grey-lt); padding:10px 14px; border-radius:8px; }
  
  /* Admin body */
  .admin-body { padding:32px; }
  
  /* Tabs inside admin */
  .admin-tabs { display:flex; gap:8px; margin-bottom:28px; border-bottom:2px solid var(--border); padding-bottom:0; }
  .admin-tab { padding:10px 20px; font-size:14px; font-weight:600; color:var(--grey-mid); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; margin-bottom:-2px; transition:var(--ease); }
  .admin-tab:hover { color:var(--navy); }
  .admin-tab.active { color:var(--blue); border-bottom-color:var(--blue); }
  
  /* Job list in admin */
  .admin-job-list { display:flex; flex-direction:column; gap:14px; margin-bottom:28px; max-height:380px; overflow-y:auto; padding-right:4px; }
  .admin-job-row {
    display:flex; align-items:center; gap:14px;
    background:var(--grey-lt); border-radius:var(--r); padding:16px 20px;
    border:1.5px solid var(--border); transition:border-color .2s;
  }
  .admin-job-row:hover { border-color:var(--blue); }
  .admin-job-row-icon { width:40px; height:40px; border-radius:9px; background:linear-gradient(135deg,var(--blue),var(--navy)); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
  .admin-job-row-info { flex:1; min-width:0; }
  .admin-job-row-title  { font-size:15px; font-weight:700; color:var(--navy); }
  .admin-job-row-meta   { font-size:12px; color:var(--grey-mid); margin-top:2px; }
  .admin-job-row-actions { display:flex; gap:8px; flex-shrink:0; }
  
  .btn-icon { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; border:none; transition:var(--ease); }
  .btn-icon.edit   { background:rgba(26,86,196,.1); color:var(--blue); }
  .btn-icon.edit:hover   { background:rgba(26,86,196,.2); }
  .btn-icon.delete { background:var(--red-lt); color:var(--red); }
  .btn-icon.delete:hover { background:#FECACA; }
  .btn-icon.toggle { background:rgba(16,185,129,.1); color:var(--green); }
  .btn-icon.toggle.off { background:rgba(107,114,128,.1); color:var(--grey-mid); }
  .btn-icon.toggle:hover { opacity:.8; }
  
  /* Job form */
  .job-form { background:var(--grey-lt); border-radius:var(--r); padding:28px; border:1.5px solid var(--border); }
  .job-form h4 { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:700; color:var(--navy); margin-bottom:22px; }
  .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .form-group { display:flex; flex-direction:column; gap:6px; }
  .form-group.full { grid-column:1/-1; }
  .form-group label { font-size:12px; font-weight:700; color:var(--grey-dk); text-transform:uppercase; letter-spacing:.06em; }
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-family:'DM Sans',sans-serif; font-size:14px; color:var(--charcoal);
    background:var(--white); border:1.5px solid var(--border); border-radius:10px;
    padding:12px 14px; outline:none; transition:border-color .25s;
  }
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus { border-color:var(--blue); }
  .form-group textarea { resize:vertical; min-height:90px; line-height:1.6; }
  .form-actions { display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
  .btn-save { display:inline-flex; align-items:center; gap:7px; background:linear-gradient(135deg,var(--navy),var(--blue)); color:white; font-size:14px; font-weight:700; padding:11px 24px; border-radius:var(--r-sm); border:none; cursor:pointer; transition:var(--ease); }
  .btn-save:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 6px 20px rgba(11,31,75,.3); }
  .btn-cancel { display:inline-flex; align-items:center; gap:7px; background:var(--white); color:var(--grey-dk); font-size:14px; font-weight:600; padding:11px 22px; border-radius:var(--r-sm); border:1.5px solid var(--border); cursor:pointer; transition:var(--ease); }
  .btn-cancel:hover { border-color:var(--grey-mid); }
  
  /* Admin add new btn */
  .btn-add-job { display:inline-flex; align-items:center; gap:8px; background:var(--navy); color:white; font-size:14px; font-weight:700; padding:11px 22px; border-radius:var(--r-sm); border:none; cursor:pointer; transition:var(--ease); }
  .btn-add-job:hover { background:var(--blue); transform:translateY(-1px); }
  
  /* Admin stats bar */
  .admin-stats { display:flex; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
  .admin-stat-card { background:var(--grey-lt); border-radius:var(--r); padding:18px 22px; flex:1; min-width:120px; border:1.5px solid var(--border); }
  .admin-stat-card strong { display:block; font-family:'Playfair Display',serif; font-size:1.8rem; font-weight:800; color:var(--navy); }
  .admin-stat-card span { font-size:12px; color:var(--grey-mid); }
  
  /* Admin notice */
  .admin-notice { display:flex; align-items:center; gap:10px; background:var(--green-lt); color:var(--green); padding:12px 18px; border-radius:10px; font-size:14px; font-weight:600; margin-bottom:22px; }
  .admin-notice.error { background:var(--red-lt); color:var(--red); }
  
  /* ═══════════════════════════════════════════
     EMPLOYER ENQUIRIES PANEL
     ═══════════════════════════════════════════ */
  
  /* Unread badge on tab */
  .enq-badge {
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--gold); color:var(--navy);
    font-size:10px; font-weight:800;
    width:18px; height:18px; border-radius:50%;
    margin-left:6px; vertical-align:middle;
  }
  
  /* Toolbar */
  .enq-panel { display:flex; flex-direction:column; gap:0; }
  .enq-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
  .enq-search-wrap { position:relative; flex:1; min-width:200px; }
  .enq-search-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:14px; pointer-events:none; }
  .enq-search {
    width:100%; padding:10px 36px 10px 38px;
    border:1.5px solid var(--border); border-radius:10px;
    font-family:'DM Sans',sans-serif; font-size:14px; color:var(--charcoal);
    background:var(--grey-lt); outline:none; transition:border-color .25s;
  }
  .enq-search:focus { border-color:var(--blue); background:var(--white); }
  .enq-search-clear {
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; color:var(--grey-mid);
    font-size:14px; padding:2px;
  }
  .enq-clear-all {
    background:var(--red-lt); color:var(--red); border:1.5px solid rgba(220,38,38,.2);
    font-size:13px; font-weight:600; padding:9px 16px; border-radius:9px;
    cursor:pointer; transition:var(--ease); white-space:nowrap;
  }
  .enq-clear-all:hover { background:#FECACA; }
  
  /* Empty state */
  .enq-empty { text-align:center; padding:52px 20px; color:var(--grey-mid); }
  .enq-empty-icon { font-size:52px; margin-bottom:14px; }
  .enq-empty p    { font-size:16px; font-weight:600; color:var(--navy); margin-bottom:6px; }
  .enq-empty span { font-size:13px; }
  
  /* List container */
  .enq-list { display:flex; flex-direction:column; gap:10px; max-height:500px; overflow-y:auto; padding-right:2px; }
  .enq-list::-webkit-scrollbar { width:5px; }
  .enq-list::-webkit-scrollbar-track { background:transparent; }
  .enq-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
  
  /* Enquiry card */
  .enq-card {
    background:var(--white); border:1.5px solid var(--border);
    border-radius:var(--r); overflow:hidden;
    transition:border-color .25s, box-shadow .25s;
  }
  .enq-card:hover { border-color:var(--blue); }
  .enq-card.enq-unread { border-color:rgba(200,155,60,.5); background:rgba(200,155,60,.03); }
  .enq-card.enq-expanded { border-color:var(--blue); box-shadow:0 4px 20px rgba(26,86,196,.1); }
  
  /* Card header (click to expand) */
  .enq-card-header {
    display:flex; align-items:center; gap:14px;
    padding:16px 18px; cursor:pointer;
    transition:background .2s;
  }
  .enq-card-header:hover { background:var(--grey-lt); }
  .enq-avatar {
    width:42px; height:42px; border-radius:50%;
    background:linear-gradient(135deg,var(--blue),var(--navy));
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:800; color:white; flex-shrink:0;
    letter-spacing:.5px;
  }
  .enq-card-info { flex:1; min-width:0; }
  .enq-name {
    font-size:15px; font-weight:700; color:var(--navy);
    display:flex; align-items:center; gap:8px; margin-bottom:3px;
  }
  .enq-new-dot { color:var(--gold); font-size:10px; }
  .enq-email-preview { font-size:13px; color:var(--blue); margin-bottom:4px; font-weight:500; }
  .enq-meta-row { display:flex; flex-wrap:wrap; gap:12px; }
  .enq-subject { font-size:12px; color:var(--grey-mid); }
  .enq-date    { font-size:12px; color:var(--grey-mid); }
  .enq-chevron { font-size:11px; color:var(--grey-mid); flex-shrink:0; margin-left:8px; }
  
  /* Expanded card body */
  .enq-card-body {
    border-top:1.5px solid var(--border);
    padding:20px 18px 18px;
    background:var(--grey-lt);
  }
  .enq-detail-grid { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
  .enq-detail-row { display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
  .enq-detail-full { flex-direction:column; gap:6px; }
  .enq-detail-label {
    font-size:11px; font-weight:800; color:var(--grey-mid);
    text-transform:uppercase; letter-spacing:.08em;
    min-width:110px; flex-shrink:0;
  }
  .enq-detail-value { font-size:14px; color:var(--charcoal); font-weight:500; }
  .enq-email-link { color:var(--blue); font-weight:600; text-decoration:none; }
  .enq-email-link:hover { text-decoration:underline; }
  .enq-message-box {
    background:var(--white); border:1.5px solid var(--border);
    border-radius:10px; padding:14px 16px;
    font-size:14px; color:var(--grey-dk); line-height:1.7;
    white-space:pre-wrap; word-break:break-word;
  }
  
  /* Action buttons in expanded card */
  .enq-card-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .btn-reply {
    display:inline-flex; align-items:center; gap:7px;
    background:linear-gradient(135deg,var(--navy),var(--blue));
    color:white; font-size:13px; font-weight:700;
    padding:10px 20px; border-radius:var(--r-sm);
    text-decoration:none; transition:var(--ease);
  }
  .btn-reply:hover { opacity:.9; transform:translateY(-1px); }
  .btn-whatsapp {
    display:inline-flex; align-items:center; gap:7px;
    background:#25D366; color:white; font-size:13px; font-weight:700;
    padding:10px 20px; border-radius:var(--r-sm);
    text-decoration:none; transition:var(--ease);
  }
  .btn-whatsapp:hover { background:#1ebe5d; transform:translateY(-1px); }
  
  /* ═══════════════════════════════════════════
     TESTIMONIALS
     ═══════════════════════════════════════════ */
  .testi-section { background:var(--white); }
  .testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  .testi-card { background:var(--grey-lt); border-radius:var(--r-lg); padding:38px 34px; position:relative; transition:var(--ease); border:1.5px solid transparent; overflow:hidden; }
  .testi-card:hover { border-color:var(--blue); box-shadow:0 8px 36px rgba(26,86,196,.09); transform:translateY(-4px); }
  .testi-mark { font-family:'Playfair Display',serif; font-size:96px; line-height:.55; color:var(--blue); opacity:.12; position:absolute; top:22px; right:24px; user-select:none; }
  .testi-stars { color:var(--gold); font-size:15px; letter-spacing:3px; margin-bottom:16px; }
  .testi-card blockquote { font-size:15px; line-height:1.8; color:var(--grey-dk); font-style:italic; margin-bottom:24px; position:relative; z-index:1; }
  .testi-author { display:flex; align-items:center; gap:14px; }
  .testi-avatar { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--navy)); display:flex; align-items:center; justify-content:center; font-size:14px; color:white; font-weight:800; flex-shrink:0; }
  .testi-name { font-size:15px; font-weight:700; color:var(--navy); }
  .testi-role { font-size:12px; color:var(--grey-mid); margin-top:2px; }
  
  /* ═══════════════════════════════════════════
     CTA BANNER
     ═══════════════════════════════════════════ */
  .cta-banner { background:linear-gradient(140deg,var(--navy) 0%,var(--blue) 100%); padding:88px 5%; text-align:center; position:relative; overflow:hidden; }
  .cta-banner-bg { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1px); background-size:34px 34px; pointer-events:none; }
  .cta-inner { position:relative; z-index:1; }
  .cta-banner h2 { font-family:'Playfair Display',serif; font-size:clamp(1.9rem,3.5vw,2.9rem); font-weight:800; color:var(--white); margin-bottom:16px; }
  .cta-banner h2 em { font-style:normal; color:var(--gold-lt); }
  .cta-banner p { font-size:17px; color:rgba(255,255,255,.68); max-width:520px; margin:0 auto 40px; line-height:1.65; }
  .cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  
  /* ═══════════════════════════════════════════
     CONTACT
     ═══════════════════════════════════════════ */
  .contact-section { background:var(--grey-lt); }
  .contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:72px; align-items:start; }
  .contact-cards { display:flex; flex-direction:column; gap:16px; margin-top:32px; }
  .contact-card { display:flex; gap:16px; align-items:flex-start; background:var(--white); border-radius:var(--r); padding:20px 22px; border:1.5px solid var(--border); transition:border-color .25s; }
  .contact-card:hover { border-color:var(--blue); }
  .contact-icon { width:46px; height:46px; border-radius:11px; flex-shrink:0; background:linear-gradient(135deg,rgba(26,86,196,.1),rgba(26,86,196,.03)); display:flex; align-items:center; justify-content:center; font-size:20px; }
  .contact-card h5 { font-size:11px; font-weight:700; color:var(--grey-mid); text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; }
  .contact-card p  { font-size:15px; color:var(--navy); font-weight:600; }
  .contact-social { margin-top:28px; padding-top:24px; border-top:1.5px solid var(--border); }
  .contact-social h5 { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:14px; }
  
  .contact-form { background:var(--white); border-radius:var(--r-xl); padding:44px 42px; border:1.5px solid var(--border); box-shadow:var(--shadow); }
  .form-title { font-family:'Playfair Display',serif; font-size:1.7rem; font-weight:800; color:var(--navy); margin-bottom:6px; }
  .form-sub   { font-size:14px; color:var(--grey-mid); margin-bottom:28px; }
  .form-row   { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .contact-form .form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
  .contact-form label { font-size:13px; font-weight:700; color:var(--grey-dk); }
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-family:'DM Sans',sans-serif; font-size:14px; color:var(--charcoal);
    background:var(--grey-lt); border:1.5px solid var(--border); border-radius:10px;
    padding:13px 16px; outline:none; transition:border-color .25s,background .25s;
  }
  .contact-form input:focus,
  .contact-form select:focus,
  .contact-form textarea:focus { border-color:var(--blue); background:var(--white); }
  .contact-form textarea { resize:vertical; min-height:116px; line-height:1.6; }
  .form-submit { width:100%; background:linear-gradient(135deg,var(--navy),var(--blue)); color:white; font-size:15px; font-weight:700; padding:15px; border-radius:10px; border:none; cursor:pointer; transition:var(--ease); display:flex; align-items:center; justify-content:center; gap:9px; }
  .form-submit:hover { opacity:.9; transform:translateY(-2px); box-shadow:0 10px 28px rgba(11,31,75,.28); }
  .form-submit.success { background:linear-gradient(135deg,#065F46,#10B981); }
  
  /* ═══════════════════════════════════════════
     FOOTER
     ═══════════════════════════════════════════ */
  .footer { background:var(--charcoal); padding:70px 5% 32px; }
  .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:52px; margin-bottom:52px; }
  .footer-brand-desc { font-size:14px; line-height:1.75; color:rgba(255,255,255,.46); margin:18px 0 24px; }
  .footer-tagline { display:inline-flex; align-items:center; gap:8px; background:rgba(200,155,60,.12); border:1px solid rgba(200,155,60,.22); color:var(--gold-lt); font-size:12px; font-weight:500; padding:7px 14px; border-radius:50px; }
  .footer-col h6 { font-size:12px; font-weight:800; color:rgba(255,255,255,.88); text-transform:uppercase; letter-spacing:.12em; margin-bottom:18px; }
  .footer-col ul { display:flex; flex-direction:column; gap:10px; }
  .footer-col a  { color:rgba(255,255,255,.48); font-size:14px; transition:color .2s; }
  .footer-col a:hover { color:var(--gold-lt); }
  .footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
  .footer-bottom p { font-size:13px; color:rgba(255,255,255,.38); }
  
  /* ═══════════════════════════════════════════
     RESPONSIVE
     ═══════════════════════════════════════════ */
  @media (max-width:1100px) {
    .services-grid  { grid-template-columns:repeat(2,1fr); }
    .jobs-grid      { grid-template-columns:repeat(2,1fr); }
    .testi-grid     { grid-template-columns:repeat(2,1fr); }
    .footer-grid    { grid-template-columns:1fr 1fr; gap:36px; }
    .how-steps      { grid-template-columns:repeat(2,1fr); }
    .about-grid     { grid-template-columns:1fr; gap:48px; }
    .about-float    { right:12px; }
  }
  @media (max-width:768px) {
    .nav-links { display:none; }
    .hamburger { display:flex; }
    section    { padding:68px 5%; }
    .services-grid  { grid-template-columns:1fr; }
    .jobs-grid      { grid-template-columns:1fr; }
    .testi-grid     { grid-template-columns:1fr; }
    .footer-grid    { grid-template-columns:1fr; gap:28px; }
    .how-steps      { grid-template-columns:1fr; }
    .contact-grid   { grid-template-columns:1fr; gap:40px; }
    .contact-form   { padding:28px 24px; }
    .form-row       { grid-template-columns:1fr; }
    .footer-bottom  { flex-direction:column; text-align:center; }
    .form-grid      { grid-template-columns:1fr; }
    .admin-body     { padding:20px; }
    .admin-login    { padding:32px 24px; }
  }
  @media (max-width:480px) {
    .hero-btns     { flex-direction:column; }
    .hero-btns *   { width:100%; justify-content:center; text-align:center; }
    .cta-btns      { flex-direction:column; align-items:center; }
    .jobs-footer-btns { flex-direction:column; align-items:center; }
  }