:root {
  --vl-bg: #030816;
  --vl-card: rgba(9, 16, 40, 0.72);
  --vl-line: rgba(145, 70, 255, 0.55);
  --vl-purple: #8b35ff;
  --vl-blue: #2789ff;
  --vl-white: #fff;
  --vl-text: #dbe7ff;
  --vl-green: #51ffa8;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--vl-bg);
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--vl-white);
}
.vl-onboarding {
  background: radial-gradient(
    circle at 50% 0%,
    #10245e 0%,
    #030816 45%,
    #01030a 100%
  );
  overflow: hidden;
}
.vl-section {
  position: relative;
  padding: 96px 22px;
  background: radial-gradient(
      circle at 18% 15%,
      rgba(139, 53, 255, 0.22),
      transparent 34%
    ),
    radial-gradient(
      circle at 90% 35%,
      rgba(39, 137, 255, 0.18),
      transparent 35%
    ),
    linear-gradient(135deg, #020512 0%, #071433 55%, #020512 100%);
}
.vl-section:after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 150px;
  background: linear-gradient(to top, rgba(139, 53, 255, 0.12), transparent);
  pointer-events: none;
}
.vl-section-compact {
  padding-top: 76px;
  padding-bottom: 76px;
}
.vl-container {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.vl-center {
  text-align: center;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.vl-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}
.vl-hero {
  min-height: 760px;
  display: flex;
  align-items: center;
  background: linear-gradient(
      90deg,
      rgba(2, 5, 18, 0.98) 0%,
      rgba(3, 8, 22, 0.75) 42%,
      rgba(5, 20, 55, 0.3) 100%
    ),
    radial-gradient(circle at 70% 45%, rgba(39, 137, 255, 0.3), transparent 30%),
    radial-gradient(
      circle at 90% 70%,
      rgba(139, 53, 255, 0.24),
      transparent 35%
    ),
    linear-gradient(135deg, #020512, #071433);
}
.vl-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 42px;
  align-items: center;
}
.vl-brand {

  margin-bottom:30px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
}
.vl-brand-center {
  justify-content: center;
  margin-bottom: 20px;
}
.vl-logo {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--vl-purple), var(--vl-blue));
  font-weight: 900;
  box-shadow: 0 0 32px rgba(139, 53, 255, 0.55);
}
.vl-kicker {
  color: #a66bff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 14px;
  margin: 34px 0 16px;
}
.vl-onboarding h1,
.vl-onboarding h2,
.vl-onboarding h3,
.vl-onboarding p {
  margin-top: 0;
}
.vl-onboarding h1 {
  color: #fff;
  font-family: Syncopate, Arial, Helvetica, sans-serif;
  font-size: clamp(36px, 8vw, 62px);
  line-height: 0.95;
  letter-spacing: -0.06em;
  margin-bottom: 28px;
}
.vl-onboarding h2 {
  color: #fff;
  font-family: Syncopate, Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: clamp(28px, 6vw, 48px);
  line-height: 1.03;
  letter-spacing: -0.045em;
  margin-bottom: 22px;
}
.vl-onboarding h3 {
  color: #fff;
  font-family: Syncopate, Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.15;
  margin-bottom: 12px;
}
.vl-onboarding h1 span,
.vl-onboarding h2 span {
  background: linear-gradient(90deg, var(--vl-purple), var(--vl-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vl-lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--vl-text);
  max-width: 720px;
  margin-bottom: 34px;
}
.vl-text {
  font-size: 16px;
  line-height: 1.62;
  color: var(--vl-text);
}
.vl-sub {
  font-size: 20px;
  color: var(--vl-text);
  line-height: 1.5;
  margin-bottom: 34px;
}
.vl-big-text {
  font-size: 23px;
  line-height: 1.58;
  color: var(--vl-text);
}
.vl-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 28px;
}
.vl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 30px;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--vl-purple), var(--vl-blue));
  color: white;
  text-decoration: none;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 0 28px rgba(39, 137, 255, 0.35),
    0 0 22px rgba(139, 53, 255, 0.25);
  transition: 0.2s ease;
}
.vl-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
}
.vl-btn-ghost {
  background: rgba(8, 15, 38, 0.48);
  border: 1px solid var(--vl-line);
  box-shadow: none;
}
.vl-btn-small {
  min-height: 50px;
  width: 100%;
  padding: 0 18px;
  margin-top: auto;
}
.vl-city-card {
  min-height: 520px;
  border-radius: 32px;
  border: 1px solid rgba(139, 53, 255, 0.45);
  background: linear-gradient(
      to top,
      rgba(2, 5, 18, 0.95),
      rgba(7, 20, 51, 0.45)
    ),
    repeating-linear-gradient(
      90deg,
      rgba(39, 137, 255, 0.16) 0 1px,
      transparent 1px 90px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(139, 53, 255, 0.12) 0 1px,
      transparent 1px 72px
    );
  box-shadow: inset 0 0 70px rgba(39, 137, 255, 0.13),
    0 0 60px rgba(139, 53, 255, 0.15);
  position: relative;
  overflow: hidden;
}
.vl-city-card:before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 58%;
  background: linear-gradient(to top, rgba(139, 53, 255, 0.35), transparent 80%),
    linear-gradient(
      90deg,
      transparent 0 5%,
      rgba(39, 137, 255, 0.75) 5% 7%,
      transparent 7% 14%,
      rgba(139, 53, 255, 0.75) 14% 17%,
      transparent 17% 30%,
      rgba(39, 137, 255, 0.6) 30% 33%,
      transparent 33% 46%,
      rgba(139, 53, 255, 0.7) 46% 50%,
      transparent 50% 63%,
      rgba(39, 137, 255, 0.8) 63% 67%,
      transparent 67% 76%,
      rgba(139, 53, 255, 0.6) 76% 80%,
      transparent 80% 90%,
      rgba(39, 137, 255, 0.55) 90% 94%,
      transparent 94%
    );
  filter: drop-shadow(0 0 22px rgba(39, 137, 255, 0.55));
}
.vl-avatar {
  position: absolute;
  left: 52%;
  bottom: 12%;
  width: 82px;
  height: 210px;
  border-radius: 40px 40px 14px 14px;
  background: linear-gradient(#091328, #02040b);
  box-shadow: 0 0 28px rgba(39, 137, 255, 0.55);
}
.vl-avatar:before {
  content: "";
  position: absolute;
  top: -42px;
  left: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #071433;
  border: 2px solid rgba(39, 137, 255, 0.65);
}
.vl-holo {
  position: absolute;
  padding: 12px 16px;
  border: 1px solid rgba(139, 53, 255, 0.7);
  border-radius: 12px;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 900;
  background: rgba(8, 15, 38, 0.62);
  box-shadow: 0 0 22px rgba(139, 53, 255, 0.3);
}
.vl-holo-1 {
  right: 12%;
  top: 20%;
}
.vl-holo-2 {
  left: 14%;
  bottom: 24%;
}
.vl-holo-3 {
  right: 8%;
  bottom: 35%;
}
.vl-reward-panel,
.vl-highlight,
.vl-mission-box,
.vl-rule,
.vl-final-card {
  border: 1px solid var(--vl-line);
  border-radius: 30px;
  background: linear-gradient(
    135deg,
    rgba(9, 16, 40, 0.88),
    rgba(7, 20, 51, 0.58)
  );
  padding: 42px;
  box-shadow: 0 0 55px rgba(139, 53, 255, 0.16),
    inset 0 0 45px rgba(39, 137, 255, 0.08);
}
.vl-coin {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 26px;
  font-size: 64px;
  font-weight: 900;
  background: radial-gradient(
    circle at 35% 25%,
    #fff 0%,
    #8b35ff 18%,
    #092463 68%,
    #020512 100%
  );
  border: 2px solid rgba(139, 53, 255, 0.9);
  box-shadow: 0 0 44px rgba(139, 53, 255, 0.45);
}
.vl-xon {
  background: radial-gradient(
    circle at 35% 25%,
    #fff 0%,
    #2789ff 18%,
    #092463 68%,
    #020512 100%
  );
}
.vl-mini-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 26px;
}
.vl-mini-steps span {
  border: 1px solid rgba(139, 53, 255, 0.45);
  border-radius: 13px;
  padding: 13px;
  text-align: center;
  color: var(--vl-text);
  font-weight: 700;
}
.vl-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 42px;
}
.vl-card {
  position: relative;
  min-height: 430px;
  border: 1px solid var(--vl-line);
  border-radius: 22px;
  background: var(--vl-card);
  padding: 28px;
  box-shadow: 0 0 36px rgba(39, 137, 255, 0.14);
  display: flex;
  flex-direction: column;
}
.vl-card-small {
  min-height: 320px;
}
.vl-card p {
  color: var(--vl-text);
  line-height: 1.5;
  font-size: 16px;
}
.vl-number {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--vl-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #d8c8ff;
}
.vl-icon {
  font-size: 58px;
  margin: 34px 0 26px;
  filter: drop-shadow(0 0 18px rgba(139, 53, 255, 0.42));
}
.vl-green {
  color: var(--vl-green);
}
.vl-highlight {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 32px;
  align-items: center;
}
.vl-highlight-cta {
  border-left: 1px solid rgba(139, 53, 255, 0.45);
  padding-left: 32px;
}
.vl-build-list {
  display: grid;
  gap: 14px;
}
.vl-build-list div {
  padding: 18px 20px;
  border: 1px solid rgba(139, 53, 255, 0.35);
  border-radius: 17px;
  background: rgba(9, 16, 40, 0.68);
}
.vl-build-list strong {
  display: block;
  font-size: 21px;
  color: #a66bff;
  margin-bottom: 6px;
}
.vl-build-list span {
  color: var(--vl-text);
  line-height: 1.4;
}
.vl-mission-box {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px;
  align-items: center;
}
.vl-mission-visual {
  height: 420px;
  border-radius: 24px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(139, 53, 255, 0.72),
    rgba(39, 137, 255, 0.22),
    transparent 62%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 150px;
  font-weight: 900;
  color: white;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.45);
}
.vl-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 15px;
}
.vl-checklist li {
  font-size: 22px;
  color: var(--vl-text);
}
.vl-checklist li:before {
  content: "✓";
  display: inline-flex;
  width: 32px;
  height: 32px;
  margin-right: 14px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(139, 53, 255, 0.18);
  border: 1px solid var(--vl-line);
  color: #b875ff;
}
.vl-rule {
  text-align: center;
}
.vl-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  max-width: 850px;
  margin: 35px auto 0;
}
.vl-rule-grid > div {
  padding: 32px;
  border: 1px solid rgba(139, 53, 255, 0.38);
  border-radius: 24px;
  background: rgba(9, 16, 40, 0.52);
}
.vl-rule-grid .vl-coin {
  margin-left: auto;
  margin-right: auto;
}
.vl-final {
  min-height: 620px;
  display: flex;
  align-items: center;
}
.vl-final-card {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.vl-final-card h2 {
  font-size: clamp(32px, 8vw, 76px);
}
@media (max-width: 1000px) {
  .vl-hero-grid,
  .vl-two-col,
  .vl-highlight,
  .vl-mission-box {
    grid-template-columns: 1fr;
  }
  .vl-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .vl-highlight-cta {
    border-left: 0;
    border-top: 1px solid rgba(139, 53, 255, 0.45);
    padding-left: 0;
    padding-top: 28px;
  }
}
@media (max-width: 640px) {
  .vl-section {
    padding: 64px 16px;
  }
  .vl-card-grid,
  .vl-rule-grid,
  .vl-mini-steps {
    grid-template-columns: 1fr;
  }
  .vl-card {
    min-height: auto;
    padding: 24px;
  }
  .vl-city-card,
  .vl-mission-visual {
    min-height: 320px;
    height: 320px;
  }
  .vl-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .vl-btn {
    width: 100%;
    text-align: center;
  }
  .vl-reward-panel,
  .vl-highlight,
  .vl-mission-box,
  .vl-rule,
  .vl-final-card {
    padding: 24px;
  }
  .vl-rule-grid > div {
    padding: 20px;
  }
}