/* ===== CRM Sutra — Global Styles ===== */
:root{
  --blue:#1d4ed8;        --blue-600:#2563eb;   --blue-700:#1d4ed8;
  --blue-dark:#0e2148;   --navy:#0f2147;       --navy-2:#132a52;
  --green:#16a34a;       --green-500:#22c55e;
  --amber:#f59e0b;       --yellow:#eab308;
  --ink:#0d0d0d;         --slate:#64748b;      --slate-700:#334155;
  --bg-soft:#eef4ff;
}

*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:#1e293b; background:#fff; margin:0;
}
h1,h2,h3,h4,h5,.font-display{ font-family:'Poppins','Inter',sans-serif; }

/* ---- Brand gradients ---- */
.grad-text{
  background:linear-gradient(90deg,#1d4ed8 0%,#3b82f6 25%,#16a34a 60%,#eab308 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-blue-green{
  background:linear-gradient(90deg,#1d4ed8,#16a34a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-blue-yellow{
  background:linear-gradient(90deg,#2563eb,#16a34a 50%,#eab308);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- Buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600;
  border-radius:.6rem; padding:.7rem 1.4rem; transition:.18s ease; cursor:pointer;
  border:none; text-decoration:none; font-size:.95rem; line-height:1; }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 8px 20px -6px rgba(29,78,216,.5); }
.btn-primary:hover{ background:#1741b6; transform:translateY(-2px); box-shadow:0 12px 26px -6px rgba(29,78,216,.6); }
.btn-ghost{ background:#fff; color:var(--blue); border:1.5px solid #dbe4f5; }
.btn-ghost:hover{ border-color:var(--blue); background:#f5f8ff; }
.btn-white{ background:#fff; color:var(--blue); }
.btn-white:hover{ background:#eef4ff; transform:translateY(-2px); }
.btn-lg{ padding:.95rem 1.8rem; font-size:1.02rem; border-radius:.7rem; }

/* ---- Cards ---- */
.card-soft{
  background:linear-gradient(165deg,#f4f8ff 0%,#eef3fb 100%);
  border:1px solid #e6edf8; border-radius:1rem; transition:.22s ease;
}
.card-soft:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -22px rgba(15,33,71,.35); border-color:#d4e0f5; }

.icon-tile{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  color:#fff; box-shadow:0 10px 22px -8px rgba(0,0,0,.35); }

/* gradient tiles */
.tile-blue{ background:linear-gradient(135deg,#3b82f6,#6366f1); }
.tile-green{ background:linear-gradient(135deg,#22c55e,#a3e635); }
.tile-orange{ background:linear-gradient(135deg,#f97316,#fbbf24); }
.tile-violet{ background:linear-gradient(135deg,#6366f1,#3b82f6); }
.tile-amber{ background:linear-gradient(135deg,#f59e0b,#f97316); }
.tile-teal{ background:linear-gradient(135deg,#14b8a6,#3b82f6); }

/* ---- Nav ---- */
.nav-link{ color:#334155; font-weight:500; text-decoration:none; position:relative; padding:.35rem 0; transition:.15s; }
.nav-link:hover,.nav-link.active{ color:var(--blue); }
.nav-link.active::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:2px; background:var(--blue); }

/* ---- Sections ---- */
.section{ padding:5rem 0; }
.eyebrow{ color:var(--blue); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; }

/* number counter color helpers */
.stat-blue{ color:var(--blue); } .stat-green{ color:var(--green); }
.stat-amber{ color:var(--amber); } .stat-violet{ color:#6366f1; }

/* dark band */
.band-dark{ background:linear-gradient(160deg,#0e2148 0%,#16356b 55%,#1d4ed8 130%); color:#fff; }

/* reveal animation — only hidden when JS is active (progressive enhancement) */
.reveal{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform:translateY(24px); transition:.7s cubic-bezier(.16,.84,.44,1); }
html.js .reveal.in{ opacity:1; transform:none; }

/* hero step row */
.step-row{ background:#fff; border:1px solid #e9eef7; border-radius:.85rem; transition:.18s; }
.step-row:hover{ box-shadow:0 14px 30px -16px rgba(15,33,71,.4); transform:translateX(4px); }

/* carousel */
.hero-slide{ display:none; }
.hero-slide.active{ display:block; animation:fade .6s ease; }
@keyframes fade{ from{opacity:.2} to{opacity:1} }
.dot{ width:11px; height:11px; border-radius:50%; background:#cbd5e1; cursor:pointer; transition:.2s; }
.dot.active{ background:var(--blue); width:13px; height:13px; }

/* pricing */
.price-card{ background:#fff; border-radius:1rem; transition:.22s; }
.price-pop{ box-shadow:0 30px 70px -30px rgba(0,0,0,.55); transform:scale(1.03); }
.tick{ color:var(--green); }

/* footer */
.footer{ background:#0e2148; color:#cbd5e1; }
.footer a{ color:#cbd5e1; text-decoration:none; transition:.15s; }
.footer a:hover{ color:#fff; }

/* mobile menu */
#mobileMenu{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
#mobileMenu.open{ max-height:520px; }

/* utility */
.container-x{ max-width:1180px; margin:0 auto; padding:0 1.25rem; }
.shadow-card{ box-shadow:0 18px 50px -24px rgba(15,33,71,.4); }
.chip{ display:inline-flex; align-items:center; gap:.4rem; background:#eef4ff; color:var(--blue);
  border-radius:999px; padding:.35rem .85rem; font-size:.82rem; font-weight:600; }

@media (max-width:768px){
  .section{ padding:3.25rem 0; }
}