/* ==================================================================
   HERO v4 "Centered Command Center" — supersedes the v3 split
   text/photo layout for the homepage hero. Reuses .vk-hero (base
   padding/min-height) and .vk-hero--v3 (headline word/gradient/scramble
   styling — unrelated to the split layout, so still correct here) —
   only adds new classes (.hv4-*) for a centered headline + a single
   unified "trust dock" bar (agent profile + live stats combined) that
   replaces the old side-by-side framed-photo panel. hv3-links/hv3-marq
   (verified-domains row + ticker) are unchanged, reused as-is.
   ================================================================== */

.hv4-hero{
  flex-direction: column;
  text-align: center;
}
/* The sticky header already reserves its own space above; the base
   .vk-hero rule (wickets-home.css) additionally pads clamp(40px,6vw,72px)
   on top of that, reading as a long blank strip before the badge/heading
   appear. Collapse that down — (0,3,0) specificity, beats the base
   `body.vk .vk-hero` (0,2,0) rule regardless of stylesheet order. */
body.vk .hv4-hero.vk-hero{
  padding-top: clamp(20px, 2.6vw, 32px) !important;
  padding-bottom: clamp(20px, 2.6vw, 32px) !important;
}
.hv4-hero > .hv3-links,
.hv4-hero > .hv3-marq{ width: 100%; }

/* Premium video backdrop — sits behind .hv4-bg's orbs/grid and the scrim
   below it, injected by w9-hero-v4.php's small footer script (keeps the
   Elementor-stored hero markup untouched, same "additive" approach as the
   rest of this hero). Muted/looped/inline so autoplay is allowed and it
   behaves on mobile; skipped entirely under reduced-motion. */
.hv4-video-bg{
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hv4-video-scrim{
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(16,13,8,.80) 0%, rgba(16,13,8,.60) 38%, rgba(16,13,8,.68) 68%, rgba(16,13,8,.88) 100%);
  pointer-events: none;
}
.hv4-bg{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hv4-orb{ position: absolute; border-radius: 999px; filter: blur(70px); opacity: .5; }
.hv4-orb--a{ width: 420px; height: 420px; top: -120px; right: 8%; background: radial-gradient(circle,#E8A200,transparent 70%); }
.hv4-orb--b{ width: 360px; height: 360px; bottom: -100px; left: 4%; background: radial-gradient(circle,#1D1912,transparent 70%); }
.hv4-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(700px 500px at 50% 20%, #100D08 40%, transparent 85%);
  mask-image: radial-gradient(700px 500px at 50% 20%, #100D08 40%, transparent 85%);
}
@media (prefers-reduced-motion: reduce){ .hv4-orb{ opacity: .35; } }

.hv4-inner{
  position: relative; z-index: 1;
  max-width: 860px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.hv4-badge{
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(36, 31, 22, .75); border: 1px solid rgba(232,162,0,0.16);
  border-radius: 999px; padding: 9px 18px 9px 14px;
  font-family: var(--vk-font-bn); font-size: 13.5px; font-weight: 600; color: #F5EFE0;
  text-decoration: none; box-shadow: 0 4px 16px rgba(232,162,0,0.16);
  backdrop-filter: blur(6px);
}
.hv4-badge__dot{
  width: 8px; height: 8px; border-radius: 50%; background: #C8860B; flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(200,134,11,0.22); animation: vk-pulse-dot 2.2s ease-in-out infinite;
}
.hv4-title{ margin-top: 16px; text-align: center; }
.hv4-title .vk-headline{ justify-content: center; }
.hv4-lead{
  font-family: var(--vk-font-bn); font-size: 16.5px; line-height: 1.8; color: #C9BFA8;
  max-width: 62ch; margin: 14px auto 0; text-align: center;
}
.hv4-cta{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px;
}

/* ---- Trust dock: one wide card combining the agent profile + live stats ---- */
.hv4-dock{
  position: relative; z-index: 1;
  width: 100%; max-width: 980px; margin: 40px auto 0;
  background: #241F16; border: 1px solid rgba(232,162,0,0.16); border-radius: 28px;
  box-shadow: 0 20px 50px rgba(232,162,0,0.16);
  display: flex; align-items: center; gap: 0; padding: 22px 30px;
  text-align: left;
}
.hv4-dock__agent{ display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; }
.hv4-dock__avatar-wrap{ position: relative; flex: 0 0 auto; }
.hv4-dock__avatar{
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(200,134,11,0.22); display: block;
}
.hv4-dock__online{
  position: absolute; right: 2px; bottom: 2px; width: 13px; height: 13px; border-radius: 50%;
  background: #22C55E; border: 2.5px solid rgba(200,134,11,0.22);
}
.hv4-dock__id{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hv4-dock__name{
  display: flex; align-items: center; gap: 6px;
  font-family: var(--vk-font-en); font-weight: 700; font-size: 16px; color: #F5EFE0;
}
.hv4-dock__verified{ color: #C8860B; flex: 0 0 auto; }
.hv4-dock__role{ font-family: var(--vk-font-bn); font-size: 13px; color: #C9BFA8; }
.hv4-dock__stars{ font-family: var(--vk-font-en); font-size: 12.5px; color: #C9BFA8; }
.hv4-dock__stars span[aria-hidden]{ color: #C8860B; letter-spacing: 1px; }
.hv4-dock__actions{ display: flex; gap: 8px; flex: 0 0 auto; margin-left: 16px; }
.hv4-dbtn{
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px;
  font-family: var(--vk-font-en); font-size: 12.5px; font-weight: 600; text-decoration: none;
  white-space: nowrap; transition: transform .3s ease, box-shadow .3s ease;
}
.hv4-dbtn--wa{ background: #22C55E; color: #FFFFFF; }
.hv4-dbtn--wa:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(34, 197, 94, .35); color: #FFFFFF; }
.hv4-dbtn--all{ background: rgba(29, 25, 18, .12); color: #F5EFE0; border: 1px solid rgba(232,162,0,0.16); }
.hv4-dbtn--all:hover{ transform: translateY(-2px); background: rgba(29, 25, 18, .2); color: #F5EFE0; }

.hv4-dock__divider{ width: 1px; align-self: stretch; background: rgba(23, 21, 15, .12); margin: 0 28px; flex: 0 0 auto; }

.hv4-dock__stats{ list-style: none; display: flex; gap: 0; margin: 0; padding: 0; flex: 1 1 auto; }
.hv4-dock__stat{
  flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 0 16px; border-left: 1px solid rgba(232,162,0,0.16);
}
.hv4-dock__stat:first-child{ border-left: 0; padding-left: 0; }
.hv4-dock__stat-ic{ color: #9C927C; }
.hv4-dock__stat-num{
  font-family: var(--vk-font-en); font-weight: 700; font-size: clamp(18px,2vw,24px);
  color: #F5EFE0; line-height: 1;
}
.hv4-dock__stat-lbl{ font-family: var(--vk-font-bn); font-size: 12px; color: #C9BFA8; line-height: 1.3; }

@media (max-width: 1024px){
  .hv4-dock{ flex-direction: column; align-items: stretch; gap: 20px; padding: 24px; }
  .hv4-dock__agent{ justify-content: center; text-align: left; }
  .hv4-dock__divider{ width: 100%; height: 1px; margin: 0; }
  .hv4-dock__stats{ flex-wrap: wrap; }
  .hv4-dock__stat{ flex: 1 1 40%; border-left: 0; padding: 10px 0 0; border-top: 1px solid rgba(232,162,0,0.16); }
  .hv4-dock__stat:nth-child(-n+2){ border-top: 0; padding-top: 0; }
}
@media (max-width: 640px){
  .hv4-dock{ padding: 20px 18px; }
  .hv4-dock__agent{ flex-wrap: wrap; justify-content: center; text-align: center; }
  .hv4-dock__id{ align-items: center; }
  .hv4-dock__actions{ margin-left: 0; width: 100%; justify-content: center; }
  .hv4-dbtn{ flex: 1 1 0; justify-content: center; }

  /* keep all 4 stats on a single row instead of wrapping/stacking —
     shrink to fit rather than break the line. Reuses the desktop's
     vertical divider-between-cells language instead of the 2x2 grid's
     top-border rows, since there's only one row here now. */
  .hv4-dock__stats{ flex-wrap: nowrap; gap: 0; }
  .hv4-dock__stat{
    flex: 1 1 0; min-width: 0;
    align-items: center; text-align: center;
    gap: 2px; padding: 0 4px; border-top: 0;
    border-left: 1px solid rgba(232,162,0,0.16);
  }
  .hv4-dock__stat:first-child{ border-left: 0; padding-left: 0; }
  .hv4-dock__stat-ic svg{ width: 15px; height: 15px; }
  .hv4-dock__stat-num{ font-size: 15px; }
  .hv4-dock__stat-lbl{ font-size: 9.5px; line-height: 1.25; }
}
@media (max-width: 380px){
  .hv4-dock__stat{ padding-left: 2px; padding-right: 2px; }
  .hv4-dock__stat-lbl{ font-size: 9px; }
}