/* Blue-i Support Categories — v1.2.0
   Brand direction: clean white + light blue + Blue-i navy/blue.
   No orange accents.
*/
.blue-i-support-packages{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
  padding:48px 24px 64px;
  background:
    radial-gradient(circle at 7% 16%, rgba(18,154,239,.12), transparent 24%),
    radial-gradient(circle at 93% 82%, rgba(11,91,177,.09), transparent 25%),
    linear-gradient(180deg,#fafdff 0%,#eef8ff 52%,#f7fbff 100%);
  color:#102f57;
  font-family:Arial,Helvetica,sans-serif;
}
.blue-i-support-packages:before{
  content:"";
  position:absolute;
  width:420px;height:420px;
  right:-190px;top:-180px;
  border-radius:50%;
  background:rgba(19,150,236,.07);
  pointer-events:none;
}
.blue-i-support-packages:after{
  content:"";
  position:absolute;
  width:320px;height:320px;
  left:-210px;bottom:-170px;
  border-radius:50%;
  background:rgba(30,120,214,.06);
  pointer-events:none;
}

.bi-sp-head{
  position:relative;
  z-index:1;
  text-align:center;
  max-width:900px;
  margin:0 auto 42px;
}
.bi-sp-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  color:#0b86dc;
  font-size:14px;
  font-weight:800;
  letter-spacing:2.2px;
}
.bi-sp-kicker span{
  display:block;
  width:58px;
  height:2px;
  background:#1a8fe2;
  border-radius:3px;
}
.bi-sp-head h1{
  margin:16px 0 12px;
  color:#102f57;
  font-size:50px;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-1.2px;
}
.bi-sp-head h1 strong{color:#078fe7}
.bi-sp-head p{
  margin:0;
  color:#607995;
  font-size:16px;
  line-height:1.65;
}

/* Four-card desktop layout */
.bi-sp-grid{
  position:relative;
  z-index:1;
  width:min(1280px, calc(100vw - 48px));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;
  align-items:stretch;
}
.bi-sp-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:rgba(255,255,255,.96);
  border:1px solid #cfe5f7;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 34px rgba(18,79,133,.10);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.bi-sp-card:hover{
  transform:translateY(-8px);
  border-color:#36a5ec;
  box-shadow:0 22px 46px rgba(14,105,182,.18);
}
.bi-sp-card-inner{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:25px 22px 22px;
}
.bi-sp-featured{
  border:2px solid #148fe2;
  box-shadow:0 16px 38px rgba(18,130,218,.16);
}
.bi-sp-badge{
  height:34px;
  line-height:34px;
  text-align:center;
  background:linear-gradient(90deg,#0a80d5,#18a0ef);
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.2px;
}
.bi-sp-featured .bi-sp-card-inner{padding-top:19px}

.bi-sp-title-row{
  display:flex;
  align-items:center;
  gap:13px;
}
.bi-sp-title-row h2{
  margin:0;
  color:#102f57;
  font-size:23px;
  line-height:1.2;
}
.bi-sp-icon{
  width:42px;height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#edf7ff;
  color:#0b82d8;
  font-size:22px;
  font-weight:800;
  transition:transform .25s ease,box-shadow .25s ease;
}
.bi-sp-card:hover .bi-sp-icon{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 7px 16px rgba(13,130,218,.14);
}
.bi-sp-icon-star{background:#eaf6ff;color:#0b82d8}
.bi-sp-icon-diamond{background:#eef7ff;color:#258fe0}
.bi-sp-icon-crown{background:#edf5ff;color:#136fbe}

.bi-sp-description{
  min-height:70px;
  margin:16px 0 8px;
  color:#58728e;
  font-size:14px;
  line-height:1.55;
}
.bi-sp-price{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:2px 0 11px;
  white-space:nowrap;
}
.bi-sp-price span{
  color:#0d315b;
  font-size:36px;
  line-height:1;
  font-weight:800;
  letter-spacing:-1px;
}
.bi-sp-featured .bi-sp-price span{color:#087fd2}
.bi-sp-price b{font-size:13px;color:#24496e}
.bi-sp-price small{font-size:12px;color:#71869c}

.bi-sp-summary{
  padding:10px 0;
  border-top:1px solid #dcecf8;
  border-bottom:1px solid #dcecf8;
  color:#345b7e;
  font-size:12.5px;
  line-height:1.5;
}
.bi-sp-summary strong{color:#163f66}

.bi-sp-hours{
  padding:9px 0;
  border-bottom:1px solid #dcecf8;
  color:#4d6b88;
  font-size:12.5px;
  line-height:1.9;
}

.bi-sp-features{
  list-style:none;
  padding:10px 0 8px;
  margin:0;
  min-height:188px;
}
.bi-sp-features li{
  display:flex;
  align-items:center;
  gap:9px;
  margin:9px 0;
  color:#365a7b;
  font-size:13.5px;
  line-height:1.35;
}
.bi-sp-features li span{
  color:#0a8fe5;
  font-weight:900;
  font-size:16px;
}
.bi-sp-cta{
  margin-top:auto;
  width:100%;
  border:0;
  cursor:pointer;
  box-sizing:border-box;
  text-align:center;
  text-decoration:none!important;
  color:#fff!important;
  font-family:inherit;
  font-weight:800;
  font-size:13.5px;
  background:linear-gradient(90deg,#079be9,#075caf);
  border-radius:26px;
  padding:13px 10px;
  box-shadow:0 9px 20px rgba(8,120,211,.18);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.bi-sp-cta:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
  box-shadow:0 13px 26px rgba(8,120,211,.25);
}
.bi-sp-cta:active{transform:translateY(0) scale(.99)}
.bi-sp-cta-icon{
  display:inline-block;
  transition:transform .2s ease;
}
.bi-sp-cta:hover .bi-sp-cta-icon{transform:translate(2px,-2px)}

.bi-sp-details{display:none!important}

/* Floating On-Site Visit service link */
.bi-sp-onsite-badge{
  position:absolute;
  left:0;
  top:48%;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:150px;
  background:#fff;
  border:1px solid #c7e5f8;
  border-left:4px solid #0b8fdf;
  border-radius:0 14px 14px 0;
  padding:11px 14px 11px 11px;
  box-shadow:0 8px 22px rgba(20,88,139,.13);
  text-decoration:none!important;
  color:#173b63!important;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.bi-sp-onsite-badge:hover{
  transform:translateX(7px);
  border-color:#63b9ee;
  box-shadow:0 13px 28px rgba(20,105,170,.20);
}
.bi-sp-onsite-badge-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  color:#078fe7;
  transition:transform .25s ease;
}
.bi-sp-onsite-badge-icon svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bi-sp-onsite-badge:hover .bi-sp-onsite-badge-icon{
  transform:translateX(2px) scale(1.08);
}
.bi-sp-onsite-badge strong{
  display:block;
  color:#173b63;
  font-size:13px;
}
.bi-sp-onsite-badge small{
  display:block;
  color:#71869b;
  font-size:11px;
  margin-top:3px;
}
.bi-sp-onsite-arrow{
  margin-left:auto;
  color:#078fe7;
  font-size:18px;
  font-weight:700;
  opacity:0;
  transform:translateX(-5px);
  transition:opacity .2s ease,transform .2s ease;
}
.bi-sp-onsite-badge:hover .bi-sp-onsite-arrow{
  opacity:1;
  transform:translateX(0);
}

/* Modal */
.bi-sp-modal{display:none;position:fixed;inset:0;z-index:999999}
.bi-sp-modal.is-open{display:block}
.bi-sp-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(8,37,70,.42);
  backdrop-filter:blur(5px);
  animation:biSpFade .2s ease;
}
.bi-sp-modal-dialog{
  position:relative;z-index:1;
  width:min(520px,calc(100% - 32px));
  margin:8vh auto 0;
  background:#fff;
  border:1px solid #c9e4f7;
  border-radius:22px;
  padding:30px;
  color:#102f57;
  box-shadow:0 28px 80px rgba(0,45,90,.22);
  animation:biSpPop .25s ease;
}
.bi-sp-modal-close{
  position:absolute;right:15px;top:12px;
  width:38px;height:38px;border:0;border-radius:50%;
  background:#edf7ff;color:#087bc9;
  font-size:25px;line-height:1;cursor:pointer;
}
.bi-sp-modal-kicker{color:#078fe7;font-size:11px;font-weight:800;letter-spacing:2px}
.bi-sp-modal-dialog h2{margin:7px 0 10px;font-size:29px;color:#102f57}
.bi-sp-modal-price{font-size:36px;font-weight:800;color:#087fd2}
.bi-sp-modal-price small{font-size:12px;font-weight:500;color:#71869b}
.bi-sp-modal-meta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.bi-sp-modal-meta span{padding:9px 12px;border-radius:10px;background:#f0f8ff;color:#3d5f7f;font-size:12.5px}
.bi-sp-modal-dialog ul{list-style:none;padding:0;margin:15px 0 22px}
.bi-sp-modal-dialog li{padding:7px 0;color:#3d5f7f;font-size:14px}
.bi-sp-modal-dialog li:before{content:"✓";color:#078fe7;font-weight:900;margin-right:9px}
.bi-sp-modal-contact{
  display:block;text-align:center;text-decoration:none;
  color:#fff!important;background:linear-gradient(90deg,#079be9,#075caf);
  border-radius:25px;padding:13px;font-weight:800;
}

@keyframes biSpFade{from{opacity:0}to{opacity:1}}
@keyframes biSpPop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

@media(max-width:1050px){
  .blue-i-support-packages{padding-left:22px;padding-right:22px}
  .bi-sp-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:850px;gap:20px}
  .bi-sp-card{min-height:560px}
}
@media(max-width:650px){
  .blue-i-support-packages{padding:40px 14px 58px}
  .bi-sp-head{margin-bottom:30px}
  .bi-sp-head h1{font-size:38px}
  .bi-sp-head p{font-size:14px}
  .bi-sp-grid{grid-template-columns:1fr;max-width:520px}
  .bi-sp-features{min-height:0}
  .bi-sp-onsite-badge{display:none}
}