/* =====================================================
   PORTFOLIO — DIGITAL PRO
   ===================================================== */

:root{
    --pf-navy:#071225;
    --pf-navy-2:#0b1a38;
    --pf-blue:#2f73ff;
    --pf-text:#0d1830;
    --pf-muted:#667289;
    --pf-line:#dfe6ef;
    --pf-bg:#f4f7fb;
}

.portfolio-page{
    overflow:hidden;
    color:var(--pf-text);
    background:var(--pf-bg);
}

.portfolio-kicker{
    margin:0 0 18px;
    color:#79a8ff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.2em;
    text-transform:uppercase;
}

.portfolio-kicker--dark{
    color:var(--pf-blue);
}

.portfolio-hero{
    position:relative;
    overflow:hidden;
    padding:110px 0 0;
    color:#fff;
    background:
        radial-gradient(circle at 82% 12%,rgba(54,111,255,.25),transparent 30%),
        radial-gradient(circle at 10% 90%,rgba(26,89,225,.14),transparent 30%),
        linear-gradient(135deg,#050d1e 0%,#08152e 48%,#12366f 100%);
}

.portfolio-hero::before{
    position:absolute;
    top:-320px;
    right:-140px;
    width:720px;
    height:720px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:50%;
    content:"";
}

.portfolio-hero::after{
    position:absolute;
    right:10%;
    bottom:110px;
    width:420px;
    height:420px;
    border:1px solid rgba(255,255,255,.05);
    border-radius:50%;
    content:"";
}

.portfolio-hero__grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1.22fr) minmax(320px,.55fr);
    gap:90px;
    align-items:end;
    padding-bottom:90px;
}

.portfolio-hero h1{
    max-width:900px;
    margin:0;
    font-size:clamp(58px,6.4vw,98px);
    line-height:.94;
    letter-spacing:-.065em;
}

.portfolio-hero h1 span{
    color:#67a0ff;
}

.portfolio-hero__lead{
    max-width:690px;
    margin:28px 0 0;
    color:rgba(255,255,255,.68);
    font-size:17px;
    line-height:1.75;
}

.portfolio-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:34px;
}

.portfolio-btn{
    display:inline-flex;
    min-height:48px;
    align-items:center;
    justify-content:center;
    padding:0 22px;
    border:1px solid transparent;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    transition:.22s ease;
}

.portfolio-btn--primary{
    color:#fff;
    background:var(--pf-blue);
    box-shadow:0 14px 30px rgba(47,115,255,.28);
}

.portfolio-btn--primary:hover{
    transform:translateY(-2px);
    background:#1f63ec;
}

.portfolio-btn--ghost{
    color:#fff;
    border-color:rgba(255,255,255,.2);
    background:rgba(255,255,255,.04);
}

.portfolio-btn--ghost:hover{
    border-color:rgba(255,255,255,.4);
    background:rgba(255,255,255,.08);
}

.portfolio-hero__panel{
    position:relative;
    padding:34px 32px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    background:rgba(255,255,255,.055);
    box-shadow:0 24px 60px rgba(0,0,0,.18);
    backdrop-filter:blur(16px);
}

.portfolio-hero__panel-label{
    display:block;
    margin-bottom:24px;
    color:#7caaff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.portfolio-hero__metric{
    display:grid;
    grid-template-columns:100px 1fr;
    gap:14px;
    align-items:center;
    padding:20px 0;
    border-top:1px solid rgba(255,255,255,.1);
}

.portfolio-hero__metric strong{
    font-size:29px;
    line-height:1;
}

.portfolio-hero__metric span{
    color:rgba(255,255,255,.6);
    font-size:12px;
    line-height:1.45;
}

.portfolio-hero__marquee{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    min-height:66px;
    border-top:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.36);
    font-size:10px;
    font-weight:800;
    letter-spacing:.2em;
}

.portfolio-hero__marquee i{
    width:4px;
    height:4px;
    border-radius:50%;
    background:#3c7cff;
}

.portfolio-filterbar{
    position:sticky;
    top:0;
    z-index:20;
    padding:28px 0;
    border-bottom:1px solid var(--pf-line);
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(18px);
}

.portfolio-filterbar__inner{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
}

.portfolio-filterbar h2{
    margin:0;
    font-size:clamp(30px,3vw,46px);
    letter-spacing:-.045em;
}

.portfolio-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.portfolio-filter{
    min-height:40px;
    padding:0 16px;
    border:1px solid #dbe3ee;
    border-radius:999px;
    color:#42506a;
    background:#fff;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    transition:.2s ease;
}

.portfolio-filter:hover,
.portfolio-filter.is-active{
    color:#fff;
    border-color:var(--pf-blue);
    background:var(--pf-blue);
    box-shadow:0 10px 22px rgba(47,115,255,.18);
}

.portfolio-projects{
    padding:74px 0 100px;
}

.portfolio-projects__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px;
}

.project-card{
    overflow:hidden;
    border:1px solid var(--pf-line);
    border-radius:24px;
    background:#fff;
    box-shadow:0 16px 42px rgba(15,23,42,.06);
    transition:.28s ease;
}

.project-card--hero{
    grid-column:span 2;
}

.project-card:hover{
    transform:translateY(-8px);
    border-color:#c8d8ec;
    box-shadow:0 28px 70px rgba(15,23,42,.11);
}

.project-card.is-hidden{
    display:none;
}

.project-card__open{
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
}

.project-card__visual{
    position:relative;
    display:block;
    overflow:hidden;
    min-height:360px;
    padding:38px;
}

.project-card--hero .project-card__visual{
    min-height:500px;
}

.project-card__visual--navy{
    background:
        radial-gradient(circle at 82% 18%,rgba(98,158,255,.32),transparent 24%),
        linear-gradient(135deg,#07152f,#1a448b);
}

.project-card__visual--sand{
    background:
        radial-gradient(circle at 80% 16%,rgba(255,255,255,.46),transparent 24%),
        linear-gradient(135deg,#eadfce,#cbb28f);
}

.project-card__visual--mint{
    background:
        radial-gradient(circle at 82% 16%,rgba(255,255,255,.42),transparent 24%),
        linear-gradient(135deg,#d8eee6,#9dc7b4);
}

.project-card__visual--ice{
    background:
        radial-gradient(circle at 82% 16%,rgba(255,255,255,.45),transparent 24%),
        linear-gradient(135deg,#d7e4ff,#9ebcf8);
}

.project-card__visual--graphite{
    background:
        radial-gradient(circle at 82% 16%,rgba(255,255,255,.18),transparent 24%),
        linear-gradient(135deg,#272d38,#10141c);
}

.project-card__visual--violet{
    background:
        radial-gradient(circle at 82% 16%,rgba(255,255,255,.36),transparent 24%),
        linear-gradient(135deg,#d8d2ff,#9f91ec);
}

.project-card__browser{
    position:relative;
    display:block;
    width:92%;
    margin:28px auto 0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.65);
    border-radius:18px;
    background:#fff;
    box-shadow:0 30px 65px rgba(7,18,37,.26);
    transform:perspective(1300px) rotateX(2deg) rotateY(-3deg);
    transition:.35s ease;
}

.project-card:hover .project-card__browser{
    transform:perspective(1300px) rotateX(0) rotateY(0) scale(1.018);
}

.project-card__browser-top{
    display:flex;
    align-items:center;
    gap:6px;
    height:36px;
    padding:0 13px;
    border-bottom:1px solid #e6ebf2;
    background:#f8fafc;
}

.project-card__browser-top i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#c4cedb;
}

.project-card__browser-top b{
    width:44%;
    height:13px;
    margin-left:auto;
    border-radius:999px;
    background:#e7ecf3;
}

.project-card__screen{
    display:block;
    padding:18px;
}

.project-card__screen-nav{
    display:block;
    width:100%;
    height:20px;
    margin-bottom:18px;
    border-radius:5px;
    background:
        linear-gradient(90deg,#2870f0 0 38px,transparent 38px 62%,#d9e2ee 62% 68%,transparent 68% 73%,#d9e2ee 73% 79%,transparent 79% 84%,#d9e2ee 84% 90%,transparent 90%);
}

.project-card__screen-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:18px;
    min-height:190px;
    padding:30px;
    border-radius:14px;
    background:#eef3fa;
}

.project-card__copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
}

.project-card__copy i,
.project-card__copy b,
.project-card__copy em,
.project-card__copy strong{
    display:block;
    border-radius:999px;
}

.project-card__copy i{
    width:56px;
    height:5px;
    background:#72a6ff;
}

.project-card__copy b{
    width:92%;
    height:12px;
    background:#142342;
}

.project-card__copy b:nth-of-type(2){
    width:68%;
}

.project-card__copy em{
    width:82%;
    height:6px;
    background:#aeb9c9;
}

.project-card__copy strong{
    width:84px;
    height:26px;
    margin-top:6px;
    background:#2f73ff;
}

.project-card__image{
    position:relative;
    overflow:hidden;
    border-radius:12px;
    background:
        radial-gradient(circle at 66% 30%,rgba(255,255,255,.52),transparent 18%),
        linear-gradient(150deg,#6d9fe9,#163a7e);
}

.project-card__image::before,
.project-card__image::after{
    position:absolute;
    content:"";
    background:rgba(255,255,255,.18);
}

.project-card__image::before{
    right:-20px;
    bottom:-18px;
    width:110px;
    height:110px;
    border-radius:18px;
    transform:rotate(22deg);
}

.project-card__image::after{
    top:24px;
    left:24px;
    width:58px;
    height:58px;
    border-radius:50%;
}

.project-card__tiles{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:12px;
}

.project-card__tiles i{
    height:58px;
    border:1px solid #e2e8f0;
    border-radius:9px;
    background:#fff;
}

.project-card__zoom{
    position:absolute;
    right:26px;
    bottom:24px;
    display:inline-flex;
    min-height:40px;
    align-items:center;
    padding:0 16px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:999px;
    color:#fff;
    background:rgba(4,12,28,.36);
    backdrop-filter:blur(12px);
    font-size:11px;
    font-weight:800;
    opacity:0;
    transform:translateY(10px);
    transition:.22s ease;
}

.project-card:hover .project-card__zoom{
    opacity:1;
    transform:translateY(0);
}

.project-card__content{
    padding:28px 30px 32px;
}

.project-card__topline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}

.project-card__topline > span{
    color:#9ca8b9;
    font-size:11px;
    font-weight:800;
}

.project-card__tags{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:7px;
}

.project-card__tags span{
    padding:6px 9px;
    border:1px solid #e0e7f0;
    border-radius:999px;
    color:#68758a;
    background:#fafbfd;
    font-size:9px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.project-card h3{
    margin:0 0 10px;
    font-size:clamp(27px,2.5vw,42px);
    line-height:1.05;
    letter-spacing:-.045em;
}

.project-card p{
    max-width:740px;
    margin:0;
    color:var(--pf-muted);
    font-size:14px;
    line-height:1.7;
}

.portfolio-statement{
    padding:100px 0;
    color:#fff;
    background:
        radial-gradient(circle at 88% 14%,rgba(53,113,255,.18),transparent 24%),
        var(--pf-navy);
}

.portfolio-statement__grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:90px;
}

.portfolio-statement h2{
    max-width:700px;
    margin:0;
    font-size:clamp(44px,5vw,74px);
    line-height:.98;
    letter-spacing:-.055em;
}

.portfolio-statement__points{
    display:grid;
    gap:1px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    background:rgba(255,255,255,.08);
}

.portfolio-statement__points article{
    display:grid;
    grid-template-columns:54px 180px 1fr;
    gap:20px;
    align-items:start;
    padding:28px;
    background:#0b1935;
}

.portfolio-statement__points span{
    color:#6fa2ff;
    font-size:11px;
    font-weight:800;
}

.portfolio-statement__points h3{
    margin:0;
    font-size:18px;
}

.portfolio-statement__points p{
    margin:0;
    color:rgba(255,255,255,.56);
    font-size:13px;
    line-height:1.6;
}

.portfolio-cta{
    padding:86px 0 96px;
    background:#fff;
}

.portfolio-cta__box{
    display:grid;
    grid-template-columns:1fr auto;
    gap:40px;
    align-items:center;
    padding:58px;
    border-radius:28px;
    color:#fff;
    background:
        radial-gradient(circle at 85% 20%,rgba(98,157,255,.28),transparent 24%),
        linear-gradient(135deg,#08152f,#16417f);
    box-shadow:0 28px 70px rgba(8,21,47,.18);
}

.portfolio-cta h2{
    max-width:820px;
    margin:0;
    font-size:clamp(38px,4.5vw,66px);
    line-height:.98;
    letter-spacing:-.055em;
}

.portfolio-btn--light{
    color:#0c1b36;
    background:#fff;
}

.portfolio-btn--light:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(0,0,0,.16);
}

/* LIGHTBOX */

.portfolio-lightbox{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    place-items:center;
    padding:30px;
}

.portfolio-lightbox.is-open{
    display:grid;
}

.portfolio-lightbox__backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,8,20,.84);
    backdrop-filter:blur(12px);
}

.portfolio-lightbox__dialog{
    position:relative;
    z-index:1;
    width:min(1180px,100%);
    max-height:calc(100vh - 60px);
    overflow:auto;
    border:1px solid rgba(255,255,255,.12);
    border-radius:26px;
    background:#fff;
    box-shadow:0 40px 120px rgba(0,0,0,.42);
}

.portfolio-lightbox__close{
    position:absolute;
    top:18px;
    right:18px;
    z-index:3;
    display:grid;
    width:44px;
    height:44px;
    place-items:center;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;
    color:#fff;
    background:rgba(5,14,30,.42);
    font-size:26px;
    cursor:pointer;
    backdrop-filter:blur(10px);
}

.portfolio-lightbox__visual{
    min-height:560px;
    padding:58px;
}

.portfolio-lightbox__visual[data-theme="navy"]{background:linear-gradient(135deg,#07152f,#1a448b)}
.portfolio-lightbox__visual[data-theme="sand"]{background:linear-gradient(135deg,#eadfce,#cbb28f)}
.portfolio-lightbox__visual[data-theme="mint"]{background:linear-gradient(135deg,#d8eee6,#9dc7b4)}
.portfolio-lightbox__visual[data-theme="ice"]{background:linear-gradient(135deg,#d7e4ff,#9ebcf8)}
.portfolio-lightbox__visual[data-theme="graphite"]{background:linear-gradient(135deg,#272d38,#10141c)}
.portfolio-lightbox__visual[data-theme="violet"]{background:linear-gradient(135deg,#d8d2ff,#9f91ec)}

.portfolio-lightbox__browser{
    overflow:hidden;
    width:92%;
    margin:auto;
    border-radius:20px;
    background:#fff;
    box-shadow:0 34px 80px rgba(6,17,37,.28);
}

.portfolio-lightbox__browser-top{
    display:flex;
    align-items:center;
    gap:7px;
    height:42px;
    padding:0 15px;
    border-bottom:1px solid #e5eaf1;
    background:#f8fafc;
}

.portfolio-lightbox__browser-top i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#c5ceda;
}

.portfolio-lightbox__browser-top b{
    width:46%;
    height:14px;
    margin-left:auto;
    border-radius:999px;
    background:#e7ecf3;
}

.portfolio-lightbox__screen{
    padding:24px;
}

.portfolio-lightbox__screen-nav{
    display:block;
    width:100%;
    height:24px;
    margin-bottom:22px;
    border-radius:6px;
    background:
        linear-gradient(90deg,#2f73ff 0 50px,transparent 50px 66%,#d9e2ee 66% 71%,transparent 71% 76%,#d9e2ee 76% 81%,transparent 81% 86%,#d9e2ee 86% 92%,transparent 92%);
}

.portfolio-lightbox__screen-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:24px;
    min-height:300px;
    padding:44px;
    border-radius:18px;
    background:#eef3fa;
}

.portfolio-lightbox__copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:14px;
}

.portfolio-lightbox__copy i,
.portfolio-lightbox__copy b,
.portfolio-lightbox__copy em,
.portfolio-lightbox__copy strong{
    display:block;
    border-radius:999px;
}

.portfolio-lightbox__copy i{width:72px;height:6px;background:#72a6ff}
.portfolio-lightbox__copy b{width:90%;height:16px;background:#142342}
.portfolio-lightbox__copy b:nth-of-type(2){width:66%}
.portfolio-lightbox__copy em{width:78%;height:7px;background:#aeb9c9}
.portfolio-lightbox__copy strong{width:110px;height:34px;margin-top:8px;background:#2f73ff}

.portfolio-lightbox__image{
    position:relative;
    overflow:hidden;
    border-radius:16px;
    background:
        radial-gradient(circle at 66% 30%,rgba(255,255,255,.5),transparent 18%),
        linear-gradient(150deg,#6d9fe9,#163a7e);
}

.portfolio-lightbox__image::before,
.portfolio-lightbox__image::after{
    position:absolute;
    content:"";
    background:rgba(255,255,255,.18);
}

.portfolio-lightbox__image::before{
    right:-20px;
    bottom:-20px;
    width:160px;
    height:160px;
    border-radius:22px;
    transform:rotate(22deg);
}

.portfolio-lightbox__image::after{
    top:36px;
    left:36px;
    width:80px;
    height:80px;
    border-radius:50%;
}

.portfolio-lightbox__tiles{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:16px;
}

.portfolio-lightbox__tiles i{
    height:76px;
    border:1px solid #e2e8f0;
    border-radius:11px;
    background:#fff;
}

.portfolio-lightbox__content{
    padding:34px 40px 42px;
}

.portfolio-lightbox__content > span{
    color:#2f73ff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.portfolio-lightbox__content h2{
    margin:10px 0 12px;
    font-size:clamp(34px,4vw,58px);
    line-height:1;
    letter-spacing:-.05em;
}

.portfolio-lightbox__content p{
    max-width:780px;
    margin:0;
    color:#68758a;
    font-size:15px;
    line-height:1.7;
}

body.has-lightbox{
    overflow:hidden;
}

@media (max-width:1050px){
    .portfolio-hero__grid,
    .portfolio-statement__grid{
        grid-template-columns:1fr;
        gap:44px;
    }

    .portfolio-projects__grid{
        grid-template-columns:1fr;
    }

    .project-card--hero{
        grid-column:auto;
    }

    .portfolio-filterbar__inner{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media (max-width:760px){
    .portfolio-hero{
        padding-top:76px;
    }

    .portfolio-hero h1{
        font-size:clamp(50px,14vw,74px);
    }

    .portfolio-hero__grid{
        padding-bottom:60px;
    }

    .portfolio-hero__marquee{
        justify-content:flex-start;
        overflow:hidden;
        padding-left:20px;
        white-space:nowrap;
    }

    .portfolio-filterbar{
        position:relative;
    }

    .portfolio-projects{
        padding:54px 0 70px;
    }

    .project-card__visual,
    .project-card--hero .project-card__visual{
        min-height:300px;
        padding:20px;
    }

    .project-card__browser{
        width:100%;
        margin-top:38px;
    }

    .project-card__screen-grid{
        grid-template-columns:1fr;
        min-height:210px;
        padding:20px;
    }

    .project-card__image{
        min-height:88px;
    }

    .portfolio-statement{
        padding:72px 0;
    }

    .portfolio-statement__points article{
        grid-template-columns:42px 1fr;
    }

    .portfolio-statement__points p{
        grid-column:2;
    }

    .portfolio-cta{
        padding:62px 0 72px;
    }

    .portfolio-cta__box{
        grid-template-columns:1fr;
        padding:38px 28px;
    }

    .portfolio-lightbox{
        padding:12px;
    }

    .portfolio-lightbox__visual{
        min-height:360px;
        padding:26px 16px;
    }

    .portfolio-lightbox__browser{
        width:100%;
    }

    .portfolio-lightbox__screen{
        padding:14px;
    }

    .portfolio-lightbox__screen-grid{
        grid-template-columns:1fr;
        min-height:220px;
        padding:22px;
    }

    .portfolio-lightbox__image{
        min-height:110px;
    }

    .portfolio-lightbox__content{
        padding:28px 24px 34px;
    }
}

@media (prefers-reduced-motion:reduce){
    .project-card,
    .project-card__browser,
    .project-card__zoom,
    .portfolio-btn{
        transition:none;
    }

    .project-card:hover,
    .portfolio-btn:hover{
        transform:none;
    }
}

/* =====================================================
   UKŁAD PORTFOLIO — 4 PROJEKTY W JEDNYM RZĘDZIE
   ===================================================== */

.portfolio-page .container,
.portfolio-hero .container,
.portfolio-filterbar .container,
.portfolio-projects .container,
.portfolio-statement .container,
.portfolio-cta .container{
    width:min(1480px,calc(100% - 56px));
    max-width:none;
    margin-inline:auto;
}

/* HERO */

.portfolio-hero{
    padding-top:94px;
}

.portfolio-hero__grid{
    grid-template-columns:minmax(0,1.35fr) minmax(320px,.55fr);
    gap:72px;
    align-items:center;
    padding-bottom:80px;
}

.portfolio-hero__content{
    max-width:900px;
}

.portfolio-hero h1{
    max-width:900px;
    font-size:clamp(54px,5vw,84px);
    line-height:.96;
    letter-spacing:-.058em;
}

.portfolio-hero__lead{
    max-width:720px;
    font-size:17px;
}

.portfolio-hero__panel{
    max-width:380px;
    margin-left:auto;
}

/* FILTRY */

.portfolio-filterbar{
    top:72px;
}

.portfolio-filterbar__inner{
    align-items:center;
}

/* SIATKA 4 KOLUMNY */

.portfolio-projects{
    padding:72px 0 92px;
}

.portfolio-projects__grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
    align-items:stretch;
}

.project-card,
.project-card--hero{
    grid-column:auto;
    min-width:0;
    height:100%;
    border-radius:20px;
}

/* MNIEJSZE KARTY */

.project-card__visual,
.project-card--hero .project-card__visual{
    min-height:230px;
    padding:16px;
}

.project-card__browser,
.project-card--hero .project-card__browser{
    width:100%;
    margin-top:30px;
    border-radius:14px;
    transform:perspective(1000px) rotateX(1.5deg) rotateY(-2deg);
}

.project-card__browser-top{
    height:28px;
    padding:0 9px;
    gap:5px;
}

.project-card__browser-top i{
    width:5px;
    height:5px;
}

.project-card__browser-top b{
    height:10px;
}

.project-card__screen{
    padding:10px;
}

.project-card__screen-nav{
    height:14px;
    margin-bottom:10px;
    border-radius:4px;
    background:
        linear-gradient(
            90deg,
            #2870f0 0 24px,
            transparent 24px 60%,
            #d9e2ee 60% 67%,
            transparent 67% 73%,
            #d9e2ee 73% 80%,
            transparent 80% 86%,
            #d9e2ee 86% 93%,
            transparent 93%
        );
}

.project-card__screen-grid,
.project-card--hero .project-card__screen-grid{
    grid-template-columns:1.1fr .9fr;
    gap:10px;
    min-height:112px;
    padding:14px;
    border-radius:10px;
}

.project-card__copy{
    gap:6px;
}

.project-card__copy i{
    width:38px;
    height:3px;
}

.project-card__copy b{
    height:7px;
}

.project-card__copy em{
    height:4px;
}

.project-card__copy strong{
    width:52px;
    height:17px;
    margin-top:3px;
}

.project-card__image{
    min-width:0;
    border-radius:9px;
}

.project-card__image::before{
    right:-12px;
    bottom:-10px;
    width:68px;
    height:68px;
    border-radius:12px;
}

.project-card__image::after{
    top:14px;
    left:14px;
    width:32px;
    height:32px;
}

.project-card__tiles{
    gap:6px;
    margin-top:7px;
}

.project-card__tiles i{
    height:28px;
    border-radius:6px;
}

.project-card__zoom{
    right:14px;
    bottom:12px;
    min-height:32px;
    padding:0 11px;
    font-size:9px;
}

/* TREŚĆ KART */

.project-card__content{
    display:flex;
    min-height:188px;
    flex-direction:column;
    padding:18px 18px 20px;
}

.project-card__topline{
    align-items:flex-start;
    margin-bottom:12px;
}

.project-card__topline > span{
    font-size:9px;
}

.project-card__tags{
    gap:4px;
}

.project-card__tags span{
    padding:4px 6px;
    font-size:7px;
}

.project-card h3{
    margin:0 0 8px;
    font-size:clamp(20px,1.45vw,26px);
    line-height:1.08;
    letter-spacing:-.035em;
}

.project-card p{
    margin-top:auto;
    font-size:12px;
    line-height:1.55;
}

/* SEKCJA STRATEGICZNA */

.portfolio-statement{
    padding:88px 0;
}

.portfolio-statement__grid{
    grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr);
    gap:84px;
    align-items:center;
}

.portfolio-statement h2{
    font-size:clamp(48px,4vw,70px);
}

.portfolio-statement__points article{
    grid-template-columns:44px 170px 1fr;
    padding:28px;
}

/* CTA */

.portfolio-cta__box{
    padding:54px 58px;
}

.portfolio-cta h2{
    font-size:clamp(40px,3.8vw,62px);
}

/* LIGHTBOX POZOSTAJE DUŻY */

.portfolio-lightbox__dialog{
    width:min(1240px,100%);
}

.portfolio-lightbox__visual{
    min-height:580px;
    padding:58px;
}

/* 3 KOLUMNY */

@media (max-width:1280px){
    .portfolio-page .container,
    .portfolio-hero .container,
    .portfolio-filterbar .container,
    .portfolio-projects .container,
    .portfolio-statement .container,
    .portfolio-cta .container{
        width:min(100% - 40px,1180px);
    }

    .portfolio-projects__grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .portfolio-hero__grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .portfolio-hero__panel{
        display:grid;
        width:100%;
        max-width:none;
        grid-template-columns:repeat(3,1fr);
        gap:18px;
        margin:0;
    }

    .portfolio-hero__panel-label{
        grid-column:1/-1;
        margin-bottom:0;
    }

    .portfolio-hero__metric{
        grid-template-columns:1fr;
    }

    .portfolio-statement__grid{
        grid-template-columns:1fr;
        gap:44px;
    }
}

/* 2 KOLUMNY */

@media (max-width:900px){
    .portfolio-page .container,
    .portfolio-hero .container,
    .portfolio-filterbar .container,
    .portfolio-projects .container,
    .portfolio-statement .container,
    .portfolio-cta .container{
        width:min(100% - 28px,840px);
    }

    .portfolio-filterbar{
        position:relative;
        top:auto;
    }

    .portfolio-filterbar__inner{
        align-items:flex-start;
        flex-direction:column;
    }

    .portfolio-projects__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px;
    }

    .project-card__visual,
    .project-card--hero .project-card__visual{
        min-height:250px;
    }

    .portfolio-statement__points article{
        grid-template-columns:38px 1fr;
        gap:14px;
    }

    .portfolio-statement__points p{
        grid-column:2;
    }

    .portfolio-cta__box{
        grid-template-columns:1fr;
        padding:38px 28px;
    }
}

/* 1 KOLUMNA */

@media (max-width:620px){
    .portfolio-page .container,
    .portfolio-hero .container,
    .portfolio-filterbar .container,
    .portfolio-projects .container,
    .portfolio-statement .container,
    .portfolio-cta .container{
        width:min(100% - 20px,560px);
    }

    .portfolio-hero{
        padding-top:68px;
    }

    .portfolio-hero h1{
        font-size:clamp(44px,13vw,60px);
    }

    .portfolio-hero__lead{
        font-size:16px;
    }

    .portfolio-hero__panel{
        grid-template-columns:1fr;
    }

    .portfolio-projects{
        padding:50px 0 64px;
    }

    .portfolio-projects__grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .project-card__visual,
    .project-card--hero .project-card__visual{
        min-height:270px;
        padding:14px;
    }

    .project-card__browser,
    .project-card--hero .project-card__browser{
        margin-top:42px;
    }

    .project-card__screen-grid,
    .project-card--hero .project-card__screen-grid{
        min-height:138px;
        padding:16px;
    }

    .project-card__content{
        min-height:0;
        padding:20px;
    }

    .project-card h3{
        font-size:24px;
    }

    .project-card p{
        margin-top:0;
        font-size:13px;
    }

    .portfolio-statement{
        padding:68px 0;
    }

    .portfolio-statement h2{
        font-size:clamp(42px,12vw,58px);
    }

    .portfolio-lightbox{
        padding:10px;
    }

    .portfolio-lightbox__visual{
        min-height:340px;
        padding:20px 10px;
    }
}

@media (prefers-reduced-motion:reduce){
    .project-card,
    .project-card__browser,
    .project-card__zoom,
    .portfolio-btn{
        transition:none;
    }

    .project-card:hover,
    .portfolio-btn:hover{
        transform:none;
    }
}