/* =========================================================
   ROOT
========================================================= */

:root {

    --bg: #020806;
    --bg-soft: #04100b;

    --green: #00ff88;
    --green-bright: #16ff9a;
    --green-soft: rgba(0, 255, 136, 0.45);
    --green-faint: rgba(0, 255, 136, 0.10);

    --cyan: #9af8e0;

    --text: #dceadd;
    --text-soft: #9aae9f;
    --text-dim: #5f7264;

    --panel: rgba(2, 18, 12, 0.82);
    --panel-strong: rgba(3, 24, 15, 0.90);

    --border: rgba(0, 255, 136, 0.18);
    --border-bright: rgba(0, 255, 136, 0.42);

    --mono:
        "Courier New",
        Courier,
        monospace;
}


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

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


html {
    scroll-behavior: smooth;

    scroll-snap-type: y mandatory;

    background:
        var(--bg);
}


body {
    min-width: 320px;

    color:
        var(--text);

    font-family:
        var(--mono);

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(
                0,
                255,
                136,
                0.045
            ),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            #020604 0%,
            #03100a 45%,
            #020604 100%
        );

    overflow-x: hidden;

}


body,
button,
a {
    -webkit-tap-highlight-color:
        transparent;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


button {
    font:
        inherit;
}


img {
    max-width:
        100%;
}


/* =========================================================
   SCREEN EFFECTS
========================================================= */

.screen-noise {

    position:
        fixed;

    inset:
        0;

    z-index:
        9998;

    pointer-events:
        none;

    opacity:
        0.11;

    background-image:

        url(
            "data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"
        );

    mix-blend-mode:
        screen;

}


.screen-scanlines {

    position:
        fixed;

    inset:
        0;

    z-index:
        9997;

    pointer-events:
        none;

    background:

        repeating-linear-gradient(
            to bottom,
            rgba(
                255,
                255,
                255,
                0.015
            ) 0,
            rgba(
                255,
                255,
                255,
                0.015
            ) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity:
        0.30;

}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {

    position:
        fixed;

    top:
        0;

    left:
        0;

    right:
        0;

    z-index:
        1000;

    height:
        72px;

    padding:
        0
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-bottom:
        1px solid
        rgba(
            0,
            255,
            136,
            0.08
        );

    background:
        rgba(
            2,
            8,
            6,
            0.94
        );

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

}


.terminal-logo {

    display:
        inline-flex;

    align-items:
        center;

    color:
        #c8ddcc;

    font-size:
        20px;

    font-weight:
        700;

    letter-spacing:
        0.4px;

}


.logo-cursor {

    color:
        var(--green);

    animation:
        cursor-blink
        1s
        steps(2, start)
        infinite;

}


/* =========================================================
   TOP RIGHT GREEN SECTION BARS
========================================================= */

.section-progress {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

}


.section-progress-bar {

    width:
        4px;

    height:
        16px;

    display:
        block;

    border-radius:
        20px;

    background:
        rgba(
            0,
            255,
            136,
            0.26
        );

    box-shadow:
        none;

    transition:
        height 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;

}


.section-progress-bar:hover {

    background:
        rgba(
            0,
            255,
            136,
            0.60
        );

    transform:
        scaleX(1.2);

}


.section-progress-bar.active {

    height:
        30px;

    background:
        var(--green);

    box-shadow:
        0 0 12px
        rgba(
            0,
            255,
            136,
            0.30
        );

}


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

.section {

    position:
        relative;

    width:
        100%;

    min-height:
        100svh;

    padding:
        100px
        7vw
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    scroll-snap-align:
        start;

    scroll-snap-stop:
        always;

}


.home-section {

    min-height:
        100svh;

}


.data-section {

    overflow:
        hidden;

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.home-section .home-inner,
.data-section .section-shell {

    opacity:
        0;

    transform:
        translateY(30px);

    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


.home-section.section-visible .home-inner,
.data-section.section-visible .section-shell {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================================
   SECTION SHELL
========================================================= */

.section-shell {

    width:
        100%;

    max-width:
        1060px;

    margin:
        0
        auto;

    display:
        grid;

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

    gap:
        18px;

}


/* =========================================================
   TOPLINE
========================================================= */

.section-topline {

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        18px;

    color:
        var(--green);

    font-size:
        13px;

    letter-spacing:
        2px;

}


.section-number {

    font-weight:
        700;

}


.topline-line {

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(
                0,
                255,
                136,
                0.42
            ),
            rgba(
                0,
                255,
                136,
                0.05
            )
        );

}


.page-counter {

    color:
        var(--text-dim);

    white-space:
        nowrap;

}


/* =========================================================
   FILE HEADING
========================================================= */

.file-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        rgba(
            0,
            255,
            136,
            0.72
        );

    font-size:
        15px;

    letter-spacing:
        1.5px;

}


.file-dot {

    width:
        8px;

    height:
        8px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 12px
        var(--green-soft);

}


/* =========================================================
   HOME
========================================================= */

.home-inner {

    width:
        min(
            100%,
            760px
        );

    margin:
        0
        auto;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

}


.avatar-frame {

    position:
        relative;

    width:
        230px;

    height:
        230px;

    margin-bottom:
        22px;

    padding:
        9px;

    border:
        1px solid
        rgba(
            0,
            255,
            136,
            0.33
        );

    border-radius:
        13px;

    background:
        rgba(
            0,
            20,
            12,
            0.62
        );

    box-shadow:
        0 0 60px
        rgba(
            0,
            255,
            136,
            0.08
        );

    animation:
        avatar-enter
        1.1s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        )
        both;

}


.avatar-image {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    border-radius:
        5px;

    filter:
        saturate(0.72)
        contrast(1.12)
        brightness(0.82);

    background:
        #03100a;

    user-select:
        none;

}


.avatar-glow {

    position:
        absolute;

    inset:
        -14px;

    pointer-events:
        none;

    border-radius:
        18px;

    background:
        radial-gradient(
            circle,
            rgba(
                0,
                255,
                136,
                0.08
            ),
            transparent 65%
        );

    filter:
        blur(10px);

    z-index:
        -1;

}


.frame-corner {

    position:
        absolute;

    width:
        33px;

    height:
        33px;

    pointer-events:
        none;

    z-index:
        2;

}


.frame-top-left {

    top:
        -1px;

    left:
        -1px;

    border-top:
        3px solid
        var(--green);

    border-left:
        3px solid
        var(--green);

}


.frame-top-right {

    top:
        -1px;

    right:
        -1px;

    border-top:
        3px solid
        var(--green);

    border-right:
        3px solid
        var(--green);

}


.frame-bottom-left {

    bottom:
        -1px;

    left:
        -1px;

    border-bottom:
        3px solid
        var(--green);

    border-left:
        3px solid
        var(--green);

}


.frame-bottom-right {

    bottom:
        -1px;

    right:
        -1px;

    border-bottom:
        3px solid
        var(--green);

    border-right:
        3px solid
        var(--green);

}


.record-status {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        27px;

    color:
        rgba(
            143,
            165,
            148,
            0.50
        );

    font-size:
        12px;

    letter-spacing:
        4px;

}


.record-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #e73055;

    box-shadow:
        0 0 8px
        rgba(
            231,
            48,
            85,
            0.38
        );

    animation:
        rec-pulse
        1.7s
        ease-in-out
        infinite;

}


.home-copy {

    animation:
        content-enter
        1.3s
        0.15s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        )
        both;

}


.boot-label {

    margin-bottom:
        13px;

    color:
        var(--green);

    font-size:
        15px;

    font-weight:
        700;

    letter-spacing:
        4px;

}


.hero-name {

    margin-bottom:
        24px;

    color:
        var(--cyan);

    font-size:
        clamp(
            54px,
            9vw,
            92px
        );

    line-height:
        0.95;

    letter-spacing:
        -3px;

}


.hero-description {

    max-width:
        700px;

    margin:
        0
        auto
        29px;

    color:
        rgba(
            176,
            193,
            180,
            0.62
        );

    font-size:
        16px;

    line-height:
        1.8;

}


.terminal-button {

    min-width:
        168px;

    padding:
        14px
        22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

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

    border-radius:
        7px;

    color:
        var(--green);

    background:
        rgba(
            0,
            255,
            136,
            0.025
        );

    box-shadow:
        0 0 22px
        rgba(
            0,
            255,
            136,
            0.03
        );

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;

}


.terminal-button:hover {

    transform:
        translateY(-2px);

    background:
        rgba(
            0,
            255,
            136,
            0.07
        );

    box-shadow:
        0 0 26px
        rgba(
            0,
            255,
            136,
            0.08
        );

}


.button-symbol {

    color:
        var(--text-dim);

}


/* =========================================================
   SLIDERS
========================================================= */

.slider-viewport {

    min-width:
        0;

    min-height:
        0;

    width:
        100%;

    overflow:
        hidden;

    touch-action:
        pan-y;

    cursor:
        grab;

    user-select:
        none;

}


.slider-viewport.is-dragging {

    cursor:
        grabbing;

}


.slider-track {

    width:
        100%;

    display:
        flex;

    align-items:
        stretch;

    transition:
        transform
        0.55s
        cubic-bezier(
            .77,
            0,
            .175,
            1
        );

    will-change:
        transform;

}


.slider-viewport.is-dragging
.slider-track {

    transition:
        none;

}


.slider-page {

    min-width:
        100%;

    flex:
        0 0 100%;

    padding:
        5px
        0
        4px;

    opacity:
        0.35;

    transition:
        opacity
        0.3s ease;

}


.slider-page.is-active {

    opacity:
        1;

}


/* =========================================================
   ABOUT
========================================================= */

.about-grid {

    width:
        100%;

    display:
        grid;

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

    gap:
        14px;

}


.terminal-card {

    min-height:
        108px;

    padding:
        22px
        20px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            0,
            255,
            136,
            0.10
        );

    border-radius:
        7px;

    background:
        linear-gradient(
            180deg,
            rgba(
                2,
                24,
                15,
                0.78
            ),
            rgba(
                1,
                18,
                12,
                0.72
            )
        );

    box-shadow:
        inset
        0 0 0 1px
        rgba(
            0,
            255,
            136,
            0.015
        );

    transition:
        border-color 0.25s ease,
        transform 0.25s ease,
        background 0.25s ease;

}


.terminal-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(
            0,
            255,
            136,
            0.28
        );

    background:
        rgba(
            3,
            25,
            15,
            0.90
        );

}


.card-label {

    margin-bottom:
        10px;

    color:
        rgba(
            106,
            129,
            114,
            0.55
        );

    font-size:
        11px;

    letter-spacing:
        2px;

}


.terminal-card strong {

    color:
        #b9cfbd;

    font-size:
        16px;

    line-height:
        1.4;

    font-weight:
        700;

}


.timezone-card small {

    margin-top:
        3px;

    color:
        rgba(
            99,
            119,
            106,
            0.60
        );

    font-size:
        9px;

    letter-spacing:
        1.5px;

}


.digital-time {

    color:
        var(--green) !important;

    font-size:
        21px !important;

    letter-spacing:
        1px;

}


/* =========================================================
   SECONDARY PAGES
========================================================= */

.secondary-page-content,
.device-content,
.contact-content {

    width:
        100%;

    max-width:
        860px;

    margin:
        0
        auto;

}


.secondary-title {

    margin-bottom:
        14px;

    color:
        rgba(
            0,
            255,
            136,
            0.62
        );

    font-size:
        13px;

    letter-spacing:
        2px;

}


.terminal-panel {

    padding:
        18px;

    border:
        1px solid
        rgba(
            0,
            255,
            136,
            0.15
        );

    border-radius:
        8px;

    background:
        rgba(
            2,
            17,
            11,
            0.80
        );

}


.panel-heading {

    margin-bottom:
        13px;

    color:
        rgba(
            107,
            129,
            115,
            0.55
        );

    font-size:
        9px;

    letter-spacing:
        2px;

}


/* =========================================================
   WHITE GEAR ICONS
========================================================= */

.row-icon {

    width:
        23px;

    min-width:
        23px;

    height:
        23px;

    margin-right:
        9px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    color:
        #ffffff !important;

    background:
        transparent;

    font-family:
        "Segoe UI Emoji",
        "Apple Color Emoji",
        "Noto Color Emoji",
        sans-serif;

    font-size:
        16px;

    line-height:
        1;

    filter:
        grayscale(1)
        brightness(0)
        invert(1);

    opacity:
        0.96;

}


/* =========================================================
   LANGUAGES
========================================================= */

.language-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.language-row {

    min-height:
        49px;

    padding:
        0
        15px;

    display:
        flex;

    align-items:
        center;

    border:
        1px solid
        rgba(
            0,
            255,
            136,
            0.09
        );

    border-radius:
        7px;

    color:
        #bfd1c1;

    background:
        rgba(
            0,
            15,
            9,
            0.85
        );

    transition:
        border-color 0.25s ease,
        transform 0.25s ease;

}


.language-row:hover {

    transform:
        translateX(4px);

    border-color:
        rgba(
            0,
            255,
            136,
            0.25
        );

}


.favorite-panel {

    min-height:
        64px;

    margin-top:
        11px;

    padding:
        13px
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border:
        1px solid
        rgba(
            0,
            255,
            136,
            0.14
        );

    border-radius:
        7px;

    background:
        rgba(
            2,
            17,
            11,
            0.80
        );

    color:
        rgba(
            101,
            124,
            109,
            0.60
        );

    font-size:
        10px;

    letter-spacing:
        1.5px;

}


.favorite-panel strong {

    color:
        #c8ddd0;

    font-size:
        19px;

    line-height:
        1;

}


/* =========================================================
   TOOLS
========================================================= */

.tools-list {

    display:
        grid;

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

    gap:
        8px;

}


.tool-row {

    min-height:
        52px;

    padding:
        0
        15px;

    display:
        flex;

    align-items:
        center;

    border:
        1px solid
        rgba(
            0,
            255,
            136,
            0.10
        );

    border-radius:
        7px;

    color:
        #bfd1c1;

    background:
        rgba(
            0,
            15,
            9,
            0.84
        );

    transition:
        border-color 0.25s ease,
        transform 0.25s ease,
        background 0.25s ease;

}


.tool-row:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(
            0,
            255,
            136,
            0.24
        );

}


.tool-icon {

    width:
        20px;

    height:
        20px;

    flex:
        0 0 20px;

    margin-right:
        9px;

    display:
        block;

    object-fit:
        contain;

    filter:
        brightness(0)
        invert(1);

    opacity:
        0.95;

    user-select:
        none;

    pointer-events:
        none;

}


.tool-category {

    margin-left:
        auto;

    padding-left:
        10px;

    color:
        rgba(
            0,
            255,
            136,
            0.50
        );

    font-size:
        9px;

    letter-spacing:
        1px;

    white-space:
        nowrap;

}


/* =========================================================
   DEVICES
========================================================= */

.device-content h2,
.contact-content h2 {

    margin-bottom:
        18px;

    color:
        var(--cyan);

    font-size:
        clamp(
            42px,
            7vw,
            70px
        );

    line-height:
        1;

    letter-spacing:
        -2px;

}


.device-panel,
.contact-panel {

    width:
        100%;

    border:
        1px solid
        rgba(
            0,
            255,
            136,
            0.14
        );

    border-radius:
        8px;

    background:
        rgba(
            2,
            17,
            11,
            0.82
        );

    overflow:
        hidden;

}


.device-row,
.contact-row {

    min-height:
        68px;

    padding:
        15px
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    border-bottom:
        1px solid
        rgba(
            0,
            255,
            136,
            0.08
        );

}


.device-row:last-child,
.contact-row:last-child {

    border-bottom:
        0;

}


.device-row span,
.contact-row span {

    color:
        rgba(
            102,
            125,
            109,
            0.58
        );

    font-size:
        10px;

    letter-spacing:
        2px;

}


.device-row strong,
.contact-row strong {

    color:
        #c0d2c2;

    font-size:
        14px;

    text-align:
        right;

}


/* =========================================================
   CONTACT
========================================================= */

.contact-row {

    color:
        inherit;

    transition:
        background 0.25s ease,
        padding-left 0.25s ease;

}


.contact-row:hover {

    background:
        rgba(
            0,
            255,
            136,
            0.045
        );

    padding-left:
        25px;

}


.contact-row strong {

    max-width:
        68%;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/* =========================================================
   SLIDER CONTROLS
========================================================= */

.slider-controls {

    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        20px;

    padding-top:
        4px;

}


.slider-arrow {

    width:
        52px;

    height:
        52px;

    padding:
        0;

    border:
        1px solid
        rgba(
            0,
            255,
            136,
            0.25
        );

    border-radius:
        7px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(
            194,
            220,
            199,
            0.72
        );

    background:
        rgba(
            0,
            255,
            136,
            0.018
        );

    cursor:
        pointer;

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;

}


.slider-arrow:hover:not(:disabled) {

    transform:
        translateY(-2px);

    color:
        var(--green);

    border-color:
        rgba(
            0,
            255,
            136,
            0.46
        );

    background:
        rgba(
            0,
            255,
            136,
            0.05
        );

}


.slider-arrow:active:not(:disabled) {

    transform:
        scale(0.94);

}


.slider-arrow:disabled {

    opacity:
        0.25;

    cursor:
        default;

}


.slider-dots {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.slider-dot {

    width:
        8px;

    height:
        8px;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        rgba(
            137,
            156,
            143,
            0.42
        );

    cursor:
        pointer;

    transition:
        width 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;

}


.slider-dot.active {

    width:
        31px;

    border-radius:
        20px;

    background:
        var(--green);

    box-shadow:
        0 0 12px
        rgba(
            0,
            255,
            136,
            0.28
        );

}


/* =========================================================
   FINAL SECTION
   SAME GREEN TERMINAL STYLE
   NO STARS
   NO WHITE LINE
========================================================= */

.final-section {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        100svh;

    background:

        radial-gradient(
            circle at 50% 35%,
            rgba(
                0,
                255,
                136,
                0.065
            ),
            transparent 30%
        ),

        radial-gradient(
            circle at 20px 20px,
            rgba(
                0,
                255,
                136,
                0.025
            ) 1px,
            transparent 1px
        ),

        linear-gradient(
            180deg,
            #020604 0%,
            #03100a 50%,
            #020604 100%
        );

    background-size:
        auto,
        45px 45px,
        auto;

}


/*
    Важно:
    здесь НЕТ ::before
    с белой линией.
*/


.final-content {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            100%,
            430px
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

}


.final-up-button {

    position:
        relative;

    z-index:
        3;

    width:
        70px;

    height:
        70px;

    margin-bottom:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            0,
            255,
            136,
            0.22
        );

    border-radius:
        50%;

    background:
        rgba(
            2,
            18,
            12,
            0.84
        );

    box-shadow:
        0 0 30px
        rgba(
            0,
            255,
            136,
            0.05
        );

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;

}


.final-up-button:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(
            0,
            255,
            136,
            0.48
        );

    background:
        rgba(
            0,
            255,
            136,
            0.05
        );

    box-shadow:
        0 0 35px
        rgba(
            0,
            255,
            136,
            0.12
        );

}


.final-up-button svg {

    width:
        32px;

    height:
        32px;

    fill:
        none;

    stroke:
        var(--green);

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.final-content h2 {

    margin-bottom:
        12px;

    color:
        #dceadd;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        58px;

    font-weight:
        800;

    letter-spacing:
        -3px;

    text-shadow:
        0 0 22px
        rgba(
            0,
            255,
            136,
            0.06
        );

}


.final-copy {

    margin-bottom:
        34px;

    color:
        #718579;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        16px;

}


/* =========================================================
   FINAL MENU
========================================================= */

.final-menu {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        10px;

}


.final-menu-button {

    width:
        165px;

    min-height:
        58px;

    padding:
        0
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    border:
        1px solid
        rgba(
            0,
            255,
            136,
            0.13
        );

    border-radius:
        10px;

    background:
        rgba(
            2,
            18,
            12,
            0.76
        );

    color:
        #9eb2a4;

    font-family:
        var(--mono);

    font-size:
        15px;

    font-weight:
        700;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;

}


.final-menu-button:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(
            0,
            255,
            136,
            0.34
        );

    background:
        rgba(
            0,
            255,
            136,
            0.045
        );

    color:
        #d5e6d9;

    box-shadow:
        0 0 20px
        rgba(
            0,
            255,
            136,
            0.05
        );

}


.final-menu-icon {

    width:
        26px;

    height:
        26px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.final-menu-icon svg {

    width:
        22px;

    height:
        22px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


/* =========================================================
   FINAL BADGE
========================================================= */

.final-terminal-badge {

    position:
        absolute;

    left:
        16px;

    bottom:
        72px;

    z-index:
        3;

    width:
        70px;

    height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            0,
            255,
            136,
            0.20
        );

    border-radius:
        50%;

    color:
        var(--green);

    background:
        rgba(
            0,
            15,
            9,
            0.76
        );

    font-family:
        var(--mono);

    font-size:
        17px;

    box-shadow:
        0 0 25px
        rgba(
            0,
            255,
            136,
            0.04
        );

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;

}


.final-terminal-badge:hover {

    transform:
        scale(1.05);

    background:
        rgba(
            0,
            255,
            136,
            0.045
        );

    border-color:
        rgba(
            0,
            255,
            136,
            0.40
        );

}


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

.footer {

    padding:
        38px
        20px;

    border-top:
        1px solid
        rgba(
            0,
            255,
            136,
            0.07
        );

    text-align:
        center;

}


.footer-line {

    margin-bottom:
        8px;

    color:
        #a7bdac;

    font-size:
        16px;

}


.footer p {

    color:
        rgba(
            93,
            114,
            99,
            0.56
        );

    font-size:
        10px;

    letter-spacing:
        1px;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes cursor-blink {

    0%,
    48% {
        opacity:
            1;
    }

    49%,
    100% {
        opacity:
            0;
    }

}


@keyframes rec-pulse {

    0%,
    100% {
        opacity:
            1;
    }

    50% {
        opacity:
            0.35;
    }

}


@keyframes avatar-enter {

    from {

        opacity:
            0;

        transform:
            translateY(20px)
            scale(0.96);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes content-enter {

    from {

        opacity:
            0;

        transform:
            translateY(18px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes card-enter {

    from {

        opacity:
            0;

        transform:
            translateY(10px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .section {

        padding:
            95px
            34px
            50px;

    }

    .section-shell {

        max-width:
            760px;

    }

    .about-grid {

        gap:
            10px;

    }

    .terminal-card {

        min-height:
            100px;

    }

}


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

@media (max-width: 768px) {

    html {

        scroll-snap-type:
            y mandatory;

    }


    body {

        overscroll-behavior-y:
            contain;

    }


    /* HEADER */

    .topbar {

        height:
            72px;

        padding:
            0
            20px;

    }


    .terminal-logo {

        font-size:
            19px;

    }


    .section-progress {

        gap:
            6px;

    }


    .section-progress-bar {

        width:
            4px;

        height:
            15px;

    }


    .section-progress-bar.active {

        height:
            25px;

    }


    /* SECTION */

    .section {

        width:
            100%;

        height:
            100svh;

        min-height:
            100svh;

        max-height:
            100svh;

        padding:
            94px
            18px
            22px;

    }


    /* HOME */

    .avatar-frame {

        width:
            230px;

        height:
            230px;

        margin-bottom:
            20px;

    }


    .record-status {

        margin-bottom:
            26px;

        font-size:
            11px;

    }


    .boot-label {

        margin-bottom:
            12px;

        font-size:
            13px;

        letter-spacing:
            3px;

    }


    .hero-name {

        margin-bottom:
            21px;

        font-size:
            clamp(
                48px,
                16vw,
                76px
            );

        letter-spacing:
            -2px;

    }


    .hero-description {

        max-width:
            390px;

        margin-bottom:
            26px;

        font-size:
            14px;

        line-height:
            1.9;

    }


    .terminal-button {

        min-height:
            54px;

        padding:
            0
            20px;

        font-size:
            14px;

    }


    /* SECTION HEADER */

    .section-shell {

        height:
            100%;

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

        gap:
            12px;

    }


    .section-topline {

        gap:
            10px;

        font-size:
            11px;

        letter-spacing:
            1.5px;

    }


    .page-counter {

        font-size:
            10px;

    }


    .file-heading {

        font-size:
            13px;

        letter-spacing:
            1px;

    }


    .file-dot {

        width:
            7px;

        height:
            7px;

    }


    /* SLIDER */

    .slider-viewport {

        min-height:
            0;

        display:
            flex;

        align-items:
            center;

        cursor:
            default;

    }


    .slider-page {

        min-height:
            0;

    }


    .slider-controls {

        min-height:
            50px;

        gap:
            14px;

        padding-top:
            3px;

    }


    .slider-arrow {

        width:
            51px;

        height:
            51px;

        font-size:
            15px;

    }


    /* ABOUT */

    .about-grid {

        width:
            100%;

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

        gap:
            8px;

    }


    .terminal-card {

        min-height:
            86px;

        padding:
            16px
            14px;

        border-radius:
            6px;

    }


    .card-label {

        margin-bottom:
            7px;

        font-size:
            8px;

        letter-spacing:
            1.5px;

    }


    .terminal-card strong {

        font-size:
            13px;

        line-height:
            1.35;

    }


    /* LANGUAGES */

    .secondary-title {

        margin-bottom:
            10px;

        font-size:
            11px;

        letter-spacing:
            1.5px;

    }


    .terminal-panel {

        padding:
            11px;

        border-radius:
            7px;

    }


    .panel-heading {

        margin-bottom:
            8px;

        font-size:
            8px;

        letter-spacing:
            1.5px;

    }


    .language-list {

        gap:
            6px;

    }


    .language-row {

        min-height:
            43px;

        padding:
            0
            10px;

        font-size:
            12px;

    }


    .row-icon {

        width:
            21px;

        min-width:
            21px;

        height:
            21px;

        margin-right:
            7px;

        font-size:
            14px;

    }


    .favorite-panel {

        min-height:
            47px;

        margin-top:
            8px;

        padding:
            8px
            10px;

        gap:
            10px;

    }


    .favorite-panel strong {

        font-size:
            16px;

    }


    /* TOOLS */

    .tools-panel {

        padding:
            12px;

    }


    .tools-list {

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

        gap:
            7px;

    }


    .tool-row {

        min-height:
            45px;

        padding:
            0
            8px;

        font-size:
            10.5px;

        border-radius:
            6px;

        white-space:
            nowrap;

    }


    .tool-icon {

        width:
            17px;

        height:
            17px;

        flex-basis:
            17px;

        margin-right:
            6px;

    }


    .tool-category {

        padding-left:
            5px;

        font-size:
            7px;

        letter-spacing:
            0.6px;

    }


    /* DEVICES */

    .device-content h2,
    .contact-content h2 {

        margin-bottom:
            14px;

        font-size:
            clamp(
                42px,
                13vw,
                64px
            );

        letter-spacing:
            -2px;

    }


    .device-row,
    .contact-row {

        min-height:
            56px;

        padding:
            12px
            13px;

        gap:
            12px;

    }


    .device-row span,
    .contact-row span {

        font-size:
            8px;

        letter-spacing:
            1.3px;

    }


    .device-row strong,
    .contact-row strong {

        max-width:
            58%;

        font-size:
            10.5px;

        line-height:
            1.35;

    }


    .contact-row strong {

        max-width:
            65%;

        text-align:
            right;

    }


    /* FINAL */

    .final-up-button {

        width:
            62px;

        height:
            62px;

        margin-bottom:
            32px;

    }


    .final-up-button svg {

        width:
            29px;

        height:
            29px;

    }


    .final-content h2 {

        font-size:
            52px;

    }


    .final-copy {

        margin-bottom:
            28px;

        font-size:
            14px;

    }


    .final-menu {

        gap:
            9px;

    }


    .final-menu-button {

        width:
            154px;

        min-height:
            54px;

        border-radius:
            10px;

        font-size:
            13px;

    }


    .final-terminal-badge {

        left:
            14px;

        bottom:
            48px;

        width:
            58px;

        height:
            58px;

        font-size:
            14px;

    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .topbar {

        padding:
            0
            17px;

    }


    .terminal-logo {

        font-size:
            18px;

    }


    .section-progress {

        gap:
            5px;

    }


    .section-progress-bar {

        width:
            3px;

        height:
            14px;

    }


    .section-progress-bar.active {

        height:
            22px;

    }


    .section {

        padding:
            91px
            14px
            18px;

    }


    .avatar-frame {

        width:
            207px;

        height:
            207px;

        margin-bottom:
            18px;

    }


    .record-status {

        margin-bottom:
            21px;

    }


    .boot-label {

        font-size:
            12px;

        letter-spacing:
            2.7px;

    }


    .hero-name {

        margin-bottom:
            18px;

        font-size:
            55px;

    }


    .hero-description {

        font-size:
            12.5px;

        line-height:
            1.82;

    }


    .terminal-button {

        min-height:
            51px;

        font-size:
            13px;

    }


    .section-topline {

        font-size:
            10px;

    }


    .file-heading {

        font-size:
            12px;

    }


    .about-grid {

        gap:
            6px;

    }


    .terminal-card {

        min-height:
            78px;

        padding:
            13px
            11px;

    }


    .card-label {

        font-size:
            7px;

        letter-spacing:
            1.2px;

    }


    .terminal-card strong {

        font-size:
            11px;

    }


    .digital-time {

        font-size:
            17px !important;

    }


    .language-row {

        min-height:
            40px;

        font-size:
            11px;

    }


    .row-icon {

        width:
            20px;

        min-width:
            20px;

        height:
            20px;

        margin-right:
            6px;

        font-size:
            12px;

    }


    .favorite-panel {

        min-height:
            43px;

    }


    .favorite-panel strong {

        font-size:
            15px;

    }


    .tool-row {

        min-height:
            42px;

        padding:
            0
            7px;

        font-size:
            9.8px;

    }


    .tool-icon {

        width:
            17px;

        height:
            17px;

        flex-basis:
            17px;

        margin-right:
            5px;

    }


    .tool-category {

        font-size:
            6.8px;

    }


    .device-row,
    .contact-row {

        min-height:
            52px;

        padding:
            10px
            11px;

    }


    .device-row strong,
    .contact-row strong {

        font-size:
            9.8px;

    }


    .slider-arrow {

        width:
            48px;

        height:
            48px;

    }


    /* FINAL SMALL PHONE */

    .final-up-button {

        width:
            58px;

        height:
            58px;

        margin-bottom:
            27px;

    }


    .final-content h2 {

        font-size:
            47px;

    }


    .final-copy {

        font-size:
            13px;

    }


    .final-menu-button {

        width:
            145px;

        min-height:
            51px;

        font-size:
            12px;

    }


    .final-terminal-badge {

        left:
            12px;

        bottom:
            34px;

        width:
            52px;

        height:
            52px;

    }

}

/* =========================================================
   MOBILE — LARGER INFO BLOCKS
   Skills / Devices / Contacts only
========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       SKILLS / TOOLS
    ===================================================== */

    .tools-panel {
        width: 100%;
        padding: 15px;
    }

    .tools-list {
        width: 100%;
        gap: 9px;
    }

    .tool-row {
        min-height: 58px;
        padding: 0 12px;

        font-size: 12px;
    }

    .tool-icon {
        width: 19px;
        height: 19px;
        flex-basis: 19px;

        margin-right: 8px;
    }

    .tool-category {
        padding-left: 7px;
        font-size: 8px;
        letter-spacing: 0.8px;
    }


    /* =====================================================
       DEVICES
    ===================================================== */

    .device-panel {
        width: 100%;
    }

    .device-row {
        min-height: 70px;
        padding: 15px 16px;

        gap: 14px;
    }

    .device-row span {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .device-row strong {
        max-width: 64%;

        font-size: 12px;
        line-height: 1.45;
    }


    /* =====================================================
       CONTACTS
    ===================================================== */

    .contact-panel {
        width: 100%;
    }

    .contact-row {
        min-height: 70px;
        padding: 15px 16px;

        gap: 14px;
    }

    .contact-row span {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .contact-row strong {
        max-width: 68%;

        font-size: 12px;
        line-height: 1.45;
    }

}


@media (max-width: 390px) {

    /* =====================================================
       SMALL PHONES
    ===================================================== */

    .tools-panel {
        padding: 14px;
    }

    .tools-list {
        gap: 8px;
    }

    .tool-row {
        min-height: 54px;
        padding: 0 10px;

        font-size: 11px;
    }

    .tool-icon {
        width: 18px;
        height: 18px;
        flex-basis: 18px;

        margin-right: 7px;
    }

    .tool-category {
        font-size: 7.5px;
    }


    .device-row,
    .contact-row {
        min-height: 66px;
        padding: 14px 14px;

        gap: 12px;
    }

    .device-row span,
    .contact-row span {
        font-size: 8.5px;
        letter-spacing: 1.3px;
    }

    .device-row strong,
    .contact-row strong {
        font-size: 11px;
        line-height: 1.4;
    }

}

/* =========================================================
   ACCESSIBILITY
========================================================= */

button:focus-visible,
a:focus-visible {

    outline:
        2px solid
        var(--green);

    outline-offset:
        3px;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

        scroll-snap-type:
            none;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;

    }

}

/* =========================================================
   DARK GRAPHITE OVERRIDE
   Visual redesign only — HTML / JS untouched
========================================================= */

:root {
    --bg: #050505;
    --bg-soft: #0a0a0a;

    --green: #d4d4d4;
    --green-bright: #f0f0f0;
    --green-soft: rgba(255, 255, 255, 0.22);
    --green-faint: rgba(255, 255, 255, 0.055);

    --cyan: #eeeeee;

    --text: #d0d0d0;
    --text-soft: #999999;
    --text-dim: #606060;

    --panel: rgba(15, 15, 15, 0.84);
    --panel-strong: rgba(20, 20, 20, 0.94);

    --border: rgba(255, 255, 255, 0.11);
    --border-bright: rgba(255, 255, 255, 0.30);
}


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

html {
    background: #050505;
}

body {
    color: #d0d0d0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 255, 255, 0.025),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #050505 0%,
            #090909 45%,
            #050505 100%
        );
}


/* =========================================================
   SCREEN EFFECTS
========================================================= */

.screen-noise {
    opacity: 0.08;
    mix-blend-mode: screen;
}

.screen-scanlines {
    opacity: 0.18;
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {
    border-bottom-color:
        rgba(255, 255, 255, 0.075);

    background:
        rgba(5, 5, 5, 0.94);
}

.terminal-logo {
    color: #d8d8d8;
}

.logo-cursor {
    color: #ffffff;
}


/* =========================================================
   SECTION PROGRESS
========================================================= */

.section-progress-bar {
    background:
        rgba(255, 255, 255, 0.16);
}

.section-progress-bar:hover {
    background:
        rgba(255, 255, 255, 0.42);
}

.section-progress-bar.active {
    background: #e5e5e5;

    box-shadow:
        0 0 12px
        rgba(255, 255, 255, 0.18);
}


/* =========================================================
   SECTION HEADERS
========================================================= */

.section-topline {
    color: #bdbdbd;
}

.topline-line {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0.035)
        );
}

.page-counter {
    color: #555555;
}

.file-heading {
    color: #aaaaaa;
}

.file-dot {
    background: #d0d0d0;

    box-shadow:
        0 0 12px
        rgba(255, 255, 255, 0.18);
}


/* =========================================================
   HOME
========================================================= */

.avatar-frame {
    border-color:
        rgba(255, 255, 255, 0.25);

    background:
        rgba(15, 15, 15, 0.72);

    box-shadow:
        0 0 60px
        rgba(255, 255, 255, 0.035);
}

.avatar-image {
    background: #0a0a0a;
}

.avatar-glow {
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.045),
            transparent 65%
        );
}

.frame-top-left,
.frame-top-right,
.frame-bottom-left,
.frame-bottom-right {
    border-color: #d8d8d8;
}

.record-status {
    color:
        rgba(170, 170, 170, 0.55);
}

.boot-label {
    color: #bdbdbd;
}

.hero-name {
    color: #eeeeee;
}

.hero-description {
    color:
        rgba(190, 190, 190, 0.62);
}


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

.terminal-button {
    border-color:
        rgba(255, 255, 255, 0.27);

    color: #d8d8d8;

    background:
        rgba(255, 255, 255, 0.018);

    box-shadow:
        0 0 22px
        rgba(255, 255, 255, 0.018);
}

.terminal-button:hover {
    background:
        rgba(255, 255, 255, 0.055);

    box-shadow:
        0 0 26px
        rgba(255, 255, 255, 0.055);
}

.button-symbol {
    color: #606060;
}


/* =========================================================
   SLIDER PAGES
========================================================= */

.slider-page {
    opacity: 0.32;
}

.slider-page.is-active {
    opacity: 1;
}


/* =========================================================
   CARDS
========================================================= */

.terminal-card {
    border-color:
        rgba(255, 255, 255, 0.085);

    background:
        linear-gradient(
            180deg,
            rgba(20, 20, 20, 0.82),
            rgba(13, 13, 13, 0.76)
        );

    box-shadow:
        inset
        0 0 0 1px
        rgba(255, 255, 255, 0.008);
}

.terminal-card:hover {
    border-color:
        rgba(255, 255, 255, 0.22);

    background:
        rgba(24, 24, 24, 0.92);
}

.card-label {
    color:
        rgba(140, 140, 140, 0.55);
}

.terminal-card strong {
    color: #cfcfcf;
}

.timezone-card small {
    color:
        rgba(125, 125, 125, 0.60);
}

.digital-time {
    color: #e0e0e0 !important;
}


/* =========================================================
   PANELS
========================================================= */

.secondary-title {
    color:
        rgba(190, 190, 190, 0.65);
}

.terminal-panel {
    border-color:
        rgba(255, 255, 255, 0.12);

    background:
        rgba(14, 14, 14, 0.84);
}

.panel-heading {
    color:
        rgba(135, 135, 135, 0.58);
}


/* =========================================================
   LANGUAGES
========================================================= */

.language-row {
    border-color:
        rgba(255, 255, 255, 0.075);

    color: #c3c3c3;

    background:
        rgba(11, 11, 11, 0.88);
}

.language-row:hover {
    border-color:
        rgba(255, 255, 255, 0.22);
}

.favorite-panel {
    border-color:
        rgba(255, 255, 255, 0.11);

    background:
        rgba(14, 14, 14, 0.84);

    color:
        rgba(130, 130, 130, 0.60);
}

.favorite-panel strong {
    color: #d0d0d0;
}


/* =========================================================
   TOOLS
========================================================= */

.tool-row {
    border-color:
        rgba(255, 255, 255, 0.08);

    color: #c3c3c3;

    background:
        rgba(11, 11, 11, 0.86);
}

.tool-row:hover {
    border-color:
        rgba(255, 255, 255, 0.21);

    background:
        rgba(20, 20, 20, 0.90);
}

.tool-category {
    color:
        rgba(180, 180, 180, 0.50);
}


/* =========================================================
   DEVICES / CONTACT
========================================================= */

.device-content h2,
.contact-content h2 {
    color: #eeeeee;
}

.device-panel,
.contact-panel {
    border-color:
        rgba(255, 255, 255, 0.11);

    background:
        rgba(14, 14, 14, 0.86);
}

.device-row,
.contact-row {
    border-bottom-color:
        rgba(255, 255, 255, 0.065);
}

.device-row span,
.contact-row span {
    color:
        rgba(130, 130, 130, 0.60);
}

.device-row strong,
.contact-row strong {
    color: #c9c9c9;
}

.contact-row:hover {
    background:
        rgba(255, 255, 255, 0.035);
}


/* =========================================================
   SLIDER CONTROLS
========================================================= */

.slider-arrow {
    border-color:
        rgba(255, 255, 255, 0.20);

    color:
        rgba(205, 205, 205, 0.72);

    background:
        rgba(255, 255, 255, 0.014);
}

.slider-arrow:hover:not(:disabled) {
    color: #eeeeee;

    border-color:
        rgba(255, 255, 255, 0.38);

    background:
        rgba(255, 255, 255, 0.045);
}

.slider-dot {
    background:
        rgba(150, 150, 150, 0.38);
}

.slider-dot.active {
    background: #dedede;

    box-shadow:
        0 0 12px
        rgba(255, 255, 255, 0.18);
}


/* =========================================================
   FINAL SECTION
========================================================= */

.final-section {
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(255, 255, 255, 0.035),
            transparent 30%
        ),

        radial-gradient(
            circle at 20px 20px,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            180deg,
            #050505 0%,
            #090909 50%,
            #050505 100%
        );

    background-size:
        auto,
        45px 45px,
        auto;
}


.final-up-button {
    border-color:
        rgba(255, 255, 255, 0.18);

    background:
        rgba(15, 15, 15, 0.88);

    box-shadow:
        0 0 30px
        rgba(255, 255, 255, 0.025);
}

.final-up-button:hover {
    border-color:
        rgba(255, 255, 255, 0.40);

    background:
        rgba(255, 255, 255, 0.045);

    box-shadow:
        0 0 35px
        rgba(255, 255, 255, 0.07);
}

.final-up-button svg {
    stroke: #dddddd;
}

.final-content h2 {
    color: #e5e5e5;

    text-shadow:
        0 0 22px
        rgba(255, 255, 255, 0.035);
}

.final-copy {
    color: #707070;
}


/* =========================================================
   FINAL MENU
========================================================= */

.final-menu-button {
    border-color:
        rgba(255, 255, 255, 0.105);

    background:
        rgba(15, 15, 15, 0.80);

    color: #9f9f9f;
}

.final-menu-button:hover {
    border-color:
        rgba(255, 255, 255, 0.28);

    background:
        rgba(255, 255, 255, 0.04);

    color: #dedede;

    box-shadow:
        0 0 20px
        rgba(255, 255, 255, 0.035);
}


/* =========================================================
   FINAL BADGE
========================================================= */

.final-terminal-badge {
    border-color:
        rgba(255, 255, 255, 0.17);

    color: #d0d0d0;

    background:
        rgba(10, 10, 10, 0.82);

    box-shadow:
        0 0 25px
        rgba(255, 255, 255, 0.025);
}

.final-terminal-badge:hover {
    background:
        rgba(255, 255, 255, 0.04);

    border-color:
        rgba(255, 255, 255, 0.36);
}


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

.footer {
    border-top-color:
        rgba(255, 255, 255, 0.065);
}

.footer-line {
    color: #a7a7a7;
}

.footer p {
    color:
        rgba(115, 115, 115, 0.56);
}


/* =========================================================
   FOCUS
========================================================= */

button:focus-visible,
a:focus-visible {
    outline-color: #d5d5d5;
}


/* =========================================================
   REMOVE GREEN FROM ANY REMAINING ELEMENTS
========================================================= */

[class*="green"] {
    color: #cfcfcf;
}


/* =========================================================
   MOBILE — KEEP DARK PALETTE
========================================================= */

@media (max-width: 768px) {

    .section-progress-bar.active {
        background: #dedede;
    }

    .slider-dot.active {
        background: #dedede;
    }

}

@media (max-width: 390px) {

    .section-progress-bar.active {
        background: #dedede;
    }

    .slider-dot.active {
        background: #dedede;
    }

}