/* =========================================================
   LINUX // THE OS BEHIND CYBERSECURITY
   FINAL MASTER STYLESHEET
   ========================================================= */


/* =========================================================
   01 — ROOT VARIABLES
   ========================================================= */

:root {

    --bg:
        #030508;

    --bg-soft:
        #070b12;

    --bg-card:
        rgba(10, 17, 27, 0.72);

    --surface:
        rgba(255, 255, 255, 0.035);

    --surface-hover:
        rgba(255, 255, 255, 0.065);

    --line:
        rgba(255, 255, 255, 0.09);

    --line-bright:
        rgba(255, 255, 255, 0.16);

    --white:
        #f5f9fc;

    --white-soft:
        rgba(245, 249, 252, 0.72);

    --muted:
        rgba(190, 205, 216, 0.55);

    --blue:
        #008cff;

    --blue-bright:
        #00c8ff;

    --cyan:
        #27e5ff;

    --green:
        #46ff9c;

    --green-soft:
        rgba(70, 255, 156, 0.16);

    --blue-soft:
        rgba(0, 140, 255, 0.14);

    --shadow:
        0 30px 100px rgba(0, 0, 0, 0.55);

    --radius:
        18px;

    --radius-small:
        10px;

    --container:
        1440px;

    --nav-height:
        78px;

    --mono:
        "DM Mono",
        "Courier New",
        monospace;

    --sans:
        "Inter",
        Arial,
        sans-serif;

}


/* =========================================================
   02 — RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {

    min-height: 100vh;

    background:
        var(--bg);

    color:
        var(--white);

    font-family:
        var(--sans);

    overflow-x: hidden;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}

body.no-scroll {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

button {
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

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

::selection {
    background:
        rgba(0, 200, 255, 0.28);

    color:
        #ffffff;
}


/* =========================================================
   03 — GLOBAL BACKGROUND
   ========================================================= */

.global-background {

    position: fixed;

    inset: 0;

    z-index: -10;

    pointer-events: none;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 130, 255, 0.06),
            transparent 38%
        ),
        var(--bg);
}

.noise {

    position: absolute;

    inset: 0;

    opacity: 0.035;

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

    mix-blend-mode:
        screen;
}

.grid-background {

    position: absolute;

    inset: -100px;

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

    background-size:
        80px 80px;

    transform:
        perspective(900px)
        rotateX(55deg)
        translateY(20%);

    transform-origin:
        center bottom;

    opacity: 0.45;
}

.ambient {

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter:
        blur(100px);

    opacity: 0.07;
}

.ambient-one {

    top: -200px;
    left: 5%;

    background:
        var(--blue);
}

.ambient-two {

    right: -200px;
    top: 35%;

    background:
        var(--cyan);
}

.ambient-three {

    left: 20%;
    bottom: -300px;

    background:
        var(--green);
}


/* =========================================================
   04 — CUSTOM CURSOR
   ========================================================= */

.cursor-dot {

    position: fixed;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 12px var(--cyan),
        0 0 25px rgba(0, 200, 255, 0.55);

    pointer-events: none;

    z-index: 20000;

    transform:
        translate(-50%, -50%);

    opacity: 0;
}

.cursor-outline {

    position: fixed;

    width: 34px;
    height: 34px;

    border:
        1px solid rgba(0, 200, 255, 0.45);

    border-radius: 50%;

    pointer-events: none;

    z-index: 19999;

    transform:
        translate(-50%, -50%);

    opacity: 0;

    transition:
        width 0.2s ease,
        height 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.cursor-outline.hover {

    width: 55px;
    height: 55px;

    border-color:
        rgba(70, 255, 156, 0.65);

    background:
        rgba(70, 255, 156, 0.035);
}

@media (pointer: fine) {

    body {
        cursor: none;
    }

    a,
    button,
    input {
        cursor: none;
    }

}


/* =========================================================
   05 — BOOT SCREEN
   ========================================================= */

.boot-screen {

    position: fixed;

    inset: 0;

    z-index: 10000;

    display: flex;

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

    background:
        #020409;

    overflow: hidden;

    opacity: 1;

    visibility: visible;

    transition:
        opacity 0.9s cubic-bezier(0.76, 0, 0.24, 1),
        visibility 0.9s ease;
}

.boot-screen.hide {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}

.boot-background-grid {

    position: absolute;

    inset: -20%;

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

    background-size:
        55px 55px;

    transform:
        perspective(700px)
        rotateX(58deg)
        scale(1.5);

    transform-origin:
        center bottom;

    animation:
        bootGridMove 7s linear infinite;

    opacity: 0.6;
}

@keyframes bootGridMove {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            0 55px;
    }

}

.boot-screen::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 150, 255, 0.09),
            transparent 38%
        );
}

.boot-screen::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 190, 255, 0.025) 50%,
            transparent 100%
        );

    animation:
        bootLight 3s ease-in-out infinite;
}

@keyframes bootLight {

    0%,
    100% {
        transform:
            translateX(-100%);
    }

    50% {
        transform:
            translateX(100%);
    }

}

.boot-scanline {

    position: absolute;

    left: 0;

    top: -10%;

    width: 100%;

    height: 2px;

    background:
        rgba(0, 200, 255, 0.55);

    box-shadow:
        0 0 20px rgba(0, 200, 255, 0.8),
        0 0 70px rgba(0, 200, 255, 0.25);

    animation:
        bootScan 4s linear infinite;

    pointer-events: none;
}

@keyframes bootScan {

    from {
        top: -10%;
    }

    to {
        top: 110%;
    }

}

.boot-center {

    position: relative;

    z-index: 3;

    width:
        min(900px, 90vw);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;
}


/* =========================================================
   BOOT CORNERS
   ========================================================= */

.boot-corner {

    position: absolute;

    z-index: 5;

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        2px;

    color:
        rgba(120, 200, 230, 0.42);
}

.boot-corner-top-left {

    top: 28px;
    left: 30px;
}

.boot-corner-top-right {

    top: 28px;
    right: 30px;
}

.boot-corner-bottom-left {

    bottom: 28px;
    left: 30px;
}

.boot-corner-bottom-right {

    bottom: 28px;
    right: 30px;
}


/* =========================================================
   BOOT MARK
   ========================================================= */

.boot-mark {

    position: relative;

    width: 76px;
    height: 76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        17px;

    animation:
        bootMarkFloat 2s ease-in-out infinite;
}

@keyframes bootMarkFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-5px);
    }

}

.boot-mark-ring {

    position: absolute;

    inset: 0;

    border:
        1px solid rgba(0, 200, 255, 0.35);

    border-radius:
        50%;

    box-shadow:
        0 0 30px rgba(0, 170, 255, 0.12),
        inset 0 0 25px rgba(0, 170, 255, 0.06);

    animation:
        bootRing 2.5s linear infinite;
}

@keyframes bootRing {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

.boot-mark-inner {

    width: 58px;
    height: 58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius:
        50%;

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

    box-shadow:
        inset 0 0 30px rgba(0, 170, 255, 0.06);
}

.boot-mark-inner span {

    font-size:
        28px;

    filter:
        drop-shadow(
            0 0 12px
            rgba(0, 200, 255, 0.65)
        );
}

.boot-college {

    margin-bottom:
        20px;

    color:
        rgba(180, 220, 235, 0.6);

    font-size:
        9px;

    letter-spacing:
        5px;
}


/* =========================================================
   BOOT TERMINAL
   ========================================================= */

.boot-terminal {

    width:
        min(720px, 100%);

    border:
        1px solid rgba(0, 190, 255, 0.2);

    border-radius:
        12px;

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

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.65),
        0 0 50px rgba(0, 130, 255, 0.06);

    backdrop-filter:
        blur(18px);

    overflow:
        hidden;

    animation:
        bootTerminalIn 1s
        cubic-bezier(0.16, 1, 0.3, 1)
        both;
}

@keyframes bootTerminalIn {

    from {
        opacity: 0;
        transform:
            translateY(25px)
            scale(0.97);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

}

.boot-terminal-bar {

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    padding:
        0 15px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.055);

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

.terminal-window-buttons {

    display:
        flex;

    gap:
        7px;
}

.terminal-window-buttons span {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

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

.terminal-window-title {

    position:
        absolute;

    left:
        50%;

    transform:
        translateX(-50%);

    color:
        rgba(255, 255, 255, 0.35);

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        1px;
}

.terminal-window-status {

    margin-left:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        rgba(70, 255, 156, 0.6);

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        1px;
}

.terminal-window-status span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 8px var(--green);
}

.boot-terminal-content {

    padding:
        23px;

    font-family:
        var(--mono);

    font-size:
        12px;

    line-height:
        2;
}

.boot-line {

    color:
        rgba(220, 235, 245, 0.62);

    opacity:
        0;

    animation:
        bootLineIn 0.5s ease forwards;
}

.boot-line:nth-child(1) {
    animation-delay:
        0.45s;
}

.boot-line:nth-child(2) {
    animation-delay:
        0.8s;
}

.boot-line:nth-child(3) {
    animation-delay:
        1.15s;
}

.boot-line:nth-child(4) {
    animation-delay:
        1.5s;
}

@keyframes bootLineIn {

    from {
        opacity: 0;
        transform:
            translateX(-10px);
    }

    to {
        opacity: 1;
        transform:
            translateX(0);
    }

}

.boot-prompt {

    color:
        var(--blue-bright);

    margin-right:
        8px;
}

.boot-status {

    float:
        right;

    color:
        var(--green);

    font-size:
        9px;

    letter-spacing:
        1px;
}

.boot-progress-wrapper {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-top:
        10px;
}

.boot-progress {

    flex:
        1;

    height:
        4px;

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

    overflow:
        hidden;
}

.boot-progress-bar {

    width:
        0%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            #0077ff,
            #00d9ff,
            #46ff9c
        );

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

    transition:
        width 0.08s linear;
}

#boot-progress-text {

    width:
        40px;

    text-align:
        right;

    color:
        rgba(255, 255, 255, 0.55);

    font-size:
        9px;
}

.boot-ready {

    margin-top:
        17px;

    text-align:
        center;

    color:
        var(--green);

    font-size:
        9px;

    letter-spacing:
        4px;

    opacity:
        0;

    animation:
        bootReadyIn 0.6s ease forwards;

    animation-delay:
        2.7s;
}

@keyframes bootReadyIn {

    from {
        opacity: 0;
        transform:
            translateY(5px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }

}


/* =========================================================
   BOOT TITLE
   ========================================================= */

.boot-title {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        100%;

    text-align:
        center;

    opacity:
        0;

    pointer-events:
        none;

    transform:
        translate(-50%, -50%);
}

.boot-screen.show-title
.boot-title {

    opacity:
        1;

    animation:
        bootTitleReveal 1.05s
        cubic-bezier(0.16, 1, 0.3, 1)
        forwards;
}

.boot-screen.show-title
.boot-terminal,
.boot-screen.show-title
.boot-mark,
.boot-screen.show-title
.boot-college {

    opacity:
        0;

    transform:
        scale(0.95)
        translateY(-20px);

    transition:
        opacity 0.55s ease,
        transform 0.75s ease;
}

@keyframes bootTitleReveal {

    from {

        opacity:
            0;

        transform:
            translate(-50%, -45%)
            scale(0.92);

        filter:
            blur(12px);
    }

    to {

        opacity:
            1;

        transform:
            translate(-50%, -50%)
            scale(1);

        filter:
            blur(0);
    }

}

.boot-eyebrow {

    margin-bottom:
        17px;

    color:
        rgba(140, 210, 235, 0.7);

    font-size:
        10px;

    letter-spacing:
        6px;
}

.boot-title h1 {

    font-size:
        clamp(75px, 14vw, 175px);

    line-height:
        0.78;

    letter-spacing:
        -8px;

    font-weight:
        800;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #b8efff 42%,
            #168cff 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    text-shadow:
        0 0 60px rgba(0, 150, 255, 0.2);
}

.boot-title-subtitle {

    margin-top:
        20px;

    color:
        rgba(220, 240, 250, 0.65);

    font-size:
        clamp(14px, 2.1vw, 28px);

    font-weight:
        300;

    letter-spacing:
        8px;
}

.boot-title-subtitle span {

    color:
        #ffffff;

    font-weight:
        600;
}

.boot-title-line {

    width:
        100px;

    height:
        1px;

    margin:
        28px auto 18px;

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

    box-shadow:
        0 0 18px var(--cyan);
}

.boot-team {

    color:
        rgba(255, 255, 255, 0.34);

    font-size:
        9px;

    letter-spacing:
        3px;
}


/* =========================================================
   06 — PAGE LOADER
   ========================================================= */

.page-loader {

    position:
        fixed;

    inset:
        0;

    z-index:
        9998;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--bg);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}

.page-loader.active {

    opacity:
        1;

    visibility:
        visible;
}

.loader-inner {

    width:
        240px;

    text-align:
        center;
}

.loader-symbol {

    margin-bottom:
        14px;

    color:
        var(--blue-bright);

    font-family:
        var(--mono);

    font-size:
        22px;
}

.loader-text {

    margin-bottom:
        12px;

    color:
        var(--muted);

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        3px;
}

.loader-line {

    height:
        2px;

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

    overflow:
        hidden;
}

.loader-line span {

    display:
        block;

    width:
        35%;

    height:
        100%;

    background:
        var(--blue-bright);

    box-shadow:
        0 0 15px var(--blue-bright);

    animation:
        loaderMove 1s ease-in-out infinite;
}

@keyframes loaderMove {

    0% {
        transform:
            translateX(-120%);
    }

    100% {
        transform:
            translateX(420%);
    }

}


/* =========================================================
   07 — NAVIGATION
   ========================================================= */

.navbar {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        var(--nav-height);

    z-index:
        500;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 clamp(20px, 4vw, 60px);

    border-bottom:
        1px solid transparent;

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        backdrop-filter 0.35s ease;
}

.navbar.scrolled {

    background:
        rgba(3, 5, 8, 0.76);

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

    backdrop-filter:
        blur(18px);
}

.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    flex-shrink:
        0;
}

.brand-mark {

    position:
        relative;

    width:
        22px;

    height:
        22px;

    display:
        grid;

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

    gap:
        2px;

    transform:
        skewY(-15deg);
}

.brand-mark span {

    display:
        block;

    background:
        var(--blue-bright);

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

.brand-mark span:nth-child(1) {
    height: 60%;
    align-self: end;
}

.brand-mark span:nth-child(2) {
    height: 100%;
}

.brand-mark span:nth-child(3) {
    height: 75%;
    align-self: center;
}

.brand-text {

    font-family:
        var(--mono);

    font-size:
        12px;

    font-weight:
        500;

    letter-spacing:
        1px;
}

.brand-text span {
    color:
        var(--blue-bright);
}

.desktop-navigation {

    display:
        flex;

    align-items:
        center;

    gap:
        clamp(15px, 2.2vw, 35px);

    margin-left:
        auto;

    margin-right:
        clamp(20px, 3vw, 50px);
}

.desktop-navigation a {

    position:
        relative;

    color:
        rgba(220, 235, 245, 0.48);

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        1.3px;

    transition:
        color 0.25s ease;
}

.desktop-navigation a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -7px;

    width:
        0;

    height:
        1px;

    background:
        var(--cyan);

    box-shadow:
        0 0 8px var(--cyan);

    transition:
        width 0.3s ease;
}

.desktop-navigation a:hover {

    color:
        #ffffff;
}

.desktop-navigation a:hover::after {

    width:
        100%;
}

.nav-right {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;
}

.nav-status {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        rgba(70, 255, 156, 0.65);

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        1px;
}

.status-dot {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 8px var(--green);

    animation:
        statusPulse 1.8s ease-in-out infinite;
}

@keyframes statusPulse {

    0%,
    100% {
        opacity:
            0.55;
    }

    50% {
        opacity:
            1;
    }

}

.menu-toggle {

    width:
        38px;

    height:
        38px;

    display:
        none;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    gap:
        6px;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius:
        9px;
}

.menu-toggle span {

    width:
        15px;

    height:
        1px;

    background:
        #ffffff;

    transition:
        transform 0.3s ease;
}

.menu-toggle.active span:first-child {

    transform:
        translateY(3.5px)
        rotate(45deg);
}

.menu-toggle.active span:last-child {

    transform:
        translateY(-3.5px)
        rotate(-45deg);
}


/* =========================================================
   08 — MOBILE MENU
   ========================================================= */

.mobile-menu {

    position:
        fixed;

    inset:
        0;

    z-index:
        450;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(2, 4, 8, 0.97);

    backdrop-filter:
        blur(20px);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}

.mobile-menu.open {

    opacity:
        1;

    visibility:
        visible;
}

.mobile-menu-inner {

    width:
        min(420px, 82vw);

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}

.mobile-menu-label {

    margin-bottom:
        25px;

    color:
        var(--blue-bright);

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        3px;
}

.mobile-menu a {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    padding:
        15px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);

    font-size:
        clamp(22px, 7vw, 34px);

    font-weight:
        600;

    letter-spacing:
        -1px;

    transition:
        color 0.25s ease,
        padding-left 0.25s ease;
}

.mobile-menu a span {

    color:
        var(--blue-bright);

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        1px;
}

.mobile-menu a:hover {

    color:
        var(--cyan);

    padding-left:
        8px;
}


/* =========================================================
   09 — SCROLL PROGRESS
   ========================================================= */

.scroll-progress {

    position:
        fixed;

    top:
        var(--nav-height);

    right:
        0;

    z-index:
        480;

    width:
        2px;

    height:
        calc(100vh - var(--nav-height));

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

.scroll-progress-bar {

    width:
        100%;

    height:
        0%;

    background:
        linear-gradient(
            to bottom,
            var(--blue-bright),
            var(--green)
        );

    box-shadow:
        0 0 12px var(--blue-bright);
}


/* =========================================================
   10 — COMMON SECTION
   ========================================================= */

.section {

    position:
        relative;

    width:
        100%;

    min-height:
        100vh;

    padding:
        150px clamp(22px, 5vw, 80px);

    overflow:
        hidden;
}

.section-container {

    position:
        relative;

    z-index:
        3;

    width:
        min(var(--container), 100%);

    margin:
        0 auto;
}

.section-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-bottom:
        50px;
}

.section-number {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        30px;

    height:
        30px;

    border:
        1px solid rgba(0, 200, 255, 0.3);

    border-radius:
        50%;

    color:
        var(--blue-bright);

    font-family:
        var(--mono);

    font-size:
        9px;
}

.section-kicker {

    color:
        rgba(150, 215, 235, 0.58);

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        4px;
}

.display-heading {

    font-size:
        clamp(55px, 8vw, 125px);

    line-height:
        0.9;

    font-weight:
        700;

    letter-spacing:
        -6px;

    color:
        var(--white);
}

.display-heading span {

    display:
        inline-block;

    color:
        transparent;

    -webkit-text-stroke:
        1px rgba(220, 240, 250, 0.45);

    text-shadow:
        none;
}


/* =========================================================
   11 — HERO
   ========================================================= */

.hero {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    padding-top:
        120px;

    isolation:
        isolate;
}

.hero-background {

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    overflow:
        hidden;
}

.hero-grid {

    position:
        absolute;

    inset:
        -20%;

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

    background-size:
        75px 75px;

    transform:
        perspective(900px)
        rotateX(58deg)
        scale(1.5);

    transform-origin:
        center bottom;

    animation:
        heroGridMove 12s linear infinite;

    opacity:
        0.7;
}

@keyframes heroGridMove {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            0 75px;
    }

}

.hero-radial {

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(0, 150, 255, 0.12),
            transparent 34%
        ),
        radial-gradient(
            circle at 85% 50%,
            rgba(0, 230, 255, 0.05),
            transparent 25%
        );
}

.hero-glow {

    position:
        absolute;

    width:
        550px;

    height:
        550px;

    right:
        0;

    top:
        50%;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        rgba(0, 140, 255, 0.055);

    filter:
        blur(80px);
}

.hero-content {

    position:
        relative;

    z-index:
        5;

    width:
        min(850px, 70%);

    margin-left:
        max(0px, 2vw);
}

.hero-overline {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-bottom:
        30px;

    color:
        rgba(150, 220, 240, 0.55);

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        3px;
}

.overline-line {

    width:
        40px;

    height:
        1px;

    background:
        var(--blue-bright);

    box-shadow:
        0 0 10px var(--blue-bright);
}

.hero-small-title {

    margin-bottom:
        8px;

    color:
        rgba(215, 235, 245, 0.62);

    font-size:
        clamp(15px, 2vw, 25px);

    font-weight:
        300;

    letter-spacing:
        10px;
}

.hero-title {

    display:
        flex;

    flex-direction:
        column;

    margin:
        0;
}

.hero-title-main {

    display:
        block;

    font-size:
        clamp(90px, 14vw, 205px);

    line-height:
        0.76;

    font-weight:
        800;

    letter-spacing:
        -10px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #a9eaff 40%,
            #118cff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    filter:
        drop-shadow(
            0 0 40px rgba(0, 140, 255, 0.15)
        );
}

.hero-title-outline {

    display:
        block;

    margin-top:
        22px;

    font-size:
        clamp(28px, 4.2vw, 65px);

    line-height:
        1;

    letter-spacing:
        8px;

    font-weight:
        500;

    color:
        transparent;

    -webkit-text-stroke:
        1px rgba(220, 240, 250, 0.48);
}

.hero-description {

    width:
        min(610px, 100%);

    margin-top:
        32px;

    color:
        rgba(200, 220, 232, 0.58);

    font-size:
        14px;

    line-height:
        1.9;

    font-weight:
        300;
}

.hero-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        30px;
}

.primary-button,
.secondary-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    min-height:
        48px;

    padding:
        0 19px;

    border-radius:
        8px;

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        1px;

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

.primary-button {

    background:
        var(--white);

    color:
        #02050a;

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

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

.primary-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 45px rgba(255, 255, 255, 0.13);
}

.secondary-button {

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

    color:
        rgba(235, 245, 250, 0.7);

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

.secondary-button:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(0, 200, 255, 0.4);

    background:
        rgba(0, 140, 255, 0.07);
}

.hero-meta {

    display:
        flex;

    gap:
        35px;

    margin-top:
        45px;

    padding-top:
        20px;

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

    color:
        rgba(180, 200, 212, 0.42);

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        1px;
}

.hero-meta div {

    display:
        flex;

    gap:
        9px;
}

.hero-meta span {

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

.hero-system {

    position:
        absolute;

    right:
        clamp(3%, 7vw, 10%);

    top:
        50%;

    width:
        min(430px, 35vw);

    aspect-ratio:
        1;

    transform:
        translateY(-45%);

    z-index:
        2;

    opacity:
        0.9;
}

.system-orbit {

    position:
        absolute;

    inset:
        0;

    border:
        1px solid rgba(0, 200, 255, 0.12);

    border-radius:
        50%;
}

.orbit-one {
    transform:
        rotate(25deg)
        scaleY(0.45);
}

.orbit-two {
    transform:
        rotate(-25deg)
        scaleY(0.45);
}

.orbit-three {
    inset:
        14%;

    border-color:
        rgba(70, 255, 156, 0.1);

    animation:
        orbitSpin 20s linear infinite;
}

@keyframes orbitSpin {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

.system-core {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        140px;

    height:
        140px;

    transform:
        translate(-50%, -50%);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 160, 255, 0.12),
            rgba(5, 10, 18, 0.8) 65%
        );

    box-shadow:
        0 0 60px rgba(0, 140, 255, 0.08),
        inset 0 0 40px rgba(0, 140, 255, 0.08);

    animation:
        coreFloat 4s ease-in-out infinite;
}

@keyframes coreFloat {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -53%)
            scale(1.03);
    }

}

.system-core-glow {

    position:
        absolute;

    inset:
        15px;

    border-radius:
        50%;

    border:
        1px dashed rgba(0, 200, 255, 0.2);

    animation:
        coreRotate 15s linear infinite;
}

@keyframes coreRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

.system-penguin {

    font-size:
        42px;

    filter:
        drop-shadow(
            0 0 20px rgba(0, 200, 255, 0.55)
        );
}

.system-core-label {

    position:
        absolute;

    bottom:
        -28px;

    font-family:
        var(--mono);

    color:
        rgba(120, 210, 235, 0.55);

    font-size:
        8px;

    letter-spacing:
        3px;
}

.system-node {

    position:
        absolute;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 11px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius:
        7px;

    background:
        rgba(4, 10, 17, 0.78);

    color:
        rgba(215, 235, 245, 0.55);

    font-family:
        var(--mono);

    font-size:
        7px;

    letter-spacing:
        1px;

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.25);
}

.system-node span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--blue-bright);

    box-shadow:
        0 0 8px var(--blue-bright);
}

.node-one {

    left:
        4%;

    top:
        30%;
}

.node-two {

    right:
        0;

    top:
        28%;
}

.node-three {

    right:
        5%;

    bottom:
        27%;
}

.node-four {

    left:
        2%;

    bottom:
        26%;
}

.hero-scroll {

    position:
        absolute;

    bottom:
        35px;

    left:
        clamp(22px, 5vw, 80px);

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        rgba(170, 195, 208, 0.38);

    font-family:
        var(--mono);

    font-size:
        7px;

    letter-spacing:
        2px;
}

.scroll-line {

    width:
        50px;

    height:
        1px;

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

.hero-index {

    position:
        absolute;

    right:
        clamp(22px, 5vw, 80px);

    bottom:
        35px;

    color:
        rgba(170, 195, 208, 0.3);

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        2px;
}


/* =========================================================
   12 — INTRO
   ========================================================= */

.intro {

    min-height:
        90vh;

    display:
        flex;

    align-items:
        center;
}

.intro-layout {

    display:
        grid;

    grid-template-columns:
        1.15fr 0.85fr;

    gap:
        clamp(40px, 8vw, 140px);

    align-items:
        end;
}

.intro-main .display-heading {

    max-width:
        800px;
}

.intro-copy {

    padding-bottom:
        10px;
}

.large-copy {

    color:
        rgba(215, 230, 240, 0.68);

    font-size:
        clamp(18px, 2vw, 25px);

    line-height:
        1.7;

    font-weight:
        300;
}

.copy-line {

    width:
        70px;

    height:
        1px;

    margin:
        28px 0;

    background:
        var(--blue-bright);

    box-shadow:
        0 0 10px var(--blue-bright);
}

.small-copy {

    color:
        rgba(170, 190, 203, 0.42);

    font-size:
        12px;

    line-height:
        1.8;
}

.stat-strip {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top:
        90px;

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

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

.stat-card {

    min-height:
        150px;

    padding:
        25px;

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

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    transition:
        background 0.3s ease;
}

.stat-card:last-child {
    border-right:
        0;
}

.stat-card:hover {

    background:
        rgba(0, 140, 255, 0.035);
}

.stat-number {

    color:
        var(--blue-bright);

    font-family:
        var(--mono);

    font-size:
        9px;
}

.stat-title {

    margin-top:
        20px;

    color:
        rgba(235, 245, 250, 0.78);

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        1px;
}

.stat-description {

    color:
        rgba(160, 185, 198, 0.4);

    font-family:
        var(--mono);

    font-size:
        8px;
}


/* =========================================================
   13 — ARCHITECTURE
   ========================================================= */

.architecture {

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 100, 180, 0.025),
            transparent
        );
}

.architecture-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        40px;

    margin-bottom:
        65px;
}

.architecture-heading p {

    max-width:
        320px;

    color:
        rgba(170, 195, 207, 0.46);

    font-size:
        12px;

    line-height:
        1.8;
}

.architecture-system {

    position:
        relative;

    width:
        min(1000px, 100%);

    margin:
        0 auto;

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}

.architecture-system::before {

    content:
        "";

    position:
        absolute;

    left:
        32px;

    top:
        30px;

    bottom:
        30px;

    width:
        1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--blue-bright),
            transparent
        );

    opacity:
        0.35;
}

.architecture-layer {

    position:
        relative;

    min-height:
        100px;

    display:
        grid;

    grid-template-columns:
        55px 60px 1fr auto;

    align-items:
        center;

    gap:
        20px;

    padding:
        20px 25px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        12px;

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

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

.architecture-layer:hover,
.architecture-layer.active {

    transform:
        translateX(8px);

    background:
        rgba(0, 130, 255, 0.055);

    border-color:
        rgba(0, 190, 255, 0.2);

    box-shadow:
        -10px 0 35px rgba(0, 140, 255, 0.05);
}

.layer-index {

    color:
        rgba(130, 190, 215, 0.35);

    font-family:
        var(--mono);

    font-size:
        9px;
}

.layer-icon {

    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        10px;

    color:
        var(--blue-bright);

    background:
        rgba(0, 140, 255, 0.04);
}

.layer-content h3 {

    color:
        rgba(240, 248, 252, 0.82);

    font-size:
        15px;

    letter-spacing:
        1px;
}

.layer-content p {

    margin-top:
        7px;

    color:
        rgba(160, 185, 198, 0.4);

    font-size:
        11px;
}

.layer-badge {

    padding:
        6px 9px;

    border:
        1px solid rgba(70, 255, 156, 0.2);

    color:
        rgba(70, 255, 156, 0.7);

    border-radius:
        5px;

    font-family:
        var(--mono);

    font-size:
        7px;

    letter-spacing:
        1px;
}

.layer-arrow {

    color:
        rgba(0, 200, 255, 0.5);

    font-size:
        18px;
}

.architecture-note {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    margin-top:
        28px;

    padding:
        18px 22px;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    border-radius:
        9px;

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

    font-family:
        var(--mono);

    font-size:
        8px;
}

.architecture-note span {

    color:
        var(--blue-bright);

    letter-spacing:
        2px;
}

.architecture-note p {

    color:
        rgba(180, 200, 210, 0.42);

    letter-spacing:
        1px;
}


/* =========================================================
   14 — CLI
   ========================================================= */

.cli {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;
}

.cli-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;

    margin-bottom:
        50px;
}

.cli-heading p {

    width:
        300px;

    color:
        rgba(170, 195, 207, 0.45);

    font-size:
        12px;

    line-height:
        1.8;
}

.terminal-demo {

    width:
        min(1000px, 100%);

    margin:
        0 auto;

    border:
        1px solid rgba(0, 190, 255, 0.18);

    border-radius:
        14px;

    overflow:
        hidden;

    background:
        rgba(3, 8, 14, 0.9);

    box-shadow:
        var(--shadow),
        0 0 60px rgba(0, 120, 255, 0.05);
}

.terminal-demo-header {

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    padding:
        0 17px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

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

.terminal-demo-controls {

    display:
        flex;

    gap:
        7px;
}

.terminal-demo-controls span {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

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

.terminal-demo-title {

    position:
        absolute;

    left:
        50%;

    transform:
        translateX(-50%);

    color:
        rgba(255, 255, 255, 0.35);

    font-family:
        var(--mono);

    font-size:
        9px;
}

.terminal-demo-status {

    margin-left:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        rgba(70, 255, 156, 0.55);

    font-family:
        var(--mono);

    font-size:
        8px;
}

.terminal-demo-status span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 8px var(--green);
}

.terminal-output {

    min-height:
        310px;

    max-height:
        390px;

    overflow-y:
        auto;

    padding:
        25px;

    font-family:
        var(--mono);

    font-size:
        12px;

    line-height:
        2;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(0, 200, 255, 0.2)
        transparent;
}

.terminal-message {

    color:
        rgba(170, 195, 207, 0.45);
}

.terminal-entry {

    margin-top:
        7px;

    color:
        rgba(235, 245, 250, 0.72);
}

.terminal-entry .command {

    color:
        var(--cyan);
}

.terminal-entry .output {

    margin-left:
        20px;

    color:
        rgba(70, 255, 156, 0.65);
}

.terminal-input-area {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-height:
        58px;

    padding:
        0 25px;

    border-top:
        1px solid rgba(255, 255, 255, 0.06);

    background:
        rgba(0, 0, 0, 0.18);
}

.terminal-user {

    color:
        var(--green);

    font-family:
        var(--mono);

    font-size:
        11px;

    white-space:
        nowrap;
}

.terminal-input-area input {

    flex:
        1;

    min-width:
        0;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        #ffffff;

    font-family:
        var(--mono);

    font-size:
        11px;
}

.terminal-input-area input::placeholder {

    color:
        rgba(170, 195, 207, 0.25);
}

.terminal-cursor {

    width:
        6px;

    height:
        15px;

    background:
        var(--green);

    animation:
        cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {

    50% {
        opacity:
            0;
    }

}

.command-cards {

    display:
        grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap:
        8px;

    margin-top:
        12px;
}

.command-card {

    min-height:
        100px;

    padding:
        15px;

    text-align:
        left;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        10px;

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

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}

.command-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(0, 200, 255, 0.22);

    background:
        rgba(0, 140, 255, 0.05);
}

.command-card span {

    display:
        block;

    margin-bottom:
        16px;

    color:
        rgba(0, 200, 255, 0.45);

    font-family:
        var(--mono);

    font-size:
        8px;
}

.command-card strong {

    display:
        block;

    color:
        rgba(235, 245, 250, 0.75);

    font-family:
        var(--mono);

    font-size:
        10px;
}

.command-card small {

    display:
        block;

    margin-top:
        8px;

    color:
        rgba(160, 185, 198, 0.35);

    font-size:
        8px;
}


/* =========================================================
   15 — PERMISSIONS
   ========================================================= */

.permissions-interface {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;

    padding:
        35px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        var(--radius);

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

    overflow:
        hidden;
}

.permissions-interface::before {

    content:
        "";

    position:
        absolute;

    width:
        400px;

    height:
        400px;

    left:
        20%;

    top:
        -250px;

    border-radius:
        50%;

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

    filter:
        blur(80px);
}

.permissions-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        40px;

    margin-bottom:
        55px;
}

.permissions-heading p {

    width:
        300px;

    color:
        rgba(170, 195, 207, 0.45);

    font-size:
        12px;

    line-height:
        1.8;
}

.permission-code {

    min-height:
        260px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    border:
        1px solid rgba(0, 200, 255, 0.1);

    border-radius:
        14px;

    background:
        rgba(0, 0, 0, 0.2);
}

.permission-code-label {

    margin-bottom:
        20px;

    color:
        rgba(160, 195, 210, 0.4);

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        3px;
}

.permission-string {

    display:
        flex;

    gap:
        8px;

    color:
        var(--green);

    font-family:
        var(--mono);

    font-size:
        clamp(35px, 5vw, 65px);

    font-weight:
        500;

    letter-spacing:
        4px;

    transition:
        color 0.3s ease;
}

.permission-string span {

    transition:
        color 0.3s ease,
        text-shadow 0.3s ease;
}

.permission-string span.highlight {

    color:
        var(--cyan);

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

.permission-type {

    color:
        rgba(255, 255, 255, 0.2);
}

.permission-explanation {

    margin-top:
        22px;

    color:
        rgba(160, 185, 198, 0.38);

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        2px;
}

.permission-controls {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        9px;
}

.permission-card {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        30px 1fr auto;

    align-items:
        center;

    gap:
        15px;

    padding:
        20px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        10px;

    text-align:
        left;

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

    transition:
        all 0.3s ease;
}

.permission-card:hover,
.permission-card.active {

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

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

    transform:
        translateX(5px);
}

.permission-card-number {

    color:
        rgba(0, 200, 255, 0.5);

    font-family:
        var(--mono);

    font-size:
        8px;
}

.permission-card strong {

    color:
        rgba(235, 245, 250, 0.76);

    font-size:
        12px;

    letter-spacing:
        1px;
}

.permission-card small {

    color:
        rgba(160, 185, 198, 0.35);

    font-size:
        8px;
}

.permission-legend {

    grid-column:
        1 / -1;

    display:
        flex;

    justify-content:
        center;

    gap:
        35px;

    padding-top:
        15px;

    border-top:
        1px solid rgba(255, 255, 255, 0.05);

    color:
        rgba(170, 195, 207, 0.38);

    font-family:
        var(--mono);

    font-size:
        8px;
}

.permission-legend div {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}

.permission-legend span {

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


/* =========================================================
   16 — SECURITY
   ========================================================= */

.security {

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 120, 210, 0.025),
            transparent
        );
}

.security-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        40px;

    margin-bottom:
        55px;
}

.security-heading p {

    width:
        320px;

    color:
        rgba(170, 195, 207, 0.45);

    font-size:
        12px;

    line-height:
        1.8;
}

.security-grid {

    display:
        grid;

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

    gap:
        10px;
}

.security-card {

    position:
        relative;

    min-height:
        270px;

    padding:
        27px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        14px;

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

    overflow:
        hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.security-card::before {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    top:
        -100px;

    right:
        -80px;

    border-radius:
        50%;

    background:
        rgba(0, 180, 255, 0.06);

    filter:
        blur(40px);

    transition:
        transform 0.5s ease;
}

.security-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(0, 200, 255, 0.2);

    background:
        rgba(0, 130, 255, 0.035);
}

.security-card:hover::before {

    transform:
        scale(1.5);
}

.security-card-large {

    min-height:
        300px;
}

.security-card-number {

    color:
        rgba(0, 200, 255, 0.45);

    font-family:
        var(--mono);

    font-size:
        8px;
}

.security-card-icon {

    width:
        47px;

    height:
        47px;

    margin-top:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        10px;

    color:
        var(--blue-bright);

    background:
        rgba(0, 150, 255, 0.035);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.security-card:hover
.security-card-icon {

    transform:
        rotate(-5deg)
        scale(1.08);

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

.security-card h3 {

    max-width:
        240px;

    margin-top:
        23px;

    color:
        rgba(240, 248, 252, 0.78);

    font-size:
        17px;

    line-height:
        1.15;

    letter-spacing:
        0.5px;
}

.security-card p {

    max-width:
        280px;

    margin-top:
        12px;

    color:
        rgba(160, 185, 198, 0.4);

    font-size:
        10px;

    line-height:
        1.7;
}

.security-card-arrow {

    position:
        absolute;

    right:
        25px;

    bottom:
        25px;

    color:
        rgba(0, 200, 255, 0.5);

    font-size:
        18px;

    transition:
        transform 0.3s ease;
}

.security-card:hover
.security-card-arrow {

    transform:
        translateX(5px);
}


/* =========================================================
   17 — KALI
   ========================================================= */

.kali-layout {

    display:
        grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap:
        clamp(40px, 8vw, 120px);

    align-items:
        center;
}

.kali-label {

    color:
        var(--blue-bright);

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        3px;

    margin-bottom:
        18px;
}

.kali-copy .large-copy {

    max-width:
        500px;

    margin-top:
        35px;
}

.kali-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        30px;
}

.kali-tags span {

    padding:
        8px 11px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius:
        5px;

    color:
        rgba(180, 205, 216, 0.45);

    font-family:
        var(--mono);

    font-size:
        7px;

    letter-spacing:
        1px;
}

.kali-terminal {

    border:
        1px solid rgba(0, 190, 255, 0.17);

    border-radius:
        14px;

    overflow:
        hidden;

    background:
        rgba(2, 7, 12, 0.92);

    box-shadow:
        var(--shadow);
}

.kali-terminal-top {

    height:
        47px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 17px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    color:
        rgba(255, 255, 255, 0.35);

    font-family:
        var(--mono);

    font-size:
        8px;
}

.kali-terminal-top > div:last-child {

    color:
        var(--green);

    font-size:
        8px;
}

.kali-terminal-body {

    min-height:
        390px;

    padding:
        30px;

    font-family:
        var(--mono);

    font-size:
        11px;

    line-height:
        1.8;
}

.kali-line {

    margin-top:
        22px;

    color:
        rgba(230, 242, 248, 0.65);
}

.kali-line:first-child {
    margin-top:
        0;
}

.kali-line span {

    color:
        var(--green);

    margin-right:
        10px;
}

.kali-output {

    padding-left:
        5px;

    color:
        rgba(0, 200, 255, 0.65);
}

.kali-cursor-line {

    display:
        flex;

    align-items:
        center;
}

.typing-cursor {

    display:
        inline-block;

    width:
        7px;

    height:
        15px;

    background:
        var(--green);

    animation:
        cursorBlink 0.8s step-end infinite;
}

.kali-tool-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        9px;

    margin-top:
        12px;
}

.kali-tool {

    min-height:
        120px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        20px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        10px;

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

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.kali-tool:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(0, 200, 255, 0.2);
}

.kali-tool span {

    color:
        rgba(0, 200, 255, 0.45);

    font-family:
        var(--mono);

    font-size:
        8px;
}

.kali-tool i {

    color:
        rgba(0, 200, 255, 0.55);

    font-size:
        18px;
}

.kali-tool strong {

    color:
        rgba(225, 240, 247, 0.6);

    font-size:
        9px;

    letter-spacing:
        1px;
}


/* =========================================================
   18 — FORENSICS
   ========================================================= */

.forensics-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        40px;

    margin-bottom:
        85px;
}

.forensics-heading p {

    width:
        320px;

    color:
        rgba(170, 195, 207, 0.45);

    font-size:
        12px;

    line-height:
        1.8;
}

.forensic-timeline {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        15px;
}

.timeline-line {

    position:
        absolute;

    left:
        7%;

    right:
        7%;

    top:
        36px;

    height:
        1px;

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

.timeline-line span {

    position:
        absolute;

    left:
        0;

    top:
        -2px;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 15px var(--cyan);

    animation:
        timelinePulse 4s linear infinite;
}

@keyframes timelinePulse {

    0% {
        left:
            0%;
    }

    100% {
        left:
            100%;
    }

}

.forensic-step {

    position:
        relative;

    padding:
        0 15px;

    text-align:
        center;
}

.forensic-step-number {

    position:
        relative;

    z-index:
        2;

    width:
        72px;

    height:
        72px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(0, 200, 255, 0.2);

    border-radius:
        50%;

    background:
        #050b12;

    color:
        var(--blue-bright);

    font-family:
        var(--mono);

    font-size:
        10px;

    box-shadow:
        0 0 0 7px #030508;
}

.forensic-step-icon {

    width:
        45px;

    height:
        45px;

    margin:
        35px auto 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius:
        10px;

    color:
        rgba(0, 200, 255, 0.65);

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

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.forensic-step:hover
.forensic-step-icon,
.forensic-step.active
.forensic-step-icon {

    transform:
        translateY(-5px);

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

.forensic-step-content h3 {

    margin-top:
        22px;

    color:
        rgba(235, 245, 250, 0.76);

    font-size:
        12px;

    letter-spacing:
        1px;
}

.forensic-step-content p {

    max-width:
        200px;

    margin:
        10px auto 0;

    color:
        rgba(160, 185, 198, 0.4);

    font-size:
        9px;

    line-height:
        1.7;
}


/* =========================================================
   19 — NETWORK
   ========================================================= */

.network-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        40px;

    margin-bottom:
        55px;
}

.network-heading p {

    width:
        330px;

    color:
        rgba(170, 195, 207, 0.45);

    font-size:
        12px;

    line-height:
        1.8;
}

.network-dashboard {

    display:
        grid;

    grid-template-columns:
        1.5fr 0.5fr;

    gap:
        10px;
}

.network-map,
.network-terminal {

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        14px;

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

    overflow:
        hidden;
}

.network-map-header,
.network-terminal-header {

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 18px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    color:
        rgba(180, 205, 215, 0.42);

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        1px;
}

.live-indicator {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        rgba(70, 255, 156, 0.55);
}

.live-indicator i {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 8px var(--green);
}

.network-canvas {

    position:
        relative;

    min-height:
        390px;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 140, 255, 0.055),
            transparent 40%
        );
}

.network-canvas::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

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

    background-size:
        45px 45px;
}

.network-lines .line {

    position:
        absolute;

    height:
        1px;

    transform-origin:
        left center;

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

.line-a {

    width:
        260px;

    left:
        18%;

    top:
        42%;

    transform:
        rotate(-10deg);
}

.line-b {

    width:
        250px;

    left:
        46%;

    top:
        44%;

    transform:
        rotate(5deg);
}

.line-c {

    width:
        220px;

    left:
        45%;

    top:
        52%;

    transform:
        rotate(25deg);
}

.line-d {

    width:
        220px;

    left:
        20%;

    top:
        48%;

    transform:
        rotate(20deg);
}

.line-e {

    width:
        180px;

    left:
        50%;

    top:
        50%;

    transform:
        rotate(-35deg);
}

.network-node {

    position:
        absolute;

    z-index:
        3;

    min-width:
        75px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        7px;

    color:
        rgba(210, 235, 245, 0.58);

    font-family:
        var(--mono);

    font-size:
        7px;

    letter-spacing:
        1px;
}

.network-node i {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(0, 200, 255, 0.2);

    border-radius:
        50%;

    background:
        rgba(2, 10, 17, 0.9);

    color:
        var(--blue-bright);

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

.network-client {

    left:
        8%;

    top:
        30%;
}

.network-firewall {

    left:
        42%;

    top:
        40%;
}

.network-server {

    right:
        7%;

    top:
        29%;
}

.network-monitor {

    left:
        42%;

    bottom:
        12%;
}

.network-packet {

    position:
        absolute;

    z-index:
        4;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 12px var(--cyan);
}

.packet-one {

    top:
        41%;

    left:
        18%;

    animation:
        packetOne 3s linear infinite;
}

@keyframes packetOne {

    0% {
        left:
            18%;
        opacity:
            0;
    }

    15% {
        opacity:
            1;
    }

    80% {
        left:
            44%;
        opacity:
            1;
    }

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

}

.packet-two {

    top:
        45%;

    left:
        55%;

    animation:
        packetTwo 3s linear infinite 1s;
}

@keyframes packetTwo {

    0% {
        left:
            55%;
        opacity:
            0;
    }

    15% {
        opacity:
            1;
    }

    80% {
        left:
            80%;
        opacity:
            1;
    }

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

}

.packet-three {

    left:
        45%;

    top:
        50%;

    animation:
        packetThree 4s linear infinite 1.7s;
}

@keyframes packetThree {

    0% {
        top:
            50%;
        opacity:
            0;
    }

    15% {
        opacity:
            1;
    }

    80% {
        top:
            80%;
        opacity:
            1;
    }

    100% {
        top:
            80%;
        opacity:
            0;
    }

}

.network-terminal {

    background:
        rgba(2, 7, 12, 0.9);
}

.network-command-list {

    padding:
        12px;
}

.network-command-list div {

    min-height:
        67px;

    display:
        grid;

    grid-template-columns:
        18px 1fr auto;

    align-items:
        center;

    gap:
        5px;

    padding:
        0 10px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.045);

    font-family:
        var(--mono);

    transition:
        background 0.25s ease;
}

.network-command-list div:hover {

    background:
        rgba(0, 150, 255, 0.04);
}

.network-command-list div > span {

    color:
        var(--green);

    font-size:
        9px;
}

.network-command-list strong {

    color:
        rgba(225, 240, 248, 0.58);

    font-size:
        9px;

    font-weight:
        400;
}

.network-command-list small {

    color:
        rgba(0, 200, 255, 0.45);

    font-size:
        7px;
}


/* =========================================================
   20 — LIVE SYSTEM
   ========================================================= */

.live-system {

    min-height:
        85vh;
}

.live-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        55px;
}

.live-status {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        rgba(70, 255, 156, 0.55);

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        1px;
}

.live-status span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 8px var(--green);
}

.system-dashboard {

    display:
        grid;

    grid-template-columns:
        1.2fr 0.8fr;

    gap:
        10px;
}

.dashboard-main,
.dashboard-metrics {

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        14px;

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

    overflow:
        hidden;
}

.dashboard-top {

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    color:
        rgba(180, 205, 215, 0.42);

    font-family:
        var(--mono);

    font-size:
        8px;
}

.dashboard-top span:last-child {

    color:
        var(--green);
}

.dashboard-core {

    min-height:
        350px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        80px;

    padding:
        40px;
}

.dashboard-ring {

    position:
        relative;

    width:
        190px;

    height:
        190px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(0, 200, 255, 0.18);

    border-radius:
        50%;

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

    box-shadow:
        inset 0 0 50px rgba(0, 150, 255, 0.04);
}

.dashboard-ring::before {

    content:
        "";

    position:
        absolute;

    inset:
        -10px;

    border:
        1px dashed rgba(0, 200, 255, 0.18);

    border-radius:
        50%;

    animation:
        coreRotate 15s linear infinite;
}

.dashboard-ring > div {

    display:
        flex;

    align-items:
        baseline;
}

.dashboard-ring strong {

    font-size:
        52px;

    font-weight:
        500;

    letter-spacing:
        -4px;
}

.dashboard-ring div span {

    color:
        var(--blue-bright);

    font-family:
        var(--mono);

    font-size:
        14px;
}

.dashboard-ring small {

    margin-top:
        5px;

    color:
        rgba(160, 190, 203, 0.38);

    font-family:
        var(--mono);

    font-size:
        7px;

    letter-spacing:
        3px;
}

.dashboard-info {

    min-width:
        190px;
}

.dashboard-info div {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        14px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.055);
}

.dashboard-info span {

    color:
        rgba(160, 185, 198, 0.38);

    font-family:
        var(--mono);

    font-size:
        8px;
}

.dashboard-info strong {

    color:
        rgba(70, 255, 156, 0.65);

    font-family:
        var(--mono);

    font-size:
        8px;
}

.dashboard-metrics {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        30px;
}

.metric {

    margin:
        15px 0;
}

.metric > span {

    color:
        rgba(160, 185, 198, 0.4);

    font-family:
        var(--mono);

    font-size:
        8px;
}

.metric > strong {

    float:
        right;

    color:
        rgba(225, 240, 248, 0.65);

    font-family:
        var(--mono);

    font-size:
        9px;

    font-weight:
        400;
}

.metric-bar {

    clear:
        both;

    height:
        3px;

    margin-top:
        9px;

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

    overflow:
        hidden;
}

.metric-bar span {

    display:
        block;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );

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


/* =========================================================
   21 — TAKEAWAY
   ========================================================= */

.takeaway {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    isolation:
        isolate;
}

.takeaway-background {

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    overflow:
        hidden;
}

.takeaway-grid {

    position:
        absolute;

    inset:
        -30%;

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

    background-size:
        60px 60px;

    transform:
        perspective(900px)
        rotateX(55deg)
        scale(1.4);

    transform-origin:
        center bottom;
}

.takeaway-glow {

    position:
        absolute;

    width:
        600px;

    height:
        600px;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        rgba(0, 150, 255, 0.06);

    filter:
        blur(100px);
}

.takeaway-content {

    width:
        min(1000px, 100%);
}

.takeaway-label {

    color:
        var(--blue-bright);

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        4px;

    margin-bottom:
        30px;
}

.takeaway h2 {

    font-size:
        clamp(52px, 8.5vw, 125px);

    line-height:
        0.92;

    font-weight:
        700;

    letter-spacing:
        -6px;
}

.takeaway h2 span {

    color:
        transparent;

    -webkit-text-stroke:
        1px rgba(220, 240, 250, 0.4);
}

.takeaway-flow {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        16px;

    margin-top:
        55px;

    color:
        rgba(170, 195, 208, 0.4);

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        1px;
}

.takeaway-flow i {

    color:
        rgba(0, 200, 255, 0.55);

    font-style:
        normal;
}


/* =========================================================
   22 — TEAM
   ========================================================= */

.team-section {

    min-height:
        90vh;
}

.team-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        65px;
}

.team-heading p {

    color:
        rgba(160, 190, 202, 0.4);

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        2px;
}

.team-grid {

    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap:
        10px;
}

.team-member {

    position:
        relative;

    min-height:
        290px;

    padding:
        25px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        13px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.01)
        );

    overflow:
        hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease;
}

.team-member::before {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    left:
        50%;

    top:
        35%;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        rgba(0, 140, 255, 0.06);

    filter:
        blur(45px);
}

.team-member:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(0, 200, 255, 0.2);
}

.team-member-number {

    position:
        absolute;

    top:
        20px;

    left:
        20px;

    color:
        rgba(0, 200, 255, 0.4);

    font-family:
        var(--mono);

    font-size:
        8px;
}

.team-avatar {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    transform:
        translate(-50%, -65%);

    width:
        90px;

    height:
        90px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(0, 200, 255, 0.18);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 150, 255, 0.11),
            rgba(255, 255, 255, 0.015)
        );

    color:
        rgba(220, 240, 248, 0.7);

    font-size:
        28px;

    font-weight:
        500;

    box-shadow:
        0 0 45px rgba(0, 140, 255, 0.05);
}

.team-member h3 {

    position:
        relative;

    z-index:
        2;

    color:
        rgba(235, 245, 250, 0.78);

    font-size:
        13px;

    letter-spacing:
        1px;
}

.team-member > span:last-child {

    position:
        relative;

    z-index:
        2;

    margin-top:
        7px;

    color:
        rgba(160, 185, 198, 0.35);

    font-family:
        var(--mono);

    font-size:
        7px;

    letter-spacing:
        2px;
}


/* =========================================================
   23 — FINAL SECTION
   ========================================================= */

.final-section {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    isolation:
        isolate;
}

.final-background {

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    overflow:
        hidden;
}

.final-grid {

    position:
        absolute;

    inset:
        -30%;

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

    background-size:
        70px 70px;

    transform:
        perspective(800px)
        rotateX(55deg)
        scale(1.5);

    transform-origin:
        center bottom;

    animation:
        heroGridMove 15s linear infinite;
}

.final-glow {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        650px;

    height:
        650px;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

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

    filter:
        blur(100px);
}

.final-content {

    position:
        relative;

    z-index:
        3;
}

.final-mini-label {

    margin-bottom:
        30px;

    color:
        rgba(0, 200, 255, 0.55);

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        4px;
}

.final-content h2 {

    display:
        flex;

    flex-direction:
        column;

    font-size:
        clamp(80px, 15vw, 210px);

    line-height:
        0.72;

    letter-spacing:
        -10px;

    font-weight:
        800;
}

.final-content h2 span:first-child {

    color:
        #ffffff;
}

.final-content h2 span:last-child {

    color:
        transparent;

    -webkit-text-stroke:
        1px rgba(220, 240, 250, 0.45);
}

.final-content > p {

    margin-top:
        55px;

    color:
        rgba(170, 195, 207, 0.45);

    font-family:
        var(--mono);

    font-size:
        10px;

    letter-spacing:
        5px;
}

.final-command {

    width:
        min(390px, 90vw);

    margin:
        25px auto 0;

    padding:
        13px 17px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius:
        7px;

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

    text-align:
        left;

    font-family:
        var(--mono);

    font-size:
        9px;
}

.final-command > span:first-child {

    color:
        var(--green);
}

.final-command-text {

    color:
        rgba(220, 235, 242, 0.55);
}

.final-cursor {

    width:
        6px;

    height:
        13px;

    margin-left:
        1px;

    background:
        var(--green);

    animation:
        cursorBlink 1s step-end infinite;
}

.final-team {

    margin-top:
        28px;

    color:
        rgba(160, 185, 198, 0.3);

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        2px;
}

.back-top {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        40px;

    color:
        rgba(180, 210, 220, 0.45);

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        1px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.back-top:hover {

    color:
        var(--cyan);

    transform:
        translateY(-3px);
}

.final-corner {

    position:
        absolute;

    bottom:
        30px;

    color:
        rgba(150, 185, 200, 0.24);

    font-family:
        var(--mono);

    font-size:
        7px;

    letter-spacing:
        2px;
}

.final-corner-left {

    left:
        clamp(20px, 5vw, 70px);
}

.final-corner-right {

    right:
        clamp(20px, 5vw, 70px);
}


/* =========================================================
   24 — FOOTER
   ========================================================= */

.footer {

    min-height:
        80px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        20px clamp(22px, 5vw, 80px);

    border-top:
        1px solid rgba(255, 255, 255, 0.06);

    background:
        rgba(2, 4, 7, 0.8);

    color:
        rgba(150, 180, 195, 0.3);

    font-family:
        var(--mono);

    font-size:
        7px;

    letter-spacing:
        1.5px;
}

.footer-left,
.footer-right {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}

.footer-logo {

    color:
        rgba(220, 240, 248, 0.55);
}

.footer-center {

    color:
        rgba(150, 180, 195, 0.25);
}

.footer-right {

    color:
        rgba(70, 255, 156, 0.45);
}

.footer-status {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 8px var(--green);
}


/* =========================================================
   25 — REVEAL ANIMATIONS
   ========================================================= */

[data-reveal] {

    opacity:
        0;

    transform:
        translateY(25px);

    transition:
        opacity 0.9s
        cubic-bezier(0.16, 1, 0.3, 1),

        transform 0.9s
        cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].revealed {

    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   26 — RESPONSIVE LAPTOP
   ========================================================= */

@media (max-width: 1200px) {

    .desktop-navigation {
        gap:
            15px;
    }

    .desktop-navigation a {
        font-size:
            7px;
    }

    .hero-system {
        right:
            1%;

        opacity:
            0.65;
    }

    .hero-content {
        width:
            78%;
    }

    .security-card {
        padding:
            22px;
    }

}


/* =========================================================
   27 — TABLET
   ========================================================= */

@media (max-width: 950px) {

    :root {
        --nav-height:
            70px;
    }

    .desktop-navigation,
    .nav-status {
        display:
            none;
    }

    .menu-toggle {
        display:
            flex;
    }

    .mobile-menu {
        display:
            flex;
    }

    .section {
        padding:
            120px 30px;
    }

    .hero-content {
        width:
            100%;

        margin-left:
            0;
    }

    .hero-system {
        right:
            -80px;

        width:
            400px;

        opacity:
            0.28;
    }

    .hero-description {
        max-width:
            560px;
    }

    .intro-layout,
    .kali-layout {
        grid-template-columns:
            1fr;
    }

    .intro-copy {
        max-width:
            650px;

        margin-top:
            40px;
    }

    .stat-strip {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .stat-card:nth-child(2) {
        border-right:
            0;
    }

    .architecture-heading,
    .cli-heading,
    .permissions-heading,
    .security-heading,
    .forensics-heading,
    .network-heading,
    .team-heading,
    .live-header {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .architecture-heading p,
    .cli-heading p,
    .permissions-heading p,
    .security-heading p,
    .forensics-heading p,
    .network-heading p {
        width:
            100%;

        max-width:
            500px;
    }

    .command-cards {
        grid-template-columns:
            repeat(3, 1fr);
    }

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

    .security-card-large {
        min-height:
            270px;
    }

    .permissions-interface {
        grid-template-columns:
            1fr;
    }

    .permission-legend {
        grid-column:
            auto;
    }

    .kali-terminal {
        margin-top:
            30px;
    }

    .forensic-timeline {
        grid-template-columns:
            repeat(2, 1fr);

        gap:
            55px 20px;
    }

    .timeline-line {
        display:
            none;
    }

    .network-dashboard,
    .system-dashboard {
        grid-template-columns:
            1fr;
    }

    .team-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .team-member {
        min-height:
            260px;
    }

}


/* =========================================================
   28 — MOBILE
   ========================================================= */

@media (max-width: 650px) {

    :root {
        --nav-height:
            62px;
    }

    .section {
        min-height:
            auto;

        padding:
            100px 18px;
    }

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

    .section-number {
        width:
            27px;

        height:
            27px;
    }

    .section-kicker {
        font-size:
            7px;

        letter-spacing:
            2.5px;
    }

    .display-heading {
        font-size:
            clamp(48px, 15vw, 75px);

        letter-spacing:
            -4px;
    }


    /* BOOT */

    .boot-corner {
        font-size:
            7px;
    }

    .boot-corner-top-left {
        top:
            18px;

        left:
            18px;
    }

    .boot-corner-top-right {
        top:
            18px;

        right:
            18px;
    }

    .boot-corner-bottom-left {
        bottom:
            18px;

        left:
            18px;
    }

    .boot-corner-bottom-right {
        bottom:
            18px;

        right:
            18px;
    }

    .boot-mark {
        width:
            60px;

        height:
            60px;
    }

    .boot-mark-inner {
        width:
            46px;

        height:
            46px;
    }

    .boot-mark-inner span {
        font-size:
            22px;
    }

    .boot-college {
        font-size:
            7px;

        letter-spacing:
            3px;
    }

    .boot-terminal-content {
        padding:
            17px;

        font-size:
            9px;

        line-height:
            1.9;
    }

    .terminal-window-title {
        display:
            none;
    }

    .boot-title h1 {
        font-size:
            clamp(70px, 24vw, 120px);

        letter-spacing:
            -5px;
    }

    .boot-title-subtitle {
        font-size:
            11px;

        letter-spacing:
            3px;

        line-height:
            1.8;
    }

    .boot-eyebrow {
        font-size:
            7px;

        letter-spacing:
            3px;
    }

    .boot-team {
        padding:
            0 20px;

        line-height:
            2;

        font-size:
            7px;
    }


    /* NAV */

    .navbar {
        padding:
            0 18px;
    }

    .brand-text {
        font-size:
            10px;
    }


    /* HERO */

    .hero {
        min-height:
            100svh;

        padding:
            100px 18px 90px;

        align-items:
            center;
    }

    .hero-system {
        width:
            330px;

        right:
            50%;

        top:
            55%;

        transform:
            translate(50%, -50%);

        opacity:
            0.16;
    }

    .hero-overline {
        font-size:
            7px;

        letter-spacing:
            2px;

        margin-bottom:
            22px;
    }

    .overline-line {
        width:
            20px;
    }

    .hero-small-title {
        font-size:
            11px;

        letter-spacing:
            4px;
    }

    .hero-title-main {
        font-size:
            clamp(78px, 24vw, 140px);

        letter-spacing:
            -6px;
    }

    .hero-title-outline {
        margin-top:
            15px;

        font-size:
            clamp(20px, 7vw, 34px);

        letter-spacing:
            3px;
    }

    .hero-description {
        margin-top:
            25px;

        font-size:
            11px;

        line-height:
            1.8;
    }

    .hero-actions {
        flex-direction:
            column;

        align-items:
            stretch;

        width:
            min(100%, 330px);
    }

    .primary-button,
    .secondary-button {
        width:
            100%;
    }

    .hero-meta {
        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            12px;

        margin-top:
            30px;
    }

    .hero-meta div:last-child {
        grid-column:
            1 / -1;
    }

    .hero-scroll {
        display:
            none;
    }


    /* INTRO */

    .intro {
        min-height:
            auto;
    }

    .large-copy {
        font-size:
            15px;
    }

    .small-copy {
        font-size:
            10px;
    }

    .stat-strip {
        grid-template-columns:
            1fr 1fr;

        margin-top:
            50px;
    }

    .stat-card {
        min-height:
            125px;

        padding:
            17px;
    }

    .stat-card:nth-child(2) {
        border-right:
            0;
    }

    .stat-card:nth-child(3) {
        border-top:
            1px solid var(--line);
    }

    .stat-card:nth-child(4) {
        border-top:
            1px solid var(--line);
    }


    /* ARCHITECTURE */

    .architecture-system {
        gap:
            7px;
    }

    .architecture-system::before {
        left:
            23px;
    }

    .architecture-layer {
        min-height:
            82px;

        grid-template-columns:
            32px 42px 1fr;

        gap:
            10px;

        padding:
            14px;
    }

    .layer-icon {
        width:
            36px;

        height:
            36px;

        font-size:
            12px;
    }

    .layer-content h3 {
        font-size:
            10px;
    }

    .layer-content p {
        margin-top:
            4px;

        font-size:
            8px;
    }

    .layer-badge,
    .layer-arrow {
        display:
            none;
    }

    .architecture-note {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            8px;

        font-size:
            7px;

        line-height:
            1.7;
    }


    /* CLI */

    .cli-heading {
        margin-bottom:
            30px;
    }

    .terminal-demo-header {
        height:
            42px;
    }

    .terminal-demo-title {
        display:
            none;
    }

    .terminal-output {
        min-height:
            260px;

        padding:
            18px;

        font-size:
            9px;
    }

    .terminal-input-area {
        padding:
            0 15px;
    }

    .terminal-user {
        font-size:
            8px;
    }

    .terminal-input-area input {
        font-size:
            9px;
    }

    .command-cards {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .command-card {
        min-height:
            90px;
    }


    /* PERMISSIONS */

    .permissions-interface {
        padding:
            17px;
    }

    .permission-code {
        min-height:
            200px;
    }

    .permission-string {
        font-size:
            30px;

        gap:
            4px;

        letter-spacing:
            1px;
    }

    .permission-controls {
        gap:
            7px;
    }

    .permission-card {
        grid-template-columns:
            25px 1fr auto;

        padding:
            15px;
    }

    .permission-card strong {
        font-size:
            10px;
    }

    .permission-card small {
        font-size:
            7px;
    }

    .permission-legend {
        gap:
            15px;

        font-size:
            7px;
    }


    /* SECURITY */

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

    .security-card,
    .security-card-large {
        min-height:
            235px;
    }

    .security-card h3 {
        font-size:
            15px;
    }


    /* KALI */

    .kali-terminal-body {
        min-height:
            300px;

        padding:
            20px;

        font-size:
            9px;
    }

    .kali-tool-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .kali-tool {
        min-height:
            100px;

        padding:
            15px;
    }

    .kali-tool strong {
        font-size:
            8px;
    }


    /* FORENSICS */

    .forensic-timeline {
        grid-template-columns:
            1fr;

        gap:
            35px;
    }

    .forensic-step {
        display:
            grid;

        grid-template-columns:
            55px 45px 1fr;

        align-items:
            center;

        gap:
            15px;

        text-align:
            left;
    }

    .forensic-step-number {
        width:
            55px;

        height:
            55px;

        margin:
            0;

        box-shadow:
            none;
    }

    .forensic-step-icon {
        margin:
            0;

        width:
            42px;

        height:
            42px;
    }

    .forensic-step-content h3 {
        margin-top:
            0;

        font-size:
            10px;
    }

    .forensic-step-content p {
        margin:
            6px 0 0;

        font-size:
            8px;
    }


    /* NETWORK */

    .network-canvas {
        min-height:
            310px;
    }

    .network-node i {
        width:
            40px;

        height:
            40px;
    }

    .network-command-list div {
        min-height:
            58px;
    }


    /* SYSTEM */

    .dashboard-core {
        min-height:
            300px;

        flex-direction:
            column;

        gap:
            35px;

        padding:
            30px;
    }

    .dashboard-ring {
        width:
            145px;

        height:
            145px;
    }

    .dashboard-ring strong {
        font-size:
            40px;
    }

    .dashboard-info {
        width:
            100%;
    }

    .dashboard-metrics {
        padding:
            20px;
    }


    /* TAKEAWAY */

    .takeaway h2 {
        font-size:
            clamp(48px, 15vw, 80px);

        letter-spacing:
            -4px;
    }

    .takeaway-flow {
        gap:
            10px;

        font-size:
            7px;
    }


    /* TEAM */

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

    .team-member {
        min-height:
            220px;

        padding:
            18px;
    }

    .team-avatar {
        width:
            70px;

        height:
            70px;

        font-size:
            22px;
    }

    .team-member h3 {
        font-size:
            10px;
    }


    /* FINAL */

    .final-content h2 {
        font-size:
            clamp(70px, 23vw, 120px);

        letter-spacing:
            -6px;
    }

    .final-content > p {
        margin-top:
            40px;

        font-size:
            8px;
    }

    .final-command {
        width:
            min(330px, 90vw);

        font-size:
            8px;
    }

    .final-team {
        padding:
            0 20px;

        line-height:
            2;
    }


    /* FOOTER */

    .footer {
        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

        gap:
            12px;

        padding:
            25px 18px;
    }

}


/* =========================================================
   29 — SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .hero-title-main {
        font-size:
            75px;
    }

    .display-heading {
        font-size:
            45px;
    }

    .stat-card {
        padding:
            13px;
    }

    .command-card {
        padding:
            12px;
    }

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

    .team-member {
        min-height:
            210px;
    }

}


/* =========================================================
   30 — LANDSCAPE MOBILE
   ========================================================= */

@media (
    max-height: 600px
) and (
    orientation: landscape
) {

    .hero {
        padding-top:
            90px;
    }

    .hero-title-main {
        font-size:
            75px;
    }

    .hero-description {
        margin-top:
            15px;
    }

    .hero-actions {
        margin-top:
            15px;
    }

    .hero-meta {
        margin-top:
            15px;
    }

    .hero-scroll {
        display:
            none;
    }

    .boot-mark {
        display:
            none;
    }

    .boot-college {
        margin-bottom:
            10px;
    }

    .boot-terminal-content {
        padding:
            12px;
    }

}


/* =========================================================
   31 — ACCESSIBILITY
   ========================================================= */

:focus-visible {

    outline:
        1px solid var(--cyan);

    outline-offset:
        4px;
}


/* =========================================================
   32 — REDUCED MOTION
   ========================================================= */

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

    html {
        scroll-behavior:
            auto;
    }

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

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

}
/* =========================================================
   INTRO SAFETY FIX
   ========================================================= */

body.intro-active {
    overflow: hidden;
}

/* Website is always available underneath intro */
body > *:not(#intro):not(.intro):not(.intro-screen):not(.loader):not(.loading-screen):not(.preloader) {
    visibility: visible;
}

/* Once intro finishes, NEVER keep the page hidden */
body.page-loaded {
    overflow-x: hidden;
}

/* Finished intro must disappear */
.intro-finished,
.intro-complete #intro,
.intro-complete .intro-screen,
.intro-complete .loader,
.intro-complete .loading-screen,
.intro-complete .preloader {
    pointer-events: none !important;
}
/* =========================================================
   FINAL INTRO / LOADER FIX
   DO NOT DELETE
   ========================================================= */

/* The real website must always exist underneath the intro */
html,
body {
    min-height: 100%;
}

body {
    overflow-x: hidden;
}

/* Never hide the actual website */
main,
header,
nav,
footer,
section,
.hero,
.hero-content {
    visibility: visible;
}

/* ---------------------------------------------------------
   INTRO INITIAL STATE
   --------------------------------------------------------- */

#intro,
#intro-screen,
#introScreen,
#loader,
#loading-screen,
#loadingScreen,
#preloader,
.intro,
.intro-screen,
.intro-screen-wrapper,
.loader,
.loading-screen,
.preloader {
    pointer-events: auto;
}

/* ---------------------------------------------------------
   WHEN JAVASCRIPT FINISHES
   --------------------------------------------------------- */

body.page-loaded
#intro,
body.page-loaded
#intro-screen,
body.page-loaded
#introScreen,
body.page-loaded
#loader,
body.page-loaded
#loading-screen,
body.page-loaded
#loadingScreen,
body.page-loaded
#preloader,
body.page-loaded
.intro,
body.page-loaded
.intro-screen,
body.page-loaded
.intro-screen-wrapper,
body.page-loaded
.loader,
body.page-loaded
.loading-screen,
body.page-loaded
.preloader {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ---------------------------------------------------------
   FINAL STATE
   --------------------------------------------------------- */

body.intro-complete
#intro,
body.intro-complete
#intro-screen,
body.intro-complete
#introScreen,
body.intro-complete
#loader,
body.intro-complete
#loading-screen,
body.intro-complete
#loadingScreen,
body.intro-complete
#preloader,
body.intro-complete
.intro,
body.intro-complete
.intro-screen,
body.intro-complete
.intro-screen-wrapper,
body.intro-complete
.loader,
body.intro-complete
.loading-screen,
body.intro-complete
.preloader {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ---------------------------------------------------------
   SAFETY: BODY MUST NEVER REMAIN HIDDEN
   --------------------------------------------------------- */

body.page-loaded,
body.intro-complete,
body.window-loaded {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ---------------------------------------------------------
   SAFETY: MAIN CONTENT
   --------------------------------------------------------- */

body.page-loaded main,
body.page-loaded header,
body.page-loaded nav,
body.page-loaded footer,
body.page-loaded section,
body.intro-complete main,
body.intro-complete header,
body.intro-complete nav,
body.intro-complete footer,
body.intro-complete section {
    visibility: visible !important;
    opacity: 1;
}

/* ---------------------------------------------------------
   EMERGENCY FALLBACK
   If JavaScript fails, CSS itself removes the intro
   after 5.8 seconds.
   --------------------------------------------------------- */

@keyframes emergencyIntroExit {

    0% {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    88% {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

}

/* Only apply fallback when intro exists */
#intro,
#intro-screen,
#introScreen,
#loader,
#loading-screen,
#loadingScreen,
#preloader,
.intro,
.intro-screen,
.intro-screen-wrapper,
.loader,
.loading-screen,
.preloader {
    animation:
        emergencyIntroExit
        0.8s
        ease
        5.0s
        forwards;
}

/* ---------------------------------------------------------
   WEBSITE CONTENT STAYS ABOVE BACKGROUND
   --------------------------------------------------------- */

main,
header,
nav,
footer,
section {
    position: relative;
}

/* ---------------------------------------------------------
   MOBILE SAFETY
   --------------------------------------------------------- */

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    main,
    section,
    header,
    nav,
    footer {
        max-width: 100%;
    }

}