:root{
  --bg:#f6f7f4;
  --card:#ffffff;
  --text:#1c1f1a;
  --muted:#5b6356;
  --brand:#3f5f1d;
  --brand2:#6a4b16;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(900px 300px at 20% 0%, rgba(63,95,29,.15), transparent 60%),
              radial-gradient(900px 300px at 80% 0%, rgba(106,75,22,.12), transparent 60%),
              var(--bg);
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.brand{display:flex; gap:12px; align-items:center;}
.brand__logo{width:44px; height:44px; border-radius:12px; object-fit:contain; background:#fff; box-shadow: 0 4px 10px rgba(0,0,0,.08); padding:6px;}
.brand__name{font-weight:800; letter-spacing:.3px}
.brand__tagline{font-size:13px; color:var(--muted)}

.nav{display:flex; gap:10px; align-items:center}
.nav__link{
  text-decoration:none; color:var(--text);
  padding:10px 12px; border-radius:12px;
  font-weight:650; font-size:14px;
  border:1px solid rgba(0,0,0,.07);
  background:rgba(255,255,255,.6);
}
.nav__link:hover{border-color: rgba(63,95,29,.4)}
.nav__link.is-active{background: rgba(63,95,29,.12); border-color: rgba(63,95,29,.45)}

.container{max-width:1100px; margin: 18px auto; padding: 0 16px 24px;}

.card{
  background:var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.06);
  padding: 22px;
  margin: 16px 0;
}

h1{margin:0 0 10px; font-size:32px; letter-spacing:-.2px}
.lead{margin: 0 0 18px; font-size:16px; color:var(--muted)}

.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px;}
.panel{border:1px solid rgba(0,0,0,.07); border-radius: 16px; padding: 14px; background: linear-gradient(180deg, rgba(63,95,29,.06), transparent 55%);} 
.panel h2{margin:0 0 8px; font-size:18px}
.panel ul, .panel ol{margin:0; padding-left:18px; color: var(--muted)}

.cta{display:flex; gap:12px; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(63,95,29,.45);
  background: linear-gradient(180deg, rgba(63,95,29,.95), rgba(63,95,29,.85));
  color:white; text-decoration:none; font-weight:750;
  box-shadow: 0 10px 18px rgba(63,95,29,.18);
  cursor:pointer;
}
.btn:hover{filter:brightness(1.03)}
.btn--ghost{background: rgba(255,255,255,.7); color: var(--brand); border-color: rgba(63,95,29,.35); box-shadow:none}

.form{display:flex; flex-direction:column; gap: 12px}
.form__row{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
.field{display:flex; flex-direction:column; gap:6px}
label{font-weight:650; font-size: 13px; color: var(--muted)}
input, select, textarea{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  outline: none;
  font-size: 14px;
  background: rgba(255,255,255,.9);
}
input:focus, select:focus, textarea:focus{border-color: rgba(63,95,29,.55); box-shadow: 0 0 0 4px rgba(63,95,29,.12)}
.err{color:#a01515; font-size: 13px}

.messages{display:flex; flex-direction:column; gap:10px}
.msg{padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(0,0,0,.1); background: rgba(255,255,255,.8)}
.msg--success{border-color: rgba(63,95,29,.35); background: rgba(63,95,29,.08)}
.msg--error{border-color: rgba(160,21,21,.35); background: rgba(160,21,21,.08)}

.notice{padding: 12px 14px; border-radius: 14px; border: 1px dashed rgba(0,0,0,.18); background: rgba(255,255,255,.6); color: var(--muted)}

.section{scroll-margin-top: 88px}

.footer{padding: 22px 16px 34px; color: var(--muted); text-align:center}
.footer a{color: var(--brand); text-decoration:none}

@media (max-width: 880px){
  .grid{grid-template-columns: 1fr}
  .form__row{grid-template-columns: 1fr}
  .topbar{gap: 10px; flex-wrap: wrap}
  h1{font-size: 26px}
}