:root{
  --bg:#f7fafc;
  --bg-alt:#ffffff;
  --text:#1e2a3a;
  --muted:#5b6b7a;
  --line:#e6edf3;
  --accent:#2b8a6e;
  --accent-ink:#0f3e32;
  --shadow:0 6px 24px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.05);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,sans-serif;
  color:var(--text); background:var(--bg);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{width:min(1120px,92vw); margin-inline:auto}

/* Header */
.site-header{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{font-weight:700; letter-spacing:.2px; color:var(--text); text-decoration:none}
.nav{display:flex; gap:20px; align-items:center}
.nav a{color:var(--text); text-decoration:none}
.nav a:hover{color:var(--accent)}
.btn{display:inline-block; background:var(--accent); color:#fff; padding:12px 20px; border-radius:10px; text-decoration:none; box-shadow:var(--shadow)}
.btn:hover{background:#24755e}
.btn-small{padding:8px 14px; border-radius:8px}
.link{color:var(--accent); text-decoration:none}
.link:hover{text-decoration:underline}

.nav-toggle{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:10px; background:#fff; align-items:center; justify-content:center}
.nav-toggle .bar{display:block; width:20px; height:2px; background:var(--text); margin:3px 0; border-radius:2px}

/* Hero */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(1200px 600px at 120% -20%, #e7f6f0 0%, transparent 60%),
  radial-gradient(900px 500px at -10% 20%, #eef5ff 0%, transparent 60%);
}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; padding:64px 0}
.hero h1{font-size:clamp(28px,3.2vw,44px); line-height:1.15; margin:0 0 10px}
.hero p{color:var(--muted); margin:0 0 18px}
.hero-cta{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:10px 0 6px}
.trust-points{display:flex; gap:16px; padding:0; margin:18px 0 0; list-style:none; color:var(--muted)}
.trust-points li{padding-left:0}
.hero-art{min-height:280px; position:relative}
.hero-art .paws{position:absolute; inset:0; background:
  radial-gradient(circle at 20% 30%, rgba(43,138,110,.15) 0 10%, transparent 11%),
  radial-gradient(circle at 55% 60%, rgba(43,138,110,.12) 0 10%, transparent 11%),
  radial-gradient(circle at 75% 25%, rgba(43,138,110,.10) 0 10%, transparent 11%),
  radial-gradient(circle at 35% 80%, rgba(43,138,110,.08) 0 10%, transparent 11%);
  filter:saturate(110%);
}

/* Sections */
.section{padding:64px 0; border-top:1px solid var(--line)}
.section.alt{background:var(--bg-alt)}
.section h2{font-size:clamp(24px,2.4vw,34px); margin:0 0 8px}
.section-intro{color:var(--muted); margin:0 0 24px}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow)}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0 0 10px; color:var(--muted)}
.card ul{margin:0; padding-left:18px; color:var(--muted)}

/* Highlights */
.highlights{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:16px}
.highlights > div{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px}
.highlights h3{margin:0 0 6px; font-size:17px}
.highlights p{margin:0; color:var(--muted)}

/* FAQ */
.faq-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
details{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px}
summary{cursor:pointer; font-weight:600}
details p{margin:8px 0 0; color:var(--muted)}

/* CTA */
.cta{background:linear-gradient(180deg,#f2faf7, #ffffff)}
.cta-inner{background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:var(--shadow); text-align:center}
.contact-line{margin:6px 0 18px}
.contact-line span{color:var(--muted); margin-right:6px}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:18px 0; background:#fff}
.footer-inner{display:flex; align-items:center; justify-content:space-between; color:var(--muted)}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr; padding:42px 0}
  .cards{grid-template-columns:1fr 1fr}
  .highlights{grid-template-columns:1fr 1fr}
  .faq-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav{position:absolute; right:16px; top:64px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; flex-direction:column; gap:12px; display:none; box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav-toggle{display:flex}
  .cards{grid-template-columns:1fr}
  .highlights{grid-template-columns:1fr}
}