.heading{text-align:center;max-width:1100px;margin:0 auto 60px;}
  .heading h1{font-size:44px;font-weight:800;color:#0b1b3b;margin-bottom:18px;}
  .heading p{font-size:16px;color:#3a4a6b;line-height:1.6;max-width:820px;margin:0 auto;}

  .cards{
    display:flex;justify-content:center;align-items:stretch;gap:24px;
    max-width:82%;margin:0 auto;
  }
  .card{
    position:relative;flex:1 1 0;height:380px;
    background:#fff;border-radius:18px;
    box-shadow:0 10px 40px rgba(15,38,90,.08);
    overflow:hidden;cursor:pointer;
    transition:flex-grow 1.2s cubic-bezier(.7,.1,.2,1);
    padding:38px 34px;
  }
  .cards:hover .card{flex-grow:.6;}
  .cards .card:hover{flex-grow:2.4;}

  /* color themes */
  .card.blue   {--c:#2f6bff;--c-soft:#e8efff;}
  .card.orange {--c:#f08a2a;--c-soft:#fdecd8;}
  .card.indigo {--c:#3b6bd6;--c-soft:#e6eeff;}

.icon {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s ease;
}
  .icon svg{width:30px;height:30px;}

  .num{
    color:var(--c);font-weight:700;font-size:18px;
    margin-top:28px;display:flex;align-items:center;gap:10px;
  }
  .num::after{content:"";display:block;width:28px;height:2px;background:var(--c);}

  .title{
    color:var(--c);font-size:18px;font-weight:700;margin-top:10px;
  }
.desc {
    color: #3a4a6b;
    font-size: 13px;
    line-height: 1.65;
    margin-top: 14px;
    max-width: 100%;
}

  /* bottom bg wave / image */
  .bg-wave{
    position:absolute;left:0;right:0;bottom:0;height:200px;
    background-size:cover;background-position:center;
    pointer-events:none;
    transition:all .6s ease;
    opacity:.9;
  }
  .card.blue .bg-wave{
    background-image:
      radial-gradient(ellipse at 20% 80%, rgba(47,107,255,.18), transparent 60%),
      radial-gradient(ellipse at 80% 90%, rgba(47,107,255,.22), transparent 60%);
  }
  .card.orange .bg-wave{
    background-image:
      radial-gradient(ellipse at 20% 80%, rgba(240,138,42,.22), transparent 60%),
      radial-gradient(ellipse at 80% 90%, rgba(240,138,42,.25), transparent 60%);
  }
  .card.indigo .bg-wave{
    background-image:
      radial-gradient(ellipse at 20% 80%, rgba(59,107,214,.18), transparent 60%),
      radial-gradient(ellipse at 80% 90%, rgba(59,107,214,.22), transparent 60%);
  }

  /* layout: compact vs expanded */
  .compact{
    display:flex;flex-direction:column;
    transition:opacity .7s ease, transform 1s ease;
  }
  .expanded{
    position:absolute;inset:38px 34px;
    display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;
    gap:18px 30px;
    opacity:0;pointer-events:none;
    transform:translateY(15px);
    transition:opacity .8s ease .35s, transform 1s ease .35s;
  }
  .card:hover .compact{opacity:0;transform:translateX(-20px);}
  .card:hover .expanded{opacity:1;pointer-events:auto;transform:translateY(0);}

  .expanded .left-top{display:flex;align-items:flex-start;}
  .expanded .right-top{}
  .expanded .right-top .num{margin-top:6px;}
  .expanded .right-top .title{font-size:16px;}
  .expanded .desc {
    font-size: 11px;
}
.expanded
.checklist {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 10px;
    margin-top: -18px;
}
.expanded
.checklist li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0b1b3b;
    font-size: 12px;
    font-weight: 500;
}
  .expanded .right-top .desc{max-width:none;}

  .checklist{align-self:end;display:flex;flex-direction:column;gap:14px;padding-bottom:10px;}
  .checklist li{
    list-style:none;display:flex;align-items:center;gap:12px;
    color:#0b1b3b;font-size:15px;font-weight:500;
  }
  .check{
    width:22px;height:22px;border-radius:50%;background:var(--c);
    display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
  }
  .check svg{width:12px;height:12px;}

  .illus{
    align-self:end;justify-self:end;width:100%;height:170px;
    background-size:contain;background-repeat:no-repeat;background-position:right bottom;
    opacity:.85;
  }
  .card.blue   .illus{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'><g fill='none' stroke='%232f6bff' stroke-width='2' opacity='.7'><circle cx='120' cy='80' r='42'/><path d='M120 50 v60 M90 80 h60'/><path d='M100 60 l40 40' stroke-dasharray='3 4'/></g></svg>");}
  .card.orange .illus{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'><g fill='none' stroke='%23f08a2a' stroke-width='2' opacity='.7'><path d='M100 130 C100 90 60 80 60 50 M100 130 C100 90 140 80 140 50'/><circle cx='100' cy='40' r='14'/></g></svg>");}
  .card.indigo .illus{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'><g fill='none' stroke='%233b6bd6' stroke-width='2' opacity='.7'><circle cx='70' cy='90' r='14'/><circle cx='110' cy='80' r='16'/><circle cx='150' cy='95' r='14'/><path d='M55 130 q15 -20 30 -20 M95 130 q15 -25 30 -25 M135 130 q15 -20 30 -20'/></g></svg>");}

  @media (max-width:900px){
    .cards{flex-direction:column; max-width:100%; padding: 0 5%;}
    .card{height:auto;min-height:260px; flex: none; width: 100%;}
    .cards .card:hover{flex-grow:1;}
    /* On mobile show expanded state by default */
    .card .compact{opacity:1;transform:none;}
    .card .expanded{opacity:0;pointer-events:none;}
    .card:hover .compact{opacity:0;transform:translateX(-20px);}
    .card:hover .expanded{opacity:1;pointer-events:auto;transform:translateY(0);}
  }

  @media (max-width: 480px) {
    .card { padding: 24px 20px; min-height: 220px; }
    .heading h1 { font-size: 26px; }
    .heading p { font-size: 14px; }
    .cards { gap: 14px; }
  }

.card1 {
    position: relative;
    left: -36px;
    top: -56px;
}
.cards .card:hover .card1{
  display: none;
}