/* ==========================================================
   BASE
========================================================== */

:root {
    --background: #111213;
    --surface: #181a1c;
    --surface-raised: #1e2023;
    --surface-hover: #24272a;

    --border: #303337;
    --border-light: #3b3e42;

    --text: #f2f2f2;
    --text-secondary: #a6a8ab;
    --text-muted: #777b80;

    --accent: #8b1d22;
    --accent-hover: #a6242a;
    --accent-dark: #681419;

    --max-width: 1120px;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.6;

    min-height: 100vh;
}


button,
input {
    font: inherit;
}


button {
    border: 0;
}


/* ==========================================================
   HEADER
========================================================== */

.site-header {
    position: sticky;

    top: 0;

    z-index: 100;

    background:
        rgba(17, 18, 19, 0.94);

    border-bottom:
        1px solid var(--border);

    backdrop-filter:
        blur(12px);
}


.header-inner {
    width:
        min(
            calc(100% - 40px),
            var(--max-width)
        );

    min-height:
        72px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;
}


.brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--text);

    text-decoration:
        none;

    font-weight:
        700;
}


.brand-mark {
    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    background:
        var(--accent);

    border:
        1px solid #a22c32;

    font-size:
        13px;

    letter-spacing:
        0.08em;
}


.brand-name {
    font-size:
        17px;

    letter-spacing:
        -0.01em;
}


.auth-area {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}


.auth-status {
    font-size:
        13px;

    color:
        var(--text-secondary);
}


/* ==========================================================
   BUTTONS
========================================================== */

.button {
    display:
        inline-flex;

    justify-content:
        center;

    align-items:
        center;

    min-height:
        42px;

    padding:
        0 18px;

    border-radius:
        5px;

    font-size:
        14px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}


.button-primary {
    background:
        var(--accent);

    color:
        white;
}


.button-primary:hover:not(:disabled) {
    background:
        var(--accent-hover);
}


.button-secondary {
    background:
        transparent;

    color:
        var(--text);

    border:
        1px solid var(--border-light);
}


.button-secondary:hover:not(:disabled) {
    background:
        var(--surface-hover);

    border-color:
        #55595e;
}


.button:disabled {
    cursor:
        not-allowed;

    opacity:
        0.38;
}


/* ==========================================================
   MAIN
========================================================== */

main {
    width:
        min(
            calc(100% - 40px),
            var(--max-width)
        );

    margin:
        0 auto;
}


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

.hero {
    min-height:
        560px;

    padding:
        92px 0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(320px, 0.7fr);

    align-items:
        center;

    gap:
        80px;

    border-bottom:
        1px solid var(--border);
}


.hero-copy {
    max-width:
        680px;
}


.eyebrow {
    margin:
        0 0 16px;

    color:
        #bf555a;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.16em;
}


.hero h1 {
    max-width:
        720px;

    margin:
        0;

    font-size:
        clamp(
            42px,
            6vw,
            68px
        );

    line-height:
        1.03;

    letter-spacing:
        -0.045em;

    font-weight:
        700;
}


.hero-description {
    max-width:
        650px;

    margin:
        28px 0 0;

    color:
        var(--text-secondary);

    font-size:
        17px;

    line-height:
        1.75;
}


.technology-list {
    margin-top:
        32px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.technology-list span {
    padding:
        6px 10px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    color:
        var(--text-secondary);

    font-size:
        12px;

    font-weight:
        500;
}


/* ==========================================================
   ARCHITECTURE CARD
========================================================== */

.architecture-card {
    padding:
        28px;

    background:
        var(--surface);

    border:
        1px solid var(--border);
}


.architecture-label {
    margin:
        0 0 24px;

    color:
        var(--text-muted);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.14em;
}


.pipeline {
    display:
        flex;

    flex-direction:
        column;
}


.pipeline-step {
    display:
        grid;

    grid-template-columns:
        36px 1fr;

    gap:
        15px;

    align-items:
        center;
}


.pipeline-step > span {
    width:
        32px;

    height:
        32px;

    display:
        grid;

    place-items:
        center;

    background:
        var(--surface-raised);

    border:
        1px solid var(--border);

    color:
        #d15b61;

    font-size:
        11px;

    font-weight:
        700;
}


.pipeline-step strong {
    display:
        block;

    font-size:
        14px;

    line-height:
        1.3;
}


.pipeline-step p {
    margin:
        3px 0 0;

    color:
        var(--text-muted);

    font-size:
        12px;

    line-height:
        1.4;
}


.pipeline-line {
    width:
        1px;

    height:
        24px;

    margin-left:
        16px;

    background:
        var(--border);
}


/* ==========================================================
   GENERAL SECTIONS
========================================================== */

.content-section {
    padding:
        88px 0;

    border-bottom:
        1px solid var(--border);
}


.section-heading {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 420px);

    gap:
        60px;

    align-items:
        end;

    margin-bottom:
        38px;
}


.section-heading h2 {
    margin:
        0;

    font-size:
        clamp(
            30px,
            4vw,
            42px
        );

    line-height:
        1.1;

    letter-spacing:
        -0.035em;
}


.section-heading > p {
    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        15px;
}


/* ==========================================================
   INTRO VIDEO
========================================================== */

.intro-panel {
    background:
        var(--surface);

    border:
        1px solid var(--border);

    padding:
        16px;
}


.intro-video {
    display:
        block;

    width:
        100%;

    max-height:
        640px;

    background:
        #000;

    object-fit:
        contain;
}


/* ==========================================================
   UPLOAD PANEL
========================================================== */

.upload-panel {
    background:
        var(--surface);

    border:
        1px solid var(--border);

    padding:
        32px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        32px;

    align-items:
        center;
}


.upload-copy {
    display:
        flex;

    align-items:
        center;

    gap:
        18px;
}


.upload-icon {
    width:
        48px;

    height:
        48px;

    flex:
        0 0 auto;

    display:
        grid;

    place-items:
        center;

    background:
        #25191a;

    border:
        1px solid #4d282b;

    color:
        #d26167;

    font-size:
        22px;
}


.upload-copy h3 {
    margin:
        0;

    font-size:
        17px;
}


.upload-copy p {
    margin:
        4px 0 0;

    color:
        var(--text-muted);

    font-size:
        13px;
}


.upload-controls {
    display:
        flex;

    gap:
        10px;

    align-items:
        center;
}


input[type="file"] {
    display:
        none;
}


.file-picker {
    user-select:
        none;
}


.upload-status {
    grid-column:
        1 / -1;

    min-height:
        22px;

    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        13px;
}


/* ==========================================================
   VIDEO LIBRARY
========================================================== */

.video-library {
    border-bottom:
        0;
}


.video-status {
    min-height:
        24px;

    margin:
        0 0 24px;

    color:
        var(--text-secondary);

    text-align:
        center;
}


.video-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        22px;
}


/*
main.js dynamically creates:

<div class="video-card">
    <h3>filename.mp4</h3>
    <video>...</video>
</div>
*/

.video-card {
    min-width:
        0;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    overflow:
        hidden;

    transition:
        border-color 160ms ease,
        transform 160ms ease;
}


.video-card:hover {
    border-color:
        #4a4e52;

    transform:
        translateY(-2px);
}


.video-card h3 {
    margin:
        0;

    padding:
        16px 16px 14px;

    border-bottom:
        1px solid var(--border);

    font-size:
        14px;

    font-weight:
        600;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.video-card video {
    display:
        block;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    background:
        #000;

    object-fit:
        contain;
}


/* ==========================================================
   PAGINATION
========================================================== */

.pagination {
    margin-top:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;
}


.pagination-button {
    min-width:
        112px;
}


.page-number {
    min-width:
        70px;

    color:
        var(--text-secondary);

    font-size:
        13px;

    text-align:
        center;
}


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

.site-footer {
    margin-top:
        30px;

    border-top:
        1px solid var(--border);

    background:
        #0d0e0f;
}


.footer-inner {
    width:
        min(
            calc(100% - 40px),
            var(--max-width)
        );

    margin:
        0 auto;

    padding:
        38px 0;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        24px;
}


.footer-inner strong {
    font-size:
        14px;
}


.footer-inner p {
    margin:
        5px 0 0;

    color:
        var(--text-muted);

    font-size:
        12px;
}


.footer-tech {
    text-align:
        right;
}


/* ==========================================================
   RESPONSIVE - TABLET
========================================================== */

@media (
    max-width: 900px
) {

    .hero {
        grid-template-columns:
            1fr;

        gap:
            52px;

        padding:
            72px 0;
    }


    .architecture-card {
        max-width:
            620px;
    }


    .section-heading {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .upload-panel {
        grid-template-columns:
            1fr;
    }


    .upload-controls {
        justify-content:
            flex-start;
    }


    .video-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* ==========================================================
   RESPONSIVE - MOBILE
========================================================== */

@media (
    max-width: 620px
) {

    .header-inner {
        width:
            min(
                calc(100% - 28px),
                var(--max-width)
            );

        min-height:
            64px;
    }


    .brand-name {
        display:
            none;
    }


    .auth-status {
        display:
            none;
    }


    main {
        width:
            min(
                calc(100% - 28px),
                var(--max-width)
            );
    }


    .hero {
        min-height:
            auto;

        padding:
            58px 0;
    }


    .hero h1 {
        font-size:
            42px;
    }


    .hero-description {
        font-size:
            15px;
    }


    .technology-list {
        gap:
            6px;
    }


    .content-section {
        padding:
            64px 0;
    }


    .section-heading {
        margin-bottom:
            28px;
    }


    .section-heading h2 {
        font-size:
            32px;
    }


    .intro-panel {
        padding:
            8px;
    }


    .upload-panel {
        padding:
            22px;
    }


    .upload-copy {
        align-items:
            flex-start;
    }


    .upload-controls {
        width:
            100%;

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .upload-controls .button {
        width:
            100%;
    }


    .video-grid {
        grid-template-columns:
            1fr;
    }


    .pagination {
        gap:
            10px;
    }


    .pagination-button {
        min-width:
            auto;

        padding:
            0 13px;
    }


    .footer-inner {
        width:
            min(
                calc(100% - 28px),
                var(--max-width)
            );

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .footer-tech {
        text-align:
            left;
    }

}