:root{
      --bg: #f4fbff;
      --surface: #ffffff;
      --surface-alt: #eaf6ff;
      --text: #123047;
      --text-soft: #35586f;
      --primary: #0f6ea8;
      --primary-strong: #0a5a88;
      --accent: #3ac6d2;
      --accent-soft: #b8eef2;
      --border: #cde5f5;
      --ok: #0d8f72;
      --shadow: 0 12px 28px rgba(16, 58, 91, 0.12);
      --radius-sm: 12px;
      --radius-md: 18px;
      --radius-lg: 28px;
      --space-1: .5rem;
      --space-2: .75rem;
      --space-3: 1rem;
      --space-4: 1.5rem;
      --space-5: 2rem;
      --space-6: 3rem;
      --space-7: 4rem;
      --max: 1120px;
      --font-main: "Segoe UI", "Inter", "Nunito Sans", Roboto, Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body{
      font-family: var(--font-main);
      color: var(--text);
      background:
        radial-gradient(1000px 500px at 95% -10%, rgba(58,198,210,0.14), transparent 60%),
        radial-gradient(800px 420px at -10% 15%, rgba(15,110,168,0.14), transparent 60%),
        var(--bg);
      line-height: 1.6;
    }

    .container{
      width: min(var(--max), 92%);
      margin-inline: auto;
    }

    a{ color: inherit; text-decoration: none; }
    img{ max-width: 100%; display: block; border-radius: var(--radius-md); }

    .skip-link{
      position: absolute; left: -999px; top: 0;
      background: var(--primary); color: #fff; padding: .65rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
      z-index: 999;
    }
    .skip-link:focus{ left: 0; }

    header{
      position: sticky; top: 0; z-index: 50;
      backdrop-filter: blur(8px);
      background: rgba(244, 251, 255, 0.88);
      border-bottom: 1px solid var(--border);
    }
    .nav{
      display: flex; align-items: center; justify-content: space-between;
      gap: var(--space-3); padding: .8rem 0;
    }
    .brand{
      font-weight: 800; font-size: 1.1rem; letter-spacing: .2px;
      color: var(--primary-strong);
    }
    .nav-links{
      display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: .95rem;
      color: var(--text-soft);
    }

    .btn{
      display: inline-flex; align-items: center; justify-content: center;
      border: 0; cursor: pointer; font-weight: 700;
      padding: .82rem 1.2rem; border-radius: 999px;
      transition: .2s ease;
    }
    .btn-primary{
      background: linear-gradient(135deg, var(--primary), var(--accent));
      color: #fff; box-shadow: var(--shadow);
    }
    .btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.03); }
    .btn-secondary{
      background: #fff; color: var(--primary-strong); border: 1px solid var(--border);
    }

    .hero{
      position: relative;
      overflow: hidden;
      padding: var(--space-7) 0 var(--space-6);
    }
    .hero::before{
      content: "";
      position: absolute; inset: 0;
      background:
        linear-gradient(110deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.65) 38%, rgba(255,255,255,.15) 100%),
        url('https://images.unsplash.com/photo-1571902943202-507ec2618e8f?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
      z-index: -2;
    }
    .hero::after{
      content: "";
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(15,110,168,.08) 1px, transparent 1px);
      background-size: 16px 16px;
      z-index: -1;
    }

    .hero-grid{
      display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-5); align-items: center;
    }
    h1{
      font-size: clamp(1.8rem, 4vw, 3rem);
      line-height: 1.15; margin: 0 0 var(--space-3);
    }
    .lead{
      font-size: 1.08rem; color: var(--text-soft); max-width: 62ch;
      margin-bottom: var(--space-4);
    }
    .hero-cta{
      display: flex; flex-wrap: wrap; gap: var(--space-2);
      align-items: center;
    }
    .hero-card{
      background: rgba(255,255,255,.92);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: var(--space-4);
    }
    .hero-card h2{
      font-size: 1.15rem; margin-top: 0; margin-bottom: .5rem;
    }
    .checklist{
      list-style: none; padding: 0; margin: 0;
    }
    .checklist li{
      display: flex; gap: .55rem; align-items: flex-start;
      margin: .45rem 0; color: var(--text-soft);
    }
    .check{
      width: 1.15rem; height: 1.15rem; border-radius: 50%;
      background: var(--accent-soft); color: var(--ok);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: .85rem; margin-top: .15rem;
      flex: 0 0 auto;
    }

    main section{ padding: var(--space-6) 0; }
    .section-heading{
      margin-bottom: var(--space-4);
    }
    .section-heading h2{
      margin: 0 0 .35rem; font-size: clamp(1.35rem, 2.8vw, 2rem);
    }
    .section-heading p{
      margin: 0; color: var(--text-soft);
    }

    .about-wrap{
      background: linear-gradient(180deg, #fff, #f6fcff);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      box-shadow: var(--shadow);
    }

    .services-grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-3);
    }
    .service{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-4);
    }
    .service h3{ margin-top: 0; margin-bottom: .45rem; }

    .proof-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
      align-items: stretch;
    }
    .panel{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-4);
    }

    .gallery-grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-3);
    }
    .gallery-grid figure{
      margin: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: .5rem;
    }
    .gallery-grid figcaption{
      font-size: .9rem; color: var(--text-soft);
      padding: .5rem .3rem .2rem;
    }

    .pricing-card{
      max-width: 640px;
      background: linear-gradient(145deg, #ffffff 20%, #eef9ff 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      box-shadow: var(--shadow);
    }
    .price{
      font-size: 2rem; font-weight: 800; margin: .25rem 0;
      color: var(--primary-strong);
    }

    .faq{
      display: grid; gap: var(--space-2);
    }
    details{
      background: #fff; border: 1px solid var(--border);
      border-radius: var(--radius-sm); padding: .8rem 1rem;
    }
    summary{ cursor: pointer; font-weight: 700; }

    .cta{
      background:
        linear-gradient(140deg, rgba(15,110,168,.95), rgba(58,198,210,.9)),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.24), transparent 35%);
      color: #fff;
      border-radius: var(--radius-lg);
      padding: var(--space-6) var(--space-5);
      position: relative;
      overflow: hidden;
    }
    .cta h2{ margin-top: 0; color: #fff; }
    .cta p{ color: rgba(255,255,255,.94); }

    form{
      display: grid; gap: .8rem;
      margin-top: var(--space-3);
    }
    label{
      font-weight: 600; font-size: .95rem;
    }
    input, textarea{
      width: 100%;
      border: 1px solid #b8def1;
      border-radius: 12px;
      padding: .72rem .85rem;
      font: inherit;
    }
    textarea{ min-height: 110px; resize: vertical; }

    footer{
      padding: var(--space-5) 0;
      color: var(--text-soft);
      font-size: .94rem;
    }

    @media (max-width: 920px){
      .hero-grid, .services-grid, .proof-grid, .gallery-grid{
        grid-template-columns: 1fr;
      }
      .nav-links{ display: none; }
    }