/* ============================================================
   haustechnika.pl — arkusz stylów
   papier techniczny + tusz + jeden akcent (czerwony pin)
   ============================================================ */

:root{
  --paper:#f7f4ec;
  --paper-2:#efeade;
  --ink:#12181c;
  --ink-2:#2a3339;
  --muted:#69757d;
  --line:#dbd4c3;
  --line-soft:#e7e1d3;
  --accent:#c33b2a;
  --accent-2:#a52e20;
  --blue:#1E88E5;
  --white:#fff;

  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --wrap:1180px;
  --pad:clamp(20px,4vw,48px);
  --r:10px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* Przyklejony nagłówek (66 px) zasłaniał początek sekcji po kliknięciu
   w menu — kotwice dostają zapas, żeby tytuł lądował pod paskiem. */
section[id],:target{scroll-margin-top:84px}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(15.5px,1.02vw,17px);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}

h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.032em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.4vw,4.5rem)}
h2{font-size:clamp(1.85rem,3.3vw,2.9rem);line-height:1.06}
h3{font-size:clamp(1.05rem,1.5vw,1.24rem);font-weight:700;letter-spacing:-.015em;line-height:1.25}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}

.mono{font-family:var(--mono);font-variant-ligatures:none}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.kicker{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px;display:flex;align-items:center;gap:10px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--accent);flex:none}
.kicker--light{color:#9aa4aa}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:6px}

/* ---------- przyciski ---------- */
.btn{
  --btn-bg:var(--ink);--btn-fg:var(--paper);
  display:inline-flex;align-items:center;gap:10px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:-.01em;
  padding:14px 22px;border-radius:8px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;min-height:48px;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-1px);background:#000}
.btn:active{transform:translateY(0)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--sm{padding:9px 16px;min-height:0;font-size:14px}
.btn--big{font-size:17px;padding:18px 26px;margin-top:26px;gap:12px;background:var(--accent)}
.btn--big:hover{background:var(--accent-2)}
.btn__meta{font-size:11.5px;opacity:.72;letter-spacing:.06em}
.btn:focus-visible,.nav a:focus-visible,summary:focus-visible,.burger:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;
}

/* ---------- górny pasek ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.topbar__in{display:flex;align-items:center;gap:24px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand__mark{width:30px;height:30px;flex:none;border-radius:8px;object-fit:contain;box-shadow:0 1px 3px rgba(18,24,28,.18)}
.brand__word{font-weight:800;letter-spacing:-.03em;font-size:18px}
.nav{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:500}
.nav a{text-decoration:none;color:var(--ink-2);padding:4px 0;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover{color:var(--ink);border-color:var(--accent)}
.nav .btn{color:var(--paper);border:0;padding:9px 16px}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:10px}
.burger span{display:block;height:2px;background:var(--ink);margin:5px 0;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:clamp(40px,6vw,84px) 0 clamp(28px,3vw,44px);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(13,43,69,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(13,43,69,.055) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(120% 90% at 78% 20%,#000 0%,transparent 72%);
}
.hero__grid{
  position:relative;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,4vw,64px);align-items:center;
}
.hero__copy h1{margin-bottom:22px}
.lead{font-size:clamp(1rem,1.32vw,1.16rem);line-height:1.62;color:var(--ink-2);max-width:36em;text-wrap:pretty}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.plats{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:28px 0 0;padding:0;font-size:13.5px;color:var(--muted)}
.plats li{display:flex;align-items:center;gap:8px}
.plats .mono{color:var(--ink-2);font-size:12px}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot--ok{background:#43A047;box-shadow:0 0 0 3px rgba(67,160,71,.16)}
.dot--soon{background:#d9a300;box-shadow:0 0 0 3px rgba(217,163,0,.16)}

/* makieta tabletu */
.hero__device{position:relative;justify-self:end;width:100%;max-width:560px}
.device{
  background:#1b2228;border-radius:20px;padding:9px 9px 14px;
  box-shadow:0 1px 0 #3a444b inset,0 30px 60px -28px rgba(18,24,28,.55),0 8px 18px -10px rgba(18,24,28,.4);
  transform:rotate(-1.1deg);
}
.device__bar{
  display:flex;align-items:center;gap:9px;padding:4px 6px 11px;color:#c9d2d8;
}
.device__title{font-size:9.5px;letter-spacing:.02em;color:#8b979f;margin-inline:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tico{width:16px;height:16px;flex:none;color:#7f8b93}
.tico--on{color:#eef3f6}
.device__screen{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:660/460;background:#fbfaf6}
.plan{display:block;width:100%;height:100%}

.pin{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:grid;place-items:center;width:27px;height:27px;
  border-radius:50%;color:#fff;
  font-family:var(--mono);font-size:11.5px;font-weight:700;line-height:1;
  box-shadow:0 0 0 1.6px #fff,0 3px 8px rgba(0,0,0,.28);
}
.pin--red{background:#F44336}
.pin--green{background:#43A047}
.pin--blue{background:#1E88E5}
.pin__thumb{
  position:absolute;right:-16px;top:-6px;width:20px;height:20px;border-radius:3px;
  background:linear-gradient(150deg,#cfe3c8,#8fae86);border:1.5px solid #fff;
  box-shadow:0 2px 5px rgba(0,0,0,.22);
}

/* okno notatki na makiecie */
.note{
  position:absolute;left:5%;bottom:6%;width:min(66%,310px);
  background:#fff;border-radius:9px;padding:11px 12px 10px;
  box-shadow:0 16px 34px -14px rgba(18,24,28,.5),0 2px 6px rgba(18,24,28,.14);
  font-size:11px;line-height:1.45;color:var(--ink);
}
.note__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.note__meta{font-size:9px;letter-spacing:.06em;color:#7b868d}
.note__close{font-size:13px;line-height:1;color:#9aa4aa}
.note__text{margin:0 0 9px;font-size:11.5px}
.note__row{display:flex;align-items:center;gap:6px}
.note__btn{
  width:22px;height:22px;border-radius:5px;background:#f1f0ea;display:grid;place-items:center;
  color:#59636a;
}
.note__btn svg{width:13px;height:13px}
.note__cancel{
  margin-left:auto;color:#59636a;font-family:var(--sans);
  font-size:10.5px;font-weight:600;padding:4px 2px;
}
.note__save{
  background:var(--ink);color:#fff;font-family:var(--sans);
  font-size:10.5px;font-weight:600;padding:4px 11px;border-radius:5px;
}
.mockhint{
  position:absolute;right:2px;bottom:-22px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#a6afb4;
}

/* pasek plików */
.fileline{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  margin:clamp(34px,4.6vw,56px) 0 0;
}
.fileline__label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fileline__items{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:11.5px;color:var(--muted)}
.fileline__items li{padding:5px 10px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.5)}
.fileline__items li:last-child{opacity:.7}

/* ---------- sekcje ---------- */
.section{padding:clamp(54px,7.4vw,104px) 0}
.section--alt{background:var(--paper-2);border-block:1px solid var(--line-soft)}
.shead{max-width:none;display:grid;gap:14px;margin-bottom:clamp(30px,4vw,52px)}
.shead h2{max-width:22ch}
.shead__lead{max-width:62ch;color:var(--ink-2);margin-top:4px}

/* kroki */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,40px)}
.step{padding-top:20px;border-top:1px solid var(--ink)}
.step__num{display:block;font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px}
.step h3{margin-bottom:10px}
.step p{color:var(--ink-2);font-size:15.4px;line-height:1.6}

/* możliwości */
.feats{display:grid;grid-template-columns:minmax(240px,4fr) 7.5fr;gap:clamp(28px,4vw,64px);align-items:start}
.feats__head{position:sticky;top:96px}
.feats__head h2{margin-bottom:16px}
.feats__lead{color:var(--ink-2);font-size:15.4px;max-width:36ch}
.feats__list{display:grid;gap:0}
.feat{display:grid;grid-template-columns:104px 1fr;gap:18px;padding:22px 0 24px;border-top:1px solid var(--line);transition:border-color .2s}
.feat:last-child{border-bottom:1px solid var(--line)}
.feat:hover{border-top-color:var(--accent)}
.feat__tag{
  grid-column:1;grid-row:1;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  margin:4px 0 0;
}
.feat h3{margin-bottom:7px;grid-column:2;grid-row:1}
.feat p:not(.feat__tag){color:var(--ink-2);font-size:15.2px;line-height:1.58;max-width:56ch;grid-column:2;grid-row:2}
.feat .mono{font-size:13px;background:rgba(13,43,69,.06);padding:1px 5px;border-radius:4px}

/* legenda kolorów */
.legend-sec{border-bottom:1px solid var(--line-soft)}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.legend__copy h2{max-width:18ch;margin-bottom:14px}
.legend__copy p{color:var(--ink-2);max-width:38ch}
.legend__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lc{
  display:flex;align-items:center;gap:14px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
}
.lc svg{width:26px;height:26px;flex:none;fill:var(--c);filter:drop-shadow(0 2px 3px rgba(18,24,28,.18))}
.lc b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.lc span{display:block;font-size:13px;color:var(--muted);margin-top:2px}

/* tabela porównawcza */
.tablewrap{overflow-x:auto;border-top:1px solid var(--ink);margin-top:8px}
.cmp{width:100%;border-collapse:collapse;min-width:800px;font-size:15px}
.cmp caption{text-align:left;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:10px 0 14px}
.cmp th,.cmp td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);padding-top:0;border-bottom:1px solid var(--ink);
}
.cmp tbody th{font-weight:500;color:var(--ink-2);width:38%}
.cmp td{color:var(--ink);font-size:14.4px}
.cmp tbody tr:hover{background:rgba(255,255,255,.55)}
.tag{display:inline-block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:20px;border:1px solid var(--line);color:var(--muted);vertical-align:middle;white-space:nowrap}
.tag--ok{border-color:rgba(67,160,71,.5);color:#2f7a33;background:rgba(67,160,71,.09)}
.note-small{margin-top:18px;font-size:13.6px;color:var(--muted);max-width:70ch}

/* pobieranie */
.download{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.download::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(90% 80% at 10% 100%,#000,transparent 75%);
}
.download__grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,72px);align-items:start}
.download h2{color:var(--paper)}
.download__lead{color:#b9c1c6;margin-top:16px;max-width:42ch}
.dl-meta{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px;font-size:11px;color:#9aa4aa}
.dl-meta li{border:1px solid #333d44;border-radius:20px;padding:5px 11px}
/* pobieranie: APK, instalator, portable — trzy pliki w dwóch kolumnach */
.dls{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);margin:34px 0 10px;align-items:start}
.dls__col{display:grid;justify-items:start}
.dls__head{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9aa4aa;margin:0}
.dls__col .btn--big{width:100%;justify-content:flex-start;margin-top:14px}
.download .btn--ghost{--btn-fg:var(--paper);border-color:#3d484f}
.download .btn--ghost:hover{border-color:var(--paper);color:var(--paper);background:transparent}
.dls__steps{margin-top:clamp(34px,5vw,58px)}
.dls__title{color:var(--paper);font-size:16px;font-weight:600;margin:0 0 16px}
@media (max-width:820px){.dls{grid-template-columns:1fr;gap:30px}}
.install{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:none}
.install li{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:18px 0;border-top:1px solid #2b343a}
.install li:first-child{padding-top:0;border-top:0}
.install .mono{font-size:12px;color:var(--accent);padding-top:2px}
.install p{color:#cfd6da;font-size:15px;line-height:1.55}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(220px,4fr) 7.5fr;gap:clamp(28px,4vw,64px);align-items:start}
.faq__head{position:sticky;top:96px}
.faq__head h2{max-width:12ch}
.faq__list details{border-top:1px solid var(--line)}
.faq__list details:last-child{border-bottom:1px solid var(--line)}
.faq__list summary{
  cursor:pointer;list-style:none;padding:19px 40px 19px 0;position:relative;
  font-weight:600;font-size:16.5px;letter-spacing:-.012em;
}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{
  content:"";position:absolute;right:6px;top:26px;width:11px;height:11px;
  border-right:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);
  transform:rotate(45deg);transition:transform .2s;transform-origin:center;
}
.faq__list details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq__list summary:hover{color:var(--accent-2)}
.faq__list p{color:var(--ink-2);font-size:15.2px;line-height:1.62;padding:0 46px 22px 0;max-width:66ch;margin-top:-4px}
.faq__list .mono{font-size:13px;background:rgba(13,43,69,.06);padding:1px 5px;border-radius:4px}

/* cennik */
.price{display:grid;grid-template-columns:minmax(240px,4.6fr) 6.4fr;gap:clamp(28px,4vw,64px);align-items:start}
.price__copy h2{max-width:20ch}
.price__copy .shead__lead{margin-top:14px}
.price__copy .note-small{max-width:46ch}
.price__card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3vw,34px);box-shadow:0 1px 0 rgba(18,24,28,.04),0 12px 30px -22px rgba(18,24,28,.45);
}
.price__ribbon{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.price__amount{font-size:clamp(2.6rem,6vw,3.5rem);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.price__sub{margin-top:8px;font-size:13.6px;color:var(--muted)}
.price__list{list-style:none;margin:22px 0 0;padding:0;display:grid}
.price__list li{position:relative;padding:11px 0 11px 26px;border-top:1px solid var(--line-soft);font-size:14.6px;line-height:1.5;color:var(--ink-2)}
.price__list li::before{
  content:"";position:absolute;left:3px;top:16px;width:6px;height:11px;
  border:2px solid var(--accent);border-width:0 2px 2px 0;transform:rotate(42deg)
}
.price__btn{margin-top:24px;justify-self:start}

/* dobrowolna wdzięczność — wpłata na zbiórkę (lewa kolumna, między leadem a notką) */
.price__thanks{margin-top:16px;max-width:46ch;font-size:13.8px;line-height:1.62;color:var(--ink-2)}
.price__thanks b{color:var(--ink);font-weight:600}
.price__thanks a{color:var(--accent);font-weight:500;text-decoration:none;border-bottom:1px solid rgba(195,59,42,.5);padding-bottom:1px;transition:color .15s,border-color .15s}
.price__thanks a:hover{color:var(--accent-2);border-color:var(--accent-2)}

/* stopka */
.foot{background:var(--paper-2);border-top:1px solid var(--line-soft);padding:46px 0 34px;font-size:14px}
.foot__in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;align-items:start}
.foot__brand p{color:var(--muted);margin-top:8px;font-size:13.5px;line-height:1.6}
.foot__nav{display:grid;gap:8px}
.foot__nav a{color:var(--ink-2);text-decoration:none}
.foot__nav a:hover{color:var(--accent)}
.foot__meta{display:grid;gap:7px;font-size:11.5px;color:var(--muted);justify-items:start}
.foot__meta a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.foot__meta a:hover{border-color:var(--accent);color:var(--ink)}

/* ---------- responsywność ---------- */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .hero__device{justify-self:start;max-width:520px}
  .feats,.faq{grid-template-columns:1fr;gap:26px}
  .feats__head,.faq__head{position:static}
  .feats__lead{max-width:46ch}
  .legend{grid-template-columns:1fr;gap:26px}
  .price{grid-template-columns:1fr;gap:26px}
  .price__copy h2{max-width:none}
  .price__copy .note-small{max-width:56ch}
  .download__grid{grid-template-columns:1fr;gap:34px}
  .foot__in{grid-template-columns:1fr 1fr}
  .foot__meta{grid-column:1/-1}
}
@media (max-width:780px){
  .nav{
    position:fixed;inset:66px 0 auto;background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 20px;
    transform:translateY(-6px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:16px}
  .nav .btn{margin-top:14px;justify-content:center}
  .burger{display:block}
  .steps{grid-template-columns:1fr;gap:22px}
  .feat{grid-template-columns:1fr;gap:6px}
  .feat__tag{grid-column:1;grid-row:auto}
  .feat h3,.feat p{grid-column:1;grid-row:auto}
  .feat__tag{margin:0}
  .legend__list{grid-template-columns:1fr}
  .note__row{gap:4px}
  .note__btn{width:20px;height:20px}
  .cmp{min-width:540px;font-size:14px}
  .cmp th,.cmp td{padding:12px 10px}
  .cmp tbody th{width:34%}
  .foot__in{grid-template-columns:1fr}
  .foot__nav{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .note{width:min(72%,260px);font-size:10.5px}
  .note__text{font-size:10.5px}
}
@media (max-width:460px){
  .device{transform:none}
  .fileline{font-size:10.5px}
  .pin{width:23px;height:23px;font-size:10px}
  .note{width:min(62%,228px)}
}
@media (prefers-contrast:more){
  :root{--muted:#4a545a;--line:#b9b09c}
}