/* Easy4LAN Apple Effects – Fixed */
:root {
  --grad-blue:   linear-gradient(135deg, #0066cc 0%, #0099ff 50%, #00c6ff 100%);
  --grad-aurora: linear-gradient(135deg, #0066cc 0%, #0099ff 40%, #00c6ff 70%, #34c759 100%);
  --grad-dark:   linear-gradient(180deg, #1a1a2e 0%, #101828 100%);
  --shadow-glow: 0 0 60px rgba(0,102,204,0.18);
}

/* Gradient Text */
.gradient-text {
  background: var(--grad-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
h1 em {
  font-style: italic;
  background: var(--grad-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Scroll Reveal – langsam */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1),
              transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Grain overlay Hero */
.hero { isolation: isolate; }
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 128px;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; }

/* page-tag pulsierender Punkt */
.page-tag {
  background: rgba(0,102,204,0.09) !important;
  border: 1px solid rgba(0,102,204,0.18) !important;
  backdrop-filter: blur(8px);
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.page-tag::before {
  content: '';
  width: 7px; height: 7px;
  background: #34c759;
  border-radius: 50%;
  animation: pulse 2s ease infinite;
  box-shadow: 0 0 6px #34c759;
  flex-shrink: 0;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

/* Stats Aurora */
.stats-bar { background: var(--grad-dark) !important; position: relative; overflow: hidden; }
.stats-bar::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(0,102,204,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.stats-inner { position: relative; }
.stat-num {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Cards Hover */
.card {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease !important;
  position: relative; overflow: hidden;
}
.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-aurora);
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
}
.card:hover { transform: translateY(-5px) !important; box-shadow: 0 20px 50px rgba(0,0,0,0.10), var(--shadow-glow) !important; }
.card:hover::before { transform: scaleX(1); }

/* Buttons */
.btn-primary, .btn-card, .btn-submit, .nav-cta {
  background: var(--grad-blue) !important;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s !important;
  box-shadow: 0 4px 16px rgba(0,102,204,0.25);
}
.btn-primary:hover, .btn-card:hover, .btn-submit:hover, .nav-cta:hover {
  opacity: 0.9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,102,204,0.4) !important;
  background: var(--grad-blue) !important;
}

/* DNS Glow Orbs */
#dns { position: relative; overflow: hidden; }
#dns::before {
  content: '';
  position: absolute; top: -300px; right: -300px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(0,102,204,0.20) 0%, transparent 65%);
  pointer-events: none;
  animation: floatGlow 8s ease-in-out infinite;
}
#dns::after {
  content: '';
  position: absolute; bottom: -200px; left: -200px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,198,255,0.08) 0%, transparent 65%);
  pointer-events: none;
  animation: floatGlow 10s ease-in-out infinite reverse;
}
@keyframes floatGlow { 0%,100%{transform:translate(0,0)} 50%{transform:translate(25px,-25px)} }

/* Contact hover */
.contact-item { transition: transform 0.2s, box-shadow 0.2s !important; }
.contact-item:hover { transform: translateX(4px) !important; }

/* Footer Aurora */
footer { background: var(--grad-dark) !important; position: relative; }
footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--grad-aurora);
  opacity: 0.3;
}
.footer-logo span {
  background: var(--grad-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Search Box */
.search-box {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(12px) !important;
}
.search-box:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 4px 40px rgba(0,102,204,0.15), 0 0 0 3px rgba(0,102,204,0.08) !important;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .card { transition: none !important; }
  .card::before { display: none; }
  #dns::before, #dns::after { animation: none !important; }
  .page-tag::before { animation: none !important; }
}

/* Mobile Fix – reveal immer sichtbar */
@media (max-width: 860px) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}