/* ========================================================================
   LocalEye — Global Glass / Gradient / Glow / 3D-Tilt Style Layer
   Wird zusätzlich nach den Inline-Styles geladen und überschreibt gezielt.
   ======================================================================== */

:root {
  --g-blue:     #3b82f6;
  --g-cyan:     #22d3ee;
  --g-violet:   #a78bfa;
  --g-emerald:  #34d399;
  --g-pink:     #f472b6;

  --glass-bg:        rgba(255,255,255,.04);
  --glass-bg-hover:  rgba(255,255,255,.07);
  --glass-border:    rgba(255,255,255,.10);
  --glass-border-hi: rgba(255,255,255,.18);
  --glass-shadow:    0 10px 40px rgba(0,0,0,.45),
                     inset 0 1px 0 rgba(255,255,255,.08);
  --glass-blur:      blur(22px) saturate(140%);

  --glow-blue:    0 0 40px rgba(59,130,246,.45);
  --glow-cyan:    0 0 40px rgba(34,211,238,.40);
  --glow-violet:  0 0 40px rgba(167,139,250,.40);
  --glow-emerald: 0 0 40px rgba(52,211,153,.40);
}

/* ── Animated multicolor gradient background ─────────────────────────── */
body {
  background:
    radial-gradient(1200px 800px at 8% -10%,  rgba(59,130,246,.28),  transparent 60%),
    radial-gradient(900px  700px at 92% 8%,   rgba(167,139,250,.22), transparent 65%),
    radial-gradient(1100px 900px at 50% 110%, rgba(34,211,238,.18),  transparent 60%),
    radial-gradient(800px  700px at 110% 90%, rgba(52,211,153,.14),  transparent 65%),
    #0b0d14 !important;
  background-attachment: fixed !important;
}

/* Schwebende Blobs (subtle parallax feel) */
.gx-blobs {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.gx-blobs::before,
.gx-blobs::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .55; mix-blend-mode: screen;
  animation: gxFloat 22s ease-in-out infinite;
}
.gx-blobs::before {
  width: 520px; height: 520px;
  background: radial-gradient(circle, var(--g-blue), transparent 65%);
  top: -120px; left: -120px;
}
.gx-blobs::after {
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--g-violet), transparent 65%);
  bottom: -150px; right: -150px;
  animation-delay: -11s;
}
@keyframes gxFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(60px,-40px) scale(1.06); }
  66%     { transform: translate(-50px,30px) scale(.95); }
}

/* Body-Inhalt über die Blobs heben */
body > *:not(.gx-blobs):not(canvas):not(script) { position: relative; z-index: 1; }

/* Bestehende Canvas-Hintergründe leicht abblenden — die Blobs übernehmen */
#circuit-bg, #bg-canvas { opacity: .25 !important; }

/* ── Nav (stronger glass) ────────────────────────────────────────────── */
nav {
  background: rgba(11,13,20,.55) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05),
    0 8px 28px rgba(0,0,0,.45) !important;
}

/* ── Glass-Card Pattern — generisch auf alle Karten anwenden ─────────── */
.feat-card,
.qh-card,
.team-card,
.story-card,
.mission-item,
.contact-box,
.issue-list,
.price-card,
.facts-card,
.fw-card,
.gx-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow) !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              border-color .25s,
              box-shadow .35s,
              background .25s !important;
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
}

/* Subtle inner highlight on top */
.feat-card::before,
.qh-card::before,
.team-card::before,
.story-card::before,
.mission-item::before,
.gx-card::before,
.fw-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
              rgba(255,255,255,.08) 0%,
              rgba(255,255,255,0)   40%);
  pointer-events: none;
}

/* ── 3D Tilt + Glow Hover ────────────────────────────────────────────── */
.tilt {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              box-shadow .35s,
              border-color .25s;
  will-change: transform;
}
.tilt:hover {
  border-color: var(--glass-border-hi) !important;
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    var(--glow-blue),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}
/* Per-card accent glow variants */
.tilt.glow-cyan:hover    { box-shadow: 0 18px 60px rgba(0,0,0,.55), var(--glow-cyan),    inset 0 1px 0 rgba(255,255,255,.14) !important; border-color: rgba(34,211,238,.45) !important; }
.tilt.glow-violet:hover  { box-shadow: 0 18px 60px rgba(0,0,0,.55), var(--glow-violet),  inset 0 1px 0 rgba(255,255,255,.14) !important; border-color: rgba(167,139,250,.45) !important; }
.tilt.glow-emerald:hover { box-shadow: 0 18px 60px rgba(0,0,0,.55), var(--glow-emerald), inset 0 1px 0 rgba(255,255,255,.14) !important; border-color: rgba(52,211,153,.45) !important; }

/* Spotlight follow (mouse position via CSS vars set by JS) */
.tilt::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),
              rgba(255,255,255,.10), transparent 55%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.tilt:hover::after { opacity: 1; }

/* Auto-apply tilt to common card classes via :is() — avoids HTML edits */
.feat-card,
.qh-card,
.team-card,
.story-card,
.mission-item,
.price-card,
.gx-card {
  /* The JS attaches mouse handlers based on these selectors */
}

/* ── Buttons — gradient + glow ───────────────────────────────────────── */
.btn-primary,
.nav-buy,
.btn-contact,
.btn-send {
  background: linear-gradient(135deg, var(--g-blue), var(--g-violet)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 6px 20px rgba(59,130,246,.35),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
  transition: transform .2s, box-shadow .25s, filter .25s !important;
  color: #fff !important;
}
.btn-primary:hover,
.nav-buy:hover,
.btn-contact:hover,
.btn-send:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.08) saturate(1.05);
  box-shadow:
    0 12px 36px rgba(59,130,246,.55),
    0 0 28px rgba(167,139,250,.35),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.btn-secondary,
.btn-ghost,
.nav-back {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: transform .2s, border-color .25s, background .25s !important;
}
.btn-secondary:hover,
.btn-ghost:hover,
.nav-back:hover {
  background: var(--glass-bg-hover) !important;
  border-color: var(--glass-border-hi) !important;
  transform: translateY(-2px) !important;
}

/* ── Hero badge ──────────────────────────────────────────────────────── */
.hero-badge {
  background: rgba(59,130,246,.10) !important;
  border: 1px solid rgba(96,165,250,.30) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    0 4px 16px rgba(59,130,246,.20),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* ── Hero gradient title (broader rainbow) ───────────────────────────── */
.hero h1 .brand,
h1 .brand {
  background: linear-gradient(120deg,
              #e0eaff 0%,
              #93c5fd 30%,
              #c4b5fd 60%,
              #67e8f9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── Hero UI mock — heavier glass frame ──────────────────────────────── */
.hero-ui {
  background: rgba(15,17,23,.55) !important;
  border: 1px solid var(--glass-border) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 60px rgba(59,130,246,.15),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  overflow: hidden;
}

/* ── Sections — softer dividers (removes hard rgba bg-bands) ─────────── */
section[style*="rgba(15,17,23"],
section[style*="rgba(22,27,39"],
section[style*="rgba(20,25,37"] {
  background: transparent !important;
  border-top: 1px solid var(--glass-border) !important;
}

/* Pricing card extra polish */
.price-card {
  position: relative;
}
.price-card.recommended,
.price-card[data-recommended="true"] {
  box-shadow:
    0 10px 40px rgba(0,0,0,.45),
    0 0 50px rgba(59,130,246,.25),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  border-color: rgba(96,165,250,.45) !important;
}

/* Form fields — glass treatment */
.form-group input,
.form-group textarea,
.form-group select {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--glass-border) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color .2s, background .2s !important;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: rgba(96,165,250,.55) !important;
  background: rgba(255,255,255,.05) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
}

/* Footer */
footer {
  background: rgba(11,13,20,.65) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border) !important;
}

/* Issue list (FAQ accordion) */
.issue-list {
  background: var(--glass-bg) !important;
}
.issue-q.open {
  background: rgba(59,130,246,.10) !important;
}

/* Chips */
.chip,
.contact-cat {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
  .tilt, .feat-card, .qh-card, .team-card, .story-card,
  .mission-item, .gx-card, .price-card { transition: none !important; }
  .gx-blobs::before, .gx-blobs::after { animation: none !important; }
}

/* Mobile fine-tunes */
@media (max-width: 600px) {
  .gx-blobs::before { width: 320px; height: 320px; }
  .gx-blobs::after  { width: 380px; height: 380px; }
}