:root { color-scheme: light; --page-font: "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-family: var(--page-font); color: #12201a; background: #eef4f0; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 80% -10%, #d5f5df 0, transparent 36%), #eef4f0; }
button { font: inherit; cursor: pointer; }
.page-root { max-width: 760px; min-height: 100vh; margin: 0 auto; padding: 22px 18px 42px; }
.block { margin: 14px 0; padding: 24px; border: 1px solid #d5e5dc; border-radius: 16px; background: rgba(255,255,255,.9); box-shadow: 0 16px 40px rgba(30,76,52,.06); }
.hero-block { min-height: 410px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: linear-gradient(145deg, #071b14 0%, #123b29 58%, #55d889 180%); color: #fff; }
.hero-block.has-hero-image { position: relative; isolation: isolate; }
.hero-image { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.hero-block h1 { max-width: 620px; margin: 12px 0; font-size: clamp(38px, 8vw, 72px); line-height: .98; letter-spacing: -2px; }
.hero-block p { max-width: 500px; color: #cde8d7; font-size: 17px; line-height: 1.55; }
.eyebrow, .section-head span, .contact-block > span { color: #12b76a; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.section-head h2 { margin: 8px 0 0; font-size: 28px; line-height: 1.05; }
.primary-cta, .secondary-cta { min-height: 48px; padding: 0 18px; border-radius: 10px; border: 0; font-weight: 800; }
.primary-cta { width: fit-content; background: var(--accent, #12b76a); color: #062315; }
.secondary-cta { border: 1px solid #9cc9ad; background: transparent; color: #116437; }
.brand-grid, .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
.brand-grid div { min-height: 74px; display: grid; place-items: center; border: 1px solid #d5e5dc; border-radius: 10px; font-size: 14px; font-weight: 900; letter-spacing: .06em; }
.product-placeholder { min-height: 190px; display: grid; place-content: center; gap: 8px; margin-top: 20px; border: 1px dashed #90bca0; border-radius: 12px; background: #f3fbf5; text-align: center; color: #387254; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.product-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; background: #edf4ef; }
.product-placeholder b { color: #173c27; }
.trust-grid div { display: grid; gap: 7px; padding: 16px; border-radius: 10px; background: #f1f8f3; }
.trust-grid strong { color: #12b76a; font-size: 12px; }
.trust-grid span { font-weight: 700; }
.contact-block { background: #062319; color: #f4fff7; }
.contact-block h2 { max-width: 480px; margin: 10px 0 18px; font-size: 34px; line-height: 1.05; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.page-footer { padding: 24px 4px; color: #5c7a68; font-size: 13px; }
.loading, .error-state { padding: 60px 20px; text-align: center; color: #547061; }
@media (max-width: 540px) { .page-root { padding: 10px 10px 28px; } .block { padding: 18px; border-radius: 12px; } .hero-block { min-height: 370px; } .hero-block h1 { font-size: 42px; } .contact-block h2 { font-size: 28px; } .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }