/* =========================================
           AW TRANSITION LANDING PAGE
           ========================================= */

        :root {
            --navy: #071b45;
            --dark-blue: #0c2d68;
            --blue: #1467d9;
            --bright-blue: #087ff5;
            --light-blue: #eaf4ff;
            --border-blue: #c9ddf7;
            --text: #071b45;
            --white: #ffffff;
            --green: #38b866;
            --shadow: 0 8px 30px rgba(7, 27, 69, 0.08);
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family:
                "Segoe UI",
                Arial,
                Helvetica,
                sans-serif;
            color: var(--text);
            background: #ffffff;
            line-height: 1.5;
        }

        a {
            text-decoration: none !important;
            color: inherit;
        }

        /* =========================================
           TOP HEADER
           ========================================= */
/*
        .top-header {
            position: relative;
            min-height: 125px;
            overflow: hidden;

            background: #2a2a2a;
             
        }

        

        .header-content {
            position: relative;
            z-index: 2;

            width: min(1400px, 92%);
            margin: auto;

            display: flex;
            align-items: center;

            min-height: 125px;
        }

        .logo {
            width: auto;
            height: auto;
            display: block;
        } */

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

        .hero {
            position: relative;
            overflow: hidden;

            min-height: 390px;

            background:
                radial-gradient(
                    circle at 65% 45%,
                    rgba(24, 121, 232, .13),
                    transparent 32%
                ),
                linear-gradient(
                    110deg,
                    #ffffff 0%,
                    #ffffff 48%,
                    #eef7ff 100%
                );
        }

        /* Decorative network lines */
        .hero::before {
            content: "";
            position: absolute;
            inset: 0;

            opacity: .55;

            background-image:
                radial-gradient(
                    circle,
                    rgba(19, 105, 216, .14) 2px,
                    transparent 3px
                );

            background-size: 110px 90px;
        }

        .hero-inner {
            position: relative;
            z-index: 2;

            width: min(1380px, 90%);
            margin: auto;

            min-height: 390px;

            display: grid;
            grid-template-columns: 1.1fr .9fr;

            align-items: center;
            gap: 40px;
        }

        .hero-content {
            padding: 45px 0;
        }

        .hero-title {
            font-size: clamp(36px, 3vw, 72px) !important;
            line-height: 1.04;
            font-weight: 750 !important;
            letter-spacing: -2px;

            margin-bottom: 10px;
        }

        .hero-date {
            font-size: clamp(27px, 3vw, 40px);
            font-weight: 400;

            margin-bottom: 24px;
        }

        .hero-date span {
            color: var(--blue);
            font-weight: 700;
        }

        .hero-line {
            width: 90px;
            height: 5px;

            background: var(--blue);

            border-radius: 5px;

            margin: 22px 0;
        }

        .hero-text {
            font-size: 18px;
            max-width: 670px;
            color: #14274b;
        }

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

        .hero-graphic {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 320px;
}

.aw-screen {
    width: min(620px, 100%);
    height: auto;
    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 25px 35px rgba(6, 43, 102, 0.16)
        );
}

        /* =========================================
           RESOURCE SECTION
           ========================================= */

        .resources {
            padding: 34px 20px 45px;

            background: #ffffff;

            border-top: 1px solid #dbe7f5;
        }

        .section-heading {
            display: flex;
            align-items: center;
            justify-content: center;

            gap: 42px;

            margin-bottom: 2.6rem !important;

            font-size: 25px;
            font-weight: 600;

            text-align: center;
        }

        .section-heading::before,
        .section-heading::after {
            content: "";

            height: 2px;
            width: 210px;

            background: #153c83;
        }

        .section-heading span {
            color: var(--blue);
        }

        .resource-grid {
            width: min(1380px, 94%);
            margin: auto;

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

            gap: 28px;
        }

        .resource-card {
            position: relative;

            min-height: 300px;

            padding: 25px 24px 24px;

            border: 1px solid #d8e4f2;
            border-radius: 12px;

            background: #ffffff;

            box-shadow: var(--shadow);

            display: flex;
            flex-direction: column;
            align-items: center;

            text-align: center;

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

        .resource-card:hover {
            transform: translateY(-6px);

            box-shadow:
                0 18px 40px rgba(7, 27, 69, .13);
        }

        .number {
            position: absolute;

            top: 16px;
            left: 16px;

            width: 38px;
            height: 38px;

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

            border-radius: 50%;

            color: #ffffff;
            background: var(--blue);

            font-size: 19px;
            font-weight: 700;
        }

        .resource-icon {
            height: 76px;

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

            margin: 8px 0 12px;
        }

        .resource-icon img {
            max-width: 70px;
            max-height: 70px;
        }

        .icon-letter {
            width: 70px;
            height: 70px;

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

            border-radius: 50%;

            color: #ffffff;

            font-size: 43px;
            font-weight: 700;

            background: #f47721;
        }

        .onedrive-icon {
            position: relative;

            width: 105px;
            height: 65px;
        }

        .cloud {
            position: absolute;

            width: 70px;
            height: 38px;

            left: 18px;
            bottom: 8px;

            border-radius: 50px;

            background: #1474e5;
        }

        .cloud::before {
            content: "";

            position: absolute;

            width: 47px;
            height: 47px;

            left: 10px;
            top: -21px;

            border-radius: 50%;

            background: #1474e5;
        }

        .cloud::after {
            content: "";

            position: absolute;

            width: 45px;
            height: 45px;

            right: -8px;
            top: -14px;

            border-radius: 50%;

            background: #075dc2;
        }

        .service-logo {
            font-size: 29px;
            font-weight: 700;
            color: #0c234f;
        }

        .service-logo strong {
            padding: 1px 4px;

            color: #ffffff;
            background: #234070;

            border-radius: 2px;
        }

        .resource-title {
            font-size: 21px;
            font-weight: 700;

            margin-bottom: 8px;
        }

        .resource-description {
            font-size: 16px;
            line-height: 1.45;

            min-height: 52px;

            color: #243657;

            margin-bottom: 20px;
        }

        .resource-button {
            width: 100%;

            margin-top: auto;

            padding: 13px 15px;

            border-radius: 8px;

            color: #ffffff !important;

            background:
                linear-gradient(
                    135deg,
                    #1168d8,
                    #0c58c2
                );

            font-size: 14px !important;
            font-weight: 700 !important;

            transition: filter .2s ease;
        }

        .resource-button:hover {
            filter: brightness(1.1);
        }

        .external {
            margin-left: 8px;
            font-size: 18px;
        }

        /* =========================================
           HELP SECTION
           ========================================= */

        .help-wrapper {
            width: min(1380px, 94%);
            margin: 0 auto 30px;
        }

        .help-box {
            min-height: 105px;

            padding: 18px 28px;

            display: flex;
            align-items: center;

            gap: 22px;

            border: 1px solid #9fc8fb;
            border-radius: 12px;

            background: #eaf4ff;
        }

        .info-icon {
            flex: 0 0 auto;

            width: 68px;
            height: 68px;

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

            border-radius: 50%;

            background: #1475dc;
            color: #ffffff;

            font-size: 42px;
            font-family: Georgia, serif;
            font-style: italic;
        }

        .help-content {
            flex: 1;
        }

        .help-title {
            color: #1260cc;

            font-size: 23px;
            font-weight: 700;

            margin-bottom: 3px;
        }

        .help-text {
            font-size: 16px;
        }

        .transition-button {
            flex: 0 0 auto;

            padding: 13px 28px;

            border: 2px solid #1467d9;
            border-radius: 8px;

            background: #ffffff;

            color: #115fc8;

            font-weight: 700;
            font-size: 16px;
        }

        .transition-button:hover {
            background: #f1f7ff;
        }

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

        footer {
            padding: 18px;

            text-align: center;

            color: #667894;

            font-size: 13px;

            border-top: 1px solid #e3eaf3;
        }

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

        @media (max-width: 1050px) {

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

            .hero-inner {
                grid-template-columns: 1fr 1fr;
            }

            .section-heading::before,
            .section-heading::after {
                width: 100px;
            }
        }

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

        @media (max-width: 700px) {

            .top-header {
                min-height: 90px;
            }

            .header-content {
                min-height: 90px;
            }

            .logo {
                width: 130px;
            }

            .hero-inner {
                grid-template-columns: 1fr;

                text-align: center;

                padding: 20px 0 50px;
            }

            .hero-content {
                padding: 20px 0 0;
            }

            .hero-title {
                letter-spacing: -1px;
            }

            .hero-line {
                margin: 20px auto;
            }

            .hero-text {
                margin: auto;
                font-size: 16px;
            }

            .hero-graphic {
                min-height: 250px;
            }

            .monitor {
                width: 290px;
            }

            .monitor-aw {
                font-size: 55px;
            }

            .close-icon {
                width: 60px;
                height: 60px;

                right: -28px;

                font-size: 38px;
            }

            .section-heading {
                gap: 15px;

                font-size: 21px;
            }

            .section-heading::before,
            .section-heading::after {
                display: none;
            }

            .resource-grid {
                grid-template-columns: 1fr;
                width: 100%;
            }

            .resource-card {
                min-height: 285px;
            }

            .help-box {
                flex-direction: column;

                text-align: center;

                padding: 25px 20px;
            }

            .transition-button {
                width: 100%;
            }

            .help-wrapper {
                width: 100%;
                padding: 0 15px;
            }
        }