:root{
  --primary:#0A2E67;        /* deep navy */
  --primary-700:#143E86;
  --accent:#1FA84E;         /* success */
  --danger:#C62828;
  --ink:#0F172A;
  --muted:#475569;
  --bg:#F4F7FB;
  --card:#FFFFFF;
  --ring: rgba(20,62,134,0.25);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* Containers */
.container{max-width:1200px;margin:auto;padding:0 20px}
.narrow{max-width:900px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--primary);
  color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.header-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.brand-logo{width:44px;height:44px;object-fit:contain}
.brand-title{font-weight:700;font-size:18px}
.brand-sub{font-size:12px;opacity:.85}

.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:22px}
.main-nav{display:flex;gap:18px}
.nav-link{color:#fff;text-decoration:none;padding:10px 12px;border-radius:8px;opacity:.9}
.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.12);opacity:1}

/* Hero */
.hero{
  background:
   radial-gradient(60rem 20rem at 100% -10%, rgba(31,168,78,.15), transparent 60%),
   radial-gradient(50rem 20rem at -30% 10%, rgba(20,62,134,.20), transparent 60%),
   linear-gradient(180deg,#ffffff, #EAF2FF);
  padding:48px 0;
}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.hero h1{margin:0 0 8px 0;color:var(--primary);font-size:32px}
.lead{color:var(--muted)}
.info-card{
  background:var(--card);border-radius:var(--radius);
  padding:18px;box-shadow:0 10px 24px rgba(0,0,0,.08);
  display:grid;gap:10px
}
.info-card div{display:flex;gap:10px;align-items:center}
.info-card i{color:var(--primary)}

.pill{display:inline-flex;gap:10px;align-items:center;padding:8px 12px;border-radius:999px;font-weight:600}
.pill.danger{background:#FDECEC;color:#8B1E1E;border:1px solid #F7C9C9}

/* Filters */
.filterbar{padding:16px 0}
.filter-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.input-group{display:flex;align-items:center;background:#fff;border-radius:10px;padding:10px 12px;border:1px solid #E5E7EB;min-width:260px}
.input-group i{color:var(--muted);margin-right:8px}
.input-group input{border:0;outline:0;font:inherit;width:100%}

select{
  background:#fff;border:1px solid #E5E7EB;border-radius:10px;padding:10px 12px;min-width:160px;
  font:inherit;color:var(--ink)
}

/* Vacancy Grid */
.vacancy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:16px 0 40px}
.card{
  background:var(--card);border-radius:var(--radius);padding:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.08); transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-6px); box-shadow:0 16px 28px rgba(0,0,0,.12)}
.card h3{margin:0 0 6px;color:var(--primary)}
.meta{color:var(--muted);margin:.35rem 0}
.actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}

/* Buttons */
.btn{
  background:var(--primary); color:#fff; border:0; padding:10px 14px; border-radius:10px;
  cursor:pointer; text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 2px 0 rgba(0,0,0,.06)
}
.btn:hover{background:var(--primary-700)}
.btn.success{background:var(--accent)}
.btn.success:hover{filter:brightness(.95)}
.btn.outline{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.btn:focus{outline:3px solid var(--ring)}

/* Ticker */
.ticker{background:#0b2f6a;color:#ffeb3b;padding:8px 0}

/* Modal */
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.6);z-index:200}
.modal.show{display:grid}
.modal-content{
  width:min(680px,92vw); background:#fff; border-radius:16px; padding:24px 22px; position:relative;
  box-shadow:0 24px 44px rgba(0,0,0,.3); animation:pop .18s ease;
}
@keyframes pop{from{transform:scale(.98);opacity:.5}to{transform:scale(1);opacity:1}}
.modal h2{margin:0 0 10px}
.details p{margin:.4rem 0}
.close{
  position:absolute; top:8px; right:10px; font-size:28px; color:#ff3b3b; background:#fff; border-radius:50%; width:38px; height:38px; border:0; cursor:pointer
}

/* Page hero (About / Contact) */
.page-hero{background:linear-gradient(180deg,#ffffff,#eef3ff);padding:36px 0;border-bottom:1px solid #e8eefc}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:22px 0}
.about-card{background:#fff;border-radius:14px;padding:16px;border:1px solid #eef2f7}
.about-card i{font-size:22px;color:var(--primary)}
.panel{background:#f6f9ff;border:1px dashed #cfe0ff;border-radius:12px;padding:14px;margin:18px 0}
.panel.soft{background:#fffaf6;border-color:#fde8d9}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 40px}
.form-card .form-row{display:flex;flex-direction:column;margin-bottom:12px}
label{font-weight:600;margin-bottom:6px}
input,textarea{
  background:#fff;border:1px solid #E5E7EB;border-radius:10px;padding:10px 12px;font:inherit;color:var(--ink)
}
input:focus,textarea:focus{outline:3px solid var(--ring);border-color:#cfe0ff}
.err{color:#b00020;height:16px}
.form-note{font-size:12px;color:var(--muted);margin-top:8px}
.contact-info h3{margin-top:0}
.map-wrap{height:240px;border-radius:12px;overflow:hidden;border:1px solid #e8eefc;margin-top:10px}
.map-wrap iframe{width:100%;height:100%;border:0}

/* Footer */
.site-footer{background:var(--primary);color:#fff;margin-top:24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;padding:22px 0}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin:6px 0}
.footer-links a{color:#fff;text-decoration:none;opacity:.9}
.footer-links a:hover{opacity:1;text-decoration:underline}
.foot-bottom{border-top:1px solid rgba(255,255,255,.18);padding:10px 0;text-align:center;opacity:.9}

/* Responsive */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 780px){
  .main-nav{display:none;flex-direction:column;position:absolute;right:20px;top:64px;background:#0d3c84;padding:10px;border-radius:10px}
  .main-nav.show{display:flex}
  .nav-toggle{display:inline-flex}
}