/* styles.css - clean, responsive layout */
:root{
  --accent:#008080;
  --bg:#f8fafc;
  --card:#ffffff;
  --muted:#6b7280;
}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; margin:0; background:var(--bg); color:#111827; line-height:1.5}
.header{background:linear-gradient(90deg,var(--accent),#008080); color:white; padding:28px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand svg{width:44px;height:44px}
.nav{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.nav a{color:rgba(255,255,255,0.95); text-decoration:none; padding:8px 10px; border-radius:8px}
.nav a:hover{background:rgba(255,255,255,0.08)}
.container{max-width:1100px; margin:28px auto; padding:0 18px}
.grid{display:grid; gap:18px}
.grid.cols-2{grid-template-columns:1fr 320px}
.card{background:var(--card); padding:18px; border-radius:12px; box-shadow:0 6px 18px rgba(11,15,25,0.06)}
.hero{display:flex; gap:20px; align-items:center; padding:28px; border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,0.35),transparent)}
.h1{font-size:28px;margin:0}
.p{color:var(--muted); margin-top:8px}
.footer{padding:28px 18px; color:var(--muted); text-align:center; margin-top:28px}
.btn{display:inline-block; background:#008080; color:white; padding:10px 14px; border-radius:10px; text-decoration:none}
.small{font-size:14px}
.form-row{display:flex; gap:12px; flex-wrap:wrap}
.input, textarea, select{width:100%; padding:10px;border:1px solid #e6eef6;border-radius:8px}
label{font-weight:600;font-size:13px;margin-bottom:6px;display:block}
footer .cols{display:flex; gap:18px; justify-content:center; flex-wrap:wrap}
@media(max-width:900px){.grid.cols-2{grid-template-columns:1fr}.header{flex-direction:column; align-items:flex-start}}
.notice{background:#fffbeb;border:1px solid #fde68a;padding:12px;border-radius:8px;color:#7c3aed}
.link-row{display:flex; gap:8px; flex-wrap:wrap}
.nav-cta{background:white;color:var(--accent);padding:8px 10px;border-radius:10px;font-weight:600}
.header a{font-size:1.2rem;}