/* Maticly — strona główna (Etap 2/3). Korzysta ze zmiennych i komponentów z site.css */
html{scroll-behavior:smooth;scroll-padding-top:84px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
.home h1,.home h2,.home h3{line-height:1.12;}
.home .section-pad{padding:88px 0;}
.home .section-head{max-width:62ch;margin-bottom:40px;}
.home .section-head h2{font-size:clamp(26px,3.4vw,38px);}
.home .section-head .lede{margin-top:14px;font-size:16.5px;line-height:1.65;color:var(--paper-dim);}
.link-quiet{color:var(--paper-dim);font-size:15px;text-underline-offset:3px;}
.link-quiet:hover{color:var(--accent-soft);}

/* nagłówek: przycisk CTA */

/* ---------- hero ---------- */
.h-hero{padding:64px 0 72px;}
.h-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
.h-hero h1{font-size:clamp(34px,5vw,58px);letter-spacing:-0.01em;}
.h-hero .h-sub{margin-top:22px;font-size:clamp(17px,1.6vw,19.5px);line-height:1.6;color:var(--paper-dim);max-width:50ch;}
.h-cta{margin-top:32px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
.h-proof{margin-top:26px;display:flex;gap:10px 22px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--muted);}
.h-proof b{color:var(--mono-num);font-weight:600;}
.phone{
  position:relative;max-width:300px;margin:0 auto;padding:11px;border-radius:34px;
  background:var(--surface-3);border:1px solid var(--line);
  box-shadow:0 36px 70px -26px var(--shadow-color);
}
.phone img{border-radius:24px;width:100%;height:auto;background:var(--surface);}
.phone-cap{margin-top:16px;text-align:center;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}

/* ---------- pasek zaufania ---------- */
.h-trust{padding:22px 0;}
.h-trust .wrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap;}
.h-trust span{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.h-trust img{height:44px;width:auto;max-width:210px;background:#141210;border-radius:8px;padding:6px 14px;}
.contact-direct{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:22px;}
.contact-direct .btn{padding:10px 18px;font-size:13px;}

/* ---------- sytuacje ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.sit{
  background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:26px 24px;
  display:flex;flex-direction:column;gap:12px;
}
.sit h3{font-size:21px;}
.sit p{font-size:15.5px;line-height:1.6;color:var(--paper-dim);}
.sit .arrow{font-weight:600;color:var(--accent-soft);}
.sit a.more{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:13px;color:var(--accent-soft);text-decoration:none;border-bottom:1px solid var(--line);align-self:flex-start;}
.sit a.more:hover{border-color:var(--accent);}

/* ---------- realizacje ---------- */
.case{
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:34px 30px;margin-bottom:22px;
}
.case-tag{font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-soft);}
.case h3{font-size:clamp(24px,3vw,30px);margin-top:8px;}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:22px;}
.case-grid.one{grid-template-columns:1fr;max-width:70ch;}
.case-blocks{display:flex;flex-direction:column;gap:16px;}
.case-blocks .k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:5px;display:block;}
.case-blocks p{font-size:15.5px;line-height:1.62;color:var(--paper-dim);}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.stat{font-family:var(--mono);font-size:12.5px;color:var(--mono-num);background:var(--accent-wash);border:1px solid var(--line);border-radius:3px;padding:7px 11px;}
.feat{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.feat span{font-size:13px;color:var(--paper-dim);border:1px solid var(--line-soft);border-radius:20px;padding:5px 12px;background:var(--surface-2);}
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start;}
.vid figure{margin:0;}
.vid video{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);display:block;}
.vid figcaption{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);text-align:center;}
.note-small{margin-top:12px;font-size:12.5px;color:var(--muted);}
.case-demo{display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.case-demo p{font-size:15.5px;line-height:1.6;color:var(--paper-dim);max-width:62ch;margin-top:8px;}
.more-projects{margin-top:6px;font-size:14.5px;color:var(--muted);}
.more-projects a{color:var(--accent-soft);}

/* ---------- jak to działa ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s;}
.step{background:var(--surface);border:1px solid var(--line-soft);border-radius:4px;padding:26px 24px;}
.step .n{font-family:var(--mono);font-size:30px;font-weight:600;color:var(--muted);opacity:.6;}
.step h3{font-size:21px;margin:8px 0 10px;}
.step p{font-size:15.5px;line-height:1.62;color:var(--paper-dim);}
.step .when{margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--accent-soft);}

/* ---------- cena ---------- */
.price-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:start;}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:30px 28px;}
.price-card .amt{font-family:var(--mono);font-size:clamp(26px,3.4vw,34px);font-weight:600;color:var(--mono-num);}
.price-card .per{font-size:14.5px;color:var(--muted);margin-top:6px;}
.price-card hr{border:0;border-top:1px solid var(--line-soft);margin:20px 0;}
.price-card .maint{font-family:var(--mono);font-size:17px;color:var(--paper);}
.price-card ul{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:9px;}
.price-card li{font-size:15px;color:var(--paper-dim);padding-left:22px;position:relative;line-height:1.5;}
.price-card li::before{content:"✓";position:absolute;left:0;color:var(--accent-soft);font-weight:700;}
.vat{margin-top:18px;font-size:13px;color:var(--muted);}
.terms{display:flex;flex-direction:column;gap:20px;}
.terms h3{font-size:19px;margin-bottom:6px;}
.terms p{font-size:15.5px;line-height:1.65;color:var(--paper-dim);}
details.roi{margin-top:34px;background:var(--surface);border:1px solid var(--line);border-radius:4px;}
details.roi>summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:600;display:flex;justify-content:space-between;gap:12px;align-items:center;}
details.roi>summary::-webkit-details-marker{display:none;}
details.roi>summary::after{content:"+";font-family:var(--mono);font-size:22px;color:var(--accent-soft);}
details.roi[open]>summary::after{content:"–";}
.roi-body{padding:4px 24px 26px;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;}
.roi-body p.lede{font-size:15px;line-height:1.6;color:var(--paper-dim);}
.roi-f{margin-bottom:18px;}
.roi-f label{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.roi-f input[type=range]{width:100%;accent-color:var(--accent);}
.roi-f .val{font-family:var(--mono);font-size:15px;color:var(--paper);margin-top:4px;}
.roi-out{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:4px;padding:18px 20px;}
.roi-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;color:var(--paper-dim);}
.roi-row:last-of-type{border-bottom:0;}
.roi-row .v{font-family:var(--mono);color:var(--mono-num);font-weight:600;text-align:right;}
.roi-note{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--muted);}

/* ---------- o mnie ---------- */
.about{max-width:66ch;}
.about h2{font-size:clamp(26px,3.4vw,36px);}
.about p{margin-top:16px;font-size:17px;line-height:1.7;color:var(--paper-dim);}
.about .facts{margin-top:22px;display:flex;flex-direction:column;gap:8px;}
.about .facts div{font-family:var(--mono);font-size:13.5px;color:var(--paper-dim);padding-left:16px;border-left:2px solid var(--accent);}

/* ---------- FAQ ---------- */
.faq-list{max-width:78ch;display:flex;flex-direction:column;gap:10px;}
.faq-list details{background:var(--surface);border:1px solid var(--line-soft);border-radius:4px;}
.faq-list summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;gap:14px;align-items:center;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--accent-soft);flex:none;}
.faq-list details[open] summary::after{content:"–";}
.faq-list details p{padding:0 22px 20px;font-size:15.5px;line-height:1.68;color:var(--paper-dim);}
.faq-more{margin-top:18px;font-size:14.5px;}
.faq-more a{color:var(--accent-soft);}

/* ---------- kontakt ---------- */
.contact-copy .lede{margin-top:14px;font-size:16.5px;line-height:1.65;color:var(--paper-dim);}
.contact-direct{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-top:24px;}
.field .opt{text-transform:none;letter-spacing:0;color:var(--muted);opacity:.8;}
.reply-note{font-size:13.5px;color:var(--muted);}

/* ---------- przyklejony przycisk (telefon) ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--header-bg);backdrop-filter:blur(8px);border-top:1px solid var(--line-soft);
  display:none;transform:translateY(110%);transition:transform .2s ease;
}
.sticky-cta .btn{width:100%;justify-content:center;}
.sticky-cta.show{transform:none;}
@media (max-width:760px){.sticky-cta{display:block;}}

/* ---------- responsywność ---------- */
@media (max-width:900px){
  .h-hero{padding:40px 0 52px;}
  .h-hero-grid,.price-grid,.case-grid,.roi-body{grid-template-columns:1fr;gap:30px;}
  .cards3,.steps{grid-template-columns:1fr;}
  .home .section-pad{padding:60px 0;}
  .case{padding:26px 20px;}
  .phone{max-width:240px;}
}
@media (max-width:520px){
  .vids{grid-template-columns:1fr 1fr 1fr;gap:8px;}
  .vid figcaption{font-size:10px;}
  body{padding-bottom:0;}
  footer{padding-bottom:84px;}
}