:root {
  --dark:#0e1621;
  --blue:#1f6fb2;
  --orange:#f28c1b;
  --light:#cbd5e1;
}

* { box-sizing:border-box; margin:0; padding:0; font-family:Inter, Arial, sans-serif; }

html, body {
  min-height:100%;
  -webkit-overflow-scrolling:touch;
}

html { background: var(--dark); }

button {
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:none; 
  padding:10px 18px;
  font-size:16px;
}

.primary { background:var(--orange); color: var(--dark); font-weight: normal;}
.secondary { background:transparent; border:1px solid white; color:white; }


body {
  background:
    linear-gradient(
      rgba(14,22,33,0.88),
      rgba(14,22,33,0.88)
    ),
    url("assets/industrial-bg.jpg") no-repeat center center;
  background-size: cover;
  background-attachment: scroll;
  color: white;
}

/* HEADER */
header {
  position:fixed; top:0; width:100%;
  padding:14px 32px;
  display:flex; justify-content:space-between; align-items:center;
  background:rgba(14,22,33,.95);
  z-index:1000;
}

header .logo img { 
  height:44px;
  display:block;
}

header .logo {    
  margin-right: 14px;
}

/* HERO */
.hero {
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:120px 24px 40px;
}

.hero-track {
  position:relative;
  width:100%;
  max-width:1100px;
}

.hero-slide {
  display:none;
  align-items:center;
  gap:50px;
  animation:fadeSlide .8s ease;
}

.hero-slide.active { display:flex; }

@keyframes fadeSlide {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}

.hero img { max-width:340px; width:100%; }

.hero h1 { font-size:44px; margin-bottom:18px; }
.hero p { color:var(--light); margin-bottom:26px; font-size:18px; }


/* SECTIONS */
.section {
  padding:80px 24px;
  max-width:1200px;
  margin:auto;
}

.section h2 {
  text-align:center;
  font-size:34px;
  margin-bottom:40px;
}

/* SLIDER CARDS */
.slider {
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}

.card {
  min-width:260px;
  background:#142235;
  padding:26px;
  border-radius:10px;
  scroll-snap-align:start;
  transition:.3s;
}

.card:hover { transform:translateY(-6px); }

/* COUNTERS */
.counters {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:30px;
  text-align:center;
}

.counter span {
  font-size:44px;
  color:var(--orange);
  display:block;
}

/* CTA */
.cta-section {
  text-align:center;
  padding:90px 24px;
  background: rgba(20,34,53,0.85);
  backdrop-filter: blur(3px);
}

.cta-section h2 { font-size:40px; margin-bottom:30px; }

.cta-section button {
  display:inline-flex;
}

/* FOOTER */
footer {
  text-align:center;
  padding:26px;
  font-size:14px;
  background: rgba(11,18,32,0.9);
}

/* MODAL */
.modal {
  position:fixed; 
  inset:0;
  background:rgba(0,0,0,.7);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:1001;
}

.modal-content {
  background:#101a28;
  padding:28px;
  width:100%;
  max-width:460px;
  border-radius:10px;
  position:fixed;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  max-height:90vh;
  overflow-y:auto;
  z-index:1001;
}

.modal-content h3 {
  margin-bottom:18px;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 14px;
}

.checkbox-row input[type="checkbox"] {
  margin-right: 8px;
  margin-top: 4px;
  width: auto;
}

.modal-content button[type="submit"] {
  width:100%;
}

.modal-close {
  position:absolute;
  top:10px;
  right:14px;
  background:none;
  border:none;
  color:white;
  font-size:28px;
  cursor:pointer;
  padding:0;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
}

.modal-close:hover { color:#f28c1b; }

.modal-legal {
  text-align:center;
  font-size:13px;
  color:var(--light);
  margin-top:18px;
}

.modal-content input, textarea {
  width:100%;
  padding:10px;
  margin-bottom:14px;
  background:#142235;
  border:none;
  color:white;
}

.cta {
  display:flex;
  gap:14px;
  align-items:center;
}

/* BRAND RAIL */
.brand-rail {
  --rail-bg: #f4f4f4;
  background: var(--rail-bg);
  border-top: 2px solid #0056b3;
  border-bottom: 2px solid #0056b3;
  overflow: hidden;
  /* ensure the first brand item lines up with the header logo edge */
  padding: 18px 32px; /* match header's horizontal padding */
}

.brand-track {
  display:flex;
  gap:48px;
  align-items:center;
  width:max-content;
  will-change:transform;
  /* track begins aligned with the left edge of the rail/logo */
  transform: translateX(0);
  /* visible by default rather than hiding */
}
/* uniform item box */
.brand-item {
  width:160px;
  height:64px;
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.brand-item img {
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(0%);
  transition:filter .25s ease, transform .25s ease;
  display:block;
}

.brand-item img:hover { filter:grayscale(0%); transform:scale(1.03); }

.brand-spacer { width:160px; height:64px; }

/* PAGE CONTAINER */
.container { 
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center; 
  padding:100px 24px 40px;
  max-width:900px;
  margin:auto;
  min-height:calc(100vh - 68px); /* account for fixed header height */
}

.container h1 {
  font-size:32px;
  margin-bottom:24px;
}

.container h2 {
  font-size:24px;
  margin:32px 0 10px;
}

.container p {
  font-size:18px;
  line-height:1.8;
  color:var(--light);
  margin-bottom:18px;
}

.button { 
  text-decoration:none; 
  color:black; 
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:none; 
  padding:10px 18px;
  font-size:16px;
}



/* TABLET */
@media(max-width:768px) {
  .hero-slide { flex-direction:column; text-align:center; }
  .hero h1 { font-size:34px; }
  .cta-section { backdrop-filter:none; }
  .cta {
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }
  section button {
    width:50%;
  }
  .container { max-width:100%; }
  .container h1 { font-size:28px; text-align:center; }
  .container h2 { font-size:20px; }
  .container p { font-size:16px; text-align:center; }
}

/* MOBILE */
@media(max-width:425px) {
  .modal-content{
    height: 100%;
    max-height: none;
  }
  .button { width:100%; max-width:360px; align-self:center; }
  section button {
    width:100%;
  }
}