:root{--primary:#2A61E3;--accent:#00B894;--neutral-900:#0F172A;}
html{scroll-behavior:smooth}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";color:#0F172A;margin:0}
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:50}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.nav a{padding:10px 12px;display:inline-block;color:#0F172A;text-decoration:none}
.nav a.cta{background:var(--primary);color:#fff;border-radius:8px}
.hero{padding:56px 0}
.footer{margin-top:48px;padding:24px 0;border-top:1px solid #e5e7eb;background:#fafafa}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#EEF2FF;color:#3730A3;font-size:12px}
.table{width:100%;border-collapse:collapse} .table th,.table td{padding:10px;border:1px solid #e5e7eb}
.card{border:1px solid #e5e7eb;border-radius:12px;padding:16px;background:#fff}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.lang-switch a{margin-right:8px;text-decoration:none}

/* === HERO with full image + blue overlay and header-safe padding === */
:root{--header-h:72px;}
.hero{position:relative;padding:calc(var(--header-h) + 40px) 0 56px;min-height:520px;
  background-image: linear-gradient(0deg, rgba(18,46,104,.55), rgba(18,46,104,.55)), url('/assets/team-hero.jpg');
  background-size:contain;background-repeat:no-repeat;background-position:center top;isolation:isolate}
.hero .container{position:relative;z-index:2}
.header{height:var(--header-h);display:flex;align-items:center}
@media (max-width:768px){
  :root{--header-h:64px}
  .hero{min-height:420px;padding:calc(var(--header-h) + 24px) 0 40px;background-position:center top}
}

/* Header language switch in nav */
.nav .lang-switch{margin-left:12px;display:inline-flex;gap:8px;align-items:center}
.nav .lang-switch a{font-size:14px;opacity:.9}
.nav .lang-switch a.active{font-weight:700;text-decoration:underline}