:root {
--brand-primary: #e358f2;
--brand-secondary: #25c1e9;
--brand-accent: #ffe600;
--brand-surface: #ffffff;
--primary-50: #fef7ff;
--primary-100: #fdeeff;
--primary-200: #efbcf4;
--primary-300: #f5c6f9;
--primary-400: #d990f2;
--primary-500: #d652f8;
--primary-600: #a72ae0;
--primary-700: #9811ce;
--primary-800: #891fb0;
--primary-900: #690f89;
--primary-950: #620b64;
--secondary-50: #f0f9ff;
--secondary-100: #e3e6e9;
--secondary-200: #b0d4eb;
--secondary-300: #6cd1fb;
--secondary-400: #3eb1ff;
--secondary-500: #0aacf3;
--secondary-600: #0084c1;
--secondary-700: #0470a6;
--secondary-800: #145692;
--secondary-900: #013a5d;
--secondary-950: #071d31;
--neutral-50: #fafafa;
--neutral-100: #f5f5f5;
--neutral-200: #dec9ca;
--neutral-300: #ececec;
--neutral-400: #a9a5a5;
--neutral-500: #6a6a6a;
--neutral-600: #635a5a;
--neutral-700: #504f4f;
--neutral-800: #2f2f2f;
--neutral-900: #2b2b2b;
--neutral-950: #0a0a0a;
--bg-primary: #ffffff;
--bg-secondary: #fafafa;
--bg-muted: #f5f5f5;
--bg-inverse: #303030;
--bg-overlay: rgba(0, 0, 0, 0.80);
--bg-glass: rgba(255, 255, 255, 0.1);
--text-primary: #1c1c1c;
--text-secondary: #393939;
--text-muted: #6f6f6f;
--text-inverse: #ffffff;
--text-link: #0085f2;
--text-link-hover: #06a3d5;
--border-light: #f0efef;
--border-medium: #cecece;
--border-strong: #a5a1a1;
--border-interactive: #009fdf;
--state-hover: rgba(232, 84, 255, 0.08);
--state-focus: rgba(20, 155, 231, 0.12);
--state-active: rgba(238, 72, 247, 0.15);
--state-disabled: rgba(102, 100, 100, 0.50);
--success: #28b753;
--success-bg: #f0fdf4;
--warning: #ffc502;
--warning-bg: #ffffff;
--error: #f16055;
--error-bg: #fef2f2;
}
:root {
--space-0: 0;
--space-px: 1px;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-32: 8rem;
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem;
--space-3xl: 6rem;
--space-4xl: 8rem;
--section-y-mobile: 3rem;
--section-y-tablet: 4rem;
--section-y-desktop: 5rem;
--section-y-hero: clamp(4rem, 10vw, 8rem);
--section-x: clamp(1rem, 3vw, 2rem);
--section-gap: clamp(1.5rem, 3vw, 2.5rem);
--card-padding: 1.5rem;
--card-gap: 1rem;
--button-padding-x: 1.5rem;
--button-padding-y: 0.75rem;
--form-gap: 1rem;
}
:root {
--font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-secondary: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
--text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
--text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
--text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
--text-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);
--text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);
--text-5xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem);
--text-6xl: clamp(3.75rem, 3rem + 3.75vw, 4.5rem);
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
--tracking-tighter: -0.05em;
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
}
:root {
--shadow-colored: 0 10px 15px -3px rgba(205, 70, 255, 0.15), 0 4px 6px -2px rgba(209, 104, 247, 0.10);
}
:root {
--gradient-primary: linear-gradient(135deg, #ff6afe 0%, #00a9e2 100%);
--gradient-secondary: linear-gradient(135deg, #1ea9d1 0%, #fca713 100%);
--gradient-hero: linear-gradient(135deg, #fef7ff 0%, #f0f9ff 50%, #eae9c9 100%);
--gradient-card: linear-gradient(145deg, #ffffff 0%, #fafafa 100%);
--gradient-overlay-light: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.8));
--gradient-overlay-dark: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.4));
}
:root {
--duration-fast: 0.65s;
--duration-normal: 0.90s;
--duration-slow: 1.13s;
--ease-smooth: ease-in-out;
--ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
body {
font-family: var(--font-primary);
line-height: var(--leading-relaxed);
color: var(--text-primary);
background-color: var(--bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
.cta-action-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.75rem;
margin-top: 1.66rem;
font-family: var(--font-primary);
font-size: var(--text-base);
font-weight: var(--font-semibold);
line-height: var(--leading-tight);
text-decoration: none;
color: var(--text-inverse);
background: var(--gradient-primary);
border: none;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
transition: all var(--duration-normal) var(--ease-smooth);
& .btn-icon {
font-size: 1.25rem;
transition: transform var(--duration-fast) var(--ease-spring);
}
}
.cta-action-btn:hover {
color: var(--text-inverse);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
& .btn-icon {
transform: translateX(4px);
}
}
.cta-action-btn:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
.cta-action-btn:focus-visible {
outline: 2px solid var(--border-interactive);
outline-offset: 2px;
}
@media (prefers-contrast: high) {
:root {
--border-light: #9c9c9c;
--border-medium: #636363;
}
}
@media (prefers-color-scheme: dark) {
}