/* /services — warm neutral "VaultShield" vibe from the owner's hero spec, in the site's brand blue: full-screen video hero,
   heavy tight headings with inline icons, blue accent pills. Content stays the approved services copy. */
.page-vs{
  --font-heading:'Helvetica Now Display Bold','Helvetica Now Display','Helvetica Neue','Inter',Arial,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --color-text:#192837;--color-accent:#1169dc;--color-login-bg:#F2F2EE;--vs-sheet:#CFC8C5;--vs-ease:cubic-bezier(.22,1,.36,1);
  font-family:var(--font-body);color:var(--color-text);background:var(--color-login-bg)}
.page-vs ::selection{background:rgba(17,105,220,.2)}

/* ---------- hero ---------- */
.vs-hero{position:relative;isolation:isolate;width:100%;min-height:100vh;min-height:100svh;overflow:hidden}
.vs-video{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}
.vs-hero-inner{max-width:1280px;margin:0 auto;padding:calc(clamp(40px,8vw,72px) + 84px) 20px 72px}
.vs-hero-copy{max-width:560px}
.vs-h1{margin:0 0 24px;font-family:var(--font-heading);font-weight:700;font-size:clamp(1.65rem,5vw,3rem);line-height:1.05;letter-spacing:-.01em;color:#192837}
.vs-ii{position:relative;top:-2px;display:inline-block;width:24px;height:24px;vertical-align:middle;color:#192837;stroke-width:2.1}
.vs-sub{max-width:560px;margin:0 0 32px;font-family:var(--font-body);font-size:clamp(.9rem,2.5vw,1.1rem);line-height:1.65;opacity:.8}
.vs-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-width:210px;padding:17px 24px;border:0;border-radius:50px;cursor:pointer;
  background:#1169dc;color:#fff;font:600 clamp(.9rem,2vw,1rem)/1.2 var(--font-body);box-shadow:0 4px 24px rgba(17,105,220,.28);
  transition:transform .3s var(--vs-ease),filter .3s ease}
.vs-cta .pg-icon{width:20px;height:20px;flex:none;stroke-width:2}
.vs-cta:hover{transform:scale(1.04);filter:brightness(1.1)}
.vs-cta:active{transform:scale(.96)}
.vs-cta--light{background:#fff;color:#192837;box-shadow:0 4px 24px rgba(0,0,0,.14)}
.vs-cta--light .pg-icon{color:#1169dc}
@media (min-width:640px){.vs-hero-inner{padding-left:32px;padding-right:32px}}
@media (prefers-reduced-motion:no-preference){.vs-fade{animation:vs-up .6s var(--vs-ease) var(--d,0s) both}}
@keyframes vs-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ---------- sections ---------- */
.vs-body{padding:clamp(64px,9vw,120px) 0 clamp(56px,8vw,104px);background:var(--color-login-bg)}
.vs-wrap{max-width:1280px;margin:0 auto;padding:0 20px}
@media (min-width:640px){.vs-wrap{padding:0 32px}}
.vs-section{margin-top:clamp(80px,10vw,144px);scroll-margin-top:96px}
.vs-eyebrow{margin:0 0 14px;font:600 13px/1.3 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent)}
.vs-eyebrow--light{color:#9fc4ff}
.vs-head{max-width:720px;margin-bottom:clamp(28px,4vw,48px)}
.vs-head h2{margin:0 0 14px;font-family:var(--font-heading);font-weight:700;font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.015em;text-wrap:balance}
.vs-head p{margin:0;font-size:17px;line-height:1.6;opacity:.78}
.vs-head a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}
.vs-head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;max-width:none}
.vs-head--row h2{margin:0}
.vs-link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--color-accent)}
.vs-link-arrow .pg-icon{width:22px;height:22px;transition:transform .3s var(--vs-ease)}
.vs-link-arrow:hover .pg-icon{transform:translateX(4px)}

/* statement with inline icons */
.vs-statement h2{margin:0 0 20px}
.vs-statement p{max-width:1080px;margin:0;font-family:var(--font-heading);font-weight:700;font-size:clamp(1.35rem,2.9vw,2.25rem);line-height:1.22;letter-spacing:-.015em}
.vs-statement .vs-ii{width:.9em;height:.9em;top:-.07em;color:var(--color-accent)}

/* domain cards */
.vs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vs-card{position:relative;display:flex;flex-direction:column;padding:28px;border-radius:28px;background:#fff;border:1px solid rgba(25,40,55,.06);scroll-margin-top:100px;
  transition:transform .35s var(--vs-ease),box-shadow .35s var(--vs-ease),border-color .35s ease}
.vs-card-top{display:flex;align-items:center;justify-content:space-between}
.vs-card-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;color:var(--color-accent);background:#e8f1ff;transition:background-color .35s ease,color .35s ease,transform .35s var(--vs-ease)}
.vs-card-ic .pg-icon{width:26px;height:26px}
.vs-card-n{font-family:var(--font-heading);font-weight:700;font-size:15px;opacity:.35}
.vs-card h3{margin:26px 0 8px;font-family:var(--font-heading);font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-.01em}
.vs-card-tag{margin:0 0 22px;font-size:15.5px;line-height:1.5;opacity:.75}
.vs-chips{display:flex;flex-wrap:wrap;gap:6px;margin:auto 0 0;padding:0;list-style:none}
.vs-chips li{padding:6px 11px;border-radius:999px;background:var(--color-login-bg);font-size:12.5px;font-weight:500}
.vs-card:target{border-color:var(--color-accent)}
@media (hover:hover){
  .vs-card:hover,.mo-on .vs-card.mo.is-in:hover{transform:translateY(-6px);transition-delay:0ms;border-color:rgba(17,105,220,.35);box-shadow:0 30px 60px -26px rgba(17,105,220,.45)}
  .vs-card:hover .vs-card-ic{color:#fff;background:var(--color-accent);transform:rotate(-8deg)}
}

/* featured solution */
.vs-feature{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:center;
  padding:clamp(28px,5vw,72px);border-radius:40px;background:#192837;color:#fff}
.vs-feature::before{content:"";position:absolute;right:-12%;top:-40%;z-index:-1;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(17,105,220,.55),rgba(17,105,220,0))}
.vs-feature h2{margin:0 0 16px;font-family:var(--font-heading);font-weight:700;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.015em}
.vs-feature p{max-width:52ch;margin:0 0 32px;font-size:17px;line-height:1.6;opacity:.8}
.page-vs .sv-chat{box-shadow:0 30px 70px -20px rgba(0,0,0,.5)}
.page-vs .sv-chat .sv-chat-user{background:var(--color-accent);color:#fff}

/* why one partner */
.vs-why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.vs-why-item{padding:28px;border-radius:28px;background:rgba(255,255,255,.65);border:1px solid rgba(25,40,55,.06)}
.vs-why-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;color:#fff;background:#192837}
.vs-why-ic .pg-icon{width:24px;height:24px}
.vs-why h3{margin:22px 0 8px;font-family:var(--font-heading);font-weight:700;font-size:19px;letter-spacing:-.01em}
.vs-why p{margin:0;font-size:15px;line-height:1.55;opacity:.75}

/* three steps */
.vs-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.vs-steps li{position:relative;padding:32px 28px;border-radius:28px;background:#fff}
.vs-steps li:not(:last-child)::after{content:"";position:absolute;top:58px;right:-14px;z-index:1;width:12px;height:12px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 6px var(--color-login-bg)}
.vs-step-n{display:block;margin-bottom:22px;font-family:var(--font-heading);font-weight:700;font-size:56px;line-height:1;color:var(--color-accent)}
.vs-steps h3{margin:0 0 8px;font-family:var(--font-heading);font-weight:700;font-size:21px;letter-spacing:-.01em}
.vs-steps p{margin:0;font-size:15.5px;line-height:1.55;opacity:.75}

/* questions */
.vs-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.vs-nova{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:8px 16px 8px 8px;border:0;border-radius:999px;background:#fff;color:var(--color-text);
  font:inherit;text-align:left;cursor:pointer;transition:box-shadow .3s ease,transform .3s var(--vs-ease)}
.vs-nova img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.vs-nova span{font-size:14px;line-height:1.35;opacity:.85}
.vs-nova b{display:block;font-size:15px;opacity:1}
.vs-nova .pg-icon{width:22px;height:22px;margin-left:6px;color:var(--color-accent)}
.vs-nova:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(25,40,55,.35)}
.vs-qa-list{display:grid;gap:10px}
.vs-qa{padding:0 24px;border-radius:22px;background:#fff;border:1px solid rgba(25,40,55,.06)}
.vs-qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;font-size:16.5px;font-weight:600;list-style:none;cursor:pointer}
.vs-qa summary::-webkit-details-marker{display:none}
.vs-qa summary i{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--color-login-bg);transition:transform .3s var(--vs-ease),background-color .3s ease}
.vs-qa summary i::before,.vs-qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--color-text);transition:background-color .3s ease}
.vs-qa summary i::after{transform:rotate(90deg)}
.vs-qa[open] summary i{transform:rotate(45deg);background:var(--color-accent)}
.vs-qa[open] summary i::before,.vs-qa[open] summary i::after{background:#fff}
.vs-qa p{margin:0 0 22px;font-size:15.5px;line-height:1.65;opacity:.8}

/* closing band */
.vs-cta-band{position:relative;isolation:isolate;overflow:hidden;padding:clamp(44px,7vw,96px) clamp(24px,5vw,64px);border-radius:40px;background:var(--color-accent);color:#fff;text-align:center}
.vs-cta-band::before{content:"";position:absolute;inset:-30% -10% auto;z-index:-1;height:120%;background:radial-gradient(50% 60% at 50% 0%,rgba(255,255,255,.28),rgba(255,255,255,0))}
.vs-cta-band h2{margin:0 0 14px;font-family:var(--font-heading);font-weight:700;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.04;letter-spacing:-.015em}
.vs-cta-band .vs-ii{width:.8em;height:.8em;top:-.06em;color:#fff}
.vs-cta-band p{max-width:48ch;margin:0 auto 32px;font-size:18px;line-height:1.6;opacity:.88}
.vs-cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* focus */
.vs-btn:focus-visible,.vs-cta:focus-visible,.vs-qa summary:focus-visible,.vs-nova:focus-visible,.vs-link-arrow:focus-visible,.vs-logo:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:3px}
.vs-feature .vs-cta:focus-visible,.vs-cta-band :focus-visible{outline-color:#fff}


/* ---------- responsive ---------- */
@media (max-width:1100px){.vs-why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.vs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .vs-feature,.vs-faq{grid-template-columns:1fr}
}
@media (max-width:800px){
  .vs-steps{grid-template-columns:1fr}
  .vs-steps li:not(:last-child)::after{display:none}
}
@media (max-width:640px){
  .vs-grid,.vs-why{grid-template-columns:1fr}
  .vs-card,.vs-why-item{padding:24px}
  .vs-feature,.vs-cta-band{border-radius:30px}
  .vs-cta-actions > *{width:100%}
}

/* pill buttons (restored after the services-only nav was removed) */
.vs-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border:0;border-radius:999px;font:600 14px/1.2 var(--font-body);cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--vs-ease),filter .25s ease,background-color .25s ease}
.vs-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.vs-btn--accent{background:var(--color-accent);color:#fff}
.vs-btn--soft{background:var(--color-login-bg);color:var(--color-text)}
.vs-btn--ghost{padding:17px 24px;background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.vs-btn--ghost:hover{background:rgba(255,255,255,.12)}
/* the hero video's coins are purple: shift them to the brand blue */
.vs-video{filter:hue-rotate(-38deg) saturate(.62) brightness(1.02)}

/* ---------- domain carousel (Animate UI MotionCarousel port, services.js) ---------- */
.vs-carousel{--slide-size:55%;--car-ease:cubic-bezier(.34,1.32,.5,1)}
.vs-car-viewport{overflow:hidden;margin:0 -20px;padding:8px 0 18px;touch-action:pan-y pinch-zoom;cursor:grab}
.vs-car-viewport:active{cursor:grabbing}
.vs-carousel .vs-car-track{position:relative;display:block}
.vs-carousel .vs-car-slide{position:absolute;top:0;left:0;width:var(--slide-size);min-width:0;scale:.9;opacity:.55;
  transition:translate .65s var(--car-ease),scale .6s var(--car-ease),opacity .4s ease,box-shadow .35s ease,border-color .35s ease;cursor:pointer;user-select:none}
.vs-carousel .vs-car-slide.is-active{scale:1;opacity:1;cursor:auto;user-select:text;box-shadow:0 30px 60px -28px rgba(17,105,220,.45);border-color:rgba(17,105,220,.25)}
.vs-carousel .vs-car-slide.no-anim{transition:none}
.vs-carousel .vs-card:hover,.mo-on .vs-carousel .vs-card.mo.is-in:hover{transform:none}
.vs-car-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.vs-car-btn{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--color-accent);color:#fff;cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(17,105,220,.6);transition:transform .25s var(--vs-ease),filter .25s ease}
.vs-car-btn:hover{transform:scale(1.06);filter:brightness(1.08)}
.vs-car-btn:active{transform:scale(.94)}
.vs-car-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vs-car-dots{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.vs-car-dot{position:relative;display:inline-flex;align-items:center;justify-content:center;height:12px;max-width:12px;min-width:12px;padding:0;overflow:hidden;
  border:0;border-radius:999px;background:rgba(17,105,220,.25);color:#fff;font:600 13px/1 var(--font-body);cursor:pointer;
  transition:max-width .55s var(--car-ease),height .45s var(--car-ease),padding .45s var(--car-ease),background-color .3s ease}
.vs-car-dot span{position:relative;z-index:1;white-space:nowrap;opacity:0;scale:0;filter:blur(4px);transition:opacity .35s ease,scale .45s var(--car-ease),filter .35s ease}
.vs-car-dot i{position:absolute;inset:0;z-index:0;background:rgba(255,255,255,.22);transform:scaleX(0);transform-origin:left}
.vs-car-dot.is-active{height:28px;max-width:180px;padding:0 14px;background:var(--color-accent)}
.vs-car-dot.is-active span{opacity:1;scale:1;filter:none}
.vs-carousel.is-ticking .vs-car-dot.is-active i{animation:vs-car-tick var(--car-ms,4500ms) linear forwards}
@keyframes vs-car-tick{to{transform:scaleX(1)}}
.vs-car-btn:focus-visible,.vs-car-dot:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
@media (min-width:640px){.vs-car-viewport{margin:0 -32px}}
@media (max-width:1000px){.vs-carousel{--slide-size:72%}}
@media (max-width:640px){.vs-carousel{--slide-size:86%}.vs-car-dot.is-active{padding:0 10px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.vs-carousel .vs-car-slide,.vs-car-dot,.vs-car-dot span{transition:none}}
.vs-carousel .vs-car-track{transition:height .5s var(--vs-ease)}
.vs-car-viewport{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
@media (max-width:640px){.vs-car-viewport{-webkit-mask-image:none;mask-image:none}}

/* auto-scroll pause / play (services.js) */
.vs-car-play{margin-left:6px;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(17,105,220,.25);background:#fff;color:#1169dc;cursor:pointer;transition:background .2s,color .2s}
.vs-car-play:hover{background:#1169dc;color:#fff}
.vs-car-play:focus-visible{outline:2px solid #1169dc;outline-offset:3px}
.vs-car-play svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vs-car-play .i-play{display:none;fill:currentColor;stroke:none}
.vs-carousel.is-stopped .vs-car-play .i-play{display:block}
.vs-carousel.is-stopped .vs-car-play .i-pause{display:none}