main {
    --square-grid-background: url(./square-grid.82840b0b.svg)
    calc(50% - 600px)
    clamp(
            0px,
            calc((100vw - var(--side-gap) * 2) * 0.08),
            calc(var(--max-width) * 0.08)
    )
    no-repeat;
}

.header {
    --top-padding: 24px;
    width: 100%;
}
@media (min-width: 640px) {
    .header {
        --top-padding: 48px;
        height: clamp(0px, (100vw - var(--side-gap) * 2) * 0.38, (var(--max-width) - var(--side-gap) * 2) * 0.38);
    }
}
.header.section-padding {
    padding-top: var(--top-padding);
}
.header.section-margin {
    margin-top: var(--top-padding);
}

.header :is(h1, h2, h3, h4).en {
    margin-bottom: 0;
    transform: scale(1.5);
    transform-origin: top left;
}
.header :is(h1, h2, h3, h4).en:not(:last-child) {
    margin-bottom: 0.4em;
}
@media (min-width: 640px) {
    .header :is(h1, h2, h3, h4).en {
        transform: none;
    }
}

.header-backdrop {
    position: relative;
    padding-top: 32px;
    height: 100%;
    align-items: start;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
}
@media (min-width: 640px) {
    .header-backdrop {
        padding-top: 0;
        align-items: center;
    }
}

.header-backdrop > .cell {
    grid-row-start: 1;
    width: calc(99% - var(--column-gap) * 1.5);
    margin: 0 calc(var(--column-gap) * -1.5);
    z-index: 1;
}
@media (min-width: 640px) {
    .header-backdrop > .cell {
        width: calc(99% - var(--column-gap) * 0.5);
        margin: 0 calc(var(--column-gap) * -0.5);
        transform: translateY(-6px);
    }
}
@media (min-width: 1024px) {
    .header-backdrop > .cell {
        transform: translateY(-12px);
    }
}
@media (min-width: 1440px) {
    .header-backdrop > .cell {
        transform: translateY(-18px);
    }
}

.header-backdrop > .background-image {
    grid-area: 1/1/-1/-1;
    margin-top: -32px;
    height: 100%;
    min-height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-mask: url(./header-mask-mobile.a38a3dfe.svg) center top no-repeat;
    mask: url(./header-mask-mobile.a38a3dfe.svg) center top no-repeat;
}
@media (min-width: 640px) {
    .header-backdrop > .background-image {
        margin-top: 0;
        -webkit-mask-image: url(./header-mask.adc0e111.svg);
        mask-image: url(./header-mask.adc0e111.svg);
    }
}

@media (max-width: 639px) {
    .about .header-backdrop > .background-image, .trial .header-backdrop > .background-image {
        height: auto;
        min-height: initial;
    }
}

.header-backdrop > .header-image {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 15%;
}
@media (min-width: 640px) {
    .header-backdrop > .header-image {
        width: auto;
        height: 105%;
        right: 5%;
        top: 0;
    }
}

.presentation .title {
    align-self: baseline;
    margin-bottom: 16px;
    width: calc(100% + var(--column-gap) / 2);
}
@media (min-width: 640px) {
    .presentation .title {
        margin-bottom: 0;
        border-right: 1px solid currentColor;
    }
}

.presentation .title .overline {
    color: inherit;
}

.presentation .title h1 {
    margin-bottom: 0;
    color: #1b4c62;
}

.presentation .text {
    align-self: center;
    padding-left: 18px;
    border-left: 1px solid currentColor;
}
@media (min-width: 640px) {
    .presentation .text {
        padding-left: 0;
        border-left: none;
    }
}

.icon {
    --padding: 20px;
    --size: 96px;
    width: var(--size);
    height: var(--size);
    padding: var(--padding);
    border-radius: 32px;
}
.icon.icon--fill {
    background-color: currentColor;
}
.icon.icon--border {
    border: 3px solid currentColor;
}
.icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
}

.course-images {
    position: relative;
    height: 80vw;
}
@media (min-width: 640px) {
    .course-images {
        height: 50vw;
        margin-bottom: 48px;
    }
}
@media (min-width: 1024px) {
    .course-images {
        height: clamp(0px, 40vw, 500px);
    }
}

.course-images.programming-basics {
    background-image: url(./programming-basics-bg.8d32baef.svg), url(./dots-grid.70169396.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom 20px, bottom -120px right;
    background-size: auto calc(100% - 20px), 200px;
}
@media (min-width: 640px) {
    .course-images.programming-basics {
        background-position: center center, bottom -120px right;
        background-size: contain, 200px;
    }
}
@media (min-width: 1024px) {
    .course-images.programming-basics {
        background-position: center bottom 60px, bottom -400px right;
        background-size: auto calc(100% - 60px), auto;
    }
}

.course-images.games-dev-scratch {
    background-image: url(./games-development-bg.92b0d1c0.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 100%;
}
@media (min-width: 640px) {
    .course-images.games-dev-scratch {
        background-position: center center;
        background-size: contain;
    }
}
@media (min-width: 1024px) {
    .course-images.games-dev-scratch {
        background-position: center top;
        background-size: auto 90%;
    }
}

.course-images.english-course {
    background-image: url(./english-course-bg.7ea07c4f.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 100%;
}
@media (min-width: 640px) {
    .course-images.english-course {
        background-position: center center;
        background-size: contain;
    }
}
@media (min-width: 1024px) {
    .course-images.english-course {
        background-position: center top;
        background-size: auto 90%;
    }
}

.course-images.coding-kids {
    background-image: url(./text-based-coding-bg.60098dc1.svg), url(./math-symbols-grid.460df496.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom 20px, bottom right;
    background-size: auto calc(100% - 20px), auto;
}
@media (min-width: 640px) {
    .course-images.coding-kids {
        background-position: center center, bottom right;
        background-size: contain, auto;
    }
}
@media (min-width: 1024px) {
    .course-images.coding-kids {
        background-position: center bottom 100px, bottom 50px right;
        background-size: auto calc(100% - 100px), auto;
    }
}

.course-images.ai-kids {
    background-image: url(./ai-kids.043a95fd.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom;
    background-size: auto calc(100% - 40px), auto;
}
@media (min-width: 640px) {
    .course-images.ai-kids {
        background-position: center center, bottom right;
        background-size: contain, auto;
    }
}
@media (min-width: 1024px) {
    .course-images.ai-kids {
        background-position: center center;
        background-size: auto calc(100% - 115px), auto;
    }
}

.summary-table {
    --base-spacing: 6px;
    --medium-spacing: calc(var(--base-spacing) * 2);
    --large-spacing: calc(var(--base-spacing) * 4);
    display: flex;
    flex-direction: column;
    border: 1px solid #8868fc;
    border-radius: 2rem;
    background-color: white;
}
@media (min-width: 640px) {
    .summary-table {
        --base-spacing: 12px;
    }
}
.summary-table.summary-table--color1 {
    border-color: #6dc1bf;
}
.summary-table.summary-table--color3 {
    border-color: #ff5252;
}
.summary-table.summary-table--color4 {
    border-color: #f9c427;
}
.summary-table.summary-table--color6 {
    border-color: #ADFD5D;
}

.summary-table table {
    border-spacing: 0px;
}

.summary-table tr:nth-child(even) :is(th, td) {
    background-color: #f8f9fa;
}

.summary-table tr:first-of-type :is(th, td) {
    padding-top: var(--medium-spacing);
}

.summary-table tr:last-child :is(th, td):first-child {
    border-bottom-left-radius: 2rem;
}
.summary-table tr:last-child :is(th, td):last-child {
    border-bottom-right-radius: 2rem;
}

.summary-table th {
    padding: var(--base-spacing);
    padding-left: var(--large-spacing);
    text-align: left;
}

.summary-table td {
    padding: var(--base-spacing);
    padding-right: var(--large-spacing);
}

.summary-table--even :is(td, th) {
    width: 50%;
}

.summary-table .button {
    height: 48px;
    align-self: stretch;
    margin: var(--medium-spacing);
}

.tag {
    padding: 6px 12px;
    border-radius: 1.25rem;
}

.faq {
    padding-bottom: calc(var(--section-padding) * 3);
    background-color: #f1f3f5;
    background-image: url(./gradient-dots.74ca109f.svg);
    background-repeat: no-repeat;
    background-position: left calc(50% + 100px) bottom 15%;
}
@media (min-width: 1024px) {
    .faq {
        background-position: left calc(50% + 400px) bottom 15%;
    }
}

@keyframes openAccordion {
    0% {
        visibility: hidden;
        height: 0;
        opacity: 0;
    }
    0.1% {
        visibility: visible;
    }
    50% {
        opacity: 1;
    }
    99.9% {
        height: var(--content-height);
        overflow: hidden;
    }
    100% {
        height: auto;
    }
}
@keyframes closeAccordion {
    0% {
        height: var(--content-height);
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    99.9% {
        height: 0;
        visibility: visible;
    }
    100% {
        visibility: hidden;
        opacity: 0;
    }
}
.details {
    --padding: 24px;
    --left-padding: 72px;
    --optical-adjustment: 4px;
    --top-inset: 80px;
    --marker-size: 60px;
    --offset: 0px;
    --transition-duration: 0.5s;
    --transition-timing-function: ease-in-out;
    position: relative;
    padding: var(--padding);
    padding-left: var(--left-padding);
    border-radius: 2rem;
    box-shadow: 0 0.1px 5.3px rgba(0, 0, 0, 0.016), 0 2.9px 17.9px rgba(0, 0, 0, 0.024), 0 25px 80px rgba(0, 0, 0, 0.04);
    background-color: #ffffff;
    will-change: height;
}
@media (min-width: 640px) {
    .details {
        --padding: 36px;
        --offset: var(--marker-size) + 10px;
    }
}
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
    .details {
        --transition-duration: 0 !important;
    }
}

li:not(:last-of-type) .details {
    margin-bottom: 24px;
}

.details:before {
    content: "";
    position: absolute;
    left: calc((var(--left-padding) + var(--optical-adjustment) + var(--offset)) / 2);
    top: var(--top-inset);
    height: calc(100% - var(--top-inset) - var(--padding));
    width: 1px;
    border-radius: 1px;
    background-color: #f9c427;
}

.details summary {
    list-style: none;
    cursor: pointer;
    transition: margin-bottom var(--transition-duration) var(--transition-timing-function);
    will-change: margin;
}
.details summary::-webkit-details-marker {
    display: none;
}
.details summary:focus:not(.focus-visible) {
    outline: none;
}

.details[open] summary,
.details summary:hover {
    color: #f9c427;
    cursor: pointer;
}

.details.details--opening summary,
.details[open] summary {
    margin-bottom: 24px;
}

.details.details--closing summary,
.details summary {
    margin-bottom: 0;
}

.details summary:before {
    content: "";
    position: absolute;
    transform: translate(calc(-100% + var(--optical-adjustment)), -10%);
    width: var(--marker-size);
    height: var(--marker-size);
    background-repeat: no-repeat;
    background-image: url("./plus-icon-faq.38e2714f.svg");
}

.details[open] summary:before {
    background-image: url("./minus-icon-faq.087e8382.svg");
}

.details summary h5 {
    margin-bottom: 0;
}

.details .content {
    position: relative;
}
@media (min-width: 640px) {
    .details .content {
        padding-left: 24px;
    }
}

.details:not(:is(.details--closing, .details--opening)) .content {
    height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}

.details.details--closing .content {
    overflow: hidden;
    animation: closeAccordion var(--transition-duration) var(--transition-timing-function);
}

.details.details--opening .content {
    overflow: hidden;
    animation: openAccordion var(--transition-duration) var(--transition-timing-function);
}

.details[open]:not(:is(.details--closing, .details--opening)) .content {
    height: auto;
    overflow: auto;
    visibility: visible;
    opacity: 1;
}

.dialog-container,
.dialog-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.dialog-container {
    z-index: 9999;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.dialog-container[aria-hidden=true] {
    display: none;
}

.dialog-overlay {
    background-color: #ffffff80;
}
@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
    .dialog-overlay {
        background-color: transparent;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
}

.dialog-content {
    z-index: 2;
    position: relative;
    margin: auto;
    background-color: #ffffff;
}

.ready-to-dive-in {
    --inset: 7px;
    --padding: 24px;
    padding: var(--padding) var(--padding);
    border-radius: 2rem;
    background-image: url(./dots-gradient-top-right.901f53d6.svg), url(./dots-gradient-bottom-left.af75e8f5.svg);
    background-position: top var(--inset) right var(--inset), bottom var(--inset) left var(--inset);
    background-repeat: no-repeat, no-repeat;
}
@media (min-width: 640px) {
    .ready-to-dive-in {
        --padding: 36px;
        padding: var(--padding);
        border-radius: 4rem;
    }
}
@media (min-width: 1024px) {
    .ready-to-dive-in {
        padding: var(--padding) 0;
        --padding: 54px;
    }
}
@media (min-width: 1024px) {
    .ready-to-dive-in {
        --padding: 96px;
    }
}

.ready-to-dive-in .wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
@media (min-width: 640px) {
    .ready-to-dive-in .wrapper {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: reapeat(2, min-content);
        align-items: center;
    }
}
@media (min-width: 1024px) {
    .ready-to-dive-in .wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

.ready-to-dive-in h2.en {
    margin-bottom: 12px;
}
@media (min-width: 640px) {
    .ready-to-dive-in h2.en {
        margin-bottom: 0;
        grid-row: 1/3;
    }
}
@media (min-width: 1024px) {
    .ready-to-dive-in h2.en {
        padding-right: 24px;
        margin-right: auto;
    }
}

.ready-to-dive-in .button {
    flex: 1;
    min-width: min-content;
    margin: 0;
    align-self: auto;
    white-space: nowrap;
}
.ready-to-dive-in .button:not(:last-child) {
    margin-bottom: 12px;
}
@media (min-width: 1024px) {
    .ready-to-dive-in .button:not(:last-child) {
        margin-bottom: 0;
        margin-right: 24px;
    }
}

@media (min-width: 1024px) {
    .ready-to-dive-in .join-trial {
        flex: 2;
        max-width: 280px;
    }
}

@media (min-width: 1024px) {
    .ready-to-dive-in .learn-more {
        max-width: 190px;
    }
}

.button.button--white {
    color: #000;
    background-image: none;
    background-color: #ffffff;
}

.button.button--with-icon {
    --icon-size: 24px;
    --icon-padding: 2px;
    --adjusted-padding-left-right: calc(
            var(--btn-padding-left-right) + var(--icon-size)
    );
    padding-left: var(--adjusted-padding-left-right);
    padding-right: var(--adjusted-padding-left-right);
}

.button.button--with-icon :is(svg, img) {
    position: absolute;
    left: var(--btn-padding-left-right);
    height: var(--icon-size);
    width: var(--icon-size);
    padding: var(--icon-padding);
    fill: currentColor;
}

.tab-switch {
    --small-padding: 6px;
    --side-padding: 20px;
    --gap: 16px;
    --outer-radius: 20px;
    --focused-text-color: #1b4c62;
    --blurred-text-color: #ffffff;
    --background-color: #1b4c62;
    --foreground-color: #ffffff;
    --image-size: 48px;
    --image-top-margin: 4px;
    --image-bottom-margin: 0px;
    --number-of-options: 2;
    --selected-option: 0;
    --transition-duration: 0.2s;
    --transition-timing-function: ease-in-out;
    --border-radius: calc(var(--outer-radius) - var(--small-padding));
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    padding: var(--small-padding);
    margin: 0;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: var(--gap);
    border: none;
    border-radius: var(--outer-radius);
    background-color: var(--background-color);
}
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
    .tab-switch {
        --transition-style: 0s linear;
    }
}

.tab-switch.tab-switch--loaded::before {
    content: "";
    display: block;
    position: absolute;
    left: var(--small-padding);
    top: var(--small-padding);
    height: calc(100% - var(--small-padding) * 2);
    width: calc((100% - var(--small-padding) * 2 - var(--gap) * (var(--number-of-options) - 1)) / var(--number-of-options));
    transform: translateX(calc((100% + var(--gap)) * var(--selected-option)));
    border-radius: var(--border-radius);
    background-color: var(--foreground-color);
    will-change: transform;
    transition: transform var(--transition-duration) var(--transition-timing-function);
}

.tab-switch label {
    position: relative;
    padding: var(--small-padding) var(--side-padding);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: inherit;
    border-radius: var(--border-radius);
}

.tab-switch input[type=radio] {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    transform: none;
    border-radius: var(--border-radius);
    cursor: pointer;
}
.tab-switch input[type=radio]:focus-visible {
    box-shadow: 0 0 0 3px var(--form-focus-light);
    outline: 2px solid var(--form-focus);
}

.tab-switch__image {
    width: var(--image-size);
    height: var(--image-size);
    margin-top: var(--image-top-margin);
    margin-bottom: var(--image-bottom-margin);
    pointer-events: none;
    z-index: 1;
}

.tab-switch .tab-switch__text {
    color: var(--blurred-text-color);
    text-align: center;
    white-space: nowrap;
    border-radius: var(--border-radius);
}

.tab-switch.tab-switch--loaded .tab-switch__text {
    transition: color var(--transition-duration) var(--transition-timing-function);
    transition-delay: var(--transition-timing-function);
}

.tab-switch input[type=radio]:checked ~ .tab-switch__text {
    color: var(--focused-text-color);
}
.tab-switch input[type=radio]:checked ~ .tab-switch__text:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    background-color: var(--foreground-color);
}
.tab-switch input[type=radio]:checked ~ .tab-switch__text > span {
    position: relative;
}

.tab-switch.tab-switch--loaded input[type=radio]:checked ~ .tab-switch__text:before {
    content: none;
}

[data-tab-index].hide {
    display: none;
}

.number-input {
    --hit-area: 44px;
    width: -moz-fit-content;
    width: fit-content;
    height: calc(var(--flow-space) * 2);
    padding: 0.25rem 0.5rem;
    display: flex;
    font-size: 1.171875rem;
    border: var(--form-border);
    border-radius: var(--form-radius);
}
@media screen and (pointer: coarse) {
    .number-input {
        height: var(--hit-area);
    }
}

.number-input__decrease,
.number-input__increase {
    width: var(--hit-area);
    height: calc(100% + 0.5rem);
    border: none;
    border-radius: 4px;
    background: transparent center/26px no-repeat;
    cursor: pointer;
    transition: background-size 0.3s ease-in-out;
}
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
    .number-input__decrease,
    .number-input__increase {
        transition-duration: 0s !important;
    }
}
.number-input__decrease:focus-visible,
.number-input__increase:focus-visible {
    box-shadow: 0 0 0 3px var(--form-focus-light);
    outline: 2px solid var(--form-focus);
}
.number-input__decrease:active,
.number-input__increase:active {
    background-size: 25px;
    transition-duration: 0s;
}

.number-input__decrease {
    margin: -0.25rem 0.5rem -0.25rem -0.5rem;
    background-image: url(./minus.d167946a.svg);
    background-position: calc(50% + 1px);
}

.number-input__increase {
    margin: -0.25rem -0.5rem -0.25rem 0.5rem;
    background-image: url(./add.9fb83a9b.svg);
    background-position: calc(50% - 1px);
}

.number-input input[type=number] {
    width: var(--width, -moz-fit-content);
    width: var(--width, fit-content);
    height: calc(100% + 0.5rem);
    margin: -0.25rem 0;
    text-align: center;
    border: none;
    box-shadow: none;
}
.number-input input[type=number]:focus-visible {
    box-shadow: 0 0 0 3px var(--form-focus-light);
    outline: 2px solid var(--form-focus);
}

.number-input--with-arrows input[type=number] {
    -moz-appearance: textfield;
}
.number-input--with-arrows input[type=number]:is(::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
    -webkit-appearance: none;
    margin: 0;
}

.select .wpcf7-form-control-wrap::after {
    width: max(1em, 26px);
    height: 100%;
    transform: translateX(-0.2em);
    background: url(./chevron-down.039fdcea.svg) center/26px no-repeat;
    -webkit-clip-path: none;
    clip-path: none;
}

.fadeout {
    opacity: 0;
    transition: 0.5s opacity;
}

.topbar {
    --padding-y: 12px;
    --spacing: 0.5em;
    --target-height: 44px;
    --focus-ring: 0 0 0 0.2rem #3000fd;
    overflow: hidden;
    z-index: 200;
    position: relative;
}

.topbar .logo:focus-visible {
    border-radius: 5px;
    box-shadow: var(--focus-ring);
}

.topbar .logo img {
    --width: 136px;
    min-width: var(--width);
    width: var(--width);
    height: auto;
}
@media (min-width: 640px) {
    .topbar .logo img {
        --width: 154px;
    }
}
@media (min-width: 1024px) {
    .topbar .logo img {
        --width: 216px;
    }
}
@media (min-width: 1440px) {
    .topbar .logo img {
        --width: 257px;
    }
}

.mobile-menu-button {
    --bottom-padding: 2px;
    height: var(--target-height);
    padding-top: 0;
    padding-bottom: var(--bottom-padding);
    padding-left: 18px;
    padding-right: 48px;
    line-height: calc(var(--target-height) - var(--bottom-padding));
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 20px;
    border: 1px solid #dbd2ff;
    background-color: transparent;
    cursor: pointer;
}

.topbar a {
    text-decoration: none;
    font-size: inherit;
    white-space: nowrap;
    overflow: visible;
}
.topbar a:not(.button) {
    color: inherit;
}

.primary-navigation a {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.contact-button .button {
    margin: 0;
}
@media (max-width: 639px) {
    .contact-button .button {
        min-width: 0px;
    }
}

.contact-button svg {
    --size: 24px;
    width: var(--size);
    height: var(--size);
    margin-right: 6px;
    fill: currentColor;
}

.topbar .language-switch {
    --icon-size: 14px;
    display: flex;
    height: var(--target-height);
    line-height: var(--target-height);
    padding-left: calc(var(--icon-size) + 6px);
    background: url(./globe-icon.49ae11b3.svg) center left/var(--icon-size) no-repeat;
}

.topbar .language-switch a:not(:first-of-type) {
    padding-left: calc(var(--spacing) / 2);
}

.topbar .language-switch a:not(:last-of-type) {
    padding-right: calc(var(--spacing) / 2);
}

.topbar .language-switch__slash,
.topbar .language-switch__selected-language {
    opacity: 0.7;
}

.topbar__desktop-menu {
    padding-top: var(--padding-y);
    padding-bottom: var(--padding-y);
    display: grid;
    grid-template-columns: min-content auto;
    justify-items: end;
    align-items: end;
    font-size: 14px;
    color: #34256c;
}
@media (min-width: 640px) {
    .topbar__desktop-menu {
        grid-template-rows: repeat(2, min-content);
        grid-template-areas: "logo secondary-nav" "primary-nav primary-nav";
        row-gap: 6px;
    }
}
@media (min-width: 1024px) {
    .topbar__desktop-menu {
        grid-template-areas: "logo secondary-nav" "logo primary-nav";
        row-gap: 0px;
        column-gap: 20px;
    }
}

.topbar__desktop-menu .skip-to-content {
    display: none;
}
@media (min-width: 640px) {
    .topbar__desktop-menu .skip-to-content {
        display: revert;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -100%);
        padding: 0.7rem 1.7rem 1.1rem;
        font-size: 16px;
        border: 1px solid #b7a6ff;
        border-bottom-left-radius: 1.25rem;
        border-bottom-right-radius: 1.25rem;
        box-shadow: 0 0.1px 5.3px rgba(0, 0, 0, 0.016), 0 2.9px 17.9px rgba(0, 0, 0, 0.024), 0 25px 80px rgba(0, 0, 0, 0.04);
        transition: transform 0.3s ease-in-out;
    }
    .topbar__desktop-menu .skip-to-content:focus {
        transform: translate(-50%, -1px);
    }
}
@media screen and (min-width: 640px) and (prefers-reduced-motion: reduce), (min-width: 640px) and (update: slow) {
    .topbar__desktop-menu .skip-to-content {
        transition-duration: 0s !important;
    }
}

.topbar__desktop-menu .logo {
    justify-self: start;
}
@media (min-width: 640px) {
    .topbar__desktop-menu .logo {
        grid-area: logo;
    }
}

.topbar__desktop-menu .mobile-menu-button {
    color: inherit;
    background-color: #ffffff;
}
@media (min-width: 640px) {
    .topbar__desktop-menu .mobile-menu-button {
        display: none;
    }
}

.topbar__desktop-menu .secondary-navigation {
    display: none;
}
@media (min-width: 640px) {
    .topbar__desktop-menu .secondary-navigation {
        display: revert;
        grid-area: secondary-nav;
        transform: translateY(2px);
    }
}

.topbar__desktop-menu .secondary-navigation ul {
    display: flex;
    align-items: center;
}

.topbar__desktop-menu .secondary-navigation li:not(.language-switch) a {
    position: relative;
    padding-left: calc(2 * var(--spacing));
    display: flex;
    align-items: center;
    height: var(--target-height);
    line-height: var(--target-height);
}

.topbar__desktop-menu .language-switch {
    margin-left: 24px;
}

.topbar__desktop-menu .secondary-navigation li:not(:is(:last-child, :nth-last-child(2))) a:after {
    content: "";
    height: 1em;
    margin-left: calc(2 * var(--spacing));
    border-right: 1px solid currentColor;
}

.topbar__desktop-menu .primary-navigation {
    display: none;
}
@media (min-width: 640px) {
    .topbar__desktop-menu .primary-navigation {
        --invisible-padding: 3px;
        display: revert;
        grid-area: primary-nav;
        justify-self: stretch;
        padding: var(--invisible-padding);
        margin: calc(var(--invisible-padding) * -1);
        overflow: auto;
    }
}
@media (min-width: 1024px) {
    .topbar__desktop-menu .primary-navigation {
        justify-self: revert;
    }
}

.topbar__desktop-menu .primary-navigation ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar__desktop-menu .primary-navigation li:not(:last-child) {
    margin-right: 12px;
}
@media (min-width: 1024px) {
    .topbar__desktop-menu .primary-navigation li:not(:last-child) {
        margin-right: clamp(20px, 7.5vw - 3.5rem, 60px);
    }
}

.topbar__desktop-menu .primary-navigation .link {
    --transition-duration: 0.3s;
    --short-background-size: min(100%, 46px);
    --medium-background-size: min(100%, 58px);
    --wide-background-size: min(100%, 74px);
    position: relative;
    display: inline-block;
    height: var(--target-height);
    line-height: var(--target-height);
}
.topbar__desktop-menu .primary-navigation .link:before, .topbar__desktop-menu .primary-navigation .link:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    background: center bottom no-repeat;
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    transition: -webkit-clip-path var(--transition-duration) ease-in-out;
    transition: clip-path var(--transition-duration) ease-in-out;
    transition: clip-path var(--transition-duration) ease-in-out, -webkit-clip-path var(--transition-duration) ease-in-out;
}
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
    .topbar__desktop-menu .primary-navigation .link {
        --transition-duration: 0s;
    }
}
.topbar__desktop-menu .primary-navigation .link:hover:before, .topbar__desktop-menu .primary-navigation .link.link--selected:after, .topbar__desktop-menu .primary-navigation .link:focus-visible:before, .topbar__desktop-menu .primary-navigation .link:active:after {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
}
.topbar__desktop-menu .primary-navigation .link.link--short:before {
    background-image: url("./smiling-bracket-yellow.95a4b21f.svg");
    background-size: var(--short-background-size);
}
.topbar__desktop-menu .primary-navigation .link.link--short:after {
    background-image: url("./smiling-bracket.96e14800.svg");
    background-size: var(--short-background-size);
}
.topbar__desktop-menu .primary-navigation .link.link--medium:before {
    background-image: url("./smiling-bracket-yellow-medium.646c5e8c.svg");
    background-size: var(--medium-background-size);
}
.topbar__desktop-menu .primary-navigation .link.link--medium:after {
    background-image: url("./smiling-bracket-medium.13fb0640.svg");
    background-size: var(--medium-background-size);
}
.topbar__desktop-menu .primary-navigation .link.link--wide:before {
    background-image: url("./smiling-bracket-yellow-wide.fdbe26cd.svg");
    background-size: var(--wide-background-size);
}
.topbar__desktop-menu .primary-navigation .link.link--wide:after {
    background-image: url("./smiling-bracket-wide.7f84b5b3.svg");
    background-size: var(--wide-background-size);
}

@keyframes clip-reveal {
    0% {
        -webkit-clip-path: circle(0% at calc(100% - 66px) 30px);
        clip-path: circle(0% at calc(100% - 66px) 30px);
    }
    100% {
        -webkit-clip-path: circle(100% at 50% 50%);
        clip-path: circle(100% at 50% 50%);
    }
}
.topbar__mobile-menu {
    --animation-duration-opening: 0.5s;
    --animation-duration-closing: 0.5s;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-top: var(--padding-y);
    padding-bottom: var(--padding-y);
    display: none;
    grid-template-columns: repeat(2, auto);
    grid-auto-rows: min-content;
    color: #ffffff;
    background-color: #34256c;
    will-change: clip-path;
}
.topbar__mobile-menu.topbar__mobile-menu--opening {
    display: grid;
    animation: var(--animation-duration-opening) clip-reveal;
}
.topbar__mobile-menu.topbar__mobile-menu--open {
    display: grid;
}
.topbar__mobile-menu.topbar__mobile-menu--closing {
    display: grid;
    animation: var(--animation-duration-closing) clip-reveal reverse;
}
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
    .topbar__mobile-menu {
        --animation-duration-opening: 0s;
        --animation-duration-closing: 0s;
    }
}

.topbar__mobile-menu .logo {
    transform: translateY(2px);
}

.topbar__mobile-menu .mobile-menu-button {
    justify-self: end;
    color: #dbd2ff;
    position: relative;
}

.topbar__mobile-menu .primary-navigation {
    grid-column: 1/-1;
    color: #faf9ff;
}

.topbar__mobile-menu .primary-navigation ul {
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.topbar__mobile-menu .primary-navigation a {
    height: var(--target-height);
    line-height: var(--target-height);
}

.topbar__mobile-menu .primary-navigation li:not(:last-child) a {
    margin-bottom: 6px;
}

.topbar__mobile-menu .secondary-navigation {
    grid-column: 1/-1;
    color: #dbd2ff;
}

.topbar__mobile-menu .secondary-navigation ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.topbar__mobile-menu .link a {
    --target-height: 48px;
    position: relative;
    display: inline-block;
    height: var(--target-height);
    width: 100%;
    line-height: var(--target-height);
    text-align: center;
    border-bottom: 1px solid #483390;
}

.topbar__mobile-menu .link:nth-child(odd) a:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 31px;
    border-right: 1px solid #483390;
}

.topbar__mobile-menu .link:is(:first-child, :nth-child(2)) a {
    border-top: 1px solid #483390;
}

.topbar__mobile-menu :is(.contact-button, .language-switch) {
    grid-column: 1/-1;
    justify-self: center;
    margin-top: 24px;
}

.topbar__mobile-menu .language-switch {
    background-image: url(./globe-icon-white.653712e7.svg);
}

.topbar .header-container {
    --radius: 32px;
    transition: transform 0.5s ease-in-out;
    background-color: white;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
}
@media (min-width: 640px) {
    .topbar .header-container {
        --radius: 40px;
    }
}
@media (min-width: 1024px) {
    .topbar .header-container {
        --radius: 60px;
    }
}
.topbar .header-container.header-container__mobile-menu--open {
    transform: none !important;
}

.container-burger {
    position: absolute;
    top: 1.6rem;
    right: 2rem;
}
.container-burger .menu-btn__line {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 1px;
    background-color: #483390;
}
.container-burger .menu-btn__line:nth-child(1) {
    top: 0;
}
.container-burger .menu-btn__line:nth-child(2) {
    top: 4px;
}
.container-burger .menu-btn__line:nth-child(3) {
    top: 8px;
}
.container-burger .menu-btn__line:nth-child(4) {
    top: 12px;
}
.container-burger.close {
    top: 1rem;
    right: 1rem;
}
.container-burger.close .menu-btn__line {
    background-color: #dbd2ff;
}
.container-burger.close .menu-btn__line:nth-child(1) {
    top: 5px;
    transform: rotate(-45deg);
}
.container-burger.close .menu-btn__line:nth-child(2) {
    top: 4px;
    transform: rotate(45deg);
}

.footer {
    --radius: 32px;
    color: #ffffff;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    background-color: #5b44b4;
    margin-top: -34px;
    position: relative;
    z-index: 0;
}
@media (min-width: 640px) {
    .footer {
        --radius: 40px;
        margin-top: -42px;
    }
}
@media (min-width: 1024px) {
    .footer {
        --radius: 60px;
        margin-top: -70px;
    }
}

.footer__wrapper {
    padding-top: 40px;
    padding-bottom: 22px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 26px;
    column-gap: 0;
}
@media (min-width: 640px) {
    .footer__wrapper {
        padding-top: 60px;
        grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    }
}
@media (min-width: 1024px) {
    .footer__wrapper {
        padding-top: 80px;
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--column-gap);
    }
}
@media (min-width: 1440px) {
    .footer__wrapper {
        padding-top: 96px;
    }
}

.footer__wrapper h3.en {
    margin-bottom: 24px;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9476ff;
}

.footer__wrapper a {
    color: inherit;
    text-decoration: none;
}
.footer__wrapper a:hover {
    -webkit-text-decoration: revert;
    text-decoration: revert;
}

.footer__wrapper li a {
    line-height: 42px;
}

.footer__logo {
    grid-column: 1/-1;
    width: 186px;
    height: auto;
    margin-bottom: 0;
}
@media (min-width: 640px) {
    .footer__logo {
        width: 200px;
    }
}
@media (min-width: 1024px) {
    .footer__logo {
        grid-column-end: span 3;
        width: min(220px, 100% - 12px);
    }
}
@media (min-width: 1440px) {
    .footer__logo {
        grid-column-end: span 5;
        width: 254px;
    }
}

@media (min-width: 1024px) {
    .footer__menu {
        grid-column-end: span 2;
    }
}

@media (min-width: 1024px) {
    .footer__contact {
        grid-column-end: span 2;
    }
}

.footer__newsletter {
    grid-column: 1/-1;
}
@media (min-width: 640px) {
    .footer__newsletter {
        grid-column: auto;
    }
}
@media (min-width: 1024px) {
    .footer__newsletter {
        grid-column-end: span 5;
    }
}
@media (min-width: 1440px) {
    .footer__newsletter {
        grid-column-end: span 3;
    }
}

.footer__newsletter h3.en {
    margin-bottom: 4px;
}

.footer__newsletter p {
    margin-bottom: 24px;
    color: #f8fbff;
    font-size: 13px;
    -webkit-hyphens: none;
    hyphens: none;
}

.footer__newsletter form {
    max-width: 100%;
    display: flex;
    font-size: 15px;
}

.footer__newsletter input[type=email] {
    flex-grow: 1;
    font-size: inherit;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.footer__newsletter .button {
    align-self: auto;
    min-width: min-content;
    margin: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.footer__info {
    grid-column: 1/-1;
    padding: 24px 0;
    margin-top: 48px;
    display: flex;
    align-items: center;
    font-size: 15px;
    border-top: 1px solid #7055d8;
}

.footer__info small {
    margin-right: auto;
    color: #b7a6ff;
}

.footer__info a {
    font-size: inherit;
}
.footer__info a:not(:last-of-type) {
    margin-right: 16px;
}

.footer__info a img {
    --size: 24px;
    width: var(--size);
    min-width: var(--size);
    height: var(--size);
    overflow: hidden;
}

.ninja-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 500;
    transition: background-color 1s ease-in-out;
    background-color: rgba(0, 0, 0, 0);
}

.ninja-container * {
    width: 100%;
    height: 100%;
}

.ninja-container.active {
    background-color: rgba(0, 0, 0, 0.8);
}