/* home.css: strona główna = hero „Centrum” z trzema kierunkami + wspólna stopka.
   Ładowany tylko na stronie głównej, po site.css (body.jp-page, bez legacy.css od 02.10.2026).
   Reguły dawnego legacy.css, od których zależał wygląd hero (baza tekstu, przyciski, dzielenie wyrazów,
   ograniczony ruch), są tu przeniesione w zakresie .hero-centrum. */

/* ===== Section 1: hero „Centrum” z trzema kierunkami (02.10.2026) ===== */
/* Typograficzne otwarcie (wybrane 28.09.2026) bez zrzutu ekranu: pod tekstem trzy szklane karty kierunków
   JAPRIVIO CPQ / Advisory / Technology. Na prawym górnym narożniku zestawu kart siedzi koliber marki ze śladem rombów
   (jeden pomarańczowy akcent). Cała karta jest klikalna (rozciągnięty link), strzałka podświetla się pomarańczem
   dopiero przy wskazaniu lub fokusie. Na telefonie karty są zwarte: ikona, nazwa, obietnica i strzałka.
   Bez pętli i paralaksy: jednorazowe wejście, wyłączone przy ograniczonym ruchu. */
.hero-centrum{
  --hvc-gap:clamp(44px,6vh,64px);
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  padding:clamp(128px,14.6vh,150px) 0 clamp(72px,9vh,104px);
  background:
    radial-gradient(ellipse 70% 38% at 50% 78%,rgba(27,144,146,.16) 0%,transparent 72%),
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(5,38,42,.9) 0%,transparent 70%),
    linear-gradient(180deg,#05262A 0%,#012D32 46%,#0A3438 100%);
  color:#fff;
  font-family:"Inter","Inter Hero Fallback","Segoe UI",system-ui,sans-serif;
  font-size:1rem;line-height:1.65;
  text-align:center;
}
.hero-centrum :where(p){overflow-wrap:break-word;hyphens:auto}
.hero-centrum :where(h1,h2,h3){overflow-wrap:break-word;hyphens:none}
.hero-centrum__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:min(1180px,100% - 80px);margin-inline:auto}

/* Tekst nad poświatą i koliberem (inaczej światło przyciemnia przyciski) */
.hero-centrum .hero-centrum__copy{position:relative;z-index:3;width:100%;max-width:60rem;container-type:inline-size;display:flex;flex-direction:column;align-items:center}
.hero-centrum .hero-centrum__eyebrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 .7em;margin:0 0 22px;color:#6FD4CF;font-size:.75rem;font-weight:600;line-height:1.4;letter-spacing:.18em;text-transform:uppercase}
.hero-centrum .hero-centrum__dot{color:rgba(111,212,207,.55);letter-spacing:0}
.hero-centrum .hero-centrum__title{margin:0;color:#fff;font-size:clamp(2.25rem,1rem + 4.2vw,4.75rem);font-size:max(1.6rem,min(4.75rem,100cqi / 10.6));font-weight:600;line-height:1.03;letter-spacing:-.03em;text-wrap:balance}
.hero-centrum .hero-centrum__title>span{display:block}
.hero-centrum .hero-centrum__title-accent{color:#6FD4CF}
.hero-centrum .hero-centrum__lead{max-width:40rem;margin:26px 0 0;color:rgba(255,255,255,.78);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-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:34px}
.hero-centrum .hero-centrum__btn{display:inline-flex;align-items:center;justify-content:center;min-width:11.5rem;min-height:48px;padding:11px 26px;border:1px solid transparent;border-radius:999px;
  font-size:.92rem;font-weight:600;line-height:1.4;text-align:center;white-space:normal;text-decoration:none;
  transition:transform .2s,background .2s,color .2s,box-shadow .2s}
.hero-centrum .hero-centrum__btn:hover{transform:translateY(-2px)}
.hero-centrum .hero-centrum__btn:active{transform:translateY(0) scale(.97);transition-duration:.09s}
.hero-centrum .hero-centrum__btn:focus-visible{outline:3px solid #6FD4CF;outline-offset:3px}
/* D1: biały napis na pomarańczu (decyzja użytkowniczki) */
.hero-centrum .hero-centrum__btn--primary{background:#FC7505;color:#fff;box-shadow:0 8px 22px rgba(252,117,5,.2)}
.hero-centrum .hero-centrum__btn--primary:hover{background:#e96b00;box-shadow:0 10px 28px rgba(252,117,5,.3)}
.hero-centrum .hero-centrum__btn--secondary{border-color:rgba(111,212,207,.45);background:rgba(1,45,50,.25);color:#fff}
.hero-centrum .hero-centrum__btn--secondary:hover{border-color:rgba(111,212,207,.8);background:rgba(58,175,169,.12)}

/* Trzy kierunki */
/* Po „Wybierz obszar” koliber nad kartami zostaje widoczny pod paskiem (odstęp jak dawniej: 96 px + 112 px
   scroll-padding z legacy.css; na telefonie 96 + 76 px). */
.hero-centrum .hero-directions{position:relative;width:min(100%,1120px);margin-top:var(--hvc-gap);scroll-margin-top:208px;--hvc-bird:clamp(52px,6.2vw,84px)}
@media (max-width:720px){.hero-centrum .hero-directions{scroll-margin-top:172px}}
/* Zwarte światło nad górną krawędzią kart */
.hero-centrum .hero-centrum__bloom{position:absolute;z-index:0;left:10%;right:10%;top:-140px;height:280px;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(58,175,169,.34) 0%,rgba(27,144,146,.12) 46%,transparent 72%)}
/* Koliber marki: jednostka SVG = 1/100 szerokości ptaka (--hvc-bird), punkt (0,0) = prawy górny róg zestawu kart.
   Ogon zachodzi na pusty narożnik karty Technology (ikona i tekst są po lewej). */
.hero-centrum .hero-centrum__flight{position:absolute;z-index:4;top:calc(var(--hvc-bird) * -.72);right:calc(var(--hvc-bird) * -.3);display:block;width:calc(var(--hvc-bird) * 2.94);max-width:none;height:auto;aspect-ratio:294 / 102;overflow:visible;pointer-events:none;
  filter:drop-shadow(0 5px 7px rgba(1,45,50,.5))}

.hero-centrum .hero-directions__list{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);margin:0;padding:0;list-style:none}
.hero-centrum .hero-direction{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(24px,2.4vw,32px);border:1px solid rgba(167,220,221,.22);border-radius:24px;text-align:left;
  background:linear-gradient(165deg,rgba(167,220,221,.14) 0%,rgba(111,212,207,.05) 44%,rgba(1,45,50,.42) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 60px -38px rgba(0,12,18,.85);
  -webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%);
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .3s ease,background-color .3s ease,box-shadow .5s cubic-bezier(.22,1,.36,1)}
/* Cienkie światło na górnej krawędzi karty, jak w szklanych ramkach marki */
.hero-centrum .hero-direction:before{content:"";position:absolute;left:14%;right:14%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(214,244,243,.8) 50%,transparent);pointer-events:none}
.hero-centrum .hero-direction__icon{display:grid;flex:0 0 auto;place-items:center;width:52px;height:52px;border:1px solid rgba(111,212,207,.38);border-radius:50%;color:#6FD4CF;
  background:radial-gradient(circle at 35% 30%,rgba(111,212,207,.26),rgba(27,144,146,.08) 70%);box-shadow:0 0 0 6px rgba(111,212,207,.06)}
.hero-centrum .hero-direction__icon svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hero-centrum .hero-direction__label{margin:22px 0 6px;color:#A7DCDD;font-size:.6875rem;font-weight:600;line-height:1.4;letter-spacing:.14em;text-transform:uppercase}
.hero-centrum .hero-direction__name{margin:0;color:#fff;font-size:clamp(1.3rem,1rem + .7vw,1.6rem);font-weight:600;line-height:1.2;letter-spacing:-.025em}
.hero-centrum .hero-direction__name span{color:#6FD4CF}
.hero-centrum .hero-direction__promise{margin:14px 0 0;color:#fff;font-size:1rem;font-weight:500;line-height:1.45;letter-spacing:-.008em;text-wrap:balance}
.hero-centrum .hero-direction__text{flex:1 1 auto;margin:8px 0 22px;color:rgba(255,255,255,.7);font-size:.9rem;line-height:1.6;text-wrap:pretty}
.hero-centrum .hero-direction__link{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;color:#6FD4CF;font-size:.875rem;font-weight:600;line-height:1.4;text-decoration:none}
/* Cała karta jest polem kliknięcia; fokus rysowany na obrysie karty */
.hero-centrum .hero-direction__link:after{content:"";position:absolute;inset:-1px;z-index:1;border-radius:24px}
.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__arrow{display:inline-block;transition:color .3s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.hero-centrum .hero-direction:focus-within .hero-direction__arrow{color:#FC7505;transform:translateX(3px)}
@media (hover:hover){
  .hero-centrum .hero-direction:hover{transform:translateY(-4px);border-color:rgba(111,212,207,.48);background-color:rgba(58,175,169,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 36px 70px -36px rgba(0,12,18,.9),0 0 50px -24px rgba(58,175,169,.5)}
  .hero-centrum .hero-direction:hover .hero-direction__arrow{color:#FC7505;transform:translateX(3px)}
}
/* Szerokie ekrany: wiersze kart (ikona, etykieta, nazwa, obietnica, opis, link) wyrównane między kartami */
@supports (grid-template-rows:subgrid){
  @media (min-width:901px){
    .hero-centrum .hero-directions__list{grid-template-rows:repeat(6,auto);row-gap:0}
    .hero-centrum .hero-direction{display:grid;grid-row:span 6;grid-template-rows:subgrid;align-content:start;justify-items:start}
    .hero-centrum .hero-direction__link{align-self:end}
  }
}

/* Jednorazowe wejście (bez pętli): nagłówek i lead przesuwają się tylko transformacją (kandydat LCP), znak nad
   nagłówkiem i przyciski się rozjaśniają, karty wchodzą kolejno, koliber wlatuje raz, romby pojawiają się za nim. */
@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-name:hvc-up;animation-delay:.05s}
  .hero-centrum .hero-centrum__lead{animation-name:hvc-up;animation-delay:.1s}
  .hero-centrum .hero-centrum__actions{animation-delay:.15s}
  .hero-centrum .hero-direction{animation:hvc-card .75s cubic-bezier(.22,1,.36,1) calc(.18s + var(--d,0) * 90ms) backwards}
  .hero-centrum .hero-direction:nth-child(2){--d:1}
  .hero-centrum .hero-direction:nth-child(3){--d:2}
  .hero-centrum .hero-centrum__bloom{animation:hvc-fade .9s ease-out .3s both}
  .hero-centrum .hero-centrum__bird{animation:hvc-fly 1s cubic-bezier(.16,.84,.3,1) .55s both}
  .hero-centrum .hero-centrum__px{animation:hvc-fade .5s ease-out calc(.9s + var(--i) * 50ms) both}
}
@keyframes hvc-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hvc-up{from{transform:translateY(12px)}to{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}}
@keyframes hvc-fly{from{opacity:0;transform:translate(-14px,10px)}to{opacity:1;transform:none}}

/* Niskie okna laptopów: zwarty tekst, żeby karty kierunków mieściły się na pierwszym ekranie */
@media (min-width:821px) and (max-height:900px){
  .hero-centrum{--hvc-gap:40px;padding-top:116px}
  .hero-centrum .hero-centrum__eyebrow{margin-bottom:16px}
  .hero-centrum .hero-centrum__title{font-size:max(1.6rem,min(3.75rem,100cqi / 10.6))}
  .hero-centrum .hero-centrum__lead{margin-top:18px;font-size:1.0625rem;line-height:1.55}
  .hero-centrum .hero-centrum__actions{margin-top:26px}
  .hero-centrum .hero-direction{padding:24px 26px}
  .hero-centrum .hero-direction__label{margin-top:18px}
  .hero-centrum .hero-direction__text{margin-bottom:18px}
}

/* Tablet (poziomo) */
@media (max-width:1023px){
  .hero-centrum__inner{width:min(100% - 56px,1180px)}
  .hero-centrum .hero-centrum__copy{max-width:44rem}
}

/* Wąski tablet: karty jedna pod drugą, w poziomym układzie ikona | treść | link */
@media (max-width:900px){
  .hero-centrum .hero-directions{width:min(100%,720px)}
  .hero-centrum .hero-directions__list{grid-template-columns:minmax(0,1fr);gap:14px}
  .hero-centrum .hero-direction{display:grid;grid-template-columns:52px minmax(0,1fr) auto;column-gap:22px;align-items:center;padding:22px 26px}
  .hero-centrum .hero-direction__icon{grid-column:1;grid-row:1 / span 4;align-self:start}
  .hero-centrum .hero-direction__label,.hero-centrum .hero-direction__name,.hero-centrum .hero-direction__promise,.hero-centrum .hero-direction__text{grid-column:2}
  .hero-centrum .hero-direction__label{margin:0 0 4px}
  .hero-centrum .hero-direction__promise{margin-top:8px}
  .hero-centrum .hero-direction__text{margin:4px 0 0}
  .hero-centrum .hero-direction__link{grid-column:3;grid-row:1 / span 4;align-self:center}
}

/* Telefon i wąski tablet */
@media (max-width:820px){
  .hero-centrum{--hvc-gap:56px;padding:calc(var(--mobile-header-height,52px) + env(safe-area-inset-top) + 58px) 0 64px;
    background:
      radial-gradient(ellipse 90% 30% at 50% 80%,rgba(27,144,146,.16) 0%,transparent 78%),
      linear-gradient(180deg,#05262A 0%,#012D32 45%,#0A3438 100%)}
  .hero-centrum .hero-centrum__bloom{left:-6%;right:-6%;top:-90px;height:180px}
  /* Na małym ekranie zostaje tylko bliski ślad pikseli; najdrobniejsze byłyby szumem */
  .hero-centrum .hero-centrum__px--far{display:none}
}
@media (min-width:641px) and (max-width:820px){
  .hero-centrum{--hvc-gap:72px;padding-top:128px}
}

/* Telefon: jedna oś wyrównania do lewej; zwarte karty (ikona, nazwa, obietnica, strzałka), żeby nie wydłużać strony */
@media (max-width:640px){
  .hero-centrum{text-align:left}
  .hero-centrum__inner{width:min(100% - 32px,560px)}
  .hero-centrum .hero-centrum__copy{align-items:flex-start}
  .hero-centrum .hero-centrum__eyebrow{justify-content:flex-start;gap:0 .6em;margin-bottom:16px;font-size:.6875rem;letter-spacing:.1em}
  .hero-centrum .hero-centrum__title{letter-spacing:-.025em;line-height:1.06}
  .hero-centrum .hero-centrum__lead{margin-top:18px;font-size:1rem;line-height:1.6}
  .hero-centrum .hero-centrum__actions{justify-content:flex-start;gap:10px;margin-top:26px}
  .hero-centrum{--hvc-gap:48px}
  .hero-centrum .hero-directions{--hvc-bird:56px}
  .hero-centrum .hero-directions__list{gap:10px}
  .hero-centrum .hero-direction{grid-template-columns:42px minmax(0,1fr) auto;column-gap:16px;padding:18px 18px 18px 16px;border-radius:20px}
  .hero-centrum .hero-direction__link:after{border-radius:20px}
  .hero-centrum .hero-direction__icon{grid-row:1 / span 2;align-self:center;width:42px;height:42px;box-shadow:none}
  .hero-centrum .hero-direction__icon svg{width:20px;height:20px}
  .hero-centrum .hero-direction__label,.hero-centrum .hero-direction__text{display:none}
  .hero-centrum .hero-direction__name{font-size:1.125rem}
  .hero-centrum .hero-direction__promise{margin-top:3px;color:rgba(255,255,255,.78);font-size:.875rem;font-weight:400;line-height:1.45;text-wrap:pretty}
  .hero-centrum .hero-direction__link{grid-row:1 / span 2;font-size:1.125rem}
  /* Na telefonie widoczna jest sama strzałka; tekst linku zostaje nazwą dostępną */
  .hero-centrum .hero-direction__link-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
@media (max-width:479px){
  .hero-centrum .hero-centrum__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .hero-centrum .hero-centrum__actions .hero-centrum__btn{width:100%;min-width:0;padding-inline:12px}
}
@media (max-width:359px){
  .hero-centrum .hero-centrum__actions{grid-template-columns:minmax(0,1fr)}
  .hero-centrum .hero-centrum__eyebrow{gap:0 .8em}
  .hero-centrum .hero-centrum__dot{display:none}
}

/* 02.10.2026: strona główna to sam hero z trzema kierunkami (decyzja użytkowniczki: „spójna całość z naciskiem na 3 sektory”).
   Sekcje doświadczenia i kontaktu usunięte — doświadczenie jest na O nas i w Technology, kontakt w menu i w hero. */
/* Hero wypełnia pierwszy ekran, stopka zaczyna się dopiero pod nim. */
.hero-centrum{min-height:100svh;display:flex;flex-direction:column;justify-content:center}

/* Ograniczony ruch: przejścia natychmiastowe (wcześniej globalna reguła legacy.css); animacje wejścia działają
   tylko przy prefers-reduced-motion: no-preference (wyżej). */
@media (prefers-reduced-motion:reduce){
  .hero-centrum .hero-centrum__btn,.hero-centrum .hero-centrum__btn:active,.hero-centrum .hero-direction,.hero-centrum .hero-direction__arrow{transition-duration:.01ms}
}