/* ── VK REWARDS ─────────────────────────────── */

.vk-rw{position:relative;padding:80px 24px 72px;background:radial-gradient(ellipse at 50% 0%,#0d0d0d 0%,#000 70%);text-align:center;overflow:hidden}

.vk-rw::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.04'/%3E%3C/svg%3E");pointer-events:none;z-index:0}

.vk-rw::after{content:'';position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:600px;height:360px;background:radial-gradient(ellipse,rgba(170,255,0,.06) 0%,transparent 70%);pointer-events:none;z-index:0}

.vk-rw>*{position:relative;z-index:1}



/* ── eyebrow ── */

.vk-rw__eye{display:inline-flex;align-items:center;gap:7px;background:rgba(170,255,0,.04);border:1px solid rgba(170,255,0,.12);padding:6px 16px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#AAFF00;margin-bottom:20px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

.vk-rw__eye svg{width:13px;height:13px;fill:#AAFF00;animation:vkRwPulse 2.5s ease-in-out infinite}

@keyframes vkRwPulse{0%,100%{opacity:1}50%{opacity:.4}}



/* ── heading ── */

.vk-rw__title{font-family:'Bebas Neue',sans-serif;font-size:clamp(44px,7vw,72px);color:#fff;letter-spacing:.02em;line-height:.9;margin-bottom:16px}

.vk-rw__title em{font-style:normal;color:#AAFF00;position:relative}

.vk-rw__title em::after{content:'';position:absolute;bottom:2px;left:0;right:0;height:3px;background:#AAFF00;border-radius:2px;opacity:.35}

.vk-rw__sub{font-size:14px;color:#777;max-width:480px;margin:0 auto 48px;line-height:1.75}



/* ── connector line between steps ── */

.vk-rw__steps-wrap{position:relative;max-width:940px;margin:0 auto 52px}

.vk-rw__connector{position:absolute;top:48px;left:calc(16.66% + 20px);right:calc(16.66% + 20px);height:1px;background:linear-gradient(90deg,rgba(170,255,0,.08),rgba(170,255,0,.2),rgba(170,255,0,.08));z-index:0}



/* ── steps grid ── */

.vk-rw__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;z-index:1}

.vk-rw__step{background:linear-gradient(165deg,#0e0e0e 0%,#080808 100%);border:1px solid #1a1a1a;border-radius:14px;padding:34px 24px 30px;text-align:center;transition:border-color .35s,transform .3s,box-shadow .35s}

.vk-rw__step:hover{border-color:rgba(170,255,0,.25);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px rgba(170,255,0,.08)}

.vk-rw__step-num{width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;background:rgba(170,255,0,.06);border:1px solid rgba(170,255,0,.12);border-radius:50%;font-family:'Bebas Neue',sans-serif;font-size:20px;color:#AAFF00;transition:all .35s;position:relative}

.vk-rw__step-num::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(170,255,0,.06);transition:all .35s}

.vk-rw__step:hover .vk-rw__step-num{background:rgba(170,255,0,.12);border-color:rgba(170,255,0,.3);box-shadow:0 0 24px rgba(170,255,0,.15)}

.vk-rw__step:hover .vk-rw__step-num::after{inset:-8px;border-color:rgba(170,255,0,.1)}

.vk-rw__step-title{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#fff;margin-bottom:10px}

.vk-rw__step-desc{font-size:12.5px;color:#777;line-height:1.7}

.vk-rw__step-desc strong{color:#AAFF00;font-weight:700}



/* ── section label ── */

.vk-rw__label{display:inline-flex;align-items:center;gap:8px;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#555;margin-bottom:24px}

.vk-rw__label::before,.vk-rw__label::after{content:'';width:28px;height:1px;background:linear-gradient(90deg,transparent,#333)}

.vk-rw__label::before{background:linear-gradient(90deg,#333,transparent)}



/* ── tiers grid ── */

.vk-rw__tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:940px;margin:0 auto}

.vk-rw__tier{background:linear-gradient(165deg,#0e0e0e 0%,#080808 100%);border:1px solid #1a1a1a;border-radius:14px;padding:28px 16px 24px;text-align:center;transition:border-color .35s,transform .3s,box-shadow .35s;position:relative;overflow:hidden}

.vk-rw__tier::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(170,255,0,.2),transparent);opacity:0;transition:opacity .35s}

.vk-rw__tier:hover{border-color:rgba(170,255,0,.25);transform:translateY(-5px);box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 0 1px rgba(170,255,0,.08)}

.vk-rw__tier:hover::before{opacity:1}

.vk-rw__tier-icon{font-size:32px;display:block;margin-bottom:14px;transition:transform .35s}

.vk-rw__tier:hover .vk-rw__tier-icon{transform:scale(1.2) translateY(-2px)}

.vk-rw__tier-pts{font-family:'Bebas Neue',sans-serif;font-size:38px;color:#AAFF00;line-height:1;margin-bottom:6px;transition:text-shadow .35s}

.vk-rw__tier:hover .vk-rw__tier-pts{text-shadow:0 0 20px rgba(170,255,0,.3)}

.vk-rw__tier-pts span{font-size:11px;color:#555;font-family:'Inter',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-left:2px}

.vk-rw__tier-val{font-size:11px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.1em;margin-top:4px;padding-top:10px;border-top:1px solid #1a1a1a}



/* ── progress hint ── */

.vk-rw__progress{display:flex;align-items:center;justify-content:center;gap:0;max-width:940px;margin:20px auto 0}

.vk-rw__progress-seg{flex:1;height:3px;background:#111;position:relative;overflow:hidden}

.vk-rw__progress-seg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(170,255,0,.15),rgba(170,255,0,.3));transform:scaleX(0);transform-origin:left;transition:transform .6s ease}

.vk-rw__tiers:hover ~ .vk-rw__progress .vk-rw__progress-seg::after{transform:scaleX(1)}

.vk-rw__progress-dot{width:7px;height:7px;border-radius:50%;background:#1a1a1a;border:1px solid #333;flex-shrink:0;transition:all .35s}

.vk-rw__tiers:hover ~ .vk-rw__progress .vk-rw__progress-dot{background:rgba(170,255,0,.2);border-color:rgba(170,255,0,.3)}



/* ── CTA button ── */

.vk-rw__cta{margin-top:44px}

.vk-rw__btn{display:inline-flex;align-items:center;gap:10px;padding:16px 40px;background:rgba(170,255,0,.05);border:1px solid rgba(170,255,0,.15);border-radius:6px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#AAFF00 !important;text-decoration:none !important;transition:all .3s;position:relative;overflow:hidden}

.vk-rw__btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(170,255,0,.08),transparent 50%);opacity:0;transition:opacity .3s}

.vk-rw__btn:hover{background:#AAFF00;color:#000 !important;box-shadow:0 0 32px rgba(170,255,0,.35),0 4px 16px rgba(170,255,0,.2);transform:translateY(-1px)}

.vk-rw__btn:hover::before{opacity:1}

.vk-rw__btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.5;fill:none;transition:transform .3s}

.vk-rw__btn:hover svg{transform:translateX(4px)}



/* ── responsive ── */

@media(max-width:768px){

  .vk-rw{padding:60px 18px 52px}

  .vk-rw__steps{grid-template-columns:1fr;gap:12px}

  .vk-rw__connector{display:none}

  .vk-rw__tiers{grid-template-columns:repeat(2,1fr);gap:10px;max-width:100%}

  .vk-rw__step{padding:26px 20px}

  .vk-rw__tier{padding:22px 14px}

  .vk-rw__progress{display:none}

  .vk-rw__sub{margin-bottom:36px}

  .vk-rw__steps-wrap{margin-bottom:40px}

}

@media(max-width:400px){

  .vk-rw__tiers{grid-template-columns:repeat(2,1fr)}

}

@media(prefers-reduced-motion:reduce){

  .vk-rw__step,.vk-rw__tier,.vk-rw__tier-icon,.vk-rw__btn svg,.vk-rw__eye svg{transition:none !important;transform:none !important;animation:none !important}

}