/* ─────────────────────────────────────────
   WolkNetz — Home page styles
───────────────────────────────────────── */

/* ═══ HERO ═══ */
.wn-hero {
    min-height:100svh; min-height:100vh;
    display:flex; align-items:center;
    background:linear-gradient(-45deg,#0a0820,#130f42,#1e1048,#07192e);
    background-size:400% 400%;
    animation:heroShift 15s ease infinite;
    padding:110px 0 70px;
    position:relative; overflow:hidden;
}
@keyframes heroShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.hero-glow-1 { position:absolute; top:-10%; right:-5%; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle,rgba(80,70,228,.3) 0%,transparent 65%); pointer-events:none; }
.hero-glow-2 { position:absolute; bottom:-15%; left:-8%; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(139,92,246,.22) 0%,transparent 65%); pointer-events:none; }
.hero-grid { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px); background-size:36px 36px; pointer-events:none; }
.hero-pill { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:var(--wn-r-pill); padding:6px 16px; font-size:12px; font-weight:600; color:rgba(255,255,255,.75); letter-spacing:.5px; backdrop-filter:blur(8px); margin-bottom:24px; }
.hero-pill .dot { width:7px; height:7px; border-radius:50%; background:#10b981; animation:wnPulse 2s ease infinite; }
@keyframes wnPulse { 0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,.25)} 50%{box-shadow:0 0 0 6px rgba(16,185,129,.08)} }
.wn-hero h1 { font-size:clamp(2.2rem,5vw,3.9rem); font-weight:800; letter-spacing:-1px; color:#fff; line-height:1.1; margin-bottom:20px; }
.wn-hero .hero-lead { color:rgba(255,255,255,.52); font-size:1.05rem; line-height:1.78; max-width:480px; margin-bottom:32px; }
.hero-stats { display:flex; flex-wrap:wrap; gap:16px; margin-top:40px; }
.hero-stat { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--wn-r-md); padding:14px 20px; backdrop-filter:blur(8px); }
.hero-stat .n { font-family:'Space Grotesk',sans-serif; font-size:1.65rem; font-weight:800; color:#fff; line-height:1; }
.hero-stat .l { font-size:12px; color:rgba(255,255,255,.42); margin-top:4px; font-weight:500; }

/* ═══ HERO CARD ═══ */
.hero-card { background:rgba(255,255,255,.97); border-radius:var(--wn-r-xl); box-shadow:0 32px 80px rgba(0,0,0,.35),0 0 0 1px rgba(80,70,228,.1); padding:36px 32px; }
.hero-card h4 { font-size:1.25rem; font-weight:800; color:var(--wn-dark); margin-bottom:4px; }
.hero-card .sub { font-size:13px; color:var(--wn-muted); margin-bottom:24px; }

/* ═══ STATS BAND ═══ */
.stats-band { background:var(--wn-light); border-top:1px solid var(--wn-border); border-bottom:1px solid var(--wn-border); padding:52px 0; }
.stat-card { text-align:center; }
.stat-card .counter-value { font-family:'Space Grotesk',sans-serif; font-size:3rem; font-weight:800; background:var(--wn-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.stat-card .suf { font-family:'Space Grotesk',sans-serif; font-size:2.4rem; font-weight:800; background:var(--wn-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-card p { font-size:14px; color:var(--wn-muted); margin-top:8px; margin-bottom:0; font-weight:500; }

/* ═══ PROCESS ═══ */
.proc-card { background:#fff; border:1px solid var(--wn-border); border-radius:var(--wn-r-lg); padding:32px 24px; text-align:center; height:100%; position:relative; overflow:hidden; transition:var(--wn-t); }
.proc-card:hover { box-shadow:var(--wn-shadow); border-color:rgba(var(--wn-primary-rgb),.2); transform:translateY(-4px); }
.proc-num { width:56px; height:56px; border-radius:50%; background:var(--wn-grad); color:#fff; font-family:'Space Grotesk',sans-serif; font-size:1.3rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin:0 auto 20px; box-shadow:0 8px 24px rgba(var(--wn-primary-rgb),.3); }
.proc-card h5 { font-size:17px; font-weight:700; color:var(--wn-dark); margin-bottom:10px; }
.proc-card p  { font-size:14px; color:var(--wn-muted); max-width:240px; margin-inline:auto; }
.proc-arrow { display:none; }
@media(min-width:768px){ .proc-arrow { display:flex; align-items:center; justify-content:center; padding-top:28px; } }

/* ═══ WHY US ═══ */
.why-card { display:flex; align-items:flex-start; gap:14px; padding:22px; background:#fff; border:1px solid var(--wn-border); border-radius:var(--wn-r-md); transition:var(--wn-t); }
.why-card:hover { box-shadow:var(--wn-shadow); border-color:rgba(var(--wn-primary-rgb),.15); }
.why-icon { width:46px; height:46px; border-radius:var(--wn-r-sm); flex-shrink:0; background:rgba(var(--wn-primary-rgb),.08); color:var(--wn-primary); display:flex; align-items:center; justify-content:center; font-size:20px; }
.why-card h5 { font-size:14.5px; font-weight:700; color:var(--wn-dark); margin-bottom:5px; }
.why-card p  { font-size:13.5px; color:var(--wn-muted); margin-bottom:0; }

/* ═══ CTA BAND ═══ */
.wn-cta { background:var(--wn-grad); padding:80px 0; position:relative; overflow:hidden; }
.wn-cta::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px); background-size:28px 28px; }
.wn-cta h2 { color:#fff; font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:800; letter-spacing:-.5px; margin-bottom:12px; }
.wn-cta p  { color:rgba(255,255,255,.62); font-size:1.05rem; margin-bottom:0; }