*,
:before,
:after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, PingFang SC, Microsoft YaHei, sans-serif;
    scroll-behavior: smooth
}

body {
    margin: 0;
    line-height: inherit;
    background-color: #f8fafc;
    color: #334155;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
blockquote,
figure {
    margin: 0;
    padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    vertical-align: middle;
    max-width: 100%;
    height: auto
}

button {
    background-color: transparent;
    background-image: none;
    padding: 0;
    cursor: pointer
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color
}

a {
    color: inherit;
    text-decoration: inherit
}

:root {
    --primary-color: #0052cc;
    --primary-hover: #0041a3
}

.cta-button {
    background-color: var(--primary-color);
    transition: background-color .2s ease-in-out, transform .2s ease-in-out
}

.cta-button:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px)
}

.section-title {
    color: #1e293b
}

.fade-in-section {
    opacity: 1;
    transition: opacity .6s ease-out, transform .6s ease-out
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0)
}

.bg-white\/80 {
    background-color: #fffc
}

.backdrop-blur-md {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

.sticky {
    position: sticky
}

.top-0 {
    top: 0
}

.z-50 {
    z-index: 50
}

.border-b {
    border-bottom-width: 1px
}

.border-slate-200 {
    border-color: #e2e8f0
}

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.flex {
    display: flex
}

.justify-between {
    justify-content: space-between
}

.items-center {
    align-items: center
}

.font-bold {
    font-weight: 700
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.text-slate-800 {
    color: #1e293b
}

.hidden {
    display: none
}

.text-slate-600 {
    color: #475569
}

.hover\:text-primary-color:hover {
    color: var(--primary-color)
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.duration-200 {
    transition-duration: .2s
}

.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem
}

.ml-4 {
    margin-left: 1rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.font-semibold {
    font-weight: 600
}

.text-white {
    color: #fff
}

.rounded-md {
    border-radius: .375rem
}

.shadow-sm {
    box-shadow: 0 1px 2px #0000000d
}

.justify-center {
    justify-content: center
}

.text-center {
    text-align: center
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem
}

.bg-white {
    background-color: #fff
}

.max-w-4xl {
    max-width: 56rem
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.inline-block {
    display: inline-block
}

.bg-blue-100 {
    background-color: #dbeafe
}

.text-primary-color {
    color: var(--primary-color)
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem
}

.rounded-full {
    border-radius: 9999px
}

.mb-4 {
    margin-bottom: 1rem
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem
}

.font-extrabold {
    font-weight: 800
}

.tracking-tight {
    letter-spacing: -.025em
}

.mb-6 {
    margin-bottom: 1.5rem
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}

.max-w-2xl {
    max-width: 42rem
}

.mb-10 {
    margin-bottom: 2.5rem
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem
}

.rounded-lg {
    border-radius: .5rem
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d
}

.mt-8 {
    margin-top: 2rem
}

.text-slate-500 {
    color: #64748b
}

.space-x-4>:not([hidden])~:not([hidden]) {
    margin-left: 1rem
}

.w-4 {
    width: 1rem
}

.h-4 {
    height: 1rem
}

.mr-1\.5 {
    margin-right: .375rem
}

.text-green-500 {
    color: #22c55e
}

.fill-none {
    fill: none
}

.stroke-currentColor {
    stroke: currentColor
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem
}

.max-w-3xl {
    max-width: 48rem
}

.mb-12 {
    margin-bottom: 3rem
}

.grid {
    display: grid
}

.gap-8 {
    gap: 2rem
}

.p-8 {
    padding: 2rem
}

.rounded-xl {
    border-radius: .75rem
}

.w-12 {
    width: 3rem
}

.h-12 {
    height: 3rem
}

.mb-16 {
    margin-bottom: 4rem
}

.bg-slate-50 {
    background-color: #f8fafc
}

.gap-12 {
    gap: 3rem
}

.lg\:pr-12 {
    padding-right: 3rem
}

.bg-indigo-100 {
    background-color: #e0e7ff
}

.text-indigo-600 {
    color: #4f46e5
}

.uppercase {
    text-transform: uppercase
}

.mb-3 {
    margin-bottom: .75rem
}

.mb-8 {
    margin-bottom: 2rem
}

.space-y-5>:not([hidden])~:not([hidden]) {
    margin-top: 1.25rem
}

.w-6 {
    width: 1.5rem
}

.h-6 {
    height: 1.5rem
}

.mr-4 {
    margin-right: 1rem
}

.flex-shrink-0 {
    flex-shrink: 0
}

.text-slate-700 {
    color: #334155
}

.mx-1 {
    margin-left: .25rem;
    margin-right: .25rem
}

.w-5 {
    width: 1.25rem
}

.h-5 {
    height: 1.25rem
}

.mr-3 {
    margin-right: .75rem
}

.bg-slate-100 {
    background-color: #f1f5f9
}

.p-4 {
    padding: 1rem
}

.object-contain {
    object-fit: contain
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a
}

.mb-20 {
    margin-bottom: 5rem
}

.bg-teal-100 {
    background-color: #ccfbf1
}

.text-teal-600 {
    color: #0d9488
}

.space-y-4>:not([hidden])~:not([hidden]) {
    margin-top: 1rem
}

.p-6 {
    padding: 1.5rem
}

.border {
    border-width: 1px
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem
}

.bg-slate-800 {
    background-color: #1e293b
}

.text-slate-400 {
    color: #94a3b8
}

.no-wrap {
    white-space: nowrap
}

@media (min-width: 768px) {
    .md\:hidden {
        display: none
    }

    .md\:flex {
        display: flex
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:order-1 {
        order: 1
    }

    .md\:order-2 {
        order: 2
    }

    .md\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem
    }

    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1
    }

    .md\:text-6xl {
        font-size: 3.75rem;
        line-height: 1
    }

    .md\:space-x-6>:not([hidden])~:not([hidden]) {
        margin-left: 1.5rem
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .lg\:pl-12 {
        padding-left: 3rem
    }

    .lg\:pr-12 {
        padding-right: 3rem
    }

    .lg\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem
    }

    .lg\:py-32 {
        padding-top: 8rem;
        padding-bottom: 8rem
    }

    .lg\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem
    }

    .lg\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem
    }
}

@media (min-width: 640px) {
    .container {
        max-width: 640px
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px
    }
}

.prose {
    color: #334155;
    max-width: 65ch
}

.prose a {
    color: #1e293b;
    text-decoration: none;
    font-weight: 500
}

.prose strong {
    color: #1e293b;
    font-weight: 600
}

.prose h1,
.prose h2,
.prose h3 {
    color: #1e293b;
    font-weight: 800;
    line-height: 1.2
}

.prose h1 {
    font-size: 2.25rem;
    margin-bottom: 2rem
}

.prose h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #e2e8f0
}

.prose h3 {
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: .75rem
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    line-height: 1.75
}

.prose ul,
.prose ol {
    padding-left: 1.5rem
}

.prose ul>li {
    list-style-type: disc
}

.prose ol>li {
    list-style-type: decimal
}

.prose li {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.prose blockquote {
    font-style: italic;
    color: #475569;
    padding-left: 1rem;
    border-left: .25rem solid #e2e8f0
}

.prose figure {
    margin-top: 2rem;
    margin-bottom: 2rem
}

.prose figure>img {
    margin-bottom: .75rem
}

.prose figcaption {
    font-size: .875rem;
    color: #64748b;
    text-align: center
}

.prose code {
    color: #1e293b;
    font-weight: 600;
    background-color: #f1f5f9;
    padding: .125rem .375rem;
    border-radius: .25rem;
    font-size: .9em
}

@media (min-width: 1024px) {
    .lg\:prose-xl h1 {
        font-size: 2.75rem
    }

    .lg\:prose-xl h2 {
        font-size: 1.875rem
    }

    .lg\:prose-xl h3 {
        font-size: 1.5rem
    }

    .lg\:prose-xl p,
    .lg\:prose-xl li {
        font-size: 1.125rem
    }
}

#language-switcher-desktop,
#language-switcher-mobile {
    position: relative;
    display: inline-flex;
    align-items: center
}

#language-switcher-desktop button,
#language-switcher-mobile button {
    display: flex;
    align-items: center;
    font-size: .875rem;
    color: #475569;
    transition: color .2s ease-in-out;
    padding: .5rem;
    border-radius: .375rem;
    border: 1px solid #cbd5e1;
    background-color: #fff
}

#language-switcher-desktop button:hover,
#language-switcher-mobile button:hover {
    color: var(--primary-color);
    border-color: var(--primary-color)
}

.nav-links #language-switcher-desktop {
    margin-right: 1rem
}

.language-switcher-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: .5rem;
    min-width: 10rem;
    background-color: #fff;
    border-radius: .5rem;
    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;
    padding-top: .5rem;
    padding-bottom: .5rem;
    z-index: 60;
    border: 1px solid #e2e8f0
}

.language-switcher-panel a {
    white-space: nowrap;
    display: block;
    padding: .5rem 1rem;
    font-size: .875rem;
    color: #334155;
    transition: background-color .1s ease-in-out
}

.language-switcher-panel a:hover {
    background-color: #f1f5f9
}

.language-switcher-panel a.font-bold {
    font-weight: 600;
    color: var(--primary-color)
}

.language-switcher-panel.hidden {
    display: none
}