:root{
      --primary:#0b5f89;
      --primary-dark:#07384f;
      --primary-deep:#052838;
      --accent:#14a6b8;
      --accent-soft:#8ff3ff;
      --orange:#f49b21;
      --light:#f4f8fb;
      --soft:#e9f4f8;
      --white:#ffffff;
      --text:#1f2d38;
      --muted:#5f6f7a;
      --border:#dbe7ef;
      --success:#168a75;
      --shadow:0 14px 34px rgba(7,56,79,.12);
      --shadow-lg:0 24px 60px rgba(7,56,79,.18);
    }
    

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:Arial,Helvetica,sans-serif;color:var(--text);line-height:1.68;background:#fff}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    .container{width:min(1200px,92%);margin:0 auto}
    .section{padding:82px 0}
    .section-light{background:var(--light)}
    .section-dark{background:var(--primary-deep);color:#fff}
    .hidden{display:none!important}
  /* Top information bar */
    .topbar{
      position:relative;
      z-index:1002;
      padding:8px 0;
      color:rgba(255,255,255,.86);
      background:var(--primary-deep);
      font-size:13px;
    }

    .topbar-inner{
      display:flex;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
    }

    /* Main header */
    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      overflow:visible;
      background:#fff;
      border-bottom:1px solid var(--border);
      box-shadow:0 8px 24px rgba(7,56,79,.06);
    }

    .site-nav{
      min-height:78px;
      position:relative;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:24px;
    }

    .site-logo{
      flex:0 0 auto;
      color:var(--primary-dark);
      font-size:30px;
      line-height:1;
      font-weight:900;
      letter-spacing:-1.5px;
    }

    .site-logo span{
      color:var(--accent);
    }

    .desktop-menu{
      display:flex;
      align-items:center;
      gap:25px;
      list-style:none;
      color:var(--primary-dark);
      font-size:15px;
      font-weight:800;
    }

    .desktop-menu>li{
      position:relative;
    }

    .desktop-menu>li>a{
      min-height:78px;
      display:flex;
      align-items:center;
      padding:0;
      color:var(--primary-dark);
    }

    .desktop-menu>li>a:hover,
    .desktop-menu>li>a:focus{
      color:var(--accent);
    }

    .desktop-products>a::after{
      content:"⌄";
      margin-left:6px;
      font-size:12px;
    }

    .desktop-mega{
      position:absolute;
      left:50%;
      top:calc(100% - 2px);
      width:min(1000px,90vw);
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      padding:24px;
      border:1px solid var(--border);
      border-radius:22px;
      background:#fff;
      box-shadow:var(--shadow);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:translateX(-50%) translateY(10px);
      transition:.2s ease;
    }

    .desktop-products:hover .desktop-mega,
    .desktop-products:focus-within .desktop-mega{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform:translateX(-50%) translateY(0);
    }

    .desktop-mega-column{
      padding:17px;
      border:1px solid var(--border);
      border-radius:16px;
      background:var(--light);
    }

    .desktop-mega-column h3,.desktop-mega-column h3 a{
      margin-bottom:9px !important;
      color:var(--primary-dark) !important;
      font-size:16px !important;
    }

    .desktop-mega-column a{
      display:block;
      padding:5px 0;
      color:var(--muted);
      font-size:13px;
    }

    .desktop-mega-column a:hover,
    .desktop-mega-column a:focus{
      color:var(--accent);
    }

    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .quote-button{
      display:inline-flex;
      justify-content:center;
      align-items:center;
      padding:12px 20px;
      border-radius:999px;
      color:#fff;
      background:var(--accent);
      font-weight:900;
      transition:.2s ease;
    }

    .quote-button:hover,
    .quote-button:focus{
      background:var(--primary);
    }

    .mobile-menu-button{
      width:46px;
      height:46px;
      display:none;
      place-items:center;
      flex:0 0 auto;
      padding:0;
      border:1px solid var(--border);
      border-radius:13px;
      color:var(--primary-dark);
      background:#fff;
      font-size:24px;
      line-height:1;
    }

    .mobile-menu-button:focus-visible,
    .mobile-products-button:focus-visible{
      outline:3px solid rgba(20,166,184,.3);
      outline-offset:2px;
    }

    /* Mobile menu uses a dark panel, not a white overlay */
    .mobile-menu{
      display:none;
    }

    .demo-area{
      min-height:900px;
      padding:90px 0;
      background:
        radial-gradient(circle at 82% 15%,rgba(20,166,184,.12),transparent 25%),
        linear-gradient(145deg,#f4f8fb,#fff);
    }

    .demo-card{
      max-width:780px;
      padding:36px;
      border:1px solid var(--border);
      border-radius:24px;
      background:#fff;
      box-shadow:var(--shadow);
    }

    .demo-card h1{
      margin-bottom:12px;
      color:var(--primary-dark);
      font-size:40px;
    }

    .demo-card p{
      color:var(--muted);
      line-height:1.72;
    }

    @media(max-width:960px){
      .site-header{
        z-index:5000;
        overflow:visible;
      }

      .site-nav{
        min-height:72px;
      }

      .desktop-menu,
      .quote-button{
        display:none;
      }

      .mobile-menu-button{
        display:grid;
        position:relative;
        z-index:5003;
        touch-action:manipulation;
        -webkit-tap-highlight-color:rgba(20,166,184,.18);
      }

      .mobile-menu{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        z-index:5002;
        width:100%;
        max-height:calc(100dvh - 72px);
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        padding:10px 16px 20px;
        color:#fff;
        background:
          radial-gradient(circle at 88% 8%,rgba(20,166,184,.25),transparent 28%),
          linear-gradient(145deg,var(--primary-deep),var(--primary-dark));
        border-top:1px solid rgba(255,255,255,.12);
        border-radius:0 0 20px 20px;
        box-shadow:0 24px 50px rgba(4,29,42,.38);
      }

      .mobile-menu.is-open{
        display:block;
      }

      .mobile-menu-list{
        display:grid;
        gap:0;
        list-style:none;
      }

      .mobile-menu-item{
        border-bottom:1px solid rgba(255,255,255,.13);
      }

      .mobile-menu-item:last-child{
        border-bottom:0;
      }

      .mobile-menu-link{
        width:100%;
        min-height:54px;
        display:flex;
        align-items:center;
        padding:14px 4px;
        color:#fff;
        font-size:15px;
        font-weight:850;
        line-height:1.25;
        touch-action:manipulation;
        -webkit-tap-highlight-color:rgba(143,243,255,.16);
      }

      .mobile-menu-link:hover,
      .mobile-menu-link:focus,
      .mobile-menu-link:active{
        color:var(--accent-soft);
        background:rgba(255,255,255,.05);
      }

      .mobile-products-row{
        display:grid;
        grid-template-columns:minmax(0,1fr) 46px;
        align-items:center;
      }

      .mobile-products-row .mobile-menu-link{
        grid-column:1;
        grid-row:1;
      }

      .mobile-products-button{
        grid-column:2;
        grid-row:1;
        width:40px;
        height:40px;
        display:grid;
        place-items:center;
        justify-self:end;
        padding:0;
        border:1px solid rgba(255,255,255,.2);
        border-radius:11px;
        color:#fff;
        background:rgba(255,255,255,.09);
        font-size:23px;
        line-height:1;
        font-weight:800;
        touch-action:manipulation;
        -webkit-tap-highlight-color:rgba(143,243,255,.18);
      }

      .mobile-products-button[aria-expanded="true"]{
        color:var(--primary-dark);
        border-color:var(--accent-soft);
        background:var(--accent-soft);
      }

      .mobile-products-panel{
        display:none;
        grid-column:1/-1;
        padding:4px 0 14px;
      }

      .mobile-products-panel.is-open{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
      }

      .mobile-products-group{
        padding:14px;
        border:1px solid rgba(255,255,255,.13);
        border-radius:14px;
        background:rgba(255,255,255,.06);
      }

      .mobile-products-group h3{
        margin-bottom:8px;
        color:var(--accent-soft);
        font-size:14px;
      }

      .mobile-products-group a{
        min-height:34px;
        display:flex;
        align-items:center;
        padding:6px 0;
        color:rgba(255,255,255,.76);
        font-size:12px;
        touch-action:manipulation;
      }

      .mobile-products-group a:hover,
      .mobile-products-group a:focus,
      .mobile-products-group a:active{
        color:#fff;
      }

      .mobile-quote{
        display:flex;
        justify-content:center;
        align-items:center;
        margin-top:14px;
        padding:13px 18px;
        border-radius:999px;
        color:var(--primary-dark);
        background:var(--accent-soft);
        font-weight:900;
        touch-action:manipulation;
      }
    }

    @media(max-width:620px){
      .topbar{
        font-size:11px;
      }

      .topbar-inner{
        gap:4px;
      }

      .site-logo{
        font-size:25px;
      }

      .mobile-products-panel.is-open{
        grid-template-columns:1fr;
      }

      .demo-card h1{
        font-size:32px;
      }
    }
    /* ================================
   Mobile Navigation
================================ */

/* Desktop default */
.mobile-menu-button {
    display: none;
}

.mobile-menu {
    display: none;
}


/* ================================
   Mobile <= 960px
================================ */
@media (max-width: 960px) {

    .site-header {
        position: sticky;
        top: 0;
        z-index: 9999;
        background: #fff;
    }

    .site-nav {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 70px;
    }

    /* hide desktop menu */
    .desktop-menu {
        display: none !important;
    }

    /* quote button can also hide on mobile */
    .nav-actions .quote-button {
        display: none;
    }

    .nav-actions {
        display: flex;
        align-items: center;
        margin-left: auto;
    }

    /* hamburger */
    .mobile-menu-button {
        display: flex !important;
        width: 44px;
        height: 44px;
        padding: 0;
        align-items: center;
        justify-content: center;

        border: 1px solid #dbe7ef;
        border-radius: 10px;

        background: #fff;
        color: #07384f;

        font-size: 27px;
        line-height: 1;

        cursor: pointer;
        position: relative;
        z-index: 10001;
    }

    /* menu closed */
    .mobile-menu {
        display: none;

        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        background: #fff;
        border-top: 1px solid #dbe7ef;
        border-bottom: 1px solid #dbe7ef;

        padding: 16px 4% 24px;

        box-shadow: 0 18px 35px rgba(7, 56, 79, 0.12);

        z-index: 10000;
    }

    /* menu opened */
    .mobile-menu.is-open {
        display: block !important;
    }

    .mobile-menu-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-menu-item {
        border-bottom: 1px solid #e8eef2;
    }

    .mobile-menu-link {
        display: block;
        width: 100%;
        padding: 14px 4px;

        color: #07384f;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
    }

    .mobile-products-row {
        position: relative;
    }

    .mobile-products-button {
        position: absolute;
        right: 0;
        top: 7px;

        width: 40px;
        height: 40px;

        border: 0;
        background: transparent;

        color: #0b5f89;
        font-size: 27px;
        cursor: pointer;
    }

    /* product submenu */
    .mobile-products-panel {
        display: none;
        padding: 4px 0 18px 15px;
    }

    .mobile-products-panel.is-open {
        display: block;
    }

    .mobile-products-group {
        margin-bottom: 18px;
    }

    .mobile-products-group h3 {
        margin: 0 0 7px;
        color: #07384f;
        font-size: 15px;
    }

    .mobile-products-group a {
        display: block;
        padding: 6px 0;

        color: #5f6f7a;
        font-size: 14px;
        text-decoration: none;
    }

    .mobile-quote {
        display: block;

        margin-top: 20px;
        padding: 13px 18px;

        border-radius: 999px;

        background: #14a6b8;
        color: #fff;

        text-align: center;
        font-weight: 800;
    }

    body.nav-open {
        overflow: hidden;
    }
}