:root {

    /* ====================================================================== */
    /* MACHINE BODY                                                           */
    /* ====================================================================== */

    --bg-top: #1a1d1a;
    --bg-bottom: #0f110f;

    --glass-dark: #121512;
    --glass: #181c18;
    --glass-light: #232923;

    /* ====================================================================== */
    /* CRT PHOSPHOR                                                           */
    /* ====================================================================== */

    --phosphor: #b3ff00;

    --phosphor-bright: #eeffd1;
    --phosphor-soft: #d2e8a4;
    --phosphor-dim: #89a36a;
    --phosphor-dark: #55684a;

    /* ====================================================================== */
    /* COMPUTER PLASTIC                                                       */
    /* ====================================================================== */

    --beige-top: #e1d9cb;
    --beige: #ccc1ad;
    --beige-bottom: #b4a793;

    --beige-shadow: #7f7464;

    /* ====================================================================== */
    /* TEXT                                                                    */
    /* ====================================================================== */

    --text: #d8dcc7;
    --text-soft: #aaa990;
    --text-faint: #767461;

    /* ====================================================================== */
    /* STRUCTURE                                                               */
    /* ====================================================================== */

    --panel-top: #242823;
    --panel-bottom: #1a1d19;

    --border: rgba(255,255,255,.06);
    --border-strong: rgba(255,255,255,.10);

    /* ====================================================================== */

    --max-width: 1240px;

    --radius: 999px;
    --transition: .20s ease;
}

/* ====================================================================== */
/* RESET                                                                  */
/* ====================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    font-family:
        IBMVGA,
        IBMVGA437,
        Arial,
        sans-serif;

    color: var(--text);
    background:

        radial-gradient(
            ellipse at top center,
            rgba(152,255,90,.05),
            transparent 45%
        ),

        radial-gradient(
            ellipse at center,
            rgba(152,255,90,.015),
            transparent 70%
        ),

        linear-gradient(
            180deg,
            var(--bg-top),
            var(--bg-bottom)
        );

    line-height: 1;

    -webkit-font-smoothing: antialiased;

    text-shadow:
        0 0 1px rgba(152,255,90,.08);
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: var(--currentColor);
    text-decoration: underline;
}

p.warning {
  border: 2px solid var(--phosphor);
  border-radius: 5px;
  padding: 20px;
}

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

.page {
    min-height: 100vh;
}

.container {

    width: min(
        calc(100% - 60px),
        var(--max-width)
    );

    margin-inline: auto;
}


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

.header {

    position: sticky;
    top: 0;
    z-index: 100;

    background:

        linear-gradient(
            180deg,
            var(--beige-top),
            var(--beige)
        );

    border-bottom:
        1px solid rgba(0,0,0,.15);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.75),

        inset 0 -1px 0 rgba(0,0,0,.08),

        0 4px 16px rgba(0,0,0,.12);
}

.header-inner {

    height: 70px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header a {
    color: #2e2b28;
    text-decoration: none;
}
.brand {

    display: flex;
    align-items: center;
    gap: 14px;

    color: #2e2b28;

    font-weight: 700;
    font-size: 1.9rem;
    letter-spacing: .04em;
}

.logo {
    width: 48px;
    height: 48px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    font-family:
    IBMVGA,IBMVGA437, serif;

    color: var(--phosphor);

    background-image:
        url("./assets/cyberpunk_logo_small.svg");

    background-size:
        cover;

    background-position:
        center,
        center;

    background-repeat:
        no-repeat;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.08),

        0 2px 6px rgba(0,0,0,.4);
}

.nav {

    display: flex;
    gap: 30px;

    color: #4a4741;

    text-transform: uppercase;

    letter-spacing: .14em;

    font-size: 1.2rem;

    font-weight: 700;
}

.nav a {

    position: relative;

    transition: var(--transition);
}

.nav a:hover {
    color: #111;
}


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

.main {
    padding: 90px 0 130px;
}


/* ====================================================================== */
/* IMAGE CAROUSEL                                                          */
/* ====================================================================== */

.carousel-shell {
    margin-bottom: 90px;
}

.carousel {
    position: relative;
}

.carousel-image {

    width: min(100%, 600px);
    margin-inline: auto;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    object-fit: cover;


    /*box-shadow:

        0 0 0 1px rgba(152,255,90,.05),

        0 25px 70px rgba(0,0,0,.55);*/
}

.carousel-button {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 48px;
    height: 48px;

    border: none;
    border-radius: 50%;

    cursor: pointer;

    color: var(--phosphor);

    font-size: 1.4rem;

    background:

        linear-gradient(
            180deg,
            rgba(24,34,26,.95),
            rgba(10,14,11,.95)
        );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.05),

        0 3px 10px rgba(0,0,0,.55);

    transition: var(--transition);
}

.carousel-button:hover {

    color: var(--phosphor-bright);

    box-shadow:

        0 0 10px rgba(152,255,90,.18),

        0 3px 10px rgba(0,0,0,.55);
}

.prev {
    left: 24px;
}

.next {
    right: 24px;
}

.carousel-caption {

    margin-top: 22px;

    text-align: center;

    color: var(--text-faint);

    font-size: 1.95rem;
}

.dots {

    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: 20px;
}

.dot {

    width: 8px;
    height: 8px;

    border: none;
    border-radius: 50%;

    background: rgba(152,255,90,.15);

    cursor: pointer;
}

.dot.active {

    background: var(--phosphor);

    box-shadow:

        0 0 5px rgba(152,255,90,.4),

        0 0 14px rgba(152,255,90,.15);
}


/* ====================================================================== */
/* CONTENT                                                                 */
/* ====================================================================== */
/* ===================================================================== */
/* GENERIC SECTIONS                                                      */
/* ===================================================================== */

.content-block {

    max-width: 1100px;
    font-size: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 120px;
}

.content-block:last-child {
    margin-bottom: 0;
}


/* ===================================================================== */
/* GENERIC ROW                                                           */
/* ===================================================================== */

.section-row {

    display: grid;

    gap: 40px;

    margin-top: 60px;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px, 1fr)
        );
}

.section-row:first-of-type {
    margin-top: 40px;
}


/* ===================================================================== */
/* GENERIC COLUMN                                                        */
/* ===================================================================== */

.section-column {

    text-align: left;

    max-width: none;

    margin: 0;
}

.section-column .title {

    font-size: clamp(
        2rem,
        4vw,
        3.5rem
    );

    margin-bottom: 16px;
}

.section-column .description {

    margin-top: 0;

    max-width: none;
}

.section-column .actions {

    justify-content: flex-start;
}


/* ===================================================================== */
/* IMAGE BLOCK                                                           */
/* ===================================================================== */

.content-image {

    width: 100%;

    display: block;

    object-fit: cover;

    box-shadow:

        0 0 0 1px rgba(152,255,90,.05),

        0 15px 40px rgba(0,0,0,.45);
}

.content-image-caption {

    margin-top: 12px;

    color: var(--text-faint);

    font-size: .9rem;
}


/* ===================================================================== */
/* FEATURE LIST                                                          */
/* ===================================================================== */

.feature-list {

    display: flex;
    flex-direction: column;

    gap: 18px;

    margin-top: 24px;
}

.feature-item {

    display: flex;
    align-items: flex-start;

    gap: 12px;
}

.feature-item::before {

    content: "■";

    color: var(--phosphor);

    flex-shrink: 0;
}



/* ===================================================================== */
/* QUOTE BLOCK                                                           */
/* ===================================================================== */

.quote-block {

    padding-left: 24px;

    border-left:
        2px solid rgba(152,255,90,.25);

    color: var(--phosphor-soft);

    font-style: italic;
}

.quote-author {

    margin-top: 12px;

    color: var(--text-faint);

    font-style: normal;
}


/* ===================================================================== */
/* SEPARATOR                                                             */
/* ===================================================================== */

.section-separator {

    height: 1px;

    margin: 100px 0;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(152,255,90,.15),
            transparent
        );
}


/* ===================================================================== */
/* GENERIC CARD                                                          */
/* ===================================================================== */

.panel {

    padding: 24px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.015),
            rgba(255,255,255,.005)
        );

    border:
        1px solid rgba(152,255,90,.08);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.02),

        0 10px 30px rgba(0,0,0,.20);
}


/* ===================================================================== */
/* WIDE SECTION                                                          */
/* ===================================================================== */

.section-wide {

    max-width: none;
}


/* ===================================================================== */
/* NARROW SECTION                                                        */
/* ===================================================================== */

.section-narrow {

    max-width: 800px;
}


/* ===================================================================== */
/* COLUMN SPAN                                                           */
/* ===================================================================== */

.span-2 {
    grid-column: span 2;
}

.span-3 {
    grid-column: span 3;
}

.span-full {
    grid-column: 1 / -1;
}


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

.actions {

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 46px;
}

.button {

    padding: 14px 26px;

    border-radius: var(--radius);

    color: #1d1a16;

    font-weight: 700;

    background:

        linear-gradient(
            180deg,
            var(--beige-top),
            var(--beige)
        );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.7),

        inset 0 -1px 0 rgba(0,0,0,.08),

        0 3px 10px rgba(0,0,0,.15);

    transition: var(--transition);
}

.button:hover {

    transform: translateY(-1px);

    background:

        linear-gradient(
            180deg,
            #e6dfd0,
            #d3c8b4
        );
}

.button.secondary {

    background: transparent;

    color: var(--phosphor);

    border: 1px solid rgba(152,255,90,.18);

    box-shadow: none;
}

.button.secondary:hover {

    border-color: rgba(152,255,90,.45);

    background: rgba(152,255,90,.03);
}

code {
    display: inline-block;

    padding: 0.15em 0.45em;

    font-family:
        IBMVGA,
        IBMVGA437,
        "Courier New",
        monospace;

    font-size: 0.95em;

    color: var(--phosphor-soft);

    background:
        linear-gradient(
            180deg,
            rgba(20,24,20,.95),
            rgba(12,15,12,.95)
        );

    border:
        1px solid rgba(179,255,0,.15);

    border-radius: 3px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03);

    text-shadow:
        0 0 2px rgba(179,255,0,.15);
}
/* ====================================================================== */
/* FOOTER                                                                  */
/* ====================================================================== */

.footer {

    margin-top: 110px;

    padding: 60px 0;

    border-top:
        1px solid rgba(152,255,90,.08);
}

.footer-grid {

    display: flex;
    justify-content: space-between;

    gap: 40px;
}

.footer strong {

    display: block;

    margin-bottom: 6px;

    color: var(--phosphor-bright);
}

.footer p,
.footer span {
    color: var(--text-faint);
}

.socials {

    display: flex;
    flex-wrap: wrap;

    gap: 18px;
}

.socials a {

    color: var(--text-faint);

    transition: var(--transition);
}

.socials a:hover {

    color: var(--phosphor-bright);

    text-shadow:
        0 0 6px rgba(152,255,90,.15);
}

.spoiler {
    transition: .15s ease;
}

.spoiler-hidden {
    filter: blur(0.35em);
    user-select: none;
    cursor: pointer;
}

.spoiler-hidden:hover {
    filter: blur(0.25em);
}

/* ====================================================================== */
/* MOBILE                                                                  */
/* ====================================================================== */

@media (max-width: 900px) {

    .container {
        width: min(
            calc(100% - 32px),
            var(--max-width)
        );
    }

    .header-inner {

        height: auto;

        padding: 20px 0;

        flex-direction: column;

        gap: 18px;
    }

    .nav {

        flex-wrap: wrap;

        justify-content: center;
    }

    .footer-grid {
        flex-direction: column;
    }

    .main {
        padding-top: 50px;
    }

    .carousel-button {

        width: 40px;
        height: 40px;
    }

    .title {

        font-size: clamp(
            3rem,
            12vw,
            5rem
        );
    }
    .section-row {

        grid-template-columns: 1fr;

        gap: 32px;
    }

    .span-2,
    .span-3,
    .span-full {

        grid-column: auto;
    }

    .section-column .actions {

        justify-content: center;
    }

    .section-column {

        text-align: center;
    }
}