const $=(s,c=document)=>c.querySelector(s), $$=(s,c=document)=>[...c.querySelectorAll(s)];
const panel=$('.mobile-panel'), hamb=$('.hamb'); if(hamb) hamb.onclick=()=>{panel.classList.toggle('open');hamb.setAttribute('aria-expanded',panel.classList.contains('open'))};
$$('.faq-q').forEach(b=>b.onclick=()=>b.closest('.faq-item').classList.toggle('open'));
const obs=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('visible')}),{threshold:.08}); $$('.reveal').forEach(el=>obs.observe(el));
addEventListener('scroll',()=>{const h=document.documentElement; const p=$('.top-progress'); if(p)p.style.width=(h.scrollTop/(h.scrollHeight-h.clientHeight)*100)+'%'});
$$('.filter-btn').forEach(b=>b.onclick=()=>{$$('.filter-btn').forEach(x=>x.classList.remove('active'));b.classList.add('active');const f=b.dataset.filter;$$('.project-card[data-type]').forEach(c=>c.style.display=(f==='all'||c.dataset.type===f)?'block':'none')});
function initQuote(){const form=$('#quoteWizard'); if(!form)return; const steps=$$('.form-step',form), bars=$$('.form-progress span',form); let i=0; function show(){steps.forEach((s,n)=>s.classList.toggle('active',n===i));bars.forEach((b,n)=>b.classList.toggle('active',n<=i));} $$('.next',form).forEach(b=>b.onclick=()=>{if(i<steps.length-1){i++;show()}}); $$('.prev',form).forEach(b=>b.onclick=()=>{if(i>0){i--;show()}}); form.addEventListener('submit',e=>{e.preventDefault();$$('.form-step',form).forEach(s=>s.style.display='none');$('.form-progress',form).style.display='none';$('.form-success',form).classList.add('show')}); show()} initQuote();
$$('form[data-demo]').forEach(f=>f.addEventListener('submit',e=>{e.preventDefault(); const btn=$('button[type="submit"]',f); if(btn){btn.textContent='Dziękujemy — odezwiemy się';btn.disabled=true}}));

: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
}

.chev {
  font-size:10px;transition:.25s
}

.nav-group:hover .chev {
  transform:rotate(180deg)
}

.btn.white {
  background:white;color:#b60b12;box-shadow:none
}

.btn.large {
  padding:18px 30px;font-size:16px
}

.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
}

.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
}

.reveal.visible {
  opacity:1;transform:none
}

@media(max-width:900px) {
  .mobile-panel.open {
    display:block
  }
}

@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:620px) {
  .field-grid {
    grid-template-columns:1fr
  }
}

@media(max-width:620px) {
  .choice-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
  }
}