/* =========================================================
   VantoShops Home v6 Premium Hero
   - White main title
   - Light, non-bold subtitle
   - More elegant SaaS commerce visuals
   - No Tailwind build required
========================================================= */
:root{
  --v6-blue:#0b73ff;
  --v6-blue-2:#3158ff;
  --v6-blue-3:#1724d6;
  --v6-ink:#07111f;
  --v6-muted:#5f6c7f;
  --v6-card:rgba(255,255,255,.22);
  --v6-line:rgba(255,255,255,.42);
}

.vs-hero-commerce{
  position:relative !important;
  min-height: 920px !important;
  padding: 76px 0 0 !important;
  overflow:hidden !important;
  color:#fff !important;
  background:
    radial-gradient(circle at 20% 78%, rgba(226,243,255,.98) 0, rgba(196,225,255,.82) 18%, rgba(87,137,255,.25) 38%, transparent 54%),
    radial-gradient(circle at 78% 72%, rgba(191,204,255,.72) 0, rgba(87,103,255,.34) 26%, transparent 52%),
    linear-gradient(135deg,#0877ff 0%, #416df8 42%, #2531e9 100%) !important;
}

.vs-hero-commerce:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.05) 48%, rgba(240,247,255,.76) 100%);
  z-index:0;
}

.vs-hero-commerce:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:230px !important;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(247,250,255,.72) 64%, #fff 100%) !important;
  pointer-events:none;
  z-index:1;
}

.vs-hero-bg-lines{opacity:.34 !important;z-index:0 !important;}
.vs-hero-bg-lines path{stroke:rgba(255,255,255,.72) !important;stroke-width:1.45 !important;}

.vs-hero-inner{position:relative !important;z-index:2 !important;width:min(1680px,calc(100% - 64px)) !important;margin:0 auto !important;}
.vs-hero-copy{max-width: 980px !important;margin:0 auto !important;text-align:center !important;position:relative !important;z-index:5 !important;}

.vs-hero-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  height:36px !important;
  padding:0 18px !important;
  border:1px solid rgba(255,255,255,.46) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.13) !important;
  color:rgba(255,255,255,.98) !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 18px 44px rgba(7,24,99,.12) !important;
  backdrop-filter:blur(16px) !important;
}
.vs-hero-badge span{width:7px !important;height:7px !important;border-radius:999px !important;background:#fff !important;box-shadow:0 0 0 5px rgba(255,255,255,.15) !important;}

.vs-hero-copy h1{
  margin:26px 0 0 !important;
  color:#fff !important;
  font-size:clamp(42px,4.5vw,70px) !important;
  line-height:1.05 !important;
  letter-spacing:-.065em !important;
  font-weight:950 !important;
  text-shadow:0 20px 52px rgba(0,16,90,.26) !important;
}

.vs-hero-copy .vs-hero-subtitle{
  margin:20px auto 0 !important;
  max-width:760px !important;
  color:rgba(255,255,255,.96) !important;
  font-size:clamp(22px,1.8vw,30px) !important;
  line-height:1.35 !important;
  font-weight:400 !important;
  letter-spacing:-.035em !important;
  text-shadow:0 14px 34px rgba(0,16,90,.18) !important;
}

.vs-hero-copy .vs-hero-desc{
  margin:24px auto 0 !important;
  max-width:870px !important;
  color:rgba(255,255,255,.88) !important;
  font-size:17px !important;
  line-height:1.92 !important;
  font-weight:500 !important;
  letter-spacing:.005em !important;
}

.vs-hero-actions{display:flex !important;justify-content:center !important;gap:16px !important;margin-top:34px !important;}
.vs-hero-actions .vs-btn{height:52px !important;min-width:168px !important;padding:0 32px !important;border-radius:999px !important;font-size:15px !important;font-weight:900 !important;text-decoration:none !important;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease !important;}
.vs-btn-light{background:#fff !important;color:#1553f0 !important;box-shadow:0 20px 50px rgba(5,13,70,.18) !important;}
.vs-btn-light:hover{transform:translateY(-2px) !important;box-shadow:0 26px 62px rgba(5,13,70,.22) !important;}
.vs-btn-outline-light{background:rgba(255,255,255,.07) !important;color:#fff !important;border:1px solid rgba(255,255,255,.82) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16) !important;}
.vs-btn-outline-light:hover{transform:translateY(-2px) !important;background:rgba(255,255,255,.16) !important;}

/* Hero stage */
.vs-hero-stage{
  position:relative !important;
  z-index:3 !important;
  height:540px !important;
  margin-top:62px !important;
}
.vs-orbit-glow{position:absolute;border-radius:999px;filter:blur(26px);pointer-events:none;opacity:.52;}
.vs-orbit-glow-left{left:8%;bottom:38px;width:330px;height:180px;background:rgba(185,223,255,.48);}
.vs-orbit-glow-right{right:10%;bottom:68px;width:300px;height:180px;background:rgba(159,174,255,.42);}

.vs-browser-mockup.vs-main-console{
  position:absolute !important;
  left:50% !important;
  top:18px !important;
  transform:translateX(-50%) !important;
  width:min(760px,52vw) !important;
  height:432px !important;
  border-radius:24px !important;
  border:1px solid rgba(255,255,255,.62) !important;
  background:rgba(246,250,255,.76) !important;
  box-shadow:0 46px 120px rgba(7,23,100,.30) !important;
  overflow:hidden !important;
  backdrop-filter:blur(16px) !important;
}
.vs-main-console .vs-browser-bar{height:48px !important;background:rgba(255,255,255,.42) !important;border-bottom:1px solid rgba(20,35,70,.08) !important;}
.vs-main-console .vs-browser-bar strong{font-size:14px !important;letter-spacing:.18em !important;color:#0b1638 !important;font-weight:950 !important;}
.vs-main-console .vs-browser-bar small{font-size:12px !important;color:#5c6a82 !important;}
.vs-main-console .vs-browser-body{height:384px !important;padding:42px !important;background:linear-gradient(135deg,#f5f9ff 0%, #eaf3ff 100%) !important;}
.vs-main-console .vs-big-word{position:absolute !important;left:28px !important;top:38px !important;font-size:144px !important;line-height:1 !important;color:rgba(33,93,232,.14) !important;letter-spacing:-.08em !important;font-weight:950 !important;}
.vs-dashboard-hero-card{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;height:292px;margin-top:22px;border-radius:22px;overflow:hidden;background:rgba(255,255,255,.44);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);}
.vs-dashboard-visual{position:relative;min-height:100%;background:linear-gradient(135deg,#f7c7dc 0%,#e9e9ff 52%,#dff7ff 100%);}
.vs-ring{position:absolute;left:34%;top:22%;width:156px;height:156px;border-radius:999px;background:radial-gradient(circle at 50% 50%,#ffe5c6 0 24%,#3f2924 25% 32%,transparent 33%),linear-gradient(145deg,#9b5642,#d19b86);box-shadow:0 24px 44px rgba(78,37,27,.22);}
.vs-cube{position:absolute;right:42px;bottom:44px;width:78px;height:96px;border-radius:22px;background:linear-gradient(150deg,#b9ebff,#68c6f2);box-shadow:-18px 18px 38px rgba(17,67,128,.18);}
.vs-dashboard-copy{padding:74px 40px 36px;color:#101827;}
.vs-dashboard-copy span{font-size:12px;font-weight:950;letter-spacing:.13em;color:#65758b;}
.vs-dashboard-copy h3{margin:12px 0 0;font-size:27px;line-height:1.1;font-weight:950;letter-spacing:-.045em;color:#0b1220;}
.vs-dashboard-copy p{margin:14px 0 0;font-size:14px;line-height:1.75;font-weight:500;color:#526176;}
.vs-dashboard-copy button{margin-top:18px;height:40px;padding:0 20px;border:1px solid #111827;background:#fff;color:#111827;font-size:12px;font-weight:950;letter-spacing:.02em;}

/* Floating cards */
.vs-floating-card{
  position:absolute !important;
  border:1px solid rgba(255,255,255,.48) !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.20) !important;
  box-shadow:0 30px 82px rgba(7,23,100,.20) !important;
  backdrop-filter:blur(18px) !important;
  overflow:visible !important;
}
.vs-float-left-top{left:5.8% !important;top:52px !important;width:270px !important;padding:20px !important;}
.vs-float-left-bottom{left:14.2% !important;bottom:54px !important;width:280px !important;padding:18px !important;}
.vs-float-right-top{right:5.6% !important;top:52px !important;width:280px !important;padding:18px !important;}
.vs-float-right-bottom{right:14.2% !important;bottom:48px !important;width:260px !important;padding:18px !important;}

.vs-card-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:#fff;font-size:13px;font-weight:950;}
.vs-card-head i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:#d8f1ff;color:#2256f2;font-style:normal;font-weight:950;}
.vs-storefront-preview{position:relative;border-radius:14px;overflow:hidden;background:#fff;padding-bottom:14px;box-shadow:0 16px 34px rgba(10,24,78,.10);}
.vs-storefront-banner{height:116px;background:linear-gradient(135deg,#d6b8ff 0%,#a6d9ff 100%);}
.vs-storefront-lines{padding:12px 14px 0;display:grid;gap:7px;}
.vs-storefront-lines b,.vs-storefront-lines span,.vs-storefront-lines em{display:block;height:8px;border-radius:999px;background:#d8e1ec;}
.vs-storefront-lines b{width:72%;}.vs-storefront-lines span{width:50%;}.vs-storefront-lines em{width:38%;}
.vs-storefront-preview button{position:absolute;right:14px;bottom:14px;border:0;background:#040817;color:#fff;height:26px;padding:0 14px;border-radius:5px;font-size:10px;font-weight:950;}
.vs-channel-dots{position:absolute;right:-18px;top:86px;display:grid;gap:9px;}
.vs-channel-dots span{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;background:#fff;color:#1b55f3;font-size:11px;font-weight:950;box-shadow:0 12px 30px rgba(6,26,95,.16);}

.vs-card-fulfillment{background:rgba(255,255,255,.24) !important;}
.vs-fulfill-chart{height:122px;border-radius:16px;background:linear-gradient(135deg,#fffdf0,#eef9ff);display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:22px 34px;}
.vs-fulfill-chart b{display:block;width:34px;border-radius:10px 10px 0 0;background:#8bd8cf;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
.vs-fulfill-chart b:nth-child(1){height:54px}.vs-fulfill-chart b:nth-child(2){height:88px}.vs-fulfill-chart b:nth-child(3){height:66px}
.vs-fulfill-row{display:flex;align-items:center;justify-content:space-between;height:45px;margin-top:10px;padding:0 16px;border-radius:12px;background:#fff;color:#07111f;font-size:13px;font-weight:950;}
.vs-fulfill-row strong{font-size:15px;}.vs-card-fulfillment p{margin:10px 0 0;padding:0 4px;color:rgba(255,255,255,.88);font-size:12px;font-weight:700;}

.vs-card-leads{background:rgba(255,255,255,.18) !important;}
.vs-mail-icon{position:absolute;left:20px;top:-22px;width:52px;height:38px;border-radius:8px;background:#c7a5ff;transform:rotate(-11deg);box-shadow:0 18px 34px rgba(49,35,147,.2);}
.vs-lead-box{display:grid;grid-template-columns:1fr 78px;min-height:154px;overflow:hidden;border-radius:16px;background:linear-gradient(135deg,#3455f1,#7f88ff);}
.vs-lead-box>div:first-child{padding:24px 18px;color:#fff;}
.vs-lead-box h4{margin:0;color:#fff;font-size:18px;font-weight:950;letter-spacing:-.03em;}
.vs-lead-box p{margin:10px 0 0;color:rgba(255,255,255,.82);font-size:12px;line-height:1.55;font-weight:650;}
.vs-lead-box input{margin-top:14px;width:100%;height:28px;border:0;border-radius:5px;padding:0 10px;font-size:11px;color:#536176;background:#fff;}
.vs-lead-box button{margin-top:9px;width:100%;height:28px;border:0;border-radius:5px;background:#050816;color:#fff;font-size:10px;font-weight:950;}
.vs-lead-avatar{background:radial-gradient(circle at 50% 34%,#ffd0b8 0 27%,#5e3028 28% 45%,transparent 46%),linear-gradient(180deg,#eaf2ff,#b4abff);}

.vs-card-advisor{background:rgba(255,255,255,.22) !important;}
.vs-advisor-pin{position:absolute;left:28px;top:-14px;width:52px;height:52px;border-radius:999px;background:radial-gradient(circle,#ffe0c6 0 48%,#57342e 50% 70%,#fff 72%);box-shadow:0 12px 32px rgba(8,22,82,.18);}
.vs-card-advisor h4{margin:28px 0 0;color:#09111f;font-size:19px;font-weight:950;letter-spacing:-.03em;}
.vs-card-advisor p{margin:8px 0 0;color:#435066;font-size:13px;line-height:1.55;font-weight:650;}
.vs-card-advisor .vs-benefit-box{margin-top:16px;border-radius:12px;background:#050816;padding:16px;}
.vs-card-advisor .vs-benefit-box span{display:block;color:#f6c978;font-size:12px;font-weight:950;}
.vs-card-advisor .vs-benefit-box div{display:flex;justify-content:space-between;margin-top:13px;}
.vs-card-advisor .vs-benefit-box b{color:#fff;font-size:11px;font-weight:950;}

/* Capability tiles under hero */
.vs-slim-capabilities{position:relative !important;z-index:8 !important;margin-top:-72px !important;padding:0 0 86px !important;background:transparent !important;}
.vs-slim-capabilities .vs-container{width:min(1260px,calc(100% - 64px)) !important;display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:18px !important;}
.vs-slim-capabilities a{display:block !important;text-decoration:none !important;border:1px solid rgba(226,232,240,.88) !important;border-radius:28px !important;background:rgba(255,255,255,.94) !important;padding:26px 30px !important;box-shadow:0 26px 82px rgba(15,23,42,.09) !important;backdrop-filter:blur(16px) !important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease !important;}
.vs-slim-capabilities a:hover{transform:translateY(-5px) !important;border-color:#c6dcff !important;box-shadow:0 34px 96px rgba(15,23,42,.12) !important;}
.vs-slim-capabilities span{display:block !important;color:#64748b !important;font-size:14px !important;font-weight:850 !important;}
.vs-slim-capabilities strong{display:block !important;margin-top:10px !important;color:#08111f !important;font-size:22px !important;line-height:1.25 !important;font-weight:950 !important;letter-spacing:-.04em !important;}

/* Make following growth section visually connect with new hero */
.vs-growth-showcase{background:#f5f7fb !important;padding-top:112px !important;}
.vs-section-head h2{font-size:42px !important;color:#07111f !important;}
.vs-section-head p{font-weight:500 !important;color:#5b6678 !important;}

@media(max-width:1280px){
  .vs-float-left-top,.vs-float-left-bottom,.vs-float-right-top,.vs-float-right-bottom{transform:scale(.86);}
  .vs-float-left-top{left:1.5% !important}.vs-float-left-bottom{left:6% !important}.vs-float-right-top{right:1.5% !important}.vs-float-right-bottom{right:6% !important}
  .vs-browser-mockup.vs-main-console{width:min(690px,58vw) !important;}
}
@media(max-width:1180px){
  .vs-hero-commerce{min-height:auto !important;padding-bottom:92px !important;}
  .vs-hero-stage{height:auto !important;display:grid !important;place-items:center !important;margin-top:46px !important;}
  .vs-browser-mockup.vs-main-console{position:relative !important;left:auto !important;top:auto !important;transform:none !important;width:min(760px,100%) !important;}
  .vs-floating-card,.vs-orbit-glow{display:none !important;}
  .vs-slim-capabilities{margin-top:-42px !important;}
  .vs-slim-capabilities .vs-container{grid-template-columns:1fr 1fr !important;}
}
@media(max-width:760px){
  .vs-hero-inner{width:min(100% - 36px,1680px) !important;}
  .vs-hero-commerce{padding:52px 0 78px !important;}
  .vs-hero-copy h1{font-size:36px !important;letter-spacing:-.045em !important;}
  .vs-hero-copy .vs-hero-subtitle{font-size:20px !important;}
  .vs-hero-copy .vs-hero-desc{font-size:14px !important;line-height:1.82 !important;}
  .vs-hero-actions{flex-direction:column !important;align-items:stretch !important;}
  .vs-hero-actions .vs-btn{width:100% !important;}
  .vs-browser-mockup.vs-main-console{height:330px !important;border-radius:20px !important;}
  .vs-main-console .vs-browser-body{height:282px !important;padding:20px !important;}
  .vs-main-console .vs-big-word{font-size:76px !important;top:34px !important;}
  .vs-dashboard-hero-card{grid-template-columns:1fr;height:230px;margin-top:18px;}
  .vs-dashboard-visual{height:120px;}
  .vs-dashboard-copy{padding:18px 20px;}
  .vs-dashboard-copy h3{font-size:20px;}
  .vs-dashboard-copy p{display:none;}
  .vs-dashboard-copy button{height:34px;margin-top:12px;}
  .vs-slim-capabilities .vs-container{grid-template-columns:1fr !important;width:min(100% - 36px,1260px) !important;}
  .vs-slim-capabilities a{padding:22px 24px !important;}
  .vs-slim-capabilities strong{font-size:19px !important;}
  .vs-section-head h2{font-size:30px !important;}
}