*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
img{max-width:100%;height:auto;}

body{background:#f5f7fb;color:#2d2d2d;}
.container{max-width:1200px;margin:auto;padding:0 20px;}
.section{padding:60px 0;text-align:center;}
.bg-grey{background:#f5f7fb;}
.bg-white{background:#fff;}

/* HERO */
.hero{background:#f5f7fb;padding:70px 0;}
.hero-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.hero-text{flex:1;min-width:300px;text-align:left;}
.hero h1{font-size:34px;margin-bottom:15px;color:#1f3c88;}
.hero p{margin-bottom:20px;color:#6b7280;}

.btn{padding:12px 22px;border:none;border-radius:6px;cursor:pointer;}
.btn-primary{background:#1f3c88;color:#fff;}
.btn-outline{background:#ffb400;color:#000;margin-left:10px;}

.hero-img img{
    width:100%;
    max-width:520px;
    height:auto;
    object-fit:contain;
}

/* GRID */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-top:30px;}
.card{background:#fff;padding:25px;border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,0.05);}
.card img{width:64px;height:64px;margin-bottom:10px;}
.why .card img{width:48px;height:48px;}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px;margin-top:40px;}
.step{padding:20px;border-radius:12px;}
.step img{width:100%;max-width:140px;height:auto;}

/* PRICING */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;}
.price{background:#fff;padding:30px;border-radius:12px;border:1px solid #eee;}
.price h3{color:#1f3c88;}
.price p{color:#6b7280;}
.price.active{background:#1f3c88;color:#fff;}
.price.active h3,.price.active p{color:#fff;}
.price .amt{font-size:26px;font-weight:600;margin:10px 0;}

/* FAQ */
.faq{max-width:800px;margin:40px auto;text-align:left;}
.faq-item{background:#fff;margin-bottom:10px;border-radius:8px;}
.faq-question{padding:15px;cursor:pointer;display:flex;justify-content:space-between;font-weight:500;}
.faq-answer{display:none;padding:15px;border-top:1px solid #eee;color:#6b7280;}

/* BLOG */
.blog{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.blog img{width:100%;height:250px;object-fit:cover;border-radius:10px;}

/* FOOTER */
.footer{background:#1f3c88;color:#fff;text-align:center;padding:20px;}

/* MOBILE FIX */
@media (max-width:768px){
html,body{width:100%;overflow-x:hidden;}
.container{max-width:100%;width:100%;padding:0 16px;margin:0 auto;}
.hero-wrap{flex-direction:column;text-align:center;}
.hero-text{text-align:center;}
.hero-img{margin-top:20px;}
.grid,.steps,.pricing,.blog{grid-template-columns:1fr;}
.price.active{transform:scale(1);}
.faq{padding:0 10px;}
}



.trusted-grid{
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 25px;
    margin-top: 40px;
}

.trusted-card{
    background: #fff;
    padding: 25px;
    border-radius: 14px;
    text-align: left;
    border: 1px solid #eee;
    transition: 0.3s ease;
}

.trusted-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.icon-box{
    width: 50px;
    height: 50px;
    background: #1f3c88;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 22px;
    margin-bottom: 15px;
}

.trusted-card h4{
    color: #1f3c88;
    margin-bottom: 8px;
}

.trusted-card p{
    font-size: 14px;
    color: #6b7280;
}



/* Hide mobile image on desktop */
.mobile-steps-img {
  display: none;
  text-align: center;
  padding: 40px 20px;
}

.mobile-steps-img img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
}

/* MOBILE VIEW */
@media (max-width: 768px) {

  /* Hide steps UI */
  .steps-section {
    display: none;
  }

  /* Show image */
  .mobile-steps-img {
    display: block;
  }
}


 /* ── HOW IT WORKS ── */
  .how { background: var(--cream); padding: 10px; }
  .steps {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: 0; margin-top: 60px; position: relative;
  }
  .steps::before {
    content: ''; position: absolute;
    top: 40px; left: calc(12.5% + 24px); right: calc(12.5% + 24px);
    height: 2px;
    background: linear-gradient(90deg, var(--orange), var(--mist));
    z-index: 0;
  }
  .step { text-align: center; padding: 0 20px; position: relative; z-index: 1; }
  .step-num {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--navy); color: var(--orange);
    font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px; box-shadow: 0 8px 24px rgba(26,58,107,0.25);
    border: 2px solid rgba(244,120,32,0.3);
  }
  .step-title { font-weight: 600; font-size: 0.9rem; color: var(--navy-deep); margin-bottom: 6px; }
  .step-desc { font-size: 0.78rem; color: var(--slate); line-height: 1.6; font-weight: 300; }

  h2.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3vw, 2.7rem);
    font-weight: 900; line-height: 1.15; color: var(--navy-deep);
    margin-bottom: 16px;
  }
  .section-sub {
    font-size: 1rem; font-weight: 300; color: var(--slate);
    line-height: 1.7; max-width: 540px;
  }
.plan-features{
  list-style:none;
  padding:0;
  margin-top:15px;
  text-align:left;
}

.plan-features li{
  margin-bottom:10px;
  line-height:1.5;
  padding-left:22px;
  position:relative;
}

/* Right mark ✔ */
.plan-features li::before{
  content:"✔";
  position:absolute;
  left:0;
  color:#1f3c88;
  font-weight:bold;
}

.plan-features-text{
  white-space: pre-line;
  padding-left:20px;
  position:relative;
}

.plan-features-text::before{
  content:"✔ ";
  color:#1f3c88;
}