:root{
  --blue-bg:#071629;
  --accent:#2874ff;
  --body-font:'Poppins',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--body-font);
  line-height:1.6;
  background:#f3f6fb;
  color:#0c1c33;
}

.container{
  max-width:1100px;
  margin:auto;
  padding:1.5rem;
}

a{color:var(--accent);text-decoration:none}

.header{
  background:#0c1c33;
  color:#fff;
  position:sticky;
  top:0;
  z-index:100;
}

.nav-wrapper{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{font-weight:700;font-size:1.35rem;letter-spacing:0.5px}

.nav a{
  color:#fff;
  margin-left:1.5rem;
  font-weight:600;
  position:relative;
}

.nav a::after{
  content:'';
  position:absolute;
  height:2px;
  bottom:-4px;
  left:0;
  width:0;
  background:var(--accent);
  transition:width .3s ease;
}
.nav a:hover::after{width:100%}

/* Hero large */
.hero{
  background:radial-gradient(circle at 20% 40%, #13223b 0%, #081424 100%);
  color:#fff;
  text-align:center;
  padding:7rem 1rem 6rem;
  position:relative;
  overflow:hidden;
}

.hero h2{
  font-size:clamp(2rem,4vw,3.2rem);
  margin-bottom:1rem;
  font-weight:700;
}

.hero p.hero-sub{
  font-size:1.1rem;
  opacity:.85;
  margin-bottom:2rem;
}

.cta-buttons{
  display:flex;
  justify-content:center;
  gap:1rem;
}

/* Hero small */
.hero-small{
  background:#0c1c33;
  color:#fff;
  text-align:center;
  padding:4rem 1rem;
}

.hero-small h1{
  font-size:clamp(2rem,4vw,2.8rem);
}

/* Buttons */
.btn{
  padding:.9rem 1.8rem;
  border-radius:40px;
  font-weight:600;
  transition:all .25s ease;
}

.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(40,116,255,.4)}
.btn.secondary{border:2px solid #fff;background:transparent;color:#fff}
.btn.secondary:hover{background:#ffffff13}

/* About */
.about{
  background:#f2f4f8;
  padding:3.5rem 1rem;
}

.about-wrapper{
  display:flex;
  align-items:center;
  gap:2rem;
}

.avatar{
  border-radius:50%;
  width:130px;
  height:130px;
}

.badges img{
  height:32px;
  margin-right:1rem;
  filter:grayscale(1);
}

/* Services */
.services{
  text-align:center;
  padding:3.5rem 1rem;
}
.services h3{font-size:1.8rem;margin-bottom:.5rem}
.section-lead{margin-bottom:2rem}

/* Contact */
.contact-section{
  padding:3rem 1rem;
}
form.contact-form{
  max-width:600px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
form.contact-form input, form.contact-form textarea{
  padding:.75rem 1rem;
  border:1px solid #cdd6e1;
  border-radius:6px;
  font-family:var(--body-font);
  font-size:1rem;
}
form.contact-form button{
  align-self:flex-start;
}

/* Footer */
.footer{
  background:#0c1c33;
  color:#fff;
  text-align:center;
  padding:2rem 1rem;
  font-size:.9rem;
}
.footer a{color:#88c9ff}

/* Responsive */
@media(max-width:768px){
  .about-wrapper{flex-direction:column;text-align:center}
  .nav{display:none}
}

/* Animations for decorative shapes */
@keyframes floatY{
  0%{transform:translateY(0px)}
  50%{transform:translateY(-15px)}
  100%{transform:translateY(0px)}
}
@keyframes rotateSlow{
  to{transform:rotate(360deg)}
}

.shape.plus{animation:rotateSlow 20s linear infinite;}
.shape.dot-grid{animation:floatY 8s ease-in-out infinite;}

/* Leadership */
.leadership{
  background:#fff;
  padding:3.5rem 1rem;
  text-align:center;
}
.leadership h3{
  font-size:1.8rem;
  margin-bottom:2rem;
}
.leaders{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  justify-content:center;
}
.leader-card{
  background:#f2f4f8;
  padding:2rem;
  border-radius:12px;
  width:260px;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
  transition:transform .3s;
}
.leader-card:hover{transform:translateY(-4px);}
.leader-card h4{color:#0c1c33;margin-bottom:.5rem}
.leader-card p{margin-bottom:.75rem}
.profile-link{display:inline-block;margin:.25rem .5rem 0;padding:.25rem .5rem;border-radius:4px;background:#fff;border:1px solid #cdd6e1;font-size:.9rem;color:#0c1c33}
.profile-link:hover{background:var(--accent);color:#fff;border-color:var(--accent)}