/* ============================================================
   Creotec - v1 · komponenty PODSTRON
   (ładowany po styles.css wyłącznie na podstronach)
   ============================================================ */

/* ============================ PAGE HERO ============================ */
.page-hero{position:relative;min-height:62vh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--c-cinema);color:#fff;
  padding:calc(var(--hd-h) + 60px) 0 clamp(48px,7vw,84px)}
.page-hero--compact{min-height:46vh}
.page-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;
  will-change:transform}
.page-hero__overlay{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(14,20,28,.62) 0%,rgba(14,20,28,.38) 40%,rgba(14,20,28,.82) 100%),
    radial-gradient(120% 80% at 20% 90%,rgba(14,20,28,.6),transparent 60%)}
.page-hero__inner{position:relative;z-index:2;width:100%}
.page-hero__title{color:#fff;font-weight:300;text-transform:uppercase;letter-spacing:.04em;
  line-height:1.06;font-size:clamp(2.1rem,5.2vw,4.2rem);max-width:18ch;margin-top:24px;
  text-shadow:0 4px 40px rgba(0,0,0,.4)}
.page-hero__lead{margin-top:22px;font-size:1.06rem;color:rgba(255,255,255,.78);
  max-width:60ch;line-height:1.7}
.page-hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}

/* ============================ SUBNAV (sticky TOC) ============================ */
/* przykleja się POD stale widocznym headerem (floating bar ~--hd-h) */
.subnav{position:sticky;top:var(--hd-h);z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--c-gray-200)}
.subnav__list{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;padding-block:10px}
.subnav__list::-webkit-scrollbar{display:none}
.subnav__link{flex:0 0 auto;display:inline-flex;align-items:center;gap:.55em;
  font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-body-soft);padding:.62em 1.05em;border-radius:999px;white-space:nowrap;
  transition:color .3s var(--ease),background .3s var(--ease)}
.subnav__link:hover{color:var(--c-ink);background:var(--c-gray-50)}
.subnav__link.is-active{color:#fff;background:var(--c-cinema)}
.subnav__link.is-active .sq-dot,.subnav__link:hover .sq-dot{opacity:1}
.subnav__link .sq-dot{width:.5em;height:.5em;opacity:.45;transition:opacity .3s var(--ease)}

/* ============================ SEKCJE POMOCNICZE ============================ */
.sec{padding-block:clamp(64px,8vw,110px)}
.sec--light{background:var(--c-white);color:var(--c-ink)}
.sec--light .section-title{color:var(--c-ink)}
.sec--gray{background:var(--c-gray-50);color:var(--c-ink)}
.sec--gray .section-title{color:var(--c-ink)}
.sec--dark{background:var(--c-cinema);color:#fff}
.sec--dark .section-title{color:#fff}
.sec--panel{background:var(--c-panel);color:#fff}
.sec--panel .section-title{color:#fff}
.lead-col{max-width:72ch;color:var(--c-body);font-size:1.04rem;line-height:1.75}
.lead-col p + p{margin-top:18px}
.sec--dark .lead-col,.sec--panel .lead-col{color:rgba(255,255,255,.78)}

/* ============================ SVC - split usługi ============================ */
.svc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);
  align-items:center;padding-block:clamp(44px,6vw,72px);
  border-top:1px solid var(--c-gray-200)}
.svc:first-of-type{border-top:0}
.sec--dark .svc,.sec--panel .svc{border-top-color:rgba(255,255,255,.12)}
.svc--flip .svc__media{order:2}
.svc--flip .svc__body{order:1}
.svc__media{position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);aspect-ratio:4/3}
.svc__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.svc:hover .svc__media img{transform:scale(1.04)}
.svc__num{font-size:.85rem;font-weight:600;letter-spacing:.2em;color:var(--c-orange)}
.svc__title{font-weight:300;text-transform:uppercase;letter-spacing:.03em;line-height:1.1;
  font-size:clamp(1.5rem,2.8vw,2.2rem);color:var(--c-ink);margin-top:14px}
.sec--dark .svc__title,.sec--panel .svc__title{color:#fff}
.svc__desc{margin-top:18px;color:var(--c-body);font-size:1rem;line-height:1.7;max-width:56ch}
.sec--dark .svc__desc,.sec--panel .svc__desc{color:rgba(255,255,255,.75)}
.svc__list{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.svc__list li{display:flex;align-items:baseline;gap:.7em;color:var(--c-body);
  font-size:.96rem;line-height:1.55}
.sec--dark .svc__list li,.sec--panel .svc__list li{color:rgba(255,255,255,.75)}
.svc__list .sq-dot{width:.5em;height:.5em;transform:translateY(-.1em)}
.svc__links{display:flex;flex-wrap:wrap;gap:22px;margin-top:26px}

/* ============================ PROJECT - case study ============================ */
.project{padding-block:clamp(44px,6vw,76px);border-top:1px solid var(--c-gray-200)}
.project:first-of-type{border-top:0}
.project__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);
  align-items:start}
.project--flip .project__media{order:2}
.project--flip .project__body{order:1}
.project__media{position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);aspect-ratio:16/11}
.project__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.project:hover .project__media img{transform:scale(1.04)}
.project__chips{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.project__sector{color:var(--c-body-soft);font-size:.74rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}
.project__title{font-weight:300;text-transform:uppercase;letter-spacing:.03em;line-height:1.1;
  font-size:clamp(1.5rem,2.8vw,2.2rem);color:var(--c-ink);margin-top:16px}
.project__desc{margin-top:16px;color:var(--c-body);font-size:1rem;line-height:1.7;max-width:58ch}
.project__facts{margin-top:26px;display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--c-gray-200);border-left:1px solid var(--c-gray-200)}
.project__fact{padding:14px 16px;border-right:1px solid var(--c-gray-200);
  border-bottom:1px solid var(--c-gray-200);display:flex;flex-direction:column;gap:4px}
.project__fact dt{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-body-soft)}
.project__fact dd{font-size:.98rem;font-weight:600;color:var(--c-ink);line-height:1.4}
.project__fact dd 

/* ============================ TEAM (zarząd) ============================ */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:10px}
.team-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--c-gray-200);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.team-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.team-card__media{aspect-ratio:3/4;overflow:hidden}
.team-card__media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:transform .8s var(--ease)}
.team-card:hover .team-card__media img{transform:scale(1.04)}
.team-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:6px}
.team-card__name{font-size:1.18rem;font-weight:600;color:var(--c-ink)}
.team-card__role{display:inline-flex;align-items:center;gap:.6em;font-size:.76rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--c-orange)}
.team-card__desc{margin-top:8px;color:var(--c-body-soft);font-size:.92rem;line-height:1.6}

/* ============================ EPC FLOW (o-nas - statyczny przebieg) ============================ */
.epcflow{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.12);border-left:1px solid rgba(255,255,255,.12)}
.epcflow__step{position:relative;padding:30px 26px 34px;display:flex;flex-direction:column;gap:14px;
  border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.epcflow__step::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:var(--c-orange);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.epcflow__step:hover::before{transform:scaleX(1)}
.epcflow__num{font-size:.85rem;font-weight:600;letter-spacing:.2em;color:var(--c-orange)}
.epcflow__name{font-weight:300;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1.2rem,1.8vw,1.5rem);color:#fff}
.epcflow__step p{color:rgba(255,255,255,.72);font-size:.94rem;line-height:1.65;flex:1}

/* ============================ PARTNERS ============================ */
.partners{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.partner{display:inline-flex;align-items:center;gap:.7em;border:1px solid var(--c-gray-200);
  border-radius:10px;padding:18px 26px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;font-size:.92rem;color:var(--c-body-soft);background:#fff;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.partner:hover{border-color:var(--c-orange);color:var(--c-ink)}

/* ============================ REVEAL - wariant subtelny (portrety zarządu) ============================ */
.js-anim .reveal--soft{opacity:0;transform:translateY(16px);
  transition:opacity .65s var(--ease),transform .65s var(--ease)}
.js-anim .reveal--soft.is-in{opacity:1;transform:none}

/* ============================ LOGO GRID (partnerzy / zaufali nam) ============================ */
.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.logo-grid--3{grid-template-columns:repeat(3,1fr)}
.logo-tile{background:#fff;border:1px solid var(--c-gray-200);border-radius:var(--radius-sm);
  min-height:128px;display:flex;align-items:center;justify-content:center;padding:26px 32px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.logo-tile:hover{border-color:var(--c-orange);box-shadow:var(--shadow-sm)}
.logo-tile img{max-height:54px;max-width:100%;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.8;transition:filter .35s var(--ease),opacity .35s var(--ease)}
.logo-tile:hover img{filter:none;opacity:1}

/* ============================ PERKS (kariera) ============================ */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid rgba(255,255,255,.12);border-left:1px solid rgba(255,255,255,.12)}
.perk{padding:30px 28px;border-right:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:12px}
.perk__head{display:inline-flex;align-items:center;gap:.7em;font-size:.95rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#fff}
.perk p{color:rgba(255,255,255,.7);font-size:.94rem;line-height:1.65}

/* ============================ OFERTY PRACY - lista ogłoszeń ============================ */
.joblist{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.joboffer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;
  background:#fff;border:1px solid var(--c-gray-200);border-radius:var(--radius);padding:26px 30px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.joboffer:hover{border-color:var(--c-orange);box-shadow:var(--shadow);transform:translateY(-3px)}
.joboffer__title{font-family:"Inter",sans-serif;font-weight:500;line-height:1.2;
  font-size:clamp(1.2rem,2vw,1.5rem);color:var(--c-ink)}
.joboffer__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px;
  font-size:.86rem;color:var(--c-body-soft)}
.joboffer__meta span{display:inline-flex;align-items:center;gap:.55em}
.joboffer__go{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--c-gray-200);font-size:1.2rem;
  color:var(--c-orange);transition:.3s var(--ease)}
.joboffer:hover .joboffer__go{background:var(--c-orange);border-color:var(--c-orange);color:#fff;transform:translateX(3px)}

/* ============================ OFERTA - strona szczegółowa ============================ */
.job{max-width:880px;margin:0 auto}
.job__back{display:inline-flex;align-items:center;gap:.5em;font-size:.8rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--c-body-soft);margin-bottom:8px}
.job__back:hover{color:var(--c-orange)}
.job__meta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 6px}
.job__meta-item{display:inline-flex;align-items:center;gap:.55em;background:var(--c-gray-50);
  border:1px solid var(--c-gray-200);border-radius:999px;padding:.55em 1.15em;
  font-size:.84rem;font-weight:500;color:var(--c-ink)}
.job__block{margin-top:38px}
.job__block h2{font-family:"Inter",sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1.2rem,2vw,1.5rem);color:var(--c-ink);margin-bottom:18px}
.job__block > p{color:var(--c-body);line-height:1.75;font-size:1.04rem;max-width:68ch}
.job__list{display:flex;flex-direction:column;gap:12px}
.job__list li{display:flex;align-items:baseline;gap:.7em;color:var(--c-body);font-size:1rem;line-height:1.6}
.job__list .sq-dot{transform:translateY(-.05em)}
.job__apply{margin-top:52px;padding-top:44px;border-top:1px solid var(--c-gray-200)}
.form__applyfor{background:var(--c-gray-50);border:1px solid var(--c-gray-200);border-radius:10px;
  padding:14px 18px;font-size:.92rem;color:var(--c-body-soft)}
.form__applyfor strong{color:var(--c-ink);font-weight:600}

/* ============================ STEPS (proces) ============================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:10px}
.step{position:relative;padding:26px 24px;background:#fff;border:1px solid var(--c-gray-200);
  border-radius:var(--radius);display:flex;flex-direction:column;gap:12px}
.step__num{font-size:.85rem;font-weight:600;letter-spacing:.2em;color:var(--c-orange)}
.step__name{font-size:1.06rem;font-weight:600;color:var(--c-ink)}
.step p{color:var(--c-body-soft);font-size:.92rem;line-height:1.6}

/* ============================ GALLERY ============================ */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery__item{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--shadow-sm)}
.gallery__item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.gallery__item:hover img{transform:scale(1.05)}

/* ============================ CONTACT TILES ============================ */
.contact-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.contact-tile{background:#fff;border:1px solid var(--c-gray-200);border-radius:var(--radius);
  padding:30px 28px;display:flex;flex-direction:column;gap:10px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.contact-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.contact-tile__label{display:inline-flex;align-items:center;gap:.7em;font-size:.74rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-body-soft)}
.contact-tile__value{font-size:1.16rem;font-weight:600;color:var(--c-ink);line-height:1.45}
.contact-tile__value a{color:inherit;transition:color .3s var(--ease)}
.contact-tile__value a:hover{color:var(--c-orange)}
.contact-tile__note{color:var(--c-body-soft);font-size:.88rem}

/* ============================ FORM ============================ */
.form{display:flex;flex-direction:column;gap:18px;max-width:760px}
.form--card{background:#fff;border:1px solid var(--c-gray-200);border-radius:var(--radius);
  padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-sm)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form__field{display:flex;flex-direction:column;gap:8px}
.form__field > span{font-size:.78rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-ink)}
.form__field input,.form__field select,.form__field textarea{
  font-family:"Inter",system-ui,sans-serif;font-size:1rem;color:var(--c-ink);
  background:var(--c-gray-50);border:1px solid var(--c-gray-200);border-radius:10px;
  padding:13px 15px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
  resize:vertical;width:100%}
.form__field input:focus,.form__field select:focus,.form__field textarea:focus{
  outline:none;border-color:var(--c-orange);box-shadow:0 0 0 3px rgba(239,91,43,.14);
  background:#fff}
.form__field input::placeholder,.form__field textarea::placeholder{color:#9aa0a8}
.form__checks{display:flex;flex-direction:column;gap:12px}
.form__check{display:flex;align-items:flex-start;gap:12px;font-size:.85rem;
  color:var(--c-body-soft);line-height:1.55;cursor:pointer}
.form__check input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--c-orange)}
.form__inline-checks{display:flex;flex-wrap:wrap;gap:10px}
.form__chip{display:inline-flex;align-items:center;gap:.55em;cursor:pointer;
  border:1px solid var(--c-gray-200);border-radius:999px;padding:.55em 1.05em;
  font-size:.86rem;font-weight:500;color:var(--c-body);background:#fff;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.form__chip input{accent-color:var(--c-orange);width:15px;height:15px}
.form__chip:has(input:checked){border-color:var(--c-orange);background:rgba(239,91,43,.07);
  color:var(--c-ink)}
.form__submit{align-self:flex-start;margin-top:6px}
/* honeypot - poza ekranem, niewidoczny dla użytkownika */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{font-size:.9rem;font-weight:500;min-height:1.3em}
.form__note.is-sending{color:var(--c-body-soft)}
.form__submit[disabled]{opacity:.6;cursor:not-allowed}
.form__note.is-ok{color:#2e7d32}
.form__note.is-err{color:var(--c-orange-dark)}

/* ============================ DANE REJESTROWE - dyskretna linia (jak stopka prawna) ============================ */
.reg-line{margin-top:32px;padding-top:22px;border-top:1px solid var(--c-gray-200);
  font-size:.84rem;color:var(--c-body-soft);letter-spacing:.02em;line-height:1.7}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1024px){
  .logo-grid,.logo-grid--3{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:repeat(3,1fr);gap:18px}
  .perks{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .contact-tiles{grid-template-columns:1fr}
}

@media (max-width:1024px){
  .epcflow{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:768px){
  .page-hero{min-height:52vh}
  .epcflow{grid-template-columns:1fr}
  .joboffer{grid-template-columns:1fr;gap:18px}
  .joboffer__go{display:none}
  .svc,.svc--flip{grid-template-columns:1fr}
  .svc--flip .svc__media{order:0}
  .svc--flip .svc__body{order:1}
  .project__grid,.project--flip .project__grid{grid-template-columns:1fr}
  .project--flip .project__media{order:0}
  .project--flip .project__body{order:1}
  .team{grid-template-columns:1fr}
  .team-card__media{aspect-ratio:4/4.4}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .form__row{grid-template-columns:1fr}
}

@media (max-width:480px){
  .logo-grid,.logo-grid--3{grid-template-columns:1fr}
  .perks{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .partners{flex-direction:column;align-items:stretch}
  .partner{justify-content:center}
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  .svc__media img,.project__media img,.team-card__media img,.gallery__item img{transition:none}
}

/* ============================ DOKUMENTY PRAWNE (polityka prywatnosci) ============================ */
.legal{max-width:80ch;color:var(--c-body);font-size:1rem;line-height:1.75}
.legal__meta{color:var(--c-body-soft);font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:28px}
.legal h2{margin:48px 0 16px;font-size:clamp(1.15rem,2.2vw,1.42rem);font-weight:500;
  line-height:1.3;color:var(--c-ink);letter-spacing:.01em}
.legal h2:first-of-type{margin-top:36px}
.legal h3{margin:32px 0 12px;font-size:1.03rem;font-weight:600;color:var(--c-ink)}
.legal p{margin-bottom:16px}
.legal a{color:var(--c-orange);text-decoration:underline;text-underline-offset:3px;
  overflow-wrap:anywhere}
.legal a:hover{text-decoration-thickness:2px}
.legal__list{margin:0 0 18px;padding-left:1.5em}
.legal__list li{margin-bottom:10px}
.legal__list ul,.legal__list ol{margin-top:10px}
.legal ol.legal__list{list-style:decimal}
.legal ul.legal__list{list-style:disc}
.legal__note{padding:16px 20px;background:var(--c-gray-50);border-left:3px solid var(--c-orange);
  border-radius:var(--radius-sm);font-size:.95rem}
.legal__address{font-style:normal;padding:20px 24px;background:var(--c-gray-50);
  border-radius:var(--radius-sm);line-height:1.7}
.legal__annex{margin-top:64px;padding-top:36px;border-top:1px solid var(--c-gray-200);
  overflow-wrap:anywhere}
@media (max-width:640px){
  .legal{font-size:.96rem}
  .legal__list{padding-left:1.25em}
}