/* Hub V413 — Premium Flow Cards
   Upgrades the Fix / Tune / Save / Build cards shown in the storefront bridge.
*/

.hub413-premium-flow{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  align-content:stretch !important;
}

.hub413-premium-flow .hub413-flow-card{
  position:relative !important;
  min-height:178px !important;
  padding:22px 20px 20px !important;
  overflow:hidden !important;
  border-radius:28px !important;
  text-decoration:none !important;
  isolation:isolate !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.06)) padding-box,
    linear-gradient(135deg,rgba(103,232,249,.75),rgba(37,99,235,.38),rgba(255,255,255,.16)) border-box !important;
  border:1px solid transparent !important;
  box-shadow:
    0 22px 56px rgba(2,6,23,.26),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.hub413-premium-flow .hub413-flow-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-2;
  background:
    radial-gradient(circle at 18% 18%,rgba(103,232,249,.26),transparent 34%),
    radial-gradient(circle at 86% 0%,rgba(37,99,235,.24),transparent 32%),
    linear-gradient(145deg,#17253b 0%,#0e1b2e 58%,#07111f 100%);
}

.hub413-premium-flow .hub413-flow-card::after{
  content:"";
  position:absolute;
  width:138px;
  height:138px;
  right:-52px;
  top:-56px;
  border-radius:999px;
  background:rgba(103,232,249,.15);
  border:1px solid rgba(103,232,249,.18);
  box-shadow:0 0 40px rgba(14,165,233,.18);
}

.hub413-premium-flow .hub413-flow-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:
    0 30px 68px rgba(14,165,233,.18),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.hub413-premium-flow .hub413-flow-card i{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:44px !important;
  height:32px !important;
  margin-bottom:16px !important;
  border-radius:999px !important;
  font-style:normal !important;
  font-size:.78rem !important;
  letter-spacing:.12em !important;
  font-weight:950 !important;
  color:#ffffff !important;
  background:linear-gradient(135deg,#0ea5e9,#2563eb) !important;
  box-shadow:0 12px 26px rgba(14,165,233,.24) !important;
}

.hub413-premium-flow .hub413-flow-card b{
  display:block !important;
  margin:0 0 8px !important;
  color:#ffffff !important;
  font-size:1.55rem !important;
  line-height:1 !important;
  letter-spacing:-.045em !important;
}

.hub413-premium-flow .hub413-flow-card span{
  display:block !important;
  max-width:28ch !important;
  color:#dbeafe !important;
  line-height:1.5 !important;
  font-size:.96rem !important;
}

.hub413-premium-flow .hub413-flow-card em{
  display:inline-flex !important;
  margin-top:16px !important;
  color:#67e8f9 !important;
  font-style:normal !important;
  font-weight:950 !important;
  font-size:.88rem !important;
}

.hub413-premium-flow .hub413-flow-card.fix::before{
  background:
    radial-gradient(circle at 18% 18%,rgba(103,232,249,.30),transparent 34%),
    radial-gradient(circle at 86% 0%,rgba(37,99,235,.22),transparent 32%),
    linear-gradient(145deg,#173049 0%,#0f2138 56%,#07111f 100%);
}
.hub413-premium-flow .hub413-flow-card.tune::before{
  background:
    radial-gradient(circle at 18% 18%,rgba(96,165,250,.30),transparent 34%),
    radial-gradient(circle at 86% 0%,rgba(14,165,233,.20),transparent 32%),
    linear-gradient(145deg,#182b43 0%,#102036 58%,#07111f 100%);
}
.hub413-premium-flow .hub413-flow-card.save::before{
  background:
    radial-gradient(circle at 18% 18%,rgba(125,211,252,.26),transparent 34%),
    radial-gradient(circle at 86% 0%,rgba(59,130,246,.22),transparent 32%),
    linear-gradient(145deg,#1b2c42 0%,#102035 58%,#07111f 100%);
}
.hub413-premium-flow .hub413-flow-card.build::before{
  background:
    radial-gradient(circle at 18% 18%,rgba(103,232,249,.24),transparent 34%),
    radial-gradient(circle at 86% 0%,rgba(139,92,246,.22),transparent 32%),
    linear-gradient(145deg,#182d45 0%,#111f34 58%,#07111f 100%);
}

/* Mobile screenshot target: stacked cards should be shorter, richer, and less plain. */
@media(max-width:760px){
  .hub413-premium-flow{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .hub413-premium-flow .hub413-flow-card{
    min-height:136px !important;
    padding:18px 18px 16px !important;
    border-radius:24px !important;
  }
  .hub413-premium-flow .hub413-flow-card i{
    width:40px !important;
    height:28px !important;
    margin-bottom:12px !important;
    font-size:.72rem !important;
  }
  .hub413-premium-flow .hub413-flow-card b{
    font-size:1.35rem !important;
  }
  .hub413-premium-flow .hub413-flow-card span{
    font-size:.92rem !important;
  }
  .hub413-premium-flow .hub413-flow-card em{
    margin-top:12px !important;
    font-size:.82rem !important;
  }
}