:root{
  --navy:#0e1b22;
  --teal:#2aa5a1;
  --teal-dark:#1a807d;
  --bg:#f0f2f5;
  --text:#1a1a1a;
}

*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg)}

/* Header & Nav */
header{background:#f7f9fb;box-shadow:0 2px 5px rgba(0,0,0,.05)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:64px}
.brand-name{font-weight:700}
nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}
nav .hamburger{display:none;background:transparent;border:none;font-size:24px}

header nav a, header nav a:visited{
  color:var(--teal);
  text-decoration:none;
  transition:color .2s ease,border-color .2s ease;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
header nav a:hover, header nav a:focus{
  color:var(--teal-dark);
  border-bottom-color:var(--teal-dark);
}
header nav a.active{color:var(--teal-dark);border-bottom-color:var(--teal-dark)}

/* Preloader */
#preloader{position:fixed;inset:0;background:white;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center}
.spinner{width:40px;height:40px;border:4px solid #ccc;border-top:4px solid var(--teal);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:18px}
.preloader-logo{height:64px;opacity:.95}
@keyframes spin{to{transform:rotate(360deg)}}

/* Hero */
.hero{background:linear-gradient(#e1efff,#ffffff);padding:80px 20px;text-align:center}
.hero .btn-primary{margin-top:10px}

/* Sections */
section .container, .hero-text, footer .container{text-align:center}
section{padding:40px 20px}
section ul{display:inline-block;text-align:left;margin:0 auto}

/* Buttons */
.btn-primary{background:var(--teal);color:white;border:none;border-radius:8px;padding:10px 18px;cursor:pointer;display:inline-block;text-decoration:none}
.btn-primary:hover{background:var(--teal-dark)}

/* Contact form */
.contact-form{max-width:560px;margin:16px auto;display:flex;flex-direction:column;gap:10px}
.contact-form input,.contact-form textarea{padding:10px;border:1px solid #ccc;border-radius:8px}

/* Vendors */
#vendors .vendor-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:12px;align-items:center;justify-items:center;
  filter:saturate(.8);
}
#vendors .vendor-strip img{
  max-height:24px;width:auto;object-fit:contain;
  filter:grayscale(100%) saturate(0) opacity(.85);
  transition:transform .2s ease, opacity .2s ease, filter .2s ease;
}
#vendors .vendor-strip img:hover{
  filter:grayscale(0%) saturate(1) opacity(1);
  transform:translateY(-1px) scale(1.02);
}

/* Responsive nav */
@media (max-width: 768px){
  nav ul{display:none;flex-direction:column;background:#fff;position:absolute;right:20px;top:68px;padding:14px 16px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
  nav .hamburger{display:block}
}