/* ==========================================================================
   9wickets — "Why Us" section REDESIGN v5 "Proof Grid" (loads LAST)
   --------------------------------------------------------------------------
   Supersedes why-split.css (v4 "Trust Split" — light panel, flat hairline-
   divided rows). Same brief as hero-v5 "Live Table": dark aurora shell,
   glowing yellow accents, glass cards instead of flat rows.
   Left column unchanged in structure (eyebrow, headline, lead, flagship
   stat, WhatsApp CTA) — just re-themed for dark. Right column: the six
   trust rows become individual glass cards in a 2x3 grid with hover lift
   + icon glow, instead of one bordered panel with hairline dividers.
   Reuses existing engines only — [data-reveal], [data-count]/data-bn,
   .vk-tilt, and the --d stagger delay already inline on every row (was
   unused by why-split.css; now driving the entrance animation below) —
   no new JS, no markup rewrite beyond the vk-w4-*→vk-w5-* class rename
   and vk-why--v4→vk-why--v5 on the section (same versioning convention
   as every earlier section swap).
   Scoped entirely under .vk-why--v5 / .vk-w5-*.
   ========================================================================== */

/* The shared `.vk-section` base rule caps max-width at var(--vk-max) and
   centers the SECTION element itself (not just its content), so a
   background painted on it was boxed in with cream page-background
   showing on both sides. Drop that box here — the background then fills
   the full viewport width — while `.vk-w5-split` below keeps the actual
   copy/cards centered and readable at 1220px, same full-bleed-bar fix as
   header-v3-dark-yellow.css used for the header pill. */
body.vk .vk-why--v5.vk-section {
    position: relative;
    overflow: hidden;
    max-width: none !important;
    width: 100%;
    margin: 0 !important;
    padding-top: clamp(28px, 3.2vw, 44px) !important;
    padding-bottom: clamp(28px, 3.2vw, 44px) !important;
    background: linear-gradient(180deg, #0B0906 0%, #14110A 55%, #17150F 100%) !important;
    border-top: 1px solid rgba(255, 199, 44, .14);
    border-bottom: 1px solid rgba(255, 199, 44, .14);
    isolation: isolate;
}
body.vk .vk-why--v5.vk-section::before {
    content: '';
    position: absolute;
    inset: -20% -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(36% 50% at 88% 10%, rgba(255, 199, 44, .16), transparent 68%),
        radial-gradient(34% 46% at 6% 90%, rgba(232, 162, 0, .12), transparent 65%);
    filter: blur(10px);
    animation: hv5w-aurora-drift 18s ease-in-out infinite alternate;
}
@keyframes hv5w-aurora-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(2%, -1.5%, 0) scale(1.04); }
}
body.vk .vk-why--v5 .vk-w5-split { position: relative; z-index: 1; }

body.vk .vk-w5-split {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    max-width: 1220px;
    margin: 0 auto;
}

/* ---------------------------- LEFT COLUMN ---------------------------- */
body.vk .vk-w5-left { text-align: left; }
body.vk .vk-why--v5 .vk-w5-left .vk-eyebrow {
    margin-bottom: 16px;
    color: #E9C266 !important;
}
body.vk .vk-w5-h2 {
    text-align: left;
    font-size: clamp(24px, 2.5vw, 34px);
    line-height: 1.28;
    margin-bottom: 12px;
    color: #FBF6EC !important;
}
body.vk .vk-w5-h2 em {
    font-style: normal;
    color: #FFC72C !important;
    text-shadow: 0 0 26px rgba(255, 199, 44, .3);
}
body.vk .vk-w5-lead {
    font-family: var(--vk-font-bn);
    color: #BFB6A0 !important;
    font-size: clamp(13.5px, 1.05vw, 15px);
    line-height: 1.7;
    margin: 0 0 22px;
    max-width: 40ch;
}

body.vk .vk-w5-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 22px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 199, 44, .22);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 16px;
    max-width: fit-content;
}
body.vk .vk-w5-stat__num {
    font-family: var(--vk-font-en, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1;
    background: linear-gradient(95deg, #FFE066 0%, #FFC72C 60%, #E8A200 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
}
body.vk .vk-w5-stat__lbl {
    font-size: 12.5px;
    line-height: 1.4;
    color: #C9BFA6;
    font-weight: 600;
    max-width: 16ch;
}

body.vk .vk-w5-left .vk-btn { white-space: nowrap; }

/* ---------------------------- RIGHT COLUMN — glass card grid ---------- */
body.vk .vk-w5-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

body.vk .vk-w5-row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 20px 20px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 199, 44, .14);
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: translateY(16px);
    animation: hv5w-rise .6s cubic-bezier(.2, .7, .15, 1) both;
    animation-delay: var(--d, 0s);
    transition: transform .35s cubic-bezier(.2, .7, .15, 1), border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
body.vk .vk-w5-row:hover {
    transform: translateY(-5px);
    background: rgba(255, 199, 44, .05);
    border-color: rgba(255, 199, 44, .38);
    box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .6), 0 0 30px -10px rgba(255, 199, 44, .25);
}
@keyframes hv5w-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

body.vk .vk-w5-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 199, 44, .1);
    border: 1px solid rgba(255, 199, 44, .28);
    color: #FFC72C;
    transition: transform .4s cubic-bezier(.2, .7, .15, 1), background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
body.vk .vk-w5-icon svg { width: 18px; height: 18px; }
body.vk .vk-w5-row:hover .vk-w5-icon {
    background: linear-gradient(135deg, #FFE066, #FFC72C);
    color: #0A0500;
    border-color: transparent;
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 8px 20px -6px rgba(255, 199, 44, .55);
}

/* wickets-home.css has a broad `body.vk h1,h2,h3,h4,h5{ color:#1A1813
   !important }` reset (1 class + 1 element = lower specificity than this
   2-class selector, but !important always beats non-!important regardless
   of specificity) — needs !important here too, same reason as the hero
   and header fixes. */
body.vk .vk-w5-row__title {
    font-size: 14.5px;
    font-weight: 700;
    color: #FBF6EC !important;
    margin: 3px 0 5px;
    line-height: 1.3;
}
body.vk .vk-w5-row__desc {
    font-size: 12.5px;
    line-height: 1.6;
    color: #A79D86 !important;
    margin: 0;
}

/* ---------------------------- RESPONSIVE ---------------------------- */
@media (max-width: 1100px) {
    body.vk .vk-w5-split { grid-template-columns: 1fr; gap: 30px; }
    body.vk .vk-w5-left, body.vk .vk-w5-h2, body.vk .vk-w5-lead { text-align: center; }
    body.vk .vk-w5-left { display: flex; flex-direction: column; align-items: center; }
    body.vk .vk-w5-stat { margin-inline: auto; }
}
@media (max-width: 640px) {
    body.vk .vk-why--v5.vk-section { padding-top: 28px !important; padding-bottom: 28px !important; }
    body.vk .vk-w5-right { grid-template-columns: 1fr; }
    body.vk .vk-w5-h2 { font-size: clamp(22px, 6.5vw, 26px); }
    body.vk .vk-w5-lead { max-width: none; }
    body.vk .vk-w5-row { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
    body.vk .vk-w5-row__desc { max-width: 34ch; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .vk-w5-row { animation: none !important; opacity: 1 !important; transform: none !important; }
    body.vk .vk-why--v5.vk-section::before { animation: none !important; }
}