#vps{
  position:relative;
  padding:110px 0 125px;
  background:
    linear-gradient(
      rgba(2,7,18,.40),
      rgba(2,7,18,.65)
    ),
    url('/assets/frontline-vps-bg.png')
    center center / cover no-repeat;
  background-attachment:fixed;
  border-top:1px solid rgba(72,125,255,.18);
  border-bottom:1px solid rgba(72,125,255,.18);
}

#vps .wrap{
  position:relative;
  z-index:2;
}

#vps .heading{
  max-width:850px;
  margin:0 auto 45px;
  text-align:center;
}

#vps .heading small{
  display:inline-block;
  padding:8px 17px;
  border-radius:999px;
  border:1px solid rgba(73,126,255,.5);
  background:rgba(16,37,90,.42);
  color:#c7d4ff;
  font-size:11px;
  font-weight:900;
  letter-spacing:4px;
}

#vps .heading h2{
  margin:18px 0 12px;
  font-size:clamp(43px,5vw,66px);
  letter-spacing:-2px;
  color:white;
}

#vps .heading h2 span{
  color:#5b96ff;
  text-shadow:0 0 28px rgba(70,125,255,.55);
}

#vps .heading p{
  max-width:700px;
  margin:auto;
  color:#bec9dc;
  font-size:17px;
  line-height:1.6;
}

.vps-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  max-width:1060px;
  margin:auto;
}

.vps-card{
  position:relative;
  padding:30px 28px 27px;
  border-radius:22px;
  background:
    linear-gradient(
      180deg,
      rgba(20,38,76,.92),
      rgba(7,18,39,.97)
    );
  border:1px solid rgba(125,159,255,.25);
  backdrop-filter:blur(12px);
  box-shadow:
    0 24px 60px rgba(0,0,0,.45),
    inset 0 1px rgba(255,255,255,.04);
  transition:.25s;
}

.vps-card:hover{
  transform:translateY(-7px);
  border-color:rgba(85,138,255,.75);
  box-shadow:
    0 30px 70px rgba(0,0,0,.52),
    0 0 30px rgba(46,100,255,.22);
}

.vps-card.featured{
  transform:scale(1.04);
  border-color:#4d84ff;
  box-shadow:
    0 0 0 1px rgba(76,132,255,.36),
    0 0 38px rgba(44,99,255,.40),
    0 28px 70px rgba(0,0,0,.50);
}

.vps-card.featured:hover{
  transform:scale(1.04) translateY(-7px);
}

.vps-badge{
  position:absolute;
  top:18px;
  right:18px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(27,62,140,.65);
  border:1px solid rgba(95,145,255,.42);
  color:#c9d6ff;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}

.vps-card.featured .vps-badge{
  background:linear-gradient(135deg,#2e64ff,#173fce);
  color:white;
  box-shadow:0 0 20px rgba(50,105,255,.46);
}

.vps-icon{
  width:72px;
  height:62px;
  margin:0 auto 13px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:
    linear-gradient(
      180deg,
      rgba(49,97,215,.32),
      rgba(16,38,92,.42)
    );
  border:1px solid rgba(83,135,255,.30);
  box-shadow:0 0 25px rgba(50,105,255,.28);
  font-size:34px;
}

.vps-name{
  text-align:center;
  font-size:28px;
  font-weight:900;
  letter-spacing:-1px;
}

.vps-desc{
  min-height:61px;
  margin-top:8px;
  text-align:center;
  color:#aeb9cc;
  font-size:13px;
  line-height:1.5;
}

.vps-price{
  margin:19px 0;
  text-align:center;
  font-size:47px;
  font-weight:900;
}

.vps-price span{
  color:#a1aec1;
  font-size:13px;
  font-weight:400;
}

.vps-specs{
  margin:18px 0 22px;
  border-top:1px solid rgba(255,255,255,.08);
}

.vps-spec{
  display:grid;
  grid-template-columns:24px 1fr auto;
  gap:8px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:13px;
}

.vps-spec:before{
  content:"◆";
  color:#4b83ff;
  font-size:11px;
}

.vps-spec span{
  color:#bac4d4;
}

.vps-spec strong{
  color:white;
}

.vps-order{
  display:flex;
  min-height:52px;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  text-decoration:none;
  color:white;
  font-weight:900;
  background:linear-gradient(135deg,#3470ff,#174ddb);
  border:1px solid rgba(112,153,255,.55);
  box-shadow:0 12px 30px rgba(26,75,200,.32);
  transition:.2s;
}

.vps-order:hover{
  transform:translateY(-2px);
  filter:brightness(1.12);
  box-shadow:0 17px 38px rgba(26,75,200,.45);
}

.vps-footnote{
  margin-top:30px;
  text-align:center;
  color:#909caf;
  font-size:11px;
}

@media(max-width:900px){
  #vps{
    background-attachment:scroll;
  }

  .vps-grid{
    grid-template-columns:1fr;
    max-width:540px;
  }

  .vps-card.featured,
  .vps-card.featured:hover{
    transform:none;
  }
}