:root{--bg:#050705;--panel:#0f130f;--panel2:#151b15;--green:#29f261;--line:#263226;--muted:#aeb8ae;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#fff;font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.55}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(5,7,5,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.inner{width:min(1220px,92vw);margin:auto;height:74px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:950;font-size:22px;letter-spacing:.3px}.brand span{color:var(--green)}.menu{display:flex;gap:20px;align-items:center;font-size:14px;font-weight:800}.menu a:hover{color:var(--green)}.lang button{border:1px solid var(--line);background:#0c0f0c;color:#fff;border-radius:8px;padding:7px 10px;cursor:pointer}.lang button.active{background:var(--green);color:#031006}.mobile{display:none;background:transparent;border:1px solid var(--line);color:#fff;border-radius:10px;padding:8px 10px}
.hero{min-height:100vh;display:grid;place-items:center;text-align:center;padding:110px 20px 60px;background:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.78)),url('../images/hero.png') center/cover}.hero .box{width:min(980px,94vw)}.badge{display:inline-block;background:rgba(41,242,97,.12);border:1px solid rgba(41,242,97,.38);border-radius:999px;color:var(--green);padding:9px 14px;font-weight:950;font-size:13px}.hero h1{font-size:clamp(48px,8vw,112px);line-height:.9;margin:18px 0 16px;color:var(--green);letter-spacing:-4px}.lead{font-size:clamp(18px,2vw,27px);color:#edf4ed;margin:auto;max-width:880px}.cta{margin-top:28px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 24px;border-radius:13px;background:var(--green);color:#031006;font-weight:950;border:1px solid var(--green)}.btn.out{background:rgba(0,0,0,.15);color:#fff}
section{padding:86px 0;border-top:1px solid rgba(255,255,255,.05)}.container{width:min(1220px,92vw);margin:auto}.head{display:flex;gap:24px;align-items:end;justify-content:space-between;margin-bottom:34px}.head h2,h2{font-size:clamp(34px,4.5vw,60px);line-height:1;margin:0;letter-spacing:-2px}.head p{color:var(--muted);max-width:580px;margin:0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.two{grid-template-columns:1fr 1fr;align-items:center;gap:40px}.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:25px;padding:25px;box-shadow:0 20px 60px rgba(0,0,0,.25)}.card h3{font-size:23px;margin:14px 0 8px}.card p,.copy p{color:var(--muted)}.icon{font-size:34px}.product{border-radius:30px;border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.45)}.checks{display:grid;gap:11px;margin-top:20px}.checks div:before{content:'✓';color:var(--green);font-weight:950;margin-right:10px}.replace{font-size:13px;color:#92a392;background:#0b0e0b;border:1px dashed #3b553b;padding:12px;border-radius:12px;margin-top:16px}
.steps{counter-reset:s}.step:before{counter-increment:s;content:"0"counter(s);font-size:30px;color:var(--green);font-weight:950}.compare{overflow:auto;border:1px solid var(--line);border-radius:24px}.compare table{width:100%;min-width:720px;border-collapse:collapse}.compare th,.compare td{padding:18px;border-bottom:1px solid var(--line);text-align:left}.compare th{background:#111711;color:var(--green)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.tile{min-height:250px;border-radius:25px;background-size:cover;background-position:center;border:1px solid var(--line);display:flex;align-items:end;padding:24px;font-size:28px;font-weight:950;box-shadow:inset 0 -120px 100px rgba(0,0,0,.78)}.price{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.amount{font-size:46px;font-weight:950;color:var(--green);letter-spacing:-2px}.featured{border-color:var(--green);box-shadow:0 0 0 1px rgba(41,242,97,.35),0 30px 90px rgba(41,242,97,.08)}.contact{background:linear-gradient(135deg,rgba(41,242,97,.16),rgba(255,255,255,.03));border:1px solid var(--line);border-radius:32px;padding:38px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}.contact h2{color:var(--green)}footer{padding:40px 0;text-align:center;color:var(--muted);border-top:1px solid var(--line)}
[data-lang=en] .pl,[data-lang=pl] .en{display:none}
@media(max-width:900px){.mobile{display:block}.menu{display:none;position:absolute;top:74px;left:0;right:0;background:#070907;flex-direction:column;padding:20px;border-bottom:1px solid var(--line)}.menu.open{display:flex}.grid,.two,.gallery,.price,.contact{grid-template-columns:1fr}.head{display:block}.hero{min-height:88vh}.hero h1{letter-spacing:-2px}.product{order:0}section{padding:64px 0}}


/* ================================
   PROFESSIONAL RESPONSIVE HERO
   replacement / override
================================ */

.hero{
    position:relative !important;
    width:100% !important;
    min-height:100vh !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;
    padding:0 !important;
    background:#050705 !important;
}

.hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    z-index:0;
    transform:scale(1.01);
}

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        radial-gradient(circle at 78% 44%, rgba(41,242,97,.12), transparent 30%),
        linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.66) 36%, rgba(0,0,0,.23) 68%, rgba(0,0,0,.55) 100%),
        linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.36) 60%, rgba(0,0,0,.92) 100%);
}

.hero-content{
    position:relative;
    z-index:2;
    width:min(760px, 92vw);
    margin-left:clamp(24px, 7vw, 120px);
    padding-top:72px;
}

.hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 15px;
    border-radius:999px;
    border:1px solid rgba(41,242,97,.42);
    background:rgba(41,242,97,.11);
    color:#29f261;
    font-size:13px;
    font-weight:950;
    letter-spacing:.08em;
    text-transform:uppercase;
    box-shadow:0 0 35px rgba(41,242,97,.12);
}

.hero h1{
    margin:20px 0 18px !important;
    color:#ffffff !important;
    font-size:clamp(52px, 7.5vw, 118px) !important;
    line-height:.88 !important;
    letter-spacing:-.07em !important;
    text-shadow:0 12px 45px rgba(0,0,0,.65);
}

.hero h1 span{
    color:#29f261;
}

.hero-subtitle{
    max-width:660px;
    margin:0 !important;
    color:#edf5ef;
    font-size:clamp(18px, 2vw, 27px);
    line-height:1.35;
    text-shadow:0 8px 35px rgba(0,0,0,.9);
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:34px;
}

.hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:15px 23px;
    border-radius:14px;
    font-weight:950;
    letter-spacing:.02em;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.hero-btn:hover{
    transform:translateY(-2px);
}

.hero-btn.primary{
    background:#29f261;
    color:#031006;
    box-shadow:0 18px 55px rgba(41,242,97,.25);
}

.hero-btn.secondary{
    background:rgba(8,12,8,.52);
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(12px);
}

.hero-bottom{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:1px;
    background:rgba(255,255,255,.08);
    border-top:1px solid rgba(255,255,255,.13);
    backdrop-filter:blur(16px);
}

.hero-bottom div{
    padding:18px 16px;
    background:rgba(5,7,5,.64);
    color:#dce9dd;
    text-align:center;
    font-weight:850;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.03em;
}

@media (max-width: 900px){
    .hero{
        min-height:92vh !important;
        align-items:flex-end !important;
    }

    .hero-bg{
        object-position:center center;
    }

    .hero-overlay{
        background:
            linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.95) 100%);
    }

    .hero-content{
        width:92vw;
        margin:0 auto;
        padding:120px 0 150px;
        text-align:left;
    }

    .hero-actions{
        gap:10px;
    }

    .hero-btn{
        flex:1 1 auto;
        min-width:145px;
        padding:13px 16px;
        font-size:14px;
    }

    .hero-bottom{
        grid-template-columns:1fr 1fr;
    }

    .hero-bottom div{
        padding:12px 8px;
        font-size:11px;
    }

    .hero-bottom div:nth-child(5){
        grid-column:1 / -1;
    }
}

@media (min-aspect-ratio: 21/9){
    .hero-bg{
        object-fit:cover;
        object-position:center center;
    }

    .hero-content{
        margin-left:clamp(70px, 10vw, 180px);
    }
}


/* ================================
   FIX: hero image never wider than page
================================ */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
}

.hero{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
}

.hero-bg{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    display:block !important;
}

.hero-content,
.hero-bottom{
    max-width:100% !important;
}

.hero-bottom{
    width:100% !important;
    overflow:hidden !important;
}

@media (max-width:900px){
    .hero-bg{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center center !important;
    }

    .hero-content{
        width:92% !important;
        max-width:92% !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}


/* ==========================================================
   FINAL FIX — HERO IMAGE FULLY VISIBLE, NOT WIDER THAN PAGE
   This version shows the whole hero.png without cropping sides.
========================================================== */

html,
body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
}

body{
    margin:0 !important;
}

.hero{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    /* 16:9 banner ratio — image keeps correct proportions */
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:16 / 9 !important;

    overflow:hidden !important;
    display:block !important;
    padding:0 !important;
    margin:0 !important;
    background:#050705 !important;
    text-align:left !important;
}

/* image is now fitted inside the hero, not stretched outside */
.hero-bg{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    min-width:0 !important;

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

    display:block !important;
    transform:none !important;
    z-index:0 !important;
    background:#050705 !important;
}

.hero-overlay{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    background:
        linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.48) 42%, rgba(0,0,0,.15) 70%, rgba(0,0,0,.35) 100%),
        linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.35) 100%) !important;
}

.hero-content{
    position:absolute !important;
    z-index:2 !important;
    left:clamp(18px, 6vw, 110px) !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:min(680px, 48%) !important;
    max-width:680px !important;
    margin:0 !important;
    padding:0 !important;
}

.hero h1{
    font-size:clamp(38px, 5.8vw, 98px) !important;
    line-height:.9 !important;
    margin:18px 0 14px !important;
}

.hero-subtitle{
    font-size:clamp(15px, 1.55vw, 24px) !important;
    line-height:1.35 !important;
    max-width:620px !important;
}

.hero-actions{
    margin-top:24px !important;
}

.hero-btn{
    min-height:46px !important;
    padding:13px 19px !important;
}

.hero-bottom{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    max-width:100% !important;
    z-index:3 !important;
}

/* Mobile: use taller section, show full image width, keep text readable */
@media (max-width:900px){
    .hero{
        aspect-ratio:auto !important;
        height:88vh !important;
        min-height:620px !important;
    }

    .hero-bg{
        object-fit:contain !important;
        object-position:center top !important;
    }

    .hero-overlay{
        background:
            linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.95) 100%) !important;
    }

    .hero-content{
        left:5% !important;
        right:5% !important;
        top:auto !important;
        bottom:130px !important;
        transform:none !important;
        width:90% !important;
        max-width:90% !important;
    }

    .hero h1{
        font-size:clamp(42px, 13vw, 72px) !important;
    }

    .hero-actions{
        gap:9px !important;
    }

    .hero-btn{
        flex:1 1 100% !important;
    }

    .hero-bottom{
        grid-template-columns:1fr 1fr !important;
    }

    .hero-bottom div{
        font-size:10px !important;
        padding:10px 6px !important;
    }

    .hero-bottom div:nth-child(5){
        grid-column:1 / -1 !important;
    }
}

.inochi-side-logo{position:absolute;right:3vw;top:12vh;z-index:5;max-width:180px}
.inochi-side-logo img{width:100%;height:auto;display:block}
@media(max-width:900px){.inochi-side-logo{right:10px;top:90px;max-width:90px}}


/* Language switch visibility fix */
html[data-lang="en"] .pl,
html[data-lang="pl"] .en{
    display:none !important;
}

html[data-lang="pl"] .pl,
html[data-lang="en"] .en{
    display:initial;
}

/* macOS / PC screenshot update */
#realne-screeny-macos-pc .tile{
    min-height:260px;
    background-size:cover;
    background-position:center;
}

/* Separate language version update */
.lang a{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:9px;color:#fff;text-decoration:none;font-weight:900}
.lang a.active,.lang a:hover{background:#29f261;color:#031006;border-color:#29f261}
.subpage-hero{padding:150px 20px 80px;background:linear-gradient(120deg,#020402,#0b140d 55%,#030503);border-bottom:1px solid rgba(41,242,97,.22)}
.subpage-hero .container{max-width:1180px;margin:auto}
.subpage-hero h1{font-size:clamp(42px,7vw,92px);line-height:.95;margin:0 0 20px}
.subpage-hero p{max-width:760px;color:#dce8dc;font-size:20px;line-height:1.55}
.subpage-grid{max-width:1180px;margin:0 auto;padding:70px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.subpage-card{background:rgba(255,255,255,.04);border:1px solid rgba(41,242,97,.22);border-radius:22px;padding:28px}
.subpage-card h3{color:#29f261;margin-top:0}
.subpage-media{max-width:1180px;margin:0 auto;padding:20px 20px 80px}
.subpage-media img{width:100%;border-radius:24px;border:1px solid rgba(41,242,97,.2)}
@media(max-width:900px){.subpage-grid{grid-template-columns:1fr}.menu{gap:10px}}