:root{
  --navy: #072343;
  --deep: #0f3a59;
  --accent: #1f9ceb;
  --muted: #6d7783;
  --bg: #f6fafc;
  --card: #ffffff;
  --max-width: 1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;color:#111;background:var(--bg);}
.container{max-width:var(--max-width);margin:0 auto;padding:40px 20px;}
.hero{position:relative;background-image:url('assets/hero.jpg');background-size:cover;background-position:center;color:#fff;padding:80px 0 120px;display:flex;align-items:center;min-height:420px;}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(6,30,48,0.7), rgba(6,30,48,0.85));}
.hero-content{position:relative;z-index:2;max-width:900px;}
.hero h1{font-size:44px;margin:0 0 18px;}
.lead{font-size:18px;line-height:1.6;color:rgba(255,255,255,0.9);margin-bottom:24px;max-width:760px}
.cta .btn{margin-right:12px;text-decoration:none;padding:12px 20px;border-radius:6px;display:inline-block;border:1px solid rgba(255,255,255,0.15)}
.btn{background:var(--accent);color:#fff;border:none;padding:12px 20px;border-radius:6px;text-decoration:none;font-weight:600;cursor:pointer;transition:transform .12s ease}
.btn:hover{transform:translateY(-2px)}
.btn.outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.45)}
.who-we-are{display:grid;grid-template-columns:1fr 380px;gap:30px;align-items:center;padding:60px 0}
.who-we-are img{width:100%;height:auto;border-radius:4px;object-fit:cover;box-shadow:0 6px 18px rgba(16,40,60,0.08)}
.features{padding:40px 0}
.features h2{margin-bottom:18px}
.features .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.feature{background:var(--card);padding:18px;border-radius:8px;box-shadow:0 4px 14px rgba(13,42,65,0.05)}
.join-contact{display:grid;grid-template-columns:1fr 380px;gap:30px;padding:60px 0;align-items:start}
.join{background:#fff;padding:20px;border-radius:6px}
.contact{background:var(--card);padding:20px;border-radius:6px;box-shadow:0 6px 18px rgba(16,40,60,0.04)}
.contact form{display:flex;flex-direction:column;gap:12px}
.contact label{font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.contact input,.contact textarea{padding:10px;border-radius:6px;border:1px solid #e5eef6;font-size:14px}
.footer{padding:28px 0;text-align:center;color:var(--muted);font-size:14px}
@media (max-width:900px){
  .who-we-are, .join-contact{grid-template-columns:1fr; padding:30px 0}
  .hero{padding:60px 0 80px}
  .hero h1{font-size:32px}
}