:root{
  --primary:#0b6e4f;
  --accent:#065f4b;
  --muted:#6b7280;
  --bg:#ffffff;
  --container:1100px;
  --radius:10px;
}
*{
  box-sizing:border-box;
}

html, body{
padding-top:35px;
  margin:0;
  overflow-x:hidden;
}


body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:#0f172a; background:linear-gradient(180deg,#f8fafc, #ffffff); -webkit-font-smoothing:antialiased;}
a{color:var(--primary); text-decoration:none}

section {
  overflow-x: hidden;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  z-index: 999;

background: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 2px 15px rgba(0,0,0,0.08);

}



.container{
  max-width:var(--container);
  margin:0 auto;
  padding:20px;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}






.brand{display:flex; align-items:center; gap:12px}
.brand img{height:48px}
nav ul{list-style:none; display:flex; gap:18px; align-items:center; margin:0; padding:0}
.btn{background:var(--primary); color:#fff; padding:10px 16px; border-radius:8px; display:inline-block}
.hero{display:flex; gap:40px; align-items:center; padding:60px 20px}
.hero-left{flex:1}
.badge{display:inline-block; background:#eefdf6; color:var(--primary); padding:6px 10px; border-radius:999px; font-weight:600; font-size:13px}
h1{font-size:44px; margin:14px 0; line-height:1.02}
p.lead{color:var(--muted); font-size:17px; margin:0 0 18px 0}
.features{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; margin-top:26px}
.card{background:#fff; padding:18px; border-radius:12px; box-shadow:0 6px 18px rgba(11,22,33,0.06)}
footer{background:#031018; color:#cfe6e3; padding:40px 20px; margin-top:40px}
.grid-2{display:grid; grid-template-columns:1fr 420px; gap:30px}
@media (max-width:900px){ .hero{flex-direction:column} .grid-2{grid-template-columns:1fr} nav ul{display:none} .mobile-toggle{display:block} }
.mobile-toggle{display:none; background:transparent; border:0; font-size:20px}
.who-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
header nav a{padding:8px 10px; border-radius:8px}
header nav a:hover{background:#f1f5f9}
.section{padding:40px 20px}
.muted{color:var(--muted)}
.contact-card{background:#fff; padding:18px; border-radius:12px; box-shadow:0 6px 18px rgba(11,22,33,0.06)}
.form-group{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
input, textarea{padding:10px; border-radius:8px; border:1px solid #e6eef0; font-size:15px}
.small{font-size:13px}
.logo-small{height:28px}
nav .cta{display:inline-block}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px}
.career-list{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.pill{display:inline-block; padding:6px 10px; background:#f1f5f9; border-radius:999px; font-weight:600}
.products .product{display:flex; gap:18px; align-items:flex-start; margin-bottom:18px}
.product .icon{width:64px; height:64px; background:#eef2ff; display:flex; align-items:center; justify-content:center; border-radius:12px; font-weight:700}
.sr-only{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.logo-placeholder{opacity:0.5; border:2px dashed #e6eef0; padding:10px; border-radius:8px; text-align:center}



/* HAMBURGER BUTTON (Datavant style) */
.hamburger {
  position: fixed;
  top: 25px;
  right: 25px;
  width: 28px;
  height: 22px;
  cursor: pointer;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: #000; /* changed from white (#fff) to BLACK (#000) */
  border-radius: 5px;
  transition: 0.3s;
}

/* ANIMATION: transform into X */
.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Hide original nav on mobile */
@media (max-width: 900px) {
  nav ul#nav-list {
    display: none;
  }
}



.pill-wrap { text-align: center; margin-top: 40px; }

.pill {
  display: inline-flex;
  padding: 14px 60px;
  border: 1.5px solid #000;
  border-radius: 999px;
  font: 700 20px Arial;
  color: #000;
  text-decoration: none;
}


.section-video{
  width:100%;
  display:block;
  border-radius:10px;
}



/* SCROLL ANIMATIONS */

.fade-in{
  opacity:0;
  transform:translateY(40px);
  transition:all 0.8s ease;
}

.fade-in.show{
  opacity:1;
  transform:translateY(0);
}

/* Slight zoom effect for images */

.zoom-in{
  opacity:0;
  transform:scale(0.92);
  transition:all 0.9s ease;
}

.zoom-in.show{
  opacity:1;
  transform:scale(1);
}

/* Slide from left */

.slide-left{
  opacity:0;
  transform:translateX(-60px);
  transition:all 0.8s ease;
}

.slide-left.show{
  opacity:1;
  transform:translateX(0);
}

/* Slide from right */

.slide-right {
  opacity: 0;
  transform: translate3d(40px,0,0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-right.show {
  opacity: 1;
  transform: translate3d(0,0,0);
}



.parallax {
  transform: translateY(40px);
  transition: transform 0.6s ease-out;
}
.parallax.show {
  transform: translateY(0);
}









/* SIDE MENU */

.side-menu{
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  background: #0e3a36;
  padding-top: 30px;

  transform: translateX(100%);
  transition: transform 0.5s ease;

  z-index: 9999;
  box-shadow: -4px 0 20px rgba(0,0,0,0.25);

  /* remove fixed height */
  height: auto;
}

/* OPEN STATE */

.side-menu.active{
  transform: translateX(0);
}

/* MENU ITEMS */

.side-menu a{
  display:block;
  padding:17px 30px;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:#d6e15a;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.08);
  font-family:Arial, Helvetica, sans-serif;
  -webkit-tap-highlight-color:transparent;
}