body{margin:0;font-family:'Segoe UI',Arial,sans-serif;background:#f8fafc;color:#1a1a1a}
header, .hero{background:linear-gradient(135deg,rgba(0,31,63,.85),rgba(0,51,102,.9)),url('solar-install.jpg') center/cover no-repeat !important;height:75vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;padding:20px}
header h1, .hero h1{font-size:2.4rem;margin:0 0 12px;letter-spacing:1.5px;font-weight:700}
header h2, .hero h2{color:#ffd700;font-size:1.3rem;margin:0 0 18px;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.4)}
.btn{display:inline-block;padding:16px 32px;margin:10px;border-radius:10px;text-decoration:none;font-weight:700;font-size:1.05rem;box-shadow:0 6px 18px rgba(0,31,63,.25);transition:all .3s;border:2px solid transparent}
.btn-call{background:#003366;color:#ffd700;border-color:#ffd700}
.btn-whatsapp{background:#ffd700;color:#003366;border-color:#003366}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,31,63,.35)}
section{padding:50px 20px;max-width:1100px;margin:auto;text-align:center}
h3{font-size:1.8rem;color:#003366;margin-bottom:25px;font-weight:700}

/* 2 CARDS PER LINE GRID - matches your HTML class="card" */
##packages .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max->
...
@media(max-width:768px){#packages .grid{grid-template-columns:1fr}}-width:900px;margin:30px auto 0}
.card{background:#fff;border-radius:12px;padding:25px;box-shadow:0 4px 15px rgba(0,0,0,.08);border-top:4px solid #003366;text-align:center;transition:transform .3s}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,31,63,.15)}
.card h3{color:#003366;font-size:1.3rem;margin:0 0 10px}
.card .price{color:#25D366;font-size:1.5rem;font-weight:700;margin:10px 0}
.card .specs{line-height:1.8;font-size:.95rem;color:#444}

/* MOBILE: 1 per line */
@media(max-width:768px){#packages .grid{grid-template-columns:1fr}} 
p{line-height:1.7;font-size:1.05rem}