:root {
  --green-950: #0b3d24;
  --green-800: #12643a;
  --green-600: #20a45a;
  --green-100: #e9f8ef;
  --purple-700: #6842c2;
  --purple-100: #f1ecff;
  --ink: #15231b;
  --muted: #607067;
  --line: #dfe9e2;
  --surface: rgba(255,255,255,.90);
  --shadow: 0 18px 50px rgba(25, 70, 42, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.62;
  background:
    radial-gradient(circle at 10% 5%, rgba(54, 210, 111, .17), transparent 28rem),
    radial-gradient(circle at 95% 15%, rgba(125, 82, 220, .15), transparent 30rem),
    #f8fbf9;
}
a { color: var(--purple-700); }
a:hover { text-decoration-thickness: 2px; }
.wrapper { width: min(1080px, calc(100% - 36px)); margin: auto; }
.site-header {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(16px);
  background: rgba(248, 251, 249, .86);
  border-bottom: 1px solid rgba(223,233,226,.85);
}
.nav { min-height: 72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--green-950); text-decoration:none; font-weight:850; font-size:1.2rem; }
.brand img { width:46px; height:46px; border-radius:12px; box-shadow: 0 6px 18px rgba(11,61,36,.15); }
.nav-links { display:flex; gap:22px; flex-wrap:wrap; }
.nav-links a { color:var(--green-950); text-decoration:none; font-weight:700; }
.hero { padding: 82px 0 66px; }
.hero-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:54px; align-items:center; }
.eyebrow { color:var(--green-800); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.82rem; }
h1 { font-size:clamp(2.65rem, 7vw, 5.2rem); line-height:1.02; letter-spacing:-.055em; margin:.18em 0; color:var(--green-950); }
h1 span { color:var(--purple-700); }
.lead { font-size:clamp(1.08rem, 2vw, 1.3rem); color:var(--muted); max-width:690px; }
.hero-icon { width:min(100%, 350px); border-radius:28%; display:block; margin:auto; box-shadow:var(--shadow); }
.actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.button { display:inline-block; text-decoration:none; padding:13px 19px; border-radius:999px; font-weight:800; border:1px solid transparent; }
.button.primary { background:linear-gradient(135deg,var(--green-600),var(--purple-700)); color:white; box-shadow:0 10px 25px rgba(76,74,183,.2); }
.button.secondary { background:white; color:var(--green-950); border-color:var(--line); }
.section { padding: 38px 0 76px; }
.section h2 { font-size:clamp(1.9rem,4vw,3rem); letter-spacing:-.035em; color:var(--green-950); margin:0 0 12px; }
.section-intro { color:var(--muted); max-width:760px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:24px; box-shadow:0 8px 28px rgba(23,58,37,.07); }
.card .icon { font-size:1.8rem; }
.card h3 { color:var(--green-950); margin:.5rem 0 .3rem; }
.card p { margin:0; color:var(--muted); }
.content { max-width:880px; padding:55px 0 85px; }
.content h1 { font-size:clamp(2.4rem,5vw,4rem); }
.content h2 { color:var(--green-950); margin-top:2.1rem; line-height:1.22; }
.content h3 { color:var(--green-800); margin-top:1.7rem; }
.content p, .content li { color:#34443a; }
.notice { background:var(--purple-100); border-left:5px solid var(--purple-700); padding:16px 18px; border-radius:10px; }
.faq details { background:white; border:1px solid var(--line); border-radius:16px; padding:16px 18px; margin:12px 0; }
.faq summary { cursor:pointer; font-weight:800; color:var(--green-950); }
.faq details p { margin-bottom:0; }
footer { border-top:1px solid var(--line); padding:30px 0 44px; color:var(--muted); }
.footer-row { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-links { display:flex; gap:18px; flex-wrap:wrap; }
.footer-links a { color:var(--green-800); }
.small { font-size:.91rem; color:var(--muted); }
@media (max-width:800px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-icon { width:220px; grid-row:1; }
  .grid { grid-template-columns:1fr; }
  .nav { align-items:flex-start; padding:12px 0; flex-direction:column; gap:9px; }
  .nav-links { gap:14px; font-size:.94rem; }
  .hero { padding-top:48px; }
}