
:root{
  --primary:#0F172A;
  --accent:#06B6D4;
  --bg-light:#F8FAFC;
  --text-body:#475569;
  --white:#ffffff;
  --shadow:0 10px 30px -10px rgba(0,0,0,.1);
}
body{
  margin:0;
  font-family:'Manrope',sans-serif;
  color:var(--text-body);
  background:#fff;
  line-height:1.6;
}
h1,h2,h3{color:var(--primary)}
.container{max-width:1200px;margin:auto;padding:0 20px}
img{max-width:100%;height:auto;display:block}
.btn-primary{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  padding:15px 40px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
}
.btn-primary:hover{background:var(--accent)}
.hero{
  background:linear-gradient(135deg,#f0f4f8,#e2e8f0);
  padding:80px 0;
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.badge{
  background:var(--accent);
  color:#fff;
  padding:6px 16px;
  border-radius:40px;
  font-size:.8rem;
  font-weight:600;
}
.specs-bar{
  background:var(--primary);
  color:#fff;
  margin-top:-50px;
  padding:40px;
  border-radius:10px;
}
.specs-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  text-align:center;
}
.spec-item h4{color:var(--accent);margin:0;font-size:1.8rem}
.section{padding:100px 0}
.section-title{text-align:center;max-width:800px;margin:auto auto 60px}
.feature-list{list-style:none;padding:0}
.feature-list li{margin-bottom:14px;padding-left:22px;position:relative}
.feature-list li:before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--accent);
}
.placeholder-note{
  font-size:13px;
  color:#64748b;
  text-align:center;
  margin-top:6px;
}
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  box-shadow:var(--shadow);
}
th,td{padding:14px;border-bottom:1px solid #eee}
th{background:#f1f5f9}
.faq-section{background:var(--bg-light)}
.faq-item{
  background:#fff;
  padding:20px;
  margin-bottom:16px;
  border-left:4px solid var(--accent);
  border-radius:6px;
}
footer{
  background:var(--primary);
  color:#fff;
  padding:60px 0;
  text-align:center;
}
@media(max-width:768px){
  .hero-grid,.specs-grid{grid-template-columns:1fr}
}
