/* =========================================================
   VantoShops Home v7 Premium Clean
   Fixes: capability tiles no longer block hero visuals, softer colors,
   stronger brand match, cleaner SaaS composition.
========================================================= */

/* Hero: keep headline premium white, make subtitle lighter */
.vs-hero-commerce{
  min-height: 980px !important;
  padding: 82px 0 0 !important;
  background:
    radial-gradient(circle at 20% 80%, rgba(229,244,255,.96) 0, rgba(199,226,255,.86) 18%, rgba(91,147,255,.30) 38%, transparent 55%),
    radial-gradient(circle at 78% 72%, rgba(207,216,255,.72) 0, rgba(105,120,255,.34) 27%, transparent 54%),
    linear-gradient(135deg,#0878ff 0%, #3f73ff 42%, #2634e7 100%) !important;
}
.vs-hero-commerce:before{
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.04) 48%, rgba(244,248,255,.72) 100%) !important;
}
.vs-hero-copy h1{
  color:#ffffff !important;
  font-weight:950 !important;
  text-shadow:0 22px 54px rgba(0,19,90,.30) !important;
}
.vs-hero-copy .vs-hero-subtitle{
  color:rgba(255,255,255,.94) !important;
  font-weight:400 !important;
  letter-spacing:-.025em !important;
}
.vs-hero-copy .vs-hero-desc{
  max-width:820px !important;
  color:rgba(255,255,255,.84) !important;
  font-size:16px !important;
  line-height:1.88 !important;
}

/* Hero visual composition: give bottom more breathing room */
.vs-hero-stage{
  height: 600px !important;
  margin-top: 64px !important;
}
.vs-browser-mockup.vs-main-console{
  top: 8px !important;
  width:min(760px,50vw) !important;
  box-shadow:0 52px 128px rgba(7,23,100,.24) !important;
}
.vs-float-left-top{left:5.6% !important;top:28px !important;}
.vs-float-left-bottom{left:14.6% !important;bottom:116px !important;}
.vs-float-right-top{right:5.8% !important;top:28px !important;}
.vs-float-right-bottom{right:14.8% !important;bottom:112px !important;}

/* Polish mini cards inside hero visual */
.vs-floating-card{
  border-color:rgba(255,255,255,.58) !important;
  background:rgba(255,255,255,.20) !important;
  box-shadow:0 34px 90px rgba(5,18,86,.18) !important;
}
.vs-storefront-banner{
  background:linear-gradient(135deg,#ceb9ff 0%,#b7dfff 100%) !important;
}
.vs-fulfill-chart{
  background:linear-gradient(135deg,#fffaf0 0%,#effaff 100%) !important;
}
.vs-lead-box{
  background:linear-gradient(135deg,#2750f0 0%,#8b8dff 100%) !important;
}
.vs-card-advisor{
  background:rgba(255,255,255,.30) !important;
}
.vs-card-advisor .vs-benefit-box{
  background:#050816 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Core capability cards: move out from hero visual, no blocking */
.vs-slim-capabilities{
  position:relative !important;
  z-index:10 !important;
  margin-top:0 !important;
  padding:54px 0 94px !important;
  background:#ffffff !important;
}
.vs-slim-capabilities:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-110px;
  height:120px;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.88) 62%, #fff 100%);
}
.vs-slim-capabilities .vs-container{
  position:relative !important;
  z-index:2 !important;
  width:min(1240px,calc(100% - 64px)) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
}
.vs-slim-capabilities a{
  position:relative !important;
  display:block !important;
  min-height:132px !important;
  overflow:hidden !important;
  text-decoration:none !important;
  border:1px solid rgba(226,232,240,.96) !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(37,99,235,.08), transparent 32%),
    linear-gradient(180deg,#ffffff 0%,#f9fbff 100%) !important;
  padding:26px 30px 24px !important;
  box-shadow:0 22px 70px rgba(15,23,42,.075) !important;
  backdrop-filter:blur(16px) !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
}
.vs-slim-capabilities a:hover{
  transform:translateY(-6px) !important;
  border-color:#bcd6ff !important;
  box-shadow:0 30px 88px rgba(20,47,110,.12) !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(37,99,235,.14), transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#f6f9ff 100%) !important;
}
.vs-slim-capabilities a:before{
  content:"";
  position:absolute;
  left:30px;
  top:22px;
  width:9px;
  height:9px;
  border-radius:999px;
  background:#1178ff;
  box-shadow:0 0 0 7px rgba(17,120,255,.10);
}
.vs-slim-capabilities a:after{
  content:"↗";
  position:absolute;
  right:26px;
  top:24px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#eef5ff;
  color:#105fe8;
  font-size:18px;
  font-weight:900;
  line-height:1;
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.vs-slim-capabilities a:hover:after{
  transform:translate(2px,-2px);
  background:#105fe8;
  color:#fff;
}
.vs-slim-capabilities span{
  display:block !important;
  margin-top:28px !important;
  color:#64748b !important;
  font-size:13px !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
}
.vs-slim-capabilities strong{
  display:block !important;
  margin-top:10px !important;
  max-width:250px !important;
  color:#07111f !important;
  font-size:20px !important;
  line-height:1.28 !important;
  font-weight:950 !important;
  letter-spacing:-.04em !important;
}

/* Reduce collision with next section and preserve a premium rhythm */
.vs-growth-showcase{
  background:#f5f7fb !important;
  padding-top:106px !important;
}

@media(max-width:1280px){
  .vs-hero-commerce{min-height:940px !important;}
  .vs-hero-stage{height:570px !important;}
  .vs-float-left-bottom{bottom:98px !important;}
  .vs-float-right-bottom{bottom:96px !important;}
  .vs-slim-capabilities .vs-container{grid-template-columns:repeat(2,minmax(0,1fr)) !important;max-width:820px !important;}
}
@media(max-width:1180px){
  .vs-hero-commerce{min-height:auto !important;padding-bottom:86px !important;}
  .vs-hero-stage{height:auto !important;}
  .vs-slim-capabilities{padding-top:36px !important;}
  .vs-slim-capabilities:before{top:-70px;height:80px;}
}
@media(max-width:760px){
  .vs-hero-commerce{padding-top:54px !important;padding-bottom:70px !important;}
  .vs-hero-copy h1{font-size:34px !important;}
  .vs-hero-copy .vs-hero-subtitle{font-size:19px !important;}
  .vs-browser-mockup.vs-main-console{box-shadow:0 30px 78px rgba(7,23,100,.20) !important;}
  .vs-slim-capabilities{padding:28px 0 68px !important;}
  .vs-slim-capabilities .vs-container{grid-template-columns:1fr !important;width:min(100% - 36px,1240px) !important;}
  .vs-slim-capabilities a{min-height:118px !important;padding:24px 24px 22px !important;border-radius:24px !important;}
  .vs-slim-capabilities a:before{left:24px;top:22px;}
  .vs-slim-capabilities a:after{right:22px;top:22px;}
  .vs-slim-capabilities strong{font-size:19px !important;}
}