* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; color: #0f172a; background: #fff; line-height: 1.6; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }
.site-header { background: #fff; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; z-index: 100; }
.nav-container { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.logo { font-weight: 800; font-size: 1.25rem; color: #0f172a; text-decoration: none; }
.nav-menu { display: flex; list-style: none; gap: 1.5rem; }
.nav-link { color: #475569; text-decoration: none; font-weight: 500; }
.nav-cta-btn { background: #d97706; color: #fff; padding: 0.6rem 1.2rem; border-radius: 99px; text-decoration: none; font-weight: 700; }
.hero-section { padding: 4rem 0; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); }
.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.badge-success { display: inline-block; background: #dcfce7; color: #15803d; padding: 0.4rem 0.8rem; border-radius: 99px; font-weight: 700; font-size: 0.85rem; margin-bottom: 1rem; }
.hero-headline { font-size: 2.75rem; line-height: 1.2; font-weight: 800; margin-bottom: 1rem; }
.hero-headline span { color: #d97706; }
.hero-sub { font-size: 1.1rem; color: #475569; margin-bottom: 1.5rem; }
.hero-bullets { list-style: none; margin-bottom: 2rem; }
.hero-bullets li { font-size: 1rem; margin-bottom: 0.5rem; }
.cta-button { display: inline-block; background: #d97706; color: #fff; padding: 1.1rem 2.2rem; border-radius: 12px; text-decoration: none; font-weight: 800; font-size: 1.1rem; box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.hero-img { width: 100%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.trust-strip { background: #0f172a; color: #fff; padding: 1.2rem 0; }
.trust-flex { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1rem; font-weight: 600; font-size: 0.9rem; }
.section-padding { padding: 5rem 0; }
.section-title-dark { font-size: 2.25rem; font-weight: 800; margin-bottom: 1.5rem; }
.section-title-light { font-size: 2.25rem; font-weight: 800; margin-bottom: 1.5rem; color: #0f172a; }
.text-center { text-align: center; }
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.overview-img { width: 100%; border-radius: 16px; box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.highlight-box { background: #f0f9ff; border-left: 4px solid #d97706; padding: 1.5rem; margin-top: 1.5rem; border-radius: 8px; }
.specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.spec-card { background: #f8fafc; padding: 2rem; border-radius: 16px; border: 1px solid #e2e8f0; }
.spec-icon { font-size: 2rem; margin-bottom: 1rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.review-card { background: #f8fafc; padding: 2rem; border-radius: 16px; border: 1px solid #e2e8f0; }
.rating-stars { color: #fbbf24; margin: 0.5rem 0; }
.faq-container { max-width: 800px; margin: 3rem auto 0; }
.faq-item { border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 1rem; overflow: hidden; }
.faq-question { width: 100%; text-align: left; padding: 1.25rem; background: #fff; border: none; font-weight: 700; font-size: 1.05rem; cursor: pointer; display: flex; justify-content: space-between; }
.faq-answer { padding: 0 1.25rem 1.25rem; display: none; background: #fff; color: #475569; }
.sticky-cta-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; color: #fff; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; z-index: 99; transform: translateY(100%); transition: transform 0.3s ease; }
.sticky-cta-bar.visible { transform: translateY(0); }
.sticky-btn { background: #d97706; color: #fff; padding: 0.75rem 1.5rem; border-radius: 99px; text-decoration: none; font-weight: 800; }
.site-footer { background: #020617; color: #94a3b8; padding: 3rem 0; text-align: center; font-size: 0.85rem; }
.menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; }
@media (max-width: 768px) {
  .hero-grid, .overview-grid { grid-template-columns: 1fr; }
  .nav-menu { display: none; }
  .menu-toggle { display: block; }
}