* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }

body { background-color: #f4f7ff; }

/* Navbar */
.navbar { background: #1a1a7c; padding: 20px 5%; display: flex; justify-content: space-between; color: white; }
.logo { font-size: 24px; font-weight: bold; letter-spacing: 1px; }
.logo span { color: #a259ff; }

/* Hero Section */
.hero { 
    background: linear-gradient(135deg, #1a1a7c 0%, #2e2ea8 100%); 
    height: 80vh; 
    display: flex; 
    align-items: center; 
    padding: 0 10%; 
    color: white; 
    position: relative; 
    overflow: hidden;
}

.hero-text h1 { font-size: 60px; font-family: 'Montserrat', sans-serif; margin-bottom: 30px; line-height: 1.1; }

.btn-read { 
    background: #e91e63; color: white; border: none; padding: 15px 40px; 
    font-size: 18px; border-radius: 5px; cursor: pointer; font-weight: bold;
}

.hero-image img { width: 450px; position: absolute; right: 5%; bottom: 50px; }

/* Pricing Cards */
.pricing { padding: 80px 5%; text-align: center; }
.pricing-grid { display: flex; justify-content: center; margin-top: 50px; }

.card { 
    background: white; width: 300px; padding: 40px 20px; border-radius: 10px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid #ddd;
}

.card-num { 
    width: 40px; height: 40px; border: 1px solid #000; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}

.price { font-size: 45px; font-weight: bold; color: #1a1a7c; margin: 15px 0; }
.price span { display: block; font-size: 14px; color: #555; }

.buy-now { 
    display: inline-block; background: #3f51b5; color: white; 
    padding: 10px 30px; text-decoration: none; border-radius: 5px; font-weight: bold; margin-top: 20px;
}