/* ==========================================================================
   9wickets — HOMEPAGE RELAYOUT PASS (2026-07)
   --------------------------------------------------------------------------
   Cross-cutting pass across all 12 vk-* sections on post 11 (Home): slim
   vertical rhythm, guarantee natural "one window" height (no min-height:100vh
   dead space — see note below), add a genuine glassmorphism treatment to
   every card/panel/pill, and a couple of small layout tweaks so consecutive
   sections don't read as the same template repeated.

   SCOPING: every rule here is prefixed `body.vk-home` (added by w9-site5.php
   only when is_front_page() is true — see wickets-home.css line ~4 and
   seo-special.css's existing use of the same prefix for .vk-story). Two of
   the classes touched below (.vk-cta--premium/.vk-cta__* and .vk-story/
   .vk-story__*) are REUSED on other pages (Agent List, FAQ, Master/Super/
   Admin/Sub-Admin Agent List, Customer Service, Complaints, New Account —
   verified live via each page's _elementor_data). The `body.vk-home` prefix
   keeps every rule below from ever reaching those pages. The remaining
   classes (.vk-hero--v4, .vk-agents--v2, .vk-why--v4, .vk-how--v2,
   .vk-verify--v2, .vk-quotes--v3, .vk-live, .vk-community--pills,
   .vk-platforms--pills, .vk-seo) only ever appear in post 11's own markup
   (also verified), so the prefix is redundant there but kept for consistency
   and as a defensive habit.

   ONE-WINDOW CHECK (done before writing this file): grepped every one of the
   12 sections' own CSS files plus the shared .vk-section/.vk-hero/.vk-live/
   .vk-cta base rules in wickets-home.css for min-height:100vh/92vh/72vh
   forced-centering. None of the 12 homepage sections carry that pattern —
   the shared `body.vk .vk-section{ padding-block: clamp(24px,2.8vw,40px)
   !important }` rule (vk-overrides.css) already sizes every section to its
   content. The defensive `min-height:0` below is inexpensive insurance, not
   a fix for an active bug.
   Loads LAST in the vk cascade (after seo-special.css) so its equal-
   specificity rules win by source order without needing !important, except
   where the rule being overridden already carries !important itself.
   ========================================================================== */

/* ------------------------------------------------------------------
   0. Defensive sizing — natural height, never a forced viewport panel.
   ------------------------------------------------------------------ */
body.vk-home .vk-section,
body.vk-home .vk-hero--v4,
body.vk-home .vk-cta--premium,
body.vk-home .vk-live {
    min-height: 0;
}

/* ==========================================================================
   1. HERO (.vk-hero--v4) — already slim/one-window (hero-v4.css). Add a
      glass treatment to the trust-stat column so it doesn't sit as flat
      plain text against the dark panel.
   ========================================================================== */
body.vk-home .vk-hero--v4 .hv4-trust {
    position: relative;
    border-left: 0;
    padding: 14px clamp(22px, 2.6vw, 34px);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.6);
}
body.vk-home .vk-hero--v4 .hv4-trust::before {
    content: '';
    position: absolute;
    inset: -30% -20%;
    z-index: -1;
    background: radial-gradient(60% 60% at 70% 20%, rgba(200, 134, 11, 0.28), transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}
body.vk-home .vk-hero--v4 .hv4-trust__item + .hv4-trust__item {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
@media (max-width: 860px) {
    body.vk-home .vk-hero--v4 .hv4-trust { border-radius: 18px; padding: 12px clamp(16px, 4vw, 24px); }
}

/* ==========================================================================
   2. AGENTS (.vk-agents--v2) — row list stays, but arranges 2-up on desktop
      (shorter section, genuinely different composition from the full stack)
      and every row becomes a frosted glass tile over a new soft aura wash.
   ========================================================================== */
body.vk-home .vk-agents--v2 { position: relative; isolation: isolate; }
body.vk-home .vk-agents--v2::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side, rgba(255, 199, 44, 0.14), transparent 70%) 12% 15% / 46% 70% no-repeat,
        radial-gradient(closest-side, rgba(200, 134, 11, 0.12), transparent 70%) 88% 85% / 46% 70% no-repeat;
    filter: blur(38px);
    opacity: .7;
}
body.vk-home .vk-agents--v2 .vk-section__head { margin-bottom: 20px; }
body.vk-home .vk-a2-list { gap: 12px; }
body.vk-home .vk-a2-row {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 252, 240, 0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
@media (min-width: 900px) {
    body.vk-home .vk-a2-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 18px;
    }
}

/* ==========================================================================
   3. WHY (.vk-why--v4) — asymmetric split stays (already distinct + slim);
      glass the hairline-row panel, add a faint aura behind the whole split.
   ========================================================================== */
body.vk-home .vk-why--v4 { position: relative; isolation: isolate; }
body.vk-home .vk-why--v4::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(50% 60% at 85% 30%, rgba(255, 199, 44, 0.12), transparent 72%);
    filter: blur(36px);
}
body.vk-home .vk-w4-right {
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, 0.55);
}
body.vk-home .vk-w4-row { border-color: rgba(255, 255, 255, 0.4); }

/* ==========================================================================
   4. HOW (.vk-how--v2) — zigzag road stays; glass the stop cards, trim the
      head-to-road gap, add an aura wash behind the road.
   ========================================================================== */
body.vk-home .vk-how--v2 { position: relative; isolation: isolate; }
body.vk-home .vk-how--v2::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side, rgba(255, 199, 44, 0.12), transparent 70%) 20% 30% / 50% 80% no-repeat,
        radial-gradient(closest-side, rgba(200, 134, 11, 0.12), transparent 70%) 80% 70% / 50% 80% no-repeat;
    filter: blur(40px);
    opacity: .7;
}
body.vk-home .vk-how--v2 .vk-section__head { margin-bottom: 20px; }
body.vk-home .vk-hw-road { margin-top: 36px; }
body.vk-home .vk-hw-step {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
@media (max-width: 900px) {
    body.vk-home .vk-hw-road { margin-top: 28px; }
}

/* ==========================================================================
   5. VERIFY (.vk-verify--v2) — image+copy split stays; add a whole-section
      aura wash (complements the existing image glow) and glass the device
      chips for consistency with the rest of the page.
   ========================================================================== */
body.vk-home .vk-verify--v2 { position: relative; isolation: isolate; }
body.vk-home .vk-verify--v2::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(55% 65% at 15% 70%, rgba(255, 199, 44, 0.10), transparent 72%);
    filter: blur(38px);
}
body.vk-home .vk-vd-chip {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ==========================================================================
   6. QUOTES (.vk-quotes--v3) — multi-card rail stays; glass the cards, trim
      the head-to-rail gap, add an aura wash behind the rail.
   ========================================================================== */
body.vk-home .vk-quotes--v3 { position: relative; isolation: isolate; }
body.vk-home .vk-quotes--v3::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side, rgba(255, 199, 44, 0.12), transparent 70%) 15% 20% / 46% 75% no-repeat,
        radial-gradient(closest-side, rgba(200, 134, 11, 0.10), transparent 70%) 85% 80% / 46% 75% no-repeat;
    filter: blur(40px);
    opacity: .65;
}
body.vk-home .vk-quotes--v3 .vk-section__head { margin-bottom: 20px; }
body.vk-home .vk-pv3-slider { margin-top: 32px; }
body.vk-home .vk-pv3-card {
    background: rgba(255, 253, 246, 0.62);
    border-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
@media (max-width: 640px) {
    body.vk-home .vk-pv3-slider { margin-top: 24px; }
}

/* ==========================================================================
   7. LIVE (.vk-live) — autoplay rail stays; give the band its own faint
      tint (distinguishes it from the neutral cream of Quotes right above
      it), trim the head-to-rail gap, glass the console cards.
   ========================================================================== */
body.vk-home .vk-live {
    background: linear-gradient(180deg, rgba(255, 199, 44, 0.05) 0%, transparent 60%);
}
body.vk-home .vk-live .vk-section__head { margin-bottom: 20px; }
body.vk-home .vk-lac { margin-top: 32px; }
body.vk-home .vk-lac-card {
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
@media (max-width: 640px) {
    body.vk-home .vk-lac { margin-top: 24px; }
}

/* ==========================================================================
   8. COMMUNITY (.vk-community--pills) — 3-col pill grid stays (already
      glass via social-pills.css); add an aura wash so the existing blur has
      real texture behind it, trim the head gap.
   ========================================================================== */
body.vk-home .vk-community--pills { position: relative; isolation: isolate; }
body.vk-home .vk-community--pills::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side, rgba(255, 199, 44, 0.12), transparent 70%) 10% 25% / 44% 70% no-repeat,
        radial-gradient(closest-side, rgba(200, 134, 11, 0.12), transparent 70%) 90% 75% / 44% 70% no-repeat;
    filter: blur(40px);
    opacity: .7;
}
body.vk-home .vk-community--pills .vk-section__head { margin-bottom: 20px; }

/* ==========================================================================
   9. PLATFORMS (.vk-platforms--pills) — stacked hierarchical pill list
      stays (already glass + aura); just trim the head gap for rhythm.
   ========================================================================== */
body.vk-home .vk-platforms__copy .vk-section__head,
body.vk-home .vk-platforms--pills .vk-eyebrow--shield {
    margin-bottom: 14px;
}

/* ==========================================================================
   10. SEO (.vk-seo) — editorial 2-col (long-form copy + sticky side panel)
       stays; re-glass the side panel (a later retrofit in wickets-home.css
       forces it solid + backdrop-filter:none — this file loads after it, so
       it wins), add an aura wash, trim the oversized head margin.
   ========================================================================== */
body.vk-home .vk-seo { position: relative; isolation: isolate; }
body.vk-home .vk-seo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side, rgba(255, 199, 44, 0.10), transparent 70%) 18% 25% / 46% 80% no-repeat,
        radial-gradient(closest-side, rgba(200, 134, 11, 0.10), transparent 70%) 82% 75% / 46% 80% no-repeat;
    filter: blur(42px);
    opacity: .6;
}
body.vk-home .vk-seo__head { margin-bottom: 28px; }
body.vk-home .vk-seo__panel {
    background: linear-gradient(165deg, rgba(34, 31, 24, 0.6) 0%, rgba(21, 19, 14, 0.6) 100%) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    border: 1px solid rgba(247, 181, 0, 0.30) !important;
}

/* ==========================================================================
   11. CTA (.vk-cta--premium) — split (copy + framed portrait) stays; add a
       subtle frosted panel behind the copy so it reads as a glass card
       against the radial gold glow, and glass the floating trust chip.
       .vk-cta--premium is reused on other pages — every rule here carries
       the body.vk-home prefix so it can never reach them.
   ========================================================================== */
body.vk-home .vk-cta--premium .vk-cta__content { position: relative; z-index: 1; }
body.vk-home .vk-cta--premium .vk-cta__content::before {
    content: '';
    position: absolute;
    inset: -22px -26px;
    z-index: -1;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 28px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 24px 54px -30px rgba(26, 24, 19, 0.35);
}
body.vk-home .vk-cta--premium .vk-cta__chip {
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
@media (max-width: 860px) {
    body.vk-home .vk-cta--premium .vk-cta__content::before { inset: -18px -20px; border-radius: 24px; }
}

/* ==========================================================================
   12. STORY (.vk-story) — 4-up stat grid stays (already has its own aura);
       glass the stat cards, trim the head margin slightly.
       .vk-story is reused on other pages — every rule here carries the
       body.vk-home prefix so it can never reach them.
   ========================================================================== */
body.vk-home .vk-story__head.vk-section__head { margin-bottom: 22px; }
body.vk-home .vk-story__stat {
    background:
        linear-gradient(140deg, rgba(255, 199, 44, 0.10), rgba(255, 199, 44, 0.03)),
        rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-color: rgba(255, 255, 255, 0.6);
}

@media (prefers-reduced-motion: reduce) {
    body.vk-home .vk-a2-row,
    body.vk-home .vk-hw-step,
    body.vk-home .vk-pv3-card,
    body.vk-home .vk-lac-card,
    body.vk-home .vk-story__stat { transition: none; }
}