*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;color:#222;background:#fff}
.hero{background:linear-gradient(135deg,#f7c600,#ffdf4d);padding:20px 0 100px}
.nav{max-width:1100px;margin:auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}
.logo{font-size:28px;font-weight:700}
.hero-content{max-width:800px;margin:80px auto 0;text-align:center;padding:0 20px}
.hero-content h1{font-size:52px;margin:0 0 20px}
.hero-content p{font-size:20px;margin-bottom:30px}
.btn{display:inline-block;background:#111;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:700}
.btn:hover{opacity:.9}
.btn-large{padding:16px 32px;font-size:18px}
section{padding:80px 20px}
h2{text-align:center;font-size:38px;margin:0 0 40px}
.grid{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.card,.plan{background:#fff;border:1px solid #eee;border-radius:16px;padding:30px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.featured{border:3px solid #f7c600;transform:scale(1.03)}
.price{font-size:36px;font-weight:700;color:#f0b400;margin:15px 0}
ul{list-style:none;padding:0;margin:0 0 20px}
li{padding:8px 0;border-bottom:1px solid #f2f2f2}
.cta{background:#111;color:#fff;text-align:center}
footer{background:#000;color:#bbb;text-align:center;padding:25px}
@media(max-width:768px){.hero-content h1{font-size:36px}.hero-content p{font-size:18px}}
/* Existing CSS above... */

/* Footer Styling */
footer {
    background: #000;
    color: #bbb;
    text-align: center;
    padding: 25px 20px;
    line-height: 1.8;
    font-size: 15px;
}

footer p {
    margin: 6px 0;
}

footer strong {
    color: #f7c600;
    font-size: 20px;
}

footer a {
    color: #f7c600;
    text-decoration: none;
    font-weight: 700;
}

footer a:hover {
    text-decoration: underline;
}