/* VEXARO premium website skin — shared visual pass */
:root{--vx-red:#e10600;--vx-red-hot:#ff3028;--vx-ink:#050506;--vx-surface:rgba(13,13,16,.88);--vx-stroke:rgba(255,255,255,.12);--vx-muted:#a6a6af}
html{background:#050506;scroll-behavior:smooth}
body{position:relative;isolation:isolate;background-color:#050506!important;color:#f5f5f7}
body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,rgba(3,3,4,.68),rgba(3,3,4,.94)),url("/vexaro-cinematic-bg.svg?v=20261011-brand") center top/cover no-repeat;opacity:.78}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 80% 10%,rgba(225,6,0,.17),transparent 38%),linear-gradient(135deg,transparent 0 62%,rgba(225,6,0,.035) 62.2%,transparent 63%);mix-blend-mode:screen}
:where(.topbar,.top,.bar,header.site-header,.site-nav){background:rgba(5,5,7,.86)!important;backdrop-filter:blur(20px) saturate(130%);border-color:var(--vx-stroke)!important}
:where(.panel,.card,.tile,.post,.build-card,.product-card,.setting-card,.stat,.feature-main,.feature-side,.item,.box,.section-card){background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 48%,rgba(225,6,0,.025)),rgba(10,10,13,.9)!important;border:1px solid var(--vx-stroke);box-shadow:0 16px 44px rgba(0,0,0,.28)}
:where(.panel,.card,.tile,.post,.build-card,.product-card,.setting-card,.stat,.feature-main,.feature-side,.item,.box,.section-card){border-radius:14px}
:where(button,.btn,.cta,.primary,[role=button]){transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease}
:where(.btn,.cta,.primary,button[type=submit],.tab.active){background-image:linear-gradient(120deg,#f01912,#a90500)!important;border-color:rgba(255,55,48,.65)!important;box-shadow:0 7px 22px rgba(225,6,0,.18)}
:where(button,.btn,.cta,.primary,[role=button]):hover{filter:brightness(1.12);box-shadow:0 9px 28px rgba(225,6,0,.22)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid #ff3932;outline-offset:3px}
:where(input,select,textarea){background:rgba(5,5,7,.9)!important;color:#fff;border-color:var(--vx-stroke)!important}
:where(h1,h2,h3){text-wrap:balance}
:where(h2){text-shadow:0 0 28px rgba(225,6,0,.08)}
:where(.brand,.logo,.wordmark){filter:drop-shadow(0 0 12px rgba(225,6,0,.12))}
:where(.badge,.pill,.tag){border-radius:999px}
img{max-width:100%;height:auto}
@media(max-width:700px){body:before{background-position:center top;background-size:auto 72vh} :where(.panel,.card,.tile,.post,.build-card,.product-card,.setting-card){border-radius:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}


/* Mobile-first finishing pass: let the actual page hero lead, not a second full-screen wallpaper. */
body:before{background-image:radial-gradient(ellipse at 78% 8%,rgba(225,6,0,.12),transparent 38%),linear-gradient(180deg,#050506 0%,#070708 52%,#050506 100%)!important;opacity:1!important}
body:after{background:radial-gradient(ellipse at 85% 12%,rgba(225,6,0,.10),transparent 34%)!important;mix-blend-mode:normal!important}
@media(max-width:700px){
  .hero{min-height:0!important;padding:126px 0 54px!important}
  .hero:before{background-image:linear-gradient(90deg,rgba(2,2,2,.94) 0%,rgba(2,2,2,.76) 55%,rgba(2,2,2,.65) 100%),url("/vexaro-cinematic-bg.svg?v=20261011-brand")!important;background-position:center!important;background-size:cover!important;opacity:.72}
  .hero:after{background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.2) 58%,#050506 100%)!important}
  .hero h1{font-size:clamp(43px,12.5vw,76px)!important;line-height:.9!important;letter-spacing:-.065em!important;margin:24px 0 24px!important;text-shadow:0 3px 24px #000!important}
  .hero p{font-size:16px!important;line-height:1.65!important;color:#e0e0e4!important;max-width:100%!important}
  .hero .wrap{width:calc(100% - 40px)!important}
  .hero .actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .hero .actions .btn{width:100%!important;min-height:54px!important}
  .hero-meta{gap:16px!important;flex-wrap:wrap!important;margin-top:28px!important}
  .brandline{margin-top:34px!important}
  .section{padding:64px 0!important}
  .section-head{align-items:flex-start!important;flex-direction:column!important}
  .hq,.hq-grid,.code-grid,.clips,.loadouts,.socials{grid-template-columns:1fr!important}
  .live{padding:26px!important;grid-template-columns:1fr!important}
  .nav{height:68px!important}
  .vxmark{width:132px!important;height:30px!important}
  .brand span{font-size:16px!important}
  .topbar{background:rgba(5,5,6,.96)!important}
}
@media(min-width:701px) and (max-width:1000px){
  .hero{min-height:760px!important}
  .hero h1{font-size:clamp(62px,9vw,100px)!important}
}