: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;
      }
    }
    .hero { 
      background:
        linear-gradient(105deg, rgba(7,56,79,.96), rgba(11,95,137,.76)),        radial-gradient(circle at 82% 18%, rgba(20,166,184,.55), transparent 35%),url(http://www.incefilterbag.com/wp-content/uploads/2026/09/banner-1.png) !important;
    }