:root{
      --navy:#0A2540; /* primary */
      --orange:#F97316; /* accent */
      --charcoal:#333333;
      --light:#F4F4F4;
      --white:#FFFFFF;
      --maxw:1200px;
      --radius:14px;
      --shadow:0 8px 24px rgba(10,37,64,.08);
    }
    *,*::before,*::after{box-sizing:border-box}
    html,body{margin:0;padding:0;background:#fff;color:var(--charcoal)}
    body{font-family:"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; line-height:1.6}
    h1,h2,h3{font-family:"Montserrat", sans-serif;color:var(--navy);line-height:1.2;margin:0 0 .5rem}
    h1{font-weight:800}
    h2{font-weight:800}
    h3{font-weight:700}
    p{margin:.25rem 0 1rem}
    a{color:var(--navy);text-decoration:none}
    .container{max-width:var(--maxw);margin-inline:auto;padding-inline:1rem}
    .btn{display:inline-block;padding:.85rem 1.1rem;border-radius:12px;font-weight:700;border:2px solid transparent;transition:.2s ease;cursor:pointer}
    .btn-primary{background:var(--orange);color:#fff}
    .btn-primary:hover{filter:brightness(.95)}
    .btn-outline{background:transparent;color:#fff;border-color:#fff}
    .btn-outline:hover{background:#ffffff1a}
    /* Header */
    header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #eaeaea}
    .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
    .brand{display:flex;align-items:center;gap:.65rem}
    .brand__mark{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#fff;font-weight:800}
    .brand__name{font-family:"Montserrat";font-weight:800;color:var(--navy);letter-spacing:.2px}
    nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.25rem;align-items:center}
    nav a{font-weight:600;color:var(--navy)}
    nav a:hover{opacity:.8}
    .nav-cta{margin-left:.25rem}
    .hamburger{display:none;border:0;background:transparent;padding:.4rem}
    .hamburger svg{width:28px;height:28px}
    /* Mobile menu */
    .mobile-menu{display:none;border-top:1px solid #eaeaea;background:#fff}
    .mobile-menu a{display:block;padding:1rem 0;border-bottom:1px solid #eee}
    /* Hero */
    .hero{background:var(--navy);color:#fff;}
    .hero__wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;padding-block:3.25rem}
    .hero h1{color:#fff;font-size:clamp(1.9rem, 3vw + 1rem, 3.2rem);margin:0 0 .5rem}
    .hero p{color:#dbe3ec;font-size:1.05rem;max-width:52ch}
    .hero__ctas{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
    .device-illus{width:100%;max-width:520px;justify-self:end}
    /* Services */
    section{padding-block:3.25rem}
    .section-header{margin-bottom:1.25rem}
    .cards{display:grid;grid-template-columns:repeat(4, 1fr);gap:1rem}
    .card{background:#fff;border:1px solid #eee;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem}
    .card__icon{width:42px;height:42px;border-radius:12px;background:rgba(249,115,22,.12);display:grid;place-items:center;color:var(--orange);font-weight:900;margin-bottom:.5rem}
    .see-all{display:block;text-align:center;margin-top:1rem;color:var(--orange);font-weight:700}
    /* Why choose */
    .muted{background:var(--light)}
    .why{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem}
    .check{display:flex;gap:.6rem;align-items:flex-start;margin:.35rem 0}
    .check svg{margin-top:.15rem;min-width:20px}
    blockquote{background:#fff;border-left:6px solid var(--orange);padding:1.25rem;border-radius:12px;box-shadow:var(--shadow);font-style:italic}
    /* How it works */
    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
    .step{border:1px solid #eee;border-radius:var(--radius);padding:1.25rem;background:#fff;box-shadow:var(--shadow)}
    .step .badge{width:36px;height:36px;border-radius:10px;background:rgba(10,37,64,.08);display:grid;place-items:center;color:var(--navy);font-weight:800;margin-bottom:.5rem}
    .center{text-align:center}
    /* Final CTA */
    .cta-banner{background:var(--navy);color:#fff;border-radius:20px;padding:2rem;display:grid;place-items:center;text-align:center}
    .cta-banner h2{color:#fff;margin-bottom:.5rem}
    /* Footer */
    footer{background:#071a2d;color:#d2d8df;padding-block:2.25rem;margin-top:2.5rem}
    .footer-grid{display:grid;grid-template-columns:2fr 1.3fr 1.3fr;gap:1.25rem}
    footer h4{color:#fff;margin:.25rem 0 1rem;font-family:"Montserrat"}
    footer a{color:#d2d8df}
    footer a:hover{color:#fff}
    .copyright{margin-top:1.5rem;border-top:1px solid #1a2a3e;padding-top:1rem;font-size:.9rem}

    /* Responsive */
    @media (max-width: 980px){
      .cards{grid-template-columns:repeat(2,1fr)}
      .hero__wrap{grid-template-columns:1fr;gap:1.5rem}
      .device-illus{justify-self:center}
      .why{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 720px){
      nav ul{display:none}
      .hamburger{display:block}
      .mobile-menu{display:block}
      .steps{grid-template-columns:1fr}
      .cards{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
    }