/* ================= ROOT ================= */
:root {
  --bg-deep: #04070D;
  --text-dim: #7B8BA3;

  --serif: 'Instrument Serif', serif;
  --sans: 'DM Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}



/* GRID */
.cost-grid{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}

/* CARD */
.cost-card{
  border-radius:16px;
  padding:30px;
  width:260px;
  transition:0.3s;
  background: #0C0C0C 0% 0% no-repeat padding-box;
border: 1px solid #ffffff43;
border-radius: 24px;
opacity: 1;
}

.cost-card:hover{
  transform:translateY(-6px);
}

.featured {
  position: relative;
  padding: 40px;
  width: 240px;
  height: 340px;              /* height increase */
  margin-top: -25px;
  z-index: 2;

  display: flex;              /* center content */
  flex-direction: column;
  justify-content: center;    /* vertical center */
  align-items: center;        /* horizontal center */
  text-align: center;

  background: rgba(255, 255, 255, 0.12);
  border: 2px solid #E3AA29;
  border-radius: 24px;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  overflow: hidden;

  box-shadow:
    inset 0 0 90px rgba(0,0,0,0.85),
    0 0 24px #e3aa2947;
}

.featured.cost-price{
color: #E3AA29;

}


.featured::before {
      box-shadow:
    inset 0 0 50px rgba(0,0,0,0.85),
    0 0 24px #e3aa2947;

  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 24px;
    background: linear-gradient(139deg, #ff5800 0%, #0006abeb 100%);  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

.featured > * {
  position: relative;
  z-index: 1;
}

/* TEXT */
.cost-provider{
 text-align: center;
font: normal normal 600 20px/30px Poppins;
letter-spacing: 0px;
color: #FFFFFF;
opacity: 1;
}

.cost-model{
 text-align: center;
font: normal normal 300 16px/30px Poppins;
letter-spacing: 0px;
color: #FFFFFF;
opacity: 0.75;
}

.cost-price{
  text-align: center;
font: normal normal 600 60px/100px Poppins;
letter-spacing: 0px;
color: #FFFFFF;
text-shadow: 0px 0px 12px #E3AA2940;
opacity: 1;
}

.cost-price .currency{
  font-size:20px;
  vertical-align:top;
}

.cost-price .period{
  font-size:20px;
}

.cost-detail{
  text-align: center;
font: normal normal 300 16px/30px Poppins;
letter-spacing: 0px;
color: #FFFFFF;
opacity: 0.75;
}
.cost-detail.center{
    font: normal normal 300 16px/45px Poppins !important;

}