/* Keel Systems Brand Styles */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@300;400;600&display=swap');

:root{
  --navy:#0A1F33;
  --blue:#2378C3;
  --light:#F4F5F7;
  --text:#5E6C77;
  --green:#1ABC9C;
}

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

body{
  font-family:'Open Sans', sans-serif;
  color:var(--text);
  background:var(--light);
  line-height:1.6;
}

h1,h2,h3,h4{
  font-family:'Montserrat',sans-serif;
  color:var(--navy);
  margin-bottom:.5rem;
}

header{
  background:var(--navy);
  color:white;
  padding:1rem 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

header img{height:48px;}

nav ul{list-style:none;display:flex;gap:1.5rem;flex-wrap:wrap;}

nav a{color:white;text-decoration:none;font-weight:600;transition:opacity .2s ease;}
nav a:hover{opacity:.75;}

.hero{
  padding:4rem 2rem;text-align:center;background:white;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

button.cta{
  background:var(--blue);border:none;color:white;padding:.75rem 1.5rem;
  font-size:1rem;border-radius:12px;margin-top:1rem;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.1);transition:background .2s ease;
}
button.cta:hover{background:#1d64a3;}

.section{
  padding:4rem 2rem;max-width:1200px;margin:auto;
}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;}
.card{
  background:white;padding:2rem;border-radius:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

footer{
  text-align:center;padding:2rem;background:var(--navy);color:white;margin-top:2rem;
}

@media(max-width:680px){
  nav ul{flex-direction:column;gap:1rem;}
  header{flex-direction:column;}
}


/* --- Responsive Navigation --- */
.nav-toggle{
  display:none;
  background:none;
  border:none;
  font-size:2rem;
  color:white;
  cursor:pointer;
}
@media(max-width:800px){
  nav ul{
    display:none;
    flex-direction:column;
    width:100%;
    text-align:center;
    margin-top:1rem;
  }
  nav.open ul{
    display:flex;
  }
  .nav-toggle{
    display:block;
  }
}

/* --- Hero layout --- */
.hero-content{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3rem;
  flex-wrap:wrap;
  max-width:1200px;
  margin:auto;
}
.hero-text{
  max-width:480px;
}
.hero-img{
  max-width:320px;
  width:100%;
  background:var(--light);
  border-radius:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}


@media(max-width:800px){
  nav{
    width:100%;
  }
  nav ul{
    background:var(--navy);
    padding:1rem 0;
  }
  nav ul li a{
    display:block;
    padding:0.5rem 0;
  }
}

.card-img{
  width:100%;
  max-height:120px;
  object-fit:contain;
  margin-bottom:0.75rem;
}