@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-quiz{
  --svpa-quiz-bg:#f8f8f8;
  --svpa-quiz-grid-color:rgba(227,16,16,.04);
  --svpa-quiz-grid-size:60px;
  --svpa-quiz-red:#e31010;
  --svpa-quiz-red2:#b50d0d;
  --svpa-quiz-red-glow:rgba(227,16,16,.28);
  --svpa-quiz-white:#ffffff;
  --svpa-quiz-ink:#0a0a0a;

  --svpa-quiz-eyebrow:#e31010;
  --svpa-quiz-title:#0a0a0a;
  --svpa-quiz-em:#e31010;
  --svpa-quiz-sub:rgba(0,0,0,0.64);

  --svpa-quiz-progress-track:rgba(0,0,0,.08);
  --svpa-quiz-progress-fill-start:#e31010;
  --svpa-quiz-progress-fill-end:#b50d0d;
  --svpa-quiz-progress-label:rgba(0,0,0,.3);

  --svpa-quiz-question:rgba(0,0,0,.5);
  --svpa-quiz-card-line:#e31010;
  --svpa-quiz-card-label:#ffffff;
  --svpa-quiz-card-sub:rgba(255,255,255,.4);
  --svpa-quiz-card-border:#e31010;
  --svpa-quiz-vs-bg:#e31010;
  --svpa-quiz-vs-color:#ffffff;

  --svpa-quiz-hint:rgba(0,0,0,0.72);

  --svpa-quiz-result-type:#e31010;
  --svpa-quiz-result-tag:rgba(0,0,0,.65);
  --svpa-quiz-result-desc:rgba(0,0,0,.45);

  --svpa-quiz-svc-bg:rgba(227,16,16,.1);
  --svpa-quiz-svc-border:rgba(227,16,16,.3);
  --svpa-quiz-svc-color:#e31010;

  --svpa-quiz-restart:rgba(0,0,0,0.25);
  --svpa-quiz-restart-h:rgba(0,0,0,0.6);

  --svpa-quiz-btn-red-bg:#e31010;
  --svpa-quiz-btn-red-color:#ffffff;
  --svpa-quiz-btn-red-bg-h:#b50d0d;
  --svpa-quiz-btn-dark-bg:#0a0a0a;
  --svpa-quiz-btn-dark-color:#ffffff;
  --svpa-quiz-btn-dark-bg-h:#2a2a2a;

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

  padding:120px 0;
  background:var(--svpa-quiz-bg);
  position:relative;overflow:hidden;
  font-family:'Rajdhani',sans-serif;
}
.svpa-quiz *,
.svpa-quiz *::before,
.svpa-quiz *::after{box-sizing:border-box;}
.svpa-quiz img{display:block;max-width:100%;}

.svpa-quiz::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(var(--svpa-quiz-grid-color) 1px,transparent 1px),
    linear-gradient(90deg,var(--svpa-quiz-grid-color) 1px,transparent 1px);
  background-size:var(--svpa-quiz-grid-size) var(--svpa-quiz-grid-size);
  pointer-events:none;
}

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

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

.svpa-quiz-progress{
  max-width:560px;margin:0 auto 44px;
  display:flex;align-items:center;gap:14px;
}
.svpa-quiz-progress-track{
  flex:1;height:3px;
  background:var(--svpa-quiz-progress-track);
  position:relative;overflow:hidden;
}
.svpa-quiz-progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--svpa-quiz-progress-fill-start),var(--svpa-quiz-progress-fill-end));
  transition:width .5s var(--svpa-quiz-ease);
}
.svpa-quiz-progress-label{
  font-family:'Rajdhani',sans-serif;
  font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--svpa-quiz-progress-label);
  white-space:nowrap;
}

.svpa-quiz-arena{ max-width:960px; margin:0 auto; position:relative; min-height:380px; }

.svpa-quiz-round{ display:none; animation:svpa-quiz-roundIn .4s var(--svpa-quiz-ease) both; }
.svpa-quiz-round.svpa-quiz-active{ display:block; }
@keyframes svpa-quiz-roundIn{
  from{ opacity:0; transform:scale(.97); }
  to  { opacity:1; transform:scale(1); }
}

.svpa-quiz-question{
  font-family:'Rajdhani',sans-serif;
  font-size:1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--svpa-quiz-question);
  text-align:center;margin:0 0 28px;
}

.svpa-quiz-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:3px;position:relative;
}
.svpa-quiz-card{
  position:relative;overflow:hidden;cursor:pointer;
  height:280px;
  transition:transform .35s var(--svpa-quiz-ease);
}
.svpa-quiz-card:hover{ transform:scale(1.02); z-index:2; }
.svpa-quiz-card img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.55);
  transition:filter .4s,transform .5s var(--svpa-quiz-ease);
}
.svpa-quiz-card:hover img{ filter:brightness(.35); transform:scale(1.08); }
.svpa-quiz-card::before{
  content:'';position:absolute;inset:0;
  border:2px solid transparent;
  transition:border-color .3s;
  z-index:3;pointer-events:none;
}
.svpa-quiz-card:hover::before{ border-color:var(--svpa-quiz-card-border); }
.svpa-quiz-card-line{
  position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--svpa-quiz-card-line);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--svpa-quiz-ease);
  z-index:4;
}
.svpa-quiz-card:hover .svpa-quiz-card-line{ transform:scaleX(1); }
.svpa-quiz-card-ov{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(10,10,15,.92) 0%,rgba(10,10,15,.2) 60%,transparent 100%);
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  padding:28px;
  transition:background .3s;
}
.svpa-quiz-card:hover .svpa-quiz-card-ov{
  background:linear-gradient(to top,rgba(10,10,15,.95) 0%,rgba(10,10,15,.5) 60%,rgba(227,16,16,.08) 100%);
}
.svpa-quiz-card-emoji{ font-size:2rem; margin-bottom:8px; transition:transform .3s var(--svpa-quiz-ease); }
.svpa-quiz-card:hover .svpa-quiz-card-emoji{ transform:scale(1.2); }
.svpa-quiz-card-label{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem;letter-spacing:.08em;
  color:var(--svpa-quiz-card-label);
  text-align:center;margin-bottom:6px;
}
.svpa-quiz-card-sub{
  font-size:.78rem;color:var(--svpa-quiz-card-sub);text-align:center;
}

.svpa-quiz-vs{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:10;
  width:46px;height:46px;
  background:var(--svpa-quiz-vs-bg);
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;
  font-size:1.1rem;letter-spacing:.1em;color:var(--svpa-quiz-vs-color);
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  animation:svpa-quiz-vsPulse 2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes svpa-quiz-vsPulse{
  0%,100%{ box-shadow:0 0 0 0 var(--svpa-quiz-red-glow); }
  50%   { box-shadow:0 0 0 12px transparent; }
}

.svpa-quiz-hint{
  text-align:center;margin-top:16px;
  font-family:'Rajdhani',sans-serif;
  font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--svpa-quiz-hint);
}

.svpa-quiz-result{
  display:none;text-align:center;
  animation:svpa-quiz-roundIn .6s var(--svpa-quiz-ease) both;
  padding:20px 0;
}
.svpa-quiz-result.svpa-quiz-show{ display:block; }
.svpa-quiz-res-badge{
  display:inline-block;margin-bottom:24px;font-size:5rem;
  animation:svpa-quiz-badgePop .7s var(--svpa-quiz-ease) .1s both;
}
@keyframes svpa-quiz-badgePop{
  from{ transform:scale(0) rotate(-20deg); }
  to  { transform:scale(1) rotate(0deg);   }
}
.svpa-quiz-res-type{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.2rem,5vw,3.8rem);letter-spacing:.08em;
  color:var(--svpa-quiz-result-type);margin:0 0 8px;
}
.svpa-quiz-res-tagline{
  font-family:'Rajdhani',sans-serif;
  font-size:1rem;font-weight:600;letter-spacing:.08em;
  color:var(--svpa-quiz-result-tag);margin:0 0 18px;
}
.svpa-quiz-res-desc{
  font-size:.92rem;color:var(--svpa-quiz-result-desc);
  max-width:500px;margin:0 auto 36px;line-height:1.75;
}
.svpa-quiz-res-services{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:36px;
}
.svpa-quiz-svc{
  padding:10px 20px;
  background:var(--svpa-quiz-svc-bg);
  border:1px solid var(--svpa-quiz-svc-border);
  font-family:'Rajdhani',sans-serif;
  font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--svpa-quiz-svc-color);
}
.svpa-quiz-res-cta{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;
}
.svpa-quiz-restart{
  font-family:'Rajdhani',sans-serif;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--svpa-quiz-restart);
  cursor:pointer;background:none;border:none;padding:6px;
  transition:color .2s;
}
.svpa-quiz-restart:hover{ color:var(--svpa-quiz-restart-h); }

.svpa-quiz-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,transform .22s ease,box-shadow .22s ease,border-color .22s ease,color .22s ease;
}
.svpa-quiz-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-quiz-ease);
  pointer-events:none;
}
.svpa-quiz-btn:hover::after{ left:140%; }
.svpa-quiz-btn--red{ background:var(--svpa-quiz-btn-red-bg); color:var(--svpa-quiz-btn-red-color); border-color:var(--svpa-quiz-btn-red-bg); }
.svpa-quiz-btn--red:hover{ background:var(--svpa-quiz-btn-red-bg-h); color:var(--svpa-quiz-btn-red-color-h,var(--svpa-quiz-btn-red-color)); border-color:var(--svpa-quiz-btn-red-bg-h); transform:translateY(-2px); box-shadow:0 10px 30px rgba(227,16,16,.28); }
.svpa-quiz-btn--dark{ background:var(--svpa-quiz-btn-dark-bg); color:var(--svpa-quiz-btn-dark-color); border-color:var(--svpa-quiz-btn-dark-bg); }
.svpa-quiz-btn--dark:hover{ background:var(--svpa-quiz-btn-dark-bg-h); color:var(--svpa-quiz-btn-dark-color-h,var(--svpa-quiz-btn-dark-color)); border-color:var(--svpa-quiz-btn-dark-bg-h); transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,0.25); }

@media (max-width:640px){
  .svpa-quiz-cards{ grid-template-columns:1fr; gap:3px; }
  .svpa-quiz-card{ height:180px; }
  .svpa-quiz-vs{ display:none; }
  .svpa-quiz{ padding:80px 0; }
}
@media (prefers-reduced-motion:reduce){
  .svpa-quiz *{ transition:none !important; animation:none !important; }
}