:root{
  --background:#ffffff;
  --foreground:#0B1020;
  --slate-light:#F3F6FC;
  --slate-medium:#566586;
  --slate-dark:#1B2442;
  --executive-border:#E3E8F3;
  --midnight:#0A2A66;
  --midnight-hover:#082451;
  --teal:#00B3C6;
  --shadow: 0 10px 30px rgba(11,16,32,0.08);
  --radius: 18px;
  --max: 72rem;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--foreground);
  background:var(--background);
  line-height:1.5;
}
a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 1.5rem}
@media (min-width:768px){.container{padding:0 3rem}}
@media (min-width:1024px){.container{padding:0 6rem}}
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--executive-border);
}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0}
.brand{display:flex; align-items:center; gap:0.75rem; text-decoration:none}
.brand img{height:34px}
.brand span{font-weight:700; letter-spacing:-0.02em}
nav{display:none; gap:1.25rem; align-items:center}
nav a{text-decoration:none; font-size:0.82rem; color:var(--slate-medium); transition:color .2s ease}
nav a:hover{color:var(--foreground)}
nav a.active{color:var(--foreground); font-weight:600}
@media (min-width: 900px){nav{display:flex}}
.actions{display:flex; align-items:center; gap:0.75rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.8rem 1.1rem; border-radius:999px;
  font-weight:600; font-size:0.82rem;
  letter-spacing:0.04em; text-transform:uppercase;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--midnight); color:#fff}
.btn-primary:hover{background:var(--midnight-hover)}
.btn-outline{background:transparent; border-color:var(--executive-border)}
.btn-outline:hover{border-color:var(--slate-dark)}
.btn-ghost{background:transparent; color:var(--slate-medium); padding:0.65rem 0.8rem; border:1px solid var(--executive-border)}
.btn-ghost:hover{color:var(--foreground); border-color:var(--slate-dark)}
.lang{display:flex; gap:0.25rem; padding:0.25rem; border:1px solid var(--executive-border); border-radius:999px; background:var(--background)}
.lang button{border:0; background:transparent; cursor:pointer; font-size:0.78rem; padding:0.45rem 0.6rem; border-radius:999px; color:var(--slate-medium)}
.lang button.active{background:linear-gradient(135deg,var(--midnight),var(--teal)); color:#ffffff; font-weight:700; box-shadow:0 10px 20px rgba(10,42,102,0.18);}
.lang button:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.section{padding:4.5rem 0}
.hero{min-height:72vh; display:flex; align-items:center; position:relative}
.kicker{font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate-medium); margin:0 0 1rem}
.h1{font-size:clamp(2.1rem, 4vw, 3.2rem); line-height:1.1; letter-spacing:-0.03em; margin:0 0 1.25rem}
.lead{font-size:1.12rem; color:var(--slate-medium); max-width:44rem; margin:0 0 2rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:0.75rem}
.hero-art{
  position:absolute; right:-80px; top:10%;
  width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(0,179,198,0.35), transparent 55%),
              radial-gradient(circle at 70% 65%, rgba(10,42,102,0.20), transparent 55%);
  opacity:0.9; pointer-events:none;
}
@media (max-width: 980px){.hero-art{display:none}}
.card-grid{display:grid; gap:1px; background:var(--executive-border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
@media (min-width: 900px){.card-grid.cols-2{grid-template-columns:1fr 1fr}}
@media (min-width: 900px){.card-grid.cols-3{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--background); padding:2rem}
.card.alt{background:var(--foreground); color:var(--background)}
.card h3{margin:0 0 0.75rem; font-size:1.15rem}
.card p{margin:0; color:var(--slate-medium)}
.card.alt p{color:rgba(255,255,255,0.72)}
.badge{display:inline-flex; gap:0.5rem; align-items:center; font-size:0.75rem; color:var(--slate-medium)}
.badge .dot{width:8px; height:8px; border-radius:50%; background:var(--teal)}
.split{display:grid; gap:2rem; align-items:start}
@media (min-width: 900px){.split{grid-template-columns: 1.1fr 0.9fr}}
.list{margin:1.25rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0.85rem}
.list li{display:flex; gap:0.75rem; align-items:flex-start}
.bullet{width:8px; height:8px; border-radius:50%; background:var(--teal); margin-top:0.55rem; flex:0 0 auto}
small.muted{color:var(--slate-medium)}
.profile-grid{display:grid; gap:1.25rem}
@media (min-width: 900px){.profile-grid{grid-template-columns: repeat(3, 1fr)}}
.profile{border:1px solid var(--executive-border); border-radius:var(--radius); overflow:hidden; background:var(--background);
  box-shadow: 0 10px 25px rgba(11,16,32,0.06); text-decoration:none; transition:transform .2s ease, border-color .2s ease}
.profile:hover{transform:translateY(-4px); border-color:var(--slate-dark)}
.profile .img{aspect-ratio:3/4; background:var(--slate-light)}
.profile img{width:100%; height:100%; object-fit:cover; filter:grayscale(100%); transition:filter .35s ease, transform .35s ease}
.profile:hover img{filter:grayscale(0%); transform:scale(1.03)}
.profile .info{padding:1.25rem 1.25rem 1.4rem}
.profile .name{font-size:1.05rem; font-weight:700; margin:0 0 0.25rem}
.profile .role{margin:0 0 0.65rem; color:var(--midnight); font-weight:650; font-size:0.88rem}
.profile .exp{margin:0; color:var(--slate-medium); font-size:0.9rem}
footer{border-top:1px solid var(--executive-border); padding:3rem 0}
.footer-top{display:flex; flex-direction:column; gap:1.25rem}
@media(min-width: 900px){.footer-top{flex-direction:row; align-items:center; justify-content:space-between}}
.footer-links{display:flex; flex-wrap:wrap; gap:1rem; color:var(--slate-medium)}
.footer-links a{text-decoration:none}
.footer-links a:hover{color:var(--foreground)}
.footer-bottom{margin-top:1.75rem; padding-top:1.75rem; border-top:1px solid var(--executive-border); display:flex; flex-direction:column; gap:0.5rem; color:var(--slate-medium)}
@media(min-width: 900px){.footer-bottom{flex-direction:row; justify-content:space-between; align-items:center}}
.modal-backdrop{position:fixed; inset:0; background:rgba(11,16,32,0.55); display:none; align-items:center; justify-content:center; padding:1.25rem; z-index:100}
.modal{background:var(--background); border-radius:22px; width:min(720px, 100%); box-shadow:var(--shadow); overflow:hidden}
.modal header{position:relative; border:0; background:var(--background); backdrop-filter:none}
.modal .modal-body{padding:1.5rem 1.75rem 1.75rem}
.modal .modal-title{margin:0 0 0.25rem; font-size:1.25rem; letter-spacing:-0.02em}
.modal .modal-sub{margin:0 0 1.25rem; color:var(--slate-medium)}
.modal .row{display:grid; gap:0.9rem}
@media(min-width:700px){.modal .row{grid-template-columns:1fr 1fr}}
.field label{display:block; font-size:0.82rem; color:var(--slate-medium); margin:0 0 0.35rem}
.field input,.field select,.field textarea{width:100%; padding:0.75rem 0.85rem; border-radius:14px; border:1px solid var(--executive-border); font:inherit}
.field textarea{min-height:120px; resize:vertical}
.modal .actions{justify-content:flex-end; margin-top:1rem}