@import "/_shared/vilkax-a11y.css"; /* a11y system: reduced-motion + focus-ring (must be first) */
/* ============================================================
* Vilkax - brand stylesheet
* ============================================================
*
* Single source of truth for brand tokens (modern-blue
* atmosphere, Manrope typography, frosted-glass cards,
* kinetic display typography). All public-facing pages
* (landing, support, 404) inherit from this file so the brand
* stays locked across surfaces.
*/
:root {
/* Pass-180 - Nexus alignment (from /assets/tokens/nexus.css).
* The Arctic Steel system is retuned so the marketing surface
* shares the canonical Vilkax signature violet (#B14CFF) and the
* dark-ink ladder used across the APEX suite dossiers. The token
* names are unchanged so every inheriting surface (subscription
* stack, /features/ pillars, KIN, support widget, etc.) shifts
* in lockstep with no markup edits. We keep the calm, premium
* marketing posture - more whitespace, hero imagery - rather than
* the dense app-dashboard density. */
--bg-ink: #0A0D13; /* nexus --bg-0 (page) */
--bg-ink-deep: #06080C; /* nexus --bg-void */
--bg-card: rgba(14, 18, 26, 0.62); /* nexus --bg-1 tinted */
--bg-surface: #141923; /* nexus --bg-2 (elevated) */
/* Dark-Wolf alignment: the marketing surface now shares the signature
* VIOLET accent (#B14CFF) used across home / trust-layer / investors,
* instead of the old ice-blue, so the whole site reads as one world. */
--brand-primary: #B14CFF; /* Vilkax signature violet */
--brand-primary-hover: #8B2FD6; /* deep violet */
--brand-primary-bright: #C88CFF; /* bright violet */
--brand-accent-soft: rgba(177, 76, 255, 0.18); /* violet glow */
--brand-accent-glow: rgba(177, 76, 255, 0.45); /* violet glow */
--brand-deep: #8B2FD6; /* deep violet */
--brand-ice: #C88CFF; /* bright violet (name kept for inheritance) */
--brand-silver: #C3CAD6; /* Silver → nexus --ink-1 */
--brand-bone: #F2F5FA; /* Bone → nexus --ink-0 */
--text-strong: #F2F5FA; /* nexus --ink-0 */
--text-default: #C3CAD6; /* nexus --ink-1 */
--text-muted: #818996; /* nexus --ink-2 */
--text-dim: #7A8393; /* AA-safe on the dark canvas (>=4.5:1); was #535C6A (2.72:1, failed WCAG 1.4.3 on small text) */
--border-subtle: rgba(177, 76, 255, 0.10);
--border-strong: rgba(177, 76, 255, 0.24);
--border-line: #1B212D; /* nexus --bg-3 */
/* Nexus glow primitives - premium halo + ring for CTAs / cards. */
--vlx-sh-glow: 0 0 0 1px rgba(177,76,255,0.35), 0 0 24px -4px rgba(177,76,255,0.18);
--vlx-ease-out: cubic-bezier(.2,.7,.2,1);
/* Inter for body, Instrument Serif italic for accent words.
* Manrope kept as fallback so any historical surface that still
* references it doesn't lose its weight stack. */
--font-brand: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-serif: "Instrument Serif", Georgia, serif;
/* Chrome-text gradient - used on accent words throughout the site
* for the "wolf-glint" feel without painting an actual image. */
--chrome-grad: linear-gradient(95deg, #C88CFF 0%, #B14CFF 35%, #9B6BFF 65%, #C77DFF 100%);
/* /scan page color tokens — indigo/violet palette, dark surface */
--scan-bg: #0B1426;
--scan-accent: #5B6BFF;
--scan-accent-end: #7B5EA7;
--scan-accent-text: #a5b4fc;
--scan-accent-link: #818cf8;
--scan-ink-0: #f8fafc;
--scan-ink-1: #e2e8f0;
--scan-ink-2: #94a3b8;
--scan-ink-3: #64748b;
--scan-ink-4: #475569;
--scan-ink-5: #334155;
/* /scan verdict foreground colors */
--scan-ok-fg: #86efac;
--scan-watch-fg: #bfdbfe;
--scan-warn-fg: #fcd34d;
--scan-block-fg: #fca5a5;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* ── Pass-145 viewport-overflow guards ──────────────────────────
* Catch every element that would extend past the viewport edge
* (a stray fixed-width container, a long word, a misbehaving
* iframe) before it becomes a horizontal scrollbar. Two
* complementary layers:
*
* 1. `overflow-x: clip` on + - hard stop.
* `clip` (not `hidden`) preserves position:sticky behaviour.
* 2. `max-width: 100%` + `min-width: 0` on ![]()
,