/* ---------------------------------------------------------
   DESIGN TOKENS — carry these forward into the Next.js build
   --------------------------------------------------------- */
:root {
  --ink:        #0F2247; /* primary navy — all headings & primary text */
  --ink-70:     #3C5273; /* secondary navy — body copy */
  --ink-40:     #8092AC; /* muted navy — captions, placeholders, hairline labels */
  --blue:       #2C8FDB; /* primary interactive blue (buttons, links) */
  --blue-bright:#37B6FF; /* brand blue from the logo — accents, glow, highlights only */
  --blue-50:    #F3F9FF;
  --blue-100:   #E6F3FE;
  --line:       #DCE6F2; /* hairline borders */
  --paper:      #FBFCFE; /* page background */
  --on-ink-90:  rgba(255,255,255,.92);
  --on-ink-65:  rgba(255,255,255,.65);
  --on-ink-35:  rgba(255,255,255,.35);
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--paper); color: var(--ink); }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.hl { color: var(--blue); }

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow::before { content: "// "; color: var(--ink-40); }

/* Corner-bracket "viewfinder" frame — the recurring machine-vision motif */
.bracket { position: absolute; width: 22px; height: 22px; }
.bracket-tl { top: -1px; left: -1px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
.bracket-tr { top: -1px; right: -1px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.bracket-bl { bottom: -1px; left: -1px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; }
.bracket-br { bottom: -1px; right: -1px; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; }

.dot-grid {
  background-image: radial-gradient(var(--line) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
}

.scan-line {
  position: absolute; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue-bright), transparent);
  box-shadow: 0 0 14px 1px var(--blue-bright);
  animation: scan 4s ease-in-out infinite;
}
@keyframes scan {
  0%, 100% { top: 12%; opacity: .95; }
  50%      { top: 84%; opacity: .45; }
}

.part-shape {
  width: 132px; height: 132px;
  background: linear-gradient(155deg, var(--blue-100), var(--blue-50));
  border: 1.5px solid var(--blue-100);
  transform: rotate(45deg);
  border-radius: 18px;
}

.lang-btn { color: var(--ink-40); font-weight: 400; }
.lang-btn[data-active="true"] { color: var(--ink); font-weight: 600; }

/* Legal/policy page prose */
.prose-legal h2 { color: var(--ink); font-weight: 700; font-size: 1.15rem; margin-top: 2.5rem; margin-bottom: .75rem; }
.prose-legal p, .prose-legal li { color: var(--ink-70); font-size: .95rem; line-height: 1.7; }
.prose-legal ul { margin-top: .5rem; margin-bottom: 1rem; padding-left: 1.25rem; list-style: disc; }
.prose-legal a { color: var(--blue); text-decoration: underline; }