/* =========================================================================
   WALYSER — STARTSEITEN-UPGRADE (additiv, überschreibt nichts Bestehendes)
   Chain-Marquee · Stats-Bento · Bento-Feature-Grid · Scroll-Reveal · Aurora
========================================================================= */

/* ---------- Aurora-Layer im Hero (zusätzliche Tiefe hinter der Wallet-Karte) ---------- */
.auroraLayer{position:absolute;inset:-160px -10% auto -10%;height:820px;z-index:0;pointer-events:none;opacity:.55;
  background:
    radial-gradient(38% 42% at 18% 22%,#00d9ff2e 0%,transparent 70%),
    radial-gradient(32% 38% at 82% 12%,#7c5cff33 0%,transparent 72%),
    radial-gradient(30% 34% at 60% 55%,#27e7a41c 0%,transparent 74%);
  filter:blur(30px);animation:auroraDrift 16s ease-in-out infinite alternate}
@keyframes auroraDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(1.5%,2%,0) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.auroraLayer{animation:none}}

/* ---------- Chain-Marquee-Strip ---------- */
.chainStripSection{padding:0;position:relative;z-index:2}
.chainStripHead{text-align:center;padding:14px 0 8px}
.chainStripBar{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,#080a12,#05060a);padding:16px 0;white-space:nowrap}
.chainStripBar:before,.chainStripBar:after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.chainStripBar:before{left:0;background:linear-gradient(90deg,#05060a,transparent)}
.chainStripBar:after{right:0;background:linear-gradient(270deg,#05060a,transparent)}
.chainStripTrack{display:inline-flex;align-items:center;gap:14px;animation:chainScroll 62s linear infinite}
@keyframes chainScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.chainChip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#ffffff05;font-size:12px;color:#cbd0dc;font-weight:600}
.chainChip .ic{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#06070b;flex:0 0 auto}
.chainChip .ic.logoIc{background:#fff;padding:2px;box-sizing:border-box;overflow:hidden}
.chainChip .ic.logoIc img{width:100%;height:100%;object-fit:contain;display:block}
.chainLabel{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.08em;font-weight:800;color:#62eaff;padding:0 6px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.chainStripTrack{animation:none}}

/* ---------- Partner-Logos: Börsen & Wallets — läuft permanent, ohne Pause ---------- */
.partnerStripSection{padding:34px 0 6px;position:relative;z-index:2}
.partnerStripHead{text-align:center;margin-bottom:16px}
.partnerStripBar{position:relative;overflow:hidden;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);display:flex}
.partnerStripTrack{display:flex;align-items:center;gap:20px;flex-shrink:0;animation:partnerScroll 34s linear infinite;padding:0 10px}
@keyframes partnerScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.partnerLogo{display:flex;align-items:center;justify-content:center;height:64px;min-width:128px;padding:14px 20px;border-radius:16px;background:#f5f7fb;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 26px -12px rgba(0,0,0,.55);flex-shrink:0;transition:transform .25s ease,box-shadow .25s ease}
.partnerLogo:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 16px 32px -12px rgba(124,92,255,.35)}
.partnerLogo img{height:26px;width:auto;max-width:104px;object-fit:contain;display:block}
@media(max-width:520px){.partnerLogo{height:52px;min-width:104px;padding:10px 14px}.partnerLogo img{height:20px}.partnerStripTrack{gap:14px;animation-duration:26s}}
@media(prefers-reduced-motion:reduce){.partnerStripTrack{animation:none}.partnerStripBar{overflow-x:auto}}

/* ---------- Stats-Bento (glühende Live-Kennzahlen) ---------- */
.statsBento{padding:64px 0 10px;position:relative}
.sbGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;z-index:1}
.sbCard{position:relative;overflow:hidden;padding:24px 22px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(160deg,#101522,#0a0d15);isolation:isolate}
.sbCard:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),#7c5cff33,transparent 72%);z-index:0}
.sbCard:hover:before{opacity:1}
.sbCard:after{content:"";position:absolute;width:150px;height:150px;right:-70px;top:-70px;border-radius:50%;background:#00d9ff17;filter:blur(24px);z-index:0}
.sbIcon{font-size:21px;margin-bottom:14px;position:relative;z-index:1;display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:11px;background:#ffffff08;border:1px solid var(--line)}
.sbNum{position:relative;z-index:1;font-size:30px;font-weight:850;letter-spacing:-.03em;background:linear-gradient(120deg,#fff,#aeb4c5);-webkit-background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.sbLabel{position:relative;z-index:1;margin-top:7px;color:var(--muted);font-size:12.5px;line-height:1.5;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sbTag{font-size:9px;letter-spacing:.08em;font-weight:800;color:#8e96ab;background:#ffffff08;border:1px solid var(--line);padding:2px 6px;border-radius:999px}
@media(max-width:900px){.sbGrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.sbGrid{grid-template-columns:1fr}.statsBento{padding:44px 0 4px}}

/* ---------- Bento-Umbau des bestehenden Feature-Grids (.ovGrid), nur Layout — Inhalte unverändert ---------- */
@media(min-width:851px){
  .ovGrid{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto auto;gap:14px}
  .ovGrid .ovCard{padding:30px 26px;border-radius:22px;position:relative}
  .ovGrid .ovCard:nth-child(1){grid-column:1 / span 7;grid-row:1 / span 2;background:linear-gradient(155deg,#141a2c,#0a0d15)}
  .ovGrid .ovCard:nth-child(2){grid-column:8 / span 5;grid-row:1}
  .ovGrid .ovCard:nth-child(3){grid-column:8 / span 5;grid-row:2}
  .ovGrid .ovCard:nth-child(4){grid-column:1 / span 12;grid-row:3}
  .ovGrid .ovCard:nth-child(1){display:flex;flex-direction:column;justify-content:center}
  .ovGrid .ovCard:nth-child(4){display:flex;flex-direction:column;justify-content:center;min-height:150px}
  .ovGrid .ovCard .ovIcon{font-size:28px;display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:13px;background:#ffffff08;border:1px solid var(--line);margin-bottom:14px}
  .ovGrid .ovCard:nth-child(1) h3,.ovGrid .ovCard:nth-child(4) h3{font-size:19px}
  .ovGrid .ovCard:nth-child(1):after,.ovGrid .ovCard:nth-child(4):after{content:"Meistgenutzt";position:absolute;top:18px;right:18px;opacity:1;font-size:9.5px;letter-spacing:.08em;font-weight:800;color:#27e7a4;background:#0e1420;border:1px solid #27e7a438;padding:4px 9px;border-radius:999px;z-index:2}
  .ovGrid .ovCard:nth-child(4):after{content:"Für Fortgeschrittene";color:#f1cf70;background:#0e1420;border-color:#f1cf7038}
}

/* ---------- Scroll-Reveal (wird generisch per JS auf bestehende Karten angewandt) ---------- */
.pReveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.pReveal.pInView{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.pReveal{opacity:1;transform:none;transition:none}}

/* ---------- Magnetischer Hero-CTA ---------- */
.magnetic{transition:transform .18s cubic-bezier(.16,1,.3,1)}
@media(hover:none){.magnetic{transition:none}}