:root{
  --bg:#F7F3EE;
  --fg:#16352E;
  --green:#2F5D50;
  --green-2:#3E7A67;
  --card:#ffffff;
  --muted:#6b7a76;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: system-ui, Arial, sans-serif; background:var(--bg); color:var(--fg); line-height:1.6; font-size:18px}
img{max-width:100%; display:block}
.container{max-width:1100px; margin:0 auto; padding:0 16px}
.header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #e7e2db;}
.bar{display:flex; gap:16px; align-items:center; justify-content:space-between; padding:10px 0;}
.brand{display:flex; align-items:center; gap:10px}
.logo{width:36px; height:36px; display:grid; place-items:center; background:var(--green); color:#fff; border-radius:10px; font-weight:700}
.brand-title{font-weight:800; letter-spacing:.2px}
.brand-title .anja{font-size:22px}
.brand-title .jo{font-size:22px; text-transform:lowercase}
.nav{display:flex; gap:12px}
.nav a{padding:10px 12px; border-radius:999px; text-decoration:none; color:var(--green); font-weight:700}
.nav a:hover{outline:2px solid var(--green); background:var(--green); color:#fff;}
.burger{display:none; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid #d9d2c8; background:#fff; color:var(--green); font-weight:800}
.burger span{display:block; width:18px; height:2px; background:var(--green);}
.burger .burger-label{font-size:16px}
.drawer{position:fixed; inset:0; background:rgba(0,0,0,.3); display:none;}
.drawer.open{display:block}
.sheet{position:absolute; left:0; top:0; bottom:0; width:82%; max-width:320px; background:#fff; padding:14px; overflow:auto; box-shadow:4px 0 20px rgba(0,0,0,.1)}
.drawer a{display:block; padding:12px; border-radius:10px; text-decoration:none; color:var(--fg); font-weight:600}
.drawer a:hover{background:#eef3f1; outline:2px solid var(--green)}
.drawer-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem}
.close-btn{border:none; background:#fff; font-size:26px; line-height:1; padding:4px 8px; cursor:pointer}
.hero{padding:40px 0 10px}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:center}
.hero-img img{border-radius:20px; filter: drop-shadow(0 16px 30px rgba(0,0,0,.12));}
.tag{display:inline-block; padding:6px 10px; background:#e6f0ec; color:var(--green); border-radius:999px; font-weight:700; font-size:14px}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
.btn{display:inline-block; padding:12px 16px; border-radius:12px; text-decoration:none; background:var(--green); color:#fff; font-weight:800; text-align:center}
.btn.secondary{background:var(--green-2)}
.btn.block{display:block; width:100%}
.btn.lg{font-size:18px; padding:14px 18px; border-radius:16px}
.section{padding:26px 0}
.grid{display:grid; gap:18px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:1fr 1fr 1fr}
.card{background:var(--card); padding:16px; border-radius:16px; box-shadow:0 4px 18px rgba(0,0,0,.06)}
.rounded{border-radius:14px}
.link-list{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.link-card{display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid #e7e2db; padding:14px 16px; border-radius:12px; text-decoration:none; color:var(--fg); font-weight:700}
.link-card:hover{outline:2px solid var(--green);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-grid .wide{grid-column: span 2}
.label{font-weight:700; margin-bottom:6px}
input, textarea{width:100%; padding:12px 12px; border:1px solid #d9d2c8; border-radius:10px; font-size:18px; background:#fff}
.badge{display:inline-block; padding:6px 10px; background:#e6f0ec; color:var(--green); border-radius:999px; font-weight:700; font-size:14px}
.helper{color:var(--muted)}
.small{font-size:14px; color:var(--muted)}
.footer{margin-top:20px; border-top:1px solid #e7e2db; background:#fff; padding:10px 0}
/* Stars */
.stars{display:flex; gap:8px; font-size:34px; user-select:none}
.star{color:#c9c9c9; cursor:pointer}
.star.active{color:#e5b100}
/* Responsive */
@media (max-width: 900px){
  .nav{display:none}
  .burger{display:flex}
  .hero-grid{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
  .cols-3{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}