/* ===== Hero glow orbs ===== */
.hero-glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;will-change:transform}
.hero-glow-1{width:600px;height:600px;background:rgba(126,217,87,.12);top:-120px;right:-80px;animation:drift1 14s ease-in-out infinite}
.hero-glow-2{width:400px;height:400px;background:rgba(126,217,87,.08);bottom:-100px;left:-60px;animation:drift2 18s ease-in-out infinite}
.hero-glow-3{width:300px;height:300px;background:rgba(126,217,87,.06);top:40%;left:50%;animation:drift3 12s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,20px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-25px)}}
@keyframes drift3{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-50%) translate(15px,20px)}}

/* ===== Grid pattern ===== */
.grid-pattern{
  background-image:
    linear-gradient(rgba(126,217,87,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,217,87,.03) 1px, transparent 1px);
  background-size:64px 64px;
}

/* ===== Noise ===== */
.noise::after{content:'';position:absolute;inset:0;opacity:.025;pointer-events:none;
  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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:128px 128px}

/* ===== Section divider ===== */
.section-line{height:1px;background:linear-gradient(90deg,transparent,rgba(126,217,87,.15),transparent)}

/* ===== Cards (dark-bg) ===== */
.card-glow{position:relative;background:rgba(15,23,42,.6);border:1px solid rgba(126,217,87,.08);backdrop-filter:blur(12px);transition:all .35s cubic-bezier(.16,1,.3,1);overflow:hidden}
.card-glow:hover{border-color:rgba(126,217,87,.25);box-shadow:0 0 40px rgba(126,217,87,.06),0 8px 32px rgba(0,0,0,.3);transform:translateY(-2px)}

/* ===== Badge shimmer ===== */
.badge-shimmer{position:relative;overflow:hidden}
.badge-shimmer::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:shimmer 4s ease-in-out infinite}
@keyframes shimmer{0%,100%{left:-100%}50%{left:150%}}

/* ===== CTA glow ===== */
.cta-glow{position:relative;overflow:hidden}
.cta-glow::before{content:'';position:absolute;inset:-2px;background:linear-gradient(135deg,rgba(126,217,87,.6),rgba(126,217,87,0),rgba(126,217,87,.4));border-radius:inherit;z-index:-1;opacity:0;transition:opacity .3s}
.cta-glow:hover::before{opacity:1}

/* ===== Article body (Detail-Seite) ===== */
.article-body{color:#cbd5e1;font-size:1.0625rem;line-height:1.75;font-weight:300}
.article-body h1,.article-body h2,.article-body h3,.article-body h4{color:#f1f5f9;font-weight:700;letter-spacing:-.02em;margin-top:2.25rem;margin-bottom:.875rem;line-height:1.2}
.article-body h1{font-size:2rem}
.article-body h2{font-size:1.625rem}
.article-body h3{font-size:1.25rem}
.article-body h4{font-size:1.05rem}
.article-body p{margin:0 0 1.25rem}
.article-body a{color:#7ed957;text-decoration:underline;text-decoration-color:rgba(126,217,87,.4);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.article-body a:hover{color:#a3e878;text-decoration-color:#7ed957}
.article-body strong{color:#f1f5f9;font-weight:600}
.article-body em{color:#e2e8f0}
.article-body ul,.article-body ol{margin:0 0 1.25rem;padding-left:1.5rem}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body li{margin-bottom:.5rem}
.article-body li::marker{color:#7ed957}
.article-body img{max-width:100%;height:auto;border-radius:.75rem;margin:1.75rem 0;border:1px solid rgba(126,217,87,.08)}
.article-body figure{margin:1.75rem 0}
.article-body figcaption{text-align:center;font-size:.875rem;color:#64748b;margin-top:.5rem}
.article-body blockquote{border-left:3px solid #7ed957;padding:.25rem 0 .25rem 1.25rem;margin:1.5rem 0;color:#94a3b8;font-style:italic;background:rgba(126,217,87,.04);border-radius:0 .5rem .5rem 0}
.article-body code{background:rgba(126,217,87,.08);color:#a3e878;padding:.15em .4em;border-radius:.3em;font-family:'JetBrains Mono',monospace;font-size:.92em}
.article-body pre{background:rgba(6,10,20,.8);border:1px solid rgba(126,217,87,.08);border-radius:.75rem;padding:1.25rem;overflow-x:auto;margin:1.5rem 0;font-family:'JetBrains Mono',monospace;font-size:.9em;line-height:1.6}
.article-body pre code{background:transparent;padding:0;color:#e2e8f0}
.article-body hr{border:0;height:1px;background:linear-gradient(90deg,transparent,rgba(126,217,87,.2),transparent);margin:2.5rem 0}
.article-body table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95em}
.article-body th,.article-body td{border:1px solid rgba(126,217,87,.1);padding:.6rem .85rem;text-align:left}
.article-body th{background:rgba(126,217,87,.05);color:#f1f5f9;font-weight:600}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}

/* ===== Skeleton ===== */
.skeleton{background:linear-gradient(90deg,rgba(126,217,87,.04) 0%,rgba(126,217,87,.1) 50%,rgba(126,217,87,.04) 100%);background-size:200% 100%;animation:skel 1.4s ease-in-out infinite}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== Tags ===== */
.tag-pill{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:9999px;font-size:.7rem;font-weight:600;background:rgba(126,217,87,.1);color:#7ed957;border:1px solid rgba(126,217,87,.18);text-transform:uppercase;letter-spacing:.04em}