:root {
--ink-950: #0E0F13;
--ink-900: #14161B;
--ink-850: #17191F;
--ink-800: #1E2128;
--ink-700: #2A2D37;
--ink-600: #3A3E4A;
--ink-500: #81828C;
--ink-400: #9B9B92;
--ink-300: #BBBFCB;
--ink-200: #C9C9C2;
--ink-150: #D9D9D2;
--ink-100: #E8E8E2;
--ink-75:  #EEEEE9;
--ink-50:  #F5F5F1;
--ink-25:  #FAFAF8;
--white:   #FFFFFF;
--brand-700: #4035B8;
--brand-600: #4A3FCC;
--brand-500: #5B4FE0;
--brand-450: #6B5EF0;
--brand-400: #6E59E0;
--brand-350: #A855F7;
--brand-300: #9A8EFF;
--brand-200: #C77DFF;
--brand-100: #EFE7FB;
--brand-50:  #ECEAFB;
--brand-soft-dark: #241F3C;
--brand-ink: #6B4FD0;
--grad-mark:      linear-gradient(135deg, #6B5EF0, #4A3FCC);
--grad-hero:      linear-gradient(135deg, #5B4FE0, #4035B8);
--grad-hero-dark: linear-gradient(135deg, #4b40a8 0%, #372f7e 55%, #28245f 100%);
--grad-ai:        linear-gradient(135deg, #6E59E0, #A855F7);
--signal-cyan: #33BDBD;
--signal-blue: #9A8EFF;
--green-500: #0E9D6E;  --green-soft: #E2F5ED;
--amber-500: #BE7912;  --amber-soft: #FAF0DA;
--red-500:   #D24338;  --red-soft:   #FBE8E6;
--info-500:  #2D7DD2;  --info-soft:  #E6F0FB;
--teal-500:  #0F8C8C;  --teal-soft:  #E0F2F2;  --teal-300: #33BDBD;
--bg:            var(--ink-25);
--bg-subtle:     var(--ink-50);
--surface:       var(--white);
--surface-hover: var(--ink-75);
--border:        var(--ink-100);
--border-strong: var(--ink-150);
--hairline:      rgba(20, 20, 15, 0.07);
--fg:    #1B1B17;
--fg-2:  #67675F;
--fg-3:  var(--ink-400);
--fg-on-accent: var(--white);
--accent:        var(--brand-500);
--accent-hover:  var(--brand-600);
--accent-press:  var(--brand-700);
--accent-fg:     var(--brand-600);
--accent-tint:   var(--brand-50);
--accent-border: color-mix(in srgb, #5B4FE0 26%, #FFFFFF);
--focus-ring: 0 0 0 3px rgba(91, 79, 224, 0.32);
--shadow-xs: 0 1px 2px rgba(20, 20, 15, 0.05);
--shadow-sm: 0 1px 3px rgba(20, 20, 15, 0.06), 0 1px 2px rgba(20, 20, 15, 0.04);
--shadow-md: 0 4px 12px rgba(20, 20, 15, 0.07), 0 2px 4px rgba(20, 20, 15, 0.04);
--shadow-lg: 0 12px 32px rgba(20, 20, 15, 0.10), 0 4px 8px rgba(20, 20, 15, 0.05);
--shadow-xl: 0 24px 64px rgba(20, 20, 15, 0.14), 0 8px 16px rgba(20, 20, 15, 0.06);
--glow-accent: 0 0 0 1px rgba(91,79,224,0.4), 0 8px 40px rgba(91, 79, 224, 0.35);
--r-xs:   6px;
--r-sm:   8px;
--r-md:   12px;
--r-lg:   16px;
--r-xl:   22px;
--r-2xl:  28px;
--r-pill: 999px;
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
--sp-10: 128px;
--sp-11: 160px;
--section-y: clamp(80px, 11vw, 168px);
--gutter: clamp(20px, 5vw, 48px);
--maxw: 1200px;
--maxw-prose: 720px;
--font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;
--fs-display:  clamp(48px, 7.2vw, 92px);
--fs-h1:       clamp(38px, 5vw, 64px);
--fs-h2:       clamp(30px, 3.6vw, 46px);
--fs-h3:       clamp(22px, 2.2vw, 30px);
--fs-h4:       20px;
--fs-lead:     clamp(18px, 1.5vw, 22px);
--fs-body:     17px;
--fs-sm:       15px;
--fs-xs:       13px;
--fs-mono-label: 12.5px;
--lh-tight:  1.02;
--lh-snug:   1.12;
--lh-normal: 1.5;
--lh-relaxed:1.62;
--tracking-tight:  -0.03em;
--tracking-snug:   -0.018em;
--tracking-normal: -0.006em;
--tracking-wide:   0.02em;
--tracking-eyebrow:0.16em;
--weight-light: 300;
--weight-regular: 400;
--weight-book: 450;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
}
.on-dark,
[data-theme="dark"] {
--bg:            var(--ink-950);
--bg-subtle:     var(--ink-900);
--surface:       var(--ink-850);
--surface-hover: var(--ink-800);
--border:        var(--ink-700);
--border-strong: var(--ink-600);
--hairline:      rgba(255, 255, 255, 0.08);
--fg:    #F2F3F7;
--fg-2:  var(--ink-300);
--fg-3:  var(--ink-500);
--accent-fg:     var(--brand-300);
--accent-tint:   var(--brand-soft-dark);
--accent-border: color-mix(in srgb, #9A8EFF 32%, #0E0F13);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
--shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.q-display {
font-family: var(--font-sans);
font-weight: var(--weight-medium);
font-size: var(--fs-display);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg);
text-wrap: balance;
}
.q-h1 {
font-family: var(--font-sans);
font-weight: var(--weight-medium);
font-size: var(--fs-h1);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-tight);
color: var(--fg);
text-wrap: balance;
}
.q-h2 {
font-family: var(--font-sans);
font-weight: var(--weight-medium);
font-size: var(--fs-h2);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-snug);
color: var(--fg);
text-wrap: balance;
}
.q-h3 {
font-family: var(--font-sans);
font-weight: var(--weight-medium);
font-size: var(--fs-h3);
line-height: 1.2;
letter-spacing: var(--tracking-snug);
color: var(--fg);
}
.q-lead {
font-family: var(--font-sans);
font-weight: var(--weight-regular);
font-size: var(--fs-lead);
line-height: var(--lh-relaxed);
letter-spacing: var(--tracking-normal);
color: var(--fg-2);
text-wrap: pretty;
}
.q-body {
font-family: var(--font-sans);
font-weight: var(--weight-regular);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
letter-spacing: var(--tracking-normal);
color: var(--fg-2);
text-wrap: pretty;
}
.q-small {
font-size: var(--fs-sm);
line-height: var(--lh-normal);
color: var(--fg-2);
}
.q-eyebrow {
font-family: var(--font-mono);
font-weight: var(--weight-medium);
font-size: var(--fs-mono-label);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--accent-fg);
}
.q-mono {
font-family: var(--font-mono);
font-size: var(--fs-sm);
letter-spacing: 0;
color: var(--fg-2);
}
.q-accent { color: var(--accent-fg); }