:root {
    --bg: #050505;
    --panel: #0a0a0b;
    --panel-2: #0e0e10;

    --red: #e00000;
    --red-bright: #ff2a2a;
    --red-dark: #5b0000;

    --text: #ededed;
    --muted: #777;
    --line: #242426;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background:
    radial-gradient(
        circle at 50% 15%,
        rgba(120, 0, 0, 0.10),
                    transparent 32%
    ),
    linear-gradient(
        to bottom,
        #080808,
        #030303
    );

    color: var(--text);

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

    min-height: 100vh;

    overflow-x: hidden;

    position: relative;
}

.background-effects {
    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}

.grid-overlay {
    position: absolute;

    inset: 0;

    background-image:
    linear-gradient(
        rgba(255, 0, 0, 0.026) 1px,
                    transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.026) 1px,
                    transparent 1px
    );

    background-size: 54px 54px;

    opacity: 0.34;

    animation:
    gridMove
    18s
    linear
    infinite;
}

@keyframes gridMove {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(54px);
    }
}

.background-scan {
    position: absolute;

    top: -10%;
    left: 0;

    width: 100%;
    height: 2px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,0,0,0.15),
                    rgba(255,40,40,0.32),
                    rgba(255,0,0,0.15),
                    transparent
    );

    box-shadow:
    0 0 18px rgba(255,0,0,0.14);

    animation:
    backgroundScan
    12s
    linear
    infinite;
}

@keyframes backgroundScan {
    from {
        top: -5%;
    }

    to {
        top: 105%;
    }
}

.ambient-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
    rgba(130,0,0,0.12);

    filter: blur(110px);

    animation:
    glowDrift
    14s
    ease-in-out
    infinite
    alternate;
}

.ambient-one {
    top: 150px;
    left: -240px;
}

.ambient-two {
    top: 500px;
    right: -260px;

    animation-duration: 19s;
}

@keyframes glowDrift {
    from {
        transform:
        translate(0,0)
        scale(1);
    }

    to {
        transform:
        translate(40px,30px)
        scale(1.1);
    }
}

nav,
section,
footer,
.project-page {
    position: relative;

    z-index: 2;
}

nav {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 72px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 0 7%;

    background:
    linear-gradient(
        180deg,
        rgba(7,7,7,0.96),
                    rgba(5,5,5,0.88)
    );

    backdrop-filter: blur(15px);

    border-bottom:
    1px solid
    rgba(190,0,0,0.36);

    box-shadow:
    0 8px 30px rgba(0,0,0,0.42);

    z-index: 1000;
}

nav::after {
    content: "";

    position: absolute;

    bottom: -1px;
    left: -180px;

    width: 180px;
    height: 1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        var(--red-bright),
                    transparent
    );

    box-shadow:
    0 0 10px rgba(255,0,0,0.7);

    animation:
    navScanner
    6s
    linear
    infinite;
}

@keyframes navScanner {
    from {
        left: -180px;
    }

    to {
        left: 100%;
    }
}

.logo {
    position: relative;

    color: #ff2424;

    font-size: 1.55rem;

    font-weight: 900;

    letter-spacing: 6px;

    text-decoration: none;

    text-shadow:
    0 0 7px rgba(255,0,0,0.8),
    0 0 18px rgba(255,0,0,0.22);
}

.logo::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 45%;
    height: 1px;

    background:
    linear-gradient(
        90deg,
        var(--red-bright),
                    transparent
    );
}

nav ul {
    display: flex;

    gap: 32px;

    list-style: none;
}

nav a:not(.logo) {
    position: relative;

    color: #a7a7aa;

    text-decoration: none;

    font-size: 0.82rem;

    letter-spacing: 2px;

    transition: 0.25s;
}

nav a:not(.logo)::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -12px;

    width: 0;
    height: 1px;

    transform:
    translateX(-50%);

    background:
    var(--red-bright);

    box-shadow:
    0 0 10px rgba(255,0,0,0.7);

    transition:
    width 0.25s;
}

nav a:not(.logo):hover {
    color: white;
}

nav a:not(.logo):hover::before {
    width: 100%;
}

.hero {
    min-height: 100vh;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding:
    120px
    25px
    60px;
}

.hero-inner {
    width: 100%;
    max-width: 1050px;

    position: relative;
}

.hero-inner::before,
.hero-inner::after {
    content: "";

    position: absolute;

    top: 48%;

    width: 55px;
    height: 55px;

    opacity: 0.45;
}

.hero-inner::before {
    left: 0;

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

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

.hero-inner::after {
    right: 0;

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

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

.hero-badge {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
    8px 18px;

    margin-bottom: 26px;

    border:
    1px solid
    #710000;

    clip-path:
    polygon(
        9px 0,
        100% 0,
        100% calc(100% - 9px),
            calc(100% - 9px) 100%,
            0 100%,
            0 9px
    );

    background:
    linear-gradient(
        90deg,
        rgba(100,0,0,0.13),
                    rgba(20,0,0,0.04)
    );

    color: #ff4848;

    font-size: 0.72rem;

    letter-spacing: 4px;

    animation:
    badgePulse
    2.5s
    ease-in-out
    infinite;
}

.hero-badge::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ff2626;

    box-shadow:
    0 0 8px #ff0000,
    0 0 14px rgba(255,0,0,0.65);

    animation:
    statusBlink
    1.4s
    infinite;
}

@keyframes statusBlink {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

@keyframes badgePulse {
    0%,
    100% {
        box-shadow:
        0 0 0 rgba(255,0,0,0);
    }

    50% {
        box-shadow:
        0 0 15px rgba(255,0,0,0.09);
    }
}

.hero h1 {
    color: #f1f1f3;

    font-size:
    clamp(
        4rem,
        12vw,
        8.6rem
    );

    line-height: 0.95;

    letter-spacing: 13px;

    font-weight: 900;

    text-shadow:
    0 0 10px rgba(255,255,255,0.04),
    0 0 30px rgba(255,0,0,0.09);
}

.specter-scan {
    position: relative;

    display: block;

    width: fit-content;

    margin: 0 auto;

    padding: 12px 14px;

    overflow: hidden;

    isolation: isolate;
}

.specter-scan span {
    color: #df0000;

    text-shadow:
    0 0 10px rgba(255,0,0,0.88),
    0 0 30px rgba(255,0,0,0.40),
    0 0 60px rgba(255,0,0,0.13);
}

.specter-scan::before {
    content: "";

    position: absolute;

    top: 50%;
    left: -10%;

    width: 120%;
    height: 30px;

    transform:
    translateY(-50%);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,0,0,0.02),
                    rgba(255,0,0,0.08),
                    rgba(255,0,0,0.02),
                    transparent
    );

    filter: blur(8px);

    z-index: -1;
}

.specter-scan::after {
    content: "";

    position: absolute;

    top: 51%;
    left: -40%;

    width: 34%;
    height: 3px;

    transform:
    translateY(-50%);

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,25,25,0.4),
                    rgba(255,100,100,1),
                    #ffffff,
                    rgba(255,80,80,0.9),
                    transparent
    );

    box-shadow:
    0 0 6px rgba(255,0,0,1),
    0 0 16px rgba(255,0,0,0.9),
    0 0 28px rgba(255,0,0,0.5),
    0 0 45px rgba(255,0,0,0.18);

    animation:
    specterScan
    3.3s
    linear
    infinite;

    z-index: 5;
}

@keyframes specterScan {
    0% {
        left: -40%;
        opacity: 0;
    }

    7% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        left: 106%;
        opacity: 0;
    }
}

.title-line {
    width:
    min(480px,70%);

    height: 1px;

    margin:
    25px
    auto
    0;

    position: relative;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,0,0,0.35),
                    rgba(255,0,0,0.8),
                    rgba(255,0,0,0.35),
                    transparent
    );
}

.title-line::after {
    content: "";

    position: absolute;

    left: 50%;

    width: 34px;
    height: 3px;

    transform:
    translateX(-50%)
    translateY(-1px);

    background:
    var(--red-bright);

    box-shadow:
    0 0 10px rgba(255,0,0,0.85);
}

.hero-subtitle {
    margin-top: 26px;

    color: #aaa;

    font-size: 1.17rem;

    letter-spacing: 5px;
}

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

    margin:
    24px
    auto
    0;

    color: #777;

    font-size: 0.98rem;

    line-height: 1.8;
}

.hero-buttons {
    margin-top: 40px;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;
}

.button {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 175px;

    padding:
    13px
    25px;

    overflow: hidden;

    text-decoration: none;

    font-size: 0.78rem;

    letter-spacing: 2px;

    clip-path:
    polygon(
        8px 0,
        100% 0,
        100% calc(100% - 8px),
            calc(100% - 8px) 100%,
            0 100%,
            0 8px
    );

    transition:
    transform 0.25s,
    box-shadow 0.25s;
}

.button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.12),
                    transparent
    );

    transform:
    skewX(-20deg);

    transition: 0.55s;
}

.button:hover::before {
    left: 140%;
}

.button-red {
    color: white;

    background:
    linear-gradient(
        180deg,
        #c90000,
        #900000
    );

    border:
    1px solid
    #ff2525;

    box-shadow:
    0 0 16px rgba(255,0,0,0.12);
}

.button-red:hover {
    transform:
    translateY(-3px);

    box-shadow:
    0 0 25px rgba(255,0,0,0.27),
    0 14px 25px rgba(0,0,0,0.4);
}

.button-dark {
    color: #c5c5c5;

    background:
    linear-gradient(
        180deg,
        #101012,
        #090909
    );

    border:
    1px solid
    #333;
}

.button-dark:hover {
    transform:
    translateY(-3px);

    color: white;

    border-color:
    #680000;
}

section {
    padding:
    105px
    7%;
}

.section-header {
    position: relative;

    max-width: 700px;

    margin:
    0
    auto
    52px;

    text-align: center;
}

.section-label {
    margin-bottom: 11px;

    color: #b90000;

    font-size: 0.67rem;

    letter-spacing: 5px;
}

.section-header h2 {
    color: #e9e9eb;

    font-size: 2rem;

    letter-spacing: 4px;
}

.section-header p {
    margin-top: 12px;

    color: #666;

    font-size: 0.9rem;
}

.section-header::after {
    content: "";

    display: block;

    width: 180px;
    height: 1px;

    margin:
    23px
    auto
    0;

    background:
    linear-gradient(
        90deg,
        transparent,
        var(--red),
                    transparent
    );

    box-shadow:
    0 0 8px rgba(255,0,0,0.3);
}

.projects {
    background:
    linear-gradient(
        180deg,
        rgba(35,0,0,0.09),
                    rgba(5,5,5,0.96)
    );

    border-top:
    1px solid
    #181818;

    border-bottom:
    1px solid
    #181818;
}

.project-grid {
    max-width: 1200px;

    margin: auto;

    display: grid;

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

    gap: 20px;
}

.project-card {
    position: relative;

    min-height: 260px;

    padding: 28px;

    overflow: hidden;

    color: inherit;

    text-decoration: none;

    background:
    linear-gradient(
        145deg,
        rgba(20,20,22,0.95),
                    rgba(7,7,8,0.96)
    );

    border:
    1px solid
    #262628;

    clip-path:
    polygon(
        15px 0,
        100% 0,
        100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            0 100%,
            0 15px
    );

    transition: 0.28s;
}

.project-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: -60%;

    width: 45%;
    height: 2px;

    background:
    linear-gradient(
        90deg,
        transparent,
        #ff3030,
        transparent
    );

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

    animation:
    cardScanner
    5.4s
    linear
    infinite;
}

@keyframes cardScanner {
    from {
        left: -60%;
    }

    to {
        left: 130%;
    }
}

.project-card:hover {
    transform:
    translateY(-7px);

    border-color:
    #720000;

    box-shadow:
    0 18px 38px rgba(0,0,0,0.48),
    0 0 28px rgba(160,0,0,0.14);
}

.project-number {
    position: absolute;

    top: 20px;
    right: 24px;

    color: #2d2d31;

    font-size: 2.5rem;

    font-weight: 900;

    letter-spacing: 2px;

    transition:
    color 0.3s;
}

.project-card:hover .project-number {
    color:
    rgba(160,0,0,0.34);
}

.project-status {
    display: inline-block;

    margin-bottom: 22px;

    padding:
    5px
    10px;

    color: #e64343;

    border:
    1px solid
    #570000;

    background:
    rgba(100,0,0,0.14);

    font-size: 0.62rem;

    letter-spacing: 2px;
}

.project-card h3 {
    margin-bottom: 12px;

    color: #ececee;

    letter-spacing: 2px;

    font-size: 1.03rem;
}

.project-card p {
    color: #777;

    line-height: 1.65;

    font-size: 0.88rem;
}

.project-enter {
    position: absolute;

    left: 28px;
    bottom: 23px;

    color: #940000;

    font-size: 0.67rem;

    letter-spacing: 2px;

    transition: 0.25s;
}

.project-card:hover .project-enter {
    color: #ff3434;

    text-shadow:
    0 0 8px rgba(255,0,0,0.5);
}

.status-grid {
    max-width: 1000px;

    margin: auto;

    display: grid;

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

    gap: 18px;
}

.status-card {
    position: relative;

    padding: 25px;

    background:
    linear-gradient(
        145deg,
        #0d0d0f,
        #070708
    );

    border:
    1px solid
    #242426;
}

.status-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 20px;

    width: 45px;
    height: 1px;

    background: var(--red);

    box-shadow:
    0 0 8px rgba(255,0,0,0.55);
}

.status-card h3 {
    margin-bottom: 18px;

    color: #79797d;

    font-size: 0.66rem;

    letter-spacing: 3px;
}

.status-value {
    color: #e5e5e7;

    font-size: 1.25rem;

    font-weight: 700;

    letter-spacing: 1px;
}

.status-online {
    color: #4bd16f;
}

.status-dot {
    display: inline-block;

    width: 8px;
    height: 8px;

    margin-right: 8px;

    border-radius: 50%;

    background: #4bd16f;

    box-shadow:
    0 0 10px #4bd16f;
}

.about {
    background:
    radial-gradient(
        circle at center,
        rgba(90,0,0,0.07),
                    transparent 55%
    );
}

.about-box {
    max-width: 850px;

    margin: auto;

    padding: 45px;

    text-align: center;

    background:
    linear-gradient(
        145deg,
        rgba(14,14,15,0.93),
                    rgba(7,7,8,0.93)
    );

    border:
    1px solid
    #252527;
}

.about-box p {
    color: #858585;

    line-height: 1.85;
}

footer {
    padding:
    35px
    20px;

    text-align: center;

    border-top:
    1px solid
    #1b1b1d;

    color: #48484b;

    font-size: 0.72rem;

    letter-spacing: 3px;
}

footer span {
    color: #970000;
}


/* =========================================================
 *  PROJECT DETAIL PAGE
 *  ========================================================= */

.project-page {
    min-height: 100vh;

    padding:
    140px
    7%
    80px;
}

.project-shell {
    max-width: 1100px;

    margin: auto;
}

.back-link {
    display: inline-block;

    margin-bottom: 40px;

    color: #8b8b8e;

    text-decoration: none;

    font-size: 0.7rem;

    letter-spacing: 3px;

    transition: 0.2s;
}

.back-link:hover {
    color: var(--red-bright);
}

.project-hero-panel {
    position: relative;

    padding:
    55px
    50px;

    overflow: hidden;

    background:
    linear-gradient(
        145deg,
        rgba(18,18,20,0.96),
                    rgba(5,5,6,0.97)
    );

    border:
    1px solid
    #303034;

    clip-path:
    polygon(
        24px 0,
        100% 0,
        100% calc(100% - 24px),
            calc(100% - 24px) 100%,
            0 100%,
            0 24px
    );
}

.project-hero-panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: -40%;

    width: 35%;
    height: 2px;

    background:
    linear-gradient(
        90deg,
        transparent,
        #ff3434,
        white,
        #ff3434,
        transparent
    );

    box-shadow:
    0 0 16px rgba(255,0,0,0.7);

    animation:
    projectPageScan
    4s
    linear
    infinite;
}

@keyframes projectPageScan {
    from {
        left: -40%;
    }

    to {
        left: 110%;
    }
}

.project-kicker {
    margin-bottom: 14px;

    color: #a40000;

    font-size: 0.7rem;

    letter-spacing: 5px;
}

.project-title {
    font-size:
    clamp(
        2.7rem,
        8vw,
        6rem
    );

    letter-spacing: 7px;

    line-height: 1;

    color: #eeeeef;

    text-shadow:
    0 0 24px rgba(255,0,0,0.10);
}

.project-summary {
    max-width: 760px;

    margin-top: 25px;

    color: #828286;

    line-height: 1.8;
}

.project-meta-grid {
    margin-top: 45px;

    display: grid;

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

    gap: 14px;
}

.meta-panel {
    padding: 20px;

    background:
    #09090a;

    border:
    1px solid
    #252527;
}

.meta-label {
    margin-bottom: 10px;

    color: #626267;

    font-size: 0.61rem;

    letter-spacing: 3px;
}

.meta-value {
    color: #dddddf;

    font-size: 1rem;

    letter-spacing: 1px;
}

.project-content-grid {
    display: grid;

    grid-template-columns:
    1.5fr
    0.8fr;

    gap: 20px;

    margin-top: 22px;
}

.content-panel {
    padding: 32px;

    background:
    linear-gradient(
        145deg,
        #0d0d0f,
        #070708
    );

    border:
    1px solid
    #252527;
}

.content-panel h2 {
    margin-bottom: 22px;

    color: #e7e7e9;

    font-size: 1rem;

    letter-spacing: 4px;
}

.content-panel p {
    color: #7c7c80;

    line-height: 1.8;
}

.feature-list {
    list-style: none;
}

.feature-list li {
    position: relative;

    padding:
    12px
    0
    12px
    20px;

    border-bottom:
    1px solid
    #19191b;

    color: #858589;

    font-size: 0.9rem;
}

.feature-list li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 18px;

    width: 6px;
    height: 6px;

    background: #c90000;

    box-shadow:
    0 0 8px rgba(255,0,0,0.7);
}

.download-panel {
    margin-top: 20px;

    padding: 30px;

    text-align: center;

    background:
    linear-gradient(
        90deg,
        rgba(50,0,0,0.12),
                    rgba(8,8,9,0.96),
                    rgba(50,0,0,0.12)
    );

    border:
    1px solid
    #29292c;
}

.download-panel h2 {
    margin-bottom: 10px;

    font-size: 1rem;

    letter-spacing: 4px;
}

.download-panel p {
    margin-bottom: 20px;

    color: #69696d;

    font-size: 0.85rem;
}

@media (max-width: 800px) {
    .project-content-grid {
        grid-template-columns: 1fr;
    }

    .project-hero-panel {
        padding:
        40px
        25px;
    }
}

@media (max-width: 700px) {
    nav {
        padding:
        0
        18px;
    }

    .logo {
        font-size: 1.05rem;

        letter-spacing: 3px;
    }

    nav ul {
        gap: 12px;
    }

    nav a:not(.logo) {
        font-size: 0.66rem;

        letter-spacing: 1px;
    }

    .hero h1 {
        letter-spacing: 5px;
    }

    .hero-inner::before,
    .hero-inner::after {
        display: none;
    }

    section {
        padding:
        85px
        20px;
    }

    .project-page {
        padding:
        120px
        20px
        60px;
    }
}