:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --color-bg: #f6f8fb;
  --color-background: var(--color-bg);
  --color-bg-soft: #eef5ff;
  --color-surface: #ffffff;
  --color-surface-soft: #eef5ff;
  --color-surface-glass: rgba(255, 255, 255, 0.76);
  --color-surface-muted: #f9fbff;
  --color-ink: #050816;
  --color-text: var(--color-ink);
  --color-text-primary: var(--color-ink);
  --color-muted: #5f6675;
  --color-text-secondary: var(--color-muted);
  --color-muted-strong: #353d4e;
  --color-border: rgba(5, 8, 22, 0.1);
  --color-border-subtle: var(--color-border);
  --color-border-strong: rgba(5, 8, 22, 0.16);
  --color-grid-line: rgba(20, 92, 255, 0.07);
  --color-accent: #145cff;
  --color-accent-hover: #0f47d4;
  --color-accent-2: #19c7dc;
  --color-accent-soft: #dcecff;
  --color-violet: #38cfff;
  --color-violet-soft: #e8faff;
  --color-dark: #03040a;
  --color-dark-soft: #0b1020;
  --color-dark-muted: #9aa6bc;
  --color-success: #0f8b5f;
  --color-success-soft: #e6f8f1;
  --color-warning: #a15c00;
  --color-warning-soft: #fff3dc;
  --color-error: #b42335;
  --color-error-soft: #fff0f2;
  --color-info: #1463ff;
  --color-info-soft: #eaf2ff;

  --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
  --gradient-accent-deep: linear-gradient(135deg, #0f47d4 0%, #151c74 55%, #0b1020 100%);
  --gradient-cloud: radial-gradient(circle at 20% 18%, rgba(25, 199, 220, 0.28), transparent 34%), radial-gradient(circle at 82% 14%, rgba(101, 216, 255, 0.2), transparent 30%), linear-gradient(180deg, #f6f8fb 0%, #ffffff 58%, #eef5ff 100%);
  --gradient-cloud-soft: radial-gradient(circle at 12% 18%, rgba(20, 92, 255, 0.12), transparent 32%), radial-gradient(circle at 86% 20%, rgba(25, 199, 220, 0.18), transparent 34%);
  --gradient-dark: radial-gradient(circle at 16% 12%, rgba(25, 199, 220, 0.2), transparent 28%), radial-gradient(circle at 82% 8%, rgba(101, 216, 255, 0.18), transparent 26%), linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-soft) 100%);

  --font-size-xs: clamp(0.76rem, 0.74rem + 0.08vw, 0.82rem);
  --font-size-sm: clamp(0.88rem, 0.84rem + 0.12vw, 0.95rem);
  --font-size-base: 1rem;
  --font-size-md: clamp(1rem, 0.96rem + 0.18vw, 1.1rem);
  --font-size-lg: clamp(1.08rem, 1rem + 0.42vw, 1.28rem);
  --font-size-xl: clamp(1.26rem, 1.08rem + 0.84vw, 1.65rem);
  --font-size-2xl: clamp(1.58rem, 1.18rem + 1.6vw, 2.45rem);
  --font-size-3xl: clamp(2rem, 1.24rem + 3vw, 4rem);
  --font-size-h1: clamp(2.55rem, 1.2rem + 5.2vw, 6.4rem);
  --font-size-h2: clamp(2rem, 1.18rem + 3.2vw, 4.4rem);
  --font-size-h3: clamp(1.35rem, 1.06rem + 1.25vw, 2.1rem);
  --font-size-hero: var(--font-size-h1);
  --line-height-tight: 1;
  --line-height-heading: 1.06;
  --line-height-body: 1.65;
  --line-height-relaxed: 1.8;
  --letter-spacing-tight: 0;
  --letter-spacing-normal: 0;
  --font-weight-regular: 400;
  --font-weight-medium: 560;
  --font-weight-semibold: 680;
  --font-weight-bold: 760;
  --font-weight-black: 860;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --container-gutter: clamp(1rem, 3vw, 2.5rem);
  --grid-gap: clamp(1rem, 2.4vw, 2rem);
  --section-gap: clamp(2rem, 6vw, 5rem);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-blob: 42% 58% 48% 52% / 55% 42% 58% 45%;
  --media-radius: var(--radius-lg);

  --shadow-card-soft: 0 18px 46px rgba(5, 8, 22, 0.08);
  --shadow-card: 0 12px 32px rgba(5, 8, 22, 0.07);
  --shadow-card-hover: 0 22px 58px rgba(5, 8, 22, 0.12);
  --shadow-floating: 0 24px 70px rgba(5, 8, 22, 0.13);
  --shadow-inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.56);
  --shadow-glow-accent: 0 22px 60px rgba(20, 92, 255, 0.24);
  --shadow-dark-section: 0 24px 70px rgba(3, 4, 10, 0.35);
  --shadow-soft: var(--shadow-card-soft);

  --container: 1120px;
  --container-wide: 1340px;
  --content-width: 760px;
  --section-padding: clamp(4.25rem, 8vw, 8rem);
  --section-padding-mobile: clamp(3.25rem, 14vw, 4.75rem);
  --section-min-height: min(100svh, 54rem);
  --header-height: 76px;
  --sticky-offset: calc(var(--header-height) + var(--space-5));

  --bp-mobile: 560px;
  --bp-tablet: 920px;
  --bp-desktop: 1180px;
  --bp-wide: 1440px;

  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 180ms;
  --duration-normal: 280ms;
  --duration-slow: 720ms;
  --duration-hero: 1040ms;
  --motion-distance-sm: 8px;
  --motion-distance-md: 16px;
  --motion-distance-lg: 28px;
  --transition-fast: var(--duration-fast) var(--ease-soft);
  --transition-normal: var(--duration-normal) var(--ease-soft);
  --transition-slow: var(--duration-slow) var(--ease-premium);
  --transition: var(--transition-normal);
  --motion-float-duration: 12s;

  --z-background: -1;
  --z-content: 1;
  --z-sticky: 20;
  --z-header: 100;
  --z-overlay: 200;
  --z-menu: 300;
  --z-modal: 400;
  --z-loader: 500;
  --z-cloud: var(--z-background);
  --z-base: var(--z-content);
  --z-magic-header: var(--z-header);
  --z-magic-menu: var(--z-menu);
  --z-magic-modal: var(--z-modal);
  --z-cookie: var(--z-modal);
  --viewport-min: 100vh;
  --viewport-safe: 100svh;
  --viewport-dynamic: 100dvh;
}

@media (max-width: 920px) {
  :root {
    --container-gutter: clamp(0.875rem, 4vw, 1.5rem);
    --section-padding: clamp(3.75rem, 10vw, 6rem);
    --sticky-offset: calc(var(--header-height) + var(--space-4));
  }
}

@media (max-width: 640px) {
  :root {
    --header-height: 68px;
    --section-padding: var(--section-padding-mobile);
    --font-size-h1: clamp(2.15rem, 13vw, 3.35rem);
    --font-size-h2: clamp(1.85rem, 10vw, 2.75rem);
    --font-size-h3: clamp(1.25rem, 6.2vw, 1.75rem);
  }
}