:root {
  --bg: #f3fbf8;
  --ink: #0f2a22;
  --muted: #4b6a60;
  --line: #cde3db;
  --accent: #0f8f6a;
  --accent-2: #0a6d52;
  --card: #ffffff;
}
* { box-sizing: border-box; }
body { margin:0; font-family:"Inter","Segoe UI",sans-serif; color:var(--ink); background:linear-gradient(180deg,#f7fffc 0,#eefaf5 60%,#e7f4ef 100%); line-height:1.6; }
img { max-width:100%; display:block; height:auto; object-fit:cover; object-position:center; }
a{ color:inherit; text-decoration:none; }
.shell{ width:min(1120px,92%); margin:0 auto; }
.site-header{position:sticky; top:0; z-index:20; backdrop-filter: blur(10px); background:rgba(247,255,252,.82); border-bottom:1px solid var(--line);} 
.nav{ min-height:72px; display:flex; align-items:center; justify-content:space-between; }
.brand{ font-family:"Space Grotesk","Inter",sans-serif; font-weight:700; letter-spacing:.04em; }
.nav-links{ display:flex; gap:20px; }
.nav-toggle{ display:none; border:1px solid var(--line); background:#fff; width:40px; height:36px; font-size:20px; border-radius:10px; }
.hero{ display:grid; grid-template-columns:1fr 1fr; gap:36px; padding:68px 0 44px; align-items:center; }
.hero-copy h1{ font-family:"Space Grotesk","Inter",sans-serif; font-size:clamp(2rem,4vw,3.4rem); line-height:1.05; margin:0 0 14px; }
.kicker{ text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-size:.78rem; }
.hero-media{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:12px; box-shadow:0 20px 44px rgba(15,42,34,.08); }
.hero-media img,.feature-panel img{ aspect-ratio:16/9; border-radius:14px; }
.cta-stack{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px; font-weight:700; border:1px solid transparent; }
.btn-solid{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; }
.btn-ghost{ border-color:var(--line); background:#fff; }
.section{ padding:54px 0; border-top:1px solid var(--line); }
.outcomes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.outcomes .card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; }
.feature-band{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.feature-panel{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; }
.faq-list details{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.blog-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.blog-grid img{ aspect-ratio:1/1; border-radius:12px; border:1px solid var(--line); }
.blog-post-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; }
.post-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.post-card h2,.post-card h3{ margin:0; font-family:"Space Grotesk","Inter",sans-serif; line-height:1.2; }
.post-meta{ font-size:.86rem; color:var(--muted); }
.post-card p{ margin:0; color:var(--muted); }
.post-link{ font-weight:700; color:var(--accent-2); }
.section-header{ display:flex; align-items:end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.blog-article{ max-width:780px; margin:0 auto; }
.blog-article h1{ font-family:"Space Grotesk","Inter",sans-serif; line-height:1.15; margin-bottom:8px; }
.blog-article h2{ margin-top:28px; font-family:"Space Grotesk","Inter",sans-serif; }
.blog-article p,.blog-article li{ color:#1d3c33; }
.blog-article ul{ padding-left:20px; }
.breadcrumbs{ margin:16px 0 0; font-size:.9rem; color:var(--muted); }
.site-footer{ border-top:1px solid var(--line); padding:26px 0 40px; color:var(--muted); }
.footer-wrap{ display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
@media (max-width: 920px){ .hero{grid-template-columns:1fr;} .outcomes,.feature-band,.blog-post-grid{grid-template-columns:1fr;} .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width: 760px){ .nav-toggle{display:block;} .nav-links{position:absolute; left:4%; right:4%; top:72px; display:none; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px;} .nav-links.open{display:flex;} }