*{box-sizing:border-box}
body{
margin:0;
background:#f5f6f8;
color:#17191d;
font-family:Arial,sans-serif;
overflow-x:hidden
}
.nav{
height:74px;
background:#fff;
padding:0 4%;
display:flex;
gap:30px;
align-items:center;
border-bottom:1px solid #e5e7eb;
position:sticky;
top:0;
z-index:50
}
.logo{
font-size:28px;
font-weight:900;
letter-spacing:-1.5px;
margin-right:25px
}
.logo span{color:#ff5a36}
.nav a{
font-weight:800;
color:#30343a;
text-decoration:none;
white-space:nowrap
}
.nav a:hover{color:#ff5a36}
.nav .grow{flex:1}
.btn{
border:0;
border-radius:13px;
padding:13px 20px;
font-weight:800;
cursor:pointer
}
.primary{
background:#ff5a36!important;
color:#fff!important;
box-shadow:0 8px 22px #ff5a3626
}

.hero{
background:linear-gradient(90deg,rgba(15,18,22,.88),rgba(15,18,22,.35)),url("/static/hero.png") center/cover no-repeat;
color:#fff;
padding:65px 5% 48px;
position:relative;
overflow:hidden
}
.hero:after{
content:"";
position:absolute;
right:-120px;
top:-100px;
width:520px;
height:520px;
background:radial-gradient(circle,#ff5a3630,transparent 65%);
pointer-events:none
}
.hero h1{
font-size:64px;
line-height:1.02;
letter-spacing:-3px;
margin:0;
max-width:900px;
position:relative;
z-index:1
}
.hero h1 span{color:#ff6847}
.hero p{
font-size:20px;
line-height:1.5;
color:#d7dbe0;
max-width:700px;
margin:20px 0 28px
}
.hero .search{
max-width:1080px;
display:flex;
gap:10px;
position:relative;
z-index:2
}
.search>*{
padding:17px!important;
border-radius:14px!important;
border:0;
font-size:16px
}
.search input{flex:1;min-width:0}
.search select{flex:1}
.search button{min-width:150px}

.wrap{
max-width:1240px;
padding:50px 5%;
margin:auto
}
.wrap h2{
font-size:32px;
letter-spacing:-1px;
margin:0 0 22px
}
.cats{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:12px;
margin-bottom:45px
}
.chip{
display:block;
border:1px solid #e1e3e6;
border-radius:18px;
padding:20px 10px;
background:#fff;
font-weight:800;
text-align:center;
text-decoration:none;
color:#17191d;
transition:.18s
}
.chip:hover{
transform:translateY(-3px);
border-color:#ff9c86;
box-shadow:0 10px 25px #00000010
}

.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px
}
.card{
border-radius:18px!important;
border:1px solid #e1e3e6!important;
overflow:hidden;
background:#fff;
box-shadow:0 6px 20px #00000009;
padding:0!important;
transition:.18s
}
.card:hover{
transform:translateY(-3px);
box-shadow:0 14px 30px #00000014
}
.card .thumb{
display:block;
width:100%;
height:220px!important;
object-fit:cover;
border-radius:0!important;
margin:0!important
}
.card .cat,
.card .title,
.card .muted,
.card .want,
.card .btn{
margin-left:16px;
margin-right:16px
}
.card .cat{
display:inline-block;
margin-top:16px;
padding:9px 13px;
border-radius:999px;
background:#fff0eb;
color:#ff5a36;
font-size:13px;
font-weight:800
}
.card .title{
font-size:20px;
font-weight:900;
margin-top:13px;
color:#17191d
}
.card .muted{
font-size:15px;
color:#6b6f76;
margin-top:6px
}
.card .want{
margin-top:14px;
margin-bottom:4px;
padding:11px;
border-radius:11px;
background:#f5f6f8;
font-size:14px
}
.card .score{
font-size:14px;
margin:12px 16px;
color:#078b57;
font-weight:800
}
.card .btn{
display:block;
margin-top:16px;
margin-bottom:18px;
text-align:center;
padding:14px;
text-decoration:none
}

.panel{
background:transparent!important;
padding:0!important;
margin-top:35px
}
#jak{
background:#191c21!important;
color:#fff!important;
border-radius:25px!important;
padding:42px!important;
margin-top:55px!important
}
#jak h2{color:#fff}
.steps{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px
}
.step{
background:#23272d;
border:1px solid #30343a;
border-radius:17px;
padding:22px
}
.num{
display:inline-flex;
width:40px;
height:40px;
align-items:center;
justify-content:center;
background:#ff5a36;
color:#fff;
border-radius:50%;
font-weight:900;
margin-bottom:12px
}
footer{
background:#121418;
color:#adb2ba;
margin-top:45px;
padding:40px 5%
}

@media(max-width:850px){
.cats{grid-template-columns:repeat(3,1fr)}
.grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:550px){
.nav{
height:66px;
padding:0 4%;
gap:16px;
overflow-x:auto;
white-space:nowrap
}
.nav .grow{display:none}
.nav .logo{
font-size:22px;
flex:0 0 auto;
margin-right:4px
}
.nav a{
font-size:14px;
flex:0 0 auto
}
.nav .btn{padding:10px 13px}

.hero{
padding:45px 0 38px
}
.hero h1{
font-size:45px;
letter-spacing:-2px
}
.hero p{
font-size:17px
}
.hero .search{
flex-direction:column
}
.search>*{
width:100%!important;
min-height:55px
}

.wrap{
padding:35px 20px
}
.wrap h2{font-size:27px}

.cats{
grid-template-columns:repeat(2,1fr);
gap:10px
}
.chip{
padding:17px 8px;
font-size:15px
}

.grid{grid-template-columns:1fr}
.card .thumb{height:230px!important}

#jak{
padding:27px 20px!important
}
.steps{
grid-template-columns:1fr
}
}0


/* MOBILE - naglowek i hero */

/* FINAL MOBILE */
@media (max-width:550px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }

  .nav{
    width:100% !important;
    height:60px !important;
    padding:0 12px !important;
    gap:12px !important;
    overflow:hidden !important;
    white-space:nowrap;
    box-sizing:border-box !important;
  }

  .nav .logo{
    font-size:21px !important;
    letter-spacing:-1px !important;
    flex:0 0 auto !important;
  }

  .nav a{
    font-size:12px !important;
    padding:7px 4px !important;
    flex:0 0 auto !important;
  }

  .nav a[href="#jak"],
  .nav a[href="/my-offers"],
  .nav a[href="/my-listings"],
  .nav a[href="/add"],
  .nav a[href="/logout"]{
    display:none !important;
  }

  .nav .btn{
    margin-left:auto !important;
    flex:0 0 auto !important;
    font-size:13px !important;
    padding:10px 15px !important;
    border-radius:11px !important;
  }

  .hero{
    width:100% !important;
    min-height:0 !important;
    padding:27px 18px 27px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .hero h1{
    margin:0 0 13px !important;
    font-size:38px !important;
    line-height:1.03 !important;
    letter-spacing:-2px !important;
  }

  .hero p{
    margin:0 0 17px !important;
    font-size:14px !important;
    line-height:1.4 !important;
  }

  .search{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
    margin:0 !important;
  }

  .search>*{
    width:100% !important;
    min-height:46px !important;
    height:46px !important;
    box-sizing:border-box !important;
    flex:none !important;
  }

  .search input,
  .search select{
    font-size:14px !important;
    border-radius:13px !important;
  }

  .search button{
    min-height:48px !important;
    height:48px !important;
    font-size:15px !important;
    border-radius:13px !important;
  }
}

/* MOBILE FINAL COMPACT */
@media (max-width:550px){
  .hero{
    padding:32px 20px 30px !important;
  }

  .hero h1{
    font-size:35px !important;
    line-height:1.05 !important;
    letter-spacing:-1.7px !important;
    margin:0 0 14px !important;
  }

  .hero p{
    font-size:15px !important;
    line-height:1.4 !important;
    margin:0 0 18px !important;
  }

  .search{
    gap:7px !important;
  }

  .search>*{
    min-height:52px !important;
  }

  .search input,
  .search select,
  .search button{
    min-height:52px !important;
    height:52px !important;
    font-size:15px !important;
    border-radius:14px !important;
  }

  .search button{
    min-height:54px !important;
    height:54px !important;
  }

  .filters{
    gap:7px !important;
  }

  .filters input,
  .filters select,
  .filter-btn{
    min-height:48px !important;
    height:48px !important;
    font-size:15px !important;
    border-radius:14px !important;
  }
}

/* ===== FINAL KARTY OGŁOSZEŃ ===== */
.card{
  border-radius:16px !important;
  border:1px solid #e4e6e9 !important;
  background:#fff !important;
  box-shadow:0 5px 18px rgba(20,25,30,.07) !important;
  overflow:hidden !important;
}

.card:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 12px 28px rgba(20,25,30,.11) !important;
}

.card .home-gallery,
.card .thumb{
  width:100% !important;
  height:182px !important;
  object-fit:cover !important;
}

.card .cat{
  margin:12px 14px 0 !important;
  padding:6px 9px !important;
  font-size:11px !important;
  border-radius:999px !important;
}

.card .title{
  margin:9px 14px 0 !important;
  font-size:17px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
}

.card .muted{
  margin:5px 14px 0 !important;
  font-size:12px !important;
}

.card .want{
  margin:9px 14px 0 !important;
  padding:8px 9px !important;
  font-size:12px !important;
  border-radius:9px !important;
}

.card .score{
  margin:9px 14px !important;
  font-size:12px !important;
}

.card .btn{
  margin:11px 14px 14px !important;
  padding:11px !important;
  font-size:13px !important;
  border-radius:10px !important;
}

@media(max-width:550px){
  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  .card{
    border-radius:14px !important;
  }

  .card .home-gallery,
  .card .thumb{
    height:132px !important;
  }

  .card .cat{
    margin:9px 10px 0 !important;
    padding:5px 7px !important;
    font-size:9px !important;
  }

  .card .title{
    margin:7px 10px 0 !important;
    font-size:14px !important;
    line-height:1.18 !important;
  }

  .card .muted{
    margin:4px 10px 0 !important;
    font-size:10px !important;
  }

  .card .want{
    margin:7px 10px 0 !important;
    padding:7px !important;
    font-size:10px !important;
  }

  .card .score{
    margin:7px 10px !important;
    font-size:10px !important;
  }

  .card .btn{
    margin:8px 10px 10px !important;
    padding:9px !important;
    font-size:11px !important;
  }
}