/*
 * NetXfer site styles, layered over the Swipe template (css/swipe.css).
 * Palette follows the template variables: navy #183B56, teal #418B78,
 * bright teal #2CA58D, coral #FC6666, mint #EBF4F6.
 */
:root {
    --nx-navy: #183B56;
    --nx-navy-deep: #0f2438;
    --nx-teal: #418B78;
    --nx-teal-bright: #2CA58D;
    --nx-mint: #EBF4F6;
    --nx-coral: #FC6666;
    --nx-ink: #171f38;
    --nx-muted: #5b6b7f;
    --nx-line: #E5EAF4;
    --nx-soft: #eff1f5;
}

html { scroll-behavior: smooth; }
body { color: var(--nx-ink); }
[id] { scroll-margin-top: 6rem; }

/* ---- navbar: dark at the top too, so it sits on the hero ---- */
#navbar-main {
    background-color: rgba(15, 36, 56, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background-color .25s ease, padding .25s ease;
}
#navbar-main .navbar-brand img { height: 2.6rem; width: auto; }
#navbar-main .navbar-brand-light { display: none; }
#navbar-main .navbar-brand-dark { display: block; }
#navbar-main .collapse-brand img { height: 2.4rem; width: auto; }
@media (min-width: 992px) {
    #navbar-main .nav-link { color: rgba(255, 255, 255, 0.85) !important; font-weight: 500; white-space: nowrap; }
    #navbar-main .nav-link:hover { color: #fff !important; }
}
#navbar-main .btn-outline-soft {
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: #fff !important;
}
#navbar-main .btn-outline-soft:hover { background: rgba(255, 255, 255, 0.1); }
#navbar-main .navbar-toggler-icon { filter: invert(1) brightness(2); }
@media (max-width: 991.98px) {
    #navbar-main .navbar-collapse { background: #fff; opacity: 1; box-shadow: 0 1rem 3rem rgba(15, 36, 56, 0.35); }
    #navbar-main .navbar-collapse .nav-link { color: var(--nx-navy) !important; }
}

/* ---- hero ---- */
.nx-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding-top: 9rem;
    padding-bottom: 4rem;
    background:
        radial-gradient(900px 480px at 85% -10%, rgba(44, 165, 141, 0.38), transparent 60%),
        radial-gradient(700px 400px at -10% 110%, rgba(252, 102, 102, 0.18), transparent 60%),
        linear-gradient(160deg, #0f2438 0%, #183B56 55%, #1d4664 100%);
}
@media (min-width: 992px) { .nx-hero { padding-top: 11rem; padding-bottom: 6rem; } }
.nx-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 85%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 85%);
    pointer-events: none;
}
.nx-hero > .container { position: relative; }
.nx-hero h1 { color: #fff; letter-spacing: -0.02em; line-height: 1.08; }
.nx-hero .lead { color: rgba(255, 255, 255, 0.84); font-size: 1.2rem; }
.nx-hero .nx-sub { color: rgba(255, 255, 255, 0.65); font-size: .9rem; }
.nx-hero a:not(.btn) { color: #9fe3d1; }

.nx-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem .95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
}
.nx-badge:hover { color: #fff; background: rgba(255, 255, 255, 0.16); text-decoration: none; }
.nx-badge .dot {
    width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--nx-teal-bright);
    box-shadow: 0 0 0 4px rgba(44, 165, 141, 0.28);
}

/* download buttons */
.nx-downloads .btn-download-app {
    display: inline-flex;
    align-items: center;
    padding: .75rem 1.25rem;
    margin: .25rem .4rem .25rem 0;
    border-radius: .75rem;
    text-align: left;
}
.nx-hero .btn-download-app { background: #fff; color: var(--nx-navy); border: 0; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, 0.25); }
.nx-hero .btn-download-app:hover { background: var(--nx-mint); color: var(--nx-navy); transform: translateY(-2px); }
.btn-download-app .icon-brand { font-size: 1.6rem; line-height: 1; }
.btn-download-app small { display: block; font-size: .7rem; font-weight: 400; opacity: .75; line-height: 1.1; }
.btn-download-app .nx-ver { display: block; font-size: .68rem; font-weight: 500; opacity: .7; margin-top: .15rem; min-height: .9rem; }

/* ---- the connection ladder card in the hero ---- */
.nx-ladder {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.25rem;
    padding: 1.5rem;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.3);
}
.nx-ladder .nx-ends {
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8); margin-bottom: 1rem;
}
.nx-ladder .nx-ends span { display: inline-flex; align-items: center; gap: .5rem; }
.nx-ladder .nx-ends i { color: var(--nx-teal-bright); }
.nx-route {
    display: grid;
    grid-template-columns: 2rem 1fr;
    align-items: start;
    gap: .35rem .75rem;
    padding: .8rem .9rem;
    margin-bottom: .6rem;
    border-radius: .8rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.nx-route:last-child { margin-bottom: 0; }
.nx-route .n {
    width: 2rem; height: 2rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem;
    background: rgba(255, 255, 255, 0.12); color: #fff;
}
.nx-route strong { display: block; font-size: .95rem; color: #fff; }
.nx-route small { display: block; color: rgba(255, 255, 255, 0.65); font-size: .78rem; line-height: 1.3; }
.nx-route .tag {
    grid-column: 2; justify-self: start;
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: .2rem .5rem; border-radius: .35rem; white-space: nowrap;
}
.nx-route .tag.ok { background: rgba(44, 165, 141, 0.22); color: #9fe3d1; }
.nx-route .tag.new { background: var(--nx-coral); color: #fff; }
.nx-route.is-new { border-color: rgba(252, 102, 102, 0.55); }
.nx-route.is-new .n { background: var(--nx-coral); }
.nx-ladder .nx-lock {
    margin-top: 1rem; padding-top: .9rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    font-size: .8rem; color: rgba(255, 255, 255, 0.7);
    display: flex; gap: .6rem; align-items: flex-start;
}
.nx-ladder .nx-lock i { color: var(--nx-teal-bright); margin-top: .15rem; }

/* ---- generic blocks ---- */
.nx-eyebrow {
    display: inline-block;
    font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--nx-teal); margin-bottom: .75rem;
}
.nx-new {
    display: inline-block; vertical-align: middle; margin-left: .5rem;
    font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: var(--nx-coral); padding: .22rem .5rem; border-radius: .35rem;
}
.nx-card {
    position: relative;
    height: 100%;
    padding: 2rem 1.75rem;
    border: 1px solid var(--nx-line);
    border-radius: 1.1rem;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}
.nx-card:hover { transform: translateY(-3px); box-shadow: 0 1.2rem 2.5rem rgba(24, 59, 86, 0.10); }
.nx-card h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.nx-card p { color: var(--nx-muted); margin-bottom: 0; }
.nx-icon {
    width: 3.25rem; height: 3.25rem; border-radius: .9rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nx-mint); color: var(--nx-teal); font-size: 1.3rem; margin-bottom: 1.1rem;
}
.nx-card.is-new { border-color: rgba(252, 102, 102, 0.45); }
.nx-card.is-new .nx-icon { background: #fff0f0; color: var(--nx-coral); }

.nx-pull { margin-top: -3.5rem; }
@media (min-width: 768px) { .nx-pull { margin-top: -4.5rem; } }
.nx-pull .nx-card { box-shadow: 0 1rem 2.5rem rgba(15, 36, 56, 0.12); }

/* "what's new" dark band */
.nx-dark {
    background: linear-gradient(160deg, #0f2438, #183B56);
    color: rgba(255, 255, 255, 0.86);
}
.nx-dark h2, .nx-dark h3 { color: #fff; }
.nx-dark .nx-eyebrow { color: #9fe3d1; }
.nx-dark .nx-feature {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 1.25rem; border-radius: .9rem;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
    height: 100%;
}
.nx-dark .nx-feature i {
    flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: .7rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(44, 165, 141, 0.2); color: #9fe3d1;
}
.nx-dark .nx-feature strong { display: block; color: #fff; margin-bottom: .25rem; }
.nx-dark .nx-feature p { margin: 0; font-size: .92rem; color: rgba(255, 255, 255, 0.72); }
.nx-dark a { color: #9fe3d1; }
.nx-dark .btn-white, .nx-cta .btn-white, .nx-hero .btn-white { background: #fff; color: var(--nx-navy); border-color: #fff; }
.nx-dark .btn-white:hover, .nx-cta .btn-white:hover, .nx-hero .btn-white:hover { background: var(--nx-mint); color: var(--nx-navy); }
.nx-cta .btn-outline-white, .nx-hero .btn-outline-soft { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.nx-cta .btn-outline-white:hover, .nx-hero .btn-outline-soft:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* stats */
.nx-stat { padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--nx-line); background: #fff; height: 100%; }
.nx-stat .big { font-size: 2.4rem; font-weight: 800; color: var(--nx-navy); line-height: 1; margin-bottom: .4rem; letter-spacing: -0.02em; }
.nx-stat span { color: var(--nx-muted); font-size: .95rem; }

/* steps on the how it works page */
.nx-steps { counter-reset: nxstep; list-style: none; padding-left: 0; margin: 1.5rem 0; }
.nx-steps > li {
    counter-increment: nxstep;
    position: relative;
    padding: 0 0 1.5rem 3.25rem;
    border-left: 2px solid var(--nx-line);
    margin-left: 1.1rem;
}
.nx-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.nx-steps > li::before {
    content: counter(nxstep);
    position: absolute; left: -1.2rem; top: -.15rem;
    width: 2.3rem; height: 2.3rem; border-radius: 50%;
    background: var(--nx-navy); color: #fff; font-weight: 700; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px #fff;
}
.nx-steps > li strong { display: block; color: var(--nx-navy); margin-bottom: .25rem; }
.nx-steps ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--nx-muted); }

/* article typography */
.nx-article { font-size: 1.05rem; line-height: 1.7; }
.nx-article h2 { margin-top: 3rem; margin-bottom: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.nx-article h3 { margin-top: 2rem; margin-bottom: .75rem; font-size: 1.3rem; font-weight: 700; }
.nx-article p, .nx-article li { color: #2f3a4a; }
.nx-article code {
    font-size: .88em; padding: .1em .4em; border-radius: .3em;
    background: var(--nx-soft); color: var(--nx-navy);
}
.nx-article pre {
    background: var(--nx-navy-deep); color: #d9e6f2;
    padding: 1.1rem 1.25rem; border-radius: .8rem; font-size: .85rem; overflow: auto;
}
.nx-article pre code { background: none; color: inherit; padding: 0; }
.nx-callout {
    border-left: 4px solid var(--nx-teal-bright);
    background: var(--nx-mint);
    padding: 1rem 1.25rem; border-radius: .6rem; margin: 1.5rem 0;
}
.nx-callout.warn { border-left-color: var(--nx-coral); background: #fff4f4; }
.nx-callout p:last-child { margin-bottom: 0; }
.nx-toc {
    background: #fff; border: 1px solid var(--nx-line); border-radius: 1rem; padding: 1.25rem 1.5rem;
}
.nx-toc ol { margin: 0; padding-left: 1.2rem; }
.nx-toc li { margin: .3rem 0; }
.nx-toc a { color: var(--nx-navy); }
@media (min-width: 992px) { .nx-toc.sticky { position: sticky; top: 6.5rem; } }

/* tables */
.nx-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.5rem 0; font-size: .95rem; }
.nx-table th, .nx-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--nx-line); vertical-align: top; text-align: left; }
.nx-table thead th { background: var(--nx-soft); color: var(--nx-navy); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.nx-table thead th:first-child { border-top-left-radius: .6rem; }
.nx-table thead th:last-child { border-top-right-radius: .6rem; }
.nx-table .yes { color: var(--nx-teal); font-weight: 700; }
.nx-table .no { color: var(--nx-coral); font-weight: 700; }
.nx-table .meh { color: var(--nx-muted); font-weight: 600; }
.nx-table-wrap { overflow-x: auto; }

/* Animated explainer, including its playback control bar. */
.nx-explainer-embed {
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 360px;
    overflow: hidden;
    background: var(--nx-navy-deep);
    border-radius: .75rem;
}
.nx-explainer-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.nx-explainer-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    padding-top: 1rem;
}

/* FAQ */
.nx-faq .card { border: 1px solid var(--nx-line) !important; border-radius: .9rem !important; margin-bottom: .75rem; overflow: hidden; }
.nx-faq .card-header { background: #fff; border: 0; padding: 0; }
.nx-faq .card-header .btn { padding: 1.1rem 1.25rem; color: var(--nx-navy); text-decoration: none; }
.nx-faq .card-header .btn:hover { background: var(--nx-soft); }
.nx-faq .card-header .btn .icon { color: var(--nx-teal); transition: transform .2s ease; }
.nx-faq .card-header .btn[aria-expanded="true"] .icon { transform: rotate(45deg); }
.nx-faq .card-body { padding: 0 1.25rem 1.25rem; color: #2f3a4a; }
.nx-faq .card-body ul { padding-left: 1.2rem; }

/* customers */
.nx-quote { border: 1px solid var(--nx-line); border-radius: 1rem; padding: 2rem 1.5rem; text-align: center; height: 100%; background: #fff; }
.nx-quote img { max-height: 3rem; width: auto; margin-bottom: 1rem; }
.nx-quote img.tall { max-height: 4.5rem; }
.nx-quote p { color: #2f3a4a; margin: 0; }

/* pricing / business cards */
.nx-plan { border: 1px solid var(--nx-line); border-radius: 1.2rem; padding: 2rem; height: 100%; background: #fff; }
.nx-plan.featured { border-color: var(--nx-teal); box-shadow: 0 1.2rem 2.5rem rgba(65, 139, 120, 0.15); }
.nx-plan .nx-eyebrow { margin-bottom: .25rem; }
.nx-plan h3 { font-size: 1.5rem; }
.nx-plan ul { list-style: none; padding: 0; margin: 1.25rem 0; }
.nx-plan li { padding: .4rem 0 .4rem 1.75rem; position: relative; color: #2f3a4a; }
.nx-plan li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; color: var(--nx-teal); }
.nx-plan li.minus::before { content: "\f068"; color: #b8c2cf; }

/* CTA band */
.nx-cta {
    background: linear-gradient(135deg, var(--nx-teal) 0%, var(--nx-teal-bright) 100%);
    color: #fff; border-radius: 1.5rem; padding: 3rem 2rem;
}
.nx-cta h2 { color: #fff; }
.nx-cta p { color: rgba(255, 255, 255, 0.88); }
.nx-cta .btn-white { color: var(--nx-teal); font-weight: 700; }

/* footer */
.footer { background: #fff; border-top: 1px solid var(--nx-line); }
.footer .footer-links li { margin: .3rem 0; }
.footer .footer-links a { color: #2f3a4a; }
.footer .footer-links a:hover { color: var(--nx-teal); }
.footer .nx-contact a { color: var(--nx-navy); font-weight: 600; }

/* misc */
.btn-dark { background-color: var(--nx-navy); border-color: var(--nx-navy); }
.btn-dark:hover { background-color: var(--nx-navy-deep); border-color: var(--nx-navy-deep); }
.btn-teal { background-color: var(--nx-teal); border-color: var(--nx-teal); color: #fff; }
.btn-teal:hover { background-color: #366f61; border-color: #366f61; color: #fff; }
.text-teal { color: var(--nx-teal) !important; }
.nx-kicker { font-size: 1.2rem; color: var(--nx-muted); }
.nx-page-head { padding-top: 8rem; padding-bottom: 3rem; }
@media (min-width: 992px) { .nx-page-head { padding-top: 10rem; padding-bottom: 4rem; } }
.nx-breadcrumb { font-size: .85rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 1rem; }
.nx-breadcrumb a { color: rgba(255, 255, 255, 0.85); }
.sticky-right .btn { z-index: 10; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .nx-card, .nx-hero .btn-download-app { transition: none; }
}