/* === KMJ Softcorp minimal theme === */
:root{
  --kmj-primary:#2a4ad9;        /* Primary */
  --kmj-primary-dark:#1d38a8;   /* Hover */
  --kmj-accent:#00c2a8;         /* Accent */
  --kmj-bg:#f7f9fc;             /* Light BG */
  --kmj-text:#1b1f23;
  --kmj-muted:#6b7280;
  --kmj-card:#ffffff;
  --kmj-border:#e7eaf0;
}

/* Remove breadcrumb if it feels cluttered */
.breadcrumbs { display:none; }

/* Global spacing */
.kmj-hero, .kmj-grid, .kmj-why, .kmj-process, .kmj-testimonial, .kmj-cta {
  margin: 0 auto; padding: 3rem 1rem; max-width: 1100px;
}
.section-title { margin-bottom: .5rem; }
.section-sub { color: var(--kmj-muted); margin-bottom: 2rem; }

/* HERO */
.kmj-hero{
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color:#fff; border-radius:12px; margin-top: .5rem;
}
.kmj-hero__inner{ max-width: 900px; margin: 0 auto; text-align:center; }
.kmj-hero h1{ font-size:2.2rem; margin:0 0 .5rem; }
.kmj-hero .lead{ font-size:1.1rem; line-height:1.7; opacity:.95; }
.cta-wrap{ margin-top:1.25rem; display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

/* Buttons */
.btn{ display:inline-block; padding:.75rem 1.15rem; border-radius:8px; text-decoration:none; font-weight:600; border:1px solid transparent; }
.btn-primary{ background:var(--kmj-accent); color:#041b17; }
.btn-primary:hover{ background:#05ac97; }
.btn-outline{ background:#ffffff; color:var(--kmj-primary-dark); border-color:#dfe5ff; }
.btn-outline:hover{ border-color:var(--kmj-primary-dark); color:#0d2e9a; }

/* Trust strip */
.kmj-strip{ padding: .75rem 0; }
.kmj-strip__items{ display:flex; gap:1.25rem; list-style:none; margin:0; padding:0; flex-wrap:wrap; justify-content:center; color:var(--kmj-muted); }

/* Cards grid */
.kmj-grid{ background: var(--kmj-bg); border-radius:12px; }
.cards{ display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; }
@media (max-width: 1024px){ .cards{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .cards{ grid-template-columns: 1fr; } }

.card{
  background:var(--kmj-card); border:1px solid var(--kmj-border); border-radius:12px;
  padding:1.1rem; transition: transform .2s ease, box-shadow .2s ease;
}
.card h3{ margin:.25rem 0 .5rem; }
.card p{ color:var(--kmj-muted); }
.card:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.card-link{ display:inline-block; margin-top:.5rem; color:var(--kmj-primary); text-decoration:none; }
.card-link:hover{ text-decoration:underline; }

/* Lists */
.tick-list{ padding-left:0; list-style:none; }
.tick-list li{ position:relative; padding-left:1.6rem; margin:.5rem 0; }
.tick-list li::before{
  content:"✔"; position:absolute; left:0; top:0; color:var(--kmj-accent); font-weight:700;
}

/* Steps */
.steps{ counter-reset: step; list-style:none; padding-left:0; }
.steps li{ position:relative; padding-left:2.2rem; margin:.6rem 0; }
.steps li::before{
  counter-increment: step; content: counter(step) ".";
  position:absolute; left:0; top:0; width:1.6rem; height:1.6rem; line-height:1.6rem; text-align:center;
  background:var(--kmj-primary); color:#fff; border-radius:6px; font-weight:700;
}

/* Testimonial */
.kmj-testimonial blockquote{
  margin:0; padding:1.25rem 1.25rem 1rem; border-left:4px solid var(--kmj-accent);
  background:#fff; border-radius:8px; color:var(--kmj-text);
}
.kmj-testimonial cite{ display:block; margin-top:.5rem; color:var(--kmj-muted); font-style:normal; }

/* CTA */
.kmj-cta{ text-align:center; background:#fff; border:1px solid var(--kmj-border); border-radius:12px; }
.kmj-cta h2{ margin-bottom:.5rem; }
.kmj-cta p{ color:var(--kmj-muted); margin-bottom:1rem; }

/* Tiny note */
.tiny-note{ color:var(--kmj-muted); font-size:.9rem; text-align:center; margin-top: .5rem; }


/* 3-up helper (reuses .card look) */
.cards.three-up{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width: 900px){ .cards.three-up{ grid-template-columns:repeat(2,1fr);} }
@media (max-width: 600px){ .cards.three-up{ grid-template-columns:1fr; } }

/* Two‑column section */
.about-two{ display:grid; grid-template-columns: 1.3fr .7fr; gap:1rem; align-items:start; }
@media (max-width: 900px){ .about-two{ grid-template-columns:1fr; } }
.about-box{
  background:#fff; border:1px solid var(--kmj-border); border-radius:12px;
  padding:1rem;
}
.mini-list{ list-style:none; margin:0; padding:0; }
.mini-list li{ margin:.35rem 0; color:var(--kmj-text); }

/* Compact timeline */
.timeline{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-top:.5rem;
}
@media (max-width: 900px){ .timeline{ grid-template-columns:repeat(2,1fr);} }
@media (max-width: 540px){ .timeline{ grid-template-columns:1fr; } }
.tl-item{
  position:relative; background:#fff; border:1px solid var(--kmj-border); border-radius:10px; padding: .9rem .9rem .9rem 3rem;
}
.tl-item span{
  position:absolute; left:.8rem; top:.8rem; width:1.7rem; height:1.7rem; line-height:1.7rem; text-align:center;
  background:var(--kmj-primary); color:#fff; border-radius:6px; font-weight:700;
}

/* === How we work : step cards style === */
.steps-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  margin-top:1rem;
}
@media (max-width: 1024px){ .steps-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .steps-grid{ grid-template-columns:1fr; } }

.step-card{
  position:relative; background:#fff; border:1px solid var(--kmj-border);
  border-radius:12px; padding:1.1rem 1rem 1rem 1rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.step-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.06); }
.step-card h3{ margin:.25rem 0 .35rem; }

.step-num{
  width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--kmj-primary); color:#fff; font-weight:700;
  position:absolute; top:-12px; left:-12px; box-shadow:0 6px 12px rgba(0,0,0,.12);
}

/* Optional: subtle connector line on wide screens */
@media (min-width: 1025px){
  .steps-grid{ counter-reset: step; }
  .steps-grid .step-card::after{
    content:""; position:absolute; top:20px; right:-.5rem; width:1rem; height:2px;
    background:linear-gradient(90deg, var(--kmj-primary), rgba(0,0,0,0));
  }
  .steps-grid .step-card:nth-child(4)::after{ content:none; }
}

/* === Premium About Us: add-only patch === */

/* Section rhythm + alt bg */
.kmj-section{ margin: 2.25rem auto; max-width:1100px; padding:0 1rem; }
.kmj-section--alt{ background: var(--kmj-bg); border-radius:12px; padding:2rem 1rem; }

/* Hero with soft pattern overlay */
.kmj-hero--pattern{
  background:
    radial-gradient(1200px 400px at 50% -20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, #1e3c72, #2a5298);
}

/* Soft glow card */
.glow{ box-shadow: 0 12px 30px rgba(42,74,217,.12); }

/* Emoji list alignment (used in At a glance) */
.emoji-list { list-style:none; padding:0; margin:0; }
.emoji-list li { display:flex; align-items:center; gap:.5rem; margin:.35rem 0; }
.emoji-list li strong { font-weight:600; }

/* Stat chips (color variants) */
.stat-chips{
  display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center;
  margin:1rem auto 2rem; max-width:1100px;
}
.stat-chips .chip{
  display:flex; align-items:center; gap:.5rem;
  border-radius:999px; padding:.6rem 1rem; font-weight:600;
  border:none; color:#0d1b2a; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.stat-chips .chip .chip-icon{ font-weight:normal; }
.chip--blue{ background:#e8f0ff; }
.chip--green{ background:#dff7ef; }
.chip--purple{ background:#eee8ff; }

/* Steps: icon variant (builds on your existing .steps-grid & .step-card) */
.steps-grid--icons .step-card{ padding-top:1.6rem; }
.step-ico{
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(42,74,217,.12); margin-bottom:.4rem; font-size:1.1rem;
}
.steps-grid--icons .step-card:hover .step-ico{
  background: rgba(42,74,217,.18);
}

/* Trust badges row */
.trust-badges{
  display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center;
  margin:1.5rem auto 2.5rem; max-width:1100px;
}
.trust-badges .badge{
  padding:.45rem .7rem; border:1px dashed var(--kmj-primary);
  border-radius:8px; background:#fff; color:var(--kmj-primary);
  font-weight:600; font-size:.95rem;
}

/* Ensure alt section keeps cards white (when used) */
.kmj-section--alt .cards .card{ background:#fff; }