/* Simple, clean styles */
:root{ --accent:#0ea5a4; --bg:#f8fafc; --muted:#6b7280; --dark:#0f172a; }
*{ box-sizing: border-box; }
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0;
  background:var(--bg);
  color:var(--dark);
  line-height:1.5;
}
.container{ max-width:1100px; margin:0 auto; padding:24px; }

.site-header{
  background:white;
  border-bottom:1px solid #e6edf3;
  position:sticky;
  top:0;
  z-index:100;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
}
.logo{
  font-weight:700;
  color:var(--dark);
  text-decoration:none;
  font-size:1.1rem;
}
.nav a{
  margin-left:18px;
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
}


/* HERO - centered content + strong overlay to hide image text */
.hero{
  position:relative;
  background-size:cover;
  background-position:center center;
  min-height:520px;
  display:flex;
  justify-content:center;  /* center horizontally */
  align-items:center;      /* center vertically */
  padding:0;               /* remove top padding */
  color:white;
  overflow:hidden;
}

/* stronger overlay with gradient to suppress left-side text in the image */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  /* dark gradient: very dark on left to hide image text, slightly lighter on right */
  background: linear-gradient(90deg, rgba(11,18,32,0.95) 0%, rgba(11,18,32,0.75) 40%, rgba(11,18,32,0.6) 100%);
  z-index:1;
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:900px;
  text-align:center;  /* center headline and paragraph */
  padding:48px 24px;
}
.hero-content h1{
  font-size:2.6rem;
  margin:0 0 12px;
  line-height:1.05;
}
.hero-content p{
  font-size:1.05rem;
  max-width:760px;
  margin:0 auto 18px;
}


@media (max-width:700px){
  .site-header .container{ padding:12px; }
  .nav a{ margin-left:10px; font-size:0.9rem; }
  .hero{
    min-height:420px;
    padding-top:64px;
  }
  .hero-content h1{ font-size:1.8rem; }
  .intro{ margin-top:0; }
  .features{ flex-direction:column; }
}