/* =========================================================
   VR QA ACADEMY — PREMIUM REDESIGN
   Loaded after the legacy styles to preserve functionality.
   ========================================================= */

:root{
  --vrqa-navy:#071a33;
  --vrqa-navy-2:#0b2d55;
  --vrqa-blue:#0b72ff;
  --vrqa-cyan:#18c8ff;
  --vrqa-orange:#ff7a00;
  --vrqa-amber:#ffb000;
  --vrqa-green:#22c55e;
  --vrqa-bg:#f5f8fc;
  --vrqa-surface:#ffffff;
  --vrqa-border:#e4ebf4;
  --vrqa-text:#10213a;
  --vrqa-muted:#66758a;
  --vrqa-shadow:0 12px 35px rgba(10,39,75,.10);
  --vrqa-shadow-lg:0 24px 70px rgba(8,40,83,.16);
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 420px at 8% -10%, rgba(24,200,255,.10), transparent 60%),
    radial-gradient(800px 380px at 95% 4%, rgba(11,114,255,.08), transparent 58%),
    var(--vrqa-bg) !important;
  color:var(--vrqa-text) !important;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(11,114,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,114,255,.018) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom, black, transparent 72%);
  z-index:-1;
}

/* ================= HEADER ================= */
.app-header{
  position:sticky !important;
  top:0 !important;
  z-index:10000 !important;
  width:100%;
  background:rgba(255,255,255,.92) !important;
  border-bottom:1px solid rgba(11,45,85,.10) !important;
  box-shadow:0 8px 28px rgba(8,34,65,.08) !important;
  backdrop-filter:blur(18px);
}

.header-inner{
  max-width:1440px !important;
  min-height:72px;
  margin:auto;
  padding:10px 24px !important;
  display:flex;
  align-items:center;
  gap:18px;
}

.header-left{
  display:flex;
  align-items:center;
  gap:20px !important;
  min-width:max-content;
}

.header-left .brand-logo{
  width: 275px !important;
  height: 80px !important;
  object-fit: cover;
  display:block;
  filter:drop-shadow(0 5px 12px rgba(11,114,255,.16));
}

.nav-links{
  display:flex !important;
  align-items:center;
  gap:4px !important;
}

.nav-links a,
.nav-dropbtn{
  color:var(--vrqa-navy) !important;
  text-decoration:none;
  font-weight:750 !important;
  font-size:14px;
  padding:10px 12px !important;
  border-radius:10px;
  opacity:1 !important;
  transition:.18s ease;
}

.nav-links a:hover,
.nav-dropbtn:hover,
.nav-links a.active{
  color:var(--vrqa-blue) !important;
  background:#edf6ff !important;
}

.nav-dropdown{position:relative !important}

.nav-dropdown-content{
  display:none;
  position:absolute;
  top:calc(100% + 8px) !important;
  left:0;
  min-width:245px !important;
  padding:8px !important;
  border:1px solid var(--vrqa-border) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 24px 60px rgba(8,35,70,.18) !important;
  z-index:11000 !important;
}

.nav-dropdown.open .nav-dropdown-content{display:block}

.nav-dropdown-content a{
  display:flex !important;
  align-items:center;
  gap:10px;
  padding:11px 12px !important;
  border-radius:10px !important;
  color:var(--vrqa-navy) !important;
  font-size:13px !important;
}

.nav-dropdown-content a:hover{
  background:#eef7ff !important;
  color:var(--vrqa-blue) !important;
}

.search-section{
  flex:1 1 360px;
  display:flex;
  justify-content:center;
  min-width:180px;
}

.search-shell{
  width:min(100%,520px);
  position:relative;
}

.search-shell .search-icon{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  color:#71829a;
  pointer-events:none;
}

.search-section input,
.mobile-nav input{
  width:100% !important;
  height:44px;
  border:1px solid #dce6f1 !important;
  border-radius:13px !important;
  background:#f7faff !important;
  color:var(--vrqa-text) !important;
  outline:none !important;
  padding:0 16px 0 42px !important;
  box-shadow:inset 0 1px 2px rgba(10,40,80,.03);
  transition:.18s ease;
}

.search-section input:focus,
.mobile-nav input:focus{
  background:#fff !important;
  border-color:#73b9ff !important;
  box-shadow:0 0 0 4px rgba(11,114,255,.10) !important;
}

.header-right{
  display:flex;
  align-items:center;
  gap:9px !important;
}

.btn-home{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,var(--vrqa-navy),#0d4d91) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(7,26,51,.20) !important;
  font-size:13px;
}

.avatar-btn{
  width:42px !important;
  height:42px !important;
  border-radius:12px !important;
  border:2px solid #d8e8fb !important;
  background:#fff !important;
  box-shadow:0 5px 15px rgba(11,72,130,.10);
}

.user-dropdown{
  top:calc(100% + 10px) !important;
  min-width:230px !important;
  background:#fff !important;
  border:1px solid var(--vrqa-border) !important;
  box-shadow:0 24px 60px rgba(8,35,70,.18) !important;
  border-radius:16px !important;
}

.dropdown-item{
  color:var(--vrqa-navy) !important;
  padding:10px 12px !important;
}
.dropdown-item:hover{background:#eef7ff !important}

.hamburger{
  color:var(--vrqa-navy) !important;
  font-size:25px !important;
  padding:4px !important;
}


.brand-link{display:flex;align-items:center;text-decoration:none}
.mobile-nav{
  background:#fff !important;
  border-top:1px solid #e6edf5 !important;
  padding:16px !important;
  box-shadow:0 18px 35px rgba(8,35,70,.10);
}
.mobile-nav .search-shell{width:100%}
.mobile-nav a{
  color:var(--vrqa-navy) !important;
  padding:9px 2px !important;
  text-decoration:none;
  font-weight:750;
}
.mobile-course-toggle{
  border:0;
  background:transparent;
  color:var(--vrqa-navy);
  font:inherit;
  font-weight:800;
  text-align:left;
  padding:9px 2px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
}
.mobile-courses{
  display:none !important;
  flex-direction:column;
  gap:3px !important;
  padding:4px 0 5px 14px !important;
}
.mobile-courses.show{display:flex !important}

/* ================= HOME ================= */
.home-page .dashboard{
  max-width:1440px !important;
  padding:28px 24px 48px !important;
}

.home-hero{
  position:relative;
  max-width:1440px;
  margin:0 auto 30px;
  overflow:hidden;
  border-radius:24px;
  background:#071a33;
  box-shadow:var(--vrqa-shadow-lg);
  border:1px solid rgba(255,255,255,.65);
}

.home-hero img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1717 / 916;
  object-fit:cover;
}

.home-hero:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  border-radius:24px;
}

.home-intro{
  display:grid;
  grid-template-columns:1.5fr .85fr;
  gap:22px;
  align-items:stretch;
  margin:0 auto 30px;
}

.intro-panel,
.stats-panel{
  background:rgba(255,255,255,.90);
  border:1px solid var(--vrqa-border);
  border-radius:20px;
  box-shadow:var(--vrqa-shadow);
}

.intro-panel{padding:28px 30px}
.intro-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--vrqa-blue);
  font-size:12px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.intro-kicker:before{
  content:"";
  width:24px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--vrqa-blue),var(--vrqa-orange));
}
.intro-panel h1{
  margin:9px 0 8px;
  font-size:clamp(25px,3vw,38px);
  line-height:1.08;
  color:var(--vrqa-navy);
  letter-spacing:-.03em;
}
.intro-panel p{
  margin:0;
  color:var(--vrqa-muted);
  max-width:760px;
  line-height:1.7;
}
.intro-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

.home-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 18px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
}
.home-btn.primary{
  color:#fff;
  background:linear-gradient(135deg,var(--vrqa-blue),#12b9ee);
  box-shadow:0 10px 24px rgba(11,114,255,.24);
}
.home-btn.secondary{
  color:var(--vrqa-navy);
  background:#fff;
  border:1px solid #dbe6f1;
}

.stats-panel{
  padding:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.stat{
  padding:16px;
  border-radius:15px;
  background:linear-gradient(145deg,#f6fbff,#fff);
  border:1px solid #e6eef7;
}
.stat strong{
  display:block;
  font-size:23px;
  color:var(--vrqa-navy);
}
.stat span{
  display:block;
  margin-top:3px;
  color:var(--vrqa-muted);
  font-size:12px;
  line-height:1.4;
}

.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:15px;
  margin:36px 0 15px;
}
.section-heading h2{
  margin:0;
  color:var(--vrqa-navy);
  font-size:23px;
}
.section-heading p{
  margin:4px 0 0;
  color:var(--vrqa-muted);
  font-size:13px;
}

.path-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.path-card{
  position:relative;
  padding:22px;
  min-height:165px;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--vrqa-border);
  box-shadow:var(--vrqa-shadow);
}
.path-card:after{
  content:"";
  position:absolute;
  width:130px;
  height:130px;
  border-radius:50%;
  right:-50px;
  bottom:-65px;
  background:radial-gradient(circle,rgba(24,200,255,.18),transparent 65%);
}
.path-icon{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:#edf7ff;color:var(--vrqa-blue);
  font-size:21px;
}
.path-card h3{margin:13px 0 5px;color:var(--vrqa-navy)}
.path-card p{margin:0;color:var(--vrqa-muted);font-size:13px;line-height:1.5}
.path-link{
  display:inline-flex;
  margin-top:14px;
  color:var(--vrqa-blue);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}

/* Lab cards — preserve existing emoji/icon content */
.card-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
}
.lab-card{
  position:relative;
  min-height:190px;
  padding:22px 18px !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  background:rgba(255,255,255,.94) !important;
  border:1px solid var(--vrqa-border) !important;
  border-radius:18px !important;
  box-shadow:var(--vrqa-shadow) !important;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.lab-card:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--vrqa-blue),var(--vrqa-cyan),var(--vrqa-orange));
  opacity:.75;
}
.lab-card:hover{
  transform:translateY(-5px) !important;
  border-color:#b8d8f7 !important;
  box-shadow:0 20px 45px rgba(8,62,120,.14) !important;
}
.lab-icon{
  width:58px;height:58px;
  display:grid;place-items:center;
  margin:2px 0 12px !important;
  border-radius:16px;
  background:linear-gradient(145deg,#eef8ff,#f9fcff);
  border:1px solid #e0edf8;
  font-size:34px !important;
}
.lab-title{
  color:var(--vrqa-navy) !important;
  font-size:16px !important;
  font-weight:850 !important;
}
.lab-desc{
  max-width:230px;
  color:var(--vrqa-muted) !important;
  line-height:1.5;
  font-size:12.5px !important;
}
.lab-card:after{
  content:"Practice →";
  margin-top:auto;
  padding-top:13px;
  color:var(--vrqa-blue);
  font-size:12px;
  font-weight:850;
}

/* ================= LAB PAGES ================= */
.lab-page-shell{
  max-width:1440px;
  margin:0 auto;
  padding:20px 24px 8px;
}
.lab-context{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:17px 20px;
  margin-bottom:2px;
  background:linear-gradient(135deg,#071a33,#0d4d91);
  color:#fff;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(7,39,77,.14);
}
.lab-context-main{
  display:flex;
  align-items:center;
  gap:12px;
}
.lab-context-logo{
  width:42px;height:42px;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.2));
}
.lab-context .eyebrow{
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  opacity:.72;
  font-weight:800;
}
.lab-context h1{
  margin:2px 0 0;
  font-size:18px;
  line-height:1.25;
}
.lab-context .lab-back{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#fff;
  text-decoration:none;
  padding:9px 13px;
  border-radius:10px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;
  font-weight:800;
}
.lab-context .lab-back:hover{background:rgba(255,255,255,.18)}

.container{
  max-width:1440px !important;
  margin:0 auto !important;
  padding:20px 24px 36px !important;
}

.container .grid{
  gap:18px !important;
}

.container .card,
.card{
  background:rgba(255,255,255,.94) !important;
  border:1px solid var(--vrqa-border) !important;
  border-radius:18px !important;
  box-shadow:var(--vrqa-shadow) !important;
  color:var(--vrqa-text);
}

.card:hover{transform:none !important}
.card-header{
  padding:16px 20px !important;
  border-bottom:1px solid #eaf0f6 !important;
  background:linear-gradient(180deg,#fff,#fbfdff);
}
.card-title{
  color:var(--vrqa-navy) !important;
  font-weight:850 !important;
}
.card-body{padding:20px !important}

.kbd{
  color:#6f8095 !important;
  background:#f3f7fb;
  border:1px solid #e5edf5;
  border-radius:8px;
  padding:4px 8px;
  font-size:11px;
}

.field-label{
  color:#52657b !important;
  font-weight:750 !important;
}

.control{
  background:#fbfdff !important;
  border-color:#dfe8f2 !important;
  border-radius:12px !important;
}
.control:focus-within{
  border-color:#73b9ff !important;
  box-shadow:0 0 0 4px rgba(11,114,255,.10) !important;
}

.btn{
  border-radius:11px !important;
  border-color:#dce6f0 !important;
  background:#fff !important;
  color:var(--vrqa-navy) !important;
  box-shadow:0 5px 14px rgba(8,39,75,.06) !important;
}
.btn:hover{
  border-color:#a9cef1 !important;
  box-shadow:0 8px 18px rgba(8,62,120,.10) !important;
}
.btn-primary{
  background:linear-gradient(135deg,var(--vrqa-orange),#ff9c2e) !important;
  border:none !important;
  color:#fff !important;
}
.btn-secondary{
  background:linear-gradient(135deg,var(--vrqa-blue),#10bce9) !important;
  border:none !important;
  color:#fff !important;
}

.site-footer{
  max-width:1440px !important;
  margin:10px auto 28px !important;
  padding:18px 24px !important;
  color:#708096 !important;
  font-size:12px;
  border-top:1px solid #e4ebf3;
}

/* Search/filter empty state */
.search-empty{
  grid-column:1/-1;
  text-align:center;
  padding:45px 20px;
  color:var(--vrqa-muted);
  background:#fff;
  border:1px dashed #cbd9e8;
  border-radius:18px;
}

/* ================= MOBILE ================= */
@media (max-width:1100px){
  .card-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .path-grid{grid-template-columns:1fr 1fr}
  .search-section{flex-basis:260px}
}

@media (max-width:900px){
  .nav-links,.search-section{display:none !important}
  .hamburger{display:block !important}
  .header-inner{padding:9px 16px !important}
  .home-intro{grid-template-columns:1fr}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .home-page .dashboard{padding:18px 16px 36px !important}
  .lab-page-shell,.container{padding-left:16px !important;padding-right:16px !important}
}

@media (max-width:600px){
  .header-left{gap:10px !important}
  .header-left .brand-logo{width:76px !important;height:44px !important}
  .header-right .btn-home{font-size:0;width:42px;padding:0 !important}
  .header-right .btn-home:before{content:"⌂";font-size:20px}
  .home-hero{border-radius:16px;margin-bottom:18px}
  .home-hero img{aspect-ratio:auto}
  .intro-panel{padding:21px}
  .intro-panel h1{font-size:27px}
  .stats-panel{padding:12px}
  .stat{padding:12px}
  .path-grid{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr !important}
  .lab-card{min-height:175px}
  .lab-context{align-items:flex-start;padding:14px}
  .lab-context h1{font-size:15px}
  .lab-context .lab-back{display:none}
  .lab-context-logo{width:36px;height:36px}
  .card-body{padding:15px !important}
  .site-footer{padding-left:16px !important;padding-right:16px !important}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto !important;transition:none !important;animation:none !important}
}

/* =========================================================
   VR QA ACADEMY — BANNER COLOR SYSTEM
   The promotional banner is now the visual source of truth
   for the page background. White cards remain intentionally
   bright for readability and practice usability.
   ========================================================= */
:root{
  --vrqa-banner-bg:#010c1e;
  --vrqa-banner-bg-2:#001238;
  --vrqa-banner-blue:#0070ff;
  --vrqa-banner-cyan:#13c8ff;
  --vrqa-banner-orange:#ff8a00;
}

body,
body.home-page{
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(0,112,255,.22), transparent 62%),
    radial-gradient(850px 520px at 92% 2%, rgba(19,200,255,.14), transparent 58%),
    linear-gradient(180deg, var(--vrqa-banner-bg-2) 0%, var(--vrqa-banner-bg) 42%, #000817 100%) !important;
  color:#eef6ff !important;
}

body:before{
  background-image:
    linear-gradient(rgba(19,200,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,200,255,.035) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}

/* Header uses the same navy/cyan family as the banner */
.app-header{
  background:rgba(1,12,30,.94) !important;
  border-bottom:1px solid rgba(19,200,255,.18) !important;
  box-shadow:0 10px 32px rgba(0,0,0,.30) !important;
}
.nav-links a,
.nav-dropbtn,
.hamburger{color:#eef6ff !important}
.nav-dropdown-content{
  background:#061a38 !important;
  border-color:rgba(19,200,255,.18) !important;
  box-shadow:0 22px 55px rgba(0,0,0,.45) !important;
}
.nav-dropdown-content a{color:#eaf5ff !important}
.nav-dropdown-content a:hover{background:rgba(19,200,255,.10) !important}
.search-section input,
.mobile-nav input{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.18) !important;
  color:#fff !important;
}
.search-section input::placeholder,
.mobile-nav input::placeholder{color:#a9bfd8 !important}
.mobile-nav{
  background:#03142c !important;
  border-color:rgba(19,200,255,.18) !important;
}
.mobile-nav a,.mobile-course-toggle{color:#eaf5ff !important}

/* Banner */
.home-page .dashboard{padding-top:24px !important}
.home-hero{
  background:var(--vrqa-banner-bg) !important;
  border-color:rgba(19,200,255,.20) !important;
  box-shadow:0 25px 80px rgba(0,0,0,.38), 0 0 50px rgba(0,112,255,.08) !important;
}
.home-hero img{aspect-ratio:1678 / 919;object-fit:cover}

/* Practice Labs becomes the first section after the banner */
.home-page #practice-labs{margin-top:6px}
.section-heading h2{color:#f4f9ff !important}
.section-heading p{color:#a9bfd8 !important}

/* Keep the existing lab cards and their icons/content unchanged */
.lab-card{
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}

/* Lab pages: same banner-inspired background */
.lab-page-shell,
.container{
  background:transparent !important;
}
.container .card,
.card{
  box-shadow:0 18px 48px rgba(0,0,0,.24) !important;
}

.site-footer{
  color:#8fa9c5 !important;
  border-top-color:rgba(255,255,255,.12) !important;
}

/* Search empty state */
.search-empty{background:rgba(255,255,255,.97) !important}

@media (max-width:600px){
  .home-page .dashboard{padding-top:14px !important}
  .home-hero{border-radius:14px}
}


/* ================= HERO BANNER + BRAND EMBLEM =================
   The banner occupies the left 67% while the new circular VR QA
   emblem fills the intentionally empty right side of the hero. */
.home-hero{
  display:flex !important;
  align-items:stretch;
  position:relative;
  min-height:clamp(360px, 32vw, 520px);
  background:#06152d !important;
  isolation:isolate;
}

.home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 78% 50%, rgba(19,200,255,.16), transparent 30%),
    linear-gradient(90deg, #06152d 0%, #06152d 64%, #071b39 100%);
}

.home-hero .home-hero-banner{
  position:relative;
  z-index:1;
  display:block;
  width:67%;
  height:auto;
  aspect-ratio:1846 / 941;
  object-fit:cover;
  object-position:left center;
  flex:0 0 67%;
}

.home-hero-logo-wrap{
  position:relative;
  z-index:2;
  width:33%;
  flex:0 0 33%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px, 2.4vw, 38px);
  background:radial-gradient(circle at center, rgba(0,126,255,.16), transparent 68%);
}

.home-hero .home-hero-logo{
  display:block;
  width:100%;
  max-width:430px;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.42)) drop-shadow(0 0 24px rgba(19,200,255,.16));
}

/* Override the earlier generic .home-hero img rule so both images
   keep their intended sizing. */
.home-hero > img.home-hero-banner{width:67%;}
.home-hero .home-hero-logo-wrap img.home-hero-logo{width:100%;}

@media (max-width: 900px){
  .home-hero{
    display:block !important;
    min-height:0;
  }
  .home-hero .home-hero-banner{
    width:100%;
    flex:none;
    aspect-ratio:1846 / 941;
  }
  .home-hero-logo-wrap{
    width:100%;
    min-height:240px;
    padding:18px;
  }
  .home-hero .home-hero-logo{
    width:min(260px, 58vw);
  }
}

@media (max-width: 560px){
  .home-hero-logo-wrap{min-height:210px;}
  .home-hero .home-hero-logo{width:min(220px, 62vw);}
}


/* =========================================================
   SHARED VR QA HERO — ALL ACADEMY PAGES
   Same branded banner composition on Home and every practice lab.
   ========================================================= */
.site-shared-hero{
  display:flex !important;
  align-items:stretch;
  position:relative;
  width:min(1440px, calc(100% - 32px));
  min-height:clamp(340px, 31vw, 500px);
  margin:24px auto 30px !important;
  overflow:hidden;
  border-radius:24px;
  background:#06152d !important;
  border:1px solid rgba(19,200,255,.25) !important;
  box-shadow:0 25px 80px rgba(0,0,0,.38), 0 0 50px rgba(0,112,255,.08) !important;
  isolation:isolate;
}
.site-shared-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 50%, rgba(19,200,255,.16), transparent 30%),
    linear-gradient(90deg, #06152d 0%, #06152d 64%, #071b39 100%);
}
.site-shared-hero .home-hero-banner{
    z-index: 0;
    display: block;
    /*width: 91%;*/
    flex: 0 0 100%;
    height: stretch;
    aspect-ratio: 2827 / 1006;
    object-fit: fill;
    object-position: center;
    min-width: 0px;
}
.site-shared-hero .home-hero-logo-wrap{
  position:relative;
  z-index:2;
  width:33%;
  flex:0 0 33%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px, 2vw, 34px);
  background:radial-gradient(circle at center, rgba(0,126,255,.16), transparent 68%);
}
.site-shared-hero .home-hero-logo{
  display:block;
  width:min(100%, 430px);
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.42)) drop-shadow(0 0 24px rgba(19,200,255,.16));
}
.site-shared-hero + .container{
  margin-top:0;
}
@media (max-width: 900px){
  .site-shared-hero{
    display:block !important;
    width:min(100% - 24px, 720px);
    min-height:0;
    margin:16px auto 22px !important;
  }
  .site-shared-hero .home-hero-banner{
    width:100%;
    flex:none;
    aspect-ratio:1846 / 941;
  }
  .site-shared-hero .home-hero-logo-wrap{
    width:100%;
    min-height:240px;
    flex:none;
    padding:18px;
  }
  .site-shared-hero .home-hero-logo{
    width:min(260px, 58vw);
  }
}
@media (max-width: 560px){
  .site-shared-hero{
    width:calc(100% - 16px);
    border-radius:16px;
  }
  .site-shared-hero .home-hero-logo-wrap{
    min-height:210px;
  }
  .site-shared-hero .home-hero-logo{
    width:min(220px, 62vw);
  }
}

/* ================= VR QA CIRCUIT BACKGROUND — LINE-ONLY NEON ================= */

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

body {
  position: relative;
  isolation: isolate;
  background-color: #010916 !important;
  background-image:
    linear-gradient(rgba(1, 9, 22, .20), rgba(1, 9, 22, .20)),
    url("../assets/circuit1.png") !important;
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  color: #eaf4ff !important;
}

/*
 * The image itself is static.
 * Only the duplicate image layer is animated. Because the duplicate
 * is blended with SCREEN and clipped to a narrow moving mask, the
 * animation appears as a neon pulse travelling across the existing
 * blue circuit lines rather than a light sweeping over the whole page.
 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("../assets/circuit1.png");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  filter: brightness(2.25) saturate(1.75) contrast(1.08);
  opacity: .82;

  /* Narrow moving light band */
  -webkit-mask-image: linear-gradient(
    112deg,
    transparent 0%,
    transparent 39%,
    rgba(255,255,255,0) 43%,
    rgba(255,255,255,.18) 45%,
    rgba(255,255,255,1) 48%,
    rgba(255,255,255,.18) 51%,
    rgba(255,255,255,0) 54%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    112deg,
    transparent 0%,
    transparent 39%,
    rgba(255,255,255,0) 43%,
    rgba(255,255,255,.18) 45%,
    rgba(255,255,255,1) 48%,
    rgba(255,255,255,.18) 51%,
    rgba(255,255,255,0) 54%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 260% 260%;
  mask-size: 260% 260%;
  -webkit-mask-position: -150% -120%;
  mask-position: -150% -120%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: vrqaCircuitLinePulse 10s linear infinite;
}

/* A tiny secondary pulse follows later, keeping the motion subtle. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("../assets/circuit1.png");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  filter: brightness(1.65) saturate(1.5);
  opacity: .36;

  -webkit-mask-image: linear-gradient(
    112deg,
    transparent 0%,
    transparent 46%,
    rgba(255,255,255,0) 48%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,0) 52%,
    transparent 55%,
    transparent 100%
  );
  mask-image: linear-gradient(
    112deg,
    transparent 0%,
    transparent 46%,
    rgba(255,255,255,0) 48%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,0) 52%,
    transparent 55%,
    transparent 100%
  );
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
  -webkit-mask-position: -210% -160%;
  mask-position: -210% -160%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: vrqaCircuitLinePulseFollow 15s linear infinite;
}

.app-header,
main,
.main,
.container,
.dashboard,
.site-footer,
.lab-nav-footer,
.home-hero,
.practice-labs,
section,
footer {
  position: relative;
  z-index: 1;
}

/* Dark glass header so the circuit artwork remains visible around it. */
.app-header {
  background: rgba(1, 9, 22, .84) !important;
  border-bottom: 1px solid rgba(24, 200, 255, .18) !important;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, .34),
    0 1px 0 rgba(24, 200, 255, .10) inset !important;
  backdrop-filter: blur(16px);
}

@keyframes vrqaCircuitLinePulse {
  0% {
    -webkit-mask-position: -150% -120%;
    mask-position: -150% -120%;
  }
  50% {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }
  100% {
    -webkit-mask-position: 150% 120%;
    mask-position: 150% 120%;
  }
}

@keyframes vrqaCircuitLinePulseFollow {
  0% {
    -webkit-mask-position: -210% -160%;
    mask-position: -210% -160%;
    opacity: .12;
  }
  45% {
    opacity: .38;
  }
  100% {
    -webkit-mask-position: 150% 120%;
    mask-position: 150% 120%;
    opacity: .12;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
    opacity: .20;
  }
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll, scroll;
    background-position: center top, center top;
    background-size: auto, auto 100vh;
  }

  body::before,
  body::after {
    opacity: .42;
  }
}

/* ================= DROPDOWN OVERLAY FIX ================= */
/*
   Dropdowns must escape the rounded card and sit above the cards
   that follow them. The base .card uses overflow:hidden and
   backdrop-filter, which creates clipping/stacking behavior.
*/
.card:has(.searchable-list.show),
.card:has(.multi-panel.show),
.card:has(#suggestions[style*="block"]) {
  overflow: visible !important;
  z-index: 5000 !important;
}

/* Keep the dropdown itself above every neighboring card. */
.card:has(.searchable-list.show) .searchable-list,
.card:has(.multi-panel.show) .multi-panel,
.card:has(#suggestions[style*="block"]) #suggestions {
  position: absolute !important;
  z-index: 6000 !important;
}

/* Searchable dropdown is anchored below its field. */
.field:has(.searchable-list) {
  position: relative !important;
  z-index: 6001 !important;
}

.searchable-list {
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  margin-top: 0 !important;
  max-height: 260px;
  overflow-y: auto !important;
  background: rgba(255,255,255,.98) !important;
  color: #071a33 !important;
  border: 1px solid rgba(19,200,255,.30) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.42) !important;
}

/* Multi-select panel and auto-suggest list. */
.card:has(.multi-panel.show) .field,
.card:has(#suggestions[style*="block"]) .field {
  z-index: 6001 !important;
}

.multi-panel,
#suggestions {
  z-index: 6000 !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.42) !important;
}

/* Make dropdown text readable against the light popup. */
.searchable-list .searchable-item,
.multi-panel,
.multi-panel-header,
.multi-panel-body > div,
#suggestions,
#suggestions > div {
  color: #071a33 !important;
}

.searchable-list .searchable-item:hover,
.multi-panel-body > div:hover,
#suggestions > div:hover {
  background: rgba(19,200,255,.12) !important;
}

/* ============================================================
   VR QA DROPDOWN — DEFINITIVE OVERLAY / STACKING FIX
   ============================================================ */

/* Establish a predictable stacking context for the grid. */
.container .grid {
  position: relative !important;
  isolation: isolate !important;
  z-index: 1 !important;
}

/* Cards normally sit below the currently active dropdown card. */
.container .grid > .card {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

/* IMPORTANT:
   Searchable dropdown JS uses style.display = "block", not .show.
   Therefore :has() must inspect the inline display state. */
.container .grid > .card:has(#searchableSelectList[style*="display: block"]) {
  z-index: 99999 !important;
}

.container .grid > .card:has(#multiPanel.show) {
  z-index: 99998 !important;
}

.container .grid > .card:has(#suggestions[style*="display: block"]) {
  z-index: 99997 !important;
}

/* Keep the field/control above neighboring content while its menu is open. */
.card:has(#searchableSelectList[style*="display: block"]) .field,
.card:has(#multiPanel.show) .field,
.card:has(#suggestions[style*="display: block"]) .field {
  position: relative !important;
  z-index: 100000 !important;
}

/* Dropdown layers themselves must be above everything in the page. */
#searchableSelectList,
#multiPanel,
#suggestions {
  z-index: 100001 !important;
  isolation: isolate !important;
}

/* Searchable list: JS-controlled open/close remains untouched. */
#searchableSelectList[style*="display: block"] {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  display: block !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  color: #071a33 !important;
  border: 1px solid #b9d8f5 !important;
  border-radius: 12px !important;
  box-shadow: 0 22px 55px rgba(0, 15, 40, .45) !important;
}

/* Multi-select panel */
#multiPanel.show {
  position: absolute !important;
  z-index: 100001 !important;
  background: #ffffff !important;
  color: #071a33 !important;
  box-shadow: 0 22px 55px rgba(0, 15, 40, .45) !important;
}

/* Auto-suggest */
#suggestions[style*="display: block"] {
  position: absolute !important;
  z-index: 100001 !important;
  background: #ffffff !important;
  color: #071a33 !important;
  box-shadow: 0 22px 55px rgba(0, 15, 40, .45) !important;
}

/* Never let a neighboring card create a competing overlay. */
.container .grid > .card:not(:has(#searchableSelectList[style*="display: block"])),
.container .grid > .card:not(:has(#multiPanel.show)),
.container .grid > .card:not(:has(#suggestions[style*="display: block"])) {
  z-index: 1 !important;
}