/* ==========================================================================
   2Click Revenue · Home v7 · wdrożenie HTML (etap 2)
   Tokeny = Figma (Manrope, INK #1E262E, accent #2391A7 (D35), Gradient/Panel,
   Glass/Card Soft). Ruch = norda.framer.website (docs/04-motion-spec.md).
   ========================================================================== */

:root{
  /* kolor */
  --ink:#1E262E; --ink-2:#46505A; --muted:#6F7881; --disabled:#A2A9B0;
  --paper:#FFFFFF; --paper-2:#F7F8F9; --paper-3:#EFF1F2; --line:#E3E6E8; --line-strong:#D2D7DA; /* chłodne szarości (MG 27.10, wcześniej ciepłe F8F8F6/F0F0EE/E2E2DF) */
  --paper-card:#F7F8F9;
  --accent:#2391A7; --accent-hover:#1F8398; --accent-text:#1B7E92; --accent-tint:#E4F3F6;
  --positive:#2B8A3E; --positive-soft:#7BD389;
  --dark:#1E262E; --dark-2:#2A333C;
  --grad-panel:#F3F3F1 url(../img/grad/panel.webp) center/cover no-repeat; /* panel = tekstura (MG 27.10), dawny liniowy Gradient/Panel wycofany */
  --grad-panel-linear:linear-gradient(135deg,#F0F0EE 0%,#F7F7F5 55%,#E9F4F6 100%);
  --grad-brand:linear-gradient(90deg,#1B6F7C 0%,#2391A7 50%,#2AA6BD 100%);
  --grad-brand-v:linear-gradient(180deg,#1B6F7C 0%,#2391A7 50%,#2AA6BD 100%);
  --grad-headline:linear-gradient(90deg,#2391A7 0%,#2AA6BD 55%,#5BC2D4 100%); /* Figma: Gradient/Headline (wycofany) */
  --grad-text:linear-gradient(90deg,#1B7E92 0%,#2391A7 50%,#2AA6BD 100%); /* akcent marki: teal #2391A7 (23.10) */
  /* szkło */
  --glass-fill:rgba(255,255,255,.82);
  --glass-shadow:0 6px 20px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.025),inset 0 1px 0 rgba(255,255,255,.9);
  --pill-shadow:0 6px 20px rgba(0,0,0,.04);
  --dark-glass:rgba(30,38,46,.72);
  --dark-glass-shadow:0 8px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.18);
  /* siatka */
  --page:1920px; --margin:80px; --container:1760px; --col:117.33px; --gutter:32px;
  --c2:267px; --c3:416px; --c4:565px; --c5:715px; --c6:864px; --c7:1013px; --c8:1163px;
  /* promienie */
  --r-panel:16px; --r-card:16px; --r-row:14px; --r-pill:999px;
  /* ruch (norda) */
  --ease-norda:cubic-bezier(.44,0,.56,1);      /* tween 1.0 s, teksty hero */
  --ease-out:cubic-bezier(.22,1,.36,1);         /* spring bez odbicia 0.6 s */
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --t-fast:.15s; --t-ui:.2s; --t-open:.32s;
  --sans:"Manrope","Inter","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.56;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
p,h1,h2,h3,h4{margin:0}
.lucide{width:1em;height:1em;stroke-width:1.75;flex:none}
:focus-visible{outline:2px solid rgba(30,38,46,.28);outline-offset:3px;border-radius:6px}

/* ---------- typografia (style Figma) ---------- */
.display-xl{font-size:clamp(44px,4vw,76px);line-height:1.12;letter-spacing:-.025em;font-weight:400;text-wrap:balance}
.display-l{font-size:clamp(34px,2.65vw,52px);line-height:1.22;letter-spacing:-.02em;font-weight:400;text-wrap:balance}
.display-m{font-size:clamp(26px,1.95vw,36px);line-height:1.25;letter-spacing:-.015em;font-weight:300;text-wrap:balance}
.statement{font-size:clamp(34px,2.5vw,48px);line-height:1.25;letter-spacing:-.015em;font-weight:300;text-wrap:balance}
.heading-s{font-size:28px;line-height:36px;font-weight:400;letter-spacing:-.01em}
.heading-xs{font-size:20px;line-height:26px;font-weight:500;letter-spacing:-.005em}
.lead{font-size:clamp(17px,1.15vw,21px);line-height:1.5;font-weight:400} /* D47b: lead 20–24 → 17–21, proporcja do mniejszego H1 */
.body-m{font-size:18px;line-height:29px}
.body-s{font-size:16px;line-height:25px}
.body-xs{font-size:14px;line-height:21px}
.eyebrow{font-size:13px;line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.eyebrow--quiet{color:var(--ink-2)}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.nav-label{font-size:15px;line-height:20px;font-weight:500}
.meta{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.numeral-l{font-size:56px;line-height:62px;font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ink-2{color:var(--ink-2)} .muted{color:var(--muted)} .accent-text{color:var(--accent-text)} .positive{color:var(--positive)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- układ ---------- */
.container{width:min(var(--container),calc(100% - 2*var(--margin)));margin-inline:auto}
.section{padding:120px 0 96px}
.section[hidden]{display:none!important} /* sekcje zaparkowane (D44) */
.section--grey{background:var(--paper-2);padding:96px 0}
.section--grey .chapter{padding-top:0}
.section--grey .chapter::before{display:none}
#ai{padding-top:0;padding-bottom:96px}
.chapter{display:grid;grid-template-columns:8.7fr 3.1fr;gap:var(--gutter);padding-top:40px;position:relative;margin-bottom:56px}
.chapter__main{display:flex;flex-direction:column;gap:20px;max-width:1163px}
.chapter::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left center}
.chapter .index{padding-top:0}
.chapter .aside{padding-top:38px;display:flex;flex-direction:column;gap:16px;color:var(--ink-2)} /* etykieta 16 + gap 20 + 2: góra aside = góra H2 */
.chapter h2{color:var(--ink)}
.row{display:grid;gap:var(--gutter)}
.offset-2{margin-left:17%;max-width:1344px}

/* ---------- przyciski ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:var(--r-pill);font-size:15px;font-weight:500;line-height:1;white-space:nowrap;transition:background var(--t-ui) var(--ease-out),color var(--t-ui),border-color var(--t-ui),transform var(--t-ui) var(--ease-out)}
.btn .lucide{width:16px;height:16px;transition:transform var(--t-ui) var(--ease-out)}
.btn:hover .lucide{transform:translateX(4px)}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:#0F151B}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-hover)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--secondary{background:var(--paper-2);color:var(--ink)}
.btn--secondary:hover{background:var(--paper-3)}
.btn--sm{height:40px;padding:0 18px;font-size:14px}
.link{display:inline-flex;align-items:center;gap:8px;color:var(--accent-text);font-size:15px;font-weight:500;position:relative}
.link .lucide{width:16px;height:16px;transition:transform var(--t-ui) var(--ease-out)}
.link:hover .lucide{transform:translateX(4px)}
.link::after{content:"";position:absolute;left:0;right:24px;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.link:hover::after{transform:scaleX(1)}

/* ---------- chipy / pigułki ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px 0 16px;border-radius:var(--r-pill);background:var(--paper-3);color:var(--ink);font-size:15px;font-weight:500;line-height:1;transition:background var(--t-ui),color var(--t-ui),transform var(--t-ui) var(--ease-out)}
.section--grey .chip:not(.is-active),.panel .chip:not(.is-active){background:#fff}
.chip:not(.is-active):hover{background:var(--line)}
.chip .lucide{width:16px;height:16px}
.chip:hover{transform:translateY(-1px)}
.chip.is-active{background:var(--ink);color:#fff}
.chip--sm{height:36px;padding:0 16px;font-size:14px}
/* znacznik AI: tylko Revenue Pulse i Commerce Intelligence (D30) */
.ai{display:inline-flex!important;align-items:center;height:18px!important;padding:0 6px!important;border-radius:999px;background:var(--accent-tint);color:var(--accent-text)!important;font-size:10px!important;font-weight:600;letter-spacing:.08em!important;line-height:1!important;text-transform:uppercase;vertical-align:middle;margin:0 0 0 2px!important;flex:none;white-space:nowrap;width:auto!important}
.dark-glass .ai,.footer .ai,.chip.is-active .ai,.flow__tab.is-active .ai,.tile.is-active .sq .ai{background:rgba(255,255,255,.16);color:#fff}
.tag .ai{height:16px!important;padding:0 5px!important;font-size:9px!important;margin-left:4px!important}
.tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink-2);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

/* ---------- panele i karty ---------- */
.panel{background:var(--grad-panel);border-radius:var(--r-panel);padding:28px}
.glass{background:var(--glass-fill);border-radius:var(--r-card);box-shadow:var(--glass-shadow)}
.glass--blur{backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2)}
.dark-glass{background:var(--dark-glass);color:#fff;border-radius:18px;box-shadow:var(--dark-glass-shadow);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4)}
.icon-circle{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--accent);flex:none}
.icon-circle .lucide{width:18px;height:18px}
.hairline{height:1px;background:var(--line);transform-origin:left center}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{position:sticky;top:0;z-index:50;height:80px}
/* blur paska na pseudoelemencie: gdyby był na .nav, mega menu rozmywałoby tylko zawartość paska, nie stronę */
.nav::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,0);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);opacity:0;transition:opacity .3s,background .3s;pointer-events:none}
.nav.is-scrolled::before{opacity:1;background:rgba(255,255,255,.72);box-shadow:0 1px 0 var(--line)}
.nav__inner{position:relative}
.nav__inner{height:80px;display:flex;align-items:center;gap:24px}
.nav__inner > .wordmark{flex:none}
.nav__inner > .nav__links{flex:1;justify-content:center;min-width:0}
.nav__inner > .nav__right{flex:none}
.wordmark{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.wordmark__name{font-size:25px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.wordmark__badge{font-size:10px;font-weight:600;letter-spacing:.06em;border:1.5px solid var(--ink);border-radius:5px;padding:2px 5px;line-height:1;color:var(--ink);transform:translateY(-3px)}
.wordmark__sub{font-size:15px;color:var(--muted);font-weight:400}
.wordmark--light .wordmark__name,.wordmark--light .wordmark__badge{color:#fff;border-color:#fff}
.wordmark--light .wordmark__sub{color:rgba(255,255,255,.7)}
.nav__links{display:flex;gap:clamp(18px,1.67vw,32px)}
.nav__links a{color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;position:relative;padding:4px 0;white-space:nowrap;transition:color var(--t-fast)}
.nav__links a:hover,.nav__links a.is-open{color:var(--ink)}
.nav__links a .lucide{width:14px;height:14px;transition:transform var(--t-ui) var(--ease-out)}
.nav__links a.is-open .lucide{transform:rotate(180deg)}
.nav__right{display:flex;align-items:center;gap:12px;flex:none}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;margin-right:8px}
.lang span{padding:5px 10px;border-radius:var(--r-pill);font-size:13px;font-weight:500;color:var(--muted)}
.lang span.is-active{background:var(--paper-2);color:var(--ink)}

/* mega menu */
.mega{position:absolute;left:var(--margin);top:68px;width:min(1308px,calc(100% - 2*var(--margin)));padding:28px;border-radius:20px;background:rgba(255,255,255,.62);backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);box-shadow:0 24px 64px rgba(0,0,0,.14);outline:1px solid rgba(30,38,46,.06);opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity .22s var(--ease-expo),transform .22s var(--ease-expo)}
.mega.is-open{opacity:1;transform:none;pointer-events:auto}
.mega__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.mega__col h4{margin-bottom:12px}
.mega__item{display:flex;gap:14px;align-items:flex-start;padding:10px;border-radius:14px;transition:background var(--t-fast)}
.mega__item:hover{background:var(--paper-2)}
.mega__item .sq{width:44px;height:44px;border-radius:12px;background:var(--paper-3);display:grid;place-items:center;flex:none;transition:background var(--t-fast)}
.mega__item:hover .sq{background:#fff}
.mega__item .sq .lucide{width:22px;height:22px}
.mega__item strong{display:block;font-size:16px;font-weight:500;line-height:1.3}
.mega__item span{display:block;font-size:14px;line-height:1.4;color:var(--ink-2)}
.mega__foot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.mega__foot .chips{display:flex;gap:8px}

/* ==========================================================================
   00 HERO
   ========================================================================== */
.hero{padding:96px 0 64px}
.hero__head{display:flex;flex-direction:column;gap:28px}
.hero h1{color:#000;letter-spacing:-.03em}
.hero h1 br{display:inline}
.hero__lead{display:grid;grid-template-columns:2fr 6.5fr 4.5fr;gap:var(--gutter);align-items:center;margin-top:8px}
.hero__lead .lead{color:var(--ink-2)}
.hero__ctas{display:flex;gap:16px;justify-content:flex-end;flex-wrap:wrap}
.hero__panel{margin-top:72px;background:var(--grad-panel);border-radius:var(--r-panel);padding:40px 28px 0;overflow:hidden;position:relative}
.tiles{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:nowrap}
.tiles__group{display:contents}
.tile{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 8px;border-radius:var(--r-pill);background:rgba(255,255,255,.62);color:var(--ink-2);font-size:15px;font-weight:500;box-shadow:var(--pill-shadow);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transition:background .35s var(--ease-out),color .35s var(--ease-out),transform .35s var(--ease-out);white-space:nowrap}
.tile .sq{position:relative;width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink-2);flex:none;transition:background .35s var(--ease-out),color .35s var(--ease-out)}
.tile .sq .lucide{width:14px;height:14px}
/* pierścień czasu: conic-gradient od 0 do 360°, sterowany zmienną --p (0–1) przez JS */
.tile .sq::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from -90deg,#1B6F7C 0deg,#2391A7 calc(var(--p,0)*180deg),#2AA6BD calc(var(--p,0)*360deg),transparent calc(var(--p,0)*360deg));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));opacity:0;transition:opacity .35s var(--ease-out)}
.tile.is-active .sq::before{opacity:1}
/* etykieta: szerokość animowana przez JS (--w), wewnątrz padding 10 + 8 px; bez skoków */
.tile .lb{display:inline-block;width:var(--w,auto);overflow:hidden;opacity:1;padding:0 8px 0 10px;transition:width .45s cubic-bezier(.22,1,.36,1),opacity .3s var(--ease-out),padding .45s cubic-bezier(.22,1,.36,1)}
.tile:hover{transform:translateY(-1px);background:rgba(255,255,255,.8)}
.tile.is-active{background:rgba(255,255,255,.9);color:var(--ink)}
.tile.is-active .sq{background:var(--ink);color:#fff}
.tiles__sep{width:1px;height:22px;background:rgba(30,38,46,.14);flex:none}
.tile--ext{background:rgba(255,255,255,.3);border:1px dashed rgba(30,38,46,.32);box-shadow:none;padding-left:14px}
.tile--ext .lucide{width:16px;height:16px}
/* tryb zwinięty (< 1700 px): nieaktywne kafle = sama ikona; aktywny i najechany rozwinięte */
@media (max-width:1700px){
  .tile[data-module]:not(.is-active):not(.is-open) .lb{width:0;padding:0;opacity:0}
}
.hero__window{position:relative;margin:40px auto 0;width:min(1440px,100%);height:clamp(380px,33vw,636px);background:#fff;border-radius:16px 16px 0 0;box-shadow:0 16px 48px rgba(0,0,0,.06);overflow:hidden}
.hero__bar{height:53px;display:flex;align-items:center;justify-content:center;position:relative;background:var(--paper-2);border-bottom:1px solid var(--line)}
.hero__bar .dots{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;gap:5px}
.hero__bar .dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.hero__bar .url{height:29px;display:inline-flex;align-items:center;padding:0 14px;border-radius:8px;background:#fff;color:var(--muted);font-size:14px}
.hero__window img{width:100%;height:auto;display:block}
.hero__card{position:absolute;right:max(24px,2.3%);bottom:28%;width:380px;max-width:36%;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.hero__card .h{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.hero__card .h .sq{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center}
.hero__card .h .lucide{width:14px;height:14px}
.hero__card p{font-size:16px;line-height:25px;color:rgba(255,255,255,.9)}

/* ==========================================================================
   00c DOWODY (marquee)
   ========================================================================== */
.proof{padding:40px 0 80px}
.proof__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 200px,#000 calc(100% - 200px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 200px,#000 calc(100% - 200px),transparent)}
.marquee + .marquee{margin-top:16px}
.marquee__track{display:flex;gap:16px;width:max-content;animation:marquee 55s linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - 8px))}}
.ptile{height:120px;border-radius:14px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;padding:0 32px;flex:none;gap:14px}
.ptile--logo{width:248px}
.ptile--num{min-width:340px}
.ptile--num .numeral-l{color:var(--accent)}
.ptile--num span{max-width:160px;color:var(--ink-2)}
.ptile--quote{width:532px;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:0 28px}
.ptile--quote p{color:var(--ink-2)}
.logo{display:block;object-fit:contain;filter:brightness(0);opacity:.86}
.logo--agrii{width:101px;height:36px}
.logo--sonepar{width:129px;height:30px}
.logo--topmet{width:133px;height:36px}
.logo--parfum{width:91px;height:44px}
.logo--polnix{width:134px;height:28px}

/* ==========================================================================
   00b MANIFEST
   ========================================================================== */
.manifest{padding:40px 0 48px}
.manifest p{max-width:1344px}
.manifest .accent-text{color:var(--accent-text)}

/* ==========================================================================
   01 PROBLEM
   ========================================================================== */
.problem__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:stretch}
.problem__row .photo{min-height:480px}
.photo{position:relative;border-radius:16px;overflow:hidden;background:var(--paper-3);margin:0}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease-out)}
.photo-chip{transition:opacity .3s var(--ease-out)}
.photo-chip{position:absolute;left:24px;bottom:24px;width:max-content;max-width:calc(100% - 48px);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.photo-chip .h{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.photo-chip .h .sq{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--ink)}
.photo-chip .h .lucide{width:14px;height:14px}
.photo-chip .t{font-size:16px;line-height:25px}
.photo-chip .f{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.85);white-space:nowrap}
.photo-chip .f .lucide{width:14px;height:14px}
.photo-chip .f.positive{color:var(--positive-soft)}
.ledger{display:flex;flex-direction:column;gap:8px}
.ledger .stagger{display:flex;flex-direction:column;gap:8px}
.ledger .meta{margin-bottom:16px}
.loss{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:var(--r-row);backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.82);box-shadow:0 6px 20px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.025)}
.loss .icon-circle{background:var(--accent-tint)}
.loss .t{flex:1;min-width:0}
.loss .t strong{display:block;font-size:20px;line-height:26px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loss .t span{display:block;font-size:14px;line-height:21px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ledger__foot{color:var(--accent-text);padding:12px 0 4px}
.statement-row{margin-top:80px}

/* ==========================================================================
   02 REVENUE FLOW
   ========================================================================== */
.flow{position:relative;margin-bottom:56px}
.flow__line{position:relative;height:12px}
.flow__track{position:absolute;left:0;right:0;top:5px;height:2px;background:var(--line)}
.flow__progress{position:absolute;left:0;top:5px;height:2px;background:var(--grad-brand);width:12px}
.flow__dot{position:absolute;top:0;left:calc(var(--i)*12.5% + 6px);width:12px;height:12px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);cursor:pointer;transition:transform .3s var(--ease-out),background .3s,border-color .3s;z-index:1}
.flow__dot.is-done,.flow__dot.is-active{background:var(--accent);border-color:var(--accent)}
.flow__dot.is-active{transform:scale(1.33);box-shadow:0 0 0 2px var(--paper-2)}
.flow__dot.is-active::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:ring 2.4s ease-out infinite}
.flow__dot:hover,.flow__dot.is-hover{transform:scale(1.5)}
@keyframes ring{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.3);opacity:0}}
.flow__labels{display:grid;grid-template-columns:repeat(8,1fr);margin-top:8px}
.flow__tab{text-align:left;padding:6px 20px 6px 0;position:relative;display:flex;flex-direction:column;gap:4px;color:var(--ink-2);transition:color var(--t-ui)}
.flow__tab:hover .l{color:var(--ink)}
.flow__tab:hover .n{color:var(--accent-text)}
.flow__tab .n{font-size:12px;letter-spacing:.06em;color:var(--muted);font-weight:500}
.flow__tab .l{font-size:16px}
.flow__tab.is-active{color:var(--ink)}
.flow__tab.is-active .n{color:var(--accent-text)}
.flow__tab.is-active .l{font-size:20px;font-weight:500}
.flow__tab .d{font-size:14px;line-height:21px;color:var(--muted);max-height:0;overflow:hidden;opacity:0;transition:max-height .32s var(--ease-expo),opacity .25s}
.flow__tab.is-active .d{max-height:60px;opacity:1}
.stage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,8%,133px);padding:48px;min-height:615px;align-items:start}
.stage__copy{display:flex;flex-direction:column;gap:28px}
.stage__h{display:flex;align-items:baseline;gap:16px}
.stage__h .numeral-l{color:var(--accent)}
.stage__mods{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:-12px}
.stage__mods .tag{gap:6px;background:#fff;color:var(--ink);box-shadow:var(--pill-shadow)}
.stage__mods .tag .lucide{width:12px;height:12px;color:var(--accent)}
.stage__items{display:flex;flex-direction:column;gap:28px}
.stage__items li{display:flex;align-items:center;gap:12px}
.stage__items .lucide{width:18px;height:18px;color:var(--accent)}
.stage__foot{display:flex;align-items:center;gap:24px;padding-top:8px}
.stage__foot .next{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.stage__foot .next .lucide{width:14px;height:14px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kpi{padding:20px;display:flex;flex-direction:column;gap:6px}
.kpi span{color:var(--ink-2);font-size:14px;line-height:21px}
.kpi span.numeral-l{font-size:56px;line-height:62px;color:var(--ink)}
.minifig{margin-top:24px;padding:20px;display:flex;flex-direction:column;gap:12px}
.minifig .fh{display:flex;justify-content:space-between;align-items:center}
.minifig .status{display:inline-flex;align-items:center;gap:6px;height:29px;padding:0 12px;border-radius:var(--r-pill);background:var(--paper-2);font-size:14px;color:var(--ink-2)}
.minifig .status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--positive)}
.minifig .sec{display:grid;grid-template-columns:140px 1fr 60px;align-items:center;gap:16px;font-size:14px}
.minifig .sec .bar{height:6px;border-radius:3px;background:var(--paper-3);overflow:hidden}
.minifig .sec .bar i{display:block;height:100%;background:var(--accent);border-radius:3px;transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease-out)}
.in .minifig .sec .bar i{transform:scaleX(1)}
.minifig .sec b{font-weight:500;text-align:right}
/* element z Figmy pod KPI etapu (docs/27 §5): okno 800 × 528 skalowane zoomem do szerokości kolumny (main.js fitFlow), bieżący etap widoczny, reszta hidden */
.stage>*{min-width:0}
.stage__el{margin-top:24px;min-width:0}
.stage__el .b-win.el{display:none;position:relative;border-radius:20px}
.stage__el .b-win.el.is-cur{display:flex}
.stage-fade{transition:opacity .3s,transform .3s var(--ease-out)}
.stage-fade.is-out{opacity:0;transform:translateY(8px)}
.statement-cta{display:grid;grid-template-columns:2fr 7.6fr 3.1fr;gap:var(--gutter);align-items:center;margin-top:48px}
#flow{padding-bottom:96px}
.statement-cta .btn{justify-self:end}

/* ==========================================================================
   02b DIAGNOZA
   ========================================================================== */
.diag{display:grid;grid-template-columns:7.6fr 4.2fr;gap:clamp(32px,6.6%,117px)}
.diag__form{display:flex;flex-direction:column;gap:40px;padding:40px}
.diag__step{display:flex;flex-direction:column;gap:16px}
.diag__step .h{display:flex;align-items:center;gap:12px}
.diag__step .h .n{color:var(--accent-text)}
.diag__chips{display:flex;flex-wrap:wrap;gap:10px}
.diag__chips .chip{height:45px}
.diag__chips .chip .lucide.check{display:none}
.diag__chips .chip.is-active .lucide.check{display:block}
.diag__action{display:flex;align-items:center;gap:24px}
.diag__result{padding:32px;display:flex;flex-direction:column;gap:20px;transition:opacity .25s}
.diag__result.is-empty [data-res-gaps],.diag__result.is-empty [data-res-start],.diag__result.is-empty .btn,.diag__result.is-empty .res-hair{display:none}
.diag__result .empty{display:none;color:var(--muted)}
.diag__result{align-self:start;position:sticky;top:100px}
.diag__promise{display:none;flex-direction:column;gap:12px;padding:16px 18px;border-radius:12px;background:var(--paper-2)}
.diag__result.is-empty .diag__promise{display:flex}
.diag__promise .r{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:23px;color:var(--ink-2)}
.diag__promise .r .lucide{width:18px;height:18px;color:var(--accent);margin-top:2px}
.diag__result.is-empty .empty{display:block}
.miniflow{display:flex;justify-content:space-between;position:relative;padding-top:14px;margin:4px 0}
.miniflow::before{content:"";position:absolute;left:4px;right:4px;top:4px;height:2px;background:var(--line)}
.miniflow span{font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--muted);position:relative}
.miniflow span::before{content:"";position:absolute;left:3px;top:-14px;width:8px;height:8px;border-radius:50%;background:var(--line)}
.miniflow span.is-gap{color:var(--accent-text)}
.miniflow span.is-gap::before{background:var(--accent)}
.gap{display:flex;gap:12px;align-items:flex-start}
.gap .d{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:8px;flex:none}
.gap strong{display:block;font-size:16px;font-weight:500}
.gap span{display:block;font-size:14px;color:var(--ink-2)}

/* ==========================================================================
   04 COMMERCE INTELLIGENCE (stepper)
   ========================================================================== */
.ci{display:grid;grid-template-columns:5.3fr 6.5fr;gap:clamp(32px,6.6%,117px);align-items:start}
.stepper{display:flex;flex-direction:column;gap:8px}
.step{display:grid;grid-template-columns:2px 1fr;gap:20px;cursor:pointer}
.step .rail{background:rgba(30,38,46,.08);border-radius:1px;position:relative;overflow:hidden}
.step .rail i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--grad-brand-v);transition:none}
.step .c{display:flex;gap:16px;align-items:flex-start;padding:12px 0}
.step .b{display:flex;flex-direction:column;gap:6px;padding-top:2px;min-width:0}
.step .sq{width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:var(--paper-3);display:grid;place-items:center;color:var(--ink-2);transition:color var(--t-ui);align-self:flex-start}
.step .sq .lucide{width:20px;height:20px}
.step .b{display:flex;flex-direction:column;gap:8px;padding-top:9px}
.step .h{display:flex;align-items:center;gap:12px}
.step .h .n{font-size:12px;letter-spacing:.06em;color:var(--muted);font-weight:500}
.step .h strong{font-size:20px;line-height:26px;font-weight:500;color:var(--ink-2);transition:color var(--t-ui)}
.step .d{color:var(--ink-2);max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--ease-expo),opacity .25s}
.step.is-active .h .n{color:var(--accent-text)}
.step.is-active .h strong,.step.is-active .sq{color:var(--ink)}
.step.is-active .d{max-height:140px;opacity:1}
.stepper__hint{margin-top:16px;padding-left:16px;color:var(--ink-2)}
.fig{padding:32px;display:flex;align-items:center;justify-content:center;min-height:min(624px,52vw)}
.fig__win{width:100%;max-width:800px;background:#fff;border-radius:16px;box-shadow:var(--glass-shadow);padding:24px 28px;display:flex;flex-direction:column;gap:16px}
.fig__head{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px}
.fig__head .wordmark__name{font-size:20px}
.fig__signal{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:10px;background:var(--ink);color:#fff;font-size:16px;align-self:flex-start;transition:opacity .3s}
.fig__signal .lucide{width:16px;height:16px}
.fig__row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);transition:opacity .3s}
.fig__row .lucide{width:18px;height:18px;color:var(--accent)}
.fig__row .t{flex:1}
.fig__row .t strong{display:block;font-size:16px;font-weight:500}
.fig__row .t span{display:block;font-size:14px;color:var(--muted)}
.fig__row a{color:var(--accent-text);font-size:14px;font-weight:500}
.fig__input{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border:1px solid var(--line);border-radius:10px;color:var(--muted);margin-top:6px}
.fig__input .go{width:28px;height:36px;border-radius:6px;background:var(--accent);color:#fff;display:grid;place-items:center}
.fig__input .go .lucide{width:14px;height:14px}

/* ==========================================================================
   04b AI + HUMAN
   ========================================================================== */
.cards5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.card{padding:24px;display:flex;flex-direction:column;gap:14px;min-height:235px}
.card .icon-circle{margin-bottom:4px}
.card p{color:var(--ink-2)}
.band{margin-top:20px;display:grid;grid-template-columns:55fr 45fr;gap:48px;align-items:center;padding:32px 36px}
.band__levels{display:flex;flex-direction:column;gap:14px}
.band__levels .levels{display:flex;gap:8px;flex-wrap:wrap}
.band__levels .levels span{height:32px;display:inline-flex;align-items:center;padding:0 14px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.band__levels .levels span.is-active{color:var(--ink);border-color:var(--ink)}

/* ==========================================================================
   05 DLA KOGO
   ========================================================================== */
.segments{display:flex;gap:10px;margin-bottom:24px}
.proofline{display:flex;align-items:center;gap:16px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:32px}
.proofline .lg{font-size:12px;font-weight:600;letter-spacing:.08em;border:1px solid var(--line);padding:9px 12px;border-radius:6px}
.proofline p{flex:1;color:var(--ink-2)}
.dk{display:grid;grid-template-columns:5.3fr 7.6fr;gap:var(--gutter);align-items:stretch}
.dk .photo{min-height:480px}
.dk__panel{padding:40px;position:relative;display:flex;flex-direction:column;gap:20px;overflow:visible}
.dk__panel .lead-m{color:var(--ink);font-size:18px;line-height:29px}
.portal{background:#fff;border-radius:14px;padding:20px 24px;box-shadow:var(--glass-shadow);display:flex;flex-direction:column;gap:16px}
.portal .top{display:flex;justify-content:space-between;align-items:center}
.portal .status{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2)}
.portal .status .lucide{width:14px;height:14px;color:var(--positive)}
.portal .products{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.product{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.product .ph{height:80px;border-radius:6px;background:var(--paper-3);margin-bottom:6px}
.product .price{color:var(--ink-2)}
.popover{position:absolute;right:28px;bottom:28px;width:320px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.92);box-shadow:0 12px 32px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04)}
.popover .r{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.popover .r .lucide{width:14px;height:14px;color:var(--positive);margin-top:3px}
.popover .r span{display:block;color:var(--muted)}
.popover .r b{font-weight:500}
.cursor{position:absolute;right:330px;bottom:250px;width:28px;height:28px;color:var(--ink);filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}

/* ==========================================================================
   06 PERSPEKTYWY
   ========================================================================== */
.roles{display:flex;align-items:center;gap:24px;margin-bottom:56px}
.roles .chips{display:flex;gap:8px;flex-wrap:wrap}
.persp{display:grid;grid-template-columns:2fr 6.5fr 3.1fr;gap:var(--gutter)}
.persp__statement{display:flex;flex-direction:column;gap:24px}
.persp__statement .statement .muted{color:var(--muted)}
.kpi-panel{padding:28px;display:flex;flex-direction:column;gap:16px;align-self:start}
.kpi-panel .h{display:flex;align-items:center;gap:10px}
.kpi-panel .h .lucide{width:16px;height:16px;color:var(--accent)}
.kpi-panel .hairline{margin:0}
.kpi-panel .v{display:flex;align-items:baseline;gap:8px}
.kpi-panel .v .numeral-l{color:var(--accent)}

/* ==========================================================================
   07 CASE STUDIES
   ========================================================================== */
.filter{display:flex;align-items:center;gap:16px;margin-bottom:40px}
.filter .chips{display:flex;gap:8px}
.featured{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:16px;overflow:hidden;align-items:stretch}
.story{display:flex;flex-direction:column;gap:20px;padding:48px;background:var(--grad-panel);min-height:722px;justify-content:flex-start}
.story .h{display:flex;align-items:center;gap:14px}
.story .h .vsep{width:1px;height:24px;background:var(--line)}
.story .h .logo{width:133px;height:36px}
.story blockquote{margin:0}
.who{display:flex;align-items:center;gap:14px}
.who img{width:48px;height:48px;border-radius:50%}
.who strong{display:block;font-size:16px;font-weight:500}
.who span{display:block;font-size:14px;color:var(--muted)}
.chso{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.chso .lb{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.chso .lb .lucide{width:14px;height:14px;color:var(--accent)}
.chso p{font-size:14px;line-height:21px;color:var(--ink-2)}
.modules{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.modules .tag{gap:6px;background:#fff}
.modules .tag .lucide{width:12px;height:12px}
.story .btn{align-self:flex-start}
.featured .photo{border-radius:0;min-height:0}
.featured .photo img{object-position:38% 45%}
.metrics{position:absolute;left:24px;right:24px;bottom:24px;display:grid;grid-template-columns:repeat(3,1fr);padding:0;gap:0;background:rgba(30,38,46,.55);border-radius:14px}
.metrics .cell + .cell{border-left:1px solid rgba(255,255,255,.16)}
.metrics .cell{display:flex;flex-direction:column;gap:6px;padding:16px 20px}
.metrics .cell .ic{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center}
.metrics .cell .lucide{width:16px;height:16px;color:#fff}
.metrics .cell .numeral-l{font-size:56px;line-height:62px;color:#fff}
.metrics .cell span{font-size:14px;color:rgba(255,255,255,.85)}

/* ==========================================================================
   08 TECHNOLOGIA
   ========================================================================== */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);margin-bottom:64px}
.fact{display:flex;flex-direction:column;gap:10px;padding-top:31px;position:relative}
.fact::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left}
.fact .v{display:flex;align-items:baseline;gap:8px}
.fact .v .u{color:var(--accent);font-size:20px;font-weight:500}
.fact p{color:var(--muted);font-size:14px}
.evidence{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.ev{padding:32px;display:flex;flex-direction:column;gap:20px}
.ev .head{display:flex;gap:12px;align-items:flex-start}
.ev .head p{color:var(--ink-2);font-size:14px;line-height:21px}
.ev .num{display:flex;align-items:baseline;gap:10px}
.ev .num span{color:var(--ink-2)}
.ev .rows{display:flex;flex-direction:column;gap:8px}
.ev .r{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px}
.ev .r > .lucide{width:18px;height:18px;color:var(--ink-2)}
.ev .r .t{flex:1}
.ev .r .t strong{display:block;font-size:14px;font-weight:500}
.ev .r .t span{display:block;font-size:14px;color:var(--positive)}
.ev .r .t span.off{color:var(--muted)}
.toggle{width:40px;height:22px;border-radius:11px;background:var(--accent);position:relative;flex:none}
.toggle::after{content:"";position:absolute;top:3px;left:21px;width:16px;height:16px;border-radius:50%;background:#fff}
.toggle.off{background:var(--line)}
.toggle.off::after{left:3px}
.check{width:18px;height:18px;color:var(--positive)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--positive);flex:none;animation:pulse 2.4s infinite}
.dot.grey{background:var(--muted);animation:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(43,138,62,.35)}50%{box-shadow:0 0 0 6px rgba(43,138,62,0)}}

/* ==========================================================================
   09 JAK WDRAŻAMY
   ========================================================================== */
.process{padding:40px;margin-bottom:40px}
.process__line{position:relative;height:12px;margin-bottom:20px}
.process__line{--pw:calc((100% - 72px)/4)}
.process__line::before{content:"";position:absolute;left:calc(var(--pw)/2);right:calc(var(--pw)/2);top:5px;height:2px;background:var(--line)}
.process__line .pr{position:absolute;left:calc(var(--pw)/2);top:5px;height:2px;width:0;max-width:calc(100% - var(--pw));background:var(--grad-brand)}
.process__dots{position:absolute;left:0;right:0;top:0;height:12px}
.process__dots i{position:absolute;top:0;left:calc(var(--i)*(var(--pw) + 24px) + var(--pw)/2);transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:#fff;border:1px solid var(--line);cursor:pointer;transition:transform .3s var(--ease-out),background .3s,border-color .3s}
.process__dots i.is-done,.process__dots i.is-active{background:var(--accent);border-color:var(--accent)}
.process__dots i.is-active{transform:translateX(-50%) scale(1.33)}
.process__dots i:hover,.process__dots i.is-hover{transform:translateX(-50%) scale(1.5)}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step4{padding:24px;display:flex;flex-direction:column;gap:12px;min-height:280px;border:1px solid transparent;transition:border-color .3s,transform .3s var(--ease-out);cursor:pointer}
.step4:hover{transform:translateY(-2px)}
.step4.is-active{border-color:var(--accent)}
.step4 .top{display:flex;justify-content:space-between;align-items:center}
.step4 .top .icon-circle{border-radius:12px;background:var(--paper-3)}
.step4.is-active .top .icon-circle{background:var(--accent);color:#fff}
.step4 .top .icon-circle{transition:background .3s,color .3s}
.step4 .dur{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.step4 p{color:var(--ink-2);font-size:14px;line-height:21px}
.step4 .res{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:14px}
.step4 .res .lucide{width:14px;height:14px;color:var(--positive)}
.cta-row{display:flex;align-items:center;gap:24px;margin-bottom:56px}
.cta-row .body-xs{color:var(--muted)}
.wide-photo{aspect-ratio:1760/640}

/* ==========================================================================
   10 FAQ
   ========================================================================== */
.faq{display:grid;grid-template-columns:2fr 8.7fr;gap:var(--gutter)}
.faq__filters{display:flex;gap:8px;padding-bottom:24px}
.faq__item{border-top:1px solid var(--line);transition:opacity .2s,transform .3s var(--ease-expo)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__item.is-hidden{display:none}
.faq__q{width:100%;display:flex;align-items:center;gap:24px;padding:24px 0;text-align:left}
.faq__q .n{width:28px;color:var(--ink-2);font-size:12px;letter-spacing:.06em;font-weight:500}
.faq__q strong{flex:1;font-size:20px;line-height:26px;font-weight:500;transition:color var(--t-fast)}
.faq__q .tg{width:32px;height:32px;border-radius:50%;background:var(--paper-3);display:grid;place-items:center;transition:background var(--t-ui),color var(--t-ui)}
.faq__q .tg .lucide{width:16px;height:16px;transition:transform .18s}
.faq__item.is-open .faq__q .tg{background:var(--ink);color:#fff}
.faq__item.is-open .faq__q .tg .lucide{transform:rotate(45deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease-expo)}
.faq__a > div{overflow:hidden}
.faq__a p{padding:0 0 24px 52px;max-width:916px;color:var(--ink-2);opacity:0;transition:opacity .2s}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__item.is-open .faq__a p{opacity:1}

/* ==========================================================================
   11 ZAMKNIĘCIE (dark)
   ========================================================================== */
.footer{background:var(--dark);color:#fff;padding:96px 0 48px}
.footer__cta{display:grid;grid-template-columns:7.6fr 4.4fr;gap:var(--gutter);align-items:center;padding-bottom:64px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer__cta .copy{display:flex;flex-direction:column;gap:20px}
.footer__cta .copy .body-s{color:rgba(255,255,255,.8);max-width:720px}
.footer__cta .ctas{display:flex;gap:16px;justify-content:flex-end}
.footer .btn--primary{background:#fff;color:var(--ink)}
.footer .btn--primary:hover{background:#F0F0EE}
.footer .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}
.footer .btn--ghost:hover{border-color:#fff}
.footer__cols{display:grid;grid-template-columns:3.1fr repeat(5,1.55fr);gap:32px;padding:64px 0}
.footer__brand{display:flex;flex-direction:column;gap:14px}
.footer__brand .tag-line{color:rgba(255,255,255,.8);margin-bottom:14px}
.footer__brand .phone{font-size:18px}
.footer__brand a{color:rgba(255,255,255,.85);transition:color var(--t-fast)}
.footer__brand a:hover{color:#fff}
.social{display:flex;gap:10px;margin-top:10px}
.social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background var(--t-fast)}
.social a:hover{background:rgba(255,255,255,.16)}
.social .lucide{width:16px;height:16px}
.footer__col h4{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:16px}
.footer__col a{display:block;padding:6px 0;color:rgba(255,255,255,.85);transition:color var(--t-fast)}
.footer__col a:hover{color:#fff}
.footer__legal{display:flex;justify-content:space-between;align-items:center;padding-top:64px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;color:rgba(255,255,255,.6)}
.footer__legal .r{display:flex;gap:24px;align-items:center}
.footer__legal .r a:hover{color:#fff}

/* ==========================================================================
   RUCH — appear (hero) + reveal (scroll)
   ========================================================================== */
.appear{opacity:.001;transform:translateY(30px);will-change:transform,opacity}
.appear--fade{transform:none}
.appear--soft{transform:translateY(20px)}
body.is-ready .appear{opacity:1;transform:none;transition:opacity 1s var(--ease-norda),transform 1s var(--ease-norda);transition-delay:var(--d,0s)}
body.is-ready .appear--spring{transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:var(--d,0s)}
/* po sekwencji wejścia opóźnienia znikają, żeby późniejsze zmiany (np. crossfade karty modułu) nie czekały */
body.appear-done .appear{transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);transition-delay:0s;will-change:auto}
.reveal{opacity:.001;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0)*80ms)}
.reveal.in{opacity:1;transform:none}
.reveal-line .chapter::before,.reveal-line .fact::before,.reveal-line .hairline{transform:scaleX(0);transition:transform .9s var(--ease-out) .1s}
.reveal-line.in .chapter::before,.reveal-line.in .fact::before,.reveal-line.in .hairline{transform:scaleX(1)}
.stagger > *{opacity:.001;transform:translateY(20px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:0ms}.stagger.in > *:nth-child(2){transition-delay:80ms}.stagger.in > *:nth-child(3){transition-delay:160ms}.stagger.in > *:nth-child(4){transition-delay:240ms}.stagger.in > *:nth-child(5){transition-delay:320ms}.stagger.in > *:nth-child(6){transition-delay:400ms}.stagger.in > *:nth-child(7){transition-delay:480ms}.stagger.in > *:nth-child(8){transition-delay:560ms}

@media (prefers-reduced-motion:reduce){
  .appear,.reveal,.stagger > *{opacity:1!important;transform:none!important;transition:none!important}
  .marquee__track{animation:none}
  .reveal-line .chapter::before,.reveal-line .fact::before,.reveal-line .hairline{transform:none!important}
  .dot{animation:none}
  html{scroll-behavior:auto}
}


/* ---------- dopasowania 1:1 do Figmy (20.10) ---------- */
.stage__copy .hairline,.minifig .hairline,.diag__result .hairline{margin:0;flex:none}
.loss .t span{margin-top:2px}
.step4 .heading-xs{margin-top:4px}
.faq__item.is-open .faq__q{padding-bottom:16px}
.dk__head{display:flex;flex-direction:column;gap:6px}
[data-res-gaps]{display:flex;flex-direction:column;gap:20px}
/* tryb QA: ?qa=1 wyłącza animacje, żeby zrzuty były deterministyczne */
html.qa *{transition:none!important;animation:none!important}
html.qa .appear,html.qa .reveal,html.qa .stagger > *{opacity:1!important;transform:none!important}
html.qa .reveal-line .chapter::before,html.qa .reveal-line .fact::before,html.qa .reveal-line .hairline{transform:none!important}


/* 08 Technologia: rytm 1:1 z Figmy (container gap 64; fact = hairline + 10 + 20; head title→text 2; row title→status 2; kółko ikony białe 62 %) */
#tech .chapter{margin-bottom:64px}
.ev .head strong{display:block;margin-bottom:2px}
.ev .head .icon-circle{background:rgba(255,255,255,.62)}
.ev .r .t span{margin-top:2px}

/* ---------- mniejsze ekrany (robocze) ---------- */
@media (max-width:1919px){
  :root{--margin:clamp(24px,4.17vw,80px)}
  .container{width:min(var(--container),calc(100% - 2*var(--margin)))}
}
@media (max-width:1700px){
  .story{min-height:0}
  .story blockquote{font-size:clamp(30px,2.5vw,40px);line-height:1.25}
  .metrics .cell .numeral-l{font-size:48px;line-height:54px}
}
@media (max-width:1600px){
  .loss .tag{font-size:11px;padding:0 10px}
  .nav .btn--secondary{display:none}
}
@media (max-width:1500px){
  .hero__lead{grid-template-columns:2fr 10fr}
  .hero__ctas{grid-column:2;justify-content:flex-start}
  .hero__lead{grid-template-columns:1fr 1fr}
  .hero__lead .lead{grid-column:1}
  .cards5{grid-template-columns:repeat(5,1fr)}
  .hero__card{right:24px}
  .mega{width:min(1308px,calc(100% - 2*var(--margin)))}
}
@media (max-width:1100px){
  .chapter{grid-template-columns:1fr;gap:16px}
  .chapter__main{max-width:none}
  .problem__row,.featured,.dk,.diag,.ci,.stage,.hero__lead,.footer__cta,.persp,.faq,.statement-cta{grid-template-columns:1fr}
  .cards5,.evidence,.facts,.steps4{grid-template-columns:1fr 1fr}
  .process__line{display:none}
  .footer__cols{grid-template-columns:1fr 1fr 1fr}
  .flow__labels{grid-template-columns:repeat(4,1fr);row-gap:24px}
  .band{grid-template-columns:1fr}
  .offset-2{margin-left:0}
  .nav__links{display:none}
  .hero__panel{height:auto;padding-bottom:0}
  .hero__window{width:100%}
  .popover,.cursor{display:none}
  .featured .photo{height:440px} /* 701–1100: zdjęcie case study miało 0 wysokości (img absolute) */
}

/* ==========================================================================
   NASTĘPNY KROK na stronach modułów (D40): jeden kontekstowy CTA po dowodzie, przed FAQ
   ========================================================================== */
.section--cta{padding-top:0}
.m-cta{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center;padding:48px 56px;border-radius:20px}
.m-cta__copy{display:flex;flex-direction:column;gap:14px;max-width:760px}
.m-cta__copy h2,.m-cta__copy p{margin:0}
.m-cta__act{display:flex;flex-direction:column;align-items:flex-end;gap:16px;justify-self:end}
@media (max-width:1100px){.m-cta{grid-template-columns:1fr;gap:24px;padding:36px}.m-cta__act{align-items:flex-start;justify-self:start}}
@media (max-width:700px){.m-cta{padding:20px;border-radius:16px;gap:18px}.m-cta__act{width:100%}.m-cta__act .btn{width:100%;justify-content:center}}

/* ==========================================================================
   PODGLĄD (D46): ciemny panel hero · włączany ?hero=dark (html.hero-dark). Domyślna wersja jasna bez zmian.
   ========================================================================== */
/* A · stal i śliwka: ciemna stal z poświatą stalowo-błękitną (prawy górny róg) i śliwkową soczewką (lewy dół), jak flary hero z 19.10 */
html.hero-dark .hero__panel{background:
  radial-gradient(42% 60% at 86% 8%, rgba(96,140,176,.62) 0%, rgba(96,140,176,0) 70%),
  radial-gradient(38% 52% at 10% 96%, rgba(120,88,120,.55) 0%, rgba(120,88,120,0) 70%),
  radial-gradient(60% 40% at 50% 120%, rgba(140,160,180,.28) 0%, rgba(140,160,180,0) 70%),
  linear-gradient(160deg,#2A3540 0%,#222B35 55%,#1F2830 100%)}
/* B · ciepły grafit: grafit z piaskową poświatą (lewy górny róg) i chłodnym cieniem u dołu */
html.hero-warm .hero__panel{background:
  radial-gradient(46% 62% at 12% 6%, rgba(214,186,150,.5) 0%, rgba(214,186,150,0) 70%),
  radial-gradient(40% 50% at 90% 92%, rgba(90,120,150,.45) 0%, rgba(90,120,150,0) 70%),
  linear-gradient(160deg,#3A4046 0%,#2C333A 55%,#262D34 100%)}
/* D50/D51 · tekstury hero modułów (html.hero-tex + html.hero-<key>): jedna reguła, tekstura z --hero-tex, ziarno overlay 10 % pod oknem, cień okna jak w C.
   Źródła: design/tools/gradient/hero-<key>.svg (make-hero-grads.py: kompozycje z referencji MG przebarwione na barwę modułu), tekstury img/grad/hero-<key>.webp 1800×800 */
html.hero-tex .hero__panel{background:var(--hero-base,#9AA) var(--hero-tex) center/cover no-repeat;isolation:isolate}
html.hero-tex .hero__panel::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.10;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
html.hero-tex .hero__window{box-shadow:0 12px 36px -8px rgba(20,20,30,.14)}
html.hero-coral{--hero-tex:url(../img/grad/hero-coral.webp);--hero-base:#B9B3BC}
html.hero-pulse{--hero-tex:url(../img/grad/hero-pulse.webp);--hero-base:#7D8CC4}
html.hero-crm{--hero-tex:url(../img/grad/hero-crm.webp);--hero-base:#6E9AA5}
html.hero-oferty{--hero-tex:url(../img/grad/hero-oferty.webp);--hero-base:#CDB98C}
html.hero-pim{--hero-tex:url(../img/grad/hero-pim.webp);--hero-base:#9AA4B0}
html.hero-ci{--hero-tex:url(../img/grad/hero-ci.webp);--hero-base:#7C6FB8}
html.hero-fulfillment{--hero-tex:url(../img/grad/hero-fulfillment.webp);--hero-base:#9CC0DC}
html.hero-service{--hero-tex:url(../img/grad/hero-service.webp);--hero-base:#B59AA6}
html.hero-retention{--hero-tex:url(../img/grad/hero-retention.webp);--hero-base:#9A6A74}
html.hero-int{--hero-tex:url(../img/grad/hero-int.webp);--hero-base:#7A8C98}
/* C · błękit z kremową smugą: tekstura z pliku MG (gradient.jpg 29.10) jako hero-blue.webp, 1800×800, piksel w piksel */
html.hero-blue .hero__panel{background:#6B8DBC url(../img/grad/hero-blue.webp) center/cover no-repeat;isolation:isolate}
/* ziarno 10 % overlay (nie multiply jak na kartach, bo multiply ginie na granacie); pod kaflami i oknem */
html.hero-blue .hero__panel::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.10;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
html.hero-dark .tile,html.hero-warm .tile,html.hero-blue .tile{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
html.hero-dark .tile .sq,html.hero-warm .tile .sq,html.hero-blue .tile .sq{background:rgba(255,255,255,.14);color:#fff}
html.hero-dark .tile:hover,html.hero-warm .tile:hover,html.hero-blue .tile:hover{background:rgba(255,255,255,.18)}
html.hero-dark .tile.is-active,html.hero-warm .tile.is-active,html.hero-blue .tile.is-active{background:#fff;color:var(--ink)}
html.hero-dark .tile.is-active .sq,html.hero-warm .tile.is-active .sq,html.hero-blue .tile.is-active .sq{background:var(--ink);color:#fff}
html.hero-dark .tile .ai,html.hero-warm .tile .ai,html.hero-blue .tile .ai{background:rgba(255,255,255,.16);color:#fff!important}
html.hero-dark .tile.is-active .ai,html.hero-warm .tile.is-active .ai,html.hero-blue .tile.is-active .ai{background:var(--accent-tint);color:var(--accent-text)!important}
html.hero-dark .tiles__sep,html.hero-warm .tiles__sep,html.hero-blue .tiles__sep{background:rgba(255,255,255,.22)}
html.hero-dark .tile--ext,html.hero-warm .tile--ext,html.hero-blue .tile--ext{background:transparent;border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.8)}
/* hero-blue: pasek kafli biegnie przez krem i granat, więc nieaktywne kafle dostają ciemne szkło (czytelne na obu końcach) */
/* liquid glass (MG 29.10): przezroczystość + blur 24 px, bez obrysu i bez linii na krawędzi; aktywny = szkło białe 72 %, nie pełna biel */
html.hero-blue .tile{background:rgba(14,24,42,.22);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:none}
html.hero-blue .tile .sq,html.hero-blue .tile .ai{background:rgba(255,255,255,.16)}
html.hero-blue .tile:hover{background:rgba(14,24,42,.3)}
html.hero-blue .tile.is-active{background:rgba(255,255,255,.72);color:var(--ink);box-shadow:none}
html.hero-blue .tiles__sep{background:rgba(255,255,255,.4)}
html.hero-blue .tile--ext{background:rgba(14,24,42,.18);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border-color:rgba(255,255,255,.45);color:#fff}
html.hero-dark .hero__window,html.hero-warm .hero__window{box-shadow:0 30px 80px -20px rgba(0,0,0,.55)}
/* C: cień ledwo widoczny, jak na jasnym panelu, tylko lekko chłodniejszy (MG 29.10: „interface ma za mocny cień”) */
html.hero-blue .hero__window{box-shadow:0 12px 36px -8px rgba(10,20,40,.14)}
html.hero-dark .hero__card,html.hero-warm .hero__card,html.hero-blue .hero__card{background:rgba(255,255,255,.9);color:var(--ink);box-shadow:var(--glass-shadow)}
html.hero-dark .hero__card p,html.hero-warm .hero__card p,html.hero-blue .hero__card p{color:var(--ink-2)}
html.hero-dark .hero__card .h .sq,html.hero-warm .hero__card .h .sq,html.hero-blue .hero__card .h .sq{background:var(--ink);color:#fff}

/* ==========================================================================
   D52 · CTA z doradcą i wideo (podgląd ?cta=doradca; domyślnie ukryte, stary blok „Następny krok” zostaje)
   ========================================================================== */
.ad{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding:40px 56px 40px 40px;border-radius:20px}
.ad__media{position:relative;aspect-ratio:4/5;width:100%;max-width:440px;border-radius:18px;overflow:hidden;background:#D9DAD6 url(../img/doradca-maciej.webp) center/cover no-repeat;isolation:isolate}
.ad__media[data-advisor="aleksandra"]{background-image:url(../img/doradca-aleksandra.webp)}
.ad__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,30,0) 62%,rgba(20,24,30,.45) 100%);pointer-events:none}
.ad__media iframe,.ad__media video{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;background:#000}
.ad__tag{position:absolute;right:14px;top:14px;z-index:1;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;padding:6px 10px;border-radius:999px;background:rgba(20,24,30,.38);color:#fff;backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4)}
.ad__play{position:absolute;left:16px;bottom:16px;z-index:1;display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border:0;border-radius:999px;background:rgba(255,255,255,.62);color:var(--ink);font:inherit;font-weight:500;font-size:14px;cursor:pointer;backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:none;transition:transform .25s var(--ease-out),background .25s}
.ad__play:hover{background:rgba(255,255,255,.78);transform:translateY(-1px)}
.ad__play .sq{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none}
.ad__play .sq .lucide{width:16px;height:16px;margin-left:2px}
.ad__media.is-playing .ad__play,.ad__media.is-playing .ad__tag,.ad__media.is-playing::after{display:none}
.ad__copy{display:flex;flex-direction:column;gap:18px;max-width:720px}
.ad__copy h2,.ad__copy p{margin:0}
.ad__who{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:15px}
.ad__who b{font-weight:600;color:var(--ink)}
.ad__who span{color:var(--ink-2)}
.ad__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ad__list li{display:flex;gap:10px;align-items:flex-start;color:var(--ink)}
.ad__list .lucide{width:18px;height:18px;color:var(--accent-text);flex:none;margin-top:2px}
.ad__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:4px}
.ad__trust{font-size:13px;line-height:18px;color:var(--ink-2)}
@media (max-width:1100px){.ad{grid-template-columns:1fr;gap:28px;padding:32px}.ad__media{max-width:420px}}
@media (max-width:700px){.ad{padding:16px;border-radius:16px;gap:20px}.ad__media{max-width:none}.ad__act .btn{width:100%;justify-content:center}}
/* D103: na desktopie mapa luk zmienia się sama obok formularza – przycisk zostaje tylko tam, gdzie wynik jest poniżej (mobile) */
@media (min-width:1024px){.diag__action [data-diag-go]{display:none}}
/* D104: panel na gradiencie hero modułu (MG 4.11: sekcja AI + Human na gradiencie z hero Realizacji i dostawy); tekstura i ziarno jak w html.hero-tex */
.panel--grad{position:relative;isolation:isolate;background:var(--hero-base,#9AA) var(--hero-tex) center/cover no-repeat}
.panel--grad::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.10;mix-blend-mode:overlay;border-radius:inherit;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.panel--grad-fulfillment{--hero-tex:url(../img/grad/hero-fulfillment.webp);--hero-base:#9CC0DC}
/* D105: doradcy na stronie kontaktu – dwie karty z tym samym zdjęciem i listą, co blok „Twój doradca” */
.advisors{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.adv{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:28px;align-items:center;padding:24px;border-radius:20px}
.adv .ad__media{max-width:none;aspect-ratio:4/5}
.adv__copy{display:flex;flex-direction:column;gap:12px;min-width:0}
.adv__copy h3,.adv__copy p{margin:0}
.adv .ad__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
@media (max-width:1023.98px){.advisors{grid-template-columns:1fr}}
@media (max-width:639.98px){.adv{grid-template-columns:1fr}.adv .ad__media{max-width:320px}}
.adv__contact{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.adv__contact a{color:var(--ink);text-decoration:none}
.adv__contact a:hover{text-decoration:underline}
/* D107: oś procesu z trzema krokami (cennik „Jak zaczynamy”) – ta sama mechanika co 4 kroki na stronie głównej */
.process--3 .process__line{--pw:calc((100% - 48px)/3)}
.steps3{grid-template-columns:repeat(3,1fr)}
.process--3 .step4{min-height:0}
@media (max-width:1023.98px){.steps3{grid-template-columns:1fr}}