/*__VD_RESP__*/
img{max-width:100%;height:auto}
.vd-burger,.vd-menu{display:none;box-sizing:border-box}
#__bundler_err,#__bundler_loading{display:none!important}
@media (max-width:768px){
nav [style*="padding: 14px 28px"] > div,nav [style*="padding:14px 28px"] > div{display:none!important}
.vd-burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;position:fixed;top:12px;right:16px;width:44px;height:44px;z-index:60;background:#4F46E5;border:0;border-radius:12px;cursor:pointer;padding:0;box-shadow:0 4px 12px rgba(79,70,229,0.35)}
.vd-burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.vd-burger.vd-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.vd-burger.vd-open span:nth-child(2){opacity:0}
.vd-burger.vd-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.vd-menu{display:flex;flex-direction:column;gap:2px;position:fixed;top:68px;left:0;right:0;z-index:59;background:#fff;border-bottom:1px solid #E6E7EC;box-shadow:0 16px 34px -14px rgba(30,27,75,0.3);padding:10px 16px 18px;transform:translateY(-130%);transition:transform .26s ease;max-height:82vh;overflow:auto}
.vd-menu.vd-open{transform:translateY(0)}
.vd-menu,.vd-menu a{font-family:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.vd-menu a{display:block;padding:14px 10px;text-decoration:none;color:#1E1B4B;font-weight:600;font-size:17px;border-radius:10px;border-bottom:1px solid #F2F1F8}
.vd-menu a:last-child{border-bottom:0}
/* The burger is fixed at top:12px (44px tall) and the scroll-to-top button at
   bottom:24px. On a short viewport — a landscape phone, or a zoomed page —
   the two collide. Drop the scroll button when there is not room for both. */
@media (max-height:420px){[aria-label="Scroll to top"]{display:none!important}}
.vd-menu a.vd-cta{background:#4F46E5;color:#fff;text-align:center;margin-top:8px;border-bottom:0}
}
@media (max-width:900px){
[style*="grid-template-columns: repeat(6, 1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
[style*="grid-template-columns: repeat(6, 1fr)"] > *{grid-column:auto!important;grid-row:auto!important}
[style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
[style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
[style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"],[style*="grid-template-columns:1.6fr 1fr 1fr 1fr"]{grid-template-columns:1.4fr 1fr 1fr 1fr!important}
[style*="grid-template-columns: 1.5fr 1fr;"],[style*="grid-template-columns:1.5fr 1.1fr 1.1fr"]{grid-template-columns:1fr!important}
.vd-h1{font-size:46px!important}
[style*="font-size: 46px"],[style*="font-size:46px"]{font-size:36px!important}
[style*="font-size: 42px"],[style*="font-size:42px"]{font-size:33px!important}
[style*="font-size: 34px"],[style*="font-size:34px"]{font-size:30px!important}
[style*="width: 920px"],[style*="width:920px"]{zoom:0.42!important}
[style*="rgba(30, 27, 75, 0.4) 0px 40px 90px -40px"]{width:1144px!important;max-width:none!important;zoom:0.48!important;margin-left:auto!important;margin-right:auto!important}
}
@media (max-width:600px){
[style*="grid-template-columns: repeat(6, 1fr)"]{grid-template-columns:1fr!important}
[style*="grid-template-columns: repeat(6, 1fr)"] > *{grid-column:auto!important;grid-row:auto!important}
[style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
[style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:1fr!important}
[style*="grid-template-columns: repeat(2, 1fr)"]{grid-template-columns:1fr!important}
[style*="grid-template-columns: 1fr 1fr;"],[style*="grid-template-columns:1fr 1fr;"]{grid-template-columns:1fr!important}
[style*="grid-template-columns: 1.5fr 1fr;"],[style*="grid-template-columns:1.5fr 1.1fr 1.1fr"]{grid-template-columns:1fr!important}
[style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"],[style*="grid-template-columns:1.6fr 1fr 1fr 1fr"]{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:26px 12px!important}
[style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"],[style*="grid-template-columns:1.6fr 1fr 1fr 1fr"] > :first-child{grid-column:1 / -1!important;margin-bottom:6px!important}
.vd-h1{font-size:33px!important}
[style*="font-size: 46px"],[style*="font-size:46px"]{font-size:27px!important}
[style*="font-size: 42px"],[style*="font-size:42px"]{font-size:26px!important}
[style*="font-size: 34px"],[style*="font-size:34px"]{font-size:26px!important}
[style*="font-size: 26px"],[style*="font-size:26px"]{font-size:21px!important}
[style*="font-size: 22px"],[style*="font-size:22px"]{font-size:19px!important}
[style*="font-size: 21px"],[style*="font-size:21px"]{font-size:19px!important}
[style*="font-size: 20px"],[style*="font-size:20px"]{font-size:18px!important}
[style*="width: 920px"],[style*="width:920px"]{zoom:0.3!important}
[style*="rgba(30, 27, 75, 0.4) 0px 40px 90px -40px"]{zoom:0.28!important}
[style*="padding: 84px 28px"],[style*="padding:84px 28px"],[style*="padding: 92px 28px"],[style*="padding:92px 28px"],[style*="padding: 90px 28px"],[style*="padding:90px 28px"],[style*="padding: 72px 28px"],[style*="padding: 56px 28px"],[style*="padding:56px 28px"],[style*="padding: 0px 28px"]{padding-left:16px!important;padding-right:16px!important}
[style*="padding: 14px 28px"],[style*="padding:14px 28px"]{padding-left:16px!important;padding-right:16px!important}
[style*="padding: 26px 34px"],[style*="padding:26px 34px"]{padding-left:18px!important;padding-right:18px!important}
[style*="padding: 13px 9px"],[style*="padding:13px 9px"]{gap:6px!important}
[style*="border-radius: 22px; padding: 30px"],[style*="border-radius:22px;padding:30px"]{padding:18px!important}
/* stats box: keep one row + shrink on phones */
[style*="grid-template-columns: repeat(4, 1fr); gap: 26px"],[style*="grid-template-columns:repeat(4,1fr);gap:26px"]{grid-template-columns:repeat(4,1fr)!important;gap:7px!important;padding:16px 12px!important}
[style*="grid-template-columns: repeat(4, 1fr); gap: 26px"] [style*="border-left"],[style*="grid-template-columns:repeat(4,1fr);gap:26px"] [style*="border-left"]{padding-left:7px!important}
[style*="grid-template-columns: repeat(4, 1fr); gap: 26px"] [style*="font-size: 34px"],[style*="grid-template-columns:repeat(4,1fr);gap:26px"] [style*="font-size:34px"]{font-size:16px!important}
[style*="grid-template-columns: repeat(4, 1fr); gap: 26px"] [style*="font-size: 13.5px"],[style*="grid-template-columns:repeat(4,1fr);gap:26px"] [style*="font-size:13.5px"]{font-size:9px!important;margin-top:1px!important}
/* industries cards: smaller on phones */
[style*="border: 1px solid #F0F1F4; border-radius: 16px; padding: 20px"],[style*="border:1px solid #F0F1F4;border-radius:16px;padding:20px"]{padding:13px!important}
[style*="grid-template-columns: repeat(4, 1fr); gap: 16px"] [style*="font-size: 18px"],[style*="grid-template-columns:repeat(4,1fr);gap:16px"] [style*="font-size:18px"]{font-size:15px!important}
}
@media (max-width:400px){
[style*="width: 920px"],[style*="width:920px"]{zoom:0.24!important}
[style*="rgba(30, 27, 75, 0.4) 0px 40px 90px -40px"]{zoom:0.24!important}
.vd-h1{font-size:29px!important}
[style*="font-size: 46px"],[style*="font-size:46px"]{font-size:24px!important}
[style*="font-size: 42px"],[style*="font-size:42px"]{font-size:23px!important}
[style*="font-size: 34px"],[style*="font-size:34px"]{font-size:24px!important}
}

/* ---------------------------------------------------------------------------
   Mobile layout hardening.

   The rules above target elements by the literal text of their inline style
   ([style*="grid-template-columns: repeat(4, 1fr)"]). The markup mixes spaced
   and compact syntax, so roughly half the grids never matched and stayed at
   four columns on phones, overflowing the viewport. These rules match on the
   property value instead of one specific spelling, and add minmax(0,…) so grid
   items are allowed to shrink below their content width.
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  html,body{overflow-x:hidden}
  /* Tablet nav: "Why Vardham" and "Log in" were wrapping onto two lines. */
  nav a{white-space:nowrap}
  nav [style*="gap:30px"],nav [style*="gap: 30px"]{gap:20px!important}
  [style*="repeat(6,1fr)"],[style*="repeat(6, 1fr)"],
  [style*="repeat(4,1fr)"],[style*="repeat(4, 1fr)"],
  [style*="repeat(3,1fr)"],[style*="repeat(3, 1fr)"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [style*="repeat(6,1fr)"] > *,[style*="repeat(6, 1fr)"] > *{
    grid-column:auto!important;grid-row:auto!important}
}
@media (max-width:600px){
  /* One column for the content grids; the stats strip is handled separately
     below because it stays two-up. */
  [style*="repeat(6,1fr)"],[style*="repeat(6, 1fr)"],
  [style*="repeat(3,1fr)"],[style*="repeat(3, 1fr)"],
  [style*="repeat(2,1fr)"],[style*="repeat(2, 1fr)"],
  [style*="1.5fr 1.1fr 1.1fr"],[style*="1fr 1fr 1fr"]{
    grid-template-columns:minmax(0,1fr)!important}
  /* Capabilities and industries grids: two columns still read fine at 360px,
     but the cards must be allowed to shrink. */
  [style*="repeat(4,1fr)"],[style*="repeat(4, 1fr)"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* Long words (GSTR-3B, WhatsApp, First-Expire-First-Out) must not push the
     card wider than the screen. */
  h1,h2,h3,p,li,span,a{overflow-wrap:break-word}
  /* Flex and grid children default to min-width:auto, which refuses to shrink
     below their content. That is what pushed the hero copy, the CTA row and
     the stats strip past the right edge. */
  section > div,header > div,footer > div,
  [style*="display:flex"],[style*="display: flex"],
  [style*="display:grid"],[style*="display: grid"]{min-width:0}
  [style*="display:flex"] > *,[style*="display: flex"] > *{min-width:0}
  /* The hero paragraph carries a fixed max-width wider than a phone. */
  [style*="max-width:470px"],[style*="max-width: 470px"],
  [style*="max-width:430px"],[style*="max-width: 430px"],
  [style*="max-width:400px"],[style*="max-width: 400px"],
  [style*="max-width:480px"],[style*="max-width: 480px"],
  [style*="max-width:280px"],[style*="max-width: 280px"]{max-width:100%!important}
  /* Stats strip stays on one row — see the dedicated rules after this block. */
  /* The hero product mock is a 920px desktop layout. Scaling it down to fit a
     phone leaves the dashboard text far too small to read, and forcing it to
     100% width squashes the sidebar and overlaps the cards. Hide it here — the
     "A real look inside" section below carries real, legible screenshots. */
  [style*="width:920px"],[style*="width: 920px"]{display:none!important}
  #top{flex-direction:column!important;align-items:stretch!important;gap:24px!important}
  #top > div{max-width:100%!important}
}
/* The hero's decorative radial glows are absolutely positioned at 520px and
   420px wide with negative offsets. Being absolute (not fixed) they still count
   toward the document scroll width, which is what actually made the page scroll
   sideways on phones — measured 817px of content in a 512px viewport. The
   ancestor's overflow-x:clip does not contain them because the glows escape via
   the positioned ancestor chain. */
@media (max-width:900px){
  [style*="radial-gradient"][style*="position:absolute"],
  [style*="radial-gradient"][style*="position: absolute"]{display:none!important}
}
/* Capabilities (12 items) and industries (8 items) stay two-up on phones. One
   column turned them into a 12-row and 8-row scroll; the icon-plus-label cards
   are short enough to pair. */
@media (max-width:600px){
  [style*="repeat(4,1fr);gap:42px 32px"],[style*="repeat(4, 1fr); gap: 42px 32px"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px 14px!important}
  [style*="repeat(4,1fr);gap:16px"],[style*="repeat(4, 1fr); gap: 16px"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  [style*="repeat(4,1fr);gap:42px 32px"] > *,
  [style*="repeat(4, 1fr); gap: 42px 32px"] > *,
  [style*="repeat(4,1fr);gap:16px"] > *,
  [style*="repeat(4, 1fr); gap: 16px"] > *{min-width:0!important}
}

/* Stats strip: keep all four figures on a single row at every width. It reads
   as one band of numbers, so stacking it turns a glance into a scroll. These
   rules come last so they win over the generic repeat(4,…) rules above, and
   they cover both the spaced and compact spelling of the inline style. */
@media (max-width:900px){
  [style*="repeat(4,1fr);gap:26px"],[style*="repeat(4, 1fr); gap: 26px"]{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;padding:18px 16px!important}
}
@media (max-width:600px){
  [style*="repeat(4,1fr);gap:26px"],[style*="repeat(4, 1fr); gap: 26px"]{
    gap:6px!important;padding:16px 10px!important}
  /* Grid children default to min-width:auto and refuse to shrink below their
     text, which pushed the fourth figure past the edge. */
  [style*="repeat(4,1fr);gap:26px"] > *,
  [style*="repeat(4, 1fr); gap: 26px"] > *{min-width:0!important;overflow-wrap:break-word}
  /* Shrink the figures and captions so four columns fit a phone. */
  [style*="repeat(4,1fr);gap:26px"] [style*="font-size:34px"],
  [style*="repeat(4, 1fr); gap: 26px"] [style*="font-size: 34px"]{
    font-size:17px!important}
  [style*="repeat(4,1fr);gap:26px"] [style*="font-size:13.5px"],
  [style*="repeat(4, 1fr); gap: 26px"] [style*="font-size: 13.5px"]{
    font-size:8.5px!important;line-height:1.25!important;margin-top:2px!important}
  [style*="repeat(4,1fr);gap:26px"] [style*="border-left"],
  [style*="repeat(4, 1fr); gap: 26px"] [style*="border-left"]{
    padding-left:6px!important}
}
@media (max-width:380px){
  [style*="repeat(4,1fr);gap:26px"] [style*="font-size:34px"],
  [style*="repeat(4, 1fr); gap: 26px"] [style*="font-size: 34px"]{
    font-size:15px!important}
  [style*="repeat(4,1fr);gap:26px"] [style*="font-size:13.5px"],
  [style*="repeat(4, 1fr); gap: 26px"] [style*="font-size: 13.5px"]{
    font-size:7.5px!important}
}

/* ─────────────────────────────────────── */

/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/Bricolage-Grotesque-500-normal-1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/Bricolage-Grotesque-500-normal-2.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/Bricolage-Grotesque-500-normal-3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/Bricolage-Grotesque-600-normal-1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/Bricolage-Grotesque-600-normal-2.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/Bricolage-Grotesque-600-normal-3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/Bricolage-Grotesque-700-normal-1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/Bricolage-Grotesque-700-normal-2.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/Bricolage-Grotesque-700-normal-3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/JetBrains-Mono-500-normal-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/JetBrains-Mono-500-normal-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/JetBrains-Mono-500-normal-3.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/JetBrains-Mono-500-normal-4.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/JetBrains-Mono-500-normal-5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/JetBrains-Mono-500-normal-6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/JetBrains-Mono-700-normal-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/JetBrains-Mono-700-normal-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/JetBrains-Mono-700-normal-3.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/JetBrains-Mono-700-normal-4.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/JetBrains-Mono-700-normal-5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/JetBrains-Mono-700-normal-6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */


/* ─────────────────────────────────────── */

*{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;scroll-padding-top:84px}
    body{background:#E8EAF0}
    ::selection{background:#C7C2F6;color:#1E1B4B}
    @keyframes vfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
    @keyframes vrise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
    .vbento{background:#fff;border:1px solid #F0F1F4;box-shadow:0 1px 2px rgba(30,27,75,0.03);transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease}
    .vbento h3,.vbento p,.vbento b,.vbento .vtag,.vbento .vchip,.vbento .vbar{transition:color .25s ease,background .25s ease,border-color .25s ease}
    .vbento h3{color:#1E1B4B}
    .vbento p{color:#55506B}
    .vbento b{color:#1E1B4B}
    .vtag{display:inline-block;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;padding:7px 10px;border-radius:9px;background:#EEF0FF;color:#4F46E5}
    .vchip{display:inline-block;font-size:12.5px;font-weight:600;background:#F6F7F9;border:1px solid #F0F1F4;color:#55506B;padding:6px 11px;border-radius:9px}
    .vbento:hover{background:#1E1B4B;border-color:#1E1B4B;box-shadow:0 24px 50px -24px rgba(30,27,75,0.55);transform:translateY(-4px)}
    .vbento:hover h3{color:#fff}
    .vbento:hover p{color:#C3BFD6}
    .vbento:hover b{color:#fff}
    .vbento:hover .vtag{background:rgba(255,255,255,0.14);color:#fff}
    .vbento:hover .vchip{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.16);color:#E7E4F2}
    .vbento:hover .vbar{background:#A9A2FF !important}#vid-1,#vid-2,#vid-3,#vid-4{display:flex;position:fixed;inset:0;z-index:9999;background:rgba(15,12,40,0.80);align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .15s ease}#vid-1:target,#vid-2:target,#vid-3:target,#vid-4:target{opacity:1;pointer-events:auto}
    /* Video stories hidden for now — markup kept in place. Delete this block
       (and the #video-stories rule below) to bring the section back. */
    #video-stories{display:none!important}
    #vid-1,#vid-2,#vid-3,#vid-4,#vid-1:target,#vid-2:target,#vid-3:target,#vid-4:target{display:none!important;opacity:0!important;pointer-events:none!important}

    /* ---- Pricing: monthly / yearly toggle -------------------------------
       Yearly figures are hidden by default and revealed by a class on the
       pricing section, so with JS disabled the card still shows a complete,
       correct monthly price rather than both or neither. */
    .vd-billing{display:inline-flex;gap:4px;margin-top:22px;padding:4px;
      background:#EFEFF4;border:1px solid #E2E1EC;border-radius:999px}
    .vd-bill-opt{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
      font-family:inherit;font-size:14.5px;font-weight:600;color:#55506B;background:transparent;
      padding:9px 18px;border-radius:999px;transition:background .18s,color .18s,box-shadow .18s}
    .vd-bill-opt:hover{color:#1E1B4B}
    .vd-bill-opt.vd-on{background:#fff;color:#1E1B4B;box-shadow:0 1px 3px rgba(30,27,75,0.14)}
    .vd-bill-opt:focus-visible{outline:3px solid #4F46E5;outline-offset:2px}
    .vd-save{font-size:11.5px;font-weight:700;letter-spacing:0.02em;
      background:#E6F6EC;color:#0F7A41;padding:3px 8px;border-radius:999px;white-space:nowrap}
    .vd-bill-opt.vd-on .vd-save{background:#D8F0E2}
    #pricing .vd-y{display:none}
    #pricing.vd-yearly .vd-m{display:none}
    #pricing.vd-yearly .vd-y{display:inline}
    #pricing.vd-yearly .vd-y-note{display:block}

    /* ---- Call-to-action affordance ---------------------------------------
       Every CTA on the page is an inline-styled <a> with no hover state, so
       nothing reacted to the pointer and the buttons did not read as
       clickable. These rules key off the inline background each variant
       already carries. transform+box-shadow only — no layout properties — so
       hovering never reflows the page. */
    a[style*="background:#4F46E5"],a[style*="background:#fff;color:#4F46E5"],
    a[style*="background:#F6F7F9"],a[style*="background:rgba(255,255,255,0.10)"],
    a[style*="background:#fff;border:1px solid #E6E7EC"]{
      transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease}
    a[style*="background:#4F46E5"]:hover{
      background:#4338CA!important;color:#fff!important;transform:translateY(-2px);
      box-shadow:0 14px 30px rgba(79,70,229,0.45)!important}
    a[style*="background:#4F46E5"]:active{transform:translateY(0);
      box-shadow:0 4px 12px rgba(79,70,229,0.4)!important}
    a[style*="background:#fff;color:#4F46E5"]:hover{
      background:#F3F2FF!important;transform:translateY(-2px);
      box-shadow:0 18px 40px rgba(0,0,0,0.28)!important}
    a[style*="background:#fff;color:#4F46E5"]:active{transform:translateY(0)}
    a[style*="background:#F6F7F9"]:hover{
      background:#EEF0FF!important;border-color:#A9A2FF!important;color:#4F46E5!important;
      transform:translateY(-2px);box-shadow:0 10px 22px rgba(30,27,75,0.10)}
    a[style*="background:#F6F7F9"]:active{transform:translateY(0)}
    a[style*="background:rgba(255,255,255,0.10)"]:hover{
      background:rgba(255,255,255,0.22)!important;border-color:#fff!important;
      transform:translateY(-2px)}
    a[style*="background:rgba(255,255,255,0.10)"]:active{transform:translateY(0)}
    a[style*="background:#fff;border:1px solid #E6E7EC"]:hover{
      border-color:#A9A2FF!important;color:#4F46E5!important;transform:translateY(-2px);
      box-shadow:0 10px 24px rgba(30,27,75,0.10)}
    a[style*="background:#fff;border:1px solid #E6E7EC"]:active{transform:translateY(0)}
    a[style*="background:#4F46E5"]:focus-visible,
    a[style*="background:#fff;color:#4F46E5"]:focus-visible,
    a[style*="background:#F6F7F9"]:focus-visible,
    a[style*="background:rgba(255,255,255,0.10)"]:focus-visible,
    a[style*="background:#fff;border:1px solid #E6E7EC"]:focus-visible{
      outline:3px solid #4F46E5;outline-offset:3px}
    nav a[href^="#"]:not([style*="background:#4F46E5"]):hover,footer a:hover{color:#4F46E5!important}
    nav a[href^="#"],footer a{transition:color .15s ease}
    @media (hover:none){
      /* Touch devices: no hover lift, but keep a visible press state. */
      a[style*="background:#4F46E5"]:hover,a[style*="background:#fff;color:#4F46E5"]:hover,
      a[style*="background:#F6F7F9"]:hover,a[style*="background:rgba(255,255,255,0.10)"]:hover,
      a[style*="background:#fff;border:1px solid #E6E7EC"]:hover{transform:none}
    }
    @media (prefers-reduced-motion:reduce){
      a[style*="background:#4F46E5"],a[style*="background:#fff;color:#4F46E5"],
      a[style*="background:#F6F7F9"],a[style*="background:rgba(255,255,255,0.10)"],
      a[style*="background:#fff;border:1px solid #E6E7EC"]{transition:none}
      a[style*="background:#4F46E5"]:hover,a[style*="background:#fff;color:#4F46E5"]:hover,
      a[style*="background:#F6F7F9"]:hover,a[style*="background:rgba(255,255,255,0.10)"]:hover,
      a[style*="background:#fff;border:1px solid #E6E7EC"]:hover{transform:none}
    }
    @media (max-width:600px){
      .vd-billing{width:100%;justify-content:center}
      .vd-bill-opt{flex:1;justify-content:center;padding:10px 8px;font-size:13.5px}
      .vd-save{font-size:10.5px;padding:2px 6px}
    }

/* ─────────────────────────────────────── */

#vd-splash{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:#FBF8F4;transition:opacity .55s ease,visibility .55s ease}
#vd-splash.vd-hide{opacity:0;visibility:hidden;pointer-events:none}
.vd-splash-inner{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;padding:24px}
.vd-splash-logo-wrap{animation:vd-float 2.8s ease-in-out .7s infinite}
.vd-splash-logo{display:block;width:108px;height:auto;filter:drop-shadow(0 12px 26px rgba(214,150,40,0.38));animation:vd-pop .7s cubic-bezier(.2,.8,.2,1) both}
.vd-splash-tag{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:22px;letter-spacing:-0.01em;color:#1E1B4B;margin:0;animation:vd-rise .6s ease .2s both}
.vd-splash-bar{width:150px;height:4px;border-radius:999px;background:rgba(30,27,75,0.10);overflow:hidden}
.vd-splash-bar span{display:block;height:100%;width:40%;border-radius:999px;background:linear-gradient(90deg,#F0A93B,#E1841C);animation:vd-load 1.15s ease-in-out infinite}
@keyframes vd-pop{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
@keyframes vd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes vd-rise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes vd-load{0%{transform:translateX(-130%)}100%{transform:translateX(330%)}}
@media (prefers-reduced-motion:reduce){.vd-splash-logo,.vd-splash-logo-wrap,.vd-splash-tag,.vd-splash-bar span{animation:none}}

/* ─────────────────────────────────────── */

.vpills{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:26px}.vpill{font-size:13.5px;font-weight:600;color:#55506B;background:#fff;border:1px solid #F0F1F4;padding:9px 16px;border-radius:999px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,color .15s,border-color .15s}.vpill:hover{border-color:#C7C3F0;color:#4F46E5}.vpill.vactive{color:#fff;background:#4F46E5;border-color:#4F46E5}.vframes .vpanel{display:none}.vframes .vpanel.vactive{display:block}

/* ─────────────────────────────────────── */

.vt-wrap{position:relative;margin-top:46px}
  .vt-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:16px 4px 44px;scrollbar-width:none;-ms-overflow-style:none}
  .vt-track::-webkit-scrollbar{display:none}
  .vt-slide{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start}
  .vt-card{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:5/6;background-size:cover;background-position:center;box-shadow:0 22px 45px -20px rgba(15,14,38,0.5)}
  .vt-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.06),rgba(0,0,0,0) 28%)}
  .vt-info{position:absolute;left:16px;right:16px;bottom:16px;background:#fff;border-radius:16px;padding:38px 18px 20px;text-align:center;box-shadow:0 16px 34px -14px rgba(0,0,0,0.28);z-index:2}
  .vt-play{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;background:#4F46E5;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(79,70,229,0.45);transition:transform .25s ease,background .25s ease;text-decoration:none}
  .vt-card:hover .vt-play{transform:translateX(-50%) scale(1.08);background:#4338CA}
  .vt-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:21px;color:#1E1B4B;line-height:1.15}
  .vt-person{font-size:14px;color:#6B6680;margin-top:6px}
  .vt-arrow{position:absolute;top:39%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid #E7E5F0;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;box-shadow:0 12px 28px -8px rgba(15,14,38,0.38);color:#1E1B4B;font-size:26px;line-height:0;padding-bottom:4px;z-index:5;transition:background .2s ease,color .2s ease,transform .2s ease,opacity .2s ease}
  .vt-arrow:hover{background:#4F46E5;color:#fff;border-color:#4F46E5;transform:translateY(-50%) scale(1.06)}
  .vt-prev{left:-10px}
  .vt-next{right:-10px}
  .vt-arrow:disabled{opacity:0.3;cursor:default;pointer-events:none}
  .vt-nav{position:absolute;top:42%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.96);display:flex;align-items:center;justify-content:center;color:#1E1B4B;font-size:24px;line-height:0;padding-bottom:3px;text-decoration:none;box-shadow:0 10px 24px -8px rgba(15,14,38,0.4);opacity:0;transition:opacity .2s ease,background .2s ease,color .2s ease;z-index:6}
  .vt-card:hover .vt-nav{opacity:1}
  .vt-nav:hover{background:#4F46E5;color:#fff}
  .vt-nav-prev{left:10px}
  .vt-nav-next{right:10px}
  @media (hover:none){.vt-nav{opacity:1}}
  @media (max-width:900px){.vt-slide{flex-basis:calc((100% - 24px)/2)}.vt-name{font-size:19px!important}}
  @media (max-width:600px){.vt-slide{flex-basis:70%}.vt-prev{left:0}.vt-next{right:0}.vt-name{font-size:17px!important}.vt-person{font-size:12px!important}.vt-info{padding:30px 14px 14px!important;left:12px!important;right:12px!important}.vt-play{width:46px!important;height:46px!important;top:-22px!important}}