:root {
  --ink:#18231f;
  --muted:#52625c;
  --green:#176b50;
  --green-dark:#0f4b39;
  --mint:#eef9f5;
  --cream:#fffaf0;
  --line:#d8e4df;
  --warning:#8a5607;
  --shadow:0 12px 34px rgba(19,55,43,.10);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:#f5f8f6;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:17px;
  line-height:1.55;
}
a { color:inherit; }
button,select { font:inherit; }
.skip-link { position:absolute; left:-9999px; top:8px; }
.skip-link:focus { left:8px; z-index:20; padding:10px; background:#fff; }
.topbar {
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px max(14px,calc((100vw - 980px)/2));
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
}
.brand { display:flex; align-items:center; gap:10px; font-weight:900; color:var(--green-dark); text-decoration:none; }
.brand img { width:38px; height:38px; border-radius:10px; }
.language { display:flex; align-items:center; gap:8px; }
.language label { font-size:.88rem; font-weight:700; }
.language select { max-width:185px; padding:9px 30px 9px 10px; border:1px solid #a9bbb4; border-radius:10px; background:#fff; }
main { width:min(100% - 28px,980px); margin:0 auto; padding:26px 0 70px; }
.hero {
  padding:28px 20px;
  border-radius:22px;
  background:linear-gradient(145deg,#0f4b39,#1f7a5c);
  color:#fff;
  box-shadow:var(--shadow);
}
.hero h1 { margin:0 0 8px; font-size:clamp(2rem,7vw,3.25rem); line-height:1.08; }
.hero p { max-width:680px; margin:0; font-size:1.05rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.hero-actions a,.contact-button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:48px;
  padding:11px 16px;
  border-radius:12px;
  background:#fff;
  color:var(--green-dark);
  font-weight:800;
  text-decoration:none;
}
.review-note,.notice {
  margin:18px 0;
  padding:14px 16px;
  border-left:5px solid #d28a16;
  border-radius:10px;
  background:var(--cream);
  color:#5b3a06;
}
.review-note[hidden] { display:none; }
.quick-title { margin:28px 0 12px; }
.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.quick-grid a {
  display:flex;
  align-items:center;
  min-height:68px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--green-dark);
  font-weight:800;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(19,55,43,.05);
}
.guide-section {
  scroll-margin-top:80px;
  margin:24px 0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
}
.guide-section h2 { margin:0 0 8px; color:var(--green-dark); font-size:1.45rem; line-height:1.2; }
.section-intro { margin:0 0 14px; color:var(--muted); }
.steps { margin:0; padding:0; list-style:none; counter-reset:guide-step; }
.steps li { position:relative; min-height:42px; margin:10px 0; padding:8px 8px 8px 48px; }
.steps li::before {
  counter-increment:guide-step;
  content:counter(guide-step);
  position:absolute;
  left:0;
  top:5px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  font-weight:900;
}
.tip { margin:14px 0 0; padding:12px 14px; border-radius:10px; background:var(--mint); color:#184f3e; }
.guide-shot { margin:16px auto 0; max-width:420px; }
.guide-shot img { display:block; width:100%; height:auto; border:1px solid #cad8d2; border-radius:16px; box-shadow:0 8px 24px rgba(20,45,36,.12); }
.guide-shot figcaption { margin-top:7px; color:var(--muted); font-size:.88rem; text-align:center; }
.trouble-list { display:grid; gap:10px; }
.trouble-list details { border:1px solid var(--line); border-radius:12px; background:#fff; }
.trouble-list summary { padding:14px; cursor:pointer; font-weight:800; color:var(--green-dark); }
.trouble-list details p { margin:0; padding:0 14px 14px; }
footer { padding:24px 14px 42px; color:var(--muted); text-align:center; }
*:focus-visible { outline:3px solid #f0a92f; outline-offset:3px; }
@media (max-width:760px) {
  body { font-size:16px; }
  .topbar { align-items:flex-start; }
  .brand span { display:inline; }
  .language { align-items:flex-start; flex-direction:column; gap:2px; }
  main { width:min(100% - 20px,980px); padding-top:12px; }
  .hero { padding:23px 17px; border-radius:18px; }
  .hero-actions { display:grid; }
  .quick-grid { grid-template-columns:1fr 1fr; }
  .guide-section { padding:18px 15px; border-radius:15px; }
}
@media (max-width:390px) {
  .quick-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
