/* =====================================================
           DESIGN SYSTEM
        ====================================================== */

        :root {

            --primary: #3F6683;
            --primary-dark: #2C4964;
            --primary-soft: #EAF2F6;

            --accent: #35AAA5;
            --accent-soft: #E8F7F6;

            --heading: #172B3A;
            --text: #60707C;
            --muted: #84919A;

            --light: #F7FAFC;
            --border: #E4EBEF;

            --white: #FFFFFF;
        }


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

        * {
            box-sizing: border-box;
        }


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


        body {

            margin: 0;

            min-height: 100vh;
            min-height: 100dvh;

            display: flex;
            flex-direction: column;

            color: var(--text);

            font-family:
                "DM Sans",
                sans-serif;

            background: var(--light);

            overflow: hidden;
        }


        h1,
        h2,
        h3 {

            font-family:
                "Plus Jakarta Sans",
                sans-serif;

            color: var(--heading);

            font-weight: 800;
        }


        a {
            text-decoration: none;
        }


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

        .coming-soon {

            flex: 1;

            min-height: 0;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            padding:
                30px 20px;
        }


        .content {

            width: 100%;

            max-width: 700px;

            margin: auto;
        }


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

        .logo {

            display: inline-flex;

            align-items: center;

            gap: 11px;

            margin-bottom:
                clamp(30px, 6vh, 55px);

            color: var(--heading);

            font-size: 1.3rem;

            font-weight: 800;

            letter-spacing: -.04em;
        }


        /* 
		   NK LOGO MARK
		===================================================== */

		.logo-mark {

			width: 42px;
			height: 42px;

			display: flex;

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

			position: relative;

			color: var(--white);

			border-radius: 12px;

			background:
				linear-gradient(
					135deg,
					var(--primary),
					var(--accent)
				);

			box-shadow:
				0 8px 20px
				rgba(53, 170, 165, .18);

			overflow: hidden;
		}


		/* NK */

		.logo-nk {

			position: relative;

			z-index: 2;

			color: var(--white);

			font-family:
				"Plus Jakarta Sans",
				sans-serif;

			font-size: 14px;

			font-weight: 800;

			line-height: 1;

			letter-spacing: -1.2px;
		}


		/* Subtle highlight */

		.logo-mark::before {

			content: "";

			position: absolute;

			width: 22px;
			height: 22px;

			top: -9px;
			right: -7px;

			border-radius: 50%;

			background:
				rgba(255, 255, 255, .14);
		}


		/* Small accent detail */

		.logo-mark::after {

			content: "";

			position: absolute;

			width: 7px;
			height: 7px;

			left: 6px;
			bottom: 6px;

			border-radius: 50%;

			background:
				rgba(255, 255, 255, .22);
		}



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

        .badge-soft {

            display: inline-flex;

            align-items: center;

            gap: 7px;

            margin-bottom: 20px;

            padding: 7px 13px;

            color: var(--accent);

            border-radius: 50px;

            background: var(--accent-soft);

            font-size: .72rem;

            font-weight: 700;

            letter-spacing: .06em;

            text-transform: uppercase;
        }


        .badge-dot {

            width: 6px;
            height: 6px;

            border-radius: 50%;

            background: var(--accent);
        }


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

        .title {

            margin-bottom: 18px;

            font-size:
                clamp(
                    2.7rem,
                    7vw,
                    5rem
                );

            line-height: 1.05;

            letter-spacing: -.065em;
        }


        .title span {

            color: var(--accent);
        }


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

        .description {

            max-width: 560px;

            margin:
                0 auto 30px;

            color: var(--text);

            font-size:
                clamp(
                    .95rem,
                    2vw,
                    1.08rem
                );

            line-height: 1.7;
        }


        /* =====================================================
           WHATSAPP CTA
        ====================================================== */

        .contact-button {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 9px;

            min-height: 50px;

            padding:
                0 22px;

            color: var(--white);

            border-radius: 11px;

            background:
                linear-gradient(
                    135deg,
                    var(--primary),
                    var(--primary-dark)
                );

            box-shadow:
                0 10px 25px
                rgba(44, 73, 100, .17);

            font-size: .9rem;

            font-weight: 700;

            transition:
                transform .2s ease,
                box-shadow .2s ease;
        }


        .contact-button:hover {

            color: var(--white);

            transform: translateY(-2px);

            box-shadow:
                0 14px 30px
                rgba(44, 73, 100, .23);
        }


        .contact-button i {

            font-size: 1rem;
        }


        /* =====================================================
           SERVICES
        ====================================================== */

        .services {

            display: flex;

            justify-content: center;

            flex-wrap: wrap;

            gap: 10px 24px;

            margin-top: 35px;

            color: var(--muted);

            font-size: .76rem;

            font-weight: 600;
        }


        .service {

            display: inline-flex;

            align-items: center;

            gap: 6px;
        }


        .service i {

            color: var(--accent);

            font-size: .8rem;
        }


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

        footer {

            flex: 0 0 auto;

            padding:
                15px 20px 20px;

            text-align: center;

            color: var(--muted);

            font-size: .7rem;
        }


        /* =====================================================
           SIMPLE DECORATION
        ====================================================== */

        .corner {

            position: fixed;

            width: 220px;
            height: 220px;

            border-radius: 50%;

            pointer-events: none;

            opacity: .65;
        }


        .corner-one {

            top: -140px;
            right: -100px;

            background:
                radial-gradient(
                    circle,
                    rgba(53, 170, 165, .10),
                    transparent 70%
                );
        }


        .corner-two {

            bottom: -150px;
            left: -110px;

            background:
                radial-gradient(
                    circle,
                    rgba(63, 102, 131, .09),
                    transparent 70%
                );
        }


        /* =====================================================
           ANIMATION
        ====================================================== */

        .content > * {

            animation:
                fadeIn .7s ease both;
        }


        .content > *:nth-child(2) {
            animation-delay: .1s;
        }


        .content > *:nth-child(3) {
            animation-delay: .2s;
        }


        .content > *:nth-child(4) {
            animation-delay: .3s;
        }


        .content > *:nth-child(5) {
            animation-delay: .4s;
        }


        @keyframes fadeIn {

            from {

                opacity: 0;

                transform:
                    translateY(12px);
            }

            to {

                opacity: 1;

                transform:
                    translateY(0);
            }
        }


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

        @media (max-width: 575px) {

            body {
                overflow-y: auto;
            }


            .coming-soon {

                padding:
                    25px 20px;
            }


            .logo {

                margin-bottom: 35px;

                font-size: 1.15rem;
            }


            .logo-mark {

                width: 38px;
                height: 38px;

                border-radius: 10px;
            }


            .badge-soft {

                margin-bottom: 15px;
            }


            .title {

                font-size:
                    clamp(
                        2.35rem,
                        12vw,
                        3.5rem
                    );
            }


            .description {

                margin-bottom: 25px;

                font-size: .9rem;

                line-height: 1.6;
            }


            .services {

                margin-top: 28px;

                gap: 9px 18px;
            }

        }


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

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

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

                animation: none !important;

                transition: none !important;
            }

        }