:root{
  --bg:#f7fbff; --card:#fff; --accent:#7c3aed; --muted:#64748b; --max:1100px; --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter, system-ui, Arial;background:var(--bg);color:#0f172a}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.header{background:transparent;padding:14px 0}
.header .container{display:flex;justify-content:space-between;align-items:center}
.logo{font-weight:800}
.menu a{margin-left:14px;color:var(--muted);text-decoration:none}

/* hero */
.hero{padding:28px 0}
.hero-grid{display:flex;gap:24px;align-items:center}
.hero-left{flex:1}
.hero-left h1{font-size:32px;margin:0 0 8px}
.hero-left p{color:var(--muted)}
.actions button{padding:10px 14px;border-radius:10px;border:0;cursor:pointer;margin-right:8px}
#freeBtn{background:var(--accent);color:#fff}
.outline{background:transparent;border:1px solid rgba(12,12,12,0.06);}

/* features */
.features .cards{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.feature-card{background:var(--card);padding:16px;border-radius:12px;flex:1;min-width:180px;box-shadow:0 10px 30px rgba(2,6,23,0.06)}
.feature-card h3{margin:0 0 8px}

/* pricing */
.pricing-grid{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.pkg{background:var(--card);padding:18px;border-radius:12px;min-width:160px;text-align:center;box-shadow:0 8px 24px rgba(2,6,23,0.06)}
.highlight{border:2px solid var(--accent)}

/* cta & footer */
.cta{background:linear-gradient(90deg,#f9fafb,#fff);padding:20px;border-radius:12px;text-align:center;margin-top:18px}
.footer{padding:18px;margin-top:18px;color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .hero-grid{flex-direction:column-reverse;text-align:center}
  .features .cards{flex-direction:column}
  .pricing-grid{flex-direction:column}
}