/* =========================================================
   ZMIENNE I MOTYWY
   ========================================================= */

:root{
  --bg:#f6f6f3;
  --surface:#ffffff;
  --surface-2:#efefeb;
  --text:#0f1012;
  --muted:#6e7178;
  --line:#d9dad5;
  --accent:#4267ff;
  --green:#31c980;
  --black:#111214;
  --white:#ffffff;
  --footer:#0c0d0f;
  --shadow:0 20px 60px rgba(15,16,18,.09);
  --wrap:min(1180px,calc(100% - 40px));
}
html[data-theme="dark"]{
  --bg:#0c0d0f;
  --surface:#131416;
  --surface-2:#1b1c1f;
  --text:#f3f3f0;
  --muted:#9b9da3;
  --line:#2c2d30;
  --accent:#7c98ff;
  --black:#f3f3f0;
  --white:#111214;
  --footer:#050607;
  --shadow:0 24px 70px rgba(0,0,0,.35);
}
/* =========================================================
   RESET I ELEMENTY GLOBALNE
   ========================================================= */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Inter",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
body.modal-open{overflow:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}
button{cursor:pointer}
.wrap{width:var(--wrap);margin-inline:auto}

/* =========================================================
   HEADER / NAWIGACJA
   ========================================================= */

.header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
.nav-row{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center}
.brand img{width:174px;height:auto}
html[data-theme="dark"] .brand img{filter:invert(1) hue-rotate(180deg)}
.nav{display:flex;gap:28px;align-items:center}
.nav a{color:var(--muted);font-size:.9rem;font-weight:600;transition:.2s ease}
.nav a:hover,.nav a.active{color:var(--text)}
.nav-actions{display:flex;gap:10px}
.theme-toggle,.menu-toggle{width:44px;height:44px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:50%;display:grid;place-items:center;transition:.2s ease}
.theme-toggle:hover{transform:rotate(12deg)}
.menu-toggle{display:none}
.menu-toggle span{display:block;width:17px;height:2px;background:currentColor}
.menu-toggle span+span{margin-top:4px}

/* =========================================================
   PRZYCISKI
   ========================================================= */

.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 20px;border-radius:999px;font-weight:600;border:1px solid;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.button:hover{transform:translateY(-2px)}
.button-black{background:var(--black);color:var(--white);border-color:var(--black)}
.button-white{background:var(--surface);color:var(--text);border-color:var(--line)}
.button-white:hover{border-color:var(--text)}

/* =========================================================
   HERO
   ========================================================= */

.hero{overflow:visible}
.hero-grid{min-height:730px;display:grid;grid-template-columns:49% 51%;align-items:center;gap:18px}
.hero-copy{padding:52px 0 72px}
.terminal-line,.mono{font-family:"IBM Plex Mono",monospace}
.terminal-line{display:flex;gap:8px;margin-bottom:22px;font-size:.78rem;color:var(--muted)}
.terminal-line span,.mono{color:var(--accent)}
.hero h1{margin:0;max-width:720px;font:600 clamp(3rem,5vw,5rem)/.98 "Space Grotesk";letter-spacing:-.055em}
.lead{max-width:620px;margin:22px 0 0;color:var(--muted);font-size:1.08rem}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;color:var(--muted);font-size:.88rem}
.hero-meta a:hover{color:var(--text)}
.status-line{display:flex;align-items:center;gap:9px;margin-top:27px;color:var(--muted)}
.status-line i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 14%,transparent)}
.status-line code{font-family:"IBM Plex Mono";font-size:.76rem}
.hero-visual{position:relative;height:720px;display:flex;align-items:flex-end;justify-content:flex-end;overflow:visible}
.hero-visual img{width:min(158%,820px);max-width:none;height:auto;max-height:720px;object-fit:contain;object-position:center bottom;transform:translateX(14%);filter:saturate(.88) brightness(.95) contrast(.97) drop-shadow(0 28px 44px rgba(15,16,18,.10))}

/* =========================================================
   SEKCJE WSPÓLNE
   ========================================================= */

.section{padding:92px 0}
.section-intro{max-width:760px;margin-bottom:34px}
.section-intro h2{margin:8px 0 0;font:600 clamp(2rem,3.7vw,3.4rem)/1.03 "Space Grotesk";letter-spacing:-.045em}

/* =========================================================
   OFERTA / KOMPETENCJE
   ========================================================= */

.services{border-top:1px solid var(--line)}
.service-list{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.service{min-height:205px;padding:26px 22px 24px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.service:first-child{padding-left:0}
.service:last-child{border-right:0;padding-left:30px;padding-right:0}
.service-index{font:500 .74rem/1 "IBM Plex Mono";color:var(--accent)}
.service h3{font:600 1.18rem/1.15 "Space Grotesk";margin:32px 0 8px}
.service p{margin:0;color:var(--muted);font-size:.93rem}
.services-close{margin-top:16px}

/* =========================================================
   PROJEKTY / SLIDER
   ========================================================= */

.projects{
  padding:0;
  background:var(--bg);
}
.project-showcase{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  height:min(92vh,1040px);
  min-height:780px;
  overflow:hidden;
  background:#dfe4ea;
}
.project-slides,.project-slide{position:absolute;inset:0}
.project-slide{
  opacity:0;
  visibility:hidden;
  transition:opacity .85s ease, visibility .85s ease;
}
.project-slide.active{
  opacity:1;
  visibility:visible;
}
.project-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:brightness(1.02) saturate(.98) contrast(1.01);
  transform:scale(1.015);
  transition:transform 8s ease;
}
.project-slide.active img{transform:scale(1.045)}
.project-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(9,12,16,.28) 0%, rgba(9,12,16,.06) 40%, rgba(9,12,16,0) 72%),
    linear-gradient(0deg, rgba(9,12,16,.22) 0%, rgba(9,12,16,0) 34%);
  pointer-events:none;
}

.project-topbar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:5;
  padding:0;
}
.project-topbar::before{
  content:"";
  position:absolute;
  inset:0;
  height:142px;
  background:rgba(255,255,255,.52);
  border-bottom:1px solid rgba(255,255,255,.44);
}
html[data-theme="dark"] .project-topbar::before{
  background:rgba(10,11,13,.56);
  border-bottom-color:rgba(255,255,255,.08);
}
.project-topbar-inner{
  position:relative;
  z-index:1;
  width:min(1180px,calc(100% - 40px));
  min-height:142px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left;
}
.project-topbar .mono{
  color:var(--accent);
  text-shadow:none;
}
.project-topbar h2{
  margin:8px 0 0;
  font:600 clamp(2.7rem,4.6vw,4.9rem)/.94 "Space Grotesk";
  letter-spacing:-.06em;
  color:var(--text);
  text-shadow:none;
}

.showcase-shell{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  display:flex;
  align-items:flex-end;
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  left:0;
  right:0;
  padding-bottom:118px;
}
.project-glass-card{
  pointer-events:auto;
  width:min(590px,100%);
  padding:30px 32px 32px;
  border-radius:28px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.74);
  box-shadow:0 24px 70px rgba(12,18,28,.16);
}
html[data-theme="dark"] .project-glass-card{
  background:rgba(16,17,20,.84);
  border-color:rgba(255,255,255,.10);
}
.showcase-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.project-count{
  font:500 .73rem/1 "IBM Plex Mono";
  color:var(--muted);
}
.project-code{
  font:500 .73rem/1.2 "IBM Plex Mono";
  color:var(--accent);
  text-align:right;
}
.project-glass-card h3{
  margin:0 0 13px;
  font:600 clamp(2.2rem,3.8vw,4.05rem)/.94 "Space Grotesk";
  letter-spacing:-.055em;
}
.project-glass-card p{
  margin:0;
  max-width:54ch;
  color:var(--muted);
  font-size:1rem;
}
.project-meta{
  margin-top:19px;
  color:var(--muted);
  font-size:.8rem;
}
.project-more{
  margin-top:23px;
  padding:0;
  border:0;
  background:none;
  color:var(--text);
  font-weight:600;
  border-bottom:1px solid currentColor;
}

.project-navline{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:5;
  width:100%;
  margin:0;
  padding:0;
  background:rgba(10,12,16,.58);
  border-top:1px solid rgba(255,255,255,.14);

}
.project-tabs{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5,1fr);
}
.project-tab{
  min-width:0;
  padding:18px 18px 17px;
  border:0;
  border-right:1px solid rgba(255,255,255,.12);
  background:transparent;
  color:rgba(255,255,255,.64);
  text-align:left;
  transition:.22s ease;
}
.project-tab:last-child{border-right:0}
.project-tab:hover{
  background:rgba(255,255,255,.07);
  color:#fff;
}
.project-tab.active{
  background:#fff;
  color:#111;
}
.project-tab span{
  display:block;
  font:500 .69rem/1 "IBM Plex Mono";
  opacity:.68;
}
.project-tab b{
  display:block;
  margin-top:7px;
  font:600 .88rem/1.1 "Space Grotesk";
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.project-progress{
  width:min(1180px,calc(100% - 40px));
  height:2px;
  margin:0 auto;
  background:rgba(255,255,255,.14);
  overflow:hidden;
}
.project-progress span{
  display:block;
  height:100%;
  width:20%;
  background:#fff;
  transition:width .35s ease;
}

/* =========================================================
   O MNIE
   ========================================================= */

.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px}
.about h2{margin:10px 0 0;font:600 clamp(2rem,3.7vw,3.5rem)/1.04 "Space Grotesk";letter-spacing:-.045em}
.about-text>p{margin:0;color:var(--muted);font-size:1.12rem;max-width:650px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.facts div{padding-top:16px;border-top:1px solid var(--line)}
.facts strong{display:block;font:600 1.75rem/1 "Space Grotesk"}
.facts span{font-size:.76rem;color:var(--muted)}
.about-close{margin-top:18px}
.stack-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:52px}
.stack-strip span{padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.78rem}

/* --- Rozszerzona sekcja O mnie: tło, AI i terminal --- */

/* Sekcja O mnie — terminal Linux + subtelne tło techniczne */
    #o-mnie {
      position: relative;
      isolation: isolate;
      overflow: hidden;
    }

    /* Delikatny motyw fal / linii pod całą sekcją */
    #o-mnie::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      opacity: .42;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cg fill='none' stroke='%23929aa6' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M-120 170 C180 20 360 330 670 175 S1130 10 1720 210'/%3E%3Cpath d='M-160 240 C150 85 390 385 700 235 S1190 80 1740 275'/%3E%3Cpath d='M-180 610 C190 430 430 760 780 575 S1280 420 1740 650'/%3E%3Cpath d='M-220 680 C130 500 460 820 820 645 S1320 500 1760 720'/%3E%3C/g%3E%3Cg fill='none' stroke='%236f7782' stroke-opacity='.08' stroke-width='1'%3E%3Cpath d='M0 70 H1600'/%3E%3Cpath d='M0 830 H1600'/%3E%3C/g%3E%3C/svg%3E");
      background-size: cover;
      background-position: center;
    }

    #o-mnie::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background:
        radial-gradient(circle at 83% 38%, rgba(90, 120, 255, .055), transparent 28%),
        linear-gradient(to bottom, rgba(246, 246, 243, .28), rgba(246, 246, 243, .06));
    }

    #o-mnie .about-lead {
      font-size: clamp(1.08rem, 1.5vw, 1.32rem);
      line-height: 1.65;
      margin: 0 0 1.1rem;
    }

    #o-mnie .about-text > p:not(.about-lead) {
      line-height: 1.72;
      margin: 0 0 1rem;
    }

    /* Profesjonalny blok AI */
    #o-mnie .ai-workflow {
      position: relative;
      margin-top: 1.35rem;
      padding: 1.05rem 1.15rem 1.1rem 1.25rem;
      border-left: 2px solid rgba(48, 88, 255, .62);
      background: rgba(255, 255, 255, .32);
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
    }

    #o-mnie .ai-workflow-label {
      display: flex;
      align-items: center;
      gap: .55rem;
      margin-bottom: .55rem;
      font-family: "IBM Plex Mono", monospace;
      font-size: .72rem;
      font-weight: 500;
      letter-spacing: .045em;
      text-transform: uppercase;
      color: rgba(20, 20, 20, .66);
    }

    #o-mnie .ai-workflow-label::before {
      content: "AI";
      display: inline-grid;
      place-items: center;
      min-width: 28px;
      height: 20px;
      padding: 0 5px;
      border: 1px solid rgba(48, 88, 255, .34);
      border-radius: 4px;
      color: #3058ff;
      background: rgba(48, 88, 255, .055);
      font-size: .66rem;
      line-height: 1;
    }

    #o-mnie .ai-workflow p {
      margin: 0;
      font-size: .98rem;
      line-height: 1.72;
    }

    #o-mnie .ai-workflow strong {
      font-weight: 600;
    }

    #o-mnie .tech-terminal-wrap {
      margin-top: clamp(2.4rem, 4.8vw, 4.9rem);
    }

    #o-mnie .tech-terminal-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: .72rem;
      font-family: "IBM Plex Mono", monospace;
      font-size: .72rem;
      letter-spacing: .035em;
      color: rgba(20, 20, 20, .58);
    }

    /* Półprzezroczysty terminal typu glass */
    #o-mnie .tech-terminal {
      position: relative;
      width: 100%;
      overflow: hidden;
      border: 1px solid rgba(140, 148, 160, .30);
      border-radius: 12px;
      background: rgba(9, 12, 17, .82);
      box-shadow:
        0 26px 75px rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .06);
      backdrop-filter: blur(16px) saturate(120%);
      -webkit-backdrop-filter: blur(16px) saturate(120%);
      color: #e7e7e7;
    }

    #o-mnie .tech-terminal::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(135deg, rgba(255,255,255,.05), transparent 30%),
        radial-gradient(circle at 90% 0%, rgba(100, 130, 255, .08), transparent 34%);
    }

    #o-mnie .tech-terminal-bar {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 40px;
      padding: 0 10px 0 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .09);
      background: rgba(27, 30, 36, .62);
      color: #c9cbd0;
      user-select: none;
    }

    #o-mnie .tech-terminal-title {
      font-family: "IBM Plex Mono", monospace;
      font-size: .72rem;
      letter-spacing: .01em;
      opacity: .86;
    }

    #o-mnie .tech-terminal-controls {
      display: flex;
      align-items: stretch;
      align-self: stretch;
      margin-right: -10px;
    }

    #o-mnie .tech-terminal-controls span {
      display: grid;
      place-items: center;
      width: 38px;
      font: 400 13px/1 "Inter", sans-serif;
      color: #aeb1b7;
    }

    #o-mnie .tech-terminal-body {
      position: relative;
      z-index: 1;
      min-height: 315px;
      padding: clamp(22px, 3vw, 34px);
      overflow-x: auto;
      font-family: "IBM Plex Mono", monospace;
      font-size: clamp(.78rem, 1.08vw, .93rem);
      line-height: 1.72;
      color: #e6e6e6;
    }

    #o-mnie .terminal-command,
    #o-mnie .terminal-ready {
      display: flex;
      align-items: baseline;
      min-width: max-content;
      white-space: nowrap;
    }

    /* Drugi prompt ma pojawić się dopiero po zakończeniu animacji. */
    #o-mnie .terminal-ready[hidden] {
      display: none !important;
    }

    #o-mnie .terminal-userhost {
      color: #71d171;
      font-weight: 500;
    }

    #o-mnie .terminal-path {
      color: #6aa9ff;
      font-weight: 500;
    }

    #o-mnie .terminal-symbol {
      margin: 0 .48em 0 .12em;
      color: #f2f2f2;
    }

    #o-mnie .terminal-output {
      margin: .72rem 0 .92rem;
      min-width: 760px;
    }

    #o-mnie .terminal-line {
      display: block;
      min-height: 1.72em;
      white-space: pre-wrap;
      word-break: normal;
    }

    #o-mnie .terminal-section {
      margin-top: .52rem;
      color: #ffffff;
      font-weight: 500;
    }

    #o-mnie .terminal-value {
      color: rgba(236, 238, 241, .84);
      padding-left: 1.45em;
    }

    #o-mnie .terminal-dim {
      color: #777d86;
    }

    #o-mnie .terminal-cursor {
      display: inline-block;
      width: .62em;
      height: 1.08em;
      margin-left: .08em;
      vertical-align: -.14em;
      background: #e9e9e9;
      animation: terminalBlink .9s steps(1) infinite;
    }

    #o-mnie .about-facts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(18px, 4vw, 54px);
      margin-top: clamp(2rem, 4vw, 3.2rem);
    }

    #o-mnie .about-facts > div {
      padding-top: 14px;
      border-top: 1px solid rgba(127, 127, 127, .24);
    }

    #o-mnie .about-facts strong,
    #o-mnie .about-facts span {
      display: block;
    }

    #o-mnie .about-facts strong {
      margin-bottom: 4px;
      font-size: clamp(1.5rem, 2.4vw, 2rem);
      line-height: 1;
    }

    #o-mnie .about-facts span {
      font-size: .78rem;
      opacity: .62;
    }

    #o-mnie .about-close-wide {
      margin-top: 1.75rem;
    }

    @keyframes terminalBlink {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }

    /* Terminal jest celowym elementem interaktywnym portfolio.
       Nie wyłączamy jego kursora na systemach zgłaszających reduced-motion,
       bo na części konfiguracji Linuksa powodowało to statyczny terminal. */
    @media (prefers-reduced-motion: reduce) {
      #o-mnie .tech-terminal .terminal-cursor {
        animation: terminalBlink .9s steps(1) infinite;
      }
    }

    @media (max-width: 760px) {
      #o-mnie::before {
        opacity: .32;
        background-size: auto 100%;
      }

      #o-mnie .tech-terminal-wrap {
        margin-top: 2.5rem;
      }

      #o-mnie .tech-terminal-label {
        align-items: flex-start;
        justify-content: flex-start;
      }

      #o-mnie .ai-workflow {
        padding: .95rem 1rem;
      }

      /* Mobile: terminal zachowuje wygląd prawdziwego okna,
         ale zawartość dopasowuje się do szerokości telefonu. */
      #o-mnie .tech-terminal {
        width: 100%;
        border-radius: 10px;
      }

      #o-mnie .tech-terminal-bar {
        min-height: 36px;
        padding-left: 11px;
        padding-right: 7px;
      }

      #o-mnie .tech-terminal-title {
        max-width: calc(100% - 92px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .64rem;
      }

      #o-mnie .tech-terminal-controls {
        margin-right: -7px;
      }

      #o-mnie .tech-terminal-controls span {
        width: 30px;
        font-size: 11px;
      }

      #o-mnie .tech-terminal-body {
        min-height: 410px;
        padding: 16px 13px 18px;
        overflow-x: hidden;
        font-size: 11.5px;
        line-height: 1.62;
      }

      #o-mnie .terminal-command,
      #o-mnie .terminal-ready {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
      }

      #o-mnie #tech-command {
        min-width: 0;
        overflow-wrap: anywhere;
      }

      #o-mnie .terminal-symbol {
        margin-right: .42em;
      }

      #o-mnie .terminal-output {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: .72rem 0 .9rem;
      }

      #o-mnie .terminal-line {
        width: 100%;
        min-width: 0;
        min-height: 1.62em;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
      }

      #o-mnie .terminal-value {
        padding-left: 1.35em;
        padding-right: .2em;
      }

      #o-mnie .terminal-section {
        margin-top: .62rem;
        letter-spacing: .015em;
      }

      #o-mnie .terminal-cursor {
        width: .58em;
        height: 1.02em;
      }

      #o-mnie .about-facts {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

    @media (max-width: 430px) {
      #o-mnie .tech-terminal-body {
        min-height: 430px;
        padding: 14px 11px 17px;
        font-size: 10.7px;
        line-height: 1.6;
      }

      #o-mnie .tech-terminal-title {
        font-size: .6rem;
      }

      #o-mnie .tech-terminal-controls span {
        width: 28px;
      }

      #o-mnie .terminal-output {
        margin-top: .68rem;
      }
    }

    html[data-theme="dark"] #o-mnie::after {
      background:
        radial-gradient(circle at 83% 38%, rgba(90, 120, 255, .08), transparent 30%),
        linear-gradient(to bottom, rgba(10, 10, 12, .04), rgba(10, 10, 12, .14));
    }

    html[data-theme="dark"] #o-mnie .tech-terminal-label,
    html[data-theme="dark"] #o-mnie .ai-workflow-label {
      color: rgba(255, 255, 255, .58);
    }

    html[data-theme="dark"] #o-mnie .ai-workflow {
      background: rgba(255, 255, 255, .035);
      border-left-color: rgba(110, 140, 255, .72);
    }

    html[data-theme="dark"] #o-mnie .tech-terminal {
      background: rgba(7, 9, 13, .72);
      box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    }

/* =========================================================
   KONTAKT
   ========================================================= */

.contact{border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px}
.contact h2{margin:10px 0 12px;font:600 clamp(2.2rem,4vw,4rem)/1 "Space Grotesk";letter-spacing:-.05em}
.contact-copy>p{color:var(--muted)}
.contact-links{display:grid;margin-top:34px;border-top:1px solid var(--line)}
.contact-links a{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.contact-links span{color:var(--muted);font-size:.78rem}
.contact-links b{font-weight:600}
.contact-links a:hover b{color:var(--accent)}
.contact-form{padding:28px;border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form label{display:block;margin-bottom:14px}
.contact-form label>span{display:block;margin-bottom:7px;color:var(--muted);font-size:.78rem}
.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--text);padding:13px 14px;outline:none}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--text);box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 8%,transparent)}
.contact-form textarea{resize:vertical}
.form-submit{margin-top:3px}
.form-status{min-height:1.2em;margin:12px 0 0;color:var(--muted);font-size:.8rem}

/* =========================================================
   STOPKA
   ========================================================= */

.footer{background:var(--footer);color:#f4f4f1;padding:70px 0 24px}
.footer .mono{color:#8da4ff}
.footer-main{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;align-items:end}
.footer h2{margin:13px 0 0;font:600 clamp(3rem,6vw,6rem)/.9 "Space Grotesk";letter-spacing:-.06em}
.footer-columns{display:grid;gap:18px}
.footer-columns div{padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.14)}
.footer-columns span{display:block;margin-bottom:5px;color:#8f939b;font-size:.72rem}
.footer-columns a{font:500 1.12rem/1.2 "Space Grotesk"}
.footer-columns a:hover{color:#a7b8ff}
.footer-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:58px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);color:#858a94;font-size:.76rem}

/* =========================================================
   MODAL PROJEKTU
   ========================================================= */

.project-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:28px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.project-modal.open{opacity:1;visibility:visible}
.project-modal-backdrop{position:absolute;inset:0;background:rgba(6,8,12,.76);backdrop-filter:blur(18px)}
.project-modal-card{position:relative;z-index:1;width:min(980px,100%);max-height:90vh;overflow:auto;background:color-mix(in srgb,var(--surface) 97%,transparent);color:var(--text);border:1px solid color-mix(in srgb,var(--line) 86%,transparent);border-radius:30px;padding:42px;box-shadow:0 34px 110px rgba(0,0,0,.38);transform:translateY(18px) scale(.985);transition:.25s ease;scrollbar-width:thin}
.project-modal.open .project-modal-card{transform:none}
.modal-close{position:absolute;right:22px;top:22px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 90%,transparent);color:var(--text);font-size:1.55rem;line-height:1;box-shadow:0 8px 24px rgba(0,0,0,.08);z-index:5}
.modal-top{display:flex;justify-content:space-between;gap:20px;padding-right:50px}
.modal-count{font:500 .75rem/1 "IBM Plex Mono";color:var(--muted)}
.project-modal h2{margin:20px 0 12px;max-width:18ch;font:600 clamp(2.2rem,4vw,3.8rem)/.98 "Space Grotesk";letter-spacing:-.055em}
.modal-lead{margin:0;color:var(--muted);font-size:1.08rem;line-height:1.7;max-width:800px}
.modal-grid{display:grid;grid-template-columns:.9fr 1.2fr .9fr;gap:14px;margin:32px 0 26px}
.modal-grid>div{padding:20px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface-2) 78%,transparent)}
.modal-grid span{font:500 .72rem/1 "IBM Plex Mono";color:var(--accent)}
.modal-grid p{margin:11px 0 0;color:var(--text);font-size:.92rem;line-height:1.65}
.modal-stack{margin:0 0 26px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--bg);color:var(--muted);font:500 .78rem/1.55 "IBM Plex Mono"}

/* =========================================================
   ANIMACJE OGÓLNE
   ========================================================= */

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* =========================================================
   RESPONSYWNOŚĆ
   ========================================================= */

@media(max-width:1020px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:74px;left:20px;right:20px;flex-direction:column;align-items:flex-start;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
  .menu-toggle{display:block}
  .hero-grid{grid-template-columns:1fr 1fr;min-height:620px}
  .hero-visual{height:620px}
  .hero-visual img{width:min(155%,700px);max-height:620px;transform:translateX(10%)}
  .service-list{grid-template-columns:1fr 1fr}
  .service:nth-child(2),.service:nth-child(4){border-right:0}
  .service:last-child{padding-left:22px}
  
  .about-grid,.contact-grid,.footer-main{grid-template-columns:1fr;gap:38px}
}
@media(max-width:720px){
  :root{--wrap:min(1180px,calc(100% - 24px))}
  .nav-row{min-height:64px}
  .brand img{width:145px}
  .hero-grid{grid-template-columns:1fr;min-height:auto}
  .hero-copy{padding:40px 0 10px}
  .hero h1{font-size:clamp(2.4rem,11vw,3.6rem);max-width:13ch}
  .lead{font-size:.98rem;max-width:34ch}
  .hero-visual{height:450px;margin-top:0;justify-content:center}
  .hero-visual img{width:min(130%,560px);max-height:450px;transform:translateX(3%)}
  .section{padding:66px 0}
  .service-list{grid-template-columns:1fr}
  .service,.service:first-child,.service:last-child{min-height:auto;padding:20px 0;border-right:0}
  .service h3{margin:20px 0 6px}
  .project-showcase{height:780px;min-height:0}
  .project-topbar::before{height:118px}
  .project-topbar-inner{width:calc(100% - 24px);min-height:118px}
  .showcase-shell{width:calc(100% - 24px);padding-bottom:146px}
  .project-glass-card{width:min(520px,100%);padding:22px 22px 24px}
  .project-tabs{width:100%;grid-auto-flow:column;grid-auto-columns:minmax(138px,1fr);grid-template-columns:none;overflow-x:auto;scrollbar-width:none}
  .project-tabs::-webkit-scrollbar{display:none}
  .project-progress{width:100%}
  .project-heading h2{max-width:9ch}
  .facts{grid-template-columns:1fr}
  .facts div{display:flex;align-items:end;justify-content:space-between}
  .form-row{grid-template-columns:1fr}
  .contact-form{padding:20px}
  .footer{padding-top:54px}
  .footer h2{font-size:clamp(3rem,18vw,5rem)}
  .footer-main{gap:44px}
  .modal-grid{grid-template-columns:1fr}
  .project-modal-card{padding:28px 22px}
}
@media(max-width:430px){
  .project-showcase{height:720px}
  .project-topbar::before{height:106px}
  .project-topbar-inner{min-height:106px}
  .showcase-shell{padding-bottom:142px}
  .project-glass-card h3{font-size:2rem}
  .project-glass-card p{font-size:.91rem}

  .hero h1{font-size:2.5rem}
  .hero-actions{display:grid}
  .button{width:100%}
  .hero-meta{font-size:.8rem}
  .hero-visual{height:395px}
  .hero-visual img{width:min(132%,470px);max-height:395px;transform:translateX(0%)}
  .project-card{border-radius:22px}
  .project-card-body{padding:18px}
  .contact-links a{flex-direction:column;gap:4px}
  .modal-top{flex-direction:column;gap:8px}
}

/* =========================================================
   WIZUALIZACJE 3D — PATCH PORTFOLIO
   ========================================================= */

.viz3d{
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 88% 8%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 31%),
    linear-gradient(to bottom,color-mix(in srgb,var(--surface) 72%,transparent),transparent 48%);
}
.viz3d .section-intro{max-width:940px}
.viz3d-lead{max-width:860px;margin:16px 0 0;color:var(--muted);font-size:1rem}
.viz3d-lead strong{color:var(--text);font-weight:600}
.viz3d-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
.viz-case{overflow:hidden;border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:var(--shadow)}
.viz-case-head{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start;padding:22px 22px 0}
.viz-case-index{display:grid;place-items:center;width:42px;height:42px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:50%;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);font:500 .74rem/1 "IBM Plex Mono",monospace}
.viz-case-head h3{margin:1px 0 7px;font:600 1.18rem/1.15 "Space Grotesk";letter-spacing:-.028em}
.viz-case-head p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.55}
.viz-case-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:20px 22px 22px}
.viz-card{position:relative;appearance:none;display:block;width:100%;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface-2);color:var(--text);text-align:left;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.viz-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 32%,var(--line));box-shadow:0 15px 34px rgba(15,16,18,.09)}
.viz-card:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.viz-thumb{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.viz-thumb::after{content:"powiększ ↗";position:absolute;right:10px;bottom:10px;padding:6px 9px;border-radius:999px;background:rgba(10,11,13,.72);color:#fff;font:500 .63rem/1 "IBM Plex Mono",monospace;opacity:0;transform:translateY(5px);transition:.2s ease;backdrop-filter:blur(9px)}
.viz-card:hover .viz-thumb::after{opacity:1;transform:none}
.viz-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.viz-card:hover .viz-thumb img{transform:scale(1.025)}
.viz-badge{position:absolute;z-index:2;left:10px;top:10px;display:inline-flex;align-items:center;min-height:27px;padding:0 9px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(12,13,15,.74);color:#fff;font:500 .63rem/1 "IBM Plex Mono",monospace;backdrop-filter:blur(10px)}
.viz-badge-accent{background:rgba(66,103,255,.86)}
.viz3d-cta{display:flex;justify-content:space-between;align-items:center;gap:28px;margin-top:26px;padding:22px 24px;border:1px solid var(--line);border-radius:24px;background:var(--surface)}
.viz3d-cta>div{max-width:760px}
.viz3d-cta .mono{display:block;margin-bottom:6px;font-size:.75rem}
.viz3d-cta p{margin:0;color:var(--muted);font-size:.92rem}
.viz3d-cta .button{flex:0 0 auto}

/* Lightbox */
.viz-lightbox{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease}
.viz-lightbox.open{opacity:1;visibility:visible}
.viz-lightbox-backdrop{position:absolute;inset:0;background:rgba(5,6,8,.8);backdrop-filter:blur(14px)}
.viz-lightbox-card{position:relative;z-index:1;width:min(1180px,100%);max-height:92vh;margin:0;padding:15px 15px 12px;border:1px solid rgba(255,255,255,.14);border-radius:25px;background:rgba(12,13,15,.94);box-shadow:0 34px 100px rgba(0,0,0,.44);transform:translateY(12px) scale(.99);transition:transform .24s ease}
.viz-lightbox.open .viz-lightbox-card{transform:none}
.viz-lightbox-close{position:absolute;right:15px;top:15px;z-index:3;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(10,11,13,.65);color:#fff;font-size:1.55rem;line-height:1;backdrop-filter:blur(10px)}
.viz-lightbox-card img{width:100%;max-height:calc(92vh - 78px);object-fit:contain;border-radius:16px;background:#090a0b}
.viz-lightbox-card figcaption{padding:10px 4px 1px;color:rgba(255,255,255,.76);font-size:.82rem}

@media(max-width:1020px){
  .viz3d-grid{grid-template-columns:1fr}
  .viz-case-pair{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .viz3d-grid{gap:16px;margin-top:28px}
  .viz-case{border-radius:22px}
  .viz-case-head{grid-template-columns:1fr;gap:11px;padding:18px 18px 0}
  .viz-case-index{width:38px;height:38px}
  .viz-case-pair{grid-template-columns:1fr;gap:11px;padding:17px 18px 18px}
  .viz-thumb{aspect-ratio:4/3}
  .viz3d-cta{flex-direction:column;align-items:flex-start;padding:20px}
  .viz3d-cta .button{width:100%}
  .viz-lightbox{padding:12px}
  .viz-lightbox-card{padding:10px 10px 8px;border-radius:19px}
  .viz-lightbox-close{right:10px;top:10px}
  .viz-lightbox-card img{border-radius:12px}
}


/* =========================================================
   MODAL PROJEKTU 3D — MINIATURY WIZUALIZACJI
   ========================================================= */

.project-modal-card.has-3d-gallery{
  width:min(1220px,100%);
}

.modal-3d-gallery{
  margin:8px 0 28px;
  padding-top:30px;
  border-top:1px solid var(--line);
}
.modal-3d-gallery[hidden]{display:none!important}

.modal-3d-head{max-width:860px;margin-bottom:22px}
.modal-3d-head .mono{display:block;margin-bottom:8px;font-size:.72rem}
.modal-3d-head h3{margin:0;font:600 clamp(1.65rem,2.5vw,2.35rem)/1.04 "Space Grotesk";letter-spacing:-.045em}
.modal-3d-head p{margin:11px 0 0;color:var(--muted);font-size:.95rem;line-height:1.7;max-width:80ch}

.modal-3d-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.modal-3d-compare-card{
  appearance:none;display:block;width:100%;padding:12px;border:1px solid var(--line);border-radius:22px;
  background:var(--surface-2);color:var(--text);text-align:left;overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.modal-3d-compare-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:var(--surface);box-shadow:0 16px 38px rgba(15,16,18,.10)}
.modal-3d-compare-card:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.modal-3d-case-title{display:flex;align-items:center;gap:10px;padding:3px 4px 11px}
.modal-3d-case-title span{color:var(--accent);font:500 .67rem/1 "IBM Plex Mono",monospace}
.modal-3d-case-title strong{font:600 1rem/1.2 "Space Grotesk"}
.modal-3d-preview.single{position:relative;display:block;overflow:hidden;border-radius:15px;background:#0b0d10;aspect-ratio:16/10}
.modal-3d-preview.single img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease,filter .3s ease}
.modal-3d-compare-card:hover .modal-3d-preview.single img{transform:scale(1.025);filter:brightness(.93)}
.modal-3d-open-hint{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(10,12,15,.74);color:#fff;font:500 .65rem/1 "IBM Plex Mono",monospace;backdrop-filter:blur(10px)}
.modal-3d-open-hint b{font:600 .82rem/1 "Inter"}

/* =========================================================
   LIGHTBOX 3D — PRAWDZIWY SUWAK BEFORE / AFTER
   ========================================================= */

.viz-lightbox{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:26px;opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease}
.viz-lightbox.open{opacity:1;visibility:visible}
.viz-lightbox-backdrop{position:absolute;inset:0;background:rgba(4,6,10,.86);backdrop-filter:blur(18px)}
.viz-lightbox-card{position:relative;z-index:1;width:min(1240px,100%);margin:0;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:26px;background:#0c0f13;box-shadow:0 36px 120px rgba(0,0,0,.55);transform:translateY(12px) scale(.99);transition:transform .24s ease}
.viz-lightbox.open .viz-lightbox-card{transform:none}
.viz-lightbox-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:5px 4px 13px}
.viz-lightbox-head>div{min-width:0}
.viz-lightbox-head .mono{display:block;color:#7f9cff;font-size:.68rem;margin-bottom:3px}
.viz-lightbox-card figcaption{color:#f1f3f6;font:600 clamp(1rem,1.5vw,1.18rem)/1.3 "Space Grotesk";white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viz-lightbox-close{position:static;flex:0 0 auto;width:42px;height:42px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(255,255,255,.06);color:#fff;font-size:1.5rem;line-height:1;transition:.2s ease}
.viz-lightbox-close:hover{background:rgba(255,255,255,.12);transform:rotate(4deg)}

.viz-compare{--compare:50%;position:relative;width:100%;overflow:hidden;border-radius:18px;background:#090b0e;aspect-ratio:4/3;max-height:calc(92vh - 110px);user-select:none;touch-action:none}
.viz-compare-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;pointer-events:none}
.viz-compare-after{z-index:1}
.viz-compare-before{z-index:2;clip-path:inset(0 calc(100% - var(--compare)) 0 0)}
.viz-compare-divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--compare);width:2px;background:rgba(255,255,255,.94);transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.10),0 0 18px rgba(0,0,0,.18)}
.viz-compare-divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.38);background:rgba(14,17,22,.60);color:#fff;font:500 1.25rem/1 "Inter";backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.viz-compare-label{position:absolute;z-index:4;top:16px;padding:8px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#fff;font:600 .68rem/1 "IBM Plex Mono",monospace;backdrop-filter:blur(10px);pointer-events:none}
.viz-compare-label.before{left:16px;background:rgba(10,12,15,.70)}
.viz-compare-label.after{right:16px;background:rgba(66,103,255,.86)}
.viz-compare-range{position:absolute;z-index:5;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}

@media(max-width:900px){
  .project-modal-card{width:min(900px,100%);padding:32px 26px}
  .modal-grid{grid-template-columns:1fr}
  .modal-3d-grid{grid-template-columns:1fr}
  .viz-lightbox{padding:16px}
}

@media(max-width:600px){
  .project-modal{padding:12px}
  .project-modal-card,.project-modal-card.has-3d-gallery{padding:26px 18px;border-radius:22px;max-height:94vh}
  .modal-close{right:14px;top:14px;width:40px;height:40px}
  .project-modal h2{padding-right:42px;font-size:2.25rem}
  .modal-grid>div{padding:17px}
  .modal-3d-compare-card{padding:9px;border-radius:17px}
  .modal-3d-preview.single{aspect-ratio:4/3;border-radius:12px}
  .modal-3d-open-hint{right:9px;bottom:9px;font-size:.58rem}
  .viz-lightbox{padding:8px}
  .viz-lightbox-card{padding:9px;border-radius:18px}
  .viz-lightbox-head{padding:4px 2px 9px}
  .viz-lightbox-head .mono{display:none}
  .viz-lightbox-card figcaption{font-size:.92rem}
  .viz-lightbox-close{width:38px;height:38px}
  .viz-compare{border-radius:12px;aspect-ratio:4/3;max-height:calc(94vh - 90px)}
  .viz-compare-divider span{width:40px;height:40px;font-size:1rem}
  .viz-compare-label{top:10px;padding:7px 9px;font-size:.6rem}
  .viz-compare-label.before{left:10px}
  .viz-compare-label.after{right:10px}
}


/* =========================================================
   MODALE — REDESIGN V6 / LIGHT UI
   ========================================================= */

.project-modal{
  padding:clamp(12px,2vw,28px);
}

.project-modal-backdrop{
  background:rgba(9,11,15,.54);
  backdrop-filter:blur(16px) saturate(.92);
}

.project-modal-card{
  position:relative;
  width:min(1060px,100%);
  max-height:92vh;
  padding:0;
  overflow:auto;
  border:1px solid rgba(15,16,18,.10);
  border-radius:24px;
  background:rgba(255,255,255,.965);
  color:var(--text);
  box-shadow:
    0 32px 90px rgba(9,12,18,.18),
    0 8px 24px rgba(9,12,18,.07);
  transform:translateY(12px) scale(.992);
  transition:transform .24s ease,opacity .24s ease;
  scrollbar-width:thin;
  scrollbar-color:rgba(15,16,18,.16) transparent;
}

.project-modal.open .project-modal-card{transform:none}
.project-modal-card.has-long-copy{width:min(1160px,100%)}
.project-modal-card.has-3d-gallery{width:min(1240px,100%)}

.project-modal-card::-webkit-scrollbar{width:8px}
.project-modal-card::-webkit-scrollbar-track{background:transparent}
.project-modal-card::-webkit-scrollbar-thumb{
  background:rgba(15,16,18,.16);
  border-radius:99px;
  border:2px solid transparent;
  background-clip:padding-box;
}

.modal-close{
  position:absolute;
  z-index:8;
  right:20px;
  top:20px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(15,16,18,.10);
  border-radius:50%;
  background:rgba(255,255,255,.82);
  color:#17181b;
  box-shadow:none;
  backdrop-filter:blur(12px);
  font-size:1.25rem;
  line-height:1;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.modal-close:hover{
  background:#f2f3f4;
  border-color:rgba(15,16,18,.18);
  transform:scale(1.04);
}

.modal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:30px 76px 0 34px;
}

.modal-top .mono{
  color:#7d828a;
  font-size:.69rem;
  letter-spacing:.01em;
}

.modal-count{
  color:#9a9ea5;
  font:500 .68rem/1 "IBM Plex Mono",monospace;
}

.project-modal h2{
  margin:26px 34px 12px;
  max-width:20ch;
  font:600 clamp(2.15rem,4vw,4rem)/.98 "Space Grotesk";
  letter-spacing:-.055em;
  color:#121316;
}

.modal-lead{
  margin:0 34px;
  max-width:880px;
  color:#6f747c;
  font-size:clamp(.98rem,1.25vw,1.08rem);
  line-height:1.72;
}

.modal-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:36px 34px 30px;
  border-top:1px solid #e4e5e7;
  border-bottom:1px solid #e4e5e7;
}

.modal-grid>div{
  position:relative;
  min-height:176px;
  padding:20px 26px 22px 0;
  border:0;
  border-radius:0;
  background:transparent;
}
.modal-grid>div+div{
  padding-left:26px;
  border-left:1px solid #e4e5e7;
}

.modal-grid span{
  display:flex;
  align-items:center;
  gap:10px;
  color:#90949b;
  font:500 .66rem/1 "IBM Plex Mono",monospace;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.modal-grid span::before{
  display:inline-block;
  color:#b2b5ba;
  font-size:.61rem;
}
.modal-grid>div:nth-child(1) span::before{content:"01"}
.modal-grid>div:nth-child(2) span::before{content:"02"}
.modal-grid>div:nth-child(3) span::before{content:"03"}

.modal-grid p{
  margin:14px 0 0;
  color:#2d3035;
  font-size:.92rem;
  line-height:1.72;
}

.modal-footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin:0 34px 30px;
}
.modal-stack-block{min-width:0;flex:1 1 auto}
.modal-footer-label{
  display:block;
  margin-bottom:7px;
  color:#a0a4aa;
  font:500 .63rem/1 "IBM Plex Mono",monospace;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.modal-stack{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#6f747c;
  font:500 .75rem/1.55 "IBM Plex Mono",monospace;
}
.modal-cta{
  flex:0 0 auto;
  min-height:44px;
  padding:0 18px;
  border-radius:12px;
  font-size:.86rem;
}

/* 3D gallery — minimalist case-study grid */
.modal-3d-gallery{
  margin:4px 34px 32px;
  padding-top:28px;
  border-top:1px solid #e4e5e7;
}
.modal-3d-gallery[hidden]{display:none!important}

.modal-3d-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.7fr);
  gap:42px;
  align-items:end;
  max-width:none;
  margin-bottom:24px;
}
.modal-3d-head .mono{
  grid-column:1/-1;
  width:max-content;
  margin:0 0 -22px;
  color:#9ca0a7;
  font-size:.66rem;
}
.modal-3d-head h3{
  margin:0;
  max-width:18ch;
  font:600 clamp(1.7rem,2.4vw,2.35rem)/1.05 "Space Grotesk";
  letter-spacing:-.045em;
  color:#17181b;
}
.modal-3d-head p{
  margin:0;
  max-width:52ch;
  color:#737880;
  font-size:.9rem;
  line-height:1.7;
}

.modal-3d-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 18px;
}
.modal-3d-compare-card{
  appearance:none;
  display:block;
  width:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#17181b;
  text-align:left;
  box-shadow:none;
  transition:transform .22s ease;
}
.modal-3d-compare-card:hover{transform:translateY(-2px);background:transparent;box-shadow:none}
.modal-3d-compare-card:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:5px}

.modal-3d-case-title{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:0 0 10px;
}
.modal-3d-case-title span{
  width:auto;
  height:auto;
  display:inline;
  border-radius:0;
  background:transparent;
  color:#a4a8ae;
  font:500 .64rem/1 "IBM Plex Mono",monospace;
}
.modal-3d-case-title strong{
  color:#292c31;
  font:600 .96rem/1.2 "Space Grotesk";
}

.modal-3d-preview.single{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:16/10;
  border:1px solid #e1e3e6;
  border-radius:16px;
  background:#f4f5f6;
}
.modal-3d-preview.single::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(6,8,12,.22));
  opacity:.7;
  pointer-events:none;
  transition:opacity .22s ease;
}
.modal-3d-preview.single img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.modal-3d-compare-card:hover .modal-3d-preview.single img{transform:scale(1.015)}
.modal-3d-compare-card:hover .modal-3d-preview.single::after{opacity:1}
.modal-3d-open-hint{
  position:absolute;
  z-index:2;
  right:12px;
  bottom:12px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:9px;
  background:rgba(11,13,17,.62);
  color:#fff;
  font:500 .61rem/1 "IBM Plex Mono",monospace;
  backdrop-filter:blur(10px);
}
.modal-3d-open-hint b{font:600 .78rem/1 "Inter"}

/* Dark mode */
html[data-theme="dark"] .project-modal-card{
  background:rgba(18,19,22,.97);
  border-color:rgba(255,255,255,.08);
  color:#f4f4f1;
  box-shadow:0 34px 100px rgba(0,0,0,.50);
}
html[data-theme="dark"] .modal-close{background:rgba(27,29,33,.86);border-color:rgba(255,255,255,.09);color:#f5f5f3}
html[data-theme="dark"] .modal-close:hover{background:#25272c}
html[data-theme="dark"] .project-modal h2,
html[data-theme="dark"] .modal-3d-head h3{color:#f4f4f1}
html[data-theme="dark"] .modal-lead,
html[data-theme="dark"] .modal-3d-head p,
html[data-theme="dark"] .modal-stack{color:#a7aab0}
html[data-theme="dark"] .modal-grid,
html[data-theme="dark"] .modal-3d-gallery{border-color:#2b2d31}
html[data-theme="dark"] .modal-grid>div+div{border-left-color:#2b2d31}
html[data-theme="dark"] .modal-grid p{color:#d8dade}
html[data-theme="dark"] .modal-3d-case-title strong{color:#dfe1e5}
html[data-theme="dark"] .modal-3d-preview.single{border-color:#2e3136;background:#0d0f12}

@media(max-width:920px){
  .project-modal-card,.project-modal-card.has-long-copy,.project-modal-card.has-3d-gallery{width:min(900px,100%)}
  .modal-grid{grid-template-columns:1fr}
  .modal-grid>div{min-height:0;padding:20px 0}
  .modal-grid>div+div{padding-left:0;border-left:0;border-top:1px solid #e4e5e7}
  html[data-theme="dark"] .modal-grid>div+div{border-top-color:#2b2d31}
  .modal-3d-head{grid-template-columns:1fr;gap:10px}
  .modal-3d-head .mono{grid-column:auto;margin:0 0 4px}
  .modal-3d-head h3{max-width:none}
  .modal-3d-head p{max-width:72ch}
}

@media(max-width:680px){
  .project-modal{padding:8px}
  .project-modal-card,.project-modal-card.has-long-copy,.project-modal-card.has-3d-gallery{max-height:96vh;border-radius:20px}
  .modal-close{right:12px;top:12px;width:36px;height:36px}
  .modal-top{padding:22px 58px 0 20px}
  .project-modal h2{margin:22px 20px 10px;font-size:clamp(2rem,10vw,2.8rem)}
  .modal-lead{margin:0 20px;font-size:.94rem;line-height:1.65}
  .modal-grid{margin:28px 20px 24px}
  .modal-grid>div{padding:17px 0}
  .modal-grid p{font-size:.89rem;line-height:1.68}
  .modal-3d-gallery{margin:0 20px 26px;padding-top:24px}
  .modal-3d-grid{grid-template-columns:1fr;gap:18px}
  .modal-3d-preview.single{border-radius:13px;aspect-ratio:4/3}
  .modal-footer-row{flex-direction:column;align-items:stretch;gap:16px;margin:0 20px 22px}
  .modal-cta{width:100%}
}

/* =========================================================
   LIGHTBOX 3D — MOTYW ZGODNY Z MOTYWEM STRONY
   ========================================================= */

html[data-theme="light"] .viz-lightbox-backdrop{
  background:rgba(238,240,244,.78);
  backdrop-filter:blur(18px) saturate(.98);
}

html[data-theme="light"] .viz-lightbox-card{
  background:rgba(255,255,255,.97);
  border-color:rgba(15,16,18,.10);
  box-shadow:
    0 32px 90px rgba(15,18,24,.16),
    0 8px 26px rgba(15,18,24,.06);
}

html[data-theme="light"] .viz-lightbox-head .mono{
  color:var(--accent);
}

html[data-theme="light"] .viz-lightbox-card figcaption{
  color:#17181b;
}

html[data-theme="light"] .viz-lightbox-close{
  background:#f7f8f9;
  color:#17181b;
  border-color:rgba(15,16,18,.11);
}

html[data-theme="light"] .viz-lightbox-close:hover{
  background:#eef0f2;
  border-color:rgba(15,16,18,.18);
}

html[data-theme="light"] .viz-compare{
  background:#eef0f2;
  box-shadow:inset 0 0 0 1px rgba(15,16,18,.08);
}

html[data-theme="light"] .viz-compare-divider{
  background:rgba(255,255,255,.96);
  box-shadow:
    0 0 0 1px rgba(15,16,18,.18),
    0 0 18px rgba(15,16,18,.18);
}

html[data-theme="light"] .viz-compare-divider span{
  background:rgba(255,255,255,.82);
  color:#17181b;
  border-color:rgba(15,16,18,.16);
  box-shadow:0 10px 28px rgba(15,16,18,.16);
}

html[data-theme="light"] .viz-compare-label.before{
  background:rgba(255,255,255,.82);
  color:#17181b;
  border-color:rgba(15,16,18,.12);
}

html[data-theme="light"] .viz-compare-label.after{
  background:rgba(66,103,255,.92);
  color:#fff;
  border-color:rgba(255,255,255,.26);
}

html[data-theme="dark"] .viz-lightbox-backdrop{
  background:rgba(4,6,10,.86);
}

html[data-theme="dark"] .viz-lightbox-card{
  background:#0c0f13;
  border-color:rgba(255,255,255,.12);
  box-shadow:0 36px 120px rgba(0,0,0,.55);
}

html[data-theme="dark"] .viz-lightbox-card figcaption{color:#f1f3f6}


/* =========================================================
   V9 — MOBILE TOUCH FIX BEZ ZMIANY DESKTOPU
   ========================================================= */

/* Desktop zachowuje dokładnie natywny, działający input range. */
@media (pointer: coarse), (max-width: 820px){
  .viz-compare{
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }

  /* Na ekranach dotykowych gest obsługuje kontener .viz-compare.
     Dzięki temu Safari/iOS nie przejmuje gestu przez niewidzialny range. */
  .viz-compare-range{
    pointer-events:none;
  }
}


/* =========================================================
   SEO / CASE STUDIES
   ========================================================= */
.project-index-links{
  padding:24px 0 32px;
  display:flex;
  gap:10px 18px;
  align-items:center;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
.project-index-links a{
  color:var(--muted);
  font-size:.88rem;
  font-weight:600;
  border-bottom:1px solid transparent;
  transition:.2s ease;
}
.project-index-links a:hover{color:var(--text);border-bottom-color:var(--text)}
.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}

.case-page .header{position:sticky}
.case-main{min-height:70vh}
.case-hero{padding:92px 0 64px;border-bottom:1px solid var(--line)}
.case-breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.82rem;margin-bottom:32px}
.case-breadcrumb a:hover{color:var(--text)}
.case-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:58px;align-items:center}
.case-kicker{font:500 .78rem/1.4 "IBM Plex Mono",monospace;color:var(--accent);margin-bottom:14px}
.case-hero h1{margin:0;font:600 clamp(2.9rem,5.5vw,5.6rem)/.94 "Space Grotesk";letter-spacing:-.06em;max-width:900px}
.case-lead{font-size:1.12rem;color:var(--muted);max-width:760px;margin:24px 0 0}
.case-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.case-tags span{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 11px;font-size:.78rem;font-weight:600;color:var(--muted)}
.case-hero-media{border-radius:28px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line)}
.case-hero-media img{width:100%;height:auto;aspect-ratio:1916/821;object-fit:cover}
.case-section{padding:78px 0;border-bottom:1px solid var(--line)}
.case-section-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:54px}
.case-section-label{font:500 .78rem/1.4 "IBM Plex Mono",monospace;color:var(--accent)}
.case-copy h2{margin:0 0 22px;font:600 clamp(2rem,3.5vw,3.5rem)/1 "Space Grotesk";letter-spacing:-.045em}
.case-copy h3{margin:34px 0 10px;font:600 1.2rem/1.2 "Space Grotesk"}
.case-copy p{margin:0 0 18px;color:var(--muted);font-size:1rem;max-width:820px}
.case-copy strong{color:var(--text)}
.case-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden;margin-top:34px}
.case-fact{background:var(--surface);padding:24px}
.case-fact span{display:block;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.case-fact strong{font:600 1.05rem/1.35 "Space Grotesk"}
.case-list{margin:20px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;max-width:880px}
.case-list li{position:relative;padding:11px 0 11px 22px;border-bottom:1px solid var(--line);color:var(--muted)}
.case-list li::before{content:"↳";position:absolute;left:0;color:var(--accent);font-family:"IBM Plex Mono",monospace}
.case-gallery-hint{display:flex;align-items:center;gap:9px;margin-top:-2px!important;font-size:.86rem!important}
.case-gallery-hint span{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;color:var(--accent);font-family:"IBM Plex Mono",monospace;background:var(--surface)}
.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px}
.case-gallery-item{display:block;width:100%;padding:0;margin:0;text-align:left;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface);color:var(--text);cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.case-gallery-item:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 32%,var(--line));box-shadow:0 16px 38px rgba(15,16,18,.09)}
.case-gallery-item:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.case-gallery-media{position:relative;display:block;overflow:hidden}
.case-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .28s ease,filter .28s ease}
.case-gallery-item:hover img{transform:scale(1.018);filter:brightness(.95)}
.case-gallery-badge{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(12,14,18,.72);color:#fff;font:600 .66rem/1 "IBM Plex Mono",monospace;backdrop-filter:blur(10px)}
.case-gallery-caption{display:block;padding:14px 16px;color:var(--muted);font-size:.82rem}
.case-next{padding:72px 0 94px}
.case-next-box{display:flex;justify-content:space-between;align-items:center;gap:26px;padding:34px;border:1px solid var(--line);background:var(--surface);border-radius:28px}
.case-next h2{margin:5px 0 0;font:600 clamp(1.8rem,3vw,3rem)/1 "Space Grotesk";letter-spacing:-.045em}
.case-footer-note{color:var(--muted);font-size:.84rem;margin-top:18px}

@media(max-width:900px){
  .case-hero{padding:64px 0 48px}
  .case-hero-grid{grid-template-columns:1fr;gap:34px}
  .case-section-grid{grid-template-columns:1fr;gap:18px}
  .case-facts{grid-template-columns:1fr}
  .case-list{grid-template-columns:1fr}
  .case-gallery{grid-template-columns:1fr}
  .case-next-box{align-items:flex-start;flex-direction:column}
}
@media(max-width:640px){
  .project-index-links{padding:20px 0 28px;gap:8px 14px}
  .project-index-links .mono{width:100%}
  .modal-actions{width:100%;justify-content:stretch}
  .modal-actions .button{flex:1 1 100%}
  .case-hero h1{font-size:clamp(2.5rem,12vw,4.2rem)}
  .case-section{padding:56px 0}
  .case-next{padding:56px 0 72px}
}