/* Reset & base */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Arial', sans-serif; }
body { line-height:1.6; color:#333; background:#f8f9fa; }
a { text-decoration:none; }
.container { width:90%; max-width:1200px; margin:auto; }

/* Header */
header { background:#08365a; color:white; padding:15px 0; position:sticky; top:0; z-index:1000; }
header .container { display:flex; justify-content:space-between; align-items:center; }
header .logo { font-size:24px; font-weight:bold; }
header nav a { color:white; margin-left:20px; font-weight:bold; transition:0.3s; }
header nav a:hover { color:#00eaff; }
header nav a.btn { background:#00eaff; padding:8px 15px; border-radius:5px; }
header nav a.btn-outline { border:1px solid #fff; padding:8px 15px; border-radius:5px; }

/* Hero */
.hero { background:url('../images/hero-bg.jpg') center/cover no-repeat; color:white; text-align:center; padding:120px 20px; }
.hero h1 { font-size:42px; margin-bottom:15px; }
.hero p { font-size:18px; max-width:700px; margin:10px auto 20px; }
.btn-hero { background:#00eaff; color:#08365a; padding:15px 30px; font-size:18px; border-radius:5px; display:inline-block; }

/* Pricing Calculator */
.pricing { padding:60px 0; background:#fff; }
.pricing h2 { text-align:center; margin-bottom:40px; font-size:32px; color:#08365a; }
#priceCalc { max-width:700px; margin:auto; background:#f4f4f4; padding:30px; border-radius:10px; box-shadow:0 0 15px rgba(0,0,0,0.1); }
.form-group { margin-bottom:20px; }
.form-group label { display:block; margin-bottom:5px; font-weight:bold; }
.form-group input, .form-group select { width:100%; padding:10px; border-radius:5px; border:1px solid #ccc; font-size:16px; }
.form-group.total { text-align:center; font-size:22px; margin-top:15px; }
#priceCalc .btn { display:block; width:100%; text-align:center; margin-top:15px; }

/* Features */
.features { padding:80px 0; background:#f8f9fa; display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.features .feature { background:white; padding:30px; border-radius:10px; width:250px; text-align:center; box-shadow:0 0 10px rgba(0,0,0,0.08); transition:0.3s; }
.features .feature:hover { transform:translateY(-5px); box-shadow:0 5px 15px rgba(0,0,0,0.15); }
.features img { width:60px; margin-bottom:15px; }

/* Testimonials */
.testimonials { background:#08365a; color:white; padding:80px 20px; text-align:center; }
.testimonials h2 { margin-bottom:40px; font-size:32px; }
.testimonials .testimonial { max-width:600px; margin:auto; margin-bottom:30px; background:rgba(255,255,255,0.05); padding:20px; border-radius:10px; }

/* Stats */
.stats { display:flex; justify-content:center; gap:50px; padding:60px 0; background:#fff; }
.stats .stat h3 { font-size:36px; color:#00eaff; }
.stats .stat p { font-size:18px; color:#555; }

/* FAQ Accordion */
.faq { padding:80px 20px; background:#f8f9fa; max-width:900px; margin:auto; }
.faq h2 { text-align:center; margin-bottom:40px; font-size:32px; color:#08365a; }
.faq-item { background:white; border-radius:8px; margin-bottom:15px; padding:15px 20px; cursor:pointer; box-shadow:0 0 8px rgba(0,0,0,0.08); transition:0.3s; }
.faq-item:hover { transform:translateY(-2px); box-shadow:0 5px 15px rgba(0,0,0,0.1); }
.faq-item h4 { margin-bottom:10px; }
.faq-item p { display:none; margin:0; }

/* Footer */
footer { background:#08365a; color:white; padding:40px 0; text-align:center; }
footer a { color:#00eaff; margin:0 10px; }

/* Responsive */
@media(max-width:992px){
    .features { flex-direction:column; align-items:center; }
    .stats { flex-direction:column; gap:30px; }
    header .container { flex-direction:column; gap:10px; }
    .hero h1 { font-size:32px; }
}
@media(max-width:576px){
    .hero h1 { font-size:26px; }
    .btn-hero { font-size:16px; padding:12px 25px; }
}