:root {
  --bg: #f5f7fa;
  --surface: rgba(255,255,255,0.78);
  --text: #163020;
  --muted: #5a6b6b;
  --primary: #2e7d32;
  --primary-2: #43a047;
  --accent: #66bb6a;
  --border: rgba(46,125,50,0.16);
  --shadow: 0 20px 45px rgba(8, 30, 15, 0.12);
}
body.dark {
  --bg: #07110b;
  --surface: rgba(14, 27, 21, 0.9);
  --text: #f4f9f4;
  --muted: #b7c9b8;
  --primary: #66bb6a;
  --primary-2: #43a047;
  --accent: #2e7d32;
  --border: rgba(255,255,255,0.1);
  --shadow: 0 20px 45px rgba(2, 8, 3, 0.3);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; font-family:'Inter', sans-serif; color:var(--text); background:linear-gradient(135deg, var(--bg), #eef7ee); min-height:100vh;
}
img { max-width:100%; display:block; }
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--primary-2); }
.container { width:min(1200px, 92%); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.7); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
body.dark .site-header { background:rgba(7,17,11,0.75); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; gap:1rem; }
.logo { font-weight:800; font-size:1.25rem; color:var(--primary); }
.nav-links, .nav-actions { display:flex; align-items:center; gap:1rem; }
.nav-links a { font-weight:600; color:var(--text); }
.search-box input, .contact-form input, .contact-form textarea, .sidebar-card input { width:100%; padding:0.75rem 1rem; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text); }
.contact-form textarea { border-radius:1rem; min-height:140px; }
.theme-toggle, .btn { border:none; border-radius:999px; padding:0.8rem 1.2rem; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; }
.theme-toggle { background:var(--surface); }
.btn { display:inline-block; font-weight:700; }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:white; box-shadow:var(--shadow); }
.btn-secondary { background:var(--surface); color:var(--text); border:1px solid var(--border); }
.btn:hover, .theme-toggle:hover { transform:translateY(-2px); }
.hero { padding:4rem 0 3rem; position:relative; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; }
.hero-content h1 { font-size:clamp(2.2rem, 4vw, 3.8rem); line-height:1.05; margin:.25rem 0 1rem; }
.eyebrow { text-transform:uppercase; letter-spacing:.22em; font-weight:700; color:var(--primary); font-size:.78rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin:1.5rem 0; }
.hero-stats { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; }
.hero-stats div { background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:1rem 1.25rem; min-width:120px; box-shadow:var(--shadow); }
.hero-visual { min-height:320px; position:relative; }
.orb { position:absolute; border-radius:50%; filter:blur(10px); opacity:.75; }
.orb-1 { width:220px; height:220px; background:radial-gradient(circle, var(--accent), transparent 70%); top:40px; left:40px; }
.orb-2 { width:180px; height:180px; background:radial-gradient(circle, var(--primary-2), transparent 75%); right:20px; bottom:20px; }
.glass-card { background:var(--surface); border:1px solid var(--border); border-radius:1.4rem; box-shadow:var(--shadow); backdrop-filter:blur(22px); }
.hero-card { padding:1.5rem; position:relative; z-index:2; margin-top:4rem; }
.section { padding:2rem 0 3rem; }
.section-heading { margin-bottom:1.5rem; }
.blog-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.5rem; }
.post-card { overflow:hidden; }
.post-card img { height:220px; width:100%; object-fit:cover; }
.post-card-body { padding:1.25rem; }
.post-category { color:var(--primary); font-weight:700; margin:.2rem 0; }
.meta-row { display:flex; flex-wrap:wrap; gap:1rem; color:var(--muted); font-size:.9rem; margin:1rem 0; }
.read-more { font-weight:700; }
.category-grid { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:1rem; }
.category-pill { padding:1rem; text-align:center; display:block; color:var(--text); font-weight:700; }
.page-shell { padding:3rem 0; }
.content-grid { display:grid; grid-template-columns:2fr 1fr; gap:2rem; }
.article-layout { align-items:start; }
.page-card { padding:2rem; }
.sidebar-card { padding:1.25rem; margin-bottom:1.2rem; }
.article-body img, .article-hero-image { border-radius:1.25rem; margin:1rem 0; }
.toc, .author-box { padding:1rem 1.25rem; margin:1rem 0; }
.tip-box, .warning-box { padding:1rem; border-radius:1rem; margin:1rem 0; }
.tip-box { background:rgba(67,160,71,.12); }
.warning-box { background:rgba(255,111,97,.12); }
table { width:100%; border-collapse:collapse; margin:1rem 0; }
th, td { border:1px solid var(--border); padding:.75rem; }
.faq-list details { margin:.75rem 0; padding:.8rem 1rem; background:var(--surface); border:1px solid var(--border); border-radius:1rem; }
.contact-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; }
iframe { width:100%; min-height:280px; border:0; border-radius:1rem; margin-top:1rem; }
.site-footer { padding:2rem 0 3rem; margin-top:2rem; }
.footer-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; }
.scroll-progress { position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--primary),var(--accent)); z-index:100; }
.status-message { padding:.75rem 1rem; border-radius:999px; background:rgba(67,160,71,.12); margin-bottom:1rem; }
@media (max-width: 980px) {
  .blog-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .category-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .hero-grid, .content-grid, .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
  .nav-wrap { flex-direction:column; align-items:flex-start; }
  .nav-links, .nav-actions { flex-wrap:wrap; }
  .blog-grid { grid-template-columns:1fr; }
  .category-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hero { padding-top:2rem; }
}