@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap");
:root { --ink:#17343c; --paper:#f4f8f7; --white:#fff; --muted:#64777b; --line:rgba(23,52,60,.15); --accent:#2f7d7a; --soft:#dfeceb; --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 "DM Sans",system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
.container { width:min(calc(100% - 42px),var(--max)); margin:auto; }
.page-header { height:78px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); padding-inline:max(21px,calc((100vw - var(--max))/2)); position:sticky; top:0; z-index:10; backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:7px; }
.brand-symbol { display:block; width:31px; height:42px; }
.brand-word { font:600 1.4rem "DM Sans",sans-serif; letter-spacing:-.045em; }
.page-nav { display:flex; align-items:center; gap:28px; font-weight:600; font-size:.9rem; }
.page-nav .button { color:#fff; }
.button { min-height:50px; padding:12px 20px; border:0; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:20px; font-weight:700; cursor:pointer; }
.button-outline { color:var(--ink); background:transparent; border:1px solid var(--line); }
.page-hero { padding:100px 0 72px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 18px; color:var(--accent); text-transform:uppercase; letter-spacing:.15em; font-size:.72rem; font-weight:700; }
h1,h2,h3 { font-family:"Manrope",sans-serif; line-height:1.02; letter-spacing:-.045em; }
h1 { max-width:900px; margin:0; font-size:clamp(3.1rem,7vw,6.6rem); }
.page-lead { max-width:680px; margin:25px 0 0; color:var(--muted); font-size:1.12rem; font-weight:500; }
.calculator { padding:80px 0 110px; display:grid; grid-template-columns:1.35fr .65fr; gap:54px; align-items:start; }
.catalog { display:grid; gap:14px; }
.price-card { display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:start; padding:25px; background:#fff; border:1px solid var(--line); cursor:pointer; transition:.2s; }
.price-card:has(input:checked) { border-color:var(--accent); background:#edf5f4; box-shadow:inset 4px 0 var(--accent); }
.price-card input { width:21px; height:21px; accent-color:var(--accent); }
.price-card h3 { margin:0 0 8px; font-size:1.2rem; letter-spacing:-.02em; }
.price-card p { margin:0; color:var(--muted); }
.price-card strong { white-space:nowrap; font:700 1.05rem "Manrope",sans-serif; }
.summary { position:sticky; top:105px; padding:32px; background:var(--ink); color:#fff; }
.summary h2 { margin:0 0 30px; font-size:1.8rem; }
.summary-lines { display:grid; gap:14px; min-height:80px; color:rgba(255,255,255,.7); font-size:.9rem; }
.summary-line { display:flex; justify-content:space-between; gap:15px; }
.total { margin:24px 0; padding-top:22px; border-top:1px solid rgba(255,255,255,.22); display:flex; align-items:end; justify-content:space-between; }
.total span { color:rgba(255,255,255,.65); font-size:.78rem; }
.total strong { font:700 2rem "Manrope",sans-serif; }
.summary .button { width:100%; background:#fff; color:var(--ink); }
.fine-print { margin:18px 0 0; color:rgba(255,255,255,.52); font-size:.75rem; }
.empty-state { padding:38px; background:#fff; border:1px solid var(--line); }
.empty-state h2 { margin:0 0 10px; font-size:1.7rem; }
.empty-state p { color:var(--muted); }
.projects { padding:80px 0 120px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.project-card { background:#fff; border:1px solid var(--line); overflow:hidden; }
.project-card img,.project-placeholder { width:100%; aspect-ratio:4/3; object-fit:cover; background:linear-gradient(135deg,#d4e6e4,#edf4f3); }
.project-body { padding:25px; }
.project-body small { color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.project-body h2 { margin:12px 0; font-size:1.55rem; }
.project-body p { color:var(--muted); }
.simple-footer { padding:34px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; }
@media(max-width:780px){.page-nav a:not(.button){display:none}.calculator{grid-template-columns:1fr}.summary{position:static}.projects{grid-template-columns:1fr}.page-hero{padding-top:70px}.price-card{grid-template-columns:auto 1fr}.price-card strong{grid-column:2}.container{width:min(calc(100% - 30px),var(--max))}}
