/* =========================================================
   VR QA ACADEMY — NEURAL AUTOMATION BACKGROUND
   Premium, low-motion background. The hero remains the visual
   focus; the background provides atmosphere without distraction.
   ========================================================= */

:root{
  --vrqa-bg-0:#020817;
  --vrqa-bg-1:#041126;
  --vrqa-bg-2:#071a35;
  --vrqa-blue:#0b72ff;
  --vrqa-cyan:#00c8ff;
  --vrqa-orange:#ff9800;
  --vrqa-mx:50%;
  --vrqa-my:38%;
}

html,body{min-height:100%;}
html{scroll-behavior:smooth;}

body{
  position:relative;
  isolation:isolate;
  color:#eef7ff !important;
  background:
    radial-gradient(720px 480px at var(--vrqa-mx) var(--vrqa-my), rgba(0,150,255,.12), transparent 62%),
    radial-gradient(900px 500px at 92% 8%, rgba(0,200,255,.055), transparent 68%),
    radial-gradient(850px 520px at 8% 92%, rgba(24,95,255,.055), transparent 70%),
    linear-gradient(135deg,var(--vrqa-bg-0),var(--vrqa-bg-1) 48%,var(--vrqa-bg-2)) !important;
  background-attachment:fixed !important;
  overflow-x:hidden;
}

/* Very faint technical grid — intentionally almost invisible. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.26;
  background-image:
    linear-gradient(rgba(72,153,220,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(72,153,220,.045) 1px,transparent 1px),
    radial-gradient(circle,rgba(0,190,255,.11) 1px,transparent 1.4px);
  background-size:48px 48px,48px 48px,96px 96px;
  mask-image:linear-gradient(to bottom,black 0%,black 65%,transparent 100%);
}

/* Your circuit artwork becomes a subtle texture, not the dominant background. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.075;
  background:url("../assets/circuit2.png") center top / cover no-repeat;
  mix-blend-mode:screen;
  filter:saturate(.75) brightness(.75);
}

/* Keep all real UI above the atmospheric layers. */
body > *{position:relative;z-index:1;}

/* One restrained neon pulse. It is masked to the circuit artwork only. */
.vrqa-circuit-pulse{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.38;
  background:
    radial-gradient(circle at 18% 30%, rgba(0,226,255,.95) 0 2px, rgba(0,160,255,.32) 3px, transparent 12px),
    linear-gradient(115deg,transparent 0 43%,rgba(0,215,255,.82) 49%,transparent 55%);
  background-size:100% 100%,240% 240%;
  background-position:0 0,-110% -85%;
  background-repeat:no-repeat;
  -webkit-mask:url("../assets/circuit-lines-mask.png") center top / cover no-repeat;
  mask:url("../assets/circuit-lines-mask.png") center top / cover no-repeat;
  filter:drop-shadow(0 0 5px rgba(0,180,255,.65));
  animation:vrqaPulseTravel 26s ease-in-out infinite;
}

@keyframes vrqaPulseTravel{
  0%,100%{background-position:0 0,-115% -90%;opacity:.22;}
  42%{background-position:0 0,12% 8%;opacity:.38;}
  58%{background-position:0 0,52% 48%;opacity:.42;}
  78%{background-position:0 0,118% 116%;opacity:.25;}
}

/* Slow atmospheric shimmer behind the page. */
.vrqa-ambient-orb{
  position:fixed;
  width:520px;
  height:520px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  left:-180px;
  top:35vh;
  background:radial-gradient(circle,rgba(0,143,255,.075),transparent 68%);
  filter:blur(18px);
  animation:vrqaOrb 30s ease-in-out infinite alternate;
}

@keyframes vrqaOrb{
  from{transform:translate3d(0,0,0) scale(.9);}
  to{transform:translate3d(42vw,-8vh,0) scale(1.15);}
}

/* Header: dark glass, not white. */
.app-header{
  z-index:10000 !important;
  background:rgba(2,10,25,.82) !important;
  border-bottom:1px solid rgba(61,157,255,.18) !important;
  box-shadow:0 10px 32px rgba(0,0,0,.30) !important;
  backdrop-filter:blur(18px) saturate(125%);
}

.header-left .brand-logo{
  width:275px !important;
  height:80px !important;
  object-fit:contain;
  filter:drop-shadow(0 4px 14px rgba(0,145,255,.22));
}

.nav-links a,.nav-dropbtn{
  color:#cfe4f8 !important;
}
.nav-links a:hover,.nav-dropbtn:hover,.nav-links a.active{
  color:#fff !important;
  background:rgba(0,142,255,.12) !important;
}

.btn-home{
  background:linear-gradient(135deg,#0878ff,#0c3f8e) !important;
  border:1px solid rgba(100,205,255,.28) !important;
  box-shadow:0 8px 24px rgba(0,92,210,.22) !important;
}

.search-section input,.mobile-nav input{
  color:#eef8ff !important;
  background:rgba(7,21,43,.84) !important;
  border:1px solid rgba(88,160,220,.24) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.025),0 4px 18px rgba(0,0,0,.12) !important;
}
.search-section input::placeholder,.mobile-nav input::placeholder{color:#8197b2 !important;}
.search-section input:focus,.mobile-nav input:focus{
  background:rgba(8,25,50,.96) !important;
  border-color:rgba(0,183,255,.65) !important;
  box-shadow:0 0 0 4px rgba(0,164,255,.09),0 8px 25px rgba(0,0,0,.18) !important;
}

.global-search-results{
  background:rgba(4,14,31,.97) !important;
  border-color:rgba(73,173,255,.30) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.60) !important;
}
.global-search-results a,.global-search-empty{color:#eaf7ff !important;}
.global-search-results a:hover{background:rgba(0,139,255,.14) !important;color:#62d8ff !important;}

/* Hero polish — preserve the supplied single banner. */
.home-hero{
  border:1px solid rgba(73,177,255,.28) !important;
  box-shadow:0 26px 80px rgba(0,45,100,.32),0 0 0 1px rgba(255,255,255,.025) inset !important;
}
.home-hero::after{
  box-shadow:inset 0 0 60px rgba(0,150,255,.06),inset 0 0 0 1px rgba(100,205,255,.08) !important;
}

/* Premium dark-glass practice cards. */
.lab-card{
  background:linear-gradient(145deg,rgba(8,24,47,.92),rgba(5,17,35,.86)) !important;
  border-color:rgba(76,153,220,.20) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.lab-card:hover{
  transform:translateY(-5px) !important;
  border-color:rgba(0,181,255,.45) !important;
  box-shadow:0 24px 55px rgba(0,68,140,.28),0 0 30px rgba(0,146,255,.07) !important;
}
.lab-icon{
  background:rgba(7,31,59,.82) !important;
  border-color:rgba(72,164,230,.20) !important;
}
.lab-title{color:#f3f8ff !important;}
.lab-desc{color:#9eb2ca !important;}
.lab-card::after{color:#45cfff !important;}

.section-heading h2{color:#f4f8ff !important;}
.section-heading p{color:#91a7c0 !important;}

/* Lab-page content: dark glass shell with bright controls for usability. */
.container .card,.card{
  background:linear-gradient(145deg,rgba(8,24,47,.91),rgba(5,16,33,.89)) !important;
  border-color:rgba(74,155,220,.20) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.24) !important;
  color:#edf7ff !important;
}
.card-header{
  background:linear-gradient(180deg,rgba(10,31,58,.88),rgba(7,22,43,.84)) !important;
  border-bottom-color:rgba(79,153,214,.14) !important;
}
.card-title,.field-label{color:#edf7ff !important;}
.card-body{color:#c5d6e8 !important;}

.control,input:not(.search-section input):not(.mobile-nav input),textarea,select{
  background:#f7fbff !important;
  color:#10213a !important;
}

/* Remove legacy generated shell and duplicate circular logo. */
.lab-page-shell,.lab-context,.home-hero-logo-wrap,.home-hero-logo{display:none !important;}

/* Custom menus must remain above every card. */
.container .grid,.container .grid>.card,.field{overflow:visible !important;}
.container .grid>.card{position:relative !important;z-index:1 !important;}
#searchableSelectList.is-fixed-dropdown,#multiPanel.is-fixed-dropdown,#suggestions.is-fixed-dropdown{
  position:fixed !important;
  z-index:100000 !important;
  background:#fff !important;
  color:#10213a !important;
  box-shadow:0 24px 65px rgba(0,0,0,.60) !important;
}

/* Subtle selection accent. */
::selection{background:rgba(0,154,255,.34);color:#fff;}

@media (max-width:900px){
  .header-left .brand-logo{width:94px !important;height:50px !important;}
  body::after{opacity:.055;}
  .vrqa-circuit-pulse{opacity:.25;}
}

@media (prefers-reduced-motion:reduce){
  .vrqa-circuit-pulse,.vrqa-ambient-orb{animation:none !important;}
  *{scroll-behavior:auto !important;}
}