/* Cosmic design tokens + base layout — self-contained (adapted from quickask.me theme).
   Colours live ONLY here as CSS custom properties; components use var(--qa-*). */
:root {
  --qa-ground: #160528;
  --qa-ground-2: #0d0119;
  --qa-hero-glow: #26094a;
  --qa-panel: #1c0a38;
  --qa-panel-2: #22104a;
  --qa-line: rgba(143, 68, 253, 0.22);
  --qa-line-soft: rgba(255, 255, 255, 0.08);
  --qa-violet: #8f44fd;
  --qa-cyan: #30c1ff;
  --qa-violet-rgb: 143, 68, 253;
  --qa-cyan-rgb: 48, 193, 255;
  --qa-grad: linear-gradient(135deg, #8f44fd, #30c1ff);
  --qa-ink: #f3ecff;
  --qa-muted: #a99ac8;
  --qa-faint: #8a7ab0;
  --qa-ok: #3bd67a;
  --qa-radius: 14px;
  --qa-radius-sm: 10px;
  --qa-radius-pill: 999px;
  --qa-shadow: 0 30px 80px -30px #000;
  --qa-glow: 0 0 40px -8px rgba(143, 68, 253, 0.5);
  --qa-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --qa-header-h: 64px;
  --qa-container: min(1120px, 92vw);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--qa-font);
  color: var(--qa-ink);
  line-height: 1.6;
  background:
    radial-gradient(1200px 600px at 70% -10%, var(--qa-hero-glow), transparent 60%),
    linear-gradient(180deg, var(--qa-ground), var(--qa-ground-2)) fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* 3D circuit background canvas — fixed behind all content, non-interactive.
   Populated by assets/js/circuit-3d.js (three.js). Degrades to the body gradient. */
#circuit {
  position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%;
  pointer-events: none; display: block; opacity: .9;   /* vivid — readability handled by the scrim below */
}
/* Readability scrim: darkens the central content column so text stays crisp,
   while the circuit shows through vividly in the side margins. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%, rgba(13,1,25,.74) 15%, rgba(13,1,25,.74) 85%, transparent 100%);
}

.container { width: var(--qa-container); margin: 0 auto; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
a { color: var(--qa-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

.grad {
  background: var(--qa-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600;
  padding: .7rem 1.3rem; border-radius: var(--qa-radius-pill); border: 1px solid transparent;
  cursor: pointer; font-family: inherit; font-size: .95rem; transition: transform .15s ease, box-shadow .15s ease; }
.btn-primary { background: var(--qa-grad); color: #fff; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--qa-glow); text-decoration: none; }
.btn-outline { background: rgba(255,255,255,.04); border-color: var(--qa-line); color: var(--qa-ink); }
.btn-outline:hover { border-color: var(--qa-cyan); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* Glass card */
.card {
  background: linear-gradient(160deg, rgba(40,20,80,.55), rgba(20,10,40,.55));
  border: 1px solid var(--qa-line); border-radius: var(--qa-radius);
  box-shadow: var(--qa-shadow); backdrop-filter: blur(10px); padding: 1.5rem;
}

/* Badge / pill / chips */
.badge { display: inline-block; padding: .35rem .9rem; border-radius: var(--qa-radius-pill);
  border: 1px solid var(--qa-line); background: rgba(var(--qa-violet-rgb), .12);
  color: var(--qa-ink); font-size: .8rem; font-weight: 600; }
.chip { display: inline-block; padding: .25rem .7rem; margin: .2rem .2rem 0 0; font-size: .8rem;
  border-radius: var(--qa-radius-pill); border: 1px solid var(--qa-line-soft);
  background: rgba(255,255,255,.03); color: var(--qa-muted); }

/* Section rhythm */
.section { padding: clamp(3rem, 8vh, 5.5rem) 0; }
.section-title { text-align: center; margin-bottom: 2.5rem; }

/* Focus visibility (a11y) */
:focus-visible { outline: 2px solid var(--qa-cyan); outline-offset: 2px; }

/* Skip link */
.skip-link { position: absolute; left: -999px; top: .5rem; background: var(--qa-panel);
  padding: .5rem 1rem; border-radius: var(--qa-radius-sm); z-index: 100; }
.skip-link:focus { left: .5rem; }