/* ============================================================
   WISION COMMAND CENTER — eigene Produkt-Identität
   Signal-Indigo → Violett · geometrische Sans · Cockpit-Motive
   Bewusst NICHT das Agentur-Gold: das Produkt hat eine eigene Sprache.
   ============================================================ */

:root{
  --cc-signal:#2E5CFF;
  --cc-signal-2:#7C5CFF;
  --cc-signal-soft:#8AA4FF;
  --cc-grad:linear-gradient(120deg,#2E5CFF 0%,#5B6CFF 45%,#7C5CFF 100%);
  --cc-line:rgba(124,92,255,.26);
}

/* ---------- Typografie: Produkt statt Agentur ---------- */
h1,h2,h3,.amount{
  font-family:'Jost','Segoe UI',system-ui,sans-serif !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
}
h1{line-height:1.06 !important}
.amount{letter-spacing:-.03em !important}

/* Akzent-Wort im Signal-Verlauf statt Gold */
em{
  font-style:normal !important;
  background:var(--cc-grad) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;
}

/* ---------- Akzente auf Signal umstellen ---------- */
::selection{background:var(--cc-signal) !important;color:#fff !important}
.eyebrow{color:var(--cc-signal-soft) !important;font-weight:500}
.check::before{color:var(--cc-signal-soft) !important}
.typing{border-right-color:var(--cc-signal-2) !important}
.beta-note a{color:var(--cc-signal-soft) !important}
.foot a:hover{color:var(--cc-signal-soft) !important}
summary::after{color:var(--cc-signal-soft) !important}

.btn-gold,
.shot-tab.active,
.price .badge,
.store .soon{
  background:var(--cc-grad) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 8px 30px rgba(46,92,255,.32) !important;
}
.btn-gold:hover{filter:brightness(1.08)}

/* ---------- Cockpit-Signatur: Radar hinter dem Hero ---------- */
body{overflow-x:hidden}
header{position:relative;overflow:hidden}
header::before{
  content:"";position:absolute;left:50%;top:clamp(90px,16vh,190px);
  width:min(1180px,120vw);aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle,rgba(46,92,255,.13) 0%,rgba(124,92,255,.05) 42%,transparent 66%);
}
header::after{
  content:"";position:absolute;left:50%;top:clamp(90px,16vh,190px);
  width:min(680px,80vw);aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;z-index:0;
  border:1px solid rgba(124,92,255,.16);
  box-shadow:0 0 0 60px rgba(124,92,255,.045),0 0 0 140px rgba(46,92,255,.03);
  animation:ccPulse 6.5s ease-in-out infinite;
}
@keyframes ccPulse{
  0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}
  50%{opacity:.9;transform:translateX(-50%) scale(1.045)}
}
header > *{position:relative;z-index:1}

/* Signal-Punkt in der Eyebrow („live") */
.eyebrow::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--cc-signal-2);margin-right:.6rem;vertical-align:middle;
  box-shadow:0 0 0 4px rgba(124,92,255,.16);
  animation:ccBlink 2.4s ease-in-out infinite;
}
@keyframes ccBlink{0%,100%{opacity:1}50%{opacity:.35}}

/* Karten bekommen eine Signal-Kante beim Hover */
.card{transition:border-color .3s,transform .3s,box-shadow .3s}
.card:hover{
  border-color:var(--cc-line) !important;transform:translateY(-3px);
  box-shadow:0 18px 50px rgba(46,92,255,.14);
}

/* Screenshot-Rahmen im Produktton */
.shot-frame{box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(124,92,255,.14) !important}

@media(prefers-reduced-motion:reduce){
  header::after,.eyebrow::before{animation:none !important}
  .card:hover{transform:none}
}