/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Inter",sans-serif;

    color:#2b3440;

    background:#f4f7fb;

    line-height:1.7;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

.container{

    width:min(1400px,calc(100% - 32px));

    margin:auto;

}

/* ==========================================================
   MENU
========================================================== */

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

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

    backdrop-filter:blur(10px);

    border-bottom:1px solid #dfe6ef;

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:80px;

}

.logo{

    font-size:28px;

    font-weight:800;

    color:#0b5ed7;

}

.logo span{

    display:block;

    font-size:13px;

    color:#6c757d;

    font-weight:500;

}

nav ul{

    display:flex;

    list-style:none;

    gap:40px;

}

nav a{

    color:#2f3640;

    font-weight:600;

    transition:.3s;

}

nav a:hover{

    color:#0b5ed7;

}

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

.hero{

    position:relative;

    height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

}

.heroImage{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

}

.heroOverlay{

    position:absolute;

    inset:0;

    background: 
   
    linear-gradient(90deg,

    rgba(8,18,37,.93),

    rgba(8,18,37,.78),

    rgba(8,18,37,.25));

}

.heroContent{

    position:relative;

    z-index:2;

    color:white;

    max-width:760px;

    margin-left:8%;

}

.heroContent h1{

    font-size:68px;

    line-height:1.05;

    margin-bottom:30px;

}

.heroContent h1 span{

    display:block;

    color:#59b4ff;

    font-size:40px;

    margin:14px 0;

}

.heroContent p{

    font-size:21px;

    margin-bottom:45px;

    color:#d8e3ef;

}

.heroButtons{

    display:grid;

    grid-template-columns:repeat(2,minmax(230px,1fr));

    gap:14px;

    max-width:720px;

}

.buttonPrimary{

    padding:17px 34px;

    background:#0b5ed7;

    color:white;

    border-radius:8px;

    transition:.3s;

}

.buttonPrimary:hover{

    background:#094fb3;

    transform:translateY(-3px);

}
.heroButtons .buttonPrimary{

    min-height:86px;

    padding:18px 22px;

    align-items:flex-start;

    justify-content:center;

    box-shadow:0 14px 32px rgba(11,94,215,.28);

}

.launchButton{

    display:flex;

    flex-direction:column;

    gap:5px;

}

.launchButton strong{

    font-size:16px;

    line-height:1.2;

}

.launchButton span{

    color:#d8eaff;

    font-size:13px;

    line-height:1.35;

}

.buttonSecondary{

    padding:17px 34px;

    border:2px solid white;

    color:white;

    border-radius:8px;

    transition:.3s;

}

.buttonSecondary:hover{

    background:white;

    color:#0b5ed7;

}

/* ==========================================================
   SEKCJE
========================================================== */

.section{

    padding:110px 0;

}

.gray{

    background:#eef3f9;

}

.section h2{

    font-size:48px;

    color:#183153;

    margin-bottom:25px;

}

.lead{

    font-size:20px;

    color:#5f6b7a;

    margin-bottom:70px;

    max-width:950px;

}

/* ==========================================================
   INTRO
========================================================== */

.introGrid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:60px;

    margin-top:50px;

}

.infoBox{

    background:white;

    border-radius:18px;

    padding:35px;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.infoBox h3{

    color:#0b5ed7;

    margin-bottom:20px;

}

.infoBox ul{

    padding-left:20px;

}

.infoBox li{

    margin-bottom:12px;

}

/* ==========================================================
   FEATURE
========================================================== */

.feature{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    margin-bottom:120px;

}

.feature.reverse{

    direction:rtl;

}

.feature.reverse>*{

    direction:ltr;

}

.featureImage img{

    border-radius:18px;

    box-shadow:0 20px 50px rgba(0,0,0,.15);

    transition:.35s;

}

.featureImage img:hover{

    transform:scale(1.03);

}

.featureText h3{

    font-size:34px;

    margin-bottom:25px;

    color:#0b5ed7;

}

.featureText p{

    margin-bottom:20px;

    color:#5f6b7a;

}

.checkList{

    padding-left:24px;

}

.checkList li{

    margin-bottom:12px;

}
/* ==========================================================
   INFO PANEL
========================================================== */

.infoPanel{

    background:white;

    border-radius:18px;

    padding:45px;

    margin-top:70px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.infoPanel h3{

    text-align:center;

    color:#0b5ed7;

    font-size:30px;

    margin-bottom:40px;

}

.infoGrid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:20px;

}

.infoGrid div{

    background:#eef5ff;

    border-left:5px solid #0b5ed7;

    padding:18px;

    border-radius:10px;

    font-weight:600;

}

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

.gallery{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));

    gap:25px;

}

.galleryItem{

    overflow:hidden;

    border-radius:15px;

    cursor:pointer;

    background:white;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.galleryItem img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    transition:.35s;

}

.galleryItem:hover img{

    transform:scale(1.08);

}

/* ==========================================================
   TABLE
========================================================== */

.compare{

    width:100%;

    border-collapse:collapse;

    margin-top:50px;

    background:white;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    border-radius:15px;

    overflow:hidden;

}

.compare th{

    background:#0b5ed7;

    color:white;

    padding:18px;

}

.compare td{

    padding:18px;

    text-align:center;

    border-bottom:1px solid #ececec;

}

.compare tr:nth-child(even){

    background:#f7f9fc;

}


.compareWrap{

    width:100%;

    overflow-x:auto;

    border-radius:15px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    background:white;

}

.compareWrap .compare{

    min-width:920px;

    box-shadow:none;

    margin-top:0;

}

.compare td:first-child,
.compare th:first-child{

    text-align:left;

    min-width:260px;

}
/* ==========================================================
   LIGHTBOX
========================================================== */

#lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

#lightbox.active{

    display:flex;

}

#lightboxImage{

    max-width:90%;

    max-height:88%;

    border-radius:10px;

    box-shadow:0 20px 60px rgba(0,0,0,.5);

}

#closeLightbox{

    position:absolute;

    top:25px;

    right:35px;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    font-size:24px;

    background:white;

    cursor:pointer;

}

#prevImage,
#nextImage{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:65px;

    height:65px;

    border:none;

    border-radius:50%;

    background:white;

    font-size:30px;

    cursor:pointer;

}

#prevImage{

    left:30px;

}

#nextImage{

    right:30px;

}

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

footer{

    background:#183153;

    color:white;

    padding:70px 0;

    margin-top:120px;

}

footer h3{

    font-size:32px;

    margin-bottom:20px;

}

footer p{

    max-width:850px;

    opacity:.9;

    line-height:1.8;

}

/* ==========================================================
   ANIMATIONS
========================================================== */

.feature,
.infoPanel,
.galleryItem,
.compare{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#dfe6ef;

}

::-webkit-scrollbar-thumb{

    background:#0b5ed7;

    border-radius:20px;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1100px){

.heroContent h1{

font-size:52px;

}

.feature{

grid-template-columns:1fr;

gap:40px;

}

.introGrid{

grid-template-columns:1fr;

}

}

@media(max-width:850px){

header .container{

flex-direction:column;

height:auto;

padding:20px 0;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

gap:20px;

margin-top:15px;

}

.hero{

height:auto;

padding:180px 0 120px;

}

.heroContent{

margin:auto;

width:90%;

}

.heroContent h1{

font-size:40px;

}

.heroContent h1 span{

font-size:26px;

}

.heroButtons{

grid-template-columns:1fr;

max-width:100%;

}



.section h2{

font-size:34px;

}

.lead{

font-size:18px;

}

.gallery{

grid-template-columns:1fr;

}

#prevImage,
#nextImage{

display:none;

}

.compare{

font-size:14px;

}

}
nav a.active{

color:#0b5ed7;

}

#topButton{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#0b5ed7;

color:white;

font-size:22px;

cursor:pointer;

box-shadow:0 10px 25px rgba(0,0,0,.25);

opacity:0;

pointer-events:none;

transition:.3s;

z-index:999;

}

#topButton.visible{

opacity:1;

pointer-events:auto;

}

#topButton:hover{

transform:translateY(-4px);

background:#0849a6;

}

.program-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr));

gap:40px;

margin-top:50px;

}

.program-card{

background:#fff;

padding:34px;

border-radius:18px;

box-shadow:0 15px 40px rgba(0,0,0,.1);

text-align:left;

transition:.3s;

}

.program-card:hover{

transform:translateY(-8px);

}


.program-card img{

width:100%;

aspect-ratio:16/10;

object-fit:cover;

border-radius:12px;

box-shadow:0 14px 35px rgba(0,0,0,.12);

margin-bottom:28px;

}

.program-card .checkList{

margin-bottom:30px;

}

.program-card .buttonPrimary{

display:inline-flex;

align-items:center;

justify-content:center;

}
.program-card h3{

margin-bottom:20px;

color:#1f4fbf;

}

.program-card p{

margin-bottom:30px;

line-height:1.8;

}
/* ==========================================================
   SMALL SCREENS
========================================================== */

@media(max-width:640px){

header .container{

padding:14px 0;

gap:12px;

}

.logo{

font-size:22px;

text-align:center;

line-height:1.15;

}

.logo span{

font-size:11px;

margin-top:4px;

}

nav{

width:100%;

overflow-x:auto;

padding-bottom:2px;

}

nav ul{

flex-wrap:nowrap;

justify-content:flex-start;

gap:10px;

margin-top:0;

padding:0 4px 4px;

}

nav li{

flex:0 0 auto;

}

nav a{

display:block;

padding:8px 10px;

font-size:14px;

white-space:nowrap;

}

.hero{

min-height:100svh;

padding:155px 0 56px;

align-items:flex-start;

}

.heroOverlay{

background:linear-gradient(180deg,rgba(8,18,37,.94),rgba(8,18,37,.82),rgba(8,18,37,.42));

}

.heroContent{

width:min(100%,calc(100% - 32px));

margin:0 auto;

}

.heroContent h1{

font-size:34px;

line-height:1.12;

margin-bottom:18px;

}

.heroContent h1 span{

font-size:22px;

margin-top:10px;

}

.heroContent p{

font-size:16px;

line-height:1.6;

margin-bottom:26px;

}

.heroButtons{

gap:10px;

}

.heroButtons .buttonPrimary{

min-height:auto;

padding:14px 16px;

}

.section{

padding:62px 0;

}

.section h2{

font-size:28px;

line-height:1.2;

}

.lead{

font-size:16px;

margin-bottom:38px;

}

.introGrid,
.feature{

gap:28px;

margin-top:28px;

margin-bottom:64px;

}

.feature.reverse{

direction:ltr;

}

.featureText h3{

font-size:25px;

line-height:1.25;

}

.infoBox,
.infoPanel,
.program-card{

border-radius:12px;

padding:22px;

}

.infoPanel{

margin-top:42px;

}

.infoPanel h3{

font-size:24px;

margin-bottom:24px;

}

.infoGrid{

grid-template-columns:1fr;

}

.gallery{

gap:18px;

}

.program-grid{

grid-template-columns:1fr;

gap:22px;

margin-top:30px;

}

.program-card img{

margin-bottom:20px;

}

.program-card .buttonPrimary{

width:100%;

text-align:center;

padding:14px 16px;

}

.compareWrap{

margin-inline:-16px;

width:calc(100% + 32px);

border-radius:0;

}

.compareWrap .compare{

min-width:760px;

}

#topButton{

right:16px;

bottom:16px;

width:46px;

height:46px;

font-size:18px;

}

footer{

padding:46px 0;

margin-top:62px;

}

footer h3{

font-size:26px;

}

}

@media(max-width:420px){

.container{

width:min(1400px,calc(100% - 24px));

}

.hero{

padding-top:148px;

}

.heroContent{

width:min(100%,calc(100% - 24px));

}

.heroContent h1{

font-size:30px;

}

.heroContent h1 span{

font-size:20px;

}

.infoBox,
.infoPanel,
.program-card{

padding:18px;

}

}

@media(hover:none){

.buttonPrimary:hover,
.program-card:hover,
.featureImage img:hover,
.galleryItem:hover img{

transform:none;

}

}

/* ==========================================================
   PROGRAM ACTIONS AND HERO NOTE
========================================================== */

header{
    background:rgba(8,18,37,.88);
    border-bottom:1px solid rgba(89,180,255,.22);
    backdrop-filter:blur(12px);
}

.logo,
nav a{
    color:#f4f8ff;
}

.logo span{
    color:#9eb6cc;
}

nav a:hover,
nav a.active{
    color:#59b4ff;
}

.program-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
}

.program-help{
    border-color:#0b5ed7;
    color:#0b5ed7;
    background:#fff;
    padding:14px 24px;
}

.program-help:hover{
    background:#eaf2ff;
    color:#0849a6;
}

.launchIntro{
    margin:-20px 0 18px;
    color:#f4f8ff;
    font-weight:700;
    font-size:18px;
}

@media(max-width:980px){
    header .container{
        height:auto;
        min-height:80px;
        padding:12px 0;
        gap:16px;
        flex-wrap:wrap;
    }
}

@media(max-width:640px){
    .launchIntro{
        margin:-10px 0 14px;
        font-size:15px;
    }

    .program-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .program-help{
        text-align:center;
    }
}

/* ==========================================================
   HERO / MENU ALIGNMENT
========================================================== */

header .container{
    width:min(1400px,calc(100% - 96px));
}

.hero{
    align-items:flex-start;
    padding-top:112px;
}

.heroContent{
    width:min(1400px,calc(100% - 96px));
    max-width:none;
    margin:0 auto;
}

.heroContent h1{
    max-width:720px;
}

.heroContent h1 span,
.heroContent p,
.launchIntro,
.heroButtons{
    max-width:720px;
}

@media(max-width:980px){
    header .container,
    .heroContent{
        width:min(1400px,calc(100% - 48px));
    }

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

@media(max-width:640px){
    header .container,
    .heroContent{
        width:min(1400px,calc(100% - 32px));
    }

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

/* ==========================================================
   COLOR THEMES
========================================================== */

.themeSwitcher{
    display:flex;
    align-items:center;
    gap:6px;
    padding-left:18px;
    border-left:1px solid rgba(244,248,255,.18);
}

.themeButton{
    border:1px solid rgba(89,180,255,.55);
    background:rgba(255,255,255,.06);
    color:#f4f8ff;
    border-radius:7px;
    width:38px;
    height:34px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font:700 20px/1 "Segoe UI Symbol","Arial Unicode MS",sans-serif;
    cursor:pointer;
    transition:.2s;
}

.themeButton:hover,
.themeButton.active{
    background:#59b4ff;
    border-color:#59b4ff;
    color:#06111d;
}

body[data-theme="contrast"]{
    color:#000;
    background:#fff;
}

body[data-theme="contrast"] header{
    background:#000;
    border-bottom:3px solid #ffd800;
    backdrop-filter:none;
}

body[data-theme="contrast"] .logo,
body[data-theme="contrast"] nav a,
body[data-theme="contrast"] .logo span{
    color:#fff;
}

body[data-theme="contrast"] nav a:hover,
body[data-theme="contrast"] nav a.active{
    color:#ffd800;
}

body[data-theme="contrast"] .themeSwitcher{
    border-left-color:#ffd800;
}

body[data-theme="contrast"] .themeButton{
    border-color:#ffd800;
    background:#000;
    color:#ffd800;
}

body[data-theme="contrast"] .themeButton.active,
body[data-theme="contrast"] .themeButton:hover{
    background:#ffd800;
    color:#000;
}

body[data-theme="contrast"] .heroOverlay{
    background:rgba(0,0,0,.86);
}

body[data-theme="contrast"] .heroContent h1 span,
body[data-theme="contrast"] .featureText h3,
body[data-theme="contrast"] .program-card h3,
body[data-theme="contrast"] .infoBox h3,
body[data-theme="contrast"] .infoPanel h3{
    color:#005fcc;
}

body[data-theme="contrast"] .section h2,
body[data-theme="contrast"] .lead,
body[data-theme="contrast"] .featureText p,
body[data-theme="contrast"] .program-card p{
    color:#000;
}

body[data-theme="contrast"] .gray{
    background:#fff;
}

body[data-theme="contrast"] .infoBox,
body[data-theme="contrast"] .infoPanel,
body[data-theme="contrast"] .program-card,
body[data-theme="contrast"] .compare,
body[data-theme="contrast"] .compareWrap{
    background:#fff;
    border:3px solid #000;
    box-shadow:none;
}

body[data-theme="contrast"] .buttonPrimary,
body[data-theme="contrast"] .compare th,
body[data-theme="contrast"] #topButton{
    background:#000;
    color:#ffd800;
    border:2px solid #ffd800;
}

body[data-theme="contrast"] .buttonPrimary:hover,
body[data-theme="contrast"] #topButton:hover{
    background:#ffd800;
    color:#000;
}

body[data-theme="contrast"] .program-help{
    background:#fff;
    color:#000;
    border:3px solid #000;
}

body[data-theme="contrast"] .compare td{
    border-bottom:2px solid #000;
}

body[data-theme="contrast"] .compare tr:nth-child(even){
    background:#f3f3f3;
}

body[data-theme="contrast"] .launchIntro{
    color:#ffd800;
}

body[data-theme="dark"]{
    color:#eaf0f6;
    background:#10161d;
}

body[data-theme="dark"] header{
    background:rgba(12,17,23,.96);
    border-bottom-color:#314154;
}

body[data-theme="dark"] .logo,
body[data-theme="dark"] nav a{
    color:#cde4ff;
}

body[data-theme="dark"] .logo span,
body[data-theme="dark"] .lead,
body[data-theme="dark"] .featureText p,
body[data-theme="dark"] .program-card p,
body[data-theme="dark"] footer p{
    color:#b8c7d6;
}

body[data-theme="dark"] .heroOverlay{
    background:linear-gradient(90deg,rgba(5,8,12,.95),rgba(10,15,22,.86),rgba(10,15,22,.42));
}

body[data-theme="dark"] .gray{
    background:#141c25;
}

body[data-theme="dark"] .section h2,
body[data-theme="dark"] footer h3{
    color:#f4f8fb;
}

body[data-theme="dark"] .featureText h3,
body[data-theme="dark"] .program-card h3,
body[data-theme="dark"] .infoBox h3,
body[data-theme="dark"] .infoPanel h3{
    color:#8ec7ff;
}

body[data-theme="dark"] .infoBox,
body[data-theme="dark"] .infoPanel,
body[data-theme="dark"] .program-card,
body[data-theme="dark"] .compare,
body[data-theme="dark"] .compareWrap{
    background:#1c2733;
    color:#eaf0f6;
    border:1px solid #35465a;
    box-shadow:0 14px 34px rgba(0,0,0,.38);
}

body[data-theme="dark"] .infoGrid div{
    background:#132d44;
    border-left-color:#8ec7ff;
}

body[data-theme="dark"] .compare th{
    background:#244b78;
    color:#fff;
}

body[data-theme="dark"] .compare td{
    border-bottom-color:#35465a;
}

body[data-theme="dark"] .compare tr:nth-child(even){
    background:#17212b;
}

body[data-theme="dark"] .themeButton{
    background:#10161d;
    color:#dcecff;
    border-color:#8ec7ff;
}

body[data-theme="dark"] .themeButton.active,
body[data-theme="dark"] .themeButton:hover{
    background:#8ec7ff;
    color:#06111d;
}

body[data-theme="dark"] .program-help{
    background:#10161d;
    color:#dcecff;
    border-color:#8ec7ff;
}

body[data-theme="dark"] .program-help:hover{
    background:#26394c;
    color:#fff;
}

body[data-theme="dark"] .launchIntro{
    color:#eaf4ff;
}

@media(max-width:980px){
    .themeSwitcher{
        width:100%;
        padding-left:0;
        border-left:0;
    }
}

@media(max-width:640px){
    .themeButton{
        flex:1 1 auto;
        height:34px;
    }
}

/* Odstęp pod przyciskami na pierwszym ekranie */
.hero{
    min-height:100vh;
    height:auto;
    padding-bottom:46px;
}

@media(max-width:640px){
    .hero{
        padding-bottom:34px;
    }
}

/* ==========================================================
   HERO LAUNCH PANEL ON RIGHT
========================================================== */

@media(min-width:981px){
    .heroContent{
        display:grid;
        grid-template-columns:minmax(460px,720px) minmax(360px,520px);
        column-gap:72px;
        align-items:center;
    }

    .heroContent h1,
    .heroContent > p:not(.launchIntro){
        grid-column:1;
    }

    .launchIntro,
    .heroButtons{
        grid-column:2;
        max-width:520px;
    }

    .launchIntro{
        grid-row:1;
        align-self:end;
        margin:0 0 18px;
    }

    .heroButtons{
        grid-row:2 / span 2;
        align-self:start;
        grid-template-columns:1fr;
        gap:12px;
    }

    .heroButtons .buttonPrimary{
        min-height:76px;
    }
}

/* Wyrównanie pionowe panelu uruchamiania z tytułem hero */
@media(min-width:981px){
    .heroContent{
        align-items:start;
    }

    .launchIntro{
        align-self:start;
        margin-top:8px;
    }
}

/* Podniesienie przycisków w prawym panelu hero */
@media(min-width:981px){
    .heroButtons{
        margin-top:-44px;
    }
}

/* Przyciski na wysokości niebieskiego podtytułu hero */
@media(min-width:981px){
    .heroButtons{
        margin-top:-124px;
    }
}

/* Dekoracyjny pasek pod menu */
header{
    border-bottom:0;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
}

header::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-3px;
    height:3px;
    background:linear-gradient(90deg,rgba(89,180,255,0),#59b4ff,#0b5ed7,rgba(89,180,255,0));
    box-shadow:0 0 18px rgba(89,180,255,.45);
    pointer-events:none;
}

body[data-theme="contrast"] header::after{
    background:#ffd800;
    box-shadow:none;
}

body[data-theme="dark"] header::after{
    background:linear-gradient(90deg,rgba(142,199,255,0),#8ec7ff,#244b78,rgba(142,199,255,0));
    box-shadow:0 0 18px rgba(142,199,255,.35);
}

/* Mały odstęp treści hero od paska menu */
.hero{
    padding-top:128px;
}

@media(max-width:980px){
    .hero{
        padding-top:144px;
    }
}

@media(max-width:640px){
    .hero{
        padding-top:156px;
    }
}

/* Wycentrowanie treści pierwszego ekranu w pionie */
.hero{
    min-height:100vh;
    padding-top:96px;
    padding-bottom:56px;
    align-items:center;
}

@media(min-width:981px){
    .heroContent{
        align-items:center;
    }

    .launchIntro{
        margin-top:0;
    }
}

@media(max-width:980px){
    .hero{
        align-items:flex-start;
        padding-top:144px;
    }
}

@media(max-width:640px){
    .hero{
        padding-top:156px;
        padding-bottom:40px;
    }
}

/* Motywy na urządzeniach mobilnych */
@media(max-width:850px){
    .themeSwitcher{
        width:100%;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:8px;
        padding:0;
        border-left:0;
        margin-top:4px;
        position:relative;
        z-index:2;
    }

    .themeButton{
        min-height:34px;
        width:100%;
        touch-action:manipulation;
    }
}

@media(max-width:420px){
    .themeSwitcher{
        grid-template-columns:repeat(3,1fr);
    }
}

/* Mobilnie nagłówek nie zasłania początku strony */
@media(max-width:850px){
    header{
        position:relative;
    }

    .hero{
        padding-top:34px;
        min-height:auto;
    }
}

@media(max-width:640px){
    .hero{
        padding-top:30px;
    }
}

/* Mobilne menu bez poziomego przewijania */
@media(max-width:640px){
    nav{
        overflow-x:visible;
        padding-bottom:0;
    }

    nav ul{
        flex-wrap:wrap;
        justify-content:center;
        gap:8px 14px;
        padding:0;
    }

    nav li{
        flex:0 1 auto;
    }

    nav a{
        padding:6px 4px;
        white-space:normal;
        text-align:center;
    }
}

/* Mobilnie menu zostaje widoczne podczas przewijania */
@media(max-width:850px){
    header{
        position:sticky;
        top:0;
    }

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

@media(max-width:640px){
    .hero{
        padding-top:30px;
    }
}

/* Language selector */
.languageSwitcher{display:flex;align-items:center;gap:6px;padding:4px;border:1px solid #d3dce8;border-radius:8px;background:#f7f9fc}
.languageButton{width:34px;height:30px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:5px;background:transparent;font-size:19px;line-height:1;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.languageButton:hover,.languageButton.active{background:#fff;border-color:#0b5ed7;transform:translateY(-1px)}
.languageButton:focus-visible{outline:3px solid rgba(11,94,215,.35);outline-offset:2px}
.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body[data-theme="dark"] .languageSwitcher{background:#172130;border-color:#34465d}
body[data-theme="dark"] .languageButton:hover,body[data-theme="dark"] .languageButton.active{background:#243348}
@media(max-width:850px){.languageSwitcher{order:3}.languageButton{width:32px}}
/* Stable hero layout: keep the introductory content and launch buttons together. */
@media(min-width:981px){
    .heroContent{display:block;width:min(760px,calc(100% - 96px));max-width:760px;margin-left:8%;}
    .heroContent h1,.heroContent h1 span,.heroContent p,.launchIntro,.heroButtons{max-width:none;}
    .launchIntro{margin:-20px 0 18px;}
    .heroButtons{display:grid;grid-template-columns:repeat(2,minmax(230px,1fr));gap:14px;margin-top:0;}
    .heroButtons .buttonPrimary{min-height:86px;}
}
/* Desktop hero: launch panel remains on the right. */
@media(min-width:981px){
    .heroContent{display:grid;width:min(1400px,calc(100% - 96px));max-width:none;margin:0 auto;grid-template-columns:minmax(460px,720px) minmax(360px,520px);column-gap:72px;align-items:center;}
    .heroContent h1,.heroContent > p:not(.launchIntro){grid-column:1;max-width:720px;}
    .launchIntro,.heroButtons{grid-column:2;max-width:520px;}
    .launchIntro{grid-row:1;align-self:start;margin:8px 0 18px;}
    .heroButtons{grid-row:2 / span 2;align-self:start;display:grid;grid-template-columns:1fr;gap:12px;margin-top:-124px;}
    .heroButtons .buttonPrimary{min-height:76px;}
}

/* Flag buttons blend into the navigation bar. */
.languageSwitcher{padding:0;border-color:transparent;background:transparent;}
.languageButton,.languageButton:hover,.languageButton.active{background:transparent;}
.languageButton:hover,.languageButton.active{border-color:#59b4ff;}
body[data-theme="dark"] .languageSwitcher{background:transparent;border-color:transparent;}
body[data-theme="dark"] .languageButton:hover,body[data-theme="dark"] .languageButton.active{background:transparent;}

/* Compact theme icons in the stacked mobile header. */
@media(max-width:850px){
    header .themeSwitcher{
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        width:auto;
        gap:6px;
    }

    header .themeButton{
        flex:0 0 38px;
        width:38px;
        height:34px;
        min-height:34px;
    }
}