
(() => {
'use strict';
const boot = () => {
const root = document.querySelector('.md-c2b-page') || document;
const $ = (selector, ctx = root) => ctx.querySelector(selector);
const $$ = (selector, ctx = root) => Array.from(ctx.querySelectorAll(selector));
// Mobile navigation
const panel = $('.mobile-panel');
const hamburger = $('.hamb');
if (panel && hamburger && !hamburger.dataset.mdBound) {
hamburger.dataset.mdBound = '1';
hamburger.addEventListener('click', () => {
const open = panel.classList.toggle('open');
hamburger.setAttribute('aria-expanded', String(open));
});
}
// FAQ accordion
$$('.faq-q').forEach((button) => {
if (button.dataset.mdBound) return;
button.dataset.mdBound = '1';
button.addEventListener('click', () => {
const item = button.closest('.faq-item');
if (!item) return;
const open = item.classList.toggle('open');
button.setAttribute('aria-expanded', String(open));
});
});
// Reveal animation
const revealItems = $$('.reveal');
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
entry.target.classList.add('visible');
obs.unobserve(entry.target);
});
}, { threshold: 0.08 });
revealItems.forEach((el) => {
if (!el.classList.contains('visible')) observer.observe(el);
});
} else {
revealItems.forEach((el) => el.classList.add('visible'));
}
// Reading progress
const progress = $('.top-progress');
if (progress && !progress.dataset.mdBound) {
progress.dataset.mdBound = '1';
const updateProgress = () => {
const doc = document.documentElement;
const distance = Math.max(1, doc.scrollHeight - doc.clientHeight);
progress.style.width = `${Math.min(100, Math.max(0, doc.scrollTop / distance * 100))}%`;
};
window.addEventListener('scroll', updateProgress, { passive: true });
window.addEventListener('resize', updateProgress, { passive: true });
updateProgress();
}
// Project filters
$$('.filter-btn').forEach((button) => {
if (button.dataset.mdBound) return;
button.dataset.mdBound = '1';
button.addEventListener('click', () => {
$$('.filter-btn').forEach((b) => {
b.classList.remove('active');
b.setAttribute('aria-pressed', 'false');
});
button.classList.add('active');
button.setAttribute('aria-pressed', 'true');
const filter = button.dataset.filter || 'all';
$$('.project-card[data-type]').forEach((card) => {
const visible = filter === 'all' || card.dataset.type === filter;
card.hidden = !visible;
});
});
});
// Multi-step quote form
const quoteForm = $('#quoteWizard');
if (quoteForm && !quoteForm.dataset.mdBound) {
quoteForm.dataset.mdBound = '1';
const steps = $$('.form-step', quoteForm);
const bars = $$('.form-progress span', quoteForm);
let current = 0;
const showStep = () => {
steps.forEach((step, index) => {
step.classList.toggle('active', index === current);
step.setAttribute('aria-hidden', String(index !== current));
});
bars.forEach((bar, index) => bar.classList.toggle('active', index <= current));
};
$$('.next', quoteForm).forEach((button) => {
button.addEventListener('click', () => {
if (current < steps.length - 1) {
current += 1;
showStep();
}
});
});
$$('.prev', quoteForm).forEach((button) => {
button.addEventListener('click', () => {
if (current > 0) {
current -= 1;
showStep();
}
});
});
quoteForm.addEventListener('submit', (event) => {
event.preventDefault();
steps.forEach((step) => { step.hidden = true; });
const progressBar = $('.form-progress', quoteForm);
if (progressBar) progressBar.hidden = true;
const success = $('.form-success', quoteForm);
if (success) {
success.classList.add('show');
success.hidden = false;
}
/*
* WORDPRESS/BRICKS:
* Po imporcie możesz zastąpić tę obsługę natywnym Bricks Form
* lub wysłać new FormData(quoteForm) do REST API / n8n webhooka.
*/
});
showStep();
}
// Demo contact forms
$$('form[data-demo]').forEach((form) => {
if (form.dataset.mdBound) return;
form.dataset.mdBound = '1';
form.addEventListener('submit', (event) => {
event.preventDefault();
const button = $('button[type="submit"]', form);
if (button) {
button.textContent = 'Dziękujemy — odezwiemy się';
button.disabled = true;
}
});
});
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', boot, { once: true });
} else {
boot();
}
})();:root {
--red:#ef0b14;--red2:#c90911;--ink:#17171a;--muted:#6c6c75;--line:#e9e9ec;--soft:#f7f7f8;--blue:#dfeeff;--navy:#101d3c;--radius:28px;--radius-sm:18px;--shadow:0 24px 70px rgba(20,20,30,.11);--wrap:1240px
}
html {
scroll-behavior:smooth
}
body {
margin:0;color:var(--ink);background:white;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased
}
input {
font:inherit
}
select {
font:inherit
}
textarea {
font:inherit
}
.top-progress {
position:fixed;top:0;left:0;height:3px;background:var(--red);z-index:200;width:0
}
.site-header {
position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.06)
}
.nav {
height:84px;display:flex;align-items:center;gap:26px
}
.logo {
width:155px;flex:none
}
.logo img {
width:100%;height:48px;object-fit:contain;object-position:left
}
.nav-links {
display:flex;align-items:center;gap:28px;margin-left:auto
}
.nav-links>a {
border:0;background:none;padding:29px 0 25px;font-size:14px;cursor:pointer;color:#25252b;position:relative
}
.nav-group>button {
border:0;background:none;padding:29px 0 25px;font-size:14px;cursor:pointer;color:#25252b;position:relative
}
.nav-links>a:after {
content:"";position:absolute;height:2px;left:0;right:100%;bottom:18px;background:var(--red);transition:.25s
}
.nav-group>button:after {
content:"";position:absolute;height:2px;left:0;right:100%;bottom:18px;background:var(--red);transition:.25s
}
.nav-links>a:hover:after {
right:0
}
.nav-links>a.active:after {
right:0
}
.nav-group>button:hover:after {
right:0
}
.nav-group {
position:relative
}
.nav-group>button {
display:flex;align-items:center;gap:6px
}
.chev {
font-size:10px;transition:.25s
}
.nav-group:hover .chev {
transform:rotate(180deg)
}
.mega {
position:absolute;top:72px;left:50%;transform:translate(-45%,10px);width:560px;background:white;border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;display:grid;grid-template-columns:1fr 1fr;gap:6px
}
.nav-group:hover .mega {
opacity:1;transform:translate(-45%,0);pointer-events:auto
}
.mega a {
padding:15px;border-radius:14px;display:block
}
.mega a:hover {
background:#f6f6f7
}
.mega strong {
display:block;font-size:14px
}
.mega small {
display:block;color:var(--muted);margin-top:3px
}
.nav-cta {
margin-left:4px
}
.btn.white {
background:white;color:#b60b12;box-shadow:none
}
.btn.large {
padding:18px 30px;font-size:16px
}
.hamb {
display:none;margin-left:auto;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:white
}
.mobile-panel {
display:none
}
.section.dark {
background:#131316;color:white
}
.dark .eyebrow {
color:white
}
.dark .section-head p {
color:rgba(255,255,255,.72)
}
.quote-form {
background:white;border-radius:30px;padding:38px;border:1px solid var(--line);box-shadow:var(--shadow)
}
.form-progress {
display:flex;gap:8px;margin-bottom:28px
}
.form-progress span {
height:5px;flex:1;border-radius:99px;background:#ececef
}
.form-progress span.active {
background:var(--red)
}
.form-step {
display:none
}
.form-step.active {
display:block
}
.form-step h3 {
font-size:28px;margin:0 0 22px
}
.field-grid {
display:grid;grid-template-columns:1fr 1fr;gap:16px
}
.field {
display:grid;gap:7px
}
.field.full {
grid-column:1/-1
}
.field label {
font-size:12px;font-weight:700;color:#4b4b53
}
.field input {
width:100%;border:1px solid #dfe0e3;border-radius:14px;padding:14px 15px;background:white;outline:none
}
.field select {
width:100%;border:1px solid #dfe0e3;border-radius:14px;padding:14px 15px;background:white;outline:none
}
.field textarea {
width:100%;border:1px solid #dfe0e3;border-radius:14px;padding:14px 15px;background:white;outline:none
}
.field input:focus {
border-color:#999;box-shadow:0 0 0 3px #f1f1f2
}
.field select:focus {
border-color:#999;box-shadow:0 0 0 3px #f1f1f2
}
.field textarea:focus {
border-color:#999;box-shadow:0 0 0 3px #f1f1f2
}
.choice-grid {
display:grid;grid-template-columns:repeat(3,1fr);gap:12px
}
.choice input {
display:none
}
.choice label {
display:block;border:1px solid var(--line);border-radius:16px;padding:18px;cursor:pointer
}
.choice input:checked+label {
border-color:var(--red);box-shadow:0 0 0 2px rgba(239,11,20,.12)
}
.form-actions {
display:flex;justify-content:space-between;gap:12px;margin-top:26px
}
.form-success {
display:none;text-align:center;padding:25px
}
.form-success.show {
display:block
}
.form-success .big {
font-size:54px
}
.faq-item.open .faq-q span {
transform:rotate(45deg)
}
.mini-form {
display:flex;gap:10px;background:white;padding:8px;border-radius:999px
}
.mini-form input {
flex:1;border:0;outline:0;padding:0 14px;min-width:0
}
.footer {
background:#dceeff;padding:70px 0 34px
}
.footer-grid {
display:grid;grid-template-columns:1.2fr .8fr .8fr .8fr;gap:44px
}
.footer h4 {
margin:0 0 15px
}
.footer a {
display:block;margin:8px 0;color:#39414f;font-size:13px
}
.footer p {
color:#566170;font-size:13px
}
.footer-logo {
width:160px;margin-bottom:18px
}
.footer-bottom {
border-top:1px solid rgba(0,0,0,.1);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:20px;color:#667180;font-size:12px
}
.page-hero {
padding:80px 0 64px;background:#f8f8f9;border-bottom:1px solid var(--line)
}
.page-hero .wrap {
display:grid;grid-template-columns:1fr .7fr;gap:40px;align-items:end
}
.page-hero h1 {
font-size:62px;line-height:1;letter-spacing:-2.4px;margin:0
}
.page-hero p {
color:var(--muted);font-size:18px
}
.filterbar {
display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px
}
.filter-btn {
border:1px solid var(--line);background:white;border-radius:999px;padding:10px 15px;cursor:pointer
}
.filter-btn.active {
background:var(--ink);color:white
}
.content-grid {
display:grid;grid-template-columns:.75fr 1.25fr;gap:60px
}
.content-grid aside {
position:sticky;top:110px;align-self:start
}
.anchor-menu a {
display:block;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px
}
.rich h2 {
font-size:40px;margin:50px 0 15px
}
.rich h3 {
font-size:25px;margin-top:30px
}
.rich p {
color:#56565f
}
.rich ul {
color:#56565f
}
.contact-grid {
display:grid;grid-template-columns:.9fr 1.1fr;gap:22px
}
.contact-card {
padding:30px;border:1px solid var(--line);border-radius:24px
}
.contact-card strong {
display:block;font-size:24px
}
.full-form {
background:#f7f7f8;padding:36px;border-radius:26px
}
.mobile-stick {
display:none
}
.reveal.visible {
opacity:1;transform:none
}
@media(max-width:1100px) {
.nav-links {
gap:18px
}
}
@media(max-width:1100px) {
.nav-links>a {
font-size:13px
}
}
@media(max-width:1100px) {
.nav-group>button {
font-size:13px
}
}
@media(max-width:1100px) {
.nav-cta {
padding:13px 16px
}
}
@media(max-width:1100px) {
.footer-grid {
grid-template-columns:1fr 1fr
}
}
@media(max-width:900px) {
.nav {
height:72px
}
}
@media(max-width:900px) {
.nav-links {
display:none
}
}
@media(max-width:900px) {
.nav-cta {
display:none
}
}
@media(max-width:900px) {
.hamb {
display:block
}
}
@media(max-width:900px) {
.mobile-panel {
position:fixed;inset:72px 0 0;background:white;z-index:99;padding:24px;overflow:auto
}
}
@media(max-width:900px) {
.mobile-panel.open {
display:block
}
}
@media(max-width:900px) {
.mobile-panel a {
display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-weight:700
}
}
@media(max-width:900px) {
.mobile-panel .mobile-sub {
padding-left:18px;color:var(--muted);font-weight:500
}
}
@media(max-width:900px) {
.page-hero .wrap {
grid-template-columns:1fr
}
}
@media(max-width:900px) {
.content-grid {
grid-template-columns:1fr
}
}
@media(max-width:900px) {
.contact-grid {
grid-template-columns:1fr
}
}
@media(max-width:900px) {
.content-grid aside {
position:static
}
}
@media(max-width:900px) {
.footer-grid {
grid-template-columns:1fr 1fr
}
}
@media(max-width:900px) {
.mobile-stick {
position:fixed;left:12px;right:12px;bottom:12px;z-index:90;background:#111;color:white;border-radius:18px;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:8px;box-shadow:0 15px 40px rgba(0,0,0,.25)
}
}
@media(max-width:900px) {
.mobile-stick a {
padding:11px 10px;text-align:center;border-radius:12px;font-size:12px;font-weight:800
}
}
@media(max-width:900px) {
.mobile-stick a:last-child {
background:var(--red)
}
}
@media(max-width:620px) {
.field-grid {
grid-template-columns:1fr
}
}
@media(max-width:620px) {
.choice-grid {
grid-template-columns:1fr
}
}
@media(max-width:620px) {
.footer-grid {
grid-template-columns:1fr
}
}
@media(max-width:620px) {
.quote-form {
padding:27px
}
}
@media(max-width:620px) {
.mini-form {
display:grid;border-radius:18px
}
}
@media(max-width:620px) {
.mini-form input {
padding:13px
}
}
@media(max-width:620px) {
.page-hero h1 {
font-size:44px
}
}
@media(max-width:620px) {
.footer-bottom {
display:block
}
}
@media(max-width:620px) {
.nav {
gap:12px
}
}
@media(max-width:620px) {
.logo {
width:145px
}
}
html {
scroll-behavior:smooth
}
body {
margin:0
}
input {
font:inherit
}
select {
font:inherit
}
textarea {
font:inherit
}
[hidden] {
display:none!important
}
input:focus-visible {
outline:3px solid rgba(239,11,20,.28);
outline-offset:3px;
}
select:focus-visible {
outline:3px solid rgba(239,11,20,.28);
outline-offset:3px;
}
textarea:focus-visible {
outline:3px solid rgba(239,11,20,.28);
outline-offset:3px;
}
.md-u-603c642 {
color:#ef0b14;
}
.md-u-4a909ea {
margin-top:18px;
}
.md-u-4bf33d5 {
font-size:11px;color:#777;
}
.md-u-caedd39 {
font-size:44px;
}
.md-u-b0043ef {
margin-top:16px;
}
.md-u-3ae1f62 {
margin-top:20px;
}
.md-u-f14de1e {
font-size:46px;
}
.md-u-acaf68d {
border-radius:28px;
}
.md-u-f764e59 {
grid-template-columns:1fr 1fr;
}Za jedyne 300 tys. zł netto
Projekt domu parterowego w dwóch stylach do wyboru. Ty decydujesz, czy wybierasz standard, czy inny styl nowoczesnej stodoły — a my pokazujemy jasno zakres, etapy i możliwości dopasowania.


Budowa domu bez chaosu i niedomówień.
Porządkujemy cały proces inwestycji: od pierwszych założeń, przez dobór technologii, aż po realizację.
Sprawdzamy projekt, działkę, zakres i oczekiwania.
Ustalamy standard, etapy i odpowiedzialność.
Przechodzisz przez budowę krok po kroku.
Wybierz technologię, która pasuje do Twojego planu.
Nie sprzedajemy jednej odpowiedzi dla każdego. Porównujemy czas, budżet, parametry i możliwości projektu.
Dom drewniany
Lekka konstrukcja, bardzo dobra izolacyjność i szybki montaż.
- krótszy proces budowy
- energooszczędność
- łatwe prowadzenie instalacji
Dom murowany
Sprawdzona technologia dająca swobodę formy i dużą bezwładność cieplną.
- tradycyjne rozwiązania
- wysoka trwałość
- szeroki wybór materiałów
Dom z Ytong
Systemowe budowanie z dużych, dokładnych elementów i dobrymi parametrami cieplnymi.
- dokładność wykonania
- proste detale
- spójny system
Domy zaprojektowane pod prawdziwe życie.



Proces prostszy do kontrolowania.
Każdy etap ma swój cel: mniej niejasności, szybsze decyzje i większa kontrola nad budową.
Od pomysłu do kluczy w pięciu czytelnych krokach.
Rozmowa
Poznajemy działkę, potrzeby, projekt i budżet.
Wycena
Ustalamy zakres i standard realizacji.
Przygotowanie
Porządkujemy dokumenty, harmonogram i szczegóły.
Budowa
Realizacja kolejnych etapów zgodnie z planem.
Odbiór
Kontrola, podsumowanie i przekazanie domu.
Zobacz, jak wyglądają nasze kierunki stylistyczne.
Dom parterowy
Nowoczesna bryła
Minimalistyczny
Z garażem
KlasycznyDobra budowa zaczyna się od dobrej komunikacji.
Dlatego UX naszej współpracy projektujemy tak samo jak stronę: klient zawsze wie, co jest kolejnym krokiem.
PorozmawiajmyNajważniejsze było dla nas to, że od początku wiedzieliśmy, jakie decyzje musimy podjąć i co wpływa na cenę. Bez lawiny technicznego żargonu.
Poznaj orientacyjny koszt Twojego domu.
Wypełnij krótki formularz. Zbierzemy najważniejsze informacje o działce, projekcie i oczekiwanym standardzie.
<form class="quote-form reveal" id="quoteWizard"><div class="form-progress"><span></span><span></span><span></span></div><div class="form-step"><h3>1. Jaki dom planujesz?</h3><div class="choice-grid"><div class="choice"><input checked="" id="c1" name="tech" type="radio"><label for="c1"><b>Drewniany</b><br><small>Szybka budowa</small></label></div><div class="choice"><input id="c2" name="tech" type="radio"><label for="c2"><b>Murowany</b><br><small>Klasyczne rozwiązanie</small></label></div><div class="choice"><input id="c3" name="tech" type="radio"><label for="c3"><b>Ytong</b><br><small>Precyzyjny system</small></label></div></div><div class="field-grid md-u-4a909ea"><div class="field"><label>Powierzchnia domu</label><select name="select"><option>do 80 m²</option><option>80–110 m²</option><option>110–150 m²</option><option>powyżej 150 m²</option></select></div><div class="field"><label>Etap inwestycji</label><select name="select_2"><option>Mam działkę</option><option>Szukam działki</option><option>Mam projekt</option><option>Jestem na etapie pomysłu</option></select></div></div><div class="form-actions"><span></span><button class="btn next" type="button">Dalej →</button></div></div><div class="form-step"><h3>2. Zakres i lokalizacja</h3><div class="field-grid"><div class="field"><label>Miejscowość / powiat</label><input name="np_d" placeholder="np. Łódź"></div><div class="field"><label>Planowany termin startu</label><select name="select_3"><option>Jak najszybciej</option><option>3–6 miesięcy</option><option>6–12 miesięcy</option><option>Później</option></select></div><div class="field full"><label>Standard</label><select name="select_4"><option>Stan surowy zamknięty</option><option>Stan deweloperski</option><option>Pod klucz</option><option>Nie wiem — proszę doradzić</option></select></div></div><div class="form-actions"><button class="btn ghost prev" type="button">← Wstecz</button><button class="btn next" type="button">Dalej →</button></div></div><div class="form-step"><h3>3. Gdzie wysłać wycenę?</h3><div class="field-grid"><div class="field"><label>Imię</label><input name="twoje_imi" placeholder="Twoje imię" required=""></div><div class="field"><label>Telefon</label><input name="48" placeholder="+48 ..." required="" type="tel"></div><div class="field full"><label>E-mail</label><input name="adres_email_pl" placeholder="adres@email.pl" required="" type="email"></div><div class="field full"><label>Dodatkowe informacje</label><textarea name="projekt_oczekiwania_wa_ne_in" placeholder="Projekt, oczekiwania, ważne informacje..." rows="4"></textarea></div></div><p class="md-u-4bf33d5">Wysyłając formularz akceptujesz kontakt w sprawie przygotowania wyceny. Formularz w wersji demonstracyjnej nie wysyła danych na serwer.</p><div class="form-actions"><button class="btn ghost prev" type="button">← Wstecz</button><button class="btn" type="submit">Wyślij zapytanie</button></div></div><div class="form-success"><div class="big">✓</div><h3>Dziękujemy!</h3><p>Formularz został poprawnie uzupełniony. Po podłączeniu strony do WordPress/PHP tutaj nastąpi faktyczna wysyłka.</p></div></form>
* {
box-sizing:border-box
}
.quote-form {
background:white;border-radius:30px;padding:38px;border:1px solid var(--line);box-shadow:var(--shadow)
}
.reveal {
opacity:0;transform:translateY(20px);transition:.6s ease
}Najpierw budżet, potem decyzje materiałowe.
Pomagamy uporządkować inwestycję tak, aby możliwie wcześnie było wiadomo, które elementy mają największy wpływ na cenę.
Jak planować budżet →Powierzchnia, bryła, rodzaj dachu, standard stolarki, instalacje, wykończenie oraz warunki na działce. Dlatego dobra wycena wymaga kilku konkretnych danych — nie jednej ceny „za metr”.
Pytania przed rozpoczęciem budowy.
Masz działkę lub projekt? Sprawdźmy, co możemy zbudować.
Podaj numer telefonu — formularz jest krótki i nie wymaga przygotowywania dokumentacji.
<form class="mini-form" data-demo=""><input name="tw_j_numer_telefonu" placeholder="Twój numer telefonu" required="" type="tel"><button class="btn" type="submit">Proszę o kontakt</button></form>
* {
box-sizing:border-box
}
.mini-form {
display:flex;gap:10px;background:white;padding:8px;border-radius:999px
}