:root{
  --bg:#0b1220;
  --bg-hero:#0d1326;
  --card:#101a33;
  --muted:#9fb0d0;
  --primary:#2b82ff;
  --grad1:#76b5ff;
  --grad2:#8be1ff;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,sans-serif;background:#f8f9fa;color:#111}

.hl-nav{background:linear-gradient(180deg,#0b1220 0%, #0b1220e0 80%, transparent 100%)}
.hl-nav .navbar-brand,.hl-nav .nav-link{color:#fff}
.hl-nav .nav-link:hover{color:var(--grad1)}

.hl-hero{
  background: radial-gradient(1000px 500px at -10% -10%, #1a2546 0%, transparent 60%),
              radial-gradient(900px 450px at 110% 0%, #0f5ca9 0%, transparent 60%),
              linear-gradient(180deg, var(--bg-hero) 0%, #0b1220 100%);
  color:#fff; padding:110px 0 90px;
  position:relative;
}
.text-gradient{
  background:linear-gradient(90deg,var(--grad1),var(--grad2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hl-highlight{
  padding:2px 8px;border-radius:8px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12)
}
.hl-hero-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:18px 18px;
  backdrop-filter: blur(8px);
}
.hl-bubble{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#204d8e,#173a69);
  color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.25)
}

.hl-kpi{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:14px; text-align:center
}
.hl-kpi .num{display:block;font-size:1.6rem;font-weight:800}
.hl-kpi small{color:#d2dcff}

.hl-wave{
  position:absolute;inset:auto 0 0; height:140px; pointer-events:none; opacity:.5
}
.hl-wave-1{ background: radial-gradient(60% 120% at 50% 100%, #20509d66, transparent 60%); }
.hl-wave-2{ background: radial-gradient(60% 120% at 50% 100%, #88d0ff33, transparent 60%); mix-blend-mode:screen }

.py-6{padding-top:72px;padding-bottom:72px}

.hl-solution{
  background:#fff;border:1px solid #e7ecf5;border-radius:14px;padding:24px;height:100%;
  box-shadow:0 10px 24px rgba(0,0,0,.06);transition:.25s
}
.hl-solution:hover{transform:translateY(-6px); box-shadow:0 16px 30px rgba(0,0,0,.08)}
.hl-solution .icon{
  width:52px;height:52px;border-radius:12px;display:grid;place-items:center;
  background:rgba(43,130,255,.1); color:#2b82ff; font-size:22px; margin-bottom:10px
}
.hl-solution a{color:#2b82ff;text-decoration:none}
.hl-solution a:hover{text-decoration:underline}

.hl-card{
  background:#fff;border:1px solid #e8edf6;border-radius:16px;overflow:hidden;height:100%;
  box-shadow:0 12px 26px rgba(0,0,0,.06); transition:.25s
}
.hl-card.featured{border-color:#9fe1b1; box-shadow:0 18px 36px rgba(61,190,115,.15)}
.hl-card:hover{transform:translateY(-6px)}
.hl-card-head{
  display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #eef2fb
}
.hl-card .price{font-weight:800;font-size:1.4rem}
.hl-specs{list-style:none;margin:0;padding:16px 18px}
.hl-specs li{display:flex;gap:10px;align-items:flex-start;margin:8px 0;color:#41506a}
.hl-specs i{color:#2b82ff}

.hl-list{list-style:none;padding:0;margin:16px 0}
.hl-list li{margin:10px 0;color:#d9e6ff}
.drop-glow{filter: drop-shadow(0 16px 26px rgba(0,0,0,.35))}

.hl-footer{background:#0b1220;color:#fff}
.hl-footer a{color:#cfe0ff;text-decoration:none}
.hl-footer a:hover{color:#fff;text-decoration:underline}

@media (max-width: 991.98px){
  .hl-hero{padding:90px 0 70px}
}