*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:#fff;color:#0b0b0b;font:16px/1.6 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.container{max-width:1200px;margin:0 auto;padding:0 28px}
header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #eee}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:18px;height:18px;border:2px solid #111;border-radius:5px}
.brand-name{font-weight:700;letter-spacing:0.2px}
nav a{margin-left:22px;text-decoration:none;color:#0b0b0b;padding-bottom:8px;border-bottom:2px solid transparent;font-weight:500}
nav a:hover{border-color:#0b0b0b}
.hero{padding:72px 0 56px}
.kicker{display:inline-block;font-size:12px;color:#666;border:1px solid #eee;border-radius:999px;padding:4px 10px;margin-bottom:14px}
h1{font-size:48px;line-height:1.15;letter-spacing:-0.02em;margin:0 0 10px}
.lead{font-size:18px;color:#5a5a5a;max-width:760px;margin:0}
.cta{margin-top:20px;display:flex;gap:12px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;transition:transform .06s ease, box-shadow .2s ease}
.btn:active{transform:translateY(1px)}
.btn-dark{background:#111;color:#fff;border:1px solid #111;box-shadow:0 6px 14px rgba(0,0,0,.06)}
.btn-light{background:#fff;color:#111;border:1px solid #ddd}
.section{padding:56px 0}
.section h2{font-size:28px;margin:0 0 10px;letter-spacing:-.01em}
.muted{color:#6b6b6b}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:22px}
.card{border:1px solid #eaeaea;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.04)}
.thumb{width:100%;aspect-ratio:4/3;background:linear-gradient(#fafafa,#f2f2f2)}
.card .content{padding:16px}
.card h3{margin:0 0 8px;font-size:18px}
.card p.small{margin:0 0 12px;color:#666;font-size:14px}
.price{font-weight:700;margin:0 0 10px}
.badge{display:inline-block;border:1px solid #e7e7e7;border-radius:6px;padding:6px 10px;font-size:12px;color:#6b6b6b;margin-left:8px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.feature{border:1px solid #eee;border-radius:16px;padding:18px;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.03)}
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.quote{border:1px solid #eee;border-radius:16px;padding:18px;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.03)}
.faq{border-top:1px solid #eee}
.faq-item{border-bottom:1px solid #eee;padding:16px 0}
.newsletter{padding:60px 0;border-top:1px solid #eee;background:#fff}
.newsletter form{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.newsletter input{padding:12px 14px;border:1px solid #cfcfcf;border-radius:10px;width:300px;max-width:100%}
.newsletter button{background:#111;color:#fff;border:none;padding:12px 18px;border-radius:10px;cursor:pointer}
footer{border-top:1px solid #eee;padding:18px}
.small{font-size:14px;color:#6b6b6b}
.center{max-width:760px;margin:0 auto;text-align:center;padding:96px 28px}
.center h1{font-size:36px;margin:0 0 10px}
.center p{color:#6b6b6b}
.link{color:#111}
@media (max-width:600px){
  h1{font-size:36px}
  .header-inner{height:56px}
}