/* ============================================================
   GrowthKing - home.css
   Sekcje strony glownej. Tokeny, nav i stopka: base.css
   ============================================================ */

/* ============ HERO (bez zmian) ============ */
.hero{position:relative;background:radial-gradient(720px 420px at 78% 22%,rgba(0,85,255,.38),transparent 64%),radial-gradient(620px 360px at 36% 0%,rgba(193,18,31,.16),transparent 58%),linear-gradient(135deg,#05070d 0%,#0B1828 54%,#1a1a1a 100%);padding:138px 0 120px;overflow:hidden;color:#fff;min-height:100vh}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.04));pointer-events:none;z-index:0}
.hero-grid{display:block}
.hero-txt{position:relative;z-index:2;max-width:600px}
.hero-emails{position:absolute;top:0;right:0;bottom:0;width:min(40%,560px);display:flex;gap:14px;padding-right:clamp(16px,4vw,64px);justify-content:flex-end;overflow:hidden;z-index:1;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.he-col{flex:1;min-width:0}
.he-track{display:block;will-change:transform}
.he-track picture{display:block}
.he-track img{display:block;width:100%;height:auto;margin-bottom:16px;border-radius:12px;box-shadow:0 14px 44px rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.06)}
.he-down{animation:heDown 130s linear infinite}
.he-up{animation:heUp 130s linear infinite}
.he-col:nth-child(2) .he-track{animation-duration:152s}
.he-col:nth-child(3) .he-track{animation-duration:119s}
@keyframes heUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes heDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.he-track{animation:none}}
.klaviyo-hero-logo{display:inline-flex;align-items:center;gap:12px;margin-bottom:28px}
.klaviyo-hero-logo img{height:54px;width:auto;max-width:230px;object-fit:contain}
.klaviyo-hero-logo span{position:relative;color:rgba(255,255,255,.88);font-size:.95rem;font-weight:400;padding:9px 16px 9px 28px;background:rgba(255,255,255,.13);backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%);clip-path:polygon(18px 0,100% 0,100% 100%,18px 100%,0 50%);white-space:nowrap}
.klaviyo-hero-logo.hero-proof{margin-top:30px;margin-bottom:0}
/* Twardy dowod nad zgieciem: liczba plus rozbrojona obiekcja.
   Brief wymaga, zeby nad linia zgiecia byl nie tylko badge partnera. */
.hero h1{font-size:clamp(2.3rem,4.1vw,3.85rem);font-weight:600;line-height:1.04;color:#fff;max-width:790px}
/* Rotator rezerwuje szerokosc najdluzszego slowa ukrytym duplikatem
   (.rot-ghost), wiec podmiana slowa nie przesuwa juz reszty naglowka.
   Wczesniej min-width:6ch nie starczalo na "automatyzacjom" i cala strona
   skakala co 2 sekundy. */
.rotator{color:#fff;position:relative;display:inline-grid;vertical-align:top}
.rotator .rot-ghost,.rotator .rot-live{grid-area:1/1}
.rotator .rot-ghost{visibility:hidden;pointer-events:none}
.rotator .rot-live{display:inline-block;white-space:nowrap}
.rotator .rot-live.is-in{animation:rotIn .55s cubic-bezier(.16,1,.3,1)}
@keyframes rotIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.rotator .rot-live.is-in{animation:none}}
/* Na waskim ekranie najdluzsze slowo i tak nie zmiesci sie w jednej
   linii z reszta, wiec pozwalamy mu zwezic rezerwacje. */
@media(max-width:560px){.rotator{display:inline}.rotator .rot-ghost{display:none}}
.hero p.lead{margin:28px 0 34px;font-size:1.08rem;max-width:560px;color:rgba(255,255,255,.76);font-weight:400}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .btn-ghost{color:rgba(255,255,255,.92);border-color:rgba(255,255,255,.3);background:transparent}
.hero .btn-ghost:hover{background:#F6F5F3;color:#1a1a1a;border-color:#fff}

/* ============ TRUST (statyczna siatka, szary -> kolor) ============ */
.trust{background:var(--bg-base);border-bottom:1px solid var(--line);padding:40px 0}
.trust-head{text-align:center}
.trust-head p{font-family:var(--font-body);font-weight:500;color:var(--g700);font-size:1rem;margin:0}
.trust-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px 12px;align-items:center;margin-top:26px}
.trust-logo{height:62px;display:flex;align-items:center;justify-content:center}
.trust-logo img{max-height:34px;max-width:130px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.5;transition:filter .3s ease,opacity .3s ease,transform .3s ease}
.trust-logo:hover img{filter:grayscale(0);opacity:1;transform:translateY(-2px)}
.trust-logo.is-wide img{max-width:154px}
.trust-logo.is-supersonic img{mix-blend-mode:multiply}
/* logo o proporcjach zblizonych do kwadratu gina przy wspolnym max-height */
.trust-logo.is-tall img{max-height:58px;max-width:170px}
.trust-text-logo{font-family:var(--font-head);font-size:1.45rem;font-weight:800;letter-spacing:.02em;color:#101827;filter:grayscale(1);opacity:.5;transition:filter .3s ease,opacity .3s ease,transform .3s ease}
.trust-logo:hover .trust-text-logo{filter:grayscale(0);opacity:1;transform:translateY(-2px)}

/* ============ PROBLEM + KALKULATOR (jasny, spójny) ============ */
.problem{background:var(--bg-base)}
.prob-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.prob-copy h2{color:var(--ink);max-width:19ch}
.prob-copy .big-lead{color:var(--g700);font-size:1.12rem;margin-top:18px;max-width:46ch}
/* punkty problemu jako kafelki, ten sam język wizualny co karty w sekcji "Jak Ci pomożemy" */
.prob-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:9px}
.prob-points li{display:flex;align-items:flex-start;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 16px;transition:border-color .3s,box-shadow .3s}
.prob-points li:hover{border-color:#cbd5ea;box-shadow:var(--shadow)}
.pp-ic{width:32px;height:32px;border-radius:9px;background:var(--blue-subtle);border:1px solid #dbe6ff;color:var(--blue-strong);display:grid;place-items:center;flex:0 0 auto}
.pp-ic svg{width:16px;height:16px;stroke-width:1.9}
.prob-points strong{display:block;font-family:var(--font-head);font-weight:700;font-size:1.04rem;line-height:1.2;color:var(--ink)}
.prob-points .pp-txt{display:block;margin-top:3px;color:var(--g700);font-size:.85rem;line-height:1.45}
/* kalkulator w formie paragonu */
.receipt{background:#fff;color:var(--ink);font-family:var(--font-mono);text-align:center;padding:34px 32px 32px;max-width:400px;margin:0 auto;
  /* obwódka + głębszy cień: paragon ma odstawać od jasnego tła sekcji */
  filter:drop-shadow(0 0 .7px rgba(16,24,40,.5)) drop-shadow(0 2px 6px rgba(16,24,40,.10)) drop-shadow(0 26px 48px rgba(16,24,40,.22));
  -webkit-mask:
    linear-gradient(#000 0 0) center/100% calc(100% - 22px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='11'%3E%3Cpolygon points='0,11 22,11 11,0' fill='%23000'/%3E%3C/svg%3E") top/22px 11px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='11'%3E%3Cpolygon points='0,0 22,0 11,11' fill='%23000'/%3E%3C/svg%3E") bottom/22px 11px repeat-x;
  mask:
    linear-gradient(#000 0 0) center/100% calc(100% - 22px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='11'%3E%3Cpolygon points='0,11 22,11 11,0' fill='%23000'/%3E%3C/svg%3E") top/22px 11px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='11'%3E%3Cpolygon points='0,0 22,0 11,11' fill='%23000'/%3E%3C/svg%3E") bottom/22px 11px repeat-x}
.rc-store strong{display:block;font-family:var(--font-mono);font-weight:700;font-size:.92rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink)}
.rc-store span{display:block;font-size:.74rem;color:var(--g500);margin-top:5px}
.rc-dash{border-top:1.5px dashed #cfd2da;margin:18px 0}
.rc-input{text-align:left}
.rc-input label{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--g500);margin-bottom:7px}
.receipt .rev{font-family:var(--font-head);font-weight:800;font-size:1.75rem;color:var(--ink);margin-bottom:14px}
/* Suwak mial 5px wysokosci, czyli pole dotyku daleko ponizej progu 44px.
   Padding powieksza obszar trafienia bez zmiany wygladu paska. */
.receipt input[type=range]{width:100%;accent-color:var(--blue-strong);height:26px;padding:10px 0;cursor:pointer;background:transparent}
.receipt .scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--g500);margin-top:4px}
/* Szybki wybor progu przychodu: na telefonie jeden dotyk zamiast celowania
   w suwak. Na desktopie dziala jak skrot obok suwaka. */
/* Cztery rowne kolumny: przy flex-wrap ostatni przycisk spadal do
   drugiego rzedu i lamal rytm paragonu. */
.rc-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:12px}
.rc-quick button{min-height:38px;padding:8px 2px;border:1px solid var(--line);border-radius:8px;background:#fff;font-family:var(--font-mono);font-size:.7rem;letter-spacing:-.02em;white-space:nowrap;color:var(--g700);cursor:pointer;transition:border-color .2s,color .2s,background-color .2s}
.rc-quick button:hover{border-color:#cbd5ea;color:var(--ink)}
.rc-quick button.is-active{background:var(--blue-subtle);border-color:var(--blue);color:var(--blue-strong);font-weight:700}
.rc-lines{text-align:left;display:flex;flex-direction:column;gap:10px}
/* nowrap na wartosci: "100 000 zl" lamalo sie w polowie i wygladalo
   jak blad renderowania */
.rc-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.82rem;color:var(--ink)}
.rc-row span{min-width:0}
.rc-row b{font-weight:700;white-space:nowrap;flex:0 0 auto}
.rc-row.muted{color:var(--g500);font-size:.76rem}
.rc-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;text-align:left}
.rc-total span{font-weight:700;font-size:.82rem;letter-spacing:.04em;color:var(--ink);flex:0 0 auto}
.rc-total b{font-family:var(--font-head);font-weight:900;font-size:clamp(1.55rem,4.2vw,2.35rem);color:var(--blue-strong);line-height:1;white-space:nowrap}
/* .66rem to bylo ok. 10.5px, ponizej progu czytelnosci na telefonie */
.rc-assume{font-size:.76rem;color:var(--g500);text-align:left;margin:12px 0 22px;line-height:1.55}
.receipt .btn-submit{width:100%;border:none;background:var(--blue-strong);color:#fff;font-family:var(--font-body);font-weight:500;font-size:1rem;padding:15px;border-radius:8px;cursor:pointer;transition:.2s}
.receipt .btn-submit:hover{background:#152fb0;transform:translateY(-1px);box-shadow:0 10px 28px rgba(29,63,214,.24)}

/* ============ REKOMENDACJA ============ */
.recommendation{background:radial-gradient(820px 420px at 14% 4%,rgba(44,127,255,.34),transparent 62%),radial-gradient(720px 420px at 90% 86%,rgba(90,160,255,.16),transparent 64%),linear-gradient(135deg,#06101d 0%,#0B1828 54%,#101827 100%);border-top:1px solid rgba(255,255,255,.1);overflow:hidden}
.rec-head{text-align:center;max-width:720px;margin:0 auto 34px}
.rec-head .eyebrow{color:#fff;justify-content:center;margin-bottom:14px}
.rec-head .eyebrow::before{background:url("logo-fav-white.svg") center/contain no-repeat}
.rec-head h2{color:#fff;font-size:clamp(2rem,3.8vw,3.2rem);margin:0}
.rec-card{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:stretch}
.rec-video{position:relative;min-height:420px;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#dce7f6,#f7f9fd);isolation:isolate;display:block;border:1px solid rgba(255,255,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 52px rgba(0,0,0,.28)}
.rec-video::before{content:"";position:absolute;inset:0;background:var(--rec-thumb,linear-gradient(135deg,#dce7f6,#f7f9fd));background-size:cover;background-position:center}
.rec-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,24,40,.04),rgba(11,24,40,.28));z-index:1}
.rec-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;box-shadow:0 18px 48px rgba(0,0,0,.25);transition:transform .28s cubic-bezier(.16,1,.3,1)}
.rec-video:hover .rec-play{transform:translate(-50%,-50%) scale(1.04)}
.rec-play svg{width:30px;height:30px;margin-left:4px;fill:currentColor}
.rec-youtube-badge{position:absolute;z-index:2;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:9px;padding:12px 15px;border-radius:14px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.36);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 14px 34px rgba(0,0,0,.22);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#fff;font-size:.9rem;font-weight:650}
.rec-youtube-badge svg{width:17px;height:17px;fill:currentColor}
.rec-copy{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 18px 52px rgba(0,0,0,.18)}
.rec-logo{max-height:34px;max-width:150px;width:auto;object-fit:contain;margin-bottom:30px}
.rec-copy p{color:var(--g700);font-size:1.04rem;max-width:48ch}
.rec-quote{margin:0;color:var(--g700);font-size:clamp(.98rem,1.12vw,1.08rem);line-height:1.72;max-width:54ch}
.rec-quote p{margin:0 0 14px;color:inherit;font-size:inherit;max-width:none}
.rec-quote p:last-child{margin-bottom:0}
.rec-author{display:flex;align-items:center;gap:12px;margin-top:34px;padding-top:0;border-top:none}
.rec-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;display:block;flex:none;border:1px solid rgba(29,63,214,.18);box-shadow:0 6px 18px rgba(29,63,214,.14)}
.rec-author strong{display:block;font-size:.96rem;color:var(--ink)}
.rec-author span{display:block;font-size:.86rem;color:var(--g500);margin-top:1px}
.rec-author-logo{max-width:126px;max-height:30px;width:auto;object-fit:contain;margin-left:auto}

/* ============ SYSTEM (jak pomagamy: mechanizm + zakres) ============ */
.system{background:var(--bg-base);border-top:1px solid var(--line);overflow:hidden}
.system::before{content:"";position:absolute;inset:0;background:radial-gradient(760px 480px at 50% 40%,rgba(44,127,255,.10),transparent 62%);pointer-events:none}
.system>.wrap{position:relative;z-index:1}
.diagram{position:relative;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;gap:22px 64px;align-items:center;margin-top:14px}
/* HUB — brandowy focal point na jasnym tle */
.system .hub{grid-column:2;grid-row:1 / span 2;width:224px;height:224px;border-radius:50%;background:radial-gradient(circle at 50% 34%,#2C7FFF 0%,#153a9e 46%,#0B1828 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 26px 64px rgba(29,63,214,.30),0 8px 20px rgba(11,24,40,.16),inset 0 1px 0 rgba(255,255,255,.28);position:relative}
.system .hub::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(44,127,255,.18)}
.system .hub::after{content:"";position:absolute;inset:-18px;border-radius:50%;border:1.5px dashed rgba(44,127,255,.28);animation:hubspin 72s linear infinite}
@keyframes hubspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.system .hub::after{animation:none}}
.system .hub .ic{width:54px;height:54px;border-radius:15px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);display:grid;place-items:center;margin-bottom:13px}
.system .hub .ic svg{width:27px;height:27px;color:#fff;stroke-width:1.9}
.system .hub b{font-family:var(--font-head);font-weight:800;font-size:1.32rem;color:#fff;line-height:1}
.system .hub span{font-size:.8rem;color:rgba(255,255,255,.74);margin-top:6px}
/* NODES — jasne karty (filary systemu) */
.system .node{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;color:var(--ink);box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;position:relative;max-width:420px}
.system .node:hover{transform:translateY(-5px);border-color:#cbd5ea;box-shadow:var(--shadow-lg)}
.system .node .h{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.system .node .ic{width:44px;height:44px;border-radius:12px;background:var(--blue-subtle);border:1px solid #dbe6ff;color:var(--blue-strong);display:grid;place-items:center;flex:0 0 auto}
.system .node .ic svg{width:21px;height:21px;stroke-width:1.9}
.system .node h3{font-size:1.2rem;color:var(--ink)}
.system .node p{font-size:.88rem;color:var(--g700)}
.system .node .out{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.76rem;font-weight:700;color:#12a150}
.system .node .out svg{width:13px;height:13px}
.system .n1{grid-column:1;grid-row:1;justify-self:end;text-align:right}
.system .n1 .h{justify-content:flex-start;flex-direction:row-reverse}
.system .n1 .out{flex-direction:row-reverse}
.system .n2{grid-column:3;grid-row:1;justify-self:start}
.system .n3{grid-column:1;grid-row:2;justify-self:end;text-align:right}
.system .n3 .h{justify-content:flex-start;flex-direction:row-reverse}
.system .n3 .out{flex-direction:row-reverse}
.system .n4{grid-column:3;grid-row:2;justify-self:start}
/* pasek pełnego zakresu */
.system .services{margin-top:48px;border-top:1px solid var(--line);padding-top:32px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.system .services .lbl{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:1.08rem;width:100%;text-align:center;margin-bottom:10px}
.system .svc-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:.86rem;color:var(--ink);transition:.2s}
.system .svc-chip:hover{border-color:var(--blue);color:var(--blue-strong);box-shadow:var(--shadow)}
.system .svc-chip svg{width:15px;height:15px;color:var(--blue-strong)}

/* ============ WYNIKI (bento) ============ */
.wyniki{background:#f4f6fa;border-top:1px solid var(--line);overflow:hidden}
.wyniki::before{content:"";position:absolute;inset:0;background:radial-gradient(620px 360px at 8% 6%,rgba(44,127,255,.12),transparent 62%);pointer-events:none}
.wyniki>.wrap{position:relative;z-index:1}
.results-board{position:relative;background:linear-gradient(155deg,#0B1828,#101b2f 58%,#1D3FD6);border-radius:28px;padding:26px;color:#fff;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;box-shadow:0 30px 80px rgba(11,24,40,.24);overflow:hidden}
.results-board::before{content:"";position:absolute;inset:0;background:radial-gradient(520px 340px at 12% 0%,rgba(90,160,255,.38),transparent 68%),radial-gradient(440px 280px at 96% 10%,rgba(14,148,255,.28),transparent 62%);pointer-events:none}
.result-link{position:relative;z-index:1;display:block;min-height:410px;color:#fff}
.result-card{position:absolute;z-index:2;inset:0 0 50px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:24px;display:flex;flex-direction:column;transition:transform .36s cubic-bezier(.16,1,.3,1),background .32s cubic-bezier(.16,1,.3,1),border-color .32s cubic-bezier(.16,1,.3,1),box-shadow .32s cubic-bezier(.16,1,.3,1)}
.result-link:hover .result-card{transform:translateY(-18px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);box-shadow:0 22px 54px rgba(0,0,0,.22)}
.result-metric{font-family:var(--font-head);font-size:clamp(3.2rem,6vw,5.4rem);line-height:.82;font-weight:800;color:#fff;letter-spacing:-.02em}
.result-metric small{display:block;margin-top:14px;font-family:var(--font-body);font-size:.9rem;line-height:1.35;font-weight:500;color:rgba(255,255,255,.58);letter-spacing:0}
.result-card p{color:rgba(255,255,255,.76);margin:28px 0 0;font-size:.98rem}
.result-logo.result-logo-txt{filter:none;font-family:var(--font-head);font-size:1.5rem;font-weight:800;line-height:1;color:#fff;max-width:none}
.result-logo{filter:brightness(0) invert(1);opacity:.92;margin-top:auto;max-height:28px;max-width:132px;width:auto;object-fit:contain}
.result-action{position:absolute;z-index:1;left:0;right:0;bottom:0;height:46px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.78);display:flex;align-items:center;justify-content:center;font-size:.86rem;font-weight:600;letter-spacing:0;transform:translateY(-18px);opacity:0;transition:transform .36s cubic-bezier(.16,1,.3,1),opacity .28s cubic-bezier(.16,1,.3,1),background .28s cubic-bezier(.16,1,.3,1),color .28s cubic-bezier(.16,1,.3,1),border-color .28s cubic-bezier(.16,1,.3,1)}
.result-link:hover .result-action{transform:translateY(0);opacity:1;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#fff}
.result-action svg{width:16px;height:16px;margin-left:8px}
/* Jeden zbiorczy przycisk pod siatka wynikow. */
.results-more{display:flex;justify-content:center;margin-top:28px}
.wyniki .results-more .btn-ghost{color:var(--ink);border-color:var(--g300);background:#fff}
.wyniki .results-more .btn-ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ============ PROCES ============ */
.proces{background:linear-gradient(155deg,#07111f 0%,#0B1828 44%,#1D3FD6 100%);border-top:1px solid rgba(255,255,255,.08);overflow:hidden}
.proces::before{content:"";position:absolute;inset:0;background:radial-gradient(680px 420px at 10% 0%,rgba(90,160,255,.42),transparent 66%),radial-gradient(560px 360px at 94% 18%,rgba(14,148,255,.34),transparent 62%),radial-gradient(520px 340px at 44% 100%,rgba(255,255,255,.16),transparent 68%);pointer-events:none}
.proces>.wrap{position:relative;z-index:1}
.process-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin:0 0 34px}
.process-head-main{max-width:680px}
.process-head .eyebrow{color:#fff;margin-bottom:14px}
.process-head .eyebrow::before{background:url("logo-fav-white.svg") center/contain no-repeat}
.process-head h2{color:#fff;font-size:clamp(2rem,3.2vw,2.8rem);max-width:none}
.process-head p{color:rgba(255,255,255,.68);font-size:1.05rem;max-width:430px;margin:0 0 4px}
.process-shell{display:grid;grid-template-columns:.82fr 1.18fr;gap:18px;align-items:stretch}
.process-visual{position:relative;border-radius:28px;padding:30px;min-height:520px;display:flex;align-items:end;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.22)}
.process-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 260px at 14% 0%,rgba(90,160,255,.28),transparent 68%),linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.03));pointer-events:none}
.pv-panel{position:relative;z-index:1}
.pv-big{font-family:var(--font-head);font-size:clamp(2.7rem,5.2vw,4.35rem);line-height:.92;font-weight:700;max-width:9ch;color:#fff;letter-spacing:-.02em;text-shadow:0 12px 32px rgba(0,0,0,.22)}
/* ---- Akordeon procesu ----
   Wczesniej rozwijanie dzialalo wylacznie przez :hover, wiec na telefonie
   i tablecie widoczny byl tylko opis pierwszego kroku, a pozostale trzy
   nie dawaly sie otworzyc w zaden sposob. Teraz stanem steruje klasa
   .is-open nadawana w base.js (klik albo dotyk), a hover na desktopie
   dziala jak wczesniej, tylko jako dodatek. */
.process-accordion{display:grid;gap:12px}
.process-step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0;min-height:76px;overflow:hidden;transition:min-height .54s cubic-bezier(.16,1,.3,1),background-color .42s cubic-bezier(.16,1,.3,1),border-color .42s cubic-bezier(.16,1,.3,1),box-shadow .42s cubic-bezier(.16,1,.3,1)}
.ps-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:22px 24px;min-height:76px;font-family:var(--font-head);font-weight:700;font-size:clamp(1.55rem,2.45vw,2.08rem);line-height:1;color:var(--ink)}
.ps-ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--line-soft);color:var(--g700);display:grid;place-items:center;transition:transform .3s cubic-bezier(.16,1,.3,1),background-color .2s,color .2s}
.ps-ic svg{width:19px;height:19px;stroke-width:2.2}
.process-step p{display:block;overflow:hidden;color:var(--g700);font-size:1rem;padding:0 24px;max-width:46ch}
.process-step .ps-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .48s cubic-bezier(.16,1,.3,1)}
.process-step .ps-a>div{overflow:hidden}
.process-step .ps-a p{padding-bottom:24px}
.process-step.is-open{background:#f8fafc;border-color:#cbd5ea;box-shadow:0 14px 34px rgba(16,24,40,.06)}
.process-step.is-open .ps-a{grid-template-rows:1fr}
.process-step.is-open .ps-ic{transform:rotate(180deg);background:var(--blue-strong);color:#fff}
@media(hover:hover){
  .process-step:not(.is-open):hover{border-color:#cbd5ea;background:#fbfcfe}
}

/* ============ FOUNDER ============ */
.founder{background:#f4f6fa;border-top:1px solid var(--line)}
.founder-grid{display:grid;grid-template-columns:360px 1fr;gap:18px;max-width:1080px;margin:0 auto;align-items:stretch}
.founder-photo{position:relative}
.founder-photo img{width:100%;height:100%;min-height:460px;object-fit:cover;border-radius:24px;box-shadow:var(--shadow-lg)}
.founder-photo .plate{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(11,24,40,.26);backdrop-filter:blur(16px) saturate(145%);-webkit-backdrop-filter:blur(16px) saturate(145%);border:1px solid rgba(255,255,255,.24);border-radius:14px;padding:15px 18px;box-shadow:0 14px 34px rgba(11,24,40,.22)}
.founder-photo .plate b{font-family:var(--font-head);font-weight:800;color:#fff;font-size:1.25rem;display:block;line-height:1.1}
.founder-photo .plate span{font-size:.85rem;color:rgba(255,255,255,.74);display:block;margin-top:2px}
.founder-photo .plate-logo{width:38px;height:22px;background:url("logo-fav-white.svg") center/contain no-repeat;flex:0 0 auto;opacity:.94}
.founder-text{background:#fff;border:1px solid var(--line);border-radius:24px;padding:42px;display:flex;flex-direction:column;justify-content:center}
.founder-text h2{color:var(--ink);margin:0 0 18px;max-width:none;font-size:clamp(1.8rem,2.55vw,2.35rem)}
.founder-text p{color:var(--g700);font-size:1.05rem;margin-bottom:14px;max-width:52ch}
.founder-text .sig{font-family:"Caveat",cursive;font-size:1.8rem;color:var(--blue-strong);margin-top:10px}

/* ============ CENNIK ============ */
.cennik{background:#fff;border-top:1px solid var(--line)}
.pricing-wrap{display:grid;grid-template-columns:1fr 2fr;gap:18px;max-width:1140px;margin:0 auto;align-items:stretch}
.pricing-panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.pricing-panel .pcard + .pcard{border-left:1px solid var(--line-soft)}
.pcard{padding:34px 30px;display:flex;flex-direction:column}
.pcard .phead{display:flex;align-items:center;gap:13px;margin-bottom:26px}
.pcard .pic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--ink);flex:0 0 auto}
.pcard .pic svg{width:20px;height:20px;stroke-width:1.9}
.pcard .pname{font-family:var(--font-head);font-weight:700;font-size:1.4rem;color:var(--ink)}
.pcard .price{font-family:var(--font-head);font-weight:800;color:var(--ink);font-size:2.7rem;line-height:1;margin-bottom:8px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pcard .price small{font-family:var(--font-body);font-weight:500;font-size:.92rem;color:var(--g500)}
.pcard .pdesc{color:var(--g700);font-size:.95rem;line-height:1.55;margin-bottom:26px}
.pcard ul{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:14px}
.pcard li{display:flex;align-items:flex-start;gap:11px;font-size:.94rem;color:var(--ink)}
.pcard li svg{width:20px;height:20px;flex:0 0 auto;color:var(--blue-strong);background:var(--blue-subtle);border-radius:50%;padding:4px;box-sizing:border-box;margin-top:1px}
.pcard .pbtn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 22px;border-radius:10px;font-weight:600;font-size:.98rem;border:1px solid var(--line);color:var(--ink);background:var(--surface);transition:.2s}
.pcard .pbtn:hover{border-color:var(--ink);transform:translateY(-1px)}
.pcard .pbtn svg{width:17px;height:17px}
/* białe kafle: przyciski gradientowe (delikatny gradient w jednym odcieniu, nie tęcza) */
.pcard:not(.feature) .pbtn{position:relative;overflow:hidden;border-color:transparent;color:#fff;background:linear-gradient(180deg,#2E55E4 0%,var(--blue-strong) 100%);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 4px 12px rgba(29,63,214,.16)}
.pcard:not(.feature) .pbtn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#2646C9 0%,#152FB0 100%);opacity:0;transition:opacity .32s cubic-bezier(.16,1,.3,1)}
.pcard:not(.feature) .pbtn>*,.pcard:not(.feature) .pbtn svg{position:relative;z-index:1}
.pcard:not(.feature) .pbtn:hover{border-color:transparent;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 8px 20px rgba(29,63,214,.22)}
.pcard:not(.feature) .pbtn:hover::after{opacity:1}
/* wyróżniony AUDYT 0 zł: ciemny panel = jeden akcent kontrastu */
.pcard.feature{position:relative;overflow:hidden;background:linear-gradient(155deg,#0B1828,#101b2f 58%,#1D3FD6);border-radius:20px;color:#fff;box-shadow:0 30px 80px rgba(11,24,40,.24)}
.pcard.feature::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 280px at 12% 0%,rgba(90,160,255,.38),transparent 68%),radial-gradient(340px 240px at 96% 10%,rgba(14,148,255,.28),transparent 62%);pointer-events:none}
.pcard.feature>*{position:relative;z-index:1}
.pcard.feature .pname,.pcard.feature .price{color:#fff}
.pcard.feature .pic{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.pcard.feature .pdesc{color:rgba(255,255,255,.72)}
.pcard.feature li{color:rgba(255,255,255,.92)}
.pcard.feature li svg{color:#fff;background:rgba(255,255,255,.16)}
.pcard.feature .pbtn{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 14px 28px rgba(0,0,0,.24)}
.pcard.feature .pbtn:hover{background:#f0f2f6;border-color:#f0f2f6}
.pricing-note{max-width:760px;margin:30px auto 0;text-align:center;color:var(--g500);font-size:.9rem}

/* ============ FAQ ============ */
.faq{background:#f4f6fa;border-top:1px solid var(--line);padding-bottom:104px}
.faq-grid{display:grid;grid-template-columns:370px 1fr;gap:56px;max-width:1120px;margin:0 auto;align-items:start}
.faq-intro h2{color:var(--ink)}
.faq-intro>p{margin-top:16px;color:var(--g700);font-size:1.02rem;line-height:1.6;max-width:340px}
/* lekki blok "napisz do nas": jedna linia, bez kafla i cienia */
.faq-ask{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);color:var(--g700);font-size:.95rem;line-height:1.6;max-width:340px}
.faq-ask a{display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:var(--blue-strong);font-weight:600;border-bottom:1px solid transparent;transition:border-color .2s,gap .2s}
.faq-ask a:hover{border-bottom-color:var(--blue-strong);gap:9px}
.faq-ask a svg{width:15px;height:15px}


/* ============ RESPONSYWNOSC (strona glowna) ============ */
@media(max-width:980px){
  /* Kolumny maili sa ukryte, ale padding hero zostawal desktopowy i
     robil ok. 150px pustego ciemnego tla pod plakietka Klaviyo. */
  .hero-emails{display:none}.hero-txt{max-width:790px}
  .hero{padding:132px 0 64px;min-height:auto}
  .klaviyo-hero-logo{flex-wrap:wrap;gap:10px}
  .klaviyo-hero-logo img{height:44px}
}
@media(max-width:560px){
  .hero{padding:120px 0 52px}
  /* Plakietka lamala sie na trzy linie, a clip-path ze strzalka byl
     liczony dla jednej. Na waskim ekranie zostaje sam badge plus
     krotszy podpis bez skosu. */
  .klaviyo-hero-logo img{height:40px}
  .klaviyo-hero-logo span{clip-path:none;border-radius:8px;padding:8px 13px;font-size:.84rem;white-space:normal}
}
@media(max-width:900px){
  .prob-grid,.rec-card{grid-template-columns:1fr;gap:32px}
  .rec-video{min-height:340px}
  .diagram{grid-template-columns:1fr;grid-template-rows:none;gap:16px}
  /* Hub najpierw (to on jest punktem odniesienia), potem cztery filary
     jeden pod drugim. */
  .system .hub{grid-column:1;grid-row:auto;order:-1;margin:0 auto 8px}
  /* KRYTYCZNE: reset grid-row.
     Wczesniej resetowany byl tylko grid-column, wiec n1 i n2 zostawaly
     w wierszu 1, a n3 i n4 w wierszu 2. Dwie karty ladowaly w tej samej
     komorce siatki i sie przykrywaly: "Automatyzacje" znikalo pod
     "SMS Marketing", a "Pozyskiwanie klientow" pod "Reaktywacja".
     Ponizej 900px uzytkownik widzial 2 filary zamiast 4. */
  .system .node,.system .n1,.system .n2,.system .n3,.system .n4{grid-column:1;grid-row:auto;justify-self:stretch;max-width:none;text-align:left}
  .system .n1 .h,.system .n3 .h{justify-content:flex-start;flex-direction:row}
  .system .n1 .out,.system .n3 .out{flex-direction:row}
  .process-head{display:block;margin-bottom:28px}
  .process-head p{margin-top:14px;max-width:560px}
  .process-shell{grid-template-columns:1fr}
  /* Panel z jednym zdaniem zabieral cwierc ekranu telefonu. Na mobile
     jego tresc niesie juz naglowek sekcji. */
  .process-visual{display:none}
  .trust-grid{grid-template-columns:repeat(4,1fr);gap:22px 14px}
  .pricing-wrap{grid-template-columns:1fr;max-width:460px;gap:14px}
  .pricing-panel{grid-template-columns:1fr}
  .pricing-panel .pcard + .pcard{border-left:none;border-top:1px solid var(--line-soft)}
  .results-board{grid-template-columns:1fr;gap:14px}
  .result-link{min-height:340px}
  .founder-grid{grid-template-columns:1fr;gap:14px;max-width:620px}
  .founder-photo img{height:auto;min-height:0}
  .faq-grid{grid-template-columns:1fr;gap:34px;max-width:640px}
  .faq-intro>p{max-width:none}
}
@media(max-width:560px){
  .rec-video{min-height:300px}
  .rec-copy{padding:28px 22px}
  /* Trzy kolumny nie miescily logotypow: komorka miala ~106px, a obrazki
     max-width 154px (.is-wide) i 170px (.is-tall), wiec wychodzily poza
     siatke i rozpychaly cala strone do 506px szerokosci na ekranie 390px.
     Dwie kolumny plus max-width:100% na obrazku zamykaja temat. */
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:18px 10px}
  .trust-logo{height:54px}
  .trust-logo img,.trust-logo.is-wide img,.trust-logo.is-tall img{max-width:100%;max-height:30px}
  .trust-text-logo{font-size:1.2rem}
  .hero-cta{flex-direction:column}.hero-cta .btn{width:100%}
  .results-board{padding:16px;border-radius:22px}
  /* Wysokosc dopasowana do tresci. Sztywne 330px zostawialo w kazdym
     kafelku kilkadziesiat pikseli pustki. */
  .result-link{min-height:0}
  .result-card{position:static;inset:auto}
  .result-metric{font-size:3.4rem}
  .founder-text{padding:30px 24px}
  .prob-points li{padding:14px}
}
/* ============ URZADZENIA DOTYKOWE ============
   Wszystko, co bylo schowane za :hover, jest na telefonie nieosiagalne.
   Ponizej te same rzeczy dostepne bez najezdzania kursorem. */
@media(hover:none){
  /* Logotypy klientow byly na stale wyszarzone (grayscale + opacity .5),
     bo kolor wracal tylko na hover. Na telefonie cala sekcja dowodu
     spolecznego byla wyblakla, wbrew zasadzie z PROJECT-RULES.md. */
  .trust-logo img,.trust-text-logo{filter:none;opacity:1}
  /* Przycisk "Zobacz to case study" mial opacity:0 i pojawial sie tylko
     na hover, wiec na telefonie byl niewidoczny, choc klikalny. */
  .result-action{position:static;transform:none;opacity:1;margin-top:12px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff;min-height:46px}
  .result-card{position:static;inset:auto}
  .result-link{min-height:0}
  /* Karta nie jest juz rozciagnieta na sztywna wysokosc, wiec margin-top:auto
     przestal odsuwac logo od cytatu. */
  .result-logo{margin-top:20px}
}

/* 10.2026: kalkulator zdjęty, sekcja problemu w jednej kolumnie,
   trzy punkty problemu obok siebie (notatki.md, pkt 11). */
.prob-grid.is-solo{grid-template-columns:1fr;gap:0}
.prob-grid.is-solo .prob-copy{text-align:center}
.prob-grid.is-solo .prob-copy h2{max-width:26ch;margin-left:auto;margin-right:auto}
.prob-grid.is-solo .prob-copy .big-lead{max-width:60ch;margin-left:auto;margin-right:auto}
.prob-grid.is-solo .prob-points{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;text-align:left}
@media(max-width:820px){.prob-grid.is-solo .prob-points{grid-template-columns:1fr}}

/* 10.2026: karty filarów mają wyróżnione pierwsze zdanie (copy Julii). */
.system .node p strong{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}

/* 10.2026: 12 logotypów (doszły Bizuu i Fabryka Rozsady), dwa równe rzędy po 6. */
@media(min-width:901px){.trust-grid{grid-template-columns:repeat(6,1fr)}}
/* Pionowe logo (Fabryka Rozsady) przy limicie 30px na telefonie robi się nieczytelne. */
.trust-logo.is-portrait img{max-height:58px}
@media(max-width:560px){.trust-logo.is-portrait img{max-height:50px}}