/* RESET & smooth scroll */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:#000;color:#fff;line-height:1.6;
}

/* ───────── FIXED HEADER ───────── */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:#000;
  height:92px;                    /* 80-px logo + 12-px padding */
  padding:6px 32px;
  display:flex;align-items:center
}
.header-content{display:flex;align-items:center;gap:12px}
.logo{height:80px;width:auto}
.company-name{font-size:24px;font-weight:700;letter-spacing:.4px}

/* white bar */
.separator{
  position:fixed;top:92px;left:0;width:100%;height:6px;
  background:#fff;z-index:1000
}

/* push hero below header+bar */
.hero{margin-top:98px}

/* ───────── HERO ───────── */
.hero{
  background:url('hero2.png') 50% 25%/cover no-repeat;
  height:90vh;max-height:600px;min-height:380px;
  position:relative;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 20px;border-bottom:6px solid #fff
}
.hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.55)}
.hero-content{position:relative;z-index:1;max-width:820px}
.hero-content h1{font-size:2.8rem;margin-bottom:18px}
.hero-content p {font-size:1.2rem;margin-bottom:34px}
.cta-button{
  display:inline-block;padding:12px 32px;border:2px solid #fff;border-radius:32px;
  background:transparent;color:#fff;font-weight:700;font-size:1rem;text-decoration:none;
  transition:.3s
}
.cta-button:hover{background:#fff;color:#000}

/* ───────── SECTIONS ───────── */
.section{
  background:#000;padding:60px 20px;border-top:6px solid #fff
}
.container{max-width:1200px;margin:0 auto;text-align:center}
.section h2{font-size:2.2rem;margin-bottom:40px;letter-spacing:.6px}
.section p {margin-bottom:40px;font-size:1.05rem}

/* HOW IT WORKS */
.steps{display:flex;flex-wrap:wrap;justify-content:center;gap:60px}
.step{max-width:320px}
.step-num{
  display:inline-block;width:54px;height:54px;border:2px solid #fff;border-radius:50%;
  line-height:50px;text-align:center;font-weight:700;font-size:1.1rem;margin-bottom:16px
}
.step h4{margin-bottom:12px;font-size:1.25rem}

/* IMAGE STRIP */
.image-strip{border-top:6px solid #fff;border-bottom:6px solid #fff}
.image-strip img{
  width:100%;height:75vh;max-height:520px;object-fit:cover;display:block
}

/* FEATURES */
.feature-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:60px}
.feature-item{flex:1 1 300px;max-width:340px}
.feature-item img{width:100px;margin-bottom:24px}
.feature-item h3{margin-bottom:14px;font-size:1.3rem;letter-spacing:.3px}

/* FOOTER */
footer{padding:30px;text-align:center;background:#000;color:#aaa;font-size:.9rem}

/* ───────── RESPONSIVE ───────── */
@media(max-width:768px){
  .feature-grid,.steps{flex-direction:column;align-items:center;gap:48px}
  .hero{height:75vh;max-height:500px;margin-top:98px}
  .image-strip img{height:60vh;max-height:420px}
  .hero-content h1{font-size:2.2rem}
  .hero-content p {font-size:1rem}
}