/* DIGITAL LEADER — geteiltes Design-System (aus dem Prototyp extrahiert) */
:root { color-scheme: dark; --mx:50%; --my:50%; }
body { background:#04060f; overflow-x:hidden; }

/* Animierter Gradient-Mesh */
.mesh::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:130%;
  background:
    radial-gradient(40% 50% at 20% 20%, rgba(14,123,209,.45), transparent 60%),
    radial-gradient(35% 45% at 85% 15%, rgba(52,227,255,.28), transparent 60%),
    radial-gradient(45% 55% at 60% 85%, rgba(155,123,255,.22), transparent 60%);
  filter: blur(40px); z-index:0; animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(0,-3%,0) scale(1.1)} }

/* Neural-Constellation Canvas (nur Startseite) */
#neural{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* Pointer-Spotlight */
.spotlight::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(380px circle at var(--mx) var(--my), rgba(52,227,255,.10), transparent 60%);
  transition:background .1s;
}

/* Futuristischer Perspektiv-Grid-Boden */
.floor{
  position:absolute; left:50%; bottom:-2px; width:200%; height:46vh; transform:translateX(-50%) perspective(420px) rotateX(60deg);
  transform-origin:bottom center; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(52,227,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(52,227,255,.22) 1px, transparent 1px);
  background-size:48px 48px; animation:floor 8s linear infinite;
  mask-image:linear-gradient(to top, #000 0%, transparent 80%);
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 80%);
}
@keyframes floor{ from{background-position:0 0} to{background-position:0 48px} }

.grain{ background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px); background-size:3px 3px; }
.glass{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(12px); }

/* Rotierender Conic-Glow-Rahmen */
.glow-border{ position:relative; isolation:isolate; }
.glow-border::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:conic-gradient(from var(--a,0deg), #0e7bd1, #34e3ff, #9b7bff, #0e7bd1);
  animation:spin 6s linear infinite; filter:saturate(1.2);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); padding:1px;
  -webkit-mask-composite:xor; mask-composite:exclude;
}
@property --a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes spin{ to{ --a:360deg; } }

.text-gradient{
  background:linear-gradient(100deg,#fff 0%, #aad4ff 40%, #34e3ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.text-shimmer{
  background:linear-gradient(100deg,#9fd0ff 20%,#fff 45%,#34e3ff 55%,#9fd0ff 80%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 5s linear infinite;
}
@keyframes shimmer{ to{ background-position:200% center; } }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* 3D-Tilt-Cards mit Pointer-Highlight */
.tilt{ transform-style:preserve-3d; transition:transform .2s ease; position:relative; }
.tilt::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(240px circle at var(--mx) var(--my), rgba(52,227,255,.14), transparent 60%);
}
.tilt:hover::after{ opacity:1; }

.marquee{ animation:marq 30s linear infinite; }
.marquee:hover{ animation-play-state:paused; }
@keyframes marq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.logo-img{ filter:grayscale(1) brightness(1.7); opacity:.65; transition:.4s; }
.logo-item:hover .logo-img{ filter:none; opacity:1; }

::selection{ background:#0e7bd1; color:#fff; }
.nav-link{ position:relative; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0; background:#34e3ff; transition:width .3s; }
.nav-link:hover::after{ width:100%; }
.nav-link.active{ color:#fff; }
.nav-link.active::after{ width:100%; }
.magnetic{ transition:transform .25s cubic-bezier(.2,.7,.2,1); }

/* ⁂ Stern-Cursor (Marken-Signatur) */
@media (hover:hover) and (pointer:fine){
  body{ cursor:none; }
  a,button,input,label,.tilt{ cursor:none; }
  #cursor{ position:fixed; top:0; left:0; z-index:100; pointer-events:none; transform:translate(-50%,-50%);
    font-size:18px; line-height:1; color:#34e3ff; text-shadow:0 0 10px rgba(52,227,255,.9);
    transition:transform .12s ease, color .2s; mix-blend-mode:screen; will-change:transform; }
  #cursor.spin{ animation:cspin 4s linear infinite; }
  @keyframes cspin{ to{ transform:translate(-50%,-50%) rotate(360deg);} }
  #ring{ position:fixed; top:0; left:0; z-index:99; pointer-events:none; width:34px; height:34px; margin:-17px 0 0 -17px;
    border:1px solid rgba(52,227,255,.4); border-radius:50%; transition:transform .18s ease, opacity .2s, width .2s, height .2s; }
}
.spark{ position:fixed; z-index:101; pointer-events:none; color:#34e3ff; font-size:14px; transform:translate(-50%,-50%);
  text-shadow:0 0 8px rgba(52,227,255,.9); animation:spark .6s ease-out forwards; }
@keyframes spark{ 0%{opacity:1; transform:translate(-50%,-50%) scale(.4) rotate(0)} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.6) rotate(90deg)} }

/* Agent-Feed-Items (Startseite) */
.feed-item{ animation:feedin .45s cubic-bezier(.2,.7,.2,1); }
@keyframes feedin{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* Mobile-Menü */
#mobileMenu{ transition:opacity .25s, transform .25s; }
#mobileMenu.hidden-menu{ opacity:0; pointer-events:none; transform:translateY(-8px); }

@media (prefers-reduced-motion: reduce){
  .mesh::before,.floor,.marquee,.text-shimmer,.glow-border::before,.spark{ animation:none !important; }
}