:root{
    --navy-950:#050B18;
    --navy-900:#0A1A3D;
    --navy-800:#12285C;
    --navy-700:#1B3670;
    --orange-500:#FF5A1F;
    --orange-600:#E14313;
    --off-white:#F5F7FA;
    --slate-300:#B7C1D6;
    --slate-500:#8291AC;
    --line:rgba(255,255,255,0.14);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;scroll-padding-top:90px;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--navy-950);
    color:var(--off-white);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,.display{
    font-family:'Space Grotesk',sans-serif;
  }
  a{text-decoration:none;color:inherit;}
  img{display:block;max-width:100%;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;}

  /* ===== NAVBAR ===== */
  .navbar{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px clamp(16px,4vw,64px);
    transition:background .4s ease, padding .4s ease, box-shadow .4s ease, border-color .4s ease;
    border-bottom:1px solid transparent;
    height:75px;
  }
  .navbar.scrolled{
    background:rgba(5,11,24,0.95);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    padding:10px clamp(16px,4vw,64px);
    border-bottom:1px solid var(--line);
    box-shadow:0 8px 30px rgba(0,0,0,0.25);
    height:75px;
  }
  .nav-logo{
    display:flex;
    align-items:center;
    gap:8px;
    height:100%;
  }
  .nav-logo-icon{
    height:42px;
    width:auto;
    display:block;
    object-fit:contain;
    flex-shrink:0;
    filter:drop-shadow(0 0 2px rgba(245,247,250,0.85)) drop-shadow(0 0 6px rgba(245,247,250,0.35));
    transition:height .4s ease;
  }
  .navbar.scrolled .nav-logo-icon{ height:38px; }
  .nav-logo-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
    line-height:1;
    min-width:0;
  }
  .nav-logo-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:15px;
    letter-spacing:0.4px;
    color:#FFFFFF;
    text-shadow:0 1px 4px rgba(0,0,0,0.45);
    white-space:nowrap;
    transition:font-size .4s ease;
  }
  .navbar.scrolled .nav-logo-title{ font-size:13.5px; }
  .nav-logo-sub{
    display:block;
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:6.5px;
    letter-spacing:0.6px;
    text-transform:uppercase;
    color:rgba(245,247,250,0.72);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:74px;
    transition:font-size .4s ease, max-width .4s ease;
  }
  .navbar.scrolled .nav-logo-sub{ font-size:6px; max-width:66px; }

  .nav-links{
    display:flex;
    align-items:center;
    gap:40px;
    list-style:none;
  }
  .nav-links a{
    font-size:14.5px;
    font-weight:500;
    letter-spacing:.2px;
    color:var(--off-white);
    position:relative;
    padding-bottom:4px;
    opacity:.92;
    transition:opacity .25s ease;
  }
  .nav-links a::after{
    content:"";
    position:absolute;
    left:0;bottom:0;
    width:0;height:1.5px;
    background:var(--orange-500);
    transition:width .25s ease;
  }
  .nav-links a:hover{opacity:1;}
  .nav-links a:hover::after{width:100%;}

  .nav-cta{
    display:flex;
    align-items:center;
    gap:24px;
  }
  .btn-quote{
    background:var(--orange-500);
    color:#fff;
    font-size:14px;
    font-weight:600;
    padding:10px 22px;
    border-radius:3px;
    letter-spacing:.2px;
    transition:background .25s ease, transform .25s ease;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .btn-quote:hover{background:var(--orange-600);transform:translateY(-1px);}

  .nav-toggle{
    display:none;
    width:26px;height:20px;
    position:relative;
    flex-direction:column;
    justify-content:space-between;
  }
  .nav-toggle span{
    display:block;height:2px;width:100%;
    background:var(--off-white);
    border-radius:2px;
    transition:transform .3s ease, opacity .3s ease;
  }

  
/* ===== RESPONSIVE NAVBAR ===== */
@media (max-width:860px){
  .nav-logo{gap:6px;}
  .nav-logo-icon{height:34px;}
  .navbar.scrolled .nav-logo-icon{height:32px;}
  .nav-logo-title{font-size:14px;}
  .navbar.scrolled .nav-logo-title{font-size:13px;}
  .nav-logo-sub{display:none;}
  .nav-links{
    position:fixed;top:0;right:0;height:100vh;width:min(320px,78vw);
    background:var(--navy-950);flex-direction:column;align-items:flex-start;
    justify-content:center;gap:28px;padding:40px;transform:translateX(100%);
    transition:transform .4s ease;border-left:1px solid var(--line);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:17px;}
  .nav-cta .btn-quote{display:none;}
  .nav-toggle{display:flex;}
  .nav-toggle.open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}
}
@media (max-width:390px){
  .navbar{height:75px;padding:10px 12px;}
  .navbar.scrolled{height:75px;padding:10px 12px;}
  .nav-logo{gap:5px;}
  .nav-logo-icon{height:29px;}
  .navbar.scrolled .nav-logo-icon{height:27px;}
  .nav-logo-title{font-size:13px;}
  .navbar.scrolled .nav-logo-title{font-size:12px;}
  .nav-toggle{width:24px;height:18px;}
}

.site-footer{
    background:var(--navy-950);
    color:var(--off-white);
    padding:54px clamp(20px,5vw,64px) 0;
    border-top:1px solid var(--line);
    overflow:hidden;
  }
  .footer-inner{
    max-width:1400px;
    margin:0 auto;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.35fr 1fr 1.15fr 1.35fr;
    gap:44px;
    padding-bottom:34px;
  }

  .footer-brand-logo{
    display:inline-flex;
    align-items:center;
    gap:11px;
    text-decoration:none;
    margin-bottom:15px;
  }
  .footer-brand-logo img{
    width:54px;
    height:54px;
    object-fit:contain;
    flex-shrink:0;
  }
  .footer-brand-logo-text{
    display:flex;
    flex-direction:column;
    line-height:1;
  }
  .footer-brand-logo-title{
    font-family:'Space Grotesk',sans-serif;
    font-size:22px;
    font-weight:700;
    letter-spacing:.2px;
    color:#fff;
  }
  .footer-brand-logo-sub{
    margin-top:5px;
    font-size:8px;
    font-weight:600;
    letter-spacing:1.35px;
    text-transform:uppercase;
    color:var(--slate-300);
  }
  .footer-brand-desc{
    font-size:13.5px;
    line-height:1.65;
    color:var(--slate-300);
    max-width:330px;
    margin:0 0 18px;
  }
  .footer-socials{
    display:flex;
    align-items:center;
    gap:9px;
  }
  .footer-social{
    width:31px;
    height:31px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
    color:#fff;
    text-decoration:none;
    transition:all .25s ease;
  }
  .footer-social:hover{
    color:var(--orange-500);
    border-color:var(--orange-500);
  }
  .footer-social svg{
    width:16px;
    height:16px;
  }

  .footer-col-title{
    font-family:'Space Grotesk',sans-serif;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:1.35px;
    text-transform:uppercase;
    color:#fff;
    margin:2px 0 17px;
  }
  .footer-links{
    display:flex;
    flex-direction:column;
    gap:9px;
    list-style:none;
    margin:0;
    padding:0;
  }
  .footer-links a{
    font-size:13.5px;
    color:var(--slate-300);
    text-decoration:none;
    transition:color .25s ease;
  }
  .footer-links a:hover{
    color:var(--orange-500);
  }

  .footer-products{
    display:flex;
    flex-direction:column;
    gap:8px;
    list-style:none;
    margin:0;
    padding:0;
  }
  .footer-products a{
    font-size:13.5px;
    color:var(--slate-300);
    text-decoration:none;
    transition:color .25s ease;
  }
  .footer-products a:hover{
    color:var(--orange-500);
  }

  .footer-contact-list{
    display:flex;
    flex-direction:column;
    gap:13px;
    list-style:none;
    margin:0;
    padding:0;
  }
  .footer-contact-item{
    display:flex;
    gap:10px;
    align-items:flex-start;
  }
  .footer-contact-item svg{
    width:16px;
    height:16px;
    flex-shrink:0;
    margin-top:2px;
  }
  .footer-contact-item a,
  .footer-contact-item span{
    font-size:13.5px;
    color:var(--slate-300);
    line-height:1.5;
    text-decoration:none;
    overflow-wrap:anywhere;
  }
  .footer-contact-item a:hover{
    color:var(--orange-500);
  }

  .footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
    padding:17px 0;
    border-top:1px solid var(--line);
  }
  .footer-copyright{
    font-size:12px;
    color:var(--slate-500);
    margin:0;
  }
  .footer-legal{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .footer-legal a{
    font-size:12px;
    color:var(--slate-500);
    text-decoration:none;
    transition:color .25s ease;
  }
  .footer-legal a:hover{
    color:var(--orange-500);
  }
  .footer-legal-sep{
    color:var(--slate-500);
    font-size:11px;
  }

  @media (max-width:860px){
    .footer-grid{
      grid-template-columns:1fr 1fr;
      gap:32px 34px;
    }
    .footer-brand{
      grid-column:1 / -1;
    }
  }
  @media (max-width:600px){
    .site-footer{
      padding:42px 16px 0;
    }
    .footer-grid{
      grid-template-columns:1fr;
      gap:27px;
      padding-bottom:30px;
    }
    .footer-brand{
      grid-column:auto;
    }
    .footer-brand-logo img{
      width:50px;
      height:50px;
    }
    .footer-brand-logo-title{
      font-size:20px;
    }
    .footer-brand-desc{
      max-width:100%;
      margin-bottom:15px;
    }
    .footer-links,
    .footer-products{
      gap:8px;
    }
    .footer-contact-list{
      gap:12px;
    }
    .footer-bottom{
      flex-direction:column;
      align-items:flex-start;
      padding:16px 0;
    }
  }
  .site-footer *{ box-sizing:border-box; }