/* ================================================================
   TECHXLNS XENTRA / VMS PRODUCT PAGE — FULL STYLESHEET
   Consolidated: the repeated override layers were merged into a
   single clean cascade (no more stacked !important patches).

   Breakpoints
     >= 1201px      desktop
     1025-1200px    laptop
     901-1024px     iPad landscape
     601-900px      iPad portrait / large phone  (mobile nav)
     <= 600px       phone

   Fixes included
     1. No empty gap above the image slider on mobile / iPad
     2. Subtle Xentra background with a seamless curved transition
     3. Xentra block flows naturally on small screens
     4. "From Invitation to Departure" number badges never clip
   ================================================================ */

   :root {
    --bg: #091621;
    --navy: #0A1622;
    --cyan: #08D0E0;
    --white: #FFFFFF;
    --muted: #AAB8C2;
    --muted-2: #8FA0AC;
    --card-border: rgba(104, 151, 166, 0.82);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --font: 'Inter', sans-serif;
    --page-w: calc(100% - 120px);
    --page-max: 1200px;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: clip;
    background: var(--bg);
  }
  
  body.vms-page {
    margin: 0;
    max-width: 100%;
    overflow-x: clip;
    background: var(--bg);
    color: var(--white);
    font-family: var(--font);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  
  img {
    display: block;
    max-width: 100%;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  button,
  input,
  textarea {
    font: inherit;
    color: inherit;
  }
  
  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  h1,
  h2,
  h3,
  p {
    margin: 0;
  }
  
  /* One solid page colour. Sections stay transparent on top of it so
     nothing can differ above/below the curve. */
  .vms-canvas {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    overflow-x: clip;
    overflow-y: visible;
    background: var(--bg);
  }
  
  .vms-canvas>main,
  .vms-canvas>footer {
    position: relative;
    z-index: 2;
  }
  
  .vms-glow {
    display: none;
  }
  
  
  /* ================================================================
     BUTTONS
     ================================================================ */
  
  .vms-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 30px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: transform .35s var(--ease), background .25s var(--ease),
      box-shadow .25s var(--ease), border-color .25s var(--ease);
  }
  
  .vms-btn:hover,
  .vms-btn:focus-visible {
    transform: scale(1.1);
  }
  
  .vms-btn:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
  }
  
  .vms-btn>* {
    position: relative;
    z-index: 3;
  }
  
  .vms-btn-light {
    background: #F3F7F9;
    color: var(--navy);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  }
  
  .vms-btn-light:hover {
    background: #FFFFFF;
  }
  
  .vms-btn-cyan {
    background: var(--cyan);
    color: var(--navy);
    box-shadow: 0 10px 28px rgba(8, 208, 224, .28), 0 0 24px rgba(8, 208, 224, .2);
  }
  
  .vms-btn-cyan:hover {
    box-shadow: 0 12px 34px rgba(8, 208, 224, .38), 0 0 32px rgba(8, 208, 224, .28);
  }
  
  .vms-btn-outline {
    background: transparent;
    color: var(--cyan);
    border-color: var(--cyan);
  }
  
  /* ---------------------------------------------------------------
     BUTTON HOVER — matches the Figma recording
     - button zooms up ~10 %
     - a soft grey, slightly slanted band sweeps left -> right and
       exits on the right; on mouse-leave it sweeps back right -> left
     - nothing animates while idle
     --------------------------------------------------------------- */
  .vms-btn {
    --sweep: rgba(96, 104, 112, .34);
  }
  
  .vms-btn-cyan {
    --sweep: rgba(6, 40, 52, .26);
  }
  
  .vms-btn-outline {
    --sweep: rgba(8, 208, 224, .30);
  }
  
  .vms-btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 38%;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0) 0%,
        var(--sweep) 62%,
        var(--sweep) 82%,
        rgba(0, 0, 0, 0) 100%);
    filter: blur(1.5px);
    transform: translateX(-135%) skewX(-18deg);
    transition: transform .6s cubic-bezier(.45, 0, .25, 1);
    pointer-events: none;
    z-index: 2;
  }
  
  .vms-btn:hover::after,
  .vms-btn:focus-visible::after {
    transform: translateX(340%) skewX(-18deg);
  }
  
  /* ----------------------------------------------------------------
     Glass cards (shared by security, features, benefits, footer)
     ---------------------------------------------------------------- */
  
  .vms-glass-card {
    border: 1px solid rgba(8, 208, 224, .42);
    border-radius: 24px;
    background:
      radial-gradient(ellipse 70% 80% at 8% 12%, rgba(8, 208, 224, .14), transparent 55%),
      radial-gradient(ellipse 55% 60% at 96% 100%, rgba(45, 124, 128, .38), transparent 50%),
      linear-gradient(145deg, #183943 0%, #0b1f2b 52%, #123a42 100%);
    box-shadow:
      0 16px 40px rgba(0, 0, 0, .32),
      0 0 0 1px rgba(8, 208, 224, .08),
      inset 0 1px 0 rgba(180, 245, 250, .22),
      inset 1px 0 0 rgba(8, 208, 224, .12),
      0 0 28px rgba(8, 208, 224, .08);
    transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
  }
  
  
  /* ================================================================
     NAVBAR — sticky
     ================================================================ */
  
  .vms-nav {
    position: sticky;
    top: 16px;
    z-index: 1000;
    width: var(--page-w);
    max-width: var(--page-max);
    margin: 16px auto 0;
  }
  
  .vms-nav-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    min-height: 76px;
    padding: 0 24px 0 34px;
    border: 1px solid rgba(171, 191, 201, .45);
    border-radius: 44px;
    background: rgba(7, 19, 29, .80);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .32), 0 0 24px rgba(8, 208, 224, .06),
      inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(22px) saturate(120%);
    -webkit-backdrop-filter: blur(22px) saturate(120%);
  }
  
  .vms-nav-logo {
    flex: 0 0 auto;
    width: 108px;
    height: 52px;
  }
  
  .vms-nav-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }
  
  .vms-nav-links {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.2vw, 34px);
  }
  
  .vms-nav-links a {
    white-space: nowrap;
    font-size: 16px;
    font-weight: 400;
    color: rgba(243, 245, 247, .88);
    transition: color .2s ease, background .2s ease;
  }
  
  .vms-nav-links a:hover,
  .vms-nav-links a.is-active {
    color: #FFF;
  }
  
  .vms-nav-cta {
    flex: 0 0 auto;
  }
  
  .vms-nav-cta-mobile {
    display: none !important;
  }
  
  /* Contact Us pill with animated cyan arc */
  .vms-pill {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    cursor: pointer;
    font-family: var(--font);
  }
  
  .vms-pill:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
  }
  
  .vms-pill-lg {
    width: 198px;
    height: 50px;
    border-radius: 28px;
  }
  
  .vms-pill-light {
    background: #F3F7F9;
    color: var(--navy);
  }
  
  .vms-pill-light:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  }
  
  .vms-pill-label {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
  }
  
  .vms-pill .vms-arc {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
  }
  
  .vms-pill-light .vms-arc-primary {
    z-index: 2;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle closest-side,
        transparent 0%, transparent 68%,
        rgba(8, 208, 224, .08) 72%, rgba(8, 208, 224, .45) 75.5%,
        rgba(180, 245, 250, .90) 78.5%, rgba(8, 208, 224, .40) 81.5%,
        transparent 84.5%, rgba(8, 208, 224, .10) 88%,
        rgba(8, 208, 224, .50) 90.5%, rgba(200, 250, 255, .92) 92.5%,
        rgba(8, 208, 224, .35) 95%, transparent 100%);
    filter: blur(2.4px);
    transform: translate(-50%, -50%) translateY(275px);
    transition: transform .9s cubic-bezier(.65, 0, .35, 1);
  }
  
  .vms-pill-light .vms-arc-secondary {
    z-index: 1;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle closest-side,
        transparent 0%, transparent 70%,
        rgba(8, 208, 224, .06) 78%, rgba(8, 208, 224, .28) 86%,
        rgba(8, 208, 224, .32) 91%, rgba(8, 208, 224, .10) 96%, transparent 100%);
    filter: blur(9px);
    opacity: .7;
    transform: translate(-50%, -50%) translateY(280px);
    transition: transform .95s cubic-bezier(.65, 0, .35, 1);
  }
  
  .vms-pill-light:hover .vms-arc-primary,
  .vms-pill-light:focus-visible .vms-arc-primary,
  .vms-pill-light:active .vms-arc-primary {
    transform: translate(-50%, -50%) translateY(110px);
  }
  
  .vms-pill-light:hover .vms-arc-secondary,
  .vms-pill-light:focus-visible .vms-arc-secondary,
  .vms-pill-light:active .vms-arc-secondary {
    transform: translate(-50%, -50%) translateY(115px);
  }
  
  .vms-nav-toggle {
    display: none;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    margin-left: auto;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  
  .vms-nav-toggle span {
    width: 18px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
  }
  
  
  /* ================================================================
     HERO
     ================================================================ */
  
  .vms-hero {
    width: var(--page-w);
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 62px 0 0;
  }
  
  .vms-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 540px) minmax(0, 610px);
    gap: 74px;
    align-items: start;
    justify-content: center;
  }
  
  .vms-hero-copy {
    max-width: 540px;
    padding-top: 58px;
  }
  
  .vms-hero-copy h1 {
    display: flex;
    flex-direction: column;
    font-size: clamp(38px, 2.8vw, 46px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -.028em;
    color: var(--cyan);
  }
  
  .vms-hero-copy h1 span {
    display: block;
    white-space: nowrap;
  }
  
  .vms-hero-sub {
    margin-top: 24px;
    max-width: 400px;
    font-size: 18px;
    line-height: 1.38;
    color: #F1F3F5;
  }
  
  .vms-hero-copy .vms-btn {
    margin-top: 31px;
  }
  
  .vms-hero-copy .vms-btn-light {
    width: 162px;
    height: 51px;
    min-height: 51px;
    padding: 0;
    border-radius: 28px;
    font-size: 16px;
  }
  
  /* The demo label stays above the soft sweep throughout the zoom. */
  .vms-hero-copy .vms-btn-light::after {
    width: 45%;
    background: linear-gradient(90deg,
      transparent 0%, rgba(96, 104, 112, .28) 50%, transparent 100%);
    filter: blur(3px);
    transition: transform .65s cubic-bezier(.45, 0, .25, 1);
  }

  .vms-hero-visual {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  
  .vms-hero-shot {
    width: min(520px, 100%);
    overflow: hidden;
    border-radius: 16px;
    background: #0A1622;
    box-shadow: 0 28px 64px rgba(0, 0, 0, .4), 0 0 48px rgba(8, 208, 224, .12),
      0 0 2px rgba(8, 208, 224, .35);
  }
  
  .vms-hero-shot img {
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 779;
    object-fit: cover;
  }
  
  
  /* ================================================================
     PRODUCT GALLERY (coverflow)
     ================================================================ */
  
  .vms-showcase {
    width: 100%;
    max-width: 100%;
    margin: 24px auto 0;
    padding: 52px 0 56px;
    overflow-x: clip;
    overflow-y: visible;
    background: radial-gradient(ellipse 55% 38% at 50% 18%, rgba(8, 208, 224, .06), transparent 72%);
  }
  
  .vms-gallery {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .vms-gallery-shell {
    --slide-w: min(600px, 43vw);
    position: relative;
    width: 100%;
    max-width: 100%;
    height: calc(var(--slide-w) * .6492 + 16px);
    margin: 0 auto;
    perspective: 1400px;
  }
  
  .vms-gallery-viewport {
    position: absolute;
    inset: 0;
    overflow: visible;
  }
  
  .vms-gallery-track {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-style: preserve-3d;
  }
  
  .vms-gallery-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--slide-w);
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #0A1622;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    transform: translate3d(-50%, -50%, -500px) scale(.4);
    transition: transform .55s var(--ease), opacity .4s ease, filter .4s ease, visibility .4s ease;
  }
  
  .vms-gallery-slide>img {
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 779;
    object-fit: contain;
    object-position: top center;
    user-select: none;
    -webkit-user-drag: none;
  }
  
  .vms-gallery-slide.is-active {
    visibility: visible;
    opacity: 1;
    z-index: 5;
    filter: none;
    pointer-events: auto;
    transform: translate3d(-50%, -50%, 0) scale(1);
    box-shadow: 0 24px 52px rgba(0, 0, 0, .5), 0 0 28px rgba(8, 208, 224, .06);
  }
  
  .vms-gallery-slide.is-prev,
  .vms-gallery-slide.is-next {
    visibility: visible;
    opacity: .5;
    z-index: 3;
    filter: brightness(.5) saturate(.8);
  }
  
  .vms-gallery-slide.is-prev {
    transform: translate3d(-50%, -50%, 0) translateX(calc(-1 * min(335px, 24vw))) translateZ(-90px) scale(.78);
  }
  
  .vms-gallery-slide.is-next {
    transform: translate3d(-50%, -50%, 0) translateX(min(335px, 24vw)) translateZ(-90px) scale(.78);
  }
  
  .vms-gallery-slide.is-prev-2,
  .vms-gallery-slide.is-next-2 {
    visibility: visible;
    opacity: .34;
    z-index: 1;
    filter: brightness(.45) saturate(.75);
  }
  
  .vms-gallery-slide.is-prev-2 {
    transform: translate3d(-50%, -50%, 0) translateX(calc(-1 * min(500px, 36vw))) translateZ(-160px) scale(.64);
  }
  
  .vms-gallery-slide.is-next-2 {
    transform: translate3d(-50%, -50%, 0) translateX(min(500px, 36vw)) translateZ(-160px) scale(.64);
  }
  
  .vms-gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 8;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(48, 54, 62, .92);
    color: #e8eef2;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
    transition: background .2s ease, transform .2s ease;
  }
  
  .vms-gallery-nav:hover {
    background: rgba(72, 80, 90, .95);
    transform: translateY(-50%) scale(1.05);
  }
  
  .vms-gallery-nav svg {
    width: 18px;
    height: 18px;
  }
  
  .vms-gallery-prev {
    left: calc(50% - var(--slide-w) / 2 - 8px);
  }
  
  .vms-gallery-next {
    right: calc(50% - var(--slide-w) / 2 - 8px);
  }
  
  
  /* ================================================================
     SECTION TITLES
     ================================================================ */
  
  .vms-section-kicker,
  .vms-section-title {
    font-size: clamp(36px, 3.2vw, 50px);
    line-height: 1.04;
    font-weight: 700;
    color: var(--cyan);
    text-align: center;
  }
  
  .vms-section-kicker {
    letter-spacing: .055em;
  }
  
  .vms-section-title {
    letter-spacing: -.02em;
  }
  
  .vms-section-lead {
    margin-top: 14px;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.25;
    font-weight: 400;
    color: #FFF;
    text-align: center;
  }
  
  
  /* ================================================================
     SECURITY
     ================================================================ */
  
  .vms-security {
    width: var(--page-w);
    max-width: var(--page-max);
    margin: 42px auto 0;
  }
  
  .vms-security-intro {
    max-width: 1000px;
    margin: 0 auto 44px;
    text-align: center;
  }
  
  .vms-security-intro h2 {
    font-size: clamp(38px, 3vw, 46px);
    line-height: 1.08;
    font-weight: 700;
    color: var(--cyan);
    text-shadow: 0 0 40px rgba(8, 208, 224, .25);
  }
  
  .vms-security-intro p {
    max-width: 1000px;
    margin: 18px auto 0;
    color: #F0F2F4;
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.45;
  }
  
  .vms-security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
  }
  
  .vms-sec-card {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 116px;
    padding: 20px 30px;
    border-radius: 22px;
  }
  
  .vms-sec-card:hover,
  .vms-feat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(8, 208, 224, .7);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(200, 250, 255, .3),
      0 0 36px rgba(8, 208, 224, .16);
  }
  
  .vms-sec-card-wide {
    grid-column: 1 / -1;
  }
  
  .vms-sec-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--cyan);
  }
  
  .vms-sec-icon svg {
    width: 35px;
    height: 35px;
  }
  
  .vms-sec-card h3 {
    font-size: 19px;
    line-height: 1.2;
    font-weight: 700;
    color: #FFF;
  }
  
  .vms-sec-card p {
    margin-top: 8px;
    color: #F0F2F4;
    font-size: 15px;
    line-height: 1.42;
  }
  
  
  /* ================================================================
     XENTRA INTRO + CURVE
     Desktop: copy + button are positioned over a big ghost watermark.
     <=1024px: switches to natural flow (see responsive section).
     ================================================================ */
  
  .vms-xentra {
    position: relative;
    width: 100%;
    height: 480px;
    min-height: 480px;
    margin: 12px auto 0;
    padding: 0 28px;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
  }
  
  .vms-xentra-watermark {
    position: absolute;
    left: 50%;
    top: 40%;
    z-index: 1;
    transform: translate(-50%, -50%) scaleX(.95);
    width: max-content;
    max-width: none;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    font-size: clamp(160px, 16vw, 280px);
    line-height: .8;
    font-weight: 800;
    letter-spacing: -.045em;
    color: #1a2630;
  }
  
  .vms-xentra-inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
  }
  
  .vms-xentra-copy {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1100px, calc(100% - 40px));
    color: var(--cyan);
    font-size: clamp(17px, 1.15vw, 20px);
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
  }
  
  .vms-xentra-copy strong {
    color: var(--cyan);
    font-weight: 700;
  }
  
  /* Explore Xentra: outlined, cyan fill rises on hover */
  .vms-pill-explore {
    position: absolute;
    top: 72%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 200px;
    height: 48px;
    border: 1.5px solid var(--cyan);
    border-radius: 10px;
    background: transparent;
  }
  
  .vms-pill-explore:hover,
  .vms-pill-explore:focus-visible {
    box-shadow: 0 0 22px rgba(8, 208, 224, .35);
  }
  
  .vms-pill-explore .vms-pill-label {
    color: var(--cyan);
    font-size: 16px;
    transition: color .35s ease;
  }
  
  .vms-pill-explore:hover .vms-pill-label,
  .vms-pill-explore:focus-visible .vms-pill-label,
  .vms-pill-explore:active .vms-pill-label {
    color: #091621;
  }
  
  .vms-pill-explore .vms-arc-primary,
  .vms-pill-explore .vms-arc-secondary {
    display: none;
  }
  
  .vms-pill-explore .vms-arc-fill {
    z-index: 1;
    width: 520px;
    height: 520px;
    background: var(--cyan);
    transform: translate(-50%, -50%) translateY(340px);
    transition: transform .85s cubic-bezier(.65, 0, .35, 1);
  }
  
  .vms-pill-explore:hover .vms-arc-fill,
  .vms-pill-explore:focus-visible .vms-arc-fill,
  .vms-pill-explore:active .vms-arc-fill {
    transform: translate(-50%, -50%) translateY(36px);
  }
  
  /* The background stays active during hover; touch clicks play a short wave. */
  .vms-xentra {
    background: var(--bg);
    -webkit-mask-image: radial-gradient(ellipse 75% 90px at 50% calc(100% + 45px),
        transparent 0, transparent calc(100% - 1px), #000 100%);
    mask-image: radial-gradient(ellipse 75% 90px at 50% calc(100% + 45px),
        transparent 0, transparent calc(100% - 1px), #000 100%);
  }
  
  .vms-xentra::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(31, 48, 59, .18), transparent 70%),
      linear-gradient(180deg, var(--bg) 0%, #16212A 100%);
  }

  .vms-xentra.is-wave-active::before {
    animation: vms-xentra-wave 1.2s ease-out both;
  }

  .vms-xentra.is-wave-hover::before {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .vms-field select {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--white);
    font: inherit;
  }

  .vms-field select:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
  }

  @keyframes vms-xentra-wave {
    0% { opacity: 0; transform: translateY(28px); }
    30% { opacity: 1; transform: translateY(0); }
    65% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-12px); }
  }

  .vms-xentra::after {
    content: none;
  }
  
  .vms-xentra-curve {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    background: none;
  }
  
  /* Use the page colour for the curve; a cyan border creates a visible seam. */
  .vms-xentra-curve::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 44px;
    width: 150%;
    height: 180px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 0;
    background: var(--bg);
    box-shadow: none;
  }
  
  
  /* ================================================================
     KEY FEATURES
     ================================================================ */
  
  .vms-features {
    position: relative;
    z-index: 4;
    width: var(--page-w);
    max-width: var(--page-max);
    margin: -1px auto 0;
    background: transparent;
  }
  
  .vms-features-grid {
    margin-top: 54px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 32px;
  }
  
  .vms-feat-card {
    position: relative;
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
    text-align: center;
    border-radius: 14px;
  }
  
  .vms-feat-title,
  .vms-feat-desc {
    margin: 0;
    text-align: center;
    transition: opacity .25s ease, transform .25s ease;
  }
  
  .vms-feat-card .vms-feat-title {
    font-size: clamp(18px, 1.4vw, 25px);
    line-height: 1.25;
    font-weight: 600;
    color: #fff;
  }
  
  .vms-feat-card .vms-feat-desc {
    position: absolute;
    inset: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
    color: #fff;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
  }
  
  .vms-feat-card:hover .vms-feat-title,
  .vms-feat-card:focus-within .vms-feat-title {
    opacity: 0;
    transform: translateY(-6px);
  }
  
  .vms-feat-card:hover .vms-feat-desc,
  .vms-feat-card:focus-within .vms-feat-desc {
    opacity: 1;
    transform: translateY(0);
  }
  
  
  /* ================================================================
     FROM INVITATION TO DEPARTURE
     ================================================================ */
  
  .vms-how {
    width: var(--page-w);
    max-width: var(--page-max);
    margin: 64px auto 0;
  }
  
  .vms-how .vms-section-title {
    font-size: clamp(40px, 3.4vw, 48px);
    line-height: 1.06;
    text-shadow: 0 0 32px rgba(8, 208, 224, .24);
  }
  
  .vms-how-steps {
    position: relative;
    width: 100%;
    margin: 72px auto 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 18px;
  }
  
  .vms-how-steps::before {
    content: "";
    position: absolute;
    top: 46px;
    left: 8%;
    right: 8%;
    height: 3px;
    background: var(--cyan);
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(8, 208, 224, .42);
    z-index: 0;
  }
  
  .vms-how-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;
  }
  
  .vms-how-step::before {
    content: "";
    position: absolute;
    top: 46px;
    left: 50%;
    width: 3px;
    height: 42px;
    transform: translateX(-50%);
    background: var(--cyan);
    z-index: 0;
  }
  
  .vms-how-icon {
    position: relative;
    z-index: 2;
    width: 92px;
    height: 92px;
    flex: 0 0 92px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cyan);
    color: var(--navy);
    box-shadow: 0 0 0 1px rgba(8, 208, 224, .32), 0 0 22px rgba(8, 208, 224, .32),
      0 8px 18px rgba(0, 0, 0, .22);
  }
  
  .vms-how-icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--navy);
    stroke-width: 1.65;
  }
  
  .vms-how-num {
    position: relative;
    z-index: 3;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    margin-top: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cyan);
    color: var(--navy);
    font-size: 15px;
    line-height: 1;
    box-shadow: 0 0 14px rgba(8, 208, 224, .38), 0 5px 12px rgba(0, 0, 0, .18);
  }
  
  .vms-how-num::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -16px;
    width: 3px;
    height: 16px;
    transform: translateX(-50%);
    background: var(--cyan);
    box-shadow: 0 0 8px rgba(8, 208, 224, .4);
    z-index: -1;
  }
  
  .vms-how-step h3 {
    margin-top: 16px;
    color: var(--cyan);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  
  .vms-how-step p {
    width: 100%;
    max-width: 220px;
    margin-top: 10px;
    color: #e1e7ea;
    font-size: 14px;
    line-height: 1.42;
  }
  
  
  /* ================================================================
     WHO BENEFITS
     ================================================================ */
  
  .vms-benefits {
    width: var(--page-w);
    max-width: var(--page-max);
    margin: 56px auto 0;
  }
  
  .vms-benefits .vms-section-title,
  .vms-benefits .vms-section-kicker {
    font-size: 54px;
    line-height: 1.04;
    text-shadow: 0 0 36px rgba(8, 208, 224, .22);
  }
  
  .vms-benefits .vms-section-lead {
    margin-top: 14px;
    font-size: 22px;
  }
  
  .vms-benefits-panel {
    margin-top: 50px;
    height: 310px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 26px 20px;
    border-radius: 28px;
    border: 1px solid rgba(8, 208, 224, .4);
    box-shadow: 0 24px 56px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(180, 245, 250, .18),
      0 0 40px rgba(8, 208, 224, .1);
  }
  
  .vms-ben-col {
    position: relative;
    padding: 10px 22px;
  }
  
  .vms-ben-col:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 5%;
    bottom: 5%;
    right: 0;
    width: 1px;
    background: rgba(147, 197, 202, .50);
  }
  
  .vms-ben-col h3 {
    margin-bottom: 18px;
    font-size: 20px;
    font-weight: 700;
    color: var(--cyan);
  }
  
  .vms-ben-col ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .vms-ben-col li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 13px;
    color: #F1F3F5;
    font-size: 14px;
    line-height: 1.4;
  }
  
  .vms-ben-col li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(126, 184, 192, .42);
  }
  
  .vms-check {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    line-height: 0;
    color: var(--cyan);
  }
  
  .vms-check svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  .vms-check svg circle {
    fill: var(--cyan);
  }
  
  .vms-check svg path {
    stroke: var(--navy);
  }
  
  
  /* ================================================================
     CTA / CONTACT FORM
     ================================================================ */
  
  .vms-cta {
    width: var(--page-w);
    max-width: var(--page-max);
    margin: 72px auto 0;
  }
  
  #contact-form,
  #product-showcase,
  #xentra,
  .vms-security,
  .vms-features,
  .vms-how,
  .vms-cta {
    scroll-margin-top: clamp(96px, 14vw, 140px);
  }

  .vms-form-submit:disabled {
    opacity: .65;
    cursor: wait;
  }

  .vms-cta-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr);
    column-gap: 44px;
    align-items: start;
  }
  
  .vms-cta-left h2 {
    font-size: clamp(32px, 2.5vw, 38px);
    line-height: 1.15;
    font-weight: 700;
    color: #FFF;
  }
  
  .vms-cta-accent-line {
    width: 64px;
    height: 3px;
    margin: 25px 0;
    border-radius: 2px;
    background: var(--cyan);
    box-shadow: 0 0 12px rgba(8, 208, 224, .35);
  }
  
  .vms-cta-promise {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.45;
  }
  
  .vms-cta-promise strong {
    color: #FFF;
    font-weight: 600;
  }
  
  .vms-cta-copy {
    margin-top: 23px;
    max-width: 430px;
    color: var(--muted-2);
    font-size: 16px;
    line-height: 1.5;
  }
  
  .vms-cta-left .vms-btn {
    margin-top: 40px;
  }
  
  .vms-cta-divider {
    width: 2px;
    min-height: 290px;
    background: linear-gradient(180deg, transparent, rgba(8, 208, 224, .85), transparent);
    box-shadow: 0 0 12px rgba(8, 208, 224, .35);
  }
  
  .vms-cta-right h3 {
    margin-bottom: 27px;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;
  }
  
  .vms-contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .vms-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
  }
  
  .vms-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .vms-field span {
    font-size: 14px;
    color: #C0C8CD;
  }
  
  .vms-field input,
  .vms-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 15px;
    border: 1px solid rgba(8, 208, 224, .28);
    border-radius: 14px;
    outline: none;
    color: #FFF;
    background: radial-gradient(ellipse 80% 60% at 20% 100%, rgba(8, 208, 224, .1), transparent 55%),
      rgba(7, 24, 34, .55);
    box-shadow: inset 0 -1px 0 rgba(8, 208, 224, .25), 0 0 16px rgba(8, 208, 224, .04);
  }
  
  .vms-field input:focus,
  .vms-field textarea:focus {
    border-color: rgba(8, 208, 224, .65);
    box-shadow: 0 0 0 1px rgba(8, 208, 224, .25), 0 0 20px rgba(8, 208, 224, .12);
  }
  
  .vms-field textarea {
    min-height: 105px;
    resize: vertical;
  }
  
  .vms-form-submit {
    align-self: flex-start;
    min-width: 136px;
    height: 54px;
    margin-top: 4px;
  }
  
  .vms-form-status {
    min-height: 20px;
    font-size: 13px;
    color: var(--cyan);
  }
  
  
  /* ================================================================
     FOOTER
     ================================================================ */
  
  .vms-footer {
    width: var(--page-w);
    max-width: 1280px;
    margin: 56px auto 48px;
  }
  
  .vms-glass-card.vms-footer-card {
    display: flex;
    flex-direction: column;
    height: 330px;
    min-height: 330px;
    padding: 28px 4% 18px;
    overflow: hidden;
    border: 1px solid rgba(203, 220, 229, .46);
    border-radius: 48px;
    background: #091721;
    box-shadow: 0 0 24px rgba(155, 188, 204, .14), inset 0 0 28px rgba(0, 0, 0, .16);
  }
  
  .vms-footer-main {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 150px 130px;
    grid-template-rows: 68px 1fr;
    column-gap: 22px;
    row-gap: 16px;
    align-items: start;
  }
  
  .vms-footer-main>.vms-footer-logo {
    grid-column: 1;
    grid-row: 1;
    width: 120px;
    height: 60px;
  }
  
  .vms-footer-main>.vms-footer-addr:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  
  .vms-footer-main>.vms-footer-addr:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    max-width: 560px;
  }
  
  .vms-footer-main>.vms-footer-right {
    grid-column: 3;
    grid-row: 2;
  }
  
  .vms-footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }
  
  .vms-footer-label {
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
    color: #e5ebef;
  }
  
  .vms-footer-addr,
  .vms-footer-right a {
    font-size: 14px;
    line-height: 1.55;
    color: #e5ebef;
  }
  
  .vms-footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  
  .vms-footer-right a {
    max-width: 110px;
    font-weight: 600;
    transition: color .2s ease;
  }
  
  .vms-footer-right a:hover {
    color: var(--cyan);
  }
  
  .vms-footer-social {
    display: flex;
    gap: 20px;
  }
  
  .vms-footer-social a {
    display: grid;
    place-items: center;
    max-width: none;
    opacity: .92;
  }
  
  .vms-footer-social svg {
    width: 21px;
    height: 21px;
    fill: #FFF;
  }
  
  .vms-footer-rule {
    flex: 0 0 1px;
    width: 100%;
    background: rgba(226, 236, 241, .76);
  }
  
  .vms-footer-copy {
    flex: 0 0 auto;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    color: #e5ebef;
  }
  
  
  /* ================================================================
     LAPTOP  (1025px – 1200px)
     ================================================================ */
  
  @media (max-width: 1200px) {
    :root {
      --page-w: calc(100% - 64px);
      --page-max: 1120px;
    }
  
    .vms-nav-inner {
      min-height: 72px;
      padding: 0 22px 0 30px;
    }
  
    .vms-nav-links {
      gap: 20px;
    }
  
    .vms-nav-links a {
      font-size: 15px;
    }
  
    .vms-nav-cta .vms-pill-lg {
      width: 170px;
    }
  
    .vms-hero-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 40px;
    }
  
    .vms-hero-copy h1 span {
      white-space: normal;
    }
  
    .vms-gallery-shell {
      height: calc(var(--slide-w) * .6492 + 16px);
    }
  
    .vms-xentra {
      height: 440px;
      min-height: 440px;
    }
  
    .vms-pill-explore {
      top: 74%;
      width: 190px;
      height: 46px;
    }
  
    .vms-xentra-copy {
      font-size: clamp(16px, 1.6vw, 19px);
    }
  
    .vms-security {
      margin-top: 36px;
    }
  
    .vms-how {
      margin-top: 64px;
    }
  
    .vms-how-steps {
      margin-top: 100px;
    }
  
    .vms-cta {
      margin-top: 64px;
    }
  
    .vms-footer {
      margin-top: 52px;
    }
  
    .vms-footer-main {
      grid-template-columns: 140px minmax(0, 1fr) 150px;
      grid-template-rows: 64px 1fr;
      column-gap: 16px;
    }
  
    .vms-footer-main>.vms-footer-logo {
      width: 112px;
      height: 56px;
    }
  
    .vms-footer-main>.vms-footer-addr:nth-child(3) {
      max-width: 100%;
    }
  
    .vms-glass-card.vms-footer-card {
      border-radius: 40px;
    }
  }
  
  
  /* ================================================================
     iPAD / TABLET  (<= 1024px)
     - slider gap fix
     - Xentra block flows naturally (no absolute overlap / dead space)
     ================================================================ */
  
  @media (max-width: 1024px) {
    .vms-nav {
      top: 12px;
      margin-top: 12px;
    }
  
    .vms-nav-inner {
      min-height: 68px;
      padding: 0 20px 0 26px;
    }
  
    .vms-nav-links {
      gap: 14px;
    }
  
    .vms-nav-links a {
      font-size: 14px;
    }
  
    .vms-nav-cta .vms-pill-lg {
      width: 150px;
    }
  
    .vms-hero {
      padding-top: 52px;
    }
  
    .vms-hero-grid {
      gap: 28px;
    }
  
    .vms-hero-copy {
      padding-top: 24px;
    }
  
    .vms-hero-copy h1 {
      font-size: clamp(34px, 4vw, 42px);
    }
  
    .vms-hero-sub {
      font-size: 17px;
    }
  
    .vms-hero-copy .vms-btn-light {
      width: 150px;
      height: 48px;
      min-height: 48px;
    }
  
    /* ---------- SLIDER: only the active slide, no dead space ---------- */
    .vms-showcase {
      margin: 0 auto;
      padding: 28px 0 4px;
    }
  
    .vms-gallery-shell {
      --slide-w: min(600px, 72vw);
      height: calc(var(--slide-w) * .6492 + 12px);
    }
  
    .vms-gallery-slide.is-prev,
    .vms-gallery-slide.is-next,
    .vms-gallery-slide.is-prev-2,
    .vms-gallery-slide.is-next-2 {
      display: none;
    }
  
    .vms-gallery-prev {
      left: 12px;
    }
  
    .vms-gallery-next {
      right: 12px;
    }
  
    /* ---------- SECTIONS ---------- */
    .vms-security {
      margin-top: 36px;
    }
  
    .vms-security-intro h2 {
      font-size: clamp(34px, 4vw, 42px);
    }
  
    .vms-section-kicker,
    .vms-section-title {
      font-size: clamp(34px, 5vw, 44px);
    }
  
    /* ---------- XENTRA: natural flow ---------- */
    .vms-xentra-break {
      display: none;
    }
  
    .vms-xentra {
      height: auto;
      min-height: 0;
      margin-top: 0;
      padding: 36px 20px 88px;
    }
  
    .vms-xentra-watermark {
      top: 34%;
      font-size: clamp(90px, 24vw, 180px);
    }
  
    .vms-xentra-inner {
      position: relative;
      inset: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 720px;
      margin: 0 auto;
    }
  
    .vms-xentra-copy {
      position: static;
      transform: none;
      width: 100%;
      font-size: clamp(15px, 2.6vw, 18px);
      line-height: 1.4;
    }
  
    .vms-pill-explore {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      margin: 24px auto 0;
      width: 190px;
      height: 46px;
    }
  
    .vms-xentra {
      -webkit-mask-image: radial-gradient(ellipse 75% 90px at 50% calc(100% + 45px),
          transparent 0, transparent calc(100% - 1px), #000 100%);
      mask-image: radial-gradient(ellipse 75% 90px at 50% calc(100% + 45px),
          transparent 0, transparent calc(100% - 1px), #000 100%);
    }
  
    .vms-xentra-curve {
      height: 90px;
    }
  
    .vms-xentra-curve::before {
      top: 44px;
      height: 180px;
    }
  
    .vms-features {
      margin-top: 16px;
    }
  
    .vms-features-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      margin-top: 40px;
    }
  
    /* ---------- HOW IT WORKS: 3-column grid ---------- */
    .vms-how {
      margin-top: 56px;
    }
  
    .vms-how .vms-section-title {
      font-size: clamp(40px, 6vw, 52px);
    }
  
    .vms-how-steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      row-gap: 38px;
      margin-top: 48px;
    }
  
    .vms-how-steps::before,
    .vms-how-step::before {
      display: none;
    }
  
    .vms-how-icon {
      width: 80px;
      height: 80px;
      flex-basis: 80px;
    }
  
    .vms-how-icon svg {
      width: 34px;
      height: 34px;
    }
  
    .vms-how-num {
      width: 44px;
      height: 44px;
      flex-basis: 44px;
      font-size: 13px;
    }
  
    .vms-how-step h3 {
      font-size: 15px;
    }
  
    .vms-how-step p {
      font-size: 13px;
      max-width: 230px;
    }
  
    /* ---------- BENEFITS: 2 columns ---------- */
    .vms-benefits {
      margin-top: 52px;
    }
  
    .vms-benefits .vms-section-title,
    .vms-benefits .vms-section-kicker {
      font-size: clamp(36px, 5.5vw, 48px);
    }
  
    .vms-benefits .vms-section-lead {
      font-size: clamp(17px, 2.5vw, 20px);
    }
  
    .vms-benefits-panel {
      height: auto;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 26px 0;
      margin-top: 36px;
      padding: 22px 16px;
    }
  
    .vms-ben-col:nth-child(2n)::after {
      display: none;
    }
  
    /* ---------- CTA: stacked ---------- */
    .vms-cta {
      margin-top: 56px;
    }
  
    .vms-cta-layout {
      grid-template-columns: 1fr;
      row-gap: 34px;
    }
  
    .vms-cta-divider {
      width: 100%;
      min-height: 2px;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(8, 208, 224, .85), transparent);
    }
  }
  
  
  /* ================================================================
     MOBILE NAV + STACKED LAYOUT  (<= 900px)
     ================================================================ */
  
  @media (max-width: 900px) {
    .vms-nav {
      width: calc(100% - 24px);
      top: 10px;
      margin-top: 10px;
    }
  
    .vms-nav-inner {
      min-height: 62px;
      padding: 8px 12px 8px 16px;
      border-radius: 32px;
    }
  
    .vms-nav-logo {
      width: 92px;
      height: 42px;
    }
  
    .vms-nav-toggle {
      display: inline-flex;
    }
  
    /* Only ONE Contact Us: the one inside the dropdown */
    .vms-nav-cta {
      display: none !important;
    }
  
    .vms-nav-links {
      display: none;
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 3px;
      padding: 10px;
      border: 1px solid var(--card-border);
      border-radius: 18px;
      background: rgba(7, 19, 29, .97);
      box-shadow: 0 20px 45px rgba(0, 0, 0, .34);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
  
    .vms-nav.is-open .vms-nav-links {
      display: flex;
    }
  
    .vms-nav-links a {
      width: 100%;
      padding: 13px 15px;
      border-radius: 11px;
      font-size: 15px;
    }
  
    .vms-nav-links a:hover {
      background: rgba(8, 208, 224, .08);
    }
  
    body.vms-page .vms-nav-links a.vms-nav-cta-mobile {
      display: block !important;
      width: 100%;
      height: 48px;
      margin-top: 8px;
      padding: 0;
      border-radius: 24px;
    }
  
    /* Hero */
    :root {
      --page-w: calc(100% - 32px);
    }
  
    .vms-hero {
      padding-top: 48px;
    }
  
    .vms-hero-grid {
      grid-template-columns: 1fr;
      gap: 28px;
    }
  
    .vms-hero-copy {
      max-width: none;
      padding-top: 0;
      text-align: center;
    }
  
    .vms-hero-copy h1 {
      align-items: center;
      font-size: clamp(32px, 7vw, 38px);
    }
  
    .vms-hero-sub {
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
    }
  
    .vms-hero-shot {
      width: min(720px, 100%);
    }
  
    /* Gallery arrows smaller */
    .vms-gallery-nav {
      width: 42px;
      height: 42px;
    }
  
    .vms-gallery-nav svg {
      width: 16px;
      height: 16px;
    }
  
    .vms-gallery-prev {
      left: 10px;
    }
  
    .vms-gallery-next {
      right: 10px;
    }
  
    /* Security */
    .vms-security {
      margin-top: 32px;
    }
  
    .vms-security-intro {
      margin-bottom: 28px;
    }
  
    .vms-security-intro h2 {
      font-size: clamp(32px, 6.5vw, 38px);
    }
  
    .vms-security-intro p {
      font-size: 16px;
    }
  
    .vms-security-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  
    .vms-sec-card-wide {
      grid-column: auto;
    }
  
    .vms-sec-card {
      min-height: 0;
      padding: 18px;
      gap: 14px;
    }
  
    .vms-sec-card h3 {
      font-size: 18px;
    }
  
    .vms-sec-card p {
      font-size: 14px;
    }
  
    /* Features */
    .vms-features-grid {
      gap: 12px;
      margin-top: 32px;
    }
  
    .vms-feat-card {
      min-height: 64px;
      padding: 14px 16px;
    }
  
    .vms-feat-card .vms-feat-title {
      font-size: 16px;
    }
  
    /* HOW IT WORKS — stacked rows.
       The number badge is anchored to the icon's corner, so it can
       never clip off the left edge of the screen. */
    .vms-how {
      margin-top: 48px;
    }
  
    .vms-how-steps {
      display: flex;
      flex-direction: column;
      gap: 24px;
      margin-top: 40px;
    }
  
    .vms-how-step {
      --ic: 64px;
      display: grid;
      grid-template-columns: var(--ic) minmax(0, 1fr);
      grid-template-rows: auto 1fr;
      column-gap: 14px;
      row-gap: 4px;
      align-items: start;
      text-align: left;
      padding: 0;
    }
  
    .vms-how-icon {
      grid-column: 1;
      grid-row: 1 / span 2;
      width: var(--ic);
      height: var(--ic);
      flex: none;
    }
  
    .vms-how-icon svg {
      width: 28px;
      height: 28px;
    }
  
    .vms-how-num {
      position: absolute;
      left: calc(var(--ic) - 20px);
      top: calc(var(--ic) - 22px);
      width: 26px;
      height: 26px;
      margin: 0;
      flex: none;
      font-size: 10px;
    }
  
    .vms-how-step h3 {
      grid-column: 2;
      grid-row: 1;
      margin: 3px 0 0;
      font-size: 16px;
      white-space: normal;
    }
  
    .vms-how-step p {
      grid-column: 2;
      grid-row: 2;
      max-width: none;
      margin: 0;
      font-size: 14px;
      line-height: 1.42;
    }
  
    /* Benefits */
    .vms-benefits-panel {
      height: auto;
      grid-template-columns: 1fr;
      gap: 0;
      padding: 20px 16px;
    }
  
    .vms-ben-col {
      padding: 16px 12px;
    }
  
    .vms-ben-col:not(:last-child)::after,
    .vms-ben-col:nth-child(2n)::after {
      display: block;
      top: auto;
      bottom: 0;
      left: 8px;
      right: 8px;
      width: auto;
      height: 1px;
    }
  
    .vms-ben-col h3 {
      margin-bottom: 14px;
      font-size: 18px;
    }
  
    .vms-ben-col ul {
      gap: 10px;
    }
  
    .vms-ben-col li {
      font-size: 14px;
      padding-bottom: 10px;
    }
  
    /* CTA */
    .vms-cta {
      margin-top: 48px;
    }
  
    .vms-cta-left h2 {
      font-size: clamp(28px, 5vw, 34px);
    }
  
    .vms-cta-copy br {
      display: none;
    }
  
    .vms-cta-right h3 {
      font-size: 24px;
    }
  
    .vms-form-row {
      grid-template-columns: 1fr;
      gap: 14px;
    }
  
    /* Footer */
    .vms-footer {
      margin: 40px auto 24px;
    }
  
    .vms-glass-card.vms-footer-card {
      height: auto;
      min-height: 0;
      padding: 22px 18px 16px;
      border-radius: 24px;
    }
  
    .vms-footer-main {
      flex: 0 0 auto;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      gap: 14px;
    }
  
    .vms-footer-main>.vms-footer-logo,
    .vms-footer-main>.vms-footer-addr:nth-child(2),
    .vms-footer-main>.vms-footer-addr:nth-child(3),
    .vms-footer-main>.vms-footer-right {
      grid-column: 1;
      grid-row: auto;
    }
  
    .vms-footer-main>.vms-footer-logo {
      width: 108px;
      height: 54px;
    }
  
    .vms-footer-right {
      gap: 8px;
    }
  
    .vms-footer-right a {
      max-width: none;
      white-space: nowrap;
    }
  
    .vms-footer-rule {
      margin-top: 16px;
    }
  
    .vms-footer-copy {
      margin-top: 10px;
      font-size: 12px;
    }
  }
  
  
  /* ================================================================
     PHONE  (<= 600px)
     ================================================================ */
  
  @media (max-width: 600px) {
    :root {
      --page-w: calc(100% - 28px);
    }
  
    .vms-nav {
      width: calc(100% - 20px);
      top: 8px;
      margin-top: 8px;
    }
  
    .vms-nav-inner {
      min-height: 58px;
      border-radius: 29px;
      padding: 8px 10px 8px 14px;
    }
  
    .vms-nav-logo {
      width: 84px;
      height: 38px;
    }
  
    .vms-nav-toggle {
      width: 38px;
      height: 38px;
    }
  
    body.vms-page .vms-nav-links a.vms-nav-cta-mobile {
      height: 46px;
      border-radius: 23px;
    }
  
    .vms-hero {
      padding-top: 40px;
    }
  
    .vms-hero-grid {
      gap: 24px;
    }
  
    .vms-hero-copy h1 {
      font-size: 30px;
    }
  
    .vms-hero-sub {
      max-width: 330px;
      font-size: 15px;
      line-height: 1.4;
    }
  
    .vms-hero-copy .vms-btn-light {
      width: 142px;
      height: 44px;
      min-height: 44px;
      font-size: 14px;
    }
  
    .vms-showcase {
      padding: 20px 0 4px;
    }

    .vms-gallery-shell {
      --slide-w: min(520px, 88vw);
      height: calc(var(--slide-w) * .6492 + 10px);
    }
  
    .vms-gallery-nav {
      width: 36px;
      height: 36px;
    }
  
    .vms-gallery-nav svg {
      width: 15px;
      height: 15px;
    }
  
    .vms-gallery-prev {
      left: 5px;
    }
  
    .vms-gallery-next {
      right: 5px;
    }
  
    .vms-section-kicker,
    .vms-section-title {
      font-size: 30px;
      line-height: 1.1;
      letter-spacing: -.015em;
    }
  
    .vms-section-lead {
      margin-top: 9px;
      font-size: 16px;
      line-height: 1.35;
    }
  
    .vms-security-intro h2 {
      font-size: 30px;
    }
  
    .vms-security-intro p {
      font-size: 14px;
    }
  
    .vms-security-grid {
      gap: 12px;
    }
  
    .vms-sec-card {
      padding: 16px;
      gap: 12px;
      border-radius: 17px;
    }
  
    .vms-sec-icon {
      flex-basis: 38px;
      width: 38px;
      height: 38px;
    }
  
    .vms-sec-icon svg {
      width: 28px;
      height: 28px;
    }
  
    .vms-sec-card h3 {
      font-size: 17px;
    }
  
    .vms-sec-card p {
      margin-top: 5px;
      font-size: 13px;
    }
  
    /* Xentra */
    .vms-xentra {
      padding: 28px 16px 72px;
    }
  
    .vms-xentra-copy {
      font-size: 14px;
    }
  
    .vms-pill-explore {
      width: 180px;
      height: 44px;
      margin-top: 20px;
    }
  
    .vms-pill-explore .vms-pill-label {
      font-size: 14px;
    }
  
    .vms-xentra {
      -webkit-mask-image: radial-gradient(ellipse 75% 60px at 50% calc(100% + 30px),
          transparent 0, transparent calc(100% - 1px), #000 100%);
      mask-image: radial-gradient(ellipse 75% 60px at 50% calc(100% + 30px),
          transparent 0, transparent calc(100% - 1px), #000 100%);
    }
  
    .vms-xentra-curve {
      height: 70px;
    }
  
    .vms-xentra-curve::before {
      top: 39px;
      height: 120px;
    }
  
    /* Features */
    .vms-features {
      margin-top: 12px;
    }
  
    .vms-features-grid {
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 28px;
    }
  
    .vms-feat-card {
      min-height: 58px;
      padding: 12px 14px;
      border-radius: 15px;
    }
  
    .vms-feat-card .vms-feat-title {
      font-size: 16px;
    }
  
    .vms-feat-card .vms-feat-desc {
      inset: 12px 14px;
      font-size: 13px;
    }
  
    /* How it works */
    .vms-how {
      margin-top: 40px;
    }
  
    .vms-how .vms-section-title {
      font-size: 30px;
    }
  
    .vms-how-steps {
      margin-top: 30px;
      gap: 20px;
    }
  
    .vms-how-step {
      --ic: 56px;
      column-gap: 12px;
    }
  
    .vms-how-icon svg {
      width: 24px;
      height: 24px;
    }
  
    .vms-how-num {
      left: calc(var(--ic) - 18px);
      top: calc(var(--ic) - 20px);
      width: 24px;
      height: 24px;
      font-size: 9px;
    }
  
    .vms-how-step h3 {
      font-size: 15px;
    }
  
    .vms-how-step p {
      font-size: 13px;
    }
  
    /* Benefits */
    .vms-benefits {
      margin-top: 44px;
    }
  
    .vms-benefits .vms-section-title,
    .vms-benefits .vms-section-kicker {
      font-size: 30px;
    }
  
    .vms-benefits .vms-section-lead {
      font-size: 16px;
    }
  
    .vms-benefits-panel {
      margin-top: 28px;
      padding: 16px 12px;
      border-radius: 20px;
    }
  
    .vms-ben-col {
      padding: 14px 8px;
    }
  
    .vms-ben-col h3 {
      font-size: 17px;
    }
  
    .vms-ben-col li {
      font-size: 13px;
      gap: 10px;
    }
  
    .vms-check {
      flex-basis: 20px;
      width: 20px;
      height: 20px;
    }
  
    /* CTA */
    .vms-cta {
      margin-top: 40px;
    }
  
    .vms-cta-layout {
      row-gap: 26px;
    }
  
    .vms-cta-left h2 {
      font-size: 26px;
    }
  
    .vms-cta-accent-line {
      width: 48px;
      margin: 18px 0;
    }
  
    .vms-cta-promise,
    .vms-cta-copy {
      font-size: 14px;
    }
  
    .vms-cta-left .vms-btn {
      margin-top: 24px;
    }
  
    .vms-cta-right h3 {
      font-size: 22px;
      margin-bottom: 18px;
    }
  
    .vms-footer {
      width: calc(100% - 28px);
      margin-top: 40px;
    }
  
    .vms-glass-card.vms-footer-card {
      padding: 20px 16px 16px;
    }
  }

  /* ================================================================
     REDUCED MOTION
     ================================================================ */
  
  /* Coming soon toast (Pricing) */
  .vms-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 2000;
    padding: .85rem 1.25rem;
    color: #041018;
    font-family: 'Syne', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    border-radius: 999px;
    background: #08d0e0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35), 0 0 24px rgba(8, 208, 224, .28);
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
  }

  .vms-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    .vms-toast {
      transition: none !important;
    }
  
    *,
    *::before,
    *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
    }
  
    .vms-btn::after {
      transition: none;
    }
  
    .vms-btn:hover,
    .vms-btn:focus-visible {
      transform: none;
    }
  
    .vms-pill-light .vms-arc-primary {
      transform: translate(-50%, -50%) translateY(275px);
    }
  
    .vms-pill-light .vms-arc-secondary {
      transform: translate(-50%, -50%) translateY(280px);
    }
  
    .vms-pill-light:hover .vms-arc-primary,
    .vms-pill-light:focus-visible .vms-arc-primary {
      transform: translate(-50%, -50%) translateY(275px);
    }
  
    .vms-pill-light:hover .vms-arc-secondary,
    .vms-pill-light:focus-visible .vms-arc-secondary {
      transform: translate(-50%, -50%) translateY(280px);
    }
  }