:root{
  --green:#39b54a;
  --blue:#2f9ae6;
  --bg:#0c1020;
  --panel:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.12);
  --muted:#a8b2d1;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  color:#eef3ff;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(47,154,230,.20), transparent 70%),
    radial-gradient(800px 420px at -10% 50%, rgba(57,181,74,.18), transparent 70%),
    var(--bg);
}

/* helpers & spacing */
.fw-800{font-weight:800}
.section{padding:96px 0}
.section-alt{padding:96px 0; background:rgba(255,255,255,.02)}
.section-divider{position:relative}
.section-divider::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.12), rgba(255,255,255,.0));
}
.section-title{font-weight:800; letter-spacing:.2px; margin-bottom:18px}
.text-secondary{color:var(--muted)!important}
.link-muted{color:#bfc9e6;text-decoration:none}
.link-muted:hover{color:#fff}

/* Navbar */
.nav-glass{
  background: linear-gradient( to bottom, rgba(12,16,32,.9), rgba(12,16,32,.65) );
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--stroke);
}
.navbar .nav-link{color:#d7e3ff}
.navbar .nav-link:hover{color:#fff}

/* Buttons */
.btn-pill{border-radius:999px;padding:.65rem 1.25rem}
.btn-gradient{
  background: linear-gradient(90deg, var(--green), var(--blue));
  border:0; color:#fff;
  box-shadow: 0 10px 24px rgba(47,154,230,.25);
}
.btn-gradient:hover{filter:brightness(1.05)}

/* HERO */
.hero{margin-top:18px}
.hero-inner{background:#0e1428}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.15; filter:saturate(120%) contrast(105%);
}
.hero-gradient{
  position:absolute; inset:0;
  background: radial-gradient(600px 360px at 20% 10%, rgba(57,181,74,.55), transparent 65%),
              radial-gradient(600px 360px at 80% 30%, rgba(47,154,230,.55), transparent 65%);
  mix-blend-mode:screen; pointer-events:none;
}
.hero-image-wrap{position:relative; height:70%; min-height:320px; display:flex; align-items:center; justify-content:center}
.hero-image{width:70%; height:70%; object-fit:cover;}

/* “Glass” blocks */
.glass{
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

/* Cards */
.card-glass{
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius:16px; overflow:hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-glass:hover{transform:translateY(-4px); box-shadow:0 18px 38px rgba(0,0,0,.35)}
.card-img-top{height:180px; object-fit:cover}
.object-cover{object-fit:cover}

/* Clients grid */
.client-logos{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 28px 32px;
  align-items:center;
  justify-items:center;
  margin-top:24px;
}
.client-item{
  width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:16px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.03);
  border:1px solid var(--stroke);
}
.client-logo{
  height:52px; max-width:90%; object-fit:contain;
  filter: grayscale(100%) opacity(.85);
  transition: filter .2s, transform .2s;
}
.client-item:hover .client-logo{filter:none; transform:scale(1.03)}

/* Footer */
footer{background:rgba(255,255,255,.02)}