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

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;

    background: #020611;

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

    color: white;
}


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

.site {
    width: 100%;
    height: 100%;

    position: relative;
}


/* ==================================================
   GLOBAL SCREEN SYSTEM
================================================== */

.hero,
.intro,
.examples,
.commands,
.features,
.how-it-works,
.final-cta {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        scale(1.04)
        translateY(25px);

    filter:
        blur(6px);

    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        filter 0.8s ease,
        visibility 0.8s ease;
}


/* ==================================================
   INITIAL SCREEN — HERO
================================================== */

.hero {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        scale(1)
        translateY(0);

    filter:
        blur(0);
}


/* ==================================================
   SCREEN LAYERS
================================================== */

.hero {
    z-index: 10;
}

.intro {
    z-index: 20;
}

.examples {
    z-index: 30;
}

.commands {
    z-index: 40;
}

.features {
    z-index: 50;
}

.how-it-works {
    z-index: 60;
}

.final-cta {
    z-index: 70;
}


/* ==================================================
   ACTIVE SCREEN
================================================== */

body.hero-active .hero,
body.intro-active .intro,
body.examples-active .examples,
body.commands-active .commands,
body.features-active .features,
body.how-active .how-it-works,
body.final-active .final-cta {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        scale(1)
        translateY(0);

    filter:
        blur(0);
}


/* ==================================================
   SCREEN 1 — HERO
================================================== */

.hero {

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(
                35,
                75,
                125,
                0.35
            ),
            transparent 35%
        ),
        radial-gradient(
            circle at 20% 20%,
            rgba(
                25,
                55,
                100,
                0.25
            ),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(
                15,
                40,
                80,
                0.2
            ),
            transparent 30%
        ),
        #020611;
}


.hero::before {

    content: "";

    position: absolute;

    inset: -20%;

    background:
        radial-gradient(
            circle,
            rgba(
                60,
                110,
                180,
                0.1
            ),
            transparent 45%
        );

    filter:
        blur(70px);

    animation:
        backgroundMove
        12s
        ease-in-out
        infinite
        alternate;

    pointer-events: none;
}


.hero::after {

    content: "";

    position: absolute;

    inset: 0;

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

    background-size:
        80px
        80px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );

    pointer-events: none;
}


/* ==================================================
   NAVBAR / LOGO
================================================== */

.navbar {

    position: relative;

    z-index: 10;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    padding-top: 80px;
}


.logo {
    display: block;
}


.logo img {

    display: block;

    width: 525px;

    max-width: 75vw;

    height: auto;

    max-height: 260px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 55px
            rgba(
                80,
                130,
                210,
                0.3
            )
        );

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}


.logo:hover img {

    transform:
        scale(1.02);

    filter:
        drop-shadow(
            0 0 70px
            rgba(
                90,
                145,
                230,
                0.42
            )
        );
}


/* ==================================================
   HERO BUTTON AREA
================================================== */

.hero-content {

    position: relative;

    z-index: 10;

    width: 100%;

    height:
        calc(
            100vh - 130px
        );

    display: flex;

    align-items: center;

    justify-content: center;
}


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

.get-started,
.next-button {

    padding:
        16px 38px;

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

    border-radius:
        999px;

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

    color:
        #03050b;

    font-size:
        16px;

    font-weight:
        700;

    letter-spacing:
        0.5px;

    cursor:
        pointer;

    box-shadow:
        0 10px 40px
        rgba(
            0,
            0,
            0,
            0.35
        );

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


.get-started:hover,
.next-button:hover {

    transform:
        translateY(-4px)
        scale(1.03);

    background:
        white;

    box-shadow:
        0 15px 55px
        rgba(
            75,
            130,
            210,
            0.25
        );
}


.get-started:active,
.next-button:active {

    transform:
        translateY(-1px)
        scale(0.99);
}


/* ==================================================
   PAGE NAVIGATION
================================================== */

.page-navigation {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    margin-top:
        35px;
}


.page-navigation .next-button {

    margin-top:
        0;
}


.back-button {

    padding:
        16px 30px;

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

    border-radius:
        999px;

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

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

    font-size:
        15px;

    font-weight:
        700;

    letter-spacing:
        0.4px;

    cursor:
        pointer;

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

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


.back-button:hover {

    transform:
        translateY(-3px);

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

    color:
        white;

    border-color:
        rgba(
            126,
            174,
            252,
            0.25
        );

    box-shadow:
        0 12px 35px
        rgba(
            0,
            0,
            0,
            0.2
        );
}


.back-button:active {

    transform:
        translateY(-1px)
        scale(0.99);
}


/* ==================================================
   SCREEN 2 — INTRO
================================================== */

.intro {

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
        40px;

    background:
        radial-gradient(
            circle at 70% 35%,
            rgba(
                35,
                75,
                125,
                0.35
            ),
            transparent 35%
        ),
        radial-gradient(
            circle at 20% 70%,
            rgba(
                20,
                55,
                100,
                0.25
            ),
            transparent 35%
        ),
        #020611;
}


.intro::before {

    content: "";

    position: absolute;

    inset: -20%;

    background:
        radial-gradient(
            circle,
            rgba(
                60,
                110,
                180,
                0.10
            ),
            transparent 45%
        );

    filter:
        blur(90px);

    animation:
        introGlow
        10s
        ease-in-out
        infinite
        alternate;

    pointer-events:
        none;
}


.intro-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        900px;

    transform:
        translateY(40px);

    opacity:
        0;

    transition:
        opacity 0.7s ease,
        transform 0.8s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


body.intro-active .intro-content {

    opacity:
        1;

    transform:
        translateY(0);
}


.intro-label {

    margin-bottom:
        22px;

    font-size:
        13px;

    letter-spacing:
        6px;

    color:
        rgba(
            150,
            190,
            255,
            0.65
        );
}


.intro h1 {

    margin-bottom:
        28px;

    font-size:
        clamp(
            60px,
            8vw,
            120px
        );

    line-height:
        0.95;

    font-weight:
        800;

    letter-spacing:
        -4px;
}


.intro h1 span {

    color:
        #7eaefc;

    text-shadow:
        0 0 30px
        rgba(
            80,
            130,
            220,
            0.35
        );
}


.intro-description {

    max-width:
        800px;

    margin:
        0 auto 40px;

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

    font-size:
        18px;

    line-height:
        1.7;
}


/* ==================================================
   SCREEN 3 — EXAMPLES
================================================== */

.examples {

    padding:
        110px 70px 70px;

    overflow-y:
        auto;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(
                25,
                55,
                100,
                0.28
            ),
            transparent 32%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(
                30,
                70,
                120,
                0.22
            ),
            transparent 35%
        ),
        #020611;
}


.examples-header {

    text-align:
        center;

    max-width:
        850px;

    margin-bottom:
        50px;
}


.examples-label {

    margin-bottom:
        18px;

    font-size:
        13px;

    letter-spacing:
        5px;

    color:
        rgba(
            150,
            190,
            255,
            0.65
        );
}


.examples-header h2 {

    margin-bottom:
        20px;

    font-size:
        clamp(
            48px,
            7vw,
            90px
        );

    line-height:
        0.95;

    letter-spacing:
        -3px;
}


.examples-header h2 span {

    color:
        #7eaefc;

    text-shadow:
        0 0 30px
        rgba(
            80,
            130,
            220,
            0.3
        );
}


.examples-description {

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

    font-size:
        17px;

    line-height:
        1.6;
}


.examples-slider {

    width:
        min(
            1200px,
            100%
        );

    position:
        relative;

    min-height:
        430px;
}


.example-card {

    position:
        absolute;

    inset:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.35fr
        )
        minmax(
            280px,
            0.65fr
        );

    gap:
        45px;

    align-items:
        center;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateX(45px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        visibility 0.6s ease;

    pointer-events:
        none;
}


.example-card.active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateX(0);
}


/* ==================================================
   EXAMPLE IMAGE — FIXED
================================================== */

.example-image {

    position:
        relative;

    width:
        100%;

    height:
        390px;

    border-radius:
        24px;

    overflow:
        hidden;

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

    background:
        linear-gradient(
            145deg,
            rgba(
                40,
                70,
                110,
                0.2
            ),
            rgba(
                5,
                10,
                20,
                0.9
            )
        );

    box-shadow:
        0 30px 90px
        rgba(
            0,
            0,
            0,
            0.45
        );
}


.example-image img {

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;

    object-position:
        center;

    opacity:
        1;

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

    transition:
        opacity 0.3s ease;
}


/* ==================================================
   IMAGE PLACEHOLDER
================================================== */

.image-placeholder {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    text-align:
        center;

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

    font-size:
        16px;

    background:
        radial-gradient(
            circle at center,
            rgba(
                70,
                110,
                170,
                0.14
            ),
            transparent 55%
        );
}


/* ==================================================
   EXAMPLE INFORMATION
================================================== */

.example-info {

    max-width:
        430px;
}


.example-number {

    margin-bottom:
        12px;

    font-size:
        13px;

    letter-spacing:
        4px;

    color:
        rgba(
            150,
            190,
            255,
            0.5
        );
}


.example-info h3 {

    margin-bottom:
        18px;

    font-size:
        38px;

    letter-spacing:
        -1px;
}


.example-info p:last-child {

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

    font-size:
        17px;

    line-height:
        1.7;
}


/* ==================================================
   EXAMPLE CONTROLS
================================================== */

.examples-controls {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    margin-top:
        35px;

    position:
        relative;

    z-index:
        100;
}


.slider-button {

    width:
        42px;

    height:
        42px;

    border-radius:
        50%;

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

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

    color:
        white;

    cursor:
        pointer;

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


.slider-button:hover {

    transform:
        scale(1.08);

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


.example-dots {

    display:
        flex;

    gap:
        8px;
}


.example-dot {

    width:
        8px;

    height:
        8px;

    padding:
        0;

    border:
        none;

    border-radius:
        50%;

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

    cursor:
        pointer;

    transition:
        width 0.3s ease,
        background 0.3s ease;
}


.example-dot.active {

    width:
        28px;

    border-radius:
        999px;

    background:
        #7eaefc;
}


/* ==================================================
   SCREEN 4 — COMMANDS
================================================== */

.commands {

    padding:
        100px 70px 60px;

    overflow-y:
        auto;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(
                25,
                55,
                100,
                0.28
            ),
            transparent 32%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(
                30,
                70,
                120,
                0.22
            ),
            transparent 35%
        ),
        #020611;
}


.commands-header {

    width:
        100%;

    max-width:
        1000px;

    text-align:
        center;

    margin-bottom:
        45px;
}


.commands-label {

    margin-bottom:
        16px;

    font-size:
        13px;

    letter-spacing:
        5px;

    color:
        rgba(
            150,
            190,
            255,
            0.65
        );
}


.command-count {

    font-size:
        clamp(
            80px,
            10vw,
            150px
        );

    line-height:
        0.85;

    font-weight:
        800;

    letter-spacing:
        -8px;

    color:
        white;

    text-shadow:
        0 0 50px
        rgba(
            80,
            130,
            220,
            0.25
        );
}


.command-count span {

    color:
        #7eaefc;
}


.commands-header h2 {

    margin-top:
        25px;

    margin-bottom:
        18px;

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

    line-height:
        0.95;

    letter-spacing:
        -3px;
}


.commands-header h2 span {

    color:
        #7eaefc;
}


.commands-description {

    max-width:
        700px;

    margin:
        0 auto;

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

    font-size:
        17px;

    line-height:
        1.6;
}


.command-layout {

    width:
        min(
            1200px,
            100%
        );

    display:
        grid;

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

    gap:
        25px;
}


.command-categories {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}


.command-category {

    width:
        100%;

    padding:
        15px 18px;

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

    border-radius:
        12px;

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

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

    text-align:
        left;

    font-size:
        14px;

    cursor:
        pointer;

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


.command-category:hover {

    transform:
        translateX(4px);

    color:
        white;

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


.command-category.active {

    color:
        white;

    border-color:
        rgba(
            126,
            174,
            252,
            0.35
        );

    background:
        rgba(
            80,
            130,
            220,
            0.12
        );

    box-shadow:
        0 0 30px
        rgba(
            60,
            110,
            200,
            0.08
        );
}


.category-icon {

    display:
        inline-block;

    width:
        25px;

    color:
        #7eaefc;
}


.command-panel {

    min-height:
        330px;

    padding:
        30px;

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

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            rgba(
                40,
                70,
                110,
                0.16
            ),
            rgba(
                5,
                10,
                20,
                0.72
            )
        );

    box-shadow:
        0 30px 90px
        rgba(
            0,
            0,
            0,
            0.35
        );
}


.command-panel-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        25px;
}


.command-panel-label {

    margin-bottom:
        6px;

    font-size:
        11px;

    letter-spacing:
        3px;

    color:
        rgba(
            150,
            190,
            255,
            0.5
        );
}


.command-panel-top h3 {

    font-size:
        25px;
}


.command-counter {

    font-size:
        14px;

    letter-spacing:
        3px;

    color:
        #7eaefc;
}


.command-grid {

    display:
        grid;

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

    gap:
        12px;
}


.command-item {

    padding:
        20px;

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

    border-radius:
        14px;

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

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border 0.25s ease;
}


.command-item:hover {

    transform:
        translateY(-3px);

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

    border-color:
        rgba(
            126,
            174,
            252,
            0.2
        );
}


.command-name {

    margin-bottom:
        8px;

    font-family:
        Consolas,
        monospace;

    font-size:
        16px;

    color:
        #9fc1ff;
}


.command-description {

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

    font-size:
        14px;

    line-height:
        1.5;
}


/* ==================================================
   SCREEN 5 — FEATURES
================================================== */

.features {

    padding:
        80px 70px 55px;

    overflow-y:
        auto;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(
                25,
                60,
                115,
                0.24
            ),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 75%,
            rgba(
                35,
                75,
                135,
                0.18
            ),
            transparent 32%
        ),
        #020611;
}


.features-header {

    width:
        100%;

    max-width:
        950px;

    text-align:
        center;

    margin-bottom:
        38px;
}


.features-label {

    margin-bottom:
        16px;

    font-size:
        12px;

    letter-spacing:
        5px;

    color:
        rgba(
            150,
            190,
            255,
            0.65
        );
}


.features-header h2 {

    margin-bottom:
        18px;

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

    line-height:
        0.96;

    letter-spacing:
        -3px;
}


.features-header h2 span {

    color:
        #7eaefc;

    text-shadow:
        0 0 30px
        rgba(
            80,
            130,
            220,
            0.3
        );
}


.features-description {

    max-width:
        670px;

    margin:
        0 auto;

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

    font-size:
        16px;

    line-height:
        1.6;
}


.features-grid {

    width:
        min(
            1200px,
            100%
        );

    display:
        grid;

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

    gap:
        14px;
}


.feature-card {

    position:
        relative;

    min-height:
        195px;

    padding:
        24px;

    overflow:
        hidden;

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

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            rgba(
                40,
                70,
                110,
                0.13
            ),
            rgba(
                5,
                10,
                20,
                0.72
            )
        );

    box-shadow:
        0 20px 60px
        rgba(
            0,
            0,
            0,
            0.22
        );

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


.feature-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(
            126,
            174,
            252,
            0.22
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                45,
                80,
                125,
                0.19
            ),
            rgba(
                5,
                10,
                20,
                0.78
            )
        );

    box-shadow:
        0 28px 75px
        rgba(
            0,
            0,
            0,
            0.3
        );
}


.feature-large {

    grid-column:
        span 2;

    min-height:
        260px;
}


.feature-icon {

    position:
        relative;

    z-index:
        2;

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        18px;

    border:
        1px solid
        rgba(
            126,
            174,
            252,
            0.18
        );

    border-radius:
        12px;

    background:
        rgba(
            90,
            145,
            230,
            0.08
        );

    color:
        #9fc1ff;

    font-size:
        18px;

    box-shadow:
        0 0 25px
        rgba(
            70,
            120,
            210,
            0.08
        );
}


.feature-number {

    position:
        absolute;

    top:
        24px;

    right:
        24px;

    font-size:
        11px;

    letter-spacing:
        3px;

    color:
        rgba(
            150,
            190,
            255,
            0.38
        );
}


.feature-card h3 {

    position:
        relative;

    z-index:
        2;

    margin-bottom:
        10px;

    font-size:
        22px;

    letter-spacing:
        -0.5px;
}


.feature-card p {

    position:
        relative;

    z-index:
        2;

    max-width:
        310px;

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

    font-size:
        14px;

    line-height:
        1.6;
}


.feature-glow {

    position:
        absolute;

    width:
        190px;

    height:
        190px;

    right:
        -90px;

    bottom:
        -100px;

    border-radius:
        50%;

    background:
        rgba(
            65,
            125,
            220,
            0.12
        );

    filter:
        blur(55px);

    opacity:
        0.45;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


.feature-card:hover .feature-glow {

    opacity:
        0.75;

    transform:
        scale(1.15);
}


/* ==================================================
   SCREEN 6 — HOW IT WORKS
================================================== */

.how-it-works {

    padding:
        90px 70px 60px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        radial-gradient(
            circle at 18% 22%,
            rgba(
                30,
                65,
                120,
                0.25
            ),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 72%,
            rgba(
                35,
                75,
                135,
                0.2
            ),
            transparent 34%
        ),
        #020611;
}


.how-header {

    width:
        100%;

    max-width:
        900px;

    text-align:
        center;

    margin-bottom:
        60px;
}


.how-label {

    margin-bottom:
        16px;

    font-size:
        12px;

    letter-spacing:
        5px;

    color:
        rgba(
            150,
            190,
            255,
            0.65
        );
}


.how-header h2 {

    margin-bottom:
        18px;

    font-size:
        clamp(
            48px,
            7vw,
            82px
        );

    line-height:
        0.95;

    letter-spacing:
        -4px;
}


.how-header h2 span {

    color:
        #7eaefc;

    text-shadow:
        0 0 30px
        rgba(
            80,
            130,
            220,
            0.3
        );
}


.how-description {

    max-width:
        650px;

    margin:
        0 auto;

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

    font-size:
        17px;

    line-height:
        1.6;
}


.steps-container {

    width:
        min(
            1250px,
            100%
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;
}


.step-card {

    position:
        relative;

    flex:
        1;

    min-height:
        260px;

    padding:
        28px;

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

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            rgba(
                40,
                70,
                110,
                0.14
            ),
            rgba(
                5,
                10,
                20,
                0.76
            )
        );

    box-shadow:
        0 25px 75px
        rgba(
            0,
            0,
            0,
            0.25
        );

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


.step-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(
            126,
            174,
            252,
            0.23
        );

    box-shadow:
        0 30px 90px
        rgba(
            0,
            0,
            0,
            0.35
        );
}


.step-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        55px;
}


.step-number {

    font-size:
        12px;

    letter-spacing:
        4px;

    color:
        rgba(
            150,
            190,
            255,
            0.45
        );
}


.step-icon {

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            126,
            174,
            252,
            0.18
        );

    border-radius:
        14px;

    background:
        rgba(
            80,
            130,
            220,
            0.08
        );

    color:
        #9fc1ff;

    font-size:
        20px;

    box-shadow:
        0 0 30px
        rgba(
            70,
            120,
            210,
            0.08
        );
}


.step-card h3 {

    margin-bottom:
        12px;

    font-size:
        26px;

    letter-spacing:
        -0.8px;
}


.step-card p {

    max-width:
        330px;

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

    font-size:
        15px;

    line-height:
        1.65;
}


.step-connector {

    width:
        80px;

    height:
        2px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex-shrink:
        0;
}


.step-connector span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #7eaefc;

    opacity:
        0.25;

    animation:
        connectorPulse
        2.4s
        ease-in-out
        infinite;
}


.step-connector span:nth-child(2) {

    animation-delay:
        0.35s;
}


.step-connector span:nth-child(3) {

    animation-delay:
        0.7s;
}


/* ==================================================
   SCREEN 7 — FINAL CTA
================================================== */

.final-cta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        40px;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(
                45,
                90,
                160,
                0.28
            ),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 20%,
            rgba(
                25,
                60,
                120,
                0.18
            ),
            transparent 32%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(
                25,
                55,
                110,
                0.18
            ),
            transparent 30%
        ),
        #020611;
}


.final-cta::before {

    content:
        "";

    position:
        absolute;

    inset:
        -25%;

    background:
        radial-gradient(
            circle,
            rgba(
                70,
                125,
                220,
                0.12
            ),
            transparent 43%
        );

    filter:
        blur(85px);

    animation:
        finalGlowMove
        12s
        ease-in-out
        infinite
        alternate;

    pointer-events:
        none;
}


.final-cta::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

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

    background-size:
        90px
        90px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 72%
        );

    pointer-events:
        none;
}


/* ==================================================
   FINAL AMBIENT LIGHTS
================================================== */

.final-ambient {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(90px);

    pointer-events:
        none;
}


.final-ambient-one {

    width:
        280px;

    height:
        280px;

    left:
        -100px;

    bottom:
        -120px;

    background:
        rgba(
            55,
            105,
            190,
            0.12
        );

    animation:
        ambientFloat
        8s
        ease-in-out
        infinite
        alternate;
}


.final-ambient-two {

    width:
        220px;

    height:
        220px;

    right:
        -80px;

    top:
        -90px;

    background:
        rgba(
            65,
            125,
            220,
            0.1
        );

    animation:
        ambientFloat
        10s
        ease-in-out
        infinite
        alternate-reverse;
}


/* ==================================================
   FINAL CONTENT
================================================== */

.final-content {

    position:
        relative;

    z-index:
        5;

    max-width:
        1000px;

    transform:
        translateY(35px);

    opacity:
        0;

    transition:
        opacity 0.8s ease 0.2s,
        transform 0.9s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ) 0.2s;
}


body.final-active .final-content {

    opacity:
        1;

    transform:
        translateY(0);
}


/* ==================================================
   FINAL MARK
================================================== */

.final-mark {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    margin-bottom:
        25px;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        6px;

    color:
        rgba(
            160,
            195,
            255,
            0.72
        );
}


.final-mark span {

    width:
        34px;

    height:
        1px;

    background:
        rgba(
            126,
            174,
            252,
            0.35
        );
}


/* ==================================================
   FINAL LABEL
================================================== */

.final-label {

    margin-bottom:
        20px;

    font-size:
        12px;

    letter-spacing:
        5px;

    color:
        rgba(
            150,
            190,
            255,
            0.52
        );
}


/* ==================================================
   FINAL HEADING
================================================== */

.final-cta h2 {

    max-width:
        1000px;

    margin:
        0 auto 22px;

    font-size:
        clamp(
            52px,
            8vw,
            110px
        );

    line-height:
        0.92;

    font-weight:
        800;

    letter-spacing:
        -5px;
}


.final-cta h2 span {

    display:
        block;

    color:
        #7eaefc;

    text-shadow:
        0 0 45px
        rgba(
            75,
            130,
            220,
            0.28
        );
}


/* ==================================================
   FINAL DESCRIPTION
================================================== */

.final-description {

    max-width:
        620px;

    margin:
        0 auto 34px;

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

    font-size:
        17px;

    line-height:
        1.6;
}


/* ==================================================
   INVITE BUTTON
================================================== */

.invite-button {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        25px;

    min-width:
        260px;

    padding:
        19px 27px;

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

    border-radius:
        999px;

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

    color:
        #03050b;

    text-decoration:
        none;

    font-size:
        15px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    box-shadow:
        0 15px 50px
        rgba(
            0,
            0,
            0,
            0.35
        ),
        0 0 0
        rgba(
            70,
            130,
            220,
            0
        );

    overflow:
        hidden;

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


.invite-button::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -120%;

    width:
        75%;

    height:
        100%;

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

    transform:
        skewX(-20deg);

    transition:
        left 0.7s ease;
}


.invite-button:hover {

    transform:
        translateY(-5px)
        scale(1.03);

    background:
        white;

    box-shadow:
        0 20px 70px
        rgba(
            0,
            0,
            0,
            0.35
        ),
        0 0 45px
        rgba(
            70,
            130,
            220,
            0.18
        );
}


.invite-button:hover::before {

    left:
        140%;
}


.invite-button strong {

    font-size:
        22px;

    line-height:
        1;

    font-weight:
        400;

    transition:
        transform 0.3s ease;
}


.invite-button:hover strong {

    transform:
        translateX(5px);
}


/* ==================================================
   FINAL NOTE
================================================== */

.final-note {

    margin-top:
        18px;

    font-size:
        12px;

    letter-spacing:
        2px;

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


/* ==================================================
   TEAM CREDIT
================================================== */

.team-credit {

    margin-top:
        90px;

    padding-bottom:
        30px;

    text-align:
        center;

    opacity:
        1;
}


.team-label {

    margin-bottom:
        18px;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        4px;

    color:
        rgba(
            150,
            190,
            255,
            0.42
        );
}


.founders-line {

    margin:
        0;

    font-size:
        16px;

    font-weight:
        700;

    letter-spacing:
        0.3px;

    color:
        #b8dbff;

    text-shadow:
        0 0 8px
        rgba(
            115,
            190,
            255,
            0.65
        ),
        0 0 20px
        rgba(
            80,
            160,
            255,
            0.35
        ),
        0 0 35px
        rgba(
            70,
            140,
            255,
            0.18
        );
}


.founders-line span {

    color:
        #d3e9ff;

    margin-right:
        7px;

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


.founders-line b {

    margin:
        0 10px;

    color:
        #91c8ff;

    font-weight:
        400;

    text-shadow:
        0 0 10px
        rgba(
            100,
            180,
            255,
            0.6
        );
}


/* ==================================================
   FINAL NAVIGATION
================================================== */

.final-navigation {

    margin-top:
        35px;

    margin-bottom:
        5px;
}


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

.final-footer {

    position:
        absolute;

    left:
        35px;

    right:
        35px;

    bottom:
        25px;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

    font-size:
        10px;

    letter-spacing:
        3px;
}


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

@keyframes backgroundMove {

    0% {

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

    }

    100% {

        transform:
            translate(
                3%,
                2%
            )
            scale(1.08);

    }

}


@keyframes introGlow {

    0% {

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

    }

    100% {

        transform:
            translate(
                3%,
                2%
            )
            scale(1.08);

    }

}


@keyframes connectorPulse {

    0%,
    100% {

        opacity:
            0.2;

        transform:
            scale(0.8);
    }

    50% {

        opacity:
            0.9;

        transform:
            scale(1.2);
    }

}


@keyframes finalGlowMove {

    0% {

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

    }

    100% {

        transform:
            translate(
                3%,
                2%
            )
            scale(1.08);

    }

}


@keyframes ambientFloat {

    0% {

        transform:
            translate(
                0,
                0
            )
            scale(1);

    }

    100% {

        transform:
            translate(
                20px,
                -25px
            )
            scale(1.1);

    }

}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1000px) {

    .features-grid {

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


    .feature-large {

        grid-column:
            span 2;
    }

}


@media (max-width: 900px) {

    .navbar {

        padding-top:
            80px;
    }


    .logo img {

        width:
            430px;

        max-width:
            82vw;
    }


    .intro {

        padding:
            30px 22px;
    }


    .intro h1 {

        font-size:
            clamp(
                52px,
                13vw,
                90px
            );

        letter-spacing:
            -3px;
    }


    .intro-description {

        font-size:
            16px;
    }


    /* ==============================
       MOBILE PAGE NAVIGATION
    ============================== */

    .page-navigation {

        gap:
            10px;

        margin-top:
            28px;
    }


    .back-button,
    .page-navigation .next-button {

        padding:
            14px 24px;

        font-size:
            14px;
    }


    .examples {

        padding:
            90px 25px 40px;
    }


    .examples-header h2 {

        font-size:
            clamp(
                45px,
                12vw,
                75px
            );
    }


    .example-card {

        grid-template-columns:
            1fr;

        gap:
            25px;
    }


    /* ==============================
       MOBILE IMAGE FIX
    ============================== */

    .example-image {

        height:
            260px;

        min-height:
            260px;
    }


    .example-image img {

        width:
            100%;

        height:
            100%;

        min-height:
            0;

        object-fit:
            contain;
    }


    .example-info {

        max-width:
            none;

        text-align:
            center;
    }


    .examples-slider {

        min-height:
            660px;
    }


    .commands {

        padding:
            80px 22px 40px;
    }


    .command-layout {

        grid-template-columns:
            1fr;
    }


    .command-categories {

        display:
            grid;

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


    .command-category {

        font-size:
            13px;
    }


    .command-grid {

        grid-template-columns:
            1fr;
    }


    .command-panel {

        padding:
            22px;
    }


    .features {

        padding:
            70px 22px 40px;
    }


    .features-header h2 {

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


    .features-grid {

        grid-template-columns:
            1fr;
    }


    .feature-large {

        grid-column:
            span 1;
    }


    .feature-card {

        min-height:
            180px;
    }


    .how-it-works {

        padding:
            70px 22px 40px;

        justify-content:
            flex-start;

        overflow-y:
            auto;
    }


    .how-header {

        margin-bottom:
            40px;
    }


    .how-header h2 {

        font-size:
            clamp(
                44px,
                11vw,
                68px
            );

        letter-spacing:
            -3px;
    }


    .steps-container {

        flex-direction:
            column;

        width:
            100%;

        gap:
            12px;
    }


    .step-card {

        width:
            100%;

        min-height:
            210px;
    }


    .step-top {

        margin-bottom:
            35px;
    }


    .step-connector {

        width:
            2px;

        height:
            38px;

        flex-direction:
            column;
    }


    .final-cta {

        padding:
            30px 22px 90px;

        overflow-y:
            auto;
    }


    .final-cta h2 {

        font-size:
            clamp(
                46px,
                12vw,
                76px
            );

        letter-spacing:
            -3px;
    }


    .final-description {

        font-size:
            16px;
    }


    .invite-button {

        min-width:
            230px;
    }


    .team-credit {

        margin-top:
            65px;

        padding-bottom:
            25px;
    }


    .founders-line {

        font-size:
            14px;

        line-height:
            1.7;
    }


    .final-navigation {

        margin-top:
            30px;
    }


    .final-footer {

        left:
            22px;

        right:
            22px;

        bottom:
            18px;

        font-size:
            8px;

        letter-spacing:
            2px;
    }

}


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

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

    .hero,
    .intro,
    .examples,
    .commands,
    .features,
    .how-it-works,
    .final-cta {

        transition:
            opacity 0.2s ease;

        transform:
            none;

        filter:
            none;
    }

}