:root {
  --vx-bg:#f7f7f5;
  --vx-surface:#ffffff;
  --vx-dark:#0c0d0f;
  --vx-dark-soft:#15171a;
  --vx-text:#17181a;
  --vx-muted:#686b70;
  --vx-border:#dfded8;
  --vx-gold:#c5a15a;
  --vx-gold-dark:#a9843f;
  --vx-max:1180px;
  --vx-radius:5px;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:var(--vx-bg);
  color:var(--vx-text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

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

button,
a {
  -webkit-tap-highlight-color:transparent;
}

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

.vx-container {
  width:min(
    calc(100% - 40px),
    var(--vx-max)
  );
  margin-inline:auto;
}

.vx-skip {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:9999;
  background:#fff;
  border:1px solid var(--vx-gold);
  padding:10px 14px;
}

.vx-skip:focus {
  top:16px;
}

.vx-header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(247,247,245,.95);
  border-bottom:1px solid var(--vx-border);
  backdrop-filter:blur(12px);
}

.vx-header-inner {
  min-height:76px;
  display:flex;
  align-items:center;
  gap:28px;
}

.vx-brand {
  display:flex;
  align-items:center;
  width:132px;
}

.vx-brand img {
  width:132px;
  height:auto;
}

.vx-nav {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:26px;
  font-size:14px;
  font-weight:600;
}

.vx-nav a {
  color:#414348;
}

.vx-nav a:hover {
  color:var(--vx-dark);
}

.vx-header-actions {
  display:flex;
  gap:8px;
}

.vx-button,
.vx-link-button {
  min-height:42px;
  padding:0 17px;
  border-radius:var(--vx-radius);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  border:1px solid transparent;
  transition:
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}

.vx-button:hover {
  transform:translateY(-1px);
}

.vx-button-dark {
  color:#fff;
  background:var(--vx-dark);
  border-color:var(--vx-dark);
}

.vx-button-gold {
  background:var(--vx-gold);
  color:#17130c;
  border-color:var(--vx-gold);
}

.vx-button-gold:hover {
  background:var(--vx-gold-dark);
}

.vx-button-outline {
  border-color:#bcbab3;
  background:transparent;
}

.vx-button-outline-light {
  border-color:#64676d;
  color:#fff;
  background:transparent;
}

.vx-link-button {
  color:#35373b;
}

.vx-menu-toggle {
  display:none;
  width:42px;
  height:42px;
  padding:10px;
  border:1px solid var(--vx-border);
  background:transparent;
  border-radius:var(--vx-radius);
}

.vx-menu-toggle span {
  width:100%;
  height:1px;
  background:#17181a;
  display:block;
  margin:5px 0;
}

.vx-hero {
  padding:92px 0 88px;
  overflow:hidden;
}

.vx-hero-grid {
  display:grid;
  grid-template-columns:
    minmax(0,.88fr)
    minmax(540px,1.12fr);
  gap:64px;
  align-items:center;
}

.vx-eyebrow {
  margin:0 0 18px;
  color:#80652f;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:11px;
  font-weight:800;
}

.vx-eyebrow-light {
  color:#dbc184;
}

.vx-hero h1 {
  max-width:650px;
  margin:0;
  font-size:clamp(44px,5.5vw,74px);
  line-height:1.01;
  letter-spacing:-.052em;
  font-weight:750;
}

.vx-hero-lead {
  max-width:610px;
  margin:28px 0 0;
  font-size:18px;
  color:var(--vx-muted);
}

.vx-hero-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:34px;
}

.vx-trust-row {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:42px;
  color:#6b6d71;
  font-size:12px;
}

.vx-trust-row span {
  position:relative;
  padding-left:15px;
}

.vx-trust-row span::before {
  content:"";
  position:absolute;
  left:0;
  top:.58em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--vx-gold);
}

.vx-product-frame {
  background:#111317;
  border:1px solid #292b2f;
  border-radius:8px;
  overflow:hidden;
}

.vx-product-topbar {
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  border-bottom:1px solid #292b2f;
  color:#e9e9e6;
  font-size:12px;
}

.vx-product-topbar > div {
  display:flex;
  align-items:center;
  gap:9px;
}

.vx-product-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--vx-gold);
}

.vx-online {
  color:#a8abae;
}

.vx-product-body {
  display:grid;
  grid-template-columns:130px 1fr;
  min-height:400px;
}

.vx-product-nav {
  padding:22px 12px;
  border-right:1px solid #27292d;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.vx-product-nav span {
  color:#7f8388;
  border-radius:4px;
  padding:9px 10px;
  font-size:11px;
}

.vx-product-nav .active {
  color:#efe8da;
  background:#202126;
  border-left:2px solid var(--vx-gold);
}

.vx-product-main {
  padding:24px;
}

.vx-product-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  color:#ecece9;
}

.vx-product-heading div {
  display:flex;
  flex-direction:column;
  gap:3px;
}

.vx-product-heading small,
.vx-chart-copy small {
  color:#777b80;
}

.vx-product-heading > span {
  color:#777b80;
  font-size:11px;
}

.vx-metric-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:24px;
}

.vx-metric-grid article {
  border:1px solid #2e3034;
  border-radius:5px;
  padding:16px;
}

.vx-metric-grid span,
.vx-metric-grid small {
  color:#777b80;
  font-size:10px;
  display:block;
}

.vx-metric-grid strong {
  color:#f1f0ec;
  display:block;
  font-size:13px;
  margin:10px 0 4px;
}

.vx-chart-card {
  margin-top:10px;
  min-height:180px;
  border:1px solid #2e3034;
  border-radius:5px;
  padding:18px;
  display:grid;
  grid-template-columns:1fr 1.25fr;
  align-items:end;
  gap:18px;
}

.vx-chart-copy {
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:7px;
}

.vx-chart-copy strong {
  color:#f1f0ec;
  line-height:1.35;
  font-size:13px;
}

.vx-bars {
  height:118px;
  display:flex;
  gap:6px;
  align-items:flex-end;
}

.vx-bars i {
  flex:1;
  background:
    linear-gradient(
      180deg,
      #d5b66f,
      #957330
    );
  border-radius:2px 2px 0 0;
}

.vx-section {
  padding:104px 0;
  border-top:1px solid var(--vx-border);
}

.vx-section-head {
  max-width:720px;
  margin-bottom:50px;
}

.vx-section-head h2,
.vx-two-column h2,
.vx-security h2,
.vx-final-cta h2 {
  font-size:clamp(34px,4vw,52px);
  line-height:1.06;
  letter-spacing:-.04em;
  margin:0;
}

.vx-section-head > p:last-child,
.vx-two-column > div > p:last-child {
  color:var(--vx-muted);
  font-size:17px;
  max-width:650px;
  margin-top:20px;
}

.vx-feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--vx-border);
  border-left:1px solid var(--vx-border);
}

.vx-feature {
  padding:30px;
  min-height:220px;
  background:var(--vx-surface);
  border-right:1px solid var(--vx-border);
  border-bottom:1px solid var(--vx-border);
}

.vx-feature-index {
  font-size:11px;
  color:#9a7b3f;
}

.vx-feature h3 {
  margin:34px 0 10px;
  font-size:18px;
}

.vx-feature p,
.vx-big-card p {
  margin:0;
  color:var(--vx-muted);
  font-size:14px;
}

.vx-section-dark {
  background:var(--vx-dark);
  color:#fff;
  border-color:#25272b;
}

.vx-two-column {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:100px;
}

.vx-section-dark p {
  color:#94979c;
}

.vx-control-list {
  border-top:1px solid #33353a;
}

.vx-control-list article {
  display:grid;
  grid-template-columns:48px 1fr;
  gap:18px;
  padding:25px 0;
  border-bottom:1px solid #33353a;
}

.vx-control-list > article > strong {
  color:var(--vx-gold);
  font-size:12px;
}

.vx-control-list h3 {
  margin:0 0 5px;
  font-size:17px;
}

.vx-control-list p {
  margin:0;
  font-size:14px;
}

.vx-big-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.vx-big-card {
  min-height:260px;
  padding:30px;
  border:1px solid var(--vx-border);
  background:#fff;
  border-top:2px solid var(--vx-gold);
  border-radius:var(--vx-radius);
}

.vx-big-card > span {
  color:#9a7b3f;
  font-size:11px;
}

.vx-big-card h3 {
  margin:70px 0 10px;
  font-size:21px;
}

.vx-security {
  background:#f0efea;
}

.vx-security-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
}

.vx-security-points {
  display:grid;
  gap:0;
}

.vx-security-points p {
  margin:0;
  padding:22px 0;
  border-bottom:1px solid #d3d1c9;
  color:var(--vx-muted);
}

.vx-security-points strong {
  display:block;
  margin-bottom:5px;
  color:var(--vx-text);
}

.vx-final-cta {
  background:#111317;
  color:#fff;
  padding:90px 0;
}

.vx-final-inner {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
}

.vx-final-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.vx-footer {
  background:#090a0b;
  color:#8c8f94;
  border-top:1px solid #27292c;
  padding:28px 0;
}

.vx-footer-inner {
  display:flex;
  align-items:center;
  gap:26px;
  font-size:12px;
}

.vx-footer img {
  width:100px;
}

.vx-footer p {
  margin:0;
}

.vx-footer span {
  margin-left:auto;
}

:focus-visible {
  outline:2px solid var(--vx-gold);
  outline-offset:3px;
}

@media (max-width:980px) {

  .vx-menu-toggle {
    display:block;
    margin-left:auto;
  }

  .vx-header-actions {
    display:none;
  }

  .vx-nav {
    display:none;
    position:absolute;
    top:76px;
    left:20px;
    right:20px;
    background:#fff;
    border:1px solid var(--vx-border);
    padding:12px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }

  .vx-nav.open {
    display:flex;
  }

  .vx-nav a {
    padding:12px;
  }

  .vx-hero-grid {
    grid-template-columns:1fr;
  }

  .vx-product-frame {
    max-width:720px;
  }

  .vx-two-column,
  .vx-security-grid {
    grid-template-columns:1fr;
    gap:50px;
  }

}

@media (max-width:720px) {

  .vx-container {
    width:min(
      calc(100% - 28px),
      var(--vx-max)
    );
  }

  .vx-hero {
    padding:65px 0;
  }

  .vx-section {
    padding:72px 0;
  }

  .vx-feature-grid,
  .vx-big-grid {
    grid-template-columns:1fr;
  }

  .vx-product-body {
    grid-template-columns:1fr;
  }

  .vx-product-nav {
    display:none;
  }

  .vx-metric-grid {
    grid-template-columns:1fr;
  }

  .vx-chart-card {
    grid-template-columns:1fr;
  }

  .vx-final-inner,
  .vx-footer-inner {
    align-items:flex-start;
    flex-direction:column;
  }

  .vx-footer span {
    margin-left:0;
  }

}

@media (prefers-reduced-motion:reduce) {

  html {
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }

}
