.vd-site-page {
  --vd-violet: #7456e8;
  --vd-violet-dark: #4c36ad;
  --vd-lilac: #eeeaff;
}

.vd-hero {
  background:
    radial-gradient(circle at 72% 22%, rgba(129,91,238,.28), transparent 34%),
    radial-gradient(circle at 34% 80%, rgba(49,214,178,.13), transparent 35%),
    linear-gradient(132deg, #091724 0%, #172249 58%, #25174d 100%);
}

.vd-hero .vc-eyebrow { color: #d9d0ff; }
.vd-hero .vc-eyebrow span { background: #a893ff; }
.vd-hero h1 em { color: #b5a4ff; }
.vd-waveCard { min-height: 300px; }
.vd-chatOrb { position: relative; display: grid; grid-template-columns: repeat(3, 9px); place-content: center; gap: 8px; width: 178px; height: 148px; border: 1px solid rgba(255,255,255,.2); border-radius: 48px; background: linear-gradient(145deg, rgba(126,91,236,.93), rgba(63,204,184,.75)); box-shadow: 0 28px 75px rgba(62,41,140,.35), inset 0 1px rgba(255,255,255,.28); transform: rotate(-4deg); }
.vd-chatOrb::after { content: ""; position: absolute; left: 32px; bottom: -22px; border-width: 24px 25px 0 0; border-style: solid; border-color: rgba(88,181,196,.88) transparent transparent transparent; transform: rotate(8deg); }
.vd-chatOrb span { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 15px rgba(255,255,255,.65); animation: vdDot 1.7s infinite ease-in-out; }
.vd-chatOrb span:nth-child(2) { animation-delay: .2s; }
.vd-chatOrb span:nth-child(3) { animation-delay: .4s; }
.vd-chatOrb svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255,255,255,.38); stroke-width: .7; }
.vd-waveCard .vc-wave i { background: linear-gradient(to top, rgba(117,87,232,.35), #ae9cff); }

.vd-commandBanner { display: flex; grid-column: 1 / -1; align-items: center; gap: 17px; padding: 21px 24px; border: 1px solid #d9d1fb; border-radius: 19px; background: linear-gradient(120deg, #f4f1ff, #f5fffc); box-shadow: 0 14px 38px rgba(68,49,135,.07); }
.vd-commandIcon { display: grid; place-items: center; flex: 0 0 auto; width: 47px; height: 47px; border-radius: 15px; background: var(--vd-violet); color: #fff; font-size: 22px; box-shadow: 0 10px 28px rgba(116,86,232,.22); }
.vd-commandBanner > div { display: flex; flex-direction: column; gap: 3px; }
.vd-commandBanner > div span { color: var(--vd-violet-dark); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.vd-commandBanner > div strong { color: #262044; font-size: 16px; }

.vd-chatField textarea { min-height: 185px; border-color: #d4cbee; background: linear-gradient(145deg, #fcfbff, #fafcfc); }
.vd-chatField textarea:focus { border-color: var(--vd-violet); box-shadow: 0 0 0 4px rgba(116,86,232,.11); }
.vd-ideas { margin-top: 22px; }
.vd-ideas > span { display: block; margin-bottom: 9px; color: #4b4760; font-size: 12px; font-weight: 800; }
.vd-ideaButtons { display: flex; flex-wrap: wrap; gap: 8px; }
.vd-ideaButtons button { padding: 8px 11px; border: 1px solid #d8d1ef; border-radius: 999px; background: #faf8ff; color: #554877; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: border .2s, color .2s, background .2s, transform .2s; }
.vd-ideaButtons button:hover { border-color: var(--vd-violet); background: #f0ecff; color: var(--vd-violet-dark); transform: translateY(-1px); }
.vd-promptTip { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; padding: 14px; border-radius: 13px; background: #f5f7f8; color: #6c7680; font-size: 11px; }
.vd-promptTip strong { flex-basis: 100%; color: #34434d; font-family: inherit; }
.vd-promptTip span { padding: 4px 7px; border-radius: 7px; background: #fff; border: 1px solid #e2e8ea; }
.vd-generate { margin-top: 23px; background: linear-gradient(135deg, var(--vd-violet), #9680f1); color: #fff; box-shadow: 0 15px 32px rgba(116,86,232,.22); }
.vd-generate:hover:not(:disabled) { box-shadow: 0 19px 38px rgba(116,86,232,.3); }

.vd-styleGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; max-width: 920px; margin: 23px 0; }
.vd-styleGrid > span { display: flex; flex-direction: column; gap: 5px; padding: 17px 18px; border: 1px solid #ddd8ef; border-radius: 15px; background: linear-gradient(145deg, #fbfaff, #fff); color: #68717d; font-size: 13px; line-height: 1.55; }
.vd-styleGrid b { color: #392f62; font-size: 13px; }
.vd-content .vc-contentKicker { color: #b5a4ff; }

@keyframes vdDot {
  0%, 65%, 100% { transform: translateY(0); opacity: .55; }
  32% { transform: translateY(-8px); opacity: 1; }
}

@media (max-width: 700px) {
  .vd-commandBanner { align-items: flex-start; padding: 18px; }
  .vd-commandBanner > div strong { font-size: 14px; line-height: 1.45; }
  .vd-styleGrid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .vd-chatOrb span { animation: none; }
}