body {
    display: flex;
    flex-direction: column;
    min-width: 100%;
    min-height: 100vh;
}

#stars {
    isolation: isolate;
    position: relative;
    width: 100%;
    min-width: 100%;
    max-height: var(--size-14);
    aspect-ratio: var(--ratio-cinema);
    container-type: size;
    border-bottom: var(--border-size-2) solid var(--orange-8);

    @container (max-width: 1024px) {
        max-height: var(--size-12);
    }

    @container (max-width: 768px) {
        max-height: var(--size-12);

        div fieldset {
            display: none !important;
        }
    }

    @container (max-width: 480px) {
        max-height: var(--size-10);
    }

    ds-starfield {
        color: var(--blue-6);
        background-color: var(--gray-1);
    }

    .hero {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        container-type: inline-size;
        text-align: center;

        @container (max-width: 768px) {
            padding: var(--size-1);
        }

        h1,
        h2 {
            font-family: var(--font-brand);
            text-shadow: var(--shadow-3);
            text-transform: uppercase;
            transform: perspective(var(--size-9)) rotateX(16deg);
            user-select: none;

            @container (max-width: 768px) {
                transform: none;
            }
        }

        h1 {
            font-size: var(--font-size-8);
            line-height: var(--font-lineheight-0);
            color: var(--orange-5);

            @container (max-width: 1024px) {
                font-size: var(--font-size-6);
            }

            @container (max-width: 768px) {
                font-size: var(--font-size-5);
            }

            @container (max-width: 640px) {
                font-size: var(--font-size-4);
            }

            @container (max-width: 480px) {
                font-size: var(--font-size-3);
            }
        }

        h2 {
            text-align: center;
            font-size: var(--font-size-4);
            color: var(--grey-5);
            font-weight: bold;

            @container (max-width: 1024px) {
                font-size: var(--font-size-3);
            }

            @container (max-width: 640px) {
                font-size: var(--font-size-2);
            }

            @container (max-width: 480px) {
                font-size: var(--font-size-1);
            }
        }

        fieldset {
            display: flex;
            width: 80%;
            box-sizing: border-box;
            gap: var(--size-2);
            margin-top: var(--size-4);
            padding: var(--size-2);

            label {
                cursor: pointer;
                white-space: nowrap;
                font-family: var(--font-mono);
                font-size: var(--font-size-1);
                color: var(--gray-12);
                padding: var(--size-0);
            }
        }
    }

    .console {
        position: absolute;
        top: 10%;
        right: 5%;
        width: var(--size-9);
        padding: var(--size-2) var(--size-3);
        background-color: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.3);

        @container (max-width: 1024px) {
            display: none;
        }

        .meta {
            float: right;
            font-size: var(--font-size-3);
            cursor: pointer;
            margin-top: calc(-1 * var(--size-1));
            margin-right: calc(-1 * var(--size-1));
            color: var(--gray-11);

            &:hover {
                color: var(--gray-12);
            }
        }
    }

    .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.2);
    }

    .modal {
        position: absolute;
        z-index: var(--z-index-1);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--size-4);
        justify-content: center;
        align-items: center;
        font-size: var(--font-size-2);
        background: var(--gray-0);
        border-radius: var(--border-radius-2);
        margin: auto;
        padding: 0 var(--size-8);

        .buttons {
            display: flex;
            gap: var(--size-4);

            button {
                align-self: center;
                margin-top: var(--size-3);
            }
        }
    }
}

section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--size-6);
    padding: var(--size-8);
    background-blend-mode: luminosity;
    background-image: none;
    background-size: cover;
    line-height: var(--font-lineheight-4);

    /* border-top: var(--border-size-4) solid var(--gray-8); */
    border-bottom: var(--border-size-4) solid var(--gray-8);

    .container {
        max-width: var(--size-viewport-xl);
        width: 100%;
    }

    .rows {
        display: flex;
        gap: var(--size-8);

        @media (max-width: 1024px) {
            flex-direction: column;
            gap: calc(var(--size-8) - var(--size-4));
        }
    }

    @media (max-width: 1024px) {
        padding: calc(var(--size-8) - var(--size-4));
    }

    @media (max-width: 640px) {
        padding: calc(var(--size-8) - var(--size-4)) var(--size-6);
    }
}

#overview {
    position: relative;
    background-color: black;
    background-image: none;
    container-type: inline-size;
    overflow: hidden;
    padding: 0;

    .container {
        position: relative;
        z-index: 1;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
        
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100vw;
            height: 100%;
            background-color: oklab(from var(--gray-0) l a b / 0.5);
            backdrop-filter: blur(24px);
            z-index: -1;
        }
    }

    h1,
    h2 {
        margin: var(--size-3) 0;
        text-wrap: auto;
    }

    h1 {
        font-size: var(--font-size-6);
        line-height: var(--font-lineheight-1);
        color: var(--orange-6);
        text-align: center;

        @container (max-width: 768px) {
            font-size: var(--font-size-5);
        }

        @container (max-width: 640px) {
            font-size: var(--font-size-4);
        }
    }

    p {
        font-size: var(--font-size-3);
        line-height: var(--font-lineheight-3);
        max-width: var(--size-content-3);
        margin: 0 auto var(--size-2);
        color: var(--gray-11);

        @container (max-width: 768px) {
            font-size: var(--font-size-2);
        }
    }

    .hero-content {
        width: 100%;
        max-width: var(--size-viewport-xl);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--gray-12);
        position: relative;
        z-index: 1;
        padding: var(--size-8);
        box-sizing: border-box;
        overflow-wrap: break-word;

        @container (max-width: 768px) {
            padding: calc(var(--size-8) - var(--size-4)) var(--size-3);
        }

        @container (max-width: 480px) {
            padding: var(--size-4) var(--size-6);
        }
    }

    .icons {
        display: flex;
        gap: var(--size-2);
        font-size: var(--font-size-5);
        justify-content: center;
        margin: var(--size-3) 0;
        flex-wrap: wrap;
        color: var(--gray-10);

        a {
            margin: 0;
            line-height: var(--font-lineheight-1);
        }

        @container (max-width: 768px) {
            font-size: var(--font-size-4);
        }
    }

    img {
        background-color: var(--gray-0);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.5;
        z-index: 0;
    }

    a {
        margin: 0 auto;

        &.button {
          margin: var(--size-4) auto;
        }
    }
}

#hello {
    background-color: var(--grey-3);
    container-type: inline-size;

    .container {
        display: flex;
        gap: var(--size-8);
        justify-content: space-between;

        @container (max-width: 1024px) {
            flex-direction: column;
            gap: var(--size-4);
        }


        .left {
            display: flex;
            flex-direction: column;
            gap: var(--size-4);
            max-width: 50%;

            div {
                display: flex;
                gap: var(--size-2);
            }

            >div {
                flex-direction: column;

                label {
                    font-family: var(--font-mono);
                    color: var(--blue-6);
                }
            }

            h3 {
                font-size: var(--font-size-6);
                background: var(--_color);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;

                &.sse {
                    background: linear-gradient(to right in oklab, var(--red-6), var(--orange-6), var(--green-6), var(--blue-6), var(--purple-6));
                    background-clip: text;
                }
            }

            @container (max-width: 1024px) {
                max-width: 100%;
            }
        }

        .right {
            position: relative;
            width: 50%;

            .console {
                padding: 0;
                font-size: var(--font-size-0);
                line-height: var(--font-lineheight-2);
                overflow-y: hidden;

                header {
                    display: block;
                    position: sticky;
                    top: 0;
                    left: 0;
                    margin-top: var(--size-1);
                    padding: var(--size-2) var(--size-6);
                    background: var(--gray-4);
                    border-bottom: 1px solid var(--blue-6);
                    color: var(--blue-6);
                }

                #networkResponse {
                    height: var(--size-12);
                    overflow-y: scroll;
                    padding: var(--size-5) var(--size-6) 0;

                    code {
                        font-size: var(--font-size-0);
                    }
                }
            }

            @container (max-width: 1024px) {
                width: 100%;
            }
        }
    }
}

#problemSolution {
    background-color: var(--gray-5);
    text-align: center;

    h3 {
        margin: var(--size-4) auto;
        max-inline-size: var(--size-header-1);
        line-height: var(--font-lineheight-0);
        font-size: var(--font-size-6);

        @media (max-width: 768px) {
            font-size: var(--font-size-5);
        }

        @media (max-width: 640px) {
            font-size: var(--font-size-4);
        }
    }

    p {
        max-inline-size: none;
    }

    .links {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--size-6);
        margin: var(--size-7) auto;

        .success {
            display: flex;
            gap: var(--size-2);
        }

        @media (max-width: 640px) {
            flex-direction: column;

            a.button {
                align-self: center;
            }
        }
    }

    #introVideo {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        gap: var(--size-4);
        aspect-ratio: 16 / 9;
        width: 85%;
        position: relative;
        cursor: pointer;
        margin: var(--size-7) auto;

        img,
        iframe {
            width: 100%;
            height: 100%;
            border-radius: var(--border-radius-2);
            border: var(--border-size-4) solid var(--orange-8);
        }

        button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: var(--blue-12);
            opacity: 0.8;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 6px hsl(from var(--blue-1) h s l / 0.5);
            transition: opacity 0.3s, box-shadow 0.3s;
            pointer-events: none;
            color: var(--blue-6);

            &::before {
                content: '';
                display: block;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                aspect-ratio: 1 / 1;
                width: 0;
                height: 0;
                margin-left: 2px;
                border-left: 18px solid #000;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
            }

            &::after {
                content: none;
            }
        }

        &:hover button {
            opacity: 1;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }
    }
}

#benefits {
    background-color: var(--orange-1);
    text-align: center;

    h3 {
        margin: var(--size-4) auto;
        max-inline-size: var(--size-header-3);
        line-height: var(--font-lineheight-0);
        font-size: var(--font-size-6);

        @media (max-width: 768px) {
            font-size: var(--font-size-5);
        }

        @media (max-width: 640px) {
            font-size: var(--font-size-4);
        }
    }

    p {
        max-inline-size: none;
        margin: 0 auto;
    }

    .rows {
        justify-content: space-between;
        gap: 0;
        margin: calc(var(--size-8) - var(--size-4)) 0;

        @media (max-width: 1280px) {
            flex-direction: column;
            gap: calc(var(--size-8) - var(--size-4));
        }
    }

    .benefit {
        display: flex;
        flex-direction: column;
        gap: var(--size-4);
        width: 48%;

        h4 {
            max-inline-size: var(--size-content-1);

            @media (max-width: 1280px) {
                max-inline-size: 100%;
            }
        }

        @media (max-width: 1280px) {
            gap: var(--size-2);
            width: 100%;
            text-align: center;
        }
    }

    .result {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--size-4);
        width: fit-content;
        margin: 0 auto;

        code {
            padding: var(--size-2) var(--size-4);
            font-size: var(--font-size-2);
        }
    }
}

#testimonials {
    background-color: var(--gray-2);

    .container {
        display: flex;
        flex-direction: column;
        gap: var(--size-8);

        .rows {
            align-items: center;

            .left {
                width: var(--size-content-2);
                max-width: 100%;
                flex-shrink: 0;

                @media (max-width: 640px) {
                    width: 100%;
                }
            }

            .demo {
                margin: 0;
                width: 100%;

                &.features {
                    display: block;
                    max-width: var(--size-20);
                    margin: 0 auto;

                    .link {
                        @media (max-width: 768px) {
                            flex-direction: column;
                            align-items: flex-start;
                        }
                    }
                }

                .links {
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    max-inline-size: none;
                    gap: var(--size-4);

                    .success {
                        font-size: var(--font-size-3);

                        iconify-icon {
                            margin-right: 0;
                            margin-left: -3px;
                        }
                    }
                }
            }

            h5 {
                color: var(--_color);
                margin: var(--size-4) 0;
            }

            .testimonial {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;

                blockquote {
                    font-style: italic;
                    font-size: var(--font-size-3);

                    a {
                        font-size: var(--font-size-3);
                    }

                    >div {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        gap: var(--size-2);
                        font-size: var(--font-size-1);
                    }

                    @media (max-width: 640px) {
                        font-size: var(--font-size-2);

                        a {
                            font-size: var(--font-size-2);
                        }
                    }
                }
            }

            @media (max-width: 1280px) {
                flex-direction: column;
                gap: calc(var(--size-8) - var(--size-4));

                &.reverse {
                    flex-direction: column-reverse;
                }
            }
        }
    }

    .stats {
        align-items: end;
        justify-content: center;

        h5 {
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: var(--size-2);
            align-items: center;
            justify-content: center;
        }

        img {
            height: 50px;
        }
    }
}

#launch {
    position: relative;
    background-color: black;
    container-type: inline-size;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        backdrop-filter: blur(12px);
        z-index: 1;
    }

    .container {
        position: relative;
        z-index: 2;
        max-width: var(--size-viewport-xl);
        margin: 0 auto;
    }

    img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.3;
        z-index: 0;

        @container (max-width: 768px) {
            opacity: 0.2;
        }
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: var(--size-4);
        min-height: 100%;
        margin: var(--size-8);
        padding: var(--size-6);
        background-color: hsl(from var(--purple-0) h s l / 0.625);
        border: var(--border-size-2) solid var(--purple-3);
        border-radius: var(--radius-2);
        box-shadow: var(--shadow-2);

        @media (max-width: 1024px) {
            margin: 0;
            padding: var(--size-2);
        }

        h3 {
            color: var(--purple-10);
            margin: 0;

            @container (max-width: 768px) {
                font-size: var(--font-size-5);
            }

            @container (max-width: 640px) {
                font-size: var(--font-size-4);
            }
        }
    }

    .rows {
        display: flex;
        gap: var(--size-6);
        flex-direction: row;

        @media (max-width: 768px) {
            flex-direction: column;
            gap: var(--size-3);
            width: 100%;

            a {
                width: 100%;
                box-sizing: border-box;
            }
        }
    }
}