/* ==========================================================================
   9wickets — "গেমিং প্ল্যাটফর্ম" REDESIGN v2 "Verified Gateway, Dark" (loads
   LAST, after platform-pills.css)
   --------------------------------------------------------------------------
   Same dark-aurora premium language as hero-v5/why-v5/verify-v3/live-v2,
   PLUS a new image panel (was copy + pills only, no photo) — same
   image-left/copy-right pattern as verify-v3, with the pill link list
   moved out of that two-column grid to its own full-width row below,
   matching this file's "in this way" instruction.
   Structural note: `.vk-platforms__inner` (wickets-home.css) is a 2-child
   grid; it used to hold (copy, pill-grid) — now holds (visual, copy), and
   `.vk-pp-grid` moves to be a direct sibling of `.vk-platforms__inner`
   inside `.vk-platforms` (still positioned via that section's own
   `position:relative; isolation:isolate`, so z-index:1 on `.vk-pp-grid`
   keeps working unchanged).
   Scoped under .vk-platforms (shell/copy) and .vk-pp-* (pills, unchanged
   classes) plus new .vk-platforms__visual/-glow/-ring/-frame/-chip.
   ========================================================================== */

/* Full-bleed background — same `.vk-section` max-width/centering fix as
   why-v5.css / verify-v3.css / live-v2.css. */
body.vk .vk-platforms.vk-section {
    position: relative;
    overflow: hidden;
    max-width: none !important;
    width: 100%;
    margin: 0 !important;
    padding-top: clamp(16px, 1.8vw, 24px) !important;
    padding-bottom: clamp(16px, 1.8vw, 24px) !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-platforms .vk-platforms__aura {
    background:
        radial-gradient(34% 48% at 10% 15%, rgba(255, 199, 44, .16), transparent 68%),
        radial-gradient(32% 44% at 92% 85%, rgba(232, 162, 0, .12), transparent 65%);
    filter: blur(10px);
    opacity: 1;
    animation: pf2-aurora-drift 18s ease-in-out infinite alternate;
}
@keyframes pf2-aurora-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-2%, 1.5%, 0) scale(1.04); }
}

/* ---- inner grid now holds (visual, copy) instead of (copy, pills) ---- */
body.vk .vk-platforms__inner {
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    gap: 28px !important;
}
@media (max-width: 900px) {
    body.vk .vk-platforms__inner { grid-template-columns: 1fr; }
}

/* ---- copy column (also tightened: margins/line-height trimmed to shave
   vertical space toward the "one window" target) ---- */
body.vk .vk-platforms .vk-eyebrow--shield {
    background: linear-gradient(135deg, rgba(255, 199, 44, .14), rgba(255, 199, 44, .08));
    border-color: rgba(255, 199, 44, .32);
    color: #E9C266 !important;
    margin-bottom: 8px !important;
}
body.vk .vk-platforms .vk-eyebrow--shield svg { color: #FFC72C !important; }
body.vk .vk-platforms .vk-h2 {
    color: #FBF6EC !important;
    margin-bottom: 10px !important;
}
body.vk .vk-platforms .vk-h2 em {
    font-style: normal;
    color: #FFC72C !important;
    text-shadow: 0 0 26px rgba(255, 199, 44, .3);
}
/* The shared `.vk-section .vk-lead{ max-width:62ch; margin-left:auto;
   margin-right:auto }` rule centers the width-capped paragraph block —
   correct for the centered mobile layout, but it pulls the lead's left
   edge away from the eyebrow/heading above it in this left-aligned
   two-column split, same bug fixed in verify-v3.css. */
body.vk .vk-platforms .vk-lead {
    color: #BFB6A0 !important;
    line-height: 1.55 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
@media (max-width: 1040px) {
    body.vk .vk-platforms .vk-lead {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
body.vk .vk-platforms__assure {
    margin-top: 14px !important;
}
body.vk .vk-platforms__assure li {
    background: rgba(255, 255, 255, .03) !important;
    border-color: rgba(255, 199, 44, .18) !important;
    color: #DCD3BE !important;
}
body.vk .vk-platforms__assure li svg { color: #FFC72C !important; }

/* ---- visual column: framed photo, glow, floating chips (same language
   as hero-v5/verify-v3) ---- */
body.vk .vk-platforms__visual {
    position: relative;
    width: min(100%, 220px);
    padding: 8px;
    justify-self: center;
}
body.vk .vk-platforms__glow {
    position: absolute;
    inset: -6% -10%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(58% 55% at 50% 42%, rgba(255, 199, 44, .3), transparent 70%);
    filter: blur(36px);
    animation: pf2-glow-pulse 4.5s ease-in-out infinite;
}
@keyframes pf2-glow-pulse {
    0%, 100% { opacity: .75; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.06); }
}
body.vk .vk-platforms__ring {
    position: absolute;
    inset: 10px;
    z-index: 1;
    border-radius: 30px;
    pointer-events: none;
    background: conic-gradient(from var(--pf2-ring-angle, 0deg), #FFC72C, #7A5200 24%, #7A5200 76%, #E8A200, #FFC72C);
    opacity: .85;
    animation: pf2-ring-spin 9s linear infinite;
}
@property --pf2-ring-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes pf2-ring-spin {
    to { --pf2-ring-angle: 360deg; }
}
body.vk .vk-platforms__frame {
    position: relative;
    z-index: 2;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 199, 44, .28);
    box-shadow: 0 30px 64px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4);
    transition: box-shadow .4s ease;
}
body.vk .vk-platforms__frame:hover {
    box-shadow: 0 36px 76px -16px rgba(0, 0, 0, .68), 0 0 40px -8px rgba(255, 199, 44, .32);
}
body.vk .vk-platforms__frame img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
body.vk .vk-platforms__chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: #F5EFE0;
    background: rgba(11, 9, 6, .72);
    border: 1px solid rgba(255, 199, 44, .28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    animation: pf2-chip-float 5.5s ease-in-out infinite;
}
body.vk .vk-platforms__chip svg { color: #FFC72C; flex-shrink: 0; }
body.vk .vk-platforms__chip--top { top: 16px; left: 16px; }
body.vk .vk-platforms__chip--bottom { bottom: 16px; right: 16px; animation-delay: -2.7s; }
/* Moved out of .vk-platforms__frame (which clips via overflow:hidden) to
   be a sibling inside .vk-platforms__visual instead — floats fully above
   the photo's top edge rather than overlapping it. */
body.vk .vk-platforms__chip--outside {
    top: -14px;
    left: 16px;
    z-index: 4;
}
body.vk .vk-platforms__chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .22);
}
@keyframes pf2-chip-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* ---- pill grid: now a full-width block below .vk-platforms__inner.
   Compacted for "one window": primary pill spans full width on its own
   row, the 3 quieter mirror pills sit in a row below instead of stacking
   all 4 vertically — same content, roughly half the vertical space. ---- */
body.vk .vk-platforms .vk-pp-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 900px;
    margin: 14px auto 0;
}
body.vk .vk-platforms .vk-pp-pill--primary {
    grid-column: 1 / -1;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
body.vk .vk-platforms .vk-pp-pill--mirror {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
body.vk .vk-platforms .vk-pp-pill--mirror .vk-pp-pill__num { display: none; }
body.vk .vk-platforms .vk-pp-pill--mirror .vk-pp-pill__chips { display: none; }
body.vk .vk-platforms .vk-pp-pill--mirror .vk-pp-pill__body { gap: 1px; }
body.vk .vk-platforms .vk-pp-pill--mirror .vk-pp-pill__go {
    padding: 6px 10px;
}
body.vk .vk-platforms .vk-pp-pill--mirror .vk-pp-pill__go-label { display: none; }
@media (max-width: 720px) {
    body.vk .vk-platforms .vk-pp-grid { grid-template-columns: 1fr; }
}
body.vk .vk-pp-pill {
    background: rgba(255, 255, 255, .03) !important;
    border-color: rgba(255, 199, 44, .16) !important;
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .5) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
body.vk .vk-pp-pill:hover,
body.vk .vk-pp-pill:focus-visible {
    border-color: rgba(255, 199, 44, .4) !important;
    box-shadow: 0 20px 42px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 199, 44, .16) inset !important;
}
body.vk .vk-pp-pill__num { color: #8D8570 !important; }
body.vk .vk-pp-pill__icon {
    background: rgba(255, 199, 44, .1) !important;
    border-color: rgba(255, 199, 44, .24) !important;
    color: #FFC72C !important;
}
body.vk .vk-pp-pill__title { color: #FBF6EC !important; }
body.vk .vk-pp-pill__desc { color: #A79D86 !important; }
body.vk .vk-pp-pill__chip {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 199, 44, .16) !important;
    color: #A79D86 !important;
}
body.vk .vk-pp-pill__go {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 199, 44, .2) !important;
    color: #F5EFE0 !important;
}
body.vk .vk-pp-pill:hover .vk-pp-pill__go {
    background: linear-gradient(135deg, #FFE066, #FFC72C) !important;
    color: #0A0500 !important;
}
body.vk .vk-pp-pill--primary {
    background: linear-gradient(135deg, rgba(255, 199, 44, .16) 0%, rgba(255, 255, 255, .04) 46%, rgba(255, 255, 255, .02) 100%) !important;
    border-color: rgba(255, 199, 44, .35) !important;
}
body.vk .vk-pp-pill--primary .vk-pp-pill__icon {
    background: linear-gradient(135deg, #FFE066, #FFC72C) !important;
    color: #0A0500 !important;
}
body.vk .vk-pp-pill--mirror .vk-pp-pill__icon {
    background: rgba(255, 255, 255, .03) !important;
    border-color: rgba(255, 199, 44, .16) !important;
    color: #A79D86 !important;
}

body.vk .vk-platforms .vk-pp-pill--mirror .vk-pp-pill__icon {
    width: 32px !important;
    height: 32px !important;
}
body.vk .vk-platforms .vk-pp-pill--mirror .vk-pp-pill__icon svg { width: 14px !important; height: 14px !important; }
body.vk .vk-platforms .vk-pp-pill--mirror .vk-pp-pill__title { font-size: 13px !important; }

@media (max-width: 1040px) {
    body.vk .vk-platforms .vk-pp-grid { max-width: 640px; margin: 20px auto 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .vk-platforms .vk-platforms__aura { animation: none !important; }
    body.vk .vk-platforms__glow,
    body.vk .vk-platforms__ring,
    body.vk .vk-platforms__chip { animation: none !important; }
}