:root { --bg:#f2f6f5; --ink:#14201d; --muted:#4a5c57; --brand:#0f9f7a; --brand-deep:#0a6a58; --accent:#f19f38; --card:#fff; --line:#d8e4df; }
        * { box-sizing:border-box; }
        body { margin:0; font-family:"Manrope", sans-serif; color:var(--ink); background:var(--bg); }
        .wrap { width:min(1080px, 92vw); margin:0 auto; }
        .nav { padding:20px 0 10px; display:flex; justify-content:space-between; align-items:center; gap:14px; }
        .brand img { height:54px; object-fit:contain; }
        .nav-actions { display:inline-flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
        .btn { border:1px solid transparent; border-radius:12px; padding:11px 16px; text-decoration:none; font-weight:800; font-size:14px; display:inline-flex; align-items:center; justify-content:center; }
        .btn-outline { color:var(--ink); border-color:#b8c8c1; background:#fff; }
        .btn-primary { color:#fff; background:linear-gradient(120deg, var(--brand), var(--brand-deep)); box-shadow:0 12px 28px rgba(10,106,88,.2); }
        .hero { padding:42px 0 18px; display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center; }
        .eyebrow { color:#0b6f5e; font-weight:800; font-size:13px; }
        h1 { font-family:"Sora", sans-serif; font-size:clamp(32px, 4.6vw, 56px); line-height:1.05; margin:10px 0 14px; }
        .lead { color:var(--muted); font-size:clamp(16px, 1.5vw, 19px); line-height:1.6; margin:0; }
        .hero-cta { margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }
        .preview { border:1px solid var(--line); border-radius:18px; background:#fff; padding:10px; box-shadow:0 18px 44px rgba(15,31,26,.14); cursor:zoom-in; }
        .preview img { width:100%; border-radius:12px; display:block; }
        .image-viewer { position:fixed; inset:0; z-index:999; background:rgba(7,12,11,.82); display:none; align-items:center; justify-content:center; padding:20px; }
        .image-viewer.open { display:flex; }
        .image-viewer img { max-width:min(1200px, 95vw); max-height:88vh; width:auto; height:auto; border-radius:14px; border:1px solid rgba(255,255,255,.28); box-shadow:0 18px 44px rgba(0,0,0,.35); background:#fff; }
        .image-viewer-close { position:absolute; top:14px; right:16px; width:38px; height:38px; border:none; border-radius:10px; background:rgba(255,255,255,.12); color:#fff; font-size:26px; line-height:1; cursor:pointer; }
        .section { margin:28px 0; padding:28px 0; border-top:1px solid var(--line); }
        .section h2 { font-family:"Sora", sans-serif; font-size:clamp(24px, 3vw, 34px); margin:0 0 10px; }
        .section p { color:var(--muted); line-height:1.65; margin:0 0 16px; }
        .benefit-list { margin:4px 0 0; padding-left:20px; color:#26413a; display:grid; gap:8px; }
        .benefit-list li { line-height:1.45; font-weight:800; }
        .faq { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
        .faq article { background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px; }
        .faq h3 { margin:0 0 7px; font-size:17px; }
        .faq p { margin:0; font-size:14px; }
        .related { display:flex; gap:10px; flex-wrap:wrap; }
        .final { margin:34px 0 38px; padding:28px; border-radius:18px; color:#fff; background:linear-gradient(135deg, #0f9f7a 0%, #0d7f67 58%, #0a6a58 100%); text-align:center; }
        .final h2 { font-family:"Sora", sans-serif; margin:0 0 10px; }
        .final p { margin:0 0 18px; opacity:.96; }
        .final .btn-primary { background:#fff; color:#0b6f5e; box-shadow:none; }
        footer { padding:8px 0 28px; color:#5f716c; font-size:13px; text-align:center; }
        footer a { color:#315e54; font-weight:800; text-decoration:none; }
        @media (max-width: 860px) { .hero { grid-template-columns:1fr; padding-top:26px; } .faq { grid-template-columns:1fr; } }
        @media (max-width: 560px) { .nav { align-items:flex-start; } .brand img { height:48px; } .nav-actions .btn-primary { display:none; } }