*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#000;
  color:#fff;
  line-height:1.4
}
.container{max-width:1100px;margin:0 auto;padding:32px 20px}
.header{display:flex;align-items:center;margin-bottom:70px}
.logo{height:40px;width:auto}

.hero{text-align:center;margin-bottom:110px}
.hero h1{
  font-size:clamp(32px,5vw,56px);
  font-weight:600;
  margin-bottom:22px;
  letter-spacing:-.03em
}
.sub{font-size:18px;opacity:.9;margin-bottom:14px}
.sub strong{font-weight:600}
.tagline{font-size:16px;opacity:.8;margin-bottom:36px}

.actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.btn{
  padding:14px 22px;
  font-size:14px;
  font-weight:600;
  border-radius:8px;
  text-decoration:none;
  cursor:pointer;
  transition:opacity .15s ease
}
.btn.primary{background:#fff;color:#000;border:1px solid #fff}
.btn.primary:hover{opacity:.88}
.btn.secondary{background:transparent;color:#fff;border:1px solid #333}
.btn.secondary:hover{opacity:.9}

.how{margin-bottom:110px;text-align:center}
.how h2{font-size:20px;font-weight:600;margin-bottom:40px}
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:26px;
  max-width:900px;
  margin:0 auto
}
.step img{height:40px;margin:0 auto 12px}
.step p{font-size:14px;opacity:.85}

.positioning{text-align:center;margin-bottom:110px}
.positioning p{font-size:16px;opacity:.9}
.positioning strong{font-weight:700}

.footer{text-align:center;font-size:13px;opacity:.55;padding-bottom:40px}
@media(max-width:600px){.header{justify-content:center}}