:root{
    --navy-950:#05070d;
    --navy-900:#080b16;
    --navy-800:#0d1220;
    --navy-700:#12182b;
    --navy-600:#1a2238;
    --purple:#7C3AED;
    --blue:#00D4FF;
    --pink:#FF4DDA;
    --mint:#00FFC2;
    --text-1:#F5F7FF;
    --text-2:#98A2C0;
    --text-3:#6B7494;
    --border:rgba(255,255,255,0.08);
    --glass:rgba(255,255,255,0.045);
    --glass-strong:rgba(255,255,255,0.07);
    --radius-lg:24px;
    --radius-md:16px;
    --radius-sm:10px;
    --maxw:1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
    font-family:'Poppins', 'Segoe UI', Arial, sans-serif;
    background:var(--navy-950);
    color:var(--text-1);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
img,canvas{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
section{position:relative; z-index:1;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* Decorative fixed background mesh */
.bg-mesh{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
            radial-gradient(600px circle at 12% 8%, rgba(124,58,237,0.28), transparent 60%),
            radial-gradient(700px circle at 90% 15%, rgba(0,212,255,0.18), transparent 60%),
            radial-gradient(650px circle at 80% 85%, rgba(255,77,218,0.14), transparent 60%),
            radial-gradient(500px circle at 5% 90%, rgba(0,255,194,0.12), transparent 60%),
            var(--navy-950);
}

.grad-text{
    background:linear-gradient(92deg, var(--blue), var(--purple) 55%, var(--pink));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

/* NAV */
header.nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:18px 0;
    transition:all .35s ease;
    border-bottom:1px solid transparent;
}
header.nav.scrolled{
    padding:12px 0;
    background:rgba(8,11,22,0.72);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
}
.nav-inner{
    max-width:var(--maxw); margin:0 auto; padding:0 24px;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo{font-weight:800; font-size:20px; letter-spacing:.5px;}
.logo span{color:var(--mint);}
.nav-links{display:flex; gap:32px; font-size:14.5px; font-weight:500; color:var(--text-2);}
.nav-links a{transition:color .2s;}
.nav-links a:hover{color:var(--text-1);}
.nav-right{display:flex; align-items:center; gap:14px;}

.lang-switch{display:flex; align-items:center; gap:8px;}
.lang-switch a{
    display:flex; width:30px; height:22px; border-radius:6px;
    border:1px solid var(--border); overflow:hidden;
    opacity:.55;
    transition:opacity .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.lang-switch a svg{width:100%; height:100%; display:block;}
.lang-switch a:hover{opacity:1; transform:translateY(-2px); border-color:rgba(255,255,255,.3);}
.lang-switch a.active{
    opacity:1; border-color:var(--blue);
    box-shadow:0 0 0 1px var(--blue), 0 0 16px -4px rgba(0,212,255,.6);
}

@media(max-width:1010px){
    .nav-links{display:none;}
}
@media(max-width:480px){
    .lang-switch a{width:26px; height:19px;}
    .lang-switch{gap:6px;}
}

/* BUTTONS */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 26px; border-radius:100px;
    font-weight:600; font-size:15px;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
    white-space:nowrap;
    text-align:center;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    min-height:44px;
}
.btn-primary{
    background:linear-gradient(92deg, var(--purple), var(--blue));
    color:#fff;
    box-shadow:0 8px 28px -8px rgba(124,58,237,0.55);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 34px -6px rgba(0,212,255,0.55);}
.btn-ghost{
    background:var(--glass);
    border:1px solid var(--border);
    color:var(--text-1);
}
.btn-ghost:hover{border-color:rgba(255,255,255,0.25); background:var(--glass-strong);}
.btn-sm{padding:12px 20px; font-size:13.5px; min-height:40px;}
.btn-outline-mint{
    border:1px solid rgba(0,255,194,0.4);
    color:var(--mint);
    background:rgba(0,255,194,0.06);
}
.btn-outline-mint:hover{background:rgba(0,255,194,0.14); transform:translateY(-2px);}

@media(max-width:480px){
    .btn{white-space:normal; padding:14px 20px; font-size:14px; line-height:1.3;}
    .logo{font-size:16.5px;}
    .nav-inner{gap:10px;}
}

/* HERO */
.hero{
    min-height:100vh;
    display:flex; align-items:center;
    padding:140px 0 90px;
    position:relative;
    overflow:hidden;
}
.hero-inner{
    position:relative; z-index:2;
    max-width:820px; margin:0 auto; padding:0 24px;
    text-align:center;
}
.eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13.5px; font-weight:600; letter-spacing:.6px; text-transform:uppercase;
    color:var(--mint);
    background:rgba(0,255,194,0.08);
    border:1px solid rgba(0,255,194,0.25);
    padding:8px 16px; border-radius:100px;
    margin-bottom:28px;
}
h1{
    font-size:clamp(2.4rem, 5.4vw, 4.1rem);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-1px;
    margin-bottom:22px;
}
.lede{
    font-size:clamp(1rem, 1.6vw, 1.18rem);
    color:var(--text-2);
    font-weight:400;
    max-width:680px;
    margin:0 auto 20px;
}
.hero-highlight{
    font-weight:600;
    font-size:1.05rem;
    color:var(--text-1);
    margin-bottom:38px;
}
.hero-cta{
    display:flex; align-items:center; justify-content:center; gap:16px;
    flex-wrap:wrap;
    margin-bottom:44px;
}
@media(max-width:560px){
    .hero-cta{flex-direction:column; align-items:stretch;}
    .hero-cta .btn{width:100%;}
}
.hero-badges{
    display:flex; align-items:center; justify-content:center; gap:14px;
    flex-wrap:wrap;
}
.hero-badges span{
    font-size:13px; font-weight:500; color:var(--text-2);
    background:var(--glass); border:1px solid var(--border);
    padding:8px 16px; border-radius:100px;
}

/* SECTION HEADINGS */
.section{padding:110px 0;}
.section.alt{background:linear-gradient(180deg, transparent, rgba(255,255,255,0.015), transparent);}
.section-head{max-width:640px; margin:0 auto 64px; text-align:center;}
.kicker{
    font-size:13px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
    color:var(--blue); margin-bottom:14px;
}
h2{
    font-size:clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight:700;
    letter-spacing:-.5px;
    margin-bottom:16px;
}
.section-head p{color:var(--text-2); font-size:1.02rem;}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* BENTO GRID - Dlaczego EBOF */
.bento{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    grid-auto-rows:190px;
    gap:20px;
}
.bento .card:nth-child(1){grid-column:span 3; grid-row:span 2;}
.bento .card:nth-child(2){grid-column:span 3; grid-row:span 1;}
.bento .card:nth-child(3){grid-column:span 3; grid-row:span 1;}
.bento .card:nth-child(4){grid-column:span 2; grid-row:span 1;}
.bento .card:nth-child(5){grid-column:span 4; grid-row:span 1;}

.card{
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:30px;
    display:flex; flex-direction:column; justify-content:flex-end;
    position:relative;
    overflow:hidden;
    backdrop-filter:blur(6px);
    transition:transform .35s ease, border-color .35s ease, background .35s ease;
}
.card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,0.18);
    background:var(--glass-strong);
}
.card::before{
    content:'';
    position:absolute; top:-40%; right:-30%;
    width:220px; height:220px; border-radius:50%;
    background:radial-gradient(circle, var(--card-glow, var(--purple)) 0%, transparent 70%);
    opacity:.35; filter:blur(10px);
    transition:opacity .35s;
}
.card:hover::before{opacity:.6;}
.card .icon{
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.06);
    border:1px solid var(--border);
    margin-bottom:16px;
    color:var(--card-glow, var(--purple));
}
.card h3{font-size:1.12rem; font-weight:600; margin-bottom:8px;}
.card p{font-size:.92rem; color:var(--text-2);}

.card.c1{--card-glow:var(--blue);}
.card.c2{--card-glow:var(--purple);}
.card.c3{--card-glow:var(--pink);}
.card.c4{--card-glow:var(--mint);}
.card.c5{--card-glow:var(--blue);}

@media(max-width:900px){
    .bento{grid-template-columns:1fr 1fr; grid-auto-rows:auto;}
    .bento .card{grid-column:span 2 !important; grid-row:span 1 !important;}
}
@media(max-width:560px){
    .bento{grid-template-columns:1fr;}
    .bento .card{grid-column:span 1 !important;}
}

/* CHECKLIST - Kiedy warto zgłosić */
.checklist-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-bottom:44px;
}
.check-item{
    background:var(--glass); border:1px solid var(--border);
    border-radius:var(--radius-md); padding:24px;
    display:flex; flex-direction:column; gap:12px;
    transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.check-item:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,0.18);
    background:var(--glass-strong);
}
.check-item .dot{
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,255,194,0.1); color:var(--mint);
    border:1px solid rgba(0,255,194,0.3);
    flex-shrink:0;
    transition:background .3s ease, border-color .3s ease;
}
.check-item:hover .dot{
    background:rgba(0,255,194,0.22);
    border-color:rgba(0,255,194,0.55);
}
.check-item p{font-size:.94rem; color:var(--text-1); font-weight:500;}
@media(max-width:900px){.checklist-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.checklist-grid{grid-template-columns:1fr;}}

.callout{
    display:flex; align-items:center; gap:14px; justify-content:center;
    text-align:center;
    padding:22px 28px; border-radius:var(--radius-md);
    background:linear-gradient(92deg, rgba(124,58,237,0.14), rgba(0,212,255,0.14));
    border:1px solid rgba(0,212,255,0.25);
    font-weight:600; font-size:1.02rem;
    max-width:720px; margin:0 auto;
}

/* TIMELINE - Jak pracujemy */
.timeline{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
    position:relative;
    margin-bottom:30px;
}
.timeline::before{
    content:'';
    position:absolute; top:23px; left:12%; right:12%; height:2px;
    background:linear-gradient(90deg, var(--blue), var(--purple), var(--pink));
    opacity:.4; z-index:0;
}
@media(max-width:900px){.timeline::before{display:none;}}

.step{
    position:relative; z-index:1; text-align:center; padding:14px 8px;
    border-radius:var(--radius-md);
    transition:transform .3s ease, background .3s ease;
}
.step:hover{
    transform:translateY(-6px);
    background:var(--glass);
}
.step:hover .num{filter:brightness(1.3);}
.step .num{
    width:46px; height:46px; border-radius:50%;
    margin:0 auto 18px;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:1.05rem;
    border:2px solid transparent;
    background:
            linear-gradient(var(--navy-800), var(--navy-800)) padding-box,
            linear-gradient(135deg, var(--blue), var(--purple)) border-box;
    box-shadow:0 0 24px -4px rgba(0,212,255,0.5);
    animation:pulse-glow 3s ease-in-out infinite;
}
.step:nth-child(1) .num{animation-delay:0s;}
.step:nth-child(2) .num{animation-delay:.4s;}
.step:nth-child(3) .num{animation-delay:.8s;}
.step:nth-child(4) .num{animation-delay:1.2s;}

@keyframes pulse-glow{
    0%, 100%{ box-shadow:0 0 24px -4px rgba(0,212,255,0.5); transform:scale(1); }
    50%{ box-shadow:0 0 34px -2px rgba(124,58,237,0.7); transform:scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
    .step .num{animation:none;}
}
.step h3{font-size:1.02rem; font-weight:600; margin-bottom:8px;}
.step p{font-size:.88rem; color:var(--text-2);}
@media(max-width:900px){.timeline{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.timeline{grid-template-columns:1fr;}}

.proces-note{
    text-align:center; color:var(--text-3); font-weight:500; font-size:.95rem;
    margin-top:10px;
}

/* TRUST */
.trust{text-align:center;}
.trust p{max-width:680px; margin:0 auto; color:var(--text-2); font-size:1.02rem;}
.trust-badges{
    display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:32px;
}
.trust-badges span{
    font-size:12.5px; font-weight:600; color:var(--text-2);
    border:1px solid var(--border); padding:9px 18px; border-radius:100px;
    background:var(--glass);
}

/* FINAL CTA */
.cta-final{
    padding:100px 0 110px;
}
.cta-panel{
    background:linear-gradient(135deg, rgba(124,58,237,0.16), rgba(0,212,255,0.10) 50%, rgba(255,77,218,0.12));
    border:1px solid rgba(255,255,255,0.12);
    border-radius:32px;
    padding:clamp(36px, 6vw, 72px);
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px;
    align-items:center;
}
.cta-panel h2{margin-bottom:14px;}
.cta-panel p{color:var(--text-2); margin-bottom:28px;}
.cta-buttons{display:flex; flex-direction:column; gap:14px; align-items:flex-start;}
.cta-buttons .btn{width:100%; justify-content:center;}

.contact-form{
    background:rgba(5,7,13,0.5);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:28px;
    display:flex; flex-direction:column; gap:14px;
    backdrop-filter:blur(10px);
}
.contact-form h3{font-size:1.05rem; font-weight:600; margin-bottom:4px;}
.contact-form input, .contact-form textarea{
    width:100%; padding:13px 16px; border-radius:10px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--border);
    color:var(--text-1); font-family:inherit; font-size:.92rem;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:var(--text-3);}
.contact-form input:focus, .contact-form textarea:focus{
    outline:none; border-color:var(--blue);
}
.contact-form textarea{resize:vertical; min-height:70px;}
.form-note{font-size:12px; color:var(--text-3);}

.consent-check{
    display:flex; align-items:flex-start; gap:10px;
    font-size:11.5px; line-height:1.5; color:var(--text-3);
    cursor:pointer;
}
.consent-check input[type="checkbox"]{
    flex-shrink:0; width:18px; height:18px; margin-top:2px;
    accent-color:var(--blue);
    cursor:pointer;
}
.consent-check span{user-select:none;}

@media(max-width:860px){
    .cta-panel{grid-template-columns:1fr;}
}

/* FOOTER */
footer{
    position:relative; z-index:1;
    padding:40px 0; text-align:center;
    border-top:1px solid var(--border);
}
footer p{color:var(--text-3); font-size:.88rem;}
footer .foot-links{margin-top:10px; display:flex; justify-content:center; gap:18px; font-size:.82rem;}
footer .foot-links a{color:var(--text-2);}
footer .foot-links a:hover{color:var(--text-1);}
/* LEGAL BAR */
.legal-bar{
    position:relative; z-index:1;
    padding:16px 0;
    text-align:center;
    background:var(--navy-900);
    border-top:1px solid var(--border);
}
.legal-bar p{
    color:var(--text-3);
    font-size:.72rem;
    line-height:1.55;
    max-width:900px;
    margin:0 auto;
}

:root {
    --navy: #0B1120;
    --navy-light: #131A33;
    --purple: #7C3AED;
    --blue: #00D4FF;
    --pink: #FF4DDA;
    --mint: #00FFC2;
    --text: #E6E9F5;
    --text-dim: #9AA3C0;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--navy);
    font-family: Calibri, Carlito, -apple-system, "Segoe UI", sans-serif;
}

#cookie-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(6, 9, 20, 0.72);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#cookie-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#cookie-popup {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--navy-light);
    border-radius: 14px;
    padding: clamp(24px, 4vw, 36px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    transform: scale(1);
    transition: transform 0.3s ease;
}

#cookie-overlay.hidden #cookie-popup {
    transform: scale(0.94);
}

#cookie-popup::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, var(--purple), var(--blue), var(--pink), var(--mint));
}

#cookie-popup h2 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: clamp(17px, 2.2vw, 19px);
    font-weight: 700;
}

#cookie-popup p {
    margin: 0 0 22px;
    color: var(--text-dim);
    font-size: clamp(13px, 1.4vw, 15px);
    line-height: 1.6;
}

#cookie-popup a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#cookie-popup a:hover {
    color: var(--mint);
}

.cookie-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-btn {
    font-family: inherit;
    font-size: clamp(13px, 1.2vw, 14px);
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
    flex: 1 1 auto;
}

.cookie-btn:active {
    transform: scale(0.97);
}

.cookie-btn--accept {
    background: linear-gradient(90deg, var(--purple), var(--blue));
    color: #fff;
}

.cookie-btn--accept:hover {
    box-shadow: 0 0 18px rgba(0, 212, 255, 0.45);
}

.cookie-btn--reject {
    background: transparent;
    border-color: rgba(154, 163, 192, 0.4);
    color: var(--text-dim);
}

.cookie-btn--reject:hover {
    border-color: var(--text-dim);
    color: var(--text);
}

@media (max-width: 420px) {
    .cookie-actions {
        flex-direction: column;
    }
}