/* OSTOJA — sekcje tresci. Rozdzielone od styles.css, zeby zaden plik nie przekroczyl
   progu czytelnosci. Kolejnosc odpowiada kolejnosci w DOM. */

/* ================= HERO ================= */
.hero{ position:relative; isolation:isolate; overflow:hidden;
  border-radius:0 0 var(--radius-card) var(--radius-card); background:var(--hero-to) }

.liquid{ position:absolute; inset:0; z-index:0 }
.liquid img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.liquid canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }

/* Czytelnosc tekstu na zdjeciu. Pionowy gradient jak w projekcie plus delikatne
   rozjasnienie od lewej — tam siedzi H1, a kadr ma po lewej ciemna stolarke okienna. */
/* Kurtyna pod tekstem. Musi byc mocna po lewej, bo H1 lezy wprost na zdjeciu,
   a ciemny tekst na fotografii bez oslony jest nieczytelny. */
.hero-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, rgba(255,255,255,.88), rgba(255,255,255,.66) 34%,
                    rgba(255,255,255,.2) 58%, transparent 74%),
    linear-gradient(to bottom, rgba(255,255,255,.42), transparent 28%,
                    transparent 60%, rgba(255,255,255,.66)) }

/* Watermark pojawia sie dopiero po najechaniu na hero. Stale, ledwo widoczne
   tlo czytalo sie jak niedorobka; jako reakcja na kursor jest zamyslem.
   Ukryty ponizej lg, gdzie hero nie ma pelnej wysokosci i napis kolidowal
   z karta i partnerami — a na dotyku hover i tak nie istnieje. */
.hero-watermark{ display:none }
@media (min-width:1024px){
  .hero-watermark{ display:block; pointer-events:none; position:absolute; inset-inline:0;
    bottom:5rem; z-index:1; text-align:center; user-select:none; font-weight:700; line-height:1;
    font-size:min(var(--text-watermark), 17vw); color:rgba(255,255,255,.72);
    opacity:0; transition:opacity .5s ease-out }
  /* Wolne pojawianie, szybszy zanik. Dwa czasy zamiast jednego: napis ma
     narastac leniwie jak reakcja na obecnosc kursora, ale schodzic bez
     ciagniecia sie za mysza po zjechaniu z hero. */
  .hero:hover .hero-watermark{ opacity:1; transition:opacity 1.9s cubic-bezier(.25,.6,.3,1) }
}
.hero-grid{ position:relative; z-index:20; display:flex; flex-direction:column; gap:2rem;
  padding:7rem 1.25rem 5rem }
.hero-left{ display:flex; flex-direction:column; gap:1.75rem }
.hero-h1{ max-width:20ch; font-size:2.25rem; font-weight:600; line-height:.98; letter-spacing:-.02em }
.hero-rating{ display:flex; align-items:center; gap:.75rem }
.hero-stars{ color:var(--accent); font-size:var(--fs-base); display:inline-flex; gap:.125rem }
.hero-rating span:last-child{ font-size:var(--fs-sm); font-weight:500; color:rgba(17,17,17,.9) }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem }
.hero-right{ display:flex; flex-direction:column; align-items:flex-start; gap:2rem }

/* karta-karuzela */
.herocard{ position:relative; width:100%; max-width:24rem; border-radius:var(--radius-card-sm);
  background:rgba(255,255,255,.7); padding:.5rem; backdrop-filter:blur(12px);
  box-shadow:0 1px 2px rgba(0,0,0,.05); outline:1px solid rgba(230,229,226,.7); outline-offset:-1px }
.js .herocard{ --rv-y:16px; --rv-s:.96 }
.herocard-row{ display:flex; gap:.5rem; cursor:pointer; border-radius:var(--radius-control); width:100%; text-align:left }
.herocard-tile{ aspect-ratio:1; width:6rem; flex:none; display:grid; place-items:center;
  border-radius:var(--radius-control); background:var(--ink); font-size:1.875rem; color:#fff }
.herocard-tile .ico{ color:var(--accent-from) }
.herocard-panel{ flex:1; border-radius:var(--radius-control); background:rgba(241,240,238,.7);
  padding:.75rem; display:flex; flex-direction:column; justify-content:space-between }
/* Elementy karty to <span>, wiec bez jawnego display sa inline: podpis i tytul
   splynelyby w jedna linie, a max-width na tytule nic by nie robil. */
.herocard-slot{ display:block; position:relative; min-height:3.25rem }
.herocard-item{ display:block; transition:transform .45s var(--ease-spring), opacity .45s var(--ease-spring) }
.herocard-item.is-out{ position:absolute; inset:0; opacity:0; pointer-events:none }
.herocard-cap{ display:block; font-size:.65rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.05em; color:rgba(17,17,17,.45) }
.herocard-title{ display:block; margin-top:.25rem; max-width:10rem; font-size:var(--fs-sm);
  font-weight:500; line-height:1.35 }
.herocard-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.5rem }
.herocard-dots{ display:flex; align-items:center; gap:.25rem }
.herocard-dots i{ height:.25rem; width:.375rem; border-radius:var(--radius-pill);
  background:rgba(17,17,17,.2); transition:all .3s }
.herocard-dots i.is-active{ width:1rem; background:rgba(17,17,17,.7) }
.herocard-navs{ position:absolute; right:1.25rem; bottom:1.25rem; display:flex; gap:.25rem }
.herocard-navs button{ width:1.75rem; height:1.75rem; display:grid; place-items:center;
  border-radius:var(--radius-pill); background:#fff; color:rgba(17,17,17,.7);
  outline:1px solid var(--line); outline-offset:-1px; transition:color .2s }
.herocard-navs button:hover{ color:var(--foreground) }
.herocard-navs .is-prev .ico{ transform:rotate(180deg) }

/* partnerzy */
/* Partnerzy siedza w lewej kolumnie, pod przyciskami CTA, wypisani w jednej
   kolumnie. Dzieki temu stoja pod mocna czescia kurtyny i sa czytelne takze
   wtedy, gdy pedzel odsloni ciemna warstwe wieczorna. */
.partners{ width:100%; max-width:20rem }
.js .partners{ --rv-y:14px }
.partners-label{ margin-bottom:.75rem; font-size:var(--fs-xs); font-weight:500; color:rgba(17,17,17,.6) }
.partners-grid{ display:grid; grid-template-columns:1fr; row-gap:.5rem }
.partners-grid li > span{ display:flex; align-items:center; gap:.375rem; font-size:var(--fs-xs);
  color:rgba(17,17,17,.85); opacity:.88; transition:transform .35s var(--ease-snap), opacity .35s var(--ease-snap) }
.partners-grid li:hover > span{ transform:translateY(-2px); opacity:1 }
.partners-grid .ico{ font-size:.875rem; color:rgba(17,17,17,.55) }

.hero-status{ display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  border-top:1px solid rgba(17,17,17,.18); padding:1.25rem; font-size:var(--fs-xs); font-weight:500;
  text-transform:uppercase; letter-spacing:.025em; color:rgba(17,17,17,.88) }
.hero-status .mid{ display:none }
.hero-status .end{ display:inline-flex; gap:.5rem }

@media (min-width:640px){
  .hero-grid{ padding-inline:2rem }
  .hero-h1{ font-size:3rem }
  .hero-status{ padding-inline:2rem }
  .hero-status .mid{ display:inline }
}
@media (min-width:768px){ .hero-h1{ font-size:3.75rem } }
@media (min-width:1024px){
  /* vh jako zapas: przy braku wsparcia dla lvh cala regula bylaby odrzucona
     i hero nie wypelnialoby okna. */
  .hero-grid{ display:grid; min-height:100vh; min-height:100lvh;
    grid-template-columns:repeat(12,1fr); gap:2.5rem; padding:9rem 2rem 7rem }
  .hero-left{ grid-column:span 7 }
  .hero-right{ grid-column:span 5; align-items:flex-end }
  .herocard{ width:19rem }
}
@media (hover:none){ .partners-grid li:hover > span{ transform:none } }

/* ================= O NAS ================= */
.about{ background:#fff }
.about-grid{ display:grid; grid-template-columns:1fr; align-items:center; gap:3rem; padding:5rem 1.25rem }
.about-visual{ position:relative; min-height:14rem }
.about-globe{ position:absolute; left:-1rem; top:50%; transform:translateY(-50%);
  font-size:12rem; color:rgba(17,17,17,.1) }
.about-eyebrow{ position:relative }
.about-note{ position:absolute; left:0; bottom:0; display:flex; align-items:center; gap:.75rem;
  font-size:var(--fs-sm); color:rgba(17,17,17,.7) }
.js .about-note{ --rv-y:12px }
.about-note .ico{ font-size:1.5rem; color:var(--foreground); flex:none }
.about-note span{ max-width:16rem }
.about-text{ display:flex; flex-direction:column; gap:2.5rem }
.about-h2{ font-size:1.5rem; font-weight:500; line-height:1.35; letter-spacing:-.01em }
.about-h2 .muted{ color:var(--muted) }
.about-foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; border-top:1px solid var(--line); padding-top:1.5rem }
.js .about-foot{ --rv-y:12px }
.about-social-label{ font-size:var(--fs-sm); color:rgba(17,17,17,.45); margin-bottom:.5rem }
.about-social{ display:flex; gap:.5rem }
.about-social a{ width:2.25rem; height:2.25rem; display:grid; place-items:center;
  border-radius:var(--radius-pill); font-size:var(--fs-sm); background:var(--surface); color:rgba(17,17,17,.7) }
.about-social a.is-accent{ background:var(--accent); color:#fff }
.about-social .ico{ transition:transform .35s var(--ease-snap) }
.about-social a:hover .ico{ transform:scale(1.18) }
@media (min-width:640px){
  .about-grid{ padding-inline:2rem }
  .about-globe{ font-size:16rem }
  .about-h2{ font-size:1.875rem }
}
@media (min-width:1024px){
  .about-grid{ grid-template-columns:1fr 1fr; padding-block:7rem }
  .about-visual{ min-height:20rem }
  .about-globe{ left:-1.5rem; font-size:20rem }
}
@media (hover:none){ .about-social a:hover .ico{ transform:none } }

/* ================= PAS "MY TWORZYMY -> LEPIEJ" ================= */
.band{ background:#fff }
.band ul{ display:flex; flex-direction:column; gap:.75rem; padding:2.5rem 1.25rem }
.band li{ flex:1 }
.js .band li{ --rv-y:28px }
.band-tile{ display:grid; place-items:center; height:6rem; border-radius:var(--radius-pill);
  font-size:1.875rem; font-weight:500; transition:transform .4s var(--ease-snap) }
.band li:hover .band-tile{ transform:scale(1.03) }
.band-tile--light{ background:var(--surface); color:var(--foreground) }
.band-tile--accent{ background:linear-gradient(to bottom right,var(--accent-from),var(--accent-to)); color:#fff }
.band-tile--dark{ background:var(--ink); color:#fff }
.band-tile--ghost{ background:rgba(241,240,238,.6); color:rgba(17,17,17,.35) }
.band-tile .ico{ font-size:2.25rem }
@media (min-width:640px){
  .band ul{ flex-direction:row; gap:1rem; padding-inline:2rem }
  .band-tile{ height:10rem; font-size:2.25rem }
  .band-tile .ico{ font-size:3rem }
}
@media (hover:none){ .band li:hover .band-tile{ transform:none } }

/* ================= PORTFOLIO ================= */
.works{ background:#fff }
.works-inner{ padding:2.5rem 1.25rem 5rem }
.works-head{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; margin-bottom:3rem }
.works-h2{ font-size:2.25rem; font-weight:600; letter-spacing:-.02em; width:fit-content; text-align:center }
.works-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem }
.js .works-grid li{ --rv-y:48px }
.work-card{ position:relative; min-height:22rem; overflow:hidden; border-radius:var(--radius-card);
  background:var(--ink); padding:1.5rem; color:#fff;
  outline:1px solid rgba(255,255,255,.05); outline-offset:-1px;
  transition:transform .45s var(--ease-snap) }
.works-grid a:hover .work-card{ transform:translateY(-8px) scale(1.012) }
.work-meta{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.45) }
.work-badge{ width:2.75rem; height:2.75rem; flex:none; display:grid; place-items:center;
  border-radius:var(--radius-pill); background:rgba(255,255,255,.1); color:#fff;
  outline:1px solid rgba(255,255,255,.15); outline-offset:-1px;
  transition:transform .4s var(--ease-snap) }
.works-grid a:hover .work-badge{ transform:rotate(45deg) scale(1.08) }
.work-mark{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none }
.work-mark .ico{ font-size:4.5rem; color:rgba(255,255,255,.9) }
.work-mark sup{ font-size:var(--fs-xs); color:rgba(255,255,255,.6) }
.work-body{ position:absolute; inset-inline:1.5rem; bottom:1.5rem }
.work-body h3{ font-size:1.5rem; font-weight:500; letter-spacing:-.01em }
.work-body p{ margin-top:.5rem; max-width:30rem; font-size:var(--fs-sm); color:rgba(255,255,255,.55) }
.work-tags{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.5rem }
@media (min-width:640px){
  .works-inner{ padding-inline:2rem }
  .works-h2{ font-size:3rem }
  .work-card{ min-height:26rem; padding:2rem }
  .work-body{ inset-inline:2rem; bottom:2rem }
  .work-body h3{ font-size:1.875rem }
}
@media (min-width:768px){ .works-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .works-inner{ padding-bottom:7rem } }
@media (hover:none){
  .works-grid a:hover .work-card, .works-grid a:hover .work-badge{ transform:none }
}

/* ================= USLUGI ================= */
.services{ background:#fff }
.services-inner{ padding:5rem 1.25rem }
.services-h2{ margin:1.25rem 0 3rem; max-width:18ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
.js .services li{ --rv-y:24px }
.services li{ border-top:1px solid var(--line) }
.services li:first-child{ border-top:0 }
.service-row{ display:flex; align-items:center; gap:1rem; border-radius:var(--radius-card-sm);
  padding:1.5rem; background:rgba(241,240,238,0);
  transition:background .45s var(--ease-spring), padding .45s var(--ease-spring) }
.services a:hover .service-row{ background:rgba(241,240,238,1); padding-left:2rem; padding-right:1.25rem }
.service-idx{ width:1.75rem; flex:none; font-size:var(--fs-sm); font-weight:500; color:rgba(17,17,17,.4) }
.service-row h3{ flex:1; font-size:1.5rem; font-weight:500; letter-spacing:-.01em }
.service-desc{ display:none; max-width:22rem; font-size:var(--fs-sm); color:rgba(17,17,17,.55) }
.service-badge{ width:2.5rem; height:2.5rem; flex:none; display:grid; place-items:center;
  border-radius:var(--radius-pill); background:var(--ink); color:#fff;
  transition:transform .4s var(--ease-snap) }
.services a:hover .service-badge{ transform:translateX(5px) }
@media (min-width:640px){
  .services-inner{ padding-inline:2rem }
  .services-h2{ margin-bottom:3.5rem; font-size:3rem }
  .service-row{ gap:1.5rem; padding-block:2rem }
  .service-idx{ width:2.5rem }
  .service-row h3{ font-size:1.875rem }
  .service-badge{ width:3rem; height:3rem }
}
@media (min-width:768px){ .service-row h3{ font-size:2.25rem } }
@media (min-width:1024px){
  .services-inner{ padding-block:7rem }
  .service-desc{ display:block }
}
@media (hover:none){
  .services a:hover .service-row{ background:rgba(241,240,238,0); padding-left:1.5rem; padding-right:1.5rem }
  .services a:hover .service-badge{ transform:none }
}

/* ================= LICZBY ================= */
.stats{ background:#fff }
.stats-inner{ padding:0 1.25rem 5rem }
.stats-panel{ border-radius:var(--radius-card); background:var(--ink); padding:3rem 1.5rem; color:#fff }
.js .stats-panel{ --rv-y:40px; --rv-s:.99 }
.stats-h2{ margin-top:1rem; max-width:22ch; font-size:1.875rem; font-weight:500; letter-spacing:-.01em }
.stats-grid{ margin-top:3.5rem; display:grid; grid-template-columns:repeat(2,1fr);
  column-gap:2rem; row-gap:3rem }
.js .stats-grid li{ --rv-y:20px }
.stat-num{ font-size:3rem; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.stat-label{ margin-top:.75rem; font-size:var(--fs-sm); color:rgba(255,255,255,.55) }
@media (min-width:640px){
  .stats-inner{ padding-inline:2rem }
  .stats-panel{ padding:4rem 2rem }
  .stat-num{ font-size:3.75rem }
}
@media (min-width:768px){
  .stats-panel{ padding-inline:4rem }
  .stats-h2{ font-size:2.25rem }
  .stat-num{ font-size:4.5rem }
}
@media (min-width:1024px){
  .stats-inner{ padding-bottom:7rem }
  .stats-grid{ grid-template-columns:repeat(4,1fr) }
}

/* ================= STOPKA ================= */
.footer{ position:relative; overflow:hidden; border-radius:var(--radius-card) var(--radius-card) 0 0;
  background:var(--ink); color:#fff }
.footer-inner{ position:relative; z-index:10; padding:5rem 1.25rem 2.5rem }
.footer-cta{ display:flex; flex-direction:column; gap:2rem;
  border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:4rem }
.footer-h2{ max-width:18ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
.footer-cols{ display:grid; grid-template-columns:1fr; gap:3rem; padding-block:4rem }
.footer-brand{ display:flex; align-items:center; gap:.5rem; font-size:var(--fs-lg); font-weight:600 }
.footer-brand .ico{ font-size:1.25rem; color:var(--accent-from) }
.footer-tagline{ margin-top:.75rem; max-width:22rem; font-size:var(--fs-sm); color:rgba(255,255,255,.55) }
.footer-col h3{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.025em;
  color:rgba(255,255,255,.4); margin-bottom:1rem }
.footer-col li + li{ margin-top:.625rem }
.footer-col a{ font-size:var(--fs-sm) }
.footer-legal{ display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  gap:1rem; border-top:1px solid rgba(255,255,255,.1); padding-top:2rem;
  font-size:var(--fs-xs); color:rgba(255,255,255,.45) }
.footer-demo{ display:inline-flex; gap:.375rem; color:rgba(255,255,255,.35) }
.footer-demo a{ color:rgba(255,255,255,.6); text-decoration:underline; text-underline-offset:2px }
.footer-demo a:hover{ color:#fff }
.footer-watermark{ position:absolute; inset-inline:0; bottom:-1.5rem; z-index:0; text-align:center;
  pointer-events:none; user-select:none; font-weight:700; line-height:1;
  font-size:var(--text-watermark); color:rgba(255,255,255,.05) }
@media (min-width:640px){
  .footer-inner{ padding-inline:2rem }
  .footer-h2{ font-size:3rem }
  .footer-legal{ flex-direction:row }
}
@media (min-width:768px){
  .footer-h2{ font-size:3.75rem }
  .footer-cols{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:1024px){
  .footer-inner{ padding-top:6rem }
  .footer-cta{ flex-direction:row; align-items:flex-end; justify-content:space-between }
  .footer-cols{ grid-template-columns:repeat(4,1fr) }
}