:root {
  
  --vg-ink:#111326;
  
  --vg-muted:#61687a;
  
  --vg-soft:#f6f7fb;
  
  --vg-line:#e7e8f0;
  
  --vg-purple:#7746ef;
  
  --vg-purple-2:#a850f4;
  
  --vg-blue:#2f7df4;
  
  --vg-cyan:#11bec7;
  
  --vg-orange:#ff8a24;
  
  --vg-coral:#ff696f;
  
  --vg-green:#2dbf7f;
  
  --vg-gutter:clamp(1.1rem,3.2vw,4rem);
  
  --vg-max:1440px;
  
  --vg-radius:28px;
  
  --vg-shadow:0 24px 70px rgba(31,27,76,.10);
  

}


* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:112px
}

body {
  margin:0;
  overflow-x:hidden;
  background:#f7f7fa;
  color:var(--vg-ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

button,input {
  font:inherit
}

img {
  display:block;
  max-width:100%
}

.vg-container {
  width:min(calc(100% - (var(--vg-gutter) * 2)),var(--vg-max));
  margin-inline:auto
}

.vg-section {
  padding:clamp(4.5rem,8vw,8rem) 0
}

.vg-section-soft {
  background:#f0f2f7
}

.vg-kicker {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1rem;
  padding:.48rem .78rem;
  border:1px solid rgba(119,70,239,.14);
  border-radius:99px;
  background:#f1ebff;
  color:#7040df;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase
}

.vg-kicker.cyan {
  border-color:rgba(17,190,199,.20);
  background:#eafafb;
  color:#078790
}

.vg-title {
  max-width:850px;
  margin:0;
  font-family:'Clash Display','Inter',sans-serif;
  font-size:clamp(2.25rem,5.3vw,4.6rem);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.055em
}

.vg-title span {
  background:linear-gradient(98deg,var(--vg-purple),var(--vg-blue) 56%,var(--vg-cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.vg-lead {
  max-width:680px;
  margin:1.25rem 0 0;
  color:var(--vg-muted);
  font-size:clamp(.98rem,1.35vw,1.12rem);
  line-height:1.72
}

.vg-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:2.4rem
}

.vg-head-copy {
  max-width:760px
}

.vg-head-centered {
  justify-content:center;
  text-align:center
}
.vg-head-centered .vg-head-copy {
  max-width:900px;
  margin-inline:auto
}
.vg-head-centered p {
  margin-inline:auto
}

.vg-head h2 {
  margin:0;
  font-family:'Clash Display','Inter',sans-serif;
  font-size:clamp(2.15rem,4.5vw,3.8rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.05em
}

.vg-head p {
  max-width:650px;
  margin:1rem 0 0;
  color:var(--vg-muted);
  line-height:1.65
}

.vg-text-link {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  color:var(--vg-purple);
  font-size:.86rem;
  font-weight:750;
  white-space:nowrap
}

.vg-text-link i {
  transition:transform .2s ease
}
.vg-text-link:hover i {
  transform:translateX(4px)
}

.vg-btn {
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:0 1.25rem;
  border:1px solid transparent;
  border-radius:14px;
  font-size:.88rem;
  font-weight:750;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease
}

.vg-btn:hover {
  transform:translateY(-2px)
}

.vg-btn-primary {
  color:#fff;
  background:linear-gradient(105deg,var(--vg-purple),var(--vg-purple-2));
  box-shadow:0 14px 30px rgba(119,70,239,.24)
}

.vg-btn-primary:hover {
  color:#fff;
  box-shadow:0 18px 38px rgba(119,70,239,.30)
}

.vg-btn-light {
  border-color:rgba(119,70,239,.24);
  background:rgba(255,255,255,.82);
  color:#6938d7;
  box-shadow:0 10px 24px rgba(32,28,78,.06)
}

.vg-btn-light:hover {
  background:#fff;
  color:#6031cf
}

.vg-btn-dark {
  color:#fff;
  background:#15182c
}
.vg-btn-dark:hover {
  color:#fff;
  box-shadow:0 16px 30px rgba(17,19,38,.20)
}


/* Navigation */
.vg-nav-shell {
  position:sticky;
  top:0;
  z-index:1000;
  padding:18px var(--vg-gutter) 0;
  pointer-events:none
}

.vg-nav {
  width:min(100%,var(--vg-max));
  min-height:78px;
  margin:auto;
  padding:0 17px 0 25px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px;
  border:1px solid rgba(65,52,116,.08);
  border-radius:24px;
  background:rgba(255,255,255,.88);
  box-shadow:0 16px 45px rgba(37,33,80,.08);
  backdrop-filter:blur(20px) saturate(145%);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  pointer-events:auto;
  transition:.25s ease
}

.vg-nav.is-scrolled {
  min-height:68px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 50px rgba(37,33,80,.13)
}

.vg-brand {
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
  letter-spacing:-.055em;
  line-height:1
}

.vg-brand-main {
  font-size:1.48rem;
  font-weight:900
}
.vg-brand-main span {
  color:var(--vg-purple)
}

.vg-brand-group {
  margin-left:.38rem;
  color:#747887;
  font-size:.98rem;
  font-weight:450;
  letter-spacing:-.03em
}

.vg-nav-links {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px
}

.vg-nav-item {
  position:relative
}

.vg-nav-link {
  display:inline-flex;
  align-items:center;
  gap:.38rem;
  padding:.75rem .72rem;
  border-radius:11px;
  color:#363a4c;
  font-size:.82rem;
  font-weight:650;
  transition:.2s ease
}

.vg-nav-link:hover,.vg-nav-link:focus-visible {
  background:#f3efff;
  color:var(--vg-purple);
  outline:none
}

.vg-nav-link i {
  font-size:.68rem;
  transition:transform .2s ease
}

.vg-nav-item:hover>.vg-nav-link i,.vg-nav-item:focus-within>.vg-nav-link i {
  transform:rotate(180deg)
}

.vg-dropdown {
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  width:330px;
  padding:.7rem;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-8px);
  border:1px solid rgba(69,55,120,.10);
  border-radius:19px;
  background:rgba(255,255,255,.98);
  box-shadow:0 24px 64px rgba(31,27,75,.15);
  transition:.2s ease
}

.vg-nav-item:hover .vg-dropdown,.vg-nav-item:focus-within .vg-dropdown {
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0)
}

.vg-dropdown-right {
  left:auto;
  right:0;
  transform:translateY(-8px)
}

.vg-nav-item:hover .vg-dropdown-right,.vg-nav-item:focus-within .vg-dropdown-right {
  transform:translateY(0)
}

.vg-drop-link {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:.7rem;
  align-items:center;
  padding:.68rem;
  border-radius:13px;
  transition:.2s ease
}

.vg-drop-link:hover {
  background:#f6f5fa;
  transform:translateX(2px)
}

.vg-drop-icon {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#fff;
  background:var(--drop);
  font-size:1rem
}

.vg-drop-link strong {
  display:block;
  margin-bottom:.15rem;
  font-size:.82rem
}
.vg-drop-link small {
  display:block;
  color:#777c8d;
  font-size:.69rem;
  line-height:1.35
}

.vg-nav-actions {
  display:flex;
  align-items:center;
  gap:.55rem
}

.vg-access {
  padding:.72rem .78rem;
  border-radius:11px;
  color:#3a3e50;
  font-size:.8rem;
  font-weight:650
}
.vg-access:hover {
  background:#f5f2fb;
  color:var(--vg-purple)
}

.vg-nav-cta {
  min-height:45px;
  padding:0 1rem;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(105deg,var(--vg-purple),var(--vg-purple-2));
  box-shadow:0 12px 26px rgba(119,70,239,.22);
  font-size:.8rem;
  font-weight:750;
  display:inline-flex;
  align-items:center;
  gap:.5rem
}

.vg-nav-cta:hover {
  color:#fff;
  transform:translateY(-1px)
}

.vg-menu-btn {
  display:none;
  width:42px;
  height:42px;
  border:1px solid #e4e2eb;
  border-radius:12px;
  background:#fff;
  color:var(--vg-ink);
  font-size:1.15rem;
  cursor:pointer
}


/* Group hero */
.vg-hero-wrap {
  margin-top:-96px;
  padding:124px var(--vg-gutter) 0;
  background:linear-gradient(180deg,#fbfbfe,#f7f7fa)
}

.vg-hero {
  position:relative;
  min-height:690px;
  max-width:var(--vg-max);
  margin:auto;
  overflow:hidden;
  border:1px solid rgba(87,69,143,.09);
  border-radius:36px;
  background:#eceef8;
  box-shadow:var(--vg-shadow);
  isolation:isolate
}

.vg-hero-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:-3
}

.vg-hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,rgba(251,250,255,.99) 0%,rgba(250,249,255,.96) 33%,rgba(250,249,255,.72) 54%,rgba(250,249,255,.06) 78%),linear-gradient(0deg,rgba(247,248,252,.45),transparent 42%)
}

.vg-hero::after {
  content:"";
  position:absolute;
  left:-12%;
  bottom:-55%;
  z-index:-1;
  width:700px;
  height:700px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(111,77,238,.15),transparent 68%)
}

.vg-hero-content {
  position:relative;
  z-index:999;
  min-height:690px;
  max-width:760px;
  padding:clamp(3.2rem,6vw,6.2rem);
  display:flex;
  flex-direction:column;
  justify-content:center
}

.vg-hero h1 {
  margin:0;
  font-family:'Clash Display','Inter',sans-serif;
  font-size:clamp(2.8rem,4.5vw,4.25rem);
  font-weight:600;
  line-height:.95;
  letter-spacing:-.055em
}

.vg-hero-title {
  position:relative;
  z-index:999
}
.vg-hero-title-line {
  display:block;
  white-space:nowrap
}
.vg-hero-title-accent {
  position:relative;
  z-index:999;
  background:linear-gradient(98deg,var(--vg-purple),var(--vg-blue) 58%,var(--vg-cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.vg-hero-copy {
  max-width:630px;
  margin:1.35rem 0 0;
  color:#596174;
  font-size:clamp(.98rem,1.3vw,1.12rem);
  line-height:1.7
}

.vg-hero-actions {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:1.8rem
}

.vg-hero-tags {
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin-top:1.65rem
}

.vg-hero-tags span {
  padding:.55rem .75rem;
  border:1px solid rgba(80,68,126,.10);
  border-radius:10px;
  background:rgba(255,255,255,.77);
  box-shadow:0 8px 20px rgba(31,28,73,.04);
  color:#565c6e;
  font-size:.7rem;
  font-weight:650
}

.vg-hero-tags i {
  margin-right:.35rem;
  color:var(--tag,var(--vg-purple))
}

.vg-hero-float {
  position:absolute;
  right:clamp(1.5rem,3.5vw,3.8rem);
  bottom:clamp(1.5rem,3.5vw,3.8rem);
  width:min(350px,calc(100% - 3rem));
  padding:1.15rem;
  border:1px solid rgba(255,255,255,.55);
  border-radius:22px;
  background:rgba(255,255,255,.80);
  box-shadow:0 22px 58px rgba(28,31,58,.13);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px)
}

.vg-hero-float-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.85rem
}
.vg-hero-float-top strong {
  font-size:.82rem
}
.vg-live {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:#148b62;
  font-size:.65rem;
  font-weight:750
}
.vg-live::before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2ecc8a;
  box-shadow:0 0 0 5px rgba(46,204,138,.13)
}

.vg-hero-stat-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.5rem
}
.vg-hero-stat {
  padding:.72rem .62rem;
  border-radius:12px;
  background:rgba(246,246,251,.92)
}
.vg-hero-stat b {
  display:block;
  font-size:1.1rem
}
.vg-hero-stat span {
  display:block;
  margin-top:.2rem;
  color:#777c8e;
  font-size:.58rem;
  line-height:1.3
}

.vg-proof {
  padding:1.5rem 0 0
}
.vg-proof-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  flex-wrap:wrap;
  color:#777c8e;
  font-size:.72rem;
  font-weight:650
}
.vg-proof-row span {
  display:flex;
  align-items:center;
  gap:.45rem
}
.vg-proof-row i {
  color:var(--vg-purple)
}


/* Needs */
.vg-need-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem
}

.vg-need {
  position:relative;
  min-height:195px;
  padding:1.35rem;
  overflow:hidden;
  border:1px solid var(--vg-line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 32px rgba(30,29,63,.045);
  transition:.25s ease
}

.vg-need:hover {
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--need) 30%,#e7e8f0);
  box-shadow:0 20px 42px color-mix(in srgb,var(--need) 11%,transparent)
}

.vg-need::after {
  content:"";
  position:absolute;
  right:-55px;
  top:-65px;
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--need) 18%,transparent),transparent 70%)
}

.vg-need-icon {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin-bottom:1.15rem;
  border-radius:13px;
  color:#fff;
  background:var(--need);
  box-shadow:0 12px 24px color-mix(in srgb,var(--need) 24%,transparent)
}

.vg-need h3 {
  margin:0 0 .55rem;
  font-size:1.05rem;
  letter-spacing:-.025em
}
.vg-need p {
  margin:0;
  color:var(--vg-muted);
  font-size:.8rem;
  line-height:1.55
}
.vg-need-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:1rem;
  color:var(--need);
  font-size:.72rem;
  font-weight:750
}


/* Portfolio */
.vg-product-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2rem
}

.vg-product {
  position:relative;
  min-height:490px;
  padding:1.7rem;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.5);
  border-radius:28px;
  box-shadow:0 18px 50px rgba(27,26,63,.08);
  isolation:isolate
}

.vg-product::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:var(--product-bg)
}

.vg-product::after {
  content:"";
  position:absolute;
  z-index:-1;
  right:-90px;
  bottom:-100px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--product) 22%,transparent),transparent 68%)
}

.vg-product.crm {
  --product:#8750f2;
  --product-bg:linear-gradient(145deg,#fff,#f0eaff)
}

.vg-product.qa {
  --product:#00bfb7;
  --product-bg:linear-gradient(145deg,#07151e,#0b2530);
  color:#fff;
  border-color:rgba(73,231,227,.18)
}

.vg-product.obit {
  --product:#28a7d8;
  --product-bg:linear-gradient(145deg,#fff,#eaf9fc)
}

.vg-product-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem
}
.vg-product-icon {
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#fff;
  background:var(--product);
  font-size:1.2rem;
  box-shadow:0 12px 25px color-mix(in srgb,var(--product) 25%,transparent)
}

.vg-product-label {
  padding:.42rem .65rem;
  border-radius:99px;
  color:var(--product);
  background:color-mix(in srgb,var(--product) 10%,#fff);
  font-size:.62rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em
}
.vg-product.qa .vg-product-label {
  background:rgba(66,223,218,.10)
}

.vg-product h3 {
  margin:2rem 0 .8rem;
  font-family:'Clash Display','Inter',sans-serif;
  font-size:2rem;
  font-weight:600;
  letter-spacing:-.045em
}
.vg-product>p {
  margin:0;
  color:var(--vg-muted);
  font-size:.88rem;
  line-height:1.65
}
.vg-product.qa>p {
  color:rgba(231,246,248,.68)
}

.vg-product-list {
  display:grid;
  gap:.62rem;
  margin:1.35rem 0 1.8rem;
  padding:0;
  list-style:none
}
.vg-product-list li {
  display:flex;
  align-items:center;
  gap:.5rem;
  color:#5c6274;
  font-size:.77rem
}
.vg-product.qa .vg-product-list li {
  color:rgba(232,246,249,.72)
}
.vg-product-list i {
  color:var(--product)
}

.vg-product-actions {
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
  margin-top:auto
}
.vg-product-link {
  min-height:45px;
  padding:0 .95rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-radius:11px;
  color:#fff;
  background:var(--product);
  font-size:.76rem;
  font-weight:750
}
.vg-product-link:hover {
  color:#fff;
  transform:translateY(-2px)
}
.vg-product-soft {
  min-height:45px;
  padding:0 .95rem;
  display:inline-flex;
  align-items:center;
  border:1px solid color-mix(in srgb,var(--product) 25%,transparent);
  border-radius:11px;
  color:var(--product);
  font-size:.76rem;
  font-weight:750
}
.vg-product.qa .vg-product-soft {
  color:#a8f5f1;
  border-color:rgba(106,236,232,.28)
}


/* Inbluns services */
.vg-inbluns {
  position:relative;
  overflow:hidden;
  border-radius:34px;
  background:linear-gradient(125deg,#fff 0%,#f3f0ff 58%,#e8f8fb 100%);
  border:1px solid rgba(100,76,181,.10);
  box-shadow:var(--vg-shadow)
}

.vg-inbluns-inner {
  padding:clamp(2rem,5vw,5rem);
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center
}

.vg-inbluns-brand {
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  margin-bottom:1.25rem;
  font-size:.82rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase
}
.vg-inbluns-mark {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#fff;
  background:#101b38
}

.vg-inbluns h2 {
  margin:0;
  font-family:'Clash Display','Inter',sans-serif;
  font-size:clamp(2.3rem,4.8vw,4.2rem);
  font-weight:600;
  line-height:.97;
  letter-spacing:-.055em
}
.vg-inbluns h2 span {
  color:var(--vg-purple)
}

.vg-inbluns-copy>p {
  margin:1.2rem 0 1.6rem;
  color:var(--vg-muted);
  line-height:1.7
}

.vg-service-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem
}

.vg-service {
  min-height:205px;
  padding:1.25rem;
  border:1px solid rgba(77,66,125,.10);
  border-radius:20px;
  background:rgba(255,255,255,.75);
  box-shadow:0 12px 30px rgba(33,30,69,.05);
  transition:.22s ease
}
.vg-service:hover {
  transform:translateY(-4px);
  background:#fff
}

.vg-service-icon {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#fff;
  background:var(--service)
}
.vg-service h3 {
  margin:1rem 0 .45rem;
  font-size:1rem
}
.vg-service p {
  margin:0;
  color:var(--vg-muted);
  font-size:.77rem;
  line-height:1.55
}
.vg-service a {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:.85rem;
  color:var(--service);
  font-size:.7rem;
  font-weight:750
}


/* Ecosystem */
.vg-ecosystem {
  position:relative;
  padding:clamp(2rem,5vw,5rem);
  overflow:hidden;
  border-radius:34px;
  color:#fff;
  background:radial-gradient(circle at 8% 10%,rgba(119,70,239,.30),transparent 27%),radial-gradient(circle at 92% 88%,rgba(17,190,199,.22),transparent 30%),#0d1020;
  box-shadow:0 28px 80px rgba(12,14,34,.22)
}

.vg-ecosystem .vg-kicker {
  border-color:rgba(187,164,255,.20);
  background:rgba(119,70,239,.12);
  color:#cbb8ff
}
.vg-ecosystem h2 {
  max-width:780px;
  margin:0;
  font-family:'Clash Display','Inter',sans-serif;
  font-size:clamp(2.25rem,4.8vw,4.1rem);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.055em
}
.vg-ecosystem>p {
  max-width:680px;
  color:rgba(230,233,244,.68);
  line-height:1.7
}

.vg-flow {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.8rem;
  margin-top:2.2rem
}
.vg-flow-step {
  position:relative;
  padding:1.2rem;
  border:1px solid rgba(255,255,255,.09);
  border-radius:17px;
  background:rgba(255,255,255,.045)
}
.vg-flow-step:not(:last-child)::after {
  content:"\F135";
  position:absolute;
  right:-.72rem;
  top:50%;
  z-index:2;
  transform:translateY(-50%);
  color:#8c72ef;
  font-family:'bootstrap-icons';
  font-size:1.1rem
}
.vg-flow-num {
  display:grid!important;
  width:46px;
  height:46px;
  place-items:center;
  margin:0 0 1rem!important;
  border-radius:13px;
  color:#fff!important;
  background:linear-gradient(135deg,var(--vg-purple),var(--vg-blue));
  font-size:.88rem!important;
  font-weight:850;
  line-height:1
}
.vg-flow-step strong {
  display:block;
  font-size:.9rem
}
.vg-flow-step span {
  display:block;
  margin-top:.4rem;
  color:rgba(224,228,241,.58);
  font-size:.7rem;
  line-height:1.45
}


/* Group/about */
.vg-about {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(460px,.88fr);
  gap:clamp(2rem,5vw,6rem);
  align-items:center
}

.vg-cap-slider {
  position:relative;
  min-height:520px;
  overflow:hidden;
  border:1px solid rgba(86,66,151,.12);
  border-radius:30px;
  background:#111326;
  box-shadow:0 24px 65px rgba(32,29,69,.15)
}

.vg-cap-stage {
  position:relative;
  min-height:450px
}
.vg-cap-slide {
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:scale(1.025);
  transition:opacity .55s ease,transform .7s ease,visibility .55s
}
.vg-cap-slide.is-active {
  pointer-events:auto;
  opacity:1;
  visibility:visible;
  transform:scale(1)
}

.vg-cap-image {
  position:absolute;
  inset:0;
  background-image:linear-gradient(180deg,rgba(12,14,30,.02) 26%,rgba(12,14,30,.92) 88%),url('../img/vecqo-capabilities-slider-2026.png');
  background-size:100% 100%,200% 200%;
  background-position:center,var(--cap-x) var(--cap-y);
  background-repeat:no-repeat
}

.vg-cap-content {
  position:absolute;
  inset:auto 0 0;
  padding:2rem;
  color:#fff
}
.vg-cap-content strong {
  display:block;
  color:#cbb9ff;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.14em
}
.vg-cap-content h3 {
  max-width:470px;
  margin:.35rem 0 .55rem;
  font-family:'Clash Display','Inter',sans-serif;
  font-size:clamp(1.65rem,3vw,2.5rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.045em
}
.vg-cap-content p {
  max-width:510px;
  margin:0;
  color:rgba(244,246,253,.72);
  font-size:.78rem;
  line-height:1.55
}
.vg-cap-content a {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:.9rem;
  color:#fff;
  font-size:.72rem;
  font-weight:750
}
.vg-cap-content a i {
  transition:transform .2s
}
.vg-cap-content a:hover i {
  transform:translateX(4px)
}

.vg-cap-count {
  position:absolute;
  right:1.5rem;
  bottom:2rem;
  color:rgba(255,255,255,.58);
  font-size:.68rem;
  font-weight:750
}
.vg-cap-icon {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin-bottom:.9rem;
  border:1px solid rgba(255,255,255,.24);
  border-radius:13px;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  font-size:1rem
}

.vg-cap-controls {
  height:70px;
  padding:0 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff
}
.vg-cap-dots {
  display:flex;
  align-items:center;
  gap:.45rem
}
.vg-cap-dots button {
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:99px;
  background:#d6d3e0;
  cursor:pointer;
  transition:.25s
}
.vg-cap-dots button.is-active {
  width:32px;
  background:linear-gradient(90deg,var(--vg-purple),var(--vg-blue))
}
.vg-cap-arrows {
  display:flex;
  gap:.45rem
}
.vg-cap-arrows button {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--vg-line);
  border-radius:11px;
  background:#f8f8fb;
  color:var(--vg-ink);
  cursor:pointer;
  transition:.2s
}
.vg-cap-arrows button:hover {
  border-color:#cabcf2;
  color:var(--vg-purple);
  background:#f2edff
}

.vg-values {
  display:grid;
  gap:.85rem;
  margin-top:1.6rem
}
.vg-value {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:.8rem;
  align-items:start
}
.vg-value i {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:var(--vg-purple);
  background:#f0eaff
}
.vg-value strong {
  display:block;
  margin-bottom:.25rem;
  font-size:.86rem
}
.vg-value span {
  display:block;
  color:var(--vg-muted);
  font-size:.76rem;
  line-height:1.5
}


/* CTA/footer */
.vg-cta {
  padding:0 0 clamp(4rem,7vw,7rem)
}
.vg-cta-box {
  position:relative;
  padding:clamp(2.5rem,6vw,5.5rem);
  overflow:hidden;
  border-radius:34px;
  text-align:center;
  color:#fff;
  background:linear-gradient(120deg,#6e3ee4,#9049f0 50%,#246eea);
  box-shadow:0 28px 70px rgba(104,58,222,.25)
}
.vg-cta-box::after {
  content:"";
  position:absolute;
  right:-100px;
  top:-170px;
  width:420px;
  height:420px;
  border-radius:50%;
  border:70px solid rgba(255,255,255,.07)
}
.vg-cta-box h2 {
  position:relative;
  z-index:1;
  max-width:800px;
  margin:0 auto;
  font-family:'Clash Display','Inter',sans-serif;
  font-size:clamp(2.2rem,5vw,4.3rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.05em
}
.vg-cta-box p {
  position:relative;
  z-index:1;
  max-width:620px;
  margin:1rem auto 1.6rem;
  color:rgba(255,255,255,.78);
  line-height:1.65
}
.vg-cta-actions {
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  gap:.75rem;
  flex-wrap:wrap
}
.vg-cta .vg-btn-light {
  border-color:rgba(255,255,255,.38);
  background:#fff
}

.vg-footer {
  padding:3rem var(--vg-gutter);
  color:rgba(237,239,248,.72);
  background:#0d1020
}
.vg-footer-grid {
  max-width:var(--vg-max);
  margin:auto;
  display:grid;
  grid-template-columns:1.25fr repeat(3,1fr);
  gap:2rem
}
.vg-footer-brand p {
  max-width:360px;
  color:rgba(231,234,244,.52);
  font-size:.78rem;
  line-height:1.6
}
.vg-footer h3 {
  margin:0 0 .9rem;
  color:#fff;
  font-size:.78rem
}
.vg-footer-links {
  display:grid;
  gap:.55rem
}
.vg-footer-links a {
  color:rgba(231,234,244,.58);
  font-size:.72rem
}
.vg-footer-links a:hover {
  color:#fff
}
.vg-footer-bottom {
  max-width:var(--vg-max);
  margin:2.2rem auto 0;
  padding-top:1.2rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.65rem;
  color:rgba(231,234,244,.42)
}


/* CRM page */
.crm-hero-wrap {
  margin-top:-96px;
  padding:124px var(--vg-gutter) 0;
  background:linear-gradient(180deg,#fbfaff,#f3f1fb)
}

.crm-hero {
  position:relative;
  max-width:var(--vg-max);
  min-height:680px;
  margin:auto;
  padding:clamp(2.5rem,5vw,5.5rem);
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr);
  gap:4rem;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(119,70,239,.10);
  border-radius:36px;
  background:radial-gradient(circle at 72% 18%,rgba(119,70,239,.18),transparent 30%),radial-gradient(circle at 94% 78%,rgba(17,190,199,.13),transparent 31%),#fff;
  box-shadow:var(--vg-shadow)
}

.crm-hero h1 {
  margin:0;
  font-family:'Clash Display','Inter',sans-serif;
  font-size:clamp(3rem,5.8vw,5.5rem);
  font-weight:600;
  line-height:.92;
  letter-spacing:-.065em
}
.crm-hero h1 span {
  background:linear-gradient(100deg,var(--vg-purple),var(--vg-blue),var(--vg-cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.crm-hero p {
  max-width:650px;
  margin:1.3rem 0 0;
  color:var(--vg-muted);
  font-size:1.05rem;
  line-height:1.7
}
.crm-hero-actions {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:1.7rem
}
.crm-mini-proof {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.4rem;
  color:#6b7182;
  font-size:.69rem;
  font-weight:650
}
.crm-mini-proof span {
  display:flex;
  align-items:center;
  gap:.35rem
}
.crm-mini-proof i {
  color:var(--vg-green)
}

.crm-dashboard {
  position:relative;
  min-height:500px
}
.crm-board {
  position:absolute;
  inset:4% 0 5% 5%;
  overflow:hidden;
  border:1px solid rgba(119,70,239,.13);
  border-radius:26px;
  background:#fff;
  box-shadow:0 30px 70px rgba(46,35,97,.17);
  transform:perspective(1100px) rotateY(-4deg) rotateX(1deg)
}

.crm-board-top {
  height:62px;
  padding:0 1.1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #ececf3
}
.crm-board-logo {
  font-weight:850;
  letter-spacing:-.04em
}
.crm-board-logo span {
  color:var(--vg-purple)
}
.crm-board-user {
  display:flex;
  align-items:center;
  gap:.5rem;
  color:#767b8c;
  font-size:.65rem
}
.crm-avatar {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#fff;
  background:linear-gradient(135deg,var(--vg-purple),var(--vg-blue))
}

.crm-board-content {
  padding:1rem
}
.crm-board-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1rem
}
.crm-board-head strong {
  font-size:.85rem
}
.crm-board-head span {
  padding:.42rem .55rem;
  border-radius:8px;
  color:#fff;
  background:var(--vg-purple);
  font-size:.58rem;
  font-weight:750
}

.crm-pipeline {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.55rem
}
.crm-col {
  min-height:270px;
  padding:.65rem;
  border-radius:12px;
  background:#f6f6fa
}
.crm-col-title {
  display:flex;
  align-items:center;
  gap:.35rem;
  margin-bottom:.65rem;
  color:#64697a;
  font-size:.56rem;
  font-weight:750
}
.crm-col-title::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--col)
}
.crm-deal {
  padding:.65rem;
  margin-bottom:.48rem;
  border:1px solid #e9e9f0;
  border-radius:9px;
  background:#fff;
  box-shadow:0 7px 16px rgba(40,36,75,.04)
}
.crm-deal b {
  display:block;
  font-size:.56rem
}
.crm-deal small {
  display:block;
  margin-top:.3rem;
  color:#898d9b;
  font-size:.49rem
}
.crm-float-card {
  position:absolute;
  padding:.8rem 1rem;
  display:flex;
  align-items:center;
  gap:.65rem;
  border:1px solid rgba(119,70,239,.11);
  border-radius:15px;
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 42px rgba(38,31,79,.13);
  backdrop-filter:blur(10px)
}
.crm-float-card i {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#fff;
  background:var(--float)
}
.crm-float-card b {
  display:block;
  font-size:.65rem
}
.crm-float-card small {
  display:block;
  margin-top:.15rem;
  color:#7c8192;
  font-size:.53rem
}
.crm-float-card.one {
  --float:var(--vg-purple);
  left:-2%;
  top:2%
}
.crm-float-card.two {
  --float:var(--vg-green);
  right:-3%;
  top:17%
}
.crm-float-card.three {
  --float:var(--vg-orange);
  right:1%;
  bottom:0
}

.crm-feature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem
}
.crm-feature {
  padding:1.35rem;
  border:1px solid var(--vg-line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 30px rgba(31,28,70,.04)
}
.crm-feature i {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:1rem;
  border-radius:12px;
  color:var(--feature);
  background:color-mix(in srgb,var(--feature) 11%,#fff)
}
.crm-feature h3 {
  margin:0 0 .45rem;
  font-size:.95rem
}
.crm-feature p {
  margin:0;
  color:var(--vg-muted);
  font-size:.76rem;
  line-height:1.55
}

.crm-chain {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.7rem
}
.crm-chain-step {
  position:relative;
  padding:1.15rem;
  border:1px solid var(--vg-line);
  border-radius:18px;
  background:#fff
}
.crm-chain-step:not(:last-child)::after {
  content:"\F135";
  position:absolute;
  right:-.65rem;
  top:35px;
  z-index:2;
  color:#9a7bf2;
  font-family:'bootstrap-icons'
}
.crm-chain-num {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  margin-bottom:.8rem;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(135deg,var(--vg-purple),var(--vg-blue));
  font-size:.7rem;
  font-weight:800
}
.crm-chain-step h3 {
  margin:0 0 .4rem;
  font-size:.78rem
}
.crm-chain-step p {
  margin:0;
  color:var(--vg-muted);
  font-size:.64rem;
  line-height:1.45
}

.crm-pricing {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem
}
.crm-plan {
  position:relative;
  padding:1.6rem;
  display:flex;
  flex-direction:column;
  border:1px solid var(--vg-line);
  border-radius:24px;
  background:#fff;
  box-shadow:0 14px 36px rgba(31,28,70,.05)
}
.crm-plan.featured {
  border-color:rgba(119,70,239,.38);
  box-shadow:0 20px 46px rgba(119,70,239,.14)
}
.crm-plan-badge {
  position:absolute;
  right:1.2rem;
  top:1.2rem;
  padding:.35rem .55rem;
  border-radius:99px;
  color:#fff;
  background:var(--vg-purple);
  font-size:.58rem;
  font-weight:800
}
.crm-plan-name {
  color:var(--vg-purple);
  font-size:.75rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em
}
.crm-plan-price {
  margin:.8rem 0 0;
  font-family:'Clash Display','Inter',sans-serif;
  font-size:2.65rem;
  font-weight:600;
  letter-spacing:-.05em
}
.crm-plan-period {
  margin:.2rem 0 1rem;
  color:#7b8091;
  font-size:.67rem
}
.crm-plan p {
  color:var(--vg-muted);
  font-size:.74rem;
  line-height:1.5
}
.crm-plan ul {
  display:grid;
  gap:.6rem;
  margin:1rem 0 1.5rem;
  padding:0;
  list-style:none
}
.crm-plan li {
  display:flex;
  gap:.45rem;
  color:#5f6577;
  font-size:.71rem
}
.crm-plan li i {
  color:var(--vg-green)
}
.crm-plan .vg-btn {
  width:100%;
  margin-top:auto
}

.crm-faq {
  max-width:820px;
  margin:auto
}
.crm-faq details {
  padding:1rem 0;
  border-bottom:1px solid var(--vg-line)
}
.crm-faq summary {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  cursor:pointer;
  list-style:none;
  font-size:.9rem;
  font-weight:700
}
.crm-faq summary::-webkit-details-marker {
  display:none
}
.crm-faq summary i {
  color:var(--vg-purple)
}
.crm-faq p {
  margin:.65rem 0 0;
  color:var(--vg-muted);
  font-size:.8rem;
  line-height:1.65
}


@media(max-width:1180px) {
  
  .vg-nav {
  grid-template-columns:auto auto
}
.vg-nav-links {
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 12px);
  padding:.85rem;
  display:none;
  align-items:stretch;
  flex-direction:column;
  border:1px solid var(--vg-line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 22px 52px rgba(32,29,69,.14)
}
.vg-nav-links.is-open {
  display:flex
}
.vg-nav-item {
  width:100%
}
.vg-nav-link {
  width:100%
}
.vg-dropdown {
  position:static;
  width:100%;
  margin-top:.25rem;
  opacity:1;
  visibility:visible;
  display:none;
  transform:none;
  box-shadow:none;
  background:#f7f7fa
}
.vg-nav-item.is-expanded .vg-dropdown {
  display:block;
  transform:none
}
.vg-menu-btn {
  display:grid;
  place-items:center
}
.vg-nav-actions {
  justify-content:end
}
.vg-access {
  display:none
}

  .vg-inbluns-inner {
  grid-template-columns:1fr
}
.vg-service-grid {
  max-width:850px
}
.crm-hero {
  grid-template-columns:1fr
}
.crm-dashboard {
  min-height:520px
}
.crm-chain {
  grid-template-columns:repeat(3,1fr)
}


}

@media(max-width:900px) {
  
  .vg-hero::before {
  background:linear-gradient(90deg,rgba(251,250,255,.98),rgba(250,249,255,.90) 58%,rgba(250,249,255,.40))
}
.vg-hero-float {
  display:none
}
.vg-hero-content {
  max-width:630px
}

  .vg-need-grid,.vg-product-grid {
  grid-template-columns:1fr 1fr
}
.vg-product.qa {
  grid-column:span 2
}
.vg-product {
  min-height:430px
}
.vg-flow {
  grid-template-columns:1fr 1fr
}
.vg-flow-step:not(:last-child)::after {
  display:none
}
.vg-about {
  grid-template-columns:1fr
}
.vg-footer-grid {
  grid-template-columns:1fr 1fr
}
.crm-feature-grid,.crm-pricing {
  grid-template-columns:1fr 1fr
}
.crm-plan.featured {
  order:-1;
  grid-column:span 2
}


}

@media(max-width:640px) {
  
  :root {
  --vg-gutter:12px
}
.vg-nav-shell {
  padding-top:12px
}
.vg-nav {
  min-height:64px;
  padding:0 10px 0 14px;
  border-radius:18px;
  gap:8px
}
.vg-brand-main {
  font-size:1.12rem
}
.vg-brand-group {
  display:none
}
.vg-nav-cta {
  width:40px;
  height:40px;
  min-height:40px;
  padding:0
}
.vg-nav-cta span {
  display:none
}
.vg-menu-btn {
  width:40px;
  height:40px
}
.vg-dropdown {
  padding:.45rem
}
.vg-drop-link {
  padding:.55rem
}

  .vg-hero-wrap,.crm-hero-wrap {
  margin-top:-76px;
  padding-top:94px
}
.vg-hero {
  min-height:700px;
  border-radius:26px
}
.vg-hero-photo {
  object-position:67% center;
  opacity:.44
}
.vg-hero::before {
  background:linear-gradient(180deg,rgba(251,250,255,.98) 0%,rgba(251,250,255,.92) 64%,rgba(251,250,255,.55) 100%)
}
.vg-hero-content {
  min-height:700px;
  padding:2rem 1.35rem;
  justify-content:flex-start;
  padding-top:3.3rem
}
.vg-hero h1 {
  font-size:clamp(2.15rem,9.4vw,2.35rem);
  line-height:.96
}
.vg-hero-actions {
  display:grid
}
.vg-hero-actions .vg-btn {
  width:100%
}
.vg-hero-tags {
  gap:.4rem
}
.vg-hero-tags span {
  font-size:.62rem
}
.vg-proof-row {
  justify-content:flex-start;
  padding-inline:1rem
}

  .vg-section {
  padding:4.3rem 0
}
.vg-head {
  align-items:start;
  flex-direction:column
}
.vg-head-centered {
  align-items:center
}
.vg-need-grid,.vg-product-grid,.vg-service-grid,.crm-feature-grid,.crm-pricing {
  grid-template-columns:1fr
}
.vg-product.qa,.crm-plan.featured {
  grid-column:auto
}
.vg-product {
  min-height:0
}
.vg-inbluns {
  border-radius:26px
}
.vg-inbluns-inner {
  padding:1.4rem
}
.vg-flow {
  grid-template-columns:1fr
}
.vg-cap-slider {
  min-height:500px;
  border-radius:24px
}
.vg-cap-stage {
  min-height:430px
}
.vg-cap-content {
  padding:1.35rem
}
.vg-cap-content h3 {
  font-size:1.75rem
}
.vg-cap-content p {
  max-width:280px
}
.vg-cap-count {
  right:1.2rem;
  bottom:1.45rem
}
.vg-cta-box {
  border-radius:26px
}
.vg-footer-grid {
  grid-template-columns:1fr
}
.vg-footer-bottom {
  flex-direction:column
}

  .crm-hero {
  min-height:auto;
  padding:2rem 1.3rem;
  border-radius:26px;
  gap:2.5rem
}
.crm-hero h1 {
  font-size:3.2rem
}
.crm-dashboard {
  min-height:420px
}
.crm-board {
  inset:0;
  height:395px;
  transform:none
}
.crm-pipeline {
  grid-template-columns:repeat(2,1fr)
}
.crm-col:nth-child(n+3) {
  display:none
}
.crm-float-card {
  display:none
}
.crm-chain {
  grid-template-columns:1fr
}
.crm-chain-step:not(:last-child)::after {
  display:none
}


}

@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto!important;
  transition:none!important
}

}