/* ==================================================================
   4x4 XTREME — arkusz główny
   Paleta wyprowadzona z logo: chromowy błękit + stal + grafit.
   ================================================================== */

:root{
  --ink:#06080B;
  --plate:#0C1016;
  --steel:#141A22;
  --steel-hi:#1B2430;
  --edge:rgba(195,202,212,.13);
  --edge-hi:rgba(195,202,212,.30);
  --chrome:#C3CAD4;
  --mute:#7C8695;
  --blue:#0A8FE8;
  --blue-hi:#3FB4FF;
  --navy:#00305F;
  --paper:#EFF3F8;

  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'Barlow',system-ui,-apple-system,sans-serif;
  --data:'Barlow Semi Condensed','Barlow',sans-serif;

  --wrap:1240px;
  --gut:24px;
  --shear:22px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--blue-hi);text-decoration:none}
a:hover{color:var(--paper)}

:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-transform:uppercase;
}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:0}
p{margin:0 0 1.1em}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- element sygnaturowy: pasek szewronowy ----------------------- */
.eyebrow{
  font-family:var(--data);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue-hi);
  display:flex;
  align-items:center;
  gap:.7em;
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:"";
  width:26px;height:9px;flex:none;
  background:
    linear-gradient(115deg,transparent 46%,var(--blue) 46% 62%,transparent 62%),
    linear-gradient(115deg,transparent 74%,var(--chrome) 74% 90%,transparent 90%);
}

/* ================================================================
   NAGŁÓWEK
   ================================================================ */

.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(6,8,11,.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--edge);
}
.site-head__in{
  max-width:var(--wrap);margin-inline:auto;padding:12px var(--gut);
  display:flex;align-items:center;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand img{height:52px;width:auto}
.brand__txt{display:none}
@media(min-width:900px){
  .brand__txt{
    display:block;font-family:var(--data);font-size:.74rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--mute);border-left:1px solid var(--edge);padding-left:12px;
  }
}

.nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.nav a{
  display:block;padding:10px 16px;
  font-family:var(--data);font-size:1rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--chrome);
  position:relative;
}
.nav a:hover{color:var(--paper)}
.nav a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
.nav a:hover::after,
.nav .current-menu-item>a::after,
.nav .current_page_item>a::after{transform:scaleX(1)}

.head-tel{
  display:none;align-items:center;gap:9px;
  padding:10px 18px;border:1px solid var(--edge-hi);
  font-family:var(--data);font-weight:600;letter-spacing:.06em;color:var(--paper);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  transition:background .2s ease,border-color .2s ease;
}
.head-tel:hover{background:var(--blue);border-color:var(--blue);color:#fff}
@media(min-width:1080px){.head-tel{display:inline-flex}}

.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:40px;padding:0 8px;background:none;border:1px solid var(--edge);cursor:pointer;
}
.burger span{display:block;height:2px;background:var(--chrome);transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:860px){.burger{display:none}}

@media(max-width:859px){
  .nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--plate);border-bottom:1px solid var(--edge);
    display:none;padding:8px var(--gut) 18px;
  }
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav a{padding:14px 4px;border-bottom:1px solid var(--edge);font-size:1.1rem}
  .nav a::after{display:none}
}

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

.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--edge)}
.hero__x{
  position:absolute;top:50%;left:50%;
  width:min(1500px,150vw);height:min(1500px,150vw);
  transform:translate(-30%,-50%);
  opacity:.5;pointer-events:none;z-index:0;
}
.hero__glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 62% at 68% 44%,rgba(10,143,232,.24),transparent 70%),
    radial-gradient(80% 60% at 20% 0%,rgba(0,48,95,.36),transparent 65%);
}
.hero__in{
  position:relative;z-index:2;
  max-width:var(--wrap);margin-inline:auto;padding:clamp(48px,7vw,92px) var(--gut) clamp(40px,6vw,76px);
  display:grid;gap:36px;align-items:center;
}
@media(min-width:940px){
  .hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px}
}

.hero h1{margin-bottom:.35em}
.hero h1 .accent{
  display:block;
  background:linear-gradient(100deg,var(--blue-hi),var(--chrome) 62%,var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lead{font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--chrome);max-width:46ch}

.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.hero__figure{position:relative}
.hero__figure img{
  width:100%;
  filter:drop-shadow(0 34px 46px rgba(0,0,0,.72));
}
.hero__floor{
  position:absolute;left:6%;right:6%;bottom:4%;height:16px;
  background:radial-gradient(50% 100% at 50% 50%,rgba(10,143,232,.5),transparent 72%);
  filter:blur(7px);
}

/* pasek zaufania pod hero */
.trust{
  position:relative;z-index:2;border-top:1px solid var(--edge);
  background:linear-gradient(180deg,rgba(20,26,34,.75),rgba(6,8,11,0));
}
.trust__in{
  max-width:var(--wrap);margin-inline:auto;padding:16px var(--gut);
  display:flex;flex-wrap:wrap;gap:10px 30px;
  font-family:var(--data);font-size:.94rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);
}
.trust__in b{color:var(--chrome);font-weight:600}

/* ================================================================
   PRZYCISKI
   ================================================================ */

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border:1px solid transparent;cursor:pointer;
  font-family:var(--data);font-size:1.02rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--shear)),calc(100% - var(--shear)) 100%,0 100%);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-hi);color:#04121f}
.btn--ghost{border-color:var(--edge-hi);color:var(--paper);background:rgba(20,26,34,.5)}
.btn--ghost:hover{border-color:var(--blue);color:#fff;background:rgba(10,143,232,.16)}

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

.section{padding:clamp(56px,7vw,96px) 0}
.section--plate{background:var(--plate);border-block:1px solid var(--edge)}
.section__head{max-width:56ch;margin-bottom:clamp(28px,4vw,44px)}
.section__head p{color:var(--mute);margin-bottom:0}

/* --- siatka modeli ---------------------------------------------- */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(285px,1fr))}

.card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(168deg,var(--steel-hi),var(--steel) 58%,var(--plate));
  border:1px solid var(--edge);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
  transition:border-color .22s ease,transform .22s ease;
}
.card:hover{border-color:var(--blue);transform:translateY(-4px)}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0A0E13}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card__media img{transform:scale(1.05)}
.card__media--empty{display:grid;place-items:center;color:var(--mute);font-family:var(--data);letter-spacing:.14em;font-size:.85rem}

.badge{
  position:absolute;top:0;left:0;
  padding:7px 16px 7px 12px;
  background:var(--blue);color:#fff;
  font-family:var(--data);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
}
.badge--promo{background:#D8481F}

.card__body{padding:20px 22px 26px;display:flex;flex-direction:column;flex:1}
.card__marka{font-family:var(--data);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-hi);margin-bottom:6px}
.card__title{font-size:1.3rem;margin:0 0 12px}
.card__title a{color:var(--paper)}
.card:hover .card__title a{color:#fff}

.card__specs{
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none;
}
.card__specs li{
  font-family:var(--data);font-size:.9rem;letter-spacing:.05em;color:var(--chrome);
  border:1px solid var(--edge);padding:3px 10px;
}

.card__foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.price{font-family:var(--display);font-size:1.32rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.price--old{font-family:var(--data);font-size:1rem;font-weight:500;color:var(--mute);text-decoration:line-through;margin-right:8px}
.price--ask{font-family:var(--data);font-size:1rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.card__more{
  font-family:var(--data);font-size:.9rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-hi);
}

/* stan pusty */
.empty{
  border:1px dashed var(--edge-hi);padding:clamp(32px,6vw,64px);text-align:center;
  background:var(--plate);
}
.empty h3{color:var(--chrome)}
.empty p{color:var(--mute);max-width:44ch;margin-inline:auto}

/* ================================================================
   USŁUGI / SERWIS
   ================================================================ */

.cols{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tile{
  padding:26px 24px;background:var(--steel);border:1px solid var(--edge);
  border-top:2px solid var(--blue);
}
.tile h3{font-size:1.12rem;margin-bottom:.5em}
.tile p{color:var(--mute);margin:0;font-size:.98rem}

/* ================================================================
   POJEDYNCZY MODEL
   ================================================================ */

.model{padding:clamp(32px,5vw,60px) 0}
.crumbs{
  font-family:var(--data);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin-bottom:22px;
}
.crumbs a{color:var(--chrome)}
.crumbs span{margin:0 .5em;color:var(--blue)}

.model__top{display:grid;gap:32px}
@media(min-width:960px){.model__top{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px;align-items:start}}

.gallery__main{
  background:linear-gradient(168deg,var(--steel-hi),var(--plate));
  border:1px solid var(--edge);aspect-ratio:4/3;overflow:hidden;
  display:grid;place-items:center;
}
.gallery__main img{width:100%;height:100%;object-fit:contain}
.gallery__thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:8px}
.gallery__thumbs button{
  padding:0;border:1px solid var(--edge);background:var(--plate);cursor:pointer;aspect-ratio:1;overflow:hidden;
}
.gallery__thumbs button[aria-current="true"]{border-color:var(--blue)}
.gallery__thumbs img{width:100%;height:100%;object-fit:cover}

.model__panel{position:sticky;top:96px}
.model__marka{font-family:var(--data);letter-spacing:.2em;text-transform:uppercase;color:var(--blue-hi);font-size:.86rem}
.model h1{font-size:clamp(1.9rem,4vw,2.9rem);margin:.2em 0 .4em}
.model__lead{color:var(--chrome)}

.pricebox{
  margin:24px 0;padding:22px 24px;
  background:linear-gradient(150deg,rgba(10,143,232,.16),rgba(20,26,34,.7));
  border:1px solid var(--edge-hi);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}
.pricebox__label{font-family:var(--data);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.pricebox .price{font-size:2.1rem;display:block;margin-top:4px}
.pricebox__note{font-family:var(--data);color:var(--mute);font-size:.92rem;margin-top:6px}

.model__cta{display:flex;flex-wrap:wrap;gap:12px}

.speclist{margin:0;padding:0}
.spec__group{margin-top:34px}
.spec__group h2{font-size:1.15rem;letter-spacing:.14em;margin-bottom:14px;color:var(--chrome)}
.spec__row{
  display:grid;grid-template-columns:minmax(140px,34%) 1fr;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--edge);
}
.spec__row dt{font-family:var(--data);color:var(--mute);letter-spacing:.04em}
.spec__row dd{margin:0;color:var(--paper)}

.kit{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.kit li{position:relative;padding-left:24px;color:var(--chrome)}
.kit li::before{
  content:"";position:absolute;left:0;top:.62em;width:11px;height:8px;
  background:linear-gradient(115deg,transparent 42%,var(--blue) 42% 70%,transparent 70%);
}

/* ================================================================
   KONTAKT
   ================================================================ */

.contact{display:grid;gap:26px}
@media(min-width:900px){.contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}}

.infolist{list-style:none;margin:0;padding:0}
.infolist li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--edge)}
.infolist .k{
  font-family:var(--data);font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);min-width:118px;padding-top:3px;
}
.infolist .v{color:var(--paper)}
.infolist a{color:var(--paper)}
.infolist a:hover{color:var(--blue-hi)}

.mapbox{border:1px solid var(--edge);background:var(--plate);min-height:340px;height:100%}
.mapbox iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(.35) contrast(1.05)}

/* ================================================================
   TREŚĆ Z EDYTORA
   ================================================================ */

.prose{max-width:70ch}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.2em;color:var(--chrome)}
.prose li{margin-bottom:.4em}
.prose img{margin:1.4em 0;border:1px solid var(--edge)}
.prose blockquote{
  margin:1.6em 0;padding:4px 0 4px 22px;border-left:2px solid var(--blue);color:var(--chrome);font-size:1.08rem;
}
.prose table{width:100%;border-collapse:collapse}
.prose td,.prose th{border:1px solid var(--edge);padding:10px 12px;text-align:left}

/* ================================================================
   PASEK CTA
   ================================================================ */

.strip{
  background:linear-gradient(105deg,var(--navy),rgba(10,143,232,.24) 55%,var(--plate));
  border-block:1px solid var(--edge-hi);
}
.strip__in{
  max-width:var(--wrap);margin-inline:auto;padding:clamp(34px,5vw,56px) var(--gut);
  display:grid;gap:22px;align-items:center;
}
@media(min-width:860px){.strip__in{grid-template-columns:1fr auto}}
.strip h2{margin-bottom:.25em}
.strip p{color:var(--chrome);margin:0}
.strip__cta{display:flex;flex-wrap:wrap;gap:12px}

/* ================================================================
   STOPKA
   ================================================================ */

.site-foot{background:var(--plate);border-top:1px solid var(--edge);padding:52px 0 26px;font-size:.96rem}
.foot__grid{display:grid;gap:30px}
@media(min-width:820px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot__grid img{height:64px;width:auto;margin-bottom:14px}
.site-foot h4{
  font-family:var(--data);font-size:.86rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue-hi);margin:0 0 14px;font-weight:600;
}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:9px;color:var(--mute)}
.site-foot a{color:var(--chrome)}
.site-foot a:hover{color:var(--paper)}
.foot__legal{
  margin-top:34px;padding-top:18px;border-top:1px solid var(--edge);
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  font-family:var(--data);font-size:.88rem;letter-spacing:.06em;color:var(--mute);
}

/* ================================================================
   404 / paginacja
   ================================================================ */

.pager{margin-top:40px;display:flex;gap:8px;flex-wrap:wrap;font-family:var(--data)}
.pager .page-numbers{
  padding:9px 16px;border:1px solid var(--edge);color:var(--chrome);letter-spacing:.08em;
}
.pager .current{background:var(--blue);border-color:var(--blue);color:#fff}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .card:hover,.btn:hover{transform:none}
}