/* =========================
   Kwetu Partners — Kwetu Themed CSS (Dark Navy)
   ========================= */

:root{
  /* Kwetu palette */
  --nav-start: #0f172a; /* deep navy */
  --nav-end:   #1e293b; /* slightly lighter navy */
  --accent1:   #22d3ee; /* cyan */
  --accent2:   #38bdf8; /* cyan-2 */
  --surface-dark: #0b1220; /* very dark blue surfaces */
  --card-surface: #0f1b2d; /* cards */
  --border: #1f2937; /* subtle border on dark */
  --text-light: #E2E8F0; /* main text on dark */
  --muted: #94A3B8; /* muted text */
  --bg: var(--surface-dark);
  --ring: rgba(34,211,238,.18);
  --shadow: 0 10px 28px rgba(2,6,23,.55);
}

/* Base reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text-light);
  background:var(--bg);
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Headings */
h1,h2,h3{font-family:Poppins, Inter, sans-serif; line-height:1.2; color:var(--text-light)}
h1{font-size:clamp(2rem, 2.4rem + 1vw, 3.2rem); margin:0 0 .6rem}
h2{font-size:clamp(1.6rem, 1.2rem + 1vw, 2.2rem); margin:0 0 .75rem}
h3{font-size:1.25rem; margin:.25rem 0 .5rem}

/* Layout helpers */
.container{width:min(1150px, 92%); margin:auto}
.mtop{margin-top:1.2rem}
.center{text-align:center}

/* =========================
   NAVIGATION (Desktop + Mobile)
   ========================= */
.nav{
  position:sticky; top:0; z-index:100;
  background: linear-gradient(90deg, var(--nav-start), var(--nav-end));
  color:var(--text-light);
  box-shadow: 0 8px 22px rgba(2,6,23,.45);
}
.nav__inner{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--text-light); text-decoration:none}
.brand__logo{height:40px; width:40px; object-fit:contain; border-radius:10px; background:transparent}
.brand__name{font-weight:700; letter-spacing:.2px}
.menu{display:flex; gap:.8rem; align-items:center}
.menu a{color:var(--text-light); text-decoration:none; opacity:.94; padding:.35rem .45rem; border-radius:8px}
.menu a:hover{opacity:1; background:rgba(255,255,255,.02)}

/* Mobile hamburger + drawer */
.hamburger{
  display:none; background:transparent; border:none; cursor:pointer; padding:.4rem; margin-left:.4rem;
  position:relative; z-index:110;
}
.hamburger span{
  display:block; width:26px; height:3px; background:var(--text-light); border-radius:2px; margin:5px 0;
  transition:transform .2s, opacity .2s;
}
.hamburger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.mobile-menu{
  position:fixed; left:0; right:0; top:calc(var(--nav-h, 64px)); z-index:90;
  max-height:calc(100vh - var(--nav-h, 64px)); overflow:auto;
  display:grid; gap:.6rem; padding:.8rem .9rem 1rem;
  background: linear-gradient(90deg, var(--nav-start), var(--nav-end));
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:transform .2s ease, opacity .2s ease, visibility .2s;
}
.mobile-menu a{color:var(--text-light); text-decoration:none; padding:.55rem .7rem; border-radius:10px}
.mobile-menu a.btn{background:var(--text-light); color:var(--nav-start); text-align:center}

/* opened state + legacy hidden attr support */
.mobile-menu.is-open{ transform:none; opacity:1; visibility:visible }
.mobile-menu[hidden]{ display:none !important }

/* =========================
   BUTTONS (pill style)
   ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.1rem; border-radius:16px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  color:#06121a; text-decoration:none; font-weight:700;
  box-shadow: 0 10px 28px rgba(34,211,238,.06);
  transition:transform .08s ease, box-shadow .2s ease, opacity .2s ease;
  border:none; cursor:pointer;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(2,6,23,.55); opacity:.99}
.btn--outline{
  background:transparent;
  border:2px solid rgba(56,189,248,.12);
  color:var(--text-light);
  box-shadow:none;
}
.btn--light{
  background:rgba(255,255,255,.06);
  color:var(--text-light);
  border:1px solid rgba(255,255,255,.04);
}
.btn--sm{padding:.5rem .75rem; border-radius:12px; font-size:.95rem}
.btn--lg{padding:.9rem 1.2rem; border-radius:18px; font-size:1.02rem}

/* =========================
   HERO
   ========================= */
.hero{
  background:
    radial-gradient(900px 300px at 15% -10%, rgba(56,189,248,0.06), transparent),
    radial-gradient(600px 240px at 85% 120%, rgba(34,211,238,0.03), transparent),
    linear-gradient(180deg, rgba(255,255,255,0.01), transparent 60%),
    var(--surface-dark);
  padding:3rem 0 2rem;
  border-bottom:1px solid rgba(255,255,255,.03);
}
.hero__inner{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.hero__copy p{max-width:56ch; color:var(--muted); margin:.2rem 0 1rem}
.hero__cta{display:flex; gap:.8rem; flex-wrap:wrap}
.trust{display:flex; gap:1rem; color:var(--muted); margin-top:.9rem; font-size:.95rem}
.hero__art{display:flex; justify-content:center; align-items:center}
.hero__art img{max-width:100%; border-radius:12px; box-shadow:var(--shadow)}
.hero__wave{height:16px; background: linear-gradient(90deg, var(--nav-start), var(--nav-end))}

/* =========================
   SECTIONS / UTILITIES
   ========================= */
.section{padding:3rem 0}
.section--alt{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.section__lead{color:var(--muted); margin-top:-.25rem}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:.6rem; margin:.6rem 0 0; padding:0; list-style:none}
.chips li{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-light);
  padding:.45rem .7rem;
  border-radius:999px;
  font-weight:600;
  opacity:.95;
}

/* =========================
   CONTACT CARDS
   ========================= */
.contact{display:grid; gap:1rem; grid-template-columns:repeat(3, 1fr); margin-top:.8rem}
.contact__card{
  background:var(--card-surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem;
  box-shadow: 0 8px 30px rgba(2,6,23,.45);
}
.contact__card a{color:var(--accent2); text-decoration:none}

/* =========================
   CTA BAND
   ========================= */
.cta{background: linear-gradient(90deg, rgba(30,41,59,0.9), rgba(15,23,42,0.95)); color:var(--text-light); border-top:1px solid rgba(255,255,255,.02)}
.cta__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 0}
.cta__inner p{opacity:.95; margin:0}

/* =========================
   FEATURED PRODUCTS CAROUSEL
   ========================= */
.featured__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem;
}
.carousel{
  position:relative; overflow:hidden; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
  padding:.6rem 2.2rem;
  border:1px solid var(--border);
}
.carousel__track{
  display:flex; gap:.8rem; scroll-behavior:smooth;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  padding:.4rem 0 1rem;
}
.carousel__track::-webkit-scrollbar{display:none}
.slide{
  flex:0 0 260px;
  background:var(--card-surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1rem;
  text-decoration:none;
  color:var(--text-light);
  box-shadow:0 8px 28px rgba(2,6,23,.45);
  transition:transform .08s, box-shadow .2s;
}
.slide:hover{transform:translateY(-4px); box-shadow:0 18px 48px rgba(2,6,23,.6)}
.slide h3{margin:.4rem 0 .2rem; color:var(--text-light)}
.slide p{margin:0; color:var(--muted)}
.slide__icon{
  width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:#06121a;
  background:linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow:0 8px 26px rgba(34,211,238,.06); margin-bottom:.4rem;
}
.carousel__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px;height:38px;border-radius:999px;border:none; cursor:pointer;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 24px rgba(2,6,23,.45);
  font-size:22px; line-height:38px; color:var(--text-light);
}
.carousel__nav--prev{left:.5rem}
.carousel__nav--next{right:.5rem}

/* =========================
   CARDS / GRID (shared)
   ========================= */
.grid{display:grid; gap:1rem; grid-template-columns:repeat(3, 1fr); margin-top:1.4rem}
.card{
  background:var(--card-surface);
  border-radius:16px; padding:1rem;
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(2,6,23,.45);
  transition:transform .08s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 48px rgba(2,6,23,.6)}
.card__icon{
  width:42px; height:42px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent1), var(--accent2)); color:#06121a;
  border-radius:12px; font-size:1.2rem; box-shadow:0 8px 26px rgba(34,211,238,.06)
}
.card p{color:var(--muted); margin:.35rem 0 0}

/* =========================
   CLIENTS SECTION (color variants)
   ========================= */
.clients .client-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015));
  border:1px solid var(--border);
  color:var(--text-light);
}
.client-card h3{color:var(--accent2); margin-bottom:.35rem}
.client-card p{color:var(--muted)}

/* Hover effect */
.client-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(2,6,23,0.6);
}

/* =========================
   STATS
   ========================= */
.stats{
  background: linear-gradient(135deg, rgba(17,24,39,0.85), rgba(14,20,33,0.9));
  color:var(--text-light);
  text-align:center;
  padding:50px 20px;
  display:flex;
  justify-content:center;
  gap:60px;
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.02);
}
.stat-item { min-width:140px; }
.stat-number{
  font-size:2.2rem;
  font-weight:800;
  font-family: 'Poppins', sans-serif;
  display:block;
  margin-bottom:6px;
  color:var(--accent2);
}
.stat-label { font-size:1rem; color:var(--muted) }

/* =========================
   FOOTER
   ========================= */
.footer{background:linear-gradient(180deg, #06111b, var(--nav-start)); color:var(--muted); padding:1.6rem 0; border-top:1px solid rgba(255,255,255,.02)}
.footer__inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem}
.slogan{color:var(--text-light); font-weight:600}

/* =========================
   ACCESSIBILITY / UX
   ========================= */
a:focus-visible, button:focus-visible, .btn:focus-visible, .carousel__nav:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 10px;
}
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 980px){
  .grid{grid-template-columns:repeat(2, 1fr)}
  .hero__inner{grid-template-columns:1fr; text-align:left}
  .contact{grid-template-columns:1fr}
}
@media (max-width: 820px){
  .menu{display:none}
  .hamburger{display:block}
}
@media (max-width: 640px){
  .grid{grid-template-columns:1fr}
  .carousel{padding:.6rem 1.4rem}
  .slide{flex-basis:78%}
}
.clients__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 980px){
  .clients__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .clients__grid {
    grid-template-columns: 1fr;
  }
}
/* CEO Section — navy theme with circular photo */
.ceo-overview {
  background: #002147;               /* navy blue (same as your site) */
  color: #ffffff;                    /* white readable text */
  padding: 40px 20px;
  border-radius: 10px;
  margin: 40px auto;
  max-width: 900px;
}

.ceo-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ceo-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;                /* perfect circle */
  object-fit: cover;
  margin-bottom: 20px;
  border: 3px solid #ffffff33;       /* optional soft border */
}

.ceo-overview h2 {
  color: #ffffff;
  margin-bottom: 15px;
  font-size: 28px;
}

.ceo-overview p {
  color: #e6e6e6;                    /* softened white for readability */
  line-height: 1.7;
  max-width: 750px;
}
@media (max-width: 900px) {
  .leadership-grid {
    grid-template-columns: 1fr !important;
  }
}