/* Vextrix Landing — ink/volt (no blue/purple glass) */
.vx-landing {
  --bg: #f5f5f6;
  --panel: #ffffff;
  --card: #ffffff;
  --line: #e8e8ea;
  --blue: #e11d48;
  --blue-deep: #be123c;
  background: var(--bg);
  color: #171717;
  font-family: 'Manrope', system-ui, sans-serif;
}

body.vx-landing-body {
  background: #f5f5f6 !important;
  background-image: none !important;
  color: #171717;
}

.vx-section { padding: 5rem 0; }
@media (min-width: 1024px) { .vx-section { padding: 6.5rem 0; } }

.vx-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .vx-container { padding: 0 1.5rem; } }

.vx-h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.15;
}
.vx-lead { color: #6b7280; font-size: 1.05rem; line-height: 1.7; max-width: 40rem; }
.vx-eyebrow {
  color: #e11d48; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 12px; font-family: 'Sora', sans-serif;
}

.vx-glass {
  background: #ffffff;
  border: 1px solid #e8e8ea;
  border-radius: 24px;
  box-shadow: none;
}

.vx-eco-card {
  background: #ffffff;
  border: 1px solid #e8e8ea;
  border-radius: 18px;
  padding: 1.5rem;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.vx-eco-card:hover {
  border-color: #e11d48;
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #171717;
}
.vx-eco-icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: 11px;
  display: grid; place-items: center;
  background: #e11d48;
  color: #ffffff;
  box-shadow: none;
}

.vx-btn-blue {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: #e11d48; color: #ffffff; font-weight: 700; font-size: .9rem;
  border-radius: 0; padding: .85rem 1.5rem; border: 2px solid #e11d48;
  box-shadow: none; transition: .15s ease;
}
.vx-btn-blue:hover { background: #be123c; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #171717; }
.vx-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px solid #e8e8ea; color: #171717; font-weight: 600; font-size: .9rem;
  border-radius: 9999px; padding: .85rem 1.5rem; background: #f3f4f6;
  transition: .15s ease;
}
.vx-btn-outline:hover { border-color: #e11d48; color: #fff; }

.vx-ticker-wrap {
  border-block: 1px solid #e8e8ea;
  background: #ffffff;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.vx-ticker-track {
  display: flex; gap: 2.5rem; width: max-content;
  animation: vx-scroll 40s linear infinite;
  padding: .9rem 0;
}
@keyframes vx-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.vx-tab {
  border-radius: 9999px; padding: .45rem 1rem; font-size: .8rem; font-weight: 600;
  color: #6b7280; border: 1px solid transparent; transition: .15s;
}
.vx-tab:hover { color: #fff; }
.vx-tab.active {
  background: #e11d48; color: #ffffff; border-color: #e11d48;
}

.vx-spark { width: 88px; height: 28px; display: block; }

.vx-range {
  height: 4px; border-radius: 999px; background: #f3f4f6; position: relative; overflow: hidden;
}
.vx-range > i {
  position: absolute; inset: 0 auto 0 0; border-radius: inherit;
  background: #e11d48;
}

.vx-step { position: relative; text-align: center; }
.vx-step-icon {
  width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem;
  border-radius: 999px; display: grid; place-items: center;
  background: #e11d48; color: #ffffff;
  border: none;
}

.vx-stars { color: #fbbf24; letter-spacing: 1px; font-size: .85rem; }

.vx-faq-item {
  border: 1px solid #e8e8ea;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
}

.vx-cta-banner {
  position: relative; overflow: hidden; border-radius: 24px;
  border: none;
  background: #e11d48;
  color: #ffffff;
  box-shadow: none;
}
.vx-cta-banner .vx-btn-blue { background: #f5f5f6; color: #e11d48; border-color: #171717; }
.vx-cta-banner .vx-btn-outline { border-color: #171717; color: #171717; background: transparent; }

.vx-terminal-frame {
  background: #ffffff;
  border: 1px solid #e8e8ea;
  border-radius: 24px;
  box-shadow: none;
  overflow: hidden;
}
.vx-terminal-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .65rem .9rem; background: #f3f4f6; border-bottom: 1px solid #e8e8ea;
}
.vx-dot { width: .55rem; height: .55rem; border-radius: 999px; }
.vx-dot.r { background: #ff5c5c; }
.vx-dot.y { background: #fbbf24; }
.vx-dot.g { background: #4ade80; }

.vx-trust {
  filter: none; opacity: .7; font-weight: 800; letter-spacing: .04em;
  font-size: .8rem; color: #6b7280; text-transform: uppercase;
}

.vx-gradient-text { color: #e11d48; background: none; -webkit-text-fill-color: #e11d48; }

@media(prefers-reduced-motion:reduce) {
  .vx-ticker-track { animation: none; }
  .vx-landing-body * { transition: none !important; scroll-behavior: auto !important; }
}
