/* Historie oszczędności: podstrona historie-oszczednosci.html oraz sekcja #historie na stronie głównej.
   Korzysta z krojów, nagłówka, stopki i przycisków z styles.css; tu tylko elementy własne (prefiks hs-). */
.hs-page,.hs-home{--hs-ink:#111415;--hs-muted:#465155;--hs-line:#d1e0e3;--hs-pale:#eaf7f9;--hs-white:#fbfefe;--hs-cyan:#24cbd8;--hs-teal:#198f9c;--hs-tealText:#087582;--hs-dark:#151515;--hs-green:#e7f5d9;--hs-greenText:#2f6f12}
.hs-page{background:var(--hs-white);color:var(--hs-ink)}
.hs-page .container{width:min(1296px,calc(100% - 96px))}
.hs-page h1,.hs-page h2,.hs-page h3{letter-spacing:-.04em;text-wrap:balance}
.hs-page :focus-visible{outline:3px solid var(--hs-tealText);outline-offset:4px}
.hs-hero :focus-visible,.hs-page .site-header :focus-visible,.hs-method :focus-visible{outline-color:#fff}
.hs-page [id]{scroll-margin-top:24px}

/* Pierwszy ekran: to samo zdjęcie słonecznika co TGE live, z przyciemnieniem dla kontrastu tekstu. */
.hs-hero{background-color:var(--hs-cyan);background-image:linear-gradient(90deg,#043f4ad9,#064b5599),url('assets/hero-sunflower.webp');background-size:cover;background-position:center,center 42%;background-blend-mode:normal,multiply;color:#fff;padding:150px 0 88px}
.hs-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:start}
.hs-hero-copy{padding-top:48px}
.hs-hero h1{margin:0 0 24px;font-size:clamp(40px,4.6vw,66px);font-weight:600;line-height:1.04}
.hs-hero-lead{max-width:640px;margin:0 0 32px;font-size:18px;line-height:1.6}
.hs-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.hs-hero-button{margin-top:0}
.hs-hero-note{max-width:560px;margin:28px 0 0;font-size:14px;line-height:1.55;color:#d9eef0}

/* Wybór przykładu: karta w stylu procesu ze strony głównej. */
.hs-picker{background:#fff;color:var(--hs-ink);border:1px solid var(--hs-dark);box-shadow:12px 12px 0 #0000002e;padding:24px 24px 18px}
.hs-picker-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--hs-line)}
.hs-picker-head h2{margin:0;font-size:22px;font-weight:600}
.hs-picker-head span{font-size:14px;font-weight:600;color:var(--hs-muted);text-align:right}
/* Lista przewija się wewnątrz karty: widać do pięciu branż, reszta po przewinięciu. Skrypt ustawia wysokość
   dokładnie na pięć wierszy i dodaje zanikanie przy krawędzi, za którą jest jeszcze treść. */
.hs-picker ol{list-style:none;margin:0 -8px;padding:0;max-height:var(--hs-picker-max,390px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#9fc3c7 transparent;scroll-padding-block:8px}
.hs-picker ol::-webkit-scrollbar{width:6px}
.hs-picker ol::-webkit-scrollbar-thumb{background:#9fc3c7;border-radius:3px}
.hs-picker ol.is-more-below{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),transparent)}
.hs-picker ol.is-more-above{-webkit-mask-image:linear-gradient(to top,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to top,#000 calc(100% - 40px),transparent)}
.hs-picker ol.is-more-above.is-more-below{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 40px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 40px,#000 calc(100% - 56px),transparent)}
.hs-picker-more{margin:10px 0 0;font-size:13px;font-weight:600;color:var(--hs-tealText)}
.hs-picker-foot{border-top:1px solid var(--hs-line);padding-top:12px}
.hs-picker li{margin:0 8px;border-bottom:1px solid var(--hs-line)}
.hs-picker li:last-child{border-bottom:0}
.hs-picker a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name value" "bar bar";column-gap:16px;row-gap:6px;align-items:center;padding:11px 8px;margin:0 -8px;color:inherit;text-decoration:none;transition:background-color .2s}
.hs-picker a:hover{background:var(--hs-pale)}
.hs-picker-name{grid-area:name;min-width:0}
.hs-picker-name strong{display:block;font-size:16px;font-weight:600;line-height:1.3}
.hs-picker-name small{display:block;font-size:14px;line-height:1.35;color:var(--hs-muted)}
.hs-picker-value{grid-area:value;font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--hs-tealText);font-variant-numeric:tabular-nums}
.hs-picker-bar{grid-area:bar;display:block;height:6px;background:var(--hs-pale)}
.hs-picker-bar i{display:block;height:100%;width:var(--w);background:var(--hs-cyan);transform-origin:left}
.hs-picker-foot{margin:12px 0 0;font-size:13px;line-height:1.45;color:var(--hs-muted)}

/* Historie */
.hs-story{padding:96px 0;border-top:1px solid var(--hs-line)}
.hs-story-pale{background:var(--hs-pale);border-top:0}
.hs-story-head{max-width:820px;margin-bottom:40px}
.hs-kicker{margin:0 0 12px;font-size:clamp(20px,1.7vw,24px);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--hs-tealText)}
.hs-story h2{margin:0 0 18px;font-size:clamp(30px,3.2vw,44px);font-weight:600;line-height:1.08}
.hs-lead{margin:0;font-size:18px;line-height:1.6;color:#2c3537}
.hs-story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:stretch}
.hs-scene{margin:0;border:1px solid var(--hs-line);background:var(--hs-pale)}
.hs-scene img{display:block;width:100%;height:auto}
.hs-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border:1px solid var(--hs-line);border-top:0;background:#fff}
.hs-facts div{padding:14px 16px}
.hs-facts div+div{border-left:1px solid var(--hs-line)}
.hs-facts dt{font-size:13px;color:var(--hs-muted)}
.hs-facts dd{margin:2px 0 0;font-size:15px;font-weight:600;line-height:1.35}

.hs-result{display:flex;flex-direction:column;justify-content:center;background:#fff;border:1px solid var(--hs-dark);box-shadow:10px 10px 0 #0000001a;padding:32px}
.hs-result-label{margin:0 0 20px;font-size:14px;font-weight:600;color:var(--hs-muted)}
.hs-bars{display:grid;gap:14px}
.hs-bar-row{display:grid;grid-template-columns:100px minmax(0,1fr) auto;align-items:center;gap:16px;font-size:15px}
.hs-bar-row strong{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.hs-bar{display:block;height:28px;background:var(--hs-pale)}
.hs-bar i{display:block;height:100%;width:var(--w);transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.hs-bar.is-before i{background:#9fb4b8}
.hs-bar.is-after i{background:var(--hs-cyan)}
.hs-bars.is-pending .hs-bar.is-after i{width:100%}
.hs-result-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:28px 0 0;padding:20px 0;border-top:1px solid var(--hs-line);border-bottom:1px solid var(--hs-line)}
.hs-result-big strong{font-size:clamp(44px,4.4vw,60px);font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--hs-tealText)}
.hs-result-big span{font-size:17px;font-weight:600}
.hs-cost{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0 0}
.hs-cost dt{font-size:13px;line-height:1.35;color:var(--hs-muted)}
.hs-cost dd{margin:4px 0 0;font-size:16px;font-weight:600}

.hs-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:40px 0 0;padding:0;border-top:2px solid var(--hs-dark)}
.hs-steps li{padding:20px 24px 0 0}
.hs-steps li+li{padding-left:24px;border-left:1px solid var(--hs-line)}
.hs-steps span{display:block;margin-bottom:8px;font-size:14px;font-weight:700;color:var(--hs-tealText)}
.hs-steps p{margin:0;font-size:16px;line-height:1.6}


/* Objaśnienie przykładów: ciemna sekcja jak „Jak działamy” na stronie głównej. */
.hs-method{background:var(--hs-dark);color:#fff;padding:104px 0}
.hs-method-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:48px}
.hs-method-head h2{margin:0;font-size:clamp(34px,3.4vw,52px);font-weight:600;line-height:1.05}
.hs-method-head p{margin:0;font-size:17px;line-height:1.6;color:#d1d7d7}
.hs-method-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:0;border-top:1px solid #2f4b4f}
.hs-method-grid li{min-width:0;padding:32px 32px 8px 0}
.hs-method-grid li+li{padding-left:32px;border-left:1px solid #2f4b4f}
.hs-method-grid li:last-child{padding-right:0}
.hs-method-grid li::before{content:"";display:block;width:32px;height:2px;margin-bottom:20px;background:#76dce4}
.hs-method-grid h3{margin:0 0 12px;font-size:22px;font-weight:600;line-height:1.25;text-wrap:balance}
.hs-method-grid p{margin:0;max-width:36ch;font-size:16px;line-height:1.6;color:#d1d7d7;text-wrap:pretty;overflow-wrap:break-word}

/* Zakończenie */
.hs-cta{background:var(--hs-cyan);padding:96px 0}
.hs-cta-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center}
.hs-cta h2{margin:0 0 16px;font-size:clamp(32px,3.2vw,46px);font-weight:600;line-height:1.08}
.hs-cta p{margin:0;font-size:17px;line-height:1.6;max-width:620px}
.hs-cta-action p{margin-top:24px;font-size:15px}
.hs-button-dark{background:var(--hs-dark);color:#fff;border-color:var(--hs-dark)}
.hs-button-dark:hover{background:#287f89;color:#fff}

/* Ruch: animacja tylko, gdy użytkownik jej nie ogranicza. */
@media(prefers-reduced-motion:no-preference){
  .hs-hero .hs-picker-bar i{animation:hs-grow 1s cubic-bezier(.2,.7,.2,1) both}
  .hs-hero li:nth-child(2) .hs-picker-bar i{animation-delay:.08s}
  .hs-hero li:nth-child(3) .hs-picker-bar i{animation-delay:.16s}
  .hs-hero li:nth-child(4) .hs-picker-bar i{animation-delay:.24s}
  .hs-hero li:nth-child(5) .hs-picker-bar i{animation-delay:.32s}
}
@keyframes hs-grow{from{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.hs-bar i{transition:none}.hs-bars.is-pending .hs-bar.is-after i{width:var(--w)}}

@media(max-width:1100px){
  .hs-hero-grid{grid-template-columns:1fr;gap:48px}
  .hs-hero-copy{max-width:760px;padding-top:0}
  .hs-picker{max-width:640px}
  .hs-story-grid{grid-template-columns:1fr}
  .hs-story-visual{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--hs-line)}
  .hs-scene{border:0;border-right:1px solid var(--hs-line)}
  .hs-facts{grid-template-columns:1fr;border:0}
  .hs-facts div+div{border-left:0;border-top:1px solid var(--hs-line)}
  .hs-method-head{grid-template-columns:1fr;gap:16px}
  .hs-method-head p{max-width:640px}
  .hs-method-grid{grid-template-columns:1fr}
  .hs-method-grid li,.hs-method-grid li+li{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:8px 40px;align-items:baseline;padding:28px 0;border-left:0}
  .hs-method-grid li+li{border-top:1px solid #2f4b4f}
  .hs-method-grid li::before{grid-column:1/-1;margin-bottom:4px}
  .hs-method-grid h3{margin:0}
  .hs-method-grid p{max-width:560px}
}
@media(max-width:800px){
  .hs-page .container{width:calc(100% - 40px)}
  .hs-hero{padding:118px 0 64px}
  .hs-hero-lead{font-size:17px}
  .hs-story{padding:64px 0}
  .hs-story-head{margin-bottom:28px}
  .hs-lead{font-size:17px}
  .hs-story-visual{grid-template-columns:1fr}
  .hs-scene{border-right:0;border-bottom:1px solid var(--hs-line)}
  .hs-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hs-facts div+div{border-top:0;border-left:1px solid var(--hs-line)}
  .hs-result{padding:24px}
  .hs-steps{grid-template-columns:1fr;border-top-width:2px}
  .hs-steps li,.hs-steps li+li{padding:18px 0;border-left:0}
  .hs-steps li+li{border-top:1px solid var(--hs-line)}
  .hs-method{padding:72px 0}
  .hs-method-grid li,.hs-method-grid li+li{grid-template-columns:1fr;padding:24px 0}
  .hs-cta{padding:72px 0}
  .hs-cta-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:560px){
  .hs-page .container{width:calc(100% - 32px)}
  .hs-hero{padding-top:108px}
  .hs-hero h1{font-size:clamp(32px,9.6vw,40px);line-height:1.08}
  .hs-hero-lead{font-size:16px;line-height:1.6}
  .hs-hero-actions{flex-direction:column;align-items:stretch}
  .hs-hero-button{justify-content:center;min-height:56px}
  .hs-picker{padding:18px 16px 14px;box-shadow:8px 8px 0 #0000002e}
  .hs-picker-head{flex-direction:column;gap:4px}
  .hs-picker-head span{text-align:left}
  .hs-picker a{column-gap:12px}
  .hs-picker-value{font-size:17px}
  .hs-story h2{font-size:30px}
  .hs-kicker{font-size:19px}
    .hs-facts{grid-template-columns:1fr}
  .hs-facts div+div{border-left:0;border-top:1px solid var(--hs-line)}
  .hs-result{padding:20px 18px;box-shadow:6px 6px 0 #0000001a}
  .hs-bar-row{grid-template-columns:minmax(0,1fr) auto;row-gap:6px;gap:6px 12px}
  .hs-bar-row .hs-bar{grid-column:1/-1;grid-row:2;height:20px}
  .hs-result-big strong{font-size:44px}
  .hs-cost{grid-template-columns:1fr 1fr}
  .hs-button-dark{width:100%;justify-content:center;min-height:56px}
}

/* Sekcja na stronie głównej */
.hs-home{background:var(--hs-pale);padding:110px 0}
.hs-home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.hs-home h2{margin:0 0 20px;font-size:clamp(32px,3vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.035em}
.hs-home-copy>p{margin:0 0 32px;font-size:17px;line-height:1.6;max-width:560px}
.hs-home .button{background:var(--hs-dark);color:#fff}
.hs-home .button:hover{background:#287f89}
.hs-home-copy>.hs-home-note{margin:28px 0 0;font-size:14px;line-height:1.5;color:var(--hs-muted);max-width:520px}
.hs-home .hs-picker{box-shadow:12px 12px 0 #0000001a}
@media(max-width:991px){.hs-home{padding:80px 0}.hs-home-grid{grid-template-columns:1fr;gap:44px}.hs-home .hs-picker{max-width:640px}}
@media(max-width:560px){.hs-home{padding:64px 0}.hs-home h2{font-size:30px}.hs-home .button{width:100%;min-height:56px;justify-content:center}.hs-home .hs-picker{padding:18px 16px 14px;box-shadow:8px 8px 0 #0000001a}.hs-home .hs-picker-head{flex-direction:column;gap:4px}.hs-home .hs-picker-head span{text-align:left}}