/* VEXARO unified platform design system — staged redesign */
:root{
 --vx-bg:#070708;--vx-panel:#101014;--vx-panel-raised:#17171d;--vx-line:rgba(255,255,255,.11);
 --vx-red:#e10600;--vx-red-bright:#ff3028;--vx-text:#f7f7f8;--vx-muted:#a4a4ad;
 --vx-radius:16px;--vx-shadow:0 18px 50px rgba(0,0,0,.28)
}
html{scroll-behavior:smooth}
body{background-color:var(--vx-bg);color:var(--vx-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.005em}
a{transition:color .18s ease,border-color .18s ease,background-color .18s ease,transform .18s ease}
a:hover{color:#fff}
img{max-width:100%}
:where(.wrap,.container,.shell,.page,.main,.content){max-width:1240px}
:where(.nav,header.site-header,.site-nav,.topbar){border-color:var(--vx-line)!important}
:where(.nav,.site-nav,.topbar){backdrop-filter:blur(18px)}
:where(.brand,.logo,.wordmark){letter-spacing:.12em}
:where(h1,h2,h3){text-wrap:balance;letter-spacing:-.025em}
h1{line-height:1.02}
:where(.card,.panel,.tile,.feature-main,.feature-side,.post,.build-card,.product-card,.setting-card,.stat-card){
 border-color:var(--vx-line)!important;border-radius:var(--vx-radius);box-shadow:var(--vx-shadow)
}
:where(.card,.panel,.tile,.post,.build-card,.product-card,.setting-card){background:linear-gradient(155deg,rgba(255,255,255,.035),transparent 58%),var(--vx-panel)}
:where(button,.cta,.btn,.primary,.ghost,.filter,[role=button]){transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
:where(.cta,.btn,.primary,button[type=submit]){border-radius:10px}
:where(.cta,.btn,.primary):hover,button:hover{transform:translateY(-1px)}
:where(input,select,textarea){border-color:var(--vx-line);border-radius:10px}
:where(input,select,textarea):focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--vx-red-bright);outline-offset:3px}
:where(.muted,.subtle,.description,.eyebrow-copy){color:var(--vx-muted)}
:where(.eyebrow,.kicker,.num,.section-label){letter-spacing:.14em;text-transform:uppercase}
:where(.footer,footer){border-top:1px solid var(--vx-line)}
::selection{background:rgba(225,6,0,.42);color:#fff}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Second-pass polish: platform navigation, readable content and small-screen usability */
:where(.wrap,.container,.shell,.page,.main,.content){width:min(1240px,calc(100% - 48px));margin-inline:auto}
:where(.topbar,header.site-header,.site-header){position:sticky;top:0;z-index:50;background:rgba(7,7,8,.88)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
:where(.nav,.site-nav){min-width:0}
:where(.navlinks,.links,.site-nav-links){align-items:center}
:where(.navlinks a,.links a,.site-nav-links a){white-space:nowrap}
:where(main section){scroll-margin-top:88px}
:where(.hero,.page-hero,.page-header){isolation:isolate}
:where(.hero,.page-hero,.page-header) :where(h1,h2){max-width:100%;text-wrap:balance}
:where(.section,.content-section){position:relative}
:where(.section-head,.head,.section-heading){min-width:0}
:where(.card,.panel,.tile,.feature-main,.feature-side,.post,.build-card,.product-card,.setting-card,.stat-card,.hq-card,.hq-main,.code-card,.clip,.loadout,.social){min-width:0;overflow-wrap:anywhere}
:where(.card,.panel,.tile,.post,.build-card,.product-card,.setting-card,.stat-card){background-image:linear-gradient(145deg,rgba(255,255,255,.035),transparent 56%)}
:where(.card,.panel,.tile,.build-card,.product-card,.setting-card,.hq-card,.code-card,.social){transition:border-color .18s ease,transform .18s ease,background-color .18s ease}
:where(.card,.build-card,.product-card,.setting-card,.hq-card,.code-card,.social):hover{border-color:rgba(225,6,0,.42)!important}
:where(.card p,.panel p,.tile p,.description,.muted){line-height:1.7}
:where(button,.btn,.cta,.primary,.ghost,.filter){min-height:40px}
:where(input,select,textarea){max-width:100%;background-color:#0c0c10;color:var(--vx-text)}
:where(input,select,textarea)::placeholder{color:#777780}
:where(table){width:100%;border-collapse:collapse}
:where(th,td){padding:12px 14px;border-bottom:1px solid var(--vx-line);text-align:left}
:where(th){color:#ddd;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
:where(.empty,.empty-state,.loading-state){border:1px dashed var(--vx-line);border-radius:var(--vx-radius);padding:clamp(22px,4vw,42px);background:rgba(255,255,255,.018)}
:where(.badge,.tag,.pill){max-width:100%;overflow-wrap:anywhere}
:where(.footer,footer){color:#888}
@media(hover:hover) and (pointer:fine){
 :where(.card,.build-card,.product-card,.setting-card,.hq-card,.code-card,.social):hover{transform:translateY(-3px)}
}
@media(max-width:800px){
 :where(.wrap,.container,.shell,.page,.main,.content){width:calc(100% - 28px)}
 :where(.nav,.site-nav){height:auto;min-height:58px;gap:12px;flex-wrap:wrap;padding-block:12px}
 :where(.navlinks,.links,.site-nav-links){max-width:100%;justify-content:flex-start;gap:6px;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;padding:2px 0 7px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
 :where(.navlinks a,.links a,.site-nav-links a){flex:0 0 auto}
 :where(.hero,.page-hero,.page-header){min-height:unset;padding-top:clamp(64px,12vw,100px);padding-bottom:clamp(36px,8vw,64px)}
 :where(.section,.content-section){padding-block:clamp(38px,8vw,70px)}
 :where(.section-head,.head,.section-heading){display:block}
 :where(.section-head p,.head p,.section-heading p){margin-top:14px}
 :where(.grid,.code-grid,.loadouts,.socials){grid-template-columns:repeat(2,minmax(0,1fr))}
 :where(.featured,.hq,.live){grid-template-columns:minmax(0,1fr)}
 :where(.footer,footer){flex-wrap:wrap}
 :where(table){display:block;overflow-x:auto;white-space:nowrap}
}
@media(max-width:520px){
 :where(.grid,.code-grid,.loadouts,.socials,.hq-grid){grid-template-columns:minmax(0,1fr)}
 :where(.wrap,.container,.shell,.page,.main,.content){width:calc(100% - 24px)}
 :where(.card,.panel,.tile,.feature-main,.feature-side,.post,.build-card,.product-card,.setting-card,.hq-card,.hq-main,.code-card,.loadout,.social){padding:20px}
 :where(.actions,.poster-actions){gap:8px}
 :where(.actions .btn,.poster-actions .btn){flex:1 1 145px}
 :where(.hero p){font-size:15px}
 :where(.navstatus){flex-wrap:wrap}
}


/* Production mobile navigation and overflow hotfix — 2026-10-10 */
html,body{width:100%;max-width:100%;min-width:0;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img,video,iframe,svg{max-width:100%}
@media(max-width:800px){
  header.top,header.topbar,header.site-header,.site-header{width:100%;max-width:100%;overflow:visible}
  header .nav,header .wrap.nav,.topbar .nav,.top .nav{width:calc(100% - 24px)!important;max-width:1180px!important;min-width:0!important;height:auto!important;min-height:58px!important;display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;padding:10px 0!important;margin-inline:auto!important}
  header .brand,.topbar .brand,.top .brand{flex:0 1 auto!important;min-width:0!important;max-width:65%!important;font-size:12px!important;letter-spacing:.07em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  header nav,header .navlinks,.topbar nav,.top nav{min-width:0!important;max-width:100%!important}
  header .navlinks,.topbar .navlinks,.top .navlinks{order:3!important;display:flex!important;width:100%!important;flex:1 0 100%!important;gap:6px!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;padding:4px 0 8px!important;scrollbar-width:thin!important;-webkit-overflow-scrolling:touch!important}
  header .navlinks a,.topbar .navlinks a,.top .navlinks a{display:inline-flex!important;align-items:center!important;flex:0 0 auto!important;white-space:nowrap!important;font-size:10px!important;padding:9px 10px!important}
  header .global-nav{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;padding:0 12px 10px!important;margin:0!important;scrollbar-width:thin!important;-webkit-overflow-scrolling:touch!important}
  header .global-nav .btn{flex:0 0 auto!important;white-space:nowrap!important;padding:9px 10px!important;font-size:9px!important}
  .menu-trigger{display:inline-flex!important;flex:0 0 40px!important;width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;font-size:19px!important;line-height:1!important;border-radius:9px!important}
  .mobilemenu{position:absolute!important;top:100%!important;left:12px!important;right:12px!important;width:auto!important;max-width:calc(100vw - 24px)!important;max-height:70vh!important;overflow:auto!important;z-index:100!important}
  main,.wrap,.hero,.section,.grid,.panel,.footer{min-width:0!important;max-width:100%}
  .hero h1{overflow-wrap:normal!important;word-break:normal!important}
  .grid,.tier-grid,.featured{grid-template-columns:minmax(0,1fr)!important}
  .wrap{width:calc(100% - 24px)!important}
  .navlinks a{letter-spacing:.04em!important}
}
@media(max-width:420px){
  .wrap{width:calc(100% - 20px)!important}
  .hero{padding-top:42px!important}
  .hero h1{font-size:clamp(42px,14vw,66px)!important}
  .panel,.plan,.tier-card{padding:16px!important}
}