:root {
                  --bg1: #0b0614;
                  --bg2: #120624;
                  --card1: #4a0d8c;
                  --card2: #2a0066;
                  --accent: #a855f7;
                  --accent2: #c084fc;
                  --text: #ffffff;
                  --muted: #d6d6d6;
                  --soft: rgba(255, 255, 255, .08);
                  --border: rgba(168, 85, 247, .25);
            }

            * {
                  box-sizing: border-box
            }

            body {
                  margin: 0;
                  font-family: Arial, sans-serif;
                  color: var(--text);
                  background: radial-gradient(1200px 500px at 50% 0%, rgba(168, 85, 247, .18), transparent 55%),
                        linear-gradient(180deg, var(--bg2), var(--bg1));
                  min-height: 100vh;
            }

            .wrap {
                  width: 90%;
                  max-width: 1100px;
                  margin: 34px auto 60px;
            }

            .hero {
                  padding: 42px 28px;
                  border-radius: 18px;
                  background: linear-gradient(135deg, rgba(74, 13, 140, .55), rgba(42, 0, 102, .55));
                  border: 1px solid var(--border);
                  box-shadow: 0 12px 40px rgba(106, 13, 221, .25);
                  position: relative;
                  overflow: hidden;
            }

            .hero::after {
                  content: "";
                  position: absolute;
                  inset: -80px -120px auto auto;
                  width: 260px;
                  height: 260px;
                  border-radius: 50%;
                  background: radial-gradient(circle, rgba(192, 132, 252, .30), transparent 60%);
                  filter: blur(2px);
            }

            .hero h1 {
                  margin: 0 0 10px;
                  font-size: 44px;
                  letter-spacing: .2px;
            }

            .hero p {
                  margin: 0;
                  color: var(--muted);
                  line-height: 1.8;
                  max-width: 800px;
                  font-size: 16px;
            }

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

            .btn {
                  display: inline-block;
                  padding: 10px 14px;
                  border-radius: 10px;
                  text-decoration: none;
                  font-size: 14px;
                  transition: .2s;
                  border: 1px solid rgba(255, 255, 255, .12);
            }

            .btn.primary {
                  background: var(--accent);
                  color: #fff;
                  border-color: transparent;
            }

            .btn.primary:hover {
                  background: var(--accent2)
            }

            .btn.ghost {
                  background: transparent;
                  color: #fff;
            }

            .btn.ghost:hover {
                  border-color: rgba(192, 132, 252, .7);
                  transform: translateY(-1px);
            }

            .section-title {
                  margin: 34px 0 14px;
                  font-size: 22px;
                  color: #e9d7ff;
            }

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

            .card {
                  padding: 18px 16px;
                  border-radius: 16px;
                  background: rgba(255, 255, 255, .06);
                  border: 1px solid rgba(255, 255, 255, .08);
                  box-shadow: 0 10px 30px rgba(0, 0, 0, .20);
                  transition: .25s;
            }

            .card:hover {
                  transform: translateY(-6px);
                  border-color: rgba(168, 85, 247, .55);
            }

            .badge {
                  display: inline-block;
                  font-size: 12px;
                  padding: 6px 10px;
                  border-radius: 999px;
                  background: rgba(168, 85, 247, .14);
                  border: 1px solid rgba(168, 85, 247, .25);
                  color: #f0d8ff;
                  margin-bottom: 10px;
            }

            .card h3 {
                  margin: 0 0 8px;
                  font-size: 18px;
                  color: #fff;
            }

            .card p {
                  margin: 0;
                  color: var(--muted);
                  line-height: 1.7;
                  font-size: 14px;
            }

            .roadmap {
                  display: grid;
                  grid-template-columns: 1.2fr .8fr;
                  gap: 16px;
                  align-items: stretch;
            }

            .steps {
                  background: linear-gradient(135deg, rgba(74, 13, 140, .28), rgba(42, 0, 102, .28));
                  border: 1px solid var(--border);
                  border-radius: 16px;
                  padding: 18px 16px;
            }

            .step {
                  display: flex;
                  gap: 12px;
                  padding: 12px 0;
                  border-bottom: 1px solid rgba(255, 255, 255, .07);
            }

            .step:last-child {
                  border-bottom: none
            }

            .num {
                  width: 28px;
                  height: 28px;
                  border-radius: 10px;
                  display: grid;
                  place-items: center;
                  background: rgba(168, 85, 247, .18);
                  border: 1px solid rgba(168, 85, 247, .35);
                  color: #fff;
                  font-weight: 700;
                  flex: 0 0 auto;
            }

            .step b {
                  display: block;
                  margin-bottom: 4px
            }

            .step span {
                  color: var(--muted);
                  font-size: 14px;
                  line-height: 1.6
            }

            .faq {
                  background: rgba(255, 255, 255, .06);
                  border: 1px solid rgba(255, 255, 255, .08);
                  border-radius: 16px;
                  padding: 18px 16px;
            }

            .q {
                  cursor: pointer;
                  padding: 12px 10px;
                  border-radius: 12px;
                  border: 1px solid rgba(255, 255, 255, .08);
                  margin-bottom: 10px;
                  background: rgba(0, 0, 0, .12);
            }

            .q:hover {
                  border-color: rgba(168, 85, 247, .55)
            }

            .q .head {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  gap: 10px;
                  font-weight: 700;
            }

            .q .ans {
                  margin-top: 8px;
                  color: var(--muted);
                  line-height: 1.7;
                  font-size: 14px;
                  display: none;
            }

            .q.open .ans {
                  display: block
            }

            .arrow {
                  opacity: .9
            }

            @media (max-width: 950px) {
                  .grid {
                        grid-template-columns: 1fr
                  }

                  .roadmap {
                        grid-template-columns: 1fr
                  }

                  .hero h1 {
                        font-size: 38px
                  }
            }

            @media (max-width: 520px) {
                  .hero {
                        padding: 34px 18px
                  }

                  .hero h1 {
                        font-size: 32px
                  }
            }