@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-svc{
  --svpa-svc-bg:#f8f8f8;
  --svpa-svc-ink:#0a0a0a;
  --svpa-svc-red:#e31010;
  --svpa-svc-white:#ffffff;
  --svpa-svc-chrome:#9a9a9a;
  --svpa-svc-card-bg:#1a1a1a;
  --svpa-svc-card-overlay:linear-gradient(to top,rgba(5,3,3,.92) 0%,rgba(5,3,3,.3) 55%,transparent 100%);
  --svpa-svc-glow:linear-gradient(135deg,rgba(227,16,16,.35) 0%,transparent 60%);

  --svpa-svc-wrap-max:1340px;
  --svpa-svc-grid-gap:3px;
  --svpa-svc-h2-color:#0a0a0a;
  --svpa-svc-em-color:#e31010;
  --svpa-svc-note-color:#9a9a9a;

  --svpa-svc-pill-bg:rgba(10,10,10,0.7);
  --svpa-svc-pill-border:rgba(255,255,255,0.1);
  --svpa-svc-pill-color:rgba(255,255,255,0.76);

  --svpa-svc-name-color:#ffffff;
  --svpa-svc-desc-color:rgba(255,255,255,0.76);
  --svpa-svc-num-color:#e31010;
  --svpa-svc-link-color:#e31010;

  --svpa-svc-ease:cubic-bezier(.16,1,.3,1);

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

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

/* Head */
.svpa-svc-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;
  margin-bottom:64px;
}
.svpa-svc-label{
  font-family:'Orbitron',monospace;
  font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--svpa-svc-red);
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:12px;
}
.svpa-svc-label::before{ content:''; width:22px; height:1px; background:var(--svpa-svc-red); }
.svpa-svc-h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.2rem,5vw,4.5rem);
  letter-spacing:3px;
  color:var(--svpa-svc-h2-color);
  line-height:.95;
  margin:0;
}
.svpa-svc-h2 em{ color:var(--svpa-svc-em-color); font-style:normal; }
.svpa-svc-note{
  font-size:.9rem;font-weight:500;
  color:var(--svpa-svc-note-color);
  max-width:320px;line-height:1.7;
  margin:0;
}

/* Grid */
.svpa-svc-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--svpa-svc-grid-gap);
}

/* Card */
.svpa-svc-card{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  background:var(--svpa-svc-card-bg);
  min-height:340px;
  text-decoration:none;
  color:inherit;
  display:block;
  transition:background var(--svpa-svc-anim-dur,.4s) var(--svpa-svc-anim-ease,cubic-bezier(.16,1,.3,1));
}
.svpa-svc-card:hover{
  background:var(--svpa-svc-card-bg-h, var(--svpa-svc-card-bg));
}
.svpa-svc-card:hover .svpa-svc-card__name{ color:var(--svpa-svc-name-color-h, var(--svpa-svc-name-color)); }
.svpa-svc-card:hover .svpa-svc-card__desc{ color:var(--svpa-svc-desc-color-h, var(--svpa-svc-desc-color)); }
.svpa-svc-card:hover .svpa-svc-card__link{ color:var(--svpa-svc-link-color-h, var(--svpa-svc-link-color)); }
.svpa-svc-card--tall{ min-height:480px; }
.svpa-svc-card__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform var(--svpa-svc-img-dur,.9s) var(--svpa-svc-anim-ease,cubic-bezier(.16,1,.3,1)),filter var(--svpa-svc-anim-dur,.5s);
  filter:brightness(.55) saturate(.85);
}
.svpa-svc-card:hover .svpa-svc-card__bg{ transform:scale(var(--svpa-svc-img-scale,1.08)); filter:brightness(.35) saturate(.6); }
.svpa-svc-card__glow{
  position:absolute;inset:0;
  background:var(--svpa-svc-glow);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.svpa-svc-card:hover .svpa-svc-card__glow{ opacity:1; }

.svpa-svc-card__pill{
  position:absolute;top:20px;left:20px;z-index:3;
  background:var(--svpa-svc-pill-bg);
  backdrop-filter:blur(6px);
  padding:5px 12px;
  font-family:'Orbitron',monospace;
  font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--svpa-svc-pill-color);
  border:1px solid var(--svpa-svc-pill-border);
}
.svpa-svc-card--ext .svpa-svc-card__pill{
  border-color:var(--svpa-svc-red);
  color:var(--svpa-svc-red);
}

.svpa-svc-card__body{
  position:absolute;inset:0;z-index:2;
  padding:32px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--svpa-svc-card-overlay);
  transition:background .4s;
}
.svpa-svc-card__num{
  font-family:'Orbitron',monospace;
  font-size:.55rem;letter-spacing:.22em;
  color:var(--svpa-svc-num-color);
  text-transform:uppercase;
  margin-bottom:8px;
  opacity:.8;
}
.svpa-svc-card__name{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.9rem;letter-spacing:2px;
  color:var(--svpa-svc-name-color);
  margin:0 0 8px;
  line-height:1;
  transform:translateY(6px);
  transition:transform var(--svpa-svc-anim-dur,.4s) var(--svpa-svc-anim-ease,cubic-bezier(.16,1,.3,1));
}
.svpa-svc-card:hover .svpa-svc-card__name{ transform:translateY(0); }
.svpa-svc-card__desc{
  font-size:.85rem;font-weight:400;
  color:var(--svpa-svc-desc-color);
  line-height:1.6;
  max-height:0;overflow:hidden;
  transition:max-height var(--svpa-svc-anim-dur,.5s) var(--svpa-svc-anim-ease,cubic-bezier(.16,1,.3,1)),opacity var(--svpa-svc-anim-dur,.4s);
  opacity:0;
  margin:0;
}
.svpa-svc-card:hover .svpa-svc-card__desc{ max-height:120px; opacity:1; }
.svpa-svc-card__link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Orbitron',monospace;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--svpa-svc-link-color);
  margin-top:12px;
  opacity:0;transform:translateY(8px);
  transition:opacity var(--svpa-svc-anim-dur,.3s) .1s,transform var(--svpa-svc-anim-dur,.3s) .1s var(--svpa-svc-anim-ease,cubic-bezier(.16,1,.3,1));
}
.svpa-svc-card:hover .svpa-svc-card__link{ opacity:1; transform:translateY(0); }
.svpa-svc-card__link svg{
  width:14px;height:14px;
  stroke:currentColor;stroke-width:2;fill:none;
  transition:transform .2s;
}
.svpa-svc-card:hover .svpa-svc-card__link svg{ transform:translateX(4px); }

/* Reveal */
.svpa-svc-sr{opacity:0;transform:translateY(36px);transition:opacity .7s var(--svpa-svc-ease),transform .7s var(--svpa-svc-ease);}
.svpa-svc.svpa-svc-vis .svpa-svc-sr{opacity:1;transform:none;}
.svpa-svc-d1{transition-delay:.08s;}
.svpa-svc-d2{transition-delay:.16s;}
.svpa-svc-d3{transition-delay:.24s;}
.svpa-svc-d4{transition-delay:.32s;}

@media (max-width:880px){
  .svpa-svc-grid{ grid-template-columns:1fr; }
  .svpa-svc{ padding:80px 0; }
  .svpa-svc-card,.svpa-svc-card--tall{ min-height:300px; }
}
@media (prefers-reduced-motion:reduce){
  .svpa-svc *{ transition:none !important; animation:none !important; }
  .svpa-svc-sr{ opacity:1; transform:none; }
}