/* Inter variable font — self-hosted (eliminuje critical chain Google Fonts CSS → gstatic woff2).
   Latin pokrywa EN + ASCII; Latin-ext pokrywa polskie znaki diakrytyczne (ąćęłńóśźż). */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:200 700;
  font-display:swap;
  src:url('assets/Inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:200 700;
  font-display:swap;
  src:url('assets/Inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* SIMTU Design Tokens — DARK (default) */
:root[data-theme="dark"]{--bg-base:#000008;--bg-surface-1:#111118;--bg-surface-2:#1C1C26;--bg-glass-04:rgba(10,10,18,.72);--bg-glass-08:rgba(22,22,32,.72);--bg-footer:#00000F;--text-primary:#FFF;--text-secondary:#9C9C9C;--text-tertiary:#8E8E94;--text-on-accent:#000008;--border-subtle:rgba(255,255,255,.06);--border-default:rgba(255,255,255,.12);--accent-pink:#FF0A78;--accent-cyan:#29C5F6;--accent-violet:#C07EFF;--accent-pink-text:#FF0A78;--accent-cyan-text:#29C5F6;--accent-violet-text:#C07EFF;--accent-pink-tint:#1A0210;--accent-cyan-tint:#001620;--accent-violet-tint:#100818;--shadow-card:0 1px 0 rgba(255,255,255,.04) inset,0 1px 2px rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.25),0 32px 64px rgba(0,0,0,.2);--shadow-elevated:0 1px 0 rgba(255,255,255,.06) inset,0 2px 4px rgba(0,0,0,.4),0 16px 32px rgba(0,0,0,.3),0 48px 96px rgba(0,0,0,.25)}
:root[data-theme="dark"] .section--light{--bg-base:#FFF;--bg-surface-1:#F5F5F7;--bg-surface-2:#EBEBED;--bg-footer:#F0F0F2;--text-primary:#000008;--text-secondary:#4A4A55;--text-tertiary:#5C5C60;--border-subtle:rgba(0,0,8,.06);--border-default:rgba(0,0,8,.12);--accent-pink-text:#C00060;--accent-cyan-text:#006A8C;--accent-violet-text:#8848C0;--accent-pink-tint:#FFEAF2;--accent-cyan-tint:#E6F8FE;--accent-violet-tint:#F4E6FF;--shadow-card:0 1px 0 rgba(255,255,255,.6) inset,0 1px 2px rgba(0,0,8,.04),0 8px 16px rgba(0,0,8,.06),0 32px 64px rgba(0,0,8,.06);--shadow-elevated:0 1px 0 rgba(255,255,255,.7) inset,0 2px 4px rgba(0,0,8,.06),0 16px 32px rgba(0,0,8,.1),0 48px 96px rgba(0,0,8,.06);background:var(--bg-base);color:var(--text-secondary)}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;background:var(--bg-base)} /* JS handles smooth scroll for .js-smooth-scroll links; CSS smooth conflicts with rAF animation */
body{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:16px;font-weight:300;line-height:1.6;letter-spacing:0;color:var(--text-secondary);background:var(--bg-base);font-feature-settings:'kern' 1,'calt' 1,'ss01' 1,'cv11' 1;font-variation-settings:'opsz' 16;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}

/* Main container — z-index 1 + solid bg żeby pokrywało fixed footer (z-index 0).
   Footer odsłania się dopiero gdy main scrollê się powyżej viewport (przez spacer). */
main{position:relative;z-index:1;background:var(--bg-base)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* Skip link */
.skip-link{position:absolute;top:-40px;left:8px;padding:8px 16px;background:var(--accent-pink);color:var(--text-on-accent);border-radius:4px;z-index:9999;font-size:.875rem}
.skip-link:focus{top:8px}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:0 24px}

/* Typography */
h1,h2,h3,h4{color:var(--text-primary);font-feature-settings:'kern' 1,'calt' 1,'ss01' 1,'cv11' 1,'ss03' 1;font-variation-settings:'opsz' 32}
h1{font-size:clamp(2.5rem,5.5vw,5.5rem);font-weight:600;line-height:1.1;letter-spacing:-.022em;white-space:pre-line}
h2{font-size:clamp(2rem,3.5vw,3rem);font-weight:600;line-height:1.15;letter-spacing:-.018em;white-space:pre-line}
h3{font-size:1.5rem;font-weight:500;letter-spacing:-.01em;line-height:1.3}
h4{font-size:1.125rem;font-weight:500;letter-spacing:-.01em;line-height:1.4}
.lead{font-size:1.25rem;font-weight:300;line-height:1.55;color:var(--text-secondary);max-width:56ch}





/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 28px;font-size:.9375rem;font-weight:400;letter-spacing:-.01em;border-radius:9999px;transition:background 180ms ease,color 180ms ease,border-color 180ms ease,opacity 180ms ease;white-space:nowrap;line-height:1}
.btn--primary{background:var(--accent-pink);color:var(--text-on-accent)}
.btn--primary:hover{opacity:.88}
.btn--secondary{color:var(--text-primary);padding:11px 12px;background:transparent}
.btn--secondary:hover{opacity:.7}


.btn-arrow{width:16px;height:16px;transition:transform .2s ease}
.btn--secondary:hover .btn-arrow,.btn--ghost:hover .btn-arrow{transform:translateX(2px)}

/* Nav */
/* ===== NAV — floating dock style ===== */
/* Dock: section-width, centered horizontally, floating with margin from top.
   Używamy max-width zamiast width — fixed element nie powinien rosnąć z layout
   viewport gdy strona ma horizontal overflow. */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:1000;pointer-events:none;width:calc(100% - 96px);max-width:1100px}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:56px;padding:0 8px 0 24px;background:rgba(8,8,12,.88);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);border:1px solid var(--border-subtle);border-radius:9999px;box-shadow:var(--shadow-card);pointer-events:auto;transition:border-color .25s ease}
.nav__inner:hover{border-color:var(--border-default)}
.nav__brand{display:inline-flex;align-items:center}
.nav__brand-logo{height:28px;width:auto;display:block;color:var(--text-primary)}
.nav__actions{display:inline-flex;align-items:center;gap:6px}
.nav__actions .btn{padding:9px 18px;font-size:.875rem;line-height:1;letter-spacing:.005em}
.nav__actions .btn--secondary{padding:9px 12px}

/* Floating PL/EN pill — fixed at right edge of viewport */
.lang-switch-floating{position:fixed;top:24px;right:24px;z-index:999;pointer-events:auto}
.lang-switch{display:inline-flex;align-items:center;gap:4px;padding:9px 14px;font-size:.8125rem;letter-spacing:.02em;color:var(--text-tertiary);background:rgba(8,8,12,.88);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);border:1px solid var(--border-subtle);border-radius:9999px;box-shadow:var(--shadow-card);transition:border-color .2s ease,color .2s ease;cursor:pointer;height:40px;font-family:inherit}
.lang-switch:hover{border-color:var(--border-default);color:var(--text-primary)}
.lang-switch__current{color:var(--text-primary);font-weight:500}
.lang-switch__sep{color:var(--text-tertiary);opacity:.4}

/* Hamburger button (mobile) — sits inside dock */
.nav__hamburger{display:none;width:40px;height:40px;background:none;border:none;cursor:pointer;align-items:center;justify-content:center;color:var(--text-primary);padding:0;border-radius:9999px;transition:background .2s ease}
.nav__hamburger:hover{background:var(--border-subtle)}
.nav__hamburger-icon{width:18px;height:12px;position:relative}
.nav__hamburger-icon span{display:block;position:absolute;left:0;width:100%;height:1.5px;background:currentColor;border-radius:1px;transition:transform .3s ease,opacity .2s ease,top .3s ease}
.nav__hamburger-icon span:nth-child(1){top:0}
.nav__hamburger-icon span:nth-child(2){top:5px}
.nav__hamburger-icon span:nth-child(3){top:10px}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-icon span:nth-child(1){top:5px;transform:rotate(45deg)}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-icon span:nth-child(2){opacity:0}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-icon span:nth-child(3){top:5px;transform:rotate(-45deg)}

/* Mobile overlay (full-screen panel triggered by hamburger) */
.nav__overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-base);z-index:998;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;overflow-y:auto}
.nav__overlay[aria-hidden="false"]{opacity:1;visibility:visible}
.nav__overlay-inner{padding:128px 32px 64px;max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.nav__overlay-actions{display:flex;flex-direction:column;gap:12px}
.nav__overlay-actions .btn{width:100%;justify-content:center;padding:14px 28px;font-size:1rem}
.nav__overlay-lang{display:flex;justify-content:center;padding-top:24px;border-top:1px solid var(--border-subtle)}
body[data-nav-open="true"]{overflow:hidden}

/* Responsive: collapse dock to logo + hamburger on small screens */
@media(max-width:768px){
  .nav{top:12px;width:calc(100% - 80px)}
  .nav__inner{padding:0 8px 0 16px;height:52px;gap:8px}
  .nav__brand-logo{height:24px}
  .nav__actions{display:none}
  .nav__hamburger{display:inline-flex}
  .lang-switch-floating{display:none}
}

/* Sections */

.section--alt{background:var(--bg-surface-1)}
.section[data-rhythm="heavy-bottom"]{padding-top:128px;padding-bottom:192px}
.section[data-rhythm="heavy-top"]{padding-top:192px;padding-bottom:128px}
:root[data-theme="dark"] .section--depth{position:relative;isolation:isolate;background-color:var(--bg-base);background-image:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 1px);background-repeat:no-repeat;background-size:100% 100%}
:root[data-theme="dark"] .section--depth::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background-repeat:no-repeat;opacity:.7}
:root[data-theme="dark"] .section--depth[data-accent="cyan"][data-pos="top-right"]::before{background-image:radial-gradient(600px circle at 90% 10%,rgba(41,197,246,.08),transparent 60%)}
:root[data-theme="dark"] .section--depth[data-accent="violet"][data-pos="top-left"]::before{background-image:radial-gradient(700px circle at 10% 10%,rgba(192,126,255,.08),transparent 60%)}
:root[data-theme="dark"] .section--depth[data-accent="pink"][data-pos="bottom-left"]::before{background-image:radial-gradient(700px circle at 10% 90%,rgba(255,10,120,.07),transparent 60%)}
:root[data-theme="dark"] .section--depth[data-accent="pink"][data-pos="center"]::before{background-image:radial-gradient(900px circle at 50% 50%,rgba(255,10,120,.08),transparent 60%)}


.section__header h2{margin-bottom:24px}
.section__header .lead{margin-top:24px}
.section__header--center .lead{margin-left:auto;margin-right:auto}

/* === HERO content fade-out — IDENTYCZNY mechanizm jak .section-app > .container ===
   View-timeline na CONTAINER (.hero), animation gra na CAŁYM CONTENCIE (.hero__inner = napisy + mockup).
   To samo co sekcje: timeline na .section-app, animation na .container.
   Range cover 50% exit 80% (desktop), exit 30% exit 90% (mobile portrait) — bez zmian.
   
   Dlaczego nie 'animation-timeline: view()' bezpośrednio na .hero__inner?
   .hero__inner jest mniejszy niż .hero (bez paddingów hero) → przy scroll=0 cover progress
   już dalej w timeline. Named timeline na .hero (cały, ~1500px) daje IDENTYCZNĄ skalę jak .section-app. */
@supports (animation-timeline: view()) {
  .hero {
    view-timeline-name: --hero-vt;
    view-timeline-axis: block;
  }
  .hero__inner {
    animation: content-fade-out cubic-bezier(0.4, 0, 0.6, 1) both;
    animation-timeline: --hero-vt;
    animation-range: cover 50% exit 80%;
  }
  
  @media (max-width: 767px), (orientation: portrait) and (max-width: 1023px) {
    .hero__inner {
      animation-range: exit 30% exit 90%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__inner {
    animation: none !important;
  }
}

/* Hero - discreet luxury layout (refactored v0.3.2) */
.hero{position:relative;padding:160px 0 128px;overflow:hidden}

/* Hero mesh — 4 dryfujące blobs z mix-blend-mode:screen, GPU-only (transform).
   Zastępuje WebGL shader (~600 KB Three.js → 0 JS, czysty CSS, 60fps composite).
   Blobs są DUŻE (1.4× viewport) i pozycjonowane CENTRALNIE — nakładają się od startu. */
.hero__mesh{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#000008;contain:strict;isolation:isolate}
:root[data-theme="light"] .hero__mesh{display:none}
.hero__mesh-blob{position:absolute;top:50%;left:50%;width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;border-radius:50%;filter:blur(40px);mix-blend-mode:screen;will-change:transform;animation:38s ease-in-out infinite alternate}
.hero__mesh-blob--1{background:radial-gradient(circle, rgba(255,10,120,.30) 0%, rgba(255,10,120,.10) 35%, rgba(255,10,120,0) 65%);animation-name:hero-blob-1;animation-duration:42s}
.hero__mesh-blob--2{background:radial-gradient(circle, rgba(41,197,246,.28) 0%, rgba(41,197,246,.10) 35%, rgba(41,197,246,0) 65%);animation-name:hero-blob-2;animation-duration:34s}
.hero__mesh-blob--3{background:radial-gradient(circle, rgba(192,126,255,.26) 0%, rgba(192,126,255,.09) 35%, rgba(192,126,255,0) 65%);animation-name:hero-blob-3;animation-duration:46s}
.hero__mesh-blob--4{background:radial-gradient(circle, rgba(255,10,120,.18) 0%, rgba(255,10,120,0) 60%);animation-name:hero-blob-4;animation-duration:30s;opacity:.6}
@keyframes hero-blob-1{0%{transform:translate(-12%,-8%) scale(1.05)}50%{transform:translate(8%,4%) scale(1.15)}100%{transform:translate(-4%,-12%) scale(1.00)}}
@keyframes hero-blob-2{0%{transform:translate(12%,-10%) scale(1.10)}50%{transform:translate(-6%,6%) scale(.95)}100%{transform:translate(10%,-4%) scale(1.12)}}
@keyframes hero-blob-3{0%{transform:translate(-10%,10%) scale(1.00)}50%{transform:translate(6%,-4%) scale(1.15)}100%{transform:translate(-12%,8%) scale(1.05)}}
@keyframes hero-blob-4{0%{transform:translate(8%,12%) scale(.95)}50%{transform:translate(-10%,-4%) scale(1.10)}100%{transform:translate(6%,10%) scale(1.05)}}
@media (prefers-reduced-motion: reduce){.hero__mesh-blob{animation:none}}
/* Soft gradient on the bottom edge — fades into Section 01 background, tucks behind the mockup */
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60%;pointer-events:none;z-index:1;background:linear-gradient(180deg,transparent 0%,rgba(0,0,8,.25) 25%,rgba(0,0,8,.65) 55%,rgba(0,0,8,.92) 80%,#000008 100%)}
:root[data-theme="light"] .hero::after{background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.30) 25%,rgba(255,255,255,.70) 55%,rgba(255,255,255,.94) 80%,#FFF 100%)}
@media(max-width:768px){
  .hero::after{height:55%;background:linear-gradient(180deg,transparent 0%,rgba(0,0,8,.40) 30%,rgba(0,0,8,.80) 65%,#000008 100%)}
  :root[data-theme="light"] .hero::after{background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.45) 30%,rgba(255,255,255,.82) 65%,#FFF 100%)}
}
.hero__inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;align-items:center;gap:96px;text-align:center}
.hero__content{max-width:760px;width:100%}
.hero h1{max-width:20ch;margin:0 auto 32px}
.hero .lead{margin:0 auto 24px;max-width:56ch}

.hero__cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* Device screen (mockup container with aspect-ratio) */
.hero__visual{
  width:100%;
  max-width:1180px;
  /* Animacja wjazdu mockupu z dolnej krawędzi viewportu — maskuje fetch + mount Shadow DOM */
  opacity:0;
  transform:translateY(100vh);
  animation:hero-mockup-entry 1400ms cubic-bezier(.16,1,.3,1) 200ms forwards;
}
@keyframes hero-mockup-entry {
  to { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero__visual{ opacity:1; transform:none; animation:none; }
}
.device-screen{position:relative;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.05);background:linear-gradient(135deg,rgba(255,10,120,.025) 0%,rgba(41,197,246,.015) 50%,rgba(192,126,255,.025) 100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 0 100px -30px rgba(255,10,120,.18),inset 0 0 0 1px rgba(255,255,255,.05);transition:transform 320ms ease,box-shadow 320ms ease;isolation:isolate}
.device-screen__inner{position:relative;z-index:1;border-radius:8px;overflow:hidden;aspect-ratio:1440/932;background:#000;box-shadow:0 0 0 1px rgba(0,0,0,.4)}

.device-screen::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 0% 0%,rgba(255,10,120,.10),transparent 32%),radial-gradient(circle at 100% 100%,rgba(41,197,246,.08),transparent 32%);pointer-events:none;z-index:0;mix-blend-mode:screen}
.device-screen::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 18%);pointer-events:none;z-index:0}
:root[data-theme="light"] .device-screen{border:1px solid rgba(0,0,8,.06);background:linear-gradient(135deg,rgba(255,10,120,.02) 0%,rgba(41,197,246,.012) 50%,rgba(192,126,255,.02) 100%);box-shadow:0 30px 60px -20px rgba(0,0,8,.22),0 0 100px -30px rgba(255,10,120,.10),inset 0 0 0 1px rgba(255,255,255,.6)}
:root[data-theme="light"] .device-screen::before{background:radial-gradient(circle at 0% 0%,rgba(192,0,96,.06),transparent 32%),radial-gradient(circle at 100% 100%,rgba(0,106,140,.05),transparent 32%);mix-blend-mode:multiply}
:root[data-theme="light"] .device-screen::after{background:linear-gradient(180deg,rgba(255,255,255,.20) 0%,transparent 18%)}

/* Hero placeholder (when no mockup yet) */

.hero-placeholder span{max-width:480px}
.hero-placeholder strong{display:block;color:rgba(255,255,255,.7);font-weight:400;font-size:1rem;margin-bottom:8px;letter-spacing:0}

/* Hero animation — 7 webp frames z cross-fade.
   100% CSS @keyframes — bez JS. Cycle = 11700 ms. Każda klatka ma własny keyframe
   z timestampami fade-in/visible/fade-out per cumulative HOLDS = [1900,1700,1600,1900,1200,1200,2200].
   FADE = 600 ms cross-fade. */
.hero-anim{position:absolute;inset:0;overflow:hidden;background:#080808;pointer-events:none}
.hero-anim::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:30;background:radial-gradient(ellipse 92% 88% at 50% 50%,transparent 55%,rgba(0,0,0,.10) 78%,rgba(0,0,0,.32) 100%)}
.hero-anim__frame{position:absolute;inset:0;opacity:0;animation:11700ms linear infinite;will-change:opacity}
.hero-anim__frame img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.hero-anim__frame:nth-child(1){animation-name:hero-cf-1}
.hero-anim__frame:nth-child(2){animation-name:hero-cf-2}
.hero-anim__frame:nth-child(3){animation-name:hero-cf-3}
.hero-anim__frame:nth-child(4){animation-name:hero-cf-4}
.hero-anim__frame:nth-child(5){animation-name:hero-cf-5}
.hero-anim__frame:nth-child(6){animation-name:hero-cf-6}
.hero-anim__frame:nth-child(7){animation-name:hero-cf-7}
@keyframes hero-cf-1{0%,16.24%{opacity:1}21.37%,94.87%{opacity:0}100%{opacity:1}}
@keyframes hero-cf-2{0%,16.24%{opacity:0}21.37%,30.77%{opacity:1}35.90%,100%{opacity:0}}
@keyframes hero-cf-3{0%,30.77%{opacity:0}35.90%,44.44%{opacity:1}49.57%,100%{opacity:0}}
@keyframes hero-cf-4{0%,44.44%{opacity:0}49.57%,60.68%{opacity:1}65.81%,100%{opacity:0}}
@keyframes hero-cf-5{0%,60.68%{opacity:0}65.81%,70.94%{opacity:1}76.07%,100%{opacity:0}}
@keyframes hero-cf-6{0%,70.94%{opacity:0}76.07%,81.20%{opacity:1}86.32%,100%{opacity:0}}
@keyframes hero-cf-7{0%{opacity:1}5.13%,81.20%{opacity:0}86.32%,100%{opacity:1}}
@media (prefers-reduced-motion: reduce){.hero-anim__frame{animation:none}.hero-anim__frame:first-child{opacity:1}}

@media(max-width:900px){
  .hero{padding:120px 0 80px}
  .hero__inner{gap:64px}
  .hero h1{font-size:3rem}
}

/* Footer */
/* Footer reveal pattern — footer fixed na dole viewport, z-index 0 (pod sekcjami).
   Sekcja 11 (#final-cta) z z-index 11 i solid background pokrywa footer.
   Spacer div po sekcji 11 tworzy scroll runway — gdy user scrollę poza section 11,
   footer się odsłania od dołu (jak spod ekranu). */
.footer{background:var(--bg-footer);padding:80px 0 40px;border-top:1px solid var(--border-subtle);position:fixed;bottom:0;left:0;right:0;z-index:0}

/* Mobile: ekstra dolny pas pod footerem (na overscroll iOS Safari).
   Pseudoelement ::after rozciąga się 200px PONIŻEJ stopki tym samym kolorem,
   żeby rubber-band scroll na iPhone nie odsłaniał białego/jaśniejszego paska. */
@media (max-width: 768px){
  .footer::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:200px;
    background:var(--bg-footer);
    pointer-events:none;
  }
}

/* Spacer — wysokość ustawiana dynamicznie przez JS = realna wysokość footera.
   To gwarantuje że peel-back działa poprawnie niezależnie od długości footera
   (różne języki, breakpointy, szerokość ekranu). */
.footer-spacer{height:320px;pointer-events:none}
@media (max-width: 768px){
  .footer-spacer{height:600px} /* fallback na wypadek gdyby JS nie zadziałał */
}

/* Footer columns — brand + simple horizontal link list */
.footer__columns{display:grid;grid-template-columns:1fr auto;align-items:start;gap:64px;padding-bottom:48px;margin-bottom:32px;border-bottom:1px solid var(--border-subtle);border-top:1px solid var(--border-subtle);padding-top:56px}
.footer__brand{display:flex;flex-direction:column;align-items:flex-start}
.footer__brand-logo{height:24px;width:auto;display:block;margin-bottom:20px;color:var(--text-primary)}
.footer__tagline{font-size:.875rem;color:var(--text-tertiary);line-height:1.55;letter-spacing:.005em;max-width:36ch;font-weight:300}
.footer__links{display:flex;flex-wrap:wrap;gap:28px;justify-self:end;align-items:center}
.footer__links a{font-size:.875rem;color:var(--text-secondary);letter-spacing:.005em;transition:color .2s ease;font-weight:300}
.footer__links a:hover{color:var(--text-primary)}

/* Footer bottom */
.footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:.75rem;color:var(--text-tertiary);letter-spacing:.02em}
.footer__copyright{font-weight:400}


@media(max-width:900px){
  .footer__columns{grid-template-columns:1fr;gap:32px}
  .footer__links{justify-self:start;gap:20px}}
@media(max-width:600px){
  .footer{padding:80px 0 32px}  .footer__links{flex-direction:column;gap:14px;align-items:flex-start}
  .footer__bottom{flex-direction:column;align-items:flex-start}
}

/* === EU FUNDING BANNER (footer) ===
   Klikalny placeholder na grafikę informującą o dotacji UE.
   Height = nav dock height (56px desktop / 52px mobile).
   Aspect ratio 1080:154 = ~7.013 → szerokość obliczana automatycznie.
   PL/EN — różne pliki webp przełączane przez html[data-lang]. */
.footer__eu-banner{
  height:56px;
  aspect-ratio:1080 / 154;
  background:#FFF;
  border:1px solid var(--border-default);
  border-radius:8px;
  padding:0;
  cursor:pointer;
  overflow:hidden;
  position:relative;
  font-family:inherit;
  display:block;
  flex:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.footer__eu-banner:hover{
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card);
}
.footer__eu-banner:focus-visible{
  outline:2px solid var(--accent-violet);
  outline-offset:2px;
}
.footer__eu-banner-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Pokaż tylko obrazek pasujący do bieżącego języka */
html[data-lang="pl"] .footer__eu-banner-img--en{display:none}
html[data-lang="en"] .footer__eu-banner-img--pl{display:none}
@media(max-width:600px){
  .footer__eu-banner{height:52px}
}

/* A11y */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
:focus-visible{outline:2px solid var(--accent-pink);outline-offset:4px;border-radius:4px}

/* ===========================================
   APPLE-STYLE SECTIONS (v0.4.0)
   =========================================== */

/* Scaffolding — generous vertical breathing room */
.section-app{padding:160px 0;position:relative;overflow:visible;content-visibility:auto;contain-intrinsic-size:auto 800px}



/* Każda sekcja MUSI mieć opaque background żeby body bg nie prześwitywał
   przez margin overlap (-25vh) podczas animacji.
   Specificity 0,0,2,0 (dwie klasy) — wygrywa nad .section--light/--depth/--alt */
.section-app.section--light{background-color:#FFFFFF}
/* Override dla sekcji z białymi kartami (compat-card w 04, role-network w 07) — 
   jaśniejsza warstwa karty wystaje z off-white tła sekcji (Apple layered surfaces). */
#kompatybilnosc.section--light,
#platforma-www-mobile.section--light,
#sieć-partnerów.section--light{background-color:#F5F5F7}
.section-app.section--depth{background-color:#000008}
.section-app.section--alt{background-color:#111118}

/* === SECTION OVERTAKE — sekcja "dogania" poprzednią pod koniec wjazdu ===
   
   Mechanizm:
   1. Sekcja B ma margin-top: -25vh (fizyczny overlap na A)
   2. Stan startowy animacji: translateY(25vh) — kompensacja, B wygląda
      jakby była w normalnej pozycji pod A (żaden gap, żaden overlap widoczny)
   3. Animation-range: entry 20% entry 100% — animacja gra przez 80% wjazdu B
      (start gdy B widoczna w dolnej 1/5 viewport)
   4. Stan końcowy: translateY(0) — overlap stał się aktywny (-25vh)
   
   Timing: cubic-bezier(0.25, 0.46, 0.45, 0.94) = easeOutQuad
   — łagodne, przyjemne, płynne (zamiast linearnego przyspieszania)
*/
@supports (animation-timeline: view()) {
  @keyframes section-overtake {
    from { transform: translateY(25vh); }
    to   { transform: translateY(0); }
  }
  
  .section-app + .section-app,
  .hero + .section-app {
    animation: section-overtake cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-timeline: view();
    animation-range: entry 20% entry 100%;
  }
  
  /* === MOBILE: mniejszy overlap żeby zachować proporcje na małym ekranie === */
  /* === MOBILE + TABLET PORTRAIT — mniejszy overtake (Strategy C) ===
     Pionowe ekrany (telefony + iPad portrait do 1023px) dostają mniejszą
     animację, bo translateY w vh jest proporcjonalne do wysokości viewport,
     a pionowe ekrany mają większy viewport_height. */
  @media (max-width: 767px), (orientation: portrait) and (max-width: 1023px) {
    @keyframes section-overtake-mobile {
      from { transform: translateY(15vh); }
      to   { transform: translateY(0); }
    }
    .section-app + .section-app,
    .hero + .section-app {
      animation-name: section-overtake-mobile;
      animation-range: entry 30% entry 100%;
    }
  }
}

/* Fizyczny overlap sekcji — działa zawsze, niezależnie od animacji.
   Bez tego sekcje się stykają, z tym — nakładają. */
.section-app + .section-app,
.hero + .section-app {
  margin-top: -25vh;
}

/* Mobile + tablet portrait: mniejszy fizyczny overlap dopasowany do mniejszego translateY */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1023px) {
  .section-app + .section-app,
  .hero + .section-app {
    margin-top: -15vh;
  }
}

/* z-index ramping — kolejne sekcje na wierzchu (warunek konieczny dla overlap) */
#connected-team{z-index:1}
#aplikacja-desktopowa{z-index:2}
#biblioteka-produktow{z-index:3}
#kompatybilnosc{z-index:4}
#workflow{z-index:5}
#problem{z-index:6}
#platforma-www-mobile{z-index:7}
#trzy-filary{z-index:8}
#kalkulator{z-index:9}
#sieć-partnerów{z-index:10}
#final-cta{z-index:11}

/* Reduced motion: bez animacji, bez overlap — sekcje stykają się */
@media (prefers-reduced-motion:reduce) {
  .section-app + .section-app,
  .hero + .section-app {
    animation: none !important;
    transform: none !important;
    margin-top: 0 !important;
  }
}

/* === CONTENT FADE-OUT — content sekcji wygasza się gdy sekcja wyjeżdża ===
   
   Gdy następna sekcja zaczyna nakładać się na obecną (overtake),
   content obecnej sekcji stopniowo znika (opacity 1 → 0).
   
   Background sekcji POZOSTAJE 100% opaque — tylko CONTENT znika.
   Efekt: czarne napisy na białym tle → coraz bardziej przezroczyste → znikają,
   pozostawiając samo białe tło. Dla dark sekcji analogicznie.
   
   Animation-range: cover 50% exit 80%
   - Start (cover 50%): sekcja w połowie pokrycia viewport (top sekcji ~ middle viewport)
   - End (exit 80%): sekcja w 80% wyjazdu, prawie poza viewport
   
   Synchronizuje się z entry 20%-100% animacji overtake następnej sekcji.
*/
@supports (animation-timeline: view()) {
  @keyframes content-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  
  .section-app > .container {
    animation: content-fade-out cubic-bezier(0.4, 0, 0.6, 1) both;
    animation-timeline: view();
    animation-range: cover 50% exit 80%;
  }
  
  /* Gallery-slider jest siostrą .container (full-bleed poza container max-width)
     więc potrzebuje osobnej animacji content fade-out z tym samym timing-iem */
  .section-app > .gallery-slider {
    animation: content-fade-out cubic-bezier(0.4, 0, 0.6, 1) both;
    animation-timeline: view();
    animation-range: cover 50% exit 80%;
  }
  
  /* Bottom CTAs (np. link "Zobacz scenariusz krok po kroku") — wcześniejszy fade-out
     żeby zniknęły zanim krawędź nakładającej się sekcji ich przytnie.
     
     animation-timeline: view() śledzi pozycję SAMEGO elementu .team-cta
     w viewport (nie sekcji nadrzędnej).
     
     Range entry 100% contain 50%:
     - entry 100% = element właśnie cały wszedł, jest u DOŁU ekranu — opacity 1
     - contain 50% = element pośrodku contain phase, ŚRODEK ekranu — opacity 0
     
     Czyli element widoczny gdy pojawia się na dole ekranu, znika zanim
     osiągnie środek ekranu. */
  
  
  /* === MOBILE + TABLET PORTRAIT: później fade-out żeby tekst był czytelny w środku ===
     Pionowe ekrany (telefon + iPad portrait) mają mały obszar widoczności,
     więc tekst MUSI być widoczny gdy jest w środku (najlepsze miejsce do czytania).
     Fade-out zaczyna się dopiero gdy sekcja już mocno wyjeżdża. */
  @media (max-width: 767px), (orientation: portrait) and (max-width: 1023px) {
    .section-app > .container {
      animation-range: exit 30% exit 90%;
    }
    .section-app > .gallery-slider {
      animation-range: exit 30% exit 90%;
    }
    /* Bottom CTAs — fade-out gdy element jest już przy górnej krawędzi */
    
  }
}

/* === MOBILE EDGE-TO-EDGE — wszystkie mobile poprawki w jednym miejscu === */
/* Mobile + tablet portrait: edge-to-edge i responsive elementy */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1023px) {
  /* Main — overflow-x:clip klipuje horizontal overflow ale NIE tworzy nowego
     scroll containera (różnica vs overflow:hidden). animation-timeline:view()
     używa root scrollport (html), więc clip na main jest bezpieczne. */
  main {
    overflow-x: clip;
  }
  
  /* Container — mniejszy padding boczny, bliżej krawędzi (16px zamiast 24px) */
  .container {
    padding: 0 16px;
  }
  
  /* Phone frame — responsive width żeby mieścił się w wąskim viewport */
  
}

/* Reduced motion: content fade wyłączony */
@media (prefers-reduced-motion:reduce) {
  .section-app > .container {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* Sekcja 11 (final-cta) — ostatnia sekcja, zawsze widoczna.
   Nic na nią się nie nakłada, więc nie ma powodu żeby content znikał. */
#final-cta > .container,
#final-cta .team-cta,
#final-cta .section-cta-bottom {
  animation: none !important;
  opacity: 1 !important;
}

/* Sekcja 09 (kalkulator) — interaktywny element, content zawsze widoczny
   żeby user mógł używać suwaków bez wygaszania podczas scrollowania. */
#kalkulator > .container,
#kalkulator .team-cta,
#kalkulator .section-cta-bottom {
  animation: none !important;
  opacity: 1 !important;
}

.section-app__header{max-width:880px;margin:0 auto 80px;text-align:center;padding:0 24px}
.section-app__header h2{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:600;letter-spacing:-.022em;line-height:1.05;margin-bottom:24px;color:var(--text-primary)}
.section-app__header h2 .h2-line{display:block}


.eyebrow-app{display:inline-block;margin-bottom:24px;font-size:.875rem;letter-spacing:0;color:var(--text-tertiary);font-weight:400;line-height:1.4}
.eyebrow-app__num{color:var(--text-tertiary);font-variant-numeric:tabular-nums}

/* Light-section depth ambient (subtle wash on white sections) */




/* ===== S2 — PROBLEM | LIGHT ===== */



.problem-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:96px;width:100%;max-width:1080px}
.problem-stat{padding:32px;background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.015) 100%);border:1px solid rgba(255,255,255,.06);border-radius:18px;text-align:left;transition:border-color .3s ease,background .3s ease}
.problem-stat:hover{border-color:rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 100%)}

.problem-stat__label{font-size:.9375rem;color:var(--text-secondary);line-height:1.5;letter-spacing:.005em}

/* ===== S3 — TRZY WARSTWY | DARK pink TL — BENTO GRID ===== */









/* Bento card 1 — DESKTOP (uses Dashboard.png as floating preview) */


.bento-card--desktop .bento-art img{width:100%;height:100%;object-fit:cover;object-position:top left;opacity:.92;mask-image:linear-gradient(180deg,black 0%,black 80%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,black 0%,black 80%,transparent 100%)}


/* Bento card 2 — WEB & MOBILE (CSS art) */









/* Bento card 3 — CLOUD (SVG-style abstract) */



/* ===== S4 — BIBLIOTEKA | LIGHT — EDGE-TO-EDGE MOCKUP =====
   Edge-to-edge hack — width 100vw + negative margin do wystawienia poza container.
   Body ma overflow-x:hidden który absorbuje ewentualny overflow ze scrollbara. */


.fullbleed-mockup__inner img{width:100%;height:auto;display:block}



/* Section 03 — library: tighten spacing around mockup to match section 01 visual rhythm */
/* === SECTION 03 — biblioteka produktów: spacing zunifikowany do standardu 80px === */






/* ===== S5 — PEŁEN SPEC | DARK cyan TR — DRAMATIC SPLIT ===== */


























.spec-killer__statement br{display:block}

/* ===== S6 — 12 PROGRAMÓW | LIGHT — CARDS GRID ===== */




/* ===== S7 — KLIENT NA TELEFONIE | DARK pink BL — FLOATING PHONE ===== */





















/* ===== S8 — PRODUCENT | LIGHT — ANNOTATED PANEL ===== */





.panel-header__nav span:first-child{color:#000008;font-weight:500}





















/* ===== S9 — WORKFLOW | DARK violet center ===== */

.workflow-step{position:relative;padding:48px 32px;text-align:left}
.workflow-step:not(:last-child)::after{content:"";position:absolute;top:88px;right:-16px;width:32px;height:1px;background:var(--border-default)}
.workflow-step:not(:last-child)::before{content:"";position:absolute;top:84px;right:-12px;width:8px;height:8px;border-right:1px solid var(--border-default);border-top:1px solid var(--border-default);transform:rotate(45deg)}
.workflow-step__num{font-size:3.5rem;font-weight:200;letter-spacing:-.04em;color:rgba(255,255,255,.18);line-height:1;font-variant-numeric:tabular-nums;font-variation-settings:'opsz' 32}

.workflow-step__title{font-size:1.25rem;font-weight:500;color:var(--text-primary);margin-bottom:12px;letter-spacing:-.018em}
.workflow-step__desc{font-size:.9375rem;color:var(--text-secondary);line-height:1.55}

/* ===== S10 — CALCULATOR | LIGHT — CENTRAL OUTPUT ===== */










.calc-slider{display:flex;flex-direction:column;gap:12px}


.calc-slider input[type="range"]{appearance:none;-webkit-appearance:none;width:100%;height:2px;background:var(--border-subtle);outline:none;border-radius:1px;cursor:pointer}
.calc-slider input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#FFF;border:1px solid var(--border-default);box-shadow:0 2px 8px rgba(0,0,0,.12);cursor:pointer;transition:transform .15s ease}
.calc-slider input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.1)}
.calc-slider input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#FFF;border:1px solid var(--border-default);box-shadow:0 2px 8px rgba(0,0,0,.12);cursor:pointer}


/* ===== S11 — PRODUCENCI-PARTNERZY | DARK violet subtle — TICKER ===== */
/* ===== S11 — PRODUCENCI-PARTNERZY | DARK violet subtle — CARDS GRID ===== */







/* ===== S12 — CTA BETA | DARK pink heavy-bottom — THEATRICAL ===== */

.cta-stage h2{font-size:clamp(3rem,7vw,6rem);font-weight:600;letter-spacing:-.022em;line-height:1.05;margin-bottom:32px;color:var(--text-primary)}
.cta-stage h2 br{display:block}


.cta-stage__buttons .btn{padding:14px 32px;font-size:1rem}


/* ===== Responsive adjustments ===== */
@media(max-width:960px){
  .section-app{padding:120px 0}
  
  .section-app__header{margin-bottom:64px}
  
  
  
  .problem-stats{grid-template-columns:1fr;gap:16px;margin-top:96px}
  
  
  
  
  
  
  
  
  .workflow-step:not(:last-child)::after,.workflow-step:not(:last-child)::before{display:none}
  
  
  
  
}

@media(max-width:600px){
  .section-app{padding:96px 0}
  .section-app__header h2{font-size:clamp(2rem,8vw,3rem)}
  
  
  
}
/* ===== SECTION 01: CONNECTED TEAM ===== */
.section-app__header .lead{margin-left:auto;margin-right:auto;text-align:center}
/* === SECTION 01: CONNECTED TEAM — Apple-style minimalism ===
   5 ról w bento layout 4×2: Projektant (primary) zajmuje 2×2 = 4× większy
   niż pozostałe karty. Każda karta ma własną ramkę (border + background),
   visual area top-left + body (name + desc) below. */
.team-roles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto;
  gap:20px;
  max-width:1100px;
  margin:0 auto;
}
.team-role{
  padding:28px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.015) 100%);
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:border-color .3s ease,background .3s ease;
  aspect-ratio:1 / 1;
}
.team-role:hover{
  border-color:rgba(255,255,255,.12);
  background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 100%)
}
/* Entry animation — bento kafle wjeżdżają z dołu z lekkim staggerem.
   Triggered gdy 10% sekcji widoczne (IntersectionObserver). */
@keyframes hero-skeleton-pulse {
  0%   { background-position: 0% 50%; opacity: 0.8; }
  50%  { background-position: 100% 50%; opacity: 1; }
  100% { background-position: 0% 50%; opacity: 0.8; }
}
@keyframes team-role-entry {
  from { opacity: 0; transform: translateY(28px) }
  to   { opacity: 1; transform: translateY(0) }
}
.team-roles[data-animate="entry"] .team-role{ opacity: 0 }
.team-roles[data-animate="entry"] .team-role.is-visible{
  animation: team-role-entry .9s cubic-bezier(.16,1,.3,1) forwards;
}
.team-roles[data-animate="entry"] .team-role.is-visible:nth-child(1){ animation-delay: 0ms }
.team-roles[data-animate="entry"] .team-role.is-visible:nth-child(2){ animation-delay: 90ms }
.team-roles[data-animate="entry"] .team-role.is-visible:nth-child(3){ animation-delay: 180ms }
.team-roles[data-animate="entry"] .team-role.is-visible:nth-child(4){ animation-delay: 270ms }
.team-roles[data-animate="entry"] .team-role.is-visible:nth-child(5){ animation-delay: 360ms }
@media (prefers-reduced-motion: reduce){
  .team-roles[data-animate="entry"] .team-role{ opacity: 1 }
  .team-roles[data-animate="entry"] .team-role.is-visible{ animation: none }
}
.team-role__visual{
  width:88px;
  height:88px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  flex:none;
}
.team-role__avatar{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  z-index:1;
}
  flex-shrink:0;
}
.team-role__initials{
  font-size:.9375rem;
  font-weight:200;
  letter-spacing:.08em;
  color:var(--text-tertiary);
  font-feature-settings:'tnum'
}
.team-role__body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.team-role__name{
  font-size:1.125rem;
  font-weight:300;
  letter-spacing:-.01em;
  color:var(--text-primary);
  margin:0 0 8px;
  line-height:1.3
}
.team-role__desc{
  font-size:.875rem;
  font-weight:300;
  line-height:1.55;
  color:var(--text-tertiary);
  margin:0;
  letter-spacing:.005em
}

/* Primary card (Projektant) — 2 cols × 2 rows.
   Bez aspect-ratio (override) — wymiar wynika naturalnie z grid span,
   górna i dolna krawędź równo z pozostałymi kartami. */
.team-role--primary{
  grid-column:span 2;
  grid-row:span 2;
  aspect-ratio:auto;
  padding:40px;
  gap:16px;
}
.team-role--primary .team-role__visual{
  width:260px;
  height:260px;
  border-radius:32px;
}
.team-role--primary .team-role__initials{
  font-size:3.25rem;
}
.team-role--primary .team-role__name{
  font-size:1.625rem;
  font-weight:200;
  letter-spacing:-.025em;
  margin:0 0 14px;
  line-height:1.2;
}
.team-role--primary .team-role__desc{
  font-size:1rem;
  line-height:1.65;
  color:var(--text-secondary);
  max-width:42ch;
}

/* Light theme override */
.section--light .team-role{
  background:linear-gradient(135deg,rgba(0,0,8,.025) 0%,rgba(0,0,8,.01) 100%);
  border-color:rgba(0,0,8,.08)
}
.section--light .team-role:hover{
  border-color:rgba(0,0,8,.14);
  background:linear-gradient(135deg,rgba(0,0,8,.035) 0%,rgba(0,0,8,.015) 100%)
}
.section--light .team-role__visual{
  background:rgba(0,0,8,.025);
  border-color:rgba(0,0,8,.10);
}



/* Responsive */
/* Tablet landscape (768-1147): 2 cols, PR full-width top, pozostałe 4 w 2x2.
   Primary tu NIE wymusza aspect-ratio — bo full-width = za duży kwadrat. */
@media (max-width:1147px) and (min-width:768px){
  .team-roles{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }
  .team-role--primary{
    grid-column:span 2;
    grid-row:auto;
    aspect-ratio:auto;
    padding:32px;
    min-height:240px;
  }
}
/* Mobile (max 767): 1 col, wszystko stack — bez aspect-ratio (też za duże kwadraty) */
@media (max-width:767px){
  .team-roles{
    grid-template-columns:1fr;
    gap:16px;
  }
  .team-role{
    aspect-ratio:auto;
    min-height:auto;
    padding:24px;
    gap:20px;
  }
  .team-role--primary{
    grid-column:auto;
    grid-row:auto;
    padding:28px;
    gap:24px;
  }
  .team-role--primary .team-role__name{
    font-size:1.375rem;
  }
}

/* ===== SECTION 02: APLIKACJA DESKTOPOWA (cyan TR) ===== */
/* Add violet TR + cyan TL accent variations needed for new sections */
:root[data-theme="dark"] .section--depth[data-accent="violet"][data-pos="top-right"]::before{background-image:radial-gradient(700px circle at 90% 10%,rgba(192,126,255,.08),transparent 60%)}

/* Section visual block — shared by sections 02 and 03 */


/* Spotlight aura — efekt D dla sekcji 02 (museum/showroom feeling).
   Subtelny radialny gradient za mockupem kieruje uwagę na produkt.
   Dyskretny, nie konkuruje z mockupem ani z section ambient glow. */



.section-visual .device-screen{margin:0 auto}

/* PRODUCT GRID (sekcja 03) — 4 kolumny × 3 wiersze placeholderów z parallax scroll.
   Każda kolumna ma własny base offset (eleganckie asymetryczne starty) +
   JS aplikuje translateY w trakcie scroll-a (różne tempa per kolumna).
   Mobile/tablet portrait: tylko 2 kolumny (col 0 + col 1), pozostałe hidden. */
.product-grid{
  display:flex;
  gap:24px;
  margin:0;
  /* overflow:visible — kolumny mogą wychodzić poza grid w trakcie parallax */
}
.product-column{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:24px;
  will-change:transform;
  /* Eleganckie asymetryczne base offsety (proporcje z Frame.io / 3, czyli subtelniej) */
}
/* Base offsety (po korekcie):
     col 2 (Kolumna 3) = -56 (referencja, najwyżej)
     col 1 (Kolumna 2) = -28
     col 3 (Kolumna 4) = -38
     col 0 (Kolumna 1) = -26 (tylko 12px niżej niż Kol 4) */
.product-column[data-col="0"]{ transform:translateY(-26px) }
.product-column[data-col="1"]{ transform:translateY(-28px) }
.product-column[data-col="2"]{ transform:translateY(-56px) }
.product-column[data-col="3"]{ transform:translateY(-38px) }

.product-tile{
  aspect-ratio:688 / 1004;
  border-radius:14px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border-subtle);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .25s ease;
  position:relative;
  overflow:hidden;
}
.product-tile:hover{
  border-color:var(--border-default);
}
.product-tile__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  pointer-events:none;
}
.product-tile--with-img .product-tile__num{display:none}
.product-tile__num{
  font-size:.875rem;
  font-weight:200;
  letter-spacing:.08em;
  color:var(--text-tertiary);
  font-feature-settings:'tnum';
}
/* Entry animation — 12 placeholderów wjeżdżają z dołu, stagger per row.
   Each row delay 150ms (3 rows = top→bottom progression). */
@keyframes product-tile-entry {
  from { opacity: 0; transform: translateY(22px) }
  to   { opacity: 1; transform: translateY(0) }
}
.product-grid[data-animate="entry"] .product-tile{ opacity: 0 }
.product-grid[data-animate="entry"] .product-tile.is-visible{
  animation: product-tile-entry .85s cubic-bezier(.16,1,.3,1) forwards;
}
/* nth-child within .product-column → 1st tile in each col = row 1, 2nd = row 2, 3rd = row 3 */
.product-grid[data-animate="entry"] .product-tile.is-visible:nth-child(1){ animation-delay: 0ms }
.product-grid[data-animate="entry"] .product-tile.is-visible:nth-child(2){ animation-delay: 150ms }
.product-grid[data-animate="entry"] .product-tile.is-visible:nth-child(3){ animation-delay: 300ms }
@media (prefers-reduced-motion: reduce){
  .product-grid[data-animate="entry"] .product-tile{ opacity: 1 }
  .product-grid[data-animate="entry"] .product-tile.is-visible{ animation: none }
}

/* === ENTRY ANIMATIONS — sekcje 04, 05, 10, 11 ===
   Identyczna mechanika jak bento (sekcja 01) i product-grid (sekcja 03):
   item-level @keyframes + IntersectionObserver dodaje .is-visible. */

/* Sekcja 04 — kompatybilność: 12 cards, stagger 50ms cascade */
@keyframes compat-card-entry {
  from { opacity: 0; transform: translateY(20px) }
  to   { opacity: 1; transform: translateY(0) }
}
.compat-grid[data-animate="entry"] .compat-card{ opacity: 0 }
.compat-grid[data-animate="entry"] .compat-card.is-visible{
  animation: compat-card-entry .8s cubic-bezier(.16,1,.3,1) forwards;
}
.compat-grid[data-animate="entry"] .compat-card.is-visible:nth-child(1){ animation-delay: 0ms }
.compat-grid[data-animate="entry"] .compat-card.is-visible:nth-child(2){ animation-delay: 50ms }
.compat-grid[data-animate="entry"] .compat-card.is-visible:nth-child(3){ animation-delay: 100ms }
.compat-grid[data-animate="entry"] .compat-card.is-visible:nth-child(4){ animation-delay: 150ms }
.compat-grid[data-animate="entry"] .compat-card.is-visible:nth-child(5){ animation-delay: 200ms }
.compat-grid[data-animate="entry"] .compat-card.is-visible:nth-child(6){ animation-delay: 250ms }
.compat-grid[data-animate="entry"] .compat-card.is-visible:nth-child(7){ animation-delay: 300ms }
.compat-grid[data-animate="entry"] .compat-card.is-visible:nth-child(8){ animation-delay: 350ms }
.compat-grid[data-animate="entry"] .compat-card.is-visible:nth-child(9){ animation-delay: 400ms }
.compat-grid[data-animate="entry"] .compat-card.is-visible:nth-child(10){ animation-delay: 450ms }
.compat-grid[data-animate="entry"] .compat-card.is-visible:nth-child(11){ animation-delay: 500ms }
.compat-grid[data-animate="entry"] .compat-card.is-visible:nth-child(12){ animation-delay: 550ms }

/* Sekcja 05 — workflow: 9 steps chronologicznie, stagger 100ms */
@keyframes workflow-step-entry {
  from { opacity: 0; transform: translateY(20px) }
  to   { opacity: 1; transform: translateY(0) }
}
.workflow-flow[data-animate="entry"] .workflow-step{ opacity: 0 }
.workflow-flow[data-animate="entry"] .workflow-step.is-visible{
  animation: workflow-step-entry .85s cubic-bezier(.16,1,.3,1) forwards;
}
.workflow-flow[data-animate="entry"] .workflow-step.is-visible:nth-child(1){ animation-delay: 0ms }
.workflow-flow[data-animate="entry"] .workflow-step.is-visible:nth-child(2){ animation-delay: 100ms }
.workflow-flow[data-animate="entry"] .workflow-step.is-visible:nth-child(3){ animation-delay: 200ms }
.workflow-flow[data-animate="entry"] .workflow-step.is-visible:nth-child(4){ animation-delay: 300ms }
.workflow-flow[data-animate="entry"] .workflow-step.is-visible:nth-child(5){ animation-delay: 400ms }
.workflow-flow[data-animate="entry"] .workflow-step.is-visible:nth-child(6){ animation-delay: 500ms }
.workflow-flow[data-animate="entry"] .workflow-step.is-visible:nth-child(7){ animation-delay: 600ms }
.workflow-flow[data-animate="entry"] .workflow-step.is-visible:nth-child(8){ animation-delay: 700ms }
.workflow-flow[data-animate="entry"] .workflow-step.is-visible:nth-child(9){ animation-delay: 800ms }

/* Sekcja 10 — partnerzy: 30 cards (5 cols × 6 rows), stagger 30ms cascade */
@keyframes partner-card-entry {
  from { opacity: 0; transform: translateY(16px) }
  to   { opacity: 1; transform: translateY(0) }
}
.partner-grid[data-animate="entry"] .partner-card{ opacity: 0 }
.partner-grid[data-animate="entry"] .partner-card.is-visible{
  animation: partner-card-entry .7s cubic-bezier(.16,1,.3,1) forwards;
}
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(1){ animation-delay: 0ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(2){ animation-delay: 30ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(3){ animation-delay: 60ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(4){ animation-delay: 90ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(5){ animation-delay: 120ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(6){ animation-delay: 150ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(7){ animation-delay: 180ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(8){ animation-delay: 210ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(9){ animation-delay: 240ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(10){ animation-delay: 270ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(11){ animation-delay: 300ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(12){ animation-delay: 330ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(13){ animation-delay: 360ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(14){ animation-delay: 390ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(15){ animation-delay: 420ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(16){ animation-delay: 450ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(17){ animation-delay: 480ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(18){ animation-delay: 510ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(19){ animation-delay: 540ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(20){ animation-delay: 570ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(21){ animation-delay: 600ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(22){ animation-delay: 630ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(23){ animation-delay: 660ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(24){ animation-delay: 690ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(25){ animation-delay: 720ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(26){ animation-delay: 750ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(27){ animation-delay: 780ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(28){ animation-delay: 810ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(29){ animation-delay: 840ms }
.partner-grid[data-animate="entry"] .partner-card.is-visible:nth-child(30){ animation-delay: 870ms }

/* Sekcja 11 — final CTA: 2 elements stagger 200ms */
@keyframes final-cta-entry {
  from { opacity: 0; transform: translateY(20px) }
  to   { opacity: 1; transform: translateY(0) }
}
[data-animate="entry"] > .final-cta-action,
[data-animate="entry"] > .final-cta-secondary{ opacity: 0 }
[data-animate="entry"] > .final-cta-action.is-visible,
[data-animate="entry"] > .final-cta-secondary.is-visible{
  animation: final-cta-entry .9s cubic-bezier(.16,1,.3,1) forwards;
}
[data-animate="entry"] > .final-cta-action.is-visible{ animation-delay: 0ms }
[data-animate="entry"] > .final-cta-secondary.is-visible{ animation-delay: 200ms }

/* Sekcja 06 — problem-stats: 3 cards, stagger 120ms.
   Niezależne od count-up animation (composable: entry animuje wrapper, count-up text). */
@keyframes problem-stat-entry {
  from { opacity: 0; transform: translateY(22px) }
  to   { opacity: 1; transform: translateY(0) }
}
.problem-stats[data-animate="entry"] .problem-stat{ opacity: 0 }
.problem-stats[data-animate="entry"] .problem-stat.is-visible{
  animation: problem-stat-entry .85s cubic-bezier(.16,1,.3,1) forwards;
}
.problem-stats[data-animate="entry"] .problem-stat.is-visible:nth-child(1){ animation-delay: 0ms }
.problem-stats[data-animate="entry"] .problem-stat.is-visible:nth-child(2){ animation-delay: 120ms }
.problem-stats[data-animate="entry"] .problem-stat.is-visible:nth-child(3){ animation-delay: 240ms }

@media (prefers-reduced-motion: reduce){
  .compat-grid[data-animate="entry"] .compat-card,
  .workflow-flow[data-animate="entry"] .workflow-step,
  .partner-grid[data-animate="entry"] .partner-card,
  .problem-stats[data-animate="entry"] .problem-stat,
  [data-animate="entry"] > .final-cta-action,
  [data-animate="entry"] > .final-cta-secondary{ opacity: 1 }
  .compat-grid[data-animate="entry"] .compat-card.is-visible,
  .workflow-flow[data-animate="entry"] .workflow-step.is-visible,
  .partner-grid[data-animate="entry"] .partner-card.is-visible,
  .problem-stats[data-animate="entry"] .problem-stat.is-visible,
  [data-animate="entry"] > .final-cta-action.is-visible,
  [data-animate="entry"] > .final-cta-secondary.is-visible{ animation: none }
}

/* Mobile + tablet portrait: 2 kolumny (col 0 + col 1) × 3 rows = 6 placeholderów.
   Kolumny 2 + 3 ukryte. Parallax wciąż aktywny na widocznych. */
@media (max-width:1023px), (orientation:portrait) and (max-width:1023px){
  .product-grid{ gap:16px; margin:0; }
  .product-column[data-col="2"],
  .product-column[data-col="3"]{
    display:none;
  }
  /* Mobile base offsety (proporcjonalnie do mniejszej skali, 2 widoczne kolumny) */
  .product-column[data-col="0"]{ transform:translateY(45px) }
  .product-column[data-col="1"]{ transform:translateY(-30px) }
}

/* Reduced motion preference — disable parallax */
@media (prefers-reduced-motion: reduce){
  .product-column{
    transform:none !important;
  }
}

/* Three pillars cards (section 02) */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto;padding:0 24px}
.pillar{display:flex;flex-direction:column;padding:32px 28px;background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.015) 100%);border:1px solid rgba(255,255,255,.06);border-radius:18px;transition:border-color .3s ease,background .3s ease}
.pillar:hover{border-color:rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 100%)}

.pillar__icon svg{width:20px;height:20px;stroke-width:1.5}
.pillar__title{font-size:1.125rem;font-weight:400;letter-spacing:-.012em;color:var(--text-primary);margin:0 0 12px;line-height:1.3}
.pillar__desc{font-size:.875rem;font-weight:300;line-height:1.55;color:var(--text-tertiary);margin:0;letter-spacing:.005em}

/* === SECTION 08 OVERRIDES — photo background + content bottom-right ===
   Layout zainspirowany Frame.io enterprise hero — duża sekcja z zdjęciem w tle,
   content block (eyebrow + H2 + 3 pillars) zakotwiczony w prawym dolnym rogu.
   Pillars bez ikon i bez ramek (photo niesie ciężar wizualny — cards byłyby noisy). */
#trzy-filary{
  /* Photo background — dark overlay gradient + zdjęcie.
     Responsywne tło: 768w (mobile/tablet), 1280w (desktop), 1920w (large desktop).
     Górny gradient subtelny, dolny mocno przyciemniony żeby tekst był czytelny. */
  background-color:#0a0a14;
  background-image:
    linear-gradient(180deg, rgba(0,0,8,.30) 0%, rgba(0,0,8,.55) 45%, rgba(0,0,8,.92) 100%),
    url('assets/section-08-bg-768.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  min-height:90vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:160px 0 96px;
}
@media (min-width:769px){
  #trzy-filary{
    background-image:
      linear-gradient(180deg, rgba(0,0,8,.30) 0%, rgba(0,0,8,.55) 45%, rgba(0,0,8,.92) 100%),
      url('assets/section-08-bg-1280.webp');
  }
}
@media (min-width:1281px){
  #trzy-filary{
    background-image:
      linear-gradient(180deg, rgba(0,0,8,.30) 0%, rgba(0,0,8,.55) 45%, rgba(0,0,8,.92) 100%),
      url('assets/section-08-bg-1920.webp');
  }
}
@media (min-width:1921px){
  #trzy-filary{
    background-image:
      linear-gradient(180deg, rgba(0,0,8,.30) 0%, rgba(0,0,8,.55) 45%, rgba(0,0,8,.92) 100%),
      url('assets/section-08-bg.webp');
  }
}
/* Container — push content block to LEFT (Apple-feel: wszystkie elementy
   wyrównane do wspólnej lewej krawędzi — eyebrow, H2, pierwsza kolumna pillars). */
#trzy-filary .container{
  display:flex;
  justify-content:flex-start;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 32px;
}
/* Right-anchored block — title + grid stacked */
#trzy-filary .three-pillars__content{
  width:100%;
  max-width:960px; /* ~75% kontenera, content jak w referencji */
}
/* Title block — text left-aligned for natural reading (block as a whole sits left).
   IMPORTANT: padding:0 wymaga override default `.section-app__header { padding:0 24px }`
   — bez tego eyebrow/H2 są 24px wcięte w prawo względem pillars. */
#trzy-filary .three-pillars__header{
  text-align:left;
  margin-bottom:56px;
  max-width:none;
  margin-left:0;
  margin-right:0;
  padding:0;
}
/* Optical left-edge alignment — Inter @ weight 200 ma wyraźny side-bearing
   na pierwszej literze (T, J). Mała negatywna margin-left wyrównuje wizualnie
   pionowy stem "T" z eyebrow's "0" cyfrą. */
#trzy-filary .three-pillars__header h2{
  margin-left:-.04em;
}
/* 3-column grid — strip card box, no padding, no border */
#trzy-filary .three-pillars__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
  max-width:none;
  padding:0;
  margin:0;
}
#trzy-filary .three-pillars__item{
  background:none;
  border:none;
  border-radius:0;
  padding:0;
  display:flex;
  flex-direction:column;
}
#trzy-filary .three-pillars__item:hover{
  background:none;
  border:none;
}
#trzy-filary .pillar__title{
  font-size:1rem;
  font-weight:500;
  letter-spacing:-.005em;
  margin:0 0 12px;
  color:var(--text-primary);
}
#trzy-filary .pillar__desc{
  font-size:.875rem;
  font-weight:300;
  line-height:1.55;
  color:var(--text-secondary);
  letter-spacing:.005em;
}
/* Tablet — 2 kolumny + 3rd na pełną szerokość, content block trochę węższy */
@media (max-width:1023px){
  #trzy-filary{
    min-height:80vh;
    padding:120px 0 72px;
  }
  #trzy-filary .three-pillars__content{
    max-width:720px;
  }
  #trzy-filary .three-pillars__grid{
    grid-template-columns:repeat(2, 1fr);
    gap:32px;
  }
  #trzy-filary .three-pillars__item:nth-child(3){
    grid-column:1 / 3;
    max-width:50%;
  }
  #trzy-filary .three-pillars__header{
    margin-bottom:40px;
  }
}
/* Mobile — content full width (no point pushing right on small screens), 1 column */
@media (max-width:767px){
  #trzy-filary{
    min-height:70vh;
    padding:96px 0 56px;
  }
  #trzy-filary .container{
    justify-content:stretch;
    padding:0 20px;
  }
  #trzy-filary .three-pillars__content{
    max-width:none;
  }
  #trzy-filary .three-pillars__grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  #trzy-filary .three-pillars__item:nth-child(3){
    grid-column:auto;
    max-width:none;
  }
  #trzy-filary .three-pillars__header{
    margin-bottom:32px;
  }
}

/* Desktop only — wspólna ramka pill dla 3 filarów, identyczna wizualnie z nav dock.
   Tablet/mobile zostają bez ramki (current state) — pill nie pasuje do
   2-col z 3rd-fullwidth ani do 1-col stack na mobile. */
@media (min-width:1024px){
  #trzy-filary .three-pillars__grid{
    background:rgba(8,8,12,.88);
    backdrop-filter:blur(20px) saturate(1.2);
    -webkit-backdrop-filter:blur(20px) saturate(1.2);
    border:1px solid var(--border-subtle);
    border-radius:18px;
    box-shadow:var(--shadow-card);
    padding:32px 48px;
    gap:0;
  }
  #trzy-filary .three-pillars__item{
    padding:0 28px;
    border-right:1px solid var(--border-subtle);
  }
  #trzy-filary .three-pillars__item:first-child{
    padding-left:0;
  }
  #trzy-filary .three-pillars__item:last-child{
    padding-right:0;
    border-right:none;
  }
}

/* Sekcja 07 — role-network: 5 awatarów na pentagonie + interaktywny detail panel.
   Cała kompozycja zamknięta w białej karcie (jak compat-card w sekcji 04).
   Animacja listy z grid-template-rows trick — natural height bez "skoku" max-height. */
.role-network{
  display:grid;
  grid-template-columns:minmax(0,520px) 1fr;
  gap:64px;
  align-items:center;
  max-width:1180px;
  margin:0 auto;
  padding:64px 56px 24px;
  background:#FFFFFF;
  border:1px solid var(--border-subtle);
  border-radius:20px;
  box-shadow:var(--shadow-card);
}

/* Sekcja 07 ma własny szerszy container (1228 = 1180 karta + 48 padding), żeby karta dostała pełną szerokość mockupu hero. Header pozostaje wąski przez własny max-width. */
#platforma-www-mobile > .container,
#kalkulator > .container{max-width:1228px}
.role-network__diagram{
  position:relative;
  width:100%;
  max-width:520px;
  aspect-ratio:1;
  margin:0 auto;
  align-self:center;
}
.role-network__svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  overflow:visible;
}
/* Line group — kontener dla base + pulse, kontroluje overall opacity */
.role-network__line{
  opacity:0;
  transition:opacity 400ms ease;
}
/* Base — subtle szara hairline (var(--bg-surface-1) = #F5F5F7 = tło sekcji 07).
   Na białej karcie ledwo widoczna, jako structural element */
.role-network__line__base{
  stroke:var(--bg-surface-1);
  stroke-width:20;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  fill:none;
  opacity:1;
}
/* Pulse — strumień dyskretnych kropek z delikatnym pink glow.
   stroke-dasharray "0 12" w real SVG units = uniform 12u spacing między kropkami.
   Liczba kropek skaluje się z długością linii (krótkie 1, długie 3-4) — odstęp stały.
   Animacja stroke-dashoffset 0 → -12 (one pattern shift) z linear timing.
   Tempo: ~10u/s — krótsze linie szybciej dochodzą end-to-end (naturalny "fizyczny" feel). */
.role-network__line__pulse{
  stroke:var(--accent-pink-text);
  stroke-width:3;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  fill:none;
  stroke-dasharray:0 12;
  filter:drop-shadow(0 0 6px var(--accent-pink-text));
  opacity:0;
}
.role-network__line.is-active{
  opacity:1;
}
.role-network__line.is-active .role-network__line__pulse{
  opacity:1;
  animation:role-network-line-pulse 1.2s linear infinite;
}
/* Direction reverse — flow od strony data-to do data-from gdy active jest data-to */
.role-network__line.is-active[data-flow-reverse="true"] .role-network__line__pulse{
  animation-direction:reverse;
}
@keyframes role-network-line-pulse{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-12}
}
/* Linie pojawiają się TYLKO w settled — w initial+sequencing nawet is-active jest hidden,
   żeby PR (single active w t=400ms-1000ms sequencingu) nie odsłaniał linii na chwilę */
.role-network[data-animation-state="initial"] .role-network__line,
.role-network[data-animation-state="sequencing"] .role-network__line{
  opacity:0;
}
@media (prefers-reduced-motion: reduce){
  .role-network__line.is-active .role-network__line__pulse{
    animation:none;
    opacity:0;
  }
}
.role-network__avatar{
  position:absolute;
  width:clamp(64px,11vw,88px);
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(1);
  border:1px solid var(--border-subtle);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.015) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:1;
  padding:0;
  font-family:inherit;
  transition:opacity 350ms ease,transform 400ms cubic-bezier(.16,1,.3,1);
}
.section--light .role-network__avatar{
  background:#FFF;
  box-shadow:var(--shadow-card);
}
/* Default state: tylko opacity differentiation, bez ramek/glow */
.role-network__avatar:not(.is-active){
  opacity:.35;
}
.role-network__avatar:not(.is-active):hover{
  opacity:.65;
}
.role-network__avatar.is-active{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.1);
  z-index:2;  /* aktywny nad innymi (powiększony nie powinien być przykryty) */
}
.role-network__avatar:focus-visible{
  outline:2px solid var(--accent-pink-text);
  outline-offset:4px;
}
/* Awatary niedostępne w initial/sequencing — animacja ma się odpalić sama */
.role-network[data-animation-state="initial"] .role-network__avatar,
.role-network[data-animation-state="sequencing"] .role-network__avatar{
  pointer-events:none;
}
/* Initial + sequencing — inactive awatary całkowicie niewidoczne (pojawiają się przez cykl).
   Tylko PR (with .is-active w HTML) widoczny od początku, reszta opacity 0 do swojej kolejki. */
.role-network[data-animation-state="initial"] .role-network__avatar:not(.is-active),
.role-network[data-animation-state="sequencing"] .role-network__avatar:not(.is-active){
  opacity:0;
}
.role-network__initials{
  font-size:.9375rem;
  font-weight:300;
  letter-spacing:.1em;
  color:var(--text-secondary);
  font-feature-settings:'tnum';
  transition:color 350ms ease;
}
.role-network__avatar.is-active .role-network__initials{
  color:var(--text-primary);
  font-weight:400;
}
/* Zdjęcie w awatarze sek. 07 — identyczna mechanika co team-role__avatar w sek. 01.
   Inicjały zostają jako fallback (ukrywane gdy img załadowany). */
.role-network__avatar-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  border-radius:13px;
  z-index:1;
}
/* Gdy zdjęcie obecne — inicjały chowamy (nadal są w DOM jako fallback) */
.role-network__avatar-img ~ .role-network__initials{
  opacity:0;
}

/* Detail container — align-self start + margin-top żeby top listy = top awatara PR.
   Reduced margin/gaps wewnątrz żeby bottom active-desc ≈ bottom awatara KL. */
.role-network__detail{
  align-self:start;
  margin-top:8px;
}

/* Lista — zawsze pełna, aktywna pozycja idzie na top + rozwija się jej opis */
.role-network__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:18px;
  opacity:1;
  pointer-events:auto;
}
.role-network__list-item{
  cursor:pointer;
  display:flex;
  gap:16px;
  align-items:center;
}
.role-network__list-item.is-active{
  cursor:default;
}
.role-network__list-avatar{
  width:44px;
  height:44px;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(0,0,8,.04) 0%,rgba(0,0,8,.015) 100%);
  border:1px solid rgba(0,0,8,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:border-color 400ms ease,background 400ms ease;
}
.role-network__list-item.is-active .role-network__list-avatar{
  border-color:rgba(0,0,8,.18);
  background:linear-gradient(135deg,rgba(0,0,8,.06) 0%,rgba(0,0,8,.025) 100%);
}
.role-network__list-avatar-initials{
  font-size:.6875rem;
  font-weight:300;
  letter-spacing:.08em;
  color:var(--text-tertiary);
  font-feature-settings:'tnum';
  transition:color 400ms ease;
}
/* Portrait obok inicjałów — wypełnia avatar 44x44, inicjały chowają się gdy img obecny.
   Ten sam wzorzec co .role-network__avatar-img w pentagonie po lewej. */
.role-network__list-avatar{position:relative;overflow:hidden}
.role-network__list-avatar-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  border-radius:inherit;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.role-network__list-avatar-img ~ .role-network__list-avatar-initials{opacity:0}
.role-network__list-item.is-active .role-network__list-avatar-initials{
  color:var(--text-primary);
}
.role-network__list-content{
  flex:1;
  min-width:0;
}
.role-network__list-title{
  font-size:1.625rem;
  font-weight:300;
  letter-spacing:-.022em;
  line-height:1.2;
  color:var(--text-tertiary);
  margin:0;
  transition:color 600ms cubic-bezier(.16,1,.3,1);
}
.role-network__list-item.is-active .role-network__list-title{
  color:var(--text-primary);
}
.role-network__list-item:not(.is-active):hover .role-network__list-title{
  color:var(--text-secondary);
}

/* Globalny opis pod listą — grid overlap pattern (wszystkie items w tej samej grid-cell, container rośnie do najwyższego) */
.role-network__active-desc{
  display:grid;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid rgba(0,0,8,.08);
  opacity:1;
  pointer-events:auto;
}
.role-network__active-desc-item{
  grid-area:1 / 1;
  font-size:1rem;
  font-weight:300;
  line-height:1.6;
  color:var(--text-secondary);
  margin:0;
  letter-spacing:.005em;
  max-width:48ch;
  opacity:0;
  transition:opacity 400ms cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.role-network__active-desc-item.is-active{
  opacity:1;
  pointer-events:auto;
}

@media (max-width:1024px){
  .role-network{
    grid-template-columns:1fr;
    gap:48px;
    padding:48px 40px;
  }
  .role-network__diagram{max-width:440px}
  .role-network__detail{text-align:center;margin-top:0}
  .role-network__active-desc-item{margin-left:auto;margin-right:auto;text-align:left}
}
@media (max-width:768px){
  .role-network{
    padding:32px 24px;
    border-radius:16px;
  }
  .role-network__diagram{max-width:360px}
  .role-network__list-title{font-size:1.375rem}
  .role-network__active-desc-item{font-size:.9375rem}
}

/* === GALLERY SLIDER (sekcja 02) — Apple-style horizontal scroll ===
   Inspirowany sekcją Apple visionOS Spatial Content.
   3 karty z caption (h3 + p) NAD tile-em z mockupem.
   Full-bleed track (poza container max-width), scroll-snap, peek effect
   (następna karta wystaje po prawej, sygnalizując więcej do scrollowania).
*/

/* GALLERY SLIDER — CSS translateX mechanism (NIE scroll-based).
   Slider container ma overflow:hidden + jest full-bleed (100vw poza container).
   Track jest flex z transform:translateX kontrolowanym przez JS.
   Bez scroll-snap, bez overflow-x:auto — browser nie ma jak nigdzie auto-przeskoczyć.
   Initial state ZAWSZE: translateX(0) = karta 1 aligned z left padding. */

.gallery-slider{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  position:relative;
  margin-top:0;
  overflow:hidden;
}

/* Track — flex container z transform-based translation */
.gallery-track{
  display:flex;
  gap:24px;
  /* Default padding (mobile / wąski viewport) */
  padding-top:4px;
  padding-bottom:4px;
  padding-left:24px;
  padding-right:0;
  /* Smooth slide animation */
  transition:transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change:transform;
  /* Drag UX: pan-y (vertical scroll OK), brak text selection */
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}

/* Desktop: padding-left aligned z container content left edge (sekcja 01).
   Aktywujemy gdy viewport >= 1148px. */
@media (min-width:1148px){
  .gallery-track{
    padding-left:calc(50vw - 526px);
  }
}

/* Pojedyncza karta — bez scroll-snap, bez special last-child rules */
.gallery-card{
  flex:0 0 auto;
  width:min(78vw,621px);
  display:flex;
  flex-direction:column;
}

/* Caption (h3 + p) — POD tile-em */
.gallery-card__caption{margin-top:32px;max-width:92%}
.gallery-card__title{
  font-size:clamp(1.25rem,2vw,1.625rem);
  font-weight:300;
  letter-spacing:-.02em;
  color:var(--text-primary);
  margin:0 0 12px;
  line-height:1.25
}
.gallery-card__desc{
  font-size:.9375rem;
  font-weight:300;
  line-height:1.55;
  color:var(--text-secondary);
  margin:0;
  letter-spacing:.005em
}

/* Tile — placeholder mockup z subtelnym tłem + hairline border.
   Aspect-ratio 1440/939 — typowy desktop monitor / MacBook UI mockup.
   Karta max-width 621 → tile 621×405. */
.gallery-card__tile{
  width:100%;
  aspect-ratio:1440 / 939;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.015) 100%);
  border:1px solid rgba(255,255,255,.06);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.gallery-tile-placeholder strong{
  display:block;
  font-size:.875rem;
  font-weight:400;
  color:var(--text-tertiary);
  margin-bottom:8px;
  letter-spacing:.005em
}
.gallery-tile-placeholder em{
  font-style:normal;
  display:block;
  font-size:.8125rem;
  color:var(--text-tertiary);
  line-height:1.55;
  opacity:.8
}

/* Light theme */
.section--light .gallery-card__tile{
  background:linear-gradient(135deg,rgba(0,0,8,.025) 0%,rgba(0,0,8,.01) 100%);
  border-color:rgba(0,0,8,.08)
}

/* Navigation (strzałki prev/next) — aligned z container content right edge */
.gallery-nav{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:32px;
  margin-left:24px;
  margin-right:24px;
}
@media (min-width:1148px){
  .gallery-nav{
    margin-left:calc(50vw - 526px);
    margin-right:calc(50vw - 526px);
  }
}
.gallery-nav__btn{
  width:44px;
  height:44px;
  border-radius:9999px;
  background:var(--bg-glass-04);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border-subtle);
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:opacity .25s ease,border-color .25s ease;
  flex-shrink:0;
  padding:0;
  font-family:inherit;
}
.gallery-nav__btn:hover:not(:disabled){border-color:var(--border-default)}
.gallery-nav__btn:disabled{opacity:.35;cursor:default}
.gallery-nav__btn svg{width:18px;height:18px;stroke-width:1.5}

/* Mobile + tablet portrait: NIE robimy slidera, tylko stack pionowy.
   Karty są jedna pod drugą, full-width, bez transformacji, bez strzałek. */
@media (max-width:767px), (orientation:portrait) and (max-width:1023px){
  .gallery-slider{
    margin-top:48px;
    overflow:visible;        /* nie clipuj — karty są w naturalnym flow */
  }
  .gallery-track{
    flex-direction:column;
    gap:48px;
    padding:0 24px;          /* aligned z container content */
    transform:none !important; /* override inline transform z JS */
    transition:none;
    will-change:auto;
  }
  .gallery-card{
    width:100%;              /* full width, nie 88vw */
  }
  .gallery-card__caption{
    margin-top:24px;
    max-width:100%;
  }
  .gallery-nav{
    display:none;            /* ukryj strzałki — nawigacja niepotrzebna */
  }
}

/* Section 03: data categories grid */

/* Section 05: compatibility grid — 12 program logo placeholder cards */
.compat-grid{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;max-width:1100px;padding:0 24px}
.compat-card{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;background:#FFFFFF;border:1px solid var(--border-subtle);border-radius:12px;transition:border-color .25s ease,transform .25s ease;box-shadow:var(--shadow-card)}
.compat-card:hover{border-color:var(--border-default)}
.compat-card__name{font-size:.9375rem;font-weight:400;letter-spacing:-.005em;color:var(--text-primary);text-align:center}

/* Section 06: workflow flow diagram — 9 horizontal steps with connecting line */
.workflow-flow{list-style:none;padding:0;margin:0 auto;max-width:1100px;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:48px 32px;position:relative;counter-reset:none}
.workflow-step{position:relative;padding-top:8px}
.workflow-step__num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--border-default);font-size:.8125rem;font-weight:400;letter-spacing:.04em;color:var(--text-primary);font-variant-numeric:tabular-nums;font-feature-settings:'tnum';margin-bottom:16px;background:var(--bg-base)}
.workflow-step__title{font-size:1rem;font-weight:400;letter-spacing:-.012em;color:var(--text-primary);margin:0 0 6px;line-height:1.3}
.workflow-step__desc{font-size:.875rem;font-weight:300;line-height:1.5;color:var(--text-tertiary);margin:0;letter-spacing:.005em}

/* Section 07: problem stats — 3 large numbers with attribution */
.problem-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;max-width:1100px;margin:0 auto 48px;padding:0 24px}
.problem-stat{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.problem-stat__value{font-size:clamp(3.5rem,7vw,5.5rem);font-weight:200;letter-spacing:-.04em;line-height:1;color:var(--accent-pink-text);font-variant-numeric:tabular-nums;font-feature-settings:'tnum';margin-bottom:20px}
.problem-stat__label{font-size:.9375rem;font-weight:300;line-height:1.55;color:var(--text-secondary);letter-spacing:.005em;max-width:32ch}
.problem-attribution{font-size:.8125rem;font-weight:300;color:var(--text-tertiary);text-align:center;letter-spacing:.02em;max-width:1100px;margin:0 auto;padding:0 24px;line-height:1.5}

/* Section 06: designer voice quote — loss aversion via personal frustration */




/* Section 09: curiosity gap — opens cognitive loop before calculator interaction */


/* Scroll-triggered reveal — Apple-style subtle fade + minimal translate.
   Applied to .section-app sections (NOT hero — has own animation).
   Initial state: opacity 0, translateY 8px. Reveal: opacity 1, translateY 0.
   Reduced motion: completely disabled by global @media rule above. */
.section-app .section-app__header,
.section-app .section-visual,
.section-app .pillars,
.section-app .compat-grid,
.section-app .workflow-flow,
.section-app .problem-stats,
.section-app .problem-attribution,
.section-app .designer-quote,
.section-app .calc-card,
.section-app .partner-grid,
.section-app .final-cta-action,
.section-app .final-cta-secondary{
  opacity:1;
  transform:translateY(0);
  transition:opacity 600ms cubic-bezier(.2,.8,.2,1),transform 600ms cubic-bezier(.2,.8,.2,1);
  /* will-change usunięte — żadna z tych sekcji nie animuje opacity/transform na is-revealed
     (mają już opacity:1 default). Pozostawienie hint'u tworzyło 12+ niepotrzebnych GPU
     compositing layers przy load (RAM + paint cost). */
}
.section-app.is-revealed .section-app__header,
.section-app.is-revealed .section-visual,
.section-app.is-revealed .pillars,
.section-app.is-revealed .compat-grid,
.section-app.is-revealed .workflow-flow,
.section-app.is-revealed .problem-stats,
.section-app.is-revealed .problem-attribution,
.section-app.is-revealed .designer-quote,
.section-app.is-revealed .calc-card,
.section-app.is-revealed .partner-grid,
.section-app.is-revealed .final-cta-action,
.section-app.is-revealed .final-cta-secondary{
  opacity:1;
  transform:translateY(0);
  will-change:auto
}
/* Stagger delays inside section — hierarchy reveals in order */

.section-app.is-revealed .pillars,
.section-app.is-revealed .compat-grid,
.section-app.is-revealed .workflow-flow,
.section-app.is-revealed .problem-stats,
.section-app.is-revealed .calc-card,
.section-app.is-revealed .partner-grid,
.section-app.is-revealed .final-cta-action{transition-delay:160ms}
.section-app.is-revealed .designer-quote,
.section-app.is-revealed .problem-attribution,
.section-app.is-revealed .final-cta-secondary{transition-delay:240ms}

/* === FOCUS-PULL ANIMATION (Frame.io pattern) === 
   Subtle blur-to-focus reveal for big stat numbers.
   Like a camera focus pull — number rezolwuje się z rozmazania w ostry obraz.
   Stosowane SELEKTYWNIE tylko dla peak value numbers w sek. 06 (statyczne).
   Sek. 09 (kalkulator) nie ma focus-pull bo liczby są dynamiczne — count-up animation
   z JS odpalał się równocześnie z focus-pull i widać było "zacinanie". */
.problem-stat__value{
  opacity:0;
  transform:translateY(20px);
  filter:blur(8px);
  transition:opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1),
             transform 1000ms cubic-bezier(0.16, 1, 0.3, 1),
             filter 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change:opacity, transform, filter;
}
.section-app.is-revealed .problem-stat__value{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
  will-change:auto;
}
/* Stagger: stat numbers reveal trochę później niż label (po containerze) */
.section-app.is-revealed .problem-stat__value{transition-delay:280ms}
/* Drugi i trzeci stat w problem-stats — kaskadowy reveal */
.section-app.is-revealed .problem-stat:nth-child(2) .problem-stat__value{transition-delay:380ms}
.section-app.is-revealed .problem-stat:nth-child(3) .problem-stat__value{transition-delay:480ms}

/* Section 12: stat unit (e.g. "16 mld EUR" — small unit next to big number) */


/* Section 11: quiet final CTA — single primary action + secondary text-links */
.section-app__header--centered{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:80px}
.section-app__header--centered .eyebrow-app,
.section-app__header--centered h2{justify-content:center}

/* Primary action — designers (70% audience) */
.final-cta-action{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:560px;margin:0 auto 64px;padding:0 24px}
.final-cta-action__btn{padding:14px 36px;font-size:1rem}
.final-cta-action__note{font-size:.875rem;font-weight:300;color:var(--text-tertiary);line-height:1.5;letter-spacing:.005em;margin:20px 0 0;max-width:38ch}

/* Secondary paths — manufacturers + investors (text-links, equal weight) */
.final-cta-secondary{max-width:680px;margin:0 auto;padding:32px 24px 0;border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:14px;text-align:center}
.final-cta-secondary__text{font-size:.9375rem;font-weight:300;color:var(--text-secondary);letter-spacing:.005em;line-height:1.5;margin:0}
.final-cta-secondary__text > span{margin-right:6px}
.final-cta-secondary .text-link{font-weight:400;color:var(--text-primary);position:relative;border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity .2s ease}
.final-cta-secondary .text-link:hover{opacity:.7}

/* Section 08: dual mockup layout — desktop + mobile side by side */




/* Section 10: savings calculator — interactive PEAK 3 */
.calc-card{max-width:1180px;margin:0 auto 32px;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.calc-inputs{display:flex;flex-direction:column;gap:32px}
.calc-input-group{display:flex;flex-direction:column;gap:12px}
.calc-input-label{display:flex;justify-content:space-between;align-items:baseline;font-size:.875rem;font-weight:300;color:var(--text-secondary);letter-spacing:.005em;line-height:1.3}
.calc-input-value{font-size:1.0625rem;font-weight:400;color:var(--text-primary);letter-spacing:-.01em;font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.calc-input-meta{display:flex;justify-content:space-between;font-size:.75rem;font-weight:300;color:var(--text-tertiary);letter-spacing:.02em;font-variant-numeric:tabular-nums;font-feature-settings:'tnum';margin-top:-4px}

/* Custom slider — dark theme, hairline track, pink filled progress */
.calc-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:rgba(255,255,255,.08);border-radius:9999px;outline:none;cursor:pointer;border:none;padding:0;margin:8px 0;background-image:linear-gradient(to right,var(--accent-pink) 0%,var(--accent-pink) var(--progress,30%),rgba(255,255,255,.08) var(--progress,30%),rgba(255,255,255,.08) 100%)}
.calc-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-5px;background:#FFFFFF;border-radius:50%;cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.1);transition:transform .15s ease;border:none}
.calc-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}
.calc-slider::-webkit-slider-runnable-track{width:100%;height:4px;background:transparent;border:none;border-radius:9999px}
.calc-slider::-moz-range-thumb{width:14px;height:14px;background:#FFFFFF;border-radius:50%;cursor:grab;border:none;box-shadow:0 1px 3px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.1);transition:transform .15s ease}
.calc-slider::-moz-range-thumb:active{cursor:grabbing;transform:scale(1.15)}
.calc-slider::-moz-range-track{width:100%;height:4px;background:transparent;border:none;border-radius:9999px}
.calc-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(255,10,120,.3),0 1px 3px rgba(0,0,0,.4)}
.calc-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(255,10,120,.3),0 1px 3px rgba(0,0,0,.4)}

/* Results column — large display numbers */
.calc-results{display:flex;flex-direction:column;gap:32px;padding:36px 32px;background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.015) 100%);border:1px solid rgba(255,255,255,.06);border-radius:18px;transition:border-color .3s ease,background .3s ease}
.calc-results:hover{border-color:rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 100%)}
.calc-result__label{font-size:.8125rem;font-weight:300;color:var(--text-tertiary);letter-spacing:.04em;margin-bottom:10px;line-height:1.3}
.calc-result__value{font-size:clamp(3rem,6vw,4.5rem);font-weight:200;letter-spacing:-.04em;line-height:1;color:var(--text-primary);font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.calc-result--money .calc-result__value{color:var(--accent-pink-text)}
.calc-result-bonus{font-size:.875rem;font-weight:300;color:var(--text-tertiary);line-height:1.5;letter-spacing:.005em;padding-top:24px;border-top:1px solid var(--border-subtle);margin-top:8px}
.calc-result-bonus strong{color:var(--text-primary);font-weight:400;font-variant-numeric:tabular-nums;font-feature-settings:'tnum';margin:0 4px}
.calc-result-bonus #calc-bonus-unit{margin-right:4px}

/* Section 11: partner network — 26 manufacturer cards + 4 "coming soon" placeholders (luxury showroom) */
.partner-grid{list-style:none;padding:0 24px;margin:0 auto;max-width:1180px;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.partner-card{aspect-ratio:224/115;display:flex;align-items:center;justify-content:center;background:#FFFFFF;border:1px solid rgba(255,255,255,.08);border-radius:10px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .25s ease;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 1px 2px rgba(0,0,0,.4),0 8px 16px rgba(0,0,0,.25);position:relative;overflow:hidden}
.partner-card__logo{position:absolute;inset:0;width:100%;height:100%;padding:14px 20px;object-fit:contain;box-sizing:border-box;z-index:1;pointer-events:none}
.partner-card--with-logo .partner-card__name{display:none}
.partner-card:hover{box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 2px 4px rgba(0,0,0,.5),0 16px 32px rgba(0,0,0,.35),0 0 40px rgba(192,126,255,.12)}
.partner-card__name{font-size:.875rem;font-weight:400;letter-spacing:-.005em;color:#000008;text-align:center;padding:0 12px}

/* Coming soon variant — transparent placeholder, dashed border, tertiary uppercase text */
.partner-card--coming{background:transparent;border:1px dashed rgba(255,255,255,.14);box-shadow:none}
.partner-card--coming:hover{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.22);box-shadow:none}
.partner-card--coming .partner-card__name{color:var(--text-tertiary);font-size:.6875rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase}

/* === Light theme overrides — sekcja 10 jest section--light, partner-card musi mieć ciemne ramki/cienie === */
.section--light .partner-card{
  background:#FFFFFF;
  border:1px solid rgba(0,0,8,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 1px 2px rgba(0,0,8,.04),0 8px 16px rgba(0,0,8,.06)
}
.section--light .partner-card:hover{
  border-color:rgba(0,0,8,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 2px 4px rgba(0,0,8,.06),0 16px 32px rgba(0,0,8,.1)
}
.section--light .partner-card--coming{background:transparent;border:1px dashed rgba(0,0,8,.14);box-shadow:none}
.section--light .partner-card--coming:hover{background:rgba(0,0,8,.02);border-color:rgba(0,0,8,.22);box-shadow:none}

/* Floating back-to-top button (right bottom) */
.back-to-top{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;background:rgba(8,8,12,.88);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);border:1px solid var(--border-subtle);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease,border-color .25s ease;z-index:997;box-shadow:var(--shadow-card);padding:0;font-family:inherit}
.back-to-top.is-visible{opacity:1;visibility:visible}
.back-to-top:hover{border-color:rgba(255,255,255,.24)}
.back-to-top svg{width:18px;height:18px;stroke-width:1.5}

/* Section--light overrides: cards, placeholders, device-screen — light theme variants
   Strategy C: --bg-base, --text-*, --border-* są już nadpisane na poziomie root
   (linia 102), ale komponenty z hardcoded rgba potrzebują dodatkowej obsługi. */
:root[data-theme="dark"] .section--light :root[data-theme="dark"] .section--light :root[data-theme="dark"] .section--light .device-screen{background:#FFFFFF;border:1px solid rgba(0,0,8,.08);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 1px 2px rgba(0,0,8,.04),0 8px 16px rgba(0,0,8,.06),0 32px 64px rgba(0,0,8,.06)}
:root[data-theme="dark"] .section--light .device-screen::before,
:root[data-theme="dark"] .section--light .device-screen::after{display:none}
:root[data-theme="dark"] .section--light .device-screen__inner{background:#F5F5F7;box-shadow:0 0 0 1px rgba(0,0,8,.06)}

:root[data-theme="dark"] .section--light .hero-placeholder strong{color:rgba(0,0,8,.7)}

@media (max-width:1024px){
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pillar:nth-child(3){grid-column:1 / 3;max-width:50%;margin:0 auto}
    .compat-grid{grid-template-columns:repeat(4,1fr);gap:14px}
  .workflow-flow{grid-template-columns:repeat(2,1fr);gap:40px 28px}
  .problem-stats{grid-template-columns:repeat(3,1fr);gap:32px}
  
  
  
  .calc-card{grid-template-columns:1fr;gap:64px;max-width:560px}
  .partner-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .partner-card--coming{display:none}
}
@media (max-width:768px){
  
  .pillars{grid-template-columns:1fr;gap:16px}
  .pillar:nth-child(3){grid-column:auto;max-width:none}
  .pillar{padding:24px 20px}
      .compat-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .workflow-flow{grid-template-columns:1fr;gap:32px}
  .problem-stats{grid-template-columns:1fr;gap:40px}
  .problem-stat{align-items:center;text-align:center}
  .problem-stat__label{max-width:none}
  
  .calc-results{padding:28px 24px}
  .calc-result__value{font-size:clamp(2.5rem,9vw,3.5rem)}
  .partner-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .back-to-top{right:16px;bottom:16px;width:44px;height:44px}
  .final-cta-action{margin-bottom:48px}
  .final-cta-action__btn{font-size:.9375rem;padding:12px 28px}
  .final-cta-secondary{padding-top:28px;gap:12px}
}
@media (max-width:480px){
  .compat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* SIMTU logo SVG fill rules — wcześniej inline w <symbol id="simtu-logo">. */
.simtu-logo-mark{fill:url(#simtu-logo-gradient)}
.simtu-logo-text{fill:currentColor}

/* ── Klasy migrowane z inline style="..." ───────────────────────────── */

/* SVG container with logo defs (wcześniej style="position:absolute;overflow:hidden") */
.simtu-svg-defs{position:absolute;overflow:hidden}

/* Statyczne zdjęcia w kartach slajdera — wypełniają .gallery-card__tile */
.gallery-card__img{width:100%;height:100%;object-fit:cover;display:block;border-radius:18px}

/* Role-network avatary — pozycje per data-role (wcześniej style="left:..;top:..") */
.role-network__avatar[data-role="pr"]{left:50%;top:10%}
.role-network__avatar[data-role="3d"]{left:88%;top:37.6%}
.role-network__avatar[data-role="kl"]{left:73.5%;top:82.4%}
.role-network__avatar[data-role="pd"]{left:26.5%;top:82.4%}
.role-network__avatar[data-role="pw"]{left:12%;top:37.6%}

/* Debug overflow panel (URL #debug) — wcześniej style.cssText + inline w template stringach */