/* NetDevNow corporate home page; scoped styles preserve existing site layouts */
:root {
    --ndn-ink: #0b1b32;
    --ndn-navy: #0b1930;
    --ndn-blue: #2563eb;
    --ndn-blue2: #5b9cff;
    --ndn-muted: #53647b;
    --ndn-line: #e3eaf2;
    --ndn-bg: #f5f8fc
}

html {
    scroll-behavior: smooth
}

body {
    font-family: Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    color: var(--ndn-ink);
    background: #fff
}

.ndn-hero, .ndn-section, .ndn-engagement, .ndn-contact {
    overflow: hidden
}

.ndn-hero {
    padding: 105px 0 110px;
    background: radial-gradient(ellipse at 85% 10%,#193b6a 0%,transparent 40%),linear-gradient(120deg,#08172c,#102b4c);
    color: #fff
}

.ndn-eyebrow, .ndn-kicker {
    font-size: .75rem;
    letter-spacing: .16em;
    font-weight: 800;
    color: #2764db;
    text-transform: uppercase
}

.ndn-eyebrow {
    color: #a5c7ff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px
}

.ndn-status-dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: #4de0b3;
    box-shadow: 0 0 0 5px rgba(77,224,179,.12)
}

.ndn-hero h1 {
    font-size: clamp(2.7rem,5.4vw,4.8rem);
    line-height: 1.08;
    letter-spacing: -.05em;
    font-weight: 800;
    margin: 0 0 27px;
    max-width: 800px
}

    .ndn-hero h1 span {
        color: #80b3ff
    }

.ndn-lead {
    font-size: 1.21rem;
    line-height: 1.7;
    color: #e1eaf6;
    max-width: 670px;
    margin-bottom: 18px
}

.ndn-hero-support {
    color: #aabbd0;
    line-height: 1.8;
    max-width: 670px
}

.ndn-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px
}

.ndn-button {
    display: inline-flex;
    gap: 22px;
    align-items: center;
    justify-content: center;
    padding: 15px 22px;
    border-radius: 7px;
    font-weight: 750;
    text-decoration: none;
    transition: transform .2s,background .2s
}

    .ndn-button:hover {
        transform: translateY(-2px)
    }

.ndn-button-primary {
    background: #3479fa;
    color: white
}

    .ndn-button-primary:hover {
        background: #5590ff;
        color: white
    }

.ndn-button-outline {
    border: 1px solid #627a98;
    color: white
}

    .ndn-button-outline:hover {
        background: #ffffff12;
        color: white
    }

.ndn-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin-top: 30px;
    color: #bbd0e9;
    font-size: .86rem
}

.ndn-feature-panel {
    background: #fff;
    color: var(--ndn-ink);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 25px 70px #0005;
    position: relative
}

.ndn-panel-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #60718a;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    margin-bottom: 28px
}

.ndn-panel-mark {
    background: #eaf1ff;
    color: #1b59c2;
    padding: 10px;
    border-radius: 7px;
    letter-spacing: 0;
    font-size: .9rem
}

.ndn-feature-panel h2 {
    font-size: 1.7rem;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.035em;
    margin-bottom: 28px
}

.ndn-feature-row {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--ndn-line)
}

.ndn-feature-number {
    color: #2764db;
    font-size: .75rem;
    font-weight: 800;
    padding-top: 4px
}

.ndn-feature-row strong, .ndn-feature-row small {
    display: block
}

.ndn-feature-row strong {
    font-size: .94rem
}

.ndn-feature-row small {
    color: #61718a;
    margin-top: 5px
}

.ndn-panel-bottom {
    border-top: 1px solid var(--ndn-line);
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .7rem;
    font-weight: 800;
    color: #334761;
    letter-spacing: .06em
}

    .ndn-panel-bottom span {
        color: #8291a5
    }

.ndn-proof {
    background: #fff;
    border-bottom: 1px solid var(--ndn-line);
    padding: 31px 0
}

.ndn-proof-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 12px;
    border-right: 1px solid var(--ndn-line)
}

.ndn-proof .col-lg-3:last-child .ndn-proof-item {
    border: 0
}

.ndn-proof-item strong {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -.05em;
    color: #133e84
}

.ndn-proof-item span {
    font-size: .83rem;
    line-height: 1.4;
    color: #53647b;
    max-width: 155px
}

.ndn-section {
    padding: 100px 0
}

.ndn-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 35px;
    margin-bottom: 40px
}

    .ndn-section-heading h2, .ndn-engagement h2, .ndn-contact h2 {
        font-size: clamp(2rem,3.4vw,3.1rem);
        line-height: 1.16;
        font-weight: 800;
        letter-spacing: -.045em;
        margin: 12px 0 0
    }

    .ndn-section-heading > p {
        max-width: 450px;
        color: #5b6b80;
        line-height: 1.75;
        margin: 0
    }

.ndn-service {
    height: 100%;
    border: 1px solid var(--ndn-line);
    border-radius: 10px;
    padding: 32px;
    background: white;
    transition: box-shadow .2s,transform .2s,border-color .2s
}

    .ndn-service:hover {
        box-shadow: 0 16px 40px #112f5a12;
        transform: translateY(-4px);
        border-color: #bed2f5
    }

.ndn-service-index {
    font-size: .69rem;
    letter-spacing: .12em;
    color: #2b68d0;
    font-weight: 800
}

.ndn-service h3 {
    font-size: 1.27rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 24px 0 13px
}

.ndn-service p {
    color: #596a80;
    line-height: 1.75;
    font-size: .94rem;
    min-height: 100px
}

.ndn-service-tags {
    font-size: .8rem;
    color: #2259ad;
    font-weight: 700;
    border-top: 1px solid var(--ndn-line);
    padding-top: 16px;
    margin-top: 16px
}

.ndn-engagement {
    background: #0d2b50;
    color: white;
    padding: 78px 0
}

.ndn-kicker-light {
    color: #8ab9ff
}

.ndn-engagement h2 {
    margin-bottom: 18px
}

.ndn-engagement p {
    max-width: 650px;
    color: #c6d8ee;
    line-height: 1.8;
    font-size: 1.04rem
}

.ndn-engagement-box {
    background: #ffffff12;
    border: 1px solid #ffffff30;
    border-radius: 10px;
    padding: 30px
}

    .ndn-engagement-box strong {
        display: block;
        margin-bottom: 17px;
        font-size: 1.12rem
    }

    .ndn-engagement-box div {
        padding: 9px 0;
        color: #d8e6f8
    }

    .ndn-engagement-box a {
        display: inline-block;
        color: white;
        font-weight: 800;
        margin-top: 17px;
        text-decoration: underline;
        text-underline-offset: 5px
    }

.ndn-work {
    background: var(--ndn-bg)
}

.ndn-project {
    display: block;
    height: 100%;
    background: white;
    border: 1px solid var(--ndn-line);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: var(--ndn-ink);
    transition: transform .2s,box-shadow .2s
}

    .ndn-project:hover {
        color: var(--ndn-ink);
        transform: translateY(-4px);
        box-shadow: 0 15px 40px #1737611a
    }

    .ndn-project img {
        width: 100%;
        height: 175px;
        object-fit: cover;
        display: block
    }

.ndn-project-body {
    padding: 24px
}

    .ndn-project-body span {
        color: #2a65ca;
        letter-spacing: .12em;
        font-size: .68rem;
        font-weight: 800
    }

    .ndn-project-body h3 {
        font-size: 1.15rem;
        font-weight: 800;
        margin: 12px 0
    }

    .ndn-project-body p {
        font-size: .88rem;
        color: #5a6a7f;
        line-height: 1.7;
        min-height: 75px
    }

    .ndn-project-body strong {
        font-size: .84rem;
        color: #205ac3
    }

.ndn-approach {
    background: #fff
}

.ndn-step {
    padding: 8px 20px 8px 0
}

    .ndn-step span {
        font-size: 2.8rem;
        font-weight: 800;
        color: #d4e3fb;
        letter-spacing: -.06em
    }

    .ndn-step h3 {
        font-size: 1.18rem;
        font-weight: 800;
        margin: 16px 0 12px
    }

    .ndn-step p {
        color: #61718a;
        line-height: 1.75
    }

.ndn-contact {
    background: #eaf2ff;
    padding: 90px 0
}

    .ndn-contact h2 {
        margin-bottom: 20px
    }

    .ndn-contact .col-lg-7 > p {
        font-size: 1.08rem;
        line-height: 1.8;
        color: #50637c;
        max-width: 620px
    }

.ndn-contact-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px
}

    .ndn-contact-tags span {
        border: 1px solid #cbdcf6;
        border-radius: 100px;
        padding: 8px 13px;
        font-size: .8rem;
        font-weight: 700;
        color: #285a9e;
        background: #fff9
    }

.ndn-contact-panel {
    background: white;
    border: 1px solid #d8e5f7;
    padding: 32px;
    border-radius: 10px;
    box-shadow: 0 20px 50px #17376112
}

.ndn-contact-label {
    font-size: .72rem;
    color: #2b68d0;
    font-weight: 800;
    letter-spacing: .14em;
    margin-bottom: 20px
}

.ndn-contact-primary {
    display: block;
    font-size: clamp(1.1rem,2vw,1.45rem);
    font-weight: 800;
    color: #123d83;
    overflow-wrap: anywhere;
    text-decoration: none
}

.ndn-contact-phone {
    display: block;
    margin: 13px 0 22px;
    color: #193d72;
    text-decoration: none;
    font-weight: 700
}

.ndn-contact-panel p {
    color: #6b7a8c;
    line-height: 1.7
}

.ndn-contact-footer {
    border-top: 1px solid var(--ndn-line);
    padding-top: 17px;
    color: #345984;
    font-size: .82rem;
    font-weight: 700
}

    .ndn-contact-footer span {
        padding: 0 7px
    }

@media(max-width:991.98px) {
    .ndn-hero {
        padding: 70px 0
    }

    .ndn-section {
        padding: 70px 0
    }

    .ndn-section-heading {
        display: block
    }

        .ndn-section-heading > p {
            margin-top: 15px
        }

    .ndn-proof-item {
        border: 0
    }

    .ndn-service p, .ndn-project-body p {
        min-height: 0
    }
}

@media(max-width:575.98px) {
    .ndn-hero {
        padding: 55px 0
    }

        .ndn-hero h1 {
            font-size: 2.5rem
        }

    .ndn-feature-panel {
        padding: 23px
    }

    .ndn-proof-item {
        padding: 8px 0;
        display: block
    }

        .ndn-proof-item span {
            display: block
        }

    .ndn-section {
        padding: 55px 0
    }

    .ndn-engagement, .ndn-contact {
        padding: 55px 0
    }

    .ndn-service {
        padding: 25px
    }
}

/* Enterprise experience */
.ndn-experience {
    padding: 76px 0;
    background: #f5f8fc;
    border-bottom: 1px solid var(--ndn-line)
}

.ndn-experience-card {
    height: 100%;
    min-height: 116px;
    padding: 24px 16px;
    border: 1px solid #e1e9f4;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 9px;
    box-shadow: 0 8px 24px #17376108
}

    .ndn-experience-card strong {
        font-size: 1.06rem;
        font-weight: 800;
        line-height: 1.3;
        color: #173b70
    }

    .ndn-experience-card span {
        font-size: .78rem;
        color: #64758c
    }

.ndn-experience-disclaimer {
    font-size: .78rem;
    color: #718096;
    margin: 22px 0 0;
    line-height: 1.6
}

@media(max-width:767.98px) {
    .ndn-experience {
        padding: 55px 0
    }
}

/* NetDevNow logo */
.ndn-hero-brand {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 26px;
    box-shadow: 0 12px 35px rgba(0,0,0,.15)
}

.ndn-logo {
    display: block;
    width: min(100%,300px);
    height: auto;
    object-fit: contain
}

@media(max-width:575.98px) {
    .ndn-hero-brand {
        padding: 9px 12px
    }

    .ndn-logo {
        width: 230px
    }
}



/* ============================================
   NETDEVNOW BLOG
   ============================================ */

.ndn-blog-hero {
    padding: 90px 0 85px;
    background: radial-gradient( ellipse at 85% 10%, #193b6a 0%, transparent 40% ), linear-gradient(120deg, #08172c, #102b4c);
    color: #fff;
}

    .ndn-blog-hero h1 {
        font-size: clamp(2.6rem, 5vw, 4.2rem);
        font-weight: 800;
        letter-spacing: -.045em;
        line-height: 1.12;
        margin: 22px 0;
    }

        .ndn-blog-hero h1 span {
            color: #80b3ff;
        }

    .ndn-blog-hero > .container > p {
        color: #c6d8ee;
        font-size: 1.1rem;
        line-height: 1.8;
        max-width: 760px;
    }

.ndn-blog-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 25px;
    margin-top: 30px;
    color: #bbd0e9;
    font-size: .87rem;
}

/* Article section */

.ndn-blog-section {
    background: #f5f8fc;
}

/* Article cards */

.ndn-blog-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3eaf2;
    border-radius: 10px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .ndn-blog-card:hover {
        transform: translateY(-4px);
        border-color: #bed2f5;
        box-shadow: 0 16px 40px rgba(17,47,90,.09);
    }

.ndn-blog-card-top {
    padding: 26px 28px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ndn-blog-category {
    color: #2764db;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.ndn-blog-date {
    color: #75849a;
    font-size: .82rem;
}

.ndn-blog-card-content {
    padding: 20px 28px 28px;
    flex: 1;
}

    .ndn-blog-card-content h3 {
        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1.35;
        letter-spacing: -.025em;
        margin-bottom: 18px;
    }

        .ndn-blog-card-content h3 a {
            color: #0b1b32;
            text-decoration: none;
        }

            .ndn-blog-card-content h3 a:hover {
                color: #2563eb;
            }

    .ndn-blog-card-content p {
        color: #596a80;
        font-size: .94rem;
        line-height: 1.8;
        margin-bottom: 0;
    }

.ndn-blog-card-footer {
    border-top: 1px solid #e3eaf2;
    padding: 19px 28px;
}

    .ndn-blog-card-footer a {
        font-size: .88rem;
        font-weight: 800;
        color: #205ac3;
        text-decoration: none;
    }

        .ndn-blog-card-footer a:hover {
            color: #0b1b32;
        }

/* Empty state */

.ndn-blog-empty {
    padding: 70px 20px;
}

    .ndn-blog-empty i {
        font-size: 3rem;
        color: #8ba9d5;
    }

    .ndn-blog-empty h3 {
        margin-top: 20px;
        font-weight: 800;
    }

    .ndn-blog-empty p {
        color: #61718a;
    }

/* Bottom CTA */

.ndn-blog-cta {
    background: #0d2b50;
    padding: 75px 0;
    color: #fff;
}

    .ndn-blog-cta h2 {
        font-size: clamp(1.8rem, 3vw, 2.7rem);
        font-weight: 800;
        letter-spacing: -.035em;
        margin: 14px 0;
    }

    .ndn-blog-cta p {
        color: #c6d8ee;
        line-height: 1.8;
        max-width: 720px;
        margin-bottom: 0;
    }

/* Responsive */

@media (max-width: 767.98px) {
    .ndn-blog-hero {
        padding: 60px 0;
    }

        .ndn-blog-hero h1 {
            font-size: 2.4rem;
        }

    .ndn-blog-card-top {
        padding: 24px 24px 0;
    }

    .ndn-blog-card-content {
        padding: 18px 24px 24px;
    }

    .ndn-blog-card-footer {
        padding: 18px 24px;
    }

    .ndn-blog-cta {
        padding: 55px 0;
    }
}



/* ==========================================
   NETDEVNOW CORPORATE NAVIGATION
   ========================================== */

.ndn-navbar {
    background: #ffffff;
    border-bottom: 1px solid #e3eaf2;
    padding: 12px 0;
    box-shadow: 0 4px 20px rgba(11, 27, 50, .04);
    z-index: 1030;
}

/* Logo */

.ndn-navbar-brand {
    display: inline-flex;
    align-items: center;
    margin-right: 28px;
    padding: 0;
}

.ndn-navbar-logo {
    display: block;
    width: auto;
    height: 58px;
    max-width: 225px;
    object-fit: contain;
}

/* Navigation links */

.ndn-nav-links {
    gap: 5px;
}

    .ndn-nav-links .nav-link {
        color: #40536c;
        font-size: .91rem;
        font-weight: 650;
        padding: 10px 13px !important;
        border-radius: 6px;
        transition: background .2s, color .2s;
    }

        .ndn-nav-links .nav-link:hover {
            background: #f0f5ff;
            color: #205ac3;
        }

        .ndn-nav-links .nav-link.active {
            background: #eaf1ff;
            color: #205ac3 !important;
            font-weight: 800;
        }

/* C2C availability indicator */

.ndn-nav-availability {
    margin-left: 15px;
}

.ndn-availability {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid #dcebe5;
    background: #f1faf6;
    border-radius: 100px;
    color: #247253;
    font-size: .76rem;
    font-weight: 750;
    white-space: nowrap;
}

.ndn-availability-dot {
    width: 7px;
    height: 7px;
    background: #24b47e;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(36, 180, 126, .12);
}

/* Contact button */

.ndn-nav-cta {
    margin-left: 12px;
}

.ndn-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    background: #2563eb;
    color: #ffffff;
    border-radius: 7px;
    font-size: .87rem;
    font-weight: 750;
    white-space: nowrap;
    text-decoration: none;
    transition: background .2s, transform .2s;
}

    .ndn-nav-button:hover {
        background: #174cbb;
        color: #ffffff;
        transform: translateY(-1px);
    }

/* Mobile and tablet */

@media (max-width: 1199.98px) {
    .ndn-navbar-logo {
        height: 48px;
        max-width: 180px;
    }

    .ndn-nav-links .nav-link {
        padding: 10px 9px !important;
        font-size: .85rem;
    }

    .ndn-nav-availability {
        margin-left: 5px;
    }

    .ndn-availability {
        font-size: .69rem;
        padding: 8px;
    }

    .ndn-nav-cta {
        margin-left: 5px;
    }
}

@media (max-width: 991.98px) {
    .ndn-navbar {
        padding: 10px 0;
    }

    .ndn-navbar-logo {
        height: 48px;
        max-width: 200px;
    }

    .ndn-navbar .navbar-collapse {
        padding-top: 18px;
        padding-bottom: 12px;
    }

    .ndn-nav-links {
        align-items: stretch !important;
        gap: 5px;
    }

        .ndn-nav-links .nav-link {
            padding: 12px 14px !important;
            font-size: .95rem;
        }

    .ndn-nav-availability,
    .ndn-nav-cta {
        margin-left: 0;
        margin-top: 12px;
    }

    .ndn-nav-button {
        width: 100%;
    }
}