/* Kolbo Hero Neon Sign v2.1 — retro 80s with perimeter bulbs */
.khn-sign{
  position:relative;
  display:grid;
  place-items:center;
  min-height:42vh;
  margin:clamp(8px,2vw,22px) auto;
  width:min(1100px,95%);
  border-radius:18px;
  padding: clamp(22px, 3vw, 36px);
  background: radial-gradient(1000px 500px at 20% 10%, rgba(255,255,255,.04), transparent 60%),
              radial-gradient(800px 500px at 80% 30%, rgba(255,255,255,.03), transparent 60%),
              linear-gradient(180deg, rgba(10,10,10,.78), rgba(10,10,10,.58));
  overflow:hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,.45), inset 0 0 40px rgba(0,0,0,.5);
  isolation:isolate;
}

.khn-glass{
  position:absolute; inset:-1px;
  background:
    radial-gradient(600px 300px at 10% 0%, rgba(255,255,255,.06), transparent 50%),
    radial-gradient(600px 300px at 90% 100%, rgba(255,255,255,.04), transparent 55%);
  mix-blend-mode: screen; pointer-events:none;
  border-radius:inherit;
  z-index:0;
}

.khn-title{
  position:relative; z-index:1;
  font-weight:800; text-align:center;
  font-size: clamp(32px, 8vw, 86px);
  letter-spacing:.04em; line-height:1.1;
  color:#111;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
.khn-title span{
  display:inline-block;
  opacity:.12;
  transform: translate3d(0,0,0);
  will-change: filter, color, text-shadow, opacity;
}

/* Glow palettes */
:root{
  --khn-gold: #ffd27a;
  --khn-turq: #23c4cf;
  --khn-pink: #ff5bbd;
  --khn-blue: #6ad1ff;
  --khn-white: #ffffff;
  --khn-cyan: #7fffff;
  --khn-amber: #ffb74d;
}
.khn-sign[data-palette="gold-turquoise"] .khn-title span.glowA{ color:var(--khn-gold); text-shadow: 0 0 6px var(--khn-gold), 0 0 16px var(--khn-amber), 0 0 36px var(--khn-gold); }
.khn-sign[data-palette="gold-turquoise"] .khn-title span.glowB{ color:var(--khn-turq); text-shadow: 0 0 6px var(--khn-turq), 0 0 16px var(--khn-blue), 0 0 36px var(--khn-turq); }

.khn-sign[data-palette="blue-pink"] .khn-title span.glowA{ color:var(--khn-blue); text-shadow: 0 0 6px var(--khn-blue), 0 0 18px var(--khn-blue), 0 0 36px var(--khn-blue); }
.khn-sign[data-palette="blue-pink"] .khn-title span.glowB{ color:var(--khn-pink); text-shadow: 0 0 6px var(--khn-pink), 0 0 18px var(--khn-pink), 0 0 36px var(--khn-pink); }

.khn-sign[data-palette="white-cyan"] .khn-title span.glowA{ color:var(--khn-white); text-shadow: 0 0 8px var(--khn-white), 0 0 22px var(--khn-cyan), 0 0 46px var(--khn-cyan); }
.khn-sign[data-palette="white-cyan"] .khn-title span.glowB{ color:var(--khn-cyan); text-shadow: 0 0 8px var(--khn-cyan), 0 0 22px var(--khn-white), 0 0 46px var(--khn-white); }

.khn-subtitle{
  z-index:1; margin-top:.6rem;
  font-size: clamp(14px, 2.4vw, 22px);
  color: rgba(255,255,255,.85);
  text-shadow: 0 0 10px rgba(0,0,0,.35);
}

/* Flicker keyframes */
@keyframes khnFlickerSoft{
  0%,6%,12%,18%,24%,100% { opacity:1; }
  3%,9%,15%,21% { opacity: .75; }
}
@keyframes khnFlickerHard{
  0%,100% { opacity:1; filter:brightness(1); }
  2% { opacity:.2; filter:brightness(0.6) blur(.2px); }
  4% { opacity:.9; }
  7% { opacity:.35; filter:brightness(.7) blur(.3px); }
  9% { opacity:1; }
}

/* Perimeter bulbs */
.khn-bulbs{ position:absolute; pointer-events:none; z-index:2; }
.khn-top, .khn-bottom { left:10px; right:10px; height:14px; display:flex; gap:8px; }
.khn-left, .khn-right   { top:10px; bottom:10px; width:14px; display:flex; gap:8px; flex-direction:column; }
.khn-top    { top:10px;  justify-content:space-between; }
.khn-bottom { bottom:10px; justify-content:space-between; }
.khn-left   { left:10px; align-items:center; }
.khn-right  { right:10px; align-items:center; }

.khn-bulb{
  width:10px; height:10px; border-radius:50%;
  background: #333;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  opacity:.25;
}

.khn-bulb.onA{ background: var(--khn-gold); box-shadow: 0 0 6px var(--khn-gold), 0 0 14px var(--khn-amber), 0 0 28px var(--khn-gold); opacity:1; }
.khn-bulb.onB{ background: var(--khn-turq); box-shadow: 0 0 6px var(--khn-turq), 0 0 14px var(--khn-blue), 0 0 28px var(--khn-turq); opacity:1; }

/* Adjust palette for bulbs too */
.khn-sign[data-palette="blue-pink"] .khn-bulb.onA{ background: var(--khn-blue); box-shadow: 0 0 6px var(--khn-blue), 0 0 14px var(--khn-blue), 0 0 28px var(--khn-blue); }
.khn-sign[data-palette="blue-pink"] .khn-bulb.onB{ background: var(--khn-pink); box-shadow: 0 0 6px var(--khn-pink), 0 0 14px var(--khn-pink), 0 0 28px var(--khn-pink); }
.khn-sign[data-palette="white-cyan"] .khn-bulb.onA{ background: var(--khn-white); box-shadow: 0 0 8px var(--khn-white), 0 0 18px var(--khn-cyan), 0 0 36px var(--khn-cyan); }
.khn-sign[data-palette="white-cyan"] .khn-bulb.onB{ background: var(--khn-cyan);  box-shadow: 0 0 8px var(--khn-cyan), 0 0 18px var(--khn-white), 0 0 36px var(--khn-white); }