/* ==========================================================================
   9wickets — "বাংলাদেশ × 9WICKETS" (Bangladesh Trust Story) REDESIGN v2
   "Dark Aurora" (loads LAST, after seo-special.css)
   --------------------------------------------------------------------------
   Same dark-aurora premium language as hero-v5/why-v5/verify-v3/live-v2/
   platform-v2/faq-v2. Structure (eyebrow/headline/lead + 4-card stat row +
   safety note) is unchanged from seo-special.css's "Bangladesh Trust Story"
   — only re-themed dark plus the copy rewritten (stat numbers/labels left
   exactly as-is: they're real, factual, and reused verbatim elsewhere on
   the page — e.g. the footer's own stat row — so only the surrounding
   prose changed, not the figures).

   IMPORTANT SCOPE NOTE: unlike hero/why/verify/live/platforms/faq (all
   homepage-only sections), `.vk-story` is a SHARED component also reused
   on the Agent List, FAQ, agent-tier list and help-desk pages (per
   home-relayout.css's own comment). Every rule here is therefore scoped
   under `body.vk-home` (front page only — seo-special.css itself already
   uses this exact scoping for its own home-only responsive tweaks), NOT
   plain `body.vk`, so those other pages keep the original light theme.
   Scoped under .vk-story / .vk-story__* (unchanged classes).
   ========================================================================== */

/* Full-bleed background — same `.vk-section` max-width/centering fix as
   why-v5.css / verify-v3.css / live-v2.css / platform-v2.css. */
body.vk-home .vk-story.vk-section {
    max-width: none !important;
    width: 100%;
    margin: 0 !important;
    padding-top: clamp(28px, 3.2vw, 44px) !important;
    padding-bottom: clamp(28px, 3.2vw, 44px) !important;
    background: linear-gradient(180deg, #0B0906 0%, #14110A 55%, #17150F 100%) !important;
    border-top: 1px solid rgba(255, 199, 44, .14);
    border-bottom: 1px solid rgba(255, 199, 44, .14);
}
body.vk-home .vk-story__aura {
    background:
        radial-gradient(closest-side, rgba(255, 199, 44, .18), transparent 70%) 12% 20% / 42% 70% no-repeat,
        radial-gradient(closest-side, rgba(232, 162, 0, .16), transparent 70%) 88% 80% / 42% 70% no-repeat;
    filter: blur(44px);
    opacity: 1;
    animation: story2-aurora-drift 18s ease-in-out infinite alternate;
}
@keyframes story2-aurora-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-2%, 1.5%, 0) scale(1.05); }
}

/* ---- head ---- */
body.vk-home .vk-story .vk-eyebrow {
    background: rgba(255, 199, 44, .08) !important;
    border-color: rgba(255, 199, 44, .22) !important;
    color: #E9C266 !important;
}
body.vk-home .vk-story .vk-h2 { color: #FBF6EC !important; }
body.vk-home .vk-story .vk-h2 em {
    font-style: normal;
    color: #FFC72C !important;
    text-shadow: 0 0 26px rgba(255, 199, 44, .3);
}
body.vk-home .vk-story .vk-lead { color: #BFB6A0 !important; }
body.vk-home .vk-story .vk-lead a { color: #FFC72C !important; }
body.vk-home .vk-story .vk-lead a:hover { color: #FFE066 !important; }

/* ---- stat cards: cream cards -> dark glass ---- */
body.vk-home .vk-story__stat {
    background: rgba(255, 255, 255, .03) !important;
    border-color: rgba(255, 199, 44, .16) !important;
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .5) !important;
}
body.vk-home .vk-story__stat:hover {
    border-color: rgba(255, 199, 44, .38) !important;
    box-shadow: 0 20px 42px -18px rgba(0, 0, 0, .6) !important;
}
body.vk-home .vk-story__stat-ic {
    background: linear-gradient(135deg, #FFE066, #FFC72C) !important;
    color: #0A0500 !important;
    box-shadow: 0 8px 20px -6px rgba(255, 199, 44, .5) !important;
}
body.vk-home .vk-story__stat-num {
    background: linear-gradient(95deg, #FFE066 0%, #FFC72C 60%, #E8A200 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.vk-home .vk-story__stat-lbl { color: #A79D86 !important; }

/* ---- safety note ---- */
body.vk-home .vk-story__note { color: #A79D86 !important; }
body.vk-home .vk-story__note svg { color: #FFC72C !important; }
body.vk-home .vk-story__note a { color: #FFC72C !important; }
body.vk-home .vk-story__note a:hover { color: #FFE066 !important; }

@media (prefers-reduced-motion: reduce) {
    body.vk-home .vk-story__aura { animation: none !important; }
}