:root {  --container: 1440px;
--container-text: 800px;
--gutter: clamp(20px, 3.4vw, 48px);
--header-h: 96px;
--header-h-sm: 72px; --c-void: #060606;
--c-bg: #090909;
--c-bg-2: #0b0b0d;
--c-surface: #0e0e0e;
--c-surface-2: #141414;
--c-surface-3: #1c1c21;
--c-line: rgba(255, 255, 255, 0.08);
--c-line-2: rgba(255, 255, 255, 0.14);
--c-line-3: rgba(255, 255, 255, 0.22);
--c-text: #f5f5f5;
--c-text-2: rgba(245, 245, 245, 0.68);
--c-text-3: rgba(245, 245, 245, 0.45); --c-accent: #1e8de9;
--c-accent-light: #4fa8ff;
--c-accent-deep: #0f5fa8;
--c-violet: #7b2ff7;
--grad-accent: linear-gradient(135deg, #4fa8ff 0%, #0f5fa8 100%);
--grad-accent-soft: linear-gradient(135deg, rgba(79, 168, 255, 0.18), rgba(15, 95, 168, 0.05));
--glow-accent: 0 0 46px rgba(30, 141, 233, 0.42); --p-bg: #f5f3ef;
--p-bg-2: #faf8f4;
--p-card: #ffffff;
--p-ink: #14110e;
--p-ink-2: #3a352f;
--p-ink-3: #6b655c;
--p-line: rgba(0, 0, 0, 0.1);
--p-line-2: rgba(0, 0, 0, 0.16);
--p-accent: #0f5fa8; --font-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
--font-ui: "Outfit", "Montserrat", system-ui, sans-serif;
--font-body: "Montserrat", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
--font-hand: "Permanent Marker", "Caveat", cursive; --fs-hero: clamp(38px, 4.2vw, 58px);
--fs-h1: clamp(36px, 3.9vw, 58px);
--fs-h2: clamp(32px, 3.2vw, 48px);
--fs-h2-sm: clamp(28px, 2.5vw, 38px);
--fs-h3: clamp(24px, 2.1vw, 32px);
--fs-h4: clamp(20px, 1.6vw, 25px);
--fs-deco: clamp(56px, 8vw, 120px);
--fs-lead: clamp(17px, 1.3vw, 20px);
--fs-body-lg: 19px;
--fs-body: 17px;
--fs-sm: 15px;
--fs-xs: 13.5px;
--fs-2xs: 11px;
--fs-label: 13px;
--lh-display: 0.98;
--lh-display-tight: 0.92;
--lh-tight: 1.15;
--lh-body: 1.7;
--lh-loose: 1.85;
--ls-display: 0.005em;
--ls-label: 0.26em;
--ls-btn: 0.045em; --space-3xs: 4px;
--space-2xs: 8px;
--space-xs: 12px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 32px;
--space-xl: 48px;
--space-2xl: 64px;
--space-3xl: 80px;
--space-4xl: 104px; --section-y: clamp(64px, 6.9vw, 100px);
--section-y-lg: clamp(76px, 8.2vw, 118px);
--section-y-sm: clamp(52px, 5.6vw, 80px); --radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-pill: 999px;
--border: 1px solid var(--c-line-2); --dur-fast: 0.18s;
--dur-main: 0.3s;
--dur-slow: 0.55s;
--dur-reveal: 1s;
--ease-main: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); --z-progress: 70;
--z-menu: 60;
--z-header: 50;
--z-cookie: 80;
}
@media (max-width: 768px) {
:root {
--header-h: var(--header-h-sm);
}
}