/* GLOBAL */
* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Urbanist', sans-serif; background: linear-gradient(180deg, #e3f2fd, #fff); color: #1a1a1a; scroll-behavior: smooth; }

header {
  background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.1)), url('images/exterior-clean.jpg') center/cover no-repeat;
  height: 100vh; display:flex; align-items:center; justify-content:center; text-align:center; color:white;
}
.hero-content h1 {
  font-size:3.5rem; background: linear-gradient(to right, #00bcd4, #4caf50);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.btn {
  padding: 1rem 2.5rem; background-color: #00bcd4; color: #fff; font-weight: 700;
  border:none; border-radius:50px; cursor:pointer; transition:all 0.3s ease-in-out;
  margin:10px;
}
.btn:hover { background:#4caf50; }

section { padding:5rem 2rem; text-align:center; }
.highlight { background-color:#e0f7fa; }

.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr)); gap:2rem; margin-top:2rem; }
.card { background:#fff; padding:2rem; border-radius:20px; box-shadow:0 8px 20px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform:translateY(-10px); box-shadow:0 12px 25px rgba(0,0,0,0.12); }

.features { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; margin-top:3rem; }
.features li { list-style:none; padding:1rem 1.5rem; background:#4caf50; color:white; border-radius:8px; font-weight:500; }

footer { background:#1a1a1a; color:#fff; padding:2rem 1rem; }

/* MODAL */
#quoteModal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); justify-content:center; align-items:center; z-index:1000; }
.modal-content { background:white; padding:2rem; border-radius:15px; max-width:600px; width:90%; text-align:left; overflow-y:auto; max-height:90vh; }

.option-list label { display:block; margin:8px 0; cursor:pointer; }
.form-section input, .form-section select { width:100%; margin-bottom:1rem; padding:0.8rem; border:1px solid #ccc; border-radius:8px; }

/* ORDER BUTTON */
#orderSection button { margin-top:0.5rem; background-color:#00bcd4; color:white; font-weight:700; border:none; border-radius:50px; padding:0.8rem 2rem; cursor:pointer; transition:all 0.3s ease-in-out; }
#orderSection button:hover { background-color:#4caf50; }
#orderSuccess { font-size:1rem; }