:root { --ink:#172625; --muted:#60716d; --paper:#f7f8f4; --line:#dce3dc; --green:#176b52; --yellow:#e8c55a; --pale:#e8efe8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.55 "DM Sans",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { min-height:76px; padding:0 max(24px,calc((100% - 1200px)/2)); display:flex; align-items:center; justify-content:space-between; gap:28px; border-bottom:1px solid var(--line); background:rgba(247,248,244,.94); position:sticky; top:0; z-index:5; backdrop-filter:blur(10px); }
.brand { display:inline-flex; align-items:center; gap:9px; font:700 20px/1 "Manrope",sans-serif; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:27px; height:27px; border-radius:4px; background:var(--green); color:white; font-size:16px; }
nav { display:flex; gap:28px; color:#40524e; font-weight:600; }
nav a:hover,.header-email:hover,.text-link:hover,.contact-links a:hover { color:var(--green); }
.header-email { color:var(--green); font-weight:700; font-size:14px; }
.hero { max-width:1200px; margin:0 auto; min-height:640px; padding:74px 24px 60px; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.94fr); align-items:center; gap:58px; }
.eyebrow { margin:0 0 15px; color:var(--green); font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:.08em; }
h1,h2,h3 { margin:0; font-family:"Manrope",sans-serif; letter-spacing:0; }
h1 { max-width:650px; font-size:54px; line-height:1.08; }
h2 { max-width:650px; font-size:36px; line-height:1.18; }
h3 { font-size:20px; line-height:1.3; }
.hero-summary { max-width:580px; color:var(--muted); font-size:19px; margin:24px 0 30px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { min-height:47px; display:inline-flex; align-items:center; justify-content:center; padding:12px 19px; border:1px solid transparent; border-radius:5px; font:700 15px "DM Sans",sans-serif; cursor:pointer; }
.button-primary { background:var(--green); color:#fff; }
.button-primary:hover { background:#0f5641; }
.button-secondary { border-color:#b9c8be; color:var(--ink); background:transparent; }
.button-secondary:hover { background:var(--pale); }
.hero-facts { display:flex; gap:28px; margin:54px 0 0; }
.hero-facts div { border-left:2px solid var(--yellow); padding-left:11px; }
.hero-facts dt { color:var(--muted); font-size:12px; }
.hero-facts dd { margin:2px 0 0; font-weight:700; font-size:14px; }
.hero-visual { background:#eaf1ec; border:1px solid #d9e4db; overflow:hidden; }
.hero-visual img { width:100%; display:block; aspect-ratio:1.48; object-fit:cover; object-position:center; mix-blend-mode:multiply; }
.section { padding:88px max(24px,calc((100% - 1200px)/2)); }
.products { background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-intro > p:not(.eyebrow),.support-copy > p:not(.eyebrow),.contact-heading > p:not(.eyebrow) { max-width:650px; color:var(--muted); margin:17px 0 0; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:42px; }
.product-grid article { min-height:218px; padding:25px; background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--green); border-radius:5px; }
.product-number { color:var(--green); margin:0 0 28px; font-weight:700; font-size:13px; }
.product-grid article p:last-child { color:var(--muted); margin:14px 0 0; font-size:15px; }
.product-note { color:var(--muted); font-size:13px; margin:21px 0 0; }
.support { display:grid; grid-template-columns:minmax(260px,.72fr) 1fr; align-items:stretch; gap:78px; background:#e5eee5; }
.support-photo { min-height:450px; overflow:hidden; background:#c9d7c9; }
.support-photo img { width:100%; height:100%; display:block; object-fit:cover; object-position:center top; filter:saturate(.9); }
.support-copy { align-self:center; }
.support-copy ul { list-style:none; margin:27px 0; padding:0; }
.support-copy li { padding:10px 0 10px 28px; border-bottom:1px solid #c7d5c9; position:relative; }
.support-copy li::before { content:""; width:8px; height:8px; background:var(--green); position:absolute; left:1px; top:18px; border-radius:50%; }
.text-link { color:var(--green); font-weight:700; }
.contact { display:grid; grid-template-columns:.85fr 1fr; gap:82px; background:#1c2f2d; color:#f7f8f4; }
.contact .eyebrow { color:#e8c55a; }
.contact-heading > p:not(.eyebrow) { color:#c4d1cc; }
.contact-links { display:flex; flex-direction:column; gap:9px; margin-top:30px; color:#fff; font-weight:700; }
.contact-links a { text-decoration:underline; text-underline-offset:4px; }
form { display:grid; gap:16px; }
label { display:grid; gap:7px; font-weight:700; font-size:14px; }
input,textarea { width:100%; padding:12px; border:1px solid #7d918a; border-radius:4px; color:var(--ink); background:#fff; font:16px "DM Sans",sans-serif; resize:vertical; }
input:focus,textarea:focus { outline:3px solid rgba(232,197,90,.5); outline-offset:1px; }
form .button { justify-self:start; background:var(--yellow); color:#1c2f2d; }
form .button:hover { background:#f2d477; }
.form-note { margin:0; color:#c4d1cc; font-size:13px; }
footer { max-width:1200px; margin:0 auto; padding:26px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; color:var(--muted); font-size:13px; }
footer p { margin:0; }
@media (max-width:760px) { .site-header { padding:0 18px; min-height:65px; } nav,.header-email { display:none; } .hero { min-height:auto; grid-template-columns:1fr; padding:55px 20px 48px; gap:35px; } h1 { font-size:40px; } h2 { font-size:29px; } .hero-summary { font-size:17px; } .hero-facts { gap:18px; margin-top:38px; flex-wrap:wrap; } .hero-visual { margin:0 -4px; } .section { padding:64px 20px; } .product-grid { grid-template-columns:1fr; margin-top:30px; } .product-grid article { min-height:0; } .support,.contact { grid-template-columns:1fr; gap:38px; } .support-photo { min-height:380px; max-height:460px; } footer { padding:24px 20px; align-items:flex-start; flex-direction:column; gap:9px; } }