:root{
      --bg:#ffffff; --soft:#f6f8fb; --text:#0f172a; --muted:#6b7280;
      --brand:#2563eb; --brand2:#10b981; --ring:0 0 0 2px rgba(37,99,235,.35);
      --radius:14px; --container:1160px; --shadow:0 10px 20px rgba(2,6,23,.06),0 2px 6px rgba(2,6,23,.04);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg)}
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}

    /* Layout containers & spacing */
    .container{max-width:var(--container);margin-inline:auto;padding-inline:24px}
    @media (max-width:1024px){.container{padding-inline:20px}}
    @media (max-width:768px){.container{padding-inline:16px}}
    section,header,footer{padding-left:16px;padding-right:16px}
    @media (min-width:768px){section,header,footer{padding-inline:20px}}
    @media (min-width:1024px){section,header,footer{padding-inline:24px}}
    section{padding:54px 0}
    .soft{background:var(--soft)}

    /* Utilities */
    .center{text-align:center}
    .muted{color:var(--muted)}
    .italic{font-style:italic}
    .mt-6{margin-top:6px}
    .mt-8{margin-top:8px}
    .mt-10{margin-top:10px}
    .blue-strong{color:#1d4ed8;font-weight:600}

    /* Buttons & chips */
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.8rem 1.1rem;border-radius:10px;border:1.5px solid transparent;background:var(--brand);color:#fff;font-weight:700;box-shadow:var(--shadow);transition:.18s ease}
    .btn:hover{background:#1e4fd2}
    .btn:active{transform:translateY(1px)}
    .btn[disabled]{opacity:.6;cursor:not-allowed}
    .btn-outline{background:transparent;color:var(--brand);border-color:var(--brand)}
    .btn-light{background:#eef4ff;color:#1e40af}
    .chip{display:inline-flex;gap:.35rem;align-items:center;background:#eaf2ff;color:#1e40af;padding:.35rem .6rem;border-radius:999px;font-size:.78rem;font-weight:600}

    /* Navbar */
    .navbar{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid #eef2f7}
    .nav-inner{display: flex;align-items: center;justify-content: space-between;padding: 10px 16px; /* add left-right breathing space */}
    .brand{display:flex;align-items:center;gap:.6rem;font-weight:800}
    .brand img{width:40px;height:40px;border-radius:8px}
    .nav-links{display:flex;gap:14px}
    .nav-cta{display:flex;gap:.5rem}
    @media (max-width:860px){.nav-links{display:none}.nav-cta .btn-outline{display:none}}

    /* Hero */
    .hero{background:linear-gradient(180deg,#f4f7ff,#fff)}
    .hero-grid{display:grid;grid-template-columns:1fr;gap:24px;padding:46px 0}
    .hero h1{font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.12;margin:0}
    .hero p{color:var(--muted);margin:12px 0 0;max-width:62ch}
    .hero-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:16px}
    .trustbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:14px;color:#1e40af}
    .hero-media{position:relative;display:none}
    .hero-media .banner{border-radius:16px;overflow:hidden;height:340px;box-shadow:var(--shadow)}
    .overlay-badge{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);padding:.5rem .7rem;border-radius:10px;border:1px solid #e5eaf3;font-weight:700;color:#065f46}
    @media (min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr}.hero-media{display:block}}

    /* Headings */
    .title{font-size:1.6rem;font-weight:800;margin:0 0 6px;text-align:center}
    .subtitle{color:var(--muted);margin:0 auto 22px;max-width:64ch;text-align:center}

    /* Cards & grids */
    .grid{display:grid;gap:16px}
    .g2{grid-template-columns:repeat(2,1fr)}
    .g3{grid-template-columns:repeat(3,1fr)}
    .g4{grid-template-columns:repeat(4,1fr)}
    @media (max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
    .card{background:#fff;border-radius:var(--radius);border:1px solid #eef2f7;box-shadow:var(--shadow);padding:20px 16px;transition:.18s ease}
    .card:hover{transform:translateY(-2px);box-shadow:0 16px 28px rgba(2,6,23,.08),0 4px 10px rgba(2,6,23,.05)}
    .card h3{margin:4px 0 6px;font-size:1rem}
    .avatar{width:86px;height:86px;border-radius:999px;object-fit:cover;margin:0 auto 10px;display:block}

    /* Steps */
    .steps{counter-reset:stp}
    .step::before{counter-increment:stp;content:counter(stp);display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-weight:800;margin-right:10px}

    /* FAQ */
    .faq-item{border-bottom:1px solid #e8edf4}
    .faq-btn{width:100%;text-align:left;background:none;border:0;padding:16px 0;font-weight:600;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
    .faq-panel{padding:0 0 14px;color:var(--muted);display:none}
    .faq-item.open .faq-panel{display:block}

    /* Form */
    .form{max-width:560px;margin:0 auto}
    .form-grid{display:grid;gap:12px}
    .form-note{margin-top:8px;font-size:.85rem}
    .input,.textarea,.select{
      width:100%;border:1px solid #dbe3ef;background:#fff;padding:12px 14px;border-radius:12px;outline:none;transition:border .15s,box-shadow .15s;font:inherit
    }
    .input:focus,.textarea:focus,.select:focus{border-color:var(--brand);box-shadow:var(--ring)}
    .textarea{min-height:120px;resize:vertical}

    /* Map */
    .map{width:100%;height:280px;border:0;border-radius:12px;box-shadow:var(--shadow)}

    /* Footer */
    footer{background:var(--soft);border-top:1px solid #eef2f7}

    /* FABs & sticky CTA */
    .fabs{position:fixed;right:16px;bottom:90px;display:flex;flex-direction:column;gap:12px;z-index:65}
    .fab{width:56px;height:56px;border-radius:999px;display:grid;place-items:center;color:#fff;font-weight:700;box-shadow:var(--shadow)}
    .fab-wa{background:#22c55e}
    .fab-call{background:var(--brand)}
    @media (min-width:640px){.fabs{display:none}}
    .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#0f172a;color:#fff;padding:10px;border-top:1px solid #111827}
    .sticky-cta .row{display:flex;gap:10px;align-items:center;justify-content:space-between}
    .sticky-cta .btn{flex:1}

    /* Toast */
    .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;background:rgba(17,24,39,.92);color:#fff;padding:.6rem .9rem;border-radius:10px;z-index:90;box-shadow:var(--shadow);font-size:.9rem;display:none}

    /* Thank You Modal */
    .modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;place-items:center;z-index:999;opacity:0;transition:opacity .3s ease}
    .modal.show{display:grid;opacity:1}
    .modal-box{background:#fff;max-width:400px;width:90%;padding:24px;border-radius:12px;text-align:center;animation:popin .35s ease;box-shadow:0 10px 20px rgba(0,0,0,.1)}
    .success-icon{font-size:42px;color:#10b981;margin-bottom:12px}
    @keyframes popin{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
    @media (min-width: 768px) {
  .nav-inner {
    padding: 12px 24px; /* bigger screens, more padding */
  }
}
@media (max-width:640px){
  .g3 { grid-template-columns:repeat(2,1fr) !important; }
}