:root{
      --ocean-900:#0b2e4f;
      --ocean-800:#124a78;
      --ocean-700:#1f6aa3;
      --ocean-500:#3ea1d8;
      --ocean-200:#d9f0fb;
      --ocean-100:#eef8fd;
      --ink-900:#0f1720;
      --ink-700:#334155;
      --ink-500:#5b6b7d;
      --white:#ffffff;
      --success:#0f766e;
      --radius-lg:18px;
      --radius-md:12px;
      --shadow-1:0 10px 25px rgba(11,46,79,.12);
      --shadow-2:0 18px 40px rgba(11,46,79,.18);
      --space-1:.5rem;
      --space-2:.75rem;
      --space-3:1rem;
      --space-4:1.5rem;
      --space-5:2rem;
      --space-6:3rem;
      --space-7:4rem;
      --max:1140px;
      --font-ui:Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family:var(--font-ui);
      color:var(--ink-900);
      line-height:1.6;
      background:
        radial-gradient(1200px 600px at 90% -10%, rgba(62,161,216,.18), transparent 60%),
        radial-gradient(900px 500px at 10% 0%, rgba(31,106,163,.12), transparent 60%),
        var(--white);
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block;height:auto}

    .container{width:min(100% - 2rem,var(--max));margin-inline:auto}
    .section{padding:var(--space-7) 0}
    .section-alt{
      background:
        linear-gradient(180deg, var(--ocean-100), #f8fcff);
      border-top:1px solid rgba(18,74,120,.08);
      border-bottom:1px solid rgba(18,74,120,.08);
    }

    header{
      position:sticky;top:0;z-index:20;
      backdrop-filter: blur(10px);
      background:rgba(255,255,255,.88);
      border-bottom:1px solid rgba(11,46,79,.08);
    }
    .nav{
      display:flex;align-items:center;justify-content:space-between;
      padding:.9rem 0;
      gap:1rem;
    }
    .brand{
      font-weight:800;letter-spacing:.2px;
      color:var(--ocean-900);
      display:flex;align-items:center;gap:.6rem;
    }
    .brand-dot{
      width:12px;height:12px;border-radius:50%;
      background:linear-gradient(135deg,var(--ocean-700),var(--ocean-500));
      box-shadow:0 0 0 6px rgba(62,161,216,.16);
    }
    .nav-links{
      display:flex;gap:1rem;flex-wrap:wrap;
      font-size:.95rem;color:var(--ink-700);
    }
    .btn{
      display:inline-flex;align-items:center;justify-content:center;
      gap:.5rem;
      border:none;border-radius:999px;
      padding:.75rem 1.15rem;
      font-weight:700;
      cursor:pointer;
      transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn:focus-visible{outline:3px solid rgba(31,106,163,.35);outline-offset:2px}
    .btn-primary{
      color:var(--white);
      background:linear-gradient(135deg,var(--ocean-700),var(--ocean-500));
      box-shadow:var(--shadow-1);
    }
    .btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
    .btn-ghost{
      color:var(--ocean-800);
      background:rgba(31,106,163,.08);
      border:1px solid rgba(31,106,163,.2);
    }

    .hero{
      position:relative;
      overflow:hidden;
      padding:var(--space-7) 0 var(--space-6);
    }
    .hero::before{
      content:"";
      position:absolute;inset:0;
      background:
        linear-gradient(130deg, rgba(11,46,79,.9), rgba(18,74,120,.72)),
        url('https://images.unsplash.com/photo-1558002038-1055e2e28ed1?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
      z-index:-2;
    }
    .hero::after{
      content:"";
      position:absolute;inset:0;
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 12px);
      z-index:-1;
      pointer-events:none;
    }
    .hero-grid{
      display:grid;gap:2rem;
      grid-template-columns:1.2fr .8fr;
      align-items:center;
    }
    .hero h1{
      margin:0 0 var(--space-3);
      color:var(--white);
      font-size:clamp(1.9rem, 3.4vw, 3rem);
      line-height:1.15;
      letter-spacing:-.02em;
    }
    .hero p{
      margin:0 0 var(--space-4);
      color:rgba(255,255,255,.92);
      max-width:55ch;
      font-size:1.05rem;
    }
    .hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}
    .hero-note{
      margin-top:var(--space-2);
      color:rgba(255,255,255,.85);
      font-size:.92rem;
    }

    .quote-card{
      background:rgba(255,255,255,.96);
      border-radius:var(--radius-lg);
      padding:1.2rem;
      box-shadow:var(--shadow-2);
      border:1px solid rgba(31,106,163,.18);
    }
    .quote-card h2{
      margin:.2rem 0 .6rem;
      font-size:1.25rem;color:var(--ocean-900);
    }
    .quote-card p{margin:0 0 1rem;color:var(--ink-700)}
    .mini-list{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
    .mini-list li{
      display:flex;gap:.55rem;align-items:flex-start;color:var(--ink-700);font-size:.95rem
    }
    .mini-list li::before{
      content:"✓";color:var(--success);font-weight:800;line-height:1.2
    }

    h2.section-title{
      margin:0 0 .6rem;
      font-size:clamp(1.5rem,2.5vw,2.1rem);
      color:var(--ocean-900);
      line-height:1.2;
      letter-spacing:-.01em;
    }
    .section-lead{margin:0 0 var(--space-5);color:var(--ink-700);max-width:70ch}

    .cards{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
    .card{
      background:var(--white);
      border:1px solid rgba(11,46,79,.08);
      border-radius:var(--radius-md);
      padding:1rem;
      box-shadow:0 8px 18px rgba(11,46,79,.06);
    }
    .card h3{margin:.1rem 0 .4rem;color:var(--ocean-900);font-size:1.08rem}
    .card p{margin:0;color:var(--ink-700)}
    .card .cta-inline{margin-top:.8rem;display:inline-block;color:var(--ocean-800);font-weight:700}

    .about-grid,.contact-grid{
      display:grid;gap:1.3rem;grid-template-columns:1fr 1fr;align-items:start;
    }

    .image-frame{
      border-radius:var(--radius-lg);
      overflow:hidden;
      border:1px solid rgba(11,46,79,.1);
      box-shadow:var(--shadow-1);
      background:var(--white);
    }

    .pricing-wrap{
      display:grid;gap:1rem;grid-template-columns:1.1fr .9fr;
      align-items:stretch;
    }
    .price-panel{
      background:linear-gradient(160deg,var(--ocean-900),var(--ocean-800));
      color:var(--white);
      border-radius:var(--radius-lg);
      padding:1.2rem;
      position:relative;
      overflow:hidden;
    }
    .price-panel::after{
      content:"";
      position:absolute;right:-30px;bottom:-30px;
      width:180px;height:180px;border-radius:50%;
      background:rgba(62,161,216,.25);
    }
    .price-tag{font-size:2rem;font-weight:800;line-height:1}
    .price-caption{opacity:.9;margin-top:.3rem}

    .service-area{
      background:var(--white);
      border:1px solid rgba(11,46,79,.08);
      border-radius:var(--radius-md);
      padding:1rem;
    }

    .gallery{
      display:grid;gap:.8rem;grid-template-columns:repeat(3,1fr);
    }
    .gallery figure{
      margin:0;border-radius:12px;overflow:hidden;border:1px solid rgba(11,46,79,.1);
      background:#fff;
    }
    .gallery figcaption{
      padding:.55rem .7rem;font-size:.9rem;color:var(--ink-700)
    }

    .contact-card{
      background:var(--white);
      border:1px solid rgba(11,46,79,.12);
      border-radius:var(--radius-lg);
      padding:1.2rem;
      box-shadow:var(--shadow-1);
    }
    .contact-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;color:var(--ink-700)}
    footer{
      padding:1.2rem 0 2rem;
      color:var(--ink-500);
      font-size:.92rem;
      border-top:1px solid rgba(11,46,79,.08);
    }

    @media (max-width:980px){
      .hero-grid,.about-grid,.pricing-wrap,.contact-grid{grid-template-columns:1fr}
      .cards{grid-template-columns:repeat(2,1fr)}
      .gallery{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:640px){
      .nav{align-items:flex-start;flex-direction:column}
      .cards,.gallery{grid-template-columns:1fr}
      .hero{padding-top:var(--space-6)}
      .btn{width:100%}
      .hero-actions .btn{width:auto}
    }