:root{
  --bg:#0b1220; --panel:#0f172a; --panel-2:#111a2e;
  --muted:#c7d2fe; --text:#ffffff; --text80:rgba(255,255,255,.85);
  --primary:#4f8cff; --accent:#22d3ee; --ring:#2b60ff;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--text); font-family:'Inter',system-ui,Segoe UI,Roboto,Arial}
.text-white{color:#fff!important}
.text-white-80{color:var(--text80)!important}
.text-muted-2{color:var(--muted)!important}
.bg-dark-hero{
  background:
    radial-gradient(1000px 500px at 15% -10%,rgba(79,140,255,.25),rgba(34,211,238,.18),transparent 60%),
    radial-gradient(800px 450px at 85% 5%,rgba(34,211,238,.25),transparent 60%),
    var(--bg);
}
.navbar.glassy-nav{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(17,26,46,.92), rgba(17,26,46,.65));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-link-light{color:#f8f9ff!important; opacity:.9; text-decoration:none}
.nav-link-light:hover{opacity:1}
.hero{padding-top:72px}
.py-6{padding-top:4.5rem; padding-bottom:4.5rem}
.eyebrow{letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#e0e7ff; font-size:.78rem}
.fw-extrabold{font-weight:800}
.lh-tight{line-height:1.05}
.ui-frame{border-radius:1.25rem; padding:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15)}
.shadow-xxl{box-shadow:0 24px 70px rgba(0,0,0,.55)}
.section{padding:4rem 0}
.section-title{margin-bottom:1.25rem}
.card{background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:1rem}
.card-spec{background:var(--panel-2)}
.card-feature{transition:transform .2s ease}
.card-feature:hover{transform:translateY(-4px)}
.feature-dot{width:10px;height:10px;border-radius:10px;flex:0 0 10px;background:conic-gradient(from 180deg,var(--accent),var(--ring));box-shadow:0 0 0 4px rgba(34,211,238,.18)}
.price-card.popular{outline:2px solid var(--ring); box-shadow:0 0 0 6px rgba(43,96,255,.18)}
.btn-primary{background:linear-gradient(180deg,var(--primary),#3759ff); border:0; color:#fff; box-shadow:0 10px 30px rgba(79,140,255,.35)}
.btn-outline-light{border:1px solid rgba(255,255,255,.7); color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.1)}
.btn-cta{background:linear-gradient(180deg,#10b981,#059669); color:#001014; border:0; font-weight:700; border-radius:.8rem; box-shadow:0 10px 30px rgba(16,185,129,.35)}
.accordion-button{color:#fff}
.accordion-button:not(.collapsed){box-shadow:none}
.glassy{background:rgba(255,255,255,.06)!important; border:1px solid rgba(255,255,255,.12)!important; border-radius:.8rem!important}

/* ==== Client logos marquee ==== */
.logo-marquee{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px 0;
}
.logo-track{
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: scroll-logos 30s linear infinite;
  will-change: transform;
}
.logo-item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  min-width: 120px;
  opacity: .9;
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}
.logo-item:hover{
  transform: translateY(-2px) scale(1.02);
  opacity: 1;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.35));
}
.logo-item img{
  height: 55px;
  width: auto;
  object-fit: contain;
  filter: grayscale(10%) contrast(105%) brightness(110%);
}
@keyframes scroll-logos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Responsive tweaks */
@media (max-width: 576px){
  .display-5{font-size:2rem}
  .section{padding:3rem 0}
  .navbar .btn, .navbar .nav-link-light{font-size:.9rem}
  .logo-item{ min-width: 96px; }
  .logo-item img{ height: 28px; }
}