:root {

    --white: #ffffff;

    --blue-50: #f5f7ff;
    --blue-100: #eef2ff;
    --blue-200: #dbe4ff;
    --blue-300: #b8c8ff;
    --blue-400: #4C6FFF;
    --blue-500: #3B68FC;
    --blue-600: #2f57e6;
    --blue-700: #2249C7;

    --black: #000000;
    --gray-50: #fafafa;
    --gray-75: #F5F6FA;
    --gray-100: #EBEDF5;
    --gray-200: #e7e7e7;
    --gray-300: #e5e5e5;
    --gray-400: #cfd4e0;
    --gray-500: #9aa3b2;
    --gray-600: #596080;
    --gray-700: #424866;
    --gray-800: #2c3147;
    --gray-900: #1C2033;


    --primary: var(--blue-500);
    --secondary: var(--gray-600);

    --red-500: #DE524C;
    --yellow-500: #E7B549;
    --green-500: #24A8AF;
    --cyan-500: #55AFE7;

    --success: var(--green-500);
    --info: var(--cyan-500);
    --warning: var(--yellow-500);
    --danger: var(--red-500);

    --text-main: var(--gray-900);
    --text-muted: var(--gray-700);

    --site-gradient-black: linear-gradient(90deg, #2d3142, #4b5166);
    --site-gradient-blue: linear-gradient(90deg, #4f7cff, #6c63ff);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-tool: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.3);
    --shadow-lg-blue: 0 6px 20px rgba(37, 99, 235, 0.6);

    --site-width: min(1440px, 100%);
    --tool-wth400: min(400px, 100%);
    --tool-wth500: min(500px, 100%);
    --tool-wth600: min(600px, 100%);

    --space-2: 0.125rem;
    --space-4: 0.25rem;
    --space-6: 0.375rem;
    --space-8: 0.5rem;
    --space-10: 0.625rem;
    --space-12: 0.75rem;
    --space-14: 0.875rem;
    --space-16: 1rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-40: 2.5rem;
    --space-48: 3rem;
    --space-64: 4rem;
    --space-80: 5rem;
    --space-96: 6rem;

    --radius-4: 0.25rem;
    --radius-8: 0.5rem;
    --radius-12: 0.75rem;
    --radius-20: 1.25rem;

    --radius-full: 999px;

    --font-family-body: system-ui, sans-serif, Arial, Helvetica, Tahoma, Geneva, Verdana;
    --font-family-menu: 'Segoe UI', sans-serif, Tahoma, Geneva, Verdana, sans-serif;

    --font-size-body: 16px;
    --line-height-body: 1.6;
    --text-body: #222;

    --font-size-12: 0.75rem;
    --font-size-14: 0.875rem;
    --font-size-16: 1rem;
    --font-size-18: 1.125rem;

    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;

    --display1-size: 6rem;
    --display2-size: 5.5rem;
    --display3-size: 4.5rem;
    --display4-size: 3rem;

    --display1-weight: 300;
    --display2-weight: 300;
    --display3-weight: 300;
    --display4-weight: 700;
    --display-line-height: 1.2;
    --lead-font-size: 1.125rem;
    --lead-font-weight: normal;
    --lead-line-height: 1.5rem;
    --small-font-size: .85em
}

html {
    box-sizing: border-box;
    font-size: 100%;
    font-style: normal;
    scroll-behavior: smooth;
    height: -webkit-fill-available;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-body);
    background: var(--blue-500);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    font-size: var(--font-size-base);
}

h1 {
    font-size: 2rem;
    line-height: 3.625rem;

}

h2 {
    font-size: 1.75rem;
    line-height: 2.75rem;
}

h3 {
    font-size: 1.5rem;
    line-height: 2rem;
}

h4 {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

h5 {
    font-size: 1rem;
    line-height: 1.5rem;
}

h6 {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

p {
    line-height: 1.5rem;
    font-size: var(--font-size-base);
}

svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--blue-400);
    transition: 0.3s ease;
    pointer-events: none;
}

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 90;
}

.nav-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

#backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--blue-500);
    opacity: 0.9;
    color: var(--white);
    font-size: 20px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: 0.3s ease;
    z-index: 999;
}

#backToTop:hover {
    transform: translateY(-3px);
    background: var(--blue-400);
    box-shadow: var(--shadow-lg-blue);
}

#backToTop svg {
    width: 30px;
    height: 30px;
    fill: var(--white);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    margin-block: 0.5rem;
}

.breadcrumb a {
    text-decoration: none;
    color: var(--blue-400);
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb-sep {
    color: #999;
    font-size: 0.85rem;
}