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


        html {
            scroll-behavior: smooth;
        }


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

            background:
                #f4f6f8;

            color:
                #1f2937;

            min-height:
                100vh;
        }


        a {
            color: inherit;
        }



        /* =====================================================
           TOP NAVIGATION
        ===================================================== */

        .topbar {

            min-height:
                74px;

            background:
                #ffffff;

            border-bottom:
                1px solid #e5e7eb;

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                30px;

            padding:
                0 7%;

            position:
                sticky;

            top:
                0;

            z-index:
                100;

            box-shadow:
                0 2px 10px rgba(
                    0,
                    0,
                    0,
                    0.04
                );
        }


        .brand {

            display:
                flex;

            align-items:
                center;

            gap:
                12px;

            text-decoration:
                none;

            color:
                #111827;

            flex-shrink:
                0;
        }


        .brand-mark {

            width:
                38px;

            height:
                38px;

            border-radius:
                9px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            background:
                #2563eb;

            color:
                #ffffff;

            font-weight:
                bold;

            font-size:
                13px;
        }


        .brand-text {

            font-size:
                22px;

            font-weight:
                700;

            letter-spacing:
                0.3px;
        }


        .nav-right {

            display:
                flex;

            align-items:
                center;

            gap:
                25px;
        }


        .nav-link {

            text-decoration:
                none;

            color:
                #4b5563;

            font-size:
                14px;

            font-weight:
                600;

            transition:
                color 0.2s ease;

            white-space:
                nowrap;
        }


        .nav-link:hover {

            color:
                #2563eb;
        }


        .login-button {

            text-decoration:
                none;

            background:
                #2563eb;

            color:
                white;

            padding:
                11px 22px;

            border-radius:
                8px;

            font-size:
                14px;

            font-weight:
                700;

            transition:
                all 0.2s ease;

            box-shadow:
                0 3px 8px rgba(
                    37,
                    99,
                    235,
                    0.20
                );

            white-space:
                nowrap;
        }


        .login-button:hover {

            background:
                #1d4ed8;

            transform:
                translateY(-1px);

            box-shadow:
                0 5px 12px rgba(
                    37,
                    99,
                    235,
                    0.25
                );
        }



        /* =====================================================
           HERO
        ===================================================== */

        .hero {

            min-height:
                600px;

            display:
                flex;

            align-items:
                center;

            padding:
                90px 7%;

            background:
                linear-gradient(
                    135deg,
                    #f8fafc 0%,
                    #eef4ff 100%
                );
        }


        .hero-inner {

            width:
                100%;

            max-width:
                1240px;

            margin:
                auto;

            display:
                grid;

            grid-template-columns:
                minmax(
                    0,
                    1.3fr
                )
                minmax(
                    320px,
                    0.7fr
                );

            align-items:
                center;

            gap:
                70px;
        }


        .hero-content {

            max-width:
                780px;
        }


        .hero-label {

            display:
                inline-block;

            padding:
                7px 12px;

            background:
                #dbeafe;

            color:
                #1d4ed8;

            border-radius:
                20px;

            font-size:
                13px;

            font-weight:
                700;

            margin-bottom:
                20px;
        }


        .hero h1 {

            font-size:
                54px;

            line-height:
                1.10;

            letter-spacing:
                -1.2px;

            color:
                #111827;

            margin-bottom:
                22px;
        }


        .hero h1 span {

            color:
                #2563eb;
        }


        .hero-description {

            max-width:
                700px;

            font-size:
                18px;

            line-height:
                1.7;

            color:
                #5b6472;

            margin-bottom:
                34px;
        }


        .hero-actions {

            display:
                flex;

            gap:
                14px;

            flex-wrap:
                wrap;
        }


        .primary-button {

            text-decoration:
                none;

            background:
                #2563eb;

            color:
                white;

            padding:
                14px 25px;

            border-radius:
                9px;

            font-size:
                15px;

            font-weight:
                700;

            transition:
                all 0.2s ease;

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;
        }


        .primary-button:hover {

            background:
                #1d4ed8;

            transform:
                translateY(-1px);
        }


        .secondary-button {

            text-decoration:
                none;

            background:
                white;

            color:
                #374151;

            padding:
                13px 24px;

            border:
                1px solid #d1d5db;

            border-radius:
                9px;

            font-size:
                15px;

            font-weight:
                700;

            transition:
                all 0.2s ease;

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;
        }


        .secondary-button:hover {

            border-color:
                #2563eb;

            color:
                #2563eb;
        }



        /* =====================================================
           HERO SYSTEM CARD
        ===================================================== */

        .hero-system {

            background:
                #ffffff;

            border:
                1px solid #dfe7f1;

            border-radius:
                18px;

            padding:
                28px;

            box-shadow:
                0 20px 45px rgba(
                    30,
                    64,
                    175,
                    0.10
                );
        }


        .hero-system-title {

            font-size:
                13px;

            font-weight:
                700;

            color:
                #6b7280;

            text-transform:
                uppercase;

            letter-spacing:
                0.8px;

            margin-bottom:
                22px;
        }


        .system-item {

            display:
                flex;

            align-items:
                center;

            gap:
                14px;

            padding:
                14px;

            background:
                #f8fafc;

            border:
                1px solid #edf0f4;

            border-radius:
                10px;
        }


        .system-icon {

            width:
                38px;

            height:
                38px;

            flex-shrink:
                0;

            border-radius:
                9px;

            background:
                #e8f0ff;

            color:
                #2563eb;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            font-size:
                13px;

            font-weight:
                bold;
        }


        .system-item-title {

            font-size:
                14px;

            font-weight:
                700;

            color:
                #1f2937;

            margin-bottom:
                3px;
        }


        .system-item-text {

            font-size:
                12px;

            color:
                #6b7280;

            line-height:
                1.4;
        }


        .system-arrow {

            height:
                20px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            color:
                #9ca3af;

            font-size:
                17px;
        }



        /* =====================================================
           COMMON SECTIONS
        ===================================================== */

        .section {

            padding:
                82px 7%;
        }


        .section-white {

            background:
                #ffffff;
        }


        .section-soft {

            background:
                #f8fafc;
        }


        .section-blue-soft {

            background:
                #f2f6fc;
        }


        .section-inner {

            max-width:
                1200px;

            margin:
                auto;
        }


        .section-heading {

            text-align:
                center;

            max-width:
                760px;

            margin:
                0 auto 48px auto;
        }


        .section-label {

            color:
                #2563eb;

            font-size:
                12px;

            font-weight:
                700;

            letter-spacing:
                1px;

            text-transform:
                uppercase;

            margin-bottom:
                11px;
        }


        .section-heading h2 {

            font-size:
                35px;

            line-height:
                1.2;

            color:
                #111827;

            margin-bottom:
                13px;
        }


        .section-heading p {

            color:
                #6b7280;

            line-height:
                1.65;

            font-size:
                16px;
        }



        /* =====================================================
           PRODUCTS
        ===================================================== */

        .product-grid {

            display:
                grid;

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

            gap:
                20px;
        }


        .product-card {

            background:
                #ffffff;

            border:
                1px solid #e2e7ed;

            border-radius:
                15px;

            padding:
                27px;

            min-height:
                290px;

            display:
                flex;

            flex-direction:
                column;

            transition:
                all 0.2s ease;

            box-shadow:
                0 4px 15px rgba(
                    0,
                    0,
                    0,
                    0.03
                );
        }


        .product-card:hover {

            transform:
                translateY(-4px);

            border-color:
                #c7d7fe;

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


        .product-icon {

            width:
                50px;

            height:
                50px;

            border-radius:
                11px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            background:
                #eef4ff;

            color:
                #2563eb;

            font-size:
                16px;

            font-weight:
                bold;

            margin-bottom:
                20px;
        }


        .product-card h3 {

            font-size:
                19px;

            line-height:
                1.35;

            color:
                #111827;

            margin-bottom:
                12px;
        }


        .product-card p {

            color:
                #6b7280;

            font-size:
                14px;

            line-height:
                1.65;

            margin-bottom:
                20px;

            flex:
                1;
        }


        .product-more {

            text-decoration:
                none;

            color:
                #2563eb;

            font-size:
                13px;

            font-weight:
                700;
        }


        .product-more:hover {

            text-decoration:
                underline;
        }



        /* =====================================================
           PLATFORM FEATURES
        ===================================================== */

        .feature-grid {

            display:
                grid;

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

            gap:
                22px;
        }


        .feature-card {

            background:
                white;

            border:
                1px solid #e5e7eb;

            border-radius:
                14px;

            padding:
                28px;

            min-height:
                195px;

            transition:
                all 0.2s ease;

            box-shadow:
                0 4px 15px rgba(
                    0,
                    0,
                    0,
                    0.035
                );
        }


        .feature-card:hover {

            transform:
                translateY(-3px);

            box-shadow:
                0 9px 24px rgba(
                    0,
                    0,
                    0,
                    0.07
                );

            border-color:
                #c7d7fe;
        }


        .feature-icon {

            width:
                42px;

            height:
                42px;

            border-radius:
                9px;

            background:
                #eff6ff;

            color:
                #2563eb;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            font-size:
                18px;

            font-weight:
                bold;

            margin-bottom:
                20px;
        }


        .feature-card h3 {

            margin-bottom:
                10px;

            font-size:
                18px;

            color:
                #111827;
        }


        .feature-card p {

            font-size:
                14px;

            line-height:
                1.65;

            color:
                #6b7280;
        }



        /* =====================================================
           SOLUTIONS
        ===================================================== */

        .solution-grid {

            display:
                grid;

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

            gap:
                16px;
        }


        .solution-card {

            background:
                #ffffff;

            border:
                1px solid #e5e7eb;

            border-radius:
                13px;

            padding:
                23px;

            text-align:
                center;

            min-height:
                165px;

            display:
                flex;

            flex-direction:
                column;

            align-items:
                center;

            justify-content:
                center;

            transition:
                all 0.2s ease;
        }


        .solution-card:hover {

            transform:
                translateY(-3px);

            border-color:
                #c5d5f7;

            box-shadow:
                0 8px 20px rgba(
                    0,
                    0,
                    0,
                    0.05
                );
        }


        .solution-symbol {

            width:
                43px;

            height:
                43px;

            margin-bottom:
                14px;

            border-radius:
                50%;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            background:
                #eef4ff;

            color:
                #2563eb;

            font-weight:
                bold;
        }


        .solution-card h3 {

            font-size:
                15px;

            line-height:
                1.4;

            color:
                #111827;

            margin-bottom:
                7px;
        }


        .solution-card p {

            color:
                #707984;

            font-size:
                12px;

            line-height:
                1.5;
        }



        /* =====================================================
           HOW IT WORKS
        ===================================================== */

        .how-grid {

            display:
                grid;

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

            gap:
                18px;
        }


        .how-card {

            position:
                relative;

            background:
                #ffffff;

            border:
                1px solid #e1e6ec;

            border-radius:
                14px;

            padding:
                28px;

            min-height:
                210px;
        }


        .how-number {

            width:
                35px;

            height:
                35px;

            border-radius:
                50%;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            margin-bottom:
                19px;

            background:
                #2563eb;

            color:
                #ffffff;

            font-size:
                13px;

            font-weight:
                bold;
        }


        .how-card h3 {

            font-size:
                17px;

            margin-bottom:
                9px;

            color:
                #111827;
        }


        .how-card p {

            font-size:
                13px;

            line-height:
                1.65;

            color:
                #6b7280;
        }



        /* =====================================================
           ABOUT
        ===================================================== */

        .about-layout {

            display:
                grid;

            grid-template-columns:
                0.85fr
                1.15fr;

            gap:
                70px;

            align-items:
                center;
        }


        .about-panel {

            min-height:
                330px;

            border-radius:
                18px;

            padding:
                38px;

            background:
                linear-gradient(
                    135deg,
                    #1e3a8a 0%,
                    #2563eb 100%
                );

            color:
                #ffffff;

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                center;

            box-shadow:
                0 15px 35px rgba(
                    37,
                    99,
                    235,
                    0.18
                );
        }


        .about-panel-mark {

            font-size:
                42px;

            font-weight:
                bold;

            margin-bottom:
                16px;
        }


        .about-panel h3 {

            font-size:
                24px;

            margin-bottom:
                12px;
        }


        .about-panel p {

            color:
                #dbeafe;

            font-size:
                14px;

            line-height:
                1.7;
        }


        .about-content h2 {

            font-size:
                35px;

            color:
                #111827;

            margin-bottom:
                18px;
        }


        .about-content p {

            color:
                #626c78;

            font-size:
                15px;

            line-height:
                1.8;

            margin-bottom:
                16px;
        }


        .about-points {

            display:
                grid;

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

            gap:
                12px;

            margin-top:
                25px;
        }


        .about-point {

            background:
                #f8fafc;

            border:
                1px solid #e6eaef;

            border-radius:
                9px;

            padding:
                14px;

            font-size:
                13px;

            font-weight:
                700;

            color:
                #3f4852;
        }



        /* =====================================================
           CONTACT CTA
        ===================================================== */

        .contact-section {

            padding:
                80px 7%;
        }


        .contact-box {

            max-width:
                1200px;

            margin:
                auto;

            border-radius:
                18px;

            padding:
                50px;

            background:
                #111827;

            color:
                #ffffff;

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                40px;
        }


        .contact-copy {

            max-width:
                690px;
        }


        .contact-copy h2 {

            font-size:
                32px;

            margin-bottom:
                12px;
        }


        .contact-copy p {

            color:
                #c5ccd6;

            font-size:
                15px;

            line-height:
                1.7;
        }


        .contact-button {

            flex-shrink:
                0;

            text-decoration:
                none;

            background:
                #ffffff;

            color:
                #1f2937;

            padding:
                14px 24px;

            border-radius:
                9px;

            font-size:
                14px;

            font-weight:
                700;

            transition:
                all 0.2s ease;
        }


        .contact-button:hover {

            background:
                #eaf1ff;

            color:
                #1d4ed8;
        }



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

        footer {

            background:
                #ffffff;

            border-top:
                1px solid #e5e7eb;
        }


        .footer-main {

            max-width:
                1200px;

            margin:
                auto;

            padding:
                50px 7%;

            display:
                grid;

            grid-template-columns:
                1.7fr
                1fr
                1fr
                1fr;

            gap:
                45px;
        }


        .footer-brand {

            font-size:
                18px;

            color:
                #111827;

            font-weight:
                700;

            margin-bottom:
                11px;
        }


        .footer-description {

            max-width:
                320px;

            color:
                #6b7280;

            font-size:
                13px;

            line-height:
                1.65;
        }


        .footer-column-title {

            font-size:
                12px;

            font-weight:
                700;

            text-transform:
                uppercase;

            letter-spacing:
                0.6px;

            color:
                #374151;

            margin-bottom:
                14px;
        }


        .footer-link {

            display:
                block;

            width:
                fit-content;

            text-decoration:
                none;

            color:
                #6b7280;

            font-size:
                13px;

            margin-bottom:
                10px;
        }


        .footer-link:hover {

            color:
                #2563eb;
        }


        .footer-bottom {

            border-top:
                1px solid #edf0f2;

            padding:
                20px 7%;

            display:
                flex;

            justify-content:
                space-between;

            align-items:
                center;

            gap:
                20px;

            color:
                #7a828d;

            font-size:
                12px;
        }


        .footer-bottom-links {

            display:
                flex;

            gap:
                18px;
        }


        .footer-bottom-links a {

            text-decoration:
                none;

            color:
                #7a828d;
        }


        .footer-bottom-links a:hover {

            color:
                #2563eb;
        }



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

        @media (
            max-width: 1100px
        ) {

            .product-grid {

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


            .solution-grid {

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


            .nav-right {

                gap:
                    17px;
            }


            .nav-link {

                font-size:
                    13px;
            }

        }


        @media (
            max-width: 900px
        ) {

            .hero-inner {

                grid-template-columns:
                    1fr;

                gap:
                    45px;
            }


            .hero-system {

                max-width:
                    560px;
            }


            .feature-grid {

                grid-template-columns:
                    1fr;
            }


            .how-grid {

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


            .about-layout {

                grid-template-columns:
                    1fr;

                gap:
                    35px;
            }


            .contact-box {

                align-items:
                    flex-start;

                flex-direction:
                    column;
            }


            .footer-main {

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


            .hero h1 {

                font-size:
                    44px;
            }


            .nav-link {

                display:
                    none;
            }

        }


        @media (
            max-width: 650px
        ) {

            .topbar {

                padding:
                    0 20px;
            }


            .brand-text {

                font-size:
                    18px;
            }


            .login-button {

                padding:
                    10px 17px;
            }


            .hero {

                padding:
                    60px 20px;
            }


            .hero h1 {

                font-size:
                    37px;
            }


            .hero-description {

                font-size:
                    16px;
            }


            .hero-actions {

                flex-direction:
                    column;
            }


            .primary-button,
            .secondary-button {

                width:
                    100%;
            }


            .section {

                padding:
                    60px 20px;
            }


            .section-heading h2 {

                font-size:
                    29px;
            }


            .product-grid {

                grid-template-columns:
                    1fr;
            }


            .solution-grid {

                grid-template-columns:
                    1fr;
            }


            .how-grid {

                grid-template-columns:
                    1fr;
            }


            .about-points {

                grid-template-columns:
                    1fr;
            }


            .contact-section {

                padding:
                    55px 20px;
            }


            .contact-box {

                padding:
                    32px 25px;
            }


            .contact-copy h2 {

                font-size:
                    27px;
            }


            .contact-button {

                width:
                    100%;

                text-align:
                    center;
            }


            .footer-main {

                padding:
                    40px 20px;

                grid-template-columns:
                    1fr;
            }


            .footer-bottom {

                padding:
                    20px;

                flex-direction:
                    column;

                align-items:
                    flex-start;
            }

        }


        @media (
            max-width: 420px
        ) {

            .brand-text {

                font-size:
                    16px;
            }


            .brand-mark {

                width:
                    34px;

                height:
                    34px;
            }


            .login-button {

                font-size:
                    13px;

                padding:
                    9px 14px;
            }


            .hero h1 {

                font-size:
                    33px;
            }

        }