
:root{
  --bg:#f5f3ef;
  --text:#171717;
  --muted:#666;
  --card:#ffffff;
  --accent:#1f3d2c;
}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
.navbar{
  background:rgba(245,243,239,.82);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(0,0,0,.05);
  padding: 15px;
}
.navbar-brand img{height:34px;}
.hero{
  background: radial-gradient(circle at top right, #fff, var(--bg) 60%);
  padding-top: 4rem;
}

.rounded-pill{
  padding: 10px;
}

.hero-image,.product-image{
  max-width:100%;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.08));
}
.section{padding:8rem 0;}
.section.alt{background:#fff;}
.section.dark{
  background:#111;
  color:#fff;
}
.cta{
  background:linear-gradient(180deg,#fff,#f0ede7);
}
.narrow{max-width:780px;margin:0 auto;}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.8rem;
  font-weight:600;
  color:var(--muted);
}
h1,h2,h3{
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.03em;
}
h1{font-size:clamp(3rem,7vw,6.5rem);}
h2{font-size:clamp(2.2rem,5vw,4.5rem); margin-bottom:1.5rem;}
.lead{font-size:1.2rem;color:var(--muted);}
.feature-list{
  list-style:none;padding:0;margin:0;
}
.feature-list li{
  padding:1rem 0;border-bottom:1px solid rgba(0,0,0,.08);
  font-size:1.05rem;
}
.model-card,.stat{
  background:var(--card);
  border-radius:2rem;
  padding:2rem;
  box-shadow:0 10px 40px rgba(0,0,0,.05);
  height:100%;
}
.model-card img{max-height:240px;object-fit:contain;margin-bottom:1.5rem;}
.stat strong{display:block;font-size:2rem;}
.stat span{color:var(--muted);}
.signup-form{
  max-width:620px;margin:2rem auto 0;
  display:flex;gap:1rem;flex-wrap:wrap;
}
.signup-form input{
  flex:1;min-width:240px;padding:1rem 1.25rem;
  border-radius:999px;border:1px solid rgba(0,0,0,.1);background:#fff;
}
.signup-form button{
  padding:1rem 1.75rem;border:none;border-radius:999px;
  background:var(--text);color:#fff;font-weight:600;
}
.footer{
  padding:2rem 0;
  border-top:1px solid rgba(0,0,0,.06);
  color:var(--muted);
}
@media (max-width: 991px){
  .section{padding:5rem 0;}
  .hero{text-align:center; padding-top: 8rem;}
   .navbar .container {justify-content: center;}
.navbar-brand {margin: 0 auto;}
 .header-cta {display: none !important;}
  
  html,
body {overflow-x: hidden;}

  
}
