.neon-hero {
  background: #0f192e;
  color: #f5f7ff;
}
.neon-hero .site-header {
  position: relative;
}
.neon-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  max-width: 1480px;
  margin: auto;
  padding: clamp(40px, 7vw, 110px) clamp(18px, 6vw, 96px);
}
.neon-hero h1 {
  max-width: 10ch;
  margin: 12px 0 20px;
  font-size: clamp(2.75rem, 6vw, 6.5rem);
  line-height: .98;
  letter-spacing: -.05em;
}
.neon-hero-inner p:not(.eyebrow) {
  max-width: 48ch;
  color: #dee5f7;
  font-size: clamp(16px, 1.4vw, 20px);
}
.neon-hero-sign,
.neon-stage {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  background: radial-gradient(ellipse at center, #343554, #111829 75%);
  border: 1px solid #465275;
  border-radius: 20px;
}
.neon-hero-sign {
  min-height: 270px;
  color: #ffbce6;
  font: italic clamp(3rem, 7vw, 7rem)/.92 Georgia, serif;
  text-shadow: 0 0 .12em #ffa5e3, 0 0 .4em #eb419f, 0 0 .8em #eb419f;
}
.neon-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.neon-hero .neon-actions .button {
  border-color: #dbe4ff;
  background: #eff2fd;
  color: #172136;
}
.neon-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(20px, 4vw, 64px);
}
.neon-preview {
  position: sticky;
  top: 24px;
  min-width: 0;
}
.neon-preview h3 {
  margin: 0 0 12px;
}
.neon-stage {
  min-height: 240px;
  color: #fff;
  overflow: hidden;
}
.neon-stage[data-backing="Black"] {
  background: radial-gradient(ellipse at center, #2c2d3b, #0b0c10 72%);
}
.neon-stage[data-backing="White"] {
  background: radial-gradient(ellipse at center, #66768e, #242b3c 76%);
}
.neon-lettering {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: italic clamp(1.5rem, 3.3vw, 3.5rem)/1.13 Georgia, serif;
  color: var(--neon-color, #ff87d6);
  text-shadow: 0 0 .11em currentColor, 0 0 .42em currentColor;
}
.neon-stage[data-font="script"] .neon-lettering {
  font-family: "Brush Script MT", "Segoe Script", cursive;
}
.neon-stage[data-font="sans"] .neon-lettering {
  font-family: system-ui, sans-serif;
  font-style: normal;
}
.neon-stage[data-font="serif"] .neon-lettering {
  font-style: normal;
}
.neon-stage[data-font="mono"] .neon-lettering {
  font-family: ui-monospace, monospace;
  font-style: normal;
}
.neon-stage[data-lighting="RGB color changing"] .neon-lettering {
  color: #ff9bdb;
  animation: neon-hue 7s linear infinite;
}
.neon-stage[data-lighting="RGB gradient"] .neon-lettering {
  background: linear-gradient(120deg, #ffb4e4, #a2dbff 50%, #b8ffcb);
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 8px #a79cff);
}
@keyframes neon-hue {
  to { filter: hue-rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .neon-stage[data-lighting="RGB color changing"] .neon-lettering { animation: none; }
}
.neon-stage img {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
}
.neon-stage [data-neon-file-preview] {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.neon-quote [hidden] {
  display: none !important;
}
.neon-quote .mc-spec {
  margin: 0;
  padding: 0;
  border: 0;
}
.neon-quote fieldset {
  min-width: 0;
  margin: 0 0 18px;
  padding: 14px 16px 10px;
  border: 1px solid #d7deeb;
  border-radius: 14px;
}
.neon-quote legend {
  padding-inline: 6px;
  font-weight: 700;
}
.neon-quote .neon-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.neon-quote .neon-modes label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-height: 36px;
}
.neon-quote .neon-modes input {
  width: 18px;
  min-height: 0;
  height: 18px;
  margin: 0;
}
.neon-dimensions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.neon-quote [data-neon-artwork-error] {
  color: #a21a30;
  margin: 0 0 12px;
}
.neon-quote [data-neon-artwork-error]:empty {
  display: none;
}
@media (max-width: 760px) {
  .neon-hero-inner, .neon-layout { grid-template-columns: minmax(0, 1fr); }
  .neon-hero-sign { min-height: 170px; }
  .neon-preview { position: static; }
  .neon-stage { min-height: 145px; }
}
@media (max-width: 380px) {
  .neon-dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .neon-dimensions label:last-child { grid-column: 1 / -1; }
}