/* ============================================================================
   Online Convert — Premium Landing overrides
   Unifies the landing page with the tool design system (accent #6576ff, Inter),
   adds a premium Special-Features grid, polished hero/CTA/testimonials/footer,
   and tightens responsiveness across desktop / laptop / tablet / mobile.
   Loaded LAST so it wins the cascade over dashlite + landing_page.css.
   Scoped to `.npc-landing` so nothing else on the site is affected.
   ========================================================================== */

.npc-landing {
  --oc-primary: #6576ff;
  --oc-primary-600: #4f5fe6;
  --oc-primary-700: #3f4fd0;
  --oc-primary-50: #eef0ff;
  --oc-primary-100: #e0e4ff;
  --oc-ink: #101426;
  --oc-body: #44495b;
  --oc-muted: #8091a7;
  --oc-line: #e8ebf2;
  --oc-dark: #0f1830;
  --oc-dark-2: #16203f;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.npc-landing h1, .npc-landing h2, .npc-landing h3,
.npc-landing h4, .npc-landing h5, .npc-landing h6,
.npc-landing .title {
  font-family: "Inter", sans-serif;
  letter-spacing: -0.015em;
}

/* ---- Unify accent: red CTAs -> brand indigo gradient -------------------- */
.npc-landing .btn-danger,
.npc-landing .btn-primary {
  background: linear-gradient(135deg, #6f7bff 0%, #5563f4 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(101, 118, 255, .32);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.npc-landing .btn-danger:hover,
.npc-landing .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(101, 118, 255, .42);
  filter: brightness(1.03);
}

/* ============================ HERO ====================================== */
.npc-landing .header.has-header-main-s1.bg-dark {
  background:
    radial-gradient(1100px 520px at 82% 18%, rgba(101,118,255,.28), transparent 60%),
    radial-gradient(900px 480px at 8% 92%, rgba(120,139,255,.18), transparent 55%),
    linear-gradient(160deg, #0f1830 0%, #14203f 55%, #0f1830 100%) !important;
}

.npc-landing .header-badge .badge.bg-primary {
  background: rgba(101,118,255,.16) !important;
  color: #c7ceff !important;
  border: 1px solid rgba(101,118,255,.35);
  border-radius: 999px;
  padding: .5em 1em;
  font-weight: 600;
  letter-spacing: .02em;
  backdrop-filter: blur(4px);
}

.npc-landing .header-title {
  font-weight: 700 !important;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem) !important;
  line-height: 1.08 !important;
  color: #fff;
}
.npc-landing .header-title .ms-slider {
  height: 1.18em;
}
.npc-landing .header-title .ms-slider__word {
  background: linear-gradient(90deg, #9aa6ff, #6576ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.npc-landing .header-content .header-text p {
  color: #aeb7d4;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 36rem;
}
.npc-landing .header-action.btns-inline {
  align-items: center;
  gap: .25rem;
  margin-top: 1.75rem;
}

/* Brand marquee — quieter, more premium */
.npc-landing .header-brand { opacity: .9; }
.npc-landing .brand-item img {
  filter: grayscale(1) brightness(2.2) opacity(.5);
  transition: filter .2s ease;
}
.npc-landing .brand-item:hover img { filter: grayscale(0) opacity(1); }

/* ===================== SECTION HEADINGS (shared) ======================== */
.npc-landing .section-head .title {
  font-weight: 700 !important;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem) !important;
}
.npc-landing .section-head p {
  color: var(--oc-muted);
  font-size: 1.02rem;
  line-height: 1.65;
}
.npc-landing .section-feature.bg-dark .section-head p { color: #aeb7d4; }

/* ===================== WHY USE THIS SITE ================================ */
.npc-landing .service-s6 .service-text .title { color: var(--oc-ink) !important; font-weight: 600 !important; }
.npc-landing .service-s6 .service-text p { color: var(--oc-body); line-height: 1.6; }
.npc-landing .styled-icon.text-primary { color: var(--oc-primary) !important; }

/* ======================= SPECIAL FEATURES (the grid) ==================== */
#oc-features .section-content .row.justify-content-center > [class*="col-"] {
  max-width: 1120px;
  flex: 0 0 100%;
  width: 100%;
}
#oc-features .row.text-center.g-gs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin: 0;
}
#oc-features .row.text-center.g-gs > [class*="col-"] {
  flex: 0 0 206px;
  max-width: 206px;
  width: 206px;
  padding: 0;
}
#oc-features .card.service.is-compact {
  height: 100%;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #1a2546 0%, #141d39 100%) !important;
  box-shadow: 0 10px 30px rgba(5,10,30,.35);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
#oc-features .card.service.is-compact:hover {
  transform: translateY(-6px);
  border-color: rgba(101,118,255,.55) !important;
  box-shadow: 0 20px 40px rgba(101,118,255,.22);
}
#oc-features .card.service.is-compact a,
#oc-features .card.service.is-compact > .card-inner { display: block; height: 100%; }
#oc-features .card.service .card-inner { padding: 26px 18px 24px !important; }

/* unified icon chip — tames every heterogeneous svg/icon into one look */
#oc-features .service-icon {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 16px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(101,118,255,.22), rgba(101,118,255,.10));
  border: 1px solid rgba(101,118,255,.30);
}
#oc-features .service-icon svg { width: 34px !important; height: 34px !important; }
#oc-features .service-icon i { font-size: 24px !important; color: #aab3ff !important; }
#oc-features .service-text .title {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  margin-bottom: 6px;
}
#oc-features .oc-feat-desc {
  color: #97a2c6;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
}

/* Special Features heading — kill the sparkle clutter overlapping the text */
.npc-landing .sparkles-container .sparkle { display: none !important; }
.npc-landing .sparkles-container { display: inline-block; }

/* ===================== COMING SOON / INTEGRATED ======================== */
.npc-landing .section-dashboard.bg-lighter { background: #f6f8fc !important; }
.npc-landing .text-block .title { color: var(--oc-ink); font-weight: 700; }
.npc-landing .text-block p,
.npc-landing .list-checked-circle li { color: var(--oc-body); }

/* ===================== TESTIMONIALS ==================================== */
.npc-landing .section-testimonial .card.card-shadow {
  border: 1px solid var(--oc-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(16,20,38,.06) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.npc-landing .section-testimonial .card.card-shadow:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(16,20,38,.10) !important;
}
.npc-landing .review-s4 .review-text p {
  color: var(--oc-body);
  font-size: 1.02rem;
  line-height: 1.7;
  position: relative;
}
.npc-landing .review-user .name { color: var(--oc-ink); font-weight: 600; }
.npc-landing .rating-stars .icon { color: #ffb400; }

/* ===================== CTA "More Than 2000+" =========================== */
.npc-landing .section-cta.bg-dark {
  background:
    radial-gradient(700px 360px at 50% 0%, rgba(101,118,255,.30), transparent 60%),
    linear-gradient(160deg, #0f1830, #16203f) !important;
}
.npc-landing .section-cta .title { color: #fff; }
.npc-landing .section-cta p { color: #aeb7d4; }

/* ===================== FOOTER ========================================== */
.npc-landing .footer { background: #0f1830; }
.npc-landing .footer .widget-title { color: #fff; font-weight: 600; }
.npc-landing .footer .link-list a,
.npc-landing .footer .widget-about p,
.npc-landing .footer .widget-contact { color: #97a2c6; }
.npc-landing .footer .link-list a:hover { color: #fff; }
.npc-landing .footer .social.social-primary a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.06); color: #c7ceff;
  transition: background .18s ease, color .18s ease;
}
.npc-landing .footer .social.social-primary a:hover {
  background: var(--oc-primary); color: #fff;
}

/* ============================================================================
   RESPONSIVE — desktop / laptop / tablet / mobile
   ========================================================================== */

/* Laptop (≤1200px): slightly smaller feature cards so 5 still fit nicely */
@media (max-width: 1200px) {
  #oc-features .row.text-center.g-gs > [class*="col-"] {
    flex-basis: 190px; max-width: 190px; width: 190px;
  }
}

/* Tablet (≤991px) */
@media (max-width: 991px) {
  .npc-landing .header-content { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .npc-landing .header-image.header-image-s2 { margin-bottom: 1.5rem; }
  .npc-landing .header-title { font-size: clamp(2rem, 6vw, 2.6rem) !important; }
  #oc-features .row.text-center.g-gs > [class*="col-"] {
    flex-basis: 200px; max-width: 220px; width: 44%;
  }
}

/* Mobile (≤575px) */
@media (max-width: 575px) {
  .npc-landing .header-action.btns-inline { flex-wrap: wrap; gap: 1rem; }
  .npc-landing .header-action.btns-inline .btn { width: 100%; justify-content: center; }
  #oc-features .row.text-center.g-gs { gap: 14px; }
  #oc-features .row.text-center.g-gs > [class*="col-"] {
    flex-basis: 100%; max-width: 320px; width: 100%;
  }
  #oc-features .card.service .card-inner { padding: 22px 16px !important; }
  .npc-landing .section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}