/* Ciemna sekcja z rozwijanymi panelami na stronie glownej (13.10.2026). Markup i skrypty: inc/mozliwosci.php. Makiety w panelach: css/strony.css (klasy sw-*). */
/* pas na pelna szerokosc strony (bez zaokraglonej karty), tresc w kolumnie 1180 px na srodku */
.moz { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 128px) 0; background: linear-gradient(165deg, #060b24 0%, #0d1b55 50%, #1a37a6 100%); color: #fff; } /* tlo jak w hero (hero25): granat z ziarnem, nie prawie czarne */
.moz__in { position: relative; z-index: 1; max-width: calc(1180px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.moz__tlo { position: absolute; inset: 0; width: 100%; height: 100%; }
.moz__gora { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px clamp(32px, 6vw, 96px); margin-bottom: clamp(36px, 5vw, 72px); }
.moz__gora h2 { max-width: 560px; margin: 0; font-family: 'Fraunces', Georgia, serif; font-optical-sizing: none; font-variation-settings: 'opsz' 40; font-size: clamp(28px, 3vw, 44px); font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; color: #fff; text-wrap: balance; }
.moz__gora > div { flex: none; width: min(100%, 380px); }
.moz__gora p { margin: 6px 0 20px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .82); }

/* panele: jeden szeroki i niebieski, pozostale waskie, ciemne i roznej wysokosci (rowno od dolu) */
.moz__panele { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 8px; height: 464px; }
.moz__p { position: relative; flex: 1 1 0; min-width: 0; height: var(--h, 100%); overflow: hidden; border-radius: 16px; background: rgba(5, 8, 24, .72); cursor: pointer; transition: flex-grow .55s cubic-bezier(.3, .7, .2, 1), height .55s cubic-bezier(.3, .7, .2, 1), background-color .35s ease; }
.moz__p:nth-child(2) { --h: 52%; }
.moz__p:nth-child(3) { --h: 100%; }
.moz__p:nth-child(4) { --h: 74%; }
.moz__p:nth-child(5) { --h: 88%; }
.moz__p:nth-child(1) { --h: 66%; }
.moz__p:not(.is-on):hover { background: rgba(5, 8, 24, .88); }
.moz__p.is-on { flex-grow: 3.4; height: 100%; background: var(--accent); cursor: default; }
/* tlo rozwinietego panelu (13.10 Kacper: "takie puste"): jasniejsza plaszczyzna od gornego rogu, ziarno jak w hero i duzy znak klikamy w rogu */
.moz__p::before { content: ""; position: absolute; z-index: 0; inset: 0; opacity: 0; transition: opacity .45s ease; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 2.2 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"), linear-gradient(140deg, #4a82ff 0%, #2563eb 46%, #1b4fd6 100%); background-blend-mode: overlay, normal; }
.moz__p::after { content: ""; position: absolute; z-index: 0; right: -12%; top: -16%; width: 58%; aspect-ratio: 1; opacity: 0; transition: opacity .45s ease; pointer-events: none; background: rgba(255, 255, 255, .07);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 96 97'%3E%3Cpath d='M2 2H98V20L19 99L2 82L59 25H2Z'/%3E%3Cpath d='M76 68L98 46V99H76Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 96 97'%3E%3Cpath d='M2 2H98V20L19 99L2 82L59 25H2Z'/%3E%3Cpath d='M76 68L98 46V99H76Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.moz__p.is-on::before, .moz__p.is-on::after { opacity: 1; }
.moz__p h3 { position: relative; z-index: 1; margin: 0; }
.moz__p h3 button { display: block; width: 100%; padding: 26px 26px 0; border: 0; background: none; font: 500 19px/1.25 var(--font); letter-spacing: -0.01em; color: #fff; text-align: left; cursor: inherit; }
.moz__p h3 button:focus-visible { outline: 2px solid #93b4ff; outline-offset: -6px; border-radius: 16px; }
.moz__srodek { position: absolute; z-index: 1; left: 0; top: 62px; bottom: 0; width: 520px; max-width: none; padding: 0 26px; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s .2s; }
.moz__p.is-on .moz__srodek { visibility: visible; opacity: 1; transition: opacity .4s ease .25s, visibility 0s; }
.moz__srodek > p { max-width: 430px; margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.moz__mak { position: absolute; left: 14px; right: 14px; top: 78px; bottom: 0; }
/* makiety na niebieskim tle panelu: bez wlasnego tla, biale karty zostaja */
.moz .moz__mak .sw-k__m { height: 100%; border-radius: 0; background: none; }
.moz .moz__mak .sw-m1__gl { color: #fff; }
.moz .moz__mak .sw-m1__gl em { background: #fff; color: var(--accent); }
.moz .moz__mak .sw-k__m.sw-m3 { padding: 6px 12px 0; }
.moz .moz__mak .sw-m2__okno, .moz .moz__mak .sw-m7__okno { top: 4%; }
.moz .moz__mak .sw-m8__prod { top: 2%; }
.moz .moz__mak .sw-m8__kosz { top: 12%; }

/* pod panelami: trzy propozycje do wyboru (?dol=1..3) */
.moz__dol { margin-top: clamp(56px, 7vw, 104px); }
.moz__dol h3 { margin: 0 0 22px; font-size: 21px; font-weight: 400; letter-spacing: -0.01em; color: #fff; }
/* 1: karty z linkami (13.10 Kacper: bez obramowania, ladniejsze): ikona w kafelku, strzalka w kolku, pierwsza karta niebieska jak rozwiniety panel,
   pozostale ciemne i robia sie niebieskie po najechaniu */
.moz__linki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.moz__linki a { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 208px; padding: 26px 28px 28px; border-radius: 20px; background: rgba(5, 8, 24, .58); color: #fff; }
.moz__linki a::before { content: ""; position: absolute; z-index: 0; inset: 0; opacity: 0; transition: opacity .35s ease; background: linear-gradient(140deg, #4a82ff 0%, #2563eb 46%, #1b4fd6 100%); }
.moz__linki a::after { content: ""; position: absolute; z-index: 0; right: -14%; bottom: -34%; width: 62%; aspect-ratio: 1; opacity: 0; transition: opacity .35s ease; background: rgba(255, 255, 255, .08);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 96 97'%3E%3Cpath d='M2 2H98V20L19 99L2 82L59 25H2Z'/%3E%3Cpath d='M76 68L98 46V99H76Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 96 97'%3E%3Cpath d='M2 2H98V20L19 99L2 82L59 25H2Z'/%3E%3Cpath d='M76 68L98 46V99H76Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.moz__linki a:first-child::before, .moz__linki a:first-child::after, .moz__linki a:hover::before, .moz__linki a:hover::after, .moz__linki a:focus-visible::before, .moz__linki a:focus-visible::after { opacity: 1; }
.moz__linki a > * { position: relative; z-index: 1; }
.moz__linki a:focus-visible { outline: 2px solid #93b4ff; outline-offset: 3px; }
.moz__linki .ico { box-sizing: border-box; width: 46px; height: 46px; padding: 12px; border-radius: 13px; background: rgba(255, 255, 255, .1); color: #fff; transition: background-color .3s ease, color .3s ease; }
.moz__linki a:first-child .ico, .moz__linki a:hover .ico, .moz__linki a:focus-visible .ico { background: #fff; color: var(--accent); }
.moz__linki .klik { position: absolute; z-index: 1; right: 26px; top: 28px; box-sizing: border-box; width: 38px; height: 38px; padding: 13px; border-radius: 50%; background: rgba(255, 255, 255, .1); fill: #fff; transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .3s ease, fill .3s ease; }
.moz__linki a:hover .klik, .moz__linki a:focus-visible .klik { background: #fff; fill: var(--accent); transform: translate(3px, -3px); }
.moz__linki b { margin-top: auto; padding-top: 36px; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.moz__linki span { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
/* 2: pas liczb */
.moz__liczby { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 40px); }
.moz__liczby > div { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .2); }
.moz__liczby dt { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 144; font-size: clamp(48px, 5vw, 76px); font-weight: 300; line-height: .95; letter-spacing: -0.03em; color: #fff; white-space: nowrap; }
.moz__liczby dd { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .75); }
/* 3: tasma logotypow klientow (biale, przesuwa sie sama) */
.moz__loga { overflow: hidden; padding: 26px 0; border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.moz__tasma { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); width: max-content; padding-right: clamp(40px, 5vw, 72px); animation: moz-tasma 60s linear infinite; }
.moz__tasma img { flex: none; width: auto; max-width: 150px; height: 34px; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; }
.moz__loga:hover .moz__tasma { animation-play-state: paused; }
@keyframes moz-tasma { to { transform: translateX(-50%); } }

@media (max-width: 1100px) {
  .moz__gora { flex-direction: column; align-items: flex-start; }
  /* wezej: panele jeden pod drugim, rozwiniety pokazuje makiete */
  .moz__panele { flex-direction: column; align-items: stretch; height: auto; }
  .moz__liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .moz__p, .moz__p.is-on { flex: none; height: auto; }
  .moz__p h3 button { padding: 20px 22px; }
  .moz__p.is-on h3 button { padding-bottom: 8px; }
  .moz__srodek { position: static; display: none; width: auto; padding: 0 22px; }
  .moz__p.is-on .moz__srodek { display: block; }
  .moz__mak { position: relative; left: auto; right: auto; top: auto; height: 350px; margin: 14px -8px 0; }
}
@media (max-width: 760px) { .moz__linki { grid-template-columns: minmax(0, 1fr); } .moz__linki a { min-height: 0; } .moz__linki b { padding-top: 18px; } }
@media (prefers-reduced-motion: reduce) { .moz__p, .moz__srodek, .moz__p::before, .moz__p::after, .moz__linki a::before, .moz__linki a::after, .moz__linki .ico, .moz__linki .klik { transition: none; } .moz__tasma { animation: none; } .moz__loga { overflow-x: auto; } }