:root {
  --ink: #f4f7ff;
  --muted: #9da9bd;
  --blue: #5d7cff;
  --blue2: #a962ff;
  --cream: #0d1220;
  --line: #273148;
  --white: #111827;
}

body { background: #080c14; color: #f4f7ff; }

.nav-wrap {
  background: rgba(8, 12, 20, .86);
  border-color: rgba(255, 255, 255, .08);
}

.brand { color: white; letter-spacing: .08em; }
.brand .logo-mark {
  position: relative;
  width: 48px;
  height: 38px;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px 4px 12px 4px;
  background: linear-gradient(135deg, #24d5ff 0%, #536dff 45%, #ba55ff 100%);
  color: white;
  font: 900 14px Manrope, sans-serif;
  letter-spacing: -.08em;
  box-shadow: 0 0 25px rgba(93, 124, 255, .55);
  transform: skew(-5deg);
}

.brand .logo-mark::after {
  content: '';
  position: absolute;
  inset: -50% auto -50% 48%;
  width: 2px;
  background: rgba(255,255,255,.85);
  transform: rotate(20deg);
}

.brand .logo-mark i { font-style: normal; margin-left: 4px; }

.hero {
  background:
    radial-gradient(circle at 82% 20%, rgba(83, 109, 255, .22), transparent 27%),
    radial-gradient(circle at 42% 82%, rgba(186, 85, 255, .12), transparent 25%),
    linear-gradient(135deg, #080c14 0%, #0b1120 52%, #10182c 100%);
}

.hero h1 em, .section-head h2 em, .cta h2 em {
  color: #7f94ff;
  background: linear-gradient(90deg, #6ee7ff, #7c8fff 45%, #c16cff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lead, .section-head > p:last-child, .service p, .service li,
.work p span, .accordions details p, .pricing-section .price small:first-child {
  color: #9da9bd;
}

.btn {
  background: linear-gradient(100deg, #476cff, #8d5dff);
  box-shadow: 0 13px 35px rgba(85, 104, 255, .32);
}
.btn:hover { background: linear-gradient(100deg, #5b7dff, #a269ff); }

.trust { border-color: #273148; }
.browser { background: #101827; box-shadow: 0 38px 90px rgba(0,0,0,.52), 0 0 0 1px #303d59; }
.browser-top { background: #192235; }
.browser-top small { background: #0e1524; color: #697690; }
.mock-nav i { background: #506079; }
.mock-cards i { background: #202b3f; }
.float-card { background: #151e2f; box-shadow: 0 15px 35px rgba(0,0,0,.4); }

.logos { background: #0b101b; border-color: #1d2637; }
.logos div div, .logos p { color: #66748b; }

.service, .price-card {
  background: linear-gradient(145deg, #121a2a, #0d1422);
  border-color: #27334b;
}
.service.featured { border-color: #657dff; box-shadow: 0 0 35px rgba(79, 103, 255, .1); }
.service .icon { background: #1d2942; }
.service > span { color: #263248; }

.pricing-section { background: #0b101b; }
.price-card.best { border-color: #667eff; box-shadow: 0 25px 60px rgba(65, 91, 220, .22); }
.price-card ul, .accordions details { border-color: #273148; }
.btn-outline { background: #111827; color: white; border-color: #33405a; }

.process { background: #0d1422; border-block: 1px solid #202b3e; }
.steps b { color: #536a92; }
.steps p { color: #9da9bd; }

.faq { background: #080c14; }
.cta {
  background:
    radial-gradient(circle at 85% 15%, rgba(110, 231, 255, .24), transparent 25%),
    linear-gradient(120deg, #304fe0, #7948d8);
  box-shadow: 0 25px 70px rgba(67, 68, 216, .35);
}
.btn-white { background: white; color: #334cd7; }

footer { background: #06090f; border-color: #1d2637; }
.footer p, .footer small { color: #758197; }

.project-info h3 { color: #f4f7ff; }
.project-info p { color: #8c9ab0; }
.project-info > b { color: #8094ff; }

@media (max-width: 900px) {
  .nav-links.open { background: #0c121f; border-color: #273148; }
  .menu-btn { color: white; }
}