/* ==========================================================================
   DNX SOLUTION CO. - LANDING PAGE STYLESHEET
   Accurately matching the target reference design (im2)
   Exact colors, clean pill buttons, seamless graphics, zero-scroll fit
   ========================================================================== */

:root {
    /* Brand Color Palette - Sampled directly from target reference */
    --dnx-navy-title: #071a43;
    --dnx-blue-accent: #0b57de;
    --dnx-primary-cyan: #00caff;
    --dnx-primary-blue: #0096ff;
    --dnx-primary-deep: #005ce6;
    --dnx-text-body: #475e7f;
    --dnx-text-muted: #8ca3c7;
    --dnx-sidebar-bg: #00173d;
    --dnx-card-border: rgba(220, 235, 252, 0.85);
    --dnx-card-shadow: 0 12px 35px rgba(8, 28, 71, 0.07);

    /* Fonts */
    --dnx-font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --dnx-font-display: 'Outfit', 'Plus Jakarta Sans', sans-serif;
}

/* ----------------- BASE & RESET ----------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: var(--dnx-font-main);
    color: var(--dnx-navy-title);
    background: #ffffff url('/images/background.webp') center / cover fixed no-repeat;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html[data-theme="green"] {
    --dnx-navy-title: #07261c;
    --dnx-blue-accent: #0d9e5b;
    --dnx-primary-cyan: #10b981;
    --dnx-primary-blue: #059669;
    --dnx-primary-deep: #047857;
    --dnx-text-body: #374d43;
    --dnx-text-muted: #6b887a;
    --dnx-sidebar-bg: #041f17;
    --dnx-card-border: rgba(180, 225, 205, 0.85);
    --dnx-card-shadow: 0 12px 35px rgba(4, 38, 25, 0.07);
}

.dnx-theme-control {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    width: clamp(140px, 78%, 180px);
    margin: 0 auto 10px;
    padding: 0;
    color: #d7e8fb;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.dnx-theme-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(215, 232, 251, 0.82);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
}

.dnx-theme-label svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #43d5ff;
    stroke-width: 1.8;
}

.dnx-theme-select {
    width: 100%;
    min-height: 40px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(112, 190, 255, 0.48);
    border-radius: 10px;
    padding: 8px 36px 8px 12px;
    color: #fff;
    background-color: rgba(0, 18, 49, 0.72);
    background-image: linear-gradient(45deg, transparent 50%, #8edfff 50%), linear-gradient(135deg, #8edfff 50%, transparent 50%);
    background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    font: 700 0.84rem var(--dnx-font-main);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.dnx-theme-select:hover,
.dnx-theme-select:focus-visible {
    border-color: #48ceff;
    background-color: rgba(0, 30, 75, 0.96);
    box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.14), 0 5px 16px rgba(0, 130, 255, 0.12);
    outline: none;
}

.dnx-theme-select option {
    color: #07261c;
    background: #fff;
}

html[data-theme="green"] .dnx-mobile-header {
    background-color: #041f17;
    border-bottom-color: rgba(16, 185, 129, 0.2);
}

html[data-theme="green"] .dnx-sidebar {
    background-color: #041f17;
    background-image: url('/images/sidebar-bg-green.png');
    border-right-color: rgba(16, 185, 129, 0.16);
}

html[data-theme="green"] .dnx-main-content {
    --dnx-theme-accent: #0d9e5b;
    --dnx-theme-bright: #10b981;
    --dnx-theme-deep: #047857;
}

html[data-theme="green"] .dnx-kicker-bar,
html[data-theme="green"] .dnx-btn-primary,
html[data-theme="green"] .dnx-btn-primary:hover,
html[data-theme="green"] .dnx-nav-link.active,
html[data-theme="green"] .dnx-step-number {
    background-image: linear-gradient(90deg, #059669, #10b981);
}

html[data-theme="green"] .dnx-btn-primary {
    box-shadow: 0 6px 20px rgba(4, 120, 87, 0.3), 0 2px 8px rgba(16, 185, 129, 0.24);
}

html[data-theme="green"] .dnx-btn-primary::after,
html[data-theme="green"] .dnx-engineers-badge-dot {
    background: #34d399;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.7);
}

html[data-theme="green"] .dnx-nav-link.active {
    border-color: rgba(52, 211, 153, 0.7);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

html[data-theme="green"] .dnx-modal-badge,
html[data-theme="green"] .dnx-list-check,
html[data-theme="green"] .dnx-step-meta,
html[data-theme="green"] .dnx-legal-contact-card a {
    color: #047857;
}

html[data-theme="green"] .dnx-list-check,
html[data-theme="green"] .dnx-step-meta {
    background: #e6f7ef;
}

html[data-theme="green"] .dnx-service-card:hover {
    border-color: #10b981;
    box-shadow: 0 6px 18px rgba(4, 120, 87, 0.12);
}

html[data-theme="green"] .dnx-hamburger-btn {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.12), inset 0 0 8px rgba(16, 185, 129, 0.05);
}

html[data-theme="green"] .dnx-hamburger-line {
    background: linear-gradient(90deg, #10b981, #059669);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

html[data-theme="green"] :is(
    .dnx-breadcrumb a,
    .dnx-card-footer-link,
    .dnx-card-icon-badge,
    .dnx-contact-info-title span,
    .dnx-contact-title-accent,
    .dnx-directory-list a:hover,
    .dnx-interactive-channel:hover,
    .dnx-layer-number,
    .dnx-legal-links a:hover,
    .dnx-legal-sec-num,
    .dnx-portfolio-lead-badge,
    .dnx-recent-post-link:hover,
    .dnx-stat-value,
    .dnx-verified-pill,
    .dnx-blog-card-title a:hover,
    .dnx-category-widget-link:hover,
    .dnx-service-card-title a:hover,
    .dnx-service-placeholder-icon,
    .dnx-service-readmore-btn
) {
    color: #047857;
}

html[data-theme="green"] :is(
    .dnx-about-feature-card::before,
    .dnx-about-feature-dash,
    .dnx-accent-line,
    .dnx-card-bullets li::before,
    .dnx-contact-form-card::before,
    .dnx-directory-col h5::after,
    .dnx-legal-list li::before,
    .dnx-service-card-dash,
    .dnx-service-card-item::before,
    .dnx-showcase-dash,
    .dnx-showcase-banner::before,
    .dnx-showcase-banner.vision::before
) {
    background-color: #10b981;
}

html[data-theme="green"] :is(
    .dnx-contact-form-card .dnx-form-input:focus,
    .dnx-search-input:focus,
    .dnx-circuit-node,
    .dnx-circuit-node.cyan,
    .dnx-showcase-card,
    .dnx-showcase-banner.vision .dnx-showcase-card
) {
    border-color: #10b981;
}

html[data-theme="green"] .dnx-showcase-banner.vision .dnx-showcase-card {
    border-left-color: #34d399;
}

html[data-theme="green"] .dnx-circuit-node svg {
    color: #047857;
}

html[data-theme="green"] .dnx-accent-circle.cyan {
    background: #34d399;
    box-shadow: 0 0 50px rgba(52, 211, 153, 0.35);
}

html[data-theme="green"] :is(.dnx-badge-pill, .dnx-legal-effective-badge) {
    color: #047857;
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.08);
}

html[data-theme="green"] .dnx-quote-callout {
    border-left-color: #059669;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(52, 211, 153, 0.03));
}

html[data-theme="green"] .dnx-service-readmore-btn:hover {
    background: #047857;
}

html[data-theme="green"] .dnx-legal-list li::before {
    color: #10b981;
}

body.dnx-body {
    overflow-x: hidden;
}

.dnx-main-content {
    background: transparent;
}

@media (min-width: 992px) {

    html,
    body,
    body.dnx-body {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        /* Fits screen ratio completely without vertical scrolling */
    }
}

/* ----------------- LAYOUT SHELL ----------------- */
.dnx-app-wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
    position: relative;
}

@media (min-width: 992px) {
    .dnx-app-wrapper {
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
    }
}


/* ----------------- MOBILE TOP BAR ----------------- */
.dnx-mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #00173d;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1030;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 180, 255, 0.15);
}

.dnx-mobile-brand {
    position: relative;
    left: auto;
    transform: none;
}

.dnx-mobile-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.dnx-home-mobile-logo {
    display: none;
}

.dnx-hamburger-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(0, 160, 255, 0.08);
    border: 1.2px solid rgba(0, 212, 255, 0.35);
    box-shadow: 0 2px 10px rgba(0, 160, 255, 0.12), inset 0 0 8px rgba(0, 212, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4.5px;
    cursor: pointer;
    padding: 0;
    transition: all 0.25s ease;
    z-index: 1031;
}

.dnx-hamburger-btn:hover,
.dnx-hamburger-btn:active {
    background: rgba(0, 212, 255, 0.20);
    border-color: rgba(0, 212, 255, 0.65);
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.35);
    transform: scale(1.05);
}

.dnx-hamburger-box {
    width: 20px;
    height: 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Style both direct spans and box lines */
.dnx-hamburger-btn>span:not(.dnx-hamburger-box),
.dnx-hamburger-line {
    display: block;
    height: 2.4px;
    background: linear-gradient(90deg, #00d4ff, #0099ff);
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(0, 212, 255, 0.6);
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.dnx-hamburger-btn>span:not(.dnx-hamburger-box):nth-child(1),
.dnx-hamburger-line.line-1 {
    width: 20px;
}

.dnx-hamburger-btn>span:not(.dnx-hamburger-box):nth-child(2),
.dnx-hamburger-line.line-2 {
    width: 14px;
    margin-left: auto;
    margin-right: 11px;
}

.dnx-hamburger-btn>span:not(.dnx-hamburger-box):nth-child(3),
.dnx-hamburger-line.line-3 {
    width: 20px;
}

/* Active transition to close 'X' */
.dnx-hamburger-btn.active>span:not(.dnx-hamburger-box):nth-child(1),
.dnx-hamburger-btn.active .dnx-hamburger-line.line-1 {
    transform: translateY(6.9px) rotate(45deg);
}

.dnx-hamburger-btn.active>span:not(.dnx-hamburger-box):nth-child(2),
.dnx-hamburger-btn.active .dnx-hamburger-line.line-2 {
    opacity: 0;
    transform: translateX(8px);
}

.dnx-hamburger-btn.active>span:not(.dnx-hamburger-box):nth-child(3),
.dnx-hamburger-btn.active .dnx-hamburger-line.line-3 {
    transform: translateY(-6.9px) rotate(-45deg);
}

/* ----------------- SIDEBAR NAVIGATION ----------------- */
@keyframes dnxSidebarSlideIn {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.dnx-sidebar {
    width: clamp(205px, 16.5vw, 240px);
    min-width: 205px;
    background: #001538 url('/images/sidebar-bg.png') no-repeat center bottom / cover;
    border-right: 1px solid rgba(0, 140, 255, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1020;
    flex-shrink: 0;
    user-select: none;
    height: 100%;
    overflow: hidden;
}

/* Smooth Entrance: Slide from left to right on page load & refresh (ONLY ON HOME SECTION) */
@media (min-width: 992px) {
    .dnx-view-index .dnx-sidebar {
        animation: dnxSidebarSlideIn 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both;
        will-change: transform, opacity;
    }
}

/* Sidebar Logo Header - Oval Ambient Light (No Box, Low Opacity Light Behind Logo) */
.dnx-sidebar-header {
    width: 100%;
    padding: clamp(14px, 2.2vh, 24px) 0 clamp(8px, 1.4vh, 16px) 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
}

.dnx-sidebar-close-btn {
    display: none;
}

.dnx-logo-link {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    width: auto;
    max-width: 100%;
    text-decoration: none;
    cursor: pointer;
}

.dnx-sidebar-logo {
    display: block;
    margin: 0 auto;
    width: clamp(165px, 13.5vw, 190px);
    max-width: 90%;
    height: auto;
    max-height: clamp(56px, 8vh, 74px);
    object-fit: contain;
    /* No glow, untouched authentic pixels */
    filter: none;
}

/* Sidebar Navigation Links */
.dnx-nav-container {
    flex: 1 1 auto;
    padding: clamp(4px, 1vh, 12px) clamp(12px, 1.2vw, 18px);
    overflow-y: auto;
    min-height: 0;
}

.dnx-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.9vh, 8px);
}

.dnx-nav-item {
    position: relative;
}

.dnx-nav-link {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.1vw, 15px);
    padding: clamp(7px, 1.15vh, 11px) clamp(14px, 1.3vw, 20px);
    border-radius: 50px;
    color: #ffffff;
    text-decoration: none;
    font-size: clamp(0.92rem, 1.28vh + 0.22vw, 1.04rem);
    font-weight: 550;
    letter-spacing: 0.015em;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
}

.dnx-nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(3px);
}

.dnx-nav-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(18px, 2.3vh, 22px);
    height: clamp(18px, 2.3vh, 22px);
    flex-shrink: 0;
}

.dnx-nav-icon {
    width: clamp(17px, 2.1vh, 20px);
    height: clamp(17px, 2.1vh, 20px);
    stroke-width: 2.2px;
    stroke: #ffffff;
    transition: transform 0.25s ease;
}

.dnx-nav-link:hover .dnx-nav-icon {
    transform: scale(1.1);
}

/* Active Nav State - Vibrant Cyan/Blue Pill matching target im2 */
.dnx-nav-link.active {
    background: linear-gradient(90deg, #0260db 0%, #0088ff 100%);
    color: #ffffff;
    font-weight: 600;
    border: 1.5px solid rgba(0, 210, 255, 0.75);
    box-shadow: 0 0 16px rgba(0, 195, 255, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    transform: none;
}

/* Sidebar Footer - Clean Horizontal Divider & Crisp Copyright (Matching Target) */
.dnx-sidebar-footer {
    position: relative;
    z-index: 10;
    margin-top: auto;
    flex-shrink: 0;
    background: transparent;
    padding: clamp(8px, 1.2vh, 14px) 0 clamp(10px, 1.6vh, 18px) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.dnx-sidebar-divider {
    width: clamp(140px, 78%, 180px);
    height: 1.5px;
    background: rgba(255, 255, 255, 0.45);
    margin: 0 auto clamp(6px, 1vh, 10px) auto;
}

.dnx-sidebar-copyright {
    padding: 0 10px;
    text-align: center;
    font-size: clamp(0.7rem, 0.88vh + 0.1vw, 0.76rem);
    color: #cbd5e1;
    letter-spacing: 0.02em;
    font-weight: 500;
}

/* Sidebar Backdrop on Mobile */
.dnx-sidebar-backdrop {
    display: none;
}

/* ----------------- MAIN CONTENT AREA ----------------- */
.dnx-main-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    background: #ffffff url('/images/background.webp') center / cover fixed no-repeat;
    position: relative;
    overflow-x: hidden;
}

@media (min-width: 992px) {
    .dnx-main-content {
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }
}

.dnx-page-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(10px, 1.6vh, 22px) clamp(14px, 1.8vw, 24px) clamp(6px, 1vh, 12px) clamp(16px, 2.2vw, 28px);
    position: relative;
    z-index: 2;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
}

/* ----------------- HERO SECTION ----------------- */
.dnx-hero-section {
    position: relative;
    z-index: 5;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
}

.dnx-hero-grid {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Left Hero Info - Substantial, prominent presence matching target */
.dnx-hero-content {
    position: relative;
    z-index: 10;
    width: clamp(400px, 42vw, 540px);
    max-width: 540px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: auto;
}

/* Hero Content Staggered Fade-Up Entrance */
@keyframes dnxHeroFadeUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 52px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.dnx-hero-content>* {
    animation: dnxHeroFadeUp 1.15s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform, opacity;
}

.dnx-hero-content .dnx-kicker {
    animation-delay: 0.22s;
}

.dnx-hero-content .dnx-hero-title {
    animation-delay: 0.36s;
}

.dnx-hero-content .dnx-hero-description {
    animation-delay: 0.50s;
}

.dnx-hero-content .dnx-cta-group {
    animation-delay: 0.64s;
}

/* Kicker / Tagline */
.dnx-kicker {
    margin-bottom: clamp(12px, 1.9vh, 20px);
}

.dnx-kicker-text {
    font-size: clamp(0.96rem, 1.18vh + 0.28vw, 1.14rem);
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--dnx-navy-title);
    text-transform: uppercase;
    display: inline-block;
}

.dnx-kicker-bar {
    width: clamp(54px, 4.6vw, 70px);
    height: 4.5px;
    background: linear-gradient(90deg, #0099ff, #00d4ff);
    border-radius: 2px;
    margin-top: 6px;
}

/* Main Hero Title - Large, bold, commanding presence matching target design */
.dnx-hero-title {
    font-family: var(--dnx-font-main);
    font-size: clamp(3.3rem, 6.2vh + 1.8vw, 4.85rem);
    font-weight: 850;
    -webkit-text-stroke: 0.4px var(--dnx-navy-title);
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--dnx-navy-title);
    /* Exact deep midnight navy #071a43 */
    margin: 0 0 clamp(14px, 2.2vh, 24px) 0;
}

.dnx-hero-title-accent {
    color: var(--dnx-blue-accent);
    /* Exact rich royal blue #0b57de */
    -webkit-text-stroke: 0.4px var(--dnx-blue-accent);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: initial;
    display: inline-block;
}

/* Hero Description - Prominent, readable typography matching target */
.dnx-hero-description {
    font-size: clamp(0.92rem, 1.1vh + 0.18vw, 1.05rem);
    line-height: 1.52;
    color: #24354a;
    margin-bottom: clamp(18px, 2.6vh, 28px);
    max-width: 485px;
    font-weight: 550;
}

/* CTA Buttons */
.dnx-cta-group {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.6vw, 20px);
    flex-wrap: wrap;
}

.dnx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-family: var(--dnx-font-main);
    font-size: clamp(0.98rem, 1.16vh + 0.28vw, 1.10rem);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

/* Primary Pill Button - Exact Vibrant Cyan-to-Cobalt Gradient & Ambient Glow matching basis */
.dnx-btn-primary {
    background: linear-gradient(90deg, #00b4ff 0%, #005ae6 100%);
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: clamp(11.5px, 1.5vh, 15px) clamp(30px, 2.5vw, 40px);
    letter-spacing: 0.01em;
    gap: 9px;
    position: relative;
    box-shadow:
        0 6px 20px rgba(0, 100, 240, 0.42),
        0 2px 8px rgba(0, 200, 255, 0.4),
        inset 0 -2px 3px rgba(0, 240, 255, 0.7);
}

.dnx-btn-primary::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: #00e1ff;
    border-radius: 9999px;
    box-shadow: 0 0 10px #00e1ff, 0 0 16px rgba(0, 225, 255, 0.85);
    pointer-events: none;
}

.dnx-btn-primary:hover {
    background: linear-gradient(90deg, #1ac0ff 0%, #0066f0 100%);
    box-shadow:
        0 8px 24px rgba(0, 100, 255, 0.52),
        0 3px 12px rgba(0, 210, 255, 0.6),
        inset 0 -2px 4px rgba(0, 255, 255, 0.95);
    transform: translateY(-2px);
    color: #ffffff;
}

.dnx-btn-primary:hover::after {
    width: 72%;
    box-shadow: 0 0 14px #00f0ff, 0 0 22px rgba(0, 240, 255, 0.95);
}

.dnx-btn-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
    font-size: 1.2rem;
    line-height: 1;
}

.dnx-btn-primary:hover .dnx-btn-arrow {
    transform: translateX(4px);
}

/* Outline Secondary Pill Button - Exact Border & Navy Color from Basis */
.dnx-btn-outline {
    background: #ffffff;
    color: var(--dnx-navy-title);
    border: 2.2px solid var(--dnx-navy-title);
    padding: clamp(10.5px, 1.4vh, 14px) clamp(30px, 2.5vw, 40px);
}

.dnx-btn-outline:hover {
    background: var(--dnx-navy-title);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(7, 26, 67, 0.2);
}

/* Right Hero Visual Area - High-Definition Globe & Smart City Animation */
@keyframes dnxGlobeFadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 42px, 0) scale(0.88);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.dnx-hero-visual-wrapper {
    position: absolute;
    top: calc(-1 * clamp(10px, 1.6vh, 22px));
    right: calc(-1 * clamp(14px, 1.8vw, 24px));
    bottom: 0;
    left: clamp(400px, 42vw, 540px);
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    pointer-events: auto;
    z-index: 1;
    overflow: hidden;
    animation: dnxGlobeFadeIn 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
    will-change: transform, opacity;
}

.dnx-hero-visual {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
}

#hero-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#sceneCanvas {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

#sceneCanvas:active {
    cursor: grabbing;
}

/* ----------------- BOTTOM FEATURES CARD (5 PILLARS) ----------------- */
/* ----------------- FEATURE PILLARS BAR (Bold, Tall & Spacious Matching Target Reference) ----------------- */
.dnx-features-section {
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
    margin-top: clamp(6px, 1vh, 14px);
    margin-bottom: clamp(18px, 2.8vh, 32px);
    width: 100%;
    animation: dnxHeroFadeUp 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.78s both;
    will-change: transform, opacity;
}

.dnx-features-card {
    background: #ffffff;
    border-radius: clamp(24px, 3.2vh, 34px);
    border: 1px solid rgba(210, 230, 252, 0.90);
    box-shadow:
        0 22px 56px rgba(2, 38, 100, 0.17),
        0 8px 22px rgba(2, 38, 100, 0.09),
        0 1px 3px rgba(0, 0, 0, 0.04);
    padding: clamp(30px, 4.2vh, 46px) clamp(16px, 1.6vw, 26px);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    box-sizing: border-box;
}

/* Individual Feature Column with Elegant Vertical Dividers */
.dnx-feature-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(6px, 0.9vh, 12px) clamp(8px, 1vw, 16px);
    border-right: 1px solid #e2ecf7;
    position: relative;
    transition: transform 0.25s ease;
    justify-content: flex-start;
}

.dnx-feature-col:last-child {
    border-right: none;
}

.dnx-feature-col:hover {
    transform: none;
}

/* Icon Badge - Big Bold Discs Matching Target Reference */
.dnx-feature-icon-badge {
    width: clamp(72px, 9.4vh, 88px);
    height: clamp(72px, 9.4vh, 88px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(14px, 1.8vh, 18px);
    position: relative;
    transition: transform 0.25s ease;
}

.dnx-feature-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.25s ease, filter 0.25s ease;
    animation: none !important;
}

.dnx-feature-col:hover .dnx-feature-icon {
    transform: scale(1.06);
    filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.65));
}

/* Feature Title - Bold Prominent Heading */
.dnx-feature-title {
    font-family: var(--dnx-font-main);
    font-size: clamp(1.08rem, 1.45vh + 0.25vw, 1.25rem);
    font-weight: 800;
    -webkit-text-stroke: 0.45px var(--dnx-navy-title);
    letter-spacing: 0.07em;
    color: var(--dnx-navy-title);
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Cyan Accent Dash under Every Pillar */
.dnx-accent-line {
    display: block;
    width: clamp(34px, 3.2vw, 44px);
    height: 4.5px;
    background: linear-gradient(90deg, #0088ff, #00c8ff);
    border-radius: 4px;
    margin-top: 6px;
    margin-bottom: 9px;
}

/* Feature Description - Clear, Legible & Balanced Copy */
.dnx-feature-desc {
    font-size: clamp(0.85rem, 1.1vh + 0.18vw, 0.96rem);
    line-height: 1.5;
    color: #334760;
    margin: 0;
    max-width: clamp(170px, 17vw, 225px);
    font-weight: 500;
}

/* ----------------- BOTTOM CYBER WAVE OVERLAY ----------------- */
@keyframes dnxWaveFadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.dnx-bottom-wave-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0.75) 75%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0.75) 75%, rgba(0, 0, 0, 0) 100%);
    animation: dnxWaveFadeIn 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.62s both;
    will-change: transform, opacity;
}

.dnx-bottom-wave-asset {
    display: block;
    width: 100%;
    height: auto;
    max-height: clamp(45px, 8vh, 88px);
    object-fit: cover;
    object-position: right bottom;
    opacity: 0.92;
    mix-blend-mode: multiply;
}

/* ----------------- MODAL STYLES ----------------- */
.dnx-custom-modal .modal-content {
    border-radius: 20px;
    border: 1px solid rgba(0, 120, 255, 0.15);
    box-shadow: 0 25px 60px rgba(8, 28, 71, 0.2);
    overflow: hidden;
}

.dnx-custom-modal .modal-header {
    background: #f8fbff;
    border-bottom: 1px solid rgba(0, 120, 255, 0.1);
    padding: 18px 24px;
}

.dnx-modal-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0077ff;
    margin-bottom: 4px;
}

.dnx-custom-modal .modal-body {
    padding: 24px;
}

.dnx-custom-modal .modal-footer {
    border-top: 1px solid rgba(0, 120, 255, 0.1);
    padding: 14px 24px;
    background: #fbfdff;
}

.dnx-service-card {
    background: #f9fbff;
    border: 1px solid #e1effe;
    border-radius: 14px;
    padding: 16px;
    height: 100%;
    transition: all 0.25s ease;
}

.dnx-service-card:hover {
    border-color: #0099ff;
    box-shadow: 0 6px 18px rgba(0, 120, 255, 0.1);
}

.dnx-card-icon {
    font-size: 1.5rem;
    margin-bottom: 6px;
}

.dnx-service-card h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dnx-navy-title);
    margin-bottom: 5px;
}

.dnx-service-card p {
    font-size: 0.82rem;
    color: #556c8d;
    margin: 0;
    line-height: 1.45;
}

.dnx-list-check {
    background: #e1f3ff;
    color: #0077ff;
    font-weight: bold;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* ----------------- RESPONSIVE BREAKPOINTS ----------------- */

/* Ultra-wide / Large 4K/QHD Displays */
@media (min-width: 1600px) {
    .dnx-sidebar {
        width: 255px;
    }
}

/* Standard Laptops & 1366x768 screens */
@media (min-width: 992px) and (max-height: 800px) {
    .dnx-page-container {
        padding-top: clamp(32px, 7vh, 48px);
        padding-right: clamp(24px, 2.4vw, 36px);
        padding-bottom: clamp(6px, 1vh, 10px);
        padding-left: clamp(24px, 2.4vw, 36px);
    }

    .dnx-hero-section {
        flex: 1 1 auto;
        min-height: 0;
    }

    .dnx-hero-visual-wrapper {
        height: calc(100% + clamp(6px, 1vh, 10px));
        margin-top: calc(-1 * clamp(6px, 1vh, 10px));
    }

    .dnx-features-section {
        margin-top: clamp(16px, 2vh, 22px);
        margin-bottom: clamp(16px, 2.5vh, 26px);
    }

    .dnx-features-card {
        padding: clamp(14px, 2.2vh, 18px) clamp(18px, 1.8vw, 24px);
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: clamp(6px, 0.7vw, 10px);
    }

    .dnx-feature-col {
        padding-right: clamp(5px, 0.5vw, 8px);
        padding-left: clamp(5px, 0.5vw, 8px);
    }

    .dnx-feature-icon-badge {
        width: clamp(56px, 7.5vh, 64px);
        height: clamp(56px, 7.5vh, 64px);
        margin-bottom: 10px;
    }

    .dnx-feature-title {
        font-size: clamp(0.98rem, 1.25vh + 0.18vw, 1.08rem);
        -webkit-text-stroke: 0.4px var(--dnx-navy-title);
    }

    .dnx-accent-line {
        width: 30px;
        height: 4px;
        margin-top: 4px;
        margin-bottom: 6px;
    }

    .dnx-feature-desc {
        font-size: 0.8rem;
        line-height: 1.4;
    }
}

/* Tablets & Mobile (Natural Flow for touch screens) */
@media (max-width: 991.98px) {
    .dnx-app-wrapper {
        flex-direction: column;
        padding-top: 60px;
        min-height: 100vh;
        overflow-y: auto;
    }

    .dnx-view-index {
        overflow: hidden;
    }

    .dnx-view-index .dnx-app-wrapper {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    /* Off-canvas mobile sidebar (Off-screen via GPU transform, completely hidden when closed - Zero bleed & Zero freeze) */
    .dnx-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 285px;
        transform: translate3d(-100%, 0, 0);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
        z-index: 1050;
        box-shadow: none;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
    }

    .dnx-sidebar.open {
        transform: translate3d(0, 0, 0);
        visibility: visible;
        pointer-events: auto;
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.45);
    }

    .dnx-sidebar-header {
        padding-top: 18px;
        padding-bottom: 14px;
        position: relative;
    }

    .dnx-sidebar-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 14px;
        right: 12px;
        width: 34px;
        height: 34px;
        background: rgba(0, 212, 255, 0.08);
        border: 1px solid rgba(0, 212, 255, 0.25);
        border-radius: 8px;
        color: #00d4ff;
        cursor: pointer;
        padding: 0;
        transition: all 0.2s ease;
        z-index: 20;
    }

    .dnx-sidebar-close-btn:hover,
    .dnx-sidebar-close-btn:active {
        background: rgba(0, 212, 255, 0.22);
        color: #ffffff;
        border-color: rgba(0, 212, 255, 0.55);
        transform: scale(1.05);
    }

    .dnx-sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 15, 40, 0.65);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1045;
        height: 100vh;
        height: 100dvh;
    }

    .dnx-sidebar-backdrop.active {
        display: block;
    }

    body.dnx-sidebar-open .dnx-mobile-header {
        background: transparent;
        box-shadow: none;
        border-bottom-color: transparent;
    }

    .dnx-main-content {
        min-height: calc(100vh - 60px);
        overflow-y: auto;
    }

    .dnx-view-index .dnx-main-content {
        flex: 1 1 0;
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        min-height: 0;
        overflow: hidden;
    }

    .dnx-view-index .dnx-page-container {
        justify-content: center;
        align-items: stretch;
    }

    .dnx-view-index .dnx-hero-section {
        flex: 1 1 0;
        width: 100%;
        align-items: center;
    }

    .dnx-view-index .dnx-hero-grid {
        justify-content: center;
    }

    /* Reveal the headline as the page opens on mobile. */
    .dnx-inner-header {
        animation: dnxFadeInUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .dnx-inner-header.dnx-scroll-up,
    .dnx-inner-header.dnx-scroll-left,
    .dnx-inner-header.dnx-scroll-right,
    .dnx-inner-header.dnx-scroll-fade {
        animation: dnxFadeInUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .dnx-page-container {
        flex: 1 1 auto;
        height: 100%;
        padding: 10px 16px 6px;
        min-height: 0;
        justify-content: flex-start;
        gap: 0;
    }

    .dnx-hero-section {
        flex: 1 1 auto;
        min-height: 0;
        margin-bottom: 0;
    }

    .dnx-hero-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
        min-height: 0;
        height: 100%;
    }

    .dnx-hero-content {
        max-width: 100%;
        margin: 0 auto;
        width: 100%;
    }

    .dnx-view-index .dnx-hero-content {
        align-items: center;
        text-align: center;
        flex: 0 0 auto;
    }

    .dnx-view-index .dnx-hero-content .dnx-kicker {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dnx-view-index .dnx-mobile-header .dnx-mobile-brand {
        display: block;
    }

    .dnx-view-index .dnx-mobile-header .dnx-mobile-logo {
        height: 36px;
        width: auto;
        max-width: 220px;
    }

    .dnx-view-index .dnx-home-mobile-logo {
        display: none;
    }

    .dnx-view-index .dnx-hero-content .dnx-cta-group {
        width: 100%;
        justify-content: center;
    }

    .dnx-kicker {
        margin-bottom: 8px;
    }

    .dnx-kicker-bar {
        margin-left: auto;
        margin-right: auto;
        margin-top: 4px;
        height: 3.5px;
    }

    .dnx-hero-title {
        font-size: clamp(2.2rem, 5.2vh + 1vw, 2.9rem);
        margin: 0 0 10px 0;
        line-height: 1.08;
    }

    .dnx-hero-description {
        margin-left: auto;
        margin-right: auto;
        font-size: 0.90rem;
        line-height: 1.45;
        margin-bottom: 16px;
        max-width: 440px;
    }

    .dnx-cta-group {
        justify-content: center;
        gap: 10px;
        margin-bottom: 4px;
    }

    /* Mobile Hero Visual (Responsive 3D Globe & Smart City Animation) */
    .dnx-hero-visual-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 480px !important;
        height: clamp(210px, 32vh, 290px) !important;
        margin: clamp(2px, 0.6vh, 6px) auto 0 !important;
        pointer-events: auto !important;
        z-index: 2 !important;
        border-radius: 0;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 78%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 78%, transparent 100%);
    }

    .dnx-hero-visual-wrapper .dnx-hero-visual {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dnx-hero-visual-wrapper #hero-container {
        width: 100%;
        height: 100%;
        position: relative;
        pointer-events: auto;
    }

    .dnx-hero-visual-wrapper #sceneCanvas {
        width: 100% !important;
        height: 100% !important;
        display: block;
        pointer-events: auto;
        touch-action: pan-y;
        cursor: grab;
    }

    .dnx-hero-visual-wrapper #sceneCanvas:active {
        cursor: grabbing;
    }

    /* Bottom Feature Pillars Bar - Fills the Bottom Naturally (No big spaces, not squished horizontal) */
    .dnx-features-section {
        display: none;
    }

    .dnx-features-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 14px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(210, 230, 252, 0.95);
        box-shadow: 0 14px 34px rgba(2, 38, 100, 0.10), 0 4px 12px rgba(2, 38, 100, 0.04);
        box-sizing: border-box;
    }

    .dnx-feature-col {
        flex: unset;
        min-width: 0;
        width: 100%;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 14px 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        text-align: left;
        box-sizing: border-box;
    }

    .dnx-feature-copy {
        min-width: 0;
        flex: 1;
    }

    .dnx-feature-col:nth-child(5) {
        grid-column: span 2;
        width: min(100%, 250px);
        justify-self: center;
        padding: 12px 10px;
        margin: 0 auto;
    }

    .dnx-feature-icon-badge {
        flex: 0 0 clamp(44px, 11vw, 54px);
        width: clamp(44px, 11vw, 54px);
        height: clamp(44px, 11vw, 54px);
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        box-sizing: border-box;
    }

    .dnx-feature-title {
        font-size: clamp(0.82rem, 2.4vw, 0.92rem);
        font-weight: 800;
        letter-spacing: 0.035em;
        margin: 0;
        color: var(--dnx-navy-title);
        -webkit-text-stroke: 0.3px var(--dnx-navy-title);
        align-items: flex-start;
    }

    .dnx-accent-line {
        width: 28px;
        height: 3px;
        margin: 4px 0 6px;
    }

    .dnx-feature-desc {
        font-size: clamp(0.74rem, 2vw, 0.8rem);
        line-height: 1.4;
        color: #43536a;
        max-width: none;
        margin: 0;
        font-weight: 500;
    }
}

/* Small Phones */
@media (max-width: 576px) {
    .dnx-view-index .dnx-page-container {
        justify-content: flex-start;
        padding: 20px 16px 16px;
        gap: 18px;
    }

    .dnx-view-index .dnx-hero-visual-wrapper {
        max-width: 380px;
        height: clamp(190px, 30vh, 250px);
        margin: 8px auto 10px;
    }

    .dnx-view-index .dnx-features-section {
        margin-top: 4px;
    }

    .dnx-view-index .dnx-page-container {
        justify-content: center;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .dnx-view-index .dnx-hero-grid {
        justify-content: center;
    }

    .dnx-view-index .dnx-hero-visual-wrapper {
        height: clamp(155px, 25vh, 210px) !important;
        margin-top: 2px !important;
    }

    .dnx-page-container {
        padding: 8px 14px 4px;
        gap: 0;
    }

    .dnx-kicker {
        margin-bottom: 6px;
    }

    .dnx-kicker-bar {
        margin-top: 3px;
        height: 3px;
    }

    .dnx-hero-title {
        font-size: clamp(2rem, 5.2vh + 1vw, 2.5rem);
        margin-bottom: 8px;
        line-height: 1.1;
    }

    .dnx-hero-description {
        font-size: 0.86rem;
        line-height: 1.42;
        margin-bottom: 10px;
        max-width: 360px;
    }

    .dnx-cta-group {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }

    .dnx-btn {
        flex: 1 1 140px;
        padding: 10px 16px;
        font-size: 0.88rem;
        white-space: nowrap;
    }

    .dnx-features-card {
        display: flex;
        gap: 12px;
        padding: 12px;
        border-radius: 22px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .dnx-features-card::-webkit-scrollbar {
        display: none;
    }

    .dnx-feature-col {
        flex: 0 0 88%;
        width: 88%;
        min-height: 104px;
        gap: 10px;
        padding: 12px 10px;
        border-radius: 0 !important;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .dnx-feature-icon-badge {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        padding: 0;
    }

    .dnx-feature-title {
        font-size: 0.82rem;
    }

    .dnx-accent-line {
        width: 22px;
        height: 2.5px;
        margin: 3px auto 5px auto;
    }

    .dnx-feature-desc {
        font-size: 0.74rem;
        line-height: 1.42;
    }

    .dnx-feature-col:nth-child(5) {
        flex-basis: 88%;
        width: 88%;
        padding: 12px 10px;
    }

    .dnx-feature-col,
    .dnx-feature-icon-badge {
        border: 0 !important;
        box-shadow: none !important;
    }

    .dnx-view-index .dnx-feature-card {
        flex: 0 0 calc((100% - 10px) / 2);
        width: calc((100% - 10px) / 2);
        min-width: calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);
        min-height: 120px;
        padding: 16px 8px 14px;
        border: 1px solid rgba(220, 235, 252, 0.95) !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 24px rgba(8, 28, 71, 0.08) !important;
        scroll-snap-align: start;
    }

    .dnx-view-index .dnx-feature-col:nth-child(5) {
        flex-basis: calc((100% - 10px) / 2);
        width: calc((100% - 10px) / 2);
        padding: 16px 8px 14px;
    }
}

@media (max-width: 576px) and (max-height: 650px) {
    .dnx-view-index .dnx-page-container {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .dnx-kicker {
        margin-bottom: 4px;
    }

    .dnx-hero-title {
        font-size: clamp(1.8rem, 5vh, 2.2rem);
        margin-bottom: 6px;
    }

    .dnx-hero-description {
        font-size: 0.82rem;
        line-height: 1.35;
        margin-bottom: 8px;
    }

    .dnx-hero-visual-wrapper {
        height: clamp(130px, 24vh, 170px) !important;
        margin-top: 2px !important;
    }
}

/* ==========================================================================
   DEDICATED INNER PAGES STYLING (Services, Solutions, Industries, About, Why DNX, Contact)
   ========================================================================== */

.dnx-inner-page {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(24px, 3.5vh, 40px) clamp(20px, 3vw, 44px) 50px clamp(20px, 3vw, 44px);
    box-sizing: border-box;
    display: block;
    /* Block layout ensures padding-bottom is fully included in the browser scroll range */
    scroll-behavior: smooth;
    position: relative;
}

/* Bottom buffer spacer to ensure the last card or footer is NEVER cut off when scrolling */
.dnx-inner-page::after {
    content: '';
    display: block;
    height: clamp(50px, 8vh, 90px);
    width: 100%;
    clear: both;
}

/* Flush Full-Bleed Footer Modifier for Inner Pages (Max at side & Max at bottom) */
.dnx-inner-page.dnx-has-flush-footer {
    padding: 0 !important;
    display: block;
}

.dnx-inner-page.dnx-has-flush-footer::after {
    display: none !important;
    /* No bottom gap spacer - footer docks flush to the bottom edge! */
}

.dnx-inner-page-content {
    padding: clamp(24px, 3.5vh, 40px) clamp(20px, 3vw, 44px) 0 clamp(20px, 3vw, 44px);
    width: 100%;
    box-sizing: border-box;
    flex: 1 0 auto;
}

.dnx-inner-page::-webkit-scrollbar {
    width: 7px;
}

.dnx-inner-page::-webkit-scrollbar-track {
    background: rgba(0, 50, 120, 0.03);
}

.dnx-inner-page::-webkit-scrollbar-thumb {
    background: rgba(0, 140, 255, 0.25);
    border-radius: 10px;
}

.dnx-inner-page::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 140, 255, 0.45);
}

.dnx-inner-header {
    margin-bottom: clamp(24px, 3vh, 36px);
    max-width: 880px;
    animation: dnxFadeInUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dnx-inner-title {
    font-family: var(--dnx-font-main);
    font-size: clamp(1.9rem, 2.5vw + 1vh, 2.75rem);
    font-weight: 800;
    color: var(--dnx-navy-title);
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-top: 8px;
    margin-bottom: 12px;
}

.dnx-inner-subtitle {
    font-size: clamp(0.95rem, 0.8vw + 0.6vh, 1.1rem);
    line-height: 1.55;
    color: #4b5e76;
    margin-bottom: 0;
}

/* Service & Card Grids */
.dnx-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: clamp(16px, 1.6vw, 24px);
    margin-bottom: 32px;
}

.dnx-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: clamp(18px, 1.8vw, 28px);
    margin-bottom: 32px;
}

/* Glass & Card Design */
.dnx-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(215, 232, 250, 0.9);
    box-shadow: 0 10px 30px rgba(8, 28, 71, 0.05), 0 2px 6px rgba(0, 140, 255, 0.03);
    padding: clamp(20px, 2.4vh, 28px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dnx-service-card-body {
    position: relative;
    z-index: 2;
    background: #ffffff;
}

.dnx-card:hover {
    border-color: rgba(0, 140, 255, 0.45);
    box-shadow: 0 16px 40px rgba(0, 100, 220, 0.12), 0 0 16px rgba(0, 200, 255, 0.15);
}

.dnx-solution-card {
    padding: 0;
}

.dnx-solution-image-wrap {
    height: clamp(150px, 17vw, 210px);
    overflow: hidden;
    background: #ffffff;
    position: relative;
    isolation: isolate;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}

.dnx-solution-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.dnx-solution-card:hover .dnx-solution-image-wrap img {
    transform: scale(1.04);
}

.dnx-solution-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(20px, 2.4vh, 28px);
}

.dnx-industry-card {
    padding: 0;
}

.dnx-industry-image-wrap {
    height: clamp(145px, 14vw, 185px);
    overflow: hidden;
    background: #ffffff;
    position: relative;
    isolation: isolate;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}

.dnx-industry-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.dnx-industry-card:hover .dnx-industry-image-wrap img {
    transform: scale(1.04);
}

.dnx-industry-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(20px, 2.4vh, 28px);
}

.dnx-card-icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 140, 255, 0.12), rgba(0, 210, 255, 0.06));
    border: 1px solid rgba(0, 140, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 1.55rem;
    color: #0077ff;
    flex-shrink: 0;
}

.dnx-card-title {
    font-family: var(--dnx-font-main);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dnx-navy-title);
    margin-bottom: 8px;
    line-height: 1.3;
}

.dnx-card-text {
    font-size: 0.88rem;
    line-height: 1.52;
    color: #4b5e76;
    margin-bottom: 16px;
    flex-grow: 1;
}

.dnx-card-bullets {
    list-style: none;
    padding-left: 0;
    margin-bottom: 18px;
}

.dnx-card-bullets li {
    font-size: 0.84rem;
    color: #334e68;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dnx-card-bullets li::before {
    content: "✓";
    color: #0088ff;
    font-weight: 800;
    font-size: 0.85rem;
}

.dnx-card-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #0066ee;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: auto;
}

.dnx-card-footer-link:hover {
    color: #0044bb;
    transform: translateX(3px);
}

@media (max-width: 991.98px) {
    .dnx-view-index {
        overflow: visible;
    }

    .dnx-view-index .dnx-app-wrapper {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    .dnx-view-index .dnx-main-content {
        flex: 1 1 auto;
        height: auto;
        min-height: calc(100vh - 60px);
        min-height: calc(100dvh - 60px);
        overflow: visible;
    }

    .dnx-view-index .dnx-page-container {
        min-height: calc(100vh - 60px);
        min-height: calc(100dvh - 60px);
        height: auto;
        padding: 24px 20px 16px;
        gap: 24px;
    }

    .dnx-view-index .dnx-hero-section {
        flex: 0 0 auto;
        width: 100%;
        display: block;
    }

    .dnx-view-index .dnx-hero-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        width: 100%;
        height: auto;
    }

    .dnx-view-index .dnx-hero-content {
        order: 1;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .dnx-view-index .dnx-hero-visual-wrapper {
        position: relative;
        inset: auto;
        order: 2;
        width: 100%;
        max-width: 380px;
        height: clamp(210px, 32vh, 260px);
        margin: 12px auto 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .dnx-view-index .dnx-hero-visual,
    .dnx-view-index #hero-container {
        position: relative;
        width: 100%;
        height: 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .dnx-view-index #sceneCanvas {
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: auto;
        cursor: grab;
        touch-action: pan-y;
    }

    .dnx-view-index #sceneCanvas:active {
        cursor: grabbing;
    }

    .dnx-view-index .dnx-features-section {
        display: none;
    }

    .dnx-view-industries .dnx-inner-page-content {
        padding: 20px 16px 0;
    }

    .dnx-view-industries .dnx-grid-3 {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-bottom: 24px;
    }

    .dnx-view-industries .dnx-industry-card {
        width: 100%;
        min-width: 0;
    }

    .dnx-view-industries .dnx-industry-image-wrap {
        height: clamp(150px, 45vw, 220px);
    }

    .dnx-view-industries .dnx-industry-card-content {
        min-width: 0;
        padding: 18px;
    }

    .dnx-view-industries .dnx-card-title,
    .dnx-view-industries .dnx-card-text,
    .dnx-view-industries .dnx-card-bullets li {
        overflow-wrap: anywhere;
    }

    .dnx-view-industries .dnx-card-bullets li {
        align-items: flex-start;
        line-height: 1.45;
    }

    .dnx-view-industries .dnx-banner-box {
        padding: 20px 18px;
    }

    .dnx-view-solutions .dnx-inner-page-content {
        padding: 22px 18px 0;
    }

    .dnx-view-solutions .dnx-grid-2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        margin-bottom: 24px;
    }

    .dnx-view-solutions .dnx-solution-card {
        min-width: 0;
        width: 100%;
    }

    .dnx-view-solutions .dnx-solution-image-wrap {
        height: clamp(150px, 42vw, 230px);
    }

    .dnx-view-solutions .dnx-solution-card-content {
        min-width: 0;
        padding: 18px;
    }

    .dnx-view-solutions .dnx-card-title {
        font-size: 1.08rem;
        overflow-wrap: anywhere;
    }

    .dnx-view-solutions .dnx-card-bullets li {
        align-items: flex-start;
        line-height: 1.45;
    }
}

/* ==========================================================================
   SERVICES SHOWCASE CARDS (With Applied Images, Fade In Up Animation & Hover Glow)
   ========================================================================== */
@keyframes dnxFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(28px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.dnx-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: clamp(20px, 2.2vw, 28px);
    margin-bottom: clamp(32px, 4vh, 48px);
}

.dnx-service-card-item {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(215, 232, 250, 0.95);
    box-shadow: 0 10px 30px rgba(8, 28, 71, 0.06), 0 2px 8px rgba(0, 140, 255, 0.03);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   SCROLL-TRIGGERED ENTRANCE ANIMATIONS (Ultra-Lightweight & Smooth)
   Fade in from bottom to up, left to right, and right to left while scrolling
   ========================================================================== */
.dnx-scroll-fade,
.dnx-scroll-up,
.dnx-scroll-left,
.dnx-scroll-right {
    opacity: 0;
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fade in from bottom to up */
.dnx-scroll-up {
    transform: translate3d(0, 52px, 0);
}

/* Fade in from left to right */
.dnx-scroll-left {
    transform: translate3d(-56px, 0, 0);
}

/* Fade in from right to left */
.dnx-scroll-right {
    transform: translate3d(56px, 0, 0);
}

/* Subtle neutral fade */
.dnx-scroll-fade {
    transform: translate3d(0, 0, 0);
}

/* Activated in-view state when scrolled into view */
.dnx-scroll-fade.dnx-in-view,
.dnx-scroll-up.dnx-in-view,
.dnx-scroll-left.dnx-in-view,
.dnx-scroll-right.dnx-in-view {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

/* Initial visible elements show instantly with zero delay, freeze or lag */
.dnx-no-delay,
.dnx-in-view.dnx-no-delay {
    transition: none !important;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

@media (prefers-reduced-motion: reduce) {
    .dnx-scroll-fade,
    .dnx-scroll-up,
    .dnx-scroll-left,
    .dnx-scroll-right {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
}

/* Hover elevation active after element has scrolled into view */
.dnx-service-card-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0077ff, #00d4ff);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 3;
}

.dnx-service-card-item:hover {
    border-color: rgba(0, 140, 255, 0.50);
    box-shadow: 0 20px 48px rgba(0, 100, 220, 0.14), 0 0 18px rgba(0, 200, 255, 0.16);
}

.dnx-service-card-item:hover::before {
    opacity: 1;
}

.dnx-service-img-wrapper {
    width: 100%;
    height: 195px;
    overflow: hidden;
    background: #ffffff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 0;
    isolation: isolate;
}

.dnx-service-img-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 64%, rgba(255, 255, 255, 0.22) 78%, rgba(255, 255, 255, 0.72) 93%, #ffffff 100%);
    pointer-events: none;
    z-index: 1;
}

.dnx-service-img-wrapper img,
.dnx-service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: block;
    position: relative;
    z-index: 0;
}

.dnx-service-card-item:hover .dnx-service-img-wrapper img,
.dnx-service-card-item:hover .dnx-service-img {
    transform: scale(1.03);
}

.dnx-service-placeholder-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 153, 255, 0.22);
    box-shadow: 0 8px 24px rgba(0, 120, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0077ff;
    transition: transform 0.3s ease;
}

.dnx-service-card-item:hover .dnx-service-placeholder-icon {
    transform: scale(1.1);
    color: #00d4ff;
    box-shadow: 0 10px 28px rgba(0, 212, 255, 0.25);
}

.dnx-service-card-body {
    padding: clamp(20px, 2.4vh, 26px);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    position: relative;
    z-index: 2;
    background: #ffffff;
}

.dnx-service-card-title {
    font-family: var(--dnx-font-main);
    font-size: clamp(1.1rem, 1.3vw, 1.25rem);
    font-weight: 800;
    color: var(--dnx-navy-title);
    margin-bottom: 8px;
    line-height: 1.3;
}

.dnx-service-card-title a {
    color: var(--dnx-navy-title);
    text-decoration: none;
    transition: color 0.2s ease;
}

.dnx-service-card-title a:hover {
    color: #0077ff;
}

.dnx-service-card-dash {
    width: 32px;
    height: 3px;
    background: linear-gradient(90deg, #0077ff, #00d4ff);
    border-radius: 2px;
    margin-bottom: 12px;
}

.dnx-service-card-desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #33445d;
    margin-bottom: 20px;
    flex: 1 1 auto;
    font-weight: 500;
    text-shadow: none;
}

.dnx-service-readmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 700;
    color: #0077ff;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(0, 119, 255, 0.06);
    border: 1px solid rgba(0, 119, 255, 0.15);
    width: fit-content;
    transition: all 0.25s ease;
    margin-top: auto;
}

.dnx-service-readmore-btn:hover {
    background: linear-gradient(90deg, #0077ff, #00caff);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(0, 119, 255, 0.28);
    transform: translateX(4px);
}

.dnx-service-readmore-btn svg {
    transition: transform 0.2s ease;
}

.dnx-service-readmore-btn:hover svg {
    transform: translateX(3px);
}

/* Callout / Banner Section */
.dnx-banner-box {
    background: linear-gradient(135deg, #02204a 0%, #06397d 60%, #032b62 100%);
    border-radius: 20px;
    padding: clamp(24px, 3vh, 36px) clamp(24px, 3vw, 44px);
    color: #ffffff;
    box-shadow: 0 16px 45px rgba(2, 32, 74, 0.2);
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 32px;
}

.dnx-banner-box::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 180, 255, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.dnx-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.dnx-stat-box {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(215, 232, 250, 0.9);
    padding: 20px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(8, 28, 71, 0.04);
}

.dnx-stat-value {
    font-family: var(--dnx-font-main);
    font-size: 2.2rem;
    font-weight: 800;
    color: #0066ee;
    line-height: 1.1;
    margin-bottom: 4px;
}

.dnx-stat-label {
    font-size: 0.82rem;
    color: #4b5e76;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Contact Details & Form */
.dnx-contact-container {
    max-width: 1420px;
    margin: 0 auto;
}

.dnx-contact-form-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 2% 20%, rgba(0, 202, 255, 0.14), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(226, 242, 255, 0.92));
    border-radius: 26px;
    border: 1px solid rgba(90, 177, 255, 0.62);
    padding: clamp(24px, 3vw, 38px);
    box-shadow: 0 18px 48px rgba(0, 83, 171, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dnx-contact-form-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #00caff, #0067f5 72%, transparent);
}

.dnx-contact-form-card::after {
    content: '';
    position: absolute;
    right: -76px;
    bottom: -96px;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(0, 136, 255, 0.14);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(0, 136, 255, 0.035), 0 0 0 38px rgba(0, 136, 255, 0.025);
    pointer-events: none;
}

.dnx-contact-form-heading {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(0, 112, 220, 0.2);
    position: relative;
    z-index: 1;
}

.dnx-contact-form-emblem {
    width: clamp(76px, 8vw, 120px);
    height: clamp(76px, 8vw, 120px);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: radial-gradient(circle at 35% 28%, #23d9ff, #0074ed 48%, #032a70 82%);
    border: 7px solid rgba(255, 255, 255, 0.78);
    box-shadow: 0 0 0 1px rgba(0, 165, 255, 0.55), 0 0 0 9px rgba(0, 175, 255, 0.11), 0 12px 28px rgba(0, 89, 190, 0.25);
}

.dnx-contact-form-emblem svg {
    width: 54%;
    height: 54%;
}

.dnx-contact-form-heading-copy {
    min-width: 0;
}

.dnx-contact-info-card {
    position: relative;
    padding: clamp(20px, 2.4vw, 34px) clamp(8px, 1.4vw, 20px);
    isolation: isolate;
}

.dnx-contact-info-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 4% -4% 5% 12%;
    background: radial-gradient(ellipse at 85% 20%, rgba(0, 181, 255, 0.18), transparent 56%);
    pointer-events: none;
}

.dnx-contact-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--dnx-blue-accent);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dnx-contact-title {
    font-family: var(--dnx-font-main);
    color: var(--dnx-navy-title);
    font-size: clamp(2.15rem, 3.2vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 8px;
}

.dnx-contact-form-heading .dnx-contact-title {
    font-size: clamp(2rem, 3vw, 2.8rem);
    margin-bottom: 6px;
}

.dnx-contact-info-title span {
    color: #075de0;
}

.dnx-contact-title-accent {
    width: 78px;
    height: 5px;
    margin-bottom: 20px;
    border-radius: 99px;
    background: linear-gradient(90deg, #075de0, #00caff);
    box-shadow: 0 0 14px rgba(0, 172, 255, 0.35);
}

.dnx-contact-form-subtitle {
    margin: 0;
    color: #425875;
    font-size: 0.96rem;
    line-height: 1.5;
}

.dnx-contact-intro {
    font-family: var(--dnx-font-main);
    color: var(--dnx-text-body);
    font-size: 0.9rem;
    line-height: 1.75;
    margin-bottom: 14px;
}

.dnx-contact-form-card .dnx-form-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.76);
    border: 1.5px solid rgba(107, 177, 255, 0.58);
    border-radius: 18px;
    padding: 15px 16px;
    font-family: var(--dnx-font-main);
    font-size: 0.95rem;
    color: #1e3a5f;
    box-sizing: border-box;
    display: block;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.dnx-contact-form-card .dnx-form-input:hover:not(:focus) {
    border-color: #9cc9f7;
}

.dnx-contact-input-wrapper {
    position: relative;
}

.dnx-contact-input-wrapper .dnx-form-input {
    padding-left: 46px;
}

.dnx-contact-field-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    fill: none;
    stroke: #7d94b2;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: stroke 0.2s ease;
}

.dnx-contact-input-wrapper:focus-within .dnx-contact-field-icon {
    stroke: var(--dnx-blue-accent);
}

.dnx-contact-textarea-wrapper .dnx-contact-field-icon {
    top: 17px;
    transform: none;
}

.dnx-contact-textarea-wrapper .dnx-form-input {
    padding-top: 14px;
}

.dnx-contact-form-card textarea.dnx-form-input {
    min-height: 140px;
    resize: vertical;
}

.dnx-contact-form-card .dnx-form-input::placeholder {
    color: #64748b;
    opacity: 1;
}

.dnx-contact-form-card .dnx-form-input:focus {
    background: #ffffff;
    border-color: #0088ff;
    box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.12);
    outline: none;
}

.dnx-contact-form-card .dnx-btn-primary {
    border-radius: 999px;
    font-family: var(--dnx-font-main);
    font-size: 0.9rem;
    min-width: 153px;
    padding: 12px 28px !important;
    box-shadow: 0 8px 22px rgba(0, 100, 240, 0.32), 0 2px 8px rgba(0, 200, 255, 0.28);
    position: relative;
    z-index: 1;
}

.dnx-contact-form-card .dnx-btn-primary::after {
    display: none;
}

.dnx-interactive-channel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0.96), rgba(230, 245, 255, 0.9));
    border: 1px solid rgba(129, 199, 255, 0.7);
    border-radius: 20px;
    padding: 14px 104px 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    margin-bottom: 14px;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    color: inherit;
    box-shadow: 0 8px 22px rgba(0, 83, 171, 0.08), inset 0 0 16px rgba(255, 255, 255, 0.75);
}

.dnx-interactive-channel:hover {
    background: linear-gradient(105deg, #ffffff, #e8f6ff);
    border-color: #0088ff;
    box-shadow: 0 10px 26px rgba(0, 120, 255, 0.16), inset 0 0 18px rgba(255, 255, 255, 0.8);
    color: inherit;
}

.dnx-channel-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #27dfff, #0075e8 50%, #06327c);
    color: #ffffff;
    box-shadow: 0 0 0 5px rgba(0, 174, 255, 0.12), 0 5px 14px rgba(0, 103, 210, 0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.dnx-interactive-channel:hover .dnx-channel-icon-box {
    transform: scale(1.08);
}

.dnx-channel-meta {
    flex: 1;
    min-width: 0;
}

.dnx-channel-label {
    font-family: var(--dnx-font-main);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #4a678a;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.dnx-channel-main {
    font-family: var(--dnx-font-main);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--dnx-navy-title);
    line-height: 1.5;
    word-break: break-word;
}

.dnx-channel-art {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 88px;
    opacity: 0.86;
    background: linear-gradient(120deg, transparent 0 27%, rgba(0, 158, 255, 0.2) 28% 35%, transparent 36%), linear-gradient(135deg, #1edbff, #0063df 58%, #062d75);
    clip-path: polygon(44% 0, 100% 0, 100% 100%, 0 100%, 35% 52%);
    pointer-events: none;
}

.dnx-channel-art::before,
.dnx-channel-art::after {
    content: '';
    position: absolute;
    right: 16px;
    width: 38px;
    height: 1px;
    background: rgba(166, 236, 255, 0.75);
    box-shadow: 0 0 9px rgba(0, 222, 255, 0.8);
}

.dnx-channel-art::before {
    top: 32%;
    transform: rotate(-20deg);
}

.dnx-channel-art::after {
    top: 66%;
    transform: rotate(20deg);
}

.dnx-contact-info-card .dnx-interactive-channel > *:not(.dnx-channel-art) {
    position: relative;
    z-index: 1;
}

/* Ensure inner page kicker bar aligns to the left on all screen sizes */
.dnx-inner-page .dnx-kicker-bar {
    margin-left: 0 !important;
    margin-right: auto !important;
}

@media (max-width: 991.98px) {
    .dnx-contact-form-card {
        padding: 20px 18px;
    }

    .dnx-contact-info-card {
        padding: 8px 0;
    }

    .dnx-contact-container > .row {
        align-items: stretch;
    }
}

@media (max-width: 576px) {
    .dnx-contact-form-card .dnx-form-input {
        font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
    }

    .dnx-contact-form-card {
        padding: 18px 16px;
        border-radius: 18px;
    }

    .dnx-contact-form-heading {
        gap: 12px;
        padding-bottom: 16px;
        margin-bottom: 18px;
    }

    .dnx-contact-form-emblem {
        width: 58px;
        height: 58px;
        border-width: 4px;
        box-shadow: 0 0 0 1px rgba(0, 165, 255, 0.45), 0 0 0 5px rgba(0, 175, 255, 0.1), 0 8px 18px rgba(0, 89, 190, 0.18);
    }

    .dnx-contact-eyebrow {
        font-size: 0.66rem;
        margin-bottom: 5px;
    }

    .dnx-contact-form-heading .dnx-contact-title {
        font-size: 1.65rem;
        margin-bottom: 4px;
    }

    .dnx-contact-form-subtitle {
        font-size: 0.8rem;
    }

    .dnx-contact-info-card {
        padding: 4px 0;
    }

    .dnx-contact-info-title {
        font-size: 2rem;
    }

    .dnx-contact-intro {
        font-size: 0.88rem;
    }

    .dnx-interactive-channel {
        padding: 12px 78px 12px 12px;
        gap: 12px;
        min-height: 68px;
        border-radius: 16px;
    }

    .dnx-channel-icon-box {
        width: 40px;
        height: 40px;
    }

    .dnx-channel-art {
        width: 66px;
    }

    .dnx-channel-main {
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   ABOUT PAGE & DIRECTORY FOOTER STYLES
   ========================================================================== */

/* Breadcrumb Navigation */
.dnx-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    margin-top: clamp(6px, 1.2vh, 14px);
    margin-bottom: clamp(24px, 3.8vh, 38px) !important;
}

.dnx-breadcrumb a {
    color: #0077ff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.dnx-breadcrumb a:hover {
    color: #0044aa;
    text-decoration: underline;
}

.dnx-breadcrumb-sep {
    color: #94a3b8;
    font-size: 0.8rem;
}

.dnx-breadcrumb-current {
    color: #475569;
}

/* About Hero Two-Column Grid */
.dnx-about-hero-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.4fr) minmax(280px, 1fr);
    gap: clamp(20px, 3vw, 42px);
    align-items: center;
    margin-bottom: clamp(28px, 3.8vh, 46px);
}

.dnx-about-hero-img-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 248, 255, 0.95));
    border-radius: 24px;
    border: 1px solid rgba(210, 230, 252, 0.95);
    box-shadow: 0 16px 40px rgba(2, 38, 100, 0.10), 0 4px 12px rgba(0, 160, 255, 0.08);
    overflow: hidden;
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dnx-about-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.dnx-about-hero-img-box:hover .dnx-about-hero-img {
    transform: scale(1.04);
}

.dnx-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 140, 255, 0.08);
    border: 1px solid rgba(0, 140, 255, 0.22);
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0066ee;
    margin-top: 10px;
    margin-right: 8px;
}

/* Value Pillar Highlight Cards */
.dnx-about-highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(16px, 2vw, 26px);
    margin-bottom: 36px;
}

.dnx-about-feature-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(215, 232, 250, 0.95);
    padding: clamp(22px, 2.8vh, 32px);
    box-shadow: 0 10px 30px rgba(8, 28, 71, 0.06), 0 2px 8px rgba(0, 140, 255, 0.03);
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.dnx-about-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0088ff, #00d4ff);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.dnx-about-feature-card:hover {
    border-color: rgba(0, 140, 255, 0.5);
    box-shadow: 0 18px 44px rgba(0, 100, 220, 0.12), 0 0 18px rgba(0, 200, 255, 0.12);
}

.dnx-about-feature-card:hover::before {
    opacity: 1;
}

.dnx-about-feature-badge {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(235, 246, 255, 0.95), rgba(245, 251, 255, 0.98));
    border: 1px solid rgba(185, 220, 255, 0.85);
    box-shadow: 0 4px 14px rgba(0, 120, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    padding: 9px;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.dnx-about-feature-card:hover .dnx-about-feature-badge {
    transform: scale(1.08);
}

.dnx-about-feature-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 120, 255, 0.2));
}

.dnx-about-feature-title {
    font-family: var(--dnx-font-main);
    font-size: clamp(1.1rem, 1.4vw, 1.25rem);
    font-weight: 800;
    color: var(--dnx-navy-title);
    margin-bottom: 8px;
    line-height: 1.3;
}

.dnx-about-feature-dash {
    width: 32px;
    height: 3px;
    background: linear-gradient(90deg, #0088ff, #00d4ff);
    border-radius: 2px;
    margin-bottom: 12px;
}

.dnx-about-feature-desc {
    font-size: 0.90rem;
    line-height: 1.58;
    color: #4b5e76;
    margin: 0;
    font-weight: 500;
}

@media (max-width: 991px) {
    .dnx-about-hero-grid {
        grid-template-columns: 1fr;
    }

    .dnx-about-hero-img-box {
        max-height: 280px;
        margin: 0 auto;
        width: 100%;
        max-width: 360px;
    }
}

/* Mission & Vision Showcase */
.dnx-mv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(16px, 2vw, 26px);
    margin-bottom: 36px;
}

.dnx-mv-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(210, 230, 252, 0.90);
    padding: clamp(24px, 3vh, 32px);
    box-shadow: 0 12px 32px rgba(2, 38, 100, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.dnx-mv-card:hover {
    box-shadow: 0 18px 40px rgba(0, 100, 240, 0.12);
}

.dnx-mv-card.mission {
    border-left: 6px solid #0077ff;
}

.dnx-mv-card.vision {
    border-left: 6px solid #00c8ff;
}

.dnx-mv-tag {
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 10px;
}

.dnx-mv-card.mission .dnx-mv-tag {
    color: #0077ff;
}

.dnx-mv-card.vision .dnx-mv-tag {
    color: #00a4d8;
}

.dnx-mv-quote {
    font-family: var(--dnx-font-main);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    font-weight: 700;
    line-height: 1.45;
    color: var(--dnx-navy-title);
    margin-bottom: 12px;
}

.dnx-mv-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #4b5e76;
    margin: 0;
}

/* Mission & Vision Showcase Banners (Aligned to DNX Brand Theme with Asymmetric Heights) */
.dnx-showcase-banner {
    position: relative;
    width: 100%;
    min-height: 400px;
    background:
        radial-gradient(circle at 90% 20%, rgba(0, 202, 255, 0.06) 0%, transparent 60%),
        radial-gradient(circle at 10% 80%, rgba(0, 119, 255, 0.04) 0%, transparent 55%),
        #ffffff;
    border-radius: 26px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: clamp(32px, 4vh, 46px) clamp(26px, 3.8vw, 54px);
    border: 1px solid rgba(210, 232, 252, 0.95);
    box-shadow:
        0 16px 42px rgba(8, 28, 71, 0.07),
        0 4px 12px rgba(0, 140, 255, 0.03);
    margin-bottom: clamp(28px, 4vh, 40px);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.dnx-showcase-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0077ff, #00d4ff);
    z-index: 4;
}

.dnx-showcase-banner.vision::before {
    background: linear-gradient(90deg, #00caff, #0077ff);
}

.dnx-showcase-banner:hover {
    box-shadow:
        0 22px 54px rgba(8, 28, 71, 0.10),
        0 6px 18px rgba(0, 140, 255, 0.06);
}

.dnx-circuit-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.70;
    z-index: 1;
}

.dnx-showcase-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(320px, 1.15fr) minmax(320px, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
    width: 100%;
}

.dnx-showcase-text-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: clamp(14px, 3vw, 44px);
}

.dnx-showcase-heading {
    font-family: var(--dnx-font-main);
    font-size: clamp(2.3rem, 3.6vw, 3.1rem);
    font-weight: 850;
    color: var(--dnx-navy-title);
    letter-spacing: -0.02em;
    margin: 0 0 10px 0;
    line-height: 1.05;
}

.dnx-showcase-dash {
    width: 44px;
    height: 3.5px;
    background: linear-gradient(90deg, #0077ff, #00d4ff);
    border-radius: 2px;
    margin-bottom: 20px;
}

.dnx-showcase-banner.vision .dnx-showcase-dash {
    background: linear-gradient(90deg, #00caff, #0077ff);
}

.dnx-showcase-card {
    background: linear-gradient(135deg, rgba(244, 249, 255, 0.95), rgba(250, 253, 255, 0.98));
    border-radius: 16px;
    padding: clamp(18px, 2.4vh, 26px) clamp(22px, 2.8vw, 32px);
    box-shadow: 0 8px 24px rgba(8, 28, 71, 0.05);
    border: 1px solid rgba(205, 230, 255, 0.95);
    border-left: 4.5px solid #0088ff;
    max-width: 460px;
    position: relative;
}

.dnx-showcase-banner.vision .dnx-showcase-card {
    border-left-color: #00caff;
}

.dnx-showcase-quote {
    font-size: clamp(0.98rem, 1.2vw, 1.1rem);
    font-weight: 600;
    line-height: 1.6;
    color: #1e293b;
    margin: 0;
    text-align: left;
}

/* Circuit Node Icon Badge on left */
.dnx-circuit-node {
    position: absolute;
    left: clamp(16px, 2.2vw, 32px);
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #00caff;
    box-shadow: 0 0 18px rgba(0, 202, 255, 0.40), 0 4px 12px rgba(8, 28, 71, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.dnx-circuit-node.cyan {
    border-color: #0077ff;
    box-shadow: 0 0 18px rgba(0, 119, 255, 0.40), 0 4px 12px rgba(8, 28, 71, 0.08);
}

.dnx-circuit-node svg {
    width: 22px;
    height: 22px;
    color: #0077ff;
}

.dnx-circuit-node.cyan svg {
    color: #0096ff;
}

/* Right side: Accent circle + Dual rounded images with Asymmetric Heights */
.dnx-showcase-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(340px, 36vh, 390px);
    width: 100%;
}

.dnx-accent-circle {
    position: absolute;
    width: clamp(260px, 26vw, 315px);
    height: clamp(260px, 26vw, 315px);
    border-radius: 50%;
    background: #d4ff00;
    box-shadow: 0 0 50px rgba(212, 255, 0, 0.35);
    z-index: 1;
    left: 46%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dnx-accent-circle.cyan {
    background: #00e5ff;
    box-shadow: 0 0 50px rgba(0, 229, 255, 0.35);
}

.dnx-dual-images {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.8vw, 22px);
}

/* Left standard-height image box */
.dnx-dual-img-box {
    width: clamp(160px, 16vw, 210px);
    height: clamp(160px, 16vw, 210px);
    border-radius: 22px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(8, 28, 71, 0.18);
    border: 4px solid #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

/* Right taller-height image box: "make the other image more height like this one" */
.dnx-dual-img-box.dnx-dual-img-tall,
.dnx-dual-img-box:last-child {
    width: clamp(160px, 16vw, 210px);
    height: clamp(280px, 29vh, 340px);
    border-radius: 24px;
    box-shadow: 0 20px 48px rgba(8, 28, 71, 0.22);
}

.dnx-dual-img-box:hover {
    box-shadow: 0 24px 50px rgba(8, 28, 71, 0.26);
}

.dnx-dual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 991px) {
    .dnx-showcase-banner {
        padding: 30px 20px;
        min-height: auto;
    }

    .dnx-showcase-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 26px;
    }

    .dnx-showcase-text-col {
        align-items: center;
        padding-left: 0;
    }

    .dnx-showcase-dash {
        margin-left: auto;
        margin-right: auto;
    }

    .dnx-showcase-card {
        text-align: center;
        border-left: 1px solid rgba(205, 230, 255, 0.95);
        border-top: 4px solid #0088ff;
    }

    .dnx-showcase-banner.vision .dnx-showcase-card {
        border-top-color: #00caff;
    }

    .dnx-showcase-quote {
        text-align: center;
    }

    .dnx-showcase-visual {
        height: 290px;
    }

    .dnx-accent-circle {
        width: 230px;
        height: 230px;
    }

    .dnx-dual-img-box {
        width: 140px;
        height: 140px;
        border-radius: 18px;
    }

    .dnx-dual-img-box.dnx-dual-img-tall,
    .dnx-dual-img-box:last-child {
        width: 140px;
        height: 235px;
        border-radius: 20px;
    }

    .dnx-circuit-node {
        display: none;
    }
}

@media (max-width: 576px) {
    .dnx-showcase-visual {
        height: 250px;
    }

    .dnx-accent-circle {
        width: 200px;
        height: 200px;
    }

    .dnx-dual-images {
        gap: 12px;
    }

    .dnx-dual-img-box {
        width: 120px;
        height: 120px;
        border-radius: 16px;
        border-width: 3px;
    }

    .dnx-dual-img-box.dnx-dual-img-tall,
    .dnx-dual-img-box:last-child {
        width: 120px;
        height: 200px;
        border-radius: 18px;
        border-width: 3px;
    }
}

/* Bottom Directory / Sitemap Footer (Theme-Aligned with footerbg.webp - Max at Side & Max at Bottom) */
.dnx-directory-footer {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    background: #01153e url('/images/footerbg.webp') no-repeat center bottom;
    background-size: cover;
    border-radius: 0;
    /* Max at side and bottom (flush edges) */
    border-top: 1px solid rgba(0, 195, 255, 0.32);
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: clamp(28px, 3.5vh, 40px) clamp(24px, 3.5vw, 54px) clamp(24px, 3vh, 32px);
    box-shadow: 0 -12px 36px rgba(0, 15, 45, 0.25);
    margin-top: clamp(36px, 5vh, 52px);
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    color: #cbd5e1;
    overflow: hidden;
    box-sizing: border-box;
}

/* Subtle glass overlay that keeps text legible while letting glowing cyan waves shine through */
.dnx-directory-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(1, 21, 62, 0.48) 0%, rgba(1, 21, 62, 0.08) 55%, rgba(1, 21, 62, 0.22) 100%);
    pointer-events: none;
    z-index: 1;
}

.dnx-directory-grid,
.dnx-directory-bottom {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.dnx-directory-grid {
    display: grid;
    grid-template-columns: minmax(140px, 180px) minmax(180px, 220px) minmax(280px, 1fr);
    gap: clamp(16px, 2.5vw, 32px);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.dnx-directory-col h5 {
    font-family: var(--dnx-font-main);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 6px;
    position: relative;
}

.dnx-directory-col h5::after {
    content: '';
    display: block;
    width: 28px;
    height: 3px;
    background: linear-gradient(90deg, #00d2ff, #0077ff);
    border-radius: 2px;
    margin-top: 6px;
    margin-bottom: 12px;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.65);
}

.dnx-directory-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dnx-directory-list li {
    margin-bottom: 5px;
}

/* Compact 2-column grid for lists */
.dnx-directory-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 5px 16px;
}

.dnx-directory-list a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.38;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dnx-directory-list a:hover {
    color: #00e5ff;
    transform: translateX(3px);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

.dnx-directory-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.80rem;
    color: #94a3b8;
    padding-top: 6px;
    width: 100%;
}

.dnx-directory-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 12px;
}

.dnx-legal-links {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
}

.dnx-legal-links a {
    color: #38bdf8;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.dnx-legal-links a:hover {
    color: #00e5ff;
    text-decoration: underline;
}

.dnx-dot-sep {
    color: rgba(255, 255, 255, 0.3);
}

.dnx-footer-copyright {
    color: #94a3b8;
    font-size: 0.78rem;
    text-align: center;
    white-space: nowrap;
}

.dnx-footer-facebook {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: #94a3b8;
    white-space: nowrap;
}

.dnx-social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #38bdf8;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.dnx-social-link svg {
    color: #38bdf8;
    transition: transform 0.2s ease;
}

.dnx-social-link:hover {
    color: #00e5ff;
}

.dnx-social-link:hover svg {
    transform: scale(1.1);
}

@media (max-width: 991.98px) {
    .dnx-directory-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .dnx-directory-grid-2col {
        grid-template-columns: 1fr 1fr;
    }

    .dnx-directory-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    .dnx-directory-bottom-row {
        justify-content: center;
        gap: 10px;
    }

    .dnx-legal-links,
    .dnx-footer-copyright,
    .dnx-footer-facebook {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .dnx-directory-grid-2col {
        grid-template-columns: 1fr 1fr;
        gap: 4px 10px;
    }

    .dnx-directory-list a {
        font-size: 0.76rem;
    }
}

/* ==========================================================================
   DNX SOFTWARE DEVELOPMENT & DETAIL PAGE STYLES
   ========================================================================== */

/* Breadcrumbs Navigation */
.dnx-breadcrumb-nav {
    margin-bottom: clamp(14px, 2vh, 22px);
}

.dnx-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.88rem;
    font-weight: 500;
}

.dnx-breadcrumb-item a {
    color: var(--dnx-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.dnx-breadcrumb-item a:hover {
    color: var(--dnx-primary-blue);
    text-decoration: underline;
}

.dnx-breadcrumb-sep {
    color: #a0aec0;
    font-size: 1rem;
    user-select: none;
}

.dnx-breadcrumb-item.active {
    color: var(--dnx-navy-title);
    font-weight: 600;
}

/* Service Detail Hero Card */
.dnx-detail-hero-card {
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(210, 230, 252, 0.90);
    box-shadow: 0 18px 48px rgba(2, 38, 100, 0.08);
    padding: clamp(24px, 3.5vw, 42px);
    margin-bottom: clamp(32px, 5vh, 56px);
}

.dnx-detail-lead-title {
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 700;
    color: var(--dnx-navy-title);
    line-height: 1.25;
}

.dnx-detail-lead-desc {
    color: var(--dnx-text-body);
    font-size: 1.02rem;
    line-height: 1.6;
    margin-top: 10px;
    margin-bottom: 20px;
}

.dnx-detail-lead-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dnx-detail-lead-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--dnx-navy-title);
}

.dnx-detail-hero-media {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 18px;
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(0, 202, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
}

.dnx-detail-hero-img {
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(0, 30, 80, 0.12);
}

.dnx-detail-media-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(0, 180, 255, 0.15);
}

/* Refined, Compact Portfolio Showcase Cards */
.dnx-portfolio-overview-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(210, 230, 252, 0.90);
    box-shadow: 0 12px 36px rgba(2, 38, 100, 0.06), 0 2px 8px rgba(0, 140, 255, 0.03);
    padding: clamp(20px, 2.5vw, 32px);
    margin-bottom: clamp(28px, 4.5vh, 44px);
    max-width: 1060px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dnx-portfolio-overview-card:hover {
    box-shadow: 0 18px 45px rgba(2, 38, 100, 0.09), 0 0 20px rgba(0, 180, 255, 0.10);
}

.dnx-portfolio-overview-card .dnx-detail-hero-media {
    max-width: 460px;
    margin: 0 auto;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 40, 110, 0.10);
    overflow: hidden;
}

.dnx-portfolio-overview-card .dnx-detail-hero-img {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

.dnx-portfolio-lead-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0070ea;
    background: linear-gradient(135deg, rgba(0, 140, 255, 0.09), rgba(0, 210, 255, 0.04));
    border: 1px solid rgba(0, 140, 255, 0.20);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.dnx-portfolio-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #214168;
    background: #f3f8fe;
    border: 1px solid rgba(195, 220, 250, 0.85);
    padding: 5px 12px;
    border-radius: 8px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.dnx-portfolio-tag-pill:hover {
    background: #e7f2fd;
    transform: translateY(-1px);
}

/* ==========================================================================
   BLOG, CATEGORY & FIELD NOTES ARTICLE STYLING
   ========================================================================== */
.dnx-code-kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0077ee;
    letter-spacing: 0.05em;
    display: inline-block;
    margin-bottom: 8px;
}

.dnx-blog-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 992px) {
    .dnx-blog-layout {
        grid-template-columns: 2fr 1fr;
        gap: 40px;
    }
}

.dnx-blog-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(210, 230, 252, 0.90);
    box-shadow: 0 10px 30px rgba(2, 38, 100, 0.06);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
}

.dnx-blog-card:hover {
    box-shadow: 0 16px 40px rgba(0, 100, 220, 0.12);
}

.dnx-blog-card-img-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #00173d;
    isolation: isolate;
}

.dnx-blog-card-img-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 84%, rgba(255, 255, 255, 0.18) 95%, rgba(255, 255, 255, 0.38) 100%);
    pointer-events: none;
    z-index: 1;
}

.dnx-blog-card-img {
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    position: relative;
    z-index: 0;
}

.dnx-blog-card:hover .dnx-blog-card-img {
    transform: scale(1.02);
}

.dnx-blog-card-body {
    padding: clamp(20px, 2.8vw, 32px);
}

.dnx-blog-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.84rem;
    color: #627d98;
    margin-bottom: 10px;
}

.dnx-blog-card-title {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 700;
    color: var(--dnx-navy-title);
    margin-bottom: 14px;
    line-height: 1.3;
}

.dnx-blog-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.dnx-blog-card-title a:hover {
    color: #0070ea;
}

.dnx-blog-card-excerpt {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #486581;
    margin-bottom: 22px;
}

/* Sidebar Widgets */
.dnx-blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dnx-widget-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(210, 230, 252, 0.90);
    box-shadow: 0 8px 24px rgba(2, 38, 100, 0.05);
    padding: 24px;
}

.dnx-widget-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dnx-navy-title);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0, 140, 255, 0.2);
}

.dnx-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.dnx-site-search {
    margin-bottom: 18px;
    padding: 18px 22px;
}

.dnx-site-search .dnx-search-box {
    max-width: 780px;
    gap: 12px;
}

.dnx-site-search .dnx-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.dnx-site-search .dnx-search-icon {
    top: 50%;
    transform: translateY(-50%);
}

.dnx-site-search .dnx-btn-primary {
    flex-shrink: 0;
    padding: 10px 24px;
    white-space: nowrap;
}

.dnx-site-search > p:not(.mt-3) {
    margin-bottom: 10px;
}

.dnx-search-results-list {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding-left: 24px;
}

.dnx-search-results-list a {
    color: var(--dnx-navy-title);
    font-weight: 700;
}

.dnx-search-results-list p {
    color: #52657b;
    margin: 4px 0 0;
}

@media (max-width: 575.98px) {
    .dnx-site-search .dnx-search-box {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .dnx-site-search .dnx-search-input {
        grid-column: 1 / -1;
    }

    .dnx-site-search .dnx-btn-primary {
        grid-column: 2;
        justify-self: end;
    }

    .dnx-site-search {
        padding: 18px 16px;
        margin-bottom: 18px;
    }

    .dnx-site-search .dnx-search-icon {
        top: 13px;
        transform: none;
    }
}

.dnx-search-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    font-size: 0.9rem;
    border: 1px solid rgba(195, 220, 250, 0.9);
    border-radius: 10px;
    background: #f8fbff;
    color: #214168;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dnx-search-input:focus {
    border-color: #0088ff;
    box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.15);
}

.dnx-search-icon {
    position: absolute;
    left: 12px;
    color: #829ab1;
    pointer-events: none;
}

.dnx-recent-posts-list,
.dnx-categories-widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dnx-recent-post-item {
    border-bottom: 1px solid rgba(220, 235, 250, 0.7);
    padding-bottom: 12px;
}

.dnx-recent-post-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dnx-recent-post-link {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--dnx-navy-title);
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
    transition: color 0.2s ease;
}

.dnx-recent-post-link:hover {
    color: #0070ea;
}

.dnx-recent-post-date {
    font-size: 0.8rem;
    color: #829ab1;
}

.dnx-category-widget-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.92rem;
    font-weight: 600;
    color: #334e68;
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.2s ease;
}

.dnx-category-widget-link:hover {
    color: #0070ea;
}

.dnx-category-count {
    font-size: 0.8rem;
    background: #eef6ff;
    color: #0066cc;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
}

/* Article Page Styling */
.dnx-article-hero {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(210, 230, 252, 0.90);
    box-shadow: 0 12px 36px rgba(2, 38, 100, 0.06);
    overflow: hidden;
    margin-bottom: 36px;
}

.dnx-article-hero-img {
    width: 100%;
    max-height: 440px;
    object-fit: cover;
    display: block;
}

.dnx-article-body {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #334e68;
}

.dnx-article-body p {
    margin-bottom: 22px;
}

.dnx-fieldnote-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(210, 230, 252, 0.90);
    box-shadow: 0 6px 20px rgba(2, 38, 100, 0.04);
    padding: 20px 24px;
    margin-bottom: 16px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.dnx-fieldnote-card:hover {
    border-color: rgba(0, 140, 255, 0.4);
}

.dnx-layer-number {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 800;
    font-size: 1.1rem;
    color: #0070ea;
    margin-right: 8px;
}

.dnx-quote-callout {
    background: linear-gradient(135deg, rgba(0, 140, 255, 0.06), rgba(0, 210, 255, 0.02));
    border-left: 4px solid #0088ff;
    border-radius: 0 14px 14px 0;
    padding: 20px 26px;
    margin: 32px 0;
    font-style: italic;
    font-size: 1.05rem;
    color: #102a43;
}

/* Detail Section Headers */
.dnx-detail-section {
    margin-bottom: clamp(40px, 6vh, 68px);
}

.dnx-section-header .dnx-section-title {
    font-size: clamp(1.6rem, 2.5vw, 2.3rem);
    font-weight: 800;
    color: var(--dnx-navy-title);
    margin-top: 8px;
    margin-bottom: 6px;
}

.dnx-section-header .dnx-section-subtitle {
    color: var(--dnx-text-body);
    font-size: 1.05rem;
    max-width: 620px;
    margin: 0 auto;
}

/* 4-Column Grid */
.dnx-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.dnx-feature-pillar-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dnx-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.dnx-tag {
    display: inline-block;
    padding: 3px 10px;
    background: #edf5fe;
    color: #0b57de;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid rgba(11, 87, 222, 0.12);
}

/* 5-Stage Process Pipeline */
.dnx-process-pipeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    position: relative;
}

.dnx-process-step {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(210, 230, 252, 0.90);
    box-shadow: 0 10px 28px rgba(2, 38, 100, 0.06);
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dnx-process-step:hover {
    box-shadow: 0 16px 36px rgba(0, 110, 255, 0.12);
    border-color: rgba(0, 180, 255, 0.45);
}

.dnx-step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00caff 0%, #005ce6 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 150, 255, 0.35);
    margin-bottom: 14px;
}

.dnx-step-title {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--dnx-navy-title);
    margin-bottom: 6px;
}

.dnx-step-desc {
    color: var(--dnx-text-body);
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: 12px;
}

.dnx-step-meta {
    margin-top: auto;
    font-size: 0.76rem;
    font-weight: 700;
    color: #0077ff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f0f7ff;
    padding: 4px 10px;
    border-radius: 8px;
}

/* Guarantee / Standard Cards */
.dnx-guarantee-card {
    text-align: left;
    padding: 26px 22px;
}

.dnx-senior-engineers {
    margin-bottom: clamp(44px, 6vw, 72px);
}

.dnx-engineers-media-box {
    position: relative;
    border-radius: 9px;
    overflow: hidden;
    background: #eaf2f8;
}

.dnx-engineers-img {
    width: 100%;
    aspect-ratio: 1.38 / 1;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.dnx-engineers-media-box:hover .dnx-engineers-img {
    transform: scale(1.03);
}

.dnx-senior-engineers-copy {
    max-width: 540px;
    margin-inline: auto;
}

.dnx-senior-engineers .dnx-section-title {
    margin: 12px 0;
    text-align: left;
}

.dnx-senior-engineers .dnx-section-subtitle {
    margin: 0 0 18px;
    text-align: left;
}

.dnx-senior-engineers-list {
    display: grid;
    gap: 11px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dnx-senior-engineers-list li {
    position: relative;
    margin: 0;
    padding-left: 20px;
    color: #33445d;
    font-size: 0.94rem;
    line-height: 1.5;
}

.dnx-senior-engineers-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: 700;
}

/* 3 AVIF Images Studio Gallery */
.dnx-studio-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.dnx-studio-gallery-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(210, 230, 252, 0.90);
    box-shadow: 0 14px 34px rgba(2, 38, 100, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dnx-studio-gallery-item::after {
    content: '';
    position: absolute;
    inset: 0 0 44px;
    background: linear-gradient(180deg, transparent 80%, rgba(255, 255, 255, 0.18) 94%, rgba(255, 255, 255, 0.35) 100%);
    pointer-events: none;
    z-index: 1;
}

.dnx-studio-gallery-item:hover {
    box-shadow: 0 20px 45px rgba(0, 110, 255, 0.14);
}

.dnx-studio-gallery-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    position: relative;
    z-index: 0;
}

.dnx-studio-gallery-item:hover .dnx-studio-gallery-img {
    transform: scale(1.05);
}

.dnx-studio-img-caption {
    padding: 12px 16px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--dnx-navy-title);
    background: #ffffff;
    border-top: 1px solid rgba(210, 230, 252, 0.7);
    text-align: center;
    position: relative;
    z-index: 2;
}

@media (max-width: 991.98px) {
    .dnx-senior-engineers .dnx-section-title,
    .dnx-senior-engineers .dnx-section-subtitle {
        text-align: left;
    }

    .dnx-engineers-img {
        aspect-ratio: 1.55 / 1;
    }

    .dnx-studio-gallery-grid {
        grid-template-columns: 1fr;
    }

    .dnx-studio-gallery-img {
        height: 200px;
    }
}

.dnx-guarantee-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(0, 150, 255, 0.08);
    color: var(--dnx-primary-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 150, 255, 0.2);
}

.dnx-guarantee-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dnx-navy-title);
    margin-bottom: 8px;
}

.dnx-guarantee-text {
    color: var(--dnx-text-body);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}

/* Inside the Studio Testimonial Card */
.dnx-studio-testimonial-card {
    max-width: 860px;
    margin: 0 auto;
    background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 100%);
    border-radius: 28px;
    border: 1px solid rgba(0, 140, 255, 0.18);
    box-shadow: 0 20px 50px rgba(0, 40, 120, 0.09);
    padding: clamp(32px, 4vw, 50px);
    position: relative;
    text-align: center;
}

.dnx-quote-symbol {
    font-size: 4rem;
    line-height: 1;
    color: rgba(0, 160, 255, 0.22);
    font-family: Georgia, serif;
    margin-bottom: -10px;
}

.dnx-quote-body {
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
    font-weight: 600;
    color: var(--dnx-navy-title);
    line-height: 1.45;
    font-style: italic;
    margin: 0 0 24px 0;
}

.dnx-quote-author {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.dnx-author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00173d, #005ce6);
    color: #ffffff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.dnx-author-details {
    text-align: left;
}

.dnx-author-name {
    font-weight: 700;
    color: var(--dnx-navy-title);
    font-size: 1.05rem;
}

.dnx-author-role {
    font-size: 0.88rem;
    color: var(--dnx-text-body);
}

.dnx-verified-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 202, 255, 0.1);
    color: #0077ff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid rgba(0, 202, 255, 0.25);
}

/* Call to Action Banner */
.dnx-idea-banner {
    background: linear-gradient(135deg, #001538 0%, #002868 60%, #001538 100%);
    box-shadow: 0 24px 60px rgba(0, 20, 60, 0.25);
    border: 1px solid rgba(0, 180, 255, 0.2);
}

.dnx-btn-large {
    padding: 14px 28px;
    font-size: 1.05rem;
}

/* Responsive adjustments for Detail Page */
@media (max-width: 1199.98px) {
    .dnx-process-pipeline {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .dnx-grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    .dnx-process-pipeline {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 576px) {
    .dnx-grid-4 {
        grid-template-columns: 1fr;
    }

    .dnx-process-pipeline {
        grid-template-columns: 1fr;
    }

    .dnx-quote-author {
        flex-direction: column;
        text-align: center;
    }

    .dnx-author-details {
        text-align: center;
    }
}

/* ==========================================================================
   Legal Documents Styles (Terms & Conditions / Privacy Policy)
   ========================================================================== */
.dnx-legal-container {
    max-width: 1060px;
    margin: 0 auto clamp(40px, 6vh, 64px) auto;
}

.dnx-legal-card {
    background: #ffffff;
    border: 1px solid rgba(210, 230, 252, 0.90);
    border-radius: 20px;
    padding: clamp(24px, 3.5vw, 44px);
    box-shadow: 0 10px 32px rgba(2, 38, 100, 0.05), 0 2px 6px rgba(0, 140, 255, 0.03);
    margin-bottom: 24px;
}

.dnx-legal-badge-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.dnx-legal-effective-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(0, 136, 255, 0.08);
    color: #0070ea;
    border: 1px solid rgba(0, 136, 255, 0.20);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dnx-legal-parties {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e3a5f;
}

.dnx-legal-preamble {
    font-size: 1.02rem;
    line-height: 1.75;
    color: #334e68;
    margin-bottom: 24px;
}

.dnx-legal-section {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid rgba(220, 235, 252, 0.75);
}

.dnx-legal-section:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

.dnx-legal-sec-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.dnx-legal-sec-num {
    display: inline-block;
    color: #0088ff;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(0, 136, 255, 0.09);
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.dnx-legal-sec-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dnx-navy-title);
    margin: 0;
}

.dnx-legal-text {
    font-size: 0.96rem;
    line-height: 1.7;
    color: #486581;
    margin-bottom: 14px;
}

.dnx-legal-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 16px;
}

.dnx-legal-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #486581;
}

.dnx-legal-list li::before {
    content: "\2022";
    position: absolute;
    left: 8px;
    top: 0;
    color: #0088ff;
    font-size: 1.3rem;
    line-height: 1.2;
}

.dnx-clause-callout {
    background: #fffdf5;
    border: 1px solid rgba(230, 160, 20, 0.35);
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 16px 0;
}

.dnx-clause-callout-title {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #b45309;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dnx-clause-callout-text {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #78350f;
    margin: 0;
}

/* Consistent readable body copy across site cards */
.dnx-card-text,
.dnx-service-card-desc,
.dnx-about-feature-desc,
.dnx-mv-desc,
.dnx-blog-card-excerpt,
.dnx-detail-lead-desc,
.dnx-step-desc,
.dnx-guarantee-text,
.dnx-feature-desc,
.dnx-inner-subtitle,
.dnx-contact-intro,
.dnx-legal-contact-card p,
.dnx-clause-callout-text,
.dnx-section-header .dnx-section-subtitle,
.dnx-legal-text,
.dnx-legal-list li {
    color: #33445d;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.6;
    text-shadow: none;
}

.dnx-legal-contact-card {
    background: linear-gradient(135deg, #f7faff 0%, #eef5fc 100%);
    border: 1px solid rgba(200, 225, 252, 0.90);
    border-radius: 14px;
    padding: 20px;
    margin-top: 14px;
}

.dnx-legal-contact-title {
    font-weight: 700;
    color: var(--dnx-navy-title);
    margin-bottom: 10px;
    font-size: 1.05rem;
}

.dnx-legal-contact-card p {
    margin-bottom: 6px;
    font-size: 0.93rem;
    color: #334e68;
}

.dnx-legal-contact-card p:last-child {
    margin-bottom: 0;
}

.dnx-legal-contact-card a {
    color: #0070ea;
    text-decoration: none;
    font-weight: 600;
}

.dnx-legal-contact-card a:hover {
    text-decoration: underline;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .dnx-view-index .dnx-hero-content {
        width: clamp(320px, 42vw, 460px);
    }

    .dnx-view-index .dnx-hero-title {
        font-size: clamp(2.6rem, 5vw, 3.8rem);
    }

    .dnx-view-index .dnx-hero-visual-wrapper {
        left: clamp(340px, 43vw, 500px);
    }

    .dnx-view-index .dnx-features-card {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: clamp(12px, 2vh, 20px);
    }
}

@media (min-width: 992px) and (max-height: 700px) {
    html,
    body,
    body.dnx-body {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .dnx-view-index .dnx-app-wrapper {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .dnx-view-index .dnx-main-content {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .dnx-view-index .dnx-page-container {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
        justify-content: space-between;
        gap: clamp(4px, 1vh, 8px);
        padding: clamp(6px, 1.2vh, 10px) clamp(18px, 2vw, 28px);
    }

    .dnx-view-index .dnx-hero-section {
        flex: 1 1 0;
        min-height: 0;
    }

    .dnx-view-index .dnx-features-section {
        flex: 0 1 auto;
        min-height: 0;
        margin: clamp(4px, 0.8vh, 8px) 0;
    }

    .dnx-view-index .dnx-features-card {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: clamp(8px, 1.5vh, 12px) clamp(10px, 1.3vw, 18px);
    }

    .dnx-view-index .dnx-feature-icon-badge {
        width: clamp(38px, 6.5vh, 52px);
        height: clamp(38px, 6.5vh, 52px);
        margin-bottom: clamp(4px, 0.8vh, 7px);
    }

    .dnx-view-index .dnx-feature-title {
        font-size: clamp(0.78rem, 1.3vh, 0.92rem);
    }

    .dnx-view-index .dnx-accent-line {
        margin-top: 3px;
        margin-bottom: 4px;
    }

    .dnx-view-index .dnx-feature-desc {
        font-size: clamp(0.68rem, 1.15vh, 0.78rem);
        line-height: 1.28;
    }

    .dnx-view-index .dnx-hero-title {
        font-size: clamp(2.35rem, 5.2vh, 3.5rem);
        margin-bottom: clamp(8px, 1.5vh, 14px);
    }

    .dnx-view-index .dnx-hero-description {
        margin-bottom: clamp(8px, 1.6vh, 14px);
    }
}

@media (max-width: 991.98px) and (max-height: 650px) {
    html,
    body.dnx-body,
    body.dnx-view-index {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .dnx-view-index .dnx-app-wrapper {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .dnx-view-index .dnx-main-content {
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        min-height: calc(100vh - 60px);
        min-height: calc(100dvh - 60px);
        overflow: hidden;
    }

    .dnx-view-index .dnx-page-container {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
        min-height: calc(100dvh - 60px);
        justify-content: center;
        gap: 0;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .dnx-view-index .dnx-hero-section {
        flex: 1 1 auto;
        min-height: 0;
    }

    .dnx-view-index .dnx-hero-grid {
        height: 100%;
        justify-content: center;
    }

    .dnx-view-index .dnx-hero-title {
        font-size: clamp(1.7rem, 5vh, 2.2rem);
        margin-bottom: 5px;
    }

    .dnx-view-index .dnx-hero-description {
        font-size: 0.78rem;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    .dnx-view-index .dnx-hero-visual-wrapper {
        height: clamp(72px, 16vh, 110px) !important;
        margin-top: 0 !important;
    }
}

@media (min-width: 992px) and (max-height: 500px) {
    .dnx-view-index .dnx-hero-visual-wrapper {
        opacity: 0.55;
    }

    .dnx-view-index .dnx-features-card {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .dnx-view-index .dnx-feature-icon-badge {
        width: 34px;
        height: 34px;
        margin-bottom: 2px;
    }

    .dnx-view-index .dnx-feature-title {
        font-size: 0.72rem;
    }

    .dnx-view-index .dnx-feature-desc {
        font-size: 0.64rem;
        line-height: 1.15;
    }
}