:root{
      --blue-900:#0b2545;
      --blue-800:#123a68;
      --blue-700:#1f5f99;
      --blue-600:#2f80c2;
      --blue-500:#4ea2df;
      --blue-100:#eaf4fc;
      --cyan-100:#dff8ff;
      --white:#ffffff;
      --ink:#1c2430;
      --muted:#5b6676;
      --success:#0f9d7a;
      --radius-lg:18px;
      --radius-md:12px;
      --radius-sm:8px;
      --shadow-1:0 10px 30px rgba(10,30,60,.12);
      --shadow-2:0 6px 20px rgba(8,24,48,.16);
      --space-1:.5rem;
      --space-2:.75rem;
      --space-3:1rem;
      --space-4:1.5rem;
      --space-5:2rem;
      --space-6:3rem;
      --space-7:4.5rem;
      --container:1120px;
      --font: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family:var(--font);
      color:var(--ink);
      background:linear-gradient(180deg,#f7fbff 0%, #eef6ff 45%, #f8fcff 100%);
      line-height:1.6;
    }

    .container{width:min(100% - 2rem, var(--container)); margin-inline:auto;}
    .section{padding:var(--space-7) 0}
    .section-sm{padding:var(--space-6) 0}
    h1,h2,h3{line-height:1.2; margin:0 0 var(--space-3)}
    h1{font-size:clamp(1.9rem, 2.8vw, 3rem)}
    h2{font-size:clamp(1.5rem, 2.1vw, 2.2rem)}
    h3{font-size:1.15rem}
    p{margin:0 0 var(--space-3)}
    a{text-decoration:none; color:inherit}

    .topbar{
      position:sticky; top:0; z-index:10;
      backdrop-filter:saturate(160%) blur(8px);
      background:rgba(255,255,255,.82);
      border-bottom:1px solid rgba(18,58,104,.08);
    }
    .topbar-inner{
      display:flex; align-items:center; justify-content:space-between;
      min-height:74px;
    }
    .brand{font-weight:700; color:var(--blue-900); letter-spacing:.2px}
    .nav-actions{display:flex; gap:.8rem; align-items:center}

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:.85rem 1.2rem; border-radius:999px; border:1px solid transparent;
      font-weight:600; transition:.2s ease; cursor:pointer;
    }
    .btn-primary{
      background:linear-gradient(135deg,var(--blue-700),var(--blue-500));
      color:var(--white); box-shadow:var(--shadow-2);
    }
    .btn-primary:hover{transform:translateY(-1px); filter:brightness(1.03)}
    .btn-outline{
      border-color:rgba(31,95,153,.35); color:var(--blue-800); background:#fff;
    }

    .hero{
      position:relative;
      overflow:hidden;
      padding:var(--space-7) 0 var(--space-6);
      background:
        radial-gradient(900px 400px at 10% 0%, rgba(78,162,223,.20), transparent 60%),
        radial-gradient(700px 320px at 90% 10%, rgba(47,128,194,.22), transparent 62%);
    }
    .hero::before{
      content:"";
      position:absolute; inset:0;
      background-image:linear-gradient(135deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.22) 75%, transparent 75%, transparent);
      background-size:24px 24px;
      opacity:.08; pointer-events:none;
    }
    .hero-grid{
      position:relative;
      display:grid; gap:var(--space-5);
      grid-template-columns:1.15fr .95fr;
      align-items:center;
    }
    .hero-card{
      background:linear-gradient(160deg, #ffffff 0%, #f2f9ff 100%);
      border:1px solid rgba(31,95,153,.12);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-1);
      padding:var(--space-5);
    }
    .kicker{
      display:inline-block;
      font-weight:600; font-size:.88rem;
      color:var(--blue-800);
      background:var(--blue-100);
      padding:.35rem .7rem;
      border-radius:999px;
      margin-bottom:var(--space-3);
    }
    .hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:var(--space-4)}
    .micro{
      color:var(--muted); font-size:.95rem; margin-top:.6rem
    }
    .hero-image{
      border-radius:var(--radius-lg);
      overflow:hidden;
      box-shadow:var(--shadow-1);
      border:1px solid rgba(18,58,104,.12);
      background:#d9ecfb;
    }
    .hero-image img{width:100%; height:100%; object-fit:cover; display:block; min-height:320px}

    .cards{
      display:grid; gap:1rem;
      grid-template-columns:repeat(3, minmax(0, 1fr));
    }
    .card{
      background:#fff;
      border:1px solid rgba(18,58,104,.10);
      border-radius:var(--radius-md);
      padding:1.1rem;
      box-shadow:0 4px 14px rgba(10,30,60,.05);
    }
    .card h3{color:var(--blue-900)}
    .section-title{max-width:760px}
    .section-sub{color:var(--muted)}

    .contrast{
      background:linear-gradient(180deg, #f0f8ff 0%, #ffffff 100%);
      border-top:1px solid rgba(18,58,104,.08);
      border-bottom:1px solid rgba(18,58,104,.08);
    }

    .split{
      display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); align-items:start;
    }

    .service-area{
      background:linear-gradient(160deg,var(--blue-900),var(--blue-700));
      color:#eaf4ff;
      border-radius:var(--radius-lg);
      padding:var(--space-5);
      position:relative;
      overflow:hidden;
    }
    .service-area::after{
      content:"";
      position:absolute; right:-40px; top:-40px; width:160px; height:160px;
      border-radius:50%; background:rgba(255,255,255,.10);
    }

    .faq details{
      background:#fff; border:1px solid rgba(18,58,104,.12);
      border-radius:var(--radius-sm); padding:.9rem 1rem; margin-bottom:.75rem;
    }
    .faq summary{cursor:pointer; font-weight:600; color:var(--blue-900)}
    .faq p{margin:.7rem 0 0; color:#344052}

    .pricing{
      display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4);
    }
    .price-box{
      background:#fff; border:1px solid rgba(18,58,104,.14); border-radius:var(--radius-md);
      padding:var(--space-4);
    }
    .price{
      font-size:1.8rem; font-weight:800; color:var(--blue-800); margin-bottom:.4rem;
    }

    .trust{
      display:grid; gap:var(--space-4); grid-template-columns:1fr 1fr;
      align-items:center;
    }
    .media{
      border-radius:var(--radius-lg); overflow:hidden;
      border:1px solid rgba(18,58,104,.12); box-shadow:var(--shadow-1);
      min-height:260px;
    }
    .media img{width:100%; height:100%; object-fit:cover; display:block}

    .contact{
      background:linear-gradient(135deg, #ffffff 0%, #eef7ff 100%);
      border:1px solid rgba(18,58,104,.12);
      border-radius:var(--radius-lg);
      padding:var(--space-5);
      box-shadow:var(--shadow-1);
    }
    form{display:grid; gap:.8rem}
    input, select, textarea{
      width:100%; border:1px solid rgba(18,58,104,.22); border-radius:10px;
      padding:.82rem .9rem; font:inherit; background:#fff;
    }
    label{font-weight:600; font-size:.95rem; color:#233145}
    .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
    .footer{
      padding:2rem 0 2.2rem;
      color:#4a5568; font-size:.95rem;
    }

    @media (max-width: 960px){
      .hero-grid,.split,.trust,.pricing{grid-template-columns:1fr}
      .cards{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 620px){
      .cards,.grid-2{grid-template-columns:1fr}
      .topbar-inner{min-height:66px}
      .btn{padding:.78rem 1rem}
    }