/* ============================================================
   sales-orb.css — Solutions Expert floating sales experience
   Inherits the NAS service-cloud design language:
   navy #0B1E3F · blue #1E63E9 · mint #5EEAD4 · coral #FF6B35
   Self-contained, namespaced under .so-* to avoid collisions.
   ============================================================ */

.so-root {
  --so-navy: #0B1E3F;
  --so-navy-2: #0F2A55;
  --so-navy-3: #1648A6;
  --so-blue: #1E63E9;
  --so-blue-2: #4F8BFF;
  --so-mint: #5EEAD4;
  --so-coral: #FF6B35;
  --so-line: rgba(255, 255, 255, .12);
  --so-line-strong: rgba(255, 255, 255, .22);
  --so-mute: rgba(255, 255, 255, .66);
  --so-text: #F4F7FE;

  --so-ease-spring: cubic-bezier(.16, 1, .3, 1);
  --so-ease-out: cubic-bezier(.22, .61, .36, 1);

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--so-text);
}

/* Hide service of the sr-only kind for a11y messaging */
.so-root .so-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* ============================================================
   ORB · floating premium capsule
   ============================================================ */

.so-orb {
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 8500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  background: #1D3FB0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08) inset,
    0 16px 38px -16px rgba(11, 30, 63, .45),
    0 8px 22px -10px rgba(29, 63, 176, .55);
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 720ms var(--so-ease-spring),
    opacity 520ms var(--so-ease-out),
    box-shadow 320ms var(--so-ease-out),
    border-color 220ms var(--so-ease-out),
    padding 480ms var(--so-ease-spring),
    width 480ms var(--so-ease-spring);
  font-family: inherit;
  color: var(--c-white);
  -webkit-tap-highlight-color: transparent;
  animation: soFloat 6.4s ease-in-out infinite;
}

.so-orb.is-ready {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.so-orb.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(40px) scale(.92);
}

@keyframes soFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .so-orb { animation: none; }
}

/* Ambient lights under the orb — softer for light glass */
.so-orb-lights {
  position: absolute;
  inset: -80%;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(closest-side, rgba(255, 107, 53, .35), transparent 65%) 70% 25% / 55% 65% no-repeat,
    radial-gradient(closest-side, rgba(30, 99, 233, .32), transparent 65%) 25% 80% / 65% 75% no-repeat;
  filter: blur(34px);
  opacity: .55;
  animation: soDrift 9s ease-in-out infinite;
}

@keyframes soDrift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-6px, 4px); }
}

/* Mouse-reactive sheen */
.so-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(180px circle at var(--so-mx, 70%) var(--so-my, 30%),
    rgba(255, 255, 255, .18),
    transparent 60%);
  opacity: 0;
  transition: opacity 360ms var(--so-ease-out);
}

.so-orb:hover::before,
.so-orb:focus-visible::before { opacity: 1; }

.so-orb:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .28);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .14) inset,
    0 22px 48px -18px rgba(11, 30, 63, .55),
    0 12px 28px -10px rgba(29, 63, 176, .65);
}

.so-orb:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .14) inset,
    0 0 0 3px rgba(94, 234, 212, .55),
    0 22px 48px -18px rgba(11, 30, 63, .55);
}

/* Avatar bead — call-center agent photo */
.so-bead {
  --so-grad: linear-gradient(135deg, #FF6B35 0%, #1E63E9 100%);
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background:
    url('../img/call-center-agent.jpg') center / cover no-repeat,
    var(--so-grad);
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 2px var(--c-white) inset,
    0 0 0 1px rgba(11, 30, 63, .08),
    0 6px 14px -6px rgba(30, 99, 233, .35),
    0 2px 6px -2px rgba(11, 30, 63, .2);
  overflow: visible;
}

/* Hide initial fallback inside the bead (image is used) */
.so-bead .so-bead-initial { display: none; }

@keyframes soSpin { to { transform: rotate(360deg); } }

.so-bead-initial {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-white);
  letter-spacing: -.02em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(11, 30, 63, .3);
}

/* Online dot — sized for the smaller bead, light-bg ready */
.so-online {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 0 2px var(--c-white), 0 0 8px rgba(52, 211, 153, .65);
}

.so-online::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(52, 211, 153, .5);
  animation: soPing 1.8s ease-out infinite;
  z-index: -1;
}

@keyframes soPing {
  0%   { transform: scale(.8); opacity: .9; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* Orb text */
.so-orb-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding-right: 2px;
  white-space: nowrap;
}

.so-orb-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  color: var(--c-white);
}

.so-orb-sub {
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .78);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
  margin-top: 1px;
}

.so-orb-sub::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 6px rgba(52, 211, 153, .8);
  flex-shrink: 0;
}

/* Compact mode (post-engagement / mobile) */
.so-orb.is-compact {
  padding: 8px;
}
.so-orb.is-compact .so-orb-text {
  max-width: 0;
  opacity: 0;
  margin: 0;
  overflow: hidden;
  transition: max-width 380ms var(--so-ease-spring), opacity 220ms var(--so-ease-out);
}

.so-orb-text {
  max-width: 200px;
  opacity: 1;
  transition: max-width 380ms var(--so-ease-spring), opacity 320ms var(--so-ease-out);
}

/* Smart-trigger hint pulse */
.so-orb.is-hint {
  border-color: rgba(94, 234, 212, .55);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .14) inset,
    0 22px 48px -18px rgba(11, 30, 63, .55),
    0 0 0 6px rgba(94, 234, 212, .18),
    0 0 0 14px rgba(94, 234, 212, .08);
}

/* ============================================================
   BACKDROP
   ============================================================ */

.so-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background:
    radial-gradient(800px circle at calc(100% - 240px) 60%, rgba(30, 99, 233, .18), transparent 70%),
    rgba(8, 18, 38, .42);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms var(--so-ease-out);
}

.so-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   PANEL · side conversational experience
   ============================================================ */

.so-panel {
  position: fixed;
  top: clamp(20px, 3vw, 32px);
  right: clamp(18px, 2.6vw, 32px);
  bottom: clamp(20px, 3vw, 32px);
  width: clamp(360px, 36vw, 460px);
  z-index: 9100;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg,
    rgba(11, 30, 63, .96) 0%,
    rgba(15, 42, 85, .94) 55%,
    rgba(22, 72, 166, .88) 130%);
  border: 1px solid var(--so-line-strong);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  color: var(--so-text);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 48px 100px -40px rgba(8, 18, 38, .8),
    0 18px 60px -20px rgba(30, 99, 233, .35);

  transform: translateX(calc(100% + 60px)) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 640ms var(--so-ease-spring),
    opacity 360ms var(--so-ease-out);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.so-panel.is-open {
  transform: translateX(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Mesh gradient + drift lights */
.so-panel-lights {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(closest-side, rgba(255, 107, 53, .35), transparent 60%) 85% 8% / 60% 60% no-repeat,
    radial-gradient(closest-side, rgba(79, 139, 255, .35), transparent 60%) 8% 92% / 70% 70% no-repeat,
    radial-gradient(closest-side, rgba(94, 234, 212, .22), transparent 60%) 80% 70% / 50% 50% no-repeat;
  filter: blur(55px);
  animation: soDrift2 14s ease-in-out infinite;
}

@keyframes soDrift2 {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(-18px, 12px); }
  66%      { transform: translate(14px, -10px); }
}

/* Grid lines like the bg-blueprint */
.so-panel-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 25%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 25%, black 30%, transparent 100%);
}

/* Particles */
.so-panel-particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.so-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(94, 234, 212, .55);
  box-shadow: 0 0 8px rgba(94, 234, 212, .55);
  animation: soRise 16s linear infinite;
  opacity: 0;
}

@keyframes soRise {
  0%   { transform: translate3d(0, 20px, 0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate3d(0, -100vh, 0); opacity: 0; }
}

/* ============== HEAD ============== */
.so-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--so-line);
}

.so-avatar {
  --so-grad: linear-gradient(135deg, #FF6B35 0%, #1E63E9 100%);
  position: relative;
  width: 52px; height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  background:
    url('../img/call-center-agent.jpg') center / cover no-repeat,
    var(--so-grad);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .25) inset,
    0 0 0 1px rgba(255, 255, 255, .12),
    0 0 22px rgba(94, 234, 212, .25),
    0 10px 20px -8px rgba(11, 30, 63, .55);
  display: grid;
  place-items: center;
}

/* Hide initial fallback inside the panel avatar (image is used) */
.so-avatar .so-avatar-initial { display: none; }

.so-avatar-initial {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--c-white);
  letter-spacing: -.02em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(11, 30, 63, .35);
}

.so-avatar::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #34D399;
  border: 2px solid var(--so-navy);
  box-shadow: 0 0 10px rgba(52, 211, 153, .7);
}

.so-id {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.so-id-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--c-white);
  letter-spacing: -.005em;
  line-height: 1.2;
}

.so-id-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--so-mute);
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.so-id-role .so-online-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--so-mint);
}

.so-id-role .so-online-mini::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 6px rgba(52, 211, 153, .9);
}

.so-close {
  appearance: none;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--so-line);
  color: var(--c-white);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 200ms var(--so-ease-out), transform 200ms var(--so-ease-out), border-color 200ms var(--so-ease-out);
}

.so-close:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--so-line-strong);
  transform: rotate(90deg);
}

.so-close:focus-visible {
  outline: none;
  border-color: var(--so-mint);
  box-shadow: 0 0 0 3px rgba(94, 234, 212, .35);
}

.so-close svg { width: 14px; height: 14px; }

/* ============== PROGRESS ============== */
.so-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 22px 0;
}

.so-pdot {
  position: relative;
  flex: 1 1 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.so-pdot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--so-mint), var(--so-blue-2));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--so-ease-spring);
}

.so-pdot.is-done::after { transform: scaleX(1); }
.so-pdot.is-active::after { transform: scaleX(.5); }

/* ============== BODY · steps ============== */
.so-body {
  flex: 1 1 auto;
  padding: 20px 22px 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .15) transparent;
}

.so-body::-webkit-scrollbar { width: 6px; }
.so-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 999px; }

.so-step {
  display: none;
  animation: soStepIn 520ms var(--so-ease-spring) both;
}
.so-step.is-active { display: block; }

@keyframes soStepIn {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.so-bubble {
  position: relative;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--so-line);
  border-radius: 14px 14px 14px 4px;
  font-size: .94rem;
  line-height: 1.5;
  color: var(--c-white);
  max-width: 92%;
}

.so-bubble strong { color: var(--so-mint); font-weight: 600; }

.so-bubble + .so-bubble { margin-top: 10px; }

.so-bubble-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.so-bubble-typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--so-mute);
  animation: soTyping 1.2s ease-in-out infinite;
}
.so-bubble-typing span:nth-child(2) { animation-delay: .15s; }
.so-bubble-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes soTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

.so-q {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--c-white);
  margin: 18px 0 4px;
  letter-spacing: -.01em;
}

.so-q-sub {
  font-size: .82rem;
  color: var(--so-mute);
  margin-bottom: 14px;
}

.so-field {
  position: relative;
}

.so-input,
.so-textarea {
  width: 100%;
  appearance: none;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--so-line);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: .96rem;
  color: var(--c-white);
  line-height: 1.4;
  transition: border-color 200ms var(--so-ease-out), background 200ms var(--so-ease-out), box-shadow 200ms var(--so-ease-out);
}

.so-textarea { min-height: 96px; resize: vertical; }

.so-input::placeholder,
.so-textarea::placeholder { color: rgba(255, 255, 255, .35); }

.so-input:hover,
.so-textarea:hover { border-color: var(--so-line-strong); }

.so-input:focus,
.so-textarea:focus {
  outline: none;
  border-color: var(--so-mint);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 3px rgba(94, 234, 212, .18);
}

.so-input.is-invalid,
.so-textarea.is-invalid {
  border-color: #FF6B35;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, .18);
}

.so-error {
  display: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: #FFB199;
  margin-top: 8px;
}
.so-field.is-invalid .so-error { display: block; }

/* Chip pickers (preferred contact / company size) */
.so-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.so-chip {
  appearance: none;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--so-line);
  color: var(--so-text);
  padding: 9px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: .84rem;
  cursor: pointer;
  transition: background 200ms var(--so-ease-out), border-color 200ms var(--so-ease-out), transform 200ms var(--so-ease-out);
}

.so-chip:hover {
  border-color: var(--so-line-strong);
  background: rgba(255, 255, 255, .08);
}

.so-chip.is-active {
  background: rgba(94, 234, 212, .14);
  border-color: rgba(94, 234, 212, .55);
  color: var(--so-mint);
}

/* ============== PERKS ============== */
.so-perks {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  margin-bottom: 4px;
}

.so-perk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--so-line);
  border-radius: 12px;
  font-size: .86rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .86);
}

.so-perk-ic {
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1E63E9, #0B1E3F);
  display: grid; place-items: center;
  color: var(--so-mint);
  box-shadow: 0 0 12px rgba(94, 234, 212, .25);
}

.so-perk-ic svg { width: 12px; height: 12px; }

.so-perk strong {
  display: block;
  color: var(--c-white);
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 2px;
  font-family: 'Space Grotesk', sans-serif;
}

/* ============== FOOT · actions ============== */
.so-foot {
  position: relative;
  padding: 16px 22px 18px;
  border-top: 1px solid var(--so-line);
  background: rgba(8, 18, 38, .35);
  display: flex;
  align-items: center;
  gap: 12px;
}

.so-foot-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--so-mute);
  flex: 1 1 auto;
}

.so-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.so-btn {
  position: relative;
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: .92rem;
  padding: 11px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -.005em;
  overflow: hidden;
  transition:
    transform 220ms var(--so-ease-out),
    background 220ms var(--so-ease-out),
    border-color 220ms var(--so-ease-out),
    box-shadow 220ms var(--so-ease-out),
    color 220ms var(--so-ease-out);
}

.so-btn svg { width: 14px; height: 14px; }

.so-btn-ghost {
  background: rgba(255, 255, 255, .04);
  border-color: var(--so-line);
  color: rgba(255, 255, 255, .82);
}
.so-btn-ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: var(--so-line-strong);
  color: var(--c-white);
}
.so-btn-ghost:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.so-btn-primary {
  background: linear-gradient(120deg, #5EEAD4 0%, #4F8BFF 100%);
  color: #0B1E3F;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .14) inset,
    0 14px 28px -12px rgba(94, 234, 212, .55),
    0 6px 18px -8px rgba(30, 99, 233, .45);
}

.so-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 700ms var(--so-ease-out);
}

.so-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .2) inset,
    0 22px 38px -14px rgba(94, 234, 212, .65),
    0 10px 24px -8px rgba(30, 99, 233, .5);
}

.so-btn-primary:hover::before { transform: translateX(130%); }

.so-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .2) inset,
    0 0 0 3px rgba(94, 234, 212, .55);
}

/* ============== SUCCESS ============== */
.so-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 22px 0;
  animation: soStepIn 520ms var(--so-ease-spring) both;
}

.so-success.is-active { display: flex; }

.so-success-orb {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .55), transparent 40%),
    radial-gradient(circle at 70% 75%, rgba(255, 107, 53, .55), transparent 60%),
    linear-gradient(150deg, #1E63E9 0%, #0B1E3F 80%);
  display: grid;
  place-items: center;
  margin: 6px auto 18px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .15) inset,
    0 0 32px rgba(94, 234, 212, .45),
    0 22px 48px -22px rgba(11, 30, 63, .65);
}

.so-success-orb::after {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(94, 234, 212, 0), rgba(94, 234, 212, .35), rgba(79, 139, 255, .55), rgba(94, 234, 212, 0));
  filter: blur(10px);
  z-index: -1;
  animation: soSpin 9s linear infinite;
}

.so-success-orb svg {
  width: 36px; height: 36px; color: var(--so-mint);
  filter: drop-shadow(0 0 8px rgba(94, 234, 212, .65));
}

.so-success h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--c-white);
  letter-spacing: -.015em;
}

.so-success h3 em {
  background: linear-gradient(120deg, var(--c-white), var(--so-mint));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}

.so-success p {
  color: var(--so-mute);
  font-size: .94rem;
  line-height: 1.55;
  max-width: 340px;
  margin: 0 auto 16px;
}

.so-success .so-perks {
  width: 100%;
  text-align: left;
  margin-top: 4px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 720px) {
  .so-orb {
    right: 14px;
    bottom: 14px;
    padding: 5px;
    gap: 0;
  }
  .so-orb .so-orb-text { display: none; }
  .so-orb .so-bead { width: 44px; height: 44px; flex-basis: 44px; }
  .so-orb .so-bead-initial { font-size: 1.05rem; }

  .so-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
    transform: translateY(120%) scale(1);
  }
  .so-panel.is-open { transform: translateY(0) scale(1); }

  .so-head { padding: 18px 18px 14px; }
  .so-body { padding: 18px 18px 0; }
  .so-foot { padding: 14px 18px 16px; }
  .so-progress { padding: 14px 18px 0; }

  .so-q { font-size: 1rem; }
}

@media (max-width: 380px) {
  .so-actions .so-btn-ghost { display: none; }
}

/* Reduced motion fallbacks */
@media (prefers-reduced-motion: reduce) {
  .so-orb-lights,
  .so-panel-lights,
  .so-bead::after,
  .so-success-orb::after,
  .so-online::before,
  .so-particle {
    animation: none !important;
  }
  .so-orb { animation: none; }
}

/* Honeypot — invisible to humans, checked server-side in SalesOrbController.
   Clip-based (not negative-offset) per the page-contact.css .bf-hp fix: a
   far-negative offset becomes reachable overflow under dir=rtl. */
.so-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Submit-failure state — shown when the fetch() to /sales-orb/submit fails.
   .so-foot is a flex row (meta + actions); flex-basis:100% forces this onto
   its own line above them instead of squeezing into the row. order:-1 keeps
   it visually first regardless of DOM position. */
.so-submit-error {
  display: none;
  flex-basis: 100%;
  order: -1;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 107, 53, 0.12);
  border: 1px solid rgba(255, 107, 53, 0.35);
  color: #FF6B35;
  font-size: 0.82rem;
  line-height: 1.4;
}
.so-submit-error.is-visible { display: block; }