/* =========================================================================
   WALYSER — HERO-BOOST (nur Startseite, additiv, überschreibt nichts an
   Funktion/IDs — nur Optik des ersten Abschnitts wird "krasser")
========================================================================= */

/* ---------- Mehr Luft + Tech-Grid-Textur im Hintergrund ---------- */
.hero{padding:120px 0 100px;isolation:isolate}
.hero:after{
  content:"";position:absolute;inset:-40px 0 0 0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 0%,transparent 72%);
}

/* ---------- Zusätzliche Tiefe: zwei driftende Farb-Orbs hinter allem ---------- */
.hero:before{
  content:"";position:absolute;top:-120px;left:-8%;z-index:-1;pointer-events:none;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,#00d9ff2e 0%,transparent 70%);
  filter:blur(50px);animation:heroOrbFloat 9s ease-in-out infinite;
}
@keyframes heroOrbFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,26px)}}

/* ---------- Eyebrow: von Fließtext zu leuchtender Badge-Pille ---------- */
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px 8px 12px;border-radius:999px;
  background:linear-gradient(120deg,#27e7a414,#00d9ff10);
  border:1px solid #27e7a440;
  box-shadow:0 0 24px -6px #27e7a44a;
  font-size:12.5px;letter-spacing:.1em;
}

/* ---------- Headline: etwas größer, schärfer, mit Tiefen-Schatten ---------- */
.hero h1{
  font-size:clamp(38px,4.6vw,62px);
  line-height:1.04;
  letter-spacing:-.045em;
  margin:22px 0 20px;
  text-shadow:0 8px 40px rgba(124,92,255,.2);
}
.hero .grad{filter:drop-shadow(0 0 26px #7c5cff66)}

/* ---------- Lead-Text: etwas größer & luftiger ---------- */
.hero .lead{font-size:18px;line-height:1.75;max-width:580px}

/* ---------- CTA-Buttons: mehr Präsenz + Glow-Hof ---------- */
.hero .actions{gap:14px}
.hero .actions .btn{padding:15px 24px;border-radius:13px;font-size:14.5px}
.hero .actions .btn.primary{
  position:relative;box-shadow:0 10px 34px -10px #7c5cff8f,0 0 44px -14px #00d9ff70;
}
.hero .actions .btn:not(.primary){
  background:rgba(255,255,255,.04);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
}
.hero .actions .btn:not(.primary):hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}

/* ---------- Trust-Zeile: kleine Icon-Chips statt reinem Text ---------- */
.hero .trustLine>span{padding:8px 13px 8px 10px;background:#ffffff06;border-color:#ffffff14}
.hero .trustLine>span i{
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;background:#27e7a41c;font-size:11px;
}

/* ---------- Grüne Häkchen statt Emoji (Trust-Zeile + CTA-Sub) ---------- */
.hero .tickOk{color:var(--green);font-weight:800;font-size:12px}
.hero .trustLine>span i.tickOk{font-size:11px}

/* ---------- Wallet-Karte: ruhiger Konturglow + kräftigere Tiefe ---------- */
.heroCardWrap{padding:2px}
.heroCardWrap:before{
  content:"";position:absolute;inset:0;border-radius:26px;padding:1.5px;z-index:0;
  background:linear-gradient(140deg,#7c5cff70,#ffffff10 40%,#00d9ff55);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.6;pointer-events:none;
}
.heroCard{box-shadow:0 40px 100px -24px #4a2f9e66,0 0 90px -34px #00d9ff3c}

@media(prefers-reduced-motion:reduce){.hero:before{animation:none}}

/* ---------- Feinschliff mobil ---------- */
@media(max-width:850px){
  .hero{padding:80px 0 60px}
  .hero:before{width:340px;height:340px}
}
@media(max-width:520px){
  .hero .lead{font-size:15.5px}
  .hero .actions .btn{padding:13px 18px;font-size:13.5px}
}