/* home.css: strona główna = hero z obietnicą i trzema kierunkami + wspólna stopka.
   Ładowany tylko na stronie głównej, po site.css (body.jp-page). */

/* ===== Hero „Wg brand booka: obietnica + trzy kierunki” (projekt nowe-hero.png, 05.10.2026) ===== */
/* Ciemne tło marki z miękkim światłem w prawym górnym rogu (bez kształtów w tle) i klastrem pikseli (jeden pomarańczowy akcent).
   Tekst do lewej: nadtytuł, duży tytuł w dwóch wierszach, pod nim wstęp po lewej i przyciski po prawej.
   Niżej trzy numerowane karty kierunków; cała karta jest klikalna (rozciągnięty link ze strzałką).
   Bez pętli i paralaksy: jednorazowe wejście, wyłączone przy ograniczonym ruchu. */
.hero-centrum{
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  padding:calc(var(--jp-nav-total,64px) + clamp(56px,10vh,140px)) 0 clamp(64px,10vh,104px);
  background:radial-gradient(ellipse 62% 58% at 88% 4%,rgba(27,144,146,.2) 0%,rgba(27,144,146,.06) 45%,transparent 72%),#012D32;color:#fff;
  font-family:"Inter","Inter Hero Fallback","Segoe UI",system-ui,sans-serif;font-size:1rem;line-height:1.6;
}
.hero-centrum :where(p){overflow-wrap:break-word;hyphens:auto}
.hero-centrum :where(h1,h2,h3){overflow-wrap:break-word;hyphens:none}
.hero-centrum .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hero-centrum__inner{position:relative;z-index:1;width:min(1280px,100% - 160px);margin-inline:auto}
/* Klaster pikseli w prawym górnym rogu treści */
.hero-centrum .hero-centrum__pixels{position:absolute;top:-40px;right:8px;display:block;width:86px;height:auto;overflow:visible;pointer-events:none}

.hero-centrum .hero-centrum__copy{position:relative;container-type:inline-size}
.hero-centrum .hero-centrum__title{margin:0;color:#fff;font-size:clamp(2.5rem,7.2vw,6.5rem);font-size:max(2.1rem,min(6.5rem,100cqi / 12.3));font-weight:600;line-height:.98;letter-spacing:-.035em}
.hero-centrum .hero-centrum__title>span{display:block}
.hero-centrum .hero-centrum__title-accent{color:#6FD4CF}
.hero-centrum .hero-centrum__row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px 48px;margin-top:clamp(28px,4vh,44px)}
.hero-centrum .hero-centrum__lead{flex:1 1 auto;max-width:40rem;margin:0;color:rgba(255,255,255,.82);font-size:clamp(1rem,.92rem + .3vw,1.1875rem);line-height:1.58;letter-spacing:-.006em;text-wrap:pretty;hyphens:manual}
.hero-centrum .hero-centrum__actions{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;gap:12px}
.hero-centrum .jp-btn:focus-visible{outline:3px solid #6FD4CF;outline-offset:3px}

/* Trzy kierunki */
.hero-centrum .hero-directions{position:relative;margin-top:clamp(48px,8vh,80px);scroll-margin-top:calc(var(--jp-nav-total,64px) + 24px)}
.hero-centrum .hero-directions__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.hero-centrum .hero-direction{position:relative;display:flex;flex-direction:column;min-height:280px;padding:32px;border:1px solid rgba(111,212,207,.16);border-radius:20px;background:rgba(19,69,74,.5);
  transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s,background .25s}
.hero-centrum .hero-direction__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:auto}
.hero-centrum .hero-direction__num{color:#3AAFA9;font-size:2.125rem;font-weight:300;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero-centrum .hero-direction__link{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(58,175,169,.6);border-radius:50%;color:#6FD4CF;text-decoration:none;transition:background .25s,border-color .25s,color .25s}
.hero-centrum .hero-direction__link::after{content:"";position:absolute;inset:0;border-radius:20px}
.hero-centrum .hero-direction__link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-centrum .hero-direction__link:focus-visible{outline:none}
.hero-centrum .hero-direction__link:focus-visible::after{outline:3px solid #6FD4CF;outline-offset:3px}
.hero-centrum .hero-direction__label{margin:40px 0 8px;color:rgba(255,255,255,.66);font-size:.875rem;font-weight:500;line-height:1.4}
.hero-centrum .hero-direction__name{margin:0;color:#fff;font-size:clamp(1.5rem,1.1rem + 1vw,1.875rem);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.hero-centrum .hero-direction__name span{color:#6FD4CF}
.hero-centrum .hero-direction__promise{margin:12px 0 0;color:rgba(255,255,255,.82);font-size:1.0625rem;line-height:1.5;hyphens:manual}
@media (hover:hover){
  .hero-centrum .hero-direction:hover{transform:translateY(-4px);border-color:rgba(111,212,207,.45);background:rgba(19,69,74,.78)}
  .hero-centrum .hero-direction:hover .hero-direction__link{border-color:#FC7505;background:#FC7505;color:#fff}
}
.hero-centrum .hero-direction:focus-within .hero-direction__link{border-color:#FC7505;background:#FC7505;color:#fff}

@media (prefers-reduced-motion:no-preference){
  .hero-centrum .hero-centrum__copy>*{animation:hvc-in .7s cubic-bezier(.22,1,.36,1) both}
  .hero-centrum .hero-centrum__title{animation-delay:.05s}
  .hero-centrum .hero-centrum__row{animation-delay:.1s}
  .hero-centrum .hero-direction{animation:hvc-card .75s cubic-bezier(.22,1,.36,1) calc(.18s + var(--d,0) * 90ms) backwards}
  .hero-centrum .hero-centrum__px{animation:hvc-fade .5s ease-out calc(.5s + var(--i) * 60ms) both}
}
@keyframes hvc-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hvc-card{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes hvc-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .hero-centrum .hero-direction,.hero-centrum .hero-direction__link{transition-duration:.01ms}
}

@media (max-width:1180px){
  .hero-centrum__inner{width:min(1280px,100% - 80px)}
  .hero-centrum .hero-direction{padding:26px;min-height:250px}
}
@media (max-width:960px){
  .hero-centrum .hero-centrum__row{flex-direction:column;align-items:flex-start}
  .hero-centrum .hero-directions__list{grid-template-columns:1fr;gap:12px}
  .hero-centrum .hero-direction{min-height:0;padding:24px}
  .hero-centrum .hero-direction__top{margin-bottom:0}
  .hero-centrum .hero-direction__label{margin-top:20px}
}
@media (max-width:720px){
  .hero-centrum{padding:calc(var(--jp-nav-total,64px) + env(safe-area-inset-top) + 72px) 0 56px}
  .hero-centrum__inner{width:calc(100% - 32px)}
  .hero-centrum .hero-centrum__pixels{top:-52px;right:0;width:64px}
  .hero-centrum .hero-centrum__actions{width:100%}
  .hero-centrum .jp-btn{flex:1 1 100%}
  .hero-centrum .hero-direction__num{font-size:1.75rem}
  .hero-centrum .hero-direction__link{width:44px;height:44px}
  .hero-centrum .hero-direction__promise{font-size:1rem}
}
@media (forced-colors:active){
  .hero-centrum .hero-direction,.hero-centrum .hero-direction__link{border:1px solid CanvasText}
}

/* ===== Sekcje pod hero (szkic 05.10.2026; brief, s. 4: platforma, proces, Advisory, Technology, doświadczenie, kontakt) =====
   Zbudowane ze wspólnej warstwy site.css (jp-section, jp-card, jp-device, jp-person, jp-kind, jp-cta); tu tylko układ.
   Przejście z ciemnego hero: jasna część strony nachodzi na hero zaokrągloną górną krawędzią (arkusz na ciemnym tle). */
/* Te same krawędzie treści co w hero (1280 px, margines 80/40/16 px), żeby sekcje stały w jednej linii z kartami kierunków. */
.home-body{--jp-container:1280px;--jp-container-wide:1280px;--jp-gutter:80px;position:relative;z-index:1;margin-top:-32px;border-radius:32px 32px 0 0;background:var(--jp-canvas);overflow:hidden;overflow:clip}
.home-more{display:flex;flex-wrap:wrap;gap:0 var(--jp-s-6);margin:var(--jp-s-5) 0 0}
.home-more--center{justify-content:center}

/* 3. Platforma w praktyce: konfiguracja -> cennik */
.home-platform__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,72px);align-items:center}
.home-platform__copy{margin:0}
.home-platform__media{display:grid;gap:var(--jp-s-4);justify-items:center;margin:0}
/* Dwa ekrany w jednej kompozycji: konfigurator, na nim mniejszy ekran cennika */
.home-platform__stack{position:relative;inline-size:100%;padding:0 0 9% 0}
.home-platform__main{inline-size:88%}
.home-platform__over{position:absolute;inset-inline-end:0;inset-block-end:0;inline-size:56%}
.home-platform__over .jp-device__screen{box-shadow:var(--jp-shadow-4)}
.home-flow__n{display:grid;place-items:center;flex:none;inline-size:2.5rem;block-size:2.5rem;border-radius:50%;background:var(--jp-surface);color:var(--jp-text);font-size:var(--jp-fs-sm);font-weight:650;box-shadow:0 0 0 2px var(--jp-turq),var(--jp-shadow-1)}

/* 4. Cały proces CPQ: sześć kroków na jednej osi */
.home-flow{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--jp-s-3);margin:0;padding:0;list-style:none}
.home-flow::before{content:"";position:absolute;inset-inline:8%;inset-block-start:calc(var(--jp-s-4) + 1.25rem - 1px);block-size:2px;border-radius:2px;background:linear-gradient(90deg,var(--jp-aqua-200),var(--jp-turq) 50%,var(--jp-aqua-200))}
.home-flow__step{position:relative}
.home-flow__step>a{display:grid;justify-items:center;align-content:start;gap:var(--jp-s-3);block-size:100%;padding:var(--jp-s-4) var(--jp-s-2);border-radius:var(--jp-r-md);color:var(--jp-text);text-align:center;text-decoration:none;transition:background-color var(--jp-dur-2) var(--jp-ease)}
.home-flow__step strong{font-size:var(--jp-fs-sm);font-weight:600;line-height:1.3;transition:color var(--jp-dur-2) var(--jp-ease)}
/* Krok procesu: bez tła kafelka przy wskazaniu; sygnałem jest pomarańczowe kółko i turkusowy podpis. */
@media (hover:hover) and (pointer:fine){.home-flow__step>a:hover strong{color:var(--jp-brand-icon)}}

/* 5. Advisory: pięć obszarów + trzech ekspertów */
.home-areas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--jp-gap);margin:0;padding:0;list-style:none}
.home-area{padding:var(--jp-s-3);gap:var(--jp-s-3)}
.home-area__media{overflow:hidden;overflow:clip;aspect-ratio:3/2;border-radius:var(--jp-r-md);background:var(--jp-aqua-50);box-shadow:inset 0 0 0 1px var(--jp-hair)}
.home-area__media img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.home-area .jp-card__title{padding:0 var(--jp-s-2) var(--jp-s-2);font-size:1.0625rem}
.home-experts{margin-block-start:clamp(32px,2rem + 1.5vw,56px);padding-block-start:var(--jp-s-6);border-block-start:1px solid var(--jp-line)}
.home-experts__title{margin:0 0 var(--jp-s-5);color:var(--jp-brand-text);font-size:var(--jp-fs-eyebrow);font-weight:600;line-height:1.3;letter-spacing:-.005em}
.home-experts__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--jp-s-5) var(--jp-gap);margin:0;padding:0;list-style:none}
.home-experts .jp-person{display:flex;align-items:flex-start;gap:var(--jp-s-4)}
.home-experts .jp-person__avatar{inline-size:52px;block-size:52px;font-size:.9375rem;box-shadow:0 0 0 4px var(--jp-aqua-100)}
.home-experts .jp-person b{font-size:var(--jp-fs-h4);line-height:1.3;letter-spacing:-.012em}
.home-experts .jp-person__role{margin-block-start:4px;font-size:var(--jp-fs-sm);line-height:1.45}

/* 6. Technology: produkt w rozwoju + trzy koncepcje */
.home-tech__grid{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:var(--jp-gap)}
.home-tech__grid .jp-kind{margin-block-end:var(--jp-s-2);white-space:normal}
.home-tech__product .jp-card__title{font-size:var(--jp-fs-h3);line-height:1.15;letter-spacing:-.02em}

/* 7. Doświadczenie: tylko to, co już pokazuje /o-nas/ */
.home-experience{border-block-start:1px solid var(--jp-line)}
.home-experience__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--jp-s-5) var(--jp-s-8);align-items:end}
.home-experience__copy{display:grid;gap:var(--jp-s-3)}
.home-experience__copy>*{margin:0}
.home-experience__note{color:var(--jp-text-2);font-size:var(--jp-fs-sm)}
.home-experience__refs{display:grid;gap:var(--jp-s-2);justify-items:start}
.home-refs{display:flex;flex-wrap:wrap;gap:var(--jp-s-2) var(--jp-s-6);margin:0;padding:0;list-style:none}
.home-refs li{color:var(--jp-text);font-size:var(--jp-fs-h4);font-weight:600;line-height:1.3;letter-spacing:-.012em}

@media (max-width:1180px){
  .home-body{--jp-gutter:40px}
}
@media (max-width:1080px){
  .home-flow{grid-template-columns:1fr;gap:0;max-inline-size:440px;margin-inline:auto}
  .home-flow::before{inset-inline:auto;inset-inline-start:calc(var(--jp-s-3) + 1.25rem - 1px);inset-block:var(--jp-s-6);inline-size:2px;block-size:auto;background:linear-gradient(180deg,var(--jp-aqua-200),var(--jp-turq) 50%,var(--jp-aqua-200))}
  .home-flow__step>a{grid-template-columns:2.5rem 1fr;justify-items:start;align-items:center;column-gap:var(--jp-s-4);padding:var(--jp-s-3);text-align:start}
  .home-areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-area{flex-direction:row;align-items:center;gap:var(--jp-s-4)}
  .home-area__media{flex:none;inline-size:112px}
  .home-area .jp-card__title{padding:0}
  .home-experts__list{grid-template-columns:1fr}
  .home-tech__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home-tech__product{grid-column:1 / -1}
}
@media (max-width:900px){
  .home-platform__grid{grid-template-columns:1fr}
  .home-experience__inner{grid-template-columns:1fr;align-items:start}
}
@media (max-width:720px){
  .home-body{--jp-gutter:16px;margin-top:-24px;border-radius:24px 24px 0 0}
  .home-platform__stack{padding:0}
  .home-platform__main{inline-size:100%}
  .home-platform__over{position:static;inline-size:80%;margin:var(--jp-s-4) 0 0 auto}
  .home-areas,.home-tech__grid{grid-template-columns:1fr}
  .home-area__media{inline-size:88px}
}
@media (forced-colors:active){
  .home-flow__n{border:1px solid CanvasText}
}

/* Kafle obszarów Advisory: krótki zakres pod tytułem (brief s. 3: zrozumiała obietnica i krótki opis). */
.home-area__text{margin:var(--jp-s-1) 0 0;font-size:var(--jp-fs-sm);line-height:1.45;color:var(--jp-text-2)}

/* Kółko kroku pomarańczowe tylko przy najechaniu lub fokusie (sygnał interakcji, nie stały akcent — brief s. 14). */
.home-flow__n{transition:background-color var(--jp-dur-2) var(--jp-ease),color var(--jp-dur-2) var(--jp-ease),box-shadow var(--jp-dur-2) var(--jp-ease)}
@media (hover:hover) and (pointer:fine){.home-flow__step a:hover .home-flow__n{background:var(--jp-accent);color:#fff;box-shadow:0 0 0 2px var(--jp-accent),var(--jp-shadow-1)}}
.home-flow__step a:focus-visible .home-flow__n{background:var(--jp-accent);color:#fff;box-shadow:0 0 0 2px var(--jp-accent),var(--jp-shadow-1)}