
body { margin:0; font-family:Arial, sans-serif; background:#f8f9fb; color:#222; }
.container { width:90%; max-width:1100px; margin:auto; }
.header { background:#fff; padding:15px 0; border-bottom:1px solid #ddd; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.brand { font-size:22px; font-weight:bold; }
.logo { background:#2563eb; color:#fff; padding:8px 10px; border-radius:6px; margin-right:6px; }
.nav a { margin:0 10px; text-decoration:none; color:#444; }
.nav a.active { color:#2563eb; font-weight:bold; }
.mobile-btn { display:none; font-size:24px; background:none; border:none; }
.hero { background:#2563eb; color:white; padding:80px 0; text-align:center; }
.hero h1 span { color:#ffee00; }
.btn-primary { background:#2563eb; color:white; padding:10px 18px; border-radius:6px; text-decoration:none; }
.btn-secondary { border:2px solid white; color:white; padding:10px 18px; border-radius:6px; text-decoration:none; }
.features, .page { padding:60px 0; }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; }
.feature, .service-box, .plan-box { background:white; padding:20px; border-radius:10px; box-shadow:0 0 8px rgba(0,0,0,0.1); }
.price { font-size:24px; color:#2563eb; font-weight:bold; }
.plan-box.popular { border:2px solid #2563eb; }
.tag { background:#2563eb; color:white; padding:4px 10px; border-radius:6px; display:inline-block; margin-bottom:10px; }
.contact-form { display:flex; flex-direction:column; gap:12px; max-width:450px; }
input, textarea { padding:10px; border-radius:6px; border:1px solid #ccc; }
.btn-primary { cursor:pointer; }
.success { margin-top:20px; color:green; }
.hidden { display:none; }
.footer { text-align:center; padding:25px 0; background:#f0f0f0; margin-top:40px; }
