/* JL Tuning – komponenter (revision 1D). Laddas EFTER styles.css. Ändra inte klassnamnen.
   Hero B2 (racingrand), sidfot med spårkant, däckspår, om-bild, typsnitt. Mått gäller vid 1440 px. */

:root{
  --jl-red:#E63C39; --jl-red-d:#C72F2C; --jl-muted:#AAABAB; --jl-line:rgba(255,255,255,.12);
}

.jl-hero,.jl-hero *,.jl-foot,.jl-foot *{box-sizing:border-box}

/* ---------- knappar ---------- */
.jl-btn{display:inline-flex;align-items:center;gap:8px;font:700 1.0625rem/1 var(--font-body,"Manrope",system-ui,sans-serif);padding:16px 24px;border-radius:6px;border:2px solid transparent;color:#fff;text-decoration:none;white-space:nowrap;position:relative;overflow:hidden;transition:background-color .2s,border-color .2s,transform .2s}
.jl-btn--red{background:linear-gradient(180deg,var(--jl-red),var(--jl-red-d));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 28px -12px rgba(230,60,57,.9)}
.jl-btn--red::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.jl-btn--red:hover::after,.jl-btn--red:focus-visible::after{transform:translateX(120%)}
.jl-btn--line{border-color:rgba(255,255,255,.85);background:rgba(0,0,0,.25)}
.jl-btn--line:hover,.jl-btn--line:focus-visible{background:var(--jl-red);border-color:var(--jl-red)}
.jl-btn:focus-visible{outline:2px solid var(--jl-red);outline-offset:3px}

.jl-eyebrow{display:flex;align-items:center;gap:12px;margin:0;font:800 .8125rem/1.2 var(--font-body,"Manrope",sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--jl-muted)}
.jl-eyebrow::before{content:"";width:34px;height:3px;border-radius:2px;background:var(--jl-red);flex:none}

/* ---------- HERO B2 ---------- */
.jl-hero{position:relative;isolation:isolate;overflow:hidden;background:#000;color:#fff;min-height:min(700px,88svh);margin:0}
.jl-hero__media{position:absolute;top:0;bottom:0;right:0;width:64%;z-index:0;overflow:hidden}
.jl-hero__media picture{display:block;width:100%;height:100%}
.jl-hero__img{display:block;width:100%;height:100%;object-fit:cover;object-position:58% 45%;transform-origin:60% 50%;animation:jl-kenburns 9s ease-out both;transition:transform .25s ease-out}
.jl-hero__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 30%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 35%)}
.jl-hero__media .particles{position:absolute;inset:0;z-index:1;pointer-events:none}
.jl-hero__panel{position:absolute;top:0;bottom:0;left:0;width:54%;z-index:1;clip-path:polygon(0 0,100% 0,80% 100%,0 100%);
  background:radial-gradient(70% 55% at 0% 100%,rgba(230,60,57,.25),transparent 60%),repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 2px,transparent 2px 7px),linear-gradient(160deg,#161616,#050505)}
.jl-hero__stripes{position:absolute;top:0;left:0;width:54%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.jl-hero__inner{position:relative;z-index:3;max-width:1440px;margin:0 auto;padding:54px clamp(20px,7.6vw,110px) 150px;display:grid;gap:20px;justify-items:start}
.jl-hero__inner > *{max-width:min(640px,100%);min-width:0}
.jl-hero__h1{margin:0;font-family:var(--font-heading);font-weight:var(--font-heading-weight,800);font-style:var(--font-heading-style,italic);text-transform:uppercase;line-height:.95;letter-spacing:0;font-size:clamp(2.08rem,3.76vw,3.4rem);transform:none}
.jl-hero__h1 span{display:block}
.jl-hero__h1 .is-red{color:var(--jl-red)}
.jl-hero__lead{margin:0;font-size:1.1875rem;line-height:1.55;color:rgba(255,255,255,.88);max-width:36ch}
.jl-hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
.jl-hero__chips{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 20px}
.jl-hero__chips li{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.875rem}
.jl-ring{width:36px;height:36px;border-radius:50%;border:2px solid var(--jl-red);display:grid;place-items:center;color:var(--jl-red);flex:none}
.jl-ring svg{width:20px;height:20px;stroke:currentColor;fill:none}
.jl-hero__gauge{position:absolute;z-index:3;width:clamp(200px,21vw,300px);height:auto;left:calc(43.2% - clamp(100px,10.5vw,150px));bottom:-24px;pointer-events:none}
.jl-curve{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:70px;display:block;z-index:4}

/* varvräknare (delas av hero, snabbväljare, områden, undersida) */
.jl-gauge{overflow:visible}
.jl-gauge__needle{transform-origin:100px 100px;transform:rotate(-100deg);animation:jl-sweep 1.5s cubic-bezier(.2,.9,.3,1.25) .3s forwards}
.jl-gauge__arc{stroke-dasharray:1;stroke-dashoffset:1;animation:jl-draw 1.2s ease-out .1s forwards}
@keyframes jl-sweep{to{transform:rotate(38deg)}}
@keyframes jl-draw{to{stroke-dashoffset:0}}
@keyframes jl-kenburns{from{transform:scale(1.07)}to{transform:scale(1)}}

/* hero mobil / surfplatta */
@media (max-width: 899px){
  .jl-hero{display:flex;flex-direction:column;min-height:0;background:radial-gradient(80% 60% at 0% 100%,rgba(230,60,57,.22),transparent 60%),linear-gradient(160deg,#161616,#050505)}
  .jl-hero__panel,.jl-hero__stripes,.jl-hero__gauge{display:none}
  .jl-hero__inner{order:1;padding:36px 20px 28px;width:100%}
  .jl-hero__h1{font-size:clamp(1.92rem,8.8vw,2.4rem)}
  .jl-hero__media{order:2;position:relative;width:100%;aspect-ratio:4/3;border-top:8px solid var(--jl-red);box-shadow:0 -10px 0 -8px #fff inset}
  .jl-hero__media::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:#fff;z-index:2}
  .jl-hero__media .particles{display:none}
  .jl-curve{height:40px}
}

/* ---------- SIDFOT 1: spårkant ---------- */
.jl-foot{position:relative;background:#050505;color:#fff;margin:0}
.jl-foot__band{position:relative;height:70px;background:linear-gradient(180deg,#0f0f0f,#050505);overflow:hidden}
.jl-foot__edge{position:absolute;left:0;top:0;width:100%;height:4px;display:block}
.jl-foot__band .jl-track{position:absolute;inset:0;width:100%;height:100%;display:block}
.jl-foot__cols{max-width:1240px;margin:0 auto;padding:56px 20px 0;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.jl-foot__logo{height:58px;width:auto;display:block}
.jl-foot__brand p{margin:14px 0 0;max-width:32ch;color:var(--jl-muted);font-size:.875rem;line-height:1.6}
.jl-foot__h{margin:0 0 12px;font:800 .78125rem/1.2 var(--font-body,"Manrope",sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--jl-red)}
.jl-foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.jl-foot__col li,.jl-foot__col a{font-size:.875rem;line-height:1.5;color:var(--jl-muted);text-decoration:none}
.jl-foot__col a{background:linear-gradient(var(--jl-red),var(--jl-red)) 0 100%/0 1px no-repeat;transition:background-size .25s,color .2s}
.jl-foot__col a:hover,.jl-foot__col a:focus-visible{color:#fff;background-size:100% 1px}
.jl-foot__bottom{max-width:1240px;margin:40px auto 0;padding:18px 20px 26px;border-top:1px solid var(--jl-line);display:flex;justify-content:space-between;gap:16px;color:var(--jl-muted);font-size:.8125rem}
.jl-foot__bottom a{color:var(--jl-muted)}
@media (max-width: 899px){
  .jl-foot__band{height:48px}
  .jl-foot__cols{grid-template-columns:1fr 1fr;gap:28px}
  .jl-foot__brand{grid-column:1/-1}
}
@media (max-width: 480px){ .jl-foot__cols{grid-template-columns:1fr} }

/* däckspår (sidfot + processteg). Rektanglarna skapas av jl-komponenter.js */
.jl-track rect{opacity:0;transition:opacity .3s}
.jl-track.is-rolled rect{opacity:var(--o,.38)}
.jl-track--mini{display:block;width:100%;height:24px}


@media (prefers-reduced-motion: reduce){
  .jl-hero__img,.jl-gauge__needle,.jl-gauge__arc{animation:none}
  .jl-gauge__needle{transform:rotate(38deg)}
  .jl-gauge__arc{stroke-dashoffset:0}
  .jl-btn--red::after{display:none}
  .jl-track rect{transition:none}
}
.jl-hero--sub{min-height:min(560px,80svh)}