@font-face {
            font-family: 'Hanken Grotesk';
            src: url('/siteAssets/fonts/HankenGrotesk-Regular.woff2') format('woff2'),
                 url('/siteAssets/fonts/HankenGrotesk-Regular.woff') format('woff');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Hanken Grotesk';
            src: url('/siteAssets/fonts/HankenGrotesk-SemiBold.woff2') format('woff2'),
                 url('/siteAssets/fonts/HankenGrotesk-SemiBold.woff') format('woff');
            font-weight: 600;
            font-style: normal;
            font-display: swap;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .noise {
    pointer-events: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  opacity: 0.5;
  top: 0;
  left: 0;
  overflow: hidden;
  background-image: url("/siteAssets/noise.png");
  background-repeat: repeat;

  z-index: 1;
}

        
        /* Gradient animation*/

        :root {
        --color-bg1: #FFFFFF00;
        --color-bg2: #FFFFFF00;
        --color1: 171, 191, 255;
        --color2: 210, 173, 247;
        --color3: 211, 167, 218;
        --color4: 251, 172, 207;
        --color5: 182, 200, 244;
        --color-interactive: 255, 193, 220;
        --circle-size: 80%;
        --blending: hard-light;
        }

        @keyframes moveInCircle {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(180deg);
        }
        100% {
            transform: rotate(360deg);
        }
        }

        @keyframes moveVertical {
        0% {
            transform: translateY(-50%);
        }
        50% {
            transform: translateY(50%);
        }
        100% {
            transform: translateY(-50%);
        }
        }

        @keyframes moveHorizontal {
        0% {
            transform: translateX(-50%) translateY(-10%);
        }
        50% {
            transform: translateX(50%) translateY(10%);
        }
        100% {
            transform: translateX(-50%) translateY(-10%);
        }
        }

        .gradient-bg {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        overflow: hidden;
        background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
        z-index: 0;
        }

        .gradient-bg svg {
        position: fixed;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        }

        .gradients-container {
        filter: url(#goo) blur(40px);
        width: 100%;
        height: 100%;
        }

        .g1 {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2);
        left: calc(50% - var(--circle-size) / 2);
        transform-origin: center center;
        animation: moveVertical 30s ease infinite;
        opacity: 1;
        }

        .g2 {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2);
        left: calc(50% - var(--circle-size) / 2);
        transform-origin: calc(50% - 400px);
        animation: moveInCircle 20s reverse infinite;
        opacity: 1;
        }

        .g3 {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2 + 200px);
        left: calc(50% - var(--circle-size) / 2 - 500px);
        transform-origin: calc(50% + 400px);
        animation: moveInCircle 40s linear infinite;
        opacity: 1;
        }

        .g4 {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2);
        left: calc(50% - var(--circle-size) / 2);
        transform-origin: calc(50% - 200px);
        animation: moveHorizontal 40s ease infinite;
        opacity: 0.7;
        }

        .g5 {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: calc(var(--circle-size) * 2);
        height: calc(var(--circle-size) * 2);
        top: calc(50% - var(--circle-size));
        left: calc(50% - var(--circle-size));
        transform-origin: calc(50% - 800px) calc(50% + 200px);
        animation: moveInCircle 20s ease infinite;
        opacity: 1;
        }

        .interactive {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: 100%;
        height: 100%;
        top: -50%;
        left: -50%;
        opacity: 0.7;
        }

        /* ==================== GLOBAL STYLES ==================== */

        :root {
            --dark-matter: #171A24;
            --subtitle: #3F4449;
            --white: #FFFFFF;
            --core-signal: #2F46E4;
            --text: #64748B;
            --cloud-light: #F2F2F2;
            --rose: #FF57C0;
            --azure: #C2DAF7;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background-color: var(--cloud-light);
            color: var(--dark-matter);
            line-height: 1.5;
            overflow-x: hidden;
        }

        /* ==================== HERO SECTION ==================== */

        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .hero__bg-left,
        .hero__bg-right {
            position: absolute;
            z-index: 0;
            opacity: 0.6;
        }

        .hero__bg-left {
            left: 0;
            top: 0;
            height: 100%;
        }

        .hero__bg-right {
            right: 0;
            top: 0;
            height: 100%;
        }

        /* ==================== LANGUAGE SELECTION ==================== */

        .language-selection {
            position: relative;
            z-index: 2;
            width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 40px 20px;
        }

        .language-selection__logo {
            width: 100%;
            display: flex;
            justify-content: center;
            padding-top: 20px;
        }

        .language-selection__logo img {
            height: 82px;
            width: auto;
        }

        .language-selection__content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            max-width: 600px;
            width: 100%;
        }

        .language-selection__title {
            font-size: 2rem;
            font-weight: 600;
            color: var(--dark-matter);
            text-align: center;
            margin-bottom: 48px;
            line-height: 1.2;
        }

        .language-selection__grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            width: 100%;
            max-width: 500px;
        }

        /* ==================== LANGUAGE BUTTON ==================== */

        .language-btn {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 15px;
            background: #ffffff90;
            border: 2px solid transparent;
            border-radius: 999px;
            text-decoration: none;
            color: var(--dark-matter);
            font-size: 1rem;
            font-weight: 400;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .language-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
            border-color: var(--core-signal);
            background-color: #2F46E4;
            color: #ffffff;
        }

        .language-btn:active {
            transform: translateY(0);
        }

        .language-btn__flag {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }

        .language-btn__text {
            font-size: 1.25rem;
            font-weight: 400;
        }

        /* ==================== FOOTER ==================== */

        .language-selection__footer {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding-bottom: 20px;
        }

        .footer__text {
            font-size: 0.875rem;
            color: var(--text);
            text-align: center;
            margin: 0;
        }

        .footer__links {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .footer__link {
            font-size: 0.875rem;
            color: var(--text);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .footer__link:hover {
            color: var(--core-signal);
        }

        /* ==================== RESPONSIVE ==================== */

        @media (max-width: 768px) {
            .hero__bg-left,
            .hero__bg-right {
                display: none;
            }

            .language-selection {
                padding: 32px 20px;
            }

            .language-selection__logo img {
                width: 50%;
                height: auto;
            }

            .language-selection__title {
                font-size: 1.5rem;
                margin-bottom: 40px;
            }

            .language-selection__grid {
                grid-template-columns: 1fr;
                gap: 12px;
                max-width: 400px;
            }

            .language-btn {
                padding: 14px 20px;
            }

            .language-btn__flag {
                width: 28px;
                height: 28px;
            }

            .footer__links {
                gap: 16px;
            }
        }

        @media (max-width: 480px) {
            .language-selection__title {
                font-size: 1.6rem;
                margin-bottom: 32px;
                text-wrap: balance;
            }

            .language-selection__grid {
                max-width: 100%;
            }

            .footer__text,
            .footer__link {
                font-size: 0.8125rem;
            }
        }