:root{
  --accent:#0b7fbf;
  --accent-2:#8fcf6f;
  --muted:#6b7280;
  --bg:#f6fbf8;
  --card:#ffffff;
  --nav-height:72px;
}

*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:#052033;-webkit-font-smoothing:antialiased}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header / Nav */
.header{background:linear-gradient(90deg, rgba(11,127,191,0.06), rgba(143,207,111,0.03));height:var(--nav-height);display:flex;align-items:center;box-shadow:0 2px 8px rgba(3,10,18,0.04)}
.header .container{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:14px}
.logo{height:48px;width:auto;display:block}
.brand-text{line-height:1}
.brand-text .title{font-weight:800;color:#063044}
.brand-text .subtitle{font-size:12px;color:var(--muted)}

/* Nav links */
.nav{display:flex;align-items:center;gap:18px}
.nav .nav-item{position:relative}
.nav a{color:#fff;text-decoration:none;font-weight:700;padding:8px 10px;border-radius:8px;display:inline-block}
.nav a:hover{background:rgba(11,127,191,0.06)}

/* Dropdown */
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:100%;left:0;background:white;border-radius:8px;box-shadow:0 8px 30px rgba(3,10,18,0.08);min-width:200px;padding:8px;display:none;z-index:40}
.dropdown-menu a{display:block;padding:10px;border-radius:6px;color:#053b3c;font-weight:600}
.dropdown:hover .dropdown-menu{display:block}

/* Request button */
.request{background:linear-gradient(180deg,#1f93d1,#0b79b8);color:white;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:800;box-shadow:0 6px 18px rgba(11,127,191,0.12)}
.request:hover{transform:translateY(-2px);transition:all .18s ease}

/* Mobile */
.mobile-toggle{display:none}
@media (max-width:900px){
  .nav{display:none}
  .mobile-toggle{display:block;background:transparent;border:none;font-size:18px}
  .header{height:64px}
}

/* Hero */
.hero{padding:36px 0;display:flex;gap:20px;align-items:center}
.hero-left{flex:1}
.hero h1{margin:0;font-size:clamp(20px,3.6vw,36px)}
.hero p{color:var(--muted);margin-top:8px}
.hero img{max-width:420px;border-radius:10px;box-shadow:0 12px 30px rgba(3,10,18,0.06)}

/* Layout with sidebar */
.layout{display:grid;grid-template-columns:260px 1fr;gap:20px;padding:18px 0}
.sidebar{background:var(--card);border-radius:10px;padding:16px;box-shadow:0 6px 18px rgba(3,10,18,0.04);min-height:200px}
.sidebar a{display:block;padding:12px;border-left:4px solid transparent;text-decoration:none;color:#063044;margin-bottom:8px;border-radius:6px}
.sidebar a.active{background:linear-gradient(90deg,rgba(11,127,191,0.06),transparent);border-left-color:var(--accent)}

/* Cards */
.section{background:var(--card);border-radius:10px;padding:18px;margin-bottom:18px;box-shadow:0 6px 18px rgba(3,10,18,0.04)}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}

/* Team card */
.card{border-radius:10px;overflow:hidden;border:1px solid #eef6f2;background:linear-gradient(180deg,#fff,#fbfff6)}
.card .img{height:180px;background-size:cover;background-position:center}
.card .body{padding:12px}
.card h4{margin:6px 0 4px 0}
.role{color:var(--muted);font-size:0.92rem}

/* Footer */
footer{Padding:18px 0;text-align:left;color:var(--muted);font-size:0.95rem;margin-top:18px}

/* small screens */
@media (max-width:900px){.layout{grid-template-columns:1fr}.sidebar{order:2}}