/* ── BASE ── */

.vk-ab {

 position: relative;

 background: #000000;

 overflow: hidden;

 isolation: isolate;

 }



.vk-ab__grain {

 position: absolute;

 inset: 0;

 z-index: 0;

 opacity: 0.03;

 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='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

 background-size: 180px;

 pointer-events: none;

 }



.vk-ab__wrap {

 display: grid;

 grid-template-columns: 1fr 1fr;

 min-height: 480px;

 position: relative;

 z-index: 1;

 }



 /* ── LEFT ── */

.vk-ab__left {

 padding: 80px 60px 80px 44px;

 display: flex;

 flex-direction: column;

 justify-content: center;

 border-right: 1px solid rgba(255,255,255,0.04);

 position: relative;

 }



 /* Lime accent bar on left edge */

.vk-ab__accent-bar {

 position: absolute;

 left: 0;

 top: 60px;

 bottom: 60px;

 width: 3px;

 background: linear-gradient(to bottom, transparent, #AAFF00 25%, #AAFF00 75%, transparent);

 opacity: 0.35;

 border-radius: 2px;

 }



.vk-ab__eye {

 font-family: 'Inter', -apple-system, sans-serif;

 font-size: 10px;

 font-weight: 700;

 letter-spacing: 0.18em;

 text-transform: uppercase;

 color: #AAFF00;

 margin-bottom: 14px;

 display: flex;

 align-items: center;

 gap: 10px;

 }

.vk-ab__eye-line {

 width: 22px;

 height: 2px;

 background: #AAFF00;

 display: block;

 flex-shrink: 0;

 border-radius: 1px;

 }



.vk-ab__title {

 font-family: 'Bebas Neue', sans-serif;

 font-size: clamp(42px, 4.5vw, 64px);

 line-height: 0.95;

 text-transform: uppercase;

 letter-spacing: 0.02em;

 color: #FFFFFF;

 margin: 0 0 24px 0;

 }



.vk-ab__para {

 font-family: 'Inter', -apple-system, sans-serif;

 font-size: 15px;

 color: #888888;

 line-height: 1.85;

 margin: 0 0 34px 0;

 max-width: 500px;

 }



 /* ── FEATURES ── */

.vk-ab__features {

 display: flex;

 flex-direction: column;

 gap: 18px;

 margin-bottom: 38px;

 }



.vk-ab__feat {

 display: flex;

 align-items: flex-start;

 gap: 14px;

 transition: transform 0.3s ease;

 }

.vk-ab__feat:hover {

 transform: translateX(4px);

 }



.vk-ab__feat-icon {

 width: 36px;

 height: 36px;

 background: rgba(170,255,0,0.05);

 border: 1px solid rgba(170,255,0,0.1);

 border-radius: 8px;

 display: flex;

 align-items: center;

 justify-content: center;

 color: #AAFF00;

 flex-shrink: 0;

 margin-top: 1px;

 transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;

 }

.vk-ab__feat:hover.vk-ab__feat-icon {

 background: rgba(170,255,0,0.08);

 border-color: rgba(170,255,0,0.2);

 box-shadow: 0 0 14px rgba(170,255,0,0.08);

 }



.vk-ab__feat-text {

 display: flex;

 flex-direction: column;

 gap: 2px;

 }

.vk-ab__feat-text strong {

 font-family: 'Inter', -apple-system, sans-serif;

 font-size: 13px;

 font-weight: 700;

 color: #FFFFFF;

 letter-spacing: 0.01em;

 transition: color 0.3s ease;

 }

.vk-ab__feat:hover.vk-ab__feat-text strong {

 color: #AAFF00;

 }

.vk-ab__feat-text span {

 font-family: 'Inter', -apple-system, sans-serif;

 font-size: 12px;

 color: #666666;

 line-height: 1.4;

 }



 /* ── CTA BUTTON ── */

.vk-ab__btn {

 display: inline-flex;

 align-items: center;

 align-self: flex-start;

 gap: 10px;

 padding: 14px 30px;

 background: #AAFF00;

 color: #000000;

 font-family: 'Inter', -apple-system, sans-serif;

 font-size: 12px;

 font-weight: 900;

 letter-spacing: 0.09em;

 text-transform: uppercase;

 text-decoration: none;

 border-radius: 6px;

 border: 2px solid #AAFF00;

 transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

 box-shadow: 0 2px 12px rgba(170,255,0,0.15);

 }

.vk-ab__btn:hover {

 background: #BBFF33;

 border-color: #BBFF33;

 box-shadow: 0 4px 24px rgba(170,255,0,0.25);

 transform: translateY(-2px);

 }

.vk-ab__btn svg {

 transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

 }

.vk-ab__btn:hover svg {

 transform: translateX(4px);

 }



 /* ── RIGHT: STATS ── */

.vk-ab__right {

 display: grid;

 grid-template-columns: 1fr 1fr;

 grid-template-rows: 1fr 1fr;

 gap: 2px;

 background: rgba(255,255,255,0.03);

 }



.vk-ab__stat {

 background: #070707;

 display: flex;

 flex-direction: column;

 align-items: center;

 justify-content: center;

 padding: 44px 24px;

 text-align: center;

 position: relative;

 overflow: hidden;

 transition: background 0.35s ease;

 }

.vk-ab__stat:hover {

 background: #0F0F0F;

 }



 /* Glow on hover */

.vk-ab__stat-glow {

 position: absolute;

 inset: 0;

 background: radial-gradient(ellipse at center, rgba(170,255,0,0.05) 0%, transparent 65%);

 opacity: 0;

 transition: opacity 0.4s ease;

 pointer-events: none;

 }

.vk-ab__stat:hover.vk-ab__stat-glow {

 opacity: 1;

 }



.vk-ab__num {

 font-family: 'Bebas Neue', sans-serif;

 font-size: clamp(50px, 5vw, 68px);

 color: #AAFF00;

 line-height: 1;

 margin-bottom: 10px;

 position: relative;

 z-index: 1;

 transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

 }

.vk-ab__stat:hover.vk-ab__num {

 transform: scale(1.08);

 }



.vk-ab__lbl {

 font-family: 'Inter', -apple-system, sans-serif;

 font-size: 10px;

 font-weight: 700;

 letter-spacing: 0.1em;

 text-transform: uppercase;

 color: #555555;

 position: relative;

 z-index: 1;

 transition: color 0.3s ease;

 }

.vk-ab__stat:hover.vk-ab__lbl {

 color: #999999;

 }



 /* ── DIVIDER ── */

.vk-ab__divider {

 height: 1px;

 background: linear-gradient(90deg, transparent 0%, rgba(170,255,0,0.25) 25%, rgba(170,255,0,0.4) 50%, rgba(170,255,0,0.25) 75%, transparent 100%);

 position: relative;

 z-index: 1;

 }



 /* ── SCROLL REVEAL ── */

.vk-ab-reveal {

 opacity: 0;

 transform: translateY(22px);

 transition:

 opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),

 transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

 transition-delay: calc(var(--ab-i, 0) * 0.12s);

 }

.vk-ab-reveal.is-visible {

 opacity: 1;

 transform: translateY(0);

 }



 /* ── RESPONSIVE ── */

 @media (max-width: 960px) {

.vk-ab__wrap {

 grid-template-columns: 1fr;

 }

.vk-ab__left {

 padding: 60px 28px;

 border-right: none;

 }

.vk-ab__accent-bar { display: none; }

.vk-ab__right {

 grid-template-columns: repeat(4, 1fr);

 grid-template-rows: 1fr;

 }

.vk-ab__stat { padding: 32px 16px; }

.vk-ab__num { font-size: 42px; }

 }



 @media (max-width: 520px) {

.vk-ab__left { padding: 48px 16px; }

.vk-ab__para { font-size: 14px; }

.vk-ab__right {

 grid-template-columns: repeat(2, 1fr);

 grid-template-rows: auto;

 }

.vk-ab__stat { padding: 28px 14px; }

.vk-ab__num { font-size: 38px; }

.vk-ab__lbl { font-size: 9px; }

.vk-ab__feat-icon { width: 32px; height: 32px; border-radius: 6px; }

.vk-ab__feat-text strong { font-size: 12px; }

.vk-ab__feat-text span { font-size: 11px; }

.vk-ab__btn { padding: 12px 24px; font-size: 11px; }

 }



 @media (max-width: 375px) {

.vk-ab__left { padding: 40px 14px; }

.vk-ab__num { font-size: 34px; }

.vk-ab__stat { padding: 24px 10px; }

 }



 /* ── ACCESSIBILITY ── */

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

.vk-ab-reveal { opacity: 1; transform: none; transition: none; }

.vk-ab__num { transition: none; }

.vk-ab__feat { transition: none; }

.vk-ab__btn { transition: none; }

.vk-ab__stat-glow { transition: none; }

 }