:root{
  --bg:#0A2A43;
  --bg-alt:#0F324E;
  --fg:#0C1117;
  --text:#0E1420;
  --muted:#5B6B7A;
  --brand:#4FA3D1;
  --brand-2:#8BD3FF;
  --surface:#FFFFFF;
  --surface-alt:#F6F8FA;
  --border:#E6ECF1;
  --ok:#16a34a;
  --warn:#d97706;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
}

/* Layout helpers */
.container{width:min(1120px, 92%); margin-inline:auto}
.section{padding:72px 0}
.section-alt{background:var(--surface-alt)}
.grid-2{display:grid; gap:28px; grid-template-columns:1.5fr 1fr}
@media (max-width: 900px){ .grid-2{grid-template-columns:1fr} }

/* Header + Nav */
.site-header{
  position:sticky; top:0; background:#fff; border-bottom:1px solid var(--border); z-index:10;
  backdrop-filter:saturate(1.2) blur(6px);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:64px}
.brand{
  display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center;
  background:var(--bg); color:#fff; border-radius:8px; text-decoration:none; font-weight:700;
  letter-spacing:.5px;
}
.menu{display:flex; list-style:none; gap:18px; margin:0; padding:0; align-items:center}
.menu a{color:var(--text); text-decoration:none; padding:8px 10px; border-radius:8px}
.menu a:hover{background:var(--surface-alt)}
.btn{background:var(--brand); color:#042034; border:none; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:600; box-shadow:0 1px 0 rgba(0,0,0,.06)}
.btn:hover{filter:brightness(0.95)}
.btn-outline{background:transparent; border:1px solid var(--brand); color:var(--bg)}
.btn-small{padding:8px 12px}

.nav-toggle{
  display:none; background:transparent; border:1px solid var(--border); border-radius:8px; padding:8px 10px
}
@media (max-width: 860px){
  .nav-toggle{display:inline-block}
  .menu{ position:absolute; right:4%; top:64px; background:#fff; border:1px solid var(--border);
    border-radius:12px; padding:10px; display:none; flex-direction:column; width:min(320px, 92%) }
  .menu.open{display:flex}
}

/* Hero */
.hero{
  background: radial-gradient(1200px 600px at 20% -10%, var(--brand-2) 0%, transparent 50%) , linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
  border-bottom:1px solid var(--border);
}
.hero__inner{display:grid; gap:20px; grid-template-columns:1.2fr 1fr; padding:48px 0}
.hero__text h1{font-size: clamp(32px, 6vw, 52px); margin:0 0 10px}
.hero .subtitle{color:var(--muted); margin:0 0 20px; font-size: clamp(16px, 2.2vw, 20px)}
.hero__visual{display:flex; align-items:center; justify-content:center}
.hero__shape{width:min(380px, 80%); aspect-ratio:1/1; border-radius:24px;
  background: conic-gradient(from 180deg at 50% 50%, var(--brand) 0deg, var(--bg) 120deg, #1b4d6d 240deg, var(--brand-2) 360deg);
  filter:saturate(0.9) blur(0.2px); box-shadow:0 24px 60px rgba(13,57,89,.25)}
@media (max-width: 900px){
  .hero__inner{grid-template-columns:1fr; text-align:center}
  .cta{justify-content:center}
}

/* Cards, lists */
.card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px}
.cards{display:grid; gap:18px; grid-template-columns:repeat(3, 1fr)}
@media (max-width: 980px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width: 620px){ .cards{grid-template-columns:1fr} }

.icon-list, .check-list, .meta-list{list-style:none; padding:0; margin:0}
.icon-list li{margin:8px 0}
.check-list li{margin:6px 0; padding-left:28px; position:relative}
.check-list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--ok); font-weight:700
}
.meta-list li{margin:6px 0; color:var(--muted)}

/* Jobs */
.job{padding:18px 0; border-bottom:1px solid var(--border)}
.job:last-child{border-bottom:none}
.job__header{display:flex; align-items:center; justify-content:space-between; gap:12px}
.job__header h3{margin:0}
.job__meta{color:var(--muted); font-size:.95rem}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.tag{font-size:.85rem; padding:6px 10px; border-radius:999px; background:#eef6fb; color:#0d4970}

/* Forms */
.form label{display:block; font-weight:600; margin:8px 0 6px}
.form input, .form textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font:inherit
}
.form input:focus, .form textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(79,163,209,.2)}
.form__note{color:var(--muted); font-size:.9rem}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:24px 0; background:#fff}
.footer__inner{display:flex; align-items:center; justify-content:space-between}
.to-top{color:var(--bg); text-decoration:none; border:1px solid var(--border); padding:6px 10px; border-radius:8px}
.to-top:hover{background:var(--surface-alt)}
``