:root { --ink:#17352f; --green:#196b55; --mint:#e8f2ed; --paper:#fbfaf6; --white:#ffffff; --line:#dce2dd; --muted:#66736e; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial, Helvetica, sans-serif; }
button,input,select { font:inherit; }
a { color:inherit; text-decoration:none; }
header { height:64px; max-width:1180px; margin:auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.03em; font-size:19px; }
.brand>span:last-child>span { color:var(--green); }
.brand-mark { width:30px; height:30px; display:grid; place-items:center; color:white; background:var(--green); border-radius:7px; font-size:9px; }
.header-note { color:var(--muted); font-size:12px; font-weight:700; }
.hero { max-width:1180px; margin:auto; padding:58px 24px 42px; }
.kicker,.eyebrow { margin:0; color:var(--green); font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:14px 0 18px; max-width:800px; font-family:Georgia,serif; font-size:clamp(45px,6vw,72px); line-height:.98; letter-spacing:-.05em; font-weight:600; }
h1 em { color:var(--green); font-weight:400; }
.hero>p:not(.kicker) { margin:0; max-width:620px; color:var(--muted); font-size:16px; line-height:1.55; }
.trust-row { display:flex; gap:10px; margin-top:24px; }
.trust-row span { padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--muted); font-size:10px; font-weight:800; }
.calculator-section { padding:0 24px 72px; }
.project-picker { max-width:1180px; margin:auto; padding:22px 0 16px; border-top:1px solid var(--line); display:flex; align-items:end; justify-content:space-between; gap:24px; }
.project-picker>div:first-child>p:last-child { max-width:480px; margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.tabs { display:flex; padding:4px; gap:3px; border:1px solid var(--line); background:#f1f3ef; border-radius:10px; }
.tabs button { min-height:38px; padding:0 14px; border:0; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; font-weight:800; white-space:nowrap; touch-action:manipulation; }
.tabs button:hover { color:var(--ink); }
.tabs button:focus-visible { outline:3px solid rgba(25,107,85,.2); outline-offset:2px; }
.tabs button.active { color:white; background:var(--green); box-shadow:0 1px 3px rgba(20,52,45,.18); }
.calculator-card { max-width:1180px; margin:auto; background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.calculator-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(260px,.7fr); min-height:400px; }
.form-panel { padding:34px 38px; }
.form-panel h2 { margin:7px 0 7px; font:600 30px/1.1 Georgia,serif; letter-spacing:-.035em; }
.description { margin:0; max-width:610px; color:var(--muted); font-size:13px; line-height:1.5; }
.fields { margin-top:24px; }
.field-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.field { display:grid; gap:7px; color:#465651; font-size:11px; font-weight:800; }
.field.wide { margin-top:15px; max-width:calc(33.333% - 10px); }
.input-wrap { height:43px; border:1px solid #cdd5d0; border-radius:7px; display:flex; align-items:center; background:#fff; overflow:hidden; }
.input-wrap:focus-within,select:focus { outline:3px solid rgba(25,107,85,.12); border-color:var(--green); }
.input-wrap input { width:100%; min-width:0; height:100%; border:0; outline:0; padding:0 12px; color:var(--ink); font-weight:800; background:transparent; }
.input-wrap b { white-space:nowrap; padding:0 10px; color:#75817c; border-left:1px solid var(--line); font-size:10px; }
select { width:100%; height:43px; border:1px solid #cdd5d0; border-radius:7px; padding:0 10px; color:var(--ink); font-weight:700; background:#fff; }
.tip { margin:17px 0 0; color:var(--muted); font-size:11px; line-height:1.5; display:flex; gap:8px; align-items:flex-start; }
.tip span { width:17px; height:17px; flex:0 0 auto; display:grid; place-items:center; background:var(--mint); color:var(--green); border-radius:50%; font:700 italic 10px Georgia,serif; }
.result-panel { margin:12px; padding:30px; border-radius:9px; background:var(--mint); display:flex; flex-direction:column; justify-content:center; }
.result-label { margin:0; color:var(--green); text-transform:uppercase; font-size:9px; letter-spacing:.13em; font-weight:900; }
.result-main { margin:16px 0 20px; display:flex; flex-direction:column; }
.result-number { font:600 clamp(55px,6vw,76px)/.9 Georgia,serif; letter-spacing:-.06em; }
.result-unit { margin-top:8px; font-size:13px; font-weight:800; }
.result-note { margin:0; padding-top:18px; border-top:1px solid rgba(25,107,85,.18); color:#476259; font-size:12px; line-height:1.55; }
.buy-note { margin:15px 0 0; color:var(--green); font-size:9px; font-weight:800; }
footer { max-width:1180px; margin:auto; padding:26px 24px 38px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:30px; }
footer small { max-width:520px; color:var(--muted); text-align:right; font-size:10px; line-height:1.5; }
@media (max-width:900px) { .project-picker { align-items:stretch; flex-direction:column; }.tabs { width:100%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }.tabs button { padding:0 8px; }.calculator-layout { grid-template-columns:1fr; }.result-panel { min-height:230px; }.field-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.field.wide { max-width:calc(50% - 8px); } }
@media (max-width:600px) { header { padding:0 18px; }.header-note { display:none; }.hero { padding:38px 18px 30px; }h1 { font-size:clamp(39px,12vw,46px); }.trust-row { flex-wrap:wrap; }.calculator-section { padding:0 12px 48px; }.project-picker { padding:18px 6px 14px; }.tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }.tabs button { min-height:44px; padding:0 8px; }.tabs button:last-child { grid-column:1 / -1; }.form-panel { padding:28px 20px; }.form-panel h2 { font-size:27px; }.field-grid { grid-template-columns:1fr; }.field.wide { max-width:none; }.input-wrap,select { height:46px; }.result-panel { margin:8px; padding:25px; }footer { margin:0 18px; padding:24px 0 32px; align-items:flex-start; flex-direction:column; }footer small { text-align:left; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }