<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ICT | Business Operating System</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        display: [
                            "Georgia",
                            "Times New Roman",
                            "serif"
                        ],
                        sans: [
                            "Inter",
                            "Segoe UI",
                            "Arial",
                            "sans-serif"
                        ]
                    }
                }
            }
        }
    </script>

    <style>

        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
        }

        body {
            font-family: "Inter", "Segoe UI", Arial, sans-serif;

            background:
                radial-gradient(
                    circle at 50% 40%,
                    #ffffff 0%,
                    #eaf7ff 38%,
                    #d9efff 75%,
                    #c9e6fb 100%
                );

            min-height: 100vh;
        }

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

        .hero {
            position: relative;

            width: min(1400px, calc(100% - 70px));

            height: calc(100vh - 50px);

            min-height: 760px;
            max-height: 920px;

            margin: 25px auto;

            overflow: hidden;

            border-radius: 30px;

            background:
                radial-gradient(
                    ellipse at 50% 100%,
                    #18a9f4 0%,
                    #0878d4 24%,
                    #123f8f 49%,
                    #10184f 73%,
                    #0d0d35 100%
                );

            box-shadow:
                0 35px 90px rgba(17, 56, 102, 0.25);
        }


        /* =====================================================
           BLUE LIGHT / GLOW
        ===================================================== */

        .hero::before {

            content: "";

            position: absolute;

            width: 900px;
            height: 400px;

            left: 50%;
            bottom: -170px;

            transform: translateX(-50%);

            background:
                radial-gradient(
                    ellipse,
                    rgba(67, 202, 255, 0.95),
                    rgba(23, 154, 240, 0.45),
                    transparent 70%
                );

            filter: blur(35px);

            pointer-events: none;
        }


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

        .nav-pill {

            background:
                rgba(37, 76, 145, 0.38);

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

            box-shadow:
                inset 0 1px 1px rgba(255,255,255,0.08),
                0 8px 25px rgba(0,0,0,0.08);

            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }


        /* =====================================================
           NAV LINKS
        ===================================================== */

        .nav-link {

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

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

        .nav-link:hover {

            color: white;

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

        .nav-link.active {

            color: white;
        }


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

        .hero-title {

            font-family:
                Georgia,
                "Times New Roman",
                serif;

            letter-spacing: -0.045em;

            text-shadow:
                0 2px 20px rgba(0,0,0,0.08);
        }


        /* =====================================================
           GET STARTED BUTTON
        ===================================================== */

        .white-button {

            background: #ffffff;

            color: #0d3d86;

            box-shadow:
                0 12px 30px rgba(0,0,0,0.15),
                inset 0 1px 1px rgba(255,255,255,1);

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

        .white-button:hover {

            transform: translateY(-2px);

            box-shadow:
                0 18px 35px rgba(0,0,0,0.22);
        }


        /* =====================================================
           FLOATING LABELS
        ===================================================== */

        .floating-label {

            position: relative;

            display: inline-flex;

            align-items: center;

            padding:
                9px 17px;

            border-radius: 999px;

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

            background:
                rgba(25,82,150,0.25);

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

            font-size: 10px;

            font-weight: 500;

            letter-spacing: 0.04em;

            backdrop-filter: blur(10px);

            -webkit-backdrop-filter: blur(10px);
        }


        .floating-line {

            width: 1px;

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


        /* =====================================================
           CARD CONTAINER
        ===================================================== */

        .cards-container {

            position: absolute;

            z-index: 20;

            left: 50%;

            bottom: -7px;

            transform: translateX(-50%);

            width: 900px;

            height: 235px;
        }


        /* =====================================================
           COMMON CARD
        ===================================================== */

        .info-card {

            position: absolute;

            overflow: hidden;

            border-radius: 25px;

            background:
                rgba(239,247,252,0.93);

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

            box-shadow:
                0 25px 50px rgba(3,33,78,0.23);

            backdrop-filter: blur(8px);

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


        .info-card:hover {

            box-shadow:
                0 35px 70px rgba(3,33,78,0.35);
        }


        /* =====================================================
           CARD TEXT
        ===================================================== */

        .card-title {

            font-size: 12px;

            line-height: 1.15;

            font-weight: 700;

            color: #182238;

            text-transform: uppercase;
        }


        .card-text {

            font-size: 11px;

            line-height: 1.5;

            color: #687386;
        }


        .card-link {

            color: #172033;

            font-size: 12px;

            font-weight: 500;
        }


        /* =====================================================
           IMAGE CARDS
        ===================================================== */

        .image-card {

            position: absolute;

            overflow: hidden;

            border-radius: 25px;

            box-shadow:
                0 30px 60px rgba(3,33,78,0.35);
        }

        .image-card img {

            width: 100%;
            height: 100%;

            object-fit: cover;

            display: block;
        }


        .image-overlay {

            position: absolute;

            inset: 0;

            background:
                linear-gradient(
                    180deg,
                    rgba(0,0,0,0.02),
                    rgba(0,0,0,0.25)
                );
        }


        /* =====================================================
           DECORATIVE CIRCLE
        ===================================================== */

        .decorative-circle {

            position: absolute;

            right: 28px;

            bottom: 27px;

            width: 52px;

            height: 52px;

            border-radius: 50%;

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

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


        .decorative-circle::after {

            content: "";

            position: absolute;

            width: 4px;
            height: 4px;

            border-radius: 50%;

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

            left: 50%;
            top: 50%;

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


        /* =====================================================
           TABLET
        ===================================================== */

        @media (max-width: 1100px) {

            .hero {

                width:
                    calc(100% - 40px);
            }

            .cards-container {

                transform:
                    translateX(-50%)
                    scale(0.85);

                transform-origin:
                    center bottom;
            }

            .hero-title {

                font-size:
                    68px !important;
            }
        }


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

        @media (max-width: 768px) {

            body {

                background:
                    #eaf7ff;
            }

            .hero {

                width:
                    calc(100% - 20px);

                min-height:
                    760px;

                height:
                    calc(100vh - 20px);

                margin:
                    10px auto;

                border-radius:
                    24px;
            }


            /* Mobile navbar */

            .desktop-nav {

                display: none;
            }

            .mobile-menu {

                display: flex !important;
            }


            /* Heading */

            .hero-title {

                font-size:
                    45px !important;

                line-height:
                    0.98 !important;

                letter-spacing:
                    -0.04em;
            }


            .hero-description {

                font-size:
                    13px !important;

                max-width:
                    320px !important;
            }


            /* Labels */

            .automation-label {

                left:
                    6% !important;

                top:
                    430px !important;
            }

            .analytics-label {

                right:
                    6% !important;

                top:
                    430px !important;
            }


            /* Cards */

            .cards-container {

                width:
                    720px;

                transform:
                    translateX(-50%)
                    scale(0.57);

                transform-origin:
                    center bottom;

                bottom:
                    0;
            }


            .decorative-circle {

                display:
                    none;
            }
        }


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

        @media (max-width: 480px) {

            .hero {

                min-height:
                    730px;
            }

            .hero-title {

                font-size:
                    39px !important;
            }

            .hero-description {

                font-size:
                    12px !important;
            }

            .hero-content {

                padding-top:
                    75px !important;
            }
        }

    </style>
</head>


<body>

    <!-- =====================================================
         HERO SECTION
    ===================================================== -->

    <section class="hero">


        <!-- =================================================
             NAVBAR
        ================================================== -->

        <header
            class="
                relative
                z-50
                flex
                items-center
                justify-between
                px-8
                md:px-10
                pt-5
            "
        >

            <!-- Logo -->

            <a
                href="#"
                class="
                    text-white
                    font-serif
                    text-[18px]
                    font-semibold
                    tracking-tight
                "
            >
                ICT
            </a>


            <!-- Center navigation -->

            <nav
                class="
                    desktop-nav
                    nav-pill
                    absolute
                    left-1/2
                    -translate-x-1/2
                    top-[18px]
                    flex
                    items-center
                    gap-[2px]
                    rounded-full
                    p-[5px]
                "
            >

                <a
                    href="#"
                    class="
                        nav-link
                        active
                        rounded-full
                        px-6
                        py-2.5
                        text-[13px]
                    "
                >
                    Home
                    <span class="ml-1 text-[9px]">
                        ⌄
                    </span>
                </a>


                <a
                    href="#"
                    class="
                        nav-link
                        rounded-full
                        px-6
                        py-2.5
                        text-[13px]
                    "
                >
                    Products
                    <span class="ml-1 text-[9px]">
                        ⌄
                    </span>
                </a>


                <a
                    href="#"
                    class="
                        nav-link
                        rounded-full
                        px-6
                        py-2.5
                        text-[13px]
                    "
                >
                    Solutions
                    <span class="ml-1 text-[9px]">
                        ⌄
                    </span>
                </a>


                <a
                    href="#"
                    class="
                        nav-link
                        rounded-full
                        px-6
                        py-2.5
                        text-[13px]
                    "
                >
                    Contact
                    <span class="ml-1 text-[9px]">
                        ⌄
                    </span>
                </a>

            </nav>


            <!-- Right navigation -->

            <div
                class="
                    flex
                    items-center
                    gap-6
                "
            >

                <a
                    href="#"
                    class="
                        hidden
                        md:block
                        text-white
                        text-[14px]
                        hover:text-white/70
                        transition
                    "
                >
                    Sign in
                </a>


                <a
                    href="#"
                    class="
                        white-button
                        rounded-full
                        px-7
                        py-3
                        text-[13px]
                        font-medium
                    "
                >
                    Get started
                </a>


                <!-- Mobile menu -->

                <button
                    class="
                        mobile-menu
                        hidden
                        w-10
                        h-10
                        items-center
                        justify-center
                        rounded-full
                        border
                        border-white/15
                        bg-white/10
                        text-white
                    "
                >
                    ☰
                </button>

            </div>

        </header>



        <!-- =================================================
             HERO CONTENT
        ================================================== -->

        <div
            class="
                hero-content
                relative
                z-20
                text-center
                px-5
                pt-[112px]
                md:pt-[120px]
            "
        >

            <!-- Heading -->

            <h1
                class="
                    hero-title
                    mx-auto
                    max-w-[920px]
                    text-[76px]
                    md:text-[78px]
                    lg:text-[82px]
                    leading-[0.98]
                    text-white
                "
            >

                The Operating System
                <br>

                <span>
                    for
                </span>

                <br class="hidden">

                <span>
                    Intelligent Business.
                </span>

            </h1>


            <!-- Description -->

            <p
                class="
                    hero-description
                    mx-auto
                    mt-7
                    max-w-[590px]
                    text-[15px]
                    leading-[1.55]
                    text-white/65
                "
            >
                ICT connects your data, teams, and operations
                through intelligent business software that
                powers faster, smarter growth.
            </p>


            <!-- CTA -->

            <div class="mt-7">

                <a
                    href="#"
                    class="
                        white-button
                        inline-flex
                        items-center
                        justify-center
                        rounded-full
                        px-7
                        py-3.5
                        text-[14px]
                        font-medium
                    "
                >
                    Get Started
                </a>

            </div>

        </div>



        <!-- =================================================
             SMART AUTOMATION LABEL
        ================================================== -->

        <div
            class="
                automation-label
                absolute
                left-[17%]
                top-[510px]
                z-30
                hidden
                md:block
            "
        >

            <div
                class="
                    floating-label
                    rotate-[-7deg]
                "
            >
                SMART AUTOMATION
            </div>

            <div
                class="
                    floating-line
                    h-[45px]
                    ml-[50%]
                    rotate-[-7deg]
                "
            ></div>

        </div>



        <!-- =================================================
             SMART ANALYTICS LABEL
        ================================================== -->

        <div
            class="
                analytics-label
                absolute
                right-[17%]
                top-[510px]
                z-30
                hidden
                md:block
            "
        >

            <div
                class="
                    floating-label
                    rotate-[6deg]
                "
            >
                SMART ANALYTICS
            </div>

            <div
                class="
                    floating-line
                    h-[45px]
                    ml-[50%]
                    rotate-[6deg]
                "
            ></div>

        </div>



        <!-- =================================================
             FLOATING CARDS
        ================================================== -->

        <div class="cards-container">


            <!-- LEFT INFORMATION CARD -->

            <article
                class="
                    info-card
                    left-0
                    bottom-0
                    w-[255px]
                    h-[215px]
                    p-6
                    rotate-[-7deg]
                "
            >

                <h3 class="card-title">

                    Optimize workflows
                    <br>

                    effortlessly

                </h3>


                <p
                    class="
                        card-text
                        mt-3
                        max-w-[190px]
                    "
                >
                    Automate operations with intelligent
                    business insights that reduce
                    inefficiencies, streamline processes,
                    and empower smarter execution.
                </p>


                <a
                    href="#"
                    class="
                        card-link
                        absolute
                        bottom-5
                        left-6
                        flex
                        items-center
                        gap-6
                    "
                >

                    Explore Automation

                    <span
                        class="
                            text-[20px]
                            font-light
                        "
                    >
                        →
                    </span>

                </a>

            </article>



            <!-- CENTER IMAGE -->

            <article
                class="
                    image-card
                    left-[218px]
                    bottom-[-3px]
                    w-[245px]
                    h-[225px]
                    rotate-[-1deg]
                "
            >

                <img
                    src="https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=900&q=85"
                    alt="Business team"
                >

                <div class="image-overlay"></div>

            </article>



            <!-- RIGHT INFORMATION CARD -->

            <article
                class="
                    info-card
                    left-[438px]
                    bottom-0
                    w-[255px]
                    h-[215px]
                    p-6
                    rotate-[4deg]
                "
            >

                <h3 class="card-title">

                    Turn data into
                    <br>

                    decisions

                </h3>


                <p
                    class="
                        card-text
                        mt-3
                        max-w-[190px]
                    "
                >
                    Connect business data, operations,
                    and teams into one intelligent
                    system built for faster decisions.
                </p>


                <a
                    href="#"
                    class="
                        card-link
                        absolute
                        bottom-5
                        left-6
                        flex
                        items-center
                        gap-6
                    "
                >

                    See How It Works

                    <span
                        class="
                            text-[20px]
                            font-light
                        "
                    >
                        →
                    </span>

                </a>

            </article>



            <!-- RIGHT IMAGE -->

            <article
                class="
                    image-card
                    left-[658px]
                    bottom-[-2px]
                    w-[235px]
                    h-[215px]
                    rotate-[6deg]
                "
            >

                <img
                    src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=900&q=85"
                    alt="Technology"
                >

                <div
                    class="
                        absolute
                        inset-0
                        bg-cyan-900/20
                        mix-blend-multiply
                    "
                ></div>

            </article>


        </div>



        <!-- =================================================
             BOTTOM RIGHT DECORATIVE CIRCLE
        ================================================== -->

        <div
            class="
                decorative-circle
                z-30
            "
        ></div>


    </section>

</body>
</html>