:root{
      --blue-900:#001e6d;
      --blue-800:#00369c;
      --blue-700:#0d47a1;
      --blue-600:#1e66e0;
      --blue-500:#2f7cf1;
      --blue-400:#5aa2ff;
      --accent-red:#FF4F5B; /* CTA red to match corporate vibe */
      --text:#0b1020;
      --muted:#5b6a8a;
      --bg:#f5f8ff;
      --white:#ffffff;
      --card:#ffffff;
      --shadow: 0 10px 30px rgba(7, 29, 73, .08);
      --radius: 18px;
      --radius-sm: 14px;
      --radius-lg: 26px;
      --container: 1200px;
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.55;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* Global layout */
    .container{max-width:var(--container);margin:0 auto;padding:0 20px}
    .section{padding:72px 0}
    .grid{display:grid;gap:24px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;
      padding:12px 20px;border-radius:999px;border:0;
      font-weight:700;text-decoration:none;cursor:pointer;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
      box-shadow:0 10px 20px rgba(255,75,75,.2);
    }
    .btn-primary{background:var(--accent-red);color:#fff}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(255,75,75,.35)}
    .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
    .btn-ghost:hover{background:rgba(255,255,255,.12)}
    .btn-link{color:var(--blue-700);font-weight:700;text-decoration:none}
    .btn-link:hover{text-decoration:underline}

    /* Top gradient band (matches corporate blue style) */
    .gradient{
      background:
        radial-gradient(1200px 500px at 85% -50%, rgba(255,255,255,.06) 0%, transparent 60%),
        radial-gradient(900px 400px at -10% -20%, rgba(255,255,255,.08) 0%, transparent 60%),
        linear-gradient(140deg, var(--blue-900), var(--blue-700) 50%, var(--blue-500));
      color:#fff;
    }

    /* Nav */
    header{
      position:sticky;top:0;z-index:50;
      backdrop-filter:saturate(1.1) blur(8px);
      background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
    }
    .nav{
      display:flex;align-items:center;justify-content:space-between;
      padding:16px 0;
    }
    .logo{
      display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.2px
    }
    .logo-mark{
      width:40px;height:40px;border-radius:50%;
      background:conic-gradient(from 180deg at 50% 50%, var(--blue-400), var(--blue-700), var(--blue-400));
      box-shadow:0 6px 16px rgba(0,0,0,.25) inset, 0 4px 10px rgba(0,0,0,.15);
      display:inline-block;
    }
    nav ul{display:flex;list-style:none;gap:24px;margin:0;padding:0}
    nav a{color:#eaf1ff;text-decoration:none;font-weight:600;opacity:.9}
    nav a:hover{opacity:1}
    .nav-cta{margin-left:20px}

    /* Hero */
    .hero{padding:108px 0 80px}
    .hero .container{display:grid;gap:40px;grid-template-columns:1.15fr .85fr;align-items:center}
    .eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#d6e6ff;font-weight:800;margin-bottom:8px}
    .h1{
      font-size:48px;line-height:1.05;margin:0 0 14px;font-weight:900;
      text-shadow:0 10px 30px rgba(0,0,0,.15);
    }
    .lead{font-size:18px;color:#e8f1ff;opacity:.92;margin:0 0 22px}
    .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
    .hero-card{
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.18);
      border-radius:var(--radius-lg);
      padding:18px;
      display:grid;place-items:center;
      aspect-ratio:16/11;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
    }
    .illustration{
      width:100%;max-width:520px;border-radius:14px;
      background:
        radial-gradient(800px 300px at 50% 0%, rgba(255,255,255,.25), transparent 70%),
        linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.2);
      padding:22px;
    }
    .illustration svg{width:100%;height:auto;display:block}

    /* White sections with cards */
    .surface{background:var(--white)}
    .section-title{font-size:34px;line-height:1.15;margin:0 0 12px;font-weight:900;letter-spacing:-.02em;    color: #08378c;}
    .section-sub{color:var(--muted);max-width:760px}

    .card{
      background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;
      border:1px solid #eaf0ff;
    }
    .icon{
      width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
      background:linear-gradient(135deg, var(--blue-500), var(--blue-700));color:#fff;
      box-shadow:0 6px 18px rgba(30,102,224,.25), inset 0 0 0 1px rgba(255,255,255,.2);
      font-weight:800
    }
    .card h3{margin:14px 0 8px;font-size:18px}
    .muted{color:var(--muted)}

    /* Grids */
    .about-grid{grid-template-columns:.9fr .5fr}
    .services-grid{grid-template-columns:repeat(3,1fr)}
    .portfolio-grid{grid-template-columns:repeat(4,1fr)}
    .testimonials-grid{grid-template-columns:repeat(3,1fr)}

    /* Portfolio card */
    .portfolio{
      display:flex;flex-direction:column;gap:14px
    }
    .thumb{
      aspect-ratio:16/10;border-radius:16px;
      background:linear-gradient(135deg,#d9e7ff,#edf4ff);
      border:1px solid #eaf0ff;
      display:grid;place-items:center;font-weight:800;color:var(--blue-700)
    }

    /* Reviews */
    .stars{color:#ffb300;font-size:18px;letter-spacing:1px}
    .reviewer{font-weight:700}
    .quote{color:var(--muted)}

    /* Partners row */
    .partners{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
    .partner{
      height:56px;border-radius:14px;border:1px solid #eaf0ff;background:#fff;
      display:grid;place-items:center;color:#7d8fb3;font-weight:700
    }

    /* CTA band */
    .cta{
      background:
        radial-gradient(700px 300px at 10% 0%, rgba(255,255,255,.15), transparent 60%),
        linear-gradient(135deg, var(--blue-700), var(--blue-500));
      color:#fff;border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow)
    }
    .cta h2{margin:0 0 8px;font-size:30px}
    .cta p{margin:0 0 16px;color:#eaf1ff}

    /* Footer */
    footer{
      background:
        linear-gradient(180deg, #0a1a4a, #071538);
      color:#cfe0ff;
    }
    .footer-top{padding:48px 0}
    .footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr 1fr;gap:22px}
    .footer-title{font-weight:800;color:#fff;margin-bottom:10px}
    .legal a, .contact a{color:#cfe0ff;text-decoration:none}
    .legal a:hover, .contact a:hover{text-decoration:underline}
    .copyright{
      padding:14px 0;border-top:1px solid rgba(255,255,255,.12);font-size:14px;text-align:center;color:#bcd2ff
    }

    /* Responsive */
    @media (max-width:1100px){
      .hero .container{grid-template-columns:1fr}
      .about-grid{grid-template-columns:1fr}
      .portfolio-grid{grid-template-columns:repeat(3,1fr)}
    }
    @media (max-width:820px){
      nav ul{display:none}
      .services-grid{grid-template-columns:repeat(2,1fr)}
      .portfolio-grid{grid-template-columns:repeat(2,1fr)}
      .testimonials-grid{grid-template-columns:1fr}
      .partners{grid-template-columns:repeat(3,1fr)}
      .footer-grid{grid-template-columns:1fr 1fr}
      .h1{font-size:40px}
    }
    @media (max-width:520px){
      .services-grid{grid-template-columns:1fr}
      .portfolio-grid{grid-template-columns:1fr}
      .partners{grid-template-columns:repeat(2,1fr)}
    }