html{
    scroll-behavior:smooth;
}

:root{
    --bg:#FFF8EC;
    --nav:#1f2f4f;
    --text:#24324d;
    --header-height:80px;
    --shadow-soft:0 16px 40px -12px rgba(31,47,79,.14);
    --shadow-lift:0 22px 48px -10px rgba(31,47,79,.18);
    --shadow-btn:0 8px 20px -6px rgba(31,47,79,.12);
    --ease-soft:cubic-bezier(.22,1,.36,1);
    --panel-bg:rgba(248,242,232,.52);
    --panel-border:rgba(255,255,255,.58);
    --panel-blur:blur(14px);
}
*{box-sizing:border-box}

body.nav-open{
    overflow:hidden;
}

img{
    max-width:100%;
    height:auto;
}
body{
    margin:0;
    font-family:Poppins,sans-serif;
    color:var(--text);

    background:
        url("../img/noise.svg") repeat,
        url("../img/bokeh-bg.svg") center top / cover no-repeat fixed,
        radial-gradient(ellipse 70% 45% at 12% 8%, rgba(255,214,232,.28), transparent 68%),
        radial-gradient(ellipse 55% 40% at 88% 12%, rgba(214,240,255,.24), transparent 70%),
        radial-gradient(ellipse 60% 35% at 50% 95%, rgba(255,241,188,.22), transparent 72%),
        #FFF8EC;

    overflow-x:hidden;
}
header{
    position:sticky;
    top:0;
    z-index:1000;

    background:rgba(31,47,79,.88);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

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

    box-shadow:0 8px 30px rgba(0,0,0,.18);

    transition:.35s;
}
nav{
    max-width:1280px;
    margin:auto;
    min-height:var(--header-height);
    padding:0 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;

    transition:
        min-height .30s ease,
        padding .30s ease;
}
.nav-logo{
    flex-shrink:0;
    display:flex;
    align-items:center;
}
nav img{
    height:72px;
    width:auto;
    max-width:none;
    background:#fff;
    padding:8px 14px;
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);

    transition:
        height .30s ease,
        transform .30s ease,
        box-shadow .30s ease;
}

nav img:hover{
    transform:scale(1.04);
    box-shadow:0 12px 28px rgba(0,0,0,.18);
}
nav ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:18px 24px;
    list-style:none;
    margin:0;
    padding:0;
}

nav li{
    position:relative;
    list-style:none;
}

nav li a{
    display:block;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size:clamp(11px,1.1vw,14px);
    text-transform:uppercase;
    padding:8px 0;
    transition:color .25s ease;
    white-space:nowrap;
}

.nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    width:44px;
    height:44px;
    padding:0;
    border:none;
    border-radius:12px;
    background:rgba(255,255,255,.12);
    cursor:pointer;
    flex-shrink:0;
}

.nav-toggle span{
    display:block;
    width:22px;
    height:2px;
    margin:0 auto;
    background:#fff;
    border-radius:2px;
    transition:transform .25s ease, opacity .25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}

nav li::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:3px;
    border-radius:10px;
    background:#ff8d2b;
    transition:width .25s ease;
}

nav li:hover a{
    color:#ffd59a;
}

nav li:hover::after{
    width:100%;
}
.hero{
    max-width:1280px;
    margin:20px auto;
    padding:0 24px;
}
.logo{width:270px;animation:f 5s ease-in-out infinite}
@keyframes f{50%{transform:translateY(-8px)}}
h1{font-size:64px;margin:18px 0 12px}
.lead{font-size:20px;color:#58677d}
.illu{height:430px;border-radius:30px;background:linear-gradient(135deg,#ffe8f2,#fff,#dff6ff,#fff3b7);display:flex;align-items:center;justify-content:center;font-size:120px;box-shadow:0 20px 45px rgba(0,0,0,.12)}
.platforms{
    max-width:1180px;
    margin:0 auto;
    padding:25px 24px 20px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

@media (min-width:900px){
    .platforms{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

.platform{text-decoration:none;color:#fff;
position:relative;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
min-height:133px;
overflow:hidden;
border-radius:28px;
font-weight:700;
box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.35);
transform-style:preserve-3d;
transition:transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), filter .45s var(--ease-soft);
container-type:inline-size;
}
.platform::before{
content:"";
position:absolute;
top:-45%;
left:-20%;
width:60%;
height:200%;
background:linear-gradient(120deg,rgba(255,255,255,.55),rgba(255,255,255,0));
transform:rotate(25deg);
pointer-events:none;
}
.platform::after{
content:"";
position:absolute;
inset:0;
border-radius:28px;
box-shadow:inset 0 -8px 18px rgba(0,0,0,.08);
pointer-events:none;
}
.platform:hover{
    box-shadow:var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.35);
    filter:brightness(1.03);
}
.platform h3{color:#fff;text-decoration:none;
font-size:clamp(18px,11cqi,38px)!important;
font-weight:700;
letter-spacing:.3px;
margin:0;
padding:0 12px;
text-align:center;
max-width:100%;
line-height:1.15;
text-shadow:0 2px 5px rgba(0,0,0,.2);
z-index:2;
}

.platform p{color:#fff;text-decoration:none;z-index:2;font-size:18px;margin:0;opacity:.95}
.al{background:linear-gradient(135deg,#ff8d2b,#ff6900 55%,#d94f00)}
.em{background:linear-gradient(135deg,#444,#222 55%,#111)}
.ol{background:linear-gradient(135deg,#25d899,#00b67a 55%,#009d69)}
.os{background:linear-gradient(135deg,#ff7eb6,#ff4f9a 55%,#d63384)}
.platform:hover,.card:hover{transform:translateY(-5px)}
section{max-width:1280px;margin:auto;padding:clamp(40px,8vw,70px) 24px}
.about{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:35px;background:#fff;border-radius:28px;padding:clamp(20px,4vw,35px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.about h2{margin-top:0}
.about p{margin:0 0 16px;line-height:1.75}
.about p:last-child{margin-bottom:0}
.avatar{border-radius:24px;background:linear-gradient(135deg,#ffd7e6,#dff5ff,#fff2ae);display:flex;align-items:center;justify-content:center;font-size:clamp(56px,12vw,90px);min-height:180px}
.quote{margin-top:20px;background:#fff8fc;border-left:5px solid #ff98c2;padding:18px;border-radius:12px}
.card{background:rgba(255,255,255,.62);backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur);padding:24px;border-radius:22px;border:1px solid var(--panel-border);box-shadow:var(--shadow-soft);transition:.25s}
.card h3{margin:0 0 10px}
.grid{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px}

.grid-4{
    max-width:1180px;
    margin:30px auto 10px;
    padding:0 24px;
    grid-template-columns:repeat(4,1fr);
}
footer{margin-top:70px;background:var(--nav);color:#fff;text-align:center;padding:clamp(36px,6vw,55px) 24px}
footer img{width:min(150px,40vw);background:#fff;padding:10px;border-radius:16px}

.footer-links{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
    justify-content:center;
    gap:16px;
    max-width:760px;
    margin:30px auto;
}

.footer-link{
    display:block;
    color:#fff;
    padding:16px;
    border-radius:16px;
    text-decoration:none;
    font-weight:700;
}

.footer-link-al{background:#ff6900}
.footer-link-em{background:#232323}
.footer-link-ol{background:#2f6dff}

.footer-brand{
    font-size:clamp(22px,4vw,26px);
}

.pickup-title{font-size:clamp(28px,5vw,42px);font-weight:800;text-align:center;margin:10px 0 30px;color:#24324d}
.pickup-box{max-width:1180px;margin:0 auto;background:var(--panel-bg);backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur);border:1px solid var(--panel-border);border-radius:28px;
padding:clamp(22px,4vw,38px) clamp(18px,4vw,42px);box-shadow:var(--shadow-soft);font-size:clamp(16px,2.2vw,20px);line-height:1.8;color:#334;}
.pickup-box p{margin:0 0 18px}

.pickup-grid{display:grid;grid-template-columns:90px 1fr;gap:18px;align-items:start;margin:18px 0}
.pickup-ico{width:70px;height:70px;border-radius:18px;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.65);display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:var(--shadow-btn)}
.pickup-text h4{margin:0 0 6px;font-size:clamp(18px,2.5vw,22px);color:#24324d}
.pickup-text{font-size:clamp(16px,2.2vw,20px);line-height:1.7}

.shipping-list{
    margin:8px 0 0;
    padding-left:22px;
}

.shipping-list li{
    margin-bottom:10px;
}

.shipping-list li:last-child{
    margin-bottom:0;
}

.shipping-highlight{
    margin-top:6px;
    background:rgba(255,248,252,.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.5);
    border-left:5px solid #ff8d2b;
    padding:16px 18px;
    border-radius:12px;
    font-weight:600;
    line-height:1.65;
}

.products-section{
    max-width:1180px;
    margin:0 auto;
    padding:10px 24px 48px;
}

.products-section .pickup-title{
    margin:20px 0 26px;
}

.products-bento{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto auto;
    gap:16px;
}

.product-bento-card{
    position:relative;
    overflow:hidden;
    border-radius:22px;
    background:#fff;
    box-shadow:var(--shadow-soft);
    border:1px solid rgba(255,141,43,.08);
    min-height:220px;
    transition:transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), border-color .45s var(--ease-soft);
}

.product-bento-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-lift);
    border-color:rgba(255,141,43,.22);
}

.product-bento-main{
    grid-column:1 / -1;
    min-height:clamp(220px,34vw,320px);
}

.product-bento-side{
    min-height:clamp(200px,28vw,260px);
}

.product-mini-slider{
    position:relative;
    width:100%;
    height:100%;
    min-height:inherit;
}

.product-mini-track{
    position:relative;
    width:100%;
    height:100%;
    min-height:inherit;
}

.product-mini-slide{
    display:none;
    position:relative;
    width:100%;
    height:100%;
    min-height:inherit;
    text-decoration:none !important;
    color:var(--text) !important;
    overflow:hidden;
    border-radius:22px;
}

.product-mini-slide.is-active{
    display:block;
}

.product-mini-slide img{
    width:100%;
    height:100%;
    min-height:220px;
    object-fit:cover;
    object-position:center;
    display:block;
}

.product-bento-main .product-mini-slide img{
    min-height:clamp(220px,34vw,320px);
}

.product-bento-side .product-mini-slide img{
    min-height:clamp(200px,28vw,260px);
}

.product-mini-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    padding:14px 18px;
    border-radius:0;
    background:linear-gradient(transparent,rgba(31,47,79,.08) 20%,rgba(31,47,79,.82));
    border:none;
    box-shadow:none;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:14px;
    pointer-events:none;
}

.product-bento-main .product-mini-caption{
    padding:18px 22px;
}

.product-mini-caption span{
    font-size:clamp(13px,1.7vw,17px);
    font-weight:700;
    color:#fff;
    line-height:1.35;
    text-shadow:0 1px 8px rgba(0,0,0,.18);
}

.product-bento-main .product-mini-caption span{
    font-size:clamp(15px,2.2vw,20px);
}

.product-mini-caption strong{
    font-size:clamp(11px,1.3vw,13px);
    white-space:nowrap;
    color:#ffd9a8;
    font-weight:700;
}

.product-mini-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:rgba(255,252,246,.82);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:#1f2f4f;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    box-shadow:var(--shadow-btn);
    border:1px solid rgba(255,255,255,.6);
    z-index:3;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft);
}

.product-mini-slider:not(.is-single):hover .product-mini-btn,
.product-mini-slider:not(.is-single):focus-within .product-mini-btn{
    opacity:.95;
    pointer-events:auto;
}

.product-mini-btn:hover{
    transform:translateY(-50%) scale(1.04);
}

.product-mini-btn.prev{ left:10px; }
.product-mini-btn.next{ right:10px; }

.product-mini-dots{
    position:absolute;
    left:0;
    right:0;
    bottom:10px;
    display:flex;
    justify-content:center;
    gap:7px;
    z-index:3;
}

.product-mini-dot{
    width:7px;
    height:7px;
    border:none;
    border-radius:50%;
    background:rgba(31,47,79,.22);
    cursor:pointer;
    padding:0;
    transition:transform .3s var(--ease-soft), background .3s var(--ease-soft);
}

.product-mini-dot.active{
    background:#ff8d2b;
    transform:scale(1.15);
}

.product-mini-slider.is-single .product-mini-btn,
.product-mini-slider.is-single .product-mini-dots{
    display:none;
}

.slider-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:rgba(255,252,246,.78);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    color:#1f2f4f;
    font-size:26px;
    line-height:1;
    cursor:pointer;
    box-shadow:var(--shadow-btn);
    border:1px solid rgba(255,255,255,.6);
    transition:transform .35s var(--ease-soft), background .35s var(--ease-soft), box-shadow .35s var(--ease-soft), opacity .35s var(--ease-soft);
    z-index:3;
    opacity:.94;
}

.slider-btn:hover{
    transform:translateY(-50%) scale(1.03);
    background:rgba(255,255,255,.92);
    box-shadow:var(--shadow-lift);
    opacity:1;
}

.slider-btn.prev{ left:12px; }
.slider-btn.next{ right:12px; }

.slider-dots{
    position:absolute;
    left:0;
    right:0;
    bottom:-28px;
    display:flex;
    justify-content:center;
    gap:10px;
    z-index:2;
}

.slider-dot{
    width:9px;
    height:9px;
    border:none;
    border-radius:50%;
    background:rgba(31,47,79,.16);
    cursor:pointer;
    padding:0;
    transition:transform .35s var(--ease-soft), background .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}

.slider-dot.active{
    background:#ff8d2b;
    transform:scale(1.15);
    box-shadow:0 0 0 4px rgba(255,141,43,.18);
}

.gift-title{font-size:clamp(28px,5vw,42px);font-weight:800;text-align:center;margin:60px 0 30px;color:#24324d}
.gift-box{max-width:1180px;margin:0 auto 30px;background:var(--panel-bg);backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur);border:1px solid var(--panel-border);border-radius:28px;padding:clamp(22px,4vw,38px) clamp(18px,4vw,42px);
box-shadow:var(--shadow-soft)}
.gift-grid{display:grid;grid-template-columns:90px 1fr;gap:18px;align-items:start;margin:18px 0}
.gift-ico{width:70px;height:70px;border-radius:18px;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.65);display:flex;align-items:center;justify-content:center;
font-size:34px;box-shadow:var(--shadow-btn)}
.gift-text{font-size:clamp(16px,2.2vw,20px);line-height:1.7;color:#334}
.gift-text h4{margin:0 0 6px;font-size:clamp(18px,2.5vw,22px);color:#24324d}

.spotlight-section{
    padding:clamp(48px,8vw,80px) 24px clamp(56px,9vw,90px);
    background:
        linear-gradient(180deg, transparent 0%, rgba(255,236,245,.35) 18%, rgba(223,246,255,.28) 52%, transparent 100%);
}

.spotlight-wrap{
    max-width:1180px;
    margin:0 auto;
}

.spotlight-head{
    max-width:720px;
    margin:0 auto clamp(28px,5vw,42px);
    text-align:center;
}

.spotlight-kicker{
    display:inline-block;
    margin-bottom:12px;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(255,141,43,.18);
    color:#e06f10;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.spotlight-title{
    margin:0 0 14px;
    font-size:clamp(30px,5vw,44px);
    font-weight:800;
    line-height:1.15;
    color:#24324d;
}

.spotlight-lead{
    margin:0;
    font-size:clamp(16px,2.2vw,19px);
    line-height:1.75;
    color:#5a6880;
}

.bento-grid{
    display:grid;
    grid-template-columns:1.35fr .95fr;
    grid-template-rows:repeat(2,minmax(190px,1fr));
    gap:18px;
    min-height:400px;
}

.bento-card{
    position:relative;
    overflow:hidden;
    border-radius:26px;
    background:#fff;
    border:1px solid rgba(255,255,255,.85);
    box-shadow:var(--shadow-soft);
    transition:transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft);
}

.bento-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-lift);
}

.bento-main{
    grid-row:span 2;
    min-height:380px;
}

.bento-side{
    min-height:190px;
}

.bento-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    transition:transform .6s var(--ease-soft);
}

.bento-card:hover .bento-photo{
    transform:scale(1.04);
}

.platform,.platform:link,.platform:visited,.platform:hover,.platform:active{
 color:#fff !important;
 text-decoration:none !important;
}
.platform h3,.platform h3 a{
 color:#fff !important;
 text-decoration:none !important;
}

.section-title{
    text-align:center;
    margin:20px 24px 25px;
    font-size:clamp(28px,5vw,42px);
    line-height:1.2;
}

.hero-image{
    width:100%;
    overflow:hidden;
    border-radius:30px;
}

.hero-image img{
    width:100%;
    display:block;
    border-radius:30px;
    box-shadow:var(--shadow-soft);
    transition:transform .55s var(--ease-soft);
}

.hero-image img:hover{
    transform:scale(1.008);
}
.pickup-section{
    padding-top:20px;
}
nav a.active{

    color:#ffcc72;

}

nav li:has(a.active)::after{

    width:100%;

}
/* ===========================
   PASEK POSTĘPU
=========================== */

#progress-bar{
    position:fixed;
    top:var(--header-height);
    left:0;

    width:0;
    height:4px;

    z-index:9999;

    background:linear-gradient(
        90deg,
        #ff8d2b,
        #ffb347
    );

    border-radius:0 8px 8px 0;

    box-shadow:
        0 0 8px rgba(255,160,60,.20);

    transition:width .08s linear;
}
/* ===========================
   SMART HEADER
=========================== */

header.scrolled{
    background:rgba(31,47,79,.96);

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

header.scrolled nav{
    min-height:68px;
}

header.scrolled{
    --header-height:68px;
}

header.scrolled nav img{
    height:60px;
}
/* ===========================
   SCROLL ANIMATIONS
=========================== */

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

.reveal:not(.show){
    will-change:opacity,transform;
}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}

/* ===========================
   ITEM REVEAL
=========================== */

.reveal-item{

    opacity:0;

    transform:translateY(28px);

    transition:
        opacity .65s ease,
        transform .65s ease;

}

.reveal-item:not(.show){
    will-change:opacity,transform;
}

.reveal-item.show{

    opacity:1;

    transform:translateY(0);

}
/* ===========================
   BACK TO TOP
=========================== */

#backToTop{

    position:fixed;

    right:28px;

    bottom:28px;

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    background:linear-gradient(135deg,#ff8d2b,#ffb347);

    color:#fff;

    font-size:26px;

    font-weight:700;

    cursor:pointer;

    box-shadow:0 12px 30px rgba(0,0,0,.22);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:
        opacity .3s ease,
        transform .3s ease,
        background .25s ease;

    z-index:9999;
}

#backToTop:hover{

    background:linear-gradient(135deg,#ff9933,#ffc35a);

    transform:translateY(-3px);

}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/* ===========================
   RESPONSYWNOŚĆ
=========================== */

@media (max-width:1024px){
    nav img{
        height:60px;
    }

    .platform{
        min-height:112px;
    }

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

    .bento-grid{
        grid-template-columns:1fr;
        grid-template-rows:auto;
    }

    .bento-main{
        grid-row:auto;
        min-height:280px;
    }

    .products-bento{
        grid-template-columns:1fr;
    }

    .product-bento-main{
        min-height:240px;
    }

    .product-bento-main .product-mini-slide img,
    .product-bento-side .product-mini-slide img{
        min-height:220px;
    }
}

@media (max-width:1100px){
    .nav-toggle{
        display:flex;
    }

    .nav-links{
        position:fixed;
        top:var(--header-height);
        left:0;
        right:0;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:12px 16px 20px;
        background:rgba(31,47,79,.98);
        border-bottom:1px solid rgba(255,255,255,.12);
        box-shadow:0 16px 30px rgba(0,0,0,.22);
        transform:translateY(-110%);
        opacity:0;
        visibility:hidden;
        transition:transform .28s ease, opacity .28s ease, visibility .28s ease;
        z-index:999;
        max-height:calc(100vh - var(--header-height));
        overflow-y:auto;
    }

    .nav-links.open{
        transform:translateY(0);
        opacity:1;
        visibility:visible;
    }

    .nav-links li{
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .nav-links li:last-child{
        border-bottom:none;
    }

    .nav-links li a{
        padding:14px 8px;
        font-size:14px;
        white-space:normal;
    }

    .about{
        grid-template-columns:1fr;
    }

    .avatar{
        min-height:140px;
    }
}

@media (max-width:600px){
    nav{
        padding:0 16px;
    }

    .hero{
        margin:12px auto;
        padding:0 16px;
    }

    .platforms{
        padding:16px 16px 40px;
        gap:16px;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .grid-4{
        padding:0 16px;
        grid-template-columns:1fr;
    }

    .products-section{
        padding-left:16px;
        padding-right:16px;
    }

    .slider-btn{
        width:40px;
        height:40px;
        font-size:24px;
    }

    .slider-btn.prev{ left:10px; }
    .slider-btn.next{ right:10px; }

    .product-mini-caption{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .slider-dots{
        bottom:-24px;
    }

    section{
        padding-left:16px;
        padding-right:16px;
    }

    .pickup-grid,
    .gift-grid{
        grid-template-columns:56px 1fr;
        gap:14px;
    }

    .pickup-ico,
    .gift-ico{
        width:56px;
        height:56px;
        font-size:28px;
    }

    .hero-image{
        border-radius:20px;
    }

    .hero-image img{
        border-radius:20px;
    }

    #backToTop{
        right:16px;
        bottom:16px;
        width:48px;
        height:48px;
        font-size:22px;
    }

    .gift-title{
        margin-top:40px;
    }
}

@media (max-width:400px){
    nav img{
        height:52px;
        padding:6px 10px;
    }

    header,
    header.scrolled{
        --header-height:72px;
    }

    .pickup-box,
    .gift-box,
    .bento-card,
    .product-bento-card{
        border-radius:20px;
    }

    .about,
    .card,
    .platform{
        border-radius:20px;
    }
}

/* ===========================
   WYDAJNOŚĆ MOBILE
=========================== */

picture{
    display:block;
}

.hero-image picture,
.bento-card picture,
.product-mini-slide picture{
    width:100%;
    height:100%;
}

.nav-logo picture{
    display:block;
    width:auto;
}

@media (max-width:768px){
    :root{
        --panel-blur:none;
        --panel-bg:rgba(248,242,232,.94);
    }

    body{
        background:
            radial-gradient(ellipse 70% 45% at 12% 8%, rgba(255,214,232,.28), transparent 68%),
            radial-gradient(ellipse 55% 40% at 88% 12%, rgba(214,240,255,.24), transparent 70%),
            radial-gradient(ellipse 60% 35% at 50% 95%, rgba(255,241,188,.22), transparent 72%),
            #FFF8EC;
        background-attachment:scroll;
    }

    header,
    .card,
    .pickup-box,
    .pickup-ico,
    .shipping-highlight,
    .product-mini-btn,
    .slider-btn,
    .gift-box,
    .gift-ico{
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }

    .reveal-item,
    .reveal{
        opacity:1;
        transform:none;
        transition:none;
        will-change:auto;
    }
}

@media (prefers-reduced-motion:reduce){
    .reveal-item,
    .reveal{
        opacity:1;
        transform:none;
        transition:none;
        will-change:auto;
    }
}