:root{
  --black:#171411; --coal:#221E1A; --paper:#F1EEE7;
  --red:#9E2620; --red-deep:#7E1B16; --yellow:#F0B41C;
  --bone:#E9E4D8; --ink:#262220;
  --display:'Rubik Distressed','Oswald',sans-serif;
  --label:'Oswald',sans-serif;
  --body:'Rubik',sans-serif;
  --marker:'Permanent Marker',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.6;position:relative}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html{background:#171411 url('../img/pozadina.svg') repeat;background-size:620px;background-attachment:fixed}
body{max-width:1280px;margin:0 auto;box-shadow:0 0 50px rgba(0,0,0,.45)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.topbar{background:var(--black);color:var(--bone);display:flex;align-items:center;justify-content:flex-start;gap:1.5rem;padding:.9rem 5rem .9rem 1.4rem;flex-wrap:wrap;position:relative}
.logo{display:flex;align-items:center;gap:.5rem}
.logo-img{height:4.2rem;width:auto;display:block}
.bolt-img{height:3.9rem;width:auto;display:block}
.moto-img{height:3.4rem;width:auto;display:block}
.badge-img{height:3.8rem;width:auto;display:block;position:absolute;right:1.4rem;top:50%;transform:translateY(-50%)}
.nav{background:var(--red);display:flex;flex-wrap:wrap;position:sticky;top:0;z-index:50;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.nav-links > a{font-family:var(--display);font-size:1rem;letter-spacing:.06em;color:var(--bone);padding:.8rem 1.4rem;text-transform:uppercase;border-right:1px solid var(--red-deep);transition:background .15s}
.nav-links > a:hover{background:var(--red-deep)}
.nav-links > a[aria-current]{background:var(--black)}

.partners-page.wrap{
  max-width:980px;
  margin:0 auto;
  padding:2.6rem 1.5rem 4.5rem;
}
.partners-hero{margin-bottom:1.6rem}
.partners-kicker{
  font-family:var(--label);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:.45rem;
}
.partners-page h1{
  font-family:var(--display);
  font-size:clamp(2.1rem,5vw,3rem);
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--black);
  margin-bottom:.7rem;
}
.partners-lead{
  max-width:48ch;
  font-size:1.02rem;
  color:#4a433c;
}

.partners-index{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin:1.8rem 0 2.4rem;
  padding:1rem 1.1rem;
  background:var(--black);
  box-shadow:6px 6px 0 var(--red);
  position:sticky;
  top:3.2rem;
  z-index:20;
}
.partners-index a,
.partners-index span{
  min-width:2rem;
  height:2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--label);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--bone);
  border:1px solid transparent;
}
.partners-index a:hover{
  background:var(--yellow);
  color:var(--black);
}
.partners-index span.is-empty{
  opacity:.28;
  cursor:default;
}

.partners-group{margin-bottom:2.4rem;scroll-margin-top:7rem}
.partners-group h2{
  font-family:var(--display);
  font-size:1.55rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--red);
  border-bottom:3px solid var(--black);
  padding-bottom:.35rem;
  margin-bottom:1rem;
}

.partners-grid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.85rem;
}
.partner-card{
  display:flex;
  flex-direction:column;
  gap:.65rem;
  background:#fff;
  border:2px solid var(--black);
  padding:.85rem .75rem 1rem;
  min-height:8.5rem;
  transition:transform .12s, box-shadow .12s, background .12s;
}
.partner-card:hover{
  transform:translate(-3px,-3px);
  box-shadow:5px 5px 0 var(--red);
  background:var(--bone);
}
.partner-card-logo{
  height:3.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
  border:1px solid #d8d2c6;
  padding:.4rem;
}
.partner-card-logo img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
.partner-card-logo.is-empty{
  background:
    repeating-linear-gradient(45deg, #ebe6db 0 10px, #f4f0e7 10px 20px);
}
.partner-card-name{
  font-family:var(--label);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.25;
  color:var(--black);
}

.partners-empty{
  margin-top:2rem;
  color:#6a6258;
}

footer{background:var(--black);text-align:center;padding:2.5rem 1rem}
.wordmark-img{width:min(520px,82%);height:auto;display:inline-block}
.foot-meta{margin-top:1rem;color:#8C8478;font-size:.78rem;font-family:var(--label);letter-spacing:.14em;text-transform:uppercase}

@media (max-width:700px){
  .badge-img{position:static;transform:none}
  .topbar{padding:.9rem 1.5rem}
  .partners-index{top:0;gap:.25rem;padding:.75rem}
  .partners-index a,
  .partners-index span{min-width:1.7rem;height:1.7rem;font-size:.75rem}
  .partners-group{scroll-margin-top:5.5rem}
}