{% extends "base.html" %}

{% block tabs %} {{ super() }}

<style>
    body.homepage-page {
        overflow-x: hidden;
        background: #fff6eb;
        --md-default-bg-color: hsl(33, 100%, 96%);
        --footer-wave-progress: 0;
        --footer-wave-offset-y: 0px;
    }

    body.homepage-page .md-typeset a {
        color: #252121;
    }

    body.homepage-page .md-content__inner {
        margin-bottom: 0;
        padding: 2.2rem 0;
    }

    body.homepage-page .md-content__inner:before {
        display: none;
    }

    body.homepage-page .md-header {
        position: initial;
    }

    body.homepage-page .md-main__inner {
        margin: 0;
    }

    body.homepage-page .md-main__inner > .md-content,
    body.homepage-page .md-main__inner > .md-sidebar--secondary {
        display: none;
    }

    @media screen and (min-width: 60em) {
        body.homepage-page .md-sidebar--secondary {
            display: none;
        }
    }

    @media screen and (min-width: 76.25em) {
        body.homepage-page .md-sidebar--primary {
            display: none;
        }
    }

    body.homepage-page .md-footer {
        display: none;
    }

    body.homepage-page .md-button {
        border-radius: 200px !important;
    }

    .homepage {
        background: #fff6eb;
    }

    .klack-button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-height: 2.75rem;
        padding: 1rem 1.25rem 1rem 3rem;
        background-color: rgb(45, 42, 38);
        color: #fff6eb !important;
        font-size: 1.125rem;
        font-weight: 700;
        border-radius: 1rem;
        text-decoration: none;
        box-shadow: 0 10px 15px -3px rgba(45, 42, 38, 0.25), 0 4px 6px -2px rgba(45, 42, 38, 0.05);
        transition: all 0.3s ease;
    }

    .klack-button:after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 1.5rem;
        box-shadow: 0 10px 15px -3px rgba(45, 42, 38, 0.25);
        display: none;
    }

    @media (min-width: 640px) {
        .klack-button:after {
            display: block;
        }
    }

    .klack-button .icon {
        text-emphasis: filled;
        position: absolute;
        left: 1.25rem;
        transform: translateX(0);
        opacity: 1;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .klack-button .text {
        transform: translateX(0);
        margin-right: -1rem;
        color: #fff6eb !important;
        transition: transform 0.3s ease;
    }

    .klack-button .arrow {
        display: flex;
        justify-content: center;
        transform: translateX(100%);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .klack-button:hover .icon {
        transform: translateX(-100%);
        opacity: 0;
    }

    .klack-button:hover .text {
        transform: translateX(-2rem);
    }

    .klack-button:hover .arrow {
        transform: translateX(0);
        opacity: 1;
    }

    .klack-button:focus {
        outline: none;
    }

    .tx-container,
    .podcast-section,
    .feature-grid,
    .social-icons-stack {
        position: relative;
        z-index: 3;
        transform: translate3d(0, calc(var(--footer-wave-offset-y, 0px) * -1), 0);
        will-change: transform;
    }

    .tx-container {
        z-index: 12;
        isolation: isolate;
    }

    body.homepage-page > input[data-md-toggle="search"]:checked ~ .md-header {
        position: relative !important;
        z-index: 1200 !important;
    }

    body.homepage-page > input[data-md-toggle="search"]:checked ~ .md-header .md-search__inner,
    body.homepage-page > input[data-md-toggle="search"]:checked ~ .md-header .md-search__overlay,
    body.homepage-page > input[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
        z-index: 1201 !important;
    }

    body.homepage-page > input[data-md-toggle="search"]:checked ~ .md-header .md-search__output {
        z-index: 1202 !important;
    }

    html[data-md-state~="search"] .tx-container,
    html[data-md-state~="search"] .podcast-section,
    html[data-md-state~="search"] .feature-grid,
    html[data-md-state~="search"] .social-icons-stack,
    body[data-md-state~="search"] .tx-container,
    body[data-md-state~="search"] .podcast-section,
    body[data-md-state~="search"] .feature-grid,
    body[data-md-state~="search"] .social-icons-stack,
    body.homepage-page > input[data-md-toggle="search"]:checked ~ .md-container .tx-container,
    body.homepage-page > input[data-md-toggle="search"]:checked ~ .md-container .podcast-section,
    body.homepage-page > input[data-md-toggle="search"]:checked ~ .md-container .feature-grid,
    body.homepage-page > input[data-md-toggle="search"]:checked ~ .md-container .social-icons-stack {
        z-index: 1 !important;
    }

    .tx-landing {
        display: flex;
        align-items: center;
        gap: clamp(1.6rem, 3.2vw, 4rem);
        padding: 2rem 1rem;
    }

    @media (max-width: 1023px) {
        .tx-landing {
            flex-direction: column;
            align-items: center;
        }

        .tx-landing__image,
        .tx-landing__content {
            width: 100%;
            max-width: 1000px;
            text-align: center;
        }

        .tx-landing__image {
            margin-top: 0;
            margin-bottom: 20px;
        }
    }

    .tx-landing__content {
        text-align: left;
        max-width: 80%;
        margin: 0 auto;
    }

    .title-klack-style marker {
        font-weight: 300;
        font-style: italic;
        letter-spacing: -0.025em;
        color: #252121;
    }

    @media (min-width: 640px) {
        .title-klack-style {
            font-size: 5.5rem;
        }
    }

    .title-klack-style mark {
        background: transparent;
        font-weight: 800;
        color: #252121;
        letter-spacing: -0.025em;
        box-shadow: inset 0 -0.5em 0 #ff878d;
    }

    .tx-landing__image {
        margin-top: 45px;
        position: relative;
        z-index: 13;
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }

    .tx-landing__image lottie-player {
        aspect-ratio: 1.66;
        width: 100%;
        margin: auto;
    }

    @media (max-width: 959px) {
        .tx-landing__image {
            margin-bottom: 10px;
            justify-content: center;
        }
    }

    .star-rating {
        display: flex;
        align-items: center;
        justify-content: left;
        cursor: grab;
        margin-top: 0.5rem;
        width: fit-content;
        text-decoration: none;
    }

    .star-rating .left-svg,
    .star-rating .right-svg,
    .star-rating .star-icon {
        width: 38px;
        height: 38px;
        fill: #d1d5db;
        transition: fill 0.3s ease, transform 0.3s ease;
    }

    .star-rating .star-icon {
        width: 24px;
        height: 24px;
        margin-right: 0.2rem;
    }

    .star-rating:hover .left-svg,
    .star-rating:hover .right-svg,
    .star-rating:hover .star-icon {
        fill: #6b7280;
    }

    .star-rating:hover .left-svg {
        transform: translateX(-4px) scale(1.05);
    }

    .star-rating:hover .right-svg {
        transform: translateX(4px) scale(1.05);
    }

    .star-rating:hover .star-icon {
        transform: scale(1.1);
    }

    .star-content {
        display: flex;
        align-items: center;
    }

    .star-text {
        font-size: 18px;
        font-weight: bold;
        color: #9ca3af;
        transition: color 0.3s ease;
    }

    .star-text .number {
        color: #6b7280;
    }

    .star-rating:hover .star-text {
        color: #4b5563;
    }

    .star-rating:hover .star-text .number {
        color: #374151;
    }

    .joss-link {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: left;
        text-decoration: none;
        width: fit-content;
        outline: none;
        transition: all 0.3s ease;
        margin-top: 0.75rem;
    }

    .joss-top-text {
        font-size: 14px;
        font-weight: 700;
        color: #78716c;
        margin-bottom: 5px;
        transition: color 0.3s ease;
    }

    .joss-link:hover .joss-top-text {
        color: #44403c;
    }

    .joss-content {
        position: relative;
        width: 100px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .joss-svg {
        position: absolute;
        left: 0;
        width: 28px;
        height: 28px;
        fill: #78716c;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .joss-text {
        position: absolute;
        left: 36px;
        font-size: 14px;
        font-weight: 700;
        color: #6b7280;
        transition: left 0.3s ease, transform 0.3s ease;
    }

    .joss-link:hover .joss-svg {
        transform: translateX(100%);
        opacity: 0;
    }

    .joss-link:hover .joss-text {
        left: 50%;
        transform: translateX(-50%);
    }

    .podcast-section {
        margin: 0.5rem auto 3rem;
        max-width: 1100px;
        text-align: center;
        --podcast-rose: #dea2c2;
        --podcast-rose-strong: #bf789f;
        --podcast-rose-soft: #f4e4ec;
        --podcast-cream: #fffaf6;
        --podcast-shadow: rgba(96, 52, 72, 0.08);
    }

    .podcast-heading {
        font-size: clamp(1.75rem, 2.8vw, 2.5rem);
        margin-bottom: 0.35rem;
        color: #252121;
    }

    .podcast-heading__plain {
        font-weight: 300;
    }

    .podcast-subtitle {
        color: rgba(76, 60, 67, 0.8);
        margin-bottom: 1.25rem;
        font-weight: 500;
    }

    .podcast-inline {
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 0.65rem;
        flex-wrap: wrap;
    }

    .podcast-bubbles {
        display: flex;
        gap: 0.65rem;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
        padding: 0.3rem;
        border-radius: 999px;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .podcast-item {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        position: relative;
    }

    .podcast-spotlight {
        display: none;
        align-items: center;
        gap: 0.6rem;
        padding: 0.35rem 0.5rem 0.35rem 0.35rem;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(255, 252, 249, 0.98), rgba(250, 242, 246, 0.98));
        box-shadow: 0 10px 22px var(--podcast-shadow);
        border: 1px solid rgba(222, 162, 194, 0.32);
        position: relative;
        overflow: hidden;
        min-width: 360px;
    }

    .podcast-item.active .podcast-spotlight {
        display: inline-flex;
        animation: slide-in 0.45s ease;
    }

    .podcast-spotlight::after {
        content: '';
        position: absolute;
        inset: 2px;
        border-radius: inherit;
        border: 1px solid rgba(255, 255, 255, 0.55);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
        pointer-events: none;
    }

    .podcast-flag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.65rem;
        height: 2.65rem;
        font-size: 1.45rem;
        border-radius: 999px;
        background: var(--podcast-cream);
        border: 1px solid rgba(222, 162, 194, 0.28);
        box-shadow: 0 4px 12px rgba(96, 52, 72, 0.05);
        filter: none;
        flex-shrink: 0;
    }

    .podcast-controls {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.15rem 0.2rem 0.15rem 0.05rem;
        border-radius: 999px;
        background: transparent;
        border: none;
        box-shadow: none;
        position: relative;
        z-index: 1;
    }

    .podcast-audio {
        max-width: 266px;
        min-width: 226px;
        height: 36px;
        accent-color: var(--podcast-rose-strong);
        border-radius: 999px;
        background: transparent;
        filter: saturate(0.96);
    }

    .podcast-audio::-webkit-media-controls-panel {
        background: transparent;
    }

    .podcast-audio.playing::-webkit-media-controls-play-button {
        filter: drop-shadow(0 0 0.35rem rgba(0, 0, 0, 0.25));
    }

    .podcast-bubble {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        border: 1px solid rgba(222, 162, 194, 0.26);
        background: linear-gradient(180deg, rgba(255, 253, 251, 0.98), rgba(246, 236, 241, 0.96));
        box-shadow: 0 6px 16px rgba(96, 52, 72, 0.06);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, width 0.25s ease, height 0.25s ease;
        opacity: 0.95;
        position: relative;
    }

    .podcast-bubble::after {
        content: '';
        position: absolute;
        inset: 4px;
        border-radius: inherit;
        border: 1px solid rgba(255, 255, 255, 0.72);
        opacity: 1;
        pointer-events: none;
    }

    .podcast-bubble:hover {
        transform: translateY(-1px);
        border-color: rgba(191, 120, 159, 0.42);
        box-shadow: 0 10px 20px rgba(96, 52, 72, 0.08);
    }

    .podcast-bubble .bubble-flag {
        font-size: 1.28rem;
        filter: none;
        pointer-events: none;
    }

    .podcast-item.active .podcast-bubble {
        transform: scale(0.85);
        box-shadow: 0 18px 35px rgba(96, 52, 72, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

    .podcast-bubble:focus-visible {
        outline: 2px solid var(--podcast-rose-strong);
        outline-offset: 3px;
    }

    .podcast-bubbles.intro .podcast-bubble {
        animation: bubble-slide 0.9s ease forwards;
    }

    .podcast-bubbles.intro .podcast-item.active .podcast-bubble {
        animation: bubble-expand 0.9s ease forwards;
    }

    @media (max-width: 860px) {
        .podcast-inline {
            flex-direction: column;
            align-items: center;
        }

        .podcast-bubbles {
            width: 100%;
            padding: 0.8rem;
        }

        .podcast-item {
            width: 100%;
            justify-content: center;
        }

        .podcast-spotlight {
            justify-content: center;
            width: min(100%, 390px);
            min-width: 0;
        }

        .podcast-controls {
            justify-content: center;
            width: 100%;
        }

        .podcast-audio {
            width: 100%;
            min-width: 0;
        }
    }

    .feature-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        padding: 20px;
        max-width: 1024px;
        margin: 0 auto 1rem;
    }

    .grid-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 20px;
        width: 247px;
        border-radius: 8px;
    }

    .grid-icon {
        width: 3.5rem;
        height: 3.5rem;
        margin-bottom: 1.25rem;
        color: #252121;
        transition: transform 0.3s ease;
    }

    .grid-icon--dependency,
    .grid-icon--transform,
    .grid-icon--adaptation,
    .grid-icon--preprocessors,
    .grid-icon--pipeline,
    .grid-icon--api,
    .grid-icon--community,
    .grid-icon--cython {
        fill: #252121;
    }

    .grid-item h2 {
        font-size: 1.475rem;
        font-weight: bold;
        color: #333;
        line-height: 1.2;
    }

    .grid-item:hover .grid-icon--dependency {
        transform: translateY(-4px);
    }

    .grid-item:hover .grid-icon--transform {
        transform: scale(1.04);
    }

    .grid-item:hover .grid-icon--adaptation {
        transform: translateY(-2px) scale(1.04);
    }

    .grid-item:hover .grid-icon--preprocessors {
        transform: translateY(-3px);
    }

    .grid-item:hover .grid-icon--pipeline {
        transform: translateY(-3px);
    }

    .grid-item:hover .grid-icon--pipeline .grid-icon__dot--center {
        transform: scale(0.9);
    }

    .grid-item:hover .grid-icon--pipeline .grid-icon__dot--top-left {
        transform: translate(4px, 5px);
    }

    .grid-item:hover .grid-icon--pipeline .grid-icon__dot--top-right {
        transform: translate(-5px, 5px);
    }

    .grid-item:hover .grid-icon--pipeline .grid-icon__dot--bottom-right {
        transform: translate(-5px, -5px);
    }

    .grid-item:hover .grid-icon--pipeline .grid-icon__dot--bottom-left {
        transform: translate(4px, -5px);
    }

    .grid-item:hover .grid-icon--api {
        transform: scale(1.12);
    }

    .grid-item:hover .grid-icon--community {
        transform: translateY(-2px) rotate(6deg);
    }

    .grid-item:hover .grid-icon--cython {
        transform: translateY(-2px) rotate(6deg);
    }

    .grid-icon--transform {
        overflow: visible;
    }

    .grid-icon--transform .grid-icon__ring {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
        transform-box: fill-box;
        transform-origin: center;
    }

    .grid-icon--transform .grid-icon__ring--left {
        transform: translate(-3.3px, -1.3px);
    }

    .grid-icon--transform .grid-icon__ring--right {
        transform: translate(3.3px, -1.3px);
    }

    .grid-icon--transform .grid-icon__ring--bottom {
        transform: translate(0, 3.3px);
    }

    .grid-item:hover .grid-icon--transform .grid-icon__ring {
        transform: translate(0, 0);
        opacity: 0.96;
    }

    .grid-icon__dot,
    .grid-icon__spark,
    .grid-icon__ghost {
        transition: transform 0.6s ease, opacity 0.3s ease;
        transform-origin: center;
    }

    .grid-icon__brain-dot {
        fill: #f8dbe8;
        opacity: 0;
        transform: scale(0.4);
        transform-box: fill-box;
        transform-origin: center;
        filter: drop-shadow(0 0 3px rgba(222, 162, 194, 0.7));
    }

    .grid-item:hover .grid-icon--dependency .grid-icon__spark {
        transform: rotate(360deg);
    }

    .grid-item:hover .grid-icon--adaptation .grid-icon__brain-dot {
        animation: brain-dot-flicker 3s ease-in-out infinite;
    }

    .grid-item:hover .grid-icon--adaptation .grid-icon__brain-dot--1 {
        animation-delay: 0s;
    }

    .grid-item:hover .grid-icon--adaptation .grid-icon__brain-dot--2 {
        animation-delay: 0.35s;
    }

    .grid-item:hover .grid-icon--adaptation .grid-icon__brain-dot--3 {
        animation-delay: 0.85s;
    }

    .grid-item:hover .grid-icon--adaptation .grid-icon__brain-dot--4 {
        animation-delay: 1.3s;
    }

    .grid-item:hover .grid-icon--adaptation .grid-icon__brain-dot--5 {
        animation-delay: 1.85s;
    }

    .grid-item:hover .grid-icon--adaptation .grid-icon__brain-dot--6 {
        animation-delay: 2.35s;
    }

    .grid-item:hover .grid-icon--cython .grid-icon__ghost {
        transform: translateX(4px);
        opacity: 0.6;
    }

    @keyframes brain-dot-flicker {
        0%, 18%, 100% {
            opacity: 0;
            transform: scale(0.35);
        }

        24%, 46% {
            opacity: 1;
            transform: scale(1);
        }

        58% {
            opacity: 0.3;
            transform: scale(0.72);
        }
    }

    @media (max-width: 768px) {
        .feature-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 480px) {
        .feature-grid {
            grid-template-columns: 1fr;
        }
    }

    .social-icons-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: fit-content;
        margin: clamp(1.25rem, 4vh, 2rem) auto clamp(4.5rem, 11vh, 7rem);
        position: relative;
        z-index: 4;
    }

    .social-icons-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        width: fit-content;
        margin: 0 auto;
    }

    .social-scroll-hint {
        margin: 0.65rem 0 0;
        color: rgba(67, 20, 7, 0.38);
        font-size: 0.74rem;
        line-height: 1rem;
        font-weight: 700;
        letter-spacing: 0;
        user-select: none;
        white-space: nowrap;
        opacity: 0.9;
        transition: color 0.28s ease, opacity 0.28s ease;
    }

    .social-icons-stack:hover .social-scroll-hint,
    .social-icons-stack:focus-within .social-scroll-hint {
        color: rgba(191, 120, 159, 0.9);
        opacity: 1;
    }

    .social-icon-link {
        display: inline-flex;
        align-items: center;
        outline: none;
        transition: all 0.3s;
        background-color: rgba(45, 42, 38, 0.05);
        padding: 0.5rem;
        border-radius: 0.40rem;
        color: #78716c;
    }

    .social-icon-link:hover {
        color: #44403c;
    }

    .social-icon-link:focus {
        box-shadow: 0 0 0 2px #bf789f;
    }

    .social-icon-bottom {
        width: 24px;
        height: 24px;
        transition: all 0.3s ease-out;
    }

    .footer {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 2rem 3.25rem;
        margin-top: 0;
        min-height: clamp(12rem, 24vw, 19rem);
        width: 100%;
        box-sizing: border-box;
    }

    @media (min-width: 640px) {
        .footer {
            min-height: clamp(13rem, 22vw, 20rem);
            padding-bottom: clamp(5rem, 8vw, 7rem);
        }
    }

    .footer-beyond-overlay {
        position: fixed;
        left: 0;
        right: 0;
        width: 100vw;
        margin-left: 0;
        bottom: 0;
        display: flex;
        align-items: flex-end;
        height: 175px;
        pointer-events: none;
        overflow: hidden;
        transform-origin: bottom center;
        transform: scaleY(0);
        will-change: transform;
        opacity: 0.95;
        z-index: 2;
    }

    .footer-beyond-svg {
        width: 100%;
        height: 100%;
    }

    html.is-safari .footer-beyond-svg g[filter] {
        filter: none !important;
    }

    @media (min-width: 600px) {
        .footer-beyond-overlay {
            height: 240px;
        }
    }

    @media (min-width: 1000px) {
        .footer-beyond-overlay {
            height: 46vh;
        }
    }

    .footer-text {
        position: absolute;
        bottom: clamp(1rem, 4vh, 3.75rem);
        left: 50%;
        margin-bottom: 0;
        transform: translateX(-50%) translateY(calc(var(--footer-wave-offset-y, 0px) * -1));
        pointer-events: none;
        user-select: none;
        overflow: hidden;
        white-space: nowrap;
        background: linear-gradient(to bottom, rgba(45, 42, 38, 0.1) 25%, rgba(45, 42, 38, 0));
        -webkit-background-clip: text;
        background-clip: text;
        font-size: 4rem;
        font-weight: 900;
        line-height: 1;
        color: transparent;
        display: none;
        z-index: 3;
    }

    @media (min-width: 640px) {
        .footer-text {
            display: block;
        }
    }

    @media (min-width: 768px) {
        .footer-text {
            font-size: 8.5rem;
        }
    }

    @media (min-width: 1024px) {
        .footer-text {
            font-size: 10.25rem;
        }
    }

    @keyframes bubble-slide {
        0% {
            opacity: 0;
            transform: translateY(-24px) scale(0.9);
        }
        100% {
            opacity: 0.95;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes bubble-expand {
        0% {
            opacity: 0;
            transform: translateY(-24px) scale(0.9);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1.12);
        }
    }

    @keyframes slide-in {
        0% {
            opacity: 0;
            transform: translateX(-12px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
</style>
<script>
    document.body.classList.add("homepage-page");
    document.body.style.setProperty("--footer-wave-progress", "0");
    document.body.style.setProperty("--footer-wave-offset-y", "0px");
</script>

<div class="homepage" data-homepage-root>

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<section class="tx-container">
    <div class="md-grid md-typeset">
        <div class="tx-landing">
            <div class="tx-landing__content">
                <h1 class="title-klack-style">
                    <mark>Scikit-Longitudinal</mark>
                    <br/>
                    <marker> efficient & open-source</marker>
                    <br/>
                    <marker>Longitudinal ML</marker>
                </h1>
                <a class="klack-button group" href="getting-started/" aria-label="Get Started">
                    <div class="icon">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
                        </svg>
                    </div>
                    <div class="text">Get Started</div>
                    <div class="arrow">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="34" height="34" fill="none" stroke="currentColor" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"/>
                        </svg>
                    </div>
                </a>
                <a class="star-rating" href="https://github.com/simonprovost/scikit-longitudinal/stargazers" aria-label="GitHub stars">
                    <svg class="left-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" aria-hidden="true">
                        <path d="M16.247 24.571c-.68-.058-1.523.13-2.098.48-.246.142-.28.364-.07.552.527.48 1.336.843 2.027.89.715.094 1.57-.129 2.145-.562.188-.13.2-.328.023-.492-.515-.48-1.324-.82-2.027-.868Zm2.461-3.96c-.375.574-.586 1.417-.562 2.097.046.715.375 1.535.832 2.04.152.175.34.175.492-.013.457-.539.703-1.394.633-2.12-.047-.68-.387-1.489-.856-2.028-.176-.21-.387-.2-.539.023Zm-5.765.785c-.645-.235-1.524-.258-2.18-.059-.258.082-.328.281-.188.516.387.597 1.078 1.148 1.723 1.382.656.27 1.547.27 2.215-.011.223-.082.281-.258.152-.469-.375-.598-1.066-1.137-1.722-1.36Zm3.374-3.188c-.503.457-.937 1.207-1.066 1.875-.152.703-.047 1.582.27 2.18.093.222.28.258.48.117.563-.41 1.02-1.172 1.137-1.898.14-.668.023-1.547-.293-2.18-.106-.258-.328-.293-.527-.094ZM8.01 16.86c.094.68.504 1.477 1.008 1.97.492.515 1.3.866 2.027.89.234.012.363-.14.328-.375-.117-.715-.527-1.477-1.031-1.934-.504-.48-1.277-.855-1.957-.937-.281-.035-.422.117-.375.386Zm6.715-1.007a3.872 3.872 0 0 0-1.735 1.289c-.421.55-.668 1.383-.644 2.11.023.222.176.339.41.304.703-.164 1.441-.668 1.816-1.278.387-.597.645-1.43.598-2.12 0-.282-.176-.4-.445-.305Zm-1.957-2.742c-.551.445-1.008 1.195-1.149 1.886-.035.211.082.375.305.387.726.023 1.559-.293 2.086-.762.527-.457.996-1.219 1.148-1.898.036-.258-.105-.434-.363-.422-.703.059-1.512.363-2.027.809ZM8.02 11.575a3.69 3.69 0 0 0 .492 2.157c.351.632 1.043 1.183 1.723 1.37.21.071.398-.046.421-.28.07-.669-.129-1.524-.504-2.133-.375-.586-1.043-1.149-1.664-1.395-.246-.105-.445 0-.468.281Zm5.39-2.402c-.668.234-1.36.762-1.734 1.371-.129.188-.059.387.152.48.668.27 1.547.27 2.215 0 .68-.257 1.383-.82 1.723-1.417.14-.211.07-.41-.188-.493-.668-.187-1.535-.175-2.168.059Zm-3.937-3.07c-.305.644-.422 1.511-.293 2.191.129.715.586 1.465 1.172 1.887.175.14.363.082.48-.13.305-.608.41-1.476.258-2.167-.14-.68-.586-1.43-1.078-1.899-.188-.164-.41-.117-.54.118Zm6.058-.305c-.691.129-1.453.574-1.886 1.113-.141.164-.106.364.082.492.62.364 1.5.48 2.191.293.691-.152 1.453-.609 1.898-1.125.176-.21.13-.421-.117-.527a3.795 3.795 0 0 0-2.168-.246Zm-3.457-3.61c-.398.598-.632 1.454-.586 2.133.012.715.364 1.524.88 2.04.175.164.374.14.503-.047.387-.598.621-1.454.563-2.133-.047-.668-.364-1.465-.809-2.016-.187-.21-.398-.187-.55.024Zm6.047-1.183c-.68.105-1.453.516-1.945.996s-.88 1.29-.961 1.969c-.023.234.105.375.34.363.715-.035 1.511-.41 2.004-.96.468-.493.855-1.278.96-1.981.024-.27-.117-.422-.398-.387Z"/>
                    </svg>
                    <div class="star-content">
                        <svg class="star-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                        </svg>
                        <span class="star-text"><span class="number">70+</span> Stars</span>
                    </div>
                    <svg class="right-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" aria-hidden="true">
                        <path d="M11.867 24.571c-.703.047-1.511.387-2.027.868-.176.164-.164.363.023.492.575.433 1.43.656 2.145.562.68-.047 1.488-.41 2.027-.89.211-.188.176-.41-.07-.551-.574-.352-1.418-.54-2.098-.48Zm-2.46-3.96c-.153-.223-.364-.235-.54-.024-.468.54-.808 1.348-.855 2.027-.07.727.176 1.582.633 2.121.152.188.34.188.492.012.457-.504.785-1.324.82-2.039.035-.68-.187-1.523-.55-2.098Zm5.765.785c-.656.222-1.348.761-1.723 1.359-.129.21-.07.387.153.469.668.281 1.558.281 2.215.011.644-.234 1.335-.785 1.722-1.382.14-.235.07-.434-.187-.516-.657-.2-1.535-.176-2.18.059Zm-3.375-3.188c-.21-.2-.422-.164-.527.094-.317.633-.434 1.512-.305 2.18.129.726.586 1.488 1.148 1.898.188.140.387.105.48-.117.317-.598.411-1.477.27-2.18-.14-.668-.562-1.418-1.066-1.875Zm8.309-1.348c.046-.27-.094-.421-.375-.386-.68.082-1.454.457-1.957.937-.504.457-.915 1.219-1.032 1.934-.035.234.094.387.328.375.727-.024 1.536-.375 2.028-.89.504-.493.914-1.29 1.008-1.97Zm-6.727-1.007c-.258-.094-.434.023-.434.304-.046.692.2 1.524.598 2.121.375.61 1.113 1.114 1.817 1.278.222.035.386-.082.398-.305.035-.727-.223-1.559-.633-2.11a3.843 3.843 0 0 0-1.746-1.288Zm1.957-2.742c-.504-.446-1.312-.75-2.016-.81-.27-.01-.398.165-.363.423.152.68.61 1.441 1.149 1.898.515.469 1.359.785 2.086.762.21-.012.34-.176.304-.387a3.44 3.44 0 0 0-1.16-1.886Zm4.758-1.536c-.035-.28-.223-.386-.469-.28-.633.245-1.3.808-1.664 1.394-.375.609-.586 1.464-.504 2.132.024.235.2.352.422.282.68-.188 1.371-.739 1.723-1.371a3.69 3.69 0 0 0 .492-2.157Zm-5.39-2.402c-.634-.234-1.5-.246-2.169-.059-.258.082-.328.282-.199.493.352.597 1.043 1.16 1.734 1.418.657.27 1.547.27 2.215 0 .211-.094.27-.293.153-.480-.375-.61-1.067-1.138-1.735-1.372Zm3.925-3.07c-.117-.235-.34-.282-.539-.118-.48.47-.926 1.22-1.066 1.899-.153.691-.059 1.559.257 2.168.106.21.305.27.48.129.575-.422 1.032-1.172 1.161-1.887.14-.68.023-1.547-.293-2.191Zm-6.059-.305c-.68-.14-1.535-.035-2.156.246-.246.106-.304.316-.129.527.457.516 1.22.973 1.899 1.125.703.188 1.582.07 2.191-.293.2-.128.235-.328.094-.492a3.425 3.425 0 0 0-1.899-1.113Zm3.47-3.61c-.153-.21-.376-.234-.552-.023-.445.55-.773 1.348-.808 2.016-.07.68.164 1.535.562 2.133.13.187.328.21.504.046.516-.515.867-1.324.88-2.039.046-.68-.188-1.535-.587-2.132ZM9.991 1.006c-.28-.035-.422.117-.398.387.105.703.492 1.488.96 1.98.493.551 1.29.926 2.005.961.234.012.363-.129.34-.363-.082-.680-.47-1.488-.973-1.969-.48-.48-1.254-.89-1.934-.996Z"/>
                    </svg>
                </a>

                <a class="joss-link" href="https://doi.org/10.21105/joss.08481" target="_blank" aria-label="Published At JOSS">
                    <p class="joss-top-text">Published at</p>
                    <div class="joss-content">
                        <svg class="joss-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" aria-hidden="true">
                            <path d="M20.523 4.078h1.336c.516 0 .774.281.774.879v17.86c0 .703-.106.96-.774 1.253-2.332 1.02-5.613 1.676-8.707 1.676-1.804 0-3.539-.117-5.332-.422v.153c4.957.07 9.692-1.325 11.848-2.977.832-.633 1.078-1.055 1.078-2.086V1.723C20.746.563 20.16 0 19.13 0c-.352 0-.774.082-1.277.246-3.54 1.16-6.774 1.899-10.922 1.899h-.938C4.727 2.145 4 2.883 4 4.03v20.11c0 .914.2 1.465 1.066 1.886 2.004.867 5.004 1.442 8.086 1.442 3.282 0 6.973-.492 9.621-1.782 1.407-.668 1.747-1.289 1.747-2.742V4.957c0-1.898-.844-2.766-2.672-2.766h-1.325v1.887ZM5.887 23.262V4.535c0-.328.176-.527.48-.527h.645c4.101 0 7.933-.82 11.203-1.852.398-.129.644-.023.644.34v17.508c0 .633-.082.89-.68 1.277-2.437 1.63-6.386 2.637-11.882 2.403-.293-.012-.41-.141-.41-.422Zm2.39-16.16v3.843c0 .188.13.27.282.27 2.754 0 5.543-.492 7.652-1.336a.281.281 0 0 0 .164-.258V5.613a.27.27 0 0 0-.375-.27 24.049 24.049 0 0 1-7.441 1.454.298.298 0 0 0-.282.305Z"></path>
                        </svg>
                        <span class="joss-text">JOSS</span>
                    </div>
                </a>
            </div>
            <div class="tx-landing__image">
                <lottie-player
                        src="https://lottie.host/8155a38e-8a4c-4093-ab71-04f7fd3e9aa5/td6iCnaJib.json"
                        speed="1"
                        mode="normal"
                        style="width: 100%; margin: auto"
                        direction="1" mode="bounce"
                        loop autoplay></lottie-player>
            </div>
        </div>
    </div>
</section>

<div class="podcast-section">
    <h2 class="podcast-heading title-klack-style"><mark>SKLONG</mark> <span class="podcast-heading__plain">Podcast</span> <mark>Explained</mark></h2>
    <p class="podcast-subtitle">Generated with NotebookLM</p>

    <div class="podcast-inline">
        <div class="bubble-bar podcast-bubbles intro" role="list">
            <div class="podcast-item active" data-language="English" data-flag="🇬🇧">
                <button class="podcast-bubble" type="button" aria-label="English">
                    <span class="bubble-flag" aria-hidden="true">🇬🇧</span>
                </button>
                <div class="podcast-spotlight" aria-live="polite">
                    <span class="podcast-flag" aria-hidden="true">🇬🇧</span>
                    <div class="podcast-controls">
                        <audio class="podcast-audio" controls aria-label="Sklong Podcast English">
                            <source src="assets/audio/sklong_en.wav" type="audio/wav">
                            Your browser does not support the audio element.
                        </audio>
                    </div>
                </div>
            </div>

            <div class="podcast-item" data-language="Français" data-flag="🇫🇷">
                <button class="podcast-bubble" type="button" aria-label="Français">
                    <span class="bubble-flag" aria-hidden="true">🇫🇷</span>
                </button>
                <div class="podcast-spotlight" aria-live="polite">
                    <span class="podcast-flag" aria-hidden="true">🇫🇷</span>
                    <div class="podcast-controls">
                        <audio class="podcast-audio" controls aria-label="Sklong Podcast Français">
                            <source src="assets/audio/sklong_fr.wav" type="audio/wav">
                            Your browser does not support the audio element.
                        </audio>
                    </div>
                </div>
            </div>

            <div class="podcast-item" data-language="Español" data-flag="🇪🇸">
                <button class="podcast-bubble" type="button" aria-label="Español">
                    <span class="bubble-flag" aria-hidden="true">🇪🇸</span>
                </button>
                <div class="podcast-spotlight" aria-live="polite">
                    <span class="podcast-flag" aria-hidden="true">🇪🇸</span>
                    <div class="podcast-controls">
                        <audio class="podcast-audio" controls aria-label="Sklong Podcast Español">
                            <source src="assets/audio/sklong_sp.wav" type="audio/wav">
                            Your browser does not support the audio element.
                        </audio>
                    </div>
                </div>
            </div>

            <div class="podcast-item" data-language="繁體中文" data-flag="🇨🇳">
                <button class="podcast-bubble" type="button" aria-label="繁體中文">
                    <span class="bubble-flag" aria-hidden="true">🇨🇳</span>
                </button>
                <div class="podcast-spotlight" aria-live="polite">
                    <span class="podcast-flag" aria-hidden="true">🇨🇳</span>
                    <div class="podcast-controls">
                        <audio class="podcast-audio" controls aria-label="Sklong Podcast Traditional Chinese">
                            <source src="assets/audio/sklong_chtrad.wav" type="audio/wav">
                            Your browser does not support the audio element.
                        </audio>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="feature-grid">
    <div class="grid-item">
        <svg class="grid-icon grid-icon--dependency" viewBox="0 0 29 28" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M21 8C19.5 8 18.7 9.4 19.1 10.5L15.5 14.1C15.2 14 14.8 14 14.5 14.1L11.9 11.5C12.3 10.4 11.5 9 10 9C8.6 9 7.7 10.4 8.1 11.5L3.5 16C2.4 15.7 1 16.5 1 18C1 19.1 1.9 20 3 20C4.4 20 5.3 18.6 4.9 17.5L9.4 12.9C9.7 13 10.1 13 10.4 12.9L13 15.5C12.7 16.5 13.5 18 15 18C16.5 18 17.3 16.6 16.9 15.5L20.5 11.9C21.6 12.2 23 11.4 23 10C23 8.9 22.1 8 21 8"/>
            <path class="grid-icon__spark" d="M15 9L15.9 6.9L18 6L15.9 5.1L15 3L14.1 5.1L12 6L14.1 6.9L15 9"/>
            <path class="grid-icon__spark" d="M3.5 11L4 9L6 8.5L4 8L3.5 6L3 8L1 8.5L3 9L3.5 11"/>
        </svg>
        <h2>Temporal Dependency<br/>Matter</h2>
    </div>
    <div class="grid-item">
        <svg class="grid-icon grid-icon--transform" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <circle class="grid-icon__ring grid-icon__ring--left" cx="14" cy="14" r="5.25"/>
            <circle class="grid-icon__ring grid-icon__ring--right" cx="14" cy="14" r="5.25"/>
            <circle class="grid-icon__ring grid-icon__ring--bottom" cx="14" cy="14" r="5.25"/>
        </svg>
        <h2>Data Transformation</h2>
    </div>
    <div class="grid-item">
        <svg class="grid-icon grid-icon--adaptation" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <defs>
                <clipPath id="grid-brain-clip-home">
                    <path d="M21.33,12.91C21.42,14.46 20.71,15.95 19.44,16.86L20.21,18.35C20.44,18.8 20.47,19.33 20.27,19.8C20.08,20.27 19.69,20.64 19.21,20.8L18.42,21.05C18.25,21.11 18.06,21.14 17.88,21.14C17.37,21.14 16.89,20.91 16.56,20.5L14.44,18C13.55,17.85 12.71,17.47 12,16.9C11.5,17.05 11,17.13 10.5,17.13C9.62,17.13 8.74,16.86 8,16.34C7.47,16.5 6.93,16.57 6.38,16.56C5.59,16.57 4.81,16.41 4.08,16.11C2.65,15.47 1.7,14.07 1.65,12.5C1.57,11.78 1.69,11.05 2,10.39C1.71,9.64 1.68,8.82 1.93,8.06C2.3,7.11 3,6.32 3.87,5.82C4.45,4.13 6.08,3 7.87,3.12C9.47,1.62 11.92,1.46 13.7,2.75C14.12,2.64 14.56,2.58 15,2.58C16.36,2.55 17.65,3.15 18.5,4.22C20.54,4.75 22,6.57 22.08,8.69C22.13,9.8 21.83,10.89 21.22,11.82C21.29,12.18 21.33,12.54 21.33,12.91M16.33,11.5C16.9,11.57 17.35,12 17.35,12.57A1,1 0 0,1 16.35,13.57H15.72C15.4,14.47 14.84,15.26 14.1,15.86C14.35,15.95 14.61,16 14.87,16.07C20,16 19.4,12.87 19.4,12.82C19.34,11.39 18.14,10.27 16.71,10.33A1,1 0 0,1 15.71,9.33A1,1 0 0,1 16.71,8.33C17.94,8.36 19.12,8.82 20.04,9.63C20.09,9.34 20.12,9.04 20.12,8.74C20.06,7.5 19.5,6.42 17.25,6.21C16,3.25 12.85,4.89 12.85,5.81V5.81C12.82,6.04 13.06,6.53 13.1,6.56A1,1 0 0,1 14.1,7.56C14.1,8.11 13.65,8.56 13.1,8.56V8.56C12.57,8.54 12.07,8.34 11.67,8C11.19,8.31 10.64,8.5 10.07,8.56V8.56C9.5,8.61 9.03,8.21 9,7.66C8.92,7.1 9.33,6.61 9.88,6.56C10.04,6.54 10.82,6.42 10.82,5.79V5.79C10.82,5.13 11.07,4.5 11.5,4C10.58,3.75 9.59,4.08 8.59,5.29C6.75,5 6,5.25 5.45,7.2C4.5,7.67 4,8 3.78,9C4.86,8.78 5.97,8.87 7,9.25C7.5,9.44 7.78,10 7.59,10.54C7.4,11.06 6.82,11.32 6.3,11.13C5.57,10.81 4.75,10.79 4,11.07C3.68,11.34 3.68,11.9 3.68,12.34C3.68,13.08 4.05,13.77 4.68,14.17C5.21,14.44 5.8,14.58 6.39,14.57C6.24,14.31 6.11,14.04 6,13.76C5.81,13.22 6.1,12.63 6.64,12.44C7.18,12.25 7.77,12.54 7.96,13.08C8.36,14.22 9.38,15 10.58,15.13C11.95,15.06 13.17,14.25 13.77,13C14,11.62 15.11,11.5 16.33,11.5M18.33,18.97L17.71,17.67L17,17.83L18,19.08L18.33,18.97M13.68,10.36C13.7,9.83 13.3,9.38 12.77,9.33C12.06,9.29 11.37,9.53 10.84,10C10.27,10.58 9.97,11.38 10,12.19A1,1 0 0,0 11,13.19C11.57,13.19 12,12.74 12,12.19C12,11.92 12.07,11.65 12.23,11.43C12.35,11.33 12.5,11.28 12.66,11.28C13.21,11.31 13.68,10.9 13.68,10.36Z"/>
                </clipPath>
            </defs>
            <path d="M21.33,12.91C21.42,14.46 20.71,15.95 19.44,16.86L20.21,18.35C20.44,18.8 20.47,19.33 20.27,19.8C20.08,20.27 19.69,20.64 19.21,20.8L18.42,21.05C18.25,21.11 18.06,21.14 17.88,21.14C17.37,21.14 16.89,20.91 16.56,20.5L14.44,18C13.55,17.85 12.71,17.47 12,16.9C11.5,17.05 11,17.13 10.5,17.13C9.62,17.13 8.74,16.86 8,16.34C7.47,16.5 6.93,16.57 6.38,16.56C5.59,16.57 4.81,16.41 4.08,16.11C2.65,15.47 1.7,14.07 1.65,12.5C1.57,11.78 1.69,11.05 2,10.39C1.71,9.64 1.68,8.82 1.93,8.06C2.3,7.11 3,6.32 3.87,5.82C4.45,4.13 6.08,3 7.87,3.12C9.47,1.62 11.92,1.46 13.7,2.75C14.12,2.64 14.56,2.58 15,2.58C16.36,2.55 17.65,3.15 18.5,4.22C20.54,4.75 22,6.57 22.08,8.69C22.13,9.8 21.83,10.89 21.22,11.82C21.29,12.18 21.33,12.54 21.33,12.91M16.33,11.5C16.9,11.57 17.35,12 17.35,12.57A1,1 0 0,1 16.35,13.57H15.72C15.4,14.47 14.84,15.26 14.1,15.86C14.35,15.95 14.61,16 14.87,16.07C20,16 19.4,12.87 19.4,12.82C19.34,11.39 18.14,10.27 16.71,10.33A1,1 0 0,1 15.71,9.33A1,1 0 0,1 16.71,8.33C17.94,8.36 19.12,8.82 20.04,9.63C20.09,9.34 20.12,9.04 20.12,8.74C20.06,7.5 19.5,6.42 17.25,6.21C16,3.25 12.85,4.89 12.85,5.81V5.81C12.82,6.04 13.06,6.53 13.1,6.56A1,1 0 0,1 14.1,7.56C14.1,8.11 13.65,8.56 13.1,8.56V8.56C12.57,8.54 12.07,8.34 11.67,8C11.19,8.31 10.64,8.5 10.07,8.56V8.56C9.5,8.61 9.03,8.21 9,7.66C8.92,7.1 9.33,6.61 9.88,6.56C10.04,6.54 10.82,6.42 10.82,5.79V5.79C10.82,5.13 11.07,4.5 11.5,4C10.58,3.75 9.59,4.08 8.59,5.29C6.75,5 6,5.25 5.45,7.2C4.5,7.67 4,8 3.78,9C4.86,8.78 5.97,8.87 7,9.25C7.5,9.44 7.78,10 7.59,10.54C7.4,11.06 6.82,11.32 6.3,11.13C5.57,10.81 4.75,10.79 4,11.07C3.68,11.34 3.68,11.9 3.68,12.34C3.68,13.08 4.05,13.77 4.68,14.17C5.21,14.44 5.8,14.58 6.39,14.57C6.24,14.31 6.11,14.04 6,13.76C5.81,13.22 6.1,12.63 6.64,12.44C7.18,12.25 7.77,12.54 7.96,13.08C8.36,14.22 9.38,15 10.58,15.13C11.95,15.06 13.17,14.25 13.77,13C14,11.62 15.11,11.5 16.33,11.5M18.33,18.97L17.71,17.67L17,17.83L18,19.08L18.33,18.97M13.68,10.36C13.7,9.83 13.3,9.38 12.77,9.33C12.06,9.29 11.37,9.53 10.84,10C10.27,10.58 9.97,11.38 10,12.19A1,1 0 0,0 11,13.19C11.57,13.19 12,12.74 12,12.19C12,11.92 12.07,11.65 12.23,11.43C12.35,11.33 12.5,11.28 12.66,11.28C13.21,11.31 13.68,10.9 13.68,10.36Z"/>
            <g clip-path="url(#grid-brain-clip-home)">
                <circle class="grid-icon__brain-dot grid-icon__brain-dot--1" cx="8.1" cy="8.2" r="0.82"/>
                <circle class="grid-icon__brain-dot grid-icon__brain-dot--2" cx="11.2" cy="6.8" r="0.76"/>
                <circle class="grid-icon__brain-dot grid-icon__brain-dot--3" cx="14.4" cy="9.6" r="0.86"/>
                <circle class="grid-icon__brain-dot grid-icon__brain-dot--4" cx="9.3" cy="12.8" r="0.8"/>
                <circle class="grid-icon__brain-dot grid-icon__brain-dot--5" cx="13.1" cy="14.4" r="0.78"/>
                <circle class="grid-icon__brain-dot grid-icon__brain-dot--6" cx="16.7" cy="11.4" r="0.88"/>
            </g>
        </svg>
        <h2>Algorithm Adaptation</h2>
    </div>
    <div class="grid-item">
        <svg class="grid-icon grid-icon--preprocessors" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M13,23H11V1H13V23M9,19H5V5H9V3H5C3.89,3 3,3.89 3,5V19C3,20.11 3.9,21 5,21H9V19M19,7V9H21V7H19M19,5H21C21,3.89 20.1,3 19,3V5M21,15H19V17H21V15M19,11V13H21V11H19M17,3H15V5H17V3M19,21C20.11,21 21,20.11 21,19H19V21M17,19H15V21H17V19Z"/>
        </svg>
        <h2>Temporal Preprocessors</h2>
    </div>
    <div class="grid-item">
        <svg class="grid-icon grid-icon--pipeline" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M5.67969 21.1484H8.64453V19.2617H5.70312C4.53125 19.2617 3.88672 18.6289 3.88672 17.4102V5.76172C3.88672 4.54297 4.53125 3.91016 5.70312 3.91016H17.4102C18.5703 3.91016 19.2266 4.54297 19.2266 5.76172V8.32812H21.1133V5.65625C21.1133 3.24219 19.8828 2.02344 17.4453 2.02344H5.67969C3.21875 2.02344 2 3.24219 2 5.65625V17.5156C2 19.9297 3.21875 21.1484 5.67969 21.1484ZM11.3633 26.5742H23.1289C25.5664 26.5742 26.7969 25.3555 26.7969 22.9414V11.082C26.7969 8.66797 25.5664 7.44922 23.1289 7.44922H11.3633C8.90234 7.44922 7.68359 8.65625 7.68359 11.082V22.9414C7.68359 25.3555 8.90234 26.5742 11.3633 26.5742ZM11.3867 24.6875C10.2266 24.6875 9.57031 24.0547 9.57031 22.8359V11.1875C9.57031 9.96875 10.2266 9.33594 11.3867 9.33594H23.0938C24.2539 9.33594 24.9102 9.96875 24.9102 11.1875V22.8359C24.9102 24.0547 24.2539 24.6875 23.0938 24.6875H11.3867Z"></path>
            <path class="grid-icon__dot grid-icon__dot--center" d="M18.8983 17.0117C18.8983 17.9375 18.1484 18.6875 17.2461 18.6875C16.332 18.6875 15.5938 17.9375 15.5938 17.0117C15.5938 16.1094 16.332 15.3711 17.2461 15.3711C18.1484 15.3711 18.8983 16.1094 18.8983 17.0117Z"></path>
            <path class="grid-icon__dot grid-icon__dot--top-left" d="M14.3164 12.4297C14.3164 13.3555 13.5664 14.1055 12.6641 14.0938C11.75 14.082 11 13.3555 11 12.4297C11 11.5039 11.75 10.7773 12.6641 10.7773C13.5664 10.7773 14.3164 11.5039 14.3164 12.4297Z"></path>
            <path class="grid-icon__dot grid-icon__dot--top-right" d="M23.4922 12.4297C23.4922 13.3555 22.7422 14.1055 21.8398 14.0938C20.9258 14.082 20.1641 13.3555 20.1641 12.4297C20.1641 11.5039 20.9258 10.7773 21.8398 10.7773C22.7422 10.7773 23.4922 11.5039 23.4922 12.4297Z"></path>
            <path class="grid-icon__dot grid-icon__dot--bottom-right" d="M23.4922 21.6172C23.4922 22.5312 22.7422 23.2812 21.8398 23.2812C20.9258 23.2812 20.1758 22.5312 20.1758 21.6172C20.1758 20.7031 20.9258 19.9648 21.8398 19.9648C22.7422 19.9648 23.4922 20.7031 23.4922 21.6172Z"></path>
            <path class="grid-icon__dot grid-icon__dot--bottom-left" d="M14.3164 21.6172C14.3164 22.5312 13.5664 23.2812 12.6641 23.2812C11.75 23.2812 11.0117 22.5312 11.0117 21.6172C11.0117 20.7031 11.75 19.9648 12.6641 19.9648C13.5664 19.9648 14.3164 20.7031 14.3164 21.6172Z"></path>
        </svg>
        <h2>Temporal Sklearn-Like<br/>Pipeline</h2>
    </div>
    <div class="grid-item">
        <svg class="grid-icon grid-icon--api" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M7 7H5A2 2 0 0 0 3 9V17H5V13H7V17H9V9A2 2 0 0 0 7 7M7 11H5V9H7M14 7H10V17H12V13H14A2 2 0 0 0 16 11V9A2 2 0 0 0 14 7M14 11H12V9H14M20 9V15H21V17H17V15H18V9H17V7H21V9Z"/>
        </svg>
        <h2>User-Friendly<br/>API</h2>
    </div>
    <div class="grid-item">
        <svg class="grid-icon grid-icon--community" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M22 10.92L19.26 9.33C21.9 7.08 19.25 2.88 16.08 4.31L15.21 4.68L15.1 3.72C15 2.64 14.44 1.87 13.7 1.42C12.06 .467 9.56 1.12 9.16 3.5L6.41 1.92C5.45 1.36 4.23 1.69 3.68 2.65L2.68 4.38C2.4 4.86 2.57 5.47 3.05 5.75L10.84 10.25L12.34 7.65L14.07 8.65L12.57 11.25L20.36 15.75C20.84 16 21.46 15.86 21.73 15.38L22.73 13.65C23.28 12.69 22.96 11.47 22 10.92M12.37 5C11.5 5.25 10.8 4.32 11.24 3.55C11.5 3.07 12.13 2.91 12.61 3.18C13.38 3.63 13.23 4.79 12.37 5M17.56 8C16.7 8.25 16 7.32 16.44 6.55C16.71 6.07 17.33 5.91 17.8 6.18C18.57 6.63 18.42 7.79 17.56 8M20.87 16.88C21.28 16.88 21.67 16.74 22 16.5V20C22 21.11 21.11 22 20 22H4C2.9 22 2 21.11 2 20V11H10.15L11 11.5V20H13V12.65L19.87 16.61C20.17 16.79 20.5 16.88 20.87 16.88Z"/>
        </svg>
        <h2>Open-Source<br/>Community</h2>
    </div>
    <div class="grid-item">
        <svg class="grid-icon grid-icon--cython" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M6 15.5402C6 15.9972 6.35156 16.3371 6.84375 16.3371H13.4648L9.97266 25.8293C9.51562 27.0363 10.7695 27.6808 11.5547 26.6965L22.207 13.384C22.4062 13.1379 22.5117 12.9035 22.5117 12.634C22.5117 12.1887 22.1602 11.8371 21.668 11.8371H15.0469L18.5391 2.34491C18.9961 1.13787 17.7422 0.493343 16.957 1.48944L6.30469 14.7902C6.10547 15.048 6 15.2824 6 15.5402Z"></path>
            <path class="grid-icon__ghost" d="M6 15.5402C6 15.9972 6.35156 16.3371 6.84375 16.3371H13.4648L9.97266 25.8293C9.51562 27.0363 10.7695 27.6808 11.5547 26.6965L22.207 13.384C22.4062 13.1379 22.5117 12.9035 22.5117 12.634C22.5117 12.1887 22.1602 11.8371 21.668 11.8371H15.0469L18.5391 2.34491C18.9961 1.13787 17.7422 0.493343 16.957 1.48944L6.30469 14.7902C6.10547 15.048 6 15.2824 6 15.5402Z"></path>
        </svg>
        <h2>Cython<br>Optimised</h2>
    </div>
</div>

<div class="social-icons-stack">
    <div class="social-icons-container">
        <a class="social-icon-link" href="https://github.com/simonprovost" aria-label="GitHub">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="social-icon-bottom">
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
            </svg>
        </a>
        <a class="social-icon-link" href="https://scholar.google.com/citations?user=Lv_LddYAAAAJ&hl=en" aria-label="Google Scholar">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="social-icon-bottom">
                <path d="M12 24a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm0-24L0 9.5l4.838 3.94A8 8 0 0 1 12 9a8 8 0 0 1 7.162 4.44L24 9.5z"/>
            </svg>
        </a>
        <a class="social-icon-link" href="https://www.linkedin.com/in/simonprovostdev/" aria-label="LinkedIn">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="social-icon-bottom">
                <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
            </svg>
        </a>
    </div>
    <p class="social-scroll-hint">psst... scroll a bit further!</p>
</div>

<footer class="footer" role="contentinfo">
    <div class="footer-beyond-overlay" aria-hidden="true" data-footer-beyond style="transform: scaleY(0);">
        <svg class="footer-beyond-svg" viewBox="0 0 1271 599" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g filter="url(#filter0_f_3283_101175)">
                <rect x="1287" y="614" width="174" height="323" rx="20" ry="20" transform="rotate(180 1287 614)" fill="url(#paint0_linear_3283_101175)"></rect>
            </g>
            <g filter="url(#filter1_f_3283_101175)">
                <rect x="1146" y="614" width="174" height="404" rx="20" ry="20" transform="rotate(180 1146 614)" fill="url(#paint1_linear_3283_101175)"></rect>
            </g>
            <g filter="url(#filter2_f_3283_101175)">
                <rect x="1005" y="614" width="174" height="478" rx="20" ry="20" transform="rotate(180 1005 614)" fill="url(#paint2_linear_3283_101175)"></rect>
            </g>
            <g filter="url(#filter3_f_3283_101175)">
                <rect width="174" height="323" rx="20" ry="20" transform="matrix(1 0 -5.78527e-07 -1 -16 614)" fill="url(#paint3_linear_3283_101175)"></rect>
            </g>
            <g filter="url(#filter4_f_3283_101175)">
                <rect width="174" height="404" rx="20" ry="20" transform="matrix(1 0 -6.17385e-07 -1 125 614)" fill="url(#paint4_linear_3283_101175)"></rect>
            </g>
            <g filter="url(#filter5_f_3283_101175)">
                <rect width="174" height="478" rx="20" ry="20" transform="matrix(1 0 -6.17385e-07 -1 266 614)" fill="url(#paint5_linear_3283_101175)"></rect>
            </g>
            <g filter="url(#filter6_f_3283_101175)">
                <rect width="175" height="530" rx="20" ry="20" transform="matrix(1 0 -6.17385e-07 -1 407 614)" fill="url(#paint6_linear_3283_101175)"></rect>
            </g>
            <g filter="url(#filter7_f_3283_101175)">
                <rect x="864" y="614" width="175" height="530" rx="20" ry="20" transform="rotate(180 864 614)" fill="url(#paint7_linear_3283_101175)"></rect>
            </g>
            <g filter="url(#filter8_f_3283_101175)">
                <rect width="43" height="584" rx="20" ry="20" transform="matrix(1 0 -6.17385e-07 -1 506 614)" fill="url(#paint9_linear_3283_101175)"></rect>
                <rect width="43" height="584" rx="20" ry="20" transform="matrix(1 0 -6.17385e-07 -1 549 614)" fill="url(#paint8_linear_3283_101175)"></rect>
                <rect width="43" height="584" rx="20" ry="20" transform="matrix(1 0 -6.17385e-07 -1 592 614)" fill="url(#paint8_linear_3283_101175)"></rect>
                <rect width="43" height="584" rx="20" ry="20" transform="matrix(1 0 -6.17385e-07 -1 635 614)" fill="url(#paint8_linear_3283_101175)"></rect>
                <rect width="43" height="584" rx="20" ry="20" transform="matrix(1 0 -6.17385e-07 -1 678 614)" fill="url(#paint8_linear_3283_101175)"></rect>
                <rect width="43" height="584" rx="20" ry="20" transform="matrix(1 0 -6.17385e-07 -1 721 614)" fill="url(#paint10_linear_3283_101175)"></rect>
            </g>
            <defs>
                <filter id="filter0_f_3283_101175" x="1083" y="261" width="234" height="383" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                    <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                    <feGaussianBlur stdDeviation="24" result="effect1_foregroundBlur_3283_101175"></feGaussianBlur>
                </filter>
                <filter id="filter1_f_3283_101175" x="942" y="180" width="234" height="464" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                    <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                    <feGaussianBlur stdDeviation="24" result="effect1_foregroundBlur_3283_101175"></feGaussianBlur>
                </filter>
                <filter id="filter2_f_3283_101175" x="801" y="106" width="234" height="538" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                    <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                    <feGaussianBlur stdDeviation="24" result="effect1_foregroundBlur_3283_101175"></feGaussianBlur>
                </filter>
                <filter id="filter3_f_3283_101175" x="-46" y="261" width="234" height="383" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                    <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                    <feGaussianBlur stdDeviation="24" result="effect1_foregroundBlur_3283_101175"></feGaussianBlur>
                </filter>
                <filter id="filter4_f_3283_101175" x="95" y="180" width="234" height="464" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                    <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                    <feGaussianBlur stdDeviation="24" result="effect1_foregroundBlur_3283_101175"></feGaussianBlur>
                </filter>
                <filter id="filter5_f_3283_101175" x="236" y="106" width="234" height="538" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                    <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                    <feGaussianBlur stdDeviation="24" result="effect1_foregroundBlur_3283_101175"></feGaussianBlur>
                </filter>
                <filter id="filter6_f_3283_101175" x="377" y="54" width="235" height="590" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                    <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                    <feGaussianBlur stdDeviation="24" result="effect1_foregroundBlur_3283_101175"></feGaussianBlur>
                </filter>
                <filter id="filter7_f_3283_101175" x="659" y="54" width="235" height="590" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                    <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                    <feGaussianBlur stdDeviation="24" result="effect1_foregroundBlur_3283_101175"></feGaussianBlur>
                </filter>
                <filter id="filter8_f_3283_101175" x="476" y="0" width="318" height="644" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                    <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                    <feGaussianBlur stdDeviation="24" result="effect1_foregroundBlur_3283_101175"></feGaussianBlur>
                </filter>
                <linearGradient id="paint0_linear_3283_101175" x1="1374" y1="614" x2="1374" y2="937" gradientUnits="userSpaceOnUse">
                    <stop stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.10" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.18" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.26" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.34" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.42" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.50" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.58" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.66" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.78" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.88" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.96" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="1" stop-color="rgb(214, 109, 109)" stop-opacity="0"></stop>
                </linearGradient>
                <linearGradient id="paint1_linear_3283_101175" x1="1233" y1="614" x2="1233" y2="1018" gradientUnits="userSpaceOnUse">
                    <stop stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.10" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.18" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.26" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.34" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.42" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.50" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.58" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.66" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.78" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.88" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.96" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="1" stop-color="rgb(214, 109, 109)" stop-opacity="0"></stop>
                </linearGradient>
                <linearGradient id="paint2_linear_3283_101175" x1="1092" y1="614" x2="1092" y2="1092" gradientUnits="userSpaceOnUse">
                    <stop stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.10" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.18" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.26" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.34" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.42" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.50" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.58" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.66" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.78" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.88" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.96" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="1" stop-color="rgb(214, 109, 109)" stop-opacity="0"></stop>
                </linearGradient>
                <linearGradient id="paint3_linear_3283_101175" x1="87.0001" y1="0" x2="87.0001" y2="323" gradientUnits="userSpaceOnUse">
                    <stop stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.10" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.18" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.26" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.34" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.42" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.50" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.58" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.66" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.78" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.88" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.96" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="1" stop-color="rgb(214, 109, 109)" stop-opacity="0"></stop>
                </linearGradient>
                <linearGradient id="paint4_linear_3283_101175" x1="87.0001" y1="0" x2="87.0001" y2="404" gradientUnits="userSpaceOnUse">
                    <stop stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.10" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.18" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.26" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.34" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.42" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.50" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.58" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.66" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.78" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.88" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.96" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="1" stop-color="rgb(214, 109, 109)" stop-opacity="0"></stop>
                </linearGradient>
                <linearGradient id="paint5_linear_3283_101175" x1="87.0001" y1="0" x2="87.0001" y2="478" gradientUnits="userSpaceOnUse">
                    <stop stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.10" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.18" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.26" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.34" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.42" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.50" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.58" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.66" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.78" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.88" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.96" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="1" stop-color="rgb(214, 109, 109)" stop-opacity="0"></stop>
                </linearGradient>
                <linearGradient id="paint6_linear_3283_101175" x1="87.5002" y1="0" x2="87.5002" y2="530" gradientUnits="userSpaceOnUse">
                    <stop stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.10" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.18" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.26" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.34" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.42" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.50" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.58" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.66" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.78" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.88" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.96" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="1" stop-color="rgb(214, 109, 109)" stop-opacity="0"></stop>
                </linearGradient>
                <linearGradient id="paint7_linear_3283_101175" x1="951.5" y1="614" x2="951.5" y2="1144" gradientUnits="userSpaceOnUse">
                    <stop stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.10" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.18" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.26" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.34" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.42" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.50" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.58" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.66" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.78" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.88" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.96" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="1" stop-color="rgb(214, 109, 109)" stop-opacity="0"></stop>
                </linearGradient>
                <linearGradient id="paint8_linear_3283_101175" x1="86.5002" y1="0" x2="86.5002" y2="584" gradientUnits="userSpaceOnUse">
                    <stop stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.10" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.18" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.26" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.34" stop-color="rgb(57, 51, 184)"></stop>
                    <stop offset="0.42" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.50" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.58" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.66" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.78" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.88" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="0.96" stop-color="rgb(214, 109, 109)"></stop>
                    <stop offset="1" stop-color="rgb(214, 109, 109)" stop-opacity="0"></stop>
                </linearGradient>
                <linearGradient id="paint9_linear_3283_101175" x1="21.5" y1="0" x2="21.5" y2="584" gradientUnits="userSpaceOnUse">
                    <stop stop-color="rgb(252, 154, 149)"></stop>
                    <stop offset="0.16" stop-color="rgb(252, 154, 149)"></stop>
                    <stop offset="0.42" stop-color="rgb(252, 154, 149)"></stop>
                    <stop offset="0.72" stop-color="rgb(252, 154, 149)"></stop>
                    <stop offset="0.92" stop-color="rgb(252, 154, 149)"></stop>
                    <stop offset="1" stop-color="rgb(252, 154, 149)" stop-opacity="0"></stop>
                </linearGradient>
                <linearGradient id="paint10_linear_3283_101175" x1="21.5" y1="0" x2="21.5" y2="584" gradientUnits="userSpaceOnUse">
                    <stop stop-color="rgb(23, 21, 76)"></stop>
                    <stop offset="0.16" stop-color="rgb(23, 21, 76)"></stop>
                    <stop offset="0.42" stop-color="rgb(23, 21, 76)"></stop>
                    <stop offset="0.72" stop-color="rgb(23, 21, 76)"></stop>
                    <stop offset="0.92" stop-color="rgb(23, 21, 76)"></stop>
                    <stop offset="1" stop-color="rgb(23, 21, 76)" stop-opacity="0"></stop>
                </linearGradient>
            </defs>
        </svg>
    </div>
    <div class="footer-text">SKLONG</div>
</footer>

</div>

{% endblock %}