/* ==========================================================================
   9wickets — Homepage sections: slim + one-window + glassmorphism pass
   --------------------------------------------------------------------------
   Every section below (b9g-* prefix) replaces the old vk-* section design
   with: (1) tight vertical rhythm — no large top/bottom padding, sized to
   content rather than padded out; (2) a visually distinct layout per
   section rather than repeating the same card grid; (3) frosted-glass
   panels (backdrop-blur) sitting on colored/gradient backdrops, since glass
   only reads as "glass" against something with visual texture behind it.
   Colors match the site palette: navy #08415C, yellow #F9E900, slate
   #8C92AC. Old vk-* section files stay on disk, unused, for rollback.
   ========================================================================== */

.b9g-sec {
    padding: 40px var(--vk-pad, 24px);
    position: relative;
    overflow: hidden;
}
.b9g-wrap { max-width: 1080px; margin: 0 auto; position: relative; z-index: 1; }
.b9g-wrap--narrow { max-width: 760px; }

.b9g-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 700; letter-spacing: .02em;
    color: #08415C !important; background: rgba(8,65,92,.08);
    border-radius: 999px; padding: 5px 14px; margin-bottom: 10px;
}
/* !important throughout this file's text-color rules: wickets-home.css's
   "final override layer" sets body.vk h1..h5 { color:#08415C !important }
   globally (line ~10898), which otherwise beats even inline color styles —
   not just non-!important class rules. */
.b9g-h2 {
    font-family: var(--vk-font-display); font-weight: 700;
    font-size: clamp(22px, 3vw, 30px); line-height: 1.25; color: #08415C !important;
    margin: 0 0 8px;
}
.b9g-lead { font-size: 14px; line-height: 1.6; color: #4A5A66; margin: 0 0 22px; max-width: 560px; }
.b9g-head--center { text-align: center; }
.b9g-head--center .b9g-lead { margin-left: auto; margin-right: auto; }

/* glass panel — the core "glass look" utility, reused with variants */
.b9g-glass {
    background: rgba(255,255,255,.6);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(8,65,92,.08);
}
.b9g-glass--dark {
    background: rgba(8,65,92,.42);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    box-shadow: 0 8px 32px rgba(3,19,28,.28);
}
.b9g-glass--dark .b9g-h2, .b9g-glass--dark .b9g-card-title { color: #fff !important; }
.b9g-glass--dark .b9g-lead, .b9g-glass--dark .b9g-card-body { color: rgba(255,255,255,.72) !important; }
.b9g-glass--dark .b9g-eyebrow { background: rgba(249,233,0,.16); color: #F9E900 !important; }
/* Sections on a solid navy backdrop (.b9g-mesh--navy) need the same gold
   eyebrow treatment even when the eyebrow itself isn't inside a
   .b9g-glass--dark panel (e.g. a centered section header sitting directly
   on the navy mesh, with .b9g-glass--dark reserved for the cards below it).
   Without this, the base .b9g-eyebrow rule's navy-on-transparent styling
   renders navy text on a navy background — illegible. */
.b9g-mesh--navy .b9g-eyebrow { background: rgba(249,233,0,.16); color: #F9E900 !important; }

/* decorative gradient-mesh backdrops (behind glass panels) */
.b9g-mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.b9g-mesh--gold::before, .b9g-mesh--gold::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(0px); opacity: .55;
}
.b9g-mesh--gold::before { width: 340px; height: 340px; top: -120px; left: -60px; background: radial-gradient(circle, #F9E900 0%, transparent 72%); }
.b9g-mesh--gold::after { width: 300px; height: 300px; bottom: -110px; right: -50px; background: radial-gradient(circle, #8C92AC 0%, transparent 72%); }
.b9g-mesh--navy { background: linear-gradient(135deg, #08415C 0%, #052A3D 100%); }
.b9g-mesh--navy::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(249,233,0,.18) 1.4px, transparent 1.4px);
    background-size: 22px 22px; opacity: .5;
    /* Decorative only — must not swallow clicks on real content. Being
       position:absolute (stack level 0) it otherwise paints above in-flow
       static content (headings/links) per CSS stacking order and blocks
       pointer events on anything inside a .b9g-mesh--navy wrap (confirmed:
       this was silently breaking the vp0016 CTA buttons and would have
       broken the new #platform mirror links too). */
    pointer-events: none;
}

/* generic card used inside glass grids */
.b9g-card {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(8,65,92,.08);
    border-radius: 14px;
    padding: 16px;
}
.b9g-card-icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #F9E900, #E6D200);
    font-size: 15px; margin-bottom: 8px;
}
.b9g-card-title { font-size: 14.5px; font-weight: 700; color: #08415C; margin: 0 0 4px; }
.b9g-card-body { font-size: 12.5px; line-height: 1.55; color: #4A5A66; margin: 0; }

.b9g-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-weight: 700; font-size: 13px; font-family: var(--vk-font-bn);
    padding: 11px 22px; border-radius: 999px; text-decoration: none; cursor: pointer; border: 0;
    white-space: nowrap;
}
body.vk .b9g-btn--gold { background: linear-gradient(135deg, #F9E900, #E6D200) !important; color: #08415C !important; }
body.vk .b9g-btn--glass { background: rgba(255,255,255,.7) !important; color: #08415C !important; border: 1px solid rgba(8,65,92,.14) !important; }
body.vk .b9g-btn--outline-light { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.4) !important; }

@media (max-width: 767px) {
    .b9g-sec { padding: 32px 18px; }
}

/* ==========================================================================
   Agent Category section (#agents, "এজেন্ট ক্যাটাগরি") — premium, centered
   card treatment. Scoped strictly under #agents (unique id on the page) so
   it does not affect any other section reusing .b9g-glass/.b9g-card-*.
   Site accent palette only (navy #08415C / yellow #F9E900→#E6D200 / slate
   #8C92AC) — matches hero-v4.css and the rest of this stylesheet; there is
   no lime/gold #9DF229/#FEBE1E anywhere in this codebase, so none is
   introduced here either.
   ========================================================================== */
#agents .w9-catgrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}
#agents .w9-catcard {
    flex: 1 1 220px;
    max-width: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 100%);
    border: 1px solid rgba(8,65,92,.10);
    border-radius: 18px;
    padding: 26px 18px;
    box-shadow: 0 8px 24px rgba(8,65,92,.08);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#agents .w9-catcard:hover,
#agents .w9-catcard:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(8,65,92,.16);
    border-color: rgba(249,233,0,.55);
}
#agents .w9-catcard__icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #F9E900 0%, #E6D200 100%);
    font-size: 22px;
    margin-bottom: 14px;
    box-shadow: 0 8px 18px rgba(249,233,0,.35);
    transition: transform .22s ease;
}
#agents .w9-catcard:hover .w9-catcard__icon { transform: scale(1.08); }
#agents .w9-catcard__title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .015em;
    color: #08415C;
    margin: 0 0 4px;
}
#agents .w9-catcard__body {
    font-size: 12.5px;
    line-height: 1.5;
    color: #4A5A66;
    margin: 0;
}

@media (max-width: 767px) {
    #agents .w9-catgrid { gap: 12px; }
    #agents .w9-catcard { flex: 1 1 140px; max-width: 160px; padding: 20px 14px; }
    #agents .w9-catcard__icon { width: 46px; height: 46px; font-size: 19px; margin-bottom: 10px; }
}

/* ==========================================================================
   Onboarding steps section (#steps, "শুরু করার নিয়ম") — slimmed section
   padding + individual step cards using the same premium card language as
   the Agent Category grid (gradient icon badge, soft shadow, hover lift).
   Scoped strictly under #steps (unique id on the page) so it does not
   affect any other section reusing .b9g-sec/.b9g-glass/.b9g-eyebrow etc.
   Site accent palette only (navy #08415C / gold #F9E900→#E6D200 / slate
   #8C92AC) — consistent with the hero and Agent Category sections.
   ========================================================================== */
#steps.b9g-sec {
    padding: 26px var(--vk-pad, 24px);
}
#steps .w9-stepgrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
#steps .w9-stepcard {
    flex: 1 1 150px;
    max-width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 100%);
    border: 1px solid rgba(8,65,92,.10);
    border-radius: 16px;
    padding: 16px 12px;
    box-shadow: 0 8px 24px rgba(8,65,92,.08);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#steps .w9-stepcard:hover,
#steps .w9-stepcard:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(8,65,92,.16);
    border-color: rgba(249,233,0,.55);
}
#steps .w9-stepcard__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F9E900 0%, #E6D200 100%);
    color: #08415C;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 10px;
    box-shadow: 0 8px 18px rgba(249,233,0,.35);
    transition: transform .22s ease;
}
#steps .w9-stepcard:hover .w9-stepcard__icon { transform: scale(1.08); }
#steps .w9-stepcard__title {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    color: #08415C;
    margin: 0;
}

@media (max-width: 767px) {
    #steps .w9-stepgrid { gap: 8px; }
    #steps .w9-stepcard { flex: 1 1 130px; max-width: 150px; padding: 14px 10px; }
    #steps .w9-stepcard__icon { width: 32px; height: 32px; font-size: 13px; margin-bottom: 8px; }
    #steps .w9-stepcard__title { font-size: 12px; }
}

/* ==========================================================================
   Auto-scrolling marquee utility (w9-marq) — two "side ticker" strips:
   #voices (Player Voice testimonials, vp0006) and #activity (live-activity
   feed, vp0007). Both were previously static drag-scroll rows
   (overflow-x:auto, no Pro widgets involved) with no auto-play. This adapts
   the exact technique already established by .vk-marquee / .vk-ticker__marquee
   in wickets-home.css: the item list is duplicated once in the markup and
   the track animates translateX(-50%), so one full loop of the animation
   is visually seamless. A distinct keyframe name (w9-marquee) is used so it
   cannot collide with the existing vk-marquee / vk-ticker-scroll keyframes;
   direction is flipped per-section with animation-direction: reverse rather
   than a second keyframe, per the same "adapt, don't reinvent" approach.
   Site palette only (navy #08415C / gold #F9E900→#E6D200 / slate #8C92AC),
   fade mask matches the page body background (#F7F8FA).
   ========================================================================== */
.w9-marq {
    overflow: hidden;
    position: relative;
}
.w9-marq::before,
.w9-marq::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    z-index: 2;
    pointer-events: none;
}
.w9-marq::before { left: 0;  background: linear-gradient(90deg, #F7F8FA, transparent); }
.w9-marq::after  { right: 0; background: linear-gradient(-90deg, #F7F8FA, transparent); }
.w9-marq__track {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: max-content;
    padding-bottom: 2px;
    animation: w9-marquee 34s linear infinite;
}
.w9-marq--reverse .w9-marq__track {
    animation-duration: 24s;
    animation-direction: reverse;
}
.w9-marq:hover .w9-marq__track { animation-play-state: paused; }
@keyframes w9-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .w9-marq__track { animation: none; }
    .w9-marq { overflow-x: auto; }
}

@media (max-width: 767px) {
    .w9-marq::before, .w9-marq::after { width: 32px; }
}

/* ==========================================================================
   Social Media section (#social, "সোশ্যাল মিডিয়া") — premium rounded-pill
   links. Was a row of plain text .b9g-glass links with soft-rounded
   (18px) corners and no icon; now a fully rounded capsule per platform
   (border-radius:999px) with a gold gradient icon badge, matching the same
   icon-badge language as #steps .w9-stepcard__icon / #agents
   .w9-catcard__icon elsewhere on this page. Kept unified in the site's
   navy/gold palette rather than per-brand colors (Facebook blue, Instagram
   magenta, etc.) so it reads as one cohesive design system rather than a
   generic social-icon row. Scoped strictly under #social so it does not
   affect the identically-shaped .b9g-glass class used elsewhere.
   ========================================================================== */
#social .w9-socgrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
#social .w9-soc {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 20px 8px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(8,65,92,.06) 0%, rgba(140,146,172,.10) 100%);
    border: 1px solid rgba(8,65,92,.12);
    box-shadow: 0 6px 18px rgba(8,65,92,.08);
    text-decoration: none;
    color: #08415C;
    font-weight: 700;
    font-size: 12.5px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#social .w9-soc:hover,
#social .w9-soc:focus-visible {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 14px 30px rgba(8,65,92,.18);
    border-color: rgba(249,233,0,.55);
    background: linear-gradient(135deg, rgba(249,233,0,.16) 0%, rgba(8,65,92,.08) 100%);
}
#social .w9-soc__icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #F9E900 0%, #E6D200 100%);
    color: #08415C;
    box-shadow: 0 4px 10px rgba(249,233,0,.35);
    transition: transform .22s ease;
}
#social .w9-soc:hover .w9-soc__icon { transform: scale(1.1) rotate(-6deg); }
#social .w9-soc__label { white-space: nowrap; }

@media (max-width: 767px) {
    #social .w9-socgrid { gap: 9px; }
    #social .w9-soc { padding: 7px 16px 7px 8px; font-size: 12px; gap: 7px; }
    #social .w9-soc__icon { width: 26px; height: 26px; }
    #social .w9-soc__icon svg { width: 14px; height: 14px; }
}

/* ==========================================================================
   Gaming Platform section (#platform, "গেমিং প্ল্যাটফর্ম") — official /
   anti-phishing domain links. Explicit request for a *more colorful,
   vibrant* premium treatment than the rest of the page (which stays mostly
   navy/gold). The wrap now carries .b9g-mesh--navy (same combo as the
   existing vp0016 CTA panel) for a real gradient-navy backdrop instead of
   the previous washed-out flat slate-blue .b9g-glass--dark alone.
   Each link pill gets its own jewel-tone accent — gold for the primary
   official domain (site's existing accent colour) and teal / coral /
   violet for the three mirrors. These three extra hues are deliberately
   scoped to #platform only: they're glow/gradient tints layered on the
   same navy backdrop and shape system as every other section (rounded
   capsule, gradient icon badge, hover lift), so despite the added colour
   variety it still reads as one page, not a mismatched section.
   ========================================================================== */
#platform .w9-platgrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}
#platform .w9-plat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px 10px 12px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%);
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#platform .w9-plat:hover,
#platform .w9-plat:focus-visible {
    transform: translateY(-4px) scale(1.04);
}
#platform .w9-plat__icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #08415C;
    transition: transform .22s ease;
}
#platform .w9-plat:hover .w9-plat__icon { transform: scale(1.12) rotate(-8deg); }
#platform .w9-plat__label { white-space: nowrap; }

#platform .w9-plat--gold {
    border-color: rgba(249,233,0,.55);
    background: linear-gradient(135deg, rgba(249,233,0,.22) 0%, rgba(230,210,0,.08) 100%);
    box-shadow: 0 8px 24px rgba(249,233,0,.22);
}
#platform .w9-plat--gold .w9-plat__icon { background: linear-gradient(135deg, #F9E900, #E6D200); }
#platform .w9-plat--gold:hover { border-color: #F9E900; box-shadow: 0 16px 34px rgba(249,233,0,.38); }

#platform .w9-plat--teal {
    border-color: rgba(47,184,198,.5);
    background: linear-gradient(135deg, rgba(47,184,198,.20) 0%, rgba(47,184,198,.06) 100%);
    box-shadow: 0 8px 24px rgba(47,184,198,.20);
}
#platform .w9-plat--teal .w9-plat__icon { background: linear-gradient(135deg, #4FD8E3, #1F8E9A); }
#platform .w9-plat--teal:hover { border-color: #4FD8E3; box-shadow: 0 16px 34px rgba(47,184,198,.35); }

#platform .w9-plat--coral {
    border-color: rgba(255,122,89,.5);
    background: linear-gradient(135deg, rgba(255,122,89,.20) 0%, rgba(255,122,89,.06) 100%);
    box-shadow: 0 8px 24px rgba(255,122,89,.20);
}
#platform .w9-plat--coral .w9-plat__icon { background: linear-gradient(135deg, #FF9169, #E85A38); }
#platform .w9-plat--coral:hover { border-color: #FF9169; box-shadow: 0 16px 34px rgba(255,122,89,.35); }

#platform .w9-plat--violet {
    border-color: rgba(155,124,229,.5);
    background: linear-gradient(135deg, rgba(155,124,229,.20) 0%, rgba(155,124,229,.06) 100%);
    box-shadow: 0 8px 24px rgba(155,124,229,.20);
}
#platform .w9-plat--violet .w9-plat__icon { background: linear-gradient(135deg, #B49CF0, #7B5FD1); }
#platform .w9-plat--violet:hover { border-color: #B49CF0; box-shadow: 0 16px 34px rgba(155,124,229,.35); }

@media (max-width: 767px) {
    #platform .w9-platgrid { gap: 9px; margin-top: 14px; }
    #platform .w9-plat { padding: 8px 16px 8px 8px; font-size: 12px; gap: 7px; }
    #platform .w9-plat__icon { width: 26px; height: 26px; }
    #platform .w9-plat__icon svg { width: 13px; height: 13px; }
}

/* ==========================================================================
   VIP / Premium Experience teaser (#vip, new section, sits right after
   Agent Category / #agents) — split layout: framed portrait photo one side,
   eyebrow/headline/perks/CTA the other, on the same navy-mesh dark glass
   panel language as the CTA (vp0016) and Platform (vp0009) sections so it
   reads as a natural part of this page rather than a bolted-on banner.
   Gold is the single accent here (no extra jewel tones, unlike #platform's
   deliberate multi-color treatment) — this section's "premium" comes from
   restraint: one glowing gold frame, one gold badge, one gold button.
   Image: attachment 365 (imported casino photo), object-fit cropped into a
   4:5 frame with the crop shifted toward the subject (top-right of the
   source frame) so the portrait crop keeps her face/upper body centered
   rather than centering the source photo's geometric middle.
   ========================================================================== */
#vip.b9g-sec { padding: 16px var(--vk-pad, 24px); }
#vip .w9-vip {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 20px 26px;
}
#vip .w9-vip__media { flex: 0 0 26%; max-width: 220px; }
#vip .w9-vip__body { flex: 1 1 auto; min-width: 0; }

/* framed portrait — gold border "matte", ambient glow echoing the casino's
   own warm gold/red bokeh lighting in the photo, so the frame feels lit
   from the same source as the image inside it rather than pasted on top */
#vip .w9-vip__frame {
    position: relative;
    isolation: isolate;
    aspect-ratio: 4 / 5;
    border-radius: 22px;
    overflow: hidden;
    border: 2px solid rgba(249,233,0,.55);
    box-shadow: 0 0 0 6px rgba(249,233,0,.08), 0 22px 50px rgba(0,0,0,.45);
}
#vip .w9-vip__frame::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: -1;
    background:
        radial-gradient(closest-side, rgba(249,233,0,.55), transparent 70%);
    filter: blur(46px);
    opacity: .55;
    pointer-events: none;
}
#vip .w9-vip__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 18%;
}
#vip .w9-vip__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #F9E900 0%, #E6D200 100%);
    color: #08415C;
    font-family: var(--vk-font-en);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    box-shadow: 0 8px 18px rgba(249,233,0,.45);
}

/* copy side */
#vip .w9-vip__body .b9g-eyebrow { background: rgba(249,233,0,.16); color: #F9E900 !important; margin-bottom: 6px; }
#vip .w9-vip__body .b9g-h2 { color: #fff !important; max-width: 460px; font-size: clamp(19px, 2.3vw, 25px); margin: 0 0 6px; }
#vip .w9-vip__lead {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255,255,255,.76);
    max-width: 460px;
    margin: 0 0 12px;
}
#vip .w9-vip__perks {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#vip .w9-vip__perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
}
#vip .w9-vip__picon {
    flex: none;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    background: rgba(249,233,0,.14);
    border: 1px solid rgba(249,233,0,.35);
}

@media (max-width: 900px) {
    #vip .w9-vip { flex-direction: column; align-items: stretch; padding: 20px; gap: 16px; }
    #vip .w9-vip__media { max-width: 170px; margin: 0 auto; }
    #vip .w9-vip__body .b9g-h2, #vip .w9-vip__lead { max-width: none; }
}
@media (max-width: 767px) {
    #vip.b9g-sec { padding: 14px 18px; }
    #vip .w9-vip { padding: 16px; }
    #vip .w9-vip__media { max-width: 150px; }
}