/* One font (system), three sizes, one accent, lots of air. Accent comes from site.json via :root in . */ :root{--bg:#fbfaf7;--bg2:#f2f0ea;--ink:#15171a;--muted:#5c6168;--line:rgba(21,23,26,.1);--card:#fff;--radius:18px; --s1:clamp(2.2rem,1.4rem + 3.4vw,4rem);--s2:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);--s3:1.125rem;color-scheme:light} @media (prefers-color-scheme:dark){:root{--bg:#0f1113;--bg2:#171a1d;--ink:#eceef0;--muted:#a2a8b0;--line:rgba(255,255,255,.1);--card:#1b1e22;color-scheme:dark}} *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif} img{max-width:100%;height:auto;display:block} a{color:var(--accent)} h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;font-weight:700} h1{font-size:var(--s1)}h2{font-size:var(--s2)}h3{font-size:var(--s3);letter-spacing:0} p{margin:0 0 1em} .wrap{width:min(1120px,100% - 40px);margin-inline:auto} .narrow{width:min(720px,100% - 40px)} .muted{color:var(--muted)}.small{font-size:.875rem} .skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:100;background:var(--card);padding:8px 12px;border-radius:8px} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* header */ .top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)} .top-row{display:flex;align-items:center;gap:24px;height:64px} .brand{font-weight:700;color:var(--ink);text-decoration:none;margin-right:auto;letter-spacing:-.01em} .top nav{display:flex;gap:22px} .top nav a{color:var(--muted);text-decoration:none;font-size:.95rem} .top nav a:hover{color:var(--ink)} @media (max-width:820px){.top nav{display:none}} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--accent); background:var(--accent);color:#fff;font-family:inherit;font-weight:600;font-size:1rem;line-height:1;text-decoration:none;cursor:pointer;transition:transform .15s,filter .15s} .btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(1px)} .btn.ghost{background:transparent;color:var(--accent)} .btn.small{min-height:38px;padding:0 16px;font-size:.9rem} .btn.wide{width:100%} .btn:disabled{opacity:.6;cursor:progress} @media (prefers-color-scheme:dark){.btn:not(.ghost){color:#0f1113}} /* hero */ .hero{padding:clamp(48px,8vw,112px) 0 clamp(40px,6vw,88px)} .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center} .eyebrow{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px} .lead{font-size:1.2rem;color:var(--muted);max-width:34ch} .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .hero-img img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%} @media (max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-img{order:-1}} /* blocks */ .block{padding:clamp(56px,8vw,112px) 0} section[id]{scroll-margin-top:80px} .block.alt{background:var(--bg2)} .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:32px} .feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px} .feature p{color:var(--muted);margin:0} .gallery{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:14px;margin-top:32px} .shot{padding:0;border:0;background:none;border-radius:14px;overflow:hidden;cursor:zoom-in} .shot img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .5s} .shot:hover img{transform:scale(1.03)} @media (max-width:820px){.gallery{grid-template-columns:repeat(2,1fr);gap:10px}} .lightbox{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);max-height:92vh;overflow:visible} .lightbox::backdrop{background:rgba(8,9,10,.86)} .lightbox img{max-height:82vh;width:auto;border-radius:10px;margin:auto} .lb-cap{color:#ddd;text-align:center;margin:10px 0 0;font-size:.9rem} .lightbox button{position:fixed;background:rgba(255,255,255,.12);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:28px;line-height:1;cursor:pointer} .lb-close{top:16px;right:16px}.lb-prev{left:16px;top:50%}.lb-next{right:16px;top:50%} /* calculator */ .calc-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start} @media (max-width:820px){.calc-grid{grid-template-columns:1fr}} .calc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,3vw,32px);display:grid;gap:14px} .total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:16px;margin-top:4px} .total output{font-size:var(--s2);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums} /* fields */ .field{display:grid;gap:6px;margin-bottom:14px} .field label,.field>span{font-weight:600;font-size:.95rem} input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;min-height:48px} textarea{resize:vertical} input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#c92a2a} .check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:.95rem} .check input{width:20px;height:20px;min-height:0;margin:3px 0 0;flex:none;accent-color:var(--accent)} .consent{margin:6px 0 4px} .err{color:#c92a2a;font-size:.875rem;margin:0} @media (prefers-color-scheme:dark){.err{color:#ff8787}input[aria-invalid=true]{border-color:#ff8787}} .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} .form-status{margin:12px 0 0;min-height:1.6em;font-weight:600} /* faq */ details{border-bottom:1px solid var(--line);padding:18px 0} summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:16px} summary::-webkit-details-marker{display:none} summary::after{content:"+";color:var(--accent);font-size:1.4rem;line-height:1;transition:transform .2s} details[open] summary::after{transform:rotate(45deg)} details p{color:var(--muted);margin:12px 0 0} /* contacts */ .contacts{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:start} @media (max-width:820px){.contacts{grid-template-columns:1fr}} .big{font-size:var(--s2);font-weight:700;letter-spacing:-.02em} .big a{color:var(--ink);text-decoration:none} .links{display:flex;flex-wrap:wrap;gap:16px} .map{aspect-ratio:4/3;border-radius:var(--radius);background:var(--bg2);border:1px solid var(--line);display:grid;place-content:center;justify-items:center;gap:8px;overflow:hidden} .map iframe{width:100%;height:100%;border:0} /* footer, legal, cookie */ .foot{border-top:1px solid var(--line);padding:32px 0 calc(32px + env(safe-area-inset-bottom))} .foot-row{display:grid;gap:4px}.foot p{margin:0} .foot a{color:var(--muted)} .legal h1{font-size:var(--s2);margin-top:8px}.legal h2{font-size:var(--s3);margin-top:1.6em} .cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:30;max-width:560px;margin-inline:auto;background:var(--card);border:1px solid var(--line); border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:16px 18px;display:grid;gap:10px;font-size:.92rem} .cookie[hidden]{display:none} .cookie p{margin:0}.cookie div{display:flex;gap:10px} /* reveal: content is visible by default. Only site.js, once it really runs, adds .reveal-on to ; if the script fails to load (network, blocker, error) nothing is ever hidden. Print and reduced motion — always visible. */ .reveal-on [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal-on [data-reveal].in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal-on [data-reveal]{opacity:1;transform:none;transition:none}} @media print{.reveal-on [data-reveal]{opacity:1!important;transform:none!important}} /* Демо-плашка (site.json → "demo") */ .demo-bar{padding:8px 16px;background:#111827;color:#f9fafb;font-size:13px;line-height:1.4;text-align:center} /* Подписи в галерее (images[].caption) и число колонок (columns) */ .shot-cap{display:block;padding:12px 4px 4px;text-align:left;font-weight:600;color:inherit} .gallery.captioned .shot{background:var(--card,#fff);padding:10px;border:1px solid var(--line,#e5e2dc)} .gallery.captioned .shot img{border-radius:8px;aspect-ratio:auto;object-fit:contain} @media (max-width:600px){.gallery.captioned{grid-template-columns:1fr}} .lead-form{scroll-margin-top:80px} .calc .field small{display:block;margin-top:4px} @media (prefers-color-scheme:dark){.gallery.captioned .shot img{filter:brightness(.82) contrast(1.05)}} /* Итог калькулятора в левой колонке: на широком экране виден всё время, пока крутишь параметры */ .calc-side{position:sticky;top:96px} .calc-sticky{display:flex;flex-direction:column;gap:6px;margin-top:28px;padding:22px 24px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)} .calc-sticky strong{font-size:var(--s2);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--accent)} @media (max-width:820px){.calc-side{position:static}.calc-sticky{display:none}}