.cv-site-page {
  --cv-navy: #0b2135;
  --cv-blue: #2367c9;
  --cv-mint: #26b89a;
  --cv-amber: #f2a83b;
}

.cv-hero {
  background:
    radial-gradient(circle at 77% 18%, rgba(42, 186, 158, .28), transparent 31%),
    radial-gradient(circle at 37% 85%, rgba(242, 168, 59, .15), transparent 35%),
    linear-gradient(132deg, #071724 0%, #0d2a42 55%, #123652 100%);
}
.cv-hero .vc-eyebrow { color: #a7f3e4; }
.cv-hero .vc-eyebrow span { background: #42d7b8; }
.cv-hero h1 em { color: #62e0c5; }
.cv-waveCard { min-height: 310px; }
.cv-orbit { position: relative; width: 230px; height: 230px; }
.cv-orbitCore { position: absolute; inset: 56px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: linear-gradient(145deg, #28b99a, #2779c8); box-shadow: 0 18px 55px rgba(18,169,148,.35), inset 0 1px rgba(255,255,255,.35); }
.cv-orbitCore svg { width: 48px; height: 48px; fill: none; stroke: white; stroke-width: 1.7; }
.cv-orbit span { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(255,255,255,.13); color: #fff; font-size: 11px; font-weight: 800; backdrop-filter: blur(8px); box-shadow: 0 9px 25px rgba(0,0,0,.16); }
.cv-orbit span:nth-child(2) { top: -4px; left: 92px; }
.cv-orbit span:nth-child(3) { top: 12px; right: 24px; }
.cv-orbit span:nth-child(4) { top: 74px; right: -8px; }
.cv-orbit span:nth-child(5) { right: 1px; bottom: 39px; }
.cv-orbit span:nth-child(6) { left: 128px; bottom: -7px; }
.cv-orbit span:nth-child(7) { left: 56px; bottom: -7px; }
.cv-orbit span:nth-child(8) { left: 1px; bottom: 39px; }
.cv-orbit span:nth-child(9) { top: 74px; left: -8px; }
.cv-orbit span:nth-child(10) { top: 12px; left: 24px; }

.cv-form { grid-template-columns: 1.3fr .9fr; }
.cv-voicePanel { grid-column: 1 / -1; }
.cv-voiceGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.cv-voiceCard { position: relative; display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 12px; min-height: 90px; padding: 14px; border: 1px solid #dce4e7; border-radius: 16px; background: linear-gradient(145deg, #fff, #f9fbfb); cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s, background .2s; }
.cv-voiceCard:hover { transform: translateY(-2px); border-color: #a7cfc6; box-shadow: 0 13px 28px rgba(15,62,72,.09); }
.cv-voiceCard.is-selected { border-color: var(--cv-mint); background: linear-gradient(145deg, #f1fffb, #f5fbff); box-shadow: 0 0 0 3px rgba(38,184,154,.1), 0 13px 28px rgba(15,62,72,.09); }
.cv-voiceCard input { position: absolute; opacity: 0; pointer-events: none; }
.cv-avatar { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; background: var(--voice-color, #2cae97); color: #fff; font-size: 13px; font-weight: 900; box-shadow: 0 9px 20px color-mix(in srgb, var(--voice-color, #2cae97) 28%, transparent); }
.cv-voiceCopy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cv-voiceCopy strong { color: #193345; font-size: 14px; }
.cv-voiceCopy small { color: #667986; font-size: 11.5px; line-height: 1.4; }
.cv-native { align-self: start; padding: 4px 7px; border-radius: 999px; background: #eef3f4; color: #66757f; font-size: 9px; font-weight: 800; white-space: nowrap; }
.cv-voiceCard.is-selected .cv-native { background: #dff7f0; color: #14765f; }
.cv-allLanguages { display: flex; align-items: center; gap: 9px; margin-top: 17px; padding: 12px 14px; border-radius: 12px; background: #f3f7f8; color: #50636e; font-size: 12px; line-height: 1.5; }
.cv-allLanguages b { color: #173e45; }
.cv-allLanguages::before { content: "✓"; display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #d9f5ee; color: #137c63; font-weight: 900; }

.cv-directionField textarea { min-height: 104px; }
.cv-directionIdeas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.cv-directionIdeas button { padding: 7px 10px; border: 1px solid #d8e3e4; border-radius: 999px; background: #f8fbfb; color: #4f6972; font-size: 11px; font-weight: 700; cursor: pointer; }
.cv-directionIdeas button:hover { border-color: var(--cv-mint); color: #14725f; background: #effbf8; }
.cv-generate { margin-top: 22px; background: linear-gradient(135deg, #168e78, #2c71c7); color: #fff; box-shadow: 0 15px 32px rgba(32,135,131,.23); }
.cv-generate:hover:not(:disabled) { box-shadow: 0 19px 38px rgba(32,135,131,.3); }

.cv-voiceGuide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 980px; margin: 23px 0; }
.cv-voiceGuide div { padding: 17px; border: 1px solid #dce4e7; border-radius: 15px; background: #fff; }
.cv-voiceGuide b { display: block; margin-bottom: 5px; color: #1b3b4b; font-size: 13px; }
.cv-voiceGuide span { color: #697982; font-size: 12.5px; line-height: 1.5; }
.cv-content .vc-contentKicker { color: #62e0c5; }

@media (max-width: 900px) {
  .cv-form { grid-template-columns: 1fr; }
  .cv-voiceGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .cv-voiceGrid { grid-template-columns: 1fr; }
  .cv-voiceCard { grid-template-columns: 43px 1fr; }
  .cv-native { grid-column: 2; justify-self: start; }
  .cv-voiceGuide { grid-template-columns: 1fr; }
}