@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;600;700;900&display=swap');

.svpa-mix{
  --svpa-mix-bg:#1a1a1a;
  --svpa-mix-glow:rgba(227,16,16,.06);
  --svpa-mix-red:#e31010;
  --svpa-mix-red2:#b50d0d;
  --svpa-mix-red-glow:rgba(227,16,16,.28);
  --svpa-mix-white:#ffffff;
  --svpa-mix-ink:#0a0a0a;
  --svpa-mix-eyebrow:#e31010;
  --svpa-mix-h2:#ffffff;
  --svpa-mix-em:#e31010;
  --svpa-mix-sub:rgba(255,255,255,.4);

  --svpa-mix-track:rgba(255,255,255,.1);
  --svpa-mix-fill-start:#e31010;
  --svpa-mix-fill-end:#b50d0d;
  --svpa-mix-thumb:#e31010;

  --svpa-mix-name:#ffffff;
  --svpa-mix-val:#e31010;
  --svpa-mix-lbl:rgba(255,255,255,.28);

  --svpa-mix-rec-bg:rgba(227,16,16,.07);
  --svpa-mix-rec-border:rgba(227,16,16,.2);
  --svpa-mix-rec-text:rgba(255,255,255,.65);

  --svpa-mix-score-bg:#0a0a0a;
  --svpa-mix-score-border:#e31010;
  --svpa-mix-score-num:#e31010;
  --svpa-mix-score-lbl:rgba(255,255,255,.3);

  --svpa-mix-badge-bg:#e31010;
  --svpa-mix-badge-color:#ffffff;

  --svpa-mix-result-type:#ffffff;
  --svpa-mix-result-em:#e31010;
  --svpa-mix-result-sub:rgba(255,255,255,.4);

  --svpa-mix-btn-red-bg:#e31010;
  --svpa-mix-btn-red-color:#ffffff;
  --svpa-mix-btn-red-bg-h:#b50d0d;
  --svpa-mix-btn-glass-bg:rgba(255,255,255,.06);
  --svpa-mix-btn-glass-color:#ffffff;
  --svpa-mix-btn-glass-border:rgba(255,255,255,.18);
  --svpa-mix-btn-glass-bg-h:rgba(255,255,255,.12);

  --svpa-mix-wrap-max:1340px;
  --svpa-mix-ease:cubic-bezier(.16,1,.3,1);

  padding:120px 0;
  background:var(--svpa-mix-bg);
  position:relative;overflow:hidden;
  font-family:'Rajdhani',sans-serif;
  color:var(--svpa-mix-white);
}
.svpa-mix *,
.svpa-mix *::before,
.svpa-mix *::after{box-sizing:border-box;}

.svpa-mix::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 40%,var(--svpa-mix-glow),transparent 70%);
  pointer-events:none;
}

.svpa-mix-wrap{ position:relative; max-width:var(--svpa-mix-wrap-max); margin:0 auto; padding:0 28px; }

.svpa-mix-head{ text-align:center; margin-bottom:64px; }
.svpa-mix-eyebrow{
  font-family:'Rajdhani',sans-serif;
  font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--svpa-mix-eyebrow);
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
.svpa-mix-eyebrow::before,
.svpa-mix-eyebrow::after{ content:''; width:32px; height:1.5px; background:currentColor; }
.svpa-mix-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.8rem,6vw,5rem);
  letter-spacing:.06em;line-height:.95;
  color:var(--svpa-mix-h2);margin:0;
}
.svpa-mix-title em{ color:var(--svpa-mix-em); font-style:normal; }
.svpa-mix-sub{
  font-size:.92rem;color:var(--svpa-mix-sub);
  max-width:420px;margin:14px auto 0;line-height:1.7;
}

.svpa-mix-layout{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; position:relative; }

/* Car visual */
.svpa-mix-stage{ position:relative; display:flex; align-items:center; justify-content:center; }
.svpa-mix-frame{ width:100%; max-width:480px; position:relative; }
.svpa-mix-car-wrap{ position:relative; filter:drop-shadow(0 0 0px transparent); transition:filter .5s; }
.svpa-mix-car-wrap.svpa-mix-glow{ filter:drop-shadow(0 0 24px var(--svpa-mix-red-glow)); }
.svpa-mix-car-img{ width:100%; height:auto; display:block; transform:scale(1.5); transition:transform .5s var(--svpa-mix-ease); transform-origin:center; }

.svpa-mix-lines{
  position:absolute; left:-60px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:8px;
  opacity:0; transition:opacity .4s;
}
.svpa-mix-lines.svpa-mix-show{ opacity:1; }
.svpa-mix-line{
  height:2px;
  background:linear-gradient(to right,transparent,rgba(227,16,16,.6),transparent);
  animation:svpa-mix-spLine 1s ease-in-out var(--svpa-mix-d,0s) infinite;
}
@keyframes svpa-mix-spLine{
  0%,100%{ transform:scaleX(1); opacity:.6; }
  50%   { transform:scaleX(1.3); opacity:1; }
}

.svpa-mix-score{
  position:absolute; top:-12px; right:-12px;
  background:var(--svpa-mix-score-bg);
  border:2px solid var(--svpa-mix-score-border);
  padding:10px 16px;text-align:center;
  transition:border-color .4s,box-shadow .4s;
}
.svpa-mix-score.svpa-mix-hot{ border-color:var(--svpa-mix-red2); box-shadow:0 0 20px var(--svpa-mix-red-glow); }
.svpa-mix-score-num{
  font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.06em;
  color:var(--svpa-mix-score-num);line-height:1;display:block;
}
.svpa-mix-score-lbl{
  font-family:'Rajdhani',sans-serif;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--svpa-mix-score-lbl);
}
.svpa-mix-badge{
  position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
  background:var(--svpa-mix-badge-bg); padding:5px 16px;
  font-family:'Rajdhani',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--svpa-mix-badge-color);
  white-space:nowrap;opacity:0;transition:opacity .4s;
}
.svpa-mix-badge.svpa-mix-show{ opacity:1; }

/* Sliders */
.svpa-mix-sliders{ display:flex; flex-direction:column; gap:42px; }
.svpa-mix-slider-group{}
.svpa-mix-sl-top{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:12px; }
.svpa-mix-sl-name{
  font-family:'Rajdhani',sans-serif;
  font-size:.95rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--svpa-mix-name);
}
.svpa-mix-sl-val{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem;letter-spacing:.06em;
  color:var(--svpa-mix-val);line-height:1;
}
.svpa-mix-sl-labels{ display:flex; justify-content:space-between; margin-bottom:8px; }
.svpa-mix-sl-lbl{
  font-family:'Rajdhani',sans-serif;font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--svpa-mix-lbl);
}
.svpa-mix-sl-track-wrap{ position:relative; }
.svpa-mix-sl-fill{
  position:absolute;top:50%;left:0;height:4px;
  background:linear-gradient(90deg,var(--svpa-mix-fill-start),var(--svpa-mix-fill-end));
  transform:translateY(-50%);
  pointer-events:none;
  transition:width .1s;
  width:0%;
}
.svpa-mix-sl-range{
  width:100%;height:4px;
  -webkit-appearance:none;appearance:none;
  background:var(--svpa-mix-track);
  outline:none;cursor:pointer;position:relative;
  margin:0;
}
.svpa-mix-sl-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:var(--svpa-mix-thumb);cursor:pointer;
  box-shadow:0 0 0 4px rgba(227,16,16,.2),0 0 16px var(--svpa-mix-red-glow);
  transition:box-shadow .2s,transform .2s;
}
.svpa-mix-sl-range::-webkit-slider-thumb:hover{ transform:scale(1.2); box-shadow:0 0 0 6px rgba(227,16,16,.15),0 0 24px var(--svpa-mix-red-glow); }
.svpa-mix-sl-range::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;border:none;
  background:var(--svpa-mix-thumb);cursor:pointer;
  box-shadow:0 0 16px var(--svpa-mix-red-glow);
}

.svpa-mix-rec{
  margin-top:8px;padding:12px 18px;
  background:var(--svpa-mix-rec-bg);
  border:1px solid var(--svpa-mix-rec-border);
  border-left:3px solid var(--svpa-mix-red);
  display:flex;align-items:center;gap:14px;
  transition:opacity .4s;
  opacity:.4;
}
.svpa-mix-rec.svpa-mix-on{ opacity:1; }
.svpa-mix-rec-icon{
  width:18px;height:18px;
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.svpa-mix-rec-icon svg{ width:18px; height:18px; fill:var(--svpa-mix-red); }
.svpa-mix-rec-text{
  font-size:.8rem;color:var(--svpa-mix-rec-text);line-height:1.5;
}
.svpa-mix-rec-text strong{ color:var(--svpa-mix-white); }

/* CTA area */
.svpa-mix-cta{
  text-align:center;margin-top:56px;padding-top:48px;
  border-top:1px solid rgba(255,255,255,.06);
}
.svpa-mix-result-type{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(1.5rem,3vw,2.4rem);letter-spacing:.08em;
  color:var(--svpa-mix-result-type);
  margin:0 0 8px;
}
.svpa-mix-result-type em{ color:var(--svpa-mix-result-em); font-style:normal; }
.svpa-mix-result-sub{ font-size:.88rem; color:var(--svpa-mix-result-sub); margin:0 0 28px; }

.svpa-mix-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.svpa-mix-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Rajdhani',sans-serif;
  font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 28px;border:1.5px solid transparent;border-radius:0;
  text-decoration:none;cursor:pointer;
  position:relative;overflow:hidden;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.svpa-mix-btn::after{
  content:'';position:absolute;top:0;left:-120%;
  width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transition:left .55s var(--svpa-mix-ease);
  pointer-events:none;
}
.svpa-mix-btn:hover::after{ left:140%; }
.svpa-mix-btn--red{ background:var(--svpa-mix-btn-red-bg); color:var(--svpa-mix-btn-red-color); border-color:var(--svpa-mix-btn-red-bg); }
.svpa-mix-btn--red:hover{ background:var(--svpa-mix-btn-red-bg-h); color:var(--svpa-mix-btn-red-color-h,var(--svpa-mix-btn-red-color)); border-color:var(--svpa-mix-btn-red-bg-h); transform:translateY(-2px); box-shadow:0 10px 30px rgba(227,16,16,.28); }
.svpa-mix-btn--glass{ background:var(--svpa-mix-btn-glass-bg); color:var(--svpa-mix-btn-glass-color); border-color:var(--svpa-mix-btn-glass-border); backdrop-filter:blur(8px); }
.svpa-mix-btn--glass:hover{ background:var(--svpa-mix-btn-glass-bg-h); color:var(--svpa-mix-btn-glass-color-h,var(--svpa-mix-btn-glass-color)); transform:translateY(-2px); }

/* Reveal */
.svpa-mix-sr{opacity:0;transform:translateY(36px);transition:opacity .7s var(--svpa-mix-ease),transform .7s var(--svpa-mix-ease);}
.svpa-mix.svpa-mix-vis .svpa-mix-sr{opacity:1;transform:none;}

@media (max-width:960px){
  .svpa-mix-layout{ grid-template-columns:1fr; gap:48px; }
  .svpa-mix-stage{ order:-1; }
  .svpa-mix{ padding:80px 0; }
}
@media (prefers-reduced-motion:reduce){
  .svpa-mix *{ transition:none !important; animation:none !important; }
  .svpa-mix-sr{ opacity:1; transform:none; }
}