:root {
  --main:#2b6cb0;
  --accent:#38b2ac;
  --dark:#1a202c;
}
body {
  margin:0;
  font-family: 'Segoe UI', sans-serif;
  background:#f5f7fa;
  color:#333;
}
header {
  background:var(--dark);
  color:#fff;
  padding:1rem 0;
}
header .container {
  max-width:1100px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
header h1 { margin:0; }
nav a, nav button {
  color:#fff;
  margin-left:1rem;
  text-decoration:none;
  background:none;
  border:none;
  cursor:pointer;
  font-size:1rem;
}
nav a:hover, nav button:hover { color:var(--accent); }

.hero {
  background:linear-gradient(135deg,var(--main),var(--accent));
  color:#fff;
  padding:4rem 1rem;
  text-align:center;
}
.hero .btn {
  background:#fff;
  color:var(--main);
  padding:.7rem 1.5rem;
  border-radius:5px;
  text-decoration:none;
  font-weight:bold;
}
.container { max-width:1100px; margin:auto; padding:1rem; }

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.5rem;
}
.product {
  background:#fff;
  border-radius:10px;
  padding:1rem;
  text-align:center;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
}
.product img {
  max-width:100%;
  border-radius:8px;
}
.product button {
  background:var(--main);
  color:#fff;
  border:none;
  padding:.5rem 1rem;
  border-radius:5px;
  margin-top:.5rem;
  cursor:pointer;
}
.product button:disabled {
  background:#aaa;
  cursor:not-allowed;
}

.modal {
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,.5);
  display:flex;
  justify-content:center;
  align-items:center;
}
.modal.hidden { display:none; }
.modal-content {
  background:#fff;
  padding:2rem;
  border-radius:10px;
  width:90%;
  max-width:500px;
  position:relative;
}
.close {
  position:absolute;
  top:.5rem;
  right:.5rem;
  cursor:pointer;
  font-size:1.5rem;
}

.btn {
  display:inline-block;
  background:var(--main);
  color:#fff;
  border:none;
  padding:.7rem 1.5rem;
  border-radius:5px;
  cursor:pointer;
  text-decoration:none;
}
.btn.green { background:var(--accent); }

.form-container {
  max-width:400px;
}
form input {
  width:100%;
  padding:.7rem;
  margin:.5rem 0;
  border:1px solid #ccc;
  border-radius:5px;
}
.note { font-size:.8rem; color:#666; }

footer {
  text-align:center;
  padding:1rem;
  background:#e2e8f0;
  margin-top:2rem;
}