/* ══════════════════════════════════════════════════════════════════════
   zlyadres.pl — arkusz wspólny podstron projektów
   Zastępuje ten sam CSS powielony w pięciu plikach. Zmiana tutaj działa
   od razu na wszystkich. Strona główna i polityka mają własne style
   wstawione w treści, bo są jednorazowe i krytyczne dla pierwszego widoku.
   ══════════════════════════════════════════════════════════════════════ */
/* Kroje hostowane u nas: żadnego zapytania do Google zanim użytkownik wyrazi zgodę.
       Pliki okrojone do znaków używanych w serwisie (łacina + polskie diakrytyki). */
    @font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/playfair-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:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/playfair-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}
    @font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;src:url('../fonts/playfair-italic-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:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;src:url('../fonts/playfair-italic-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}
    @font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/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:300 700;font-display:swap;src:url('../fonts/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}
    @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 700;font-display:swap;src:url('../fonts/jetbrains-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:'JetBrains Mono';font-style:normal;font-weight:500 700;font-display:swap;src:url('../fonts/jetbrains-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}
    *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
    /* Atrybuty width/height na <img> podają proporcje i zapobiegają skokowi
       layoutu, ale bez tej reguły wymuszałyby też wysokość tam, gdzie CSS
       ustawia samą szerokość. Reguły z klasą (np. .logo-img) nadal wygrywają. */
    img { height:auto; }
    :root {
      --cream: #f0ebe0;
      --cream2: #e8e2d4;
      --dark: #080808;
      --ink: #1c1a15;
      --ink2: #3a3730;
      --muted: #6d695d;
      --rainbow: linear-gradient(90deg,
        #e53935 0%, #fb8c00 14.2%, #fdd835 28.5%,
        #43a047 42.8%, #00acc1 57.1%, #1e88e5 71.4%, #8e24aa 100%);
    }
    html { scroll-behavior:smooth; }
    body { font-family:'Inter',sans-serif; background:var(--dark); color:#fff; overflow-x:hidden; }
    ::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:#111} ::-webkit-scrollbar-thumb{background:#555;border-radius:3px}

    nav#navbar {
      position:fixed; top:0; left:0; right:0; z-index:200;
      display:flex; align-items:center; justify-content:space-between;
      padding:18px 48px; background:rgba(8,8,8,0.92); backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(255,255,255,0.06);
    }
    .logo-wrap { display:flex; align-items:center; text-decoration:none; }
    .logo-img  { height:32px; width:auto; display:block; }
    .nav-links { display:flex; gap:40px; list-style:none; }
    .nav-links a { color:rgba(255,255,255,.75); text-decoration:none; font-size:.9rem; transition:color .2s; }
    .nav-links a:hover { color:#fff; }
    .nav-book { color:#fff; text-decoration:none; font-size:.9rem; font-family:'Playfair Display',serif; font-style:italic; font-weight:700; }
    .nav-book:hover { opacity:.75; }
    /* ══ HAMBURGER (mobile) ══ */
    .nav-burger {
      display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
      width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0; z-index:230;
    }
    .nav-burger span { display:block; width:100%; height:2px; background:#fff; border-radius:2px; transition:transform .3s, opacity .3s; }
    .nav-burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .nav-burger.open span:nth-child(2) { opacity:0; }
    .nav-burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
    .nav-scrim {
      position:fixed; inset:0; background:rgba(0,0,0,.55);
      opacity:0; pointer-events:none; transition:opacity .3s; z-index:190;
    }
    .nav-scrim.open { opacity:1; pointer-events:auto; }
    body.nav-open { overflow:hidden; }

    .rainbow-bar { height:5px; background:var(--rainbow); width:100%; }

    .project-hero {
      padding:160px 48px 40px; max-width:900px; margin:0 auto;
      background:linear-gradient(180deg,#080814 0%,#0d0d1e 50%,#080814 100%);
    }
    .project-back {
      display:inline-block; margin-bottom:32px; color:rgba(255,255,255,.5);
      text-decoration:none; font-size:.85rem; transition:color .2s;
    }
    .project-back:hover { color:#fff; }
    .project-label { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.48); margin-bottom:16px; display:block; }

    /* ── Tytuł: chromatic-aberration glitch nawiązujący do hero-h1 na stronie głównej ── */
    .project-title {
      font-family:'Playfair Display',serif; font-size:clamp(2.2rem,5vw,3.6rem); font-weight:900;
      font-style:italic; color:#fff; letter-spacing:-.02em; margin-bottom:20px;
      cursor:default; transition:text-shadow .25s;
    }
    .project-title:hover { text-shadow:-3px 0 0 rgba(229,57,53,.55), 3px 0 0 rgba(30,136,229,.55); }

    .project-tagline { font-size:1.1rem; color:rgba(255,255,255,.65); margin-bottom:40px; max-width:640px; }

    .project-meta { display:flex; gap:48px; flex-wrap:wrap; margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); }
    .project-meta div span { display:block; }
    .project-meta .label { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:6px; }
    .project-meta .value { font-size:1rem; color:#fff; }
    .project-desc { font-size:1.05rem; line-height:1.8; color:rgba(255,255,255,.8); max-width:720px; }
    .project-desc + .project-desc { margin-top:22px; }
    .project-desc a { color:#fff; text-decoration:underline; text-underline-offset:3px; transition:opacity .2s; }
    .project-desc a:hover { opacity:.7; }

    .project-details { max-width:900px; margin:0 auto; padding:10px 48px 100px; background:#080814; }

    /* ══ LISTA FUNKCJI + STOS TECHNOLOGICZNY ══ */
    .project-subhead {
      font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
      color:rgba(255,255,255,.48); margin:44px 0 18px; display:block;
    }
    .project-list { list-style:none; max-width:720px; }
    .project-list li {
      position:relative; padding-left:26px; margin-bottom:14px;
      font-size:1rem; line-height:1.65; color:rgba(255,255,255,.8);
    }
    .project-list li::before {
      content:''; position:absolute; left:0; top:.62em;
      width:10px; height:2px; border-radius:2px; background:var(--rainbow);
    }
    .tech-stack { display:flex; flex-wrap:wrap; gap:10px; max-width:720px; }
    .tech-chip {
      font-family:'JetBrains Mono',monospace; font-size:.75rem; letter-spacing:.04em;
      color:rgba(255,255,255,.75); background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:7px 14px;
    }

    /* ══ REZULTATY — kafelki z liczbami ══ */
    .impact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; max-width:720px; margin-top:4px; }
    .impact-card { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:20px; }
    .impact-val { display:block; font-family:'JetBrains Mono',monospace; font-size:1.6rem; font-weight:700; color:#fff; margin-bottom:6px; }
    .impact-label { font-size:.85rem; line-height:1.45; color:rgba(255,255,255,.65); }

    /* ══ GALERIA ZRZUTÓW – RETRO MONITOR ══ */
    .shots-wrap { max-width:900px; margin:0 auto; padding:0 48px 110px; background:#080814; }
    .shots-label { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.48); margin-bottom:22px; display:block; text-align:center; }

    .shot-monitor {
      position:relative; max-width:640px; margin:0 auto;
      background:#111318; border-radius:22px; padding:18px 18px 34px;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.03);
    }
    .shot-monitor::after {
      content:''; position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
      width:36px; height:5px; border-radius:3px; background:rgba(255,255,255,.14);
    }
    .shot-frame {
      position:relative; border-radius:10px; overflow:hidden; aspect-ratio:16/10;
      display:flex; align-items:center; justify-content:center; text-align:center;
      box-shadow:inset 0 0 70px rgba(0,0,0,.45); background:#0d0d16;
    }
    .shot-slide {
      position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:10px; opacity:0; transition:opacity .5s ease;
    }
    .shot-slide.active { opacity:1; }
    .shot-slide .shot-tag {
      font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
      color:rgba(255,255,255,.85); background:rgba(0,0,0,.25); padding:6px 12px; border-radius:20px;
    }
    .shot-slide .shot-note {
      font-family:'JetBrains Mono',monospace; font-size:.68rem; color:rgba(255,255,255,.55); max-width:260px;
    }
    .shot-frame img { display:block; width:100%; height:100%; object-fit:contain; }
    /* Podpis slajdu nad zrzutem — nie zabiera miejsca obrazowi */
    .shot-slide .shot-caption {
      position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:3;
      font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
      color:rgba(255,255,255,.85); background:rgba(0,0,0,.45); padding:5px 12px; border-radius:20px;
      white-space:nowrap;
    }
    /* Linie skanowania CRT */
    .shot-frame::before {
      content:''; position:absolute; inset:0; pointer-events:none; z-index:2; mix-blend-mode:overlay;
      background:repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0px, rgba(255,255,255,.08) 1px, transparent 1px, transparent 3px);
      animation:scanMove 5s linear infinite;
    }
    @keyframes scanMove { 0% { transform:translateY(0); } 100% { transform:translateY(6px); } }

    .shot-nav { display:flex; align-items:center; justify-content:center; gap:18px; padding-top:20px; }
    .shot-btn {
      width:38px; height:38px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
      border-radius:6px; color:#fff; font-size:1rem; cursor:pointer; display:flex; align-items:center;
      justify-content:center; transition:background .2s;
    }
    .shot-btn:hover { background:rgba(255,255,255,.14); }
    .shot-dots { display:flex; gap:8px; }
    .shot-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.2); cursor:pointer; transition:background .2s, transform .2s; }
    .shot-dot.active { background:#fff; transform:scale(1.3); }

    footer { background:var(--cream); border-top:1px solid rgba(28,26,21,.15); padding:48px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; }
    .footer-logo { display:flex; align-items:center; }
    .footer-logo-img { height:28px; width:auto; display:block; filter:invert(1); }
    .footer-links { display:flex; gap:28px; flex-wrap:wrap; }
    .footer-links a { color:var(--muted); text-decoration:underline; font-size:.88rem; text-underline-offset:3px; }
    .footer-links a:hover { color:var(--ink); }
    .footer-copy { color:var(--muted); font-size:.8rem; width:100%; text-align:center; }

    @media(max-width:600px) {
      nav#navbar { backdrop-filter:none; -webkit-backdrop-filter:none; }
      .nav-burger { display:flex; }
      .nav-links {
        position:fixed; top:0; right:0; bottom:0; width:min(78vw,320px);
        background:rgba(8,8,8,0.98); backdrop-filter:blur(16px);
        flex-direction:column; align-items:stretch; gap:0;
        padding:100px 32px 40px; margin:0; list-style:none;
        box-shadow:-10px 0 40px rgba(0,0,0,.5);
        transform:translateX(100%); transition:transform .35s cubic-bezier(.23,1,.32,1);
        z-index:215;
      }
      .nav-links.open { transform:translateX(0); }
      .nav-links li { width:100%; }
      .nav-links a { display:block; padding:16px 0; font-size:1.05rem; border-bottom:1px solid rgba(255,255,255,.08); }
      .nav-book {
        position:fixed; left:20px; right:20px; bottom:24px; z-index:220;
        text-align:center; padding:14px; border:1px solid rgba(255,255,255,.2); border-radius:8px;
        background:rgba(255,255,255,.06);
        opacity:0; pointer-events:none; transform:translateY(16px);
        transition:opacity .3s, transform .3s;
      }
      .nav-book.open { opacity:1; pointer-events:auto; transform:translateY(0); }
      .project-hero { padding:120px 24px 10px; }
      .shots-wrap { padding:0 24px 60px; }
      .project-details { padding:10px 24px 70px; }
      footer { padding:32px 20px; }
    }

    /* ══ COOKIE BANNER ══ */
    .cookie-banner {
      position:fixed; left:20px; right:20px; bottom:20px; z-index:999;
      max-width:560px; margin:0 auto;
      background:rgba(15,15,25,.97); border:1px solid rgba(255,255,255,.12);
      border-radius:14px; padding:20px 22px;
      box-shadow:0 10px 40px rgba(0,0,0,.5);
      transform:translateY(160%); transition:transform .5s cubic-bezier(.23,1,.32,1);
    }
    .cookie-banner.show { transform:translateY(0); }
    .cookie-banner-main { display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:space-between; }
    .cookie-banner p { font-size:.83rem; color:rgba(255,255,255,.75); line-height:1.55; margin:0; flex:1 1 260px; }
    .cookie-banner a.cookie-link { color:rgba(255,255,255,.9); text-decoration:underline; }
    .cookie-actions { display:flex; gap:8px; flex-wrap:wrap; flex-shrink:0; }
    .cookie-btn {
      border-radius:8px; padding:10px 16px; font-weight:700; font-size:.8rem; cursor:pointer;
      font-family:'Inter',sans-serif; border:1px solid transparent; white-space:nowrap;
    }
    .cookie-btn.accept { background:var(--rainbow); color:#080808; }
    .cookie-btn.reject { background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
    .cookie-btn.customize { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.12); }
    .cookie-btn:hover { opacity:.85; }
    .cookie-panel { display:none; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); }
    .cookie-panel.show { display:block; }
    .cookie-cat { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:8px 0; }
    .cookie-cat-info strong { display:block; font-size:.85rem; color:#fff; margin-bottom:2px; }
    .cookie-cat-info span { font-size:.75rem; color:rgba(255,255,255,.5); line-height:1.4; }
    .cookie-cat input { flex-shrink:0; margin-top:4px; width:16px; height:16px; accent-color:#1e88e5; }
    .cookie-save { margin-top:10px; width:100%; }

    /* ══ MODUŁ CASE STUDY (opcjonalny, używa go projekt-3) ══ */
    .case-section { margin-bottom:36px; }
    .case-section h2 { font-size:1.25rem; font-weight:700; margin-bottom:12px; color:#fff; }
    .case-section p { font-size:1rem; line-height:1.75; color:rgba(255,255,255,.78); margin-bottom:14px; }
    .case-list { list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:10px; }
    .case-list li { position:relative; padding-left:26px; font-size:.95rem; line-height:1.6; color:rgba(255,255,255,.75); }
    /* Ten sam tęczowy myślnik co w .project-list — jedyne miejsce w serwisie,
       które łamało akcent marki litym błękitem. */
    .case-list li::before {
      content:''; position:absolute; left:0; top:.62em;
      width:10px; height:2px; border-radius:2px; background:var(--rainbow);
    }
    .case-list strong { color:#fff; }