/* Proofwork — QA company site
   Design tokens + global styles. Colors/fonts overridable via CSS vars set from JS. */

:root {
  /* QA SONIC brand system — 4 shades of blue + neutrals */
  --brand: #5C50FF;
  --brand-dark: #3D31CC;
  --brand-pale: #EAE8FF;
  --page-bg: #F5F4FF;
  --ink: #1A1633;

  --bg: var(--page-bg);
  --bg-elev: #FFFFFF;
  --bg-elev-2: var(--brand-pale);
  --fg: var(--ink);
  --fg-dim: #5A5475;
  --fg-mute: #8A85A3;
  --line: rgba(26, 22, 51, 0.08);
  --line-strong: rgba(26, 22, 51, 0.16);
  --accent: var(--brand);
  --accent-ink: #FFFFFF;
  --brand-ink: var(--brand); /* logo color on light backgrounds */
  --radius: 14px;
  --radius-lg: 22px;
  --grid-gap: 24px;
  --shell-max: 1440px;
  --shell-pad: 40px;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --motion: 1;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0f0d1f;
  --bg-elev: #17142b;
  --bg-elev-2: #1e1a36;
  --fg: #f5f4ff;
  --fg-dim: #b5b0cf;
  --fg-mute: #8a85a3;
  --line: rgba(245, 244, 255, 0.08);
  --line-strong: rgba(245, 244, 255, 0.16);
  --accent: var(--brand);
  --accent-ink: #FFFFFF;
  --brand-ink: #FFFFFF; /* logo goes white on dark backgrounds */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }

/* Custom cursor — Qurova "Q" glyph in brand purple.
   Pre-rasterized PNGs at 2× for crispness on hi-DPI displays. */
html, body {
  cursor: url("assets/cursor-q-default-v2.png") 4 4, auto;
}
a, button, [role="button"], .btn, label, summary, input[type="submit"], input[type="button"] {
  cursor: url("assets/cursor-q-pointer-v2.png") 5 5, pointer;
}
body {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: inherit; }
img, svg { display: block; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* Qurova (user-supplied) */
@font-face {
  font-family: "Qurova";
  src: url("assets/Qurova-SemiBold.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Brand mark — inline-flex wrapper; mask-based icon + wordmark pick up currentColor */
.brand { display: inline-flex; align-items: center; }
.brand__icon, .brand__word { display: inline-block; flex-shrink: 0; }
._unused_brand_word {
  font-family: "Qurova", "Sora", var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Hero headline — restored to display font, smaller size, normal case */
.hero__headline {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
}
.hero__word { margin-right: 0.08em; }

/* Layout */
.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad);
}
@media (max-width: 780px) {
  :root { --shell-pad: 20px; }
}

/* Type */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.92;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; }

/* Section scaffold */
section {
  padding: 120px 0;
  position: relative;
}
@media (max-width: 780px) {
  section { padding: 80px 0; }
}
.section-head {
  display: block;
  text-align: center;
  margin-bottom: 64px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.section-head > div:first-child { margin-bottom: 16px; }
.section-head h2 {
  margin: 0 0 20px;
  font-size: clamp(40px, 6vw, 80px);
}
.section-head p {
  margin: 0 auto;
  color: var(--fg-dim);
  font-size: 18px;
  max-width: 58ch;
  line-height: 1.5;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, border-color .3s;
  will-change: transform;
}
.btn:hover { background: var(--brand-dark); color: #FFFFFF; border-color: var(--brand-dark); }
.btn--accent { background: var(--brand); color: #FFFFFF; border-color: var(--brand); }
.btn--accent:hover { background: var(--brand-dark); color: #FFFFFF; border-color: var(--brand-dark); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--brand-pale); color: var(--brand); border-color: var(--brand); }

/* Pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* Cards */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* Cursor (removed — disabled) */
.cursor-ring, .cursor-dot { display: none !important; }

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--rd, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* Grid density — controlled by --col-w */
.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--col-w, 280px), 1fr));
}

/* Utilities */
.noise {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Marquee */
@keyframes marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: marquee-x calc(40s / var(--motion, 1)) linear infinite;
}

/* Scrollbar (dark) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-dark); }
::-webkit-scrollbar-track { background: var(--brand-pale); }