/* ==================================================================
   HOME v2 LAYOUT PASS — per-section layout redesigns, glass style.
   Each block below is scoped to its own new class prefix so sections
   can't bleed into each other. Consolidated into one file (rather than
   one file per section) to keep the enqueue chain simple; glass-system.css
   (loaded just before this) provides the shared .gl-* utilities used
   throughout.
   ================================================================== */

/* ---------- vp0002 — Agent categories: 2x2 bento tile grid ---------- */
.ac2-bento{ position: relative; }
.ac2-grid{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; margin-top: 36px;
  max-width: 1100px; margin-left: auto; margin-right: auto;
}
.ac2-tile{
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; text-decoration: none;
}
.ac2-tile__top{ display: flex; align-items: center; justify-content: space-between; }
.ac2-tile__icon{ width: 40px; height: 40px; }
/* Each of the 4 category tiles gets its own gold-family shade instead of one
   flat gold repeated across the grid — still one cohesive palette, just
   varied enough that the 2x2 bento reads as distinct categories at a glance. */
.ac2-grid .ac2-tile:nth-child(1) .ac2-tile__icon{ background: linear-gradient(135deg,#FFE9A8,#FFC72C 60%,#E8A200); color:#1A1813; }
.ac2-grid .ac2-tile:nth-child(2) .ac2-tile__icon{ background: linear-gradient(135deg,#F3D98A,#E8A200 60%,#C8860B); color:#1A1813; }
.ac2-grid .ac2-tile:nth-child(3) .ac2-tile__icon{ background: linear-gradient(135deg,#D9B666,#B5830F 60%,#8A5A0A); color:#FFF3D6; }
.ac2-grid .ac2-tile:nth-child(4) .ac2-tile__icon{ background: linear-gradient(135deg,#C9A464,#8A5A0A 60%,#5C3D08); color:#FFF3D6; }
.ac2-grid .ac2-tile:nth-child(1){ border-color: rgba(255,199,44,0.30) !important; }
.ac2-grid .ac2-tile:nth-child(1):hover{ box-shadow: 0 22px 50px rgba(255,199,44,0.18), inset 0 1px 0 rgba(255,199,44,0.22) !important; }
.ac2-grid .ac2-tile:nth-child(2){ border-color: rgba(232,162,0,0.30) !important; }
.ac2-grid .ac2-tile:nth-child(2):hover{ box-shadow: 0 22px 50px rgba(232,162,0,0.18), inset 0 1px 0 rgba(232,162,0,0.22) !important; }
.ac2-grid .ac2-tile:nth-child(3){ border-color: rgba(181,131,15,0.35) !important; }
.ac2-grid .ac2-tile:nth-child(3):hover{ box-shadow: 0 22px 50px rgba(181,131,15,0.22), inset 0 1px 0 rgba(181,131,15,0.26) !important; }
.ac2-grid .ac2-tile:nth-child(4){ border-color: rgba(138,90,10,0.4) !important; }
.ac2-grid .ac2-tile:nth-child(4):hover{ box-shadow: 0 22px 50px rgba(138,90,10,0.26), inset 0 1px 0 rgba(138,90,10,0.3) !important; }
.ac2-grid .ac2-tile:nth-child(1) .ac2-tile__badge{ color: #FFC72C; background: rgba(255,199,44,0.14); }
.ac2-grid .ac2-tile:nth-child(2) .ac2-tile__badge{ color: #E8A200; background: rgba(232,162,0,0.14); }
.ac2-grid .ac2-tile:nth-child(3) .ac2-tile__badge{ color: #D9B666; background: rgba(181,131,15,0.16); }
.ac2-grid .ac2-tile:nth-child(4) .ac2-tile__badge{ color: #C9A464; background: rgba(138,90,10,0.2); }
.ac2-tile__badge{
  font-family: var(--vk-font-en); font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: #C9BFA8; background: rgba(29, 25, 18, .14); border-radius: 999px; padding: 4px 10px;
}
.ac2-tile__title{ font-family: var(--vk-font-bn); font-size: 16.5px; font-weight: 700; color: #F5EFE0; margin-top: 4px; }
.ac2-tile__sub{ font-family: var(--vk-font-en); font-size: 11px; color: #9C927C; }
.ac2-tile__desc{ font-family: var(--vk-font-bn); font-size: 13px; line-height: 1.5; color: #C9BFA8; }
.ac2-tile__foot{
  display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px;
  border-top: 1px solid rgba(232,162,0,0.16);
}
.ac2-tile__meta{ font-family: var(--vk-font-bn); font-size: 12.5px; color: #C9BFA8; }
.ac2-tile__cta{
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--vk-font-en);
  font-size: 13px; font-weight: 700; color: #F5EFE0;
}
@media (max-width:900px){ .ac2-grid{ grid-template-columns: 1fr; } }
/* ==========================================================================
   9wickets — "প্লেয়ার ভয়েস" (Player Voice) section REDESIGN v6 "Premium
   Multi-Card Carousel"
   --------------------------------------------------------------------------
   Supersedes v5 (one full-width testimonial per snap position). Per direct
   request this becomes a multi-item carousel — 3 cards visible per view on
   desktop, 2 on tablet, 1 (with a slight peek of the next) on mobile — with
   a richer "premium" card treatment: a gold→blue top accent bar, a large
   low-opacity watermark quote glyph, a gradient-ring avatar and an
   elevated hover-lift shadow. The scroll-snap mechanics + quotes4-slider.js
   are untouched — that script steps by exactly one card's width regardless
   of how many are visible per view, so it already supports this layout with
   zero JS changes. Widget HTML (Elementor post 11, vp0006) is NOT touched,
   only this stylesheet, to avoid risking the _elementor_data JSON for a
   change that doesn't need new copy.
   Scoped entirely under .quotes4 / .quotes4-*. Glass surface + aura orbs
   reuse the shared glass-system.css utilities (.gl-card, .gl-chip,
   .gl-aura/.gl-orb) for visual-language consistency with the rest of the
   v2 homepage pass.
   ========================================================================== */

body.vk .quotes4 {
    position: relative;
    overflow: hidden;
}

/* ---- slider track: full section width, 3-up on desktop ---- */
body.vk .quotes4-grid {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 22px;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    margin-top: clamp(28px, 3vw, 44px);
    padding-bottom: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body.vk .quotes4-grid::-webkit-scrollbar { display: none; }
body.vk .quotes4-grid:focus-visible { outline: 2.5px solid var(--vk-gold, rgba(200,134,11,0.22)); outline-offset: 4px; }

/* ---- card: 3 per view on desktop, premium glass treatment ---- */
body.vk .quotes4-card {
    position: relative;
    flex: 0 0 calc((100% - 44px) / 3);
    width: calc((100% - 44px) / 3);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    margin: 0;
    padding: 30px 24px 26px;
    overflow: hidden;
    isolation: isolate;
    transition: transform .4s cubic-bezier(.2,.7,.15,1), box-shadow .4s ease;
}
body.vk .quotes4-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--vk-grad-gold, linear-gradient(135deg, #FFC72C, #E8A200 55%, #C8860B));
}
body.vk .quotes4-card::after {
    content: "\201C";
    position: absolute;
    top: -18px; right: 6px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 108px;
    line-height: 1;
    color: rgba(245, 239, 224, 0.06);
    z-index: 0;
    pointer-events: none;
}
body.vk .quotes4-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 40px rgba(232,162,0,0.16);
}
body.vk .quotes4-card > * { position: relative; z-index: 1; }

/* ---- quote-mark chip (decorative, echoes the v3 card language) ---- */
body.vk .quotes4-mark {
    position: absolute;
    top: -16px;
    left: 24px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    z-index: 2;
    box-shadow: 0 8px 18px rgba(200,134,11,0.22);
}
body.vk .quotes4-mark svg { width: 19px; height: 19px; }

/* ---- top row: avatar initial + name + tier/location badge ---- */
body.vk .quotes4-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
body.vk .quotes4-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(232, 162, 0, 0.32), rgba(29, 25, 18, 0.2));
    border: 1px solid rgba(200,134,11,0.22);
    box-shadow: 0 0 0 3px rgba(200,134,11,0.22);
    color: #F5EFE0;
    font-family: var(--vk-font-bn);
    font-size: 18px;
    font-weight: 800;
}
body.vk .quotes4-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
body.vk .quotes4-name {
    font-family: var(--vk-font-bn);
    font-size: 15px;
    font-weight: 700;
    color: #F5EFE0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.vk .quotes4-tier {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    max-width: 100%;
    margin-top: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(29, 25, 18, 0.10);
    border: 1px solid rgba(232,162,0,0.14);
    color: #C9BFA8;
    font-family: var(--vk-font-bn);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.vk .quotes4-tier--vip {
    background: linear-gradient(135deg, #FFC72C, #E8A200 55%, #C8860B);
    border-color: rgba(200,134,11,0.22);
    color: #F5EFE0;
}

/* ---- quote text ---- */
body.vk .quotes4-quote {
    margin: 0 0 18px;
    font-family: var(--vk-font-bn);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.72;
    color: #F5EFE0;
}

/* ---- star rating ---- */
body.vk .quotes4-rating {
    display: inline-flex;
    gap: 3px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(200, 134, 11, 0.12);
    color: #C8860B;
    width: fit-content;
}
body.vk .quotes4-rating svg { width: 13px; height: 13px; }

/* ---- ~1180px and below: 3-up gets tight, drop to 2-up ---- */
@media (max-width: 1180px) {
    body.vk .quotes4-grid { max-width: 100%; }
}
@media (max-width: 1023px) {
    body.vk .quotes4-card {
        flex: 0 0 calc((100% - 22px) / 2);
        width: calc((100% - 22px) / 2);
    }
}

/* ---- mobile: one card per view, slight peek of the next ---- */
@media (max-width: 640px) {
    body.vk .quotes4-grid { margin-top: 28px; gap: 16px; }
    body.vk .quotes4-card {
        flex: 0 0 90%;
        width: 90%;
        padding: 30px 22px 22px;
    }
    body.vk .quotes4-card::after { font-size: 88px; }
}

@media (max-width: 480px) {
    body.vk .quotes4-card { padding: 28px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .quotes4-card { transition: none; }
    body.vk .quotes4-card:hover { transform: none; }
}

/* ==========================================================================
   Slider controls (`.quotes4-nav`: prev arrow / dots / next arrow) — built
   at runtime by quotes4-slider.js and inserted right after `.quotes4-grid`.
   Reuses the site's gold-gradient glass button language (see .gl-chip /
   .plat3-featured__cta) for visual consistency.
   ========================================================================== */
body.vk .quotes4-nav {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

body.vk .quotes4-arrow {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(36, 31, 22, 0.72);
    border: 1px solid rgba(232,162,0,0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 20px rgba(232,162,0,0.16);
    color: #F5EFE0;
    cursor: pointer;
    padding: 0;
    transition: transform .35s cubic-bezier(.2,.7,.15,1), background .35s ease, box-shadow .35s ease;
}
body.vk .quotes4-arrow svg { width: 16px; height: 16px; display: block; }
body.vk .quotes4-arrow:hover,
body.vk .quotes4-arrow:focus-visible {
    background: linear-gradient(135deg, #FFC72C, #E8A200 55%, #C8860B);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(200,134,11,0.22);
}
body.vk .quotes4-arrow:focus-visible { outline: 2.5px solid rgba(200,134,11,0.22); outline-offset: 2px; }
body.vk .quotes4-arrow:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }

body.vk .quotes4-dots {
    display: flex;
    align-items: center;
    gap: 9px;
}
body.vk .quotes4-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    padding: 0;
    border: none;
    background: rgba(29, 25, 18, 0.28);
    cursor: pointer;
    transition: background .35s ease, transform .35s ease;
}
body.vk .quotes4-dot:hover { background: rgba(29, 25, 18, 0.48); }
body.vk .quotes4-dot.is-active {
    background: linear-gradient(135deg, #E8A200, #C8860B);
    transform: scale(1.3);
}
body.vk .quotes4-dot:focus-visible { outline: 2px solid rgba(200,134,11,0.22); outline-offset: 2px; }

@media (max-width: 480px) {
    body.vk .quotes4-nav { gap: 12px; margin-top: 16px; }
    body.vk .quotes4-arrow { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .quotes4-card { transition: none; }
    body.vk .quotes4-grid { scroll-behavior: auto; }
    body.vk .quotes4-arrow,
    body.vk .quotes4-dot { transition: none; }
}
/* ==========================================================================
   9wickets — "শুরু করার নিয়ম" (How to Start) section REDESIGN v3
   "Vertical Glass Timeline" (loads LAST)
   --------------------------------------------------------------------------
   Replaces the v2 "Journey Path" zigzag row (.vk-hw-road / .vk-hw-row / SVG
   drawn-path connector, steps-road.css) with a vertical, alternating
   left/right timeline: a center connector "spine" running top-to-bottom
   with the 4 step cards placed left / right / left / right of it, each card
   built from the shared glassmorphism system (glass-system.css: .gl-card,
   .gl-chip, .gl-aura/.gl-orb) so this section reads as the same visual
   language as the other v2-glass homepage redesigns (see agents-cards v2 /
   ac2-*). On mobile the spine moves flush left and every card stacks on its
   right, single column.

   Scoped entirely under .vk-how--v3 / .steps3-*. Does not touch or reuse
   .vk-hw-*'s rules in steps-road.css (that stylesheet should be dequeued /
   removed when this one replaces it on the live page).
   Markup: _work/vp0004_new.html (Elementor html widget, post 11, widget vp0004).
   ========================================================================== */

/* Safety net: if the old v2 zigzag markup is ever left in the page alongside
   this one, never show both at once. */
body.vk .vk-how--v3 .vk-hw-road { display: none; }

/* ------------------------------------------------------------------
   Section decoration — same soft colour-blob aura used behind the other
   glass sections (agents v2, etc.) so the frosted cards have something
   to refract.
   ------------------------------------------------------------------ */
body.vk .vk-how--v3 { position: relative; overflow: hidden; }

/* ------------------------------------------------------------------
   Timeline shell
   ------------------------------------------------------------------ */
body.vk .steps3-timeline {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    margin: 56px auto 0;
}

/* ---- the center connector ("spine") ---- */
body.vk .steps3-spine {
    position: absolute;
    left: 50%;
    top: 4px;
    bottom: 4px;
    width: 3px;
    transform: translateX(-50%);
    background: rgba(200, 134, 11, 0.16);
    border-radius: 3px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
body.vk .steps3-spine::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--vk-grad-royal, linear-gradient(180deg, #E8A200 0%, #E8A200 55%, #8A5A0A 100%));
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1.7s cubic-bezier(.2, .7, .15, 1);
}
body.vk .steps3-timeline.is-in .steps3-spine::after { transform: scaleY(1); }

/* ---- track + alternating nodes ---- */
body.vk .steps3-track {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 38px;
    padding: 4px 0;
}
body.vk .steps3-node {
    position: relative;
    width: calc(50% - 38px);
}
body.vk .steps3-node--l { align-self: flex-start; }
body.vk .steps3-node--r { align-self: flex-end; }

/* ---- pulsing dot marking each card's position on the spine ---- */
body.vk .steps3-dot {
    position: absolute;
    top: 34px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--vk-grad-gold, linear-gradient(135deg, #E8A200 0%, #C8860B 48%, #E8A200 100%));
    box-shadow: 0 0 0 5px rgba(200,134,11,0.22), 0 0 0 6px rgba(200,134,11,0.22);
    animation: steps3-pulse 2.8s ease-in-out infinite;
    z-index: 2;
}
body.vk .steps3-node--l .steps3-dot { right: -38px; }
body.vk .steps3-node--r .steps3-dot { left: -38px; }
body.vk .steps3-node:nth-child(2) .steps3-dot { animation-delay: .3s; }
body.vk .steps3-node:nth-child(3) .steps3-dot { animation-delay: .6s; }
body.vk .steps3-node:nth-child(4) .steps3-dot { animation-delay: .9s; }
@keyframes steps3-pulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(200,134,11,0.22), 0 0 0 6px rgba(200,134,11,0.22); }
    50%      { box-shadow: 0 0 0 5px rgba(200,134,11,0.22), 0 0 0 11px rgba(200,134,11,0.22); }
}

/* ---- the glass card itself (gl-card supplies the frosted surface,
        border, shadow & hover lift — this only adds the internal layout) ---- */
body.vk .steps3-card {
    padding: 26px 26px 24px;
}
body.vk .steps3-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
body.vk .steps3-chip {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-family: var(--vk-font-en, 'Inter', sans-serif);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
body.vk .steps3-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(232, 162, 0, 0.16);
    color: #B5830F;
    transition: transform .4s cubic-bezier(.2, .7, .15, 1), background .4s ease, color .4s ease;
}
body.vk .steps3-icon svg { width: 17px; height: 17px; }
body.vk .steps3-card:hover .steps3-icon {
    background: var(--vk-grad-gold, linear-gradient(135deg, #E8A200 0%, #C8860B 48%, #E8A200 100%));
    color: #F5EFE0;
    transform: scale(1.06) rotate(-4deg);
}

body.vk .steps3-title {
    font-size: 17px;
    font-weight: 700;
    color: #F5EFE0;
    margin: 0 0 8px;
    line-height: 1.32;
}
body.vk .steps3-desc {
    font-size: 13.5px;
    line-height: 1.7;
    color: #C9BFA8;
    margin: 0;
}

/* ------------------------------------------------------------------
   Responsive: below 900px the two-column alternation can't breathe (each
   card would be under 300px wide), so the spine moves flush left and every
   node stacks full-width to its right — same collapse strategy already
   proven by the other v2 timeline redesign on this homepage (why-us,
   why-timeline.css), applied here to the glass cards.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
    body.vk .steps3-timeline { max-width: 580px; margin-top: 44px; }
    body.vk .steps3-spine { left: 21px; transform: none; }
    body.vk .steps3-node,
    body.vk .steps3-node--l,
    body.vk .steps3-node--r {
        width: 100%;
        align-self: stretch;
        padding-left: 52px;
    }
    body.vk .steps3-node--l .steps3-dot,
    body.vk .steps3-node--r .steps3-dot { left: 15px; right: auto; top: 34px; }
    body.vk .steps3-card { padding: 22px 20px 20px; }
}
@media (max-width: 480px) {
    body.vk .steps3-node,
    body.vk .steps3-node--l,
    body.vk .steps3-node--r { padding-left: 42px; }
    body.vk .steps3-spine { left: 16px; }
    body.vk .steps3-node--l .steps3-dot,
    body.vk .steps3-node--r .steps3-dot { left: 10px; }
    body.vk .steps3-chip { width: 40px; height: 40px; font-size: 13.5px; }
    body.vk .steps3-icon { width: 30px; height: 30px; }
    body.vk .steps3-icon svg { width: 15px; height: 15px; }
    body.vk .steps3-card { padding: 20px 16px 18px; }
    body.vk .steps3-title { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .steps3-spine::after { transition: none; transform: scaleY(1); }
    body.vk .steps3-dot { animation: none; }
    body.vk .steps3-icon { transition: none; }
}
/* ==========================================================================
   9wickets — "যেকোনো ডিভাইস · যেকোনো সময়" (Any Device · Any Time) section
   REDESIGN v3 "Glass Overlay Panel" (loads LAST)
   --------------------------------------------------------------------------
   Structural change from v2: the side-by-side image-left / copy-right split
   is gone. The live-casino photo now becomes a full-bleed background for
   the entire section (position:absolute, object-fit:cover, behind a dark
   gradient scrim for legibility) and every piece of copy — eyebrow,
   heading, lead, checklist, device chips, CTA — lives inside a single
   large .gl-card--solid glass panel anchored to the left, floating on top
   of the photo. Reuses the shared glass utilities from glass-system.css
   (.gl-card / .gl-card--solid) plus the site-wide .vk-eyebrow / .vk-h2 /
   .vk-lead / .vk-btn tokens for typography + CTA styling continuity.
   Everything section-specific (media, scrim, panel, list, device chips) is
   scoped under the new .verify3-* prefix so it never collides with the
   old .vk-verify__* rules still used elsewhere.
   Markup: _work/vp0005_new.html (post 11, widget vp0005).
   ========================================================================== */

/* Slim full-width pass (2026-07): the panel now spans the standard
   1180px content width and lays copy + checklist/devices/CTA out as a
   single horizontal row, instead of a narrow ~680px stacked column —
   "slim" (less vertical height) and "full width" (matches the other
   home sections' content width) per direct request. */
body.vk .verify3.vk-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: clamp(20px, 2.4vw, 30px);
    padding-bottom: clamp(20px, 2.4vw, 30px);
}

/* ---- the one glass panel that carries all copy ---- */
.verify3__panel.gl-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(22px, 2.6vw, 32px) clamp(26px, 3.4vw, 44px) !important;
    display: flex;
    align-items: center;
    gap: clamp(28px, 4vw, 48px);
    text-align: left;
}

.verify3__main { flex: 1 1 auto; min-width: 0; }
.verify3__panel .vk-eyebrow { margin-bottom: 10px; }
.verify3__panel .vk-h2 { margin-bottom: 8px; font-size: clamp(20px, 2.2vw, 26px); }
.verify3__panel .vk-lead { max-width: 52ch; margin: 0; font-size: 14.5px; }

.verify3__side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-left: clamp(24px, 3vw, 40px);
    border-left: 1px solid rgba(232,162,0,0.16);
}

/* ---- checklist ---- */
.verify3__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
    text-align: left;
}
.verify3__list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    line-height: 1.4;
    color: #F5EFE0;
    font-family: var(--vk-font-bn, inherit);
    white-space: nowrap;
}
.verify3__list li svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #16A34A;
    background: rgba(34, 197, 94, .14);
    border-radius: 50%;
    padding: 3px;
    width: 20px;
    height: 20px;
}

/* ---- device-type chips ---- */
.verify3__devices {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
}
.verify3__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    background: rgba(232, 162, 0, .16);
    border: 1px solid rgba(200,134,11,0.22);
    font-size: 11.5px;
    font-weight: 700;
    color: #F5EFE0;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.verify3__chip:hover {
    background: rgba(232, 162, 0, .28);
    border-color: rgba(200,134,11,0.22);
    transform: translateY(-2px);
}
.verify3__chip-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E8A200 0%, #C8860B 48%, #C8860B 100%);
    color: #F5EFE0;
}
.verify3__chip-ic svg { width: 11px; height: 11px; }

.verify3__cta .vk-btn { min-width: 0; padding: 10px 22px; white-space: nowrap; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    .verify3__chip { transition: none; }
}

/* ---- ~1024px: side column moves below, still slim ---- */
@media (max-width: 1024px) {
    .verify3__panel { flex-direction: column; text-align: center; }
    .verify3__main { text-align: center; }
    .verify3__panel .vk-lead { max-width: 58ch; margin: 0 auto; }
    .verify3__side {
        align-items: center;
        padding-left: 0;
        border-left: 0;
        padding-top: 16px;
        border-top: 1px solid rgba(232,162,0,0.16);
        width: 100%;
    }
    .verify3__list { justify-items: center; }
    .verify3__devices { justify-content: center; }
}

/* ---- ~767px / tablet-and-below ---- */
@media (max-width: 767px) {
    .verify3__panel {
        max-width: 100%;
        margin: 0;
        padding: 24px 20px 28px;
    }
    .verify3__cta { display: flex; justify-content: center; }
    .verify3__cta .vk-btn { width: 100%; max-width: 340px; }
}

/* ---- ~375px: tighten spacing further ---- */
@media (max-width: 400px) {
    .verify3__panel { padding: 22px 16px 24px; }
    .verify3__list li { font-size: 13px; white-space: normal; }
    .verify3__devices { gap: 8px; }
}
/* ==================================================================
   vp0007 — Live Activity: "LIVE GLASS CONSOLE" layout pass.
   Replaces the old .vk-lac-* autoplay slider (individual shadowed
   cards in a scroll-snap track, live-activity-slider.js) with a
   single wide .gl-card--solid dashboard/terminal panel holding every
   activity item as a compact vertical list — hairline dividers
   between rows instead of separate card borders/shadows per item.
   Section wrapper/eyebrow/heading/lead keep their original
   .vk-section / .vk-eyebrow--live / .vk-h2 / .vk-lead classes.
   New layout scoped entirely under .live3-* so it can't collide with
   the legacy .vk-lac-* slider styling if that file is still enqueued.
   Depends on glass-system.css for .gl-card / .gl-card--solid / .gl-aura / .gl-orb.

   RIGHT-TO-LEFT AUTO-PLAY TICKER PASS (2026-07): the vertical "insert new
   row at top" list becomes a horizontal marquee — a continuous CSS
   translateX loop that carries the activity chips from right to left,
   auto-playing forever (no interaction needed). `.live3-console`'s
   existing `overflow:hidden` is reused as the marquee viewport.
   live-ticker.js duplicates `.live3-list`'s children once (seamless loop:
   at -50% translateX the duplicate set lines up exactly where the
   original started) and sizes the animation duration off the measured
   track width so speed stays constant regardless of item count/viewport.
   It also still refreshes one random chip's content in place every few
   seconds (mirrored to its clone) so the feed still feels "live" without
   breaking the loop position. Hover/focus pauses it; prefers-reduced-motion
   disables the scroll entirely (falls back to a plain static/swipeable row).
   ================================================================== */

.live3-console{
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 36px auto 0;
  padding: 8px 0 clamp(6px, 2vw, 14px);
  overflow: hidden;
}

/* decorative "window" strip — purely visual console cue, no text content */
.live3-console__bar{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px clamp(14px, 3vw, 30px) 16px;
  border-bottom: 1px solid rgba(232,162,0,0.16);
  margin-bottom: 2px;
}
.live3-console__dot{ width: 9px; height: 9px; border-radius: 50%; opacity: .55; }
.live3-console__dot--r{ background: #F43F5E; }
.live3-console__dot--y{ background: #C8860B; }
.live3-console__dot--g{ background: #34D399; }

/* ---- marquee viewport: fades the chips out at both edges ---- */
.live3-console{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #100D08 40px, #100D08 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #100D08 40px, #100D08 calc(100% - 40px), transparent 100%);
}

.live3-list{
  list-style: none;
  margin: 0;
  padding: 10px 0 6px;
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  animation: live3-marquee-rtl var(--live3-duration, 32s) linear infinite;
}
.live3-console:hover .live3-list,
.live3-console:focus-within .live3-list{ animation-play-state: paused; }

@keyframes live3-marquee-rtl{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.live3-row{
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  gap: 12px;
  padding: 10px clamp(18px, 2.4vw, 26px);
  border-right: 1px solid rgba(232,162,0,0.16);
}

/* ---- avatar chip ---- */
.live3-avatar{
  flex: none;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--vk-font-en, 'Inter', system-ui, sans-serif);
  font-weight: 800;
  font-size: 13.5px;
  color: #F5EFE0;
  box-shadow: 0 6px 14px -6px rgba(232,162,0,0.16);
}
.live3-avatar--signup  { background: linear-gradient(135deg, #E8A200, #B5830F); color: #9C927C; }
.live3-avatar--win     { background: linear-gradient(135deg, #E8A200, #C8860B); }
.live3-avatar--bonus   { background: linear-gradient(135deg, #FFC72C, #C8860B); color: #B5830F; }
.live3-avatar--deposit { background: linear-gradient(135deg, #6EE7B7, #059669); }
.live3-avatar--withdraw{ background: linear-gradient(135deg, #FFC72C, #C8860B); color: #B5830F; }

/* ---- main content: name + description, single line ---- */
.live3-main{
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  column-gap: 8px;
  font-family: var(--vk-font-bn, 'Anek Bangla', system-ui, sans-serif);
}
.live3-name{
  flex: none;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--vk-text, #F5EFE0);
}
.live3-desc{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--vk-text-mid, #C9BFA8);
  font-size: 12.5px;
  line-height: 1.4;
  white-space: nowrap;
}
.live3-tag{
  flex: none;
  width: 19px; height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.live3-tag--signup  { background: rgba(200, 134, 11, .14);  color: #B5830F; }
.live3-tag--win     { background: rgba(200, 134, 11, .16);  color: #B5830F; }
.live3-tag--bonus   { background: rgba(200, 134, 11, .14); color: #C8860B; }
.live3-tag--deposit { background: rgba(5, 150, 105, .14);  color: #0F7A4F; }
.live3-tag--withdraw{ background: rgba(200, 134, 11, .14);  color: #C8860B; }

/* ---- meta: timestamp + amount, inline after the description ---- */
.live3-meta{
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.live3-time{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vk-font-en, 'Inter', system-ui, sans-serif);
  font-size: 11px;
  color: #9C927C;
}
.live3-time-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 8px rgba(52, 211, 153, .7);
  animation: live3-pulse 1.6s ease-in-out infinite;
}
@keyframes live3-pulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  50%      { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
}
.live3-amount{
  font-family: var(--vk-font-en, 'Inter', system-ui, sans-serif);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--vk-text, #F5EFE0);
}
.live3-amount--win     { color: #B5830F; }
.live3-amount--deposit { color: #0F7A4F; }
.live3-amount--withdraw{ color: #C8860B; }

/* ================= Responsive ================= */

@media (max-width: 900px){
  .live3-console{ margin-top: 30px; }
  .live3-console__bar{ padding: 12px clamp(12px,2.6vw,22px) 16px; }
  .live3-row{ gap: 10px; padding: 10px 18px; }
}

@media (max-width: 640px){
  .live3-console{ margin-top: 26px; }
  .live3-avatar{ width: 30px; height: 30px; font-size: 12.5px; }
  .live3-name{ font-size: 13px; }
  .live3-desc{ font-size: 12px; }
  .live3-row{ padding: 9px 14px; gap: 9px; }
}

@media (max-width: 400px){
  .live3-console__bar{ padding: 12px 10px 16px; }
  .live3-console__dot{ width: 8px; height: 8px; }
}

@media (prefers-reduced-motion: reduce){
  .live3-time-dot{ animation: none; }
  .live3-list{ animation: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* ==========================================================================
   9wickets — Social/Community section REDESIGN "Scroll Rail" (glass v2 pass)
   --------------------------------------------------------------------------
   Replaces the vk-sp-* pill grid (social-pills.css) with a single horizontal
   row of larger .gl-card tiles that overflow the container and scroll with
   native CSS scroll-snap (touch / trackpad / scrollbar — no JS). Reuses the
   shared glass language from glass-system.css (.gl-card, .gl-aura/.gl-orb)
   the same way the vp0002 "agents bento" v2 pass does, so this section reads
   as the same visual system rather than a one-off.
   New, isolated class prefix: .social2-* — does not touch or override any
   .vk-sp-* rule, so social-pills.css can stay on disk / be dequeued without
   affecting this markup. Content (eyebrow/heading/lead, channel names,
   counts, descriptions, hrefs, icon svg paths) is untouched — layout only.
   Scoped entirely under .social2-section / .social2-*.
   Markup: _work/vp0008_new.html (post 11, widget vp0008).
   ========================================================================== */

/* ---- per-platform brand tokens (unchanged real brand colors — never
        recolored to the site's yellow/blue palette) ---- */
body.vk .social2-card--fb,
body.vk .social2-card--page { --brand: #1877F2; --brand-text: #1877F2; }
body.vk .social2-card--yt   { --brand: #FF0000; --brand-text: #E10000; }
body.vk .social2-card--tg   { --brand: #229ED9; --brand-text: #1D8DC2; }
body.vk .social2-card--ig   { --brand: #E1306C; --brand-text: #C13584; --brand-bg: linear-gradient(45deg, #FEEE81 0%, #629ACC 18%, #F56040 30%, #FD1D1D 45%, #E1306C 58%, #C13584 75%, #833AB4 87%, #5851DB 100%); }
body.vk .social2-card--wa   { --brand: #25D366; --brand-text: #1DA851; }

/* ---- rail viewport: the only element that clips + scrolls ---- */
body.vk .social2-rail-wrap {
    position: relative;
    margin-top: 8px;
}

body.vk .social2-rail {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    -webkit-overflow-scrolling: touch;
    padding: 6px 2px 26px;
    margin: 0 -2px;
    scrollbar-width: thin;
    scrollbar-color: #1D1912 rgba(29, 25, 18, 0.12);
}
body.vk .social2-rail::-webkit-scrollbar { height: 7px; }
body.vk .social2-rail::-webkit-scrollbar-track { background: rgba(29, 25, 18, 0.12); border-radius: 999px; }
body.vk .social2-rail::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #1D1912, #1D1912); border-radius: 999px; }
body.vk .social2-rail::-webkit-scrollbar-thumb:hover { background: #8A5A0A; }

/* soft fade-out on the trailing edge — the "there's more, keep scrolling"
   cue. Uses a mask (not an overlay tinted to a guessed bg color) so it
   reads correctly no matter what background sits behind this section. */
@media (min-width: 900px) {
    body.vk .social2-rail {
        -webkit-mask-image: linear-gradient(to right, #100D08 0, #100D08 calc(100% - 72px), transparent 100%);
        mask-image: linear-gradient(to right, #100D08 0, #100D08 calc(100% - 72px), transparent 100%);
    }
}

/* ---- card ---- */
body.vk .social2-card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(272px, 27vw, 312px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px 22px;
    text-decoration: none;
    isolation: isolate;
}

/* brand-tinted ambient glow behind the card, same technique as the pill
   redesign — kept subtle so the glass surface still reads as glass */
body.vk .social2-card::before {
    content: '';
    position: absolute;
    inset: -30% -14%;
    background: radial-gradient(closest-side, var(--brand), transparent 72%);
    opacity: .08;
    z-index: -1;
    filter: blur(28px);
    pointer-events: none;
    transition: opacity .5s ease, transform .6s ease;
}
body.vk .social2-card:hover::before,
body.vk .social2-card:focus-visible::before {
    opacity: .22;
    transform: scale(1.1);
}
body.vk .social2-card:hover,
body.vk .social2-card:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 42%, transparent);
}
body.vk .social2-card:focus-visible {
    outline: 2.5px solid var(--brand);
    outline-offset: 3px;
}

body.vk .social2-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.vk .social2-card__icon {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-bg, var(--brand));
    color: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(200,134,11,0.14) inset,
        0 -6px 14px rgba(200,134,11,0.14) inset,
        0 10px 22px -8px var(--brand);
    transition: transform .5s cubic-bezier(.2, .7, .15, 1), box-shadow .4s ease;
}
body.vk .social2-card:hover .social2-card__icon {
    transform: scale(1.07) rotate(-4deg);
    box-shadow: 0 0 0 1px rgba(200,134,11,0.14) inset,
        0 -6px 14px rgba(200,134,11,0.14) inset,
        0 16px 32px -8px var(--brand);
}

body.vk .social2-card__count {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    color: var(--brand-text, var(--brand));
    font-family: var(--vk-font-en, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

body.vk .social2-card__title {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--vk-text);
    margin-top: 6px;
}

body.vk .social2-card__desc {
    flex: 1;
    font-size: 13px;
    line-height: 1.55;
    color: var(--vk-text-mid);
    margin: 0;
}

body.vk .social2-card__arrow {
    align-self: flex-end;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-top: 4px;
    background: rgba(36, 31, 22, 0.85);
    border: 1px solid rgba(200,134,11,0.14);
    color: var(--vk-text);
    transition: transform .4s cubic-bezier(.2, .7, .15, 1), background .4s ease, color .4s ease, border-color .4s ease;
}
body.vk .social2-card__arrow svg { width: 15px; height: 15px; stroke: currentColor; }
body.vk .social2-card:hover .social2-card__arrow {
    background: var(--brand-bg, var(--brand));
    color: #FFFFFF;
    border-color: transparent;
    transform: translateX(4px);
}

/* ---- responsive ---- */
@media (max-width: 900px) {
    body.vk .social2-card { width: clamp(250px, 68vw, 288px); padding: 22px 20px 18px; }
    body.vk .social2-card__icon { width: 48px; height: 48px; }
    body.vk .social2-card__title { font-size: 16px; }
    body.vk .social2-card__desc { font-size: 12.5px; }
}
@media (max-width: 560px) {
    body.vk .social2-rail { gap: 14px; padding-bottom: 20px; }
    body.vk .social2-card { width: clamp(228px, 78vw, 272px); }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .social2-card,
    body.vk .social2-card::before,
    body.vk .social2-card__icon,
    body.vk .social2-card__arrow { transition: none !important; }
}
/* ==================================================================
   FAQ SECTION — v3 "sticky sidebar" layout
   Prefix: .faq3-*
   Depends on: /wp-content/mu-plugins/w9-vk/glass-system.css (.gl-card,
   .gl-card--solid) — load this file AFTER glass-system.css.
   ------------------------------------------------------------------
   STRUCTURAL CONSTRAINT (read before editing)
   The Q&A content is a real Elementor ACCORDION WIDGET. Its internal
   markup is never touched here — this file only places/style the
   WRAPPER around it via positional selectors.

   REQUIRED ELEMENTOR STEP (one-time, manual):
   Select the Section/Container in Elementor that directly holds, as
   its three top-level children in this exact DOM order:
     1) the intro HTML widget      → renders vp0012_new.html
     2) the Accordion WIDGET       → renders w0013 (8 Q&A tabs) — UNTOUCHED
     3) the closing-links widget   → renders vp0014_new.html
   Advanced tab → CSS Classes → add:  faq3-shell
   (Adding a class here is a config action on the container, not a
   rewrite of the accordion's internal markup — allowed by the brief.)

   WHY nth-child INSTEAD OF A CLASS ON THE ACCORDION:
   Elementor wraps every widget in its own auto-generated
   ".elementor-element" wrapper — we cannot rename or add a class to
   THAT wrapper without touching Elementor's own markup/JSON for the
   accordion widget itself. But CSS can still address it purely by
   its POSITION among its siblings, which is exactly what the
   :nth-child() rules below do. VERIFY against the live DOM that no
   hidden/extra Elementor element (e.g. an empty spacer) sits between
   these three widgets — if one does, the nth-child indices below
   must shift accordingly.
   ================================================================== */

/* ---- Mobile/tablet default: natural single-column stack ----
   [[intro]] → [[accordion]] → [[closing]] in normal DOM/reading order.
   This is intentionally the ONLY rule that applies below 1024px. */
.faq3-shell{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  /* NOTE: no overflow:hidden here — the intro/closing cards use
     position:sticky on desktop and any overflow:hidden ancestor (even
     with visible content) breaks sticky for its descendants. The aura
     orbs below are sized/positioned to stay mostly within the section
     without needing to be clipped. */
}

/* ---- decorative aura orbs (CSS-only, no new DOM — this container is an
   Elementor container element, not an html widget, so it can't easily
   carry a raw .gl-aura wrapper div) — echoes the gl-orb glow used on
   every other home section for visual consistency. ---- */
.faq3-shell::before,
.faq3-shell::after{
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .16;
  pointer-events: none;
}
.faq3-shell::before{
  width: 320px; height: 320px;
  top: -60px; left: 2%;
  background: radial-gradient(circle, #E8A200, transparent 70%);
}
.faq3-shell::after{
  width: 280px; height: 280px;
  bottom: -40px; right: 4%;
  background: radial-gradient(circle, #1D1912, transparent 70%);
}
.faq3-shell > *{ position: relative; z-index: 1; }

/* ================================================================
   DESKTOP ≥1024px — two-column sticky sidebar
   Left column  (nth-child 1 & 3): intro + closing, ~35% width
   Right column (nth-child 2, the accordion widget wrapper): ~65%
   ================================================================ */
@media (min-width:1024px){
  .faq3-shell{
    grid-template-columns: 35% 65%;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 48px;
    row-gap: 28px;
  }

  /* CHILD 1 = intro widget wrapper (vp0012_new.html)
     → left column, first row */
  .faq3-shell > *:nth-child(1){
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 96px;              /* adjust to match any sticky site header height */
    z-index: 2;
  }

  /* CHILD 2 = ACCORDION WIDGET WRAPPER (do not restyle its insides)
     → right column, spanning BOTH sidebar rows so it runs the full
     height alongside the intro card above and the closing links below */
  .faq3-shell > *:nth-child(2){
    grid-column: 2;
    grid-row: 1 / 3;
  }

  /* CHILD 3 = closing-links widget wrapper (vp0014_new.html)
     → left column, second row, directly under the intro card */
  .faq3-shell > *:nth-child(3){
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: 96px;
    align-self: start;
    z-index: 1;
  }
}

/* Explicit reset below the breakpoint — belt-and-braces in case any
   inline/theme style elsewhere tries to apply grid placement here. */
@media (max-width:1023.98px){
  .faq3-shell > *:nth-child(1),
  .faq3-shell > *:nth-child(2),
  .faq3-shell > *:nth-child(3){
    grid-column: 1;
    grid-row: auto;
    position: static;
    top: auto;
  }
}

/* ==================================================================
   Intro card (vp0012_new.html content)
   ================================================================== */
.faq3-card{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 36px 32px;
}
.faq3-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--vk-grad-gold, linear-gradient(135deg, #FFC72C, #E8A200 55%, #C8860B));
}
.faq3-card::after{
  content: "?";
  position: absolute;
  top: -30px; right: 8px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 130px;
  line-height: 1;
  color: rgba(245, 239, 224, .05);
  z-index: 0;
  pointer-events: none;
}
.faq3-card > *{ position: relative; z-index: 1; }
.faq3-card__ring{
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px; flex: none;
  background: var(--vk-grad-gold, linear-gradient(135deg, #FFC72C, #E8A200 55%, #C8860B));
  box-shadow: 0 10px 22px rgba(200,134,11,0.22);
  color: #F5EFE0;
  margin-bottom: 18px;
}
.faq3-card .vk-eyebrow{
  display: block;
  margin-bottom: 14px;
}
.faq3-card .vk-h2{
  margin-bottom: 16px;
}
.faq3-card .vk-lead{
  margin: 0;
}

@media (max-width:767px){
  .faq3-card{ padding: 28px 24px; text-align: center; }
  .faq3-card__ring{ width: 46px; height: 46px; margin-bottom: 14px; }
  .faq3-card::after{ font-size: 100px; }
  .faq3-card .vk-eyebrow,
  .faq3-card .vk-h2{ text-align: center; }
  .faq3-card .vk-lead{ text-align: center; max-width: 44ch; margin-left: auto; margin-right: auto; }
}

/* ==================================================================
   Closing links card (vp0014_new.html content)
   ================================================================== */
.faq3-closing__card{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 24px;
}
.faq3-closing__ring{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: rgba(29, 25, 18, .14);
  border: 1px solid rgba(232,162,0,0.12);
  color: #C9BFA8;
}
.faq3-closing__buttons{
  display: flex; flex-direction: column; gap: 10px;
  flex: 1 1 auto; min-width: 0;
}

@media (min-width:1024px){
  /* narrower 35% sidebar reads better with a stacked, centred layout */
  .faq3-closing__card{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .faq3-closing__buttons{ width: 100%; }
  .faq3-closing__card .vk-btn{
    text-align: center;
    width: 100%;
  }
}

/* mobile stack: same centred treatment as the desktop sidebar, rather
   than a left-packed wrapped row */
@media (max-width:1023.98px){
  .faq3-closing__card{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .faq3-closing__buttons{ width: 100%; max-width: 340px; }
  .faq3-closing__card .vk-btn{ text-align: center; width: 100%; }
}
/* ==========================================================================
   9wickets — "নিরাপদ প্রবেশ নির্দেশিকা" (Official Verified Links) section
   REDESIGN v3 "Featured + Secondary" (loads LAST)
   --------------------------------------------------------------------------
   Supersedes the v2 "Verified Access Pills" layout (four equal-weight glass
   capsule pills, platform-pills.css / .vk-pp-*) with a clear visual
   hierarchy: the trust-copy (eyebrow/heading/lead/assurance list) becomes a
   centered intro block, the primary domain becomes ONE large featured glass
   card with a "PRIMARY" ribbon and glow border, and the backup/mirror
   domains drop to a row of small, equal-weight compact glass cards below
   it that wrap on narrower screens. Same trust-copy text, same 4 links/
   hrefs/labels — only the layout changes.

   Scoped entirely under .vk-platforms--v3 / .plat3-* — a new class prefix
   so none of the legacy .vk-pp-* rules (platform-pills.css) can leak in,
   same isolation pattern as agents-cards.css (.vk-a2-*), home-v2-layout.css
   (.ac2-*, .quotes4-*, .steps3-*). Glass surface (.gl-card) + aura orbs
   (.gl-aura/.gl-orb) reuse the shared glass-system.css utilities for
   visual-language consistency with the rest of the v2 homepage pass (see
   vp0002_new.html agents section).

   Markup: _work/vp0009_new.html (Elementor html widget, post 11, widget vp0009).
   ========================================================================== */

/* Safety net: if the old v2 pill markup is ever left in the page alongside
   this one, never show both at once. */
body.vk .vk-platforms--v3 .vk-pp-grid { display: none; }

body.vk .vk-platforms--v3 { position: relative; overflow: hidden; }
body.vk .vk-platforms--v3 > *:not(.gl-aura) { position: relative; z-index: 1; }

/* visually-hidden but still announced by screen readers — used to keep the
   "সাইটে প্রবেশ করুন" CTA label in the accessible name of the compact
   secondary cards even though only the arrow icon is shown visually. */
.plat3-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------
   Intro — centered trust-copy block (vk-section__head already centers +
   caps the width at 760px; this just adds the assurance-list centering
   since .vk-platforms__assure is a plain flex list with no alignment
   opinion of its own).
   ------------------------------------------------------------------ */
body.vk .plat3-intro.vk-section__head { margin-bottom: 0; }
body.vk .plat3-assure {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------------
   Featured primary card
   ------------------------------------------------------------------ */
body.vk .plat3-primary {
    max-width: 980px;
    margin: clamp(32px, 4vw, 44px) auto 0;
}

body.vk .plat3-featured {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 36px 44px 36px 36px;
    border-radius: 28px;
    text-decoration: none;
    isolation: isolate;
    border-color: rgba(200,134,11,0.22);
    box-shadow: var(--vk-shadow-card), var(--vk-glow-gold);
    transition: transform .45s cubic-bezier(.2,.7,.15,1), box-shadow .45s ease, border-color .45s ease;
}
body.vk .plat3-featured:hover,
body.vk .plat3-featured:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(200,134,11,0.22);
    box-shadow: var(--vk-shadow-card-hi), var(--vk-glow-gold-hi);
}
body.vk .plat3-featured:focus-visible { outline: 2.5px solid var(--vk-gold); outline-offset: 3px; }

/* shine sweep on hover (same trick as the v2 pills — plain static spans
   painted after this absolutely-positioned one stay on top). */
body.vk .plat3-featured__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 199, 44, 0.18) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .9s ease;
    pointer-events: none;
    z-index: 0;
}
body.vk .plat3-featured:hover .plat3-featured__shine,
body.vk .plat3-featured:focus-visible .plat3-featured__shine { transform: translateX(100%); }

/* PRIMARY ribbon badge, overlapping the top-left border */
body.vk .plat3-featured__ribbon {
    position: absolute;
    top: -14px;
    left: 32px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px 6px 11px;
    border-radius: 999px;
    background: var(--vk-grad-gold);
    color: #FFFFFF;
    font-family: var(--vk-font-en);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    box-shadow: var(--vk-glow-gold);
    z-index: 2;
}
body.vk .plat3-featured__ribbon svg { flex: none; }

body.vk .plat3-featured__num {
    position: absolute;
    top: 20px;
    right: 26px;
    font-family: var(--vk-font-en);
    font-weight: 800;
    font-size: 12px;
    color: var(--vk-text-dim);
    opacity: .55;
    z-index: 1;
}

body.vk .plat3-featured__icon {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--vk-grad-gold);
    color: #FFFFFF;
    box-shadow: var(--vk-glow-gold);
    transition: transform .5s cubic-bezier(.2,.7,.15,1);
}
body.vk .plat3-featured__icon svg { width: 27px; height: 27px; display: block; }
body.vk .plat3-featured:hover .plat3-featured__icon { transform: scale(1.08) rotate(-4deg); }

body.vk .plat3-featured__body {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    text-align: left;
}
body.vk .plat3-featured__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
body.vk .plat3-featured__title {
    font-family: var(--vk-font-bn);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--vk-text);
}
body.vk .plat3-featured__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    background: rgba(200, 134, 11, 0.12);
    border: 1px solid rgba(200,134,11,0.22);
    color: var(--vk-gold-3);
    font-family: var(--vk-font-en);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}
body.vk .plat3-featured__badge svg { flex: none; }
body.vk .plat3-featured__desc {
    font-size: 15px;
    line-height: 1.5;
    color: var(--vk-text-mid);
    margin: 0;
}
body.vk .plat3-featured__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

/* shared chip look — reused by both the featured card and the mini cards */
body.vk .plat3-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(36, 31, 22, 0.92);
    border: 1px solid var(--vk-line);
    color: var(--vk-text-mid);
    font-family: var(--vk-font-en);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
body.vk .plat3-chip svg { flex: none; }
body.vk .plat3-chip--sm { padding: 3px 9px; gap: 4px; font-size: 10px; }

body.vk .plat3-featured__cta {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 24px;
    border-radius: 999px;
    background: var(--vk-grad-gold);
    color: #FFFFFF;
    font-family: var(--vk-font-bn);
    font-size: 14.5px;
    font-weight: 700;
    box-shadow: var(--vk-glow-gold);
    transition: transform .4s cubic-bezier(.2,.7,.15,1), filter .4s ease;
}
body.vk .plat3-featured__cta-label { white-space: nowrap; }
body.vk .plat3-featured__cta svg { flex: none; }
body.vk .plat3-featured:hover .plat3-featured__cta { transform: translateX(5px); filter: brightness(1.06); }

/* ------------------------------------------------------------------
   Secondary — compact, equal-weight backup/mirror cards in a wrapping row
   ------------------------------------------------------------------ */
body.vk .plat3-secondary {
    max-width: 980px;
    margin: 18px auto 0;
}
body.vk .plat3-secondary__row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

body.vk .plat3-mini {
    position: relative;
    flex: 1 1 calc(33.333% - 11px);
    max-width: calc(33.333% - 11px);
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border-radius: 18px;
    text-decoration: none;
}
body.vk .plat3-mini:focus-visible { outline: 2.5px solid var(--vk-gold); outline-offset: 3px; }

body.vk .plat3-mini__num {
    flex: none;
    font-family: var(--vk-font-en);
    font-weight: 800;
    font-size: 11px;
    color: var(--vk-text-dim);
}
body.vk .plat3-mini__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(200, 134, 11, 0.10);
    border: 1px solid rgba(200,134,11,0.22);
    color: var(--vk-gold-3);
    transition: transform .5s cubic-bezier(.2,.7,.15,1), background .4s ease, color .4s ease;
}
body.vk .plat3-mini__icon svg { width: 16px; height: 16px; display: block; }
body.vk .plat3-mini:hover .plat3-mini__icon {
    background: var(--vk-grad-gold);
    color: #FFFFFF;
    transform: scale(1.08) rotate(-4deg);
}

body.vk .plat3-mini__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}
body.vk .plat3-mini__title {
    font-family: var(--vk-font-bn);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--vk-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.vk .plat3-mini__desc {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--vk-text-mid);
    margin: 0;
}
body.vk .plat3-mini__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
}

body.vk .plat3-mini__go {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(36, 31, 22, 0.94);
    border: 1px solid var(--vk-line-2);
    color: var(--vk-text);
    transition: transform .4s cubic-bezier(.2,.7,.15,1), background .4s ease, color .4s ease;
}
body.vk .plat3-mini__go svg { flex: none; }
body.vk .plat3-mini:hover .plat3-mini__go {
    background: var(--vk-grad-gold);
    color: #FFFFFF;
    transform: translateX(3px);
}

/* ---- responsive ---- */
@media (max-width: 1040px) {
    body.vk .plat3-primary,
    body.vk .plat3-secondary { max-width: 680px; }
}

@media (max-width: 900px) {
    body.vk .plat3-featured { padding: 28px 28px 28px 26px; gap: 20px; }
    body.vk .plat3-featured__icon { width: 56px; height: 56px; }
    body.vk .plat3-featured__icon svg { width: 23px; height: 23px; }
    body.vk .plat3-featured__title { font-size: 20px; }
    body.vk .plat3-mini { flex: 1 1 calc(50% - 8px); max-width: calc(50% - 8px); }
}

@media (max-width: 720px) {
    body.vk .plat3-featured {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
        padding: 28px 24px 26px;
    }
    body.vk .plat3-featured__ribbon { left: 24px; }
    body.vk .plat3-featured__num { top: 24px; right: 24px; }
    body.vk .plat3-featured__cta { align-self: stretch; justify-content: center; }
}

@media (max-width: 560px) {
    body.vk .plat3-featured { padding: 26px 18px 22px; gap: 16px; border-radius: 22px; }
    body.vk .plat3-featured__ribbon { top: -12px; left: 18px; font-size: 9.5px; padding: 5px 12px 5px 10px; }
    body.vk .plat3-featured__num { display: none; }
    body.vk .plat3-featured__icon { width: 48px; height: 48px; }
    body.vk .plat3-featured__icon svg { width: 20px; height: 20px; }
    body.vk .plat3-featured__title { font-size: 17.5px; }
    body.vk .plat3-featured__desc { font-size: 13px; }
    body.vk .plat3-featured__cta { padding: 13px 18px; font-size: 13.5px; }

    body.vk .plat3-secondary__row { flex-direction: column; }
    body.vk .plat3-mini { flex: 1 1 100%; max-width: 100%; padding: 14px 15px; border-radius: 16px; }
    body.vk .plat3-mini__num { display: none; }
    body.vk .plat3-mini__chips { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .plat3-featured,
    body.vk .plat3-featured__icon,
    body.vk .plat3-featured__cta,
    body.vk .plat3-mini,
    body.vk .plat3-mini__icon,
    body.vk .plat3-mini__go { transition: none !important; }
}
/* ==================================================================
   vp0016 — Final CTA ("আজই যাত্রা শুরু করুন") — FULL-WIDTH SLIM
   redesign, glass style (supersedes the earlier centred ~840px
   "Premium Spotlight" shell). Now a single slim horizontal glass bar
   spanning the standard 1180px content width — icon ring + eyebrow/
   headline/lead on the left, a divider, then the buttons + a compact
   inline trust strip on the right — mirroring the vp0005 (verify3)
   full-width-slim pattern for layout consistency across the page.
   Dot-grid background (mirrors .hv4-grid) sits behind the bar for depth.
   glass-system.css (.gl-aura/.gl-orb/.gl-card/.gl-card--solid/.gl-chip)
   must be loaded before this file.
   ================================================================== */

.cta5-section{ position: relative; isolation: isolate; overflow: hidden; }
/* FAQ and the final CTA otherwise butt directly against each other under
   the sitewide "no blank space between sections" rule (which zeroes every
   section's own padding-top/bottom) — add a little breathing room back in
   here specifically, via margin (untouched by that rule) rather than
   padding, per direct request. */
body.vk .cta5-section{ margin-top: clamp(28px, 4vw, 48px); }

.cta5-bg{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cta5-grid{
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(23, 21, 15, .10) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(900px 380px at 50% 50%, #100D08 40%, transparent 85%);
  mask-image: radial-gradient(900px 380px at 50% 50%, #100D08 40%, transparent 85%);
}

.cta5-shell.gl-card{
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center;
  gap: clamp(28px,4vw,48px);
  padding: clamp(22px,2.8vw,32px) clamp(26px,3.4vw,44px) !important;
  text-align: left;
}

.cta5-main{ flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 20px; }

.cta5-ring{
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px; flex: none;
  background: var(--vk-grad-gold);
  box-shadow: 0 10px 22px rgba(200,134,11,0.22);
  color: #F5EFE0;
}

.cta5-copy{ min-width: 0; }
.cta5-shell .vk-eyebrow{ margin-bottom: 6px; }
.cta5-shell .vk-h1{ font-size: clamp(20px,2.2vw,26px); max-width: 26ch; }
.cta5-shell .vk-lead{ max-width: 58ch; margin: 8px 0 0; font-size: 14.5px; }

.cta5-side{
  flex: 0 0 auto;
  display: flex; align-items: center; gap: clamp(20px,2.6vw,32px);
  padding-left: clamp(24px,3vw,40px);
  border-left: 1px solid rgba(232,162,0,0.16);
}

.cta5-buttons{
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
  gap: 10px;
}
.cta5-buttons .vk-btn{ white-space: nowrap; justify-content: center; }

.cta5-strip{
  display: flex; flex-direction: column; gap: 10px;
}
.cta5-stat{
  display: flex; align-items: center; gap: 10px; text-align: left; white-space: nowrap;
}
.cta5-stat__ic{ width: 30px; height: 30px; border-radius: 10px; flex: none; }
.cta5-stat__text{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cta5-stat__text strong{
  font-family: var(--vk-font-bn); font-size: 12.5px; font-weight: 700; color: #F5EFE0;
}
.cta5-stat__text span{
  font-family: var(--vk-font-bn); font-size: 11px; color: var(--vk-text-mid);
}

/* ---- ~1024px: side column moves below, main content centred ---- */
@media (max-width:1024px){
  .cta5-shell{ flex-direction: column; text-align: center; }
  .cta5-main{ flex-direction: column; text-align: center; }
  .cta5-shell .vk-lead{ margin: 8px auto 0; }
  .cta5-side{
    flex-direction: column;
    padding-left: 0; border-left: 0;
    padding-top: 20px; border-top: 1px solid rgba(232,162,0,0.16);
    width: 100%;
  }
  .cta5-buttons{ flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; }
  .cta5-strip{ flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

@media (max-width:480px){
  .cta5-buttons{ flex-direction: column; align-items: stretch; width: 100%; }
  .cta5-buttons .vk-btn{ width: 100%; text-align: center; justify-content: center; }
  .cta5-strip{ align-items: center; }
}
/* ==================================================================
   vp0017 — "Bangladesh × 9wickets" trust story — SLIM PREMIUM PANEL
   redesign (supersedes the earlier split with 4 separate floating
   gl-card stat tiles). Still a left/right split — eyebrow+headline+
   lead on the left — but the 4 stats now live inside ONE unified glass
   "dock" panel (mirrors the hero's .hv4-dock language: a single
   gl-card--solid shell with hairline dividers between cells instead of
   4 separately-shadowed cards), which is both more compact (slim: no
   per-tile gaps/shadows stacking up) and reads as one cohesive premium
   instrument rather than a loose tile grid. Safety note stays full-width
   beneath both columns.
   Base .vk-section/.vk-eyebrow/.vk-h2/.vk-lead typography kept as-is,
   layout fully owned by this new .story3-* prefix. glass-system.css
   (.gl-aura/.gl-orb/.gl-card/.gl-card--solid/.gl-chip) must be loaded
   before this file.
   ================================================================== */

.story3-section{ position: relative; isolation: isolate; overflow: hidden; }
.story3-inner{ position: relative; z-index: 1; }

.story3-grid{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr);
  gap: clamp(28px,4vw,52px);
  align-items: center;
}

/* ---------- left: eyebrow + headline + lead ---------- */
.story3-head{ text-align: left; min-width: 0; }
.story3-head .vk-eyebrow,
.story3-head .vk-h2,
.story3-head .vk-lead{ text-align: left; }
.story3-head .vk-h2{ font-size: clamp(22px,2.6vw,30px); }
.story3-head .vk-lead{ max-width: 52ch; margin: 10px 0 0; font-size: 14.5px; }
.story3-head .vk-lead a{ color: #E8A200; text-decoration: underline; text-underline-offset: 3px; }
.story3-head .vk-lead a:hover{ color: #8A5A0A; }

/* ---------- right: one unified "dock" panel, 2x2 internal grid ---------- */
.story3-stats.gl-card{
  position: relative; isolation: isolate; overflow: hidden;
  list-style: none; margin: 0; min-width: 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  padding: 0 !important;
}
.story3-stats::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: var(--vk-grad-gold, linear-gradient(135deg, #FFC72C, #E8A200 55%, #C8860B));
}
.story3-stat{
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  gap: 8px; padding: 18px 20px; min-width: 0;
  border-right: 1px solid rgba(232,162,0,0.16);
  border-bottom: 1px solid rgba(232,162,0,0.16);
}
.story3-stat:nth-child(2n){ border-right: 0; }
.story3-stat:nth-last-child(-n+2){ border-bottom: 0; }
.story3-stat__icon{ width: 38px; height: 38px; border-radius: 11px; flex: none; }
.story3-stat__icon svg{ width: 18px; height: 18px; display: block; }
.story3-stat__num{
  font-family: var(--vk-font-en);
  font-weight: 800;
  font-size: clamp(18px,1.9vw,22px);
  line-height: 1.1;
  color: #F5EFE0;
}
.story3-stat__lbl{
  font-family: var(--vk-font-bn);
  font-size: 12px;
  line-height: 1.4;
  color: #C9BFA8;
}

/* ---------- responsive: stack to single column (text first, dock panel below) ---------- */
@media (max-width:860px){
  .story3-grid{ grid-template-columns: 1fr; }
  .story3-head{ text-align: center; }
  .story3-head .vk-eyebrow,
  .story3-head .vk-h2,
  .story3-head .vk-lead{ text-align: center; }
  .story3-head .vk-lead{ margin-left: auto; margin-right: auto; }
  .story3-stats.gl-card{ margin-top: 4px; }

  /* mobile: icon + number + label run in a single row instead of stacking
     vertically, so each stat reads as one line ("🕐 24/7 Live Support")
     rather than a tall icon-over-text column. */
  .story3-stat{ flex-direction: row; align-items: center; text-align: left; flex-wrap: nowrap; }
}

/* ---------- very small screens: dock panel collapses to 1 column, still
   the same centred vertical stack — no row-flip, so alignment stays
   consistent across every breakpoint. ---------- */
@media (max-width:480px){
  .story3-stats.gl-card{ grid-template-columns: 1fr; }
  .story3-stat{ padding: 16px 18px; border-right: 0 !important; }
  .story3-stat:not(:last-child){ border-bottom: 1px solid rgba(232,162,0,0.16) !important; }
}

@media (prefers-reduced-motion: reduce){
  .story3-stat{ transition: none !important; }
}
/* ==========================================================================
   9wickets — "Why Us" section REDESIGN v5 "Staggered Glass Grid"
   --------------------------------------------------------------------------
   Supersedes why-split.css (v4, "Trust Split" — fixed editorial left column
   + flat 2x3 hairline info-list on the right). This pass drops the split
   entirely: a single centred head (eyebrow/heading/lead/stat/CTA, reusing
   the shared .vk-section__head/.vk-eyebrow/.vk-h2/.vk-lead primitives) sits
   above a full-width grid of six frosted .gl-card tiles. The six tiles are
   NOT a flat equal grid — odd tiles (1st, 3rd, 5th...) sit lower than even
   tiles, so the row reads as a zigzag/staggered rhythm instead of a rigid
   table. Desktop = 3 columns, tablet = 2 columns (stagger kept, it still
   reads as a wave down two columns), mobile = 1 column stacked flat (no
   stagger — nothing to zigzag against in a single column).
   Glass language reused from glass-system.css: .gl-aura/.gl-orb behind the
   grid, .gl-card for every tile, .gl-chip for every icon badge.
   Reuses existing engines only — [data-reveal]/is-in, [data-count]/data-bn —
   no new JS. Scoped entirely under .why5-* (plus the shared .vk-* + .gl-*
   primitives already documented above).
   ========================================================================== */

/* Compact section padding + light backdrop, matching the old v4 override
   (wickets-home.css / vk-overrides.css both apply a generic !important
   section padding at equal specificity — this file loads after those, so
   plain rules below already win; kept without !important on purpose so a
   later, more specific override can still adjust it if needed). */
body.vk .vk-why--v4.vk-section {
    padding-top: clamp(20px, 2.4vw, 32px);
    padding-bottom: clamp(20px, 2.4vw, 32px);
    overflow: visible;
}

/* .vk-section already carries position: relative, so .gl-aura (position:
   absolute; inset:0) sizes itself to the section automatically. The head
   and grid are plain in-flow blocks though, and in-flow content paints
   *before* positioned descendants — without an explicit stacking context
   the aura would sit visually on top of them, so both get lifted onto
   their own layer above it. */
body.vk .why5-head,
body.vk .why5-grid { position: relative; z-index: 1; }

/* ---------------------------- HEAD ---------------------------- */
body.vk .why5-head { max-width: 720px; }

body.vk .why5-head__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 22px;
    margin-top: 22px;
}

body.vk .why5-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    min-height: 52px;
    background: linear-gradient(135deg, rgba(232, 162, 0, 0.14), rgba(232, 162, 0, 0.03));
    border: 1px solid rgba(200,134,11,0.22);
    border-radius: 14px;
    text-align: left;
    box-sizing: border-box;
}
body.vk .why5-stat__num {
    flex: none;
    font-family: var(--vk-font-en, 'Plus Jakarta Sans', sans-serif);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    background: linear-gradient(95deg, #E8A200 0%, #C8860B 60%, #8A5A0A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
}
body.vk .why5-stat__lbl {
    font-size: 11px;
    line-height: 1.3;
    color: var(--vk-text-mid);
    font-weight: 600;
    max-width: 15ch;
}

/* ---------------------------- GRID + STAGGER ---------------------------- */
body.vk .why5-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 20px 24px;
    max-width: 1180px;
    margin: 34px auto 0;
}

/* Zigzag rhythm: odd tiles (1, 3, 5) ride ~24px lower than even tiles
   (2, 4, 6). align-items:start on the grid keeps every card at its own
   natural height so the offset is actually visible instead of being
   absorbed by row-stretch. */
body.vk .why5-card:nth-child(odd) { margin-top: 24px; }
body.vk .why5-card:nth-child(even) { margin-top: 0; }

body.vk .why5-card {
    padding: 26px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.vk .why5-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    margin-bottom: 14px;
    transition: transform .4s cubic-bezier(.2, .7, .15, 1);
}
body.vk .why5-card:hover .why5-card__icon { transform: scale(1.06) rotate(-4deg); }

body.vk .why5-card__title {
    font-size: 16.5px;
    font-weight: 700;
    color: #F5EFE0;
    margin: 0 0 6px;
    line-height: 1.3;
}
body.vk .why5-card__desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--vk-text-mid, #C9BFA8);
    margin: 0;
}

/* ---------------------------- RESPONSIVE ---------------------------- */
/* Tablet: 2 columns. Stagger rule (nth-child odd/even) still applies —
   with 2 columns that reads as a steady wave down column 1 vs column 2
   rather than a checkerboard, which still satisfies "no rigid grid". */
@media (max-width: 1100px) {
    body.vk .why5-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 20px;
    }
}

/* Mobile: 1 column, flat stack — no stagger, nothing to zigzag against. */
@media (max-width: 640px) {
    body.vk .vk-why--v4.vk-section { padding-top: 30px; padding-bottom: 30px; }
    body.vk .why5-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 26px;
    }
    body.vk .why5-card:nth-child(odd),
    body.vk .why5-card:nth-child(even) { margin-top: 0; }
    body.vk .why5-head__meta { flex-direction: column; }
    body.vk .why5-stat { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .why5-card__icon { transition: none; }
}

/* ==================================================================
   SLIM PASS — every section tightened so it reads as one compact
   screen rather than sprawling well past 100vh. Reduces base section
   padding/hero height plus the head-to-content and section-to-section
   spacing this v2 layout pass introduced. Loaded last (end of this
   file) so it wins over the section-specific rules above.
   ================================================================== */
body.vk .vk-section{ padding-top: 0 !important; padding-bottom: 0 !important; }
body.vk .vk-section__head{ margin-bottom: 18px !important; }
body.vk .vk-hero{ min-height: auto !important; padding-top: clamp(48px,6vw,80px) !important; padding-bottom: 0 !important; }

/* Every section-level wrapper class has its OWN padding-top/bottom from its
   original stylesheet (separate from the shared .vk-section rule above) —
   zero all of them so consecutive sections butt directly against each
   other with no gap, per "no blank space top and bottom of sections". */
body.vk .vk-agents--v2,
body.vk .vk-why--v4,
body.vk .vk-how--v2, body.vk .vk-how--v3,
body.vk .vk-verify--v2,
body.vk .vk-quotes--v3,
body.vk .vk-live,
body.vk .vk-community--pills,
body.vk .vk-platforms--pills,
body.vk .vk-cta, body.vk .vk-cta--premium,
body.vk .vk-story,
body.vk .vk-faq{ padding-top: 0 !important; padding-bottom: 0 !important; }

/* each section still needs SOME internal breathing room around its own
   head/content — add that back as margin (collapses cleanly, doesn't
   create a visual "gap between sections" the way section padding did)
   on the innermost content wrapper each section already has. */
body.vk .vk-section__head{ margin-top: 32px !important; }
body.vk .ac2-grid,.why5-grid,.steps3-timeline,.quotes4-grid,.social2-rail,
.plat3-featured,.plat3-secondary,.live3-console,.story3-grid,.story3-split{ margin-bottom: 32px !important; }
body.vk .vk-faq .vk-section__head{ margin-top: 32px !important; }
.faq3-shell{ padding-bottom: 32px !important; }
.cta4-split{ margin-top: 32px !important; margin-bottom: 32px !important; }
.hv4-hero{ padding-bottom: 32px !important; }

/* per-section head->grid gap */
body.vk .ac2-grid{ margin-top: 20px !important; }
body.vk .why5-grid{ margin-top: 20px !important; }
body.vk .steps3-timeline{ margin-top: 24px !important; }
body.vk .quotes4-grid{ margin-top: 20px !important; }
body.vk .social2-rail{ margin-top: 20px !important; }
body.vk .plat3-featured,body.vk .plat3-secondary{ margin-top: 16px !important; }
body.vk .live3-console{ margin-top: 18px !important; }
body.vk .story3-grid,.story3-split{ margin-top: 16px !important; }

/* tighten generous card padding slightly across the new tiles/cards */
body.vk .ac2-tile{ padding: 18px 20px !important; }
body.vk .why5-card,.gl-card{ padding: 22px 22px !important; }
body.vk .quotes4-card{ padding: 30px 24px 26px !important; }
body.vk .steps3-card{ padding: 20px 22px !important; }

/* hv4 hero dock/inner vertical rhythm */
.hv4-inner{ gap: 2px; }
.hv4-title{ margin-top: 10px !important; }
.hv4-lead{ margin-top: 10px !important; }
.hv4-cta{ margin-top: 18px !important; }
.hv4-dock{ margin-top: 26px !important; padding: 18px 26px !important; }

@media (max-width:900px){
  body.vk .vk-section{ padding-top: 24px !important; padding-bottom: 24px !important; }
}

/* ---- FIT-IN-ONE-WINDOW FIX: steps timeline was measured at ~1063px tall
   at 1440x900 (overflows). Compress the vertical rhythm between the 4
   stacked alternating cards + tighten card padding/description length so
   the whole timeline fits comfortably in one viewport alongside its head. ---- */
body.vk .steps3-track{ gap: 14px !important; }
body.vk .steps3-card{ padding: 14px 18px !important; }
body.vk .steps3-card__top{ margin-bottom: 6px !important; }
body.vk .steps3-title{ margin-bottom: 2px !important; font-size: 16px !important; }
body.vk .steps3-desc{ font-size: 13px !important; line-height: 1.5 !important; }
body.vk .steps3-timeline{ margin-top: 16px !important; }

/* live-activity is now a horizontal right-to-left marquee (see the
   .live3-* rules near the top of this file) — the old vertical scroll cap
   and slide-in-row transition no longer apply and have been removed. */

/* ---- social cards: slimmer per request (smaller icon, tighter padding/width) ---- */
body.vk .social2-card{ width: clamp(220px,20vw,248px) !important; padding: 16px 16px 14px !important; gap: 6px !important; }
body.vk .social2-card__icon{ width: 38px !important; height: 38px !important; }
body.vk .social2-card__icon svg{ width: 18px !important; height: 18px !important; }
body.vk .social2-card__title{ font-size: 14.5px !important; }
body.vk .social2-card__desc{ font-size: 12.5px !important; line-height: 1.5 !important; }
body.vk .social2-card__count{ font-size: 11px !important; padding: 3px 9px !important; }
body.vk .social2-rail{ gap: 14px !important; }
@media (max-width:900px){
  body.vk .social2-card{ width: clamp(190px,58vw,220px) !important; padding: 14px 14px 12px !important; }
}