:root {

            --bg: #020409;

            --panel: rgba(7, 13, 23, 0.72);

            --text: #f6f8fb;

            --muted:

                rgba(

                    220,

                    229,

                    241,

                    0.62

                );

            --faint:

                rgba(

                    220,

                    229,

                    241,

                    0.36

                );

            --border:

                rgba(

                    255,

                    255,

                    255,

                    0.10

                );

            --blue: #5bb8ff;

            --blue-bright: #9edcff;

            --page-width: 1100px;

        }



        * {

            box-sizing: border-box;

        }



        html {

            min-height: 100%;

            scroll-behavior: smooth;

        }



        body {

            min-height: 100%;

            margin: 0;

            overflow-x: hidden;

            background:

                radial-gradient(

                    circle at 50% 10%,

                    rgba(44, 132, 255, 0.15),

                    transparent 32%

                ),

                radial-gradient(

                    circle at 15% 60%,

                    rgba(50, 111, 196, 0.07),

                    transparent 30%

                ),

                #020409;

            color: var(--text);

            font-family:

                "Inter",

                sans-serif;

            -webkit-font-smoothing:

                antialiased;

        }



        body::before {

            position: fixed;

            inset: 0;

            z-index: -3;

            pointer-events: none;

            content: "";

            opacity: 0.22;

            background-image:

                radial-gradient(

                    circle at 12% 20%,

                    rgba(255, 255, 255, 0.9) 0 1px,

                    transparent 1.4px

                ),

                radial-gradient(

                    circle at 76% 32%,

                    rgba(100, 190, 255, 0.9) 0 1px,

                    transparent 1.4px

                ),

                radial-gradient(

                    circle at 34% 72%,

                    rgba(255, 255, 255, 0.65) 0 1px,

                    transparent 1.4px

                ),

                radial-gradient(

                    circle at 88% 78%,

                    rgba(76, 172, 255, 0.75) 0 1px,

                    transparent 1.4px

                );

            background-size:

                310px 310px,

                430px 430px,

                520px 520px,

                650px 650px;

        }



        a {

            color: inherit;

            text-decoration: none;

        }



        button,

        a {

            -webkit-tap-highlight-color: transparent;

        }



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

           HEADER

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

        .site-header {

            position: fixed;

            top: 0;

            right: 0;

            left: 0;

            z-index: 50;

            border-bottom:

                1px solid

                rgba(255, 255, 255, 0.07);

            background:

                rgba(2, 4, 9, 0.72);

            backdrop-filter: blur(18px);

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

        }



        .header-inner {

            width:

                min(

                    calc(100% - 40px),

                    var(--page-width)

                );

            min-height: 76px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 24px;

            margin-inline: auto;

        }



        .brand {

            display: inline-flex;

            align-items: center;

            gap: 12px;

        }



        .brand img {

            width: 38px;

            height: 38px;

            object-fit: contain;

        }



        .brand-copy {

            display: grid;

            gap: 1px;

        }



        .brand-copy strong {

            font-family:

                "Manrope",

                sans-serif;

            font-size: 0.82rem;

            font-weight: 600;

            letter-spacing: 0.16em;

        }



        .brand-copy span {

            color: var(--faint);

            font-size: 0.56rem;

            letter-spacing: 0.18em;

        }



        .header-status {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            color: var(--faint);

            font-size: 0.58rem;

            font-weight: 600;

            letter-spacing: 0.15em;

            text-transform: uppercase;

        }



        .status-dot {

            width: 6px;

            height: 6px;

            border-radius: 50%;

            background: var(--blue-bright);

            box-shadow:

                0 0 10px

                rgba(91, 184, 255, 0.9);

        }



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

           MAIN

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

        main {

            width:

                min(

                    calc(100% - 40px),

                    var(--page-width)

                );

            margin-inline: auto;

        }



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

           HERO

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

        .signal-section {

            min-height: 100svh;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            padding:

                130px

                0

                80px;

            text-align: center;

        }



        .signal-eyebrow {

            display: inline-flex;

            align-items: center;

            gap: 9px;

            margin-bottom: 28px;

            color: var(--blue-bright);

            font-size: 0.61rem;

            font-weight: 600;

            letter-spacing: 0.24em;

            text-transform: uppercase;

        }



        .signal-pulse {

            width: 6px;

            height: 6px;

            border-radius: 50%;

            background: var(--blue-bright);

            box-shadow:

                0 0 8px

                rgba(128, 208, 255, 0.95),

                0 0 24px

                rgba(63, 161, 255, 0.5);

            animation:

                signalPulse

                2s

                ease-in-out

                infinite;

        }



        .signal-section h1 {

            margin: 0;

            font-family:

                "Manrope",

                sans-serif;

            font-size:

                clamp(

                    3.2rem,

                    9vw,

                    7.5rem

                );

            font-weight: 400;

            line-height: 0.92;

            letter-spacing: -0.065em;

        }



        .signal-section h1 span {

            color:

                rgba(

                    237,

                    244,

                    251,

                    0.34

                );

        }



        .signal-intro {

            max-width: 600px;

            margin:

                28px

                auto

                0;

            color: var(--muted);

            font-size:

                clamp(

                    0.9rem,

                    1.4vw,

                    1.03rem

                );

            line-height: 1.75;

        }



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

           SIGNAL CARD

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

        .signal-card {

            position: relative;

            width:

                min(

                    100%,

                    760px

                );

            min-height: 280px;

            display: flex;

            flex-direction: column;

            justify-content: center;

            margin-top: 56px;

            padding:

                clamp(

                    34px,

                    6vw,

                    58px

                );

            overflow: hidden;

            border:

                1px solid

                rgba(99, 190, 255, 0.18);

            background:

                linear-gradient(

                    145deg,

                    rgba(14, 29, 49, 0.72),

                    rgba(4, 8, 15, 0.82)

                );

            box-shadow:

                0 40px 100px

                rgba(0, 0, 0, 0.28);

            backdrop-filter: blur(18px);

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

        }



        .signal-card::before {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 1px;

            content: "";

            background:

                linear-gradient(

                    90deg,

                    transparent,

                    rgba(91, 184, 255, 0.8),

                    transparent

                );

        }



        .signal-number {

            margin-bottom: 22px;

            color: var(--blue-bright);

            font-size: 0.58rem;

            font-weight: 600;

            letter-spacing: 0.22em;

            text-transform: uppercase;

        }



        .signal-copy {

            min-height: 104px;

            display: flex;

            align-items: center;

            justify-content: center;

        }



        .signal-text {

            max-width: 660px;

            margin: 0;

            font-family:

                "Manrope",

                sans-serif;

            font-size:

                clamp(

                    1.5rem,

                    4vw,

                    2.65rem

                );

            font-weight: 400;

            line-height: 1.25;

            letter-spacing: -0.035em;

            opacity: 1;

            transform:

                translateY(0);

            transition:

                opacity 420ms ease,

                transform 420ms ease;

        }



        .signal-text.changing {

            opacity: 0;

            transform:

                translateY(12px);

        }



        .signal-text .language {

            color: var(--blue-bright);

        }



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

           PROGRESS

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

        .signal-progress {

            width: 100%;

            height: 2px;

            margin-top: 32px;

            overflow: hidden;

            background:

                rgba(255, 255, 255, 0.07);

        }



        .signal-progress-bar {

            width: 0%;

            height: 100%;

            background:

                linear-gradient(

                    90deg,

                    var(--blue),

                    #c0ebff

                );

            box-shadow:

                0 0 10px

                rgba(91, 184, 255, 0.7);

        }



        .signal-progress-bar.running {

            animation:

                signalProgress

                4.2s

                linear

                forwards;

        }



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

           WHATSAPP

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

        .whatsapp-area {

            margin-top: 30px;

        }



        .whatsapp-button {

            display: inline-flex;

            min-height: 54px;

            align-items: center;

            justify-content: center;

            gap: 12px;

            padding:

                0

                25px;

            border:

                1px solid

                rgba(134, 218, 255, 0.26);

            border-radius: 999px;

            background:

                rgba(67, 153, 255, 0.075);

            color: #ffffff;

            font-size: 0.76rem;

            font-weight: 600;

            letter-spacing: 0.04em;

            transition:

                transform 220ms ease,

background 220ms ease,

                border-color 220ms ease;

        }



        .whatsapp-button:hover {

            border-color:

                rgba(144, 222, 255, 0.64);

            background:

                rgba(67, 153, 255, 0.14);

            transform:

                translateY(-2px);

        }



        .whatsapp-button i {

            color: #78d99a;

            font-size: 1.1rem;

        }



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

           ARROWS

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

        .signal-descent {

            min-height: 190px;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            gap: 8px;

        }



        .down-arrow {

            color:

                rgba(

                    138,

                    214,

                    255,

                    0.22

                );

            font-size: 1.2rem;

            animation:

                arrowChime

                2.1s

                ease-in-out

                infinite;

        }



        .down-arrow:nth-child(2) {

            animation-delay: 0.35s;

        }



        .down-arrow:nth-child(3) {

            animation-delay: 0.7s;

        }



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

           FINAL MESSAGE

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

        .future-section {

            min-height: 90svh;

            display: flex;

            align-items: center;

            justify-content: center;

            padding:

                70px

                0

                120px;

        }



        .future-card {

            position: relative;

            width:

                min(

                    100%,

                    820px

                );

            padding:

                clamp(

                    38px,

                    7vw,

                    75px

                );

            overflow: hidden;

            border:

                1px solid

                rgba(

                    113,

                    201,

                    255,

                    0.20

                );

            background:

                radial-gradient(

                    circle at 50% 0%,

                    rgba(61, 151, 255, 0.12),

                    transparent 40%

                ),

                rgba(

                    6,

                    12,

                    22,

                    0.82

                );

            text-align: center;

            box-shadow:

                0 45px 110px

                rgba(0, 0, 0, 0.32);

        }



        .future-card::before,

        .future-card::after {

            position: absolute;

            width: 170px;

            height: 170px;

            border:

                1px solid

                rgba(

                    95,

                    188,

                    255,

                    0.10

                );

            border-radius: 50%;

            content: "";

        }



        .future-card::before {

            top: -90px;

            left: -90px;

        }



        .future-card::after {

            right: -90px;

            bottom: -90px;

        }



        .future-label {

            margin: 0;

            color: var(--blue-bright);

            font-size: 0.61rem;

            font-weight: 600;

            letter-spacing: 0.24em;

            text-transform: uppercase;

        }



        .future-card h2 {

            margin:

                18px

                0

                0;

            font-family:

                "Manrope",

                sans-serif;

            font-size:

                clamp(

                    2.4rem,

                    6vw,

                    5rem

                );

            font-weight: 400;

            line-height: 0.98;

            letter-spacing: -0.055em;

        }



        .future-card h2 span {

            color:

                rgba(

                    236,

                    244,

                    252,

                    0.38

                );

        }



        .future-message {

            max-width: 600px;

            margin:

                30px

                auto

                0;

            color: var(--muted);

            font-size:

                clamp(

                    0.95rem,

                    1.6vw,

                    1.08rem

                );

            line-height: 1.85;

        }



        .future-message strong {

            color: #ffffff;

            font-weight: 500;

        }



        .love-note {

            margin-top: 34px;

            color:

                rgba(

                    222,

                    233,

                    244,

                    0.78

                );

            font-family:

                "Manrope",

                sans-serif;

            font-size: 0.88rem;

            line-height: 1.7;

        }



        .love-note span {

            display: block;

            color: var(--blue-bright);

        }



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

           FOOTER

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

        .site-footer {

            width:

                min(

                    calc(100% - 40px),

                    var(--page-width)

                );

            min-height: 88px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 20px;

            margin-inline: auto;

            border-top:

                1px solid

                rgba(

                    255,

                    255,

                    255,

                    0.07

                );

            color: var(--faint);

            font-size: 0.58rem;

            letter-spacing: 0.12em;

            text-transform: uppercase;

        }



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

           ANIMATIONS

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

        @keyframes signalPulse {

            0%,

            100% {

                opacity: 0.45;

                transform:

                    scale(0.8);

            }

            50% {

                opacity: 1;

                transform:

                    scale(1.18);

            }

        }



        @keyframes signalProgress {

            from {

                width: 0%;

            }

            to {

                width: 100%;

            }

        }



        @keyframes arrowChime {

            0%,

            100% {

                color:

                    rgba(

                        138,

                        214,

                        255,

                        0.18

                    );

                transform:

                    translateY(-3px);

            }

            45% {

                color: var(--blue-bright);

                text-shadow:

                    0 0 15px

                    rgba(

                        91,

                        184,

                        255,

                        0.9

                    );

                transform:

                    translateY(4px);

            }

        }



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

           RESPONSIVE

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

        @media (max-width: 650px) {

            .header-status {

                display: none;

            }



            .signal-section {

                padding-top: 115px;

            }



            .signal-card {

                min-height: 300px;

                padding:

                    34px

                    22px;

            }



            .signal-copy {

                min-height: 130px;

            }



            .future-section {

                min-height: auto;

                padding-bottom: 80px;

            }



            .future-card {

                padding:

                    45px

                    24px;

            }



            .site-footer {

                flex-direction: column;

                justify-content: center;

                padding:

                    25px

                    0;

                text-align: center;

            }

        }



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

            *,

            *::before,

            *::after {

                scroll-behavior: auto !important;

                animation-duration:

                    0.01ms !important;

                animation-iteration-count:

                    1 !important;

                transition-duration:

                    0.01ms !important;

            }

        }


/* =====================================================
   NOUS IMAGE SIGNAL SLIDER
   Added to the original NOUS News layout.
   The surrounding page layout is intentionally unchanged.
====================================================== */

.image-signal {
    width: min(100%, 760px);
    margin-top: 38px;
    overflow: hidden;
    border: 1px solid rgba(99, 190, 255, 0.18);
    background:
        linear-gradient(
            145deg,
            rgba(14, 29, 49, 0.72),
            rgba(4, 8, 15, 0.82)
        );
    box-shadow:
        0 40px 100px
        rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.image-signal-top {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 20px;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.07);
}

.image-signal-label {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.image-signal-label > div {
    display: grid;
    gap: 3px;
}

.image-signal-label span:not(.image-signal-pulse) {
    color: var(--blue-bright);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.20em;
}

.image-signal-label strong {
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
}

.image-signal-pulse {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--blue-bright);
    box-shadow:
        0 0 8px rgba(128, 208, 255, 0.95),
        0 0 24px rgba(63, 161, 255, 0.5);
    animation:
        signalPulse
        2s
        ease-in-out
        infinite;
}

.image-signal-count {
    display: flex;
    gap: 5px;
    color: var(--faint);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.image-signal-count span:first-child {
    color: var(--blue-bright);
}

.image-signal-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 4;
    overflow: hidden;
    background: #000000;
}

.image-signal-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(18px);
    transition:
        opacity 520ms ease,
        transform 520ms ease,
        visibility 520ms ease;
}

.image-signal-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.image-signal-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000000;
}

.image-signal-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    transform: translateY(-50%);
    border:
        1px solid
        rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background:
        rgba(2, 4, 9, 0.66);
    color: #ffffff;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.image-signal-arrow:hover {
    border-color:
        rgba(144, 222, 255, 0.56);
    background:
        rgba(8, 21, 35, 0.88);
}

.image-signal-prev {
    left: 14px;
}

.image-signal-next {
    right: 14px;
}

.image-signal-bottom {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 18px;
    border-top:
        1px solid
        rgba(255, 255, 255, 0.07);
}

.image-signal-bottom > span {
    color: var(--faint);
    font-size: 0.53rem;
    font-weight: 600;
    letter-spacing: 0.16em;
}

.image-signal-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.image-signal-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background:
        rgba(214, 231, 245, 0.28);
    cursor: pointer;
    transition:
        width 220ms ease,
        background 220ms ease;
}

.image-signal-dot.active {
    width: 22px;
    background: var(--blue-bright);
}

@media (max-width: 650px) {
    .image-signal {
        margin-top: 32px;
    }

    .image-signal-top {
        min-height: 58px;
        padding: 0 14px;
    }

    .image-signal-arrow {
        width: 34px;
        height: 34px;
    }

    .image-signal-prev {
        left: 8px;
    }

    .image-signal-next {
        right: 8px;
    }

    .image-signal-bottom {
        min-height: 46px;
        padding: 0 13px;
    }

    .image-signal-bottom > span {
        font-size: 0.48rem;
    }
}