/* Reset e base */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:'Poppins', sans-serif; background:#f8f8f8; color:#333; line-height:1.6;}
a {text-decoration:none; color:inherit;}
ul {list-style:none;}

/* Header */
header {background:#111; color:#fff; padding:15px 0; position:relative;}
.navbar {display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:auto; padding:0 20px;}
.nav-links a {margin-left:20px; transition:color 0.3s;}
.nav-links a:hover {color:#ff6b6b;}
.logo {font-size:1.5rem; font-weight:700;}

/* Carrello */
.cart-dropdown {position:relative;}
#cart-toggle {background:none; border:none; color:#fff; cursor:pointer; font-size:1rem;}
#cart-dropdown-content {display:none; position:absolute; right:0; top:40px; background:#fff; color:#333; padding:15px; border-radius:8px; width:250px; box-shadow:0 8px 25px rgba(0,0,0,0.2); z-index:100;}
#cart-dropdown-content ul {padding-left:0;}
#cart-dropdown-content li {margin-bottom:8px;}

/* Hero */
.hero {background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('../images/hero.jpg') center/cover no-repeat; color:#fff; padding:120px 20px; text-align:center;}
.hero h1 {font-size:2.8rem; margin-bottom:20px;}
.hero p {font-size:1.2rem;}

/* Sections */
.section {padding:80px 20px;}
.section-title {text-align:center; margin-bottom:60px;}
.section-title h2 {font-size:2rem; margin-bottom:10px;}
.section-title p {color:#666;}

/* Features */
.features {display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between;}
.feature-card {background:#fff; padding:30px; flex:1 1 calc(33% - 20px); border-radius:12px; text-align:center; transition:transform 0.3s, box-shadow 0.3s;}
.feature-card:hover {transform:translateY(-10px); box-shadow:0 8px 25px rgba(0,0,0,0.1);}
.feature-icon {font-size:2rem; margin-bottom:15px; color:#ff6b6b;}

/* Pricing Cards */
.pricing-plans {display:flex; flex-wrap:wrap; gap:20px; justify-content:center;}
.pricing-card {background:#fff; border-radius:12px; flex:1 1 calc(25% - 20px); text-align:center; padding:30px 20px; position:relative; transition:transform 0.3s, box-shadow 0.3s;}
.pricing-card.popular {border:2px solid #ff6b6b;}
.popular-tag {position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:#ff6b6b; color:#fff; padding:5px 15px; font-size:0.8rem; border-radius:20px;}
.pricing-card:hover {transform:translateY(-10px); box-shadow:0 8px 25px rgba(0,0,0,0.1);}
.pricing-header h3 {font-size:1.5rem; margin-bottom:10px;}
.price {font-size:2rem; margin-bottom:10px;}
.price span {font-size:1rem; color:#666;}
.pricing-features ul li {margin:12px 0;}
.pricing-features ul li i {color:#ff6b6b; margin-right:8px;}

/* Buttons */
.btn {display:inline-block; padding:10px 25px; border-radius:8px; font-weight:500; cursor:pointer; transition:background 0.3s;}
.btn-primary {background:#ff6b6b; color:#fff; border:none;}
.btn-primary:hover {background:#e65c5c;}

/* Footer */
footer {background:#111; color:#fff; padding:60px 20px 20px 20px;}
.footer-content {display:flex; flex-wrap:wrap; gap:40px; max-width:1200px; margin:auto;}
.footer-column h3 {margin-bottom:20px;}
.footer-links li {margin-bottom:12px;}
.footer-bottom {text-align:center; margin-top:30px; font-size:0.9rem; color:#aaa;}

/* Modal checkout */
.modal {position:fixed; inset:0; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; z-index:200;}
.modal-content {background:#fff; padding:24px; border-radius:10px; width:420px; max-width:95%; position:relative; box-shadow:0 8px 30px rgba(0,0,0,0.2);}
.modal-close {position:absolute; top:10px; right:10px; background:none; border:none; font-size:1.6rem; cursor:pointer;}
.form-row {margin-bottom:12px; display:flex; flex-direction:column;}
.form-row label {margin-bottom:6px; font-weight:600; color:#333;}
.form-row input, .form-row select {padding:10px; border:1px solid #ddd; border-radius:6px; font-size:0.95rem;}
.form-actions {display:flex; gap:10px; justify-content:flex-end; margin-top:10px;}
#modal-order-summary {margin-bottom:12px; color:#333; font-size:0.95rem;}

/* Responsive */
@media (max-width:1024px){.features,.pricing-plans,.footer-content{flex-direction:column;align-items:center;}.feature-card,.pricing-card{flex:1 1 100%;}}