:root {
    --ng-red: #d71920;
    --ng-dark: #171b22;
    --ng-dark-2: #20252d;
    --ng-text: #181b20;
    --ng-muted: #667085;
    --ng-border: #e4e7ec;
    --ng-soft: #f5f6f8;
}

html,
body {
    background: #fff;
    color: var(--ng-text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}

.ng-logo {
    height: 42px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

.ng-product-name {
    color: #171b22;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.ng-company-name {
    margin-top: 4px;
    color: #747b86;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.ng-nav-link {
    color: #424750 !important;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none !important;
}

.ng-nav-link:hover {
    color: var(--ng-red) !important;
}

.ng-hero {
    position: relative;
    overflow: hidden;
    min-height: 540px;
    background: var(--ng-dark);
}

.ng-hero::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -160px;
    width: 520px;
    height: 520px;
    border: 72px solid rgba(215,25,32,.16);
    transform: rotate(20deg);
    pointer-events: none;
}

.ng-hero .container {
    position: relative;
    z-index: 2;
}

.ng-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.ng-hero .ng-kicker {
    color: #d3d7dd;
}

.ng-hero-title {
    max-width: 760px;
    letter-spacing: -2px;
}

.ng-hero-copy {
    max-width: 700px;
    color: #c3c9d1;
    line-height: 1.7;
}

.ng-hero-panel {
    padding: 28px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: #20252d;
    box-shadow: 0 24px 60px rgba(0,0,0,.20);
}

.ng-mini-card {
    height: 125px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    background: #fff;
    color: #171b22;
}

.ng-mini-card i {
    color: var(--ng-red);
    font-size: 20px;
}

.ng-muted-light {
    color: #9ba3ae;
}

.ng-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: #dfe3e8;
    font-size: 11px;
}

.ng-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #32a872;
}

.ng-app-card {
    border: 1px solid var(--ng-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.ng-app-card:hover {
    transform: translateY(-3px);
    border-color: #c6cbd2 !important;
    box-shadow: 0 12px 28px rgba(16,24,40,.09);
}

.ng-app-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fff0f1;
    color: var(--ng-red);
    font-size: 18px;
}

.ng-badge {
    background: #f3f4f6 !important;
    color: #555c66 !important;
    font-size: 9px;
    letter-spacing: .9px;
}

.ng-card-link {
    color: var(--ng-red);
    font-size: 12px;
    font-weight: 700;
}

.ng-soft {
    background: var(--ng-soft);
}

.ng-service {
    min-height: 64px;
    padding: 0 18px;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 11px;
    background: #fff;
    border: 1px solid var(--ng-border);
    border-radius: 8px;
    color: #242932 !important;
    font-weight: 650;
    text-decoration: none !important;
}

.ng-service i {
    color: var(--ng-red);
}

.ng-service:hover {
    border-color: #c4c9d0;
}

.ng-platform-panel {
    padding: 48px;
    border-radius: 14px;
    background: var(--ng-dark);
}

.ng-process {
    display: flex;
    flex-direction: column;
}

.ng-process-item {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
}

.ng-process-item > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--ng-red);
    font-size: 11px;
    font-weight: 800;
}

.ng-process-item div {
    display: flex;
    flex-direction: column;
}

.ng-process-item small {
    margin-top: 3px;
    color: #9fa6b0;
}

.ng-process-line {
    width: 1px;
    height: 24px;
    margin-left: 19px;
    background: #444a53;
}

.ng-footer {
    background: #11151a;
}

.ng-footer-heading {
    margin-bottom: 13px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.ng-footer a {
    color: #aeb5bf !important;
    font-size: 13px;
    text-decoration: none !important;
}

.ng-footer a:hover {
    color: #fff !important;
}

.ng-footer-text {
    color: #aeb5bf;
    font-size: 13px;
    line-height: 1.65;
}

.ng-footer-label {
    color: #8e96a1;
    letter-spacing: 1px;
}

.ng-footer-bottom {
    color: #858d98;
    font-size: 12px;
}

.btn-danger {
    background: var(--ng-red) !important;
    border-color: var(--ng-red) !important;
}

.btn-danger:hover {
    background: #b8151b !important;
    border-color: #b8151b !important;
}

@media (max-width: 991px) {
    .ng-hero {
        min-height: auto;
    }

    .ng-platform-panel {
        padding: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* BEGIN ONESUITE PREMIUM 3D */

/* ==========================================================
   PREMIUM CORPORATE DEPTH
   ========================================================== */

:root {
    --os3-red: #e31b23;
    --os3-red-dark: #a90f16;

    --os3-black: #11151b;
    --os3-charcoal: #181d24;
    --os3-panel: #20262f;

    --os3-line: rgba(255,255,255,.08);

    --os3-shadow-xl:
        0 42px 90px rgba(0,0,0,.30),
        0 18px 35px rgba(0,0,0,.18);

    --os3-shadow-card:
        0 18px 38px rgba(15,23,42,.10),
        0 4px 10px rgba(15,23,42,.07);

    --os3-shadow-hover:
        0 30px 65px rgba(15,23,42,.17),
        0 8px 20px rgba(15,23,42,.10);
}


/* ==========================================================
   HERO - PREMIUM ENTERPRISE BACKGROUND
   ========================================================== */

.ng-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 78% 34%,
            rgba(227,27,35,.13),
            transparent 23%
        ),
        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.035),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #11151b 0%,
            #181d24 50%,
            #10141a 100%
        ) !important;
}


/* subtle enterprise grid */

.ng-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        44px 44px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.75),
            transparent
        );

    pointer-events: none;
    z-index: -2;
}


/* red architectural shape */

.ng-hero::after {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    top: -235px;
    right: -170px;

    border:
        78px solid rgba(227,27,35,.13);

    transform:
        rotate(18deg);

    box-shadow:
        inset 0 0 55px rgba(227,27,35,.06);

    z-index: -1;
}


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

.ng-hero-title {
    text-shadow:
        0 4px 18px rgba(0,0,0,.26);

    letter-spacing:
        -2.2px;
}

.ng-hero-copy {
    color:
        #c9d0d8 !important;
}


/* ==========================================================
   HERO PANEL - 3D CONSOLE
   ========================================================== */

.ng-hero-panel {
    position: relative;

    transform-style:
        preserve-3d;

    perspective:
        1200px;

    background:
        linear-gradient(
            155deg,
            rgba(38,45,55,.96),
            rgba(24,29,36,.98)
        ) !important;

    border:
        1px solid rgba(255,255,255,.12) !important;

    border-radius:
        18px !important;

    box-shadow:
        var(--os3-shadow-xl),
        inset 0 1px 0 rgba(255,255,255,.05);

    transform:
        perspective(1200px)
        rotateY(-6deg)
        rotateX(2deg);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}


.ng-hero-panel:hover {
    transform:
        perspective(1200px)
        rotateY(-2deg)
        rotateX(1deg)
        translateY(-6px);

    box-shadow:
        0 55px 110px rgba(0,0,0,.34),
        0 18px 38px rgba(0,0,0,.20);
}


/* highlight edge */

.ng-hero-panel::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius:
        inherit;

    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,.08),
            transparent 27%,
            transparent 72%,
            rgba(227,27,35,.07)
        );

    pointer-events:
        none;
}


/* ==========================================================
   HERO MINI CARDS
   ========================================================== */

.ng-mini-card {
    position: relative;

    transform-style:
        preserve-3d;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4f6f8
        ) !important;

    border:
        1px solid rgba(15,23,42,.08) !important;

    border-radius:
        11px !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.16);

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


.ng-mini-card:hover {
    transform:
        translateY(-7px)
        translateZ(18px);

    box-shadow:
        0 20px 36px rgba(0,0,0,.22);
}


.ng-mini-card i {
    text-shadow:
        0 6px 14px rgba(227,27,35,.16);
}


/* staggered floating motion */

.ng-mini-card:nth-child(1) {
    animation:
        osFloatA 6s ease-in-out infinite;
}

.ng-mini-card:nth-child(2) {
    animation:
        osFloatB 7s ease-in-out infinite;
}


/* ==========================================================
   APPLICATION CARDS
   ========================================================== */

.ng-app-card {
    position: relative;

    overflow: hidden;

    transform-style:
        preserve-3d;

    perspective:
        1000px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fafbfc
        ) !important;

    border:
        1px solid #e4e7ec !important;

    border-radius:
        14px !important;

    box-shadow:
        var(--os3-shadow-card);

    transition:
        transform .30s cubic-bezier(.2,.8,.2,1),
        box-shadow .30s ease,
        border-color .30s ease;
}


/* upper metallic highlight */

.ng-app-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(227,27,35,.55),
            transparent
        );

    opacity: 0;

    transition:
        opacity .3s ease;
}


.ng-app-card:hover {
    transform:
        perspective(1000px)
        translateY(-10px)
        rotateX(2deg)
        rotateY(-1deg);

    border-color:
        rgba(227,27,35,.20) !important;

    box-shadow:
        var(--os3-shadow-hover);
}


.ng-app-card:hover::before {
    opacity: 1;
}


.ng-app-card .card-body {
    position: relative;
    z-index: 2;

    transform:
        translateZ(18px);
}


/* ==========================================================
   ICONS
   ========================================================== */

.ng-app-icon {
    position: relative;

    transform:
        translateZ(28px);

    background:
        linear-gradient(
            145deg,
            #fff5f5,
            #ffe6e7
        ) !important;

    border:
        1px solid rgba(227,27,35,.10);

    box-shadow:
        0 8px 18px rgba(227,27,35,.10);

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


.ng-app-card:hover .ng-app-icon {
    transform:
        translateZ(36px)
        scale(1.08);

    box-shadow:
        0 14px 28px rgba(227,27,35,.18);
}


/* ==========================================================
   SERVICE TILES
   ========================================================== */

.ng-service {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f7f8fa
        ) !important;

    border:
        1px solid #e1e5e9 !important;

    border-radius:
        11px !important;

    box-shadow:
        0 7px 18px rgba(15,23,42,.06);

    transition:
        transform .26s ease,
        box-shadow .26s ease,
        border-color .26s ease;
}


.ng-service:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(227,27,35,.22) !important;

    box-shadow:
        0 20px 38px rgba(15,23,42,.12);
}


.ng-service::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    right: -48px;
    bottom: -48px;

    border-radius: 50%;

    background:
        rgba(227,27,35,.06);

    transition:
        transform .35s ease;
}


.ng-service:hover::after {
    transform:
        scale(1.55);
}


/* ==========================================================
   PLATFORM PROCESS PANEL
   ========================================================== */

.ng-platform-panel {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #151a21,
            #222831
        ) !important;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:
        18px !important;

    box-shadow:
        0 34px 80px rgba(15,23,42,.20);

    transform-style:
        preserve-3d;
}


.ng-platform-panel::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -120px;
    top: -120px;

    border:
        48px solid rgba(227,27,35,.10);

    transform:
        rotate(18deg);

    pointer-events:
        none;
}


.ng-process-item {
    position: relative;

    z-index: 2;

    padding:
        9px 12px;

    border-radius:
        10px;

    transition:
        background .25s ease,
        transform .25s ease;
}


.ng-process-item:hover {
    background:
        rgba(255,255,255,.045);

    transform:
        translateX(7px);
}


/* ==========================================================
   BUTTON DEPTH
   ========================================================== */

.ng-hero .btn-danger,
.ng-navbar .btn-danger {
    box-shadow:
        0 8px 20px rgba(227,27,35,.24),
        inset 0 1px 0 rgba(255,255,255,.18);

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


.ng-hero .btn-danger:hover,
.ng-navbar .btn-danger:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 14px 30px rgba(227,27,35,.32),
        inset 0 1px 0 rgba(255,255,255,.18);
}


/* ==========================================================
   NAVIGATION PREMIUM DEPTH
   ========================================================== */

.ng-navbar {
    background:
        rgba(255,255,255,.97) !important;

    backdrop-filter:
        blur(16px);

    box-shadow:
        0 8px 28px rgba(15,23,42,.05);

    border-bottom:
        1px solid rgba(15,23,42,.07) !important;
}


/* ==========================================================
   SECTION DEPTH
   ========================================================== */

#applications {
    position: relative;
}

#applications::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    left: -230px;
    top: 100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(227,27,35,.045),
            transparent 70%
        );

    pointer-events:
        none;
}


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

@keyframes osFloatA {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-5px);
    }
}


@keyframes osFloatB {

    0%,
    100% {
        transform:
            translateY(-2px);
    }

    50% {
        transform:
            translateY(4px);
    }
}


/* ==========================================================
   DESKTOP HERO ENTRANCE
   ========================================================== */

@media (min-width: 992px) {

    .ng-hero-title,
    .ng-hero-copy,
    .ng-hero .ng-kicker,
    .ng-hero .d-flex.flex-wrap {
        animation:
            osHeroEnter .65s ease both;
    }


    .ng-hero-copy {
        animation-delay:
            .08s;
    }


    .ng-hero .d-flex.flex-wrap {
        animation-delay:
            .16s;
    }


    .ng-hero-panel {
        animation:
            osPanelEnter .8s
            cubic-bezier(.2,.8,.2,1)
            both;
    }

}


@keyframes osHeroEnter {

    from {
        opacity: 0;

        transform:
            translateY(16px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes osPanelEnter {

    from {
        opacity: 0;

        transform:
            perspective(1200px)
            rotateY(-12deg)
            rotateX(5deg)
            translateX(28px);
    }

    to {
        opacity: 1;

        transform:
            perspective(1200px)
            rotateY(-6deg)
            rotateX(2deg);
    }

}


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

@media (max-width: 991px) {

    .ng-hero-panel {
        transform:
            none !important;

        animation:
            none !important;
    }


    .ng-app-card:hover {
        transform:
            translateY(-5px);
    }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

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

    .ng-mini-card,
    .ng-hero-panel,
    .ng-app-card,
    .ng-service,
    .ng-hero-title,
    .ng-hero-copy,
    .ng-hero .ng-kicker,
    .ng-hero .d-flex.flex-wrap {
        animation:
            none !important;

        transition:
            none !important;
    }

}

/* END ONESUITE PREMIUM 3D */