:root{
  --text:#111827; --muted:#6b7280; --border:#e5e7eb; --bg:#fff; --alt:#f9fafb;
  --radius:16px; --container:1100px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--text); background:var(--bg); line-height:1.5;}
a{color:inherit;text-decoration:none;}
.container{max-width:var(--container); margin:0 auto; padding:0 16px;}
.site-header{position:sticky; top:0; background:rgba(255,255,255,.9); border-bottom:1px solid var(--border);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{font-weight:900;}
.site-nav{display:flex; gap:12px; color:var(--muted); font-weight:700;}
.site-nav a{padding:8px 10px; border-radius:10px;}
.site-nav a:hover{background:var(--alt); color:var(--text);}
.hero{padding:36px 0;}
.hero p{color:var(--muted); max-width:70ch;}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding-bottom:36px;}
.card{border:1px solid var(--border); border-radius:var(--radius); padding:16px; background:var(--bg);}
.card p{color:var(--muted); margin:0;}
.site-footer{border-top:1px solid var(--border); padding:22px 0;}
.footer-inner{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.muted{color:var(--muted);}
@media (max-width: 900px){ .grid{grid-template-columns:1fr;} }

.form-card{ max-width: 900px; }
.form{ max-width: 900px; }

.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

label span{
  display: block;
  font-weight: 800;
  margin-bottom: 6px;
}

input, textarea{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
}

input::placeholder, textarea::placeholder{
  color: #9ca3af;
}

.form-actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
}

/* simple button styling for this demo */
.btn{
  border: 1px solid var(--border);
  background: var(--alt);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}

.btn:hover{ filter: brightness(.98); }

@media (max-width: 760px){
  .form-row{ grid-template-columns: 1fr; }
}