body {margin:0; font-family:'Segoe UI',sans-serif; background:#0e0b16; color:#f4f4f4;}
header{background:linear-gradient(to right,#000,#1a1a1a);padding:3rem 1rem 2rem;text-align:center}
header h1{font-size:2.6rem;color:#ffd700;margin-bottom:1rem}
header p{font-size:1.2rem;max-width:680px;margin:auto}
.cta-banner{background:#ffd700;color:#111;padding:1rem 2rem;text-align:center;font-size:1.1rem;font-weight:bold}
.grid{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;padding:2rem 1rem}
.card{background:#1a1528;color:#f4f4f4;border:2px solid #ffd700;border-radius:14px;width:330px;padding:1.2rem;
box-shadow:0 0 15px rgba(255,215,0,0.4);display:flex;flex-direction:column;align-items:center;transition:transform 0.3s}
.card:hover{transform:scale(1.04)}
.card img{max-width:140px;max-height:90px;width:auto;height:auto;object-fit:contain;margin-bottom:1rem}
.card h3{font-size:1.4rem;margin:0.5rem 0;text-align:center;color:#ffd700}
.card ul{list-style:none;padding:0;margin:1rem 0;font-size:0.95rem}
.card ul li::before{content:"🎯 "}
.card p.desc{font-size:0.9rem;color:#ccc;text-align:center;margin:0.5rem 0 1rem}
.card a{margin-top:auto;background:linear-gradient(90deg,#ffd700,#ff3c00);color:#111;padding:0.8rem 1.6rem;
border-radius:30px;text-decoration:none;font-weight:600;display:inline-block;transition:background 0.3s}
.card a:hover{background:#cc2e00;color:#fff}
footer{background:#111;color:#999;text-align:center;font-size:0.9rem;padding:2rem 1rem}
@media(max-width:768px){header h1{font-size:2rem}.card{width:90%}}