:root{
      --color-primary:#0b5ed7;
      --color-primary-dark:#084298;
      --color-accent:#4dabf7;
      --color-bg:#f4f8ff;
      --color-surface:#ffffff;
      --color-text:#122033;
      --color-muted:#4b5b73;
      --color-border:#d7e3f6;
      --radius:14px;
      --shadow:0 10px 30px rgba(8,66,152,.12);
      --space-1:.5rem;
      --space-2:1rem;
      --space-3:1.5rem;
      --space-4:2rem;
      --space-5:3rem;
      --max: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(--color-text);
      background:linear-gradient(180deg,#f8fbff 0%, #eef5ff 48%, #f8fbff 100%);
      line-height:1.6;
    }

    .container{width:min(100% - 2rem,var(--max));margin-inline:auto}
    .btn{
      display:inline-block;
      text-decoration:none;
      border:none;
      cursor:pointer;
      font-weight:700;
      padding:.9rem 1.2rem;
      border-radius:10px;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn:focus-visible{outline:3px solid #91c4ff;outline-offset:2px}
    .btn-primary{
      background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
      color:#fff;
      box-shadow:0 8px 20px rgba(11,94,215,.28);
    }
    .btn-primary:hover{transform:translateY(-1px)}
    .btn-secondary{
      background:#e9f2ff;
      color:var(--color-primary-dark);
      border:1px solid #cce0ff;
    }

    header{
      position:sticky; top:0; z-index:30;
      background:rgba(255,255,255,.85);
      backdrop-filter: blur(8px);
      border-bottom:1px solid var(--color-border);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding:.8rem 0;
      gap:1rem;
    }
    .brand{font-weight:800; font-size:1.1rem; color:var(--color-primary-dark); text-decoration:none}
    .nav a{color:var(--color-muted); text-decoration:none; font-weight:600}
    .nav-links{display:flex; gap:1rem; align-items:center}
    .skip-link{
      position:absolute; left:-9999px; top:auto;
    }
    .skip-link:focus{
      left:1rem; top:1rem; z-index:100;
      background:#fff; padding:.5rem .75rem; border-radius:8px; border:1px solid var(--color-border);
    }

    .hero{
      position:relative;
      overflow:hidden;
      padding:var(--space-5) 0;
      isolation:isolate;
    }
    .hero::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(circle at 15% 20%, rgba(77,171,247,.25), transparent 35%),
        radial-gradient(circle at 85% 15%, rgba(11,94,215,.20), transparent 30%),
        linear-gradient(135deg,#eaf3ff 0%, #f7fbff 60%, #edf5ff 100%);
      z-index:-2;
    }
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background-image:linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px),
                       linear-gradient(180deg, rgba(255,255,255,.4) 1px, transparent 1px);
      background-size:32px 32px;
      opacity:.35;
      z-index:-1;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:var(--space-4);
      align-items:center;
    }
    .eyebrow{
      display:inline-block;
      background:#dcecff;
      color:#0a4ea9;
      border:1px solid #bdd8ff;
      padding:.3rem .65rem;
      border-radius:999px;
      font-weight:700;
      font-size:.85rem;
      margin-bottom:.8rem;
    }
    h1,h2,h3{line-height:1.2; margin:.2rem 0 .8rem}
    h1{font-size:clamp(1.8rem,3vw,3rem)}
    h2{font-size:clamp(1.4rem,2.4vw,2.1rem)}
    p{margin:.2rem 0 1rem}
    .lead{font-size:1.08rem; color:var(--color-muted)}
    .hero-actions{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem}
    .hero-card{
      background:var(--color-surface);
      border:1px solid var(--color-border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .hero-card img{
      width:100%; height:100%; min-height:280px; object-fit:cover; display:block;
    }

    section{padding:var(--space-5) 0}
    .section-title{max-width:760px}
    .cards{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:var(--space-3);
      margin-top:var(--space-3);
    }
    .card{
      background:var(--color-surface);
      border:1px solid var(--color-border);
      border-radius:var(--radius);
      padding:1.2rem;
      box-shadow:0 8px 24px rgba(18,32,51,.06);
    }
    .card h3{margin-top:0}
    .muted{color:var(--color-muted)}

    .trust{
      background:linear-gradient(180deg,#ffffff 0%, #f1f7ff 100%);
      border-block:1px solid var(--color-border);
    }
    .trust-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:var(--space-4);
      align-items:center;
    }
    .list{padding-left:1.2rem; margin:0}
    .list li{margin-bottom:.55rem}

    .service-area{
      position:relative;
    }
    .service-area .panel{
      background:
        linear-gradient(160deg, rgba(11,94,215,.06), rgba(77,171,247,.08)),
        #fff;
      border:1px solid var(--color-border);
      border-radius:var(--radius);
      padding:1.2rem;
    }

    .contact{
      background:linear-gradient(180deg,#f7fbff 0%, #ebf4ff 100%);
      border-top:1px solid var(--color-border);
    }
    .contact-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:var(--space-4);
      align-items:start;
    }
    form{
      background:#fff;
      border:1px solid var(--color-border);
      border-radius:var(--radius);
      padding:1.2rem;
      box-shadow:var(--shadow);
    }
    label{display:block; font-weight:600; margin:.65rem 0 .3rem}
    input, select, textarea{
      width:100%;
      padding:.75rem .8rem;
      border:1px solid #bfd4f3;
      border-radius:10px;
      font:inherit;
      color:var(--color-text);
      background:#fff;
    }
    textarea{min-height:110px; resize:vertical}
    .form-note{font-size:.92rem;color:var(--color-muted)}
    footer{
      padding:1.2rem 0 2rem;
      color:var(--color-muted);
      font-size:.94rem;
    }

    @media (max-width:900px){
      .hero-grid,.trust-grid,.contact-grid{grid-template-columns:1fr}
      .cards{grid-template-columns:1fr 1fr}
      .nav-links a:not(.btn){display:none}
    }
    @media (max-width:620px){
      .cards{grid-template-columns:1fr}
      .hero{padding:2.2rem 0}
    }