/* Velocity V13 — hero/header merge + Steam account polish. 2026-09-06 */

/* HOME: topbar sits inside/over the hero, so the artwork reaches the search bar. */
body.vc-v9-home-body .v9-topbar{
  position:absolute!important;
  inset:0 0 auto 0!important;
  height:72px!important;
  z-index:1200!important;
  background:linear-gradient(180deg,rgba(2,9,16,.90) 0%,rgba(2,10,18,.72) 58%,rgba(2,10,18,.18) 100%)!important;
  border-bottom:1px solid rgba(70,153,220,.20)!important;
  box-shadow:none!important;
  backdrop-filter:blur(5px) saturate(1.08);
  -webkit-backdrop-filter:blur(5px) saturate(1.08);
}
body.vc-v9-home-body .v9-topbar-inner{
  height:72px!important;
  width:min(1520px,calc(100% - 48px))!important;
  max-width:none!important;
  margin:0 auto!important;
}

/* Large transparent cinematic wallpaper — extends behind brand/nav/search. */
body.vc-v9-home-body .v9-home{padding-top:0!important}
body.vc-v9-home-body .v9-hero{
  height:455px!important;
  min-height:455px!important;
  margin:0!important;
  overflow:hidden!important;
  border-bottom:1px solid rgba(48,141,210,.31)!important;
  background:#020b14!important;
  isolation:isolate;
}
body.vc-v9-home-body .v9-hero-scene{
  position:absolute!important;
  inset:-20px!important;
  opacity:.90!important;
  transform:scale(1.035)!important;
  background-image:url('/assets/img/velocity-home-bg.webp')!important;
  background-size:cover!important;
  background-position:center 43%!important;
  background-repeat:no-repeat!important;
  filter:saturate(1.22) contrast(1.10) brightness(.72)!important;
  z-index:0!important;
}
body.vc-v9-home-body .v9-hero-scene:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  display:block!important;
  background:
    radial-gradient(ellipse at 63% 35%,rgba(26,148,255,.30) 0,rgba(11,89,165,.12) 25%,transparent 52%),
    radial-gradient(ellipse at 86% 80%,rgba(0,119,255,.18) 0,transparent 44%),
    linear-gradient(90deg,rgba(2,10,18,.78) 0%,rgba(2,10,18,.53) 24%,rgba(2,10,18,.14) 47%,rgba(2,10,18,.10) 75%,rgba(2,10,18,.42) 100%)!important;
}
body.vc-v9-home-body .v9-hero-scene:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(180deg,rgba(1,8,14,.16) 0%,transparent 21%,transparent 72%,rgba(2,11,19,.78) 100%),
    repeating-linear-gradient(90deg,transparent 0 159px,rgba(38,156,235,.025) 160px)!important;
  opacity:1!important;
}
body.vc-v9-home-body .v9-hero:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 67% 28%,rgba(42,174,255,.14),transparent 31%),
    linear-gradient(90deg,rgba(0,7,13,.28),transparent 34%,transparent 82%,rgba(0,7,13,.22))!important;
}
body.vc-v9-home-body .v9-hero:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;height:95px;
  z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(2,12,21,.70) 78%,#03101b 100%);
}

/* Hero art: V + two agents remains the focal point; there is no status box anymore. */
body.vc-v9-home-body .v9-hero-characters{
  display:block!important;
  position:absolute!important;
  z-index:3!important;
  width:975px!important;
  height:430px!important;
  max-width:none!important;
  object-fit:contain!important;
  left:50%!important;
  top:42px!important;
  transform:translateX(-102px)!important;
  opacity:.97!important;
  filter:saturate(1.13) contrast(1.06) drop-shadow(0 18px 35px rgba(0,0,0,.38)) drop-shadow(0 0 20px rgba(17,134,255,.14))!important;
}
body.vc-v9-home-body .v9-live-panel{display:none!important}
body.vc-v9-home-body .v9-hero-inner{
  z-index:5!important;
  width:min(1520px,calc(100% - 48px))!important;
  max-width:none!important;
  margin:0 auto!important;
  height:100%!important;
}
body.vc-v9-home-body .v9-hero-copy{
  left:8px!important;
  top:112px!important;
  width:520px!important;
  z-index:7!important;
}
body.vc-v9-home-body .v9-kicker{font-size:10px!important;letter-spacing:3.2px!important;margin-bottom:10px!important;color:#4bc2ff!important}
body.vc-v9-home-body .v9-hero-copy h1{letter-spacing:-3.2px!important;line-height:.84!important;text-shadow:0 7px 28px rgba(0,0,0,.48)!important}
body.vc-v9-home-body .v9-hero-copy h1 span,
body.vc-v9-home-body .v9-hero-copy h1 strong{font-size:63px!important}
body.vc-v9-home-body .v9-hero-copy h1 span{color:#f6f8fc!important}
body.vc-v9-home-body .v9-hero-copy h1 strong{color:#139dff!important;text-shadow:0 0 28px rgba(18,146,255,.25),0 8px 25px rgba(0,0,0,.34)!important}
body.vc-v9-home-body .v9-hero-copy h2{font-size:23px!important;margin:11px 0 9px!important;letter-spacing:.45px!important}
body.vc-v9-home-body .v9-hero-copy p{width:468px!important;color:#b9cddd!important;font-size:12.8px!important;line-height:1.54!important;text-shadow:0 2px 10px rgba(0,0,0,.42)!important}
body.vc-v9-home-body .v9-hero-buttons{margin-top:16px!important;gap:12px!important}
body.vc-v9-home-body .v9-btn{height:50px!important}

/* Stat rail overlaps the bottom of the hero like the approved reference. */
body.vc-v9-home-body .v9-stat-strip{position:relative!important;z-index:20!important;height:72px!important;margin-top:-26px!important}
body.vc-v9-home-body .v9-stat-grid{box-shadow:0 17px 45px rgba(0,0,0,.40),0 0 0 1px rgba(10,120,200,.05)!important;background:linear-gradient(180deg,rgba(6,26,43,.97),rgba(3,16,28,.98))!important}

/* Brand is slightly more dominant in the corner. */
.v9-topbar .v9-brand{gap:12px!important}
.v9-topbar .v9-brand-logo{width:67px!important;height:58px!important;flex:0 0 67px!important;filter:drop-shadow(0 0 12px rgba(25,152,255,.34))!important}
.v9-topbar .v9-brand-copy b{font-size:19px!important;font-weight:850!important;letter-spacing:.1px!important}
.v9-topbar .v9-brand-copy small{font-size:8.3px!important;letter-spacing:3.35px!important;margin-top:5px!important}

/* Steam account: remembered session, avatar/name after login, click opens own ranking profile. */
.v9-actions .v13-steam-account{
  min-width:128px!important;
  width:auto!important;
  height:42px!important;
  padding:0 11px 0 7px!important;
  gap:8px!important;
  border:1px solid rgba(65,153,222,.42)!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,rgba(16,85,142,.92),rgba(8,55,98,.94))!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.v9-actions .v13-steam-account:hover{transform:translateY(-1px);border-color:rgba(63,180,255,.70)!important;box-shadow:0 10px 22px rgba(0,0,0,.28),0 0 20px rgba(20,139,235,.12)!important}
.v13-steam-avatar{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;overflow:hidden;flex:0 0 30px;background:rgba(2,18,31,.55);color:#dff3ff}
.v13-steam-avatar img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:7px!important}
.v13-steam-copy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;line-height:1!important;min-width:0}
.v13-steam-copy b{font-size:10.8px!important;font-weight:850!important;max-width:95px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v13-steam-copy small{margin-top:4px;font-size:6.9px!important;font-weight:800;color:#8ecbfa;letter-spacing:.85px;white-space:nowrap}
.v13-steam-connect{background:linear-gradient(135deg,#128cff,#176bd8)!important;border-color:#3eb4ff!important;box-shadow:0 0 22px rgba(16,139,255,.18)!important}
.v13-steam-connect .v13-steam-copy small{color:#d3edff!important}

/* Slightly more room for header actions on wide desktop. */
@media (min-width:1501px){
  .v9-topbar-inner{grid-template-columns:230px minmax(570px,1fr) auto!important}
  .v9-actions{gap:9px!important}
  .v9-search{width:195px!important}
}
@media (max-width:1500px) and (min-width:1181px){
  body.vc-v9-home-body .v9-hero-copy h1 span,
  body.vc-v9-home-body .v9-hero-copy h1 strong{font-size:56px!important}
  body.vc-v9-home-body .v9-hero-copy{width:475px!important}
  body.vc-v9-home-body .v9-hero-copy p{width:435px!important}
  body.vc-v9-home-body .v9-hero-characters{width:890px!important;transform:translateX(-118px)!important}
  .v9-actions .v13-steam-account{min-width:112px!important;padding-right:8px!important}
  .v13-steam-copy small{display:none!important}
}
@media (max-width:1180px){
  /* Mobile/tablet uses the existing stacked layout rather than covering nav content. */
  body.vc-v9-home-body .v9-topbar{position:relative!important;height:59px!important;background:rgba(2,11,18,.97)!important;backdrop-filter:none!important}
  body.vc-v9-home-body .v9-topbar-inner{height:59px!important;width:calc(100% - 28px)!important}
  body.vc-v9-home-body .v9-hero{height:auto!important;min-height:620px!important}
  body.vc-v9-home-body .v9-hero-copy{top:24px!important;left:auto!important;position:relative!important;width:100%!important}
  body.vc-v9-home-body .v9-hero-characters{top:270px!important;left:50%!important;width:760px!important;height:350px!important;transform:translateX(-50%)!important;opacity:.78!important}
  body.vc-v9-home-body .v9-stat-strip{margin-top:0!important}
  .v9-actions .v13-steam-account{min-width:42px!important;width:42px!important;padding:0!important;justify-content:center!important}
  .v13-steam-copy{display:none!important}
}
@media (max-width:640px){
  body.vc-v9-home-body .v9-hero{min-height:680px!important}
  body.vc-v9-home-body .v9-hero-copy h1 span,
  body.vc-v9-home-body .v9-hero-copy h1 strong{font-size:40px!important}
  body.vc-v9-home-body .v9-hero-copy p{width:100%!important}
  body.vc-v9-home-body .v9-hero-characters{top:350px!important;width:690px!important;height:320px!important}
  .v9-topbar .v9-brand-logo{width:44px!important;height:42px!important;flex-basis:44px!important}
}