@font-face{font-family:Archivo;src:url(assets/fonts/archivo-latin.woff2) format('woff2');font-weight:400 700;font-stretch:62% 125%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-latin-ext.woff2) format('woff2');font-weight:400 700;font-stretch:62% 125%;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#0d1b28;
  --muted:#59707f;
  --blue:#1673bb;
  --blue-deep:#0d4f86;
  --sky:#3ea9e0;
  --paper:#ffffff;
  --wash:#eef3f7;
  --line:#d3dee6;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,html{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.6;font-variant-numeric:tabular-nums;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
a{color:var(--blue-deep)}
a:focus-visible,button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0}
.logo{display:flex;align-items:baseline;gap:.34em;text-decoration:none;color:var(--blue)}
.logo .a{font-weight:700;font-stretch:108%;letter-spacing:-.015em;font-size:26px;line-height:1}
.logo .b{font-weight:400;font-stretch:96%;font-size:26px;line-height:1;color:var(--sky);transform:skewX(-11deg);display:inline-block}
.nav{display:flex;gap:26px;font-size:15px}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding:96px 0 84px}
h1{
  margin:0;font-weight:700;font-stretch:118%;
  font-size:clamp(42px,8.2vw,104px);line-height:.92;letter-spacing:-.028em;
  color:var(--blue-deep);max-width:13ch;
}
.lede{margin:34px 0 0;max-width:58ch;font-size:clamp(18px,2.1vw,21px);color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.btn{
  display:inline-block;padding:15px 26px;border-radius:2px;text-decoration:none;
  font-weight:700;font-stretch:104%;font-size:16px;
  background:var(--blue);color:#fff;border:2px solid var(--blue);
}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.btn.ghost{background:transparent;color:var(--blue-deep)}
.btn.ghost:hover{background:var(--wash);color:var(--blue-deep)}

/* ---------- sections ---------- */
section{padding:74px 0}
.band{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{
  margin:0 0 10px;font-weight:700;font-stretch:112%;letter-spacing:-.02em;
  font-size:clamp(27px,3.6vw,38px);line-height:1.08;
}
.sub{margin:0 0 36px;color:var(--muted);max-width:60ch}

.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cat{background:var(--paper);padding:20px 22px}
.cat b{display:block;font-weight:700;font-stretch:104%;font-size:17px}
.cat span{display:block;color:var(--muted);font-size:15px;margin-top:3px}

.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:26px}
.logos div{background:var(--paper);display:flex;align-items:center;justify-content:center;padding:20px 16px;min-height:84px}
.logos img{max-height:32px;max-width:78%;width:auto;height:auto;object-fit:contain}
.logos img[alt="LuK"],.logos img[alt="Hella"],.logos img[alt="KYB"]{max-height:42px}
.brands{list-style:none;margin:0;padding:22px 26px;columns:5;column-gap:26px;border:1px solid var(--line);background:var(--paper)}
.brands li{font-size:15.5px;line-height:1.85;color:var(--ink);break-inside:avoid}
.after{color:var(--muted);font-size:15px}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);counter-reset:s}
.steps li{background:var(--paper);padding:28px 26px 30px;counter-increment:s}
.steps li::before{content:counter(s);display:block;font-weight:700;font-stretch:118%;font-size:15px;color:var(--sky);margin-bottom:14px}
.steps h3{margin:0 0 8px;font-weight:700;font-stretch:110%;font-size:20px;letter-spacing:-.01em}
.steps p{margin:0;color:var(--muted);font-size:16px}
.after{margin:26px 0 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.col{background:var(--paper);padding:30px}
.col h3{margin:0 0 10px;font-weight:700;font-stretch:110%;font-size:21px;letter-spacing:-.01em}
.col p{margin:0 0 18px;color:var(--muted);max-width:44ch}
.inline{font-weight:700;font-stretch:102%;color:var(--blue-deep);text-decoration:none;border-bottom:2px solid var(--sky);padding-bottom:2px}
.inline:hover{border-bottom-color:var(--blue-deep)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:start}
.email{font-weight:700;font-stretch:112%;font-size:clamp(20px,3.4vw,34px);color:var(--blue-deep);text-decoration:none;letter-spacing:-.02em;word-break:break-word}
.email:hover{text-decoration:underline}
address{font-style:normal;color:var(--muted);line-height:1.75}
.k{color:var(--ink);font-weight:700;font-stretch:100%;font-size:15px;margin-bottom:4px}

footer{border-top:1px solid var(--line);padding:30px 0 48px;color:var(--muted);font-size:14.5px}
footer p{margin:0 0 6px;max-width:75ch}

@media (max-width:980px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .brands{columns:3}
  .logos{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:1fr}
}
@media (max-width:620px){
  .cats{grid-template-columns:1fr}
  .brands{columns:2}
  .logos{grid-template-columns:repeat(2,1fr)}
  .two{grid-template-columns:1fr}
  .col{padding:24px}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .bar{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 0}
  .logo .a,.logo .b{font-size:22px}
  .nav{gap:20px;font-size:15px}
  .btn{padding:14px 22px}
  .actions{gap:10px}
}
@media (max-width:760px){
  .hero{padding:64px 0 56px}
  section{padding:56px 0}
  .contact{grid-template-columns:1fr;gap:34px}
  .nav{gap:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.catlink{text-decoration:none;color:inherit;display:block}
.catlink:hover{box-shadow:inset 0 0 0 2px var(--blue)}
.catlink span{color:var(--blue-deep)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.tier{background:var(--paper);padding:28px 26px}
.tier b{display:block;font-weight:700;font-stretch:110%;font-size:20px;letter-spacing:-.01em;margin-bottom:8px}
.tier p{margin:0;color:var(--muted);font-size:16px}
.back{display:inline-block;margin-bottom:22px;color:var(--muted);text-decoration:none;font-size:15px}
.back:hover{color:var(--ink)}
@media (max-width:820px){.tiers{grid-template-columns:1fr}}