:root{
  --void:#dce9f7;
  --plaque:rgba(20,42,88,.6);
  --ribbon:#F6B93B;
  --ribbon-deep:#D99A1E;
  --gold-soft:#FFD98A;
  --gold-pale:rgba(246,185,59,.14);
  --ink:#FFFFFF;
  --ink-soft:#D7E2F5;
  --ink-faint:#AEC0E0;
  --hairline:rgba(148,178,255,.22);
  --hairline-soft:rgba(148,178,255,.12);
  --ring:1px solid var(--hairline);
  --font-body:'Inter', sans-serif;
  --font-display:'Poppins', sans-serif;
  --blue-deep:#0F2C73;
  --blue-glow:#1769d1;
  --blue-glow-soft:rgba(23,105,209,.28);
  --aurora-1:#3B7BFF;
  --aurora-2:#8A5CFF;
  --aurora-3:#F6B93B;
}

html, body{height:100%;}
body{background:var(--void); color:var(--ink);}

.qa-wrap{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
  box-sizing:border-box;
}

/* ---- Blurred slideshow background ---- */
.qa-bg{position:fixed; inset:0; z-index:0;}
.qa-bg-slide{
  position:absolute; inset:-20px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:blur(7px) brightness(.88) saturate(1.15); transform:scale(1.08);
  opacity:0; animation:qaBgFade 24s infinite;
}
@keyframes qaBgFade{0%{opacity:0;} 8%{opacity:.85;} 42%{opacity:.85;} 50%{opacity:0;} 100%{opacity:0;}}

.qa-overlay{position:absolute; inset:0; z-index:1; background:rgba(8,20,48,.56);}

/* faint animated schematic grid, echoes the console */
.qa-overlay::before{
  content:"";
  position:absolute; inset:-2px;
  background-image:linear-gradient(var(--hairline-soft) 1px, transparent 1px), linear-gradient(90deg, var(--hairline-soft) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(120% 80% at 50% 30%, #000 45%, transparent 90%);
  animation:qaGridDrift 40s linear infinite;
  opacity:.22;
}
@keyframes qaGridDrift{from{background-position:0 0, 0 0;} to{background-position:46px 92px, 46px 92px;}}

/* floating aurora glow orbs — the signature "cooler" touch */
.qa-wrap::before,
.qa-wrap::after{
  content:"";
  position:absolute; z-index:1;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
  opacity:.55;
}
.qa-wrap::before{
  width:420px; height:420px; top:-140px; left:-120px;
  background:radial-gradient(circle, var(--aurora-1), transparent 70%);
  animation:qaOrbFloatA 16s ease-in-out infinite;
}
.qa-wrap::after{
  width:380px; height:380px; bottom:-140px; right:-100px;
  background:radial-gradient(circle, var(--aurora-3), transparent 70%);
  animation:qaOrbFloatB 18s ease-in-out infinite;
}
@keyframes qaOrbFloatA{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(30px,20px) scale(1.08);}}
@keyframes qaOrbFloatB{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-24px,-18px) scale(1.06);}}

@media (prefers-reduced-motion: reduce){
  .qa-bg-slide{animation:none; opacity:.85;}
  .qa-bg-slide:nth-child(n+2){display:none;}
  .qa-overlay::before{animation:none;}
  .qa-wrap::before,.qa-wrap::after{animation:none;}
}

.qa-plaque{
  position:relative; z-index:2;
  width:100%; max-width:420px;
  background:linear-gradient(155deg, rgba(45,82,140,.8), rgba(16,36,78,.9));
  border:1px solid var(--hairline);
  border-radius:20px;
  box-shadow:0 30px 70px rgba(10,30,66,.42), 0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(14px);
  padding:0 30px 26px;
  overflow:hidden;
  animation:qaRise .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes qaRise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

/* animated gradient border sheen, slow and subtle */
.qa-plaque::before{
  content:"";
  position:absolute; inset:0;
  padding:1px;
  border-radius:20px;
  background:linear-gradient(120deg, rgba(246,185,59,.65), rgba(59,123,255,.15) 35%, rgba(138,92,255,.35) 65%, rgba(246,185,59,.65));
  background-size:220% 220%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:qaBorderSheen 9s linear infinite;
  pointer-events:none;
}
@keyframes qaBorderSheen{0%{background-position:0% 50%;} 100%{background-position:200% 50%;}}

/* top hairline accent (kept subtle instead of a solid gold bar) */
.qa-plaque::after{
  content:"";
  position:absolute; left:6%; right:6%; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-soft), transparent);
  opacity:.7;
}

/* HUD corner brackets, echoing lp-scanframe */
.qa-plaque-top{
  padding-top:34px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  position:relative;
}
.qa-plaque-top::before,
.qa-plaque-top::after{
  content:"";
  position:absolute; width:16px; height:16px;
  border:1.5px solid rgba(246,185,59,.5);
  top:10px;
}
.qa-plaque-top::before{left:-14px; border-right:none; border-bottom:none; border-radius:5px 0 0 0;}
.qa-plaque-top::after{right:-14px; border-left:none; border-bottom:none; border-radius:0 5px 0 0;}

.qa-seal{
  width:100px; height:100px; margin-bottom:16px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 14px rgba(246,185,59,.3));
}
@media (prefers-reduced-motion: reduce){
  .qa-plaque{animation:none;}
  .qa-plaque::before{animation:none;}
}
.qa-seal-ring{font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:2.5px; fill:var(--gold-soft);}
.qa-seal circle[stroke="#DFE5F2"]{stroke:var(--hairline);}
.qa-seal-core{fill:var(--blue-deep); stroke:var(--ribbon); stroke-width:1;}
.qa-seal-mark{fill:none; stroke:var(--ribbon); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.qa-seal-dot{fill:var(--ribbon);}

.qa-eyebrow{
  font-family:var(--font-body);
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ribbon); margin-bottom:6px;
}
.qa-plaque-top h1{
  font-family:var(--font-display); font-weight:600; font-size:21px; line-height:1.25;
  color:var(--ink); margin-bottom:8px;
}
.qa-plaque-top .qa-sub{font-size:13px; color:var(--ink-faint); max-width:280px; margin-bottom:26px;}

.qa-directory{border-top:var(--ring);}

.qa-row{
  display:flex; align-items:center; gap:14px;
  padding:15px 4px;
  border-bottom:var(--ring);
  text-decoration:none;
  color:inherit;
  position:relative;
  transition:background-color .18s ease, padding-left .18s ease;
}
.qa-row:last-child{border-bottom:none;}

/* left accent bar that glides in on hover, instead of a flat bg change */
.qa-row::before{
  content:"";
  position:absolute; left:-4px; top:8px; bottom:8px; width:2px;
  border-radius:2px;
  background:linear-gradient(180deg, var(--gold-soft), var(--aurora-1));
  opacity:0;
  transform:scaleY(.4);
  transition:opacity .2s ease, transform .2s ease;
}
a.qa-row:hover{background:rgba(76,141,255,.08); padding-left:12px; border-radius:8px;}
a.qa-row:hover::before{opacity:1; transform:scaleY(1);}

.qa-row-icon{
  width:34px; height:34px; flex-shrink:0;
  border-radius:9px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--hairline-soft);
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow .2s ease, background .2s ease, transform .2s ease;
}
a.qa-row:hover .qa-row-icon{background:rgba(246,185,59,.14); box-shadow:0 0 16px rgba(246,185,59,.35), inset 0 0 0 1px rgba(246,185,59,.35); transform:translateY(-1px);}
.qa-row-icon svg{width:16px; height:16px; stroke:var(--gold-soft); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

.qa-row-text{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.qa-row-label{font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint);}
.qa-row-value{font-size:14px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; overflow-wrap:anywhere; white-space:normal;}

.qa-row-arrow{font-size:15px; color:var(--ink-faint); transform:translateX(-2px); transition:transform .18s ease, color .18s ease;}
a.qa-row:hover .qa-row-arrow{transform:translateX(2px); color:var(--gold-soft);}

.qa-back{
  display:block; text-align:center; margin-top:22px;
  font-size:15.5px; font-weight:600; color:var(--gold-soft);
  text-decoration:none;
}
.qa-back:hover{color:var(--ribbon); text-decoration:underline;}

a.qa-row:focus-visible, .qa-back:focus-visible{outline:2px solid var(--blue-glow); outline-offset:2px; border-radius:8px;}

@media (max-width:420px){
  .qa-plaque{padding:0 20px 22px; border-radius:16px;}
  .qa-plaque-top{padding-top:28px;}
  .qa-plaque-top::before,.qa-plaque-top::after{display:none;}
  .qa-wrap{padding:24px 14px;}
  .qa-row{gap:10px; padding:13px 2px;}
  .qa-row-value{font-size:13px;}
}