:root{
      --bg:#f3f8ff; --ink:#0b1220; --muted:#5a6473; --brand:#2d7eff;
      --card:#ffffff; --border:#e1ebfb; --shadow:0 10px 30px rgba(45,126,255,.10);
      --accent:#0ea5a4;
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    body{
      font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
      color:var(--ink); background:var(--bg);
    }
    img{max-width:100%;height:auto;display:block}
    a{color:var(--brand);text-decoration:none}

    .wrap{max-width:1160px;margin:0 auto;padding:clamp(16px,2.4vw,28px)}
    .breadcrumbs{font-size:13px;color:var(--muted);margin:8px 0 12px}
    .breadcrumbs a{color:var(--muted)}

    /* HERO */
    .hero{
      display:grid; gap:clamp(16px,2.2vw,28px);
      grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
      align-items:center;
    }
    @media (max-width:960px){ .hero{grid-template-columns:1fr} }

    .pre{
      display:inline-block;background:#eaf2ff;color:#0a3ea8;border-radius:999px;
      padding:6px 12px;font-weight:700;font-size:13px
    }
    h1.title{
      font-size:clamp(28px,3.2vw,42px); line-height:1.12; margin:10px 0; color:#0d2b6b
    }
    .subtitle{color:var(--muted);margin:8px 0 14px}
    .pills{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
    .pill{background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:13px}
    .hero img{border-radius:18px;border:1px solid var(--border);box-shadow:var(--shadow)}
    .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
    .btn{border:0;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer;display:inline-block}
    .btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)}
    .btn-outline{background:#fff;border:2px solid var(--brand);color:var(--brand)}

    /* KPI */
    .kpis{
      display:grid; gap:14px; margin-top:16px;
      grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    }
    .kpi{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center;box-shadow:var(--shadow)}
    .kpi b{font-size:18px;color:#0d2b6b}

    /* Grid and cards */
    h2{font-size:clamp(22px,2.2vw,30px);margin:0 0 14px;color:#0d2b6b}
    h3{font-size:clamp(18px,1.8vw,20px);margin:0 0 10px}
    .grid{
      display:grid; gap:clamp(16px,2.2vw,26px); margin:clamp(20px,3vw,34px) 0;
      grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
    }
    .card{
      background:#fff;border:1px solid var(--border);border-radius:18px;
      padding:clamp(16px,2vw,22px); box-shadow:var(--shadow)
    }
    ul{margin:0;padding-left:18px} ul li{margin:8px 0}

    /* HOW IT WORKS stripe */
    .stripe{
      background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
      border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);
      padding:clamp(16px,2vw,22px); margin:clamp(20px,3vw,34px) 0;
    }
    .steps{display:grid;gap:12px}
    .step{display:flex;gap:14px}
    .num{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:#eaf2ff;color:#0d2b6b;font-weight:800}

    /* BEFORE / AFTER – redesigned & responsive */
    .ba-section{
      background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);
      padding:clamp(16px,2vw,26px); margin:clamp(20px,3vw,40px) 0
    }
    .ba-gallery{
      display:grid; gap:clamp(12px,1.8vw,20px);
      grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
    }
    .ba-card{
      background:#f9fbff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);
      padding:10px; position:relative; overflow:hidden; text-align:center
    }
    .ba-imgwrap{position:relative}
    .ba-badge{
      position:absolute; top:10px; left:10px; z-index:2;
      background:rgba(13,43,107,.92); color:#fff; font-weight:800; font-size:12px;
      padding:6px 10px; border-radius:999px; letter-spacing:.2px
    }
    .ba-card img{border-radius:12px;border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.08)}
    .ba-label{font-weight:800;color:var(--brand);margin:10px 0 4px}
    .ba-desc{font-size:14px;color:var(--muted)}
    .notice{font-size:13px;color:var(--muted);margin-top:12px;text-align:center}

    /* CTA */
    .cta-block{text-align:center;margin:clamp(28px,4vw,44px) 0}
    .cta-block p{color:var(--muted)}

    footer{margin:40px 0 18px;text-align:center;color:var(--muted);font-size:14px}