:root{--bg:#06101d;--panel:#0b1b2a;--text:#eef8ff;--muted:#93aabd;--cyan:#66e6ff;--green:#9cffb5}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 20% 10%,#0b2840 0,#06101d 34%);color:var(--text);font-family:Inter,system-ui,sans-serif}.container{width:min(1180px,calc(100% - 40px));margin:auto}.site-header{position:fixed;inset:0 0 auto;z-index:30;background:rgba(6,16,29,.72);backdrop-filter:blur(14px);border-bottom:1px solid #ffffff12}.nav-wrap{height:78px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:12px;align-items:center;color:white;text-decoration:none}.brand-mark{width:42px;height:42px;border:1px solid #66e6ff66;border-radius:12px;display:grid;place-items:center;color:var(--cyan);font-weight:900}.brand strong,.brand small{display:block}.brand small{font-size:.62rem;color:var(--muted);letter-spacing:.13em}.main-nav{display:flex;gap:24px;align-items:center}.main-nav a{color:#c9d7e2;text-decoration:none;font-size:.88rem}.nav-cta{border:1px solid #66e6ff55;padding:10px 16px;border-radius:999px}.menu-toggle{display:none;background:none;border:0}.menu-toggle span{display:block;width:24px;height:2px;background:white;margin:5px}.hero{min-height:100vh;display:grid;align-items:center;padding:110px 0 50px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}.eyebrow,.kicker{font-size:.75rem;letter-spacing:.2em;color:var(--cyan);font-weight:800}.hero h1{font-size:clamp(3rem,7vw,6.6rem);line-height:.91;letter-spacing:-.055em;margin:18px 0 24px}.hero-lead,.lead{color:#a9bdcc;line-height:1.85;font-size:1.08rem}.hero-actions{display:flex;gap:14px;margin-top:28px}.btn{padding:14px 22px;border-radius:12px;text-decoration:none;font-weight:800}.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--green));color:#04121c}.btn-ghost{border:1px solid #ffffff22;color:white}.hero-stats{display:flex;gap:34px;margin-top:42px}.hero-stats div{display:grid}.hero-stats strong{color:var(--cyan);font-size:1.4rem}.hero-stats span{color:var(--muted);font-size:.76rem}.hero-visual{display:grid;place-items:center}.core-card{width:min(420px,85vw);aspect-ratio:1;border-radius:50%;border:1px solid #66e6ff33;display:grid;place-items:center;position:relative;box-shadow:inset 0 0 100px #00c9ff10}.core-center{width:200px;aspect-ratio:1;border:1px solid #66e6ff55;border-radius:28px;display:grid;place-items:center;text-align:center;background:#0b1f30;transform:rotate(45deg)}.core-center>*{transform:rotate(-45deg)}.core-center strong{font-size:1.5rem}.core-center small{color:var(--cyan);letter-spacing:.2em}.orbit{position:absolute;background:#0a1b2a;border:1px solid #66e6ff44;color:var(--cyan);padding:9px 13px;border-radius:999px;font-size:.7rem;font-weight:900}.o1{top:2%;left:46%}.o2{right:2%;top:36%}.o3{right:13%;bottom:10%}.o4{left:10%;bottom:14%}.o5{left:1%;top:34%}.section{padding:110px 0}.section h2,.contact h2{font-size:clamp(2rem,4vw,4rem);line-height:1;letter-spacing:-.04em}.split{display:grid;grid-template-columns:1fr 1fr;gap:70px}.services{background:#081725aa}.service-grid,.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}.service-card,.project-card{position:relative;background:linear-gradient(145deg,#0d2234,#091725);border:1px solid #ffffff12;border-radius:22px;padding:28px;min-height:220px}.service-card.featured{border-color:#9cffb555;background:linear-gradient(145deg,#12322f,#0a1c27)}.service-index{position:absolute;right:20px;top:18px;color:#61798b}.service-card p{color:var(--muted);line-height:1.7}.project-card{padding:0;overflow:hidden}.project-visual{height:220px;display:grid;place-items:center;background:radial-gradient(circle,#00c9ff19,transparent 60%);color:var(--cyan);letter-spacing:.15em;font-size:.72rem}.project-info{padding:24px}.project-info small{color:var(--cyan)}.contact-panel{border:1px solid #66e6ff22;border-radius:26px;padding:46px;display:flex;justify-content:space-between;gap:30px;align-items:center;background:#0a1c2a}.contact-panel p{color:var(--muted)}footer{border-top:1px solid #ffffff10;padding:28px 0 40px;color:#8fa5b7}.footer-grid{display:flex;justify-content:space-between;gap:20px}.reveal{opacity:0;transform:translateY(18px);transition:.6s}.reveal.show{opacity:1;transform:none}
@media(max-width:900px){.hero-grid,.split{grid-template-columns:1fr}.hero-visual{margin-top:20px}.service-grid,.project-grid{grid-template-columns:1fr 1fr}.main-nav{display:none;position:absolute;top:78px;left:20px;right:20px;padding:20px;background:#081725;border:1px solid #ffffff18;border-radius:16px;flex-direction:column}.main-nav.open{display:flex}.menu-toggle{display:block}.contact-panel{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.service-grid,.project-grid{grid-template-columns:1fr}.hero h1{font-size:3.4rem}.hero-stats{gap:18px}.section{padding:82px 0}}

/* ===== SMART HOME - poprawione przewijanie ===== */

#smart-home {
    scroll-margin-top: 90px;
    padding-top: 40px !important;
    padding-bottom: 80px;
}

#smart-home .container {
    padding-top: 0 !important;
}

#smart-home .kicker {
    margin-top: 0 !important;
    margin-bottom: 16px;
}

#smart-home h2 {
    margin-top: 0 !important;
    margin-bottom: 22px;
}

#smart-home .lead {
    margin-top: 0;
    margin-bottom: 32px;
    max-width: 1050px;
}

#smart-home .service-grid {
    margin-top: 30px;
}


/* ===== SMART HOME - POPRAWIONE PRZEWIJANIE ===== */

#smart-home {
    scroll-margin-top: 78px !important;
    min-height: calc(100vh - 78px) !important;
    padding-top: 45px !important;
    padding-bottom: 80px !important;
    margin-top: 0 !important;
}

#smart-home .container {
    padding-top: 0 !important;
}

/* zmniejszamy pustą przestrzeń po sekcji usług */
#uslugi {
    padding-bottom: 35px !important;
}


/* ===== SMART HOME - pozycja docelowa ===== */

#smart-home {
    scroll-margin-top: 0 !important;
    margin-top: 0 !important;
    padding-top: 16px !important;
    padding-bottom: 90px !important;
    min-height: 100vh !important;
}

#smart-home .container {
    padding-top: 0 !important;
}

#smart-home .kicker {
    margin-top: 0 !important;
    margin-bottom: 48px !important;
}

#smart-home h2 {
    margin-top: 0 !important;
    margin-bottom: 48px !important;
}

#smart-home .lead {
    margin-top: 0 !important;
    margin-bottom: 42px !important;
}

#smart-home .service-grid {
    margin-top: 0 !important;
}


/* ===== POPRAWIONE MENU MOBILNE ===== */

@media (max-width: 900px) {

    .site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: #06111d;
    }

    .nav-wrap {
        position: relative;
    }

    .menu-toggle {
        display: block;
        position: relative;
        z-index: 1002;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        width: 100%;
        max-height: calc(100vh - 78px);
        overflow-y: auto;

        padding: 18px 24px 24px;
        margin: 0;

        background: #071827;
        border-top: 1px solid rgba(255,255,255,.08);
        border-bottom: 1px solid rgba(255,255,255,.08);

        box-shadow: 0 18px 35px rgba(0,0,0,.35);
        z-index: 1001;
    }

    .main-nav.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .main-nav a {
        display: block;
        width: 100%;
        padding: 14px 12px;
        text-align: center;
        border-radius: 10px;
    }

    .main-nav .nav-cta {
        margin-top: 6px;
    }

    body.menu-open {
        overflow: hidden;
    }

    .hero {
        padding-top: 40px;
    }
}


/* ===== MENU RESPONSYWNE - POPRAWKA KONCOWA ===== */
@media (max-width: 900px) {

    .site-header {
        position: sticky !important;
        top: 0;
        z-index: 1000;
        background: #06111d;
    }

    .nav-wrap {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .menu-toggle {
        display: block !important;
        margin-left: auto;
    }

    .main-nav {
        display: none !important;
        position: static !important;

        width: 100% !important;
        max-height: none !important;

        padding: 18px 0 22px !important;
        margin: 0 !important;

        background: #071827;
        box-shadow: none !important;

        flex-basis: 100%;
    }

    .main-nav.open {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .main-nav a {
        display: block;
        width: 100%;
        padding: 12px 16px;
        text-align: center;
    }

    .main-nav .nav-cta {
        width: auto;
        min-width: 120px;
        margin-top: 5px;
    }
}


/* ===== PROJEKTY Z CMS ===== */

#projekty .project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 24px;
    margin-top: 42px;
}

#projekty .project-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#projekty .project-visual {
    position: relative;
    height: 235px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at center,
            rgba(105,231,255,.16),
            transparent 65%
        ),
        #0a1c2b;
}

#projekty .project-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

#projekty .project-card:hover .project-cover {
    transform: scale(1.045);
}

#projekty .project-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

#projekty .project-placeholder span {
    color: #6fe8ff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

#projekty .project-featured {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(4,15,24,.88);
    color: #8ef2ba;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
}

#projekty .project-info {
    padding: 25px;
    flex: 1;
}

#projekty .project-category {
    margin-bottom: 10px;
    color: #6fe8ff;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

#projekty .project-info h3 {
    margin: 0 0 14px;
    font-size: 1.35rem;
}

#projekty .project-info p {
    margin: 0 0 20px;
    color: #9cafbc;
    line-height: 1.7;
}

#projekty .project-tech {
    display: inline-block;
    padding: 7px 10px;
    margin-top: 4px;
    border: 1px solid rgba(105,231,255,.14);
    border-radius: 9px;
    color: #b9d9e5;
    font-size: .78rem;
}

#projekty .project-date {
    margin-top: 15px;
    color: #718b9d;
    font-size: .78rem;
}

@media (max-width: 950px) {
    #projekty .project-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 620px) {
    #projekty .project-grid {
        grid-template-columns: 1fr;
    }

    #projekty .project-visual {
        height: 220px;
    }
}


/* ===== LINK DO PROJEKTU ===== */

#projekty .project-link {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;

    color: #72e8ff;
    text-decoration: none;
    font-weight: 700;
    font-size: .9rem;

    transition: .2s ease;
}

#projekty .project-link:hover {
    transform: translateX(4px);
    color: #91f2bd;
}


/* ===== AKTYWNA POZYCJA MENU ===== */

.main-nav a,
.main-nav .nav-cta {
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    padding: 9px 14px !important;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease !important;
}

/* Kontakt nie jest już stale wyróżniony */
.main-nav .nav-cta {
    background: transparent !important;
    color: var(--text) !important;
}

/* Aktywna sekcja / podstrona */
.main-nav a.active {
    color: #73e8ff !important;
    background: rgba(105,231,255,.08) !important;
    border-color: rgba(105,231,255,.38) !important;
}

/* Hover */
.main-nav a:hover {
    color: #73e8ff !important;
    background: rgba(105,231,255,.06) !important;
}


/* ===== MENU - FINAL ACTIVE STATE ===== */

.main-nav a {
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 9px 14px !important;
    color: #c9d7e2 !important;
}

/* tylko aktualna sekcja */
.main-nav a.active,
.main-nav a[aria-current="page"] {
    color: #73e8ff !important;
    border-color: rgba(115,232,255,.45) !important;
    background: rgba(115,232,255,.08) !important;
}

/* wszystkie nieaktywne */
.main-nav a:not(.active):not([aria-current="page"]) {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* hover bez udawania aktywnej strony */
.main-nav a:not(.active):hover {
    color: #73e8ff !important;
    background: rgba(115,232,255,.04) !important;
    border-color: transparent !important;
}


/* ===== MAŁY FILM NA STRONIE PROJEKTU ===== */

.project-video,
.video-frame,
.project-media-video {
    max-width: 420px !important;
    width: 100% !important;
    margin: 24px 0 !important;
}

.project-video iframe,
.video-frame iframe,
.project-media-video iframe,
.project-video video,
.video-frame video,
.project-media-video video {
    width: 100% !important;
    max-width: 420px !important;
    height: 236px !important;
    aspect-ratio: 16 / 9 !important;
    display: block !important;
    border-radius: 16px !important;
}

/* YouTube iframe awaryjnie */
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
    width: 100% !important;
    max-width: 420px !important;
    height: 236px !important;
}

@media (max-width: 600px) {
    .project-video,
    .video-frame,
    .project-media-video,
    iframe[src*="youtube.com"],
    iframe[src*="youtube-nocookie.com"] {
        max-width: 100% !important;
    }

    .project-video iframe,
    .video-frame iframe,
    .project-media-video iframe,
    iframe[src*="youtube.com"],
    iframe[src*="youtube-nocookie.com"] {
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}

/* ===== FILM PROJEKTU - FINALNY ROZMIAR ===== */

.project-youtube-small {
    width: 420px !important;
    max-width: 100% !important;
    margin: 20px auto !important;
}

.project-youtube-small iframe {
    display: block !important;
    width: 420px !important;
    max-width: 100% !important;
    height: 236px !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 14px !important;
}

@media (max-width: 600px) {
    .project-youtube-small {
        width: 100% !important;
    }

    .project-youtube-small iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}

/* ===== FILM PROJEKTU - FINAL ===== */

.project-youtube-final {
    width: 420px !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    display: block !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 14px !important;
}

@media (max-width: 600px) {
    .project-youtube-final {
        width: 100% !important;
    }
}


/* ===== MAŁA KARTA FILMU W PROJEKCIE ===== */

.project-video,
.video-frame,
.project-media-video,
.project-video-box {
    width: 420px !important;
    max-width: 100% !important;
    margin: 28px auto !important;
    padding: 18px !important;
    box-sizing: border-box !important;
}

.project-video iframe,
.video-frame iframe,
.project-media-video iframe,
.project-video-box iframe,
.project-youtube-final {
    width: 360px !important;
    max-width: 100% !important;
    height: 203px !important;
    aspect-ratio: 16 / 9 !important;
    display: block !important;
    margin: 0 auto !important;
}

@media (max-width: 600px) {
    .project-video,
    .video-frame,
    .project-media-video,
    .project-video-box {
        width: 100% !important;
        padding: 12px !important;
    }

    .project-video iframe,
    .video-frame iframe,
    .project-media-video iframe,
    .project-video-box iframe,
    .project-youtube-final {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}


/* ===== MAŁA KARTA FILMU - OSTATECZNA POPRAWKA ===== */

.video-box {
    width: 460px !important;
    max-width: calc(100% - 32px) !important;
    margin: 30px auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
}

.video-box .kicker {
    margin-bottom: 14px !important;
}

.video-box iframe,
.video-box .project-youtube-final {
    width: 360px !important;
    max-width: 100% !important;
    height: 203px !important;
    aspect-ratio: 16 / 9 !important;
    display: block !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 14px !important;
}

@media (max-width: 600px) {
    .video-box {
        width: calc(100% - 24px) !important;
        padding: 14px !important;
    }

    .video-box iframe,
    .video-box .project-youtube-final {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}


/* ===== IKONA YOUTUBE NA FILMIE ===== */
.youtube-video-wrap {
    position: relative !important;
    width: 340px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.youtube-video-wrap iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    display: block !important;
    border-radius: 14px !important;
}

.youtube-corner-link {
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;

    width: 46px !important;
    height: 46px !important;

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

    border-radius: 50% !important;
    background: #ff0033 !important;
    color: white !important;

    font-size: 22px !important;
    font-weight: 700 !important;
    text-decoration: none !important;

    z-index: 20 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.4) !important;
}

.youtube-corner-link:hover {
    transform: scale(1.08);
}

/* ===== OPIS FILMU ===== */
.video-description {
    margin: 0 0 16px 0;
    padding: 12px 14px;
    background: rgba(8, 28, 42, 0.75);
    border: 1px solid rgba(91, 217, 255, 0.22);
    border-radius: 12px;
    color: #c5d4df;
    font-size: 14px;
    line-height: 1.55;
}


/* ===== OPIS FILMU - wyśrodkowany i zawijany ===== */

.video-description {
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
}


/* ===== IKONA LINKU DO YOUTUBE ===== */

.youtube-player-wrap {
    position: relative !important;
    width: 360px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.youtube-player-wrap iframe {
    display: block !important;
    width: 100% !important;
}

.youtube-link-overlay {
    position: absolute !important;
    left: 14px !important;
    bottom: 14px !important;
    width: 46px !important;
    height: 46px !important;

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

    z-index: 9999 !important;

    background: rgba(8, 30, 43, 0.90) !important;
    border: 1px solid rgba(91, 217, 255, 0.30) !important;
    border-radius: 50% !important;

    font-size: 21px !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.youtube-link-overlay:hover {
    transform: scale(1.08);
    background: rgba(21, 73, 94, 0.96) !important;
}

@media (max-width: 600px) {
    .youtube-player-wrap {
        width: 100% !important;
    }
}

/* ===== IKONA LINKU DO YOUTUBE ===== */

.youtube-player-wrap {
    position: relative !important;
    width: 360px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.youtube-player-wrap iframe {
    display: block !important;
    width: 100% !important;
}

.youtube-link-overlay {
    position: absolute !important;
    left: 14px !important;
    bottom: 14px !important;
    width: 46px !important;
    height: 46px !important;

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

    z-index: 9999 !important;

    background: rgba(8, 30, 43, 0.90) !important;
    border: 1px solid rgba(91, 217, 255, 0.30) !important;
    border-radius: 50% !important;

    font-size: 21px !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.youtube-link-overlay:hover {
    transform: scale(1.08);
    background: rgba(21, 73, 94, 0.96) !important;
}

@media (max-width: 600px) {
    .youtube-player-wrap {
        width: 100% !important;
    }
}

/* ===== KLIKALNY LINK YOUTUBE ===== */

.youtube-player-wrap {
    position: relative !important;
    width: 100% !important;
}

.youtube-player-wrap iframe {
    display: block !important;
}

.youtube-player-wrap .youtube-link-overlay {
    position: absolute !important;
    left: 14px !important;
    bottom: 14px !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
}


/* ===== LINK YOUTUBE - POPRAWKA KOŃCOWA ===== */

.youtube-player-wrap {
    position: relative !important;
    width: 360px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.youtube-player-wrap iframe {
    width: 100% !important;
    display: block !important;
}

.youtube-player-wrap .youtube-link-overlay {
    position: absolute !important;
    left: 12px !important;
    bottom: 12px !important;

    width: 46px !important;
    height: 46px !important;

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

    z-index: 999999 !important;
    pointer-events: auto !important;

    background: rgba(8,30,43,.92) !important;
    border: 1px solid rgba(91,217,255,.30) !important;
    border-radius: 50% !important;

    font-size: 21px !important;
    text-decoration: none !important;
    cursor: pointer !important;
}


/* ===== POPRAWNE POŁOŻENIE IKONY YOUTUBE ===== */

.youtube-frame-wrap {
    position: relative !important;
    width: 360px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.youtube-frame-wrap iframe {
    display: block !important;
    width: 100% !important;
}

.youtube-frame-wrap .youtube-link-final {
    position: absolute !important;

    left: 12px !important;
    bottom: 12px !important;

    width: 46px !important;
    height: 46px !important;

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

    margin: 0 !important;

    z-index: 999999 !important;
    pointer-events: auto !important;

    background: rgba(8,30,43,.92) !important;
    border: 1px solid rgba(91,217,255,.35) !important;
    border-radius: 50% !important;

    color: #fff !important;
    text-decoration: none !important;
    font-size: 21px !important;
    cursor: pointer !important;
}


/* ===== DODATKOWE FILMY PROJEKTU ===== */

.project-extra-videos {
    margin-top: 24px;
}

.project-extra-video-card {
    width: 400px;
    max-width: 100%;
    margin: 24px auto;
    padding: 18px;
    background: rgba(8, 28, 42, 0.75);
    border: 1px solid rgba(91, 217, 255, 0.20);
    border-radius: 18px;
    box-sizing: border-box;
}

.project-extra-video-card .video-description {
    margin-bottom: 16px;
    padding: 12px 14px;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

.project-extra-video-card .youtube-player-wrap {
    position: relative;
    width: 360px;
    max-width: 100%;
    margin: 0 auto;
}

.project-extra-video-card iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    display: block !important;
    border: 0;
    border-radius: 14px;
}

@media (max-width: 600px) {
    .project-extra-video-card {
        width: 100%;
    }

    .project-extra-video-card .youtube-player-wrap {
        width: 100%;
    }
}

/* =========================================================
   POPRAWKA MOBILE / RESPONSIVE - SEKCJA START
   ========================================================= */

/* Kotwice nie chowają się pod górnym menu */
html {
    scroll-padding-top: 110px;
}

/* Jeżeli sekcja Start ma id="start" */
#start {
    scroll-margin-top: 110px;
}

/* Dodatkowo dla głównych sekcji */
section[id] {
    scroll-margin-top: 110px;
}


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

@media (max-width: 768px) {

    html {
        scroll-padding-top: 88px;
    }

    #start,
    section[id] {
        scroll-margin-top: 88px;
    }

    /* Start nie może być obcięty przez wysokość viewportu */
    #start {
        min-height: auto !important;
        height: auto !important;

        padding-top: 42px !important;
        padding-bottom: 55px !important;

        overflow: visible !important;
    }

    /* Jeżeli hero ma własną klasę */
    .hero,
    .hero-section,
    .home-hero {
        min-height: auto !important;
        height: auto !important;

        overflow: visible !important;
    }

    /* Tekst hero ma się zmieścić w całości */
    .hero-content,
    .hero-inner,
    .hero-copy {
        height: auto !important;
        min-height: 0 !important;

        overflow: visible !important;
    }
}


/* =========================================================
   BARDZO WĄSKIE OKNO
   ========================================================= */

@media (max-width: 520px) {

    html {
        scroll-padding-top: 82px;
    }

    #start,
    section[id] {
        scroll-margin-top: 82px;
    }

    #start {
        padding-top: 30px !important;
        padding-bottom: 45px !important;
    }
}

/* ===== GRAFIKA GŁÓWNA PROJEKTU ===== */
.project-page .project-hero-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

.project-page .hero-visual,
.project-page .project-visual {
    overflow: hidden;
}

/* ===== GŁÓWNE ZDJĘCIE PROJEKTU ===== */
.project-page .hero-image {
    overflow: hidden !important;
}

.project-page .hero-image > img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: inherit !important;
}

/* =========================================================
   GRAFIKA GŁÓWNA PROJEKTU - STAŁY KONTENER
   ========================================================= */

.project-page .hero-image {
    width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;

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

    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* zarówno grafika domyślna jak i własne zdjęcie */
.project-page .hero-image > img {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    display: block !important;
    margin: 0 auto !important;
}

/* telefon */
@media (max-width: 700px) {
    .project-page .hero-image {
        height: 280px !important;
        min-height: 280px !important;
        max-height: 280px !important;
    }
}


/* ===== WŁASNY FILM W GALERII ===== */

.tmp-local-video {
    width: 100%;
    background: #000;
}

.tmp-local-video-player {
    display: block;
    width: 100%;
    height: 195px;
    object-fit: contain;
    background: #000;
}

.tmp-local-video .tmp-caption {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    padding: 13px 16px;
    box-sizing: border-box;
    text-align: center;
}

/* ===== WŁASNE FILMY W GALERII ===== */

.tmp-local-video {
    overflow: hidden;
}

.tmp-local-video-player {
    display: block;
    width: 100%;
    height: 195px;
    object-fit: contain;
    background: #000;
}

.tmp-local-video .tmp-caption {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    padding: 13px 16px;
    box-sizing: border-box;
    text-align: center;
}


/* ===== GALERIA FILMÓW - FINAL ===== */

.tmp-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 22px !important;
    align-items: flex-start !important;
}

.tmp-card {
    position: relative !important;
    width: 346px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #0b2030 !important;
    border: 1px solid rgba(105,231,255,.18) !important;
    box-sizing: border-box !important;
}

.tmp-card-button {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    cursor: pointer !important;
    text-align: center !important;
}

.tmp-thumb {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 195px !important;
    overflow: hidden !important;
    background: #000 !important;
}

.tmp-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
}

.tmp-local-video-player {
    display: block !important;
    width: 100% !important;
    height: 195px !important;
    object-fit: contain !important;
    background: #000 !important;
}

.tmp-caption {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 58px !important;
    padding: 12px 15px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    color: #d8e6ec !important;
    background: #0b2030 !important;
}

/* przycisk tylko dla YouTube */
.tmp-youtube {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 20 !important;

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

    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;

    background: #e7002f !important;
    color: #fff !important;
    border-radius: 9px !important;
    text-decoration: none !important;
    font-size: 0 !important;
}

/* symbol otwarcia YouTube */
.tmp-youtube::after {
    content: "↗" !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: #fff !important;
}

.tmp-play {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 18px solid transparent !important;
    border-bottom: 18px solid transparent !important;
    border-left: 28px solid #fff !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

@media (max-width: 600px) {
    .tmp-card {
        width: 100% !important;
    }
}


/* ===== PROJECT CARDS RESPONSIVE FIX 2026 ===== */
#projekty .project-card,
#projekty .project-visual,
#projekty .project-info {
    min-width: 0;
}

#projekty .project-visual h3,
#projekty .project-visual p,
#projekty .project-info h3,
#projekty .project-info p {
    overflow-wrap: anywhere;
    word-break: normal;
}

@media (max-width: 950px) {
    #projekty .project-visual {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ===== FINAL RESPONSIVE PROJECT GRID 2026 ===== */

@media (max-width: 900px) {

    #projekty .project-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    #projekty .project-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    #projekty .project-visual,
    #projekty .project-info {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #projekty .project-visual {
        padding-left: 26px !important;
        padding-right: 26px !important;
    }
}

@media (max-width: 600px) {

    #projekty .project-visual {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    #projekty .project-info {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* ===== FINAL PROJECT GRID BREAKPOINTS 2026 ===== */

/* średni ekran / laptop / tablet poziomo */
@media (max-width: 1150px) {
    #projekty .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }
}

/* telefon / bardzo wąskie okno */
@media (max-width: 720px) {
    #projekty .project-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== FINAL MOBILE MENU 2026 ===== */
@media (max-width: 900px) {

  .nav-wrap {
    position: relative !important;
  }

  .menu-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: #ffffff;
  }

  .main-nav {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;

    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;

    width: 100% !important;
    padding: 14px !important;
    margin: 0 !important;

    background: #071827 !important;
    border: 1px solid rgba(95,225,255,.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
  }

  .main-nav.open {
    display: flex !important;
  }

  .main-nav a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    text-align: center !important;
    border-radius: 9px !important;
  }

  .main-nav .nav-cta {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 4px !important;
  }
}

/* desktop */
@media (min-width: 901px) {
  .menu-toggle {
    display: none !important;
  }

  .main-nav {
    display: flex !important;
  }
}