:root {
  --primary: #3266f6;
  --primary-dark: #1d3c88;
  --accent: #f6b032;
  --background: #f9fafe;
  --text: #222;
  --border: #e0e6ef;
  --radius: 10px;
  --shadow: 0 4px 24px 0 rgba(50,102,246,.07);
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: 'Inter', Arial, sans-serif; background: var(--background); color: var(--text);
}
a { color: var(--primary); text-decoration: none; }
.container { max-width: 940px; margin: 0 auto; padding: 0 1.5rem; }
header.hero {
  background: linear-gradient(100deg, var(--primary) 60%, var(--primary-dark) 100%);
  color: #fff; padding: 4rem 0 3rem 0; text-align: center;
}
.hero h1 { font-size: 2.8rem; margin-bottom: 1rem; }
.subtitle { font-size: 1.25rem; margin-bottom: 2rem; }
.cta {
  background: var(--accent); color: #222; font-weight: 600; border-radius: var(--radius);
  padding: 1rem 2.5rem; font-size: 1.1rem; display: inline-block; box-shadow: var(--shadow);
  transition: background .15s;
}
.cta:hover, .cta.secondary:hover { background: #ffd27a; }
.cta.secondary { background: #fff; color: var(--primary); margin-top: 1.5rem; }
.features { background: #fff; padding: 3.5rem 0; }
.features h2 { text-align: center; margin-bottom: 2rem; }
.features-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 2rem; margin-top: 1.5rem;
}
.feature {
  background: var(--background); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.5rem; text-align: center; border: 1px solid var(--border);
}
.feature h3 { margin-top: 0; margin-bottom: .5rem; color: var(--primary-dark);}
.pricing { padding: 3.5rem 0; }
.pricing h2 { text-align: center; margin-bottom: 2rem; }
.pricing-table {
  display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center;
}
.plan {
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 2rem 1.5rem; min-width: 220px; flex: 1 1 240px;
  text-align: center; margin-bottom: 1rem;
}
.plan.popular { border: 2.5px solid var(--primary); position: relative; }
.plan .badge {
  background: var(--accent); color: #222; font-size: .85rem; padding: .2rem .7rem; border-radius: 17px;
  position: absolute; top: 1.2em; right: 1em;
}
.plan h3 { margin-top: 0; margin-bottom: .7rem;}
.price { font-size: 2.2rem; font-weight: 700; margin-bottom: .8rem; color: var(--primary-dark);}
.price span { font-size: 1.1rem; font-weight: 400; color: #333;}
.plan ul { list-style: none; padding: 0; margin: 0; margin-bottom: 1rem;}
.plan ul li { margin: .5rem 0;}
.demo { background: var(--background); padding: 3rem 0;}
.demo h2 { text-align: center; margin-bottom: 1rem; }
.demo p { text-align: center; font-size: 1.1rem;}
.lead-form { max-width: 420px; margin: 2rem auto 0 auto; background: #fff; border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); border: 1px solid var(--border);}
.form-group { margin-bottom: 1.2rem;}
.form-group label { display: block; margin-bottom: .4rem; font-weight: 600;}
.form-group input, .form-group textarea {
  width: 100%; padding: .7rem; border: 1.2px solid var(--border); border-radius: var(--radius);
  font-size: 1rem; font-family: inherit; background: var(--background);
}
.form-group textarea { min-height: 70px;}
button.cta { width: 100%; margin-top: .5rem;}
.form-success { color: var(--primary-dark); margin-top: 1.2rem; font-weight: 600; text-align: center;}
.faq { padding: 3rem 0;}
.faq h2 { text-align: center; margin-bottom: 1.5rem;}
.faq details { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); margin-bottom: 1rem; padding: 1rem;}
footer { background: #1d3c88; color: #fff; text-align: center; padding: 1.5rem 0; margin-top: 2rem;}
footer a { color: var(--accent);}
@media (max-width: 800px) {
  .features-grid { grid-template-columns: 1fr; }
  .pricing-table { flex-direction: column; }
}