/* ==========================================
   REALIZATIONS PAGE
========================================== */


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

.realizations-hero {
    position: relative;

    padding: 8rem 0 5rem;

    overflow: hidden;
}


.realizations-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    align-items: center;

    gap: 4rem;

    min-height: 560px;
}


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

.realizations-hero-content {
    position: relative;
    z-index: 2;

    max-width: 760px;
}


.realizations-hero .section-eyebrow {
	display: flex;

    align-items: center;

    gap: .8rem;

    margin-bottom: 2rem;

    color: #55a2f6;

    font-size: 13.6px;
    font-weight: 600;

    line-height: 1.2;

    letter-spacing: .14em;
    text-transform: uppercase;
}


.realizations-hero .section-eyebrow span {
    display: block;

    flex-shrink: 0;

    width: 32px;
    height: 2px;

    background: var(--color-accent);
}


.realizations-hero-title {
    max-width: 760px;

    margin: 0 0 1.75rem;

    color: var(--color-white);

    font-size: clamp(3rem, 5vw, 5.6rem);
    line-height: .98;
    font-weight: 700;

    letter-spacing: -.05em;
    white-space: normal;
}


.realizations-hero-title span {
    display: block;

    color: var(--color-primary);
}


.realizations-hero-text {
    max-width: 720px;
}


.realizations-hero-text p {
    margin: 0 0 1.25rem;

    color: var(--color-text-muted);

    font-size: 1.05rem;
    line-height: 1.7;
}


.realizations-hero-text strong {
    color: var(--color-white);
    font-weight: 600;
}


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

.realizations-hero-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 1rem;

    margin-top: 2rem;
}


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

.realizations-hero-visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 520px;
}


.realizations-hero-image {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 620px;
}


.realizations-hero-image img {
    display: block;

    width: 100%;
    height: auto;
}


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

.realizations-hero-visual::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 80%;
    height: 70%;

    background: rgba(77, 124, 255, .18);

    filter: blur(100px);

    transform: translate(-50%, -50%);

    pointer-events: none;
}


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

.realizations-hero-decoration {
    position: absolute;

    z-index: 1;

    width: 120px;
    height: 120px;

    pointer-events: none;
}


.realizations-hero-decoration span:first-child {
    position: absolute;

    width: 100%;
    height: 1px;

    background: rgba(77, 124, 255, .55);
}


.realizations-hero-decoration span:last-child {
    position: absolute;

    width: 1px;
    height: 100%;

    background: rgba(77, 124, 255, .55);
}


.decoration-top {
    top: 5%;
    right: 3%;
}


.decoration-top span:first-child {
    top: 0;
    right: 0;
}


.decoration-top span:last-child {
    top: 0;
    right: 0;
}


.decoration-bottom {
    bottom: 5%;
    left: 3%;
}


.decoration-bottom span:first-child {
    bottom: 0;
    left: 0;
}


.decoration-bottom span:last-child {
    bottom: 0;
    left: 0;
}

/* ==========================================
   REALIZATIONS SECTION
========================================== */

.realizations-section {
    padding: 2rem 0 7rem;
}

.realizations-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}


/* ==========================================
   REALIZATION CARD
========================================== */

.realization-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .85fr);

    width: 100%;

    min-height: 560px;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .16);
}


/* ==========================================
   LEFT SIDE — CONTENT
========================================== */

.realization-card-content {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    padding: 3rem 3.5rem;

    background:
        radial-gradient(
            circle at 0% 30%,
            rgba(255, 122, 0, .13),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            rgba(37, 27, 20, .98),
            rgba(11, 18, 30, 1)
        );

    border: 1px solid rgba(255, 122, 0, .22);
}


/* orange ambient light */

.realization-card-content::before {
    content: "";

    position: absolute;

    top: -30%;
    left: -20%;

    width: 65%;
    aspect-ratio: 1;

    border-radius: 50%;

    background: rgba(255, 122, 0, .08);

    filter: blur(90px);

    pointer-events: none;
}


.realization-card-content > * {
    position: relative;
    z-index: 1;
}


/* ==========================================
   TAGS
========================================== */

.realization-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;

    margin-bottom: 1.25rem;
}


.realization-card-tag {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    padding: .45rem .75rem;

    border: 1px solid rgba(77, 124, 255, .35);
    border-radius: 999px;

    background: rgba(77, 124, 255, .08);

    color: #8cabff;

    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;

    white-space: nowrap;
}

/* ==========================================
   TITLE
========================================== */

.realization-card-title {
    max-width: 720px;

    margin: 0 0 2.75rem;

    color: var(--color-white);

    font-size: clamp(2.3rem, 3.5vw, 4.4rem);
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -.045em;
}


/* ==========================================
   INFO BLOCKS
========================================== */

.realization-card-info {
    padding: 1.25rem 0;

    border-top: 1px solid rgba(255, 255, 255, .08);
}


.realization-card-info-label {
    display: flex;
    align-items: center;

    gap: .7rem;

    margin-bottom: .65rem;

    color: #ff9a3d;

    font-size: .78rem;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;
}


.realization-card-info-label::before {
    content: "";

    display: block;

    width: 24px;
    height: 2px;

    background: var(--color-accent, #ff7a00);

    border-radius: 999px;
}


.realization-card-info p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: .98rem;
    line-height: 1.65;
}


/* ==========================================
   QUOTE
========================================== */

.realization-card-quote {
    position: relative;

    margin: 2rem -3.5rem -3rem;
    padding: 2rem 3.5rem 2rem 5rem;

    border: 0;
    color: var(--color-white);

    font-size: 1.2rem;
    line-height: 1.55;
    font-style: normal;
    font-weight: 400;
}


.realization-card-quote::before {
    content: "“";

    position: absolute;

    top: 1.2rem;
    left: 2.5rem;

    color: #ff7a00;

    font-family: Georgia, serif;
    font-size: 4.5rem;
    line-height: 1;

    font-weight: 700;
}


/* ==========================================
   RIGHT SIDE — RESULT
========================================== */

.realization-card-result {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    min-width: 0;

    padding: 2.5rem 3rem;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(77, 124, 255, .16),
            transparent 58%
        ),
        linear-gradient(
            135deg,
            rgba(10, 27, 58, .98),
            rgba(5, 15, 32, 1)
        );

    border: 1px solid rgba(77, 124, 255, .24);
}


/* result glow */

.realization-card-result::before {
    content: "";

    position: absolute;

    width: 65%;
    aspect-ratio: 1;

    top: 50%;
    left: 50%;

    border-radius: 50%;

    background: rgba(77, 124, 255, .13);

    filter: blur(100px);

    transform: translate(-50%, -50%);

    pointer-events: none;
}


.realization-card-result::after {
    content: "";

    position: absolute;

    top: 2rem;
    right: 2rem;
    bottom: 2rem;
    left: 2rem;

    border: 1px solid rgba(91, 139, 255, .16);
    border-radius: 18px;

    pointer-events: none;
}


.realization-card-result > * {
    position: relative;
    z-index: 1;
}


/* ==========================================
   COMPANY LOGO
========================================== */

.realization-card-logo {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    margin-bottom: 1rem;
}

.realization-card-logo::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 120px;

    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, .08),
        transparent 70%
    );

    filter: blur(12px);
}

.realization-card-logo img {
    position: relative;
    z-index: 1;

    display: block;

    max-width: 200px;
    max-height: 80px;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* ==========================================
   MAIN RESULT
========================================== */

.realization-card-result-number {
    display: flex;
    align-items: baseline;
    justify-content: center;

    gap: .25rem;

    margin-bottom: 1rem;

    color: var(--color-primary);

    font-size: clamp(5rem, 8vw, 8rem);
    font-weight: 700;
    line-height: .9;

    letter-spacing: -.07em;

    text-shadow:
        0 0 45px rgba(77, 124, 255, .25);
}


.realization-card-result-number span {
    font-size: .5em;
    letter-spacing: -.04em;
}


/* main result description */

.realization-card-result-label {
    max-width: 420px;

    margin: 0 0 .65rem;

    color: rgba(255, 255, 255, .88);

    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.55;
}


/* additional effects */

.realization-card-result-description {
    max-width: 420px;

    color: var(--color-text-muted);

    font-size: .95rem;
    line-height: 1.7;
}


/* ==========================================
   EMPTY STATE
========================================== */

.realizations-empty {
    margin: 0;

    color: var(--color-text-muted);

    text-align: center;
}

/* ==========================================
   EFFECTS
========================================== */

.realization-card-result-description {
    display: flex;
    flex-direction: column;

    gap: .9rem;

    width: 100%;
    max-width: 380px;

    margin-top: 1.75rem;

    text-align: left;
}


.realization-card-effect {
    display: flex;
    align-items: flex-start;

    gap: .8rem;

    color: var(--color-text-muted);

    font-size: 1.1rem;
    line-height: 1.5;
}


.realization-card-effect-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    margin-top: .05rem;

    border: 1px solid var(--result-accent-border);
    border-radius: 50%;

    color: var(--result-accent);

    font-size: .72rem;
    font-weight: 700;
}


/* ==========================================
   ACCENT SYSTEM
========================================== */

/* WERSJA NIEBIESKA:
   lewa strona = niebieska
   prawa strona = pomarańczowa
*/

.realization-card--blue {
    --content-accent: #4d7cff;
    --content-accent-border: rgba(77, 124, 255, .35);

    --result-accent: #ff9a3d;
    --result-accent-border: rgba(255, 122, 0, .35);
}


/* ==========================================
   BLUE — LEFT / CONTENT
========================================== */

.realization-card--blue .realization-card-content {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(77, 124, 255, .14),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            rgba(13, 31, 63, .98),
            rgba(9, 17, 32, 1)
        );

    border-color: rgba(77, 124, 255, .22);
}


.realization-card--blue .realization-card-content::before {
    background: rgba(77, 124, 255, .08);
}


/* LEWA STRONA — NIEBIESKIE AKCENTY */

.realization-card--blue .realization-card-info-label {
    color: var(--content-accent);
}


.realization-card--blue .realization-card-info-label::before {
    background: var(--content-accent);
}


.realization-card--blue .realization-card-quote {
    color: var(--color-text);
}


/* ==========================================
   BLUE — RIGHT / RESULT
========================================== */

.realization-card--blue .realization-card-result {
    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(255, 122, 0, .15),
            transparent 55%
        ),
        linear-gradient(
            135deg,
            rgba(50, 28, 15, .98),
            rgba(15, 18, 24, 1)
        );

    border-color: rgba(255, 122, 0, .22);
}


.realization-card--blue .realization-card-result::before {
    background: rgba(255, 122, 0, .08);
}


/* PRAWA STRONA — POMARAŃCZOWE AKCENTY */

.realization-card--blue .realization-card-result-number {
    color: var(--result-accent);

    text-shadow:
        0 0 35px rgba(255, 122, 0, .25);
}


.realization-card--blue .realization-card-effect-icon {
    color: var(--result-accent);
    border-color: var(--result-accent-border);
}

/* BLUE ACCENT */

.realization-card--blue .realization-card-tag {
    border-color: rgba(77, 124, 255, .35);
    background: rgba(77, 124, 255, .08);
    color: #8cabff;
}

/* ORANGE ACCENT */

.realization-card--orange .realization-card-tag {
    border-color: rgba(255, 122, 0, .35);
    background: rgba(255, 122, 0, .08);
    color: #ffb36b;
}


/* ZNAK CYTATU — niebieski */

.realization-card--blue .realization-card-quote::before {
    color: var(--content-accent);
}

/* =========================================================
   PORTFOLIO SECTION
========================================================= */

.portfolio-section {
    position: relative;

    padding: 9rem 0 8rem;

    overflow: hidden;
}


/* Delikatne tło / światło */

.portfolio-section::before {
    content: "";

    position: absolute;
    top: 15%;
    left: 50%;

    width: 900px;
    height: 600px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(255, 122, 0, .045),
            transparent 65%
        );

    pointer-events: none;
}


.portfolio-section .container {
    position: relative;
    z-index: 1;
}


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

.portfolio-header {
    max-width: 760px;

    margin: 0 auto;

    text-align: center;
}


.portfolio-header .section-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: .9rem;

    margin-bottom: 1.5rem;

   color: #55a2f6;

    font-size: 13.6px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}


.portfolio-header .section-eyebrow span {
    display: block;

    flex-shrink: 0;

    width: 32px;
    height: 2px;

    background: var(--color-accent);
}


.portfolio-title {
    margin: 0;

    color: var(--color-text);

    font-size: clamp(2.8rem, 5vw, 4.8rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.04em;
}


.portfolio-title span {
    background: linear-gradient(
        90deg,
        #ff7a00,
        #ff9a4d
    );

    -webkit-background-clip: text;
    background-clip: text;

    color:var(--color-primary);
}


.portfolio-description {
    max-width: 650px;

    margin: 1.6rem auto 0;

    color: var(--color-text-muted);

    font-size: 1.08rem;
    line-height: 1.7;
}


/* =========================================================
   FILTERS
========================================================= */

.portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: .75rem;

    margin-top: 3rem;
}


.portfolio-filter {
    padding: .8rem 1.45rem;

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;

    background: rgba(255, 255, 255, .015);

    color: var(--color-text-muted);

    font-family: inherit;
    font-size: .92rem;

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}


.portfolio-filter:hover {
    border-color: rgba(255, 122, 0, .45);

    color: var(--color-text);

    transform: translateY(-2px);
}


.portfolio-filter.is-active {
    border-color: var(--color-primary);

    background: var(--color-primary);

    color: #fff;

    box-shadow:
        0 8px 25px rgba(255, 122, 0, .18);
}


/* =========================================================
   PORTFOLIO GRID
========================================================= */

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

    gap: 1.5rem;

    margin-top: 3.5rem;
}


/* =========================================================
   PORTFOLIO CARD
========================================================= */

.portfolio-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 28, 46, .96),
            rgba(7, 13, 23, .98)
        );

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.portfolio-card:hover {
    transform: translateY(-7px);

    border-color: rgba(255, 122, 0, .4);

    box-shadow:
        0 22px 55px rgba(0, 0, 0, .25);
}


/* =========================================================
   PORTFOLIO GALLERY
========================================================= */

.portfolio-card-gallery {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 10;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255, 122, 0, .08),
            rgba(77, 124, 255, .08)
        );
}


/* ==========================================
   TRACK
========================================== */

.portfolio-card-gallery-track {
    display: flex;

    width: 100%;
    height: 100%;

    transition: transform .55s ease;
    will-change: transform;
}


/* ==========================================
   SLIDE
========================================== */

.portfolio-card-gallery-slide {
    flex: 0 0 100%;

    width: 100%;
    height: 100%;
}


.portfolio-card-gallery-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* delikatny gradient jak wcześniej */

.portfolio-card-gallery::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 55%,
            rgba(5, 10, 18, .35)
        );

    pointer-events: none;
}


/* =========================================================
   ARROWS
========================================================= */

.portfolio-gallery-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;

    background: rgba(7, 13, 23, .75);

    color: #fff;

    font-size: 1.25rem;

    cursor: pointer;

    opacity: 0;

    transform: translateY(-50%);

    backdrop-filter: blur(8px);

    transition:
        opacity .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.portfolio-gallery-arrow--prev {
    left: 1rem;
}


.portfolio-gallery-arrow--next {
    right: 1rem;
}


/* pojawiają się po najechaniu */

.portfolio-card:hover .portfolio-gallery-arrow {
    opacity: 1;
}


/* hover pojedynczej strzałki */

.portfolio-gallery-arrow:hover {
    border-color: var(--color-primary);

    background: var(--color-primary);

    transform: translateY(-50%) scale(1.08);
}


/* =========================================================
   DOTS
========================================================= */

.portfolio-gallery-dots {
    position: absolute;
    bottom: .9rem;
    left: 50%;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: .45rem;

    transform: translateX(-50%);
}


.portfolio-gallery-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, .35);

    cursor: pointer;

    transition:
        width .25s ease,
        background .25s ease;
}


.portfolio-gallery-dot.is-active {
    width: 22px;

    border-radius: 999px;

    background: var(--color-primary);
}


/* =========================================================
   CONTENT
========================================================= */

.portfolio-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 1.6rem 1.6rem 1.35rem;
}


.portfolio-card-title {
    margin: 0;

    color: var(--color-text);

    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.2;
}


.portfolio-card-description {
    margin: .65rem 0 0;

    color: var(--color-text-muted);

    font-size: .98rem;
    line-height: 1.65;
}


/* =========================================================
   CARD FOOTER
========================================================= */

.portfolio-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-top: auto;
    padding-top: 1.35rem;

    border-top: 1px solid rgba(255, 255, 255, .08);
}


/* CATEGORY */

.portfolio-card-category {
    display: inline-flex;
    align-items: center;

    padding: .48rem .9rem;

    border: 1px solid rgba(255, 122, 0, .5);
    border-radius: 999px;

    color: #ff9a4d;

    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;

    white-space: nowrap;
}


/* PERSON */

.portfolio-card-person {
    display: flex;
    align-items: center;

    gap: .7rem;

    min-width: 0;
}


.portfolio-card-person-label {
    color: var(--color-text-muted);

    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;

    white-space: nowrap;
}


.portfolio-card-person img {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    overflow: hidden;

    border: 2px solid rgba(255, 255, 255, .15);
    border-radius: 50%;

    object-fit: cover;
}


/* =========================================================
   MORE BUTTON
========================================================= */

.portfolio-more {
    display: flex;
    justify-content: center;

    margin-top: 3rem;
}

/* ==========================================
   PORTFOLIO — BUTTON
========================================== */

.portfolio-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 1rem;

    min-width: 340px;
    padding: 1.25rem 2.5rem;

    border: 1px solid rgba(255, 122, 0, .55);
    border-radius: 999px;

    background: rgba(20, 39, 73, .7);

    color: var(--color-text);

    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-decoration: none;

    cursor: pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


/* TEKST */

.portfolio-more-button span {
    color: inherit;

    transition:
        color .3s ease;
}


/* STRZAŁKA */

.portfolio-more-arrow {
    display: inline-block;

    color: inherit;

    font-size: 1.5rem;
    line-height: 1;

    transition:
        color .3s ease,
        transform .3s ease;
}


/* ==========================================
   HOVER — CAŁY BUTTON
========================================== */

.portfolio-more-button:hover {
    border-color: #ff7a00;

    background: rgba(36, 61, 105, .95);

    box-shadow:
        0 10px 35px rgba(77, 124, 255, .18);

    transform: translateY(-2px);

    color: var(--color-primary);
}


/* TEKST I STRZAŁKA REAGUJĄ RAZEM */

.portfolio-more-button:hover span {
    color: var(--color-primary);
}


.portfolio-more-button:hover .portfolio-more-arrow {
    color: var(--color-primary);
    transform: translateX(6px);
}

/* =========================================================
   EMPTY STATE
========================================================= */

.portfolio-empty {
    grid-column: 1 / -1;

    padding: 3rem;

    color: var(--color-text-muted);

    text-align: center;
}

/* ==========================================
   MILLIE BOTTOM CARD
========================================== */

.contact-millie-bottom {
    position: relative;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 360px;
    align-items: center;
    gap: 1.75rem;
    min-height: 175px;
    margin-top: 1.5rem;
    margin-bottom: 5rem;
    padding: 1.5rem 2.5rem;
    border: 1px solid rgba(242, 140, 40, .75);
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(100deg, rgba(3, 11, 22, .95), rgba(7, 17, 37, .82));
    box-shadow: 0 0 30px rgba(242, 140, 40, .07), inset 0 0 30px rgba(242, 140, 40, .025);
    width: min(100% - 48px, 1320px);
    margin-inline: auto;
    }


/* ==========================================
   Millie icon
========================================== */

.contact-millie-bottom-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    border: 1px solid rgba(242,140,40,.7);
    border-radius: 50%;
}

.contact-millie-bottom-icon img {
    width: 32px;
    height: 32px;

    object-fit: contain;
}


/* ==========================================
   Millie text
========================================== */

.contact-millie-bottom-content {
    position: relative;

    z-index: 3;

    padding-right: 2rem;
}

.contact-millie-bottom-content h3 {
    margin: 0 0 .3rem;

    color: #fff;

    font-size: 1.15rem;
    line-height: 1.2;
}

.contact-millie-bottom-content p {
    max-width: 650px;

    margin: 0;

    color: var(--color-text-muted);

    font-size: .82rem;
    line-height: 1.5;
}


/* ==========================================
   MILLIE IMAGE
========================================== */

.contact-millie-bottom-image {
    position: absolute;

    right: 1.5rem;
    bottom: 0;

    width: 330px;

    z-index: 2;

    pointer-events: none;
}

.contact-millie-bottom-image::before {
    content: "";

    position: absolute;

    left: 15%;
    bottom: 5%;

    width: 70%;
    height: 65%;

    background:
        radial-gradient(
            ellipse,
            rgba(77,124,255,.18),
            transparent 70%
        );

    filter: blur(25px);
}

.contact-millie-bottom-image img {
    position: relative;

    display: block;

    width: 56%;
    height: auto;

    object-fit: contain;
}

/* =========================================================
   RESPONSIVE — REALIZACJE
========================================================= */


/* ==========================================
   LAPTOP
========================================== */

@media (max-width: 1100px) {

    /* PORTFOLIO */

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

}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1024px) {

    /* HERO */

    .realizations-hero {
        padding: 7rem 0 4rem;
    }

    .realizations-hero-grid {
        grid-template-columns: 1fr;

        gap: 2rem;

        min-height: auto;
    }

    .realizations-hero-content {
        max-width: 850px;
    }

    .realizations-hero-visual {
        min-height: 420px;
    }

    .realizations-hero-image {
        max-width: 560px;
    }

}


/* ==========================================
   TABLET — SMALLER
========================================== */

@media (max-width: 900px) {

    .realization-card,
    .realization-card:nth-child(even) {
        grid-template-columns: 1fr;
    }

    /* Przywracamy naturalną kolejność sekcji */
    .realization-card:nth-child(even) .realization-card-content,
    .realization-card:nth-child(even) .realization-card-result {
        order: initial;
    }

    .realization-card-content {
        width: 100%;
    }

    .realization-card-result {
        width: 100%;
        min-height: 440px;
    }
}


/* ==========================================
   MOBILE / TABLET
========================================== */

@media (max-width: 768px) {

    /* HERO */

    .realizations-hero {
        padding: 6rem 0 3rem;
    }

    .realizations-hero-title {
        font-size: clamp(2.7rem, 12vw, 4.5rem);
    }

    .realizations-hero-text p {
        font-size: 1rem;
    }

    .realizations-hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .realizations-hero-visual {
        min-height: auto;

        margin-top: 1rem;
    }

    .realizations-hero-decoration {
        display: none;
    }


    /* PORTFOLIO GALLERY */

    .portfolio-gallery-arrow {
        width: 38px;
        height: 38px;

        opacity: 1;
    }

    .portfolio-gallery-arrow--prev {
        left: .7rem;
    }

    .portfolio-gallery-arrow--next {
        right: .7rem;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 700px) {

    /* PORTFOLIO */

    .portfolio-section {
        padding: 6rem 0;
    }

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

        gap: 1.25rem;
    }

    .portfolio-filters {
        gap: .55rem;
    }

    .portfolio-filter {
        padding: .7rem 1rem;

        font-size: .85rem;
    }

    .portfolio-card-content {
        padding: 1.4rem;
    }

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

    .portfolio-title {
        font-size: 2.8rem;
    }

}


/* ==========================================
   MOBILE — SMALL
========================================== */

@media (max-width: 600px) {

    /* REALIZACJE */

    .realizations-section {
        padding: unset;
    }

    .realizations-grid {
        gap: 1.5rem;
    }

   .realizations-section {
        padding: 1rem 0 5rem;
    }

    .realizations-grid {
        gap: 1.5rem;
    }

    /* CAŁA REALIZACJA JEDNA POD DRUGĄ */
    .realization-card,
    .realization-card:nth-child(even) {
        display: grid;
        grid-template-columns: 1fr;
        min-height: auto;

        border-radius: 20px;
    }

    .realization-card-content,
    .realization-card-result {
        width: 100%;
        min-width: 0;

        padding: 2rem 1.5rem;
    }

    .realization-card-content {
        order: 1;
    }

    .realization-card-result {
        order: 2;
        min-height: 380px;
    }

    /* Nawet dla parzystych kart wynik ma być POD treścią */
    .realization-card:nth-child(even) .realization-card-content {
        order: 1;
    }

    .realization-card:nth-child(even) .realization-card-result {
        order: 2;
    }

    .realization-card-title {
        margin-bottom: 2rem;
        font-size: 2.35rem;
    }

    .realization-card-result::after {
        top: 1rem;
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
    }

    .realization-card-logo {
        margin-bottom: 2rem;
    }

	.realization-card-quote::before {
    	left: 3.5rem;
        font-size: 3rem;
    }
    
    .realization-card-quote {
    	font-size: 1rem;
    
    .realization-card-effect-icon {
    font-size: 0.62rem;
    }
    
    .realization-card-effect {
    font-size: 0.8rem;
    }

}


/* ==========================================
   MOBILE — VERY SMALL
========================================== */

@media (max-width: 480px) {

    /* PORTFOLIO */

    .portfolio-header .section-eyebrow {
        font-size: .65rem;
        letter-spacing: .14em;
    }

    .portfolio-header .section-eyebrow span {
        width: 22px;
    }

    .portfolio-title {
        font-size: 2.35rem;
    }

    .portfolio-description {
        font-size: 1rem;
    }

    .portfolio-filter {
        flex-grow: 1;
    }

    .portfolio-more-button {
        width: 100%;
        min-width: 0;
    }

}


/* ==========================================
   MILLIE BOTTOM CARD — TABLET
========================================== */

@media (max-width: 991px) {

    .contact-millie-bottom {
        grid-template-columns: 82px minmax(0, 1fr);

        padding: 1.5rem 2rem;
    }

    .contact-millie-bottom-image {
        display: none;
    }

}


/* ==========================================
   MILLIE BOTTOM CARD — MOBILE
========================================== */

@media (max-width: 600px) {

    .contact-millie-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 2rem;

        min-height: auto;

        margin-top: 1.5rem;
        padding: 2.5rem;

        border-radius: 28px;
    }

.contact-millie-bottom-icon {
    width: 62px;
    height: 62px;

    flex-shrink: 0;
}

.contact-millie-bottom-icon img {
    width: 32px;
    height: 32px;
}

    .contact-millie-bottom-content {
        width: 100%;
        padding-right: 0;
    }

    .contact-millie-bottom-content h3 {
        margin-bottom: 1rem;

        font-size: 1.15rem;
        line-height: 1.2;
    }

    .contact-millie-bottom-content p {
        max-width: none;

        font-size: .82rem;
        line-height: 1.6;
    }

    .contact-millie-bottom-image {
        display: none;
    }

}


/* ==========================================
   MILLIE BOTTOM CARD — SMALL MOBILE
========================================== */

@media (max-width: 400px) {

    .contact-millie-bottom {
        padding: 2rem;

        gap: 1.75rem;
    }

.contact-millie-bottom-icon {
    width: 62px;
    height: 62px;

    flex-shrink: 0;
}

.contact-millie-bottom-icon img {
    width: 32px;
    height: 32px;
}

    .contact-millie-bottom-content h3 {
        font-size: 1.85rem;
    }

    .contact-millie-bottom-content p {
        font-size: 1rem;
    }

}